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

1、静态网页制作Dreamweaver课程教案首页河北工业职业技术学院静态网页制作( Dreamweaver )课程教案首页授课教师张亚静 班级 16 网络订单 1 班学时2授课日期主题或任务以“个人主页”项目为驱动的阶段复习课型考试授课地点多媒体教室企业专业教室 实训室教学目标知识目标：1、回顾常用标签的用法2、强化样式的综合应用2、理解盒子模型的意义3、掌握浮动布局和定位技能目标：1、通过 CSS+DIV 技术设计并实现一个完整网站项目的创建2、灵活运用盒子模型灵活设计网页布局3、灵活运用浮动和定位布局页面素质目标：1、培养学生团队合作意识2、培学生的设计和创意能力，提升学生对于网页设计的热情

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

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

4、局和定位技能目标：通过 CSS+DIV 技术设计并实现一个完整网站项目的创建灵活运用盒子模型灵活设计网页布局灵活运用浮动和定位布局页面素质目标：培养学生团队合作意识培学生的设计和创意能力，提升学生对于网页设计的热情教学内容：1、网站设计流程2、规划网站目录结构3、利用 HTML 基本标签创建网页结构4、利用浮动或定位设计页面布局5、通过 CSS 样式修饰6、进行网站测试教学重点：利用浮动或定位设计页面布局通过 CSS 样式修饰教学难点：利用浮动或定位设计页面布局教学方法和策略：教学方法：采用项目驱动法、分组竞争法、案例演示法提高学生的学习兴趣教学策略：通过分组讨论、竞争的方式激发学生的学习热情

5、教学设计思路：1、通过教师演示项目，采用项目驱动法引导学生进行阶段知识的复习和回顾， 强化关键知识的应用；2、让学生对完整网站首页的设计和制作有一个整体认识， 提升学生进行真实项 目开发的经验和兴趣。授课内容提纲：一、复习旧课导出阶段项目1、课程回顾（1）教师综述在前五个学习单元的课程中， 我们分阶段的以 “计算机技术系网站” 首页项目为 驱动完成了网站首页的制作， 对于网站设计有了初步的认识和了解， 经过阶段学习， 同学们已经具备了独立设计和制作网站首页的能力。（2）利用项目互动提问回顾知识点网站设计流程？盒子模型的关键属性？常用的定位方式有几种？（3）互动总结教师通过与学生互动沟通，进行知

6、识的归纳： 网站的设计流程包括需求分析、制作网页效果图、创建和设计网站、测试 和发布等几个环节； 盒子模型的关键属性包括 content 、 border、 padding 和 margin 四个属性。 常用的布局方式有浮动和定位。课程回顾：【约 10 分钟】通过互动的方 式回顾之前的 学习内容， 为阶 段项目的制作 做好准备。学生通过互动 方式回答教师 提出的问题。认真听取教师 的总结， 明确本 项目单元的学 习任务。2、教师首先简述本项目单元重点、难点，让学生有重点的听讲。教师简述本项目单元的重点、难点，让学生有带着任务、有重点跟随老师授课。 1、网站设计流程2、规划网站目录结构3、利用

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

8、意识教学内容1、网站设计流程2、规划网站目录结构3、利用 HTML 基本标签创建网页结构4、利用浮动或定位设计页面布局（重点和难点）5、通过 CSS 样式修饰（重点）6、进行网站测试明确本项目单 元的总体学习 目标。带着目标 和任务学习。对学习目标形 成一个初步地、 大致地、 总体的 知识轮廓。新课讲解：【约 65 分钟】1.项目引入思路： 教师利用“个人 主 页”项目为驱动，进 行阶段知识回顾、 复 习和综合应用。2.思路指导： 通过“个人主页”项 目制作， 完成一个网 站首页的整个设 计 流程。3.任务目标： 熟练“个人主页”首 页的设计和创建。一）工作任务一：设计和制作“个人主页”效果图

