网页设计与制作电子教案.docx

1、网页设计与制作电子教案实用标准文案电子教案课程： 第 1 章 网页制作基础课时内容 网页制作基础 授课时间 学时数 2教学目标 了解 HTML 的组成和语法了解网页制作的常用软件掌握网页制作软件的启动和退出方法教学重点 网页制作的一些基本知识教学难点 HTML的组成和语法教学设计 1、 教学思路： 首先， 让同学们说说他们对网页的一个认识。 然后进行系统地介绍网页是什么， 由哪些部分组成， 还有网页制作时所需掌握的一些基础知识和制作网页时常用到的一些软件。最后学习网页制作软件的启动和退出方法。2、 教学方法： 先登录一些常用的网站， 让同学们看一些网页， 然后让同学们说下他们度网页的认识，最后

2、才开始讲解本周内容。3、 教学手段：利用多媒体并结合网络进行教学。4、 教学资料及要求： 课前要求学生先大致浏览本书内容， 对本书所要讲解的内容有个基本的了解。教学内容讨论问题： 1、什么是网页？2 、网页的基本组成部分是哪些？3 、网页有什么作用？第 1 章 网页制作基础 #1.1 网页制作基础知识1.1.1 网页简介1.1.2 什么是 HTML1.1.3 HTML 的组成结构及语法1.1.4 应用举例 使用记事本编写网页1.2 网页制作的常用软件1.2.1 图形图像处理软件1.2.2 动画制作软件1.2.3 网页布局软件1.2.4 软件配合及制作流程1.2.5 应用举例 实战网页制作流程1

3、.3 网页制作软件的启动与退出1.3.1 网页制作软件的启动1.3.2 文件的打开1.3.3 网页制作软件的退出1.3.4 应用举例 启动并退出Photoshop CS31.4 上机及项目实训1.4.1 Flash CS3 的启动与退出1.4.2 制作“蓝莲花”网页精彩文档实用标准文案1.5 练习与提高本课小结 1、 了解网页的组成。2、 掌握 HTML的组成结构及语法。3、 认识制作网页时常用到的一些软件4、 掌握网页的基本操作思 考 题 及 （ 1） HTML 文档结构由哪几部分组成？作业 （ 2）制作网页时常用软件有哪些？（ 3）如何启动和退出 Dreamweaver CS3？（ 4）如

4、何打开 Flash 文件？（ 5）如何退出 Photoshop？精彩文档实用标准文案电子教案课程： 第 2 章 Dreamweaver CS5 基本操作课时内容 Dreamweaver CS5 基本操作 授课时间 学时数 2教学目标 认识 Dreamweaver CS5 的工作界面掌握网页文档的基本操作方法掌握页面属性的设置掌握设置并管理站点的方法教学重点 认识 Dreamweaver CS5 的工作界面教学难点 设置页面属性和站点管理教学设计 1、 教学思路： 首先， 让同学们认识 Dreamweaver CS5 的工作界面。 然后进行系统地介绍网页文档制作的基本操作方法及页面的设置。 最后

5、学习对站点的管理以及设置方法。2、 教学方法： 让同学们先回忆一下上节课所讲内容， 然后让同学们回答网页是由哪几部分组成的，了解同学们对上一章知识的掌握程度。3、 教学手段：结合上章内容在机房内进行上机讲解。4、 教学资料及要求：课前要求学生预习本章内容。教学内容知识回顾：上一课时讲的 网页由哪几部分组成？讨论问题： 1、Dreamweaver CS5 的工作界面由哪几部分组成？2 、各部分的作用是什么？内容：1. 了解网页元素2 Dreamweaver CS5 工作界面3 网页文档的基本操作4 站点管理本课小结 1、 了解 Dreamweaver CS5 工作界面的组成部分及各部分的作用。2

6、、 掌握网页文档的基本操作。3、 掌握页面属性的设置。4、 对 Dreamweaver CS5 站点的管理。思 考 题 及 （ 1）预览网页效果一般会注意哪些方面？作业 （ 2）如何创建和规划站点？（ 3）如何创建站点文件和文件夹？（ 4）设置页面属性，一般包括那几个方面？精彩文档实用标准文案电子教案课程： 第 3 章 创建网页基本对象课时内容 创建网页基本对象 授课时间 学时数 4教学目标 掌握文本的插入以及调整学会图像的插入和编辑操作掌握创建超级链接的方法教学重点 创建对象及超级链接的方法教学难点 编辑网页中创建的对象教学设计 1、 教学思路：首先，让同学们先说说在 Word、Excel

