《静态网页制作Dreamweaver》课程教案首页Word文档格式.docx

1、3、灵活运用浮动和定位布局页面素质目标：1、培养学生团队合作意识2、培学生的设计和创意能力，提升学生对于网页设计的热情学习内容以“个人主页”完整项目为驱动进行阶段复习：1、网站设计流程2、规划网站目录结构3、利用HTML基本标签创建网页结构4、利用浮动或定位设计页面布局5、通过CSS样式修饰6、进行网站测试重点难点重点：利用浮动或定位设计页面布局通过CSS样式修饰难点：教学方法理论讲授 小组讨论 项目教学任务驱动 参观教学 模拟教学实验实训 演示教学 其他 素材资源文本素材实物展示PPT幻灯片音频素材视频素材动画素材图形/图像素材网络资源其他教学设计1、通过教师演示项目，采用项目驱动法引导学生

2、进行阶段知识的复习和回顾，强化关键知识的应用；2、让学生对完整网站首页的设计和制作有一个整体认识，提升学生进行真实项目开发的经验和兴趣。学习评价行为表现 课堂作业 测验测试 制作作品 其他 作业题目利用CSS+DIV自由设计并制作“个人首页”要求：网页结构和样式分离网站目录结构规划合理代码格式规范双语教学 Banner head link navigation foot 系（部）： 计算机技术系 教研室： 网络技术 教研室主任签字： 年 月 日学习单元六 以“个人主页”项目为驱动的阶段复习授课内容：学时：2学时（90分钟）教学目标：回顾常用标签的用法强化样式的综合应用理解盒子模型的意义掌握浮动

3、布局和定位通过CSS+DIV技术设计并实现一个完整网站项目的创建灵活运用盒子模型灵活设计网页布局灵活运用浮动和定位布局页面培养学生团队合作意识培学生的设计和创意能力，提升学生对于网页设计的热情教学内容： 6、进行网站测试教学重点：利用浮动或定位设计页面布局通过CSS样式修饰教学难点：教学方法和策略：教学方法： 采用项目驱动法、分组竞争法、案例演示法提高学生的学习兴趣教学策略： 通过分组讨论、竞争的方式激发学生的学习热情教学设计思路： 授课内容提纲：一、复习旧课导出阶段项目1、课程回顾（1）教师综述 在前五个学习单元的课程中，我们分阶段的以“计算机技术系网站”首页项目为驱动完成了网站首页的制作，

4、对于网站设计有了初步的认识和了解，经过阶段学习，同学们已经具备了独立设计和制作网站首页的能力。（2）利用项目互动提问回顾知识点 网站设计流程？盒子模型的关键属性？常用的定位方式有几种？（3）互动总结教师通过与学生互动沟通，进行知识的归纳：网站的设计流程包括需求分析、制作网页效果图、创建和设计网站、测试和发布等几个环节；盒子模型的关键属性包括content、border、padding和margin四个属性。常用的布局方式有浮动和定位。 2、教师首先简述本项目单元重点、难点，让学生有重点的听讲。 教师简述本项目单元的重点、难点，让学生有带着任务、有重点跟随老师授课。4、利用浮动或定位设计页面布局

5、（重点和难点）5、通过CSS样式修饰（重点）4、本学习单元总体目标（教师总结） 通过本项目单元的学习，学生对阶段只是做一整体实践和应用，让学生感受阶段学习成果的喜悦，为后续知识的学习奠定基础，并提升学习的兴趣和动力。二、项目实施 教师简述项目单元教学目标和教学内容，明确本项目单元教学重点和难点通过“个人主页”真实完整网站首页的制作，对知识进行阶段复习和综合应用明确网页结构与表现分离的意义强化盒子模型的应用熟练应用CSS+DIV技术对页面进行布局能够通过浮动或定位实现页面的布局培养学生的团队合作意识教学内容（一）工作任务一：设计和制作“个人主页”效果图【任务背景】某同学要设计一个“个人主页”，现

6、已由网站策划人员先期分析了网站的目的、功能定位及内容规划。并根据功能定位先行设计了网站效果图。【任务要求】根据与用户沟通和交流做好的需求分析，设计和制作“个人主页”效果图。【任务分析】采用蓝色主色调，体现客户简洁实用的目标。【任务实施】在PS中设计“个人主页”效果图，具体实现过程不做详解，如下图1所示：图1 页面效果图（二）工作任务二：分析“个人主页”首页整体结构某学院计算机技术系要建立本系部网站，现已由网站策划人员先期分析了网站的目的、功能定位及内容规划，并根据功能定位先行设计了网站效果图。根据已经收集好的素材及网站规划，进行网站的整体页面布局。效果图导出之后，我们就可以使用这些素材在Dre

7、amweaver着手进行布局了，现在的布局技术包括表格布局和Web标准布局，也就是俗称的DIV+CSS布局，本项目我们主要使用Web标准来布局页面。（1）在具体布局之前，首先分析一下页面的构成，目的是明确所需要创建页面的布局结构，如下图2所示。图2 页面的布局形式（2）打开在上一章节中已经创建好的名为grzyWeb的站点。（3）规划站点目录结构，建立CSS和images文件夹，将在ps中导出的图片放入images文件夹。（4）创建网站首页，命名为“index.html”，将其保存在站点根目录下。（5）创建样式表文件“index.css”，将其保存在站点根目录下的CSS文件夹中。（6）将“ind

8、ex.css”和网页文件“index.html”进行了关联。核心代码如下：（7）首先根据分析得出的页面结构搭建整个网页的页面布局。在index.htmnl。div id=top/divnavdivMain lia href=#首页/li心情日记Free一起走到从明天起纸飞机下一站（2）首先切换到样式表文件“index.css”，添加下列样式代码对导航条的样式进行定义。#nav22px; background-color:#90bcff; margin-top:-15px; text-align:center;#nav ul list-style-type:none; margin-left: #nav li float:left; width:76px; text-align: line-height: a:link color:#00F; text-decoration:hover#F00;underline;acktive#000;visited #000;（12）页面效果如图4所示：图4 “个人主页”导航条效果图（五）工作任务五