《网页制作》教案

温柔似野鬼°
621次浏览
2020年08月02日 07:06
最佳经验
本文由作者推荐

我向往这样一所中学-广州航海高等专科


湖 南 省 商 业 技 术 学 院


学 期 授 课 进 度 计 划
( 二 年级 第 一 学期)

课程名称 网页制作与设计

适用班级 16高21、22

制定教师 易会芝

审 批 签 字

教研室主任

教务科长

教务院长

年 月 日

年 月 日

年 月 日




2017-2018 学年第 一 学期制定

课 时 分 配
授 课

周 数

23

周课时


其 中

讲 课

实 验

复习考试

机 动

授 课

总课时


期 末 完 成 情 况


计 划

课 时

完 成

课 时

超 出 或 缺 少 课 时

超 出

缺 少

弥 补


教 学 截 至

章 节 内 容




备注:用蓝黑或碳素墨水钢笔填写
教 学 计 划


情< br>分

本门课程《网页设计与制作》的教学班级为14级计算机班,计算机班对网络知识< br>有一定的了解,基础知识较好,同时根据实际情况,特拟定本计划。

通过本学期《网 页设计与制作》的学习,主要要求同学们掌握网页制作的一些







基本功能和操作,为以后的一些学习和工作打下较好的基础。通过学习要求同学达
到以下要求:

1、了解DreamweaverCS6的详细功能及操作方法。
2、熟练掌握网页制作技巧。
3、掌握网页规范以及网页优化和网站推广的知识。
4、明确网站建设的流程和站点建设成后需要做的优化推广工作。















3

4

1、超级链接
2、表格表单应用
3、框架使用
4、CSS样式
周次






1、超级链接
2、用表格和框架布局页面
3、创建数据库
讲授法、演示法、项目教学法、合作学 习、对话、任务驱动法、头脑风暴、小组讨
论法等教学方法。






学 期 授 课 进 度 计 划 表

课时

2

2

2

2

2

备 注

授 课 内 容

1.1网站基础知识

1.2网站建设概述

实训 新建一个网页

2.1添加和编辑文本

实训 网站素材处理

1、2周新生军训



上机


上机



5

实训 制作简单网页

2

上机










6

6

2

2

2

2

2

2







机动补周一课



6






7

8

国庆放假

2.2添加和编辑图像

2.3创建超级链接

实训 图像处理和创建超级链接



上机

上机



9

实训 跳转菜单

2.4使用表格布局页面

实训 表格布局实例分析



10


上机

2.5使用框架布局页面

运动会

运动会


充周三到周五





11

实训 框架布局实例分析

3.3添加动画

添加音频和视频

12

实训 DIV与表格的转换

4.3晃动的图片

实训 交换图像

13

实训 拼图游戏

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

实训 效果行为应用

14

实训 图片展播实例

5.1认识和编辑CSS

实训 美化页面

15

实训 应用CSS到网页中

5.2类型、背景和区块样式

实训 方框、边框和导航栏

16

实训 超链接样式及设置技巧

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2

上机





上机




上机

上机




上机

上机




上机

上机




上机

上机


学 期 授 课 进 度 计 划 表
6.1DIV布局页面

6.2认识Spry

17

实训 调整样式

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

6.4申请域名

18

实训 网站发布

7.1个人主页制作

7.2策划构思及设计流程

19

实训 页面布局

7.3制作页面头部

7.4制作中间表格内容

20

元旦放假

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2




上机







上机





上机





机动

充周一课



21








22



复习考试

2

2

6





教研组
意见


课题

1.1网页制作基础知识

教学课时

2课时

知识目标

能了解网页制作软件的特点

教学目标

能力目标

能掌握网页制作的基本概念

情感目标

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

教学重点

网页的组成

教学难点

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

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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

课前准备

导入新讲授新动手实
课堂小结

作业布置








时间分配

5

10

50

15

5

5

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

1、教师自我介绍;

2、点名;

3、课程介绍

1.自我介绍

1.班长统计使师生尽快
座次表

互相认识,并
促使学生答
2.按照花名册
点名

2.学生自我
题了解我们
介绍

3.课程介绍

的课程。

3.反应学情

4.统计学情

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

要求

课前准备

4、课堂要求
本次课是本学期第一次上课,以提问的方式学生之间相提问跟就业
简单介绍本课程:

了解学生对网互讨论,加深和薪资有关
页设计的认知

1、网页设计相关级别及其薪资
导入新课

待遇

力。

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

的认识

住学生注意
对网页设计的问题,抓


一、网页设计介绍

简单介绍网页吸收新知识讲述基础知
知识

并思考生活识,为后面
中 常见网页学习打下基
1、网站是企业向用户和网民提
供信息(包括产品和服务)的
一种 方式,是企业开展电子商
务的基础设施和信息平台,离
开网站去谈电子商务是不可能
讲 述网站设计
的。

级别,引导学生
学生对网页
2、企业的网站被称为 “网络商对这个行业向思考自己的
设计要点理
标”,也是企业无形资产的组
成部分,而 网站是Internet上
任务一

宣传和反映企业形象和文化的
讲授新课

重要窗口。

简单介绍学生
认识软件基
二、网页设计的要点

1、明确建站目标和需求。

做笔记,识记
事范围

介绍网页制作
2、网站主题鲜明。

需要的软件

知识

3、网站版式设计。

给学生灌输网
dreamweave
4、色彩在网站设计中的作用。

页设计的基本
r cs5 为后
知识

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

三、网站设计级别

面软件学习
打下基础

生认识
教师讲述的
提前引导学
将来从事本行
本组成

业的范围

解本行业从
引导学生了


的现状

解这个行业

往,并鼓励学生定位



向大师阶段努
了解本行业
引导学生了
总结

能力,加深
提问:网页设计
设计知识

要点并将学生
分组进行讨论

分组讨论,并加强学生之
派出代表来间交流沟通


1、新手入行

2、跳槽阶段

这些知识都
是学网页设
计最基本的
3、稳定阶段

4、大师阶段

基础知识,
学生基础知
识薄弱,必
四、网页设计公司类型

1、门户游戏类

2、企业部门类

3、网站建设类

4、互动设计类

五、网页三剑客

须了解这些
才能学习后
面的内容

1、
Dreamweaver:

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

2、
Fireworks

页面图象设计工具

3、
Flash

动画制作


六、网页基础知识

1、网页与网站的区别

(1) 网页是WWW系统中信息的
基本单位,简单来说,就是后
缀名为htm的文件。

(2)网站是指存放在网络服务
器上的完整信息的集合体。

2、网页的组成

(1)文字:最直接、通用、容
易的沟通方式

(2)图片:网页的一大特点
——图文并茂

(3)动画:1995年,Su n公司
开发了Java语言,用户可以创
建能调用图片和声音的多媒体
应用小程序(4 )超链接:要通
过一种方式把各独立的网页整
和在一起,使之构成一有机整
体,而这种 链接页面的功能叫
超链接。


(5)特殊组件:图片与动画可
算是最常见的特殊组件。

3、主页Homepage

引导访问者浏览网站。

index、main、default

4、网页空间

在Internet上申请的一个存储
空间,用以存放网页。

5、网址和域名

网址:IP地址

域名:与IP地址相对应,唯一
性,善于识别

最右边:国家(中国——cn)

其次:机构(商业机构——com)

再次:子网名称

最左边:服务器类别(web服务
器——www)


6、网页的分类

静态页面与动态页面

7、认识网站

门户网站:sina

个人网站:明星

专业网站:医疗

职能网站:政府

任务二

动手实践

根据网页设计要点,以小组为巡回指导,给予小组讨论,相加深学生对单位确定一个网站主题,小组学生帮助

讨论需要的步骤以及素材

互沟通

网页设计要
点学习

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

课后作业

2、每组确定一个网站主题方向。

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

一、
网页设计师就业方向

