0301--静态⽹页制作（Dreamweaver）-以“个⼈.
河北⼯业职业技术学院
《静态⽹页制作（Dreamweaver）》课程教案⾸页
系（部）：计算机技术系教研室：⽹络技术教研室主任签字：年⽉⽇
学习单元六以“个⼈主页”项⽬为驱动的阶段复习授课内容：以“个⼈主页”项⽬为驱动的阶段复习学时：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中设计“个⼈主页”效果图，具体实现过程不做详解，如下图1所⽰：
图1 页⾯效果图
（⼆）⼯作任务⼆：分析“个⼈主页”⾸页整体结构【任务背景】
某学院计算机技术系要建⽴本系部⽹站，现已由⽹站策划⼈员先期分析了⽹站的⽬的、功能定位及内容规划，并根据功能定位先⾏设计了⽹站效果图。【任务要求】
根据已经收集好的素材及⽹站规划，进⾏⽹站的整体页⾯布局。【任务分析】
效果图导出之后，我们就可以使⽤这些素材在Dreamweaver着⼿进⾏布局了，现在的布局技术包括表格布局和Web标准布局，也就是俗称的DIV+CSS布局，本项⽬我们主要使⽤Web标准来布局页⾯。●此部分由于在课前已作为课前任务做好了前期的准备⼯作，因此，直接在ps中实现效
果图的制作。●时刻保持与教师的互动。●思路跟教师保持⼀致，保证学习效果。
提醒学⽣出图的⽅法，注意使⽤切⽚⼯具对⼤图进⾏切割。【任务实施】
(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。（三）⼯作任务三：制作“个⼈主页”⾸页页眉【任务背景】
在上⼀⼯作任务中，我们已经实现了本项⽬DIV框架结构布局，但是效果离我们要实现的⽹页布局效果还相差甚远，仅仅依靠DIV标签是⽆法实现页⾯布局的，我们必须要配合CSS来对⽹站的各个部分进⾏更加精确的控制。【任务要求】
通过CSS规则来精确控制⽹站⾸页页眉部分，从⽽实现页⾯布局效果。互动提问，整个页⾯区块如何划分？教师提醒：合理进⾏区块划分将有利于后期区块内容得添及样式的的设计和制作。⽹站结构在设计过程中，⼀定要保证⽹页结构与表现进⾏分离，便于后期⽹站的维护。CSS中⾸选的让元素⽔平居中的⽅法将元素的margin-left和margin-right属性【任务分析】
完成ID 名称为top 的DIV 区块的CSS 设置。【任务实施】
(1) ⾸先切换到样式表⽂件“index.css ”，添加下列样式代码对整个页⾯的样式进⾏定义。body{
padding:0; margin:0; background:url(../images/bg.gif);}
(1) 接下来在样式表中定义“top ”的样式，也就是定义页眉的结构，添加下列样式代码：#top,#nav,#main{
margin:0 auto; /*将页⾯中的三个⼤区块设置⽔平居中*/ }#banner{
width:600px; height:133px; }
(2) 在“index.html ”中，在⽹页的主题部分加⼊页眉部分的图⽚“banner.jpg ”⽂件。代码如下：
(3) 页⾯效果如图3所⽰：图3 “个⼈主页”页眉效果图
（四）⼯作任务四：制作“个⼈主页”⾸页导航条
【任务要求】 通过CSS 规则来精确控制⽹站⾸页导航栏部分，从⽽实现页⾯布局效果。 【任务分析】
完成ID 名称为nav 的DIV 区块的CSS 设置。核⼼思想是利⽤列表实现导航条内容的添加，在通过css 样式实现布局的改变。【任务详解】
(1) 在名称为“nav ”的DIV 结构中输⼊以下代码
⾸页⼼情⽇记Free设置为auto 即可。
在实际使⽤中，我们可以为这些需要居中的元素创
建⼀个起容器作⽤的div 。需要特别注意的⼀点就是，必须为该容器指定宽度。此部分符合样式是为了对代码进⾏优化，避免累赘，提⾼代码的执⾏效率。此部分由于不涉及⼆级页⾯的制作，将所有的导航⼀起⾛到从明天起纸飞机
下⼀站
(2) ⾸先切换到样式表⽂件“index.css ”，添加下列样式代码对导航条的样式进⾏定义。#nav{
width:600px; height:22px;background-color:#90bcff;
margin-top:-15px; text-align:center; }#nav ul{
list-style-type:none; margin-left:-15px; }#nav li{
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) 页⾯效果如图4所⽰：图4 “个⼈主页”导航条效果图
（五）⼯作任务五：制作“个⼈主页”⾸页主内容区【任务要求】
通过CSS 规则来精确控制⽹站⾸页主内容区域，从⽽实现页⾯布局效果。 【任务分析】
完成⽹站主内容区域布局设计及内容版式设计，此部分我们将完成ID 名称为divMain 的DIV 区块的CSS 设置。⽬标设置为空链接。说明：
a:link 是超级链接的初始状态。a:hover 是把⿏标放上去时悬停的状态。
a:active 是⿏标点击时，即⿏标左键点击链接对象与释放⿏标右键之间很短暂样式效果。a:visited 是访问过后的状态。
⼀般⽹站需要设置的是“a:link”、“a:visited”、“a:hover”三种状态，“a:active”状态设置较少。【任务详解】
(1) 打开“index.css ”⽂件，在样式表中添在名称为“divMain ”样式，并对其样式的具体设置。
#divMain{ width:600px;height:800px;
Background:red; /*添加区块测试颜⾊*/
} (2) 页⾯效果如图5所⽰： 图5 “个⼈主页”主内容区效果图 (3) 添加主体内容左区块的页⾯结构，其代码如下：
我的⽇记本
他们彼此深信，是瞬间迸发的热情让他们相遇。这样的确定是美丽的，但变幻⽆常更为美丽。
⼼情轨迹
董事长的⼀切都让⼈既羡慕⼜忌妒，但更让⼈受不了的是，有⼀天，上苍忽然赐给他⼀个神奇的礼物………
(4) 在“index.css ”样式表中添在名称为“divLeft ”样式，并对其样式的具体设置。 #divLeft{ width:180px;height:580px;
background:#D2E7FF; float:left;text-align:center;padding-left:10px;padding-right:10px; }
.imgLeft{ border:1px solid #09C;margin-top:15px;}
.leftTextTitle{ size:10px;color: #66F;font-weight:bold;
}
颜⾊测试法是⽹页
布局中最常⽤的测试⽅法。
互动提问原因？ 总结：不占尺⼨，但是还可以看到区块的范围。
在样式设置过程中，
注重代码的效率，此部分注意提醒学⽣。 1）两张图⽚的样式相同2）两个图⽚的标题相同 3）两个图⽚的⽂字描述相同.leftTextContent{ text-align:left; }(5) 页⾯效果如图5所⽰：
图5 “个⼈主页”主内容区左区块效果图
(6) 添加主体内容右区块的页⾯结构，其代码如下：介绍我努⼒的抓紧世界，最后却仍被世界淘汰，如果⼀开始就松⼿，我会不那么伤⼼吗？你说，亲爱的孩⼦，世事难料，随它去吧！照相本⼦关于童年，你记住了什么？
两岁时，我拥有⼀只巨⼤的粉红猪，它总在我嚎啕⼤哭时逗我笑。三岁时，我骑着⼩⽊马⼀路摇到外婆家，它不喝⽔也不吃草。四岁时，我离家出⾛，在公车上睡着了，最后是太空超⼈送我回家。我真的没骗你，我通通都记得，还有照⽚为证。地下铁天使在地下铁的⼊⼝，和我说再见的那⼀年，我渐渐看不见了。
⼗五岁⽣⽇的那年秋天早晨，窗外下着⽑⽑⾬，我喂好我的猫。六点零五分，我⾛进地下铁。向左⾛向右⾛They're both convinced
that a sudden passion joined them.Such certainth is beautiful,
but uncertainty is more beautiful still.
由于此部分样式⽐较繁多，强调学⽣⼀定要边做边测试，以浏览器效果为准。提醒学⽣： 注意代码的格式，要有层次感。
(7) 在“index.css ”样式表中添在名称为“divRight ”样式，并对其样式的具体设置。 #divRight{ width:400px;height:580px;
background:#E9FBFF;
float:left;
background:#e9fbff url(../images/self.jpg) no-repeat bottom right;
}
.rightTitle{ font-size:5px;color:#0FC;} .rightContent{font-size:15px;color:#000;}
(8) 页⾯效果如图6所⽰：
图6 “个⼈主页”主内容区右区块效果图⼆、单元⼩结与项⽬单元任务1.项⽬单元⼩结
● 通过“个⼈主页”真实项⽬对阶段知识点进⾏回顾、强化和综合应⽤，再次强调重点和难点。
● 再次强化讲解并应⽤了CSS+DIV 布局、盒⼦模型和浮动布局的应⽤。Bacground 属性是⼀个符合属性，可以同
时设置背景的多个属性，中间通过空格来连接不同属性值。
单元项⽬归纳和总结【约5分钟】 教师采⽤互动提问的⽅式进⾏知识的归纳和总结，并强调2.项⽬单元任务
1)以“个⼈⾸页”为项⽬驱动，⾃由发挥完成⼀个真实项⽬的设计和创建。2)写出规范完善的设计和制作⽂档，便于对知识进⾏梳理和整理。三、板书设计
四、课后附记重点和难点知识。布置单元项⽬任务【约5分钟】要求学⽣课下任务必须按质按量按时完成，强调作业的重要性。
