Dreamweaver 8和Flash 8案例教程第2章 网页中的文字、.ppt

《Dreamweaver 8和Flash 8案例教程第2章 网页中的文字、.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver 8和Flash 8案例教程第2章 网页中的文字、.ppt（84页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第2 2章章 网页中的文字、图像和导航网页中的文字、图像和导航条条 【案例案例4 4】“计算机简史计算机简史”网网页页2.1【案例案例5 5】“硬件知识硬件知识”网页网页2.2【案例案例6 6】“外设简介外设简介”网页网页 2.32.1 2.1 【案例案例4 4】“计算机简史计算机简史”网网页页2.1.1学习目标学习目标“计算机简史计算机简史”网页的显示效果如图网页的显示效果如图2-1-1所示。文字是网页的基础和灵魂，任何一所示。文字是网页的基础和灵魂，任何一个网站都离不开网页中的文字。在个网站都离不开网页中的文字。在Dreamweaver中，可以对文字的格式、字体、中，可以对文字的格式、字

2、体、字号、颜色以及对齐格式等属性进行设置。字号、颜色以及对齐格式等属性进行设置。通过本案例的学习，可以掌握这些属性设置通过本案例的学习，可以掌握这些属性设置的方法。的方法。2.1.2操作过程操作过程图图2-1-1 “计算机简史计算机简史”网页的显示效果网页的显示效果1文字属性设置文字属性设置文字的属性可以在图文字的属性可以在图2-1-2所示的文本所示的文本“属性属性”栏和图栏和图2-1-5所示的所示的“插入插入”（文（文本）栏中进行设置。本）栏中进行设置。2.1.3相关知识相关知识图图2-1-2 文本的文本的“属性属性”栏栏（1）文字标题格式的设置）文字标题格式的设置根据根据HTML语言规定，

3、页面的文本有语言规定，页面的文本有6种标题格式，它们所对应的字号大小和段种标题格式，它们所对应的字号大小和段落对齐方式都是设定好的。在落对齐方式都是设定好的。在“格式格式”下下拉列表框中，可以选择各种格式。拉列表框中，可以选择各种格式。“无无”选项：无特殊格式的规定，仅决选项：无特殊格式的规定，仅决定于浏览器本身。定于浏览器本身。“段落段落”选项：正文段落，在文字的开选项：正文段落，在文字的开始与结尾处有换行，各行的文字间距较小。始与结尾处有换行，各行的文字间距较小。“标题标题1”至至“标题标题6”选项：标题选项：标题1至标题至标题6约为中文约为中文6号至中文号至中文1号字大小。号字大小。“预

4、先格式化的预先格式化的”选项：设置预定义的选项：设置预定义的格式。格式。（2）创建字体组合）创建字体组合Dreamweaver8使用了字体组合的方使用了字体组合的方法，取代了简单地给文本指定一种字体的法，取代了简单地给文本指定一种字体的方法。字体组合就是多个不同字体依次排方法。字体组合就是多个不同字体依次排列的组合。在设计网页时，可给文本指定列的组合。在设计网页时，可给文本指定一种字体组合。一种字体组合。在网页浏览器中浏览该网页时，系统在网页浏览器中浏览该网页时，系统会按照字体组合中指定的字体顺序自动寻会按照字体组合中指定的字体顺序自动寻找用户计算机中安装的字体。采用这种方找用户计算机中安装的

5、字体。采用这种方法可以照顾各种浏览器和安装不同操作系法可以照顾各种浏览器和安装不同操作系统的计算机用户。统的计算机用户。在在“字体字体”下拉列表框中，可以选择下拉列表框中，可以选择Dreamweaver提供的各种字体组合，如图提供的各种字体组合，如图2-1-3所示。单击其中的某个列表项，即可所示。单击其中的某个列表项，即可设置该字体组合。设置该字体组合。图图2-1-3 “编辑字体列表编辑字体列表”对话框对话框 单击图单击图2-1-3所示的字体组合列表项中所示的字体组合列表项中的的“编辑字体列表编辑字体列表”列表项，弹出列表项，弹出“编辑编辑字体列表字体列表”对话框，如图对话框，如图2-1-4所

