【任务3-1】创建顶部横向导航

【任务描述】

（1）创建顶部横向导航栏。

     顶部横向导航栏包括“首页”、“笔记本”、“数码影音”、“电玩产品”、“手机通讯”、

“硬件外设”和“办公设备”等7个组成部分。

（2）设置顶部导航栏各个文本形式的内部链接。

     顶部横向导航栏的外观效果如图3-1所示。

图3-1  顶部横向导航栏的外观效果

【任务实施】

1．创建顶部横向导航栏

  在网页文档0301.html中“<div>”与“</div>”之间输入以下HTML代码

<ul>

  <li>首页</li>

  <li>笔记本</li>

  <li>数码影音</li>

  <li>电玩产品</li>

  <li>手机通讯</li>

  <li>硬件外设</li>

  <li>办公设备</li>

</ul>

2．创建文本形式的内部链接

（1）使用【指向文件】按钮创建超链接

（2）使用【属性】面板定义超链接

（3）使用菜单命令和对话框定义超链接

（4）创建空地址链接

     按照同样的方法为网页文档0303.html中顶部导航文字“手机通讯”、“硬件外设”、“办公设备”创建空地址链接。

3．查看顶部横向导航栏的HTML代码

   切换到网页文档0301.html的【代码】视图，顶部横向导航栏的HTML代码如下所示。

<div>

  <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>