网页设计模块四--插入网页元素及超链接课件.ppt

1、模块四模块四 插入网页元素及超链接插入网页元素及超链接本模块导读本模块导读 网页是构成网站的基本元素。而文字、图片、多媒体和超级链接等又是网页最基本的元素。这些基本元素的使用不但是制作网页最基本的技术，同时也是创建一个美观、形象和生动网页的基础。通过本模块的学习，用户可以掌握添加和编辑网页中各种元素的方法，以制作出丰富多彩的的网页。本模块要点本模块要点设置网页的页面属性制作纯文本网页制作图文混排的网页图片在网页中的各种应用方式制作带多媒体效果的动感网页制作带音乐的网页制作带超级链接的网页模块四模块四 插入网页元素及超链接插入网页元素及超链接任务一任务一 设置页面的相关属性设置页面的相关属性任务

2、二任务二 创建基本文本网页创建基本文本网页 任务三任务三 创建基本图文混排网页创建基本图文混排网页 任务五任务五 插入多媒体内容插入多媒体内容任务四任务四 图像在网页中的应用图像在网页中的应用 任务六任务六 创建背景音乐创建背景音乐 任务七任务七 使用超级链接使用超级链接学材小结学材小结 步骤步骤1 打开网页。步骤步骤 选择【修改】【页面属性】命令，打开如图4-1 所示的“页面属性”对话框。在“页面属性”对话框中，左侧显示“分类”列表框，其中包括“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5 个项目，右侧区域则显示各分类中可以设置的项目，下面将分别对每个类别进行介绍。任务一设置页

3、面的相关属性任务一设置页面的相关属性步骤步骤：知识导读知识导读网页属性包括网页标题、网页中文本的颜色、网页的背景颜色及背景图片、网页边距等。设置网页属性通过设置“页面属性”完成，另外系统还自带了许多种网页样式，用户也可以直接应用这些样式。设置页面属性的具体操作步骤如下：任务一设置页面的相关属性任务一设置页面的相关属性图4-1 页面属性对话框 任务一设置页面的相关属性任务一设置页面的相关属性步骤步骤3 选择选择“外观外观”选项卡。选项卡。(1)“页面字体”：设置页面文档中默认的文字字体。按钮：加粗设置，可以将页面文字的默认格式设置为粗体。按钮：倾斜设置，可以将页面文字的默认格式设置为斜体。(2)

4、“大小”：设置页面中文字的默认大小。在右边的列表中选择数字或一些标准来表示文字的大小，也可手动输入数字，输入数字后，后面的文字大小单位列表就会变成可编辑状态。表示数字的单位，可以选择“像素”、“点数”、“英寸”、“厘米”、“毫米”等。(3)“文本颜色”：设置页面中文字的默认颜色。单击颜色块后，会调出颜色面板，可以从颜色面板中选择一种所需要的颜色，或者在后面的文本框中输入所需要的十六进制颜色值。(4)“背景颜色”：设置当前网页的背景颜色，设置方法同文字颜色的设置方法，调出颜色面板，选择一种颜色，确定后该颜色就会成为整个网页的背景颜色。(5)“背景图像”：设置当前网页的背景图像。可以在文本框中输入

5、用做背景图像的路径和文件名称，也可单击文本框后面的浏览(是否应统一为实心括号，下同)按钮，从系统中寻找图像文件作为当前网页的背景图像。(6)“重复”：选择页面背景的多种重复模式。有四种页面背景重复模式可供选择：重复、不重复、水平重复、垂直重复。(7)“左边距”、“右边距”、“上边距”、“下边距”：设置当前网页中左、右、上、下边界留出的空白像素数。信息卡信息卡任务一设置页面的相关属性任务一设置页面的相关属性步骤步骤4 选择“链接”选项卡。如图4-2 所示。 图4-2 链接选项卡任务一设置页面的相关属性任务一设置页面的相关属性(1)“链接字体”：设置链接文字的默认字体，设置方法与页面字体的设置方法

6、相同。(2)“大小”：设置链接文字的大小，与页面文字的大小设置方法完全相同。(3)“链接颜色”、“交换图像链接”、“已访问链接”、“活动链接”：设置链接4种不同状态的颜色。这4种状态分别是：正常状态、鼠标滑过状态、访问过的状态、鼠标单击时的状态。(4)“下划线样式”：设置链接文字下面的下划线样式。系统提供了4种样式，分别是“始终有下划线”、“始终无下划线”、“仅在变换图像时显示下划线”、“变换图像时隐藏下划线”。信息卡信息卡任务一设置页面的相关属性任务一设置页面的相关属性步骤步骤5 选择“标题”选项卡。如图4-3所示。“标题”选项卡中可以定义应用在具体文档中各级不同标题上的一种“标题字体样式”

