《网页制作》教案设计

实用标准文档湖南省商业技术学院学期授课进度 计划 项目进度计划表范例计划下载计划下载计划下载课程教学计划下载 （二年级第一学期）课程名称网页制作与设计适用班级16高21、22制定教师易会芝审批签字 教研室主任 年月日 教务科长 年月日 教务院长 年月日2017-2018学年第一学期制定课时分配 授课周数 周课时 授课总课时 其中 讲课 实验 复习考试 机动 23 期末完成情况 计划课时 完成课时 超出或缺少课时 超出 缺少 弥补 教学截至章节内容 备注：用蓝黑或碳素墨水钢笔填写教学计划 学情分析 本门课程《网页设计与制作》的教学班级为14级计算机班，计算机班对网络知识有一定的了解，基础知识较好，同时根据实际情况，特拟定本计划。 大纲 专科护士培训大纲语法等级大纲网络小说大纲模版专职安全员生产检查释经讲道讲章大纲 要求 通过本学期《网页设计与制作》的学习，主要要求同学们掌握网页制作的一些基本功能和操作，为以后的一些学习和工作打下较好的基础。通过学习要求同学达到以下要求：1、了解DreamweaverCS6的详细功能及操作方法。2、熟练掌握网页制作技巧。3、掌握网页规范以及网页优化和网站推广的知识。4、明确网站建设的 流程 快递问题件怎么处理流程河南自建厂房流程下载关于规范招聘需求审批流程制作流程表下载邮件下载流程设计 和站点建设成后需要做的优化推广工作。 教学重点 1、超级链接2、 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 格表单应用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、互动设计类五、网页三剑客Dreamweaver：可视化页面设计、网站管理Fireworks页面图象设计工具Flash动画制作六、网页基础知识1、网页与网站的区别（1）网页是WWW系统中信息的基本单位，简单来说，就是后缀名为htm的文件。（2）网站是指存放在网络服务器上的完整信息的集合体。2、网页的组成（1）文字：最直接、通用、容易的沟通方式（2）图片：网页的一大特点——图文并茂（3）动画：1995年，Sun公司开发了Java语言，用户可以创建能调用图片和声音的多媒体应用小程序（4）超链接：要通过一种方式把各独立的网页整和在一起，使之构成一有机整体，而这种链接页面的功能叫超链接。（5）特殊组件：图片与动画可算是最常见的特殊组件。3、主页Homepage引导访问者浏览网站。index、main、default4、网页空间在Internet上申请的一个存储空间，用以存放网页。5、网址和域名网址：IP地址域名：与IP地址相对应，唯一性，善于识别最右边：国家（中国——cn）其次：机构（商业机构——com）再次：子网名称最左边：服务器类别（web服务器——www）6、网页的分类静态页面与动态页面7、认识网站门户网站：sina个人网站：明星专业网站：医疗职能网站：政府 简单介绍网页知识提问：网页设计要点并将学生分组进行讨论讲述网站设计级别，引导学生对这个行业向往，并鼓励学生向大师阶段努力简单介绍学生将来从事本行业的范围介绍网页制作需要的软件给学生灌输网页设计的基本知识 吸收新知识并思考生活中常见网页设计知识分组讨论，并派出代表来总结思考自己的定位了解本行业的现状认识软件基本组成做笔记，识记教师讲述的知识 讲述基础知识，为后面学习打下基础加强学生之间交流沟通能力，加深学生对网页设计要点理解引导学生了解这个行业引导学生了解本行业从事范围提前引导学生认识dreamweavercs5为后面软件学习打下基础这些知识都是学网页设计最基本的基础知识，学生基础知识薄弱，必须了解这些才能学习后面的内容 任务二动手实践 根据网页设计要点，以小组为单位确定一个网站主题，小组讨论需要的步骤以及素材 巡回指导，给予学生帮助 小组讨论，相互沟通 加深学生对网页设计要点学习 课后作业 按照课堂分组课后进行讨论每组确定一个网站主题方向。每组设计一个网站调查问卷。 课堂小结 网页设计师就业方向网站设计流程常见网站 教学反思 本次课是网页设计第一次上课，主要讲述一些网页基础知识，学生基础知识薄弱，需要加强，整体来说计算机班基础知识要好于电子商务班 板书 一、网页设计介绍二、网页设计的要点三、网站设计级别四、网页设计公司类型五、网页三剑客六、网页基础知识 课题 1.2网站建设概述 教学课时 2课时 教学目标 知识目标 了解做网站的准备工作，掌握站点的建立。 能力目标 能了解网站开发的基本流程。能掌握网站开发的基本原则。能学会站点的建立与管理。 情感目标 提高学生团结合作精神，增强小组合作能力 教学重点 站点的建立 教学难点 如何规划好一个网站 教学资源 1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件、多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 课前准备 1、搜集了解网站开发的基本流程。2、网站设计、制作过程中的一些原则、注意事项。 配合学生搜索资料及解答疑问 网上搜索教师提出问题，了解网站设计事项 培养学生自主学习能力 导入新课(5min) 网站设计大致流程是哪些？每组派出一个代表阐述本组课前搜集的资料 听取学生的观点并给予一定的知道 阐述观点，组员之间相互讨论 锻炼学生的语言表达能力和分析能力 任务一讲授新课(35min) 网站设计流程 任务二分组讨论(40min) 网站开发原则确定主题讨论：网站是靠什么赢利的？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课时 实训目标 熟悉Dreamweavercs4界面制作简单网页 实训重点 学会在网页中输入文字、插入图片等掌握简单代码的编写 实训难点 代码的编写 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 内容 操作要求及步骤 任务一新建网页1 双击打开软件——新建HTML网页——网页名字为nes01——输入以下文字然后保存2、文字要求：标题宋体二号蓝色正文：五号宋体加粗 任务二新建网页2 制作如下网页素材见文件夹网页命名文字为index保存在文件夹中上交给老师操作步骤：新建HTML网页——输入文字——将标题设置为36号，蓝色，宋体——插入两根红色的水平线——插入时间——插入商标——插入背景图片——保存 完善报告 填写实训总结，并上交实习报告。 自主练习 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结 本次课是学生第一次上机，制作一个较简单的网页，学生存在对DW界面不熟，操作不熟练等缺点，需加强操作 课题 2.1编辑和添加文本 教学课时 2课时 教学目标 知识目标 掌握输入和编辑文本2、学会插入文本，掌握设置文本格式的方法 能力目标 掌握网页中三种常见列表的创建，及其各自的特点 情感目标 提高学生自主学习和团队竞争意识 教学重点 插入和编辑文本 教学难点 创建列表 教学资源 1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件.多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 导入新课（5min） 提问：在DW中输入文本和在Word中输入文本有何区别？ 将学生分组，并提出问题，引导学生小组之间讨论并总结 讨论并思考 以讨论的形式提高学生之间的交流沟通 任务一插入文本(20min) 一、插入文本插入普通文本插入不换行空格插入水平线插入日期和特殊字符二、编辑文本1、基本样式设置2、设置段落格式3、创建列表 演示并强调重点 认真听讲并记下重点 文本插入是基础知识，为下面任务二打下基础 任务二(55min) 完成以下网页实例： 引导学生讨论该网页由哪几部分组成引导学生小组组内分工，完成小模块 小组讨论 本实例即是对任务一的巩固，也为下一次课打下基础 作业布置（5min） 找一篇文章输入至页面中，然后利用所学知识，对其进行格式编排 课堂小结（5min） 插入文本编辑文本 板书 一、插入文本插入普通文本插入不换行空格插入水平线插入日期和特殊字符二、编辑文本1、基本样式设置2、设置段落格式3、创建列表三、实例操作 教学反思 本次课是一个基础知识内容，文本是一个网页必不可少的内容，对网页设计至关重要，学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。 实训课题 网站素材处理 实训课时 2课时 实训目标 掌握创建本地站点和远程站点学会修改站点和多站点的管理 实训重点 站点的管理 实训难点 站点的管理 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 内容 操作要求及步骤 任务一创建站点 1、熟悉DW界面2、在D盘根目录创建一个站点名称为《我的足球网》，本地站点文件夹为jcwww，如下图所示 任务二设置默认图像文件夹 利用教师所给素材，制作简单网页《我的偶像》，素材见文件夹 完善报告 填写实训总结，并上交实习报告。 自主练习 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结 本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等，学生操作较好，大部分能完成任务。 实训课题 制作简单网页 实训课时 2课时 实训目标 掌握新建网页、编辑文字、处理图像新建站点插入水平线、空格、自动更新时间 实训重点 制作简单网页流程 实训难点 综合运用HTML工具 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 内容 操作要求及步骤 任务一足球偶像网页 熟悉DW菜单栏常用界面完成以下简单网站，素材见素材库 完善报告 填写实训总结，并上交实习报告。 自主练习 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结 本次上机内容较多，主要考察学生综合性的练习，如图片的插入，文字的编辑及水平线的插入等，需要学生对前面的知识非常熟悉，13高12班整体班级学习氛围较好，所有学生都能按时上交作业，值得表扬 课题 2.2添加和编辑图像 教学课时 2课时 教学目标 知识目标 掌握图像裁剪、重新取样、亮度、锐化的设置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) 概念：在网页浏览中，有时当鼠标移到某个图像上或者单击时，图像会变成另外一副图像。浏览时效果：鼠标放上去时效果： 鼓励学生小组讨论如何完成翻转图像效果；给学生展示翻转图像做出来的效果，然后讲解如何才能完成这个效果 小组讨论如何完成该效果并进行尝试 课堂小结(5min) 如何编辑图像制作翻转图像效果 板书设计 一、编辑图像重新采样裁剪、锐化二、翻转图像制作效果 教学反思 本次教学学生较感兴趣，特别是鼠标经过的图像，学生完成得较好，值得鼓励 课题 2.3创建超级链接 教学课时 2课时 教学目标 知识目标 掌握创建超链接的方法掌握相对链接和绝对链接的区别创建锚点链接 能力目标 提高学生学习创作能力 情感目标 提高学生团结合作精神，提高学生竞争意识 教学重点 正确认识路径理解相对链接和绝对链接的区别 教学难点 添加超链接、相对路径、绝对路径 教学资源 1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件.多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 导入新课(5min) 每次浏览网页的时候点击某个文字或者图片，能自动跳转到另一个页面，提问：这样的链接形式叫什么？如何实现？ 进入新浪网给学生演示超级链接的效果并进行提问 观看效果并讨论如何才能实现该效果 以提问且学生较熟悉的浏览网页的方式吸引学生的注意 任务一创建超级链接（20min） 一、新建站点jcww，并在站点内新建默认图像文件夹images，将网页Index.HTML里的“我与足球”链接到news.HTML，目标为-blank；“足球新闻”链接到“逢入京使.HTML”，目标为-new；“足球明星”链接到“我与足球网.HTML”，目标为-self。二、对比每个目标不同，网页新建窗口不同并进行总结 给学生演示如何插入链接；演示不同目标新建窗口的区别 观看教师演示，并思考-new、-blank、-self几个目标值窗口的区别 让学生熟悉DW添加超级链接的界面 任务二相对链接和绝对链接(20min)任务三锚点链接(35min) 区别：相对链接是指链接的地址是本站点之内的对象；绝对链接是指链接的地址是远程对象，用域名或IP作为地址一、概念：在本页进行链接的叫做锚点，一般在长篇的文章或技术文档中是使用，链接到某个特殊的段落。二、打开第4章/4-3/jieshao.html网页，演示锚点链接效果 演示教材P60实例演示如何插入锚点链接 思考并正确理解相对链接和绝对链接概念观看教师演示并思考锚点链接的应用 正确理解相对链接和绝对链接，为下面的学习打下基础锚点链接应用比较广泛，学生需要掌握并应用 课堂小结(5min) 页面与页面之间的超链接相对链接和绝对链接锚点链接（本页之间链接） 作业布置(5min) 网上查找哪些页面常用页面与页面链接，哪些是用锚点链接并总结利用教材第4章/4-3/jieshao.html的素材，自己动手创建锚点链接 板书 创建超级链接的方法与步骤相对链接和绝对链接创建锚点链接 教学反思 本次课主要介绍超链接的常用方法，超链接在学生上网中随处可见，较易理解，学生之间的讨论也非常激烈，较好。 实训课题 图像处理和创建超链接 实训课时 2课时 实训目标 学会利用DW处理图像掌握创建超级链接的方法理解相对链接和绝对链接概念 实训重点 图片处理超级链接 实训难点 超级链接的使用 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤 任务一处理图像 将图片6.jpeg修改为尺寸为240*160，数据量设置为8K左右（6-11k都可以）并进行裁剪和锐化等设置，熟悉图片处理几个设置，设置完成后以网页的形式保存，保存在文件夹中，保存名称为“xiugai.html” 任务二超级链接 将教师发送的Index.HTML网页进行编辑，将“我与足球”四个字链接到“我与足球网.html”，目标为-self；将“足球新闻”四个字链接到“逢入京使.html”，目标为-blank；将“足球明星”四个字链接到“news.html”，目标为-new。修改页面属性：在页面属性对话框中，设置链接选项中的大小为16像素，链接颜色为“#6666cc”，变换图像颜色为“#ff6600”，已访问链接为“#663366”，活动链接为“#99cc00”，下划线样式为“仅在变换图像时显示下划线”。设置的对话框如下图所示： 完善报告 填写实训总结，并上交实习报告。 自主练习 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结 本次实习内容较多，大部分学生能在规定时间内完成任务，较好。 实训课题 跳转菜单 实训课时 2课时 实训目标 掌握图像热点链接的使用掌握脚本链接掌握链接检查器的使用 实训重点 路径的正确使用 实训难点 链接的运用及链接检查器的使用 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤 任务一创建图像热点链接 在地图中创建热点链接 任务二制作跳转菜单 打开news.HTML网页，在如下图所示的位置插入图片，图片为“鼠标经过的图片”，链接到本页的“冠军杯新闻”处（提示：利用锚点链接）打开“jieshao.html”网页，在下载资源文本中将教师提供的“qq.rar”放入站点，做成的效果是点击“下载资源”就能下载“qq.rar”，同理在“联系我们”中设置邮件下载 完善报告 填写实训总结，并上交实习报告。 自主练习 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结 本次实习内容较多，大部分学生能在规定时间内完成任务，较好。 课题 2.4使用表格布局页面 教学课时 2课时 教学目标 知识目标 1、了解表格在网页设计中的作用。2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格属性的设置方法，能够在单元格中正确插入文字和图片。3、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。 能力目标 1、利用对比学习，培养学生知识迁移的能力。2、通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力 情感目标 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学重点 1、了解表格在网页设计中的重要作用。2、掌握插入、编辑表格的方法及表格的属性设置。3、掌握单元格属性的设置。 教学难点 表格的嵌套在网页设计中的应用 教学资源 1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件.多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 导入新课(5min) （1）展示两个页面并进行比较：一个使用表格布局，表格边框隐藏，其页面工整，文本、图片摆放对称，具有一定的规律；另一个页面凌乱，图文混杂，摆放杂乱。问题1：你喜欢那个页面的布局？问题2：用什么方法可以达到第二个页面的效果？ 展示并引导学生思考 学生仔细观察并比较两个网页，讨论、交流，回顾Word中学习过的表格，领悟表格在Dreamweaver中的作用。 通过对比学习，培养学生知识迁移的能力。 任务一网页框架(25min) 一、仿照网页3的样式，制作一个网页框架。在学生自主探究的基础上，教师总结插入表格的一般方法。并插入一个2行1列，表格宽度800像素，边框粗细0像素的表格。 演示如何插入表格并对表格的设置 分析网页3，找出其中使用的表格，仿照插入图像的方法，探索插入表格的方法。插入表格，通过实际操作强化对表格属性的认识。 引导学生学习理论的时候思考如何理论运用到实践动手分析和进行创意设计，培养学生的模仿以及创新能力 任务二表格合并和拆分(20min) 二、在任务一的基础上，探索表格基本属性：合并与拆分单元格；单元格的宽度与高度； 用实例来演示如何合并和拆分单元格 根据需要，插入图片，在第二行拆分为两列，左边放文字，右边放图 通过实例，培养学生分析问题、解决问题的能力。 任务三表格嵌套(30min) 表格的嵌套。在大表中插入一个小的表格，这是创建复杂表格样式的有效方法。要提示学生不要嵌套过多。 展示几种常见的图文混排样式，让学生选择自己喜欢的一种完成网页。 完善网页，制作完成的同学把网页通过FTP上传。 让学生自主发挥，充分展示个性风采 课堂小结(5min) 网页框架和表格基本操作表格的合并和拆分表格嵌套 课堂作业(5min) 完成教材第五章/Index.html的表格 教学反思 通过表格的嵌套及分析，对页面进行布局。需要加强学生对表格合并和拆分的运用 实训课题 表格布局实例分析 实训课时 2课时 能做出“超越公司简介”页面。 实训重点 1、掌握插入、编辑表格的方法及表格的属性设置。2、掌握单元格属性的设置。 实训难点 表格的嵌套在网页设计中的应用 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤（1）一行三列：（2）第三列嵌套三行两列表格：120px=30+90（2）第二列嵌套1行17列表格：（3）B、mainleft区嵌套13行1列表格：145px宽，2px间距第1行与第7行：高25px（4）D、mainright区第一行：输入文本第二行：嵌套1行2列表格(628px=304+324）第一列：输入文本第二列：嵌套2行1列表格300px宽，右对齐375px高=220+160第1行：插入图片第2行：嵌套3行5列表格高160=30+65+65宽300=80+30+80+30+803行1列：第一行：水平线第二行：版权信息 第三行：联系方式 完善报告 填写实训总结，并上交实习报告。 自主练习 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结 表格布局是最常见的一种布局方式，本次实训学生较积极，特别是13高12班同学学习氛围特别好。 课题 2.5使用框架布局页面 教学课时 2课时 教学目标 知识目标 1、能掌握框架的基本操作。2、能理解框架技术的实质。 能力目标 能用框架布局页面 情感目标 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。框架的基本操作 教学难点 用框架为页面布局 教学资源 1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件.多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 导入新课(5min) 在学习过表格布局后，我们可以做一些常规的页面布局了，但有些特殊效果我们却无法实现。如图所示的网页：今天我们来学习另一种页面布局技术——框架。 展示框架页面给学生，引发学生思考 预习并思考框架页面布局 通过实例来展示，引发学生思考特殊效果如何实现，培养学生积极思考问题的能力一、基本概念：框架是一种网页布局技术。 二、创建框架与框架集1、手动设计2、插入预定义框架三、创建嵌套框架四、选择框架和框架集1、在编辑区中选择2、在框架面板中选择五、删除框架六、保存框架与框架集文件 加强学生对框架布局的理解并进行简单操作 认真听讲并对概念进行消化理解 学生只有在牢固的掌握了基本概念后才能为任务二的学习打下基础topFrame：高：100px表格：2x2，宽-788px，高-100px高：100=75+25第一行：Logo+Banner第二行：当前页位置信息+导航栏导航栏：1x7表格宽：660px高：25px字号：9ptmainFrame：表格：2x2宽：788Px，高：400Px边框：5px，间距：5px表格：3x1宽：788px，高：45px 边框：0px，间距：0px 将学生分7组，并引导学生分组讨论如何完成如图所示的效果 讨论如何才能实现如图所示的效果并总结 通过实例，培养学生分析问题、解决问题的能力。 课堂小结(5min) 框架基本概念二、创建框架与框架集三、创建嵌套框架四、选择框架和框架集五、删除框架六、保存框架与框架集文件设计一系列框架型页面，然后将之实现。要求结合超链接的相关知识。 教学反思 本次主要讲述框架和框架集布局页面，运用实例学生加深了对框架的理解，运用起来得心应手。14高31班学生学习氛围待加强 实训课题 框架布局实例分析 实训课时 2课时 实训目标 能掌握布局表格和布局单元格的基本操作。能在布局模式下对页面进行整体布局。 实训重点 掌握布局表格和布局单元格的基本操作。 实训难点 项目的实现 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤 任务一利用框架排版 步骤1选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“个人主页”。步骤2选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架”命令。步骤3弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。步骤4选择［窗口］菜单栏中［框架］命令。步骤5右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑。步骤6页面下方出现了“topFrame”框架的［属性］面板。对“topFrame”框架进行编辑。步骤7选中“mainFrame”框架进行编辑，页面下方出现了“mainFrame”框架的［属性］面板，对“mainFrame”框架进行编辑。步骤8选中“leftFrame”框架进行编辑，页面下方出现了“leftFrame”框架的［属性］面板，对“leftFrame”框架进行编辑。步骤9选择［文件］菜单栏中的［保存全部］命令，对文件进行保存。步骤10弹出保存整体文件的对话框，为文件命名为“index.html”。步骤11对各个框架部分进行保存，为各个框架进行命名。步骤12单击F12，在浏览器中预览效果。 任务二创建框架集 创建框架集，可以自己设计，也可以从预定义的框架集中选择，还可以修改一个已存在的Dreamweaver文件来创建。实验内容：步骤1选择［修改］菜单栏中的［框架集］命令。步骤2根据需要在其子菜单中选择任意一个分割命令。步骤3若要删除一个子框架，将其边框拖至页面或其父框架之外即可。 完善报告 填写实训总结，并上交实习报告。 自主练习 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结 本次实训学生需要的掌握的内容较多，对于框架布局的位置要准确掌握，难度较大 课题 3.3添加动画 教学课时 2课时 教学目标 知识目标 1、掌握在网页中添加各种动态元素2、掌握Flash属性设置 能力目标 1、学会区分源文件和影片文件格式2、掌握在网页中插入各种Flash元素3、能为网页添加音视频元素。 情感目标 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。添加flash的具体操作 规划一个多媒体网站导航条 教学资源 1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件、多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 导入新课(5min) 试想网页中只有文字和图片，那么网页跟杂志报纸还有什么区别呢？动态元素能够更加丰富页面的效果，是网页是一大特色。注意：不要把动态元素和动态页面划上等号。 将本次课的作品展示给学生，学生在欣赏精美网页的同时思考如何完成该作品 欣赏作品并思考 通过作品来展示，引发学生思考如何实现，培养学生积极思考问题的能力 任务一基本知识(35min) 一、flash文件基本知识1、Flash源文件：*.fla2、Flash影片文件：*.swf二、添加flash动画文件Flash动画是一种基于矢量格式的多媒体动画元件，它体积小，其扩展名为.swf。Flash动画被广泛应用于网页中。操作步骤：1.光标定位2.插入flash文件3.保存、预览三、添加flash按钮Dreamweaver中内置了一些flash按钮，用户可以很方便将他们添加到网页中。注意：在页面中添加flash按钮和flash文本之前必须先保存网页。操作步骤：1.光标定位2.插入flash按钮3.设置按钮属性4.保存、预览四、添加flash文本插入—媒体—Flash文本五、为网页添加音频插入—媒体—插件 教授新知识，为任务二的完成做准备 吸收动画新知识 让学生吸收新知识，为后面的实例操作打下基础 任务二拓展训练(40min) 要求：制作如下图所示网页，插入三行一列表格，插入Flash动画要求动画大小宽高为400*300，第二行插入图片，第三行输入文字并排版，最后得到的结果如下图所示： 课堂小结(5min) 添加多媒体元素使页面具有动态效果插入Flash按钮和Flashpaper插入播放器 课后作业(5min) 用Flash按钮或文本制作一个导航条，然后为页面添加背景音乐。 教学反思 学生对动画、音视频有敏锐的触觉，学习起来颇有兴致。 实训课题 添加音频和视频 实训课时 2课时 实训目标 掌握插入表格、图片、背景图片设置掌握插入Flash文本、Flashpaper、Flash视频、背景音乐等 实训重点 Flash属性、Flash元素 实训难点 Flash元素 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤 任务制作Flash网页 要求：（利用DWcs3版本）一、插入swf动画新建站点和默认图像文件夹新建网页文件Flash.html，插入1行2列的表格，表格宽度720px，边框粗细、表格间距、表格边距都为0.选择第二个单元格设置宽度为600px，高度设置为100px。然后在第一个单元格插入logo.jpeg，并且水平和垂直居中；在第二个单元格里插入背景图片（选择单元格——点击拆分——找到td——在td后空一格——选择background——选择bj.jpeg图片插入），并将图片设置为宽高600px，100px。保存在第二个单元格插入wangyeba.com005的Flash，并将Flash设置为宽高600px，100px规格，并设置Flash为透明二、插入Flash按钮：1、利用DWcs3版本插入导航栏：插入一行一列的表格，宽度为720px，边框粗细、表格间距、表格边距都为0，居中对齐。然后点击插入Flash按钮，选择下图所示的按钮并输入文字，如图所示：2、然后在导航栏的下一行插入一行2列的表格，宽度为720px，边框粗细、表格间距、表格边距都为0，居中对齐。左边单元格设置为宽200px，然后再嵌套一个表格，3行1列宽度为100%，边框粗细、表格间距、表格边距都为0，居中对齐。右边单元格插入一行一列宽度为98%的单元格居中对齐，边框为1，颜色为#FF00FF，然后在此表格中插入Flash文本，字体为宋体，大小30px，输入文本：我的个性空间，颜色为#FF0000，滚动颜色设置为：#00FF00，另存为wen.swf，如下图所示：插入Flashpaper：首先在电脑上安装Flashpaper软件，然后将“Flash.doc”Word文件转换为Flash.swf文件，将文件插入到网页中，设置Flashpaper宽高分别为480和400px三、插入播放器1、在左边的三个单元格范围中，将光标放入第一个单元格，点击插入媒体中的图像查看器，将Flash命名为abc，并将播放器设置为宽高180,1352、点击右边的Flash元素，对图片进行设置，选择选项imageURLs（表示图片的位置），选择你需要展播的图片，showControls（显示控制条）设置为否，slideAutoPlay（自动播放）设置为是，slideDelay（每张图切换停留时间）设置为2，slideloop（循环播放）是3、在左边第二个单元格插入媒体——插件，插入sound声音，设置插件高宽分别为180,41，参数设置为，autostartfalse4、插入背景音乐 完善报告 填写实训总结，并上交实习报告。 自主练习 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结 本次实训内容较多，网页添加音频和视频使得网页内容更加丰富多彩，学生兴趣较浓 课题 4.1编辑和创建APDIV元素 教学课时 2课时 教学目标 知识目标 1、掌握层的概念2、掌握如何编辑APDIV层3、掌握层的嵌套 能力目标 1、掌握层的基本操作。2、能将层和时间轴联系起来制作漂浮效果 情感目标 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学重点 层的基本操作 教学难点 层的高级应用 教学资源 1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件、多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 导入新课（5min） 层是一种HTML页面元素，可被放在页面的任意位置，在网页排版定位方面具有独特优势。 展示课前准备的层的叠加，引导学生思考：如何制作这样的网页？ 欣赏作品并思考 通过作品展示，引出本次课的主题 任务一基本知识（20min）任务二综合实例（25min） 一、创建APDIV元素什么是ApDiv？AP元素（绝对定位元素）,是一种HTML网页元素，一般称为“层”。即网页内容的容器，包含文本，图像或其他任何可以在HTML文档正文中放入的内容。且可以精确定位在网页中的任何地方。二、编辑APDIV元素1、调整层的大小2、层的层次关系3、层的首选设置4、层的对齐三、制作如图所示的网页 强调重点：1、作为容器，可以放置其他网页元素。2、灵活定位。分组让学生讨论如何完成左图所示的任务：如何制作如图立体式的叠加图片如何绘制大小一致且背景颜色为粉色的图层？ 理解APDIV元素并做好笔记分组讨论教师提出的两个任务并提出解决 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 主要是以基本知识讲解为主，为任务二的综合实例打下理论基础巩固任务一所学的理论知识 任务三（30min） 四、层的可见性设置1、AP面板的使用（选择、命名、隐藏、次序）2、层的可见性3、简单的层特效五、实例要求：在上述网页制作的基础上，将“网”“制”分别修改成“开”“关”，并对其隐藏和显示属性设置，点击控制图片的显示和隐藏 将做好的效果图演示给学生并要求学生分组讨论如何实现该要求 讨论并尝试操作 巩固学生对行为属性的理解 课堂小结（5min） 如何创建APDIV层编辑APDIV层实例操作 课后作业（5min） 制作如图所示的网页，提示：利用层的布局 教学反思 通过编辑和创建APDIV层来实现图片的立体感，丰富了网页内容，通过实例演示加深了学生对ap层的认识 课题 4.2层的可见性设置 教学课时 2课时 教学目标 知识目标 1、掌握AP层的创建与属性2、掌握AP层的可见性操作 能力目标 1、学会利用AP层制作立体效果网页2、掌握AP层绝对定位应用 情感目标 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学重点 层的基本操作层的应用及嵌套 教学难点 AP元素 教学资源 1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件、多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 导入新课(5min) 前面所学的表格和图片都是二维的，如何我们先建立了三个层，每个层都有一个图片，他们是层叠的效果，现在要添加两个按钮，使得我们点击一个按钮可以隐藏层，点击另一个按钮可以显示层，这是怎么做的呢？ 展示三维图片效果 欣赏作品并思考 通过作品来展示，引发学生思考如何实现，培养学生积极思考问题的能力 任务一基本知识(20min) 一、AP元素面板1、层的可见性2、防止层重叠 演示 观看教师演示 让学生吸收新知识，为后面的实例操作打下基础 任务二拓展训练(55min) 二、制作如下图所示的网页效果：要求点击“隐藏”时，home隐藏；点击“显示”时，home显示操作步骤如下所示：如图所示是先建立两个按钮，一个是“隐藏”一个是“显示”鼠标点击想要隐藏的曾，然后我们在属性栏，将可见性设置为hidden，也就是隐藏层在窗口菜单中，打开行为窗口选中“显示”按钮，在行为窗口，点击添加按钮，在打开的菜单中，选择【显示--隐藏元素】打开显示隐藏元素对话框，选择刚才隐藏了的那个曾apdiv4，点击下面的显示按钮。然后点击确定接着选中隐藏按钮在行为窗口点击添加按钮，然后选择【显示隐藏元素】在打开的对话框中，选中apdiv4，点击下面的隐藏，然后点击确定按钮。预览 引导学生运用行为来实现学生分组讨论后得出结论，并指派一名代表尝试完成实例，并进行补充 分组讨论如何实现该功能推荐代表完成实例 培养学生积极创新及小组沟通能力激发学生自学能力 课堂小结(5min) AP元素面板隐藏和显示行为 课后作业(5min) 制作立体三维网页效果，并添加显示和隐藏行为 教学反思 通过运用层的隐藏/显示属性及事件onclick的灵活运用，制作常见特效，学生较感兴趣，较好。 实训课题 DIV与表格的转换 实训课时 2课时 实训目标 能掌握布局表格和布局单元格的基本操作。能在布局模式下对页面进行整体布局。 实训重点 掌握布局表格和布局单元格的基本操作。 实训难点 项目的实现 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 对照实习报告的要求，完成上机任务；任务完成后及时要求教师考评；完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤 任务一利用框架排版 步骤1选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“个人主页”。步骤2选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架”命令。步骤3弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。步骤4选择［窗口］菜单栏中［框架］命令。步骤5右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑。步骤6页面下方出现了“topFrame”框架的［属性］面板。对“topFrame”框架进行编辑。步骤7选中“mainFrame”框架进行编辑，页面下方出现了“mainFrame”框架的［属性］面板，对“mainFrame”框架进行编辑。步骤8选中“leftFrame”框架进行编辑，页面下方出现了“leftFrame”框架的［属性］面板，对“leftFrame”框架进行编辑。步骤9选择［文件］菜单栏中的［保存全部］命令，对文件进行保存。步骤10弹出保存整体文件的对话框，为文件命名为“index.html”。步骤11对各个框架部分进行保存，为各个框架进行命名。步骤12单击F12，在浏览器中预览效果。 任务二创建框架集 创建框架集，可以自己设计，也可以从预定义的框架集中选择，还可以修改一个已存在的Dreamweaver文件来创建。实验内容：步骤1选择［修改］菜单栏中的［框架集］命令。步骤2根据需要在其子菜单中选择任意一个分割命令。步骤3若要删除一个子框架，将其边框拖至页面或其父框架之外即可。 完善报告 填写实训总结，并上交实