《网页制作》教案设计

学期授课进度计划表

周次授课内容课时备注

1.2周新生军训

31.1网站基础知识2

1.2网站建设概述2

实训I新建一个网贞2上机

42.1添加和编辑义本2

实训1网站素材处理2上机

实训制作简单网固2上机

5

6

7国庆放假6机动补周一课

82.2添加和编辑图像6

2.3创建超级链接2

实训1图像处理和创建超级链接2上机

9实训1跳转菜单2上机

2.4使用表格布局页面2

实训I表格布局实例分析2上机

102.5使用框架布局贞面2

运动会充周三到周五

运动会

11实训I框架布局实例分析2上机

3.3添加动画2

添加音频和视频2

12实训DIV与表格的转换2上机

4.3晃动的图片2

实训I交换图像2上机

13实训I拼图游戏2上机

4.4修改属性特效及动态菜单制作2

实训I效果行为应用2上机

14实训图片展播实例2上机

5.1认识和编辑CSS2

实训I美化页面2上机

15实训I应用CSS到网贞中2上机

5.2类型、背景和区块样式2

实训I方框、边框和导航栏2上机

16实训I超链接样式及设置技巧2上机

学期授课进度计划表

6.1DIV布局贞面2

6.2认识Spry2

17实训I调整样式2上机

6.3选择服务器和使用虚拟机2

6.4申请域名2

18实训I网站发布2上机

7.1个人主页制作2

7.2策划构思及设计流程2

19实训I贞面布局2上机

7.3制作页面头部2

7.4制作中间表格内容2

20元旦放假2机动

2充周一课

2

212

2

2

22复习考试6

教研组

意见

课题1.1网页制作基础知识教学课时2课时

知识目标能了解网页制作软件的特点

教学目标能力目标能掌握网页制作的基木概念

提高学生团结合作精神，提高学生竞争意识

情感目标

教学重点网页的组成

网页的分类，网址与域名的区分

教学难点

1.教学场所：多媒体教室

2.教学设备：安装有Dreamweavercs5软件的计算机

教学资源

3.教学资料：辅助课件.多媒体教学软件

3.教学资料：辅助课件.多媒体教学软件

教法讲解法、任务驱动教学法学法小组讨论法

教学过程课前准备导入新课讲授新课动手实践课堂小结作业布置

时间分配510501555

教学过程

过程安排教学内容教师活动学生活动设计意图

1.教师自我介绍；1.自我介绍1.班长统计座使师生尽快互

2.点名；2.按照花名册点次表相认识，并促

3.课程介绍名2.学生自我介使学生答题了

4.课堂要求3.课程介绍绍解我们的课

课前准备

4、课堂要求4.统计学情3.反应学情程.

5.提出期望与要4.推荐课代

求表。

本次课是本学期第一次上课，简单以提问的方式了学生之间相互提问跟就业和

介绍本课程：解学生对网页设讨论，加深对薪资有关的问

导入新课1.网页设计相关级别及其薪资待遇计的认知网页设计的认题，抓住学生

2.网页设计的就业方向及其公司类识注意力。

型

2、网页设计的就业方向及其公司类

型

一、网页设计介绍简单介绍网页知吸收新知识并讲述基础知

识思考生活中常识，为后面学

1.网站是企业向用户和网民提供信见网页设计知习打下基础

息（包拈产品和服务）的一种方式，识

是企业开展电子商务的基础设施和

信息平台，离开网站去谈电子商务

是不可能的。

2、企业的网站被称为“网络商标”，

也是企业无形奏产的组成部分，而

网站是Internet上宣传和反映企业

形象和文化的重要窗口。

二、网页设计的要点提问：网页设计分组讨论，并加强学生之间

要点并将学生分派出代表来总交流沟通能

1.明确建站目标和需求。组进行讨论结力，加深学生

任务一2.网站主题鲜明。对网页设计要

讲授新课点理解

3.网站版式设计。

4.色彩在网站设计中的作用。

5.网站设计形式与内容统一。

三、网站设计级别讲述网站设计级引导学生了解

别，引导学生对思考自己的定这个行业

1.新手入行这个行业向往，位

2.跳槽阶段并鼓励学生向大

师阶段努力

3.稳定阶段

4.大师阶段

四、网页设计公司类型简单介绍学生将引导学生了解

1.门户游戏类来从事本行业的了解本行业的本行业从事范

范围现状围

2.企业部门类

3.网站建设类

4.互动设计类

五、网页三剑客

介绍网页制作需提前引导学生

Dreamv/eaver:要的软件认识软件基本认识

可视化页面设计、网站管理组成dreamweaver

cs5为后面软

