0601静态网页制作Dreamweaver布局网站后.docx

0601静态网页制作Dreamweaver布局网站后.docx

《0601静态网页制作Dreamweaver布局网站后.docx》由会员分享，可在线阅读，更多相关《0601静态网页制作Dreamweaver布局网站后.docx（11页珍藏版）》请在冰豆网上搜索。

0601静态网页制作Dreamweaver布局网站后

河北工业职业技术学院

《静态网页制作（Dreamweaver）》课程教案首页

授课教师

张亚静

班级

16网络订单1班

学时

2

授课日期

主题或任务

布局网站后台登录页面知识准备--管理表格

课型

考试

授课地点

○多媒体教室○企业○专业教室实训室

教学目标

知识目标：

1、明确表格的作用

2、掌握表格的构成

3、了解表格属性和单元格属性

4、能够灵活操作表格

5、掌握CSS设置表格的样式

技能目标：

1、能灵活运用表格布局页面

2、能够利用CSS灵活设置表格样式

素质目标：

1、培养学生团队合作意识

2、培养学生的良好的学习态度，重视基础知识的学习

学习内容

1、管理表格

1）表格构成

2）表格属性

3）单元格属性

4）操作表格

5）表格布局

2、利用CSS设置表格样式

重点难点

重点：

利用CSS设置表格样式

难点：

利用CSS设置表格样式

教学方法

○理论讲授○小组讨论项目教学

任务驱动○参观教学○模拟教学

实验实训○演示教学○其他

素材资源

○文本素材○实物展示PPT幻灯片

○音频素材○视频素材○动画素材

图形/图像素材○网络资源○其他

教学设计

1、通过教师演示“计算机系后台登录页面”项目，采用项目驱动法引导学生明确本项目单元学习目标为管理表格，并通过CSS样式实现对表格的外观修饰；

2、通过讲解表格的相关知识，为登录页面布局打下基础；

3、通过CSS实现对表格的外观设置，从而实现网页结构与表现的完美结合。

学习评价

行为表现○课堂作业○测验测试制作作品○其他

作业题目

1）完成教材“考核评价”部分表格题目的相关内容

2）完成教材中关于管理表格部分的案例和操作

双语教学

Tablecolumnrowstyle

系（部）：

计算机技术系教研室：

网络技术教研室主任签字：

年月日

学习单元十布局网站后台登录页面知识准备--管理表格

授课内容：

布局网站后台登录页面知识准备--管理表格

学时：

2学时（90分钟）

教学目标：

◆知识目标：

✧熟练掌握JavaScript的基本语法

✧能够识别简单的jQuery特效代码

◆技能目标：

✧能够网站项目中通过“行为面板”添加简单的交互行为

✧能够网站项目中编写简单的JavaScript特效提网页效果

✧能够对成熟的JavaScript或jQuery特效实例进行修改，并应用到静态页面中

✧提高学生解决实际问题的能力

◆情感目标：

✧培养学生团队合作意识

✧培养学生自我分析问题和解决问题的能力

教学重点：

✧主内容区整体构架设计及制作

✧主内容区图文混排的方法

教学难点：

✧主内容区整体构架设计及制作定

教学方法和策略：

◆教学方法：

采用项目驱动法、分组竞争法、案例演示法提高学生的学习兴趣

◆教学策略：

通过分组讨论、竞争的方式激发学生的学习热情

教学设计思路：

1、通过教师演示项目，采用项目驱动法引导学生明确本项目单元学习目标

2、鼓励学生多使用代码视图，运用灵活方便的代码快速解决问题

3、知识准备讲解完成后，由学生自己动手完成简单首页特效的添加，强化知识的掌握程度和灵活运用程度，让学生带着任务去学习，积极性得以提高。

授课内容提纲：

1、复习旧课导出新课

1、课程回顾

1）教师综述

在上一学习单元的课程中，之前我们已经完成了网站二级页面的设计和创建的学习，使二级页面和主页具有相同的风格。

（2）利用项目互动提问回顾知识点

✧网站模板的作用是什么？

✧创建模板的方法和步骤？

✧应用模板的方法

3）互动总结

与学生互动总结上节课重点内容，以及学生制作中的亮点指出，并指明有待提升和改进的地方。

2、项目任务导入

1）教师利用互动提问引入新知

●用户浏览的网页资源需要更新怎么办？

是否需要网站整体修改一遍？

●是不是任何用户都可以对资源进行管理？

如果不是，怎么确定合法访问者？

2）教师根据互动讨论进行总结

●需要建立一个后台登录页面，管理员通过它实现网站内容的资源管理。

之前储备的知识已经不能完成后续功能的需求，需要引入新知识继续完成后台登录页面的制作。

●本项目单元要学习的新内容是布局网站后台登录页面知识准备--管理表格（点题），我们可以通过学习表格基础知识为制作后台登录页面做好准备。

3、教师首先简述本项目单元重点、难点，让学生有重点的听讲。

教师简述本项目单元的重点、难点，让学生有带着任务、有重点地听课。

（1）表格构成（重点）

（2）操作表格（重点）

（3）使用CSS设置表格样式（重点、难点）

4、本学习单元总体目标（教师总结）

通过学完本项目单元，能灵活运用表格布局页面，并且能够通过利用CSS灵活设置表格样式，为网站后台的搭建奠定基础。

二、新课讲解

教师简述项目单元教学目标和教学内容，明确本项目单元教学重点和难点

教学目标

●能够创建表格

●能够操作表格

●能够通过CSS样式修饰表格

教学内容

1、管理表格

1）表格构成

2）表格属性

