2022年《网页制作》教案

1、整理文本整理文本.整理文本.湖 南 省 商 业 技 术 学 院学 期 授 课 进 度 计 划 二 年级 第 一 学期课程名称 网页制作与设计适用班级 16高21、22制定教师 易会芝审 批 签 字教研室主任年 月 日教务科长年 月 日教务院长年 月 日 2021-2021 学年第 一 学期制定整理文本整理文本.整理文本.课 时 分 配授 课周 数周课时授 课总课时其 中讲 课实 验复习考试机 动23期 末 完 成 情 况计 划课 时完 成课 时超 出 或 缺 少 课 时超 出缺 少弥 补教 学 截 至章 节 内 容备注：用蓝黑或碳素墨水钢笔填写整理文本整理文本.整理文本.教 学 计 划学情分析

2、本门课程?网页设计与制作?的教学班级为14级计算机班，计算机班对网络知识有一定的了解，根底知识较好，同时根据实际情况，特拟定本方案。大 纲 要 求通过本学期?网页设计与制作?的学习，主要要求同学们掌握网页制作的一些根本功能和操作，为以后的一些学习和工作打下较好的根底。通过学习要求同学到达以下要求：1、了解DreamweaverCS6的详细功能及操作方法。2、熟练掌握网页制作技巧。3、掌握网页标准以及网页优化和网站推广的知识。4、明确网站建设的流程和站点建设成后需要做的优化推广工作。教 学 重 点1、超级链接2、表格表单应用3、框架使用4、CSS样式教 学 难 点1、超级链接2、用表格和框架布局

3、页面3、创立数据库整理文本整理文本.整理文本.教 学 方 法讲授法、演示法、工程教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨论法等教学方法。学 期 授 课 进 度 计 划 表周次授 课 内 容课时备 注31.1 HYPERLINK l 网页制作根底知识 网站根底知识21、2周新生军训1.2 HYPERLINK l 网站建设概述 网站建设概述2实训 HYPERLINK l 新建一个网页 新建一个网页2上机42.1 HYPERLINK l 编辑和添加文本 添加和编辑文本2实训 HYPERLINK l 网站素材处理 网站素材处理2上机实训 HYPERLINK l 制作简单网页 制作简单网页2

4、上机56整理文本整理文本.整理文本.7国庆放假6机动补周一课82.2 HYPERLINK l 添加和编辑图像 添加和编辑图像62.3 HYPERLINK l 创立超级链接 创立超级链接2实训 HYPERLINK l 图像处理和创立超链接 图像处理和创立超级链接2上机9实训 HYPERLINK l 跳转菜单 跳转菜单2上机2.4 HYPERLINK l 使用表格布局页面 使用表格布局页面2实训 HYPERLINK l 表格布局实例分析 表格布局实例分析2上机10 2.5 HYPERLINK l 使用框架布局页面 使用框架布局页面2运动会充周三到周五运动会11实训 HYPERLINK l 框架布局

5、实例分析 框架布局实例分析2上机 HYPERLINK l 添加动画 3.3添加动画2 HYPERLINK l 添加音频和视频 添加音频和视频212实训 HYPERLINK l DIV与表格的转换 DIV与表格的转换2上机4.3 HYPERLINK l 晃动的图片 晃动的图片2实训 HYPERLINK l 交换图像 交换图像2上机13实训 HYPERLINK l 拼图游戏 拼图游戏2上机4.4 HYPERLINK l 修改属性特效及动态菜单制作 修改属性特效及动态菜单制作2实训 HYPERLINK l 行为应用 效果行为应用2上机整理文本整理文本.整理文本.14实训 HYPERLINK l 图片

6、展播实例 图片展播实例2上机5.1 HYPERLINK l 认识和编辑CSS 认识和编辑CSS2实训 HYPERLINK l 美化页面 美化页面2上机15实训 HYPERLINK l 应用CSS到网页中 应用CSS到网页中2上机5.2 HYPERLINK l 类型、背景和区块样式 类型、背景和区块样式2实训 HYPERLINK l 方框、边框和导航栏 方框、边框和导航栏2上机16实训 HYPERLINK l 超链接样式及设置技巧 超链接样式及设置技巧2上机学 期 授 课 进 度 计 划 表6.1 HYPERLINK l DIV布局页面 DIV布局页面26.2 HYPERLINK l 认识spr

