<link rel="stylesheet" href="css/global.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/help.css" type="text/css" media="screen" />
图3-1 顶部横向导航栏的外观效果
【任务实施】
1．创建顶部横向导航栏
在网页文档0303.html中“<div class="nav">” 与“</div>”之间输入以下HTML代码 <ul> <li>首页</li> <li>笔记本</li> <li><数码影音</li> <li>电玩产品</li> <li>手机通讯</li> <li>硬件外设</li> <li>办公设备</li> </ul>
【任务3-3】创建左侧帮助导航栏 【任务描述】
（1）创建左侧帮助导航栏。 左侧帮助导航栏主要包括“新手指南”、“配送 方式”、“支付方式”和“售后服务”等4个组成部 分，每个部分又细分为多个选项。 （2）设置左侧帮助导航栏各个文本形式的超链接。 左侧帮助导航栏的外观效果如图3-10所示。
图3-10 左侧帮助导航栏的外观效果
4．保存网页与浏览网页效果
保存网页0303.html，然后按快捷键F12浏 览该网页，顶部横向导航栏的浏览效果如图31所示。
【任务3-2】创建底部横向友情链接 导航栏 【任务描述】
（1）创建底部横向友情链接导航栏。 底部横向友情链接导航栏包括“淘宝网”、“当 当网”、“京东商城”、“1号店”、“好买网”、 “一比二购”、“太平洋电脑网”、“金蛋商城”、 “绿森数码”、“乐购网”、“一瞬数码”、“品牌 家电网”、“QQ商城”、“苏宁易购”等14个超链 接。
切换到网页文档0303.html的【代码】视图， 顶部横向导航栏的HTML代码如下所示。 <div class="nav"> <ul> <li><a href="page/default.html">首页</a></li>
<li><a href='page/goods03.html' title="笔记本 电脑" target="_blank"> 笔记本</a></li> <li><a href="page/goods02.html" title="数码 影音产品" target="_blank"> 数码影音 </a></li> <li><a href='#'>电玩产品</a></li> <li><a href='#'>手机通讯</a></li> <li><a href='#'>硬件外设</a></li> <li><a href='#'>办公设备</a></li> </ul> </div>
【任务3-4】创建底部帮助导航栏 【任务描述】
（1）创建包括底部帮助导航栏的网页0302help.html 。 在站点文件夹“page”中创建包括底部帮助导航栏 的网页0302help.html，横向排列的底部帮助导航栏主要 包括“新手指南”、“配送方式”、“支付方式”、“ 售后服务”和“帮助信息”等5个组成部分，每个部分 纵向又细分为多个选项。
单元3 创建超级链接与导航栏
3.1
操作准备
3.2
操作演练
3.3
技术提升
3.4
考核评价 考核评价
超级链接是网页中基本元素之一，利用它不 仅可以进行网页间的相互链接，还可以使网页链 接到相关的图像文件、多媒体文件以及下载程序 等。
【教学导航】
（1）学会创建导航栏 （2）学会创建网页的内部链接和外部链接 （3）学会创建命名锚记和到该命名锚记的链接 （4）学会在图像中设置热点区域，并创建图像热点链接 （5）学会创建电子邮件链接 教学目标 （6）学会更改链接颜色、设置链接的打开方式、设置空链接 （7）学会测试链接的有效性 （8）学会创建下拉菜单，能实现菜单的自动展开与收缩功能 （9）能正确插入浮动框架iframe，并设置其属性 （10）理解绝对路径和相对路径，熟悉链接的类型 教学方法 任务驱动法、理论实践一体化、讲练结合 课时建议 8课时（包含考核评价）
【3.1 操作准备】
在本地硬盘（例如D盘）中创建一个文件夹 “网页设计与制作案例”，将光盘中的“单元3” （包括所有子文件夹以及文件）拷贝到该文件夹 中。 使用创建站点向导创建名称为“单元3”的本 地站点。 打开文件夹“3-1”中的网页文档0303.html， 在该网页的“<head>”与“</head>”之间添加以 下代码，链接外部样式文件。
2．创建文本形式的内部链接
（1）使用【指向文件】按钮创建超链接 （2）使用【属性】面板定义超链接 （3）使用菜单命令和对话框定义超链接 （4）创建空地址链接
按照同样的方法为网页文档0303.html中顶部导航文 字“手机通讯”、“硬件外设”、“办公设备”创建空 地址链接。
3．查看顶部横向导航栏的HTML代码
【3.2 操作演练】
【任务3-1】创建顶部横向导航栏 【任务描述】
（1）创建顶部横向导航栏。 顶部横向导航栏包括“首页”、“笔记本”、 “数码影音”、“电玩产品”、“手机通讯”、 “硬件外设”和“办公设备”等7个组成部分。 （2）设置顶部导航栏各个文本形式的内部链接。 顶部横向导航栏的外观效果如图3-1所示。
【任务实施】
1．创建左侧帮助导航栏 2．创建文本形式的超链接
（1）使用【指向文件】按钮创建超链接 （2）使用【属性】面板定义超链接 （3）使用菜单命令和对话框定义超链接
使用类似方法创建其他15个超链接。
来自百度文库
3．查看左侧帮助导航栏的HTML代码 4．保存网页与浏览网页效果
保存网页0303.html，然后按快捷键F12，左侧帮 助导航栏的浏览效果如图3-10所示。
（2）设置底部横向友情链接导航栏各个文本形 式的外部链接。 底部横向友情链接导航栏的外观效果如图 3-8所示。
图3-8 底部横向友情链接导航栏的外观效果
【任务实施】
1．创建底部横向友情链接导航栏。 2．创建文本形式的外部链接。 3．查看底部横向友情链接导航栏的HTML代码。 4．保存网页与浏览网页效果。 保存网页0303.html，然后按快捷键F12，底 部横向友情链接导航栏的浏览效果如图3-8所示。
