《网页制作》教案

1、湖南省商业技术学院学期授课进度计划（ 二年级 第一学期）课程名称网页制作与设计适用班级 16 高21、22制定教师易会芝审批签字教研室主任年月日教务科长年月日教务院长年月日2017-2018学年第 学期制定课 时 分 配授课周数周课时授课总课时其中讲课实验复习考试机动23期末完成情况计戈1J课时完成课时超生或缺少课时超出缺少弥补教学截至章节内容备注：用蓝黑或碳素墨水钢笔填写教学计划学情分析本门课程网页设计与制作的教学班级为 14级计算机班，计算机班对网络知识 有f 的了解，基础知识较好，同时根据实际情况，特拟定本计划。大 纲 要 求通过本学期网页设计与制作的学习，主要要求同学们掌握网页制作的一

2、些 基本功能和操作，为以后的一些学习和工作打下较好的基础。通过学习耍求同学达 到以卜要求：1、了解DreamweaverCS6勺详细功能及操作方法。2、熟练掌握网页制作技巧。3、掌握网页规范以及网页优化和网站推广的知识。4、明确网站建设的流程和站点建设成后需要做的优化推广工作。教 学 重 点1、超级链接2、表格表单应用3、框架使用4、CSS羊式教 学 难 点1、超级链接2、用表格和框架布局页面3、创建数据库教 学 方 法讲授法、演示法、项目教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨 论法等教学方法。学期授课进度计划表周次授 课 内 容课时备 注31.1网站基础知识21、2周新生军训1

3、.2网站建设概述2实训新建一个网页2上机42.1添加和编辑乂本2实训网站素材处理2上机实训制作简单网页2上机567国庆放假6机动补周一课82.2添加和编辑图像62.3创建超级链接2实训图像处理和创建超级链接2上机9实训跳转菜单2上机2.4使用表格布局反面2实训表格布局实例分析2上机102.5使用框架布局页面2运动会充周三到周五运动会11实训框架布局实例分析2上机3.3添加动画2添加首频和视频212实训DIV与表格的转换2上机4.3晃动的图片2实训交换图像2上机13实训拼图游戏2上机4.4修改属性特效及动态菜单制作2实训效果行为应用2上机14实训图片展播实例2上机5.1认识和编辑CSS2实训美化

4、页面2上机15实训 应用CSSIU网页中2上机5.2类型、背景和区块样式2实训 方框、边框和导航栏2上机16实训超链接样式及设置技巧2上机学期授课进度计划表6.1DIV布局页面26.2 认识 Spry217实训调整样式2上机6.3选择服务器和使用虚拟机26.4申请域名218实训网站发布2上机7.1个人主页制作27.2策划构思及设计流程219实训页面布局2上机7.3制作页面头部27.4制作中间走格内容220元旦放假2机动2充周一课22122222复习考试6教研组 意见课题1.1网页制作基础知识教学课时2课时教学目标知识目标能了解网页制作软件的特点能力目标能掌握网页制作的基本概念情感目标提高学生团

5、结合作精神，提高学生竞争意识教学重点网页的组成教学难点网页的分类，网址与域名的区分教学资源1 .教学场所：多媒体教室2 .教学设备：安装后 Dreamweaver cs5软件的计算机3 .教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程课前准备导入新课讲授新课动手实践课堂小结作业布置时间分配510501555教学过程教学内容教师活动学生活动设计意图课前准备1、教师自我介绍；2、点名；3、课程介绍4、课堂要求1 .自我介绍2 .按照花名册点名3 .课程介绍4 .统计学情5 .提出期望与要求1 .班长统 计座次表2 .学生自 我介绍3 .反应学 情4 .推荐课使师

6、生尽 快互相认 识，并促使 学生答题 了解我们 的课程。代表。本次课是本学期第一次上以提问的方学生之间相提问跟就课，简单介绍本课程：式了解学生互讨论，加业和薪资1、网页设计相关级别及其对网页设计深对网页设有关的问导入新课薪资待遇的认知计的认识题，抓住学2、网页设计的就业方向及生注意力。其公司类型一、网页设计介绍简单介绍网吸收新知识讲述基础1、网站是企业向用户和网页知识并思考生活知识，为后民提供信息（包括产品和提问：网页设中常见网页面学习打服务）的一种方式，是企计要点并将设计知识卜基础业开展电子商务的基础设学生分组进分组讨论，加强学生施和信息平台，离开网站行讨论并派出代表之间交流任务一去谈电子商

