《DW网页设计教学—单元3 创建超级链接与导航栏》由会员分享，可在线阅读，更多相关《DW网页设计教学—单元3 创建超级链接与导航栏（45页珍藏版）》请在人人文库网上搜索。

1、操作准备操作准备3.1操作演练操作演练3.2考核评价考核评价3.4考核评价考核评价技术提升技术提升3.3 超级链接是网页中基本元素之一，利用它不仅超级链接是网页中基本元素之一，利用它不仅可以进行网页间的相互链接，还可以使网页链接到可以进行网页间的相互链接，还可以使网页链接到相关的图像文件、多媒体文件以及下载程序等。相关的图像文件、多媒体文件以及下载程序等。教学目标教学目标（1 1）学会创建导航栏）学会创建导航栏（2 2）学会创建网页的内部链接和外部链接）学会创建网页的内部链接和外部链接（3 3）学会创建命名锚记和到该命名锚记的链接）学会创建命名锚记和到该命名锚记的链接（4 4）学会在图像中设置

2、热点区域，并创建图像热点链接）学会在图像中设置热点区域，并创建图像热点链接（5 5）学会创建电子邮件链接）学会创建电子邮件链接（6 6）学会更改链接颜色、设置链接的打开方式、设置空链接）学会更改链接颜色、设置链接的打开方式、设置空链接（7 7）学会测试链接的有效性）学会测试链接的有效性（8 8）学会创建下拉菜单，能实现菜单的自动展开与收缩功能）学会创建下拉菜单，能实现菜单的自动展开与收缩功能（9 9）能正确插入浮动框架）能正确插入浮动框架iframeiframe，并设置其属性，并设置其属性（1010）理解绝对路径和相对路径，熟悉链接的类型）理解绝对路径和相对路径，熟悉链接的类型教学方法教学方法

3、任务驱动法、理论实践一体化、讲练结合任务驱动法、理论实践一体化、讲练结合课时建议课时建议8 8课时（包含考核评价）课时（包含考核评价） 在本地硬盘（例如在本地硬盘（例如D盘）中创建一个文件夹盘）中创建一个文件夹“网页设计与制作案例网页设计与制作案例”，将光盘中的，将光盘中的“单元单元3”（包括所有子文件夹以及文件）拷贝到该文件夹中。（包括所有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为使用创建站点向导创建名称为“单元单元3”的本地的本地站点。站点。 打开文件夹打开文件夹“3-1”中的网页文档中的网页文档0303.html，在该网页的在该网页的“”与与“”之间添加以下之间添加

4、以下代码，链接外部样式文件。代码，链接外部样式文件。【任务任务3-1】创建顶部横向导航栏创建顶部横向导航栏【任务描述任务描述】 （1）创建顶部横向导航栏。）创建顶部横向导航栏。 顶部横向导航栏包括顶部横向导航栏包括“首页首页”、“笔记本笔记本”、“数数码影音码影音”、“电玩产品电玩产品”、“手机通讯手机通讯”、 “硬件外设硬件外设”和和“办公设备办公设备”等等7个组成部分。个组成部分。 （2）设置顶部导航栏各个文本形式的内部链接。）设置顶部导航栏各个文本形式的内部链接。 顶部横向导航栏的外观效果如图顶部横向导航栏的外观效果如图3-1所示。所示。图图3-13-1顶部横向导航栏的外观效果顶部横向导

5、航栏的外观效果【任务实施任务实施】l1创建顶部横向导航栏创建顶部横向导航栏 在网页文档在网页文档0303.html中中“”与与“”之间输入以下之间输入以下HTML代码代码 首页首页 笔记本笔记本 数码影音数码影音 电玩产品电玩产品 手机通讯手机通讯 硬件外设硬件外设 办公设备办公设备（1）使用）使用【指向文件指向文件】按钮创建超链接按钮创建超链接（2）使用）使用【属性属性】面板定义超链接面板定义超链接（3）使用菜单命令和对话框定义超链接）使用菜单命令和对话框定义超链接（4）创建空地址链接）创建空地址链接 按照同样的方法为网页文档按照同样的方法为网页文档0303.html中顶部导航文字中顶部导航

6、文字“手机通讯手机通讯”、“硬件外设硬件外设”、“办公设备办公设备”创建空地址创建空地址链接。链接。 切换到网页文档切换到网页文档0303.html的的【代码代码】视图，顶视图，顶部横向导航栏的部横向导航栏的HTML代码如下所示。代码如下所示。 首页首页 笔记本笔记本 数码影音数码影音电玩产品电玩产品 手机通讯手机通讯 硬件外设硬件外设 办公设备办公设备 保存网页保存网页0303.html，然后按快捷键，然后按快捷键F12浏览该浏览该网页，顶部横向导航栏的浏览效果如图网页，顶部横向导航栏的浏览效果如图3-1所示。所示。【任务任务3-2】创建底部横向友情链接导航栏创建底部横向友情链接导航栏【任务