7、。而不是指页面的标题内容。在分类中可以定义“标题字体”及6 种预定义的标题字体样式，包括粗体、斜体、大小和颜色等。操作步骤同前面类似，在此不再叙述。图4-3 标题选项卡任务一设置页面的相关属性任务一设置页面的相关属性步骤步骤 选择“标题/编码”选项卡。如图4-4所示。 这里的“标题”是页面的标题内容，可输入和首页相关的文字内容，它将显示在浏览器的标题栏中。“编码”即文档编码，可以直接选中“简体中文(GB2312)”。 图4-4 标题/编码选项卡任务一设置页面的相关属性任务一设置页面的相关属性步骤步骤 选择“跟踪图像”选项卡。如图4-5所示。 “跟踪图像”是用于网页中元素定位的图像，该图像只是在

8、编辑网页时提供参照，起到辅助编辑的作用，最终不会显示在浏览器中，所以，并不能等同于背景图像。图4-5 跟踪图像选项卡任务一设置页面的相关属性任务一设置页面的相关属性选择跟踪图像时，可以单击后面的浏览按钮，从系统中寻找图像文件作为跟踪图像。还可以设置跟踪图像的透明度，滚动条最左端是透明，最右端是不透明，可以用鼠标拖动滑块来进行调整。信息卡信息卡任务二创建基本文本网页任务二创建基本文本网页知识导读知识导读 文字是网页中最基本的信息载体，大多数的网页都要通过文字来表现其内容，合理的文本编辑可以丰富网页的内容并增强网页的视觉性。网页中插入文本，一般通过以下两种方式来插入。一种是在网页编辑窗口中直接用键

9、盘输入文本，这是文字输入最基本的方式。另一种是通过复制文本的方式，如果所需要插入的文本在其他的文档中或是网站的页面中，可以直接使用复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作。子任务子任务 编辑文本格式编辑文本格式任务二创建基本文本网页任务二创建基本文本网页步骤步骤：步骤步骤1 运行Dreamweaver CS3，在“开始页”中选择“新建”下的“THML”，新建一个网页文档。步骤步骤2 在文档窗口中单击，出现闪烁光标。选择合适的输入法，在光标处输入文字。如图4-6所示。图 4-6 直接输入文字任务二创建基本文本网页任务二创建基本文本网页网页中，文本换行按+键，而分段直接按键。

10、换行还可以点击菜单【插入记录】【HTML】【特殊字符】【换行符】来实现。信息卡信息卡网页中，空格的输入也很特别。通常情况下，通过键盘只能输入一个空格。如想在网页编辑窗口中输入多个空格有两种方法：点击菜单【插入记录】【HTML】【特殊字符】【不换行空格】来实现。把中文输入法切换到全角模式，然后按键盘中的空格键，以此来插入多个空格。注意注意任务二创建基本文本网页任务二创建基本文本网页步骤步骤 使用属性面板对文字属性进行设置。属性面板一般出现在网页编辑窗口的下方，如图4-7 所示。如果属性面板没有出现在屏幕上，可选择菜单【窗口】【属性】命令使它显示出来。选中文字，这里选择“贝克汉姆个人档案”。然后在

11、“字体”下拉列表中选择所需要的字体，如图4-8，图4-9所示。如果“字体”下拉列表中没有所需要的字体，可选择“编辑字体列表”，弹出对话框如图4-10所示，从“可用字体”下拉列表框中选择想要的字体，再单击旁边的按钮，单击【确定】按钮，该字体就被加到属性面板中的字体列表里。图 4-7 属性面板图 4-8 字体 任务二创建基本文本网页任务二创建基本文本网页图4-9 字体列表 图4-10 编辑字体列表任务二创建基本文本网页任务二创建基本文本网页 此处把网页中的“贝克汉姆个人档案”文字设为“华文行楷”字体，以下文字也设置相应字体。如图4-11。图4-11 设置字体任务二创建基本文本网页任务二创建基本文本

12、网页为了保持网络中显示的兼容性，字体还是推荐“默认字体”。最好不要用不常用字体，以免不能正常显示。注意注意步骤步骤 设置文字字号。选择文字后，在“大小”下拉列表中可以选择常用的字号大小。数字越大，文字显示越大；反之则越小。还可以在文本框中输入自己想要的字号。选择字号后，右侧的下拉列表变成可编辑状态，用户可以从中选择字号的单位。“像素(px)”和“点数(pt)”是较为常用的单位。如图4-12所示。 图4-12 字号任务二创建基本文本网页任务二创建基本文本网页 接上例，把标题“贝克汉姆个人档案”设为36像素大小，其他文字设为18像素大小。如图4-13所示。图4-13 设置字号任务二创建基本文本网页