7、务是不可能讲述网站设来总结沟通能力，讲授新课的。计级别，引导思考自己的加深学生2、企业的网站被称为“网学生对这个定位对网页设络商标”，也是企业无形行业向往，并了解本行业计要点理资产的组成部分，而网站鼓励学生向的现状解是Internet上宣传和反映大师阶段努认识软件基引导学生企业形象和文化的重要窗力本组成了解这个行业引导学生 了解本行 业从事范 围提前引导 学生认识dreamweav er cs5 为 后面软件 学习打下 基础这些知识都是学网 页设计最 基本的基础知识，学 生基础知识薄弱，必 须了解这 些才能学口。二、网页设计的要点1、明确建站目标和需求。2、网站主题鲜明。3、网站版式设计。4、

8、色彩在网站设计中的作用。5、网站设计形式与内容统三、网站设计级别1、新手入行2、跳梢阶段3、稳定阶段4、大师阶段四、网页设计公司类型1、门户游戏类2、企业部门类3、网站建设类4、互动设计类五、网页三剑客1、 Dreamweaver简单介绍学做笔记，识 生将来从事记教师讲述本行业的范的知识围介绍网页制作需要的软件给学生灌输网页设计的基本知识习后面的可视化页面设计、网站内容管理2、 Fireworks页面图象设计工具3、 Flash动画制作六、网页基础知识1、网页与网站的区别(1)网页是WW中信 息的基本单位，简单来说， 就是后缀名为htm的文件。(2)网站是指存放在网络 服务器上的完整信息的集

9、合体。2、网页的组成(1)文字：最直接、通用、容易的沟通方式(2)图片：网页的一大特 点一一图文并茂(3)动画：1995年，Sun 公司开发了 Java语言，用 户可以创建能调用图片和 声音的多媒体应用小程序(4)超链接：要通过一种 方式把各独立的网页整和 在一起，使之构成一有机 整体，而这种链接页面的 功能叫超链接。(5)特殊组件：图片与动 画可算是最常见的特殊组 件。3、主页 Homepage引导访问者浏览网站。index、main、default4、网页空间在Internet 上申请的一个 存储空间，用以存放网页。5、网址和域名网址：IP地址域名：与IP地址相对应， 唯一性，善于识别 最

10、右边：国家(中国cn)其次：机构(商业机构cornj)再次：子网名称最左边：服务器类别（web服务器wwW6、网页的分类静态反面与动态页面7、认识网站门户网站：sina个人网站：明星专业网站：医疗职能网站：政府任务二动手实践根据网页设计要点，以小组为单位确定一个网站主题，小组讨论需要的步骤以及素材巡回指导，给予学生帮助小组讨论，相互沟通加深学生 对网页设 计要点学 习课后作业1、按照课堂分组课后进行讨论2、每组确定一个网站主题方向。3、每组设一个网站调查问卷。课堂小结一、网页设计师就业方向二、网站设计流程三、常见网站教学反思本次课是网页设计第一次上课，主要讲述一些网页基础知识，学生 基础知识薄

11、弱，需要加强，整体来说计算机班基础知识要好于电子 商务班板书一、网页设计介绍二、网贞设计的要点三、网站设计级别四、网页设计公司类型五、网贞三剑客六、网页基础知识课题1.2网站建设概述教学课时2课时教学目标知识目标了解做网站的准备工作，掌握站点的建立。能力目标1 .能了解网站开发的基本流程。2 .能掌握网站开发的基本原则。3 .能学会站点的建立与管理。情感目标提高学生团结合作精神，增强小组合作能力教学重点站点的建立教学难点如何规划女一个网站教学资源1 .教学场所：多媒体教室2 .教学设备：安装后 Dreamweaver cs5软件的计算机3 .教学资料：辅助课件、多媒体教学软件教法讲解法、任务驱

