《网页开发》是计算机应用技术专业的专业核心课程，通过本课程的学习主要培养学生WEB网站开发的应用能力。本课采用以任务为驱动的案例教学法，即以案例为载体，以任务为驱动，案例以若干个任务组成。课程共分13个项目，内容涵盖网站开发入门，HTMI标签及CSS样式基础，使用CSS设置与美化 文字效果、图片效果、网页背景、导航栏、表格、表单的方法，CSS与浏览器的兼容问题，使用CSS+DIV 对网页进行布局(标准流布局、浮动布局和定位布局)的方法等。本课程注重实际操作，将相关知识融入到了案例中，使学生在完成各案例的过程中轻松掌握HTML 和 CSS的精髓，掌握使用DIV+CSS进行网页布局的各种方法和技巧。
本次课标题： 使用CSS设置纵向导航栏
一、引入案例
你所在岳阳市月亮巴巴科技有限公司接到一个私人订单业务，要求给其制作一个个人空间网站，而你所接到的任务是为其制作一个简单纵向导航栏。附：简单纵向导航栏效果图。
二、案例分析
根据客户需求，分析案例，将案例分解成多个任务，让学生根据任务要求讨论哪些内容可以实现，应该怎么制作，哪些不能完成？并告知本次课程的知识目标、技能目标和情感目标。
三、制作案例
教师示范操作。
1、构建HTML的导航栏结构
2、构建美化导航栏的CSS样式
四、同步实践
1、教师：辅助、答疑。
2、学生：实战演练-制作简单纵向导航栏。
具体步骤：
（1） 启动DW建站
（2） 在DW的代码界面中编辑：
在body部分输入文字，并为文字添加列表标签项中。
（3） 为文本添加空超链接
（4） 使用内嵌样式，在<head></head>标签对之间插入样式代码
（5） 使用CSS设置导航栏
1） 消除列表项前黑色小圆点并设置一些列表样式
2） 设置超链接样式，如消除下划线，设置文字大小和颜色，设置背景颜色和内边距等。
3） 设置鼠标经过样式，如超链接颜色变化加粗等。
保存文件。
五、归纳总结
1、合理利用display:block属性
display属性规定元素的显示类型，其具有多个不同的属性值，其中display:block表示将元素转换为块级元素。
2、利用margin-bottom设置间隔效果
在制作纵向导航栏或者列表一类的纵向HTML结构时，如果设计要求导航栏的每一项之间有一定间隔的时候，可以使用margin-bottom属性来实现这个效果。
对于单个的元素来讲，margin-bottom属性是设置此元素和它下面的元素的间隔，当此属性被设置在纵向菜单或者列表结构里面时，就可以产生均匀的间隔效果。
3、利用border设置特殊边框
特殊边框的设置并不困难， border可以对4个方向的边框分别进行设置。那么在设置边框的时候，可以单独设置一个方向的边框，也可以对多个方向的边框分别进行不同的样式设置。
六、作业布置
思考：横向导航栏又该如何制作？
七、后记
1、亮点
（1）充分发挥了多媒体和自媒体的优势，服务于课堂，提高了教学效率。
（2）注重以学生为主体，以培养学生实践技能为目标。
（3）信息化教学工具应用广泛。
2、不足
（1）创新思维有待加强。
（2）考核评价方式有待优化。
八、考核评价
考核评价=过程考核（50%）+考勤考核（20%）+作品考核（30%）。
