《静态网页制作Dreamweaver》课程教案首页Word文档格式.docx
《《静态网页制作Dreamweaver》课程教案首页Word文档格式.docx》由会员分享，可在线阅读，更多相关《《静态网页制作Dreamweaver》课程教案首页Word文档格式.docx（20页珍藏版）》请在冰豆网上搜索。
3、灵活运用浮动和定位布局页面
素质目标：
1、培养学生团队合作意识
2、培学生的设计和创意能力，提升学生对于网页设计的热情
学习内容
以“个人主页”完整项目为驱动进行阶段复习：
1、网站设计流程
2、规划网站目录结构
3、利用HTML基本标签创建网页结构
4、利用浮动或定位设计页面布局
5、通过CSS样式修饰
6、进行网站测试
重点难点
重点：
✧利用浮动或定位设计页面布局
✧通过CSS样式修饰
难点：
教学方法
○理论讲授○小组讨论☉项目教学
☉任务驱动○参观教学○模拟教学
☉实验实训○演示教学○其他
素材资源
○文本素材○实物展示☉PPT幻灯片
○音频素材○视频素材○动画素材
☉图形/图像素材○网络资源○其他
教学设计
1、通过教师演示项目，采用项目驱动法引导学生进行阶段知识的复习和回顾，强化关键知识的应用；
2、让学生对完整网站首页的设计和制作有一个整体认识，提升学生进行真实项目开发的经验和兴趣。
学习评价
☉行为表现○课堂作业○测验测试☉制作作品○其他
作业题目
利用CSS+DIV自由设计并制作“个人首页”
要求：
✧网页结构和样式分离
✧网站目录结构规划合理
✧代码格式规范
双语教学
Bannerheadlinknavigationfoot
系（部）：
计算机技术系教研室：
网络技术教研室主任签字：
年月日
学习单元六以“个人主页”项目为驱动的阶段复习
授课内容：
学时：
2学时（90分钟）
教学目标：
✧回顾常用标签的用法
✧强化样式的综合应用
✧理解盒子模型的意义
✧掌握浮动布局和定位
✧通过CSS+DIV技术设计并实现一个完整网站项目的创建
✧灵活运用盒子模型灵活设计网页布局
✧灵活运用浮动和定位布局页面
✧培养学生团队合作意识
✧培学生的设计和创意能力，提升学生对于网页设计的热情
教学内容：
6、进行网站测试
教学重点：
⏹利用浮动或定位设计页面布局
⏹通过CSS样式修饰
教学难点：
教学方法和策略：
◆教学方法：
采用项目驱动法、分组竞争法、案例演示法提高学生的学习兴趣
◆教学策略：
通过分组讨论、竞争的方式激发学生的学习热情
教学设计思路：
授课内容提纲：
一、复习旧课导出阶段项目
1、课程回顾
（1）教师综述
在前五个学习单元的课程中，我们分阶段的以“计算机技术系网站”首页项目为驱动完成了网站首页的制作，对于网站设计有了初步的认识和了解，经过阶段学习，同学们已经具备了独立设计和制作网站首页的能力。
（2）利用项目互动提问回顾知识点
●网站设计流程？
●盒子模型的关键属性？
●常用的定位方式有几种？
（3）互动总结
教师通过与学生互动沟通，进行知识的归纳：
●网站的设计流程包括需求分析、制作网页效果图、创建和设计网站、测试和发布等几个环节；
●盒子模型的关键属性包括content、border、padding和margin四个属性。
●常用的布局方式有浮动和定位。
2、教师首先简述本项目单元重点、难点，让学生有重点的听讲。
教师简述本项目单元的重点、难点，让学生有带着任务、有重点跟随老师授课。
4、利用浮动或定位设计页面布局（重点和难点）
5、通过CSS样式修饰（重点）
4、本学习单元总体目标（教师总结）
通过本项目单元的学习，学生对阶段只是做一整体实践和应用，让学生感受阶段学习成果的喜悦，为后续知识的学习奠定基础，并提升学习的兴趣和动力。
二、项目实施
教师简述项目单元教学目标和教学内容，明确本项目单元教学重点和难点
●通过“个人主页”真实完整网站首页的制作，对知识进行阶段复习和综合应用
●明确网页结构与表现分离的意义
●强化盒子模型的应用
●熟练应用CSS+DIV技术对页面进行布局
●能够通过浮动或定位实现页面的布局
●培养学生的团队合作意识
教学内容
（一）工作任务一：
设计和制作“个人主页”效果图
【任务背景】
某同学要设计一个“个人主页”，现已由网站策划人员先期分析了网站的目的、功能定位及内容规划。
并根据功能定位先行设计了网站效果图。
【任务要求】
根据与用户沟通和交流做好的需求分析，设计和制作“个人主页”效果图。
【任务分析】
采用蓝色主色调，体现客户简洁实用的目标。
【任务实施】
在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”进行了关联。
核心代码如下：
<
linkhref="
css/index.css"
rel="
stylesheet"
type="
text/css"
>
（7）首先根据分析得出的页面结构搭建整个网页的页面布局。
在index.htmnl。
divid="
top"
/div>
nav"
divMain"
<
divLeft"
divRight"
（三）工作任务三：
制作“个人主页”首页页眉
在上一工作任务中，我们已经实现了本项目DIV框架结构布局，但是效果离我们要实现的网页布局效果还相差甚远，仅仅依靠DIV标签是无法实现页面布局的，我们必须要配合CSS来对网站的各个部分进行更加精确的控制。
通过CSS规则来精确控制网站首页页眉部分，从而实现页面布局效果。
完成ID名称为top的DIV区块的CSS设置。
（8）首先切换到样式表文件“index.css”，添加下列样式代码对整个页面的样式进行定义。
body{
padding:
0;
margin:
background:
url（../images/bg.gif）;
}
（9）接下来在样式表中定义“top”的样式，也就是定义页眉的结构，添加下列样式代码：
#top,#nav,#main{
0auto;
/*将页面中的三个大区块设置水平居中*/
#banner{
width:
600px;
height:
133px;
（10）在“index.html”中，在网页的主题部分加入页眉部分的图片“banner.jpg”文件。
代码如下：
imgsrc="
image/banner.jpg"
（11）页面效果如图3所示：
图3“个人主页”页眉效果图
（四）工作任务四：
制作“个人主页”首页导航条
通过CSS规则来精确控制网站首页导航栏部分，从而实现页面布局效果。
完成ID名称为nav的DIV区块的CSS设置。
核心思想是利用列表实现导航条内容的添加，在通过css样式实现布局的改变。
【任务详解】
（1）在名称为“nav”的DIV结构中输入以下代码
ul>
li>
ahref="
#"
首页<
/a>
/li>
心情日记<
Free<
一起走到<
从明天起<
纸飞机<
下一站<
/ul>
（2）首先切换到样式表文件“index.css”，添加下列样式代码对导航条的样式进行定义。
#nav{
22px;
background-color:
#90bcff;
margin-top:
-15px;
text-align:
center;
#navul{
list-style-type:
none;
margin-left:
}
#navli{
float:
left;
width:
76px;
text-align:
line-height:
}
a:
link{
color:
#00F;
text-decoration:
}
hover{
#F00;
underline;
acktive{
#000;
visited{
#000;
（12）页面效果如图4所示：
图4“个人主页”导航条效果图
（五）工作任务五
升级会员 