12、动教学法 学法小组讨论法教学过程教学内容教师活动学生活动设计意图课前准备1、搜集了解网站开发的基 本流程。2、网站设计、制作过程中 的一些原则、注意事项。配合学生搜索资料及解答疑问网上搜索 教师提出 问题，了解 网站设计 事项培养学生 自主学习 能力导入新课(5min)网站设计大致流程是哪些？每组派出一个代表阐述本组课前搜集的资料听取学生的观点并给予一定的知道阐述观点，组员之间相互讨论锻炼学生 的语言表 达能力和 分析能力任务一讲授新课(35min)一、 网站设计流程架构内容信息 搜集整理资料 规划网站结构网页制作rvWL网1站2任务二分组讨论(40min)二、嗨硒露原则1、确定网站主题的建议

13、2、给网站取名3、提下决定网站的性质小组讨论，相互沟通加深学生 对网页设 计要点学 习1、确定主题讨论：网站是靠什么赢利的？2、规划站点结构(1)结构设计(2)目录结构设计(3)形象设计(4)主页设计(5)其他页面设计(6)企业站点设计(7)为站点设计目标对象访问率三、网页版面布局设计1、版面布局的原则(1)主次分明、中心突出(2)大小搭配、相互呼应(3)图文并茂、相得益彰(4)动静适度、平衡对称2、页面布局的类型(1) “国”字型(2)框架型(3)标题止文型(4)封面型(5)综合型四、规划站点1、建立站点目录2、站点规划规划站点结构是利用不同的文件夹将不同的网页内容分门别类的保存。3、创建导

14、航草图五、搜集素材1、搜集并制作素材无论是文字素材还是图片、动画素材，都应注意其来源是否注明版权所有。网站素材要为网站主题服务。2、整理素材原始素材、编辑处理好的素材3、命名规范六、创建站点1、不使用服务器技术2、本地编辑3、不连接到远程服务器七、管理站点(1)编辑现有站点(2)删除已有站点课后作业(5min)根据这次课的内容、注意事项，构思一个明确的网站主题，并将站点结构的规划用文件夹表示出来课堂小结(5min)一、 网站设计确定主题二、网站设计流程三、站点管理教学反思本次主要讲述站点的建立和管理，课程较简单，学生掌握较好板书一、网站设计流程二、网站开发原则三、网页版面布局设计四、规划站点五

15、、搜集素材六、创建站点七、管理站点实训课题新建一个网页实训课时2课时实训目标1、熟悉 Dreamweaver cs4 界面2、制作简单网页实训重点1、 学会在网贞中输入文字、插入图片等2、 掌握简单代码的编写实训难点代码的编写实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求1 .对照实习艮告的要求，完成上机任务；2 .任务完成后及时要求教师考评；3 .完善实习才艮告，填写实训总结；遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程内容操作要求及步骤任务一新建网页11、双击打开软件新建 HTM页网页名字为 nes01 输入以下文字然后保存2、文字要求：标题 宋体 二号 蓝色 正

16、文：五号 宋体 加粗任务二新建网页2制作如卜网贝 素材见文件夹 网贝命名文字为 index 保存在文件夹中上交给老师一工/光1临我的足球网情万琳桃玩足昨岭内畤丫 1*用革T曲的惬桂吧林野湿时 > .Q_. J _操作步骤：新建 HTML双页一一输入文字一一将标题设置为36号，蓝色，宋体一一插入两根红色的水平线一一插入时间一一插入商标一一插入背景图片一一保存完善报告填写实训总结，并上交实习se告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次课是学生第一次上机，制作一个较简单的网页，学生存在对DW 界面不熟，操作不熟练等缺点，需加强操作课题2.1编辑和添加乂本教

17、学课时2课时教学目标知识目标1、掌握输入和编辑文本2、学会插入文本，掌握设置文本格式的方法能力目标掌握网页中二种常见列表的创建，及其各自的特点情感目标提高学生自主学习和团队竞争意识教学重点插入和编辑文本教学难点创建列表教学资源1 .教学场所：多媒体教室2 .教学设备：安装后 Dreamweaver cs5软件的计算机3 .教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程教学内容教师活动学生活动设计意图导入新课(5min)提问：在DM输入文本和在Wordt1输入文本有何区别？将学生分组， 并提出问题， 引导学生小 组之间讨论讨论并思考以讨论的 形式提高 学生之间