13、任务二创建基本文本网页步骤步骤 设置文字颜色。选择要改变颜色的文本，单击属性面板中的 按钮，会显示颜色面板，如图4-14所示，且鼠标变成滴管工具，选择一个色块单击即可完成文字颜色的修改。 图4-14 文本颜色 如果用户认为此处的颜色不够丰富，可以单击颜色面板右上的按钮，从弹出的“颜色”调色板中取到更加精确的颜色。单击调色板右上的按钮，有5 种可选择的调色板显示方式，分别是“立方色”、“连续色调”、“Windows系统”、“Mac 系统”、“灰度等级”，用户可以自行选择。单击按钮会取消提取的任何颜色。在后面的文本框中也可以直接输入颜色的十六进制代码来进行颜色的选取。信息卡信息卡任务二创建基本文本

14、网页任务二创建基本文本网页步骤步骤6 设置文字粗体、斜体 。（用法同Word）。对上例中的文本作字形、字号、颜色及粗体设置，如图4-15所示。 图4-15 文本设置效果图任务二创建基本文本网页任务二创建基本文本网页步骤步骤7 执行【文件】【保存】命令，将文件保存。 本案例通过对段落格式的设置继续完成上例中纯文本网页的制作。编辑段落格式的步骤如下：(本例保存在配套素材中的“module044_201.htm”。)步骤步骤：步骤步骤 设置文字对齐方式。在属性面板中可以设置4种文本段落的对齐方式，如图4-16所示，从左至右分别为“左对齐”、“居中对齐”、“右对齐”和“两端对齐”。设置对齐时将光标放在

15、某一个段落中或选择需要设置的多个段落，单击属性面板中的某一个对齐按钮即可。上例中标题居中，其他左对齐，网页中的效果如图4-17所示。 图4-16 对齐方式 子任务子任务2 2 编辑段落格式编辑段落格式任务二创建基本文本网页任务二创建基本文本网页图4-17 设置对齐方式效果图任务二创建基本文本网页任务二创建基本文本网页步骤步骤 加入项目列表和编号。选中文本段落并单击 按钮，即可加入项目列表；若单击 按钮，即可加入编号列表。网页中的实际效果如图4-18所示。 图4-18 设置项目列表及编号效果图任务二创建基本文本网页任务二创建基本文本网页步骤步骤 调整文字缩进。在网页中为了区分段落，可以使用属性面

16、板中的“文本凸出”和“文本缩进”操作。选中文本段落并单击 按钮，即可使段落文本向左侧凸出一级；若单击 按钮，即可向右侧缩进一级。它们在网页中的实际效果如图4-19 所示。 图4-19 设置文字缩进效果图步骤步骤4 执行【文件】【保存】命令，保存文件。任务三任务三 创建基本图文混排网页创建基本图文混排网页 知识导读知识导读 一个仅有文本的网页不会引起浏览者的好奇。网民们不难发现，网络上的大多数网页都是由图象和多媒体来点缀整个页面。因为图象和多媒体直观和生动，不受语言、人种、地域等差异限制，使得网页能被更多浏览者关注并接受。合理地使用图像，可以让网页看起来更加美观、赏心悦目，更加充满生命力。 图像

17、与文本的完美结合可以提升网页的美观性，从而吸引更多人的关注 此外，网页文件的大小，也影响着网页被关注的程度。如果网页太大，在浏览的过程中用户会失去等待的耐心，无论网页多么精彩，用户都会放弃它。而网页的大小关键就在于网页中图像的大小。所以处理图像时要尽可能使其变得更小，使它能够在狭窄的网络带宽中快速传递；但质量又不能太差，要显示它应有的效果。这就要求设计者既要选择合适的图像格式，又要作相应的调整。任务三任务三 图像在网页中的应用图像在网页中的应用 网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG 等格式的图像文件，但目前广泛用于WEB浏览器的图形格式通常为GIF、JPEG、PNG

18、三种格式。1GIF格式格式 GIF格式采用无损压缩算法进行图像的压缩处理，可以方便地解决跨平台的兼容问题；不过GIF格式图像能显示的颜色有限，最多只能包含256种颜色；适合表现色调不连续或具有大面积单一颜色的图像，如导航图片、LOGO标志图片等；该格式的优点是图像尺寸小，可包含透明区，且可制成包含多幅画面的简单动画，缺点是图像质量稍差。2JPEG格式格式 JPEG格式的压缩方式是有损的，是静像数据压缩标准。JPEG格式使用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了；JPEG格式支持的颜色数几乎没有限制；适合于表现色彩丰富，具有连续色调，对图像品质要求较高的图

19、像。如Banner(横幅广告)、商品图片或是大的复杂的背景图片等；该格式的优点是图像质量高，缺点是文件尺寸稍大（相对于GIF格式），且不能包含透明区。任务三任务三 图像在网页中的应用图像在网页中的应用 3PNG格式格式 PNG格式是一种替代GIF格式的无专利权限的格式； PNG格式是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片包括对索引色、灰度、真彩色图像以及alpha通道透明的支持； PNG格式集JPEG和GIF格式的优点于一身，既能处理照片式的精美图像，又能包含透明区域，且可以包含图层等信息，是Fireworks的默认图像格式。子任务子任务2 2 插入图像及设置插入图像及

