(精品)第3章 添加网页基本对象

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,3,章 添加网页基本对象,3.1,操作网页文件,3.2,操作文本,3.3,插入,图像,3.4,插入,Flash,对象,3.5,插入,其他基本对象,3.6,创建超连接,3.1,操作网页文件,文件的创建和存储是文档操作中最基本的部分。通常首先创建本地站点，然后根据站点设计规划添加各种空白文件，接着对这些文件进行编辑。本节讲述网页文件的基本操作包括：创建网页、打开网页、保存网页以及将网页设置为首页、设置网页属性等。,3.1.1,创建、保存网页文件,1,创建网页文件,在,Dreamweaver,MX 2004,中，可通过,3,种方法创建网页。,(1),启动,Dreamweaver,MX 2004,后，窗口中会出现一个启动页面，单击,【,创建新项目,】,下面的选项即可创建网页。,(2),单击,【,文件,】【,新建,】,命令，弹出,【,新建文档,】,对话框，选定,【,常规,】,选项卡中,【,类别,】,下的,【,基本页面,】,选项，单击,【,创建,】,按钮，即可新建一个页面，默认名称为“,Untitled-1”,。,(3),通过工具栏按钮创建网页：单击,【,视图,】【,工具栏,】【,标准工具栏,】,命令，打开标准工具栏，单击标准工具栏上的,【,新建,】,按钮。打开,【,新建文档,】,对话框，按上面的步骤操作，即可新建文件。,2,保存网页,编辑好的网页可以将其保存起来。在,Dreamweaver,MX 2004,中，用户可以保存文件、另存为文件，还可以将文件保存为模板。,(1),保存文件：单击,【,文件,】【,保存,】,命令，弹出,【,保存为,】,对话框，在,【,保存在,】,下拉列表框中选择保存文件的位置；在,【,文件名,】,文本框中输入保存文件的名称，并单击,【,保存,】,按钮。,(2),另存为文件：另存为文件就是将已经保存的文件另存倒其他位置，或以其他名称保存起来。操作步骤如下：单击,【,文件,】【,另存为,】,命令，弹出,【,保存为,】,对话框，在,【,保存在,】,下拉列表框中选择保存文件的位置；在,【,文件名,】,文本框中输入保存文件的名称，并单击,【,保存,】,按钮。,(3),保存为模板：将文件保存为模板文件后，该文件将以模板的形式存在，如果其他文件应用该模板，则其格式会与之相同。在第一次将文件保存为模板文件之前，首先要建立一个站点。操作步骤如下：单击,【,文件,】【,另存为模板,】,命令，弹出,【,另存为模板,】,对话框，在,【,站点,】,下拉列表框中选择站点；在,【,另存为,】,文本框中输入保存模板的名称，并单击,【,保存,】,按钮。,3.1.2,设置网页属性,设置网页属性包括设置网页标题、网页中文本的颜色、网页背景颜色及背景图片、网页边距等。,设置网页属性通过设置,【,页面属性,】,来完成。通过单击,【,修改,】【,页面属性,】,命令，即可打开,【,页面属性,】,对话框，,通过该对话框，用户可以设置页面、链接、网页标题等项的属性。在,【,分类,】,列表中选择某一项，对话框右侧即会出现有关该选项的属性。然后进行各选项地设置。设置完成后，单击,【,确定,】,按钮。,3.2,操作文本,文字在网页中的应用十分普遍，与其他文本处理相比网页文本处理有许多相似的部分，例如标题、段落、列表、对齐方式等，但网页文本有它独特的要求，即必须努力地精简代码，必须尽可能使样式和内容分离，必须尽可能使样式保持一定的规律。,3.2.1,添加文本,若要在网页文档中添加文本，首先应光标移到要添加文本的位置，直接输入内容或在其他应用程序中复制文本，然后切换到,Dreamweaver,的文档窗口，进行粘贴即可。输入文字时，如果需要分段，则按,Enter,键。,按常规方法，在,DreamweaverMX2004,中不能输入多个空格，只能输入一个。如果用户想要输入多个空格，则将输入法提示框上的,【,半角,】,改为,【,全角,】,即可。,3.2.2,设置文本属性,设置文本属性主要包括设置文本的字体、字号、文字颜色、对齐方式、间距。,设置方法为：选定需要设置文本属性的文本，然后选择,【,窗口,】,【,属性,】,命令，打开属性面板，通过属性面板进行设置或选择,【,文本,】,【,字体,】,菜单中的相应命令即可,3.3,插入图像,在网页中添加精致、美观的图像，会使网页变得丰富多彩。在插入图像时，首先考虑图像在页面中的整体效果，其次应综合考虑图像的质量和下载速度。图片的格式有多种，但不是所有格式的图像都可以放在网页上。目前，网络上支持的图像格式有,3,种：,JPEG,、,GIF,和,PNG,。,所以如果要将其他格式的图像放到网页上，首先需要转换成这,3,种格式。,3.3.1,插入图像,1,插入一般图像,在,Dreamweaver,中插入图像后，系统会在,HTML,中自动生成对该图像文件的引用，要确保引用正确，插入的图像文件必须位于当前站点内，如果没在当前站点中，预览时图片将无法显示。插入一般图像有两种方法，第一种方法：可以通过菜单命令插入，将光标放到要插入图像的位置，然后选择,【,插入,】【,图像,】,命令，弹出,【,选择图像源文件,】,对话框，在对话框中选择一幅图片，单击,【,插入,】,按钮，即可在网页中插入图片。第二种方法：可以通过按钮插入图像，单击,【,常用,】,子面板上的,【,图像,】,按钮，从下拉列表中选择,【,图像,】,，从弹出的,【,选择图像源文件,】,对话框中选择要插入的图像，单击,【,确认,】,按钮，即可插入图像。,2,插入交互图像,操作步骤如下：,（,1,）将插入点放置到要插入交换图像的位置，单击,【,插入,】【,图像对象,】【,鼠标经过图像,】,命令，弹出,【,插入鼠标经过图像,】,对话框。,（,2,）在对话框中首先给此交换图像命名，然后在,【,原始图像,】,框和,【,鼠标经过图像,】,框中分别通过单击,【,浏览按钮,】,，选择交换前的图像和鼠标指向时交换的图像。选中,【,预览鼠标经过图像,】,复选框，其作用是在浏览器加载页面时首先下载交换图像，以保证图像交换功能的正常实现。然后再在,【,按下时，前往的,URL】,框中设定此交换图像的超链接地址，最后单击确定按钮即可。,3.3.2,设置图像属性,选定图像，窗口最下方会出现图像属性面板。属性面板中各项的设置如下：,l,图像：图像文本框用来输入图像的名称，以方便在使用脚本语言时引用,。,l,宽：设置图像宽度。,l,高：设置图像高度。,l,源文件：此框用来设置插入图像的路径及名称。单击右端的按钮，打开,【,选择图像源,】,对话框，选择一幅图片，可以替换原来的图像。,l,链接：设置图像的链接属性。,l,替代：用于输入说明文本。在该文本框中输入的内容会显示在图像将要显示的位置。,l,类：从已定义的样式中选择为图片定义的样式。,l,编辑：“编辑”后面集合了一些常用的图片编辑工具，通过这几个工具可以在,Fireworks,窗口中编辑和优化图像、裁剪图像、重设图像、设置图像的亮度和对比度，以及锐化图像。,l,垂直边距：是图像左、右两侧与网页其他元素的距离。,l,水平边距：是图像上、下两侧与网页其他元素的距离。,l,目标：表示链接的目标文件在浏览器中的打开方式。其中包括,4,种方式：,_blank,表示将链接文件在新的窗口中打开；,_parent,表示将链接文件在上级框架集或包含该链接的窗口中打开；,_self,表示将链接文件载入到相同框架或窗口中；,_top,表示将链接文件载入到整个浏览器窗口中，将删除所有框架。,l,边框：改变“边框”的数值可以使图片添加指定数值的边框，而边框的颜色将与当前文档的文本默认颜色一致。有时为图片添加链接时，会突然出现一个蓝色的边框，这时只要将“边框”值设为,0,即可消除这个边框。,l,对齐：与普通文字的“左”、“中”、“右”对齐方式相比，图片还增加了更多的对齐选择，这个选项主要是指定图片与周围的文本的排版方式。其中设定此参数为“左对齐”和“右对齐”，可以使图片与周围的文本混合起来排列。,3.4,插入,Flash,对象,使用,Dreamweaver,MX 2004,可以在文档中插入,Flash,动画、带有样式的,Flash,按钮和,Flash,文本。,3.4.1,插入并设置,Flash,动画,1,插入,Flash,动画,插入,Flash,动画有两种方法。第一种：可以通过菜单插入,Flash,动画，首先将光标放到要插入,Flash,动画的位置，然后选择,【,插入,】【,媒体,】【Flash】,命令，打开,【,选择文件,】,对话框，在其中选择,Flash,文件，选择完成后，单击,【,确定,】,按钮，将文件图表插入到文档中。,第二种：可以通过按钮插入,Flash,动画，首先将光标放到要插入,Flash,动画的位置，然后单击,【,插入,】,面板上,【,常规,】,子面板上的,【,媒体,】,按钮，打开下拉列表，选择,Flash,，,从弹出的,【,选择文件,】,对话框中选择一幅,Flash,动画文件，单击,【,确定,】,按钮即可。插入,Flash,动画文件后按,F12,键可以浏览动画。,2,设置,Flash,动画属性,选定文件中的,Flash,动画图标，打开,Flash,属性面板，,Flash,属性面板上各属性的设置如下：,l,Flash,：,指定,Flash,动画的名称。,l,宽：指定,Flash,动画被装进浏览器时的宽度。,l,高：指定,Flash,动画被装进浏览器时的高度。,l,文件：指定,Flash,动画文件的路径。,l,循环：选中此复选框，自动循环播放,Flash,动画。,l,自动播放：选中此复选框，自动播放,Flash,动画。,l,垂直边距：设置,Flash,动画的垂直边距。,l,品质：设置,Flash,动画播放的效果。,l,比例：设置,Flash,动画文件的比例。,l,对齐：确定,Flash,动画和页面的对齐方式。,l,背景颜色：指定,Flash,动画区域的背景颜色。,l,：,编辑,Flash,动画的属性。,l,：,重置到原始尺寸。,l,：,单击该按钮，可以观察到,Flash,动画播放时的效果。,l,：,单击该按钮，在打开的对话框中可设置,Flash,动画的参数。,3.4.2,插入并设置,Flash,文本对象,1,插入,Flash,文本对象,插入,Flash,文本对象有两种方法。,第一种：可以通过菜单命令插入,Flash,文本，首先将光标放到要插入,Flash,文本对象的位置，然后选择,【,插入,】,【,媒体,】,【,Flash,文本,】,命令，打开,【,插入,Flash,文本,】,命令，打开,“,插入,Flash,文本,”,对话框，在该对话框中设置,Flash,文本属性，单击,“,确定,”,按钮，应用设置。若要编辑输入的,Flash,文本对象，可选定对象，然后单击属性面板上的,【,编辑,】,按钮。,第二种方法：可以通过按钮插入,Flash,文本对象，首先将光标放到要插入,Flash,动画的位置，然后单击,【,插入,】,面板上,【,常规,】,子面板上的,【,媒体,】,按钮，打开下拉列表，选择,【Flash,文本,】,，在弹出的,【,插入,Flash,文本,】,对话框中设置文本属性，单击,【,确定,】,按钮即可。,3.4.3,插入并设置,Flash,按钮对象,插入,Flash,按钮对象有两种方法。,第一种方法：可以通过菜单命令插入,Flash,按钮对象，首先将光标放到要插入,Flash,按钮对象的位置，然后选择,【,插入,】【,媒体,】【Flash,按钮,】,命令，打开,【,插入,Flash,按钮,】,对话框，对话框中各项的设置如下：,l,范例：显示按钮样式。,l,样式：设置按钮样式。,l,按钮文本：输入在按钮上显示的文本。,l,字体：设置按钮上文字的字体。,l,大小：设置按钮上文字的大小。,l,链接：设置链接路径。,l,目标：定义链接的目标窗口。,l,背景色：设置按钮的背景颜色。,l,另存