18、 的交流沟并总结通一、插入文本演示并强调认真听讲并文本插入1、插入普通文本重点记卜重点是基础知2、插入不换行空格识，为卜面3、插入水平线任务二打任务一4、插入日期和特殊字卜基础插入文本符(20min)一、编辑文本1、基本样式设置2、设置段落格式3、创建列表完成以卜网页实例：1、 引导小组讨论本实例即学生讨论是对任务该网页由一的巩固，哪几部分也为下一任务二组成次课打下(55min)2、 引导基础学生小组组内分工，完成小模块作业布置(5min)1、找一篇文章输入至页面中，然后利用所学知识，对其进行格式编排课堂小结(5min)一、 插入文本二、编辑文本板书一、插入文本5、 插入普通文本6、 插入不换

19、行空格7、 插入水平线8、 插入日期和特殊字符二、编辑文本1、基本样式设置2、设置段落格式3、创建列表三、实例操作教学反思本次课是 个基础知识内容，文本是一个网页必不口少的内容， 对 网页设计至关重要，学生必须牢牢掌握文本的各个要点。目前来说 学习兴趣较好。实训课题网站素材处理实训课时2课时实训目标1、 掌握创建本地站点和远程站点2、 学会修改站点和多站点的管理实训重点站点的管理实训难点站点的管理实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求1、 对照实习艮告的要求，完成上机任务；2、 任务完成后及时要求教师考评；3、 完善实习才艮告，填写实训总结；4、遵守实训纪律，不游戏

20、，不睡觉，不高声谈论。实训过程内容操作要求及步骤任务一创建站点1、熟悉DW#面2、在D盘根目录创建一个站点名称为我的足球网，本地站点义件夹为jcwww,如下图所7K任务二设置默认 图像文件 夹利用教师所给素材，制作简单网页我的偶像，素材见文件夹完善报告填写实训总结，并上交实习se告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等， 学生操作较好，大部分能完成任务。实训课题制作简单网页实训课时2课时实训目标1、掌握新建网页、编辑文字、处理图像2、 新建站点3、 插入水平线、空格、自动更新时间实训重点制作简单网页流程实

21、训难点综合运用HTML：具实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求4、 对照实习艮告的要求，完成上机任务；5、 任务完成后及时要求教师考评；6、 完善实习才艮告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程内容操作要求及步骤任务一足球偶像网页1、 熟悉DW菜单栏常用界面2、 完成以下简单网站，素材见素材库完善报告填写实训总结，并上交实习se告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次上机内容较多，主要考察学生综合性的练习，如图片的插入， 文字的编辑及水平线的插入等，需要学生对前面的知识非常熟悉， 13高12班整

22、体班级学习氛围较好，所有学生都能按时上交作业， 值得表扬课题2.2添加和编辑图像教学课时2课时教学目标知识目标1、掌握图像裁剪、重新取样、亮度、锐化的设置2、掌握图像属性设置能力目标掌握运用软件对图像处理的能力情感目标提高学生团结合作精神，提高学生竞争意识教学重点图像的编辑教学难点图像的编辑教学资源1 .教学场所：多媒体教室2 .教学设备：安装后 Dreamweaver cs5软件的计算机3 .教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程教学内容教师活动学生活动设计意图前面介绍网页的时候有说演示分组讨论用提出问题过，在保证画质的情况下，cluo.jpeg

23、这什么方法来引发学生图片的数据量越小越好。张图片，分析更改数据量思考，引出导入新课问题：如果一张图片数据数据量为和规格这次课的(5min)量很大，我们该如何编93k、画质为主题辑？1024*768 规格的图片如何更改数据用和规格？给出 cluo.jpeg 和 gg.jpeg对图片宽、观看教师演引导学生两张图片进行对比，提出高、裁切、重示，并思考学习理论任务：如何从cluo.jpeg 变新采样、锐化cluo.jpeg的时候思化到 gg.jpeg ?等设置进行变成考如何理任务一编辑图片(30min)具体操作步骤：打开D瞰 件一一插入图像 cluo.jpeg ,对图片属性设 置如下目标值：编辑完成后