课堂小结

二、
网站设计流程

三、
常见网站


本次课是 网页设计第一次上课,主要讲述一些网页基础知识,学生基础知识薄
教学反思

弱,需要加强,整体来说计算机班基础知识要好于电子商务班

一、网页设计介绍

二、网页设计的要点

三、网站设计级别

板书

四、网页设计公司类型

五、网页三剑客

六、网页基础知识

课题

1.2网站建设概述

教学课时

2课时

知识目标

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

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

教学目标

能力目标

2.
能掌握网站开发的基本原则。

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

情感目标

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

教学重点

站点的建立

教学难点

如何规划好一个网站


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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

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

课前准备

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

些原则、注意事项。

资料及解答疑师提出问题,主学习能力



了解网站设
网站设计大致流程是哪些?每听取学生的观阐述观点,组锻炼 学生的
导入新课

(5min)

组派出一个代表阐述本组课前点并给予一定员之间相互语言表达能
搜集的资料

的知道

讨论

力和分析能


任务一

讲授新课

(35min)

一、
网站设计流程



网页制作


架构内容信息


网站上传


二、
网站开发原则

1、
确定主题

1、确定网站主小组讨论,相加深学生对
题的建议

2、给网站取名

互沟通

网页设计要
点学习

讨论:网站是靠什么赢利的?

3、提示决定网
2、规划站点结构

(1)结构设计

(2)目录结构设计

(3)形象设计

任务二

(4)主页设计

分组讨论

(5)其他页面设计

(40min)

(6)企业站点设计

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

访问率

三、网页版面布局设计

1、版面布局的原则

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

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

站的性质


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

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

2、页面布局的类型

(1)“国”字型

(2)框架型

(3)标题正文型

(4)封面型

(5)综合型

四、规划站点

1、建立站点目录

2、站点规划

规划站点结构是利用不同
的文件夹将不同的网页内容分
门别类的保存。

3、创建导航草图

五、搜集素材

1、搜集并制作素材


无论是文字素材还是图片、动
画素材,都应注意其来源是否
注明版权所 有。

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

2、整理素材

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

3、命名规范

六、创建站点

1、不使用服务器技术

2、本地编辑

3、不连接到远程服务器

七、管理站点

(1)编辑现有站点

(2)删除已有站点

课后作业

(5min)

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


一、
网站设计确定主题

课堂小结

二、
网站设计流程

(5min)

三、
站点管理

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

教学反思

一、网站设计流程

二、网站开发原则

三、网页版面布局设计

板书

四、规划站点

五、搜集素材

六、创建站点

七、管理站点

实训课题

新建一个网页

实训课时

2课时

1、熟悉Dreamweaver cs4界面

实训目标

2、制作简单网页

实训重点

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


2、
掌握简单代码的编写

实训难点

代码的编写

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

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

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

实训要求

3.
完善实习报告,填写实训总结;

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

实训过程

内容

操作要求及步骤

1、双击打开软件——新建HTML网页— —网页名字为nes01——输入以下文字
任务一

然后保存

新建网页1

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

任务二

新建网页2

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



操作步骤 :新建HTML网页——输入文字——将标题设置为36号,蓝色,宋体
——插入两根红色的水平线—— 插入时间——插入商标——插入背景图片—
—保存

完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结
< br>本次课是学生第一次上机,制作一个较简单的网页,学生存在对DW界面不熟,
操作不熟练等缺点 ,需加强操作

课题

2.1编辑和添加文本

教学课时

2课时

1、
掌握输入和编辑文本

知识目标

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

教学目标

能力目标

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

情感目标

提高学生自主学习和团队竞争意识


教学重点

插入和编辑文本

教学难点

创建列表

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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

提问:在DW中输入文本和在将学生分组,并讨论并思考

导入新课

(5min)

Word中输入文本有何区别?

提出问题,引导
学生小组之间
讨论并总结

以讨论的形
式提高学生
之间的交流
沟通

一、插入文本

演示并强调重认真听讲并文本插入是


记下重点

基础知识,
为下面任务
任务一

插入文本

(20min)

1、
插入普通文本

2、
插入不换行空格

3、
插入水平线

4、
插入日期和特殊字符

二打下基础


二、编辑文本

1、基本样式设置

2、设置段落格式

3、创建列表

完成以下网页实例:

1、
引导学生讨
小组讨论

论该网页由
哪几部分组
本实例即是
对任务一的
巩固,也为
下一次课打
下基础

任务二

(55min)



2、
引导学生小
组组内分
工,完成小
模块

作业布置

(5min)

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

课堂小结

(5min)

一、
插入文本

二、
编辑文本

一、插入文本

板书

5、
插入普通文本


6、
插入不换行空格

7、
插入水平线

8、
插入日期和特殊字符

二、编辑文本

1、基本样式设置

2、设置段落格式

3、创建列表

三、实例操作

本次课是 一个基础知识内容,文本是一个网页必不可少的内容,对网页设计
教学反思

至关重要,学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。

实训课题

网站素材处理

实训课时

2课时

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

实训目标

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

实训重点

站点的管理

实训难点

站点的管理

实训方法

上机实训


实训准备

教案、素材、案例、教材、计算机机房

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

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

实训要求

3、
完善实习报告,填写实训总结;

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

实训过程

内容

操作要求及步骤

1、熟悉DW界面

任务一

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

如下图所示

任务二

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

设置默认图
像文件夹

完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结
< br>本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等,学生操作较
好,大部分能完成任 务。


实训课题

制作简单网页

实训课时

2课时

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

实训目标

2、
新建站点

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

实训重点

制作简单网页流程

实训难点

综合运用HTML工具

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

4、
对照实习报告的要求,完成上机任务;

5、
任务完成后及时要求教师考评;

实训要求

6、
完善实习报告,填写实训总结;

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

实训过程

内容

操作要求及步骤

任务一

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

足球偶像网
2、
完成以下简单网站,素材见素材库




完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结
< br>本次上机内容较多,主要考察学生综合性的练习,如图片的插入,文字的编辑
及水平线的插入等, 需要学生对前面的知识非常熟悉,13高12班整体班级学
习氛围较好,所有学生都能按时上交作业,值 得表扬

课题

2.2添加和编辑图像

教学课时

2课时

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

知识目标

2、掌握图像属性设置

教学目标

能力目标

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

情感目标

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

教学重点

图像的编辑

教学难点

图像的编辑

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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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


教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

前面介绍网页的时候有说过,演示 分组讨论用提出问题引
在保证画质的情况下,图片的这张图片,分析什么方法来发学生思
数据量 越小越好。问题:如果数据量为93k、更改数据量考,引出这
导入新课

(5min)

一张图片数据量很大,我们该画
如何编辑?

质为和规格

次课的主题

1024*768规格
的图片如何更
改数据量和规
格?

给 出和两张对图片宽、高、观看教师演引导学生学
图片进行对比,提出任务:如裁切、重新采示,并思考习 理论的时
何从变化到样、锐化等设置变候思考如何
任务一

编辑图片

(30min)



进行演示

成理论运用到
的方法

具体操作步骤:打开DW软件—
—插入图像,对图片
属性设置如下目标值:

实践

编辑完成后与原图像进行对
比,会发现数据量、规格都发


生变化,但浏览网页更友好

概念:在网页浏览中,有时当
1、
鼓励学生小
鼠标移到某个图像上或者单击
时,图像会变成另外一副图像。

浏览时效果:

鼠标放上去时效果:

组讨论如何
完成翻转图
像效果;

小组讨论如
何完成该效
果并进行尝



任务二

2、
给学生展示
翻转图像做
出来的效
制作翻转图


(50min)

果,然后讲
解如何

才能完成这
个效果

课堂小结

(5min)

一、
如何编辑图像

二、
制作翻转图像效果

一、编辑图像

1、
重新采样

板书设计

2、
裁剪、锐化

