0601-静态网页制作(Dreamweaver)-布局网站后.

1、Dreamweaver 网页设计教案河北工业职业技术学院静态网页制作（Dreamweaver ）课程教案首页授课教师张亚静班级1616 网络订单 1 1 班学时2 2授课日期主题或任务布局网站后台登录页面知识准备-管理表格课型考试授课地点O多媒体教室O企业O专业教室 实训室教学目标知识目标：1 1、 明确表格的作用2 2、 掌握表格的构成3 3、 了解表格属性和单元格属性4 4、 能够灵活操作表格5 5、 掌握 CSSCSS 设置表格的样式技能目标：1 1、 能灵活运用表格布局页面2 2、 能够利用 CSSCSS 灵活设置表格样式素质目标：1 1、培养学生团队合作意识2 2、 培养学生的良好的

2、学习态度，重视基础知识的学习学习内容1、 管理表格1 1）表格构成2 2） 表格属性3 3） 单元格属性4 4） 操作表格5 5） 表格布局2 2、 利用 CSSCSS 设置表格样式重点难点重点：利用 CSSCSS 设置表格样式难点：利用 CSSCSS 设置表格样式Dreamweaver 网页设计教案2教学方法O理论讲授O小组讨论项目教学任务驱动O参观教学O模拟教学 实验实训O演示教学O其他素材 资源O文本素材O实物展示PPTPPT 幻灯片O音频素材O视频素材O动画素材图形/ /图像素材O网络资源O其他Dreamweaver 网页设计教案教学设计1 1、 通过教师演示“计算机系后台登录页面”

3、项目，采用项目驱动法引导学生明确本项目 单兀学习目标为官理表格，并通过 CSSCSS 样式 实现对表格的外观修饰；2 2、 通过讲解表格的相关知识，为登录页面布局打下基础；3 3、通过 CSSCSS 实现对表格的外观设置，从而实现网页结构与表现的完美结合。学习评价行为表现O课堂作业O测验测试制作作品O其他作业题目1 1）完成教材“考核评价”部分表格题目的相关内容2 2）完成教材中关于官理表格部分的案例和操作双语教学TableTable colucolu mnmnrowrow stylestyle系（部）：计算机技术系教研室：网络技术教研室主任签字：-_ 年月日Dreamweaver 网页设计教

4、案4学习单元十布局网站后台登录页面知识准备-管理表格授课内容：布局网站后台登录页面知识准备-管理表格学时：2 2 学时（9090 分钟）教学目标：知识目标：熟练掌握 JavaScriptJavaScript 的基本语法能够识别简单的 jQueryjQuery 特效代码技能目标：能够网站项目中通过“行为面板”添加简单的交互行为能够网站项目中编写简单的JavaScriptJavaScript 特效提网页效果能够对成熟的 JavaScriptJavaScript 或 jQueryjQuery 特效实例进行修改，并应用到静态页面中提高学生解决实际问题的能力情感目标：培养学生团队合作意识培养学生自我分析

5、问题和解决问题的能力教学重点：主内容区整体构架设计及制作主内容区图文混排的方法教学难点：主内容区整体构架设计及制作定教学方法和策略：教学方法：采用项目驱动法、分组竞争法、案例演示法提高学生的学习兴趣教学策略：通过分组讨论、竞争的方式激发学生的学习热情Dreamweaver 网页设计教案教学设计思路:Dreamweaver 网页设计教案61 1、 通过教师演示项目，采用项目驱动法引导学生明确本项目单元学习目标2 2、 鼓励学生多使用代码视图，运用灵活方便的代码快速解决问题3 3、 知识准备讲解完成后，由学生自己动手完成简单首页特效的添加，强化知识的掌握程度和灵活运用程度，让学生带着任务去学习，积

6、极性得以提高。授课内容提纲：一、复习旧课导出新课1 1、课程回顾1 1）教师综述在上一学习单元的课程中，之前我们已经完成了网站二级页面的设计和创建的 学习，使二级页面和主页具有相同的风格。（2 2）利用项目互动提问回顾知识点网站模板的作用是什么？创建模板的方法和步骤？应用模板的方法3 3）互动总结与学生互动总结上节课重点内容，以及学生制作中的亮点指出，并指明有待提 升和改进的地方。2 2、 项目任务导入1 1） 教师利用互动提问引入新知用户浏览的网页资源需要更新怎么办？是否需要网站整体修改一遍？ 是不是任何用户都可以对资源进行管理？如果不是，怎么确定合法访问 者？2 2） 教师根据互动讨论进行