24、与原图像进行 对比，会发现数据量、规 格都发生变化，但浏览网 员更友好cluo.jpeg的方法论运用到实践任务二制作翻转图像(50min)概念：在网页浏览中，有 时当鼠标移到某个图像上 或者单击时，图像会变成 另外一副图像。浏览时效果：鼠标放上去时效果：1、 鼓励学生小组 讨论如何 完成翻转 图像效果；2、 给学生展示翻 转图像做 出来的效 果，然后讲 解如何zl能元成 这个效果小组讨论如 何完成该效 果并进行尝 试课堂小结(5min)一、 如何编辑图像二、制作翻转图像效果板书设计一、编辑图像1、 重新米样2、 裁剪、锐化二、翻转图像制作效果教学反思本次教学学生较感兴趣，特别是鼠标经过的图像，

25、学生完成得较好, 值得鼓励课题2.3创建超级链接教学课时2课时教学目标知识目标1、 掌握创建超链接的方法2、 掌握相对链接和绝对链接的区别3、 创建锚点链接能力目标提高学生学习创作能力情感目标提高学生团结合作精神，提高学生竞争意识教学重点1、 正确认识路径2、 理解相对链接和绝对链接的区别教学难点添加超链接、相对路径、绝对路径教学资源1 .教学场所：多媒体教室2 .教学设备：安装后 Dreamweaver cs5软件的计算机3 .教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程教学内容教师活动学生活动设计意图导入新课(5min)每次浏览网页的时候点击 某个文字

26、或者图片，能自 动跳转到另一个贞面，提 问：这样的链接形式叫什 么？如何实现？进入新浪网 给学生演示 超级链接的 效果并进行 提问观看效果并 讨论如何才 能实现该效 果以提问且 学生较熟 悉的浏览 网页的方 式吸引学生的注意任务一创建超级链接(20min)一、新建站点 jcww,并在 站点内新建默认图像文件 夹 images , 将网页 Index.HTML里的“我与足 球”链接到news.HTML目 标为-blank ;足球新闻 链接到“逢入京使.HTML', 目标为-new; “足球明星” 链接到“我与足球 网.HTML',目卧-self 。 二、对比每个目标不同， 网页新

27、建窗口不同并进行 总结给学生演示 如何插入链 接；演小不同 目标新建窗 口的区别观看教师演 示，并思考-new 、-blank 、-self 几个目标值窗口的区别让学生熟 悉口叫加超级链接 的界面任务二区别：演示教材P60思考并正确正确理解相对链接相对链接是指链接的地址实例理解相对链相对链接和绝对链是本站点之内的对象；绝演示如何插接和绝对链和绝对链接(20min)任务三对链接是指链接的地址是远程对象，用域名或IP作为地址入锚点链接接概念观看教师演示并思考锚接，为卜面的学习打卜基础锚点链接(35min)一、概念：在本页进行链 接的叫做锚点，一般在长 篇的文章或技术文档中是 使用，链接到某个特殊的

28、 段落。二、打开第4章/4-3/jieshao.html 网页，演示锚点链接效果点链接的应用锚点链接 应用比较 广泛，学生 需要掌握 并应用课堂小结(5min)一、 页面与反面之间的超链接二、 相对链接和绝对链接三、锚点链接(本页之间链接)作业布置(5min)一、网上查找哪些页面常用反面与页面链接，哪些是用锚点链接并总结二、利用教材第4章/4-3/jieshao.html 的素材，自己动手创建 锚点链接板书三、创建超级链接的方法与步骤四、相对链接和绝对链接五、创建锚点链接教学反思本次课主要介绍超链接的常用方法，超链接在学生上网中随处可见， 较易理解，学生之间的讨论也非常激烈，较好。实训课题图像

29、处理和创建超链接实训课时2课时实训目标3、 学会利用DW处理图像4、 掌握创建超级链接的方法5、 理解相对链接和绝对链接概念实训重点1、 图片处理2、 超级链接实训难点超级链接的使用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求7、 对照实习艮告的要求，完成上机任务；8、 任务完成后及时要求教师考评；9、 完善实习才艮告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程操作要求及步骤任务一处理图像1、 将图片6.jpeg修改为尺寸为240*160,数据量设置为8K左右（6-11k都可以）并进行裁剪和锐化等设置，熟悉图片处理几个设置，设置完成后以网页的形式