二、翻转图像制作效果


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

教学反思

课题

2.3创建超级链接

教学课时

2课时

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

知识目标

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

教学目标

3、
创建锚点链接

能力目标

提高学生学习创作能力

情感目标

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

1、
正确认识路径

教学重点

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

教学难点

添加超链接、相对路径、绝对路径

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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程


过程安排

教学内容

教师活动

学生活动

设计意图

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

(5min)

文字或者图片,能自动跳转到学生演示超级讨论如何才生较熟悉的另一个页面,提问:这样的链链接的效果并能实现该效浏览网页的
接形式叫什么?如何实现?

进行提问



方式吸引学
生的注意

一、新建站点jcww,并在站点给学生演示如观看教师演让学生熟悉
内新建默认图像文件夹何插入链 接;演示,并思考DW添加超级
images,将网页里示不同目标新-new
任务一

的“我与足球”链接到建窗口的区别

,目标为- blank;“足
创建超级链


(20min)

球新闻”链接到“逢入京
使.HTML”,目标为- new;“足球
明星”链接到“我与足球
网.HTML”,目标为-self。

-blank
、链接的界面


-self几个目
标值窗口的
区别

二、对比每个目标不同,网页
新建窗口不同并进行总结

区别:

任务二

演示教材P60实思考并正确正确理解相


理解 相对链对链接和绝
接和绝对链对链接,为
相对链接是指链接的地址是本
相对链接和站点之内的对象;绝对链接是演示如何插入
绝对链接

指链接的地址是远程对象,用锚点链接

接概念

下面的学习


(20min)

任务三

锚点链接

域名或IP作为地址

观看教师演打下基础
< br>示并思考锚
一、概念:在本页进行链接的
点链接的应
叫做锚点,一般在长篇的文 章


或技术文档中是使用,链接到
锚点链接应
用比较广
泛 ,学生需
要掌握并应


(35min)

某个特殊的段落。

二、打开第4章
网页,演示
锚点链接效果

一、
页面与页面之间的超链接

课堂小结

二、
相对链接和绝对链接

(5min)

三、
锚点链接(本页之间链接)

作业布置

(5min)

一、
网上查找哪些页面常用页面与页面链接,哪些是用锚点链接并总结

二、
利用教材第4章的素材,自己动手创建锚点链接

三、
创建超级链接的方法与步骤

板书

四、
相对链接和绝对链接

五、
创建锚点链接


本次课主要介绍超链接的常用方法,超链接在学生上网中随处可见,较易理解,
教学反思

学生之间的讨论也非常激烈,较好。

实训课题

图像处理和创建超链接

实训课时

2课时

3、
学会利用DW处理图像

实训目标

4、
掌握创建超级链接的方法

5、
理解相对链接和绝对链接概念

1、
图片处理

实训重点

2、
超级链接

实训难点

超级链接的使用

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

7、
对照实习报告的要求,完成上机任务;

8、
任务完成后及时要求教师考评;

实训要求

9、
完善实习报告,填写实训总结;

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

实训过程



任务一

处理图像

操作要求及步骤

1、
将图片修改为尺寸为240*160,数据量设置为 8K左右(6-11k都可
以)并进行裁剪和锐化等设置,熟悉图片处理几个设置,设置完成后以网页的形式保存,保存在文件夹中,保存名称为“”

2、
将教师发送的网页进行 编辑,将“我与足球”四个字链接到“我
与足球网.html”,目标为- self;将“足球新闻”四个字链接到“逢入京
使.html”, 目标为- blank;将“足球明星”四个字链接到“”,
目标为-new。

3、
修改页面属性:在页面属性对话框中,设置链接选项中的大小为16像素,
任务二

超级链接

链接颜色为“#6666cc”,变换图像颜色为“#ff6600”,已 访问链接为
“#663366”,
活动链接为
“#99cc00”,
下划线样 式
为“仅在变换
图像时显示
下划线”。设
置的对话框如下图所示:

完善报告

填写实训总结,并上交实习报告。

自主练习

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


实训总结

本次实习内容较多,大部分学生能在规定时间内完成任务,较好。

实训课题

跳转菜单

实训课时

2课时

6、
掌握图像热点链接的使用

实训目标

7、
掌握脚本链接

8、
掌握链接检查器的使用

实训重点

路径的正确使用

实训难点

链接的运用及链接检查器的使用

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

10、
对照实习报告的要求,完成上机任务;

11、
任务完成后及时要求教师考评;

实训要求

12、
完善实习报告,填写实训总结;

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

实训过程


任务一

操作要求及步骤

在地图中创建热点链接


创建图像热
点链接

打开网页,在如下图所示的位置插入图片,图片为“鼠标经过的图
任务二

片”,链接到本页的“冠军杯新闻”处(提示:利用锚点链接)

制作跳转菜


打开“”网页,在下载资源文本中将教师提供的“”放入站点,做成的效果是点击“下载资源”就能下载“”,同理在“联系我
们”中设置邮件下载

完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结

本次实习内容较多,大部分学生能在规定时间内完成任务,较好。

课题

2.4使用表格布局页面

教学课时

2课时

1、了解表格在网页设计中的作用。

2、掌握网页中表格的制作方法、表格属性的设置方法以及单元
知识目标

格属性的设置方法,能够在单元格中正确插入文字和图片。

教学目标

3、能够根据网页设计内容,正确布局表格的结构,掌握表格嵌
套的设计方法。

1、利用对比学习,培养学生知识迁移的能力。

能力目标

2、通 过用表格结构设计网页,使学生进一步理解表格的作用、


功能及网页设计方法的多样性, 培养学生的发散思维能力

通过自主探究,使学生掌握软件的使用规则,培养学生自主学习
情感目标

的能力。

1、了解表格在网页设计中的重要作用。

教学重点

2、掌握插入、编辑表格的方法及表格的属性设置。

3、掌握单元格属性的设置。

教学难点

表格的嵌套在网页设计中的应用

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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

(1)展示两个页面并进行比展示并引导学学生仔细观通过对比学
导入新课
较:一个使用表格布局,表格生思考
边框隐藏,其页面工整,文本、
(5min)

图片摆放对称,具有一定的规
律;另一个页面凌乱,图文混
论、交流,回的能力。 < br>顾Word中学
察并比较两习,培养学
个网页,讨生知识迁移


杂 ,摆放杂乱。 习过的表格,
领悟表格在D
问题1:你喜欢那个页面的布
reamwe aver
局?
中的作用。
问题2:用什么方法可以达到
第二个页面的效果?
一、仿照网页3的样式,制作演示如何插入分析网页3,引导学生学
一个网页框架。 表格并对表格找出其中使习理论的时
的设置

在学生自主探究的基础上,教
照插入图像理论运用到
任务一

网页框架

(25min)

师总结插入表格的一般方法。
的方法,探索实践

并插入一个2行1列,表格 宽度
插入表格的
800像素,边框粗细0像素的表
方法。
格。 和进行创意
插入表格,通设计,培养
过实际操作学生的模仿
强化对表格以及创新能
属性的 认识。


动手分析
用的表格,仿候思考如何
任务二
< br>二、在任务一的基础上,探索用实例来演示根据需要,通过实例,
表格基本属性:合并与拆分单如 何合并和拆插入图片,在培养学生分
表格合并和

(20min)


元格;单元格的宽度与高度; 分单元格

第二行拆分析问题、解
为两列,左边决问题的能
放文字,右边力。


放图
任务三

表格嵌套

(30min)

表格的嵌套。在大表中插入一
个小的表格,这是创建复杂表
格样式的有效方法。要提示学
生不要嵌套过多。
展示几种常见
的图文混排样
式,让学生选择
自己喜欢的一
种完成网页。
完善网页,制让学生自主
作完成的同发挥,充分
学把网页通展示个性风
过FTP上传。 采

一、
网页框架和表格基本操作

