《网页开发》是计算机应用技术专业的专业核心课程,通过本课程的学习主要培养学生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%)。