30、保存，保存在文件夹中，保存名称为 “xiugai.html ”2、 将教师发送的Index.HTML网页进行编辑，将“我与足球”四个字链接到“我与足球网.html "，目标为-self ;将“足球新闻”四个字链接到“逢入京使.html "，目标为-blank ;将“足球明 星”四个字链接到“ news.html "，目标为-new。3、 修改页面属性：在页面属性对话框中，设置链接选项中的大任务二超级链接小为16像 素，链接颜 色 为“ #6666cc 工变换图 像颜色为“ #ff6600”，已访问链接为“ #663366”，活动链接为“ #99cc00”，下划线样

31、式为“仅在变换图像时显示下划线”。设置的对话框如下图所示：完善报告填写实训总结，并上交实习se告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次实习内容较多，大部分学生能在规定时间内完成任务，较好。实训课题跳转菜单实训课时2课时6、掌握图像热点链接的使用实训目标7、掌握脚本链接8、掌握链接检查器的使用实训重点路径的正确使用实训难点链接的运用及链接检查器的使用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求10、 对照实习报告的要求，完成上机任务；11、 任务完成后及时要求教师考评；12、 完善实习才艮告，填写实训总结；4、遵守实训纪律，不游戏，不睡

32、觉，不高声谈论。实训过程操作要求及步骤任务一创建图像热点链接在地图中创建热点链接任务二制作跳转菜单打升news.HTMLM反，在如卜图所示的位置插入图片，图片为“鼠标经过的图片”，链接到本页的“冠军杯新闻”处（提示：利用锚点链接）打开 jieshao.html 网页，在卜载货源文本中将教师提供的“qq.rar ”放入站点，做成的效果是点击“下载资源”就能下载“qq.rar ”，同埋在“联系我们”中设置邮件下载完善报告填写实训总结，并上交实习se告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次实习内容较多，大部分学生能在规定时间内完成任务，较好。课题2.4使用去格布

33、局页面教学课时2课时教学目标知识目标1、了解走格在网页设计中的作用。2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格属性的设置方法，能够在单元格中止确插入 文字和图片。3、能够根据网页设计内容，正确布局表格的结构，掌 握表格嵌套的设计方法。能力目标1、利用对比学习，培养学生知识迁移的能力。2、通过用走格结构设计网页，使学生进一步理解去格 的作用、功能及网贞设计方法的多样性，培养学生的发 散思维能力情感目标通过自主探究，使学生掌握软件的使用规则，培养学生 自主学习的能力。教学重点1、了解走格在网页设计中的重要作用。2、掌握插入、编辑表格的方法及表格的属性设置。3、掌握单元格属性的设置。

34、教学难点走格的嵌套在网页设计中的应用教学资源1 .教学场所：多媒体教室2 .教学设备：安装后 Dreamweaver cs5软件的计算机3 .教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程教学内容教师活动学生活动设计意图导入新课(5min)(1)展示两个贝闻并进行比 较：一个使用表格布局，表格 边框隐臧，其贝闻工整，文本、 图片摆放对称，具侣F的规 律；另一个页向凌乱，图文混 杂，摆放杂乱。问题1：你喜欢那个贞间的布 局？问题2:用什么方法可以达到 第二个页间的效果？展示并引导学 生思考学生仔细观 察并比较两 个网页，讨 论、交流，回 顾Word中学 习过的

35、表格， 领T吾表格在Dreamweaver 中的作用。通过对比学 习，培疗学 生知识迁移 的能力。任务一网页框架(25min)一、仿照网页3的样式，制作 一个网页框架。在学生自主探究的基础上，教 师总结插入表格的一般方法。并插入一个2行1列，表格宽度 800像素，边框粗细0像素的表 格。演示如何插入表格并对表格的设置分析网贝3, 找出其中使 用的表格，仿 照插入图像 的方法，探索 插入表格的 方法。插入表格，通 过实际操作 强化对表格 属性的认识。引导学生 学习理论 的时候思 考如何理 论运用到 实践动手分析 和进行创意 设计，培养 学生的模仿 以及创新能 力任务二表格合并和拆分(20min)