课堂小结

二、
表格的合并和拆分

(5min)

三、
表格嵌套

课堂作业

(5min)

完成教材第五章的表格

通过表格的嵌套及分析,对页面进行布局。需要加强学生对表格合并和拆分的
教学反思

运用

实训课题

表格布局实例分析

实训课时

2课时

1、
能运用表格为页面布局

实训目标

2、
能掌握表格的嵌套操作

3、


4、
能做出“超越公司简介”页面。

1、掌握插入、编辑表格的方法及表格的属性设置。

实训重点

2、掌握单元格属性的设置。

实训难点

表格的嵌套在网页设计中的应用

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

13、
对照实习报告的要求,完成上机任务;

14、
任务完成后及时要求教师考评;

实训要求

15、
完善实习报告,填写实训总结;

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

实训过程


操作要求及步骤

制作如下图所示的界面:

任务一

操作要求:

创建图像热
1、
top区

点链接

(1)一行三列:


788px=128+540+120 Logo+Banner+主页常用选项

(2)第三列嵌套三行两列表格:
120px=30+90
小图标+文本选项

2、menu区

(1)一行两列:788px=148+640 显示当前日期+导航条

(2)第二列嵌套1行17列表格:
奇数列单元格输入栏目文本,宽65px;偶数列单元格输入“|”,宽为6px。

3、main区

(1)2行3列:788px宽,500px高 788=150+10+628 500=5+495

(2)A、maintop区 合并单元格

(3)B、mainleft区
嵌套13行1列表格:145px宽,2px间距 第1行与第7行:高25px
第2-6行:高36px,输入文本 第8-13行:高40px,插入图片

(3)C、mainmiddle区 空单元格

(4)D、mainright区


嵌套3行1列表格:495px高 495=30+375+90

第一行:输入文本
第二行:嵌套1行2列表格(628px=304+324)

第一列:输入文本
第二列:嵌套2行1列表格
300px宽,右对齐
375px高=220+160
第1行:插入图片
第2行:嵌套3行5列表格
高160=30+65+65
宽300=80+30+80+30+80
第三行:鼠标经过图像

4、bottom区

3行1列:
788px宽,45px高


第一行:水平线
第二行:版权信息
第三行:联系方式

完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结
< br>表格布局是最常见的一种布局方式,本次实训学生较积极,特别是13高12班
同学学习氛围特别 好。

课题

2.5使用框架布局页面

教学课时

2课时

1、能掌握框架的基本操作。

知识目标

2、能理解框架技术的实质。

教学目标

能力目标

能用框架布局页面

通过自主探究,使学生掌握软件的使用规则,培养学生自主学习
情感目标

的能力。

框架的基本操作
教学重点


教学难点

用框架为页面布局


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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

在学习过表格布局后,我们可展示框架页面预习 并思考通过实例来
以做一些常规的页面布局了 ,给学生,引发学框架页面布展示,引发
但有些特殊效果我们却无法实生思考
导入新课
(5min)

现。如图所示的网页:今天我
们来学习另一种页面布局技术
——框架。
局 学生思考特
殊效果如何
实现,培养
学生积极思
考问题的能

一、基本概念:框架是一种网加强学生对框认真听讲并
任务一

基本知识

(35min)

页布局技术。
学生只有
架布局的理解对概念进行在牢固的掌
并进行简单操消化理解

握了基本概
念后才能为
任务二的学
习打下基础
二、创建框架与框架集


1、手动设计


2、插入预定义框架
三、创建嵌套框架

四、选择框架和框架集

1、在编辑区中选择

2、在框架面板中选择

五、删除框架

六、保存框架与框架集文件

完成如下图所示的页面:

要求如下:

将学生分7组,讨论如何通过实例,
并引导学生分才能实现如培 养学生分
组讨论如何完图所示的效析问题、解
(1)topFrame:
成如图所示的果并总结
效果

任务二

实例操作

(40min)

高:100=75+25
宽:788=128+660

高:100px
决问题的能
力。
表格:2x2,宽-788px,高-10
0px
(2)第一行:Logo+Banner
第二行:当前页位置信息+导航



导航栏:1x7表格
宽:660px
高:25px
字号:9pt
行高:14pt

(3)mainFrame:
表格:2x2
宽:788Px,高:400Px
边框:5px,间距:5px
表格:3x1
宽:788px,高:45px
边框:0px,间距:0px

四、
框架基本概念

课堂小结

二、创建框架与框架集
(5min)

三、创建嵌套框架


四、选择框架和框架集

五、删除框架

六、保存框架与框架集文件

课后作业

(5min)

设计一系列框架型页面,然后将之实现。要求结合超链接的相关知识。

本次主要讲述框架和框架集布局页面,运用实例学生加深了对框架的理解,运
教学反思

用起来得心应手。14高31班学生学习氛围待加强

实训课题

框架布局实例分析

实训课时

2课时

5、
能掌握布局表格和布局单元格的基本操作。

实训目标

6、
能在布局模式下对页面进行整体布局。

实训重点

掌握布局表格和布局单元格的基本操作。

实训难点

项目的实现

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

16、
对照实习报告的要求,完成上机任务;

实训要求

17、
任务完成后及时要求教师考评;


18、
完善实习报告,填写实训总结;

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

实训过程


操作要求及步骤

步骤1 选择[文件]菜单栏中的[新建]命令,创建一个新的页面,并将其
命名为“个人主页”。

步骤2 选择[插入]工具栏中[布局]任务栏中的[框架]命令,单击按钮,
选择下拉菜单的“顶部和嵌套的左侧框架”命令。

步骤3 弹出[框架标签辅助功能属性]对话框,将网页中框架的各个部分进
行命名。

任务一

步骤4 选择[窗口]菜单栏中[框架]命令。

利用框架排


步骤5 右侧的面板中就加入了[框架]面板,选中“topFrame”框架进行编
辑。

步骤6 页面下方出现了“topFrame”框架的[属性]面板。对“top Frame”
框架进行编辑。 步骤7 选中“mainFrame”框架进行编辑,页面下方出现 了
“mainFrame”框架的[属性]

面板,对“mainFrame”框架进行编辑。

步骤8 选中“leftF rame”框架进行编辑,页面下方出现了“leftFrame”框


架的[属性]面< br>
板,对“leftFrame”框架进行编辑。

步骤9 选择[文件]菜单栏中的[保存全部]命令,对文件进行保存。

步骤10 弹出保存整体文件的对话框,为文件命名为“”。

步骤11 对各个框架部分进行保存,为各个框架进行命名。

步骤12 单击F12,在浏览器中预览效果。

创建框架集,可以自己设计,也可以从预定义的框架集 中选择,还可以修
改一个已存在的Dreamweaver文件来创建。

实验内容:

步骤1 选择[修改]菜单栏中的[框架集]命令。

步骤2 根据需要在其子菜单中选择任意一个分割命令。

步骤3 若要删除一个子框架,将其边框拖至页面或其父框架之外即可。

任务二

创建框架集

完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结

本次实训学生需要的掌握的内容较多,对于框架布局的位置要准确掌握,难度
较大

课题

3.3添加动画

教学课时

2课时


1、掌握在网页中添加各种动态元素

知识目标

2、掌握Flash属性设置

1、学会区分源文件和影片文件格式

教学目标

能力目标

2、掌握在网页中插入各种Flash元素

3、能为网页添加音视频元素。

通过自主探究,使学生掌握软件的使用规则,培养学生自主学习
情感目标

的能力。

添加flash的具体操作
教学重点


规划一个多媒体网站导航条
教学难点


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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程


湖 南 省 商 业 技 术 学 院


学 期 授 课 进 度 计 划
( 二 年级 第 一 学期)

课程名称 网页制作与设计

适用班级 16高21、22

制定教师 易会芝

审 批 签 字

教研室主任

教务科长

教务院长