6、示。单击所示。单击“编辑字体列表编辑字体列表”对话框中对话框中“字体列表字体列表”列表框内的列表框内的“在以下列表中添加字体在以下列表中添加字体”列列表项。表项。图图2-1-4 “编编辑辑字字体体列列表表”对对话话框框在在“可用字体可用字体”列表框中选择字体，列表框中选择字体，然后双击该字体名称，即可在然后双击该字体名称，即可在“选择的字选择的字体体”列表框中显示出相应的字体名称；也列表框中显示出相应的字体名称；也可以单击某一个字体名字，再单击可以单击某一个字体名字，再单击按钮，按钮，将选中的字体添加到将选中的字体添加到“选择的字体选择的字体”列表列表框内。框内。按照上述方法，依次往按照上述方

7、法，依次往“选择的字体选择的字体”列表框中加入字体组合中的各种字体。列表框中加入字体组合中的各种字体。同时，会看到在同时，会看到在“字体列表字体列表”列表框内最列表框内最下边随之显示出新的字体组合，如图下边随之显示出新的字体组合，如图2-1-4所示。单击所示。单击“确定确定”按钮，即可完成字体按钮，即可完成字体组合的创建操作。组合的创建操作。如果要删除字体组合中的一种字体，如果要删除字体组合中的一种字体，单击单击“选择的字体选择的字体”列表框内该字体的名列表框内该字体的名称，再单击称，再单击按钮。如果要删除一个字体按钮。如果要删除一个字体组合，可在组合，可在“字体列表字体列表”列表框中单击该列

8、表框中单击该字体组合，再单击字体组合，再单击“编辑字体列表编辑字体列表”对话对话框中的框中的按钮。按钮。如果还要增加字体组合，可以单击如果还要增加字体组合，可以单击“编辑字体列表编辑字体列表”对话框中的对话框中的按钮，使按钮，使“字体列表字体列表”列表框中增加列表框中增加“在以下列表在以下列表中添加字体中添加字体”选项。选项。（3）文字属性的设置）文字属性的设置文字大小设置：字号的数字越大，文字文字大小设置：字号的数字越大，文字也越大。在也越大。在Dreamweaver8中，默认的字中，默认的字号是号是13。单击文字。单击文字“属性属性”栏内的栏内的“大小大小”下拉列表框中的一种字号数字，即可

9、完下拉列表框中的一种字号数字，即可完成字号的设定。在成字号的设定。在“大小大小”下拉列表框内，下拉列表框内，还可以通过选择还可以通过选择“极小极小”到到“极大极大”以及以及“较小较小”和和“较大较大”列表项的方法来设置列表项的方法来设置文字的大小。文字的大小。文字样式设置：在文字样式设置：在“样式样式”下拉列表框下拉列表框中，单击中，单击“管理样式管理样式”项目，可以弹出项目，可以弹出“编辑样式表编辑样式表”对话框。单击该对话框中的对话框。单击该对话框中的“新建新建”按钮，就可以为文字添加样式设按钮，就可以为文字添加样式设置。置。文字的对齐设置：文字的对齐是指一行文字的对齐设置：文字的对齐是指

10、一行或多行文字在水平方向的位置，它有左对或多行文字在水平方向的位置，它有左对齐、居中对齐和右对齐齐、居中对齐和右对齐3种。可以通过在选种。可以通过在选中页面内的文字后，单击文字中页面内的文字后，单击文字“属性属性”栏栏内的内的（左对齐）、（左对齐）、（居中对齐）和（居中对齐）和（右对齐）按钮来实现。如果文字是直接（右对齐）按钮来实现。如果文字是直接输入到页面中的，则会以浏览器的边界线输入到页面中的，则会以浏览器的边界线进行对齐。进行对齐。文字的缩进设置：要改变段落文字的缩文字的缩进设置：要改变段落文字的缩进量，可以选中文字，再单击文字进量，可以选中文字，再单击文字“属性属性”栏内的栏内的（减少

