网页制作教案设计.docx

《网页制作教案设计.docx》由会员分享，可在线阅读，更多相关《网页制作教案设计.docx（141页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、根底学问较好，同时依据实际状况，特拟定本支配。大 纲 要 求通过本学期网页设计与制作的学习，主要要求同学们驾驭网页制作的一些根本功能与操作，为以后的一些学习与工作打下较好的根底。通过学习要求同学到达以下要求：1、理解DreamweaverCS6的具体功能及操作方法。2、娴熟驾驭网页制作技巧。3、驾驭网页标准以及网页优化与网站推广的学问。4、明确网站建立的流程与站点建立成后需要做的优化推广工作。教 学 重 点1、超级链接2、表格表单应用3、框架运用4、CSS款式教 学 难 点1、超级链接2、用表格与框架布局页面3、创立数据库教 学 方 法讲授法、演示法、工程教学法、合作学习、对话、任务驱动法、头

3、脑风暴、小组讨论法等教学方法。学 期 授 课 进 度 计 划 表周次授 课 内 容课时备 注31.1网站根底学问21、2周新生军训1.2网站建立概述2实训 新建一个网页2上机42.1添加和编辑文本2实训 网站素材处理2上机实训 制作简洁网页2上机567国庆放假6机动补周一课82.2添加和编辑图像62.3创立超级链接2实训 图像处理和创立超级链接2上机9实训 跳转菜单2上机2.4运用表格布局页面2实训 表格布局实例分析2上机10 2.5运用框架布局页面2运动会充周三到周五运动会11实训 框架布局实例分析2上机3.3添加动画2添加音频和视频212实训 DIV与表格的转换2上机4.3晃动的图片2实训

4、 交换图像2上机13实训 拼图嬉戏2上机4.4修改属性特效及动态菜单制作2实训 效果行为应用2上机14实训 图片展播实例2上机5.1相识和编辑CSS2实训 美化页面2上机15实训 应用CSS到网页中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机动

5、2充周一课22122222复习考试6教研组意见课题1.1网页制作根底学问教学课时2课时教学目的学问目的能理解网页制作软件的特点实力目的能驾驭网页制作的根本概念情感目的进步学生团结合作精神，进步学生竞争意识教学重点网页的组成教学难点网页的分类，网址与域名的区分教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：协助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程课前准备导入新课讲授新课动手理论课堂小结作业布置时间安排510501555教学过程过程支配教学内容老师活动 学生活动设计意图课前准备1、老师自我介绍；2、点名；3

6、、课程介绍4、课堂要求1.自我介绍2.依据花名册点名3.课程介绍4.统计学情5.提出期望与要求1.班长统计座次表2.学生自我介绍3.反响学情4.举荐课代表。使师生尽快互相相识，并促使学生答题理解我们的课程。导入新课本次课是本学期第一次上课，简洁介绍本课程：1、网页设计相关级别及其薪资待遇2、网页设计的就业方向及其公司类型以提问的方式理解学生对网页设计的认知学生之间互相讨论，加深对网页设计的相识提问跟就业与薪资有关的问题，抓住学生留意力。任务一讲授新课一、网页设计介绍1、网站是企业向用户与网民供应信息（包括产品与效劳）的一种方式，是企业开展电子商务的根底设施与信息平台，分开网站去谈电子商务是不行

7、能的。2、企业的网站被称为“网络商标”，也是企业无形资产的组成局部，而网站是Internet上宣扬与反映企业形象与文化的重要窗口。二、网页设计的要点1、明确建站目的与需求。2、网站主题显明。3、网站版式设计。4、色彩在网站设计中的作用。5、网站设计形式与内容统一。三、网站设计级别1、新手入行2、跳槽阶段3、稳定阶段4、大师阶段四、网页设计公司类型1、门户嬉戏类2、企业部门类3、网站建立类4、互动设计类五、网页三剑客1、 Dreamweaver： 可视化页面设计、网站管理2、 Fireworks 页面图象设计工具3、 Flash 动画制作六、网页根底学问1、网页与网站的区分（1）网页是WWW系统

8、中信息的根本单位，简洁来说，就是后缀名为htm的文件。（2）网站是指存放在网络效劳器上的完好信息的集合体。2、网页的组成（1）文字：最干脆、通用、简洁的沟通方式（2）图片：网页的一大特点图文并茂（3）动画：1995年，Sun公司开发了Java语言，用户可以创立能调用图片与声音的多媒体应用小程序（4）超链接：要通过一种方式把各独立的网页整与在一起，使之构成一有机整体，而这种链接页面的功能叫超链接。（5）特殊组件：图片与动画可算是最常见的特殊组件。3、主页Homepage引导访问者阅读网站。 index、main、default4、网页空间在Internet上申请的一个存储空间，用以存放网页。5、