年 月 日

年 月 日

年 月 日




2017-2018 学年第 一 学期制定

课 时 分 配
授 课

周 数

23

周课时


其 中

讲 课

实 验

复习考试

机 动

授 课

总课时


期 末 完 成 情 况


计 划

课 时

完 成

课 时

超 出 或 缺 少 课 时

超 出

缺 少

弥 补


教 学 截 至

章 节 内 容




备注:用蓝黑或碳素墨水钢笔填写
教 学 计 划


情< br>分

本门课程《网页设计与制作》的教学班级为14级计算机班,计算机班对网络知识< br>有一定的了解,基础知识较好,同时根据实际情况,特拟定本计划。

通过本学期《网 页设计与制作》的学习,主要要求同学们掌握网页制作的一些







基本功能和操作,为以后的一些学习和工作打下较好的基础。通过学习要求同学达
到以下要求:

1、了解DreamweaverCS6的详细功能及操作方法。
2、熟练掌握网页制作技巧。
3、掌握网页规范以及网页优化和网站推广的知识。
4、明确网站建设的流程和站点建设成后需要做的优化推广工作。















3

4

1、超级链接
2、表格表单应用
3、框架使用
4、CSS样式
周次






1、超级链接
2、用表格和框架布局页面
3、创建数据库
讲授法、演示法、项目教学法、合作学 习、对话、任务驱动法、头脑风暴、小组讨
论法等教学方法。






学 期 授 课 进 度 计 划 表

课时

2

2

2

2

2

备 注

授 课 内 容

1.1网站基础知识

1.2网站建设概述

实训 新建一个网页

2.1添加和编辑文本

实训 网站素材处理

1、2周新生军训



上机


上机



5

实训 制作简单网页

2

上机










6

6

2

2

2

2

2

2







机动补周一课



6






7

8

国庆放假

2.2添加和编辑图像

2.3创建超级链接

实训 图像处理和创建超级链接



上机

上机



9

实训 跳转菜单

2.4使用表格布局页面

实训 表格布局实例分析



10


上机

2.5使用框架布局页面

运动会

运动会


充周三到周五





11

实训 框架布局实例分析

3.3添加动画

添加音频和视频

12

实训 DIV与表格的转换

4.3晃动的图片

实训 交换图像

13

实训 拼图游戏

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

实训 效果行为应用

14

实训 图片展播实例

5.1认识和编辑CSS

实训 美化页面

15

实训 应用CSS到网页中

5.2类型、背景和区块样式

实训 方框、边框和导航栏

16

实训 超链接样式及设置技巧

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2

上机





上机




上机

上机




上机

上机




上机

上机




上机

上机


学 期 授 课 进 度 计 划 表
6.1DIV布局页面

6.2认识Spry

17

实训 调整样式

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

6.4申请域名

18

实训 网站发布

7.1个人主页制作

7.2策划构思及设计流程

19

实训 页面布局

7.3制作页面头部

7.4制作中间表格内容

20

元旦放假

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2




上机







上机





上机





机动

充周一课



21








22



复习考试

2

2

6





教研组
意见


课题

1.1网页制作基础知识

教学课时

2课时

知识目标

能了解网页制作软件的特点

教学目标

能力目标

能掌握网页制作的基本概念

情感目标

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

教学重点

网页的组成

教学难点

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

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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

课前准备

导入新讲授新动手实
课堂小结

作业布置








时间分配

5

10

50

15

5

5

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

1、教师自我介绍;

2、点名;

3、课程介绍

1.自我介绍

1.班长统计使师生尽快
座次表

互相认识,并
促使学生答
2.按照花名册
点名

2.学生自我
题了解我们
介绍

3.课程介绍

的课程。

3.反应学情

4.统计学情

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

要求

课前准备

4、课堂要求
本次课是本学期第一次上课,以提问的方式学生之间相提问跟就业
简单介绍本课程:

了解学生对网互讨论,加深和薪资有关
页设计的认知

1、网页设计相关级别及其薪资
导入新课

待遇

力。

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

的认识

住学生注意
对网页设计的问题,抓


一、网页设计介绍

简单介绍网页吸收新知识讲述基础知
知识

并思考生活识,为后面
中 常见网页学习打下基
1、网站是企业向用户和网民提
供信息(包括产品和服务)的
一种 方式,是企业开展电子商
务的基础设施和信息平台,离
开网站去谈电子商务是不可能
讲 述网站设计
的。

级别,引导学生
学生对网页
2、企业的网站被称为 “网络商对这个行业向思考自己的
设计要点理
标”,也是企业无形资产的组
成部分,而 网站是Internet上
任务一

宣传和反映企业形象和文化的
讲授新课

重要窗口。

简单介绍学生
认识软件基
二、网页设计的要点

1、明确建站目标和需求。

做笔记,识记
事范围

介绍网页制作
2、网站主题鲜明。

需要的软件

知识

3、网站版式设计。

给学生灌输网
dreamweave
4、色彩在网站设计中的作用。

页设计的基本
r cs5 为后
知识

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

三、网站设计级别

面软件学习
打下基础

生认识
教师讲述的
提前引导学
将来从事本行
本组成

业的范围

解本行业从
引导学生了


的现状

解这个行业

往,并鼓励学生定位



向大师阶段努
了解本行业
引导学生了
总结

能力,加深
提问:网页设计
设计知识

要点并将学生
分组进行讨论

分组讨论,并加强学生之
派出代表来间交流沟通


1、新手入行

2、跳槽阶段

这些知识都
是学网页设
计最基本的
3、稳定阶段

4、大师阶段

基础知识,
学生基础知
识薄弱,必
四、网页设计公司类型

1、门户游戏类

2、企业部门类

3、网站建设类

4、互动设计类

五、网页三剑客

须了解这些
才能学习后
面的内容

1、
Dreamweaver:

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

2、
Fireworks

页面图象设计工具

3、
Flash

动画制作


六、网页基础知识

1、网页与网站的区别

(1) 网页是WWW系统中信息的
基本单位,简单来说,就是后
缀名为htm的文件。

(2)网站是指存放在网络服务
器上的完整信息的集合体。

2、网页的组成

(1)文字:最直接、通用、容
易的沟通方式

(2)图片:网页的一大特点
——图文并茂

(3)动画:1995年,Su n公司
开发了Java语言,用户可以创
建能调用图片和声音的多媒体
应用小程序(4 )超链接:要通
过一种方式把各独立的网页整
和在一起,使之构成一有机整
体,而这种 链接页面的功能叫
超链接。


(5)特殊组件:图片与动画可
算是最常见的特殊组件。

3、主页Homepage

引导访问者浏览网站。

index、main、default

4、网页空间

在Internet上申请的一个存储
空间,用以存放网页。

5、网址和域名

网址:IP地址

域名:与IP地址相对应,唯一
性,善于识别

最右边:国家(中国——cn)

其次:机构(商业机构——com)

再次:子网名称

最左边:服务器类别(web服务
器——www)


6、网页的分类

静态页面与动态页面

7、认识网站

门户网站:sina

个人网站:明星

专业网站:医疗

职能网站:政府

任务二

动手实践

根据网页设计要点,以小组为巡回指导,给予小组讨论,相加深学生对单位确定一个网站主题,小组学生帮助

讨论需要的步骤以及素材

互沟通

网页设计要
点学习

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

课后作业

2、每组确定一个网站主题方向。

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

一、
网页设计师就业方向

课堂小结

二、
网站设计流程

三、
常见网站


本次课是 网页设计第一次上课,主要讲述一些网页基础知识,学生基础知识薄
教学反思

弱,需要加强,整体来说计算机班基础知识要好于电子商务班

一、网页设计介绍

二、网页设计的要点

三、网站设计级别

板书

四、网页设计公司类型

五、网页三剑客

六、网页基础知识

课题

1.2网站建设概述

教学课时

2课时