1、Fireworks件学习打下基

页面图象设计工具础

2、Flash

动画制作

六、网页基础知识给学生灌输网页这些知识都是

1.网页与网站的区别设计的基本知识做笔记，识记学网页设计最

教师讲述的知基本的基础知

(1)网页是WWW系统中信息的基本识识，学生基础

单位，简单来说，就是后缀名为做笔记，识记教知识薄弱，必

师讲述的知识须了解这些才

htm的文件c能学习后面的

(2)网站是指存放在网络服务器上内容

这些知识都是

的完整信息的集合体。学网页设计最

2.网页的组成基本的基础知

识，学生基础

(1)文字：最直接、通用、容易的知识薄弱，必

沟通方式须了解这些才

能学习后面的

(2)图片：网页的一大特点——图内容

文并茂

(3)动画：1995年，Sun公司开发

了Java语言，用户可以创建能调用

图片和声音的多媒体应用小程序

(4)超链接：要通过一种方式把各

独立的网页整和在一起，使之构成

一有机整体，而这种链接页面的功

能叫超链接。

(5)特殊组件：图片与动画可算是

最常见的特殊组件。

3.主页Homepage

引导访问者浏览网站。

indexxmain、default

4.网页空间

在1nternet上申请的一个存储空

间，用以存放网页。

5.网址和域名

网址：IP地址

域名：与IP地址相对应，唯一性，

善于识别

取右边：国豕（中国cn）

其次：机构（商业机构com）

再次：子网名称

最左边：服务器类别（web服务器一

-WWW）

6.网页的分类

静态页面与动态页面

7、认识网站

门户网站：sina

个人网站：明星

专业网站：医疗

职能网站：政府

职能网站：政府

根据网页设讦要点，以小组为单巡回指导，给予小组讨论，相加深学生对网

学生帮助互沟通页设计要点学

任务二位确定一个网站主题，小组讨论习

动手实践需要的步骤以及素材

1、按照课堂分组课后进行讨论

课后作业2、每组确定一个网站主题方向。

3、每组设计一个网站调查问卷。

一、网页设上师就业方向

课堂小结二、网站设干流程

三、常见网站

本次课是网页设计第一次上课，主要讲述一些网页基础知识，学生基础知识薄弱，需要

教学反思加强，整体来说计算机班基础知识要好于电子商务班

一、网页设计介绍

二、网页设计的要点

三、网站设计级别

板书

四、网页设计公司类型

五、网页二剑客

六'网页基础印识

课题1.2网站建设概述教学课时2课时

了解做网站的准备工作，掌握站点的建立。

知识目标

1.能了解网站开发的基本流程。

教学目标能力目标2.能掌握网站开发的基本原则。

3.能学会站点的建立与管理。

提高学生团结合作精神，增强小组合作能力

情感目标

教学重点站点的建立

教学难点如何规划好一个网站

1.教学场所：多媒体教室

2.教学设备：安装有Dreamweavercs5软件的计算机

教学资源

3.教学资料：精助课件、多媒体教学软件

3.教学资料：辅助课件、多媒体教学软件

教法讲解法、任务驱动教学法学法小组讨论法

教学过程

过程安排教学内容教师活动学生活动设计意图

1.搜集了解网站开发的基本流程。配合学生搜索资网上搜索教师培养学生自主

2.网站设计、制作过程中的一些原料及解答疑问提出问题，了学习能力

课前准备则、注意事项。解网站设计事

2、网站设计、制作过程中的一些原项

则、注意事项。

网站设计大致流程是哪些？每组听取学生的观点阐述观点，组锻炼学生的语

导入新课派出一个代表阐述本组课前搜集的并给予一定的知员之间相互讨言表达能力和

(5min)资料道论分析能力

任务一一、网站设计流程

讲授新课

(35min)架构内容信息

搜集整理资料

规划网站结构

r

网页制作

整合网站

效果测试

r

网站上传

网站推广

更新维护

二、网站开发原则1.确定网站主题小组讨论，相加深学生对网

的建议互沟通页设计要点学

1、确定主题2.给网站取名习

讨论♦网站是靠什么嬴利的？3.提示决定网站

的性质

任务二2.规划站点结构3、提示决定网站

分组讨论(1)结构设计的性质

(40min)

(2)目录结构设计

(3)形象设计

(4)主页设计

(5)其他页面设计

(6)企业站点设计

(7)为站点设计目标对象

访问率

三、网页版面布局设计

1.版面布局的原则

(1)主次分明、中心突出

(2)大小搭配、相互呼应

(3)图文并茂、相得益彰

(4)动静适度、平衡对称

2.页面布局的类型