7、中插入与编辑对象的方法。然后进行系统地介绍在网页中创建和编辑对象的方法。 最后学习在网页中创建超级链接的方法。2、教学方法：可以选择一种同学们熟悉的，并且插入对象与编辑对象的方法要与在网页中插入和编辑对象的方法基本相同的软件，进行比较讲解，这样既可以让同学们快速地掌握其操作方法，又可以巩固以前的知识。3、教学手段：利用多媒体并结合书本上的内容进行教学。4、教学资料及要求：课前要求学生了解在Word 办公软件中创建超级链接的方法。教学内容知识回顾：上一课时讲的 Dreamweaver CS5的工作界面由哪几部分组成？讨论问题： 1、如何在网页中插入对象？2、插入这些对象有何作用？3、怎样对插入的

8、对象进行编辑？内容：3.1文本的操作3.2插入和编辑图像3.3创建超级链接本课小结 1、 掌握在网页中插入对象的方法。2、 掌握在网页中编辑对象的方法。3、 了解在网页中创建超级链接的方法。思 考 题 及 （ 1）如何在页面中插入图像？作业 （ 2）如何在页面中创建一个锚记链接？（ 3）如何为自己的邮箱创建电子邮件链接？电子教案课程： 第 4 章 布局页面精彩文档实用标准文案课时内容 布局页面 授课时间 学时数 2教学目标 掌握插入和编辑的表格方法认识布局视图模式掌握布局单元格和布局表格的创建和编辑掌握框架的使用方法教学重点 创建以及编辑表格和框架的方法教学难点 设置表格及框架的属性教学设计

9、1、 教学思路： 首先， 让同学们先说说对插入的表格可以进行哪些编辑操作。 然后进行系统地介绍在网页中插入表格和创建框架的方法。 最后学习对插入表格和创建的框架进行编辑操作。2、教学方法： 讲课前可以先讲一个与网页有关的小故事或做一个小游戏， 活跃下气氛，带动同学们的积极性。3、教学手段：利用多媒体，对表格和框架的编辑方法进行详细讲解。4、教学资料及要求：课前要求学生了解布局页面常用到的对象有哪些。教学内容知识回顾：上一课时讲的 在网页中插入对象与编辑对象的方法？讨论问题： 1、为什么要使用表格和框架布局页面呢？2 、这样做对网页的整体效果起什么作用？3 、又如何在网页中插入表格和创建对象？第

10、 4 章 布局页面4.1 使用表格布局页面4.1.1 插入表格4.1.2 选择表格元素4.1.3 输入页面元素4.1.4 设置表格属性4.1.5 添加 / 删除行或列4.1.6 单元格的合并及拆分4.1.7 应用举例 创建细线表格4.2 使用框架布局网页4.2.1 创建框架网页4.2.2 拆分框架4.2.3 保存框架和框架集4.2.4 删除框架4.2.5 设置框架集及框架的属性4.2.6 应用举例 制作网站后台框架页面4.3 上机及项目实训4.3.1 制作网站后台管理页面4.3.2 制作“探险游”网页4.4 练习与提高本课小结 1、掌握布局页面的方法。3、掌握对创建的表格和框架进行属性设置。思

11、 考 题 及 （ 1）如何创建表格和框架？精彩文档实用标准文案作业 （ 2）表格和框架在页面中有什么用？精彩文档实用标准文案电子教案课程： 第 5 章 使用 AP Div 和行为课时内容 使用 AP Div 和行为 授课时间 学时数 3教学目标 掌握 AP Div 的创建和设置掌握 AP Div 的操作掌握行为的创建和设置掌握内置行为动作的应用教学重点 创建和设置 AP Div 和行为的方法教学难点 AP Div 和行为的操作教学设计 1、教学思路：首先，先讲一下 AP Div 的含义，让同学们对其现有一个基本的了解。然后进行系统地介绍 AP Div 的创建和设置以及基本的操作方法。最后学习行