9、网址与域名IP地址域名：与IP地址相对应，唯一性，擅长识别最右边：国家（中国cn）其次：机构（商业机构com）再次：子网名称最左边：效劳器类别（web效劳器www）6、网页的分类静态页面与动态页面7、相识网站门户网站：sina个人网站：明星专业网站：医疗职能网站：政府简洁介绍网页学问提问：网页设计要点并将学生分组进展讨论讲解并描述网站设计级别，引导学生对这个行业憧憬，并激励学生向大师阶段努力简洁介绍学生将来从事本行业的范围介绍网页制作需要的软件给学生灌输网页设计的根本学问汲取新学问并思索生活中常见网页设计学问分组讨论，并派出代表来总结思索自己的定位理解本行业的现状相识软件根本组成做笔记，识记老

10、师讲解并描述的学问讲解并描述根底学问，为后面学习打下根底加强学生之间沟通沟通实力，加深学生对网页设计要点理解引导学生理解这个行业引导学生理解本行业从事范围提早引导学生相识dreamweaver cs5 为后面软件学习打下根底这些学问都是学网页设计最根本的根底学问，学生根底学问薄弱，必需理解这些才能学习后面的内容任务二动手理论依据网页设计要点，以小组为单位确定一个网站主题，小组讨论需要的步骤以及素材巡回指导，赐予学生扶植小组讨论，互相沟通加深学生对网页设计要点学习课后作业1、 依据课堂分组课后进展讨论2、 每组确定一个网站主题方向。3、 每组设计一个网站调查问卷。课堂小结一、 网页设计师就业方向

11、二、 网站设计流程三、 常见网站教学反思本次课是网页设计第一次上课，主要讲解并描述一些网页根底学问，学生根底学问薄弱，需要加强，整体来说计算机班根底学问要好于电子商务班板书一、网页设计介绍二、网页设计的要点三、网站设计级别四、网页设计公司类型五、网页三剑客六、网页根底学问课题1.2网站建立概述教学课时2课时教学目的学问目的理解做网站的准备工作，驾驭站点的建立。实力目的1. 能理解网站开发的根本流程。2. 能驾驭网站开发的根本原则。3. 能学会站点的建立与管理。情感目的进步学生团结合作精神，增加小组合作实力教学重点站点的建立教学难点如何规划好一个网站教学资源1.教学场所：多媒体教室2.教学设备：

12、安装有Dreamweaver cs5软件的计算机3.教学资料：协助课件、多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程支配教学内容老师活动 学生活动设计意图课前准备1、搜集理解网站开发的根本流程。2、网站设计、制作过程中的一些原则、留意事项。协作学生搜寻资料及解答疑问网上搜寻老师提出问题，理解网站设计事项培育学生自主学习实力导入新课(5min)网站设计大致流程是哪些？每组派出一个代表阐述本组课前搜集的资料听取学生的观点并赐予肯定的知道阐述观点，组员之间互相讨论熬炼学生的语言表达实力与分析实力任务一讲授新课(35min)一、 网站设计流程架构内容信息搜集整理资料规划网站构造网

13、页制作整合网站效果测试网站上传网站推广更新维护任务二分组讨论(40min)二、 网站开发原则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）删除已有站点1、确定网站主题的建议2、给网站取名3、提示确定网站的性质小组讨论，互相沟通加深学生对网页设计要点学习课后作业(5min)依据这次课的内容、留意事项，构思一个明确的网站主题，并将站点构造的规划用文件夹表示出来课堂小结(5min)一、 网站设计确定主题二、 网站设计流程三、 站点管理教学反思本次主要讲

15、解并描述站点的建立与管理，课程较简洁，学生驾驭较好板书一、网站设计流程二、网站开发原则三、网页版面布局设计四、规划站点五、搜集素材六、创立站点七、管理站点实训课题新建一个网页实训课时2课时实训目的1、 熟识Dreamweaver cs4界面2、 制作简洁网页实训重点1、 学会在网页中输入文字、插入图片等2、 驾驭简洁代码的编写实训难点代码的编写实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求1. 比照实习报告的要求，完成上机任务；2. 任务完成后刚好要求老师考评；3. 完善实习报告，填写实训总结；遵守实训纪律，不嬉戏，不睡觉，不高声议论。实训过程内容操作要求及步骤任务一新建网

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