(1)“国”字型

(2)框架型

(3)标题正文型

(4)封面型

(5)综合型

四、规划站点

1.建立站点目录

2.站点规划

规划站点结构是利用不同的文

件夹将不同的网页内容分门别类的

保存。

3.创建导航草图

五、搜集素材

1.搜集并制作素材

无论是文字素材还是图片、动画素

材，都应注意其来源是否注明版权

所有。

网站素材要为网站主题服务。

2.整理素材

原始素材、编辑处理好的素材

3.命名规范

六、创建站点

1.不使用服务器技术

2.本地编辑

3.不连接到远程服务器

七、管理站点

(1)编辑现有站点

(2)删除已有站点

根据这次课的内容、注意事项，构思一个明确的网站主题，并将站点结构的规划用文件夹

课后作业

表ZF出来

(5min)

一、网站没计确定主题

课堂小结二、网站没计流程

(5min)

三、站点管理

本次主要讲述站点的建立和管理，课程较简单，学生掌握较好

教学反思

一、网站设计流程

二、网站开发原则

三、网页版面布局设计

板书四、规划站点

五、搜集素材

六、创建站点

七、管理站点

实训课题新建一个网页实训课时2课时

1、熟悉Dreamweavercs4界面

实训目标

2、制作简单网页

1、学会在网页中输入文字、插入图片等

实训重点

2、掌握简单代码的编写

实训难点代码的编写

实训方法上机实训

实训准备教案、素材、案例、教材、计算机机房

1.对照实习报告的要求，完成上机任务；

2.任务完成后及时要求教师考评；

实训要求

完善实习报告，填写实训总结；

遵守实训纪律.不游戏.不睡觉,不高声谈论C

遵守实训纪律，不游戏，不睡觉，不高声谈论。

实训过程

为容操作要求及步骤

1、双击打开软件一一新建HTML网页——网页名字为nesO1——输入以下文字然后保存

释永信被举报后自嘲：说不定明年我不是方丈啦

少林寺的发展不仅面临着舆论的众多质疑,也掺杂着现实的利益之争.很

多人怀疑，少林寺承的利益纠葛.力是这场举报风波的内在动力.

天还未充.

9月3日,大雄宝殿之上,香火氟氯.佛音袅袅.一场为纪念世界反法西斯

任务一

战争胜利70周年的祈福法会在少林寺中举行.法会的主持人正是身陷举报风暴

新建网页1

中的释永信.

这位方丈今年50岁.发展的身材与大众对离僧的固有印象相去甚远,也是

他r受诟病的“黑点”之一•但仔细看.他曰光屋利.一口涧南腔,却又自信

满满。外界连日来对他质疑不断.但他坚持“出家人是非以不辨为绢脱“。但

这不代表他内心毫无波澜,在和台湾画家蔡志忠私下聊天时.释永信甚至半开

林地抱怨：“这（活动）明年不知道还能不能搞？说不定到时我都不是方丈啦！”

2、文字要求：标题宋体二号蓝色正文：五号宋体加粗

2.文字要求：标题宋体二号蓝色正文：五号宋体加粗

2、文字要求：标题宋体二号蓝色正文：五号宋体加粗

任务二制作如下网页素材见文件夹网页命名文字为index保存在文件夹中上交给老师

新建网页2

颦光临我的足球网

L-i.

慢了JWM足J*的的•畤？演急击下面的，品长吧।W

tM3Mx

足M新闻

an*f

IWBlo.

与1W装4