7、y 认识Spry217实训 HYPERLINK l 调整样式 调整样式2上机6.3 HYPERLINK l 选择效劳器和使用虚拟机 选择效劳器和使用虚拟机26.4 HYPERLINK l 申请域名 申请域名218实训 HYPERLINK l 网站发布 网站发布2上机7.1 HYPERLINK l 个人主页制作 个人主页制作27.2 HYPERLINK l 筹划构思及设计流程 筹划构思及设计流程219实训 HYPERLINK l 页面布局 页面布局2上机7.3 HYPERLINK l 制作页面头部 制作页面头部27.4 HYPERLINK l 制作中间表格内容 制作中间表格内容2整理文本整理文本

8、.整理文本.20元旦放假2机动2充周一课22122222复习考试6教研组意见整理文本整理文本.整理文本.课题1.1网页制作根底知识教学课时2课时教学目标知识目标能了解网页制作软件的特点能力目标能掌握网页制作的根本概念情感目标提高学生团结合作精神，提高学生竞争意识教学重点网页的组成教学难点网页的分类，网址与域名的区分教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程课前准备导入新课讲授新课动手实践课堂小结作业布置时间分配510501555教学过程过程安排教学内容教师活

9、动 学生活动设计意图课前准备1、教师自我介绍；2、点名；3、课程介绍4、课堂要求1.自我介绍2.按照花名册点名3.课程介绍4.统计学情5.提出期望与要求1.班长统计座次表2.学生自我介绍3.反响学情4.推荐课代表。使师生尽快互相认识，并促使学生答题了解我们的课程。导入新课本次课是本学期第一次上课，简单介绍本课程：1、网页设计相关级别及其薪资待遇2、网页设计的就业方向及其公司类型以提问的方式了解学生对网页设计的认知学生之间相互讨论，加深对网页设计的认识提问跟就业和薪资有关的问题，抓住学生注意力。整理文本整理文本.整理文本.任务一讲授新课一、网页设计介绍1、网站是企业向用户和网民提供信息包括产品和

10、效劳的一种方式，是企业开展电子商务的根底设施和信息平台，离开网站去谈电子商务是不可能的。2、企业的网站被称为“网络商标，也是企业无形资产的组成局部，而网站是Internet上宣传和反映企业形象和文化的重要窗口。二、网页设计的要点1、明确建站目标和需求。2、网站主题鲜明。3、网站版式设计。4、色彩在网站设计中的作用。5、网站设计形式与内容统一。三、网站设计级别1、新手入行2、跳槽阶段3、稳定阶段4、大师阶段四、网页设计公司类型1、门户游戏类2、企业部门类3、网站建设类4、互动设计类五、网页三剑客Dreamweaver： 可视化页面设计、网站管理简单介绍网页知识提问：网页设计要点并将学生分组进行讨

11、论讲述网站设计级别，引导学生对这个行业向往，并鼓励学生向大师阶段努力简单介绍学生将来从事本行业的范围介绍网页制作需要的软件吸收新知识并思考生活中常见网页设计知识分组讨论，并派出代表来总结思考自己的定位了解本行业的现状认识软件根本组成讲述根底知识，为后面学习打下根底加强学生之间交流沟通能力，加深学生对网页设计要点理解引导学生了解这个行业引导学生了解本行业从事范围提前引导学生认识dreamweaver cs5 为后面软件学习打下根底整理文本整理文本.整理文本.Fireworks 页面图象设计工具Flash 动画制作六、网页根底知识1、网页与网站的区别1网页是WWW系统中信息的根本单位，简单来说，就

12、是后缀名为htm的文件。2网站是指存放在网络效劳器上的完整信息的集合体。2、网页的组成1文字：最直接、通用、容易的沟通方式2图片：网页的一大特点图文并茂3动画：1995年，Sun公司开发了Java语言，用户可以创立能调用图片和声音的多媒体应用小程序4超链接：要通过一种方式把各独立的网页整和在一起，使之构成一有机整体，而这种链接页面的功能叫超链接。5特殊组件：图片与动画可算是最常见的特殊组件。3、主页Homepage引导访问者浏览网站。 index、main、default4、网页空间给学生灌输网页设计的根本知识做笔记，识记教师讲述的知识这些知识都是学网页设计最根本的根底知识，学生根底知识薄弱，

