实验八 制作网页导航条

实验八制作网页导航条
使用实验八给的实验素材建立站点文件夹，然后制作如下的导航条。

一、利用列表制作垂直方向的导航栏
步骤：
1.在站点中新建nav01.html，页面设置如下。

2.在“插入”菜单中选择“Div”命令，在弹出的对话框中设置如下：
3.在插入的Div标签中输入如下段落文字，给文字设置空链接并应用项目列表，
如下图所示效果：
4.打开【CSS样式】面板，新建以下CSS规则，保存在当前文档，具体设置如
下：
1)新建“ID”的样式#navigation，属性设置如下：
2)新建“复合内容“样式#navigationul，属性设置如下：
3)新建“复合内容”样式#navigation li ，属性设置如下
4)新建“复合内容”样式#navigation li a ，属性设置如下
5)新建“复合内容”样式#navigation li a：hover ，属性设置如下
6)保存并预览该页面，最终效果图如下：
7)可修改其中相应样式的属性，将导航菜单变为水平排列的菜单，操作参
考如下：
选择【CSS样式】面板中的#navigation样式，将【方框】分类中的“width”属性改为600px。

选择【CSS样式】面板中#navigationli样式，将【方框】分类中的“width”属性设置为100px。

“float(浮动)”属性设为：left(左对齐)，单击【应用】按钮查看效果。

继续将“margin”的右right、左left属性分别设为5px，单击【应用】按钮查看效果。

最后单击【确定】按钮，则可看到垂直导航菜单变为水平导航菜单。

二、制作垂直方向的导航栏
在Dreamweaver CC打开实验素材文件夹中的nav02文件夹中的nav02.html 文件，将图1左侧竖排的导航栏制作成如2的效果：
图1 初始竖排导航栏图2 导航栏最终效果
提示：（1）将左侧导航栏的ul项目列表标签设置一个id值是nav。

（2）设置如下CSS样式:
#nav li {
行高: 54px;
列表项目符号: none;
文本对齐方式:居中;
背景图像: url(images/sec_menu_bg_b.jpg);
背景图像不重复;
}
#nav li a {
字体颜色黑色;
去掉超链接下划线（文本修饰设置为无）;
}
将#nav的第一个列表项li的class值设置为first，再继续设置如下CSS样式：#nav .first a {
字体颜色: 白色;
}
#nav .first {
背景图像: url(images/sec_menu_bg_a.jpg);
背景图像不重复;
}
思考题：你能继续完善这个导航栏，使得当鼠标经过导航栏的超链接时，当前列表项变为蓝色背景图白色文字吗？
三、按钮式的超链接
在Dreamweaver CC打开实验素材文件夹中的nav03.html文件，设置CSS样式，实现如下图的按钮式超链接效果：
（1）a {
字体: #000000、12px、粗体;
下划线: 无;
显示（display）: 块（block）;
左边界（margin-right）: 20px;
填充（padding）：25px
浮动（float）: left;
文本对齐: 居中;
背景颜色：#d4d0c8
上、左边框：1px #EEEEEE（浅灰色）实线
右、下边框：1px #808080（深灰色）实线
}
（2）a:hover
{
背景颜色: #eee9e0;
}
（3）a:active
{
背景颜色：#d4d0c8
上、左边框：1px #808080（深灰色）实线
右、下边框： 1px #EEEEEE（浅灰色）实线
}
思考：网页中共有4个超链接，如果只希望其中两个呈现按钮的效果，其余两
个仍保持超链接的普通样式，应该如何设计CSS样式？
四、为超链接设置背景图片
利用文件夹“nav04”中的素材，完成如下网页：
banner1_bg.jpg
button1_bg.jpg Button2.jpg button1.jpg
五、打开文件夹“nav05”中的页面，按照以下步骤完成，效果如下：
1.设置背景颜色：#666666；
2.为列表UL添加ID样式：#list
（1）高度26px；（完成全部样式设置后，尝试把此行代码删除，观察导航的变化，并思考原因；
（2）项目列表符号：无；
（3）底部边框：2px solid #0F3BA；
3.把li设置为左浮动；
4.为超链接a设置样式：
样式内容自己思考；
5.为超链接设置鼠标经过状态的样式a:hover
鼠标经过超链接背景图片为hover.gif；
6.第一个超链接“首页”表示当前页面，其背景图片与其他超链接不一样，请添加一个样式完成此效果。

六、（选做）超链接案例
利用文件夹“nav06”中的素材，根据效果图，完成网页的制作。

如果认为网页布局有难度，可将效果图中的几个超链接分在不同的网页中完
成。

鼠标经过边框颜色：
文字颜色：#60B0E6
#60B0E6
鼠标经过背景颜色：#60B0E6
鼠标经过文字颜色：#ca670c。