17、学问目的1、 驾驭输入与编辑文本2、学会插入文本，驾驭设置文本格式的方法实力目的驾驭网页中三种常见列表的创立，及其各自的特点情感目的进步学生自主学习与团队竞争意识教学重点插入与编辑文本教学难点创立列表教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：协助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程支配教学内容老师活动 学生活动设计意图导入新课（5min）提问：在DW中输入文本与在Word中输入文本有何区分？将学生分组，并提出问题，引导学生小组之间讨论并总结讨论并思索以讨论的形式进步学生之间的沟通沟通任务一插入

18、文本(20min)一、插入文本1、 插入一般文本2、 插入不换行空格3、 插入程度线4、 插入日期与特殊字符二、编辑文本1、根本款式设置2、设置段落格式3、创立列表演示并强调重点细致听讲并登记重点文本插入是根底学问，为下面任务二打下根底任务二(55min)完成以下网页实例：1、 引导学生讨论该网页由哪几局部组成2、 引导学生小组组内分工，完成小模块小组讨论本实例即是对任务一的稳固，也为下一次课打下根底作业布置（5min）1、 找一篇文章输入至页面中，然后利用所学学问，对其进展格式编排课堂小结（5min）一、 插入文本二、 编辑文本板书一、插入文本5、 插入一般文本6、 插入不换行空格7、 插入

19、程度线8、 插入日期与特殊字符二、编辑文本1、根本款式设置2、设置段落格式3、创立列表三、实例操作教学反思本次课是 一个根底学问内容，文本是一个网页必不行少的内容，对网页设计至关重要，学生必需牢牢驾驭文本的各个要点。目前来说学习爱好较好。实训课题网站素材处理实训课时2课时实训目的1、 驾驭创立本地站点与远程站点2、 学会修改站点与多站点的管理实训重点站点的管理实训难点站点的管理实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求1、 比照实习报告的要求，完成上机任务；2、 任务完成后刚好要求老师考评；3、 完善实习报告，填写实训总结；4、遵守实训纪律，不嬉戏，不睡觉，不高声议论。

20、实训过程内容操作要求及步骤任务一创立站点1、熟识DW界面2、在D盘根书目创立一个站点名称为我的足球网，本地站点文件夹为jcwww，如下图所示任务二设置默认图像文件夹利用老师所给素材，制作简洁网页我的偶像，素材见文件夹完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进展自主练习，内容不限，但不行违背上机纪律实训总结本次上机主要是让学生驾驭站点的建立及输入文本与编辑文本等，学生操作较好，大局部能完成任务。实训课题制作简洁网页实训课时2课时实训目的1、 驾驭新建网页、编辑文字、处理图像2、 新建站点3、 插入程度线、空格、自动更新时间实训重点制作简洁网页流程实训难点综合运用HTML工具实训

21、方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求4、 比照实习报告的要求，完成上机任务；5、 任务完成后刚好要求老师考评；6、 完善实习报告，填写实训总结；4、遵守实训纪律，不嬉戏，不睡觉，不高声议论。实训过程内容操作要求及步骤任务一足球偶像网页1、 熟识DW菜单栏常用界面2、 完成以下简洁网站，素材见素材库完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进展自主练习，内容不限，但不行违背上机纪律实训总结本次上机内容较多，主要考察学生综合性的练习，如图片的插入，文字的编辑及程度线的插入等，需要学生对前面的学问特别熟识，13高12班整体班级学习气氛较好，全部学生都能按时上

22、交作业，值得表扬课题2.2添加与编辑图像教学课时2课时教学目的学问目的1、 驾驭图像裁剪、重新取样、亮度、锐化的设置2、驾驭图像属性设置实力目的驾驭运用软件对图像处理的实力情感目的进步学生团结合作精神，进步学生竞争意识教学重点图像的编辑教学难点图像的编辑教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：协助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程支配教学内容老师活动 学生活动设计意图导入新课(5min)前面介绍网页的时候有说过，在保证画质的状况下，图片的数据量越小越好。问题：假设一张图片数据量很大，我们该

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

24、导学生学习理论的时候思索如何理论运用到理论任务二制作翻转图像(50min)概念：在网页阅读中，有时当鼠标移到某个图像上或者单击时，图像会变成另外一副图像。阅读时效果：鼠标放上去时效果：1、 激励学生小组讨论如何完成翻转图像效果；2、 给学生展示翻转图像做出来的效果，然后讲解如何才能完成这个效果小组讨论如何完成该效果并进展尝试课堂小结(5min)一、 如何编辑图像二、 制作翻转图像效果板书设计一、编辑图像1、 重新采样2、 裁剪、锐化二、翻转图像制作效果教学反思本次教学学生较感爱好，特殊是鼠标经过的图像，学生完成得较好，值得激励课题2.3创立超级链接教学课时2课时教学目的学问目的1、 驾驭创立超