11、缩进，向左移两个单位）（减少缩进，向左移两个单位）按钮或按钮或（增加缩进，向右移两个单位）（增加缩进，向右移两个单位）按钮。按钮。文字风格的设置：选中网页中的文字，文字风格的设置：选中网页中的文字，单击按下单击按下按钮，即可将选中的文字设置按钮，即可将选中的文字设置为粗体；单击按下为粗体；单击按下按钮，即可将选中的按钮，即可将选中的文字设置为斜体。文字设置为斜体。利用菜单命令改变文字风格：在利用菜单命令改变文字风格：在“文本文本”“样式样式”菜单的子菜单中，单击其中菜单的子菜单中，单击其中的某一个菜单命令，可以将选中的文字样的某一个菜单命令，可以将选中的文字样式做相应的改变。式做相应的改变。文

12、字颜色的设置：单击文字文字颜色的设置：单击文字“属性属性”栏栏内的内的“大小大小”下拉列表框右边的下拉列表框右边的按钮，按钮，可以弹出颜色面板，利用它可以设置文字可以弹出颜色面板，利用它可以设置文字的颜色。也可以在其文本框中直接输入颜的颜色。也可以在其文本框中直接输入颜色代码，例如红色的颜色代码为色代码，例如红色的颜色代码为“#FF0000”。使用使用“插入插入”（文本）栏：单击（文本）栏：单击“插入插入”栏的栏的“文本文本”标签，如图标签，如图2-1-5所示。所示。图图2-1-5 “插入插入”（文本）栏（文本）栏面板中有许多文本格式控制按钮，通面板中有许多文本格式控制按钮，通过这些按钮可以方

13、便地插入各种文本。单过这些按钮可以方便地插入各种文本。单击面板中的击面板中的“字体标签编辑器字体标签编辑器”按钮按钮，可以弹出，可以弹出“标签编辑器标签编辑器”对话框，如图对话框，如图2-1-6所示。利用该对话框可以设置文字的所示。利用该对话框可以设置文字的字体、大小和颜色等，还可以编辑文字字字体、大小和颜色等，还可以编辑文字字体列表。体列表。图图2-1-6 “标签编辑器标签编辑器”对话框对话框（1）设置项目列表）设置项目列表设置无序列表和有序列表：选中要排列设置无序列表和有序列表：选中要排列的文字段，再单击文字的文字段，再单击文字“属性属性”栏内的栏内的按钮，可设置无序列表；选中要排列的文按

14、钮，可设置无序列表；选中要排列的文字段，再单击文字字段，再单击文字“属性属性”栏内的栏内的按钮，按钮，可设置有序列表。可设置有序列表。2设置和修改项目列表设置和修改项目列表定义列表方式：选中要排列的文字段，定义列表方式：选中要排列的文字段，再单击再单击“文本文本”“列表列表”“定义列表定义列表”菜单命令。采用这种列表方式的效果是：菜单命令。采用这种列表方式的效果是：奇数行靠左，偶数行向右缩进，如图奇数行靠左，偶数行向右缩进，如图2-1-7所示。所示。图图2-1-7 奇数行靠左，偶数行向右缩进奇数行靠左，偶数行向右缩进（2）修改项目列表属性）修改项目列表属性首先将列表的文字按照无序或有序列首先将

15、列表的文字按照无序或有序列表方式进行列表，然后将光标移到列表文表方式进行列表，然后将光标移到列表文字中。单击字中。单击“文本文本”“列表列表”“属性属性”菜单命令，弹出菜单命令，弹出“列表属性列表属性”对话框，对话框，如图如图2-1-8所示。所示。图图2-1-8 “列表属性列表属性”对话框对话框“列表类型列表类型”下拉列表框用来选择列表下拉列表框用来选择列表类型，其类型有项目列表、编号列表、目类型，其类型有项目列表、编号列表、目录列表和菜单列表录列表和菜单列表4种。项目列表的段首为种。项目列表的段首为图案标志符号，是无序列表；编号列表的图案标志符号，是无序列表；编号列表的段首是数字，是有序列表

16、。选择段首是数字，是有序列表。选择“编号列编号列表表”选项后，选项后，“列表属性列表属性”对话框中的隐对话框中的隐藏选项会变为有效。藏选项会变为有效。在在“样式样式”下拉列表框内，可以选择列下拉列表框内，可以选择列表的风格，其中各选项的含义为：表的风格，其中各选项的含义为：“默认默认”选项是默认方式，段首标记为实心圆点；选项是默认方式，段首标记为实心圆点；“项目符号项目符号”选项是段首标记为项目的符选项是段首标记为项目的符号；号；“正方形正方形”选项的段首标记为实心方选项的段首标记为实心方块。块。在在“新建样式新建样式”下拉列表框内，也有上下拉列表框内，也有上述述4个选项，用来设置光标所在段和