7、总结需要建立一个后台登录页面，管理员通过它实现网站内容的资源管理。之前储备的知识已经不能完成后续功能的需求，需要引入新知识继续完成后台登录页面的制作。本项目单元要学习的新内容是布局网站后台登录页面知识准备-管理表格（点题），我们可以通过学习表格基础知识为制作后台登录页面做好准备。课程回顾：【约 1010 分钟】学生在教师的 引导下，互动回 答教师的提问， 一起对网页模 板和库的知识进行回顾。要求学生认真记录实训环节 问题的解决方案。通过互动提问的 方 式让学生动脑筋 去 思考，为新知识的学 习奠定基础Dreamweaver 网页设计教案73 3、 教师首先简述本项目单元重点、难点，让学生有重点

8、的听讲。 教师简述本项目单元的重点、难点，让学生有带着任务、有重点地听课。（1 1）表格构成（重点）（2 2）操作表格（重点）（3 3）使用 CSSCSS 设置表格样式（重点、难点）4 4、 本学习单元总体目标（教师总结）通过学完本项目单元，能灵活运用表格布局页面，并且能够通过利用CSSCSS灵活设置表格样式，为网站后台的搭建奠定基础。二、新课讲解教师简述项目单元教学目标和教学内容，明确本项目单元教学重点和难点教学目标能够创建表格能够操作表格能够通过 CSSCSS 样式修饰表格教学内容1、 管理表格1 1 ）表格构成2 2） 表格属性3 3） 单元格属性4 4） 操作表格5 5） 表格布局2

9、2、 利用 CSSCSS 设置表格样式（重点和难点）（一）工作任务一：计算机系网站简单网页特效的添加场景设计：教师采用项目驱动法，展示【学生信息表】和【班级信息表】项目 案例，让学生对本项目单元实施完成后效果有一个总体认识，便于学生对知识形成 体系，带着明确的任务学习。学生明确本项目 单 元结束后自己能 干 什么。新课讲解 1 1:【约 3030 分钟】1.1.项目引入思路：教师利用计算机 系 网站目入手，为完成 后台管理界面的 布 局和美化打下基础。2.2.思路指导：掌握表格布局页 面 及用CSSCSS 样式修饰和 美化表格。3.3.任务目标：为后台的布局和 美 化奠定基础。教师对学生进行

10、分 组，以便在任务一讲 解中，通过项目驱动 和互动讨论的方式 实施教学。Dreamweaver 网页设计教案8瞬|竝1WS-12-?L帥1 11目教师展示项目一完 成后的效果，学生对 学习目标有更清 晰 的认识。班级信息一览表学号姓名性别出生日期001王丽玲女1987-2-3音乐002女1908-7-16武术003李山男1990-12-20足球004顾小月19S9-10-23诗就005男1988-6-14古诗词006男19S7-2-15扌非球007舅1991*4-3乒乓球008吴丽丽1992-12-23羽毛球009张渤男1991-9-11盪球010黄乐乐女1989-6-1S诲泳1 1、知识准备

11、（教师讲解）教师阐述讲解表格的作用，一方面可以显示数据，另外一个主要的用途可以进 行网页布局，尤其是网站后台界面的布局。（1 1）表格构成表格的概念：是用于在网页上显示表格式数据，对文本、图像等进行布局 的强有力的工具。表格的构成：由行列交叉的单元格构成。（2 2）表格属性表格属性设置直接影响表格在网页中的显示效果，进而影响网页的布局效 果。教师操作讲解：表格属性设置主要包括表格的宽度、高度、填充、间距、 对齐方式、边框、背景颜色、边框颜色、背景图像等。（3 3）单元格属性教师讲解表格的 构 成、表格属性和单元 格属性，提醒学生对 关键知识点进行记录。单元项目归纳和总结【约 5 5 分钟】教师

