《网页设计与制作》 教学课件.

Presentation on theme: "《网页设计与制作》 教学课件."— Presentation transcript:

1 《网页设计与制作》 教学课件

2 第9章：超级链接与导航栏 主要教学环节 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 五、知识讲解与操作示范
六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题

3 （一）课程引导 一个网站由许多的网页组成，而各个网页之间通常是由超级链接联系在一起的。超级链接是网页中最基本的元素之一，利用它不仅可以进行网页间的相互链接，还可以使网页链接到相关的图像文件、多媒体文件以及下载程序等。

4 （二）明确知识技能目标 （1）掌握创建外部链接和内部链接的操作方法。 （2）掌握制作图像映射的操作方法。
（3）掌握创建 链接的操作方法。 （4）掌握测试链接的有效性的操作方法。

5 （三）展示网页浏览效果 本章所制作的网页index.html的浏览效果如图所示。 图9-1　　网页index.html的预览效果

6 （四）分析操作任务 （1）在站点“长沙世界之窗”下创建文件夹“10超级链接”，在“10超级链接”文件夹中创建命名为“index.html”的网页。 （2）在该网页中创建外部链接和内部链接。 （3）在该网页中制作图像映射，设置图像热点的超级链接。 （4）在该网页中创建导航栏。

7 （五）知识讲解与操作示范（1） 9.1 超级链接概述
9.1　超级链接概述 每一个网页文档都有自己的存放位置和路径，在一个网站中，链接路径通常有3种表格方法：绝对路径、文档目录相对路径、根目录相对路径。

8 （五）知识讲解与操作示范（2） 1．绝对路径 绝对路径是被链接文档的完整路径，包括使用的传输协议，例如“ 从当前浏览的网页链接到其他网站的网页时，必须使用绝对路径。

9 （五）知识讲解与操作示范（3） 2．文档目录相对路径
文档目录相对路径是指以当前文档所在位置为起点到被链接文档经由的路径，使用文档相对路径可 省去当前文档和被链接文档的绝对路径中相同的部分，保留不同部分。 文档目录相对路径适合于网站的内部链接。只要是属于同一网站之下，即使不在同一个文件夹中，文档目录相对路径也是适合的。

10 （五）知识讲解与操作示范（4） 3．站点根目录相对路径
站点根目录相对路径是指从站点根文件夹到被链接档经由的路径。根目录相对路径也适用于创建内部链接，但大多数情况下，一般不使用这种路径形式。

11 （五）知识讲解与操作示范（5） 9.2 创建超级链接
9.2　创建超级链接 在“10超级链接”文件夹中创建一个命名“index.html”的网页。该网页包括外部的友情链接，例如“湖南凤凰”网站。也包括多种形式的内部链接，例如图像映射、 链接。 网页“index.html”及其超级链接创建过程如下：

12 （五）知识讲解与操作示范（6） 9.2.1　新建网页 在站点“长沙世界之窗”下创建文件夹“10超级链接”，在“10超级链接”文件夹中创建一个命名为“index.html”的网页，保存该网页文档。

13 （五）知识讲解与操作示范（7） 9.2.2　编辑网页 （1）将光标置于网页编辑窗口的左上角，插入一个8行 1列的表格，表格的“宽”设置为“767px”，“对齐”方式设置为“居中对齐”，“填充”、“间距”、“边框”都设置为0。 （2）在表格的第一行插入一幅图像“image/1001.jpg”，在表格的第二行插入一幅图像“image/1002.jpg”，在表格的第三行插入一幅Flash动画。 （3）在表格的第五行输入文本：“返回首页 | 关于我们 | 公司部门 | 企业文化 | 发送邮件”，且“居中”对齐。

14 （五）知识讲解与操作示范（8） （4）在表格的第六行中输入文本：“友情链接：湖南张家界 | 湖南凤凰 | 湖南韶山 ”，且“居中”对齐。
（6）调整表格中的图像和 Flash 动画的大小和位置。

15 （五）知识讲解与操作示范（9） 9.2.3 创建超级链接 1．创建外部链接
9.2.3　创建超级链接 1．创建外部链接 为表格中第六行中的文本“湖南张家界”等创建外 部分链接，操作过程如下： （1）选中表格第六行中的文字“湖南张家界”。 （2）在属性面板的“链接”文本框中输入外部链接的绝对路径： （3）外部链接的绝对路径输入完成之后，属性面板中的“目标”下拉列表框即变为可选状态，共有4个选项可供选择。