17、以下各个选项，用来设置光标所在段和以下各段的列表属性。段的列表属性。在在“列表类型列表类型”下拉列表框中选择下拉列表框中选择“编编号列表号列表”列表项目后，列表项目后，“列表属性列表属性”对话对话框如图框如图2-1-9所示。在所示。在“样式样式”列表框中，列表框中，可以选择列表的风格。可以选择列表的风格。图图2-1-9 有序列表的有序列表的“列表属性列表属性”对话框对话框选择选择“默认默认”选项和选项和“数字数字”选项，选项，段首标记为阿拉伯数字；选择段首标记为阿拉伯数字；选择“小写罗马小写罗马数字数字”选项，段首标记为小写罗马数字；选项，段首标记为小写罗马数字；选择选择“大写罗马数字大写罗马

18、数字”选项，段首标记为选项，段首标记为大写罗马数字；选择大写罗马数字；选择“小写字母小写字母”选项，选项，段首标记为英文小写字母；选择段首标记为英文小写字母；选择“大写字大写字母母”选项，段首标记为英文大写字母。选项，段首标记为英文大写字母。在在“开始计数开始计数”文本框内可以输入起始文本框内可以输入起始的数字或字母，以后各段的编号将根据起的数字或字母，以后各段的编号将根据起始数字或字母自动排列。始数字或字母自动排列。在在“列表属性列表属性”对话框的对话框的“列表项目列表项目”栏内的栏内的“新建样式新建样式”下拉列表框中，也有下拉列表框中，也有上述上述6个选项，用来设置光标所在段和以下个选项，

19、用来设置光标所在段和以下各段的列表为另一种新属性。在各段的列表为另一种新属性。在“重设计重设计数数”文本框内，输入光标所在段和以下各文本框内，输入光标所在段和以下各段的列表的起始数字或字母。段的列表的起始数字或字母。2.2.1学习目标学习目标“硬件知识硬件知识”网页的显示效果如图网页的显示效果如图2-2-1所示。通过该网页可以看出，在网页中同所示。通过该网页可以看出，在网页中同时插入图像和文字时，可以设置不同的对时插入图像和文字时，可以设置不同的对齐方式，以达到不同的显示效果。齐方式，以达到不同的显示效果。图文混图文混排是网页制作的基本操作，实用性非常强。排是网页制作的基本操作，实用性非常强。

20、2.2.2操作过程操作过程2.2 2.2 【案例案例5 5】“硬件知识硬件知识”网页网页图图2-2-1 “硬件知识硬件知识”网页的显示效果网页的显示效果（1）用鼠标拖曳图像）用鼠标拖曳图像在在Windows的的“我的电脑我的电脑”或或“资源资源管理器管理器”中，单击一个图像文件，再用鼠中，单击一个图像文件，再用鼠标拖曳该图像到网页文档窗口内，即可将标拖曳该图像到网页文档窗口内，即可将图像插入到页面内的指定位置。图像插入到页面内的指定位置。双击页面内的图像，可以弹出双击页面内的图像，可以弹出“选择图像选择图像源文件源文件”对话框，供用户更换图像。对话框，供用户更换图像。2.2.3相关知识相关知识

21、（2）利用）利用“插入插入”（常用）面板插入（常用）面板插入图像图像单击单击“插入插入”（常用）栏（常用）栏“图像图像”快捷快捷菜单中的菜单中的“图像图像”按钮按钮，或用鼠标拖曳，或用鼠标拖曳“图像图像”按钮按钮到网页内，可以弹出到网页内，可以弹出“选选择图像源文件择图像源文件”对话框，如图对话框，如图2-2-2所示。所示。如果如果“图像图像”快捷菜单处显示的不是快捷菜单处显示的不是“图像图像”按钮按钮，可以单击旁边的下三角按钮，可以单击旁边的下三角按钮，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“图像图像”按钮。按钮。在在“选择图像源文件选择图像源文件”对话框中选中对话框中选中图像文件后，