20、设置本案例结合任务二中的纯文本网页，利用插入图像工具及图像属性的设置制作“图文混排网页”。下面是插入图像及设置的步骤, 所用素材在配套光盘中的“module044_3”文件夹中。步骤步骤：步骤步骤 执行【文件】【打开】命令，打开01.htm 任务三任务三 图像在网页中的应用图像在网页中的应用 步骤步骤 将光标放在要插入图像的位置，单击插入栏中的“常用”选项卡，选择其中的“图像”按钮，单击该按钮右侧下拉列表中的第一项【图像】，如图4-20所示。图4-20 插入面板中的图像按钮任务三任务三 图像在网页中的应用图像在网页中的应用 上述插入图像过程也可通过执行菜单栏中的【插入记录】【图像】命令来实现。

21、在此不作详述。信息卡信息卡步骤步骤 单击后弹出“选择图像源文件”对话框，在“查找范围”的列表框中选择images文件夹中的“picture.jpg” ，如图4-21所示。 图4-21 选择图像源文件 任务三任务三 图像在网页中的应用图像在网页中的应用 步骤步骤 单击【确定】按钮，弹出“图像标签辅助功能属性”对话框，可以输入图像的替换文本，当在浏览器中鼠标指向该图像时，所指定的替换文本会显示出来，这里输入“贝克汉姆”。如图4-22所示。图4-22 设置替换文本步骤步骤 单击【确定】按钮，将图像插入到网页中。任务三任务三 图像在网页中的应用图像在网页中的应用 步骤步骤 插入图像后，通过属性面板进行

22、设置，在编辑窗口中选中该图像，展开属性面板，如图4-23所示。图4-23 图像属性面板“图像属性”面板的参数如下：(1)图像：右侧数字代表所选图像大小，下方的文本框可输入所选图像名称，以便于在使用行为和脚本语言时引用该图像。 (2)“宽”和“高”：设置页面中选中图像的宽度和高度。默认情况下，单位为“像素”。(3)“源文件”：指定图像的源文件。在该文本框中可以输入图像的源文件位置，也可以单击后面的文件夹图标按钮，直接选择图像文件的路径和文件名 任务三任务三 图像在网页中的应用图像在网页中的应用 (5)“替换”：在该文本框中可以输入图像的说明文字。(4)“链接”：在该文本框中可以输入图像的链接地址

23、，也可以单击后面的文件夹图标按钮，直接选择网站中的文件。 (6)“类”：在该下拉列表框中可以选择应用已经定义好的CSS 样式。 (7)“编辑”：右侧提供的一系列按钮，可用于对图像进行编辑。 ：使用外部编辑软件进行图像的编辑操作。 ：使用Fireworks最优化图片。 ：用于修剪图像大小，拖动裁切区域的角点至合适的位置，按 键即可完成操作，它可以切割图像区域并替换原有图像。 ：重新取样按钮，图像经过编辑后，单击该按钮可以重新读取图片文件的信息。 任务三任务三 图像在网页中的应用图像在网页中的应用 ：设置图像亮度和对比度。单击该按钮后，通过对话框中滑块的拖动可以调整图像的亮度和对比度。 ：调整图像

24、的清晰度，从而提高边缘的对比度，使图像更清晰。(8)“地图”：可以创建图像热点区域，同时下方提供了3种创建热点区域的工具。 (9)“垂直边距”和“水平边距”：设置图像在垂直方向和水平方向上的空白间距。如图4-24所示，水平间距和垂直间距分别是50和50，如图4-25所示，水平间距和垂直间距分别是0和0。 (10)“目标”：设置链接文件显示的目标位置。( 11)“低解析度源”：指定在主图像被载入之前载入的低分辨率图像来源。一般采用黑白两幅图像作为要载入图像的缩略图。 (13) ：3种基本对齐方式，设置图像的“左对齐”、“居中对齐”、“ 右对齐”任务三任务三 图像在网页中的应用图像在网页中的应用

25、图4-24 0边距图像 4-25 垂直、水平间距都是50的图像(12)“边框”：设置图像的边框宽度，单位为像素，默认为无边框。如图4-26所示为边框为8像素的图像，图4-27为边框为0的图像。 任务三任务三 图像在网页中的应用图像在网页中的应用 图4-26 边框为8像素的图像 4-27 边框为0的图像(14)“对齐”：设置的是一行中图像和文本的对齐方式 。可以在列表中选择对齐方式。 “默认值”：取决于浏览器，通常指定为基线对齐。任务三任务三 图像在网页中的应用图像在网页中的应用 “基线”：将文本的基准线与选定图形底部对齐。“顶端”：将图像顶端与当前行中最高项的顶端对齐。“居中”：将图像的中部与