3）单元格属性

4）操作表格

5）表格布局

2、利用CSS设置表格样式（重点和难点）

（一）工作任务一：

计算机系网站简单网页特效的添加

场景设计：

教师采用项目驱动法，展示【学生信息表】和【班级信息表】项目案例，让学生对本项目单元实施完成后效果有一个总体认识，便于学生对知识形成体系，带着明确的任务学习。

1、知识准备（教师讲解）

教师阐述讲解表格的作用，一方面可以显示数据，另外一个主要的用途可以进行网页布局，尤其是网站后台界面的布局。

（1）表格构成

●表格的概念：

是用于在网页上显示表格式数据，对文本、图像等进行布局的强有力的工具。

●表格的构成：

由行列交叉的单元格构成。

（2）表格属性

●表格属性设置直接影响表格在网页中的显示效果，进而影响网页的布局效果。

●教师操作讲解：

表格属性设置主要包括表格的宽度、高度、填充、间距、对齐方式、边框、背景颜色、边框颜色、背景图像等。

（3）单元格属性

●行属性、列属性和单元格属性

（4）创建表格

●通过对话框界面操作创建表格

●通过HTML代码创建表格

格式代码如下：

...

...

●教师通过手动和代码两种方式讲解下表的创建过程：

（5）操作表格

●教师演示讲解表格的常用操作：

1　选择整个表格

2　选择行/列

3　选择单元格

4　添加行/列

5　删除行/列

6　拆分单元格

7　合并单元格

8　表格应用

⏹教师引导学生完成案例6-1的制作

⏹教师演示讲解案例6-2细线表格的制作，总结案例的知识点（表格背景色和单元格背景色的设置）

（6）表格布局

由于CSS+DIV布局灵活性和网页访问速度远远优于表格布局，因此，对于大型网站和符合Web2.0技术规范网站，强烈推荐采用CSS+DIV布局。

（7）CSS修饰表格

通过color属性、background属性和border属性等设置，以提升表格的外观显示效果。

2、项目实施一实施--

（1）利用表格完成页面布局

教师从分组中找出1-2名学生完成【图6-17学生信息表网页效果】中表格的创建。

（2）使用CSS设置表格样式

●教师在图6-17的基础上，以图6-33为目标讲解CSS设置表格样式

1　教师讲解使用CSS设置表格颜色。

CSS通过color属性设置表格中文字的颜色，通过background属性修饰表格的背景色。

2　教师讲解使用CSS设置表格边框。

CSS通过border属性设置表格的边框样式。

●教师从分组中找出1-2名学生完成图6-17表格样式和边框样式的设置，最终效果如图6-33所示。

●教师操作演示各行变色表格的制作过程，效果如图6-34所示。

1　核心知识点：

表格的奇数和偶数行分别设置不同的样式。

2　注意：

要遵循表格的结构与样式分开的原则

二、单元小结与项目单元任务

1.项目单元小结

●通过互动提问的方式总结归纳本项目单元内容，再次强调重点和难点

●管理表格的常用操作及表格样式的设置。

重点是表格构成、操作表格和利用CSS设置表格样式。

●难点是利用CSS设置表格样式。

要求学生在实际应用中提高对于表格的掌握程度。

2.项目单元任务

●完成教材“考核评价”部分表格题目的相关内容

●完成教材中关于管理表格部分的所有案例和操作。

三、板书设计

新课讲解

可擦写区域

1、管理表格

1）表格构成

2）表格属性

3）单元格属性

4）操作表格

5）表格布局

2、利用CSS设置表格样式（重点和难点）

讲解细节

布置任务

四、课后附记

课程回顾：

【约10分钟】

●学生在教师的引导下，互动回答教师的提问，一起对网页模板和库的知识进行回顾。

●要求学生认真记录实训环节问题的解决方案。

通过互动提问的方式让学生动脑筋去思考，为新知识的学习奠定基础

学生明确本项目单元结束后自己能干什么。

新课讲解1：

【约30分钟】

1.项目引入思路：

教师利用计算机系网站目入手，为完成后台管理界面的布局和美化打下基础。

2.思路指导：

掌握表格布局页面及用CSS样式修饰和美化表格。

3.任务目标：

为后台的布局和美化奠定基础。

教师对学生进行分组，以便在任务一讲解中，通过项目驱动和互动讨论的方式实施教学。

教师展示项目一完成后的效果，学生对学习目标有更清晰的认识。

教师讲解表格的构成、表格属性和单元格属性，提醒学生对关键知识点进行记录。

单元项目归纳和总结【约5分钟】

教师采用互动提问的方式进行知识的归纳和总结，并强调重点和难点知识。

教师通过设计视图和代码视图对创建表格的关键知识进行操作和讲解，做到有的放矢，为网站后天的搭建做好准备。

●教师采用分组竞争的策略，选择出两组完成表格的创建，作为平时小组成绩进行记录。

●对学生的操作进行点评。

要求学生体验和记录合并和拆分单元格的两个重要属性：

✧colspan--跨列

✧rowsspan--跨行

从小组中寻找1-2名学生完成细线表格的制作，体验表格及表格属性的强大功能。

教师讲解CSS修饰表格的关键内容，提醒学生做好笔记。

✧教师采用激励的方式，让学生主动参与到项目实施中。

✧教师做好学生平时成绩的记录。

教师以引导为主，由学生完成6-33表格的搭建。

教师以引导为主，由学生完成6-34表格样式的添加。

单元项目归纳和总结【约5分钟】

教师采用互动讨总结的方式，对本学习单元的知识点进行归纳和总结，并再次强化重点和难点。