12、为的基本操作方法。2、教学方法：先讲一下网页对一个网站的作用，尽量讲同学们感兴趣的方面。3、教学手段：由浅入深并结合多媒体进行教学。4、教学资料及要求：课前要求学生从网上多看一些网页，并进行简单的分析。教学内容知识回顾：上一课时讲的 如何编辑表格和框架？讨论问题： 1、AP Div 是什么？2 、在网页中有什么用？3 、又如何对其进行操作？第 5 章 使用 AP Div 和行为5.1 AP Div 的创建和设置5.1.1 创建 AP Div5.1.2 AP Div 的“属性”面板5.1.3 “ AP 元素”面板5.1.4 应用举例 创建 AP Div5.2 AP Div 的基本操作5.2.1选

13、择 AP Div5.2.2调整 AP Div 的大小5.2.3移动 AP Div5.2.4对齐 AP Div5.2.5应用举例 使用 AP Div 布局页面5.3 行为的基本操作5.3.1 认识行为和事件5.3.2 “行为”面板5.3.3 内置行为动作的应用5.3.4 应用举例 设置状态栏文本5.4 上机及项目实训5.4.1 绘制 AP Div精彩文档实用标准文案5.4.2 制作图像跳转网页5.5 练习与提高本课小结 1、掌握创建和设置 AP Div 和行为的方法。2、掌握 AP Div 和行为的使用方法。思 考 题 及 （ 1）在页面中如何创建多个嵌套 AP Div ？作业 （ 2）如何在页

14、面上设置行为动作？（ 3）如何绘制 AP Div ？（ 4）主要的行为动作有哪些？精彩文档实用标准文案电子教案课程： 第 6 章 创建表单课时内容 创建表单 授课时间 学时数 2教学目标 了解表单域和表单对象的概念掌握表单对象的创建和属性设置教学重点 认识表单教学难点 创建表单对象教学设计 1、教学思路：首先，先讲表单的概念和一些简单认识。然后进行系统地介绍表单对象的创建方法。最后学习制作简单的表单页面。2、教学方法：上课前可以先出一道与上章知识有关的思考题，题要比较灵活，这样可考验下同学们的思维能力。3、教学手段：利用多媒体并结合实例进行教学。4、教学资料及要求：课前要求学生复习上一章所讲过

15、的知识。教学内容知识回顾：上一课时讲的 AP Div 和行为的使用方法？讨论问题： 1、为什么要创建表单？2 、表单中又包含哪些对象？第 6 章 创建表单6.1 表单的概念6.1.1表单域6.1.2表单对象6.1.3应用举例 快速选择表单域和表单对象6.2 创建表单对象6.2.1文本域6.2.2复选框6.2.3单选按钮6.2.4列表和菜单6.2.5跳转菜单6.2.6表单按钮6.2.7创建图像域6.2.8用举例 在添加表单对象的同时添加表单域6.3 上机及项目实训6.3.1 制作注册表单页面6.3.2 制作搜索表单6.4 练习与提高本课小结 1、掌握表单的概念。2、掌握创建表单对象的方法。思 考

16、 题 及 （ 1）在页面中插入文本域的方法是什么？精彩文档实用标准文案作业 （ 2）如何创建单选按钮组？（ 3）创建图像域有什么作用？（ 4）如何让创建跳转菜单和滚动列表？精彩文档实用标准文案电子教案课程： 第 7 章 CSS 与多媒体的应用课时内容 CSS与多媒体的应用 授课时间 学时数 3教学目标 掌握创建 CSS样式表的方法掌握应用 CSS样式的方法了解多媒体和 Flash 文件类型掌握插入多媒体对象的方法掌握使用 CSS样式和 Flash 制作网页的方法教学重点 创建和应用 CSS 的方法以及多媒体的应用教学难点 CSS 属性的设置教学设计 1、教学思路：首先，让同学说说对多媒体的理解

17、。然后在详细地讲解 CSS在网页中的应用。最后学习插入 Flash 动画和影片的方法。2、教学方法：本章内容讲解完后，可让同学们根据自己下载的 Flash 动画和影片制作一个网页。3、教学手段：结合实例进行上机操作。4、教学资料及要求：课前要求学生从网上下载一些 Flash 动画和简短的影片。教学内容知识回顾：上一课时讲的表单对象的创建？讨论问题： 1、广义的多媒体和侠义的多媒体分别指什么？2 、网页中应用多媒体有什么作用？第 7 章 CSS 与多媒体的应用7.1 网页中 CSS 的应用7.1.1 认识“ CSS 样式”面板7.1.2 新建 CSS 样式7.1.3 CSS 属性7.1.4 应用