26、当前行的基线对齐。“底部”：将文本底端与选定图像的底端对齐。“文本上方”：将图像的顶端与文本行中最高字符顶端对齐。“绝对居中”：将图像的中部与当前行中文本的中部对齐。“绝对底部”：将图像的底部与文本行的底部对齐。“左对齐”：将图像放置在左边，文本在图像的右侧换行。“右对齐”：将图像放置在右边，文本在图像的左侧换行。任务三任务三 图像在网页中的应用图像在网页中的应用 步骤步骤7 在“01.htm”中设置图像属性，调整图像适当大小，设置图像边框为3像素，设置图像对齐方式为“右对齐”。保存并按键在浏览器中预览。结果如图4-28所示。图4-28 图文混排效果图任务三任务三 图像在网页中的应用图像在网页

27、中的应用 更改图像大小可以通过“属性”面板的“宽”、“高”，也可以直接用鼠标拖动备选图像的控制点。拖动图像右侧控制点，可以调整图像宽度；拖动图像左侧控制点，可以调整图形高度；拖动图像右下角控制点可以实现图像的等比例缩放。信息卡信息卡任务四任务四 图像在网页中的应用图像在网页中的应用 子任务子任务1 1 设置网页背景图像设置网页背景图像知识导读知识导读网页中，图像不仅可以作为单独的页面元素来美化页面效果，还可以将图像设置为背景图像、跟踪图像、鼠标经过图像、导航条等。下面就具体讲述图像在网页中的几种应用方式。 将图像设置为网页的背景，可以实现在图像上添加文本、图像、表格等其他对象的效果。设置网页背

28、景图象步骤如下：（本任务中所用素材在配套光盘中的“module044_4”文件夹中。）步骤步骤：步骤步骤 执行执行【文件文件】【打开打开】命令，打开命令，打开“01.htm”网页文。网页文。任务四任务四 图像在网页中的应用图像在网页中的应用 图4-29 “页面属性”对话框步骤步骤 在“属性”面板中单击【页面属性】按钮，弹出“页面属性”对话框，在左侧“分类”列表中选择“外观”选项卡，如图4-29所示，单击“背景图像”后面的【浏览】按钮任务四任务四 图像在网页中的应用图像在网页中的应用 步骤步骤 弹出“选择背景图像源文件”对话框，选择网页图像文件夹“images”中的文件“bg3.jpg”，如图4

29、-30所示。图4-30 选择背景图像文件 任务四任务四 图像在网页中的应用图像在网页中的应用 步骤步骤 返回“页面属性”对话框，在选项“重复”的下拉列表框中选择“重复”，单击【确定】按钮，完成设置。步骤步骤 另存文件，存为011.htm，按键预览，网页背景图像在浏览器中显示，如图4-31所示。图4-31 浏览器中带背景图像的网页任务四任务四 图像在网页中的应用图像在网页中的应用 “重复”下拉列表中有 “不重复”、“重复”、“横向重复”、“纵向重复”四种选择。图4-32为背景图像选择“hua1.gif”“横向重复”后所得网页；图4-33为背景图像选择“hua2.gif”“纵向重复”后所得网页。信

30、息卡信息卡图4-32横向重复背景图像的网页图 4-33纵向重复背景图像的网页图 任务四任务四 图像在网页中的应用图像在网页中的应用 子任务子任务2 2 制作跟踪图像制作跟踪图像 跟踪图像是用于辅助完成网页布局的，通常会将网页的平面效果图作为跟踪图像。跟踪图像在浏览器中并不显示，只是网页制作的参照物。 步骤步骤：步骤步骤1 执行【文件】【新建】命令，新建一个空白文档。步骤步骤2 执行【查看】【跟踪图像】【载入】命令，如图4-34所示。图4-34 载入跟踪图像 任务四任务四 图像在网页中的应用图像在网页中的应用 步骤步骤4 弹出“页面属性”对话框，拖动“透明度”的滑块到“50”如图4-36所示。

31、步骤步骤3 弹出“选择图像源文件”对话框。选择images文件夹下的“genzong.jpg”，如图4-35所示。单击【确定】按钮。图4-35 选择图像源 任务四任务四 图像在网页中的应用图像在网页中的应用 可根据图像本身颜色来自行设置跟踪图像透明度，通常将跟踪图像透明度设置为“50%”以下，以防影响网页设计时的效果。注意注意图4-36 设置跟踪图像透明度 任务四任务四 图像在网页中的应用图像在网页中的应用 步骤步骤 单击【确定】按钮，完成设置，页面效果如图4-37所示。 图4-37 跟踪图像页面效果图 步骤步骤 执行【文件】【保存】命令，将网页保存为021.htm。按键预览，可以发现浏览器中