16 （五）知识讲解与操作示范（10） 2．创建文本形式的内部链接 为表格中的第五行文本“关于我们”创建内部链接，操作过程如下：
（1）选中第五行中的文字“关于我们”。 （2）在“属性”面板中，单击“链接”列表框中右边的【浏览文件】按钮 ，在弹出的“选择文件”对话框中选择一个网页文件。这里，选择同一个站点中文件夹“02文本操作”中网页文档“02.html”，则链接到该网页。 （3）在“目标”下拉列表框中选择“_blank”。 至此，一个内部链接创建完成。

17 （五）知识讲解与操作示范（11） 3．制作图像映射
所谓图像映射是指一张图片上多个不同的区域拥有不同的链接地址。在图像中定义一定形状的区域，然后给这些区域加上链接，这些区域被称为热点。 下面为表格第二行中的图像制作图像映射，下面以图像中的“超级游乐”位置为例说明操作过程。

18 （五）知识讲解与操作示范（12） （1）指定热点区域
选择表格第二行中的图像，然后单击“属性”面板左侧“地图”下的“椭圆形热点工具”按钮，进入热点区域绘制状态。当鼠标指针变成“+”字形状时，按住鼠标左键，在需要设置热点的位置“超级游乐”拖动鼠标形成一个圆形，于是一个圆形的热点区域便形成，且用透明的蓝色显示指定图像的热点区域。 采用同样的方法可以指定多个热点区域。热点区域绘制完成后，单击“指针热点工具”按钮，取消热点区域绘制状态。

19 （五）知识讲解与操作示范（13） （2）调整热点区域 选中热点区域，可以对热点区域的大小和位置进行适当调整。 （3）设置图像热点的超级链接
（4）保存网页，且浏览网页，当鼠标指向不同的区域时，单击后打开链接页面。

20 （五）知识讲解与操作示范（14） 4．创建E-mail链 创建E-mail链接的操作要求如下：
（2）替浏览者加入邮件的主题为“对网站的意见与建议”。 创建 链接的操作过程如下： （1）选中页面的文字“发送邮件”，在“属性”面板的“链接”文本框

21 （五）知识讲解与操作示范（15） 9.2.4　链接检查 当创建完一个网站的链接后，应该对链接进行检查与测试，利用“链接检查器”可以检查网站中的链接。过程如下： （1）在Dreamweaver 8主窗口中，单击菜单【窗口】→【结果】，打开“结果”面板。 （2）在“结果”面板中切换到“链接检查器”选项卡，单击面板左上角的绿色箭头，在弹出的菜单中选择相应命令，例如选择“检查整个当前本地站点的链接”。 （3）链接检查器会自动开始检查站点链接，检查完毕后，如果有无效链接，便会显示在该对话框中。如果要修改无效链接，直接单击链接内容，并对其进行修改即可。

22 （五）知识讲解与操作示范（16） 9.3　导航栏简介 导航栏实际是超级链接的综合应用。为了方便网站访问者浏览网站中相关信息，通常将许多超链接有规律地排列网页的上部或者左侧，这些超链接就是浏览者访问网站的向导，形象地称为“导航栏”，尤其是首页一般都有导航栏。

23 （五）知识讲解与操作示范（17） 导航栏可以理解为超链接的有序排列。导航条的布局方式通常分为横向排列、纵向排列、弧形排列、浮动导航栏等多种形式；导航栏中的的超链接载体可以为文字、图片、Flash动画、按钮等；导航栏也可做成弹出式菜单形式。导航可以排列在页面的上方、左侧、右侧、底部，有的网站将导航栏置于页面的中部位置。

24 （六）课堂模仿实践 1．操作要求 （1）打开“课堂实践”网站文件夹“10超级链接”中的网页文档“10.html”。
（2）选中页面底部的文字“返回首页”设置超链接，链接的网页文档为“index.html”；同样为“关于我们”设置超链接，链接的网页文档为“02.html”；为“公司部门”设置超链接，链接的网页文档为“12.html”。 （4）为图片“凤凰城门”创建超链接，链接的网页文档为“10_1.html”。

25 （六）课堂模仿实践 2．效果展示 图9-15　　图像超链接所打开的网页 图9-14　　设置超链接的课堂实践网页的浏览效果

26 （六）课堂模仿实践 3．制作要点提示 先选中文字或图片，然后在属性面板的“链接”列表框中输入链接对象的路径和名称，也可以打开对话框选择链接的文件。

27 （六）课堂模仿实践 课外拓展实践 1．在“湖铁职院学院网站”站点文件夹“10超级链接”中创建网页文档“10.html”。
2．为该网页的上部导航栏和底部导航栏设置超级链接。

28 （七）疑难解析

29 （八）归纳总结 制作网页时经常需要通过超级链接将各个不同 的页面联系起来，达到快速指向需要浏览页面的目
的。通过本章学习，熟练掌握如何创建外部链接，页 间链接、空链接、 链接等，并能测试链接的有 效性。

30 （九）布置习题