13、必须了解这些才能学习后面的内容整理文本整理文本.整理文本.在Internet上申请的一个存储空间，用以存放网页。5、网址和域名 IP地址域名：与IP地址相对应，唯一性，善于识别最右边：国家中国cn其次：机构商业机构com再次：子网名称最左边：效劳器类别web效劳器www6、网页的分类静态页面与动态页面7、认识网站门户网站：sina个人网站：明星专业网站：医疗职能网站：政府任务二动手实践根据网页设计要点，以小组为单位确定一个网站主题，小组讨论需要的步骤以及素材巡回指导，给予学生帮助小组讨论，相互沟通加深学生对网页设计要点学习课后作业按照课堂分组课后进行讨论每组确定一个网站主题方向。每组设计一个网

14、站调查问卷。课堂小结网页设计师就业方向网站设计流程常见网站整理文本整理文本.整理文本.教学反思本次课是网页设计第一次上课，主要讲述一些网页根底知识，学生根底知识薄弱，需要加强，整体来说计算机班根底知识要好于电子商务班板书一、网页设计介绍二、网页设计的要点三、网站设计级别四、网页设计公司类型五、网页三剑客六、网页根底知识课题1.2网站建设概述教学课时2课时教学目标知识目标了解做网站的准备工作，掌握站点的建立。能力目标能了解网站开发的根本流程。能掌握网站开发的根本原那么。能学会站点的建立与管理。情感目标提高学生团结合作精神，增强小组合作能力教学重点站点的建立教学难点如何规划好一个网站教学资源1.教

15、学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件、多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图整理文本整理文本.整理文本.课前准备1、搜集了解网站开发的根本流程。2、网站设计、制作过程中的一些原那么、本卷须知。配合学生搜索资料及解答疑问网上搜索教师提出问题，了解网站设计事项培养学生自主学习能力导入新课(5min)网站设计大致流程是哪些？每组派出一个代表阐述本组课前搜集的资料听取学生的观点并给予一定的知道阐述观点，组员之间相互讨论锻炼学生的语言表达能力和分析能力任务一讲授新课(35m

16、in)网站设计流程架构内容信息搜集整理资料规划网站结构网页制作整合网站效果测试网站上传网站推广更新维护任务二分组讨论(40min)网站开发原那么确定主题讨论：网站是靠什么赢利的？2、规划站点结构1结构设计2目录结构设计3形象设计4主页设计5其他页面设计6企业站点设计7为站点设计目标对象访问率1、确定网站主题的建议2、给网站取名3、提示决定网站的性质小组讨论，相互沟通加深学生对网页设计要点学习整理文本整理文本.整理文本.三、网页版面布局设计1、版面布局的原那么1主次清楚、中心突出2大小搭配、相互照应3图文并茂、相得益彰4动静适度、平衡对称2、页面布局的类型1“国字型2框架型3标题正文型4封面型5

17、综合型四、规划站点1、建立站点目录2、站点规划 规划站点结构是利用不同的文件夹将不同的网页内容分门别类的保存。3、创立导航草图五、搜集素材1、搜集并制作素材无论是文字素材还是图片、动画素材，都应注意其来源是否注明版权所有。网站素材要为网站主题效劳。2、整理素材原始素材、编辑处理好的素材3、命名标准六、创立站点整理文本整理文本.整理文本.1、不使用效劳器技术2、本地编辑3、不连接到远程效劳器七、管理站点1编辑现有站点2删除已有站点课后作业(5min)根据这次课的内容、本卷须知，构思一个明确的网站主题，并将站点结构的规划用文件夹表示出来课堂小结(5min)网站设计确定主题网站设计流程站点管理教学反

18、思本次主要讲述站点的建立和管理，课程较简单，学生掌握较好板书一、网站设计流程二、网站开发原那么三、网页版面布局设计四、规划站点五、搜集素材六、创立站点七、管理站点实训课题新建一个网页实训课时2课时实训目标熟悉Dreamweaver cs4界面制作简单网页实训重点学会在网页中输入文字、插入图片等掌握简单代码的编写实训难点代码的编写整理文本整理文本.整理文本.实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程内容操作要求及步骤任务一新建网页1双