知识目标

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

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

教学目标

能力目标

2.
能掌握网站开发的基本原则。

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

情感目标

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

教学重点

站点的建立

教学难点

如何规划好一个网站


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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

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

课前准备

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

些原则、注意事项。

资料及解答疑师提出问题,主学习能力



了解网站设
网站设计大致流程是哪些?每听取学生的观阐述观点,组锻炼 学生的
导入新课

(5min)

组派出一个代表阐述本组课前点并给予一定员之间相互语言表达能
搜集的资料

的知道

讨论

力和分析能


任务一

讲授新课

(35min)

一、
网站设计流程



网页制作


架构内容信息


网站上传


二、
网站开发原则

1、
确定主题

1、确定网站主小组讨论,相加深学生对
题的建议

2、给网站取名

互沟通

网页设计要
点学习

讨论:网站是靠什么赢利的?

3、提示决定网
2、规划站点结构

(1)结构设计

(2)目录结构设计

(3)形象设计

任务二

(4)主页设计

分组讨论

(5)其他页面设计

(40min)

(6)企业站点设计

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

访问率

三、网页版面布局设计

1、版面布局的原则

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

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

站的性质


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

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

2、页面布局的类型

(1)“国”字型

(2)框架型

(3)标题正文型

(4)封面型

(5)综合型

四、规划站点

1、建立站点目录

2、站点规划

规划站点结构是利用不同
的文件夹将不同的网页内容分
门别类的保存。

3、创建导航草图

五、搜集素材

1、搜集并制作素材


无论是文字素材还是图片、动
画素材,都应注意其来源是否
注明版权所 有。

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

2、整理素材

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

3、命名规范

六、创建站点

1、不使用服务器技术

2、本地编辑

3、不连接到远程服务器

七、管理站点

(1)编辑现有站点

(2)删除已有站点

课后作业

(5min)

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


一、
网站设计确定主题

课堂小结

二、
网站设计流程

(5min)

三、
站点管理

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

教学反思

一、网站设计流程

二、网站开发原则

三、网页版面布局设计

板书

四、规划站点

五、搜集素材

六、创建站点

七、管理站点

实训课题

新建一个网页

实训课时

2课时

1、熟悉Dreamweaver cs4界面

实训目标

2、制作简单网页

实训重点

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


2、
掌握简单代码的编写

实训难点

代码的编写

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

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

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

实训要求

3.
完善实习报告,填写实训总结;

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

实训过程

内容

操作要求及步骤

1、双击打开软件——新建HTML网页— —网页名字为nes01——输入以下文字
任务一

然后保存

新建网页1

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

任务二

新建网页2

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



操作步骤 :新建HTML网页——输入文字——将标题设置为36号,蓝色,宋体
——插入两根红色的水平线—— 插入时间——插入商标——插入背景图片—
—保存

完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结
< br>本次课是学生第一次上机,制作一个较简单的网页,学生存在对DW界面不熟,
操作不熟练等缺点 ,需加强操作

课题

2.1编辑和添加文本

教学课时

2课时

1、
掌握输入和编辑文本

知识目标

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

教学目标

能力目标

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

情感目标

提高学生自主学习和团队竞争意识


教学重点

插入和编辑文本

教学难点

创建列表

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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

提问:在DW中输入文本和在将学生分组,并讨论并思考

导入新课

(5min)

Word中输入文本有何区别?

提出问题,引导
学生小组之间
讨论并总结

以讨论的形
式提高学生
之间的交流
沟通

一、插入文本

演示并强调重认真听讲并文本插入是


记下重点

基础知识,
为下面任务
任务一

插入文本

(20min)

1、
插入普通文本

2、
插入不换行空格

3、
插入水平线

4、
插入日期和特殊字符

二打下基础


二、编辑文本

1、基本样式设置

2、设置段落格式

3、创建列表

完成以下网页实例:

1、
引导学生讨
小组讨论

论该网页由
哪几部分组
本实例即是
对任务一的
巩固,也为
下一次课打
下基础

任务二

(55min)



2、
引导学生小
组组内分
工,完成小
模块

作业布置

(5min)

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

课堂小结

(5min)

一、
插入文本

二、
编辑文本

一、插入文本

板书

5、
插入普通文本


6、
插入不换行空格

7、
插入水平线

8、
插入日期和特殊字符

二、编辑文本

1、基本样式设置

2、设置段落格式

3、创建列表

三、实例操作

本次课是 一个基础知识内容,文本是一个网页必不可少的内容,对网页设计
教学反思

至关重要,学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。

实训课题

网站素材处理

实训课时

2课时

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

实训目标

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

实训重点

站点的管理

实训难点

站点的管理

实训方法

上机实训


实训准备

教案、素材、案例、教材、计算机机房

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

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

实训要求

3、
完善实习报告,填写实训总结;

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

实训过程

内容

操作要求及步骤

1、熟悉DW界面

任务一

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

如下图所示

任务二

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

设置默认图
像文件夹

完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结
< br>本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等,学生操作较
好,大部分能完成任 务。


实训课题

制作简单网页

实训课时

2课时

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

实训目标

2、
新建站点

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

实训重点

制作简单网页流程

实训难点

综合运用HTML工具

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

4、
对照实习报告的要求,完成上机任务;

5、
任务完成后及时要求教师考评;

实训要求

6、
完善实习报告,填写实训总结;

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

实训过程

内容

操作要求及步骤

任务一

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

足球偶像网
2、
完成以下简单网站,素材见素材库




完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结
< br>本次上机内容较多,主要考察学生综合性的练习,如图片的插入,文字的编辑
及水平线的插入等, 需要学生对前面的知识非常熟悉,13高12班整体班级学
习氛围较好,所有学生都能按时上交作业,值 得表扬

课题

2.2添加和编辑图像

教学课时

2课时

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

知识目标

2、掌握图像属性设置

教学目标

能力目标

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

情感目标

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

教学重点

图像的编辑

教学难点

图像的编辑

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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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


教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

前面介绍网页的时候有说过,演示 分组讨论用提出问题引
在保证画质的情况下,图片的这张图片,分析什么方法来发学生思
数据量 越小越好。问题:如果数据量为93k、更改数据量考,引出这
导入新课

(5min)

一张图片数据量很大,我们该画
如何编辑?

质为和规格

次课的主题

1024*768规格
的图片如何更
改数据量和规
格?

给 出和两张对图片宽、高、观看教师演引导学生学
图片进行对比,提出任务:如裁切、重新采示,并思考习 理论的时
何从变化到样、锐化等设置变候思考如何
任务一

编辑图片

(30min)



进行演示

成理论运用到
的方法

具体操作步骤:打开DW软件—
—插入图像,对图片
属性设置如下目标值:

实践

编辑完成后与原图像进行对
比,会发现数据量、规格都发


生变化,但浏览网页更友好

概念:在网页浏览中,有时当
1、
鼓励学生小
鼠标移到某个图像上或者单击
时,图像会变成另外一副图像。

浏览时效果:

鼠标放上去时效果:

组讨论如何
完成翻转图
像效果;

小组讨论如
何完成该效
果并进行尝



任务二

2、
给学生展示
翻转图像做
出来的效
制作翻转图


(50min)

果,然后讲
解如何

才能完成这
个效果

课堂小结

(5min)

一、
如何编辑图像

二、
制作翻转图像效果

一、编辑图像

1、
重新采样

板书设计

2、
裁剪、锐化

二、翻转图像制作效果


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

教学反思

课题

2.3创建超级链接

教学课时

2课时

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

知识目标

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

教学目标

3、
创建锚点链接

能力目标

提高学生学习创作能力

情感目标

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

1、
正确认识路径

教学重点

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

教学难点

添加超链接、相对路径、绝对路径

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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程


过程安排

教学内容

教师活动

学生活动

设计意图

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

(5min)

