《网页制作》教案.docx
《《网页制作》教案.docx》由会员分享，可在线阅读，更多相关《《网页制作》教案.docx（121页珍藏版）》请在冰豆网上搜索。
《网页制作》教案
湖南省商业技术学院
学期授课进度计划
（二年级第一学期）
课程名称网页制作与设计
适用班级16高21、22
制定教师易会芝
审批签字
教研室主任
年月日
教务科长
年月日
教务院长
年月日
2017-2018学年第一学期制定
课时分配
授课
周数
周课时
授课
总课时
其中
讲课
实验
复习考试
机动
23
期末完成情况
计划
课时
完成
课时
超出或缺少课时
超出
缺少
弥补
教学截至
章节内容
备注：
用蓝黑或碳素墨水钢笔填写
教学计划
学情分析
本门课程《网页设计与制作》的教学班级为14级计算机班，计算机班对网络知识有一定的了解，基础知识较好，同时根据实际情况，特拟定本计划。
大纲要求
通过本学期《网页设计与制作》的学习，主要要求同学们掌握网页制作的一些基本功能和操作，为以后的一些学习和工作打下较好的基础。
通过学习要求同学达到以下要求：
1、了解DreamweaverCS6的详细功能及操作方法。
2、熟练掌握网页制作技巧。
3、掌握网页规范以及网页优化和网站推广的知识。
4、明确网站建设的流程和站点建设成后需要做的优化推广工作。
教学重点
1、超级链接
2、表格表单应用
3、框架使用
4、CSS样式
教学难点
1、超级链接
2、用表格和框架布局页面
3、创建数据库
教学方法
讲授法、演示法、项目教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨论法等教学方法。
学期授课进度计划表
周次
授课内容
课时
备注
3
1.1网站基础知识
2
1、2周新生军训
1.2网站建设概述
2
实训新建一个网页
2
上机
4
2.1添加和编辑文本
2
实训网站素材处理
2
上机
实训制作简单网页
2
上机
5
6
7
国庆放假
6
机动补周一课
8
2.2添加和编辑图像
6
2.3创建超级链接
2
实训图像处理和创建超级链接
2
上机
9
实训跳转菜单
2
上机
2.4使用表格布局页面
2
实训表格布局实例分析
2
上机
10
2.5使用框架布局页面
2
运动会
充周三到周五
运动会
11
实训框架布局实例分析
2
上机
3.3添加动画
2
添加音频和视频
2
12
实训DIV与表格的转换
2
上机
4.3晃动的图片
2
实训交换图像
2
上机
13
实训拼图游戏
2
上机
4.4修改属性特效及动态菜单制作
2
实训效果行为应用
2
上机
14
实训图片展播实例
2
上机
5.1认识和编辑CSS
2
实训美化页面
2
上机
15
实训应用CSS到网页中
2
上机
5.2类型、背景和区块样式
2
实训方框、边框和导航栏
2
上机
16
实训超链接样式及设置技巧
2
上机
学期授课进度计划表
6.1DIV布局页面
2
6.2认识Spry
2
17
实训调整样式
2
上机
6.3选择服务器和使用虚拟机
2
6.4申请域名
2
18
实训网站发布
2
上机
7.1个人主页制作
2
7.2策划构思及设计流程
2
19
实训页面布局
2
上机
7.3制作页面头部
2
7.4制作中间表格内容
2
20
元旦放假
2
机动
2
充周一课
2
21
2
2
2
22
复习考试
6
教研组意见
课题
1.1网页制作基础知识
教学课时
2课时
教学目标
知识目标
能了解网页制作软件的特点
能力目标
能掌握网页制作的基本概念
情感目标
提高学生团结合作精神，提高学生竞争意识
教学重点
网页的组成
教学难点
网页的分类，网址与域名的区分
教学资源
1.教学场所：
多媒体教室
2.教学设备：
安装有Dreamweavercs5软件的计算机
3.教学资料：
辅助课件.多媒体教学软件
教法
讲解法、任务驱动教学法
学法
小组讨论法
教学过程
课前准备
导入新课
讲授新课
动手实践
课堂小结
作业布置
时间分配
5
10
50
15
5
5
教学过程
过程安排
教学内容
教师活动
学生活动
设计意图
课前准备
1、教师自我介绍；
2、点名；
3、课程介绍
4、课堂要求
1.自我介绍
2.按照花名册点名
3.课程介绍
4.统计学情
5.提出期望与要求
1.班长统计座次表
2.学生自我介绍
3.反应学情
4.推荐课代表。
使师生尽快互相认识，并促使学生答题了解我们的课程。
导入新课
本次课是本学期第一次上课，简单介绍本课程：
1、网页设计相关级别及其薪资待遇
2、网页设计的就业方向及其公司类型
以提问的方式了解学生对网页设计的认知
学生之间相互讨论，加深对网页设计的认识
提问跟就业和薪资有关的问题，抓住学生注意力。
任务一
讲授新课
一、网页设计介绍
1、网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站去谈电子商务是不可能的。
2、企业的网站被称为“网络商标”，也是企业无形资产的组成部分，而网站是Internet上宣传和反映企业形象和文化的重要窗口。
二、网页设计的要点
1、明确建站目标和需求。
2、网站主题鲜明。
3、网站版式设计。
4、色彩在网站设计中的作用。
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年，Sun公司开发了Java语言，用户可以创建能调用图片和声音的多媒体应用小程序（4）超链接：
要通过一种方式把各独立的网页整和在一起，使之构成一有机整体，而这种链接页面的功能叫超链接。
（5）特殊组件：
图片与动画可算是最常见的特殊组件。
3、主页Homepage
引导访问者浏览网站。
index、main、default
4、网页空间
在Internet上申请的一个存储空间，用以存放网页。
5、网址和域名
网址：
IP地址
域名：
与IP地址相对应，唯一性，善于识别
最右边：
国家（中国——cn）
其次：
机构（商业机构——com）
再次：
子网名称
最左边：
服务器类别（web服务器——www）
6、网页的分类
静态页面与动态页面
7、认识网站
门户网站：
sina
个人网站：
明星
专业网站：
医疗
职能网站：
政府
简单介绍网页知识
提问：
网页设计要点并将学生分组进行讨论
讲述网站设计级别，引导学生对这个行业向往，并鼓励学生向大师阶段努力
简单介绍学生将来从事本行业的范围
介绍网页制作需要的软件
给学生灌输网页设计的基本知识
吸收新知识并思考生活中常见网页设计知识
分组讨论，并派出代表来总结
思考自己的定位
了解本行业的现状
认识软件基本组成
做笔记，识记教师讲述的知识
讲述基础知识，为后面学习打下基础
加强学生之间交流沟通能力，加深学生对网页设计要点理解
引导学生了解这个行业
引导学生了解本行业从事范围
提前引导学生认识dreamweavercs5为后面软件学习打下基础
这些知识都是学网页设计最基本的基础知识，学生基础知识薄弱，必须了解这些才能学习后面的内容
任务二
动手实践
根据网页设计要点，以小组为单位确定一个网站主题，小组讨论需要的步骤以及素材
巡回指导，给予学生帮助
小组讨论，相互沟通
加深学生对网页设计要点学习
课后作业
1、按照课堂分组课后进行讨论
2、每组确定一个网站主题方向。
3、每组设计一个网站调查问卷。
课堂小结
一、网页设计师就业方向
二、网站设计流程
三、常见网站
教学反思
本次课是网页设计第一次上课，主要讲述一些网页基础知识，学生基础知识薄弱，需要加强，整体来说计算机班基础知识要好于电子商务班
板书
一、网页设计介绍
二、网页设计的要点
三、网站设计级别
四、网页设计公司类型
五、网页三剑客
六、网页基础知识
课题
1.2网站建设概述
教学课时
2课时
教学目标
知识目标
了解做网站的准备工作，掌握站点的建立。
能力目标
1.能了解网站开发的基本流程。
2.能掌握网站开发的基本原则。
3.能学会站点的建立与管理。
情感目标
提高学生团结合作精神，增强小组合作能力
教学重点
站点的建立
教学难点
如何规划好一个网站
教学资源
1.教学场所：
多媒体教室
2.教学设备：
安装有Dreamweavercs5软件的计算机
3.教学资料：
辅助课件、多媒体教学软件
教法
讲解法、任务驱动教学法
学法
小组讨论法
教学过程
过程安排
教学内容
教师活动
学生活动
设计意图
课前准备
1、搜集了解网站开发的基本流程。
2、网站设计、制作过程中的一些原则、注意事项。
配合学生搜索资料及解答疑问
网上搜索教师提出问题，了解网站设计事项
培养学生自主学习能力
导入新课
（5min）
网站设计大致流程是哪些？
每组派出一个代表阐述本组课前搜集的资料
听取学生的观点并给予一定的知道
阐述观点，组员之间相互讨论
锻炼学生的语言表达能力和分析能力
任务一
讲授新课
（35min）
一、网站设计流程
任务二
分组讨论
（40min）
二、网站开发原则
1、确定主题
讨论：
网站是靠什么赢利的？
2、规划站点结构
（1）结构设计
（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）删除已有站点
1、确定网站主题的建议
2、给网站取名
3、提示决定网站的性质
小组讨论，相互沟通
加深学生对网页设计要点学习
课后作业
（5min）
根据这次课的内容、注意事项，构思一个明确的网站主题，并将站点结构的规划用文件夹表示出来
课堂小结
（5min）
一、网站设计确定主题
二、网站设计流程
三、站点管理
教学反思
本次主要讲述站点的建立和管理，课程较简单，学生掌握较好
板书
一、网站设计流程
二、网站开发原则
三、网页版面布局设计
四、规划站点
五、搜集素材
六、创建站点
七、管理站点
实训课题
新建一个网页
实训课时
2课时
实训目标
1、熟悉Dreamweavercs4界面
2、制作简单网页
实训重点
1、学会在网页中输入文字、插入图片等
2、掌握简单代码的编写
实训难点
代码的编写
实训方法
上机实训
实训准备
教案、素材、案例、教材、计算机机房
实训要求
1.对照实习报告的要求，完成上机任务；
2.任务完成后及时要求教师考评；
3.完善实习报告，填写实训总结；
遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
内容
操作要求及步骤
任务一
新建网页1
1、双击打开软件——新建HTML网页——网页名字为nes01——输入以下文字然后保存
2、文字要求：
标题宋体二号蓝色正文：
五号宋体加粗
任务二
新建网页2
制作如下网页素材见文件夹网页命名文字为index保存在文件夹中上交给老师
操作步骤：
新建HTML网页——输入文字——将标题设置为36号，蓝色，宋体——插入两根红色的水平线——插入时间——插入商标——插入背景图片——保存
完善报告
填写实训总结，并上交实习报告。
自主练习
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
实训总结
本次课是学生第一次上机，制作一个较简单的网页，学生存在对DW界面不熟，操作不熟练等缺点，需加强操作
课题
2.1编辑和添加文本
教学课时
2课时
教学目标
知识目标
1、掌握输入和编辑文本
2、学会插入文本，掌握设置文本格式的方法
能力目标
掌握网页中三种常见列表的创建，及其各自的特点
情感目标
提高学生自主学习和团队竞争意识
教学重点
插入和编辑文本
教学难点
创建列表
教学资源
1.教学场所：
多媒体教室
2.教学设备：
安装有Dreamweavercs5软件的计算机
3.教学资料：
辅助课件.多媒体教学软件
教法
讲解法、任务驱动教学法
学法
小组讨论法
教学过程
过程安排
教学内容
教师活动
学生活动
设计意图
导入新课
（5min）
提问：
在DW中输入文本和在Word中输入文本有何区别？
将学生分组，并提出问题，引导学生小组之间讨论并总结
讨论并思考
以讨论的形式提高学生之间的交流沟通
任务一
插入文本
（20min）
一、插入文本
1、插入普通文本
2、插入不换行空格
3、插入水平线
4、插入日期和特殊字符
二、编辑文本
1、基本样式设置
2、设置段落格式
3、创建列表
演示并强调重点
认真听讲并记下重点
文本插入是基础知识，为下面任务二打下基础
任务二
（55min）
完成以下网页实例：
1、引导学生讨论该网页由哪几部分组成
2、引导学生小组组内分工，完成小模块
小组讨论
本实例即是对任务一的巩固，也为下一次课打下基础
作业布置
（5min）
1、找一篇文章输入至页面中，然后利用所学知识，对其进行格式编排
课堂小结
（5min）
一、插入文本
二、编辑文本
板书
一、插入文本
5、插入普通文本
6、插入不换行空格
7、插入水平线
8、插入日期和特殊字符
二、编辑文本
1、基本样式设置
2、设置段落格式
3、创建列表
三、实例操作
教学反思
本次课是一个基础知识内容，文本是一个网页必不可少的内容，对网页设计至关重要，学生必须牢牢掌握文本的各个要点。
目前来说学习兴趣较好。
实训课题
网站素材处理
实训课时
2课时
实训目标
1、掌握创建本地站点和远程站点
2、学会修改站点和多站点的管理
实训重点
站点的管理
实训难点
站点的管理
实训方法
上机实训
实训准备
教案、素材、案例、教材、计算机机房
实训要求
1、对照实习报告的要求，完成上机任务；
2、任务完成后及时要求教师考评；
3、完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
内容
操作要求及步骤
任务一
创建站点
1、熟悉DW界面
2、在D盘根目录创建一个站点名称为《我的足球网》，本地站点文件夹为jcwww，如下图所示
任务二
设置默认图像文件夹
利用教师所给素材，制作简单网页《我的偶像》，素材见文件夹
完善报告
填写实训总结，并上交实习报告。
自主练习
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
实训总结
本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等，学生操作较好，大部分能完成任务。
实训课题
制作简单网页
实训课时
2课时
实训目标
1、掌握新建网页、编辑文字、处理图像
2、新建站点
3、插入水平线、空格、自动更新时间
实训重点
制作简单网页流程
实训难点
综合运用HTML工具
实训方法
上机实训
实训准备
教案、素材、案例、教材、计算机机房
实训要求
4、对照实习报告的要求，完成上机任务；
5、任务完成后及时要求教师考评；
6、完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
内容
操作要求及步骤
任务一
足球偶像网页
1、熟悉DW菜单栏常用界面
2、完成以下简单网站，素材见素材库
完善报告
填写实训总结，并上交实习报告。
自主练习
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
实训总结
本次上机内容较多，主要考察学生综合性的练习，如图片的插入，文字的编辑及水平线的插入等，需要学生对前面的知识非常熟悉，13高12班整体班级学习氛围较好，所有学生都能按时上交作业，值得表扬
课题
2.2添加和编辑图像
教学课时
2课时
教学目标
知识目标
1、掌握图像裁剪、重新取样、亮度、锐化的设置
2、掌握图像属性设置
能力目标
掌握运用软件对图像处理的能力
情感目标
提高学生团结合作精神，提高学生竞争意识
教学重点
图像的编辑
教学难点
图像的编辑
教学资源
1.教学场所：
多媒体教室
2.教学设备：
安装有Dreamweavercs5软件的计算机
3.教学资料：
辅助课件.多媒体教学软件
教法
讲解法、任务驱动教学法
学法
小组讨论法
教学过程
过程安排
教学内容
教师活动
学生活动
设计意图
导入新课
（5min）
前面介绍网页的时候有说过，在保证画质的情况下，图片的数据量越小越好。
问题：
如果一张图片数据量很大，我们该如何编辑？
演示cluo.jpeg这张图片，分析数据量为93k、画质为1024*768规格的图片如何更改数据量和规格？
分组讨论用什么方法来更改数据量和规格
提出问题引发学生思考，引出这次课的主题
任务一
编辑图片
（30min）
给出cluo.jpeg和gg.jpeg两张图片进行对比，提出任务：
如何从cluo.jpeg变化到gg.jpeg？
具体操作步骤：
打开DW软件——插入图像cluo.jpeg，对图片属性设置如下目标值：
编辑完成后与原图像进行对比，会发现数据量、规格都发生变化，但浏览网页更友好
对图片宽、高、裁切、重新采样、锐化等设置进行演示
观看教师演示，并思考cluo.jpeg变成cluo.jpeg的方法
引导学生学习理论的时候思考如何理论运用到实践
任务二
制作翻转图像
（50min）
概念：
在网页浏览中，有时当鼠标移到某个图像上或者单击时，图像会变成另外一副图像。
浏览时效果：
鼠标放上去时效果：
1、鼓励学生小组讨论如何完成翻转图像效果；
2、给学生展示翻转图像做出来的效果，然后讲解如何
才能完成这个效果
小组讨论如何完成该效果并进行尝试
课堂小结
（5min）
一、如何编辑图像
二、制作翻转图像效果
板书设计
一、编辑图像
1、重新采样
2、裁剪、锐化
二、翻转图像制作效果
教学反思
本次教学学生较感兴趣，特别是鼠标经过的图像，学生完成得较好，值得鼓励
课题
2.3创建超级链接
教学课时
2课时
教学目标
知识目标
1、掌握创建超链接的方法
2、掌握相对链接和绝对链接的区别
3、创建锚点链接
能力目标
提高学生学习创作能力
情感目标
提高学生团结合作精神，提高学生竞争意识
教学重点
1、正确认识路径
2、理解相对链接和绝对链接的区别
教学难点
添加超链接、相对路径、绝对路径
教学资源
1.教学场所：
多媒体教室
2.教学设备：
安装有Dreamweavercs5软件的计算机
3.教学资料：
辅助课件.多媒体教学软件
教法
讲解法、任务驱动教学法
学法
小组讨论法
教学过程
过程安排
教学内容
教师活动
学生活动
设计意图
导入新课
（5min）
每次浏览网页的时候点击某个文字或者图片，能自动跳转到另一个页面，提问：
这样的链接形式叫什么？
如何实现？
进入新浪网给学生演示超级链接的效果并进行提问
观看效果并讨论如何才能实现该效果
以提问且学生较熟悉的浏览网页的方式吸引学生的注意
任务一
创建
升级会员 