12、采用互动提 问 的方式进行知识 的 归纳和总结，并强调 重点和难点知识。Dreamweaver 网页设计教案9行属性、列属性和单元格属性(4)(4)创建表格通过对话框界面操作创建表格教师通过设计视 图 和代码视图对创 建 表格的关键知识进 行操作和讲解，做到 有的放矢，为网站后 天的搭建做好准备。通过 HTMLHTML 代码创建表格格式代码如下：单元格内的内容教师通过手动和代码两种方式讲解下表的创建过程:(5(5)操作表格教师演示讲解表格的常用操作:教师采用分组 竞争的策略，选 择出两组完成 表格的创建，作 为平时小组成 绩进行记录。对学生的操作进行点评。1选择整个表格2选择行例3选择单元格D

13、reamweaver 网页设计教案10Dreamweaver 网页设计教案114添加行/ /列5删除行例6拆分单元格7合并单元格8表格应用要求学生体验和 记 录合并和拆分单 元 格的两个重要属性：colspacolspa n-n-跨歹U Urowssparowsspa n-n-跨行教师引导学生完成案例 6-16-1 的制作教师演示讲解案例 6-26-2 细线表格的制作，总结案例的知识点(表 格背景色和单元格背景色的设置)(6(6)表格布局由于 CSS+DIVCSS+DIV 布局灵活性和网页访问速度远远优于表格布局，因此，对于大型网站和符合 Web2.0Web2.0 技术规范网站，强烈推荐采用C

14、SS+DIVCSS+DIV 布局。(7 7) CSSCSS 修饰表格通过colorcolor 属性、backgroundbackground 属性和 borderborder 属性等设置，以提升表格的外观显示效果。2 2、项目实施一实施 -(1 1)利用表格完成页面布局教师从分组中找出 1-21-2 名学生完成【图 6-176-17 学生信息表网页效果】中表格的创建。学学生生信息議信息議学号姓名性别出生日期个人爱好学号姓名性别出生日期个人爱好35029001李晓敏女李晓敏女1999-6 8羽毛球羽毛球35029002张立志男张立志男19先先- -12-:5足球足球35029003陈丽陈丽 女女

15、1999-3-18绘回绘回从小组中寻找 1-21-2 名 学生完成细线表 格 的制作，体验表格及 表格属性的强大功教师讲解 CSSCSS 修饰 表格的关键内容，提 醒学生做好笔记。教师采用激励 的方式，让学生 主动参与到项 目实施中。教师做好学生 平时成绩的记录。Dreamweaver 网页设计教案12(2(2)使用 CSSCSS 设置表格样式教师在图 6-176-17 的基础上，以图 6-336-33 为目标讲解 CSSCSS 设置表格样式Dreamweaver 网页设计教案131教师讲解使用 CSSCSS 设置表格颜色。CSSCSS 通过 colorcolor 属性设置表格中文 字的颜色，

16、通过backgroundbackground 属性修饰表格的背景色。2教师讲解使用 CSSCSS 设置表格边框。CSSCSS 通过 borderborder 属性设置表格的边 框样式。教师从分组中找出 1-21-2 名学生完成图 6-176-17 表格样式和边框样式的设置，最 终效果如图 6-36-33 3所示。教师操作演示各行变色表格的制作过程，效果如图6-346-34 所示。1核心知识点：表格的奇数和偶数行分别设置不同的样式。2注意：要遵循表格的结构与样式分开的原则班级信息一览表二、单元小结与项目单元任务1.1.项目单元小结通过互动提问的方式总结归纳本项目单元内容，再次强调重点和难点管理表

17、格的常用操作及表格样式的设置。重点是表格构成、操作表格和利用 CSSCSS 设置表格样式。难点是利用 CSSCSS 设置表格样式。要求学生在实际应用中提高对于表格的掌握程度。2.2.项目单元任务完成教材“考核评价”部分表格题目的相关内容教师以引导为主，由 学生完成 6-336-33 表格 的搭建。-f-F姓若性别岀生日朋爰好001壬丽玲19S7-2-3音乐002褪萌女1988-7-16武术003李山男1990-12-20足球004顾小月女1989-10-23诗歆005男1988-614古诗词006養凱男1987-2-15排球007男1991-4-34 乓球008昊丽丽女1992*1223羽毛球009勇篮球