18、自定义样式7.1.5 链接到外部样式表7.1.6 应用举例 新建 CSS 样式7.2 网页中多媒体的应用7.2.1 多媒体的概念7.2.2 Flash 文件类型7.2.3 插入 Flash 动画7.2.4 插入 Shockwave 影片7.2.5 应用举例 在页面中插入 Flash 动画7.3 上机及项目实训7.3.1 制作“娃娃网”周年网页7.3.2 制作“ SHOW 广告动画”网页7.4 练习与提高精彩文档实用标准文案本课小结 1、掌握新建 CSS样式的方法。2、掌握设置 CSS属性的方法。3、掌握多媒体在网页中的应用。思 考 题 及 （ 1） CSS的主要作用是什么？作业 （ 2）如何在

19、页面中链接所创建的样式？（ 3）新建 CSS 样式的方法有哪些？（ 4）设置 CSS 样式的属性包括那几个方面？精彩文档实用标准文案电子教案课程： 第 8 章 Flash CS3 基础课时内容 Flash CS3 基础 授课时间 学时数 1教学目标 认识 Flash 动画了解 Flash CS3 的工作界面掌握 Flash 文档的创建和保存教学重点 Flash 动画的应用和其文档的基本操作教学难点 认识 Flash CS3 的工作界面教学设计 1、教学思路：首先，先讲 Flash 动画在网页中起什么作用，能使网页达到一个什么效果。然后进行系统地介绍 Flash 动画的应用和认识 Flash C

20、S3 工作界面。最后学习 Flash 文档的基本操作方法。2、教学方法：让同学们以小组的形式进行讨论 Flash 动画的应用领域。3、教学手段：利用多媒体并结合网页中插入的 Flash 动画进行讲解。4、教学资料及要求：课前要求学生预习本章内容。教学内容知识回顾：上一课时讲的 CSS与多媒体在网页中的应用？讨论问题： 1、Flash 动画具体是指什么？2 、在网页中起什么作用？第 8 章 Flash CS3 基础8.1 认识 Flash 动画8.1.1 Flash 动画的原理及应用领域8.1.2 Flash 动画在网页方面的应用8.1.3 认识 Flash CS3 工作界面8.1.4 应用举例

21、 设置文档属性8.2 Flash 文档的基本操作8.2.1 Flash 文档的创建8.2.2 Flash 文档的保存8.2.3 Flash 文档的打开8.2.4 应用举例 新建 Flash 广告动画8.3 上机及项目实训8.3.1 制作“ gongzhu” Flash 文档8.3.2 制作 SHOW 文档8.4 练习与提高本课小结 1、了解 Flash 的应用领域。2、认识 Flash CS3 的工作界面。3、掌握 Flash 文档的基本操作。思 考 题 及 （ 1） Flash 主要应用于哪些方面？精彩文档实用标准文案作业 （ 2） Flash CS3 的工作界面由哪几部分组成？（ 3）如何

22、新建一个 Flash 动画？（ 4）打开和关闭 Flash CS3 的方法分别有哪些？（ 5）如何预览动画效果？精彩文档实用标准文案电子教案课程： 第 9 章 绘制 Flash 图像课时内容 绘制 Flash 图像 授课时间 学时数 2教学目标 了解绘图工具的使用掌握图像的编辑和导入方法掌握“滤镜”面板的使用方法教学重点 绘图工具和“滤镜”面板的使用教学难点 绘制图像教学设计 1、教学思路：首先，让同学们先看一些通过 Flash 绘制的图像效果。然后进行系统地介绍工具箱中各工具的使用方法和作用以及图像的编辑与导入操作。 最后学习创建特殊效果的方法。2、教学方法：选择网页制作软件 Dreamwe

23、ave 和 Flash 进行比较讲解，既可以复习前面讲过的知识，又可以很快的掌握本章所讲知识。3、教学手段：结合前面讲过的知识并利用多媒体进行教学。4、教学资料及要求：课前要求学生复习 Dreamweave 那章的知识。教学内容知识回顾：上一课时讲的 Flash 动画的应用领域和基本操作方法？讨论问题： 1、Dreamweave 和 Flash 的相同点和不同点各是什么？2 、Flash 与其他网页制作软件比其优点是什么？第 9 章 绘制 Flash 图像9.1 绘图工具的使用9.1.1 工具箱介绍9.1.2 矢量图与位图9.1.3 应用举例 绘制咖啡杯9.2 图像的编辑和导入9.2.1 组合