32、并没有显示设置的跟踪图像。 任务四任务四 图像在网页中的应用图像在网页中的应用 步骤步骤 设置跟踪图像的位置。执行【查看】【跟踪图像】【调整位置】命令，弹出“调整跟踪图像位置”对话框，设置“X”和“Y”的值均为“0”，单击【确定】按钮设置完成，如图4-38所示。 图4-38 设置跟踪图像的位置步骤步骤8 设置跟踪图像在编辑网页时是否显示。执行【查看】【跟踪图像】【显示】命令，“显示”菜单前有说明可在编辑网页时显示，否则不显示。通常都将其设置为显示，以便起到参照的效果。任务四任务四 图像在网页中的应用图像在网页中的应用 子任务子任务3 3 制作鼠标经过图像制作鼠标经过图像网页中经常可以看到这种效

33、果：当鼠标滑过页面中某一图像时，该图像就会变成另一幅图像，当鼠标离开后，又恢复成原来的图像。这种图像通常被称做“鼠标经过图像”。这种鼠标经过图像实际上由两个图像组成：一个是“主图像”，就是首次载入页面时显示的图像；另一个是“次图像”，就是当鼠标指针移过主图像时显示的图像 “鼠标经过图像”中的这两个图像应该大小相等。如果这两个图像的大小不同，系统会自动调整第二幅图像，使其与第一幅图像相匹配。注意注意本节通过一个具体实例的制作过程来介绍“鼠标经过图像”的相关操作。任务四任务四 图像在网页中的应用图像在网页中的应用 步骤步骤：步骤步骤1 执行【文件】【新建】命令，新建网页文件。 步骤步骤 选择菜单【

34、插入记录】【图像对象】【鼠标经过图像】，或选择如图4-39所示的插入面板中的【鼠标经过图像】命令。 图4-39 设置跟踪图像的位置任务四任务四 图像在网页中的应用图像在网页中的应用 步骤步骤4 单击【确定】按钮，完成设置。步骤步骤5 保存网页文件为031.htm，按键预览网页，将鼠标移动到“鼠标经过图像”，图像就发生变化，如图4-40所示。鼠标离开，图像恢复到原来状态，如图4-41所示。 “图像名称”：为鼠标经过图像命名。本例中默认名称为Image1。 “原始图像”：页面被打开时显示的图像，也就是“主图像”。 “鼠标经过图像”：鼠标经过时显示的图像，也就是“次图像”。“预载鼠标经过图像”：即使

35、鼠标还未经过“鼠标经过图像”，浏览器也会预先载入“次图像”到本地缓存中。这样当鼠标经过“鼠标经过图像”时，“次图像”会立即显示在浏览器中，而不会出现停顿的现象，这样就加快了网页浏览的速度。“替换文本”：“鼠标经过图像”的说明文字，当鼠标经过当前图像时，在旁边显示的提示文字。 “按下时，前往的URL”：单击图像时跳转到的链接地址。信息卡信息卡任务四任务四 图像在网页中的应用图像在网页中的应用 图4-40 鼠标经过图像 图4-41 鼠标离开图像 任务四任务四 图像在网页中的应用图像在网页中的应用 “鼠标经过图像”的功能通常被应用在链接的按钮上，根据按钮的样子的变化，来使页面看起来更加生动，并且提示

36、浏览者单击该按钮可以链接到另一个网页。信息卡信息卡子任务子任务4 4 图像做导航条图像做导航条导航条一般位于页面上方或左方，其作用相当于一本书的目录，利用导航条可以方便浏览者对页面内容进行查看。导航条可以是纯文本的，也可以将图片制作成导航条，这样使页面效果更加美观、生动。 步骤步骤：步骤步骤1 执行【文件】【新建】命令，新建一个空白文档。步骤步骤2 将光标置于文档窗口中，选择菜单【插入记录】【图像对象】【导航条】命令，或选择如图4-20所示的插入面板中的【导航条】命令。弹出“插入导航条”对话框 ，如图4-42所示。 任务四任务四 图像在网页中的应用图像在网页中的应用 图4-42 “插入导航条”

37、对话框任务四任务四 图像在网页中的应用图像在网页中的应用 “插入导航条”对话框参数：按钮和按钮：添加新的导航条元件和删除选中的导航条元件。“导航条元件”：显示添加的所有导航条元件及其排列顺序。“项目名称”：为新添加的元件标记名称。“状态图像”：导航条中该项显示的原始图像。“鼠标经过图像”：用户鼠标经过时该项显示的图像。“按下图像”：用户按下鼠标时该项显示的图像。“按下时鼠标经过图像”：用户单击过后，当鼠标再次滑过该区域时显示的图像。“替换文本”：项目的描述性文字。当鼠标滑过图像时显示该文本。“按下时，前往的URL”：显示单击该导航条元件要链接的地址。“预先载入图像”：加载网页时预先下载所用的图