22、单击图像文件后，单击“确定确定”按钮，即可将按钮，即可将选定的图像插入到页面的光标处。通常所选定的图像插入到页面的光标处。通常所选图像应放在站点文件夹下的图像文件夹选图像应放在站点文件夹下的图像文件夹内。内。在在“选择图像源文件选择图像源文件”对话框内，对话框内，“URL”文本框内会给出该图像的路径。在文本框内会给出该图像的路径。在“相对于相对于”下拉列表框内，如果选择下拉列表框内，如果选择“文档文档”选项，则选项，则“URL”文本框内会给出该图像文件文本框内会给出该图像文件的相对于当前网页文档的路径和文件名。的相对于当前网页文档的路径和文件名。例如例如“pic/2-1-1.jpg”；如果选择

23、；如果选择“站站点根目录点根目录”选项，则选项，则“URL”文本框内会给文本框内会给出以站点目录为根目录的路径，例如出以站点目录为根目录的路径，例如“/pic/2-1-1.jpg”。当网页内有文字和图像混排时，系统当网页内有文字和图像混排时，系统默认的状态是图像的下沿和它所在的文字默认的状态是图像的下沿和它所在的文字行的下沿对齐。如果图像较大，则页面内行的下沿对齐。如果图像较大，则页面内的文字与图像的布局会很不协调，因此需的文字与图像的布局会很不协调，因此需要调整它们的布局。调整图像与文字混排要调整它们的布局。调整图像与文字混排的布局需要使用图像的的布局需要使用图像的“属性属性”栏。栏。2图像

24、和文字的相对位置图像和文字的相对位置（1）图像与文字相对位置的调整）图像与文字相对位置的调整图像图像“属性属性”栏内的栏内的“对齐对齐”下拉列下拉列表框中有表框中有10个列表项，用来进行图像与文个列表项，用来进行图像与文字相对位置的调整。这些列表项的含义如字相对位置的调整。这些列表项的含义如下。下。“默认值默认值”列表项：使用浏览器默认的列表项：使用浏览器默认的对齐方式，不同的浏览器会稍有不同。对齐方式，不同的浏览器会稍有不同。“基线基线”列表项：图像的下沿与文字的列表项：图像的下沿与文字的基线水平对齐。基线水平对齐。“顶端顶端”列表项：图像的顶端与当前行列表项：图像的顶端与当前行中最高对象（

25、图像或文本）的顶端对齐。中最高对象（图像或文本）的顶端对齐。“中间中间”列表项：图像的中线与文字的列表项：图像的中线与文字的基线水平对齐。基线水平对齐。“底部底部”列表项：图像的下沿与文字的列表项：图像的下沿与文字的基线水平对齐。基线水平对齐。“文本上方文本上方”列表项：图像的顶端与文列表项：图像的顶端与文本行中最高字符的顶端对齐。本行中最高字符的顶端对齐。“绝对中间绝对中间”列表项：图像的中线与文列表项：图像的中线与文字的中线水平对齐。字的中线水平对齐。“绝对底部绝对底部”列表项：图像的下沿与文列表项：图像的下沿与文字的下沿水平对齐。文字的下沿是指文字字的下沿水平对齐。文字的下沿是指文字的最

26、下边，而基线不到文字的最下边。的最下边，而基线不到文字的最下边。“左对齐左对齐”列表项：图像在文字的左边列表项：图像在文字的左边缘，文字从右侧环绕图像。缘，文字从右侧环绕图像。“右对齐右对齐”列表项：图像在文字的右边列表项：图像在文字的右边缘，文字从左侧环绕图像。缘，文字从左侧环绕图像。文字的上沿、中线、基线、下沿、左文字的上沿、中线、基线、下沿、左边缘和右边缘之间的关系如图边缘和右边缘之间的关系如图2-2-3所示。所示。图图2-2-3 文字对齐含义文字对齐含义（2）图像与文字间距的调整）图像与文字间距的调整图像与文字的间距是指图像与文字水图像与文字的间距是指图像与文字水平方向和垂直方向的间距