24、与分离9.2.2 图像的导入9.2.3 将位图转换为矢量图9.2.4 应用举例 光晕图像效果9.3 图像特殊效果的创建9.3.1 “滤镜”面板9.3.2 滤镜的使用9.3.3 应用举例 创建特殊字体效果9.4 上机及项目实训9.4.1 绘制鼠标图形9.4.2 绘制水果拼盘9.5 练习与提高本课小结 1、了解工具箱中各工具的用法及作用精彩文档实用标准文案2、掌握图像的导入及编辑操作3、掌握图像特殊效果的创建方法思 考 题 及 （ 1）工具箱由哪几部分组成？作业 （ 2）矢量图和位图的含义及其特点？（ 3）在 Flash 中如何让导入图片？（ 4）如何将导入的位图转换为矢量图？（ 5）如何通过“滤

25、镜”面板创建模糊效果的文字？精彩文档实用标准文案电子教案课程： 第 10 章 元件和“库”面板课时内容 元件和“库”面板 授课时间 学时数 2教学目标 掌握元件的创建方式认识“库”面板“库”面板的使用与管理教学重点 元件的创建方式和“库”面板的使用教学难点 元件的创建与使用教学设计 1、教学思路：首先，让同学们认识元件，然后在系统地进行介绍元件的创建、使用以及认识“库“面板，最后学习哭的管理和使用。2、教学方法：可以通过实例对不同的元件进行操作使用。3、教学手段：结合实例进行上机操作。4、教学资料及要求：课前要求学生预习下章内容。教学内容知识回顾：上一课时讲的绘制 Flash 图像的操作方法？

26、讨论问题： 1、元件的含义是什么？2 、如何进行库的管理？第 10 章 元件和“库”面板10.1 元件的创建10.1.1 元件的概念10.1.2 图形元件10.1.3 按钮元件10.1.4 影片剪辑元件10.1.5 应用举例 制作“短靴”动画10.2 “库”面板10.2.1 认识“库”面板10.2.2 库的管理和使用10.2.3 应用举例 清理未用项目10.3 上机及项目实训10.3.1 绘制 Logo 型按钮10.3.2 创建缩放动画10.4 练习与提高本课小结 1、掌握元件的概念及创建元件2、了解“库”面板的使用及管理思 考 题 及 （ 1） Flash 中可以创建的元件有哪几种类型？作业

27、 （ 2）通过什么方式可以将图形转换为图形元件？（ 3）如何将“库”面板中的图形文件拖到编辑区域中？精彩文档实用标准文案电子教案课程： 第 11 章 用时间轴创建动画课时内容 用时间轴创建动画 授课时间 学时数 3教学目标 了解时间轴的组成帧和关键帧的创建及属性设置方法了解创建动画的类型和方法使用引导层和遮罩层创建动画教学重点 时间轴与关键帧教学难点 通过时间轴创建动画教学设计 1、教学思路：首先，让同学们先了解时间轴的组成部分。然后在系统地介绍在时间轴中插入帧和创建动画的方法。最后学习特殊图层的应用。2、教学方法：可先上同学们看一些通过时间轴创建的动画效果。3、教学手段：可采用比较典型的例子

28、进行上机操作讲解。4、教学资料及要求：课前要求学生们对前面讲过的知识动手进行操作。教学内容知识回顾：上一课时讲的元件和“库“面板的使用？讨论问题： 1、为什么本章的重点是时间轴的使用呢？2 、为什么要用时间轴创建动画？第 11 章 用时间轴创建动画11.1 时间轴与关键帧11.1.1 时间轴的组成11.1.2 时间轴中的图层11.1.3 插入帧11.1.4 应用举例 插入帧11.2 创建动画11.2.1逐帧动画11.2.2补间动画11.2.3应用举例 文本特效动画11.3 特殊图层的应用11.3.1引导层11.3.2遮罩层11.3.3应用举例 望远镜中的飞鸟11.4 上机及项目实训11.5 练习与提高本课小结 1、掌握插入帧的方法。2、掌握创建逐帧动画的方法。3、了解特殊图层的应用思 考 题 及 （ 1）时间轴由哪几部分组成？精彩文档实用标准文案作业 （ 2）根据动画样式的不同，补间动画可以分为哪两种类型？（ 3）创建动画补间可以通过哪几种方式？（ 4）建引导层的方法有哪几种？精彩文档实用标准文案