欢迎来到天天文库
浏览记录
ID：40678593
大小：4.91 MB
页数：56页
时间：2019-08-06
《第5章 制作导航栏》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、网页设计案例教程案例说明导航栏的主要功能是通过超链接实现从本页面跳转到浏览者想要查看的其他页面，其中鼠标移动到导航栏上的某个菜单项时一般会有变色效果。一个好的导航栏应让用户能快捷、准确地访问网站要展现的主要内容，同时导航栏的风格也要与网站本身的风格相匹配。导航栏包括纵向导航栏、横向导航栏、带下拉菜单的导航栏等。在制作导航栏的过程中，一般会应用CSS样式表来对导航栏进行设置和美化。本案例中，我们从最基础的纵向导航栏开始学习。案例步骤在HTML5中，导航栏是由标签定义的。导航栏一般分为横向和纵向，针对使用制作的导航栏，横
2、向菜单无须改变结构，只需设置样式的变化即可；此处制作的纵向菜单，需要使用“display:block;”属性改变超链接列表的结构。构建HTML结构1.步骤01将本书附赠的“素材与实例第5章”文件夹拷贝至本地磁盘创建的“MyWeb”站点根目录中。步骤02打开“文件”面板，在刚拷贝的文件夹“第5章task1”中新建一个名为“menu-lx.html”的网页文档。案例步骤步骤03在Dreamweaver中打开新建的文档，在body区域输入文字“我的首页心情日记学习心得工作笔记生活琐碎联系我们”。案例步骤步骤04选中所有输入的文字，单击“插
3、入”面板“结构”类别中的“Navigation”按钮，弹出“插入Navigation”对话框，在“ID”编辑框中输入“dh”，然后单击“确定”按钮，插入标签。案例步骤步骤05添加超链接，即为文字添加超链接标签。选中“我的首页”文字，单击“插入”面板“常用”类别中的“Hyperlink”按钮，打开“Hyperlink”对话框。由于现在还没有需要跳转的页面，所以在“链接”编辑框中输入“#”符号（表示插入空链接），然后单击“确定”按钮。案例步骤步骤06参考步骤5的操作，依次为“心情日记”“学习心得”“工作笔记”“生活琐碎”和“
4、联系我们”这些文字添加超链接。案例步骤步骤07保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。此时网页的结构部分制作完成，涉及的HTML标签如表5-1所示。表5-1涉及的HTML标签标签描述
5、="text/css">案例步骤步骤02设置超链接样式，包括纵向排列，消除下划线，设置文字大小和颜色，设置背景颜色和内边距等。在步骤1输入的标签对之间输入代码。设置各超链接块高度为30像素，再设置行高为30像素，目的是让文字可以在块中纵向居中，这也是使用line-height实现内容纵向居中的方法。超链接标签属于行内元素，将其转换为块元素（display:block）的原因有两个，一是可以控制标签的宽度、高度及能填充边框等；二是为了使鼠标指针放在导航栏的任意位置（文字之外的地方）都可产生悬停效果
6、。提示案例步骤步骤03设置鼠标移到超链接上时，超链接文字颜色发生变化的效果（使用hover伪类），在步骤2输入的代码下方输入代码。#dha:hover{color:#FFFFFF;/*设置超链接在hover状态时的文字颜色*/background-color:#000033;/*设置超链接在hover状态时的背景色*/border-left-width:10px;/*设置超链接在hover状态时左边框的宽度为10像素*/border-left-style:solid;/*设置超链接在hover状态时左边框的线型为实线*/border-l
7、eft-color:#D8D803;/*设置超链接在hover状态时左边框的颜色*/}padding属性叫做填充（或内边距），用来设置块元素中的元素（如文字）同块边框之间的距离；margin属性叫做外边距，用来设置元素与元素之间的距离。案例步骤步骤04保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。a:hover表示鼠标放到超链接上时超链接的状态；a:link是超链接没被访问时的状态；a:active为鼠标单击超链接但没释放时的状态；a:visited为超链接被访问后的状态。对于其他元素也可设置动态效果
8、，只需将a换成其他选择器名即可。提示支撑知识点使用CSS的一些小技巧display属性规定元素的显示类型，其具有多个不同的属性值，其中display:block表示将元素转换为块级元素。合理利用displa
此文档下载收益归作者所有