7、描述任务描述】 （1）创建底部横向友情链接导航栏。）创建底部横向友情链接导航栏。 底部横向友情链接导航栏包括底部横向友情链接导航栏包括“淘宝网淘宝网”、“当当当当网网”、“京东商城京东商城”、“1号店号店”、“好买网好买网”、“一比一比二购二购”、“太平洋电脑网太平洋电脑网”、“金蛋商城金蛋商城”、“绿森数绿森数码码”、“乐购网乐购网”、“一瞬数码一瞬数码”、“品牌家电网品牌家电网”、“QQ商城商城”、“苏宁易购苏宁易购”等等14个超链接。个超链接。 （2）设置底部横向友情链接导航栏各个文本形式的外）设置底部横向友情链接导航栏各个文本形式的外部链接。部链接。 底部横向友情链接导航栏的外观效果如

8、图底部横向友情链接导航栏的外观效果如图3-8所所示。示。图图3-83-8底部横向友情链接导航栏的外观效果底部横向友情链接导航栏的外观效果【任务实施任务实施】 1创建底部横向友情链接导航栏。创建底部横向友情链接导航栏。 2创建文本形式的外部链接。创建文本形式的外部链接。 3查看底部横向友情链接导航栏的查看底部横向友情链接导航栏的HTML代码。代码。 4保存网页与浏览网页效果。保存网页与浏览网页效果。 保存网页保存网页0303.html，然后按快捷键，然后按快捷键F12，底部，底部横向友情链接导航栏的浏览效果如图横向友情链接导航栏的浏览效果如图3-8所示。所示。【任务任务3-3】创建左侧帮助导航栏

9、创建左侧帮助导航栏【任务描述任务描述】 （1）创建左侧帮助导航栏。）创建左侧帮助导航栏。 左侧帮助导航栏主要包括左侧帮助导航栏主要包括“新手指南新手指南”、“配送方式配送方式”、“支付方式支付方式”和和“售后服务售后服务”等等4个组成部分，每个部分又细分为多个选项。个组成部分，每个部分又细分为多个选项。 （2）设置左侧帮助导航栏各个文本形式的超链接。）设置左侧帮助导航栏各个文本形式的超链接。 左侧帮助导航栏的外观效果如图左侧帮助导航栏的外观效果如图3-10所示。所示。图图3-103-10左侧帮助导航栏的外观效果左侧帮助导航栏的外观效果【任务实施任务实施】l1创建左侧帮助导航栏创建左侧帮助导航栏

10、l2创建文本形式的超链接创建文本形式的超链接（1）使用）使用【指向文件指向文件】按钮创建超链接按钮创建超链接（2）使用）使用【属性属性】面板定义超链接面板定义超链接（3）使用菜单命令和对话框定义超链接）使用菜单命令和对话框定义超链接 使用类似方法创建其他使用类似方法创建其他15个超链接。个超链接。l3查看左侧帮助导航栏的查看左侧帮助导航栏的HTML代码代码l4保存网页与浏览网页效果保存网页与浏览网页效果 保存网页保存网页0303.html，然后按快捷键，然后按快捷键F12，左侧帮助，左侧帮助导航栏的浏览效果如图导航栏的浏览效果如图3-10所示。所示。【任务任务3-4】创建底部帮助导航栏创建底部

11、帮助导航栏【任务描述任务描述】 （1）创建包括底部帮助导航栏的网页）创建包括底部帮助导航栏的网页0302help.html 。 在站点文件夹在站点文件夹“page”中创建包括底部帮助导航栏的网中创建包括底部帮助导航栏的网页页0302help.html，横向排列的底部帮助导航栏主要包括，横向排列的底部帮助导航栏主要包括“新手指南新手指南”、“配送方式配送方式”、“支付方式支付方式”、“售后服务售后服务”和和“帮助信息帮助信息”等等5个组成部分，每个部分纵向又细分为多个组成部分，每个部分纵向又细分为多个选项。个选项。 （2）设置底部帮助导航栏各个文本形式的超链接。）设置底部帮助导航栏各个文本形式的

1、URL的中文简称是统一资源定位器。

2、网页中常用的基本元素有文字、图像、超链接。

3、表格之所以是网页制作中的高级元素，最主要的原因是它可以布局网页。

4、在Dreamweaver CS3中，标题标记符是Hn，一共是 6 级标题；其中第 1 级标题最大，第 6 级标题最小。

5、简单来说，网页的实质是一个网页文档，而网站的实质是网页的集

6、在Dreamweaver CS3中，一般高度height与宽度weight的取值有两种，分别是百分数与像素数。

7、有一个电子邮箱地为：xuexi@”为服务器名。

8、在HTML语言中，文字元素中，段落标记符是

1、互联网之所以吸引人，是由于使用了大量的超链接。超链接按照链接对象的不同，可以分为、、和热区链接。

2、网页中常用的基本元素有文字、图像、超链接。

3、表格之所以是网页制作中的高级元素，最主要的原因是它可以布局网页。

4、表单是实现浏览者与服务器之间，进行交互的一种网页元素，它属于网页元素中的高级元素。

5、有一个电子邮箱地为：xuesheng@”为服务器名。

7、在Dreamweaver CS3中，一般高度height与宽度weight的取值有两种，分别是百分数与像素数。

8、网页文字元素中，强制换行标记符是

9、标签实现的作用是实现滚动效果。

1、一个网站中的多个网页之间是通过（）联系起来的。

2、博客曾经风靡一时，以下哪一项不是博客的功能（）。

3、在制作网站时，下面（）属于Dreamweaver的工作范畴。

A、内容信息的搜集整理

B、网页的美工设计和图像的制作

C、把所有的资源组合成网页

D、数据库的管理和维护