36、二、在任务一的基础上，探索表格基本属性：合并与拆分单 元格；单元格的宽度匕高度；用实例来演 示如何合并和拆分单元 格根据需要， 插入图片，在 第二行拆分 为两夕1，左边 放文字，右边 放图通过实例， 培养学生分 析问题、解 决问题的能 力。任务三表格嵌套(30min)表格的嵌套。在大表中插入一 个小的表格，这是创建复杂表 格样式的有效方法。要提示学 生/、要嵌套过多。展示几种常见 的图文混排样 式，让学生选择 自己喜欢的一 种完成网贝。完善网贝，制 作完成的同 学把网页通 过FTP上传。让学生自主 发挥，充分 展示个性风 采课堂小结(5min)一、 网页框架和表格基本操作一、 表格的合并和拆分

37、二、 表格嵌套课堂作业(5min)完成教材第五章/Index.html的表格教学反思通过去格的嵌套及分析，对页面进行布局。需要加强学生对走格合并和拆分的运用实训课题表格布局实例分析实训课时2课时实训目标1、 能运用表格为反面布局2、 能掌握表格的嵌套操作3、4、 能做出“超越公司简介”贞面。实训重点1、掌握插入、编辑表格的方法及表格的属性设置。2、掌握单元格属性的设置。实训难点走格的嵌套在网页设计中的应用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求13、 对照实习报告的要求，完成上机任务；14、 任务完成后及时要求教师考评；15、完善实习报告，填写实训总结；4、遵守实训纪

38、律，不游戏，不睡觉，不高声谈论。实训过程操作要求及步骤制作如下图所示的界面：操作要求：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 区(2) 2 行 3 列：788Px宽,500Px高 788=150+10+628 500=5+495(3) A、m

39、aintop区 合并单元格(4) B、mainleft 区嵌套13行1列表格：145px宽，2px间距 第1行与第7行：高25px第2-6行：高36px,输入文本 第8-13行：高40px,插入图片(5) C mainmiddle区 空单元格(6) 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第

40、三行：鼠标经过图像4、bottom 区3行1列：788Px 宽，45Px 高第一行：水平线第二行：版权信息第三行：联系方式完善报告填写实训总结，并上交实习se告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结表格布局是最常见的一种布局方式，本次实训学生较积极，特别是13高12班同学学习氛围特别好。课题2.5使用框架布局页面教学课时2课时教学目标知识目标1、能掌握框架的基本操作。2、能理解框架技术的实质。能力目标能用框架布局反面情感目标通过自主探究，使学生掌握软件的使用规则，培养学生 自主学习的能力。教学重点框架的基本操作教学难点用框架为页面布局教学资源1 .教学场所：多

41、媒体教室2 .教学设备：安装后 Dreamweaver cs5软件的计算机3 .教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程教学内容教师活动学生活动设计意图导入新课(5min)在学习过表格布局后，我们可 以做一些常规的贞间布局了， 但启些特殊效果我们却无法实 现。如图所示的网贝：今天我 们来学习另一种贝闻布局技本 框架。展示框架页面 给学生，引发学 生思考预习并思考 框架页面布 局通过实例来 展示，引发 学生思考特 殊效果如何 实现，培养 学生积极思 考问题的能 力任务一基本知识(35min)一、基本概念：框架是一种网 页布局技术。二、创建框架与框架集1、

42、手动设计2、插入预定义框架三、创建嵌套框架四、选择框架和框架集1、在编辑区中选择2、在框架面板中选择五、删除框架六、保存框架与框架集文件加强学生对 框架布局的 理解并进行 简单操作认真听讲并 对概念进行 消化理解学生只 有在牢固 的掌握了 基本概念 后才能为 任务二的 学习打下 基础任务二实例操作(40min)完成如下图所7K的页面：要求如下：(1)topFrame：高：100Px表格：2x2,范-788px,局-100px高：100=75+25宽：788=128+660将学生分7 组，并引导学 生分组讨论 如何完成如 图所示的效 果讨论如何 才能实现如 图所示的效 果并总结通过实例， 培养学