建脩”(1)(阳毋函9印

■■减豫

操作步骤：新建HTML网页一输入文字一将标题设置为36号，蓝色，宋体——插入两

根红色的水平线一插入时间一插入商标一插入背景图片一保存

操作步骤：新建HTML网页——输入文字一将标题设置为36号，蓝色，宋体——插入两

根红色的水平线一插入时间一插入商标一插入背景图片一保存

操作步骤：新建HTML网页——输入文字——将标题设置为36号，蓝色，宋体——插入两

根红色的水平线一插入时间一插入商标一插入背景图片一保存

完善报告填写实训总结，井上交实习报告。

自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律

实训总结本次课是学生第一次上机，制作一个较简单的网页，学生存在对DW界面不熟，操作不熟

练等缺点，需加强操作

课题2.1编辑和添加文本教学课时2课时

1、掌握输入和编辑文本

2、学会插入文本，掌握设置文本格式的方法

知识目标

2.学会插入文本，掌握设置文本格式的方法

2、学会插入文本，掌握设置文本格式的方法

教学目标

掌握网页中三种常见列表的创建，及其各自的特点

能力目标

情感目标提高学生自主学习和团队竞争意识

教学重点插入和编辑文本

教学难点创建列表

1.教学场所多媒体教室

2.教学设备安装有Dreamweavercs5软件的计算机

教学资源

3.教学资料辅助课件.多媒体教学软件

3.教学资料辅助课件.多媒体教学软件

教法讲解法、任务驱动教学法学法小组讨论法

教学过程

过程安排教学内容教师活动学生活动设计意图

提问：在DW中输入文本和在Word中将学生分组,并讨论并思考以讨论的形式

输入文本有何区别？提出问题，引导提高学生之间

导入新课

学生小组之间讨的交流沟通

(5min)

论并总结

一、插入文本演示并强调重点认真听讲并记文本插入是基

1、插入普通文本下重点础知识，为下

2、插入不换行空格面任务二打下

3、插入水干线基础

任务一

4、插入日期和特殊字符

插入文本

二、编辑文本

(20min)

1.基本样式设置

2.设置段落格式

3.创建列表

3、创建列表

完成以下网页实例：1、引导学生讨论小组讨论本实例即是对

该网页由哪几任务一的巩

部分组成固，也为下一

第B第；器U耀白工:‘静工

2、引导学生小组次课打下基础

型书^【ay'

组内分工，完

江为啸*冰谷挺二交铃疝:V2购飞却出

成小模块

im1

3、引导学生小组

组内分工，完

任务二帆S额跚用8成小模块

/侬，稣月噬？她敢呼懒；班！

(55min)

粗阳型曳W._____

融正聘簟尔迅凝目

K.^«象4，C*7«Xpcv)”?T.王一2»ftf*gp,r；上i^”人

懈二衽斓阚2

S二耳干气1ff-**s**^-^xa»^S15^*rcj|

受幅崛戈姆阔街二

*5*即工小£,??也迤气

g肄疾既

作业布置1、找一篇文章输入至页面中，然后利用所学知识，对其进行格式编排

(5min)2、

一、插入文本

课堂小结

(5min)二、编辑文本

一、插入文本

5、插入普通文本

6、插入不换行空格

7、插入水平线

8、插入日期和特殊字符

板书二、编辑文本

1.基本样式设置

2.设置段落格式

3.创建列表

三、实例操作

本次课是一个基础知识内容，文本是一个网页必不可少的内容.对网页设计至关重要.

教学反思学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。

实训课题网站素材处理实训课时2课时

1、掌握创建不地站点和远程站点

实训目标

2、学会修改站点和多站点的管理

实训重点站点的管理

实训难点站点的管理

实训方法上机实训

实训准备教案、素材、案例、教材、计算机机房

1、对照实习报告的要求，完成上机任务；

2、任务完成后及时要求教师考评；

实训要求完善实习报告，填写实训总结；

4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

4.遵守实训纪律，不游戏，不睡觉，不高声谈论。

4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

实训过程

均容操作要求及步骤

1.熟悉DW界面

2、在D盘根目录创建一个站点名称为《我的足球网》，本地站点文件夹为jcww,如下

图所示

3dIFEFFHEfRN<OifT.Or..rrvwo.vwr

V'<।•M।-t•••；.?J•Jr'.J»t-

