网页教案11.docx
《网页教案11.docx》由会员分享，可在线阅读，更多相关《网页教案11.docx（25页珍藏版）》请在冰点文库上搜索。
网页教案11
课程教学教案
课程名称
Dreamweaver网页制作实例教程
课型
专业课
任课教师
贺桂娇
教学进度
第9章CSS美化
授课时间
第10周
周一5-6节
教学时数
2
授课地点
综-301
授课班级
11计应1班
人数
60
课题
第9章CSS美化2
教学目标
知识目标：
1、掌握链接CSS的建立及使用
2、握链接CSS的使用
能力目标：
1、掌握链接CSS的建立及使用
2、握链接CSS的使用
教学重点
1、掌握链接CSS的建立及使用
2、握链接CSS的使用
教学难点
握链接CSS的使用
授课提纲
序号
内容
教学方法
与手段
时间安排（90分钟）
一
1）选择器的嵌套
任务驱动：
演示
实操
分组
5
二
2继承
简单的说就是将各个HTML标记看作一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。
我们在这里从页面各个标记的父子关系出发，讲解CSS的继承。
以操作为主结合多媒体演示及答疑
10
三
应用CSS到网页中
在对CSS有了大致的了解后，便希望使用CSS对页面进行全方位的控制。
我们在这里主要介绍如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、内嵌式、链接式、导入式等。
并最后探讨各种方式的优先级问题。
希望大家能够掌握以下几个方面的内容：
内嵌式（写在head头部信息中）
行内样式（写到html标记里面）
链接式（适合多个页面使用）
导入样式
各种方式的优先级问题
行内样式》内嵌式》链接式
提问
集体讲授
点评
10
四
利用外部链接样式统一下述网页的风格：
以操作为主结合多媒体演示及答疑
10
五
提问
集体讲授
点评
10
作业
利用外部样式表统一“青岛教育网”页面风格
45
课后小结
课程教学教案
课程名称
Dreamweaver网页制作实例教程
课型
专业课
任课教师
贺桂娇
教学进度
第9章CSS美化
授课时间
第10周
周四1-2节
教学时数
2
授课地点
综-302
授课班级
11计应1班
人数
60
课题
第9章CSS美化
教学目标
知识目标：
1、掌握链接CSS的建立及使用
2、握链接CSS的使用
能力目标：
1、掌握链接CSS的建立及使用
2、握链接CSS的使用
教学重点
1、掌握链接CSS的建立及使用
2、握链接CSS的使用
教学难点
握链接CSS的使用
授课提纲
序号
内容
教学方法
与手段
时间安排（90分钟）
一
CSS综合练习，完成如下页面的美化，效果如下：
提问
集体讲授
点评
5
二
提问
集体讲授
点评
15
三
提问
集体讲授
点评
10
四
任务驱动：
演示
实操
分组
10
五
更改CSS，实现下述风格
任务驱动：
演示
实操
分组
5
作业
完成上述综合练习
45
课后小结
课程教学教案
课程名称
Dreamweaver网页制作实例教程
课型
专业课
任课教师
贺桂娇
教学进度
第10章模板和库
授课时间
第11周
周一3-4节
教学时数
2
授课地点
综-302
授课班级
11计应1班
人数
60
课题
第10章模板和库
教学目标
知识目标：
模板、库的创建、编辑、应用、修改，站点的更新。
如何合理的设置和定义模板的可编辑区域。
能力目标：
模板、库的创建、编辑、应用、修改，站点的更新。
如何合理的设置和定义模板的可编辑区域。
教学重点
模板、库的创建、编辑、应用、修改，站点的更新。
教学难点
如何合理的设置和定义模板的可编辑区域。
授课提纲
序号
内容
教学方法
与手段
时间安排（90分钟）
一
一般情况下：
网页较多
网站网页分为三级：
首页
目录页
内容页
每个网页的头和尾是相同的
可以利用已经做好的主页，快速实现分页的制作
提问
集体讲授
点评
5
二
在制作中，可利用模板来设计其相同部分，不同之处留为可编辑区域，待在具体制作网页时，再将具体内容填入可编辑区域。
1.制作模板
1）基本元素的制作
2）插入模板区域
⏹创建可编辑区域
⏹创建重复区域
2.创建基于模板的网页文档
3.修改模板并更新
提问
集体讲授
点评
5
三
库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素（如图像、文本和其他对象）的方法。
这些元素称为库项目
提问
集体讲授
点评
5
四
使用库的意义：
如果使用了库，就可以通过改动库更新所有采用库的网页，不用一个一个的修改网页元素或者重新制作网页。
使用库比使用模板，有更大的灵活性。
任务驱动：
演示
实操
分组
15
五
任务驱动：
演示
实操
分组
15
作业
利用模版设计自己的二级或三级网页
45
课后小结
课程教学教案
课程名称
Dreamweaver网页制作实例教程
课型
专业课
任课教师
贺桂娇
教学进度
第11章表单
授课时间
第11周
周四1-2节
教学时数
2
授课地点
综-302
授课班级
11计应1班
人数
60
课题
第11章表单
教学目标
知识目标：
创建表单和表单的单行文本框、多行文本框、单选按钮、复选框、下拉式列表等多种表单元素的方法，以及各种表单对象属性的设置
能力目标：
掌握表单的基本概念
掌握表单的前台，后台
教学重点
表单前台的制作
教学难点
表单前台的制作
授课提纲
序号
内容
教学方法
与手段
时间安排（90分钟）
一
了复习表单在网页制作中的地位
案例综述
表单是一个专业网站必不可少的内容，也是一个网站是否具有交互功能的重要体现。
提问
集体讲授
点评
5
二
表单的基本知识
表单包括两个部分：
一部分是客户端，通过HTML源代码实现，用于描述表单（如单选框，复选框，列表框，文本框等等）表单的外观；
包含：
•表单
•表单元素
另一部分则是客户端脚本或服务器端应用程序，它们是用于处理通过表达表单提交的信息。
提问
集体讲授
点评
15
三
提问
集体讲授
点评
10
四
在制作时先插入一个表单，做为这些对象的容器，然后再逐个地创建这些表单对象
表单对象在表单内的定位，我们则采用表格工具进行布局。
任务驱动：
演示
实操
分组
10
五
：
任务驱动：
演示
实操
分组
5
作业
完成该表单的制作
45
课后小结
课程教学教案
课程名称
Dreamweaver网页制作实例教程
课型
专业课
任课教师
贺桂娇
教学进度
第11章表单
授课时间
第12周
周一3~4节
教学时数
2
授课地点
综-301
授课班级
11计应1班
人数
60
课题
第11章客户端表单验证
教学目标
知识目标：
创建表单和表单的单行文本框、多行文本框、单选按钮、复选框、下拉式列表等多种表单元素的方法，以及各种表单对象属性的设置
能力目标：
掌握表单的基本概念
掌握表单的前台的客户端验证
教学重点
表单的前台的客户端验证
教学难点
表单的前台的客户端验证
授课提纲
序号
内容
教学方法
与手段
时间安排（90分钟）
一
表单是一个专业网站必不可少的内容，也是一个网站是否具有交互功能的重要体现。
提问
集体讲授
点评
答疑
5
二
Spry验证文本域
Spry验证表单是DreamweaverCS3新增的功能。
Spry验证表单在创建表单元素的同时又丰富了表单验证功能。
Spry验证文本域是一个文本域，该域用于在网站中输入文本时显示文本的状态，如有效或无效。
项目导向
集体讲授
10
三
11.4.4Spry验证复选框
1.插入Spry验证复选框
①将光标定位在需要插入验证选择的位置。
②选择菜单栏“插入”|“Spry”|“Spry验证复选框”，或在“插入”面板的“Spry”类别中单击“Spry验证复选框”按钮。
③完成“输入标签辅助功能属性”对话框，单击“确定”按钮。
提问
集体讲授
点评
答疑
10
四
实例讲解——完成下列表单的客户端验证
项目导向
集体讲授
20
五
制作完整的前后台，前台客户端验证的表单
提问
集体讲授
点评
答疑
作业
见课件
45
课后小结
课程教学教案
课程名称
Dreamweaver网页制作实例教程
课型
专业课
任课教师
贺桂娇
教学进度
第12章使用层布局页面
授课时间
第12周
周四1-2节
教学时数
2
授课地点
综-301
授课班级
11计应1班
人数
60
课题
第12章使用层布局页面
教学目标
知识目标：
1、理解并掌握层的特点
2、利用层来布局网页
能力目标：
1、理解并掌握层的特点
2、利用层来布局网页
教学重点
1、理解并掌握层的特点
2、利用层来布局网页
教学难点
掌握层在排版中的作用
授课提纲
序号
内容
教学方法
与手段
时间安排（90分钟）
一
DIV=division的缩写,层的意思
网页上面的一种标签。
你可以把它看作是一个容器，用来放等的
提问
集体讲授
点评
答疑
5
二
APDIV是absolutepositiondiv，是div层定位的一种，是绝对定位。
普通div没有设置position属性的话默认为static状态。
项目导向
集体讲授
10
三
提问
集体讲授
点评
答疑
10
四
将AP元素转换为表格
⏹问题：
不是所有的浏览器都支持AP元素。
⏹解决方法：
使用AP元素创建网页布局，然后将AP元素转换为表格。
项目导向
集体讲授
20
五
提问
集体讲授
点评
答疑
25
作业
见课件
45
课后小结
学会利用层结构进行页面布局
课程教学教案
课程名称
Dreamweaver网页制作实例教程
课型
专业课
任课教师
贺桂娇
教学进度
第12章使用spry布局页面
授课时间
第13周
周一3-4节
教学时数
2
授课地点
综-301
授课班级
11计应1班
人数
60
课题
第12章使用spry布局页面
教学目标
知识目标：
1、了解spry的基本概念
2、使用spry布局页面
能力目标：
1、了解spry的基本概念
2、使用spry布局页面
教学重点
、使用spry布局页面
教学难点
、使用spry布局页面
授课提纲
序号
内容
教学方法
与手段
时间安排（90分钟）
一
DreamweaverCS3中的Spry功能由四个部分组成：
①Spry构件。
②Spry验证表单。
——客户端表单验证
③SpryXML数据显示。
④Spry特效。
提问
集体讲授
点评
答疑
10
二
插入Spry菜单栏
①“插入”栏|“Spry”类型|“Spry菜单栏”按钮
或菜单栏“插入”|“布局对象”|“Spry菜单栏”
或“插入”|“Spry”|“Spry菜单栏”命令。
②在弹出的“Spry菜单栏”对话框中选择“水平”或“垂直”，然后单击“确定”按钮。
。
项目导向
集体讲授
15
三
Spry选项卡式面板
1．插入选项卡式面板
①“插入”栏|“Spry”类型|“Spry选项卡面板”按钮
或菜单栏“插入”|“布局对象”|“Spry选项卡面板”
或“插入”|“Spry”|“Spry选项卡面板”命令。
②对于插入到网页中的“Spry选项卡式面板”，单击左上角的蓝色区域即表示选择了该“Spry选项卡式面板”，进行编辑操作。
。
提问
集体讲授
点评
答疑
10
四
Spry折叠式
1.插入“Spry折叠式”
①选择菜单栏的“插入”|“Spry”|“Spry折叠式”，或“插入”|“布局对象”|“Spry折叠式”命令，或在“插入”面板的“Spry”类别中单击“Spry折叠式”按钮。
②对于插入到网页中的“Spry折叠式”，单击左上角的蓝色区域即表示选择了该“Spry折叠式”，进行编辑操作。
项目导向
集体讲授
5
五
提问
集体讲授
点评
答疑
5
作业
参见课件
45
课后小结
掌握利用层来布局页面
课程教学教案
课程名称
Dreamweaver网页制作实例教程
课型
专业课
任课教师
贺桂娇
教学进度
第13章行为
授课时间
第13周
周四1-2节
教学时数
2
授课地点
综-301
授课班级
11计应1班
人数
60
课题
第13章行为
教学目标
知识目标：
⏹行为的概念及添加方法
⏹常用行为的添加
能力目标：
⏹行为的概念及添加方法
⏹常用行为的添加
教学重点
⏹行为的概念及添加方法
⏹常用行为的添加
教学难点
⏹行为的概念及添加方法
⏹常用行为的添加
授课提纲
序号
内容
教学方法
与手段
时间安排（90分钟）
一
事件与动作
行为是动作和触发该动作的事件的结合体
1.事件
⏹事件是触发动态效果的原因，它可以被附加在各种页面元素上，也可以被附加到HTML标记中。
2.动作
⏹动作其实是一段网页上的JavaScript代码，这些代码在特定事件被激发时执行，从而实现访问者与Web页进行交互，以多种方式更改页面或执行某些任务
⏹
任务驱动：
演示
实训
分组
10
二
实现步骤
1.准备页面。
2.设置“弹出信息”
3.打开浏览器窗口
4.设置状态栏文本
5.设置文本域文本
6.创建图像交换功能
任务驱动：
演示
实训
分组
15
三
添加行为的时候要遵循3个步骤：
⏹选择对象。
⏹添加动作。
⏹调整事件。
项目导向
实训
辅导
点评
10
四非常简单的宏病毒示例
任务驱动：
演示
实训
分组
10
作业
参见课件
45
课后小结
升级会员 