19、击翻开软件新建HTML网页网页名字为nes01输入以下文字然后保存2、文字要求：标题 宋体 二号 蓝色 正文：五号 宋体 加粗任务二新建网页2制作如下网页 素材见文件夹 网页命名文字为index 保存在文件夹中上交给老师整理文本整理文本.整理文本.操作步骤：新建HTML网页输入文字将标题设置为36号，蓝色，宋体插入两根红色的水平线插入时间插入商标插入背景图片保存完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次课是学生第一次上机，制作一个较简单的网页，学生存在对DW界面不熟，操作不熟练等缺点，需加强操作课题2.1编辑和添加文本教学课

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

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

22、殊字符二、编辑文本1、根本样式设置2、设置段落格式3、创立列表三、实例操作教学反思本次课是 一个根底知识内容，文本是一个网页必不可少的内容，对网页设计至关重要，学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。实训课题网站素材处理实训课时2课时实训目标掌握创立本地站点和远程站点学会修改站点和多站点的管理实训重点站点的管理实训难点站点的管理实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。整理文本整理文本.整理文本.实训过程内容操作要求及步骤

23、任务一创立站点1、熟悉DW界面2、在D盘根目录创立一个站点名称为?我的足球网?，本地站点文件夹为jcwww，如以下图所示任务二设置默认图像文件夹利用教师所给素材，制作简单网页?我的偶像?，素材见文件夹完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等，学生操作较好，大局部能完成任务。实训课题制作简单网页实训课时2课时实训目标掌握新建网页、编辑文字、处理图像新建站点插入水平线、空格、自动更新时间实训重点制作简单网页流程实训难点综合运用HTML工具实训方法上机实训实训准备教案、素材、案

24、例、教材、计算机机房整理文本整理文本.整理文本.实训要求对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程内容操作要求及步骤任务一足球偶像网页熟悉DW菜单栏常用界面完成以下简单网站，素材见素材库完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次上机内容较多，主要考察学生综合性的练习，如图片的插入，文字的编辑及水平线的插入等，需要学生对前面的知识非常熟悉，13高12班整体班级学习气氛较好，所有学生都能按时上交作业，值得表扬课题2.2添加和编辑

25、图像教学课时2课时教学目标知识目标掌握图像裁剪、重新取样、亮度、锐化的设置2、掌握图像属性设置能力目标掌握运用软件对图像处理的能力整理文本整理文本.整理文本.情感目标提高学生团结合作精神，提高学生竞争意识教学重点图像的编辑教学难点图像的编辑教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图导入新课(5min)前面介绍网页的时候有说过，在保证画质的情况下，图片的数据量越小越好。问题：如果一张图片数据量很大，我们该如何编辑？演示

26、cluo.jpeg这张图片，分析数据量为93k、画质为1024*768规格的图片如何更改数据量和规格？分组讨论用什么方法来更改数据量和规格提出问题引发学生思考，引出这次课的主题任务一编辑图片(30min)给出cluo.jpeg和gg.jpeg两张图片进行比照，提出任务：如何从cluo.jpeg变化到gg.jpeg？具体操作步骤：翻开DW软件插入图像cluo.jpeg，对图片属性设置如下目标值：编辑完成后与原图像进行比照，会发现数据量、规格都发生变化，但浏览网页更友好对图片宽、高、裁切、重新采样、锐化等设置进行演示观看教师演示，并思考cluo.jpeg变成cluo.jpeg的方法引导学生学习理论

27、的时候思考如何理论运用到实践整理文本整理文本.整理文本.任务二制作翻转图像(50min)概念：在网页浏览中，有时当鼠标移到某个图像上或者单击时，图像会变成另外一副图像。浏览时效果：鼠标放上去时效果：鼓励学生小组讨论如何完成翻转图像效果；给学生展示翻转图像做出来的效果，然后讲解如何才能完成这个效果小组讨论如何完成该效果并进行尝试课堂小结(5min)如何编辑图像制作翻转图像效果板书设计一、编辑图像重新采样裁剪、锐化二、翻转图像制作效果教学反思本次教学学生较感兴趣，特别是鼠标经过的图像，学生完成得较好，值得鼓励 课题2.3创立超级链接教学课时2课时教学目标知识目标掌握创立超链接的方法掌握相对链接和绝

28、对链接的区别整理文本整理文本.整理文本.创立锚点链接能力目标提高学生学习创作能力情感目标提高学生团结合作精神，提高学生竞争意识教学重点正确认识路径理解相对链接和绝对链接的区别教学难点添加超链接、相对路径、绝对路径教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图导入新课(5min)每次浏览网页的时候点击某个文字或者图片，能自动跳转到另一个页面，提问：这样的链接形式叫什么？如何实现？进入新浪网给学生演示超级链接的效果并进行提问