任务一W.想以师MC|»IBl1*1A.wo«»1m*KMMtrr^lVuiV5X(^.

►45%11■

创建站点BCcr」，“RMA0b**4b"*

*M>LKCwr«*.,M0

1f1flUg一11

利用教师所给素材，制作简单网页《我的偶像》，素材见文件夹

任务二

设置默认图像

文件夹

完善报告填写实训总结，并上交实习报告。

自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律

实训总结本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等，学生操作较好，大部

分能完成任务。

实训课题制作简单网页实训课时2课时

1、掌握新建网页、编辑文字、处理图像

实训目标2、新建站点

3、插入水平线、空格、自动更新时间

实训重点制作简单网页流程

实训难点综合运用HTML工具

实训方法上机实训

实训准备教案、素材、案例、教材、计算机机房

3、对照实习报告的要求，完成上机任务；

4、任务完成后及时要求教师考评；

实训要求完善实习报告，填写实训总结；

4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

4.遵守实训纪律，不游戏，不睡觉，不高声谈论。

4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

实训过程

为容操作要求及步课

1、熟悉DW菜单栏常用界面

任务一

完成以下简单网站，素材见素材库

足球偶像网页

世界杯，球迷狂炊节/

_____________________你和我的一网玲

主页明星照片足球新闻

的蜜

时间是很奇妙的东西，当我们板着指头数着日子，她却以年为单位匆匆从我们的身边溜走，

一晃之间，本世纪第一个十年就要过去。十二年前的法兰西之夏，我第一次接触到了世果杯，十

请后的南非，足球再次来到了我的生活。

■我第一次看球星在1996年的那届欧洲杯夕黄未剪对

L」足球有任何慨念的我.械某日的一条体育新阅所吸

啦廊±』1SILL^E^±^_最会］_______

完善报告填写实训总结，并上交实习报告。

自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律

实训总结本次上机内容较多，主要考察学生综合性的练习，如图片的插入，文字的编辑及水平线

的插入等，需要学生对前面的知识非常熟悉，13高12班整体班级学习氛匡较好，所有学

生都能按时上交作业，值得表扬

课题2.2添加和编辑图像教学课时2课时

1、掌握图像裁剪,重新取样、亮度、锐化的设置

知识目标2.掌握图像属性设置

2、掌握图像属性设置

教学目标

能力目标掌握运用软件对图像处理的能力

提高学生团结合作精神，提高学生竞争意识

情感目标

教学重点图像的编辑

教学难点图像的编辑

1.教学场所：多媒体教室

2.教学设备：安装有Dreamweavercs5软件的计算机

教学资源

3.教学资料：辅助课件.多媒体教学软件

3.教学资料：神助课件.多媒体教学软件

教法讲解法、任务驱动教学法学法小组讨论法

教学过程

过程安排教学内容教师活动学生活动设计意图

前面介绍网页的时候有说过，在保演示cluo.jpeg分组讨论用什提出问题引发

证画质的情况下，图片的数据量越这张图片，分析么方法来更改学生思考，引

小越好。问题：如果一张图片数据数据量为93k、画数据量和规格出这次课的主

量很大，我们该如何编辑？质为1024*768规题

导入新课

格的图片如何更

(5min)

改数据量和规

格？

给出cluo.jpeg和gg.jpeg两张图片对图片宽、高、裁观看教师演示，引导学生学习

进行对比，提出任务：如何从切、重新采样、锐并思考理论的时候思

任务一cluo.Jpeg变化到gg.Jpeg?化等设置进行演cluo.jpeg变成考如何理论运

编辑图片具体操作步骤：打开DW软件一插示cluo.jpeg的方用到实践

(30min)入图像cluo.jpeg,对图片属性设法

置如下目标值：

■.11驯加-中区二，工.哈呻」则

•-轴谓c卜Jo«/

二则pMj

回口2烟到FK却

编辑完成后与原图像进行对比，会

发现数据量、规格都发生变化，但

浏览网页更友好

编辑完成后与原图像进行对比，会

发现数据量、规格都发生变化，但

浏览网页更友好

概念：在网页浏览中，有时当鼠标1、鼓励学生小组小组讨论如何

移到某个图像上或者单击时，图像讨论如何完成完成该效果并

会变成另外一副图像。翻转图像效进行尝试

浏览时效果：果；

给学生展示翻

转图像做出来

的效果，然后

讲解如何

才能完成这个

任务二

效果

制作翻转图像

(50min)

鼠i标放上去时效果：

一■

量

如何编辑图像

课堂小结

—、制作翻转图像效果

(5min)

一、编辑图像

1、重新采杵

板书设计

2、裁剪、锐化

二、翻转图像制作效果

本次教学学生较感兴趣，特别是鼠标经过的图像，学生完成得较好，值得鼓励

教学反思

课题2.3创建超级链接教学课时2课时

1、掌握创建超链接的方法

教学目标知识目标

2、掌握相对链接和绝对链接的区别

3、创建锚点链接

能力目标提高学生学习创作能力

zzzz—提高学生团结合作精神，提高学生竞争意识

1、正确认识路径

教学重点

2、理解相对链接和绝对链接的区别

教学难点添加超链接、相对路径、绝对路径

1.教学场所：多媒体教室

2.教学设备：安装有Dreamweavercs5软件的计算机

教学资源

3.教学资料：辅助课件.多媒体教学软件

3.教学资料：辅助课件.多媒体教学软件

教法讲解法、任务驱动教学法学法小组讨论法

教学过程

过程安排教学内容教师活动学生活动设计意图

每次浏览网页的时候点击某个文字进入新浪网给学观看效果并讨以提问且学生

或者图片，能自动跳转到另一个页生演示超级链接论如何才能实较熟悉的浏览

导入新课

面，提问：这样的链接形式叫什的效果并进行提现该效果网页的方式吸

(5min)

么？如何实现？问引学生的注意

一、新建站点jcww,并在站点内新给学生演示如何观看教师演示，让学生熟悉

建默认图像文件央images,将网页插入链接；演示不并思考-new、DW添加超级

Index.HTML里的