25、链接的方法2、 驾驭相对链接与肯定链接的区分3、 创立锚点链接实力目的进步学生学习创作实力情感目的进步学生团结合作精神，进步学生竞争意识教学重点1、 正确相识途径2、 理解相对链接与肯定链接的区分教学难点添加超链接、相对途径、肯定途径教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：协助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程支配教学内容老师活动 学生活动设计意图导入新课(5min)每次阅读网页的时候点击某个文字或者图片，能自动跳转到另一个页面，提问：这样的链接形式叫什么？如何实现？进入新浪网给学生演示超

26、级链接的效果并进展提问观看效果并讨论如何才能实现该效果以提问且学生较熟识的阅读网页的方式吸引学生的留意任务一创立超级链接（20min）一、新建站点jcww，并在站点内新建默认图像文件夹images，将网页Index.HTML里的“我与足球”链接到news.HTML，目的为-blank；“足球新闻”链接到“逢入京使.HTML”，目的为-new；“足球明星”链接到“我与足球网.HTML”，目的为-self。二、比照每个目的不同，网页新建窗口不同并进展总结给学生演示如何插入链接；演示不同目的新建窗口的区分观看老师演示，并思索-new、-blank、-self几个目的值窗口的区分让学生熟识DW添加超级

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

28、肯定链接三、 锚点链接（本页之间链接）作业布置(5min)一、 网上查找哪些页面常用页面与页面链接，哪些是用锚点链接并总结二、 利用教材第4章/4-3/jieshao.html的素材，自己动手创立锚点链接板书三、 创立超级链接的方法与步骤四、 相对链接与肯定链接五、 创立锚点链接教学反思本次课主要介绍超链接的常用方法，超链接在学生上网中随处可见，较易理解，学生之间的讨论也特别剧烈，较好。实训课题图像处理与创立超链接实训课时2课时实训目的3、 学会利用DW处理图像4、 驾驭创立超级链接的方法5、 理解相对链接与肯定链接概念实训重点1、 图片处理2、 超级链接实训难点超级链接的运用实训方法上机实训

29、实训准备教案、素材、案例、教材、计算机机房实训要求7、 比照实习报告的要求，完成上机任务；8、 任务完成后刚好要求老师考评；9、 完善实习报告，填写实训总结；4、遵守实训纪律，不嬉戏，不睡觉，不高声议论。实训过程 操作要求及步骤任务一处理图像1、 将图片6.jpeg修改为尺寸为240*160，数据量设置为8K左右（6-11k都可以）并进展裁剪与锐化等设置，熟识图片处理几个设置，设置完成后以网页的形式保存，保存在文件夹中，保存名称为“xiugai.html”任务二超级链接2、 将老师发送的Index.HTML网页进展编辑，将“我与足球”四个字链接到“我与足球网.html”，目的为-self；将“

30、足球新闻”四个字链接到“逢入京使.html”， 目的为-blank；将“足球明星”四个字链接到“news.html”， 目的为-new。3、 修改页面属性：在页面属性对话框中，设置链接选项中的大小为16像素，链接颜色为“#6666cc”，变换图像颜色为“#ff6600”，已访问链接为“#663366”，活动链接为“#99cc00”，下划线款式为“仅在变换图像时显示下划线”。设置的对话框如下图所示：完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进展自主练习，内容不限，但不行违背上机纪律实训总结本次实习内容较多，大局部学生能在规定时间内完成任务，较好。实训课题跳转菜单实训课时2课时实训

31、目的6、 驾驭图像热点链接的运用7、 驾驭脚本链接8、 驾驭链接检查器的运用实训重点途径的正确运用实训难点链接的运用及链接检查器的运用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求10、 比照实习报告的要求，完成上机任务；11、 任务完成后刚好要求老师考评；12、 完善实习报告，填写实训总结；4、遵守实训纪律，不嬉戏，不睡觉，不高声议论。实训过程 操作要求及步骤任务一创立图像热点链接在地图中创立热点链接任务二制作跳转菜单翻开news.HTML网页，在如下图所示的位置插入图片，图片为“鼠标经过的图片”，链接到本页的“冠军杯新闻”处（提示：利用锚点链接）翻开“jieshao.h

