《静态网页制作Dreamweaver》课程教案首页.docx

《静态网页制作Dreamweaver》课程教案首页.docx

《《静态网页制作Dreamweaver》课程教案首页.docx》由会员分享，可在线阅读，更多相关《《静态网页制作Dreamweaver》课程教案首页.docx（20页珍藏版）》请在冰豆网上搜索。

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

河北工业职业技术学院

《静态网页制作（Dreamweaver）》课程教案首页

授课教师

张亚静

班级

16网络订单1班

学时

2

授课日期

主题或任务

以“个人主页”项目为驱动的阶段复习

课型

考试

授课地点

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

教学目标

知识目标：

1、回顾常用标签的用法

2、强化样式的综合应用

2、理解盒子模型的意义

3、掌握浮动布局和定位

技能目标：

1、通过CSS+DIV技术设计并实现一个完整网站项目的创建

2、灵活运用盒子模型灵活设计网页布局

3、灵活运用浮动和定位布局页面

素质目标：

1、培养学生团队合作意识

2、培学生的设计和创意能力，提升学生对于网页设计的热情

学习内容

以“个人主页”完整项目为驱动进行阶段复习：

1、网站设计流程

2、规划网站目录结构

3、利用HTML基本标签创建网页结构

4、利用浮动或定位设计页面布局

5、通过CSS样式修饰

6、进行网站测试

重点难点

重点：

✧利用浮动或定位设计页面布局

✧通过CSS样式修饰

难点：

✧利用浮动或定位设计页面布局

教学方法

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

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

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

素材资源

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

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

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

教学设计

1、通过教师演示项目，采用项目驱动法引导学生进行阶段知识的复习和回顾，强化关键知识的应用；

2、让学生对完整网站首页的设计和制作有一个整体认识，提升学生进行真实项目开发的经验和兴趣。

学习评价

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

作业题目

利用CSS+DIV自由设计并制作“个人首页”

要求：

✧网页结构和样式分离

✧网站目录结构规划合理

✧代码格式规范

双语教学

Bannerheadlinknavigationfoot

系（部）：

计算机技术系教研室：

网络技术教研室主任签字：

年月日

学习单元六以“个人主页”项目为驱动的阶段复习

授课内容：

以“个人主页”项目为驱动的阶段复习

学时：

2学时（90分钟）

教学目标：

知识目标：

✧回顾常用标签的用法

✧强化样式的综合应用

✧理解盒子模型的意义

✧掌握浮动布局和定位

技能目标：

✧通过CSS+DIV技术设计并实现一个完整网站项目的创建

✧灵活运用盒子模型灵活设计网页布局

✧灵活运用浮动和定位布局页面

素质目标：

✧培养学生团队合作意识

✧培学生的设计和创意能力，提升学生对于网页设计的热情

教学内容：

1、网站设计流程

2、规划网站目录结构

3、利用HTML基本标签创建网页结构

4、利用浮动或定位设计页面布局

5、通过CSS样式修饰

6、进行网站测试

教学重点：

⏹利用浮动或定位设计页面布局

⏹通过CSS样式修饰

教学难点：

⏹利用浮动或定位设计页面布局

教学方法和策略：

◆教学方法：

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

◆教学策略：

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

教学设计思路：

1、通过教师演示项目，采用项目驱动法引导学生进行阶段知识的复习和回顾，强化关键知识的应用；

2、让学生对完整网站首页的设计和制作有一个整体认识，提升学生进行真实项目开发的经验和兴趣。

授课内容提纲：

一、复习旧课导出阶段项目

1、课程回顾

（1）教师综述

在前五个学习单元的课程中，我们分阶段的以“计算机技术系网站”首页项目为驱动完成了网站首页的制作，对于网站设计有了初步的认识和了解，经过阶段学习，同学们已经具备了独立设计和制作网站首页的能力。

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

●网站设计流程？

●盒子模型的关键属性？

●常用的定位方式有几种？

（3）互动总结

教师通过与学生互动沟通，进行知识的归纳：

●网站的设计流程包括需求分析、制作网页效果图、创建和设计网站、测试和发布等几个环节；

●盒子模型的关键属性包括content、border、padding和margin四个属性。

●常用的布局方式有浮动和定位。

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

教师简述本项目单元的重点、难点，让学生有带着任务、有重点跟随老师授课。

1、网站设计流程

2、规划网站目录结构

3、利用HTML基本标签创建网页结构

4、利用浮动或定位设计页面布局（重点和难点）

5、通过CSS样式修饰（重点）

6、进行网站测试

4、本学习单元总体目标（教师总结）

通过本项目单元的学习，学生对阶段只是做一整体实践和应用，让学生感受阶段学习成果的喜悦，为后续知识的学习奠定基础，并提升学习的兴趣和动力。

二、项目实施

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

教学目标

●通过“个人主页”真实完整网站首页的制作，对知识进行阶段复习和综合应用

●明确网页结构与表现分离的意义

●强化盒子模型的应用

●熟练应用CSS+DIV技术对页面进行布局

●能够通过浮动或定位实现页面的布局

●培养学生的团队合作意识

教学内容

1、网站设计流程

2、规划网站目录结构

3、利用HTML基本标签创建网页结构

4、利用浮动或定位设计页面布局（重点和难点）

5、通过CSS样式修饰（重点）

6、进行网站测试

（一）工作任务一：

设计和制作“个人主页”效果图

【任务背景】

某同学要设计一个“个人主页”，现已由网站策划人员先期分析了网站的目的、功能定位及内容规划。

并根据功能定位先行设计了网站效果图。

【任务要求】

根据与用户沟通和交流做好的需求分析，设计和制作“个人主页”效果图。

【任务分析】

采用蓝色主色调，体现客户简洁实用的目标。

【任务实施】

在PS中设计“个人主页”效果图，具体实现过程不做详解，如下图1所示：

图1页面效果图

（二）工作任务二：

分析“个人主页”首页整体结构

【任务背景】

某学院计算机技术系要建立本系部网站，现已由网站策划人员先期分析了网站的目的、功能定位及内容规划，并根据功能定位先行设计了网站效果图。

【任务要求】

根据已经收集好的素材及网站规划，进行网站的整体页面布局。

【任务分析】

效果图导出之后，我们就可以使用这些素材在Dreamweaver着手进行布局了，现在的布局技术包括表格布局和Web标准布局，也就是俗称的DIV+CSS布局，本项目我们主要使用Web标准来布局页面。

【任务实施】

（1）在具体布局之前，首先分析一下页面的构成，目的是明确所需要创建页面的布局结构，如下图2所示。

图2页面的布局形式

（2）打开在上一章节中已经创建好的名为grzyWeb的站点。

（3）规划站点目录结构，建立CSS和images文件夹，将在ps中导出的图片放入images文件夹。

（4）创建网站首页，命名为“index.html”，将其保存在站点根目录下。

（5）创建样式表文件“index.css”，将其保存在站点根目录下的CSS文件夹中。

（6）将“index.css”和网页文件“index.html”进行了关联。

核心代码如下：

（7）首先根据分析得出的页面结构搭建整个网页的页面布局。

在index.htmnl。