微信公众号
手机网站
就业/招聘小程序
咨询电话: 010-66083178(工作日8:30-17:30) 请登录 注册
联系我们
联系人:王秀秀
010 -66083178
www.qxwq.org.cn 
北京市西城区广安门
内广义街5号广益大厦
大赛作品详情
网页开发
Loading...

作品名称:网页开发
学校名称:湖南民族职业学院
参赛队伍:卓越民院
参赛老师:李维龙  

详细说明

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

找人才
千校人才小程序
找工作
万企岗位小程序
一键咨询
注册简历
查询
资料下载
返回顶部