32、tml”网页，在下载资源文本中将老师供应的“qq.rar”放入站点，做成的效果是点击“下载资源”就能下载“qq.rar”，同理在“联络我们”中设置邮件下载完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进展自主练习，内容不限，但不行违背上机纪律实训总结本次实习内容较多，大局部学生能在规定时间内完成任务，较好。课题2.4运用表格布局页面教学课时2课时教学目的学问目的1、理解表格在网页设计中的作用。2、驾驭网页中表格的制作方法、表格属性的设置方法以及单元格属性的设置方法，可以在单元格中正确插入文字与图片。3、可以依据网页设计内容，正确布局表格的构造，驾驭表格嵌套的设计方法。实力目的1、利

33、用比照学习，培育学生学问迁移的实力。2、通过用表格构造设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培育学生的发散思维实力情感目的通过自主探究，使学生驾驭软件的运用规则，培育学生自主学习的实力。教学重点1、理解表格在网页设计中的重要作用。2、驾驭插入、编辑表格的方法及表格的属性设置。3、驾驭单元格属性的设置。教学难点表格的嵌套在网页设计中的应用教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：协助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程支配教学内容老师活动 学生活动设计意图 导入新课(

34、5min)（1）展示两个页面并进展比拟：一个运用表格布局，表格边框隐藏，其页面工整，文本、图片摆放对称，具有肯定的规律；另一个页面混乱，图文混杂，摆放杂乱。问题1：你喜爱那个页面的布局？问题2：用什么方法可以到达第二个页面的效果？ 展示并引导学生思索学生细致视察并比拟两个网页，讨论、沟通，回忆Word中学习过的表格，领悟表格在Dreamweaver中的作用。通过比照学习，培育学生学问迁移的实力。任务一网页框架(25min)一、仿照网页3的款式，制作一个网页框架。在学生自主探究的根底上，老师总结插入表格的一般方法。并插入一个2行1列，表格宽度800像素，边框粗细0像素的表格。演示如何插入表格并对

35、表格的设置分析网页3，找出其中运用的表格，仿照插入图像的方法，探究插入表格的方法。插入表格，通过实际操作强化对表格属性的相识。引导学生学习理论的时候思索如何理论运用到理论动手分析与进展创意设计，培育学生的仿照以及创新实力任务二表格合并与拆分(20min)二、在任务一的根底上，探究表格根本属性：合并与拆分单元格；单元格的宽度与高度；用实例来演示如何合并与拆分单元格依据需要，插入图片，在第二行拆分为两列，左边放文字，右边放图通过实例，培育学生分析问题、解决问题的实力。任务三表格嵌套(30min)表格的嵌套。在大表中插入一个小的表格，这是创立困难表格款式的有效方法。要提示学生不要嵌套过多。展示几种常

36、见的图文混排款式，让学生选择自己喜爱的一种完成网页。完善网页，制作完成的同学把网页通过FTP上传。让学生自主发挥，充分展示特性风采课堂小结(5min)一、 网页框架与表格根本操作二、 表格的合并与拆分三、 表格嵌套课堂作业(5min)完成教材第五章/Index.html的表格教学反思通过表格的嵌套及分析，对页面进展布局。需要加强学生对表格合并与拆分的运用实训课题表格布局实例分析实训课时2课时实训目的1、 能运用表格为页面布局2、 能驾驭表格的嵌套操作3、 能做出“超越公司简介”页面。实训重点1、驾驭插入、编辑表格的方法及表格的属性设置。2、驾驭单元格属性的设置。实训难点表格的嵌套在网页设计中的

37、应用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求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列表格：奇数列单元格

38、输入栏目文本，宽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）第一列：输入文本第二列：嵌

39、套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高第一行：程度线第二行：版权信息第三行：联络方式完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进展自主练习，内容不限，但不行违背上机纪律实训总结表格布局是最常见的一种布局方式，本次实训学生较主动，特殊是13高12班同学学习气氛特殊好。课题2.5运用框架布局页面教学课时2课时教学目的学问目的1、能驾驭框架的根本操作。2、能理解框架技术的本质。实

40、力目的能用框架布局页面情感目的通过自主探究，使学生驾驭软件的运用规则，培育学生自主学习的实力。教学重点框架的根本操作教学难点用框架为页面布局教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：协助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程支配教学内容老师活动 学生活动设计意图 导入新课(5min)在学习过表格布局后，我们可以做一些常规的页面布局了，但有些特殊效果我们却无法实现。如图所示的网页：今日我们来学习另一种页面布局技术框架。展示框架页面给学生，引发学生思索预习 并思索框架页面布局通过实例来展示，引发学生思索特殊效果如何实现，培育