—1——2—ContentsPage目录页第5章制作导航栏案例一制作简单纵向导航栏案例二制作简单横向导航栏案例三制作带图像效果的横向导航栏案例四制作带下拉菜单的横向导航栏—3—案例一制作简单纵向导航栏案例说明导航栏的主要功能是通过超链接实现从本页面跳转到浏览者想要查看的其他页面，其中鼠标移动到导航栏上的某个菜单项时一般会有变色效果
一个好的导航栏应让用户能快捷、准确地访问网站要展现的主要内容，同时导航栏的风格也要与网站本身的风格相匹配
导航栏包括纵向导航栏、横向导航栏、带下拉菜单的导航栏等
在制作导航栏的过程中，一般会应用CSS样式表来对导航栏进行设置和美化
本案例中，我们从最基础的纵向导航栏开始学习
—4—案例一制作简单纵向导航栏案例步骤在HTML5中，导航栏是由标签定义的
导航栏一般分为横向和纵向，针对使用制作的导航栏，横向菜单无须改变结构，只需设置样式的变化即可；此处制作的纵向菜单，需要使用“display:block;”属性改变超链接列表的结构
构建HTML结构1
步骤01将本书附赠的“素材与实例\第5章”文件夹拷贝至本地磁盘创建的“MyWeb”站点根目录中
步骤02打开“文件”面板，在刚拷贝的文件夹“第5章\task1”中新建一个名为“menu-lx
html”的网页文档
—5—案例一制作简单纵向导航栏案例步骤步骤03在Dreamweaver中打开新建的文档，在body区域输入文字“我的首页心情日记学习心得工作笔记生活琐碎联系我们”
—6—案例一制作简单纵向导航栏案例步骤步骤04选中所有输入的文字，单击“插入”面板“结构”类别中的“Navigation”按钮，弹出“插入Navigation”对话框，在“ID”编辑框中输入“dh”，然后单击“确定”按钮，插入标签
—7—案例一制作简单纵向导航栏案例步骤步骤05添加超链接，即为文字添加超链接标签
选中“我的首页”文字，