29、观看效果并讨论如何才能实现该效果以提问且学生较熟悉的浏览网页的方式吸引学生的注意任务一创立超级链接20min一、新建站点jcww，并在站点内新建默认图像文件夹images，将网页Index.HTML里的“我与足球链接到news.HTML，目标为-blank；“足球新闻链接到“逢入京使.HTML，目标为-new；“足球明星链接到“我与足球网.HTML，目标为-self。二、比照每个目标不同，网页新建窗口不同并进行总结给学生演示如何插入链接；演示不同目标新建窗口的区别观看教师演示，并思考-new、-blank、-self几个目标值窗口的区别让学生熟悉DW添加超级链接的界面任务二相对链接和绝对链接(

30、20min)任务三锚点链接(35min)区别：相对链接是指链接的地址是本站点之内的对象；绝对链接是指链接的地址是远程对象，用域名或IP作为地址一、概念：在本页进行链接的叫做锚点，一般在长篇的文章或技术文档中是使用，链接到某个特殊的段落。演示教材P60实例演示如何插入锚点链接思考并正确理解相对链接和绝对链接概念观看教师演示并思考锚点链接的应用正确理解相对链接和绝对链接，为下面的学习打下根底锚点链接应用比较广泛，学生需要掌握并应用整理文本整理文本.整理文本.二、翻开第4章/4-3/jieshao.html网页，演示锚点链接效果课堂小结(5min)页面与页面之间的超链接相对链接和绝对链接锚点链接本页

31、之间链接作业布置(5min)网上查找哪些页面常用页面与页面链接，哪些是用锚点链接并总结利用教材第4章/4-3/jieshao.html的素材，自己动手创立锚点链接板书创立超级链接的方法与步骤相对链接和绝对链接创立锚点链接教学反思本次课主要介绍超链接的常用方法，超链接在学生上网中随处可见，较易理解，学生之间的讨论也非常剧烈，较好。实训课题图像处理和创立超链接实训课时2课时实训目标学会利用DW处理图像掌握创立超级链接的方法理解相对链接和绝对链接概念实训重点图片处理超级链接实训难点超级链接的使用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求对照实习报告的要求，完成上机任务；任务完

32、成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。整理文本整理文本.整理文本.实训过程 操作要求及步骤任务一处理图像将图片6.jpeg修改为尺寸为240*160，数据量设置为8K左右6-11k都可以并进行裁剪和锐化等设置，熟悉图片处理几个设置，设置完成后以网页的形式保存，保存在文件夹中，保存名称为“xiugai.html任务二超级链接将教师发送的Index.HTML网页进行编辑，将“我与足球四个字链接到“我与足球网.html，目标为-self；将“足球新闻四个字链接到“逢入京使.html， 目标为-blank；将“足球明星四个字链接到“news.h

33、tml， 目标为-new。修改页面属性：在页面属性对话框中，设置链接选项中的大小为16像素，链接颜色为“#6666cc，变换图像颜色为“#ff6600，已访问链接为“#663366，活动链接为“#99cc00，下划线样式为“仅在变换图像时显示下划线。设置的对话框如以下图所示：完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次实习内容较多，大局部学生能在规定时间内完成任务，较好。实训课题跳转菜单实训课时2课时实训目标掌握图像热点链接的使用掌握脚本链接掌握链接检查器的使用实训重点路径的正确使用实训难点链接的运用及链接检查器的使用整理文本

34、整理文本.整理文本.实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程 操作要求及步骤任务一创立图像热点链接在地图中创立热点链接任务二制作跳转菜单翻开news.HTML网页，在如以下图所示的位置插入图片，图片为“鼠标经过的图片，链接到本页的“冠军杯新闻处提示：利用锚点链接翻开“jieshao.html网页，在下载资源文本中将教师提供的“qq.rar放入站点，做成的效果是点击“下载资源就能下载“qq.rar，同理在“联系我们中设置邮件下载

35、完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次实习内容较多，大局部学生能在规定时间内完成任务，较好。整理文本整理文本.整理文本.课题2.4使用表格布局页面教学课时2课时教学目标知识目标1、了解表格在网页设计中的作用。2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格属性的设置方法，能够在单元格中正确插入文字和图片。3、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。能力目标1、利用比照学习，培养学生知识迁移的能力。2、通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学