9、【任务背景】某同学要设计一个 “个人主页” ，现已由网站策划人员先期分析了网站的目的、 功能定位及内容规划。并根据功能定位先行设计了网站效果图。【任务要求】根据与用户沟通和交流做好的需求分析，设计和制作“个人主页”效果图。【任务分析】采用蓝色主色调，体现客户简洁实用的目标。【任务实施】此部分由于在 课前已作为课 前任务做好了 前期的准备工 作，因此，直接 在 ps 中实现效 果图的制作。时刻保持与教 师的互动。思路跟教师保 持一致， 保证学 习效果。在 PS 中设计“个人主页”效果图，具体实现过程不做详解，如下图 1 所示：提醒学生出图的 方 法， 注意使用 切片工 具对大图进行切割。图1 页

10、面效果图(二)工作任务二：分析“个人主页”首页整体结构【任务背景】 某学院计算机技术系要建立本系部网站，现已由网站策划人员先期分析了网站 的目的、功能定位及内容规划，并根据功能定位先行设计了网站效果图。【任务要求】 根据已经收集好的素材及网站规划，进行网站的整体页面布局。【任务分析】 效果图导出之后，我们就可以使用这些素材在 Dreamweaver 着手进行布局了， 现在的布局技术包括表格布局和 Web 标准布局，也就是俗称的 DIV+CSS 布局，本 项目我们主要使用 Web 标准来布局页面。【任务实施】(1)在具体布局之前，首先分析一下页面的构成，目的是明确所需要创建页面的布 局结构，如下

11、图 2 所示。互动提问， 整个页面 区块如何划分？图2 页面的布局形式(2)打开在上一章节中已经创建好的名为 grzyWeb 的站点。(3)规划站点目录结构，建立 CSS 和 images 文件夹，将在 ps 中导出的图片放入 images 文件夹。(4)创建网站首页，命名为“ index.html ”，将其保存在站点根目录下。(5)创建样式表文件“ index.css”，将其保存在站点根目录下的 CSS 文件夹中。(6)将“ index.css”和网页文件“ index.html ”进行了关联。核心代码如下：CSS 中首选的让 元素水平居中的 方法将元素的 margin-left 和 mar

12、gin-right 属 性 设置为 auto 即可。三)工作任务三：制作“个人主页”首页页眉【任务背景】在上一工作任务中，我们已经实现了本项目 DIV 框架结构布局，但是效果离我们要实现的网页布局效果还相差甚远，仅仅依靠 DIV 标签是无法实现页面布局的，我们必须要配合 CSS 来对网站的各个部分进行更加精确的控制。【任务要求】通过 CSS 规则来精确控制网站首页页眉部分，从而实现页面布局效果。【任务分析】完成 ID 名称为 top 的 DIV 区块的 CSS 设置。【任务实施】(1)首先切换到样式表文件“ index.css”，添加下列样式代码对整个页面的样式进 行定义。bodypaddin

13、g:0;margin:0;background:url(./images/bg.gif);(1) 接下来在样式表中定义“ top”的样式，也就是定义页眉的结构，添加下列样式 代码：#top,#nav,#mainmargin:0 auto; /* 将页面中的三个大区块设置水平居中 */在实际使用中， 我 们可以为这些需 要居中的元素创 建一个起容器作 用的 div 。需要特 别注意的一点就 是，必须 为该容器 指定宽度 。#banner图3 “个人主页”页眉效果图四)工作任务四：制作“个人主页”首页导航条【任务要求】通过 CSS 规则来精确控制网站首页导航栏部分，从而实现页面布局效果。此部分由于

14、不涉 及二级页面的制 作，将所有的导航 目标设置为空链【任务分析】完成 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;#nav ul list-style-ty

15、pe: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)说明：a:link 是超级链 接的初始状态。a:hover 是把鼠 标放上去时悬停 的