38、像。“页面载入时就显示鼠标按下图像”：可在显示页面时以“按下图像”显示所选项目，而不是默认的原始图像。“插入”：选择导航条的排列形式是水平排列还是垂直排列。“使用表格”：设置是否将导航条设置为表格形式排列。信息卡信息卡任务四任务四 图像在网页中的应用图像在网页中的应用 步骤步骤3 点击“状态图像”后的【浏览】按钮，选择本章节素材中的images文件下的2.1.jpg。步骤步骤6 点击 按钮，继续添加其他导航条元件。具体步骤与添加的第一个元件类似，这里不再赘述。步骤步骤9 选择“使用表格”，对话框设置如图4-43 步骤步骤10 单击【确定】按钮，设置完成。步骤步骤11 保存文件（本例保存为本章节

39、文件夹下的“daohang.htm”） ，按键，在浏览器中浏览，效果图如图4-44步骤步骤8 在“插入”列表中选择“水平”。步骤步骤7 选择“预先载入图像”命令。步骤步骤5 在“替换文本”中输入“与您相约”。步骤步骤4 点击“鼠标经过图像”后的【浏览】按钮，选择本章节素材中的images文件下的2.jpg。任务四任务四 图像在网页中的应用图像在网页中的应用 图4-43设置“插入导航条”对话框图 图4-44设置“导航条”的网页 一个网页只能包含一个导航条，如需修改导航条，执行【修改】【导航条】命令。注意注意任务五任务五 插入多媒体内容插入多媒体内容 多媒体技术是当今Internet持续流行的一个

40、重要动力。因此，对网页设计也提出了更高的要求。在Dreamweaver CS3中，可以快速、方便地为网页添加声音、影片等多媒体内容，使网页更加生动，还可以插入和编辑多媒体文件和对象，例如Flash动画、Java Applets、ActiveX控件等。子任务子任务1 1 插入插入FlashFlash对像对像 目前，Flash动画是网页上最流行的动画格式，大量用于网页中。在Dreamweaver中，Flash动画也是最常用的多媒体插件之一，它将声音、图像和动画等内容加入到一个文件中，并能制作较好的动画效果，同时还使用了优化的算法将多媒体数据进行压缩，使文件变得很小，因此，非常适合在网上传播。下面是

41、插入Flash 对象的步骤：( 本任务中所用素材在配套光盘中的“module044_4”文件夹中。)任务五任务五 插入多媒体内容插入多媒体内容 步骤步骤：步骤步骤1 执行【文件】【新建】命令，新建一个空白文档。 步骤步骤 将光标置于要插入Flash的地方，单击“插入”栏“常用”类别中的“媒体”“Flash”按钮，如图4-45所示。图4-45 插入Flash 任务五任务五 插入多媒体内容插入多媒体内容 步骤步骤 弹出“选择文件”对话框，选择本章节素材文件夹中“images”文件夹下的“bg.swf”文件，如图4-46所示。图4-46 选择Flash文件 任务五任务五 插入多媒体内容插入多媒体内容

42、 步骤步骤5 保存文件（本例保存为本章节文件夹下的“flash.htm”） ，按键，在浏览器中浏览，效果图如图4-47所示。 任务五任务五 插入多媒体内容插入多媒体内容子任务子任务2 2 插入插入FlashFlash对像属性对像属性在编辑窗口中单击Flash文件，可以在属性面板中设置该文件的属性，如图4-48所示。 图4-48 Flash属性面板“Flash属性面板”参数设置（与“图像”重复的属性略）： 1. “循环”：设置影片在预览网页时自动循环播放。2. “自动播放”：设置Flash 文件在页面加载时就播放，建议选中。3. “品质”：在影片播放期间控制失真度。任务五任务五 插入多媒体内容插

43、入多媒体内容 “低品质”：更看重速度而非外观； “高品质”：更看重外观而非速度； “自动低品质”：首先看重速度，但如有可能则改善外观； “自动高品质”：首先看重品质，但根据需要可能会因为速度而影响外观。 4. “比例”：设置Flash对象的缩放方式。可以选择“默认(全部显示)”、“无边框”、“严格匹配”3种5. “重设大小”：将已调整过的Flash影片重新恢复到原始尺寸。6. “播放”：在编辑窗口中预览选中的Flash 文件。7. “参数”：打开“参数”对话框，为Flash 文件设定一些特有的参数。子任务子任务2 2 网页中插入影片网页中插入影片Shockwave 影片是一种很好的压缩格式，它

44、能被目前的主流浏览器（如IE和Netscape）所支持，可以被快速下载。 任务五任务五 插入多媒体内容插入多媒体内容步骤步骤：步骤步骤1 执行【文件】【新建】命令，新建一个空白文档。步骤步骤2 将光标置于要插入影片的地方，单击“插入”栏“常用”类别中的“媒体”“Shockwave”按钮，如图4-49所示。图4-49 插入Shockwave 任务五任务五 插入多媒体内容插入多媒体内容步骤步骤 弹出“选择文件”对话框，选择本章节素材文件夹中“images”文件夹下的“vido.mpeg”文件，如图4-50所示。图4-50 选择影片文件任务五任务五 插入多媒体内容插入多媒体内容步骤步骤 单击【确定】

