实训教案.docx
《实训教案.docx》由会员分享，可在线阅读，更多相关《实训教案.docx（13页珍藏版）》请在冰点文库上搜索。
实训教案
导航条制作
【实训目标】
导航条制作
1.在网页中插入标题、文字。
2.CSS对HTML标签的美化。
【实训课时】
2学时
【背景资料】
导航条是网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容，是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。
利用导航条，我们就可以快速找到我们想要浏览的页面。
导航条的目的是让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，让用户在浏览网站过程中不至迷失。
为了让网站信息可以有效地传递给用户，导航一定要简洁、直观、明确。
作用就是你有什么需要如浏览新闻，你可以直接点击“新闻”便可进入新闻页面。
在企业网站上，导航条上常见的有：
产品介绍，公司简介，最新产品，联系我们等。
【实训环境】
一、PC最低配置要求如下——
操作系统：
WindowsXP/WindowsVista/Windows7
CPU：
英特尔奔腾43.0GHz或AMD速龙3200+
物理内存：
512M
硬盘空间：
12GB
显卡：
带有256MB显存、支持DirectX9.0c、核心达到NVIDIAGeForce6600GT或ATIRadeonX1600XT级别
声卡：
支持DirectX9.0c
二、PC软件要求如下——
安装DreamweaverCS4版本，安装office2003以上版本
【实训内容】
本节实训课的安排是完成导航条的制作。
导航栏是一个网站的大纲，可以引导浏览者快速到达所要访问的页面。
在大多数的网站导航中都使用项目列表来制作。
任务实施步骤：
1.主导航条制作
（1）启动DreamweaverCS5，打开index.html页面。
（2）新建CSS文件。
执行菜单栏上的“文件”→“新建”。
在弹出的“新建文档”对话框中，选择新建“空白页”，在“页面类型”中选择CSS，单击“创建”，建立文件。
（3）保存style.css文件。
执行菜单栏上的“文件”→“保存”命令，快捷键为Ctrl+S。
在弹出的“另存为”对话框中，填写文件名为“style.css”，单击确定，将该页面保存在“leyouwebsite”文件夹中的“css”文件夹中。
（4）链接style.css文件。
单击选项卡切换回index.html的编辑界面。
打开CSS面板，选择面板下方的“附加样式表”
图标，在弹出的“链接外部样式表”对话框中单击浏览添加“css”文件夹中的style.css文件，路径为“css/style.css”，添加方式为“链接”，单击确定保存设置。
（5）插入项目列表。
将插入面板切换到“文本”项目，点击面板的“ul项目列表”图标，即会自动插入项目列表。
直接输入列表内容，每输入完一个菜单，按“回车”键换行，然后输入下一个菜单，直到输入完成。
效果如图1所示。
图1项目列表
小提示：
项目列表的HTML标签为
，每行为一个列表项，HTML标签为- 。
（6）将栏目名称设置为超链接。
选中栏目名称，如“首页”，在下方属性栏中填写超链接地址，由于本例中没有其他页面，因此将链接设置为“空链接”，即在链接栏中填写“#”，如图2所示。
效果如图3所示。
图2超链接设置
图3导航超链接效果
（7）清除项目列表默认样式。
项目列表的默认样式有边距值，并且有很色圆点的项目符号，我们利用CSS把它们去掉。
利用CSS对“ul”标签进行设置。
打开CSS面板，选择面板下方的“新建CSS规则”
图标，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#navul”，“规则定义”为“style.css”，如图4所示。
图4新建CSS规则
单击确定，打开“#navul的CSS规则定义”对话框。
在对话框中设置“方框”分类参数，padding：
0px；margin-top:
0px；margin-right:
0px；margin-bottom:
0px；margin-left:
30px。
如图5所示。
图5css规则定义方框分类
设置“列表”分类参数，list-style-type：
none，如图6所示。
图6导航超链接效果
（8）设置列表为横向列表。
方法为定义每一个列表项为左浮动。
新建CSS样式规则，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#navli”，“规则定义”为“style.css”，单击确定，打开“#navli的CSS规则定义”对话框。
在对话框中设置“方框”分类参数，float：
left。
如图7所示。
图7css规则定义方框分类
（9）用CSS设置导航的链接文本样式。
当前导航文字效果为默认值，蓝色，有下划线，栏目之间距离太近，且没有在整个导航栏中居中，我们要通过CSS对ID为“nav”的DIV中的标签进行样式定义，使导航文本得到美化。
新建CSS样式规则，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#nava”，“规则定义”为“style.css”，单击确定，打开“#navli的CSS规则定义”对话框。
在对话框中设置“方框”分类参数，width：
126px；height：
41。
如图8所示。
图8css规则定义方框分类
设置“类型”分类参数，font-family：
黑体；font-size：
16px；line-height：
41px；font-weight：
normal；color：
#fff；text-decoration：
none。
如图9所示。
图9css规则定义类型分类
设置“区块”分类参数，text-align：
center；display：
block，如图10所示。
图10css规则定义区块分类
小窍门：
一般在设置超链接文本样式的行高（line-height）的时候一般设置成与DIV（id=nav）的高度一致，这样能保证文本垂直居中对齐。
（10）设置导航栏鼠标经过的特效。
新建CSS样式规则，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#nava：
hover”，“规则定义”为“style.css”，单击确定，打开“#nava：
hover的CSS规则定义”对话框。
在对话框中设置“背景”分类参数，background-image：
../images/nav_active.jpg；background-repeat：
no-repeat。
如图11所示。
图11css规则定义背景分类
设置“类型”分类参数，color：
#f1a700，如图12所示。
图12css规则定义类型分类
（11）设置导航栏访问过的链接状态。
默认值时，访问过的链接为红色，我们要把链接改为白色。
新建CSS样式规则，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#nava：
visited”，“规则定义”为“style.css”，单击确定，打开“#nava：
visited的CSS规则定义”对话框。
设置“类型”分类参数，color：
#fff，如图13所示。
图13css规则定义类型分类
（12）设置“首页”文字效果。
当前的页面是首页，为了给访问者以提示，要把“首页”这个链接样式设置成与其他链接不同的样式。
新建CSS样式规则，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#nav.homea:
link”，“规则定义”为“style.css”。
如图14所示。
图14新建css规则
单击确定，打开“#nav.homea:
link的CSS规则定义”对话框。
设置“类型”分类参数，color：
#f80，如图15所示。
图15新建css规则
设置“背景”分类参数，background-image：
../images/nav_active.jpg，如图16所示。
图16新建css规则背景分类
在编辑界面，选中“首页”链接所在的
- 标签。
当光标定位在首页处是，可在下方的标签栏中选择“
- ”即可选中该标签。
如图17所示。
图17新建css规则背景分类
在下方属性栏中的“类”栏目中，打开下拉菜单选择步骤12定义的类“home”，如图18所示。
可以看到CSS效果应用成功。
图18应用类
导航条制作完成，静止效果如图19所示。
图19链接静止效果图
鼠标经过链接时的效果如图20所示。
图20鼠标经过链接效果图
2.子导航条制作
（1）插入项目列表。
将插入面板切换到“文本”项目，点击面板的“ul项目列表”图标，即会自动插入项目列表。
直接输入列表内容“首页、加入收藏、关于我们”。
（2）将栏目名称设置为超链接。
依次选中三个栏目名，在链接栏中填写“#”。
（3）清除项目列表默认样式。
打开CSS面板，选择面板下方的“新建CSS规则”
图标，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#top_barul”，“规则定义”为“style.css”，单击确定，打开“#top_barul的CSS规则定义”对话框。
在对话框中设置“方框”分类参数，padding：
0px；margin:
0px。
设置“列表”分类参数，list-style-type：
none。
（4）设置列表为横向列表。
新建CSS样式规则，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#top_barli”，“规则定义”为“style.css”，单击确定，打开“#top_barli的CSS规则定义”对话框。
在对话框中设置“方框”分类参数，float：
left。
（5）用CSS设置导航的链接文本样式。
新建CSS样式规则，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#top_bara”，“规则定义”为“style.css”，单击确定，打开“#top_bara的CSS规则定义”对话框。
在对话框中设置“方框”分类参数，width：
55px；height：
19。
设置“类型”分类参数，font-family：
黑体；font-size：
12px；line-height：
19px；color：
#000；text-decoration：
none。
设置“区块”分类参数，text-align：
center；display：
block。
（6）设置导航栏鼠标经过的特效。
新建CSS样式规则，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#top_bara：
hover”，“规则定义”为“style.css”，单击确定，打开“#top_bara：
hover的CSS规则定义”对话框。
在对话框中设置“类型”分类参数，line-height：
21px
（7）设置导航栏访问过的链接状态。
新建CSS样式规则，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“复合内容（基于选择的内容）”，“选择器名称”为“#top_bara：
visited”，“规则定义”为“style.css”，单击确定，打开“#top_bara：
visited的CSS规则定义”对话框。
在对话框中设置“类型”分类参数，color：
#000。
子导航条制作完成，静止效果如图21所示。
图21链接静止效果图
鼠标经过链接时的效果如图22所示，链接文字向下移动。
图22鼠标经过链接效果图
【实训思考题】
一、导航条在网页中的作用？
二、导航条的制作的主要步骤有哪些？
三、如何完成项目列表横向排布？
升级会员 