16、 状态。a:active 是鼠标 点击时， 即鼠标左键 点击链接对象与 释 放鼠标右键之间 很 短暂样式效果。a:visited 是访问 过后的状态。一般网站需要 设 置 的 是 “ a:link 、” “ a:visited 、“”a:hover ” 三种状态， “ a:active ” 状态设置较少。页面效果如图 4 所示：图4 “个人主页”导航条效果图五)工作任务五：制作“个人主页”首页主内容区【任务要求】通过 CSS 规则来精确控制网站首页主内容区域，从而实现页面布局效果。【任务分析】 完成网站主内容区域布局设计及内容版式设计，此部分我们将完成 divMain 的 DIV 区块的 CS

17、S 设置。ID 名称为【任务详解】(1) 打开“ index.css”文件，在样式表中添在名称为“ divMain ”样式，并对其样式 的具体设置。#divMainwidth:600px; height:800px;Background:red; /* 添加区块测试颜色 */(2) 页面效果如图 5 所示：颜色 测试 法是网页 布局中最常用的 测 试方法。 互动提问原因？ 总结：不占尺寸，但 是还可以看到区 块 的范围。在样式设置过程中， 注重代码的效率， 此 部分注意提醒学生。 1)两张图片的样式 相同2 )两个图片的标题 相同3)两个图片的文字 描述相同由于此部分样式 比 较繁多， 强调学

18、生一 定要边做边测试， 以 浏览器效果为准。图 5 “个人主页”主内容区效果图(3)添加主体内容左区块的页面结构，其代码如下：width=93 我的日记本 他们彼此深信， 心情轨迹 img src=images/selfpic.jpg 定是美丽的，但变幻无常更为美丽。 height=123 class=imgLeft /是瞬间迸发的热情让他们相遇。这样的确width=93 height=103提醒学生： 注意代码的格式， 有层次感。 董事长的一切都让人既羡慕又忌妒， 但更让人受不了的是， 有一天，上苍忽然赐给他一个神奇的礼物 (4)在“ index.css”样式表中添在名称为“ divLeft

19、 ”样式，并对其样式的具体设置。#divLeftwidth: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;.leftTextContentBacground 属性是一 个符合属性， 可以同 时设置背景的多 个 属性， 中

20、间通过空格 来连接不同属性值。text-align:left;(5)页面效果如图 5 所示：图 5 “个人主页”主内容区左区块效果图(6)添加主体内容右区块的页面结构，其代码如下： 介绍 我努力的抓紧世界，最后却仍被世界淘汰，如果一开始就松 手，我会不那么伤心吗？你说，亲爱的孩子，世事难料，随它去吧！ 照相本子 关于童年，你记住了什么？ 两岁时，我拥有一只巨大的粉红猪，它总在我嚎啕大哭时逗我笑。 三岁时，我骑着小木马一路摇到外婆家，它不喝水也不吃草。 四岁时，我离家出走，在公车上睡着了，最后是太空超人送我回家。 我真的没骗你，我通通都记得，还有照片为证。 地下铁 天使在地下铁的入口， 单元项目

21、归纳和总 结【约 5 分钟】 教师采用互动提 问 的方式进行知识 的 归纳和总结， 并强调 重点和难点知识。 布置单元项目任务和我说再见的那一年， 我渐渐看不见了。 十五岁生日的那年秋天早晨， 窗外下着毛毛雨， 我喂好我的猫。 六点零五分， 我走进地下铁。 向左走向右走 Theyre both convinced that a sudden passion joined them. Such certainth is beautiful, but uncertainty is more beautiful still. (7)在“ index.css”样式表中添在名称为 “ divRight

22、”样式，并对其样式的具体设置。【约 5 分钟】 要求学生课下任 务 必须按质按量按 时 完成， 强调作业的重 要性。#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 布局、盒子模型和浮动布局的应用。2. 项目单元任务1) 以“个人首页”为项目驱动，自由发挥完成一个真实项目的设计和创建。2) 写出规范完善的设计和制作文档，便于对知识进行梳理和整理。三、板书设计新课讲解可擦写区域设计网站效果图讲解细节划分页面区块（重点）设计网站首页页眉（重点、难点）布置任务设计网站首页导航条（重点、难点）设计网站首页主题部分（重点、难点）四、课后附记