文字或者图片,能自动跳转到学生演示超级讨论如何才生较熟悉的另一个页面,提问:这样的链链接的效果并能实现该效浏览网页的
接形式叫什么?如何实现?

进行提问



方式吸引学
生的注意

一、新建站点jcww,并在站点给学生演示如观看教师演让学生熟悉
内新建默认图像文件夹何插入链 接;演示,并思考DW添加超级
images,将网页里示不同目标新-new
任务一

的“我与足球”链接到建窗口的区别

,目标为- blank;“足
创建超级链


(20min)

球新闻”链接到“逢入京
使.HTML”,目标为- new;“足球
明星”链接到“我与足球
网.HTML”,目标为-self。

-blank
、链接的界面


-self几个目
标值窗口的
区别

二、对比每个目标不同,网页
新建窗口不同并进行总结

区别:

任务二

演示教材P60实思考并正确正确理解相


理解 相对链对链接和绝
接和绝对链对链接,为
相对链接是指链接的地址是本
相对链接和站点之内的对象;绝对链接是演示如何插入
绝对链接

指链接的地址是远程对象,用锚点链接

接概念

下面的学习


(20min)

任务三

锚点链接

域名或IP作为地址

观看教师演打下基础
< br>示并思考锚
一、概念:在本页进行链接的
点链接的应
叫做锚点,一般在长篇的文 章


或技术文档中是使用,链接到
锚点链接应
用比较广
泛 ,学生需
要掌握并应


(35min)

某个特殊的段落。

二、打开第4章
网页,演示
锚点链接效果

一、
页面与页面之间的超链接

课堂小结

二、
相对链接和绝对链接

(5min)

三、
锚点链接(本页之间链接)

作业布置

(5min)

一、
网上查找哪些页面常用页面与页面链接,哪些是用锚点链接并总结

二、
利用教材第4章的素材,自己动手创建锚点链接

三、
创建超级链接的方法与步骤

板书

四、
相对链接和绝对链接

五、
创建锚点链接


本次课主要介绍超链接的常用方法,超链接在学生上网中随处可见,较易理解,
教学反思

学生之间的讨论也非常激烈,较好。

实训课题

图像处理和创建超链接

实训课时

2课时

3、
学会利用DW处理图像

实训目标

4、
掌握创建超级链接的方法

5、
理解相对链接和绝对链接概念

1、
图片处理

实训重点

2、
超级链接

实训难点

超级链接的使用

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

7、
对照实习报告的要求,完成上机任务;

8、
任务完成后及时要求教师考评;

实训要求

9、
完善实习报告,填写实训总结;

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

实训过程



任务一

处理图像

操作要求及步骤

1、
将图片修改为尺寸为240*160,数据量设置为 8K左右(6-11k都可
以)并进行裁剪和锐化等设置,熟悉图片处理几个设置,设置完成后以网页的形式保存,保存在文件夹中,保存名称为“”

2、
将教师发送的网页进行 编辑,将“我与足球”四个字链接到“我
与足球网.html”,目标为- self;将“足球新闻”四个字链接到“逢入京
使.html”, 目标为- blank;将“足球明星”四个字链接到“”,
目标为-new。

3、
修改页面属性:在页面属性对话框中,设置链接选项中的大小为16像素,
任务二

超级链接

链接颜色为“#6666cc”,变换图像颜色为“#ff6600”,已 访问链接为
“#663366”,
活动链接为
“#99cc00”,
下划线样 式
为“仅在变换
图像时显示
下划线”。设
置的对话框如下图所示:

完善报告

填写实训总结,并上交实习报告。

自主练习

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


实训总结

本次实习内容较多,大部分学生能在规定时间内完成任务,较好。

实训课题

跳转菜单

实训课时

2课时

6、
掌握图像热点链接的使用

实训目标

7、
掌握脚本链接

8、
掌握链接检查器的使用

实训重点

路径的正确使用

实训难点

链接的运用及链接检查器的使用

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

10、
对照实习报告的要求,完成上机任务;

11、
任务完成后及时要求教师考评;

实训要求

12、
完善实习报告,填写实训总结;

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

实训过程


任务一

操作要求及步骤

在地图中创建热点链接


创建图像热
点链接

打开网页,在如下图所示的位置插入图片,图片为“鼠标经过的图
任务二

片”,链接到本页的“冠军杯新闻”处(提示:利用锚点链接)

制作跳转菜


打开“”网页,在下载资源文本中将教师提供的“”放入站点,做成的效果是点击“下载资源”就能下载“”,同理在“联系我
们”中设置邮件下载

完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结

本次实习内容较多,大部分学生能在规定时间内完成任务,较好。

课题

2.4使用表格布局页面

教学课时

2课时

1、了解表格在网页设计中的作用。

2、掌握网页中表格的制作方法、表格属性的设置方法以及单元
知识目标

格属性的设置方法,能够在单元格中正确插入文字和图片。

教学目标

3、能够根据网页设计内容,正确布局表格的结构,掌握表格嵌
套的设计方法。

1、利用对比学习,培养学生知识迁移的能力。

能力目标

2、通 过用表格结构设计网页,使学生进一步理解表格的作用、


功能及网页设计方法的多样性, 培养学生的发散思维能力

通过自主探究,使学生掌握软件的使用规则,培养学生自主学习
情感目标

的能力。

1、了解表格在网页设计中的重要作用。

教学重点

2、掌握插入、编辑表格的方法及表格的属性设置。

3、掌握单元格属性的设置。

教学难点

表格的嵌套在网页设计中的应用

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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

(1)展示两个页面并进行比展示并引导学学生仔细观通过对比学
导入新课
较:一个使用表格布局,表格生思考
边框隐藏,其页面工整,文本、
(5min)

图片摆放对称,具有一定的规
律;另一个页面凌乱,图文混
论、交流,回的能力。 < br>顾Word中学
察并比较两习,培养学
个网页,讨生知识迁移


杂 ,摆放杂乱。 习过的表格,
领悟表格在D
问题1:你喜欢那个页面的布
reamwe aver
局?
中的作用。
问题2:用什么方法可以达到
第二个页面的效果?
一、仿照网页3的样式,制作演示如何插入分析网页3,引导学生学
一个网页框架。 表格并对表格找出其中使习理论的时
的设置

在学生自主探究的基础上,教
照插入图像理论运用到
任务一

网页框架

(25min)

师总结插入表格的一般方法。
的方法,探索实践

并插入一个2行1列,表格 宽度
插入表格的
800像素,边框粗细0像素的表
方法。
格。 和进行创意
插入表格,通设计,培养
过实际操作学生的模仿
强化对表格以及创新能
属性的 认识。


动手分析
用的表格,仿候思考如何
任务二
< br>二、在任务一的基础上,探索用实例来演示根据需要,通过实例,
表格基本属性:合并与拆分单如 何合并和拆插入图片,在培养学生分
表格合并和

(20min)


元格;单元格的宽度与高度; 分单元格

第二行拆分析问题、解
为两列,左边决问题的能
放文字,右边力。


放图
任务三

表格嵌套

(30min)

表格的嵌套。在大表中插入一
个小的表格,这是创建复杂表
格样式的有效方法。要提示学
生不要嵌套过多。
展示几种常见
的图文混排样
式,让学生选择
自己喜欢的一
种完成网页。
完善网页,制让学生自主
作完成的同发挥,充分
学把网页通展示个性风
过FTP上传。 采

一、
网页框架和表格基本操作

课堂小结

二、
表格的合并和拆分

(5min)

三、
表格嵌套

课堂作业

(5min)

完成教材第五章的表格

通过表格的嵌套及分析,对页面进行布局。需要加强学生对表格合并和拆分的
教学反思

运用

实训课题

表格布局实例分析

实训课时

2课时

1、
能运用表格为页面布局

实训目标

2、
能掌握表格的嵌套操作

3、


4、
能做出“超越公司简介”页面。