36、生的发散思维能力情感目标通过自主探究，使学生掌握软件的使用规那么，培养学生自主学习的能力。教学重点1、了解表格在网页设计中的重要作用。2、掌握插入、编辑表格的方法及表格的属性设置。3、掌握单元格属性的设置。教学难点表格的嵌套在网页设计中的应用教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图 导入新课(5min)1展示两个页面并进行比较：一个使用表格布局，表格边框隐藏，其页面工整，文本、图片摆放对称，具有一定的规律；另一个页

37、面凌乱，图文混杂，摆放杂乱。问题1：你喜欢那个页面的布局？展示并引导学生思考学生仔细观察并比较两个网页，讨论、交流，回忆Word中学习过的表格，领悟表格在Dreamweaver通过比照学习，培养学生知识迁移的能力。整理文本整理文本.整理文本.问题2：用什么方法可以到达第二个页面的效果？ 中的作用。任务一网页框架(25min)一、仿照网页3的样式，制作一个网页框架。在学生自主探究的根底上，教师总结插入表格的一般方法。并插入一个2行1列，表格宽度800像素，边框粗细0像素的表格。演示如何插入表格并对表格的设置分析网页3，找出其中使用的表格，仿照插入图像的方法，探索插入表格的方法。插入表格，通过实际

38、操作强化对表格属性的认识。引导学生学习理论的时候思考如何理论运用到实践动手分析和进行创意设计，培养学生的模仿以及创新能力任务二表格合并和拆分(20min)二、在任务一的根底上，探索表格根本属性：合并与拆分单元格；单元格的宽度与高度；用实例来演示如何合并和拆分单元格根据需要，插入图片，在第二行拆分为两列，左边放文字，右边放图通过实例，培养学生分析问题、解决问题的能力。整理文本整理文本.整理文本.任务三表格嵌套(30min)表格的嵌套。在大表中插入一个小的表格，这是创立复杂表格样式的有效方法。要提示学生不要嵌套过多。展示几种常见的图文混排样式，让学生选择自己喜欢的一种完成网页。完善网页，制作完成的

39、同学把网页通过FTP上传。让学生自主发挥，充分展示个性风采课堂小结(5min)网页框架和表格根本操作表格的合并和拆分表格嵌套课堂作业(5min)完成教材第五章/Index.html的表格教学反思通过表格的嵌套及分析，对页面进行布局。需要加强学生对表格合并和拆分的运用 实训课题表格布局实例分析实训课时2课时实训目标能运用表格为页面布局能掌握表格的嵌套操作能做出“超越公司简介页面。实训重点1、掌握插入、编辑表格的方法及表格的属性设置。2、掌握单元格属性的设置。实训难点表格的嵌套在网页设计中的应用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求对照实习报告的要求，完成上机任务；任务

40、完成后及时要求教师考评；整理文本整理文本.整理文本.完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程 操作要求及步骤任务一创立图像热点链接制作如以下图所示的界面：操作要求：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区12行3列：788px宽，500px高 788=1

