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

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

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

《静态网页制作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四个属性。

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

课程回顾：

【约10分钟】

通过互动的方式回顾之前的学习内容，为阶段项目的制作做好准备。

学生通过互动方式回答教师提出的问题。

认真听取教师的总结，明确本项目单元的学习任务。

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

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

1、网站设计流程

2、规划网站目录结构

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

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

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

6、进行网站测试

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

二、项目实施

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

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

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

强化盒子模型的应用

熟练应用CSS+DIV技术对页面进行布局能够通过浮动或定位实现页面的布局培养学生的团队合作意识

教学内容

1、网站设计流程

2、规划网站目录结构

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

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

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

6、进行网站测试

明确本项目单元的总体学习目标。

带着目标和任务学习。

对学习目标形成一个初步地、大致地、总体的知识轮廓。

新课讲解：

【约65分钟】

1.项目引入思路：

教师利用“个人主页”项目为驱动，进行阶段知识回顾、复习和综合应用。

2.思路指导：

通过“个人主页”项目制作，完成一个网站首页的整个设计流程。

3.任务目标：

熟练“个人主页”首页的设计和创建。

一）工作任务一：

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

【任务背景】

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

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

【任务要求】

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

【任务分析】

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

【任务实施】

此部分由于在课前已作为课前任务做好了前期的准备工作，因此，直接在ps中实现效果图的制作。

时刻保持与教师的互动。

思路跟教师保持一致，保证学习效果。

在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”进行了关联。

核心代码如下：

CSS中首选的让元素水平居中的方法将元素的margin-left和margin-right属性设置为auto即可。

三）工作任务三：

制作“个人主页”首页页眉

【任务背景】

在上一工作任务中，我们已经实现了本项目DIV框架结构布局，但是效果离我

们要实现的网页布局效果还相差甚远，仅仅依靠DIV标签是无法实现页面布局的，

我们必须要配合CSS来对网站的各个部分进行更加精确的控制。

【任务要求】

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

【任务分析】

完成ID名称为top的DIV区块的CSS设置。

【任务实施】

（1）

首先切换到样式表文件“index.css”，添加下列样式代码对整个页面的样式进行定义。

body{

padding:

0;

margin:

0;

background:

url（../images/bg.gif）;

}

（1）接下来在样式表中定义“top”的样式，也就是定义页眉的结构，添加下列样式代码：

#top,#nav,#main{

margin:

0auto;/*将页面中的三个大区块设置水平居中*/

}

在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。

需要特别注意的一点就是，必须为该容器指定宽度。

#banner{

图3“个人主页”页眉效果图

四）工作任务四：

制作“个人主页”首页导航条

【任务要求】

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

此部分由于不涉及二级页面的制作，将所有的导航目标设置为空链

【任务分析】

完成ID名称为nav的DIV区块的CSS设置。

核心思想是利用列表实现导航条内容的添加，在通过css样式实现布局的改变。

【任务详解】

（1）在名称为“nav”的DIV结构中输入以下代码

（2）

首先切换到样式表文件“index.css”，添加下列样式代码对导航条的样式进行定义。

#nav{width:

600px;height:

22px;background-color:

#90bcff;margin-top:

-15px;text-align:

center;

}

#navul{list-style-type:

none;

margin-left:

-15px;

}#navli{float:

left;

width:

76px;

text-align:

center;line-height:

22px;

}a:

link{color:

#00F;

text-decoration:

none;

}a:

hover{color:

#F00;

text-decoration:

underline;

}

a:

acktive{color:

#000;

text-decoration:

none;

}

a:

visited{background-color:

#000;

}

（4）

说明：

a:

link是超级链接的初始状态。

a:

hover是把鼠标放上去时悬停的状态。

a:

active是鼠标点击时，即鼠标左键点击链接对象与释放鼠标右键之间很短暂样式效果。

a:

visited是访问过后的状态。

一般网站需要设置的是“a:

link、”“a:

visited、“”a:

hover”三种状态，“a:

active”状态设置较少。

页面效果如图4所示：

图4“个人主页”导航条效果图

五）工作任务五：

制作“个人主页”首页主内容区

【任务要求】

通过CSS规则来精确控制网站首页主内容区域，从而实现页面布局效果。

【任务分析】完成网站主内容区域布局设计及内容版式设计，此部分我们将完成divMain的DIV区块的CSS设置。

ID名称为

【任务详解】

（1）打开“index.css”文件，在样式表中添在名称为“divMain”样式，并对其样式的具体设置。

#divMain

{

width:

600px;height:

800px;

Background:

red;/*添加区块测试颜色*/

}

（2）页面效果如图5所示：

颜色测试法是网页布局中最常用的测试方法。

互动提问原因？

总结：

不占尺寸，但是还可以看到区块的范围。

在样式设置过程中，注重代码的效率，此部分注意提醒学生。

1）两张图片的样式相同

2）两个图片的标题相同

3）两个图片的文字描述相同

由于此部分样式比较繁多，强调学生一定要边做边测试，以浏览器效果为准。

图5“个人主页”主内容区效果图

（3）添加主体内容左区块的页面结构，其代码如下：

width="93"我的日记本

心情轨迹

定是美丽的，但变幻无常更为美丽。

height="123"class="imgLeft"/>

是瞬间迸发的热情让他们相遇。

这样的确

width="93"height="103"

提醒学生：

注意代码的格式，有层次感。

董事长的一切都让人既羡慕又忌妒，但更让人受不了的是，有一天，上苍忽然赐给他一个神奇的礼物⋯⋯⋯