43、生分 析问题、解 决问题的能 力。第一行：Logo+Banner第二行：当前页位置信息+导航栏导航栏：1x7表格宽：660Px高：25px字号：9Pt行高：14Pt(3)mainFrame表格：2x2宽：788Px,高：400Px边框：5px,间距：5px表格：3x1宽：788px,高：45px边框：0px,间距：0px课堂小结(5min)四、框架基本概念二、创建框架与框架集三、创建嵌套框架四、选择框架和框架集五、删除框架六、保存框架与框架集文件课后作业设一系列框架型页面，然后将之实现。要求结合超链接的相关知(5min)识。教学反思本次主要讲述框架和框架集布局页面，运用实例学生加深了对框架 的

44、理解，运用起来得心应手。14高31班学生学习氛围待加强实训课题框架布局实例分析实训课时2课时实训目标5、 能掌握布局去格和布局单兀格的基本操作。6、 能在布局模式卜对反面进行整体布局。实训重点掌握布局去格和布局单兀格的基本操作。实训难点项目的实现实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求16、 对照实习报告的要求，完成上机任务；17、 任务完成后及时要求教师考评；18、 完善实习才艮告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程操作要求及步骤步骤1 选择文件菜单栏中的新建命令，创建一个新的页面，并将其命名为“个人主页”。步骤2 选择插入工具栏中

45、布局任务栏中的框架命令，单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架”命令。步骤3 弹出框架标签辅助功能属性对话框，将网页中框架的各个部分进行命名。步骤4 选择窗口菜单栏中框架命令。步骤5 右侧的面板中就加入了 框架面板，选中“ topFrame” 框架进行编辑。步骤6 页面下方出现了 “ topFrame”框架的属性面板。对任务一利用框架排版“top Frame ”框架进行编辑。 步骤7 选中“ mainFrameT框架进行编辑，页面下方出现了 “ mainFrame'框架的属性面板，对“ mainFrame'框架进行编辑。步骤8 选中“leftFrame ”框架进行编辑，

46、页面下方出现了“leftFrame ”框架的属性面板，对“ leftFrame ”框架进行编辑。步骤9 选择文件菜单栏中的保存全部命令，对文件进行 保存。步骤10 弹出保存整体文件的对话框，为文件命名为 “index.html ”。步骤11对各个框架部分进行保存，为各个框架进行命名。步骤12 单击F12,在浏览器中预览效果。任务二创建框架集创建框架集，可以自己设计，也可以从预定义的框架集中选择，还口以修改 个已存在的 Dreamweave仪件来创建。实验内容：步骤1 选择修改菜单栏中的框架集命令。步骤2 根据需要在其子菜单中选择任意一个分割命令。步骤3 若要删除一个子框架，将其边框拖至页面或其

47、父框架之外即可。完善报告填写实训总结，并上交实习se告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次实训学生需要的掌握的内容较多，对于框架布局的位置要准确掌握，难度较大课题3.3添加动画教学课时2课时教学目标知识目标1、掌握在网页中添加各种动态兀素2、掌握Flash属性设置能力目标1、学会区分源文件和影片文件格式2、掌握在网页中插入各种 Flash兀素3、能为网页添加音视频元素。情感目标通过自主探究，使学生掌握软件的使用规则，培养学生 自主学习的能力。教学重点添加flash的具体操作教学难点规划一个多媒体网站导航条教学资源1 .教学场所：多媒体教室2 .教学设备：

48、安装后 Dreamweaver cs5软件的计算机3 .教学资料：辅助课件、多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程教学内容教师活动学生活动设计意图导入新课(5min)试想网页中只有义字和 图片，那么网页跟杂志报 纸还有什么区别呢？动态 兀素能够更加丰'鬲页面的 效果，是网页是一大特色。 注意：不要把动态兀素和 动态页面划上等号。将本次课的 作品展示给 学生，学生在 欣赏精美网 页的同时思 考如何完成 该作品欣赏作品并思考通过作品 来展示，引 发学生思 考如何实 现，培养学 生积极思 考问题的 能力任务一基本知识(35min)一、flash文件基本知识1、Flash 源文件：*fla2、Flash影片文件：*swf二、添加flash动画文件Flash动画是，种基于矢教授新知识，为任务二的完成做准备吸收动