41、50+10+628 500=5+4952A、maintop区 合并单元格3B、mainleft区嵌套13行1列表格：145px宽，2px间距 第1行与第7行：高25px第2-6行：高36px，输入文本 第8-13行：高40px，插入图片3C、mainmiddle区 空单元格4D、mainright区嵌套3行1列表格：495px高整理文本整理文本.整理文本. 495=30+375+90第一行：输入文本第二行：嵌套1行2列表格(628px=304+324第一列：输入文本第二列：嵌套2行1列表格300px宽，右对齐375px高=220+160 第1行：插入图片 第2行：嵌套3行5列表格 高160=3

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

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

44、框架是一种网页布局技术。二、创立框架与框架集1、手动设计2、插入预定义框架三、创立嵌套框架四、选择框架和框架集1、在编辑区中选择2、在框架面板中选择五、删除框架六、保存框架与框架集文件加强学生对框架布局的理解并进行简单操作认真听讲并对概念进行消化理解学生只有在牢固的掌握了根本概念后才能为任务二的学习打下根底整理文本整理文本.整理文本.任务二实例操作(40min)完成如以下图所示的页面：要求如下：topFrame：高：100px表格：2x2，宽-788px，高-100px高：100=75+25宽：788=128+660第一行：Logo+Banner第二行：当前页位置信息+导航栏导航栏：1x7表格

45、宽：660px高：25px字号：9pt行高：14ptmainFrame：表格：2x2宽：788Px，高：400Px边框：5px，间距：5px表格：3x1宽：788px，高：45px边框：0px，间距：0px将学生分7组，并引导学生分组讨论如何完成如以下图的效果讨论如何才能实现如以下图的效果并总结通过实例，培养学生分析问题、解决问题的能力。课堂小结(5min)框架根本概念二、创立框架与框架集三、创立嵌套框架四、选择框架和框架集五、删除框架六、保存框架与框架集文件课后作业(5min)设计一系列框架型页面，然后将之实现。要求结合超链接的相关知识。整理文本整理文本.整理文本.教学反思本次主要讲述框架和

46、框架集布局页面，运用实例学生加深了对框架的理解，运用起来得心应手。14高31班学生学习气氛待加强 实训课题框架布局实例分析实训课时2课时实训目标能掌握布局表格和布局单元格的根本操作。能在布局模式下对页面进行整体布局。实训重点掌握布局表格和布局单元格的根本操作。实训难点工程的实现实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程 操作要求及步骤整理文本整理文本.整理文本.任务一利用框架排版步骤1 选择文件菜单栏中的新建命令，创立一个新的页

47、面，并将其命名为“个人主页。 步骤2 选择插入工具栏中布局任务栏中的框架命令，单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架命令。步骤3 弹出框架标签辅助功能属性对话框，将网页中框架的各个局部进行命名。步骤4 选择窗口菜单栏中框架命令。步骤5 右侧的面板中就参加了框架面板，选中“topFrame框架进行编辑。 步骤6 页面下方出现了“topFrame框架的属性面板。对“top Frame框架进行编辑。 步骤7 选中“mainFrame框架进行编辑，页面下方出现了“mainFrame框架的属性面板，对“mainFrame框架进行编辑。 步骤8 选中“leftFrame框架进行编辑，页面下方出现了

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

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

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

51、文件：*.swf二、添加flash动画文件Flash动画是一种基于矢量格式的多媒体动画元件，它体积小，其扩展名为.swf。Flash动画被广泛应用于网页中。操作步骤：1.光标定位2.插入flash文件3.保存、预览三、添加flash按钮Dreamweaver中内置了一些flash按钮，用户可以很方便将他们添加到网页中。注意：在页面中添加flash按钮和flash文本之前必须先保存网页。操作步骤：1.光标定位2.插入flash按钮教授新知识，为任务二的完成做准备吸收动画新知识让学生吸收新知识，为后面的实例操作打下根底整理文本整理文本.整理文本.3.设置按钮属性4.保存、预览四、添加flash文本

52、插入媒体Flash文本五、为网页添加音频插入媒体插件任务二拓展训练(40min)要求：制作如以下图所示网页，插入三行一列表格，插入Flash动画要求动画大小宽高为400*300，第二行插入图片，第三行输入文字并排版，最后得到的结果如以下图所示：课堂小结(5min)添加多媒体元素使页面具有动态效果插入Flash按钮和Flashpaper插入播放器课后作业(5min)用Flash按钮或文本制作一个导航条，然后为页面添加背景音乐。教学反思学生对动画、音视频有敏锐的触觉，学习起来颇有兴致。 整理文本整理文本.整理文本.实训课题添加音频和视频实训课时2课时实训目标掌握插入表格、图片、背景图片设置掌握插入

53、Flash文本、Flashpaper、Flash视频、背景音乐等实训重点Flash属性、Flash元素实训难点Flash元素实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程 操作要求及步骤任务制作Flash网页要求：利用DW cs3版本一、插入swf动画新建站点和默认图像文件夹新建网页文件Flash.html，插入1行2列的表格，表格宽度720px，边框粗细、表格间距、表格边距都为0.选择第二个单元格设置宽度为600px，高度设置为1

54、00px。然后在第一个单元格插入logo.jpeg，并且水平和垂直居中；在第二个单元格里插入背景图片选择单元格点击拆分找到td在td后空一格选择background选择bj.jpeg图片插入，并将图片设置为宽高600px，100px。保存在第二个单元格插入wangyeba 005的Flash，并将Flash设置为宽高600px，100px规格，并设置Flash为透明二、插入Flash按钮：1、利用DW cs3版本插入导航栏：插入一行一列的表格，宽度为720px，边框粗细、表格间距、表格边距都为0，居中对齐。然后点击插入Flash按钮，选择以下图所示的按钮并输入文字，如以下图：2、然后在导航栏的

55、下一行插入一行2列的表格，宽度为720px，边框粗细、表格间距、表格边距都为0，居中对齐。左边单元格设置为宽200px，然后再嵌套一个表格，3行1列宽度为100%，边框粗细、表格间距、表格边距都为0，居中对齐。右边单元格插入一行一列宽度为98%的单元格居中对齐，边框为1，颜色为#FF00FF，然后在此表格中插入Flash文本，字体为宋体，大小30px，输入文本：我的个性空间，颜色为#FF0000，滚动颜色设置为：#00FF00，另存为wen.swf，如以下图所示：整理文本整理文本.整理文本.插入Flashpaper：首先在电脑上安装Flashpaper软件，然后将“Flash.docWord文

56、件转换为Flash.swf文件，将文件插入到网页中，设置Flashpaper宽高分别为480和400px三、插入播放器1、在左边的三个单元格范围中，将光标放入第一个单元格，点击插入媒体中的图像查看器，将Flash命名为abc，并将播放器设置为宽高180,1352、点击右边的Flash元素，对图片进行设置，选择选项imageURLs表示图片的位置，选择你需要展播的图片，showControls显示控制条设置为否，slideAutoPlay自动播放设置为是，slideDelay每张图切换停留时间设置为2，slideloop循环播放是3、在左边第二个单元格插入媒体插件，插入sound声音，设置插件高

57、宽分别为180,41，参数设置为，autostart false4、插入背景音乐完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次实训内容较多，网页添加音频和视频使得网页内容更加丰富多彩，学生兴趣较浓课题4.1编辑和创立AP DIV元素教学课时2课时教学目标知识目标1、掌握层的概念2、掌握如何编辑AP DIV层3、掌握层的嵌套能力目标1、掌握层的根本操作。2、能将层和时间轴联系起来制作漂浮效果整理文本整理文本.整理文本.情感目标通过自主探究，使学生掌握软件的使用规那么，培养学生自主学习的能力。教学重点层的根本操作教学难点层的高级应用

58、教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件、多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图 导入新课5min层是一种HTML页面元素，可被放在页面的任意位置，在网页排版定位方面具有独特优势。展示课前准备的层的叠加，引导学生思考：如何制作这样的网页？欣赏作品并思考通过作品展示，引出本次课的主题任务一根本知识20min任务二综合实例25min一、创立AP DIV元素什么是Ap Div？AP元素绝对定位元素, 是一种HTML网页元素，一般称为 “层。即网页内容的容器，包

59、含文本，图像或其他任何可以在HTML文档正文中放入的内容。且可以精确定位在网页中的任何地方。二、编辑AP DIV元素1、调整层的大小2、层的层次关系3、层的首选设置4、层的对齐三、制作如以下图的网页强调重点：1、作为容器，可以放置其他网页元素。2、灵活定位。分组让学生讨论如何完成左图所示的任务：如何制作如图立体式的叠加图片如何绘制大小一致且背景颜色为粉色的图层？理解AP DIV元素并做好笔记分组讨论教师提出的两个任务并提出解决方案主要是以根本知识讲解为主，为任务二的综合实例打下理论根底稳固任务一所学的理论知识整理文本整理文本.整理文本.任务三30min四、层的可见性设置1、AP面板的使用选择、

60、命名、隐藏、次序2、层的可见性3、简单的层特效五、实例要求：在上述网页制作的根底上，将“网“制分别修改成“开“关，并对其隐藏和显示属性设置，点击控制图片的显示和隐藏将做好的效果图演示给学生并要求学生分组讨论如何实现该要求讨论并尝试操作稳固学生对行为属性的理解课堂小结5min如何创立AP DIV层编辑AP DIV层实例操作课后作业5min制作如以下图的网页，提示：利用层的布局整理文本整理文本.整理文本.教学反思通过编辑和创立APDIV层来实现图片的立体感，丰富了网页内容，通过实例演示加深了学生对ap层的认识 课题4.2层的可见性设置教学课时2课时教学目标知识目标1、掌握AP层的创立与属性2、掌握