27、，可以通过改变平方向和垂直方向的间距，可以通过改变“水平边距水平边距”和和“垂直边距垂直边距”文本框内的文本框内的数值来实现，数值的单位是像素。数值来实现，数值的单位是像素。移动和复制图像：选中要编辑的图像，移动和复制图像：选中要编辑的图像，这时图像周围会出现几个黑色方形的小控这时图像周围会出现几个黑色方形的小控制柄。如果要移动或复制图像，可以像移制柄。如果要移动或复制图像，可以像移动文字那样，用鼠标拖曳图像到目标点，动文字那样，用鼠标拖曳图像到目标点，即可移动图像；按住即可移动图像；按住Ctrl键并用鼠标拖曳键并用鼠标拖曳图像到目标点，即可复制图像。图像到目标点，即可复制图像。3图像的移动、

28、复制、删除和调整大图像的移动、复制、删除和调整大小小删除图像：先选中要删除的图像，再按删除图像：先选中要删除的图像，再按Delete键即可，还可以将它剪切到剪贴板中。键即可，还可以将它剪切到剪贴板中。简单调整图像大小：选中要调整的图像，简单调整图像大小：选中要调整的图像，用鼠标拖曳其控制柄。按住用鼠标拖曳其控制柄。按住Shift键，同时键，同时用鼠标拖曳图像周围的小控制柄，可以在用鼠标拖曳图像周围的小控制柄，可以在保证图像长宽比不变的情况下调整图像的保证图像长宽比不变的情况下调整图像的大小。大小。在网页中插入图像后，如果要精确调在网页中插入图像后，如果要精确调整图像的大小和图像的位置，必须使用

29、图整图像的大小和图像的位置，必须使用图像像“属性属性”栏。在选中图像后，图像栏。在选中图像后，图像“属属性性”栏如图栏如图2-2-4所示。所示。4利用图像利用图像“属性属性”栏编辑栏编辑“硬件知硬件知识识”网页中的图像网页中的图像图图2-2-4 图像图像“属性属性”栏栏图像命名：在图像图像命名：在图像“属性属性”栏的左上角栏的左上角会显示缩小的选中的图像，图像的右边会会显示缩小的选中的图像，图像的右边会显示它的字节数。可以在图像右边的文本显示它的字节数。可以在图像右边的文本框内输入图像的名字，以后可以使用脚本框内输入图像的名字，以后可以使用脚本语言（语言（JavaScript、VBScript

30、等）对它进行等）对它进行引用。引用。调整图像的位置：选中要调整位置的图调整图像的位置：选中要调整位置的图像后，或将光标移到图像所在的行后，单像后，或将光标移到图像所在的行后，单击击（居左）、（居左）、（居中）或（居中）或（居右）（居右）按钮，即可对该行的图像位置进行调整。按钮，即可对该行的图像位置进行调整。精确调整图像的大小：在精确调整图像的大小：在“宽宽”文本框文本框内输入图像的宽度，系统默认的单位是像内输入图像的宽度，系统默认的单位是像素（素（pixels），如果要使用其他单位，则必），如果要使用其他单位，则必须在输入数字后再输入单位名称，例如须在输入数字后再输入单位名称，例如in（英寸，

31、（英寸，1in=96pixels）、）、mm（毫米，（毫米，1mm=3.8pixels)、pt（磅，（磅，1pt=1.3pixels）和和pc（派卡，（派卡，1pc=16pixels）等。）等。用同样的方法可在用同样的方法可在“高高”文本框内输文本框内输入图像的高度。入图像的高度。%表示图像占文档窗口的宽表示图像占文档窗口的宽度和长度百分比，设置后，图像的大小会度和长度百分比，设置后，图像的大小会随文档窗口的大小自动进行调整。若不管随文档窗口的大小自动进行调整。若不管页面大小，只想占页面宽度的页面大小，只想占页面宽度的30%，可在，可在“宽宽”文本框中输入文本框中输入30%。如果要还原图像大小

32、的初始值，可单如果要还原图像大小的初始值，可单击击和和文字或删除文字或删除“宽宽”和和“高高”文本框中的数值；要想将宽度和长度全文本框中的数值；要想将宽度和长度全部还原，则可单击部还原，则可单击“重设大小重设大小”按钮按钮。图像的路径：图像的路径：“源文件源文件”右边的文本框右边的文本框内给出了图像文件的路径。文件路径可以内给出了图像文件的路径。文件路径可以是绝对路径（是绝对路径（“file:/D|/跟我学电脑跟我学电脑/pic/2-1-1.jpg”图像文件不在站点文件夹图像文件不在站点文件夹内），也可以是相对路径（内），也可以是相对路径（“pic/2-1-1.jpg”或或“/pic/2-1-

