HTML和css页眉制作,静态网页制作（Dreamweaver） 设计和制作网站首页 0203-静态网页制作（Dreamweaver）-设计制作网站首页页眉、导航栏.doc...

Dreamweaver网页设计教案

PAGE

PAGE 7

Dreamweaver网页设计教案

河北工业职业技术学院

《静态网页制作(Dreamweaver)》课程教案首页

授课教师

张亚静

班级

16网络订单1班

学时

2

授课日期

主题或任务

设计制作网站首页页眉和导航栏

课型

考试

授课地点

○多媒体教室○企业○专业教室?实训室

教学目标

知识目标：

掌握网页布局的整体规划

列表的CSS样式设定

相对路径和绝对路径的应用

超级链接CSS样式设定

技能目标：

通过CSS规则来精确控制网站首页页眉部分，从而实现页面布局效果。

通过CSS规则来精确控制网站首页导航栏部分，从而实现页面布局效果。

素质目标：

培养学生团队合作意识

培养学生自我分析问题和解决问题的能力

学习内容

1、制作网站首页页眉

2、制作网站首页导航栏

重点难点

重点：

首页导航栏列表的CSS样式设定

难点：

首页导航栏列表的CSS样式设定

教学方法

○理论讲授 ○小组讨论 ?项目教学

?任务驱动 ○参观教学 ○模拟教学

?实验实训 ○演示教学 ○其他

素材资源

○文本素材○实物展示?PPT幻灯片

○音频素材○视频素材○动画素材

?图形/图像素材○网络资源○其他

教学设计

1、依托计算机系网站首页项目，完成页眉和导航条的制作。

2、以任务为驱动，为学生设置任务情境，让他们在思考中探索解决方案。

3、在任务完成的基础上，及时拓展网站设计中存在的其他问题，力求提升学生自我解决问题的能力。

学习评价

?行为表现 ○课堂作业 ○测验测试 ?制作作品 ○其他

作业题目

完成三木企业网站页眉和导航条的制作

双语教学

banner logo menu

系(部)： 计算机技术系 教研室： 网络技术 教研室主任签字：

年 月 日

学习单元五 设计制作网站首页页眉、导航栏

授课内容：设计制作网站首页页眉、导航栏

学时：2学时(90分钟)

教学目标：

知识目标：

掌握网页布局的整体规划

列表的CSS样式设定

相对路径和绝对路径的应用

超级链接CSS样式设定

技能目标：

通过CSS规则来精确控制网站首页页眉部分，从而实现页面布局效果

通过CSS规则来精确控制网站首页导航栏部分，从而实现页面布局效果

情感目标：

培养学生团队合作意识

培养学生自我分析问题和解决问题的能力

教学重点：

首页导航栏列表的CSS样式设定

教学难点：

首页导航栏列表的CSS样式设定

教学方法和策略：

教学方法：

采用项目驱动法、分组竞争法、案例演示法提高学生的学习兴趣

教学策略：

通过分组讨论、竞争的方式激发学生的学习热情

教学设计思路：

依托计算机系网站项目，完成首页页眉和导航条的制作。

以任务为驱动，为学生设置任务情境，让他们在思考中探索解决方案。

在任务完成的基础上，及时拓展网站设计中存在的其他问题，力求提升学

生自我解决问题的能力。

授课内容提纲：

复习旧课导出新课

1、课程回顾

1)教师综述

在上一学习单元中，我们应用盒子模型搭建了网页的整体框架布局，就好比房子框架建好了，只等装修放家具了。

2)利用项目互动提问回顾知识点

盒子模型四要素

DIV+CSS布局思想

左右两列布局设计

3)互动总结

与学生互动总结学生制作中的亮点指出，并指明有待提升和改进的地方。

项目任务导入

1)利用回顾总结引入新知

网站布局搭建好以后，下一步的任务就是按照从上到下，从左到右，从大到小的顺序放置内容到相应的位置，设置内容的表现形式了。

2)教师首先简述本项目单元重点、难点，让学生有重点的听讲。

首页页眉的CSS样式设定(重点和难点)

首页导航栏的CSS样式设定(重点和难点)

2)本学习单元总体目标(教师总结)

学完本项目单元，我们能应用盒子模型以及CSS样式完成首页页眉和导航栏的设计制作。

二、新课讲解

教师简述项目单元教学目标和教学内容，明确本项目单元教学重点和难点

1)教学目标

掌握网页布局的整体规划

列表的CSS样式设定

相对路径和绝对路径的应用

超级链接CSS样式设定

通过CSS规则来精确控制网站首页页眉部分，从而实现页面布局效果

通过CSS规则来精确控制网站首页导航栏部分，从而实现页面布局效果

2)教学内容

制作网站首页页眉

制作网站首页导航栏

(一)工作任务一：制作系部网站首页页眉

场景设计：DIV框架结构布局完成后，我们必须要利用CSS来对网站的各