1、掌握插入、编辑表格的方法及表格的属性设置。

实训重点

2、掌握单元格属性的设置。

实训难点

表格的嵌套在网页设计中的应用

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

13、
对照实习报告的要求,完成上机任务;

14、
任务完成后及时要求教师考评;

实训要求

15、
完善实习报告,填写实训总结;

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

实训过程


操作要求及步骤

制作如下图所示的界面:

任务一

操作要求:

创建图像热
1、
top区

点链接

(1)一行三列:


788px=128+540+120 Logo+Banner+主页常用选项

(2)第三列嵌套三行两列表格:
120px=30+90
小图标+文本选项

2、menu区

(1)一行两列:788px=148+640 显示当前日期+导航条

(2)第二列嵌套1行17列表格:
奇数列单元格输入栏目文本,宽65px;偶数列单元格输入“|”,宽为6px。

3、main区

(1)2行3列:788px宽,500px高 788=150+10+628 500=5+495

(2)A、maintop区 合并单元格

(3)B、mainleft区
嵌套13行1列表格:145px宽,2px间距 第1行与第7行:高25px
第2-6行:高36px,输入文本 第8-13行:高40px,插入图片

(3)C、mainmiddle区 空单元格

(4)D、mainright区


嵌套3行1列表格:495px高 495=30+375+90

第一行:输入文本
第二行:嵌套1行2列表格(628px=304+324)

第一列:输入文本
第二列:嵌套2行1列表格
300px宽,右对齐
375px高=220+160
第1行:插入图片
第2行:嵌套3行5列表格
高160=30+65+65
宽300=80+30+80+30+80
第三行:鼠标经过图像

4、bottom区

3行1列:
788px宽,45px高


第一行:水平线
第二行:版权信息
第三行:联系方式

完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结
< br>表格布局是最常见的一种布局方式,本次实训学生较积极,特别是13高12班
同学学习氛围特别 好。

课题

2.5使用框架布局页面

教学课时

2课时

1、能掌握框架的基本操作。

知识目标

2、能理解框架技术的实质。

教学目标

能力目标

能用框架布局页面

通过自主探究,使学生掌握软件的使用规则,培养学生自主学习
情感目标

的能力。

框架的基本操作
教学重点


教学难点

用框架为页面布局


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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

过程安排

教学内容

教师活动

学生活动

设计意图

在学习过表格布局后,我们可展示框架页面预习 并思考通过实例来
以做一些常规的页面布局了 ,给学生,引发学框架页面布展示,引发
但有些特殊效果我们却无法实生思考
导入新课
(5min)

现。如图所示的网页:今天我
们来学习另一种页面布局技术
——框架。
局 学生思考特
殊效果如何
实现,培养
学生积极思
考问题的能

一、基本概念:框架是一种网加强学生对框认真听讲并
任务一

基本知识

(35min)

页布局技术。
学生只有
架布局的理解对概念进行在牢固的掌
并进行简单操消化理解

握了基本概
念后才能为
任务二的学
习打下基础
二、创建框架与框架集


1、手动设计


2、插入预定义框架
三、创建嵌套框架

四、选择框架和框架集

1、在编辑区中选择

2、在框架面板中选择

五、删除框架

六、保存框架与框架集文件

完成如下图所示的页面:

要求如下:

将学生分7组,讨论如何通过实例,
并引导学生分才能实现如培 养学生分
组讨论如何完图所示的效析问题、解
(1)topFrame:
成如图所示的果并总结
效果

任务二

实例操作

(40min)

高:100=75+25
宽:788=128+660

高:100px
决问题的能
力。
表格:2x2,宽-788px,高-10
0px
(2)第一行:Logo+Banner
第二行:当前页位置信息+导航



导航栏:1x7表格
宽:660px
高:25px
字号:9pt
行高:14pt

(3)mainFrame:
表格:2x2
宽:788Px,高:400Px
边框:5px,间距:5px
表格:3x1
宽:788px,高:45px
边框:0px,间距:0px

四、
框架基本概念

课堂小结

二、创建框架与框架集
(5min)

三、创建嵌套框架


四、选择框架和框架集

五、删除框架

六、保存框架与框架集文件

课后作业

(5min)

设计一系列框架型页面,然后将之实现。要求结合超链接的相关知识。

本次主要讲述框架和框架集布局页面,运用实例学生加深了对框架的理解,运
教学反思

用起来得心应手。14高31班学生学习氛围待加强

实训课题

框架布局实例分析

实训课时

2课时

5、
能掌握布局表格和布局单元格的基本操作。

实训目标

6、
能在布局模式下对页面进行整体布局。

实训重点

掌握布局表格和布局单元格的基本操作。

实训难点

项目的实现

实训方法

上机实训

实训准备

教案、素材、案例、教材、计算机机房

16、
对照实习报告的要求,完成上机任务;

实训要求

17、
任务完成后及时要求教师考评;


18、
完善实习报告,填写实训总结;

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

实训过程


操作要求及步骤

步骤1 选择[文件]菜单栏中的[新建]命令,创建一个新的页面,并将其
命名为“个人主页”。

步骤2 选择[插入]工具栏中[布局]任务栏中的[框架]命令,单击按钮,
选择下拉菜单的“顶部和嵌套的左侧框架”命令。

步骤3 弹出[框架标签辅助功能属性]对话框,将网页中框架的各个部分进
行命名。

任务一

步骤4 选择[窗口]菜单栏中[框架]命令。

利用框架排


步骤5 右侧的面板中就加入了[框架]面板,选中“topFrame”框架进行编
辑。

步骤6 页面下方出现了“topFrame”框架的[属性]面板。对“top Frame”
框架进行编辑。 步骤7 选中“mainFrame”框架进行编辑,页面下方出现 了
“mainFrame”框架的[属性]

面板,对“mainFrame”框架进行编辑。

步骤8 选中“leftF rame”框架进行编辑,页面下方出现了“leftFrame”框


架的[属性]面< br>
板,对“leftFrame”框架进行编辑。

步骤9 选择[文件]菜单栏中的[保存全部]命令,对文件进行保存。

步骤10 弹出保存整体文件的对话框,为文件命名为“”。

步骤11 对各个框架部分进行保存,为各个框架进行命名。

步骤12 单击F12,在浏览器中预览效果。

创建框架集,可以自己设计,也可以从预定义的框架集 中选择,还可以修
改一个已存在的Dreamweaver文件来创建。

实验内容:

步骤1 选择[修改]菜单栏中的[框架集]命令。

步骤2 根据需要在其子菜单中选择任意一个分割命令。

步骤3 若要删除一个子框架,将其边框拖至页面或其父框架之外即可。

任务二

创建框架集

完善报告

填写实训总结,并上交实习报告。

自主练习

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

实训总结

本次实训学生需要的掌握的内容较多,对于框架布局的位置要准确掌握,难度
较大

课题

3.3添加动画

教学课时

2课时


1、掌握在网页中添加各种动态元素

知识目标

2、掌握Flash属性设置

1、学会区分源文件和影片文件格式

教学目标

能力目标

2、掌握在网页中插入各种Flash元素

3、能为网页添加音视频元素。

通过自主探究,使学生掌握软件的使用规则,培养学生自主学习
情感目标

的能力。

添加flash的具体操作
教学重点


规划一个多媒体网站导航条
教学难点


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

教学资源

2.教学设备:安装有Dreamweaver cs5软件的计算机

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

教法

讲解法、任务驱动教学法

学法

小组讨论法

教学过程

福建省教育考试院-课前演讲


江南贡院-关于母爱的手抄报


陕西警官职业学院-省级三好学生主要事迹


奉贤曙光中学-生命教育教案


写猫的作文-学校中层述职报告


海南大学二本-合同书怎么写


感恩母亲的英语作文-关于打雪仗的作文


里尔大学-我是什么教学反思