33、1.jpg”图像文件在站点图像文件在站点文件夹内）。单击文件夹内）。单击“源文件源文件”右边的右边的按按钮，即可弹出钮，即可弹出“选择图像源文件选择图像源文件”对话框，对话框，利用它可以更换图像。利用它可以更换图像。链接：链接：“链接链接”右边的文本框内给出了右边的文本框内给出了被链接文件的路径。超级链接所指向的对被链接文件的路径。超级链接所指向的对象可以是一个网页，也可以是一个具体的象可以是一个网页，也可以是一个具体的文件。设置图像链接后，用户在浏览网页文件。设置图像链接后，用户在浏览网页时只要单击该图像，即可打开相关的网页时只要单击该图像，即可打开相关的网页或文件。或文件。建立超级链接有建

34、立超级链接有3种方法：直接输入链种方法：直接输入链接地址接地址URL；拖曳指向文件图标；拖曳指向文件图标到到“站站点点”窗口要链接的文件上；单击该文本框窗口要链接的文件上；单击该文本框右边的文件夹按钮右边的文件夹按钮，弹出，弹出“选择文件选择文件”对话框，利用该对话框选定文件。对话框，利用该对话框选定文件。给图像加文字提示说明：选中要加文字给图像加文字提示说明：选中要加文字提示说明的图像，再在图像提示说明的图像，再在图像“属性属性”栏内栏内的的“替代替代”下拉列表框中输入图像的文字下拉列表框中输入图像的文字提示说明。用浏览器打开图像页面后，将提示说明。用浏览器打开图像页面后，将鼠标移到加文字提

35、示说明的图像上，或发鼠标移到加文字提示说明的图像上，或发生断链现象时，即可出现相应的文字提示生断链现象时，即可出现相应的文字提示说明，如图说明，如图2-2-5所示。所示。图图2-2-5 显示图像的文字提示说明显示图像的文字提示说明2.3.1学习目标学习目标“外设简介外设简介”网页的显示效果如图网页的显示效果如图2-3-1所示。在该网页中，除了常见的文字和图所示。在该网页中，除了常见的文字和图像外，还包含一个由多个图像按钮组成的像外，还包含一个由多个图像按钮组成的导航条。当鼠标移到该导航条中的任意一导航条。当鼠标移到该导航条中的任意一个按钮上时，该按钮中的文字会变为个按钮上时，该按钮中的文字会变

36、为“单单击进入击进入”文字图像。文字图像。2.3 2.3 【案例案例6 6】“外设简介外设简介”网页网页通过本实例的操作，要掌握在网页中通过本实例的操作，要掌握在网页中插入导航条和水平线的基本操作方法。为插入导航条和水平线的基本操作方法。为导航条建立链接的操作将在第导航条建立链接的操作将在第5章中进行介章中进行介绍。绍。2.3.2操作过程操作过程图图2-3-1 “外设简介外设简介”网页的显示效果网页的显示效果1插入导航条插入导航条导航条实际上是一组动态图像按钮，导航条实际上是一组动态图像按钮，单击一个导航按钮，可以在浏览器中弹出单击一个导航按钮，可以在浏览器中弹出HTML文件和其他（如图像）文

37、件。插入文件和其他（如图像）文件。插入导航条的方法如下。导航条的方法如下。（1）单击）单击“插入插入”（常规）面板中（常规）面板中的的“图像图像”快捷菜单中的快捷菜单中的“导航条导航条”按钮按钮，即可弹出，即可弹出“插入导航条插入导航条”对话框，如图对话框，如图2-3-3所示。所示。2.3.3相关知识相关知识（2）在）在“插入导航条插入导航条”对话框中进对话框中进行各选项的设置。各选项的作用如下。行各选项的设置。各选项的作用如下。“导航条元件导航条元件”列表框：给出导航条中列表框：给出导航条中各个动态图像按钮的名称（默认是图像的各个动态图像按钮的名称（默认是图像的名称）。单击名称）。单击按钮，

