实验八 制作网页导航条.docxVIP

实验八 制作网页导航条使用实验八给的实验素材建立站点文件夹，然后制作如下的导航条。利用列表制作垂直方向的导航栏步骤：在站点中新建nav01.html，页面设置如下。在“插入”菜单中选择“Div”命令，在弹出的对话框中设置如下：在插入的Div标签中输入如下段落文字，给文字设置空链接并应用项目列表，如下图所示效果：打开【CSS样式】面板，新建以下CSS规则，保存在当前文档，具体设置如下：分类属性属性值备注方框width200px新建“ID”的样式#navigation，属性设置如下：新建“复合内容“样式#navigationul，属性设置如下：分类属性属性值备注方框padding0px全部相同margin0px全部相同列表List-style-typenone去掉列表项目符号新建“复合内容”样式#navigation li ，属性设置如下分类属性属性值备注边框stylesolid仅设下边框width1pxcolor#fff新建“复合内容”样式#navigation li a ，属性设置如下分类属性属性值备注类型font-familyArialfont-size16pxcolor#ffftext-decorationnone无下划线背景background-color#F06区块displayblock方框padding10px全部相同边框stylesolid仅设左边框width10pxcolor#C00新建“复合内容”样式#navigation li a：hover ，属性设置如下分类属性属性值备注背景background-color#C06保存并预览该页面，最终效果图如下：可修改其中相应样式的属性，将导航菜单变为水平排列的菜单，操作参考如下：选择【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”中的素材，完成如下网页：五、打开文件夹“nav05”中的页面，按照以下步骤完成，效果如下：1.设置背景颜色：#666666；2.为列表UL添加ID样式：#list（1）高度26px；（完成全部样式设置后，尝试把此行代码删除，观察导航的变化，并思考原因；（2）项目列表符