45、按钮，Shockwave对象插入完成。 步骤步骤 保存文件（本例保存为本章节文件夹下的“shockwave.htm”），按键，在浏览器中浏览。子任务子任务4 4 利用利用AppletApplet制作动感网页制作动感网页Java是一种编程语言，可用于开发嵌入式Web中的小型应用程序，常常应用于动画、网络游戏和聊天室等领域。Applet插件是非常小的Java应用程序，它是动态、安全、跨平台的网络应用程序。利用Applet，可以制作一些非常漂亮的效果，如下雨、涟漪等。步骤步骤：步骤步骤1 执行【文件】【打开】命令，打开本任务素材下“4_5_4index.htm”网页文档。如图4-51所示。任务五任务

46、五 插入多媒体内容插入多媒体内容图4-51 “4_5_4index.htm”网页文档 任务五任务五 插入多媒体内容插入多媒体内容步骤步骤2 将光标置于要插入Applet的地方，单击“插入”栏“常用”类别中的“媒体”“APPLET”按钮，如图4-52所示。 图4-52 插入“APPLET” 任务五任务五 插入多媒体内容插入多媒体内容步骤步骤3 弹出“选择文件”对话框，选择本章节素材文件夹中“4_5_4Lake.class”文件，如图4-53所示。图4-53 选择文件 任务五任务五 插入多媒体内容插入多媒体内容步骤步骤 单击【确定】按钮，Applet对象插入完成。在“属性”面板中将“宽”设置为35

47、0，“高”设置为300，“对齐”设置为“右对齐”。在“拆分”视图的代码窗口中输入以下代码： 如图4-54所示。 图4-54 插入Applet任务五任务五 插入多媒体内容插入多媒体内容步骤步骤5 保存文件（本例保存为本章节文件夹下的“4_5_4index1.htm”），按键，在浏览器中浏览，效果图如图4-55所示。图4-55 插入Applet效果图任务六任务六 创建背景音乐创建背景音乐知识导读知识导读 背景音乐能营造一种气氛，现在很多网站为突出自己的个性， 都喜欢添加自己喜欢的音乐。现为本素材文件夹中的“paipai.htm”网页文档添加背景音乐。 下面是创建背景音乐的步骤：(此任务中所用素材在

48、配套光盘中的“module044_6”文件夹中。)步骤步骤：步骤步骤1 执行【文件】【打开】命令，打开 “paipai.htm”网页文档。步骤步骤2 将光标置于页面，单击“插入”栏“常用”类别中的“媒体”“插件”按钮，如图4-56所示。步骤步骤 弹出“选择文件”对话框，选择 “imageslmmw.mp3”文件，单击【确定】按钮，背景音乐插入完成。如图4-57所示。 任务六任务六 创建背景音乐创建背景音乐图4-56 插件 图4-57 插入音乐步骤步骤4 保存文件（本例保存为“paipaiyinyue.htm”），按键，在浏览器中浏览，页面加载后会听到音乐，并且页面上会有一个播放条。 任务六任务

49、六 创建背景音乐创建背景音乐如果想去掉页面中的播放条，可在属性面板中设置。单击“属性”面板中“参数”按钮，在弹出的对话框中添加新参“HIDDEN”,设置其值为“TRUE”。再次按键进行预览，可发现页面上没有了播放条。信息卡信息卡任务七任务七 使用超级链接使用超级链接子任务子任务1 1 什么是超级链接什么是超级链接知识导读知识导读 超链接是Web的精华，是网页中最重要、最根本的元素之一。超链接能够使多个孤立的网页之间产生一定的相互联系，从而使单独的网页形成一个有机的整体。超链接作为网页间的桥梁，起着相当重要的作用。 超级链接是“超文本链接”的缩略语，是一个专用术语，用于描述Internet上的所

50、有可用信息和多媒体资源。超级链接也可看作是从源端点到目标端点的一种跳转。通过这种跳转把Internet上众多的网站和网页联系起来，构成一个有机的整体，浏览者才能在信息海洋中尽情遨游。任务七任务七 使用超级链接使用超级链接2. 超级链接的分类超级链接的分类按照链接路径的不同，网页中超链接一般分为以下3种类型 (1)内部链接：链接目标是位于本站点中的文档，利用内部链接可以跳转到本站点中的其他页面上。 (2)外部链接：链接目标是位于本站点之外的站点或文档，利用外部链接可以跳转到本站点外的其他网站的页面上。(3)局部链接：链接目标是位于文档中的命名锚，利用局部链接可以跳转到文档中的某个指定位置。任务七