38、可以增加动态图按钮，可以增加动态图像按钮；选中动态图像按钮名称，再单击像按钮；选中动态图像按钮名称，再单击按钮，可以删除该按钮；单击动态图像按按钮，可以删除该按钮；单击动态图像按钮名称，再单击钮名称，再单击按钮或按钮或按钮，可以按钮，可以改变动态图像按钮在导航条中的位置。改变动态图像按钮在导航条中的位置。“项目名称项目名称”文本框：其内可输入各动文本框：其内可输入各动态图像按钮的名称。态图像按钮的名称。4个文本框与个文本框与“浏览浏览”按钮：定义鼠标按钮：定义鼠标4种状态时的图像。种状态时的图像。“状态图像状态图像”是按钮抬是按钮抬起状态，起状态，“鼠标经过图像鼠标经过图像”是鼠标移到按是鼠标

39、移到按钮上时的图像，钮上时的图像，“按下图像按下图像”是鼠标按下是鼠标按下时的图像，时的图像，“按下时鼠标经过图像按下时鼠标经过图像”是鼠是鼠标按下的过程中的图像。标按下的过程中的图像。“按下时，前往的按下时，前往的URL”栏：在文本框内栏：在文本框内可输入与动态按钮链接的文件目录和名字，可输入与动态按钮链接的文件目录和名字，单击单击“浏览浏览”按钮后，可选择链接的文件。按钮后，可选择链接的文件。在其右边的列表框内，可选择显示链接的在其右边的列表框内，可选择显示链接的页面的框架名字。页面的框架名字。“选项选项”栏：第一个复选框用来确定是栏：第一个复选框用来确定是否要预先载入各个图像，第否要预先

40、载入各个图像，第2个复选框用来个复选框用来确定是否要在页面载入的初始状态时显示确定是否要在页面载入的初始状态时显示鼠标按下状态的图像。鼠标按下状态的图像。“插入插入”列表框：用来选择按钮放置的列表框：用来选择按钮放置的方式。选择方式。选择“水平水平”选项，表示水平放置；选项，表示水平放置；选择选择“垂直垂直”选项，表示垂直放置。选项，表示垂直放置。“使用表格使用表格”复选框：选中它后，表示复选框：选中它后，表示使用表格将动态按钮框起来。使用表格将动态按钮框起来。（3）完成上述设置后，单击）完成上述设置后，单击“确定确定”按钮，即可在网页中插入导航条。按钮，即可在网页中插入导航条。在页面内可以利

41、用水平分割线将标题在页面内可以利用水平分割线将标题与文字或图像等对象分割，使页面的信息与文字或图像等对象分割，使页面的信息分布清晰。当然，用线条图像来分割，效分布清晰。当然，用线条图像来分割，效果会更好些，但会使文件变大。插入水平果会更好些，但会使文件变大。插入水平线的方法如下。线的方法如下。2插入水平线插入水平线（1）单击）单击“插入插入”（HTML）面板）面板中的中的“水平线水平线”按钮，即可在光按钮，即可在光标所在的行插入一条水平线，并弹出标所在的行插入一条水平线，并弹出水平线的水平线的“属性属性”面板，如图面板，如图2-3-4所所示。示。图图2-3-4 水平线的水平线的“属性属性”面板

42、面板（2）在水平线）在水平线“属性属性”面板内，面板内，“宽宽”文本框用于输入水平线的水平长文本框用于输入水平线的水平长度数值，度数值，“高高”文本框用于输入水平文本框用于输入水平线的垂直高度数值，单位有像素和百线的垂直高度数值，单位有像素和百分数（分数（%）两种选择。在）两种选择。在“对齐对齐”下下拉列表框内，可以选择拉列表框内，可以选择“默认默认”、“左对齐左对齐”、“居中对齐居中对齐”或或“右对齐右对齐”选项。选项。选择选择“阴影阴影”复选框，则水平线是中复选框，则水平线是中空的；不选择空的；不选择“阴影阴影”复选框，则水平线复选框，则水平线是亮实心的线。是亮实心的线。在标准在标准“插入插入”面板中还有一些按钮，面板中还有一些按钮，利用它们还可以在网页中插入日期、换行利用它们还可以在网页中插入日期、换行符和电子邮件地址等。因为使用方法比较符和电子邮件地址等。因为使用方法比较简单，所以这里不再叙述。简单，所以这里不再叙述。