画鸵萌宠网
湖 南 省 商 业 技 术 学 院
学 期 授 课 进 度 计 划
（ 二 年级 第 一 学期）
课程名称 网页制作与设计 适用班级 16高21、22 制定教师 易会芝
审 批 签 字
教研室主任 教务科长 教务院长
年 月 日 年 月 日 年 月 日 2017-2018 学年第 一 学期制定
文案大全
实用标准
课 时 分 配 授 课 周课时 周 数 总课时 讲 课 实 验 复习考试 机 动 授 课 其 中 23
期 末 完 成 情 况 计 划 课 时 教 学 截 至 章 节 内 容 备注：用蓝黑或碳素墨水钢笔填写
完 成 课 时 超 出 或 缺 少 课 时 超 出 缺 少 弥 补 文案大全
实用标准
教 学 计 划
学情分析本门课程《网页设计与制作》的教学班级为14级计算机班，计算机班对网络知识有一定的了解，基础知识较好，同时根据实际情况，特拟定本计划。 文案大全
大纲要求教学重点教学难点教学方法通过本学期《网页设计与制作》的学习，主要要求同学们掌握网页制作的一些基本功能和操作，为以后的一些学习和工作打下较好的基础。通过学习要求同学达到以下要求： 1、了解DreamweaverCS6的详细功能及操作方法。 2、熟练掌握网页制作技巧。 3、掌握网页规范以及网页优化和网站推广的知识。 4、明确网站建设的流程和站点建设成后需要做的优化推广工作。 1、超级链接 2、表格表单应用 3、框架使用 4、CSS样式 1、超级链接 2、用表格和框架布局页面 3、创建数据库 讲授法、演示法、项目教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨论法等教学方法。
实用标准
学 期 授 课 进 度 计 划 表
周次 3 4 5 6 7 8 9 文案大全
授 课 内 容 1.1网站基础知识 1.2网站建设概述 实训 新建一个网页 2.1添加和编辑文本 实训 网站素材处理 实训 制作简单网页 国庆放假 2.2添加和编辑图像 2.3创建超级链接 实训 图像处理和创建超级链接 实训 跳转菜单 2.4使用表格布局页面 实训 表格布局实例分析 课时 2 2 2 2 2 2 6 6 2 2 2 2 2 备 注 1、2周新生军训 上机 上机 上机 机动补周一课 上机 上机 上机 实用标准
10 2.5使用框架布局页面 运动会 运动会 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 充周三到周五 上机 上机 上机 上机 上机 上机 11 实训 框架布局实例分析 3.3添加动画 添加音频和视频 12 13 14 15 16 实训 DIV与表格的转换 4.3晃动的图片 实训 交换图像 实训 拼图游戏 4.4修改属性特效及动态菜单制作 实训 效果行为应用 实训 图片展播实例 5.1认识和编辑CSS 实训 美化页面 实训 应用CSS到网页中 5.2类型、背景和区块样式 实训 方框、边框和导航栏 实训 超链接样式及设置技巧 上机 上机 上机 上机
文案大全
实用标准
学 期 授 课 进 度 计 划 表
17 18 19 20 21 22 6.1DIV布局页面 6.2认识Spry 实训 调整样式 6.3选择服务器和使用虚拟机 6.4申请域名 实训 网站发布 7.1个人主页制作 7.2策划构思及设计流程 实训 页面布局 7.3制作页面头部 7.4制作中间表格内容 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 6 上机 上机 上机
机动 充周一课 元旦放假 复习考试 教研组 意见 文案大全
实用标准
课题 1.1网页制作基础知识 知识目标 教学目标 能力目标 情感目标 教学重点 教学难点 网页的组成 网页的分类，网址与域名的区分 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件.多媒体教学软件 讲解法、任务驱动教学法 学法 小组讨论法 能了解网页制作软件的特点 能掌握网页制作的基本概念 提高学生团结合作精神，提高学生竞争意识 教学课时 2课时 教学资源 教法 教学过程 课前准备 导入新课 讲授新课 动手实践 课堂小结 作业布置 时间分配 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： 要的软件 可视化页面设计、网站管理 一、网页设计介绍 吸收新知识并思考生活中常见网页设计知识 分组讨论，并派出代表来总结 思考自己的定位 了解本行业的现状 认识软件基本组成 讲述基础知识，为后面学习打下基础 加强学生之间交流沟通能力，加深学生对网页设计要点理解 引导学生了解这个行业 引导学生了解本行业从事范围 提前引导学生认识dreamweaver cs5 为后面软文案大全
实用标准
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 个人网站：明星 专业网站：医疗 职能网站：政府 任务二 动手实践 根据网页设计要点，以小组为单位确定一个网站主题，小组讨论需要的步骤以及素材 1、 按照课堂分组课后进行讨论 2、 每组确定一个网站主题方向。 3、 每组设计一个网站调查问卷。 一、网页设计师就业方向 课堂小结 二、网站设计流程 三、常见网站 巡回指导，给予学生帮助 小组讨论，相互沟通 加深学生对网页设计要点学习 课后作业 文案大全
实用标准
本次课是网页设计第一次上课，主要讲述一些网页基础知识，学生基础知识薄弱，需要加教学反思 强，整体来说计算机班基础知识要好于电子商务班 一、网页设计介绍 二、网页设计的要点 三、网站设计级别 板书 四、网页设计公司类型 五、网页三剑客 六、网页基础知识
课题 知识目标 1.2网站建设概述 教学课时 2课时 了解做网站的准备工作，掌握站点的建立。 1. 能了解网站开发的基本流程。 2. 能掌握网站开发的基本原则。 3. 能学会站点的建立与管理。 提高学生团结合作精神，增强小组合作能力 教学目标 能力目标 情感目标 教学重点 教学难点 站点的建立 如何规划好一个网站 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 教师活动 学生活动 设计意图 文案大全
实用标准
课前准备 1、搜集了解网站开发的基本流程。 配合学生搜索资2、网站设计、制作过程中的一些原料及解答疑问 则、注意事项。 网站设计大致流程是哪些？每组派出一个代表阐述本组课前搜集的资料 一、网站设计流程 二、网站开发原则 1、 确定主题 讨论：网站是靠什么赢利的？ 2、规划站点结构 （1）结构设计 1、确定网站主题的建议 2、给网站取名 3、提示决定网站的性质 网站上传 网站推广 更新维护 网页制作 整合网站 效果测试 架构内容信息 搜集整理资料 规划网站结构 网上搜索教师提出问题，了解网站设计事项 阐述观点，组员之间相互讨论 培养学生自主学习能力 导入新课 (5min) 任务一 讲授新课 (35min) 听取学生的观点并给予一定的知道 锻炼学生的语言表达能力和分析能力 小组讨论，相互沟通 加深学生对网页设计要点学习 任务二 分组讨论 (40min) （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）删除已有站点 课后作业 (5min) 根据这次课的内容、注意事项，构思一个明确的网站主题，并将站点结构的规划用文件夹表示出来 一、网站设计确定主题 课堂小结 (5min) 二、网站设计流程 三、站点管理 本次主要讲述站点的建立和管理，课程较简单，学生掌握较好 教学反思 一、网站设计流程 二、网站开发原则 三、网页版面布局设计 板书 四、规划站点 五、搜集素材 六、创建站点 七、管理站点 实训课题 实训目标 实训重点 实训难点 文案大全
新建一个网页 1、 熟悉Dreamweaver cs4界面 2、 制作简单网页 1、 学会在网页中输入文字、插入图片等 2、 掌握简单代码的编写 代码的编写 实训课时 2课时 实用标准
实训方法 实训准备 上机实训 教案、素材、案例、教材、计算机机房 1. 对照实习报告的要求，完成上机任务； 实训要求 2. 任务完成后及时要求教师考评； 3. 完善实习报告，填写实训总结； 遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 内容 操作要求及步骤 1、 双击打开软件——新建HTML网页——网页名字为nes01——输入以下文字然后保存 任务一 新建网页1 2、文字要求：标题 宋体 二号 蓝色 正文：五号 宋体 加粗 任务二 新建网页2 制作如下网页 素材见文件夹 网页命名文字为index 保存在文件夹中上交给老师文案大全
实用标准
操作步骤：新建HTML网页——输入文字——将标题设置为36号，蓝色，宋体——插入两根红色的水平线——插入时间——插入商标——插入背景图片——保存 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次课是学生第一次上机，制作一个较简单的网页，学生存在对DW界面不熟，操作不熟练等缺点，需加强操作 自主练习 实训总结
课题 2.1编辑和添加文本 知识目标 教学目标 能力目标 情感目标 教学重点 教学课时 2课时 1、 掌握输入和编辑文本 2、学会插入文本，掌握设置文本格式的方法 掌握网页中三种常见列表的创建，及其各自的特点 提高学生自主学习和团队竞争意识 插入和编辑文本 文案大全
实用标准
教学难点 创建列表 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件.多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 提问：在DW中输入文本和在Word中输入文本有何区别？ 教师活动 将学生分组，并提出问题，引导学生小组之间讨论并总结 演示并强调重点 学生活动 讨论并思考 设计意图 以讨论的形式提高学生之间的交流沟通 文本插入是基础知识，为下面任务二打下基础 导入新课 （5min） 任务一 插入文本 (20min) 一、插入文本 1、 插入普通文本 2、 插入不换行空格 3、 插入水平线 4、 插入日期和特殊字符 二、编辑文本 1、基本样式设置 2、设置段落格式 3、创建列表 完成以下网页实例： 认真听讲并记下重点 1、 引导学生讨论该网页由哪几部分组成 2、 引导学生小组组内分工，完成小模块 小组讨论 本实例即是对任务一的巩固，也为下一次课打下基础 任务二 (55min) 作业布置 文案大全
1、 找一篇文章输入至页面中，然后利用所学知识，对其进行格式编排 实用标准
（5min） 一、插入文本 二、编辑文本 一、插入文本 5、 插入普通文本 6、 插入不换行空格 7、 插入水平线 8、 插入日期和特殊字符 二、编辑文本 1、基本样式设置 2、设置段落格式 3、创建列表 三、实例操作 本次课是 一个基础知识内容，文本是一个网页必不可少的内容，对网页设计至关重要，教学反思 学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。 课堂小结 （5min） 板书
实训课题 实训目标 实训重点 实训难点 实训方法 实训准备 网站素材处理 1、 掌握创建本地站点和远程站点 2、 学会修改站点和多站点的管理 站点的管理 站点的管理 上机实训 教案、素材、案例、教材、计算机机房 1、 对照实习报告的要求，完成上机任务； 实训要求 2、 任务完成后及时要求教师考评； 3、 完善实习报告，填写实训总结； 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 文案大全
实训课时 2课时 实用标准
实训过程 内容 操作要求及步骤 1、熟悉DW界面 2、在D盘根目录创建一个站点名称为《我的足球网》，本地站点文件夹为jcwww，如下图所示 任务一 创建站点 任务二 设置默认图像文件夹 完善报告 利用教师所给素材，制作简单网页《我的偶像》，素材见文件夹 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等，学生操作较好，大部分能完成任务。 自主练习 实训总结
实训课题 制作简单网页 1、 掌握新建网页、编辑文字、处理图像 2、 新建站点 3、 插入水平线、空格、自动更新时间 制作简单网页流程 综合运用HTML工具 上机实训 教案、素材、案例、教材、计算机机房 实训课时 2课时 实训目标 实训重点 实训难点 实训方法 实训准备 文案大全
实用标准
4、 对照实习报告的要求，完成上机任务； 实训要求 5、 任务完成后及时要求教师考评； 6、 完善实习报告，填写实训总结； 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 内容 操作要求及步骤 1、 熟悉DW菜单栏常用界面 2、 完成以下简单网站，素材见素材库 任务一 足球偶像网页 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次上机内容较多，主要考察学生综合性的练习，如图片的插入，文字的编辑及水平线的插入等，需要学生对前面的知识非常熟悉，13高12班整体班级学习氛围较好，所有学生都能按时上交作业，值得表扬 自主练习 实训总结
课题 2.2添加和编辑图像 知识目标 教学目标 能力目标 教学课时 2课时 1、 掌握图像裁剪、重新取样、亮度、锐化的设置 2、掌握图像属性设置 掌握运用软件对图像处理的能力 文案大全
实用标准
情感目标 教学重点 教学难点 图像的编辑 图像的编辑 提高学生团结合作精神，提高学生竞争意识 教学资源 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件.多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教法 过程安排 教学内容 前面介绍网页的时候有说过，在保证画质的情况下，图片的数据量越小越好。问题：如果一张图片数据量很大，我们该如何编辑？ 教师活动 演示cluo.jpeg这张图片，分析数据量为93k、画质为1024*768规格的图片如何更改数据量和规格？ 对图片宽、高、裁切、重新采样、锐化等设置进行演示 学生活动 分组讨论用什么方法来更改数据量和规格 设计意图 提出问题引发学生思考，引出这次课的主题 导入新课 (5min) 任务一 编辑图片 (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.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件.多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 每次浏览网页的时候点击某个文字或者图片，能自动跳转到另一个页面，提问：这样的链接形式叫什么？如何实现？ 教师活动 进入新浪网给学生演示超级链接的效果并进行提问 给学生演示如何插入链接；演示不同目标新建窗口的区别 学生活动 观看效果并讨论如何才能实现该效果 设计意图 以提问且学生较熟悉的浏览网页的方式吸引学生的注意 让学生熟悉DW添加超级链接的界面 正确理解相对链接和绝对链接，为下面的学习打下基础 锚点链接应用比较广泛，学生需要掌握并应用 导入新课 (5min) 一、新建站点jcww，并在站点内新建默认图像文件夹images，将网页Index.HTML里的“我与足球”链接到news.HTML，目标为-blank；任务一 “足球新闻”链接到“逢入京创建超级链接 使.HTML”，目标为-new；“足球明（20min） 星”链接到“我与足球网.HTML”，目标为-self。 二、对比每个目标不同，网页新建窗口不同并进行总结 任务二 相对链接和绝对链接 (20min) 任务三 锚点链接 (35min) 区别： 相对链接是指链接的地址是本站点之内的对象；绝对链接是指链接的地址是远程对象，用域名或IP作为地址 一、概念：在本页进行链接的叫做锚点，一般在长篇的文章或技术文档中是使用，链接到某个特殊的段落。 观看教师演示，并思考-new、-blank、-self几个目标值窗口的区别 演示教材P60实例 演示如何插入锚点链接 思考并正确理解相对链接和绝对链接概念 观看教师演示并思考锚点链接的应用 文案大全
实用标准
二、打开第4章/4-3/jieshao.html网页，演示锚点链接效果 课堂小结 (5min) 作业布置 (5min) 一、页面与页面之间的超链接 二、相对链接和绝对链接 三、锚点链接（本页之间链接） 一、网上查找哪些页面常用页面与页面链接，哪些是用锚点链接并总结 二、利用教材第4章/4-3/jieshao.html的素材，自己动手创建锚点链接 三、创建超级链接的方法与步骤 板书 四、相对链接和绝对链接 五、创建锚点链接 本次课主要介绍超链接的常用方法，超链接在学生上网中随处可见，较易理解，学生之间教学反思 的讨论也非常激烈，较好。 实训课题 图像处理和创建超链接 3、 学会利用DW处理图像 4、 掌握创建超级链接的方法 5、 理解相对链接和绝对链接概念 1、 图片处理 2、 超级链接 超级链接的使用 上机实训 教案、素材、案例、教材、计算机机房 7、 对照实习报告的要求，完成上机任务； 实训要求 8、 任务完成后及时要求教师考评； 9、 完善实习报告，填写实训总结； 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 文案大全
实训课时 2课时 实训目标 实训重点 实训难点 实训方法 实训准备 实用标准
实训过程 任务一 处理图像 操作要求及步骤 1、 将图片6.jpeg修改为尺寸为240*160，数据量设置为8K左右（6-11k都可以）并进行裁剪和锐化等设置，熟悉图片处理几个设置，设置完成后以网页的形式保存，保存在文件夹中，保存名称为“xiugai.html” 2、 将教师发送的Index.HTML网页进行编辑，将“我与足球”四个字链接到“我与足球网.html”，目标为-self；将“足球新闻”四个字链接到“逢入京使.html”， 目标为-blank；将“足球明星”四个字链接到“news.html”， 目标为-new。 3、 修改页面属性：在页面属性对话框中，设置链接选项中的大小为16像素，链接颜色为“#6666cc”，变换图像颜色为“#ff6600”，已访问链接为“#663366”，活动链接为“#99cc00”，下划线样式为“仅在变换图像时显示下划线”。设置的对话框如下图所示： 任务二 超级链接 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次实习内容较多，大部分学生能在规定时间内完成任务，较好。 自主练习 实训总结
实训课题 跳转菜单 6、 掌握图像热点链接的使用 7、 掌握脚本链接 8、 掌握链接检查器的使用 路径的正确使用 链接的运用及链接检查器的使用 实训课时 2课时 实训目标 实训重点 实训难点 文案大全
实用标准
实训方法 实训准备 上机实训 教案、素材、案例、教材、计算机机房 10、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 11、 12、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 在地图中创建热点链接 任务一 创建图像热点链接 打开news.HTML网页，在如下图所示的位置插入图片，图片为“鼠标经过的图片”，链接到本页的“冠军杯新闻”处（提示：利用锚点链接） 打开“jieshao.html”网页，在下载资源文本中将教师提供的“qq.rar”放入站点，做成的效果是点击“下载资源”就能下载“qq.rar”，同理在“联系我们”中设置邮件下载 任务二 制作跳转菜单 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次实习内容较多，大部分学生能在规定时间内完成任务，较好。 自主练习 实训总结
文案大全
实用标准
课题 2.4使用表格布局页面 教学课时 2课时 知识目标 教学目标 能力目标 1、了解表格在网页设计中的作用。 2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格属性的设置方法，能够在单元格中正确插入文字和图片。 3、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。 1、利用对比学习，培养学生知识迁移的能力。 2、通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 情感目标 教学重点 1、了解表格在网页设计中的重要作用。 2、掌握插入、编辑表格的方法及表格的属性设置。 3、掌握单元格属性的设置。 表格的嵌套在网页设计中的应用 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件.多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学难点 教学资源 教法 过程安排 教学内容 教师活动 学生活动 设计意图 （1）展示两个页面并进行比较：一个使用表格布局，表格边框隐藏，其页面工整，文本、图片摆放对称，具有一定的规律；另一个页面凌乱，图文混 导入新课 杂，摆放杂乱。 (5min) 问题1：你喜欢那个页面的布局？ 问题2：用什么方法可以达到第二个页面的效果？ 任务一 网页框架 (25min) 文案大全
展示并引导学学生仔细观生思考 察并比较两 个网页，讨 论、交流，回顾Word中学习过的表格，领悟表格在Dreamweaver中的作用。 通过对比学习，培养学生知识迁移的能力。 一、仿照网页3的样式，制作演示如何插入表格并对表格的设一个网页框架。 在学生自主探究的基础上，教置 师总结插入表格的一般方法。并插入一个2行1列，表格宽度800像素，边框粗细0像素的表分析网页3，找出其中使用的表格，仿照插入图像的方法，探索插入表格的引导学生学习理论的时候思考如何理论运用到实践 实用标准
格。 二、在任务一的基础上，探索用实例来演示如表格基本属性：合并与拆分单何合并和拆分单元格；单元格的宽度与高度； 元格 方法。 插入表格，通过实际操作强化对表格属性的认识。 根据需要，插入图片，在第二行拆分为两列，左边放文字，右边放图 展示几种常见完善网页，制的图文混排样作完成的同式，让学生选择学把网页通自己喜欢的一过FTP上传。 种完成网页。 任务二 表格合并和拆分(20min) 动手分析和进行创意设计，培养学生的模仿以及创新能力 通过实例，培养学生分析问题、解决问题的能力。 让学生自主发挥，充分展示个性风采 任务三 表格嵌套 (30min) 课堂小结 (5min) 课堂作业 (5min) 表格的嵌套。在大表中插入一个小的表格，这是创建复杂表格样式的有效方法。要提示学生不要嵌套过多。 一、网页框架和表格基本操作 二、表格的合并和拆分 三、表格嵌套 完成教材第五章/Index.html的表格 通过表格的嵌套及分析，对页面进行布局。需要加强学生对表格合并和拆分的运用 教学反思 实训课题 表格布局实例分析 1、 能运用表格为页面布局 2、 能掌握表格的嵌套操作 3、 4、 能做出“超越公司简介”页面。 1、掌握插入、编辑表格的方法及表格的属性设置。 2、掌握单元格属性的设置。 表格的嵌套在网页设计中的应用 上机实训 教案、素材、案例、教材、计算机机房 实训课时 2课时 实训目标 实训重点 实训难点 实训方法 实训准备 实训要求 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列表格： 奇数列单元格输入栏目文本，宽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） 第一列：输入文本 第二列：嵌套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、能理解框架技术的实质。 能用框架布局页面 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 框架的基本操作 用框架为页面布局 文案大全
实用标准
教学资源 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件.多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教法 过程安排 教学内容 教师活动 学生活动 设计意图 在学习过表格布局后，我们可展示框架页面以做一些常规的页面布局了，给学生，引发学但有些特殊效果我们却无法实生思考 导入新课 现。如图所示的网页：今天我(5min) 们来学习另一种页面布局技术——框架。 任务一 基本知识 (35min) 预习 并思考通过实例来框架页面布展示，引发局 学生思考特 殊效果如何实现，培养学生积极思考问题的能力 学生只有在一、基本概念：框架是一种网加强学生对框架认真听讲并布局的理解并进对概念进行牢固的掌握了页布局技术。 行简单操作 基本概念后才二、创建框架与框架集 消化理解 能为任务二的1、手动设计 学习打下基础 2、插入预定义框架 三、创建嵌套框架 四、选择框架和框架集 1、在编辑区中选择 2、在框架面板中选择 五、删除框架 六、保存框架与框架集文件 完成如下图所示的页面： 要求如下： （1） topFrame： （2） 高：100px （3） 表格：2x2，宽-788px，高-100px （4） 高：100=75+25 （5） 宽：788=128+660 （6） 第一行：Logo+Banner （7） 第二行：当前页位置信息+导航栏 （8） 导航栏：1x7表格 （9） 宽：660px （10） 高：25px （11） 字号：9pt （12） 行高：14pt 将学生分7组，并引导学生分组讨论如何完成如图所示的效果 讨论如何才能实现如图所示的效果并总结 通过实例，培养学生分析问题、解决问题的能力。 任务二 实例操作 (40min) 文案大全
实用标准
（13） mainFrame： （14） 表格：2x2 （15） 宽：788Px，高：400Px （16） 边框：5px，间距：5px （17） 表格：3x1 （18） 宽：788px，高：45px （19） 边框：0px，间距：0px 四、框架基本概念 二、创建框架与框架集 课堂小结 (5min) 三、创建嵌套框架 四、选择框架和框架集 五、删除框架 六、保存框架与框架集文件 设计一系列框架型页面，然后将之实现。要求结合超链接的相关知识。 本次主要讲述框架和框架集布局页面，运用实例学生加深了对框架的理解，运用起来得心教学反思 应手。14高31班学生学习氛围待加强 课后作业 (5min) 实训课题 实训目标 实训重点 文案大全
框架布局实例分析 实训课时 2课时 5、 能掌握布局表格和布局单元格的基本操作。 6、 能在布局模式下对页面进行整体布局。 掌握布局表格和布局单元格的基本操作。 实用标准
实训难点 实训方法 实训准备 项目的实现 上机实训 教案、素材、案例、教材、计算机机房 16、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 17、 18、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 步骤1 选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“个人主页”。 步骤2 选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架”命令。 步骤3 弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。 步骤4 选择［窗口］菜单栏中［框架］命令。 步骤5 右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑。 任务一 步骤6 页面下方出现了“topFrame”框架的［属性］面板。对“top Frame”框架进行编辑。 利用框架排版 步骤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.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 试想网页中只有文字和图片，那么网页跟杂志报纸还有什么区别呢？动态元素能够更加丰富页面的效果，是网页是一大特色。 注意：不要把动态元素和动态页面划上等号。 教师活动 将本次课的作品展示给学生，学生在欣赏精美网页的同时思考如何完成该作品 学生活动 欣赏作品并思考 设计意图 通过作品来展示，引发学生思考如何实现，培养学生积极思考问题的能力 导入新课 (5min) 任务一 基本知识 (35min) 一、flash文件基本知识 教授新知识，为任1、Flash源文件：*.fla 务二的完成做准2、Flash影片文件：*.swf 备 二、添加flash动画文件 Flash动画是一种基于矢量格式的多媒体动画元件，它体积小，其扩展名为.swf。 Flash动画被广泛应用于网页中。 操作步骤： 1.光标定位 吸收动画新知识 让学生吸收新知识，为后面的实例操作打下基础 文案大全
实用标准
2.插入flash文件 3.保存、预览 三、添加flash按钮 Dreamweaver中内置了一些flash按钮，用户可以很方便将他们添加到网页中。 注意：在页面中添加flash按钮和flash文本之前必须先保存网页。 操作步骤： 1.光标定位 2.插入flash按钮 3.设置按钮属性 4.保存、预览 四、添加flash文本 插入—媒体—Flash文本 五、为网页添加音频 插入—媒体—插件 要求：制作如下图所示网页，插入三行一列表格，插入Flash动画要求动画大小宽高为400*300，第二行插入图片，第三行输入文字并排版，最后得到的结果如下图所示： 任务二 拓展训练 (40min) 课堂小结 (5min) 课后作业 (5min) 一、添加多媒体元素使页面具有动态效果 二、插入Flash按钮和Flashpaper 三、插入播放器 用Flash按钮或文本制作一个导航条，然后为页面添加背景音乐。 文案大全
实用标准
学生对动画、音视频有敏锐的触觉，学习起来颇有兴致。 教学反思 实训课题 实训目标 实训重点 实训难点 实训方法 实训准备 添加音频和视频 实训课时 2课时 7、 掌握插入表格、图片、背景图片设置 8、 掌握插入Flash文本、Flashpaper、Flash视频、背景音乐等 Flash属性、Flash元素 Flash元素 上机实训 教案、素材、案例、教材、计算机机房 19、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 20、 21、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 文案大全
实用标准
要求：（利用DW cs3版本） 一、插入swf动画 1、 新建站点和默认图像文件夹 2、 新建网页文件Flash.html，插入1行2列的表格，表格宽度720px，边框粗细、表格间距、表格边距都为0.选择第二个单元格设置宽度为600px，高度设置为100px。然后在第一个单元格插入logo.jpeg，并且水平和垂直居中；在第二个单元格里插入背景图片（选择单元格——点击拆分——找到td——在td后空一格——选择background——选择bj.jpeg图片插入），并将图片设置为宽高600px，100px。保存 3、 在第二个单元格插入wangyeba.com005的Flash，并将Flash设置为宽高600px，100px规格，并设置Flash为透明 二、插入Flash按钮： 1、利用DW cs3版本插入导航栏：插入一行一列的表格，宽度为720px，边框粗细、表格间距、表格边距都为0，居中对齐。然后点击插入Flash按钮，选择下图所示的按钮并输入文字，如图所示： 任务 制作Flash网页 2、然后在导航栏的下一行插入一行2列的表格，宽度为720px，边框粗细、表格间距、表格边距都为0，居中对齐。左边单元格设置为宽200px，然后再嵌套一个表格，3行1列宽度为100%，边框粗细、表格间距、表格边距都为0，居中对齐。右边单元格插入一行一列宽度为98%的单元格居中对齐，边框为1，颜色为#FF00FF，然后在此表格中插入Flash文本，字体为宋体，大小30px，输入文本：我的个性空间，颜色为#FF0000，滚动颜色设置为：#00FF00，另存为wen.swf，如下图所示： 4、 插入Flashpaper：首先在电脑上安装Flashpaper软件，然后将“Flash.doc”Word文件转换为Flash.swf文件，将文件插入到网页中，设置Flashpaper宽高分别为480和400px 三、插入播放器 1、在左边的三个单元格范围中，将光标放入第一个单元格，点击插入媒体中的图像查看器，将Flash命名为abc，并将播放器设置为宽高180,135 2、点击右边的Flash元素，对图片进行设置，选择选项imageURLs（表示图片的位置），文案大全
实用标准
选择你需要展播的图片，showControls（显示控制条）设置为否，slideAutoPlay（自动播放）设置为是，slideDelay（每张图切换停留时间）设置为2，slideloop（循环播放）是 3、在左边第二个单元格插入媒体——插件，插入sound声音，设置插件高宽分别为180,41，参数设置为，autostart false 4、插入背景音乐 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次实训内容较多，网页添加音频和视频使得网页内容更加丰富多彩，学生兴趣较浓 自主练习 实训总结
课题 4.1编辑和创建AP DIV元素 1、掌握层的概念 2、掌握如何编辑AP DIV层 3、掌握层的嵌套 1、掌握层的基本操作。 2、能将层和时间轴联系起来制作漂浮效果 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学课时 2课时 知识目标 教学目标 能力目标 情感目标 教学重点 层的基本操作 文案大全
实用标准
教学难点 层的高级应用 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 层是一种HTML页面元素，可被放在页面的任意位置，在网页排版定位方面具有独特优势。 一、创建AP DIV元素 什么是Ap Div？ AP元素（绝对定位元素）, 是一种HTML网页元素，一般称为 “层”。即网页内容的容器，包含文本，图像或其他任何可以在HTML文档正文中放入的内容。且可以精确定位在网页中的任何地方。 二、编辑AP DIV元素 1、调整层的大小 2、层的层次关系 3、层的首选设置 4、层的对齐 三、制作如图所示的网页 教师活动 展示课前准备的层的叠加，引导学生思考：如何制作这样的网页？ 强调重点： 1、作为容器，可以放置其他网页元素。 2、灵活定位。 分组让学生讨论如何完成左图所示的任务： 1、 如何制作如图立体式的叠加图片 2、 如何绘制大小一致且背景颜色为粉色的图层？ 学生活动 欣赏作品并思考 理解AP DIV元素并做好笔记 分组讨论教师提出的两个任务并提出解决方案 设计意图 通过作品展示，引出本次课的主题 主要是以基本知识讲解为主，为任务二的综合实例打下理论基础 巩固任务一所学的理论知识 导入新课 （5min） 任务一 基本知识 （20min） 任务二 综合实例 （25min） 文案大全
实用标准
四、层的可见性设置 将做好的效果图讨论并尝试操作 巩固学生对行为属性的理解 1、AP面板的使用（选择、命名、演示给学生并要隐藏、次序） 2、层的可见性 3、简单的层特效 任务三 （30min） 五、实例 求学生分组讨论如何实现该要求 要求：在上述网页制作的基础上，将“网”“制”分别修改成“开”“关”，并对其隐藏和显示属性设置，点击控制图片的显示和隐藏 课堂小结 （5min） 一、如何创建AP DIV层 二、编辑AP DIV层 三、实例操作 制作如图所示的网页，提示：利用层的布局 课后作业 （5min） 通过编辑和创建APDIV层来实现图片的立体感，丰富了网页内容，通过实例演示加深了学教学反思 生对ap层的认识 课题 4.2层的可见性设置 教学课时 2课时 文案大全
实用标准
知识目标 教学目标 能力目标 情感目标 教学重点 教学难点 1、掌握AP层的创建与属性 2、掌握AP层的可见性操作 1、学会利用AP层制作立体效果网页 2、掌握AP层绝对定位应用 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 1、 层的基本操作 2、 层的应用及嵌套 AP元素 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 前面所学的表格和图片都是二维的，如何我们先建立了三个层，每个层都有一个图片，他们是层叠的效果，现在要添加两个按钮，使得我们点击一个按钮可以隐藏层，点击另一个按钮可以显示层，这是怎么做的呢？ 一、AP元素面板 1、层的可见性 2、防止层重叠 教师活动 展示三维图片效果 学生活动 欣赏作品并思考 设计意图 通过作品来展示，引发学生思考如何实现，培养学生积极思考问题的能力 导入新课 (5min) 任务一 基本知识 (20min) 任务二 拓展训练 (55min) 让学生吸收新知识，为后面的实例操作打下基础 二、制作如下图所示的网页效果：引导学生运用行分组讨论如何培养学生积要求点击“隐藏”时，home隐藏；为来实现 实现该功能 极创新及小点击“显示”时，home显示 组沟通能力 操作步骤如下所示： 学生分组讨论后推荐代表完成激发学生自1、 如图所示是先建立两个按钮，得出结论，并指派实例 学能力 演示 观看教师演示 一个是“隐藏”一个是“显一名代表尝试完 文案大全
实用标准
示” 2、 鼠标点击想要隐藏的曾，然后我们在属性栏，将可见性设置为hidden，也就是隐藏层 3、 在窗口菜单中，打开行为窗口 4、 选中“显示”按钮，在行为窗口，点击添加按钮，在打开的菜单中，选择【显示--隐藏元素】 5、 打开显示隐藏元素对话框，选择刚才隐藏了的那个曾apdiv4，点击下面的显示按钮。然后点击确定 6、 接着选中隐藏按钮 7、 在行为窗口点击添加按钮，然后选择【显示隐藏元素】 8、 在打开的对话框中，选中apdiv4，点击下面的隐藏，然后点击确定按钮。 9、 预览 课堂小结 (5min) 课后作业 (5min) 1、 AP元素面板 2、 隐藏和显示行为 成实例，并进行补充 制作立体三维网页效果，并添加显示和隐藏行为 通过运用层的隐藏/显示属性及事件onclick的灵活运用，制作常见特效，学生较感兴趣，教学反思 较好。 实训课题 实训目标 实训重点 DIV与表格的转换 实训课时 2课时 9、 能掌握布局表格和布局单元格的基本操作。 10、 能在布局模式下对页面进行整体布局。 掌握布局表格和布局单元格的基本操作。 文案大全
实用标准
实训难点 实训方法 实训准备 项目的实现 上机实训 教案、素材、案例、教材、计算机机房 22、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 23、 24、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 步骤1 选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“个人主页”。 步骤2 选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架”命令。 步骤3 弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。 步骤4 选择［窗口］菜单栏中［框架］命令。 步骤5 右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑。 任务一 步骤6 页面下方出现了“topFrame”框架的［属性］面板。对“top Frame”框架进行编辑。 利用框架排版 步骤7 选中“mainFrame”框架进行编辑，页面下方出现了“mainFrame”框架的［属性］ 面板，对“mainFrame”框架进行编辑。 步骤8 选中“leftFrame”框架进行编辑，页面下方出现了“leftFrame”框架的［属性］面 板，对“leftFrame”框架进行编辑。 步骤9 选择［文件］菜单栏中的［保存全部］命令，对文件进行保存。 步骤10 弹出保存整体文件的对话框，为文件命名为“index.html”。 步骤11 对各个框架部分进行保存，为各个框架进行命名。 步骤12 单击F12，在浏览器中预览效果。 创建框架集，可以自己设计，也可以从预定义的框架集中选择，还可以修改一个已存在的Dreamweaver文件来创建。 实验内容： 步骤1 选择［修改］菜单栏中的［框架集］命令。 步骤2 根据需要在其子菜单中选择任意一个分割命令。 步骤3 若要删除一个子框架，将其边框拖至页面或其父框架之外即可。 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次实习内容较多，操作性较强，学生需加强练习 任务二 创建框架集 完善报告 自主练习 实训总结 文案大全
实用标准
课题 知识目标 教学目标 能力目标 情感目标 4.3晃动的图片 教学课时 2课时 1、理解行为、事件、动作的概念 2、掌握添加行为应用实例 1、学会区分源文件和影片文件格式 2、应用行为 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学重点 1、行为面板使用 2、常见事件OnMouseOver 鼠标经过OnMouseout 鼠标离开OnLoad 打开 OnUnload关闭 3、设置文本 行为面板使用 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学难点 教学资源 教法 过程安排 教学内容 1、 如何制作弹出信息窗口？ 2、 如何制作晃动图片？ 3、 如何制作弹出窗口？ 一、晃动的图片 1）什么是行为？ “行为” 可以说是Dreamweaver中最具特色的功能之一，它提供了很多实用的动作，每个动作可以完成特定的任务，为网页添加不少特殊效果。 二、行为面板的使用1、 1、打开行为面板（快捷方式：Shift+F4） 2、认识行为面板 教师活动 演示弹出信息、晃动图片、弹出窗口网页，激发学生兴趣 讲解基础知识并强调重点 学生活动 欣赏教师的展示并分组讨论如何实现？ 听讲并做好笔记 设计意图 通过效果展示激发学生兴趣 导入新课 (5min) 任务一 基本知识 (20min) 文案大全
为任务二实例制作打下基础 实用标准
显示设置事件 显示所有事件 添加行为 删除事件 移动事件顺序 命令控制菜单 三、设置文本行为 1 、 状态栏文字 2、设置文本域文字（注意使用动作的对象必须要有个ID） 三、实例制作 1、制作晃动图片，鼠标经过时（onmouseover）晃动，鼠标离开后（onmouseout）不晃动 技巧：添加行为的时候一般遵循3个步骤： 选择对象 添加动作 调整事件 2、制作弹出窗口（利用添加行为里的打开浏览器窗口） 3、制作弹出信息，弹出信息为“欢迎访问本站点”，事件为onload 4、设置文本行为 一、弹出文字信息 二、制作弹出窗口 三、制作晃动图片 四、设置文本行为 网上搜索弹出信息网页及广告窗口，研究如何制作 本次主要应用行为制作晃动的图片的效果，操作较容易，学生掌握较好，但是事件onclick教学反思 和onmouseover及onmouseout的掌握学生待加强。 任务二 拓展训练 (55min) 课堂小结 (5min) 课后作业 (5min) 实训课题 交换图像 实训课时 2课时 文案大全
实用标准
实训目标 实训重点 实训难点 实训方法 实训准备 11、 12、 掌握AP元素面板的使用 理解原始档图像和交换图像概念 1、 表格的布局 2、 图像交换设置 图像交换 上机实训 教案、素材、案例、教材、计算机机房 25、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 26、 27、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 一、新建站点和默认图像文件夹 二、交换图片实训 1、 新建网页“jh.HTML”将页面背景设置为黑色 2、 插入2行1列宽度为700px的表格，边框粗细0，边距10，间距0 3、 在第一行插入图片bj2.jpeg图片并居中，并将图片的ID命名为pm 4、 在第二行里再嵌套一个一行三列的表格，宽度为100%，边框粗细0，边距10，间距0，背景为灰色，然后分别插入教师所给素材1.jpeg、2.jpeg、3.jpeg，并将素材都设置宽高为200,30 5、 选择1.jpeg并将其添加行为——交换图像，如下图所示： 任务 交换图像 6、 同理，将2.jpeg、3.jpeg添加行为，保存预览 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 自主练习 文案大全
实用标准
实训总结 本次实训室交换图像，主要是一个小项目的制作，通过项目的制作让学生深刻理解交换图像的应用，较好。 实训课题 实训目标 实训重点 实训难点 实训方法 实训准备 13、 14、 拼图游戏 熟悉AP元素面板 掌握添加拖动AP元素 实训课时 2课时 拖动AP元素面板 项目的实现 上机实训 教案、素材、案例、教材、计算机机房 28、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 29、 30、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 三、拼图游戏实训 1、 新建网页pt.HTML，将页面背景设置为图片back.jpeg 2、 绘制AP DIV层，宽高分别为220,220，背景颜色为#FFCCFF 3、 另外绘制四个AP DIV层，宽高分别为110，110，背景颜色为#FFCCFF，并将教师准备的素材1.jpeg、2.jpeg、3.jpeg、4jpeg分别插入四个层 4、 利用辅助线将层对齐 5、 将四个层分别移动到大层里，将花朵拼凑整齐，如图所示 任务一 拼图游戏 文案大全
实用标准
6、 分别将四个小层添加行为——拖动ap元素，设置如图所示： 7、四个小层都设置完成后再将小层拖出大层，顺序打乱，保存 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次课通过拼图游戏的制作，让学生深刻理解AP层在DW的应用，运用AP属性设置不同的效果，较好。
课题 4.4修改属性特效及动态菜单制作 教学课时 2课时 自主练习 实训总结 知识目标 教学目标 1、掌握表格布局页面 2、掌握改变属性 3、掌握行为“显示-隐藏”的正确操作 1、学会利用不同行为制作网页效果 2、应用改变属性 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 能力目标 情感目标 教学重点 1、常见事件OnMouseOver 鼠标经过OnMouseout 鼠标离开 2、AP元素隐藏显示 文案大全
实用标准
教学难点 属性高height、宽width的设置 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 1、 百度搜索图片时鼠标经过图片时图片经常会自动放大，如何实现？ 2、 导航栏如何制作？ 教师活动 演示图片放大及导航栏效果并引导学生思考 学生活动 欣赏教师的展示并分组讨论如何实现？ 设计意图 通过效果展示激发学生兴趣 导入新课 (5min) 一、 如何制作如下图所示效果网页？（具体要求：当鼠标经过图片时图片自动放大；当鼠标离开图片时图片缩小到原来大小） 任务一 修改属性特效 (35min) 操作步骤如下： 1、 新建网页，页面背景颜色为浅灰色 2、 插入3行3列的表格，合并第一行，并将第一行设置为深灰色，输入“索尼s630款图片”，居中对齐，字体大小为24，紫红色，黑体 3、 在第二行第三行分别插入图片1.jpeg、2.jpeg、3.jpeg、4.jpeg、5.jpeg、6.jpeg，并将图片设置为宽高分别为200,120，并将图片ID分别更改为p1…p6 4、 给p1添加行为-修改属性-，修改的宽高值如下图所示： 文案大全
实用标准
5、同理修改p2….p6 二、 动态菜单制作 1、 新建页面里绘制一个AP DIV层，背景颜色为#FF33FF在层里插入一行4列的表格，宽度为100%，边框，边距，间距都为0 2、 分别在表格里输入“新闻中心”、“娱乐频道”、“电脑网络”、“技术支持”，选中行设置行高25px，居中对齐 3、 AP DIV层设置行高为25px，并将层重新命名为dhl 4、 在新闻中心下面再绘制一个AP DIV层，并将层重命名为menu1，设置背景颜色为#FCF，在层里插入4行一列的表格，宽度设置为100%，边框，边距都为0，间距为3，输入文字国际新闻、国内新闻、体育新闻、英语新闻 5、 将“新闻中心”添加行为显示-隐藏，事件onmouseover，如下图所示 任务二 动态菜单制作 (40min) 6、 同理，添加行为显示-隐藏，事件onmouseout 7、 将menu1层跟dhl层靠在一起，给menu1同样添加显示-隐藏行为 课堂小结 (5min) 课后作业 (5min) 五、修改属性特效（宽width、高height、边框border等） 六、制作动态菜单栏（AP元素） 搜索百度图片及观察网页导航栏并对照教师上课内容 本次课通过修改属性特效掌握图片宽高的设置，理解图片大小改变效果。通过动态菜单栏教学反思 的制作，灵活运用AP层。
文案大全
实用标准
计划课时 课 题 教材处理 2课时 实用课时 2课时 效果行为应用 所用教材 Dreamweaver CS5网页制作 Dreamweaver CS5网页制作实操性比较强，知识点零散，为将知识点系统化、增强学生职业意识及就业意识，特将教材以时下最火的淘宝为例，联系到最近特别火的“双十一”现象，以学生为主体，学生自主性学习为主导进行网页制作。 与前后内容 第一模块DW基本操作(学生已学习网页基础制作）—DW添加行为效果 (部分增加)—DW网页制作实际问题—网页实例，学会综合应用 联系 1、熟悉行为面板 知识目标 2、掌握添加行为面板中的效果行为 3、掌握如何添加增大/收缩、挤压、显示/渐隐、晃动、滑动等特效 培养学生对问题进行分析以及解决问题的各种实践能力，让学生在自学的基础上掌握更深的知识，能举一反三，融会贯通。 通过自主探究，使学生掌握软件的使用规则，提高学生的审美情趣，不断提升学生的信息化素养。 教学目的 能力目标 情感目标 教学重点 教学难点 1、 行为的应用 2、常见事件onclick、onmouseover、onmouseout、onload、onunload的灵活运用 如何运用行为制作常见网页特效 教学方法 学习方法 教学教具 任务驱动法 自主学习与小组讨论相结合 电脑、多媒体教室 文案大全
实用标准
教学过程 时间分配 复习旧知 5分钟 导入新课 5分钟 任务分析 15分钟 分组讨论 40分钟 总结延伸 25分钟 教学小结 5分钟 教学准备 教学环节 时间安排 1.教师准备:“锐天专营店”网站主页，视频及学生任务分配 2.学生准备: “锐天专营店”网站主页制作，不加任何特效行为，预习行为效果 教师活动 学生活动 欣赏优秀作品并思考自己作品的不足 1、观看图片之时分组讨论想到了什么东西？ 2、由火爆的双十一快递联想到网上可以购买哪些物品？ 3、思考如何完成本次学习任务 设计意图 复习旧知，让学生遗忘减少且为新课知识做铺垫 通过火爆的双十一快递图片以及视频的视觉冲击，让学生坚信电子商务发展的美好前途以及学习网页制作的必要性 上次课我们通过绘制AP层和插入表格、图片复习旧知 等操作，制作了淘宝首页图。现在给大家展示（5分钟） 优秀作品并引导学生回忆操作步骤 导入新课 （5分钟） 1、以快递图片引出最近大火的双十一 2、由双十一提出问题，在网上能买到哪些东西？ 3、以常见的网上鞋店为例，引出本次课的主题 文案大全
实用标准
1、展示“锐天专营店”首页，大致分析如何完成，由于前面学生已经做过类似网页首页，只需大体分析如何完成即可 2、教师展示“锐天专营店”首页讨论问题 1和“锐天专营店”首页2对比，创设情境 让学生去发现它们之间的不同点 3、总结不同点，提出本次课的任务 4、教师列出任务点，提问：如何利用DW软件完成它？ 1、经过小组讨论得出任务后，小组之间相互协作总结任务： （1）广告条制作 1、学生思考与理解自己提出的相关讨论问题。 2、小组讨论首页对比不同点 3、明确自己本节课的学习任务。 4、积极思考教师提出的问题 1、通过“锐天专营店”首页，复习旧知 2、通过两个首页对比，提出本次课任务，激发学生自主学习能力 任务分析 （15分钟） 分组讨论 （35分钟） 1、在小组中积极思考，主动探究，互相交流意见，分工合作 2、运用课前己掌握知识及教师的步骤提醒可自主尝试完成任务 培养学生协作交流能力，加深师生、生生之间的感情，拉近距离，形成轻松融 洽的课堂学习气氛，同时能及时发现学生操作中的失误，以 便及时给予纠正。 小组协作 师生共探 （2）下拉式菜单制作 （3）图片属性的更改及链接的操作 2、教师要积极鼓励学生，对问题进行思考，互相探讨，观察各组学生的制作过程以及学生活跃程度，文案大全
实用标准
记录学生的学习进展，指正容易出错的操作，对各组的作品作出适时的点评，对于大多数学生遇到的常见性问题，教师要及时统一提出并给予指导（包括帮助学生树立正确的网络学习意识）。 3、完成后请制作优秀的组员上台演示 老师给予适当的点拨和讲解，并组解决问题 织2名优秀代表来演示作品 成果交流 1、展示学生自评表与互评表，组织学生在平台上进行自评、互评及师生小结 常用工具熟练投票，每组派代表上反馈评价 台讲解本组互评整体数据。 2、最后教师进行总结性评价和对优秀作品进行奖励 各小组成员集思广益，根据提出的方案每组派代表展示汇报自己的作品，互相交流学习。 各组运用事先准备好的自评与互评表，派代表上台讲解评价结果。 各组根据收集网络评价结果，反思自己的不足，并撰写学习小结。 1、作品完成后反思 继续学习自己还没掌握的知识，欣赏优秀的作品并给与评价，思考自己的不足。 2、完成课后的拓展练习 培养学生解决问题的能力、个人责任以及集体荣誉感。 培养学生互评和自评能力，激发学生的竞争意识。 1、对学生作品 给与反馈，纠正 或表扬，强调易 错点，巩固知 识。 2、培养学生创 新能力和创造 性思维 总结延伸 （25分钟） 教学小结 (5分钟) 课后作业 板书 1、对学生作品进行收集整理 2、对学生在尝试制作任务所遇到的问题给予总结及对每个同学的作品给出点评 3、针对学生对操作工具难易程度投票情况，在进行知识点在线题库测试巩固 4、拓展练习：根据今天所学行为应用，每位同学课后浏览不同网页，收集不同广告条、下拉式菜单及不同链接的形式，并总结。 通过本次课的学习，同学们需要掌握常见行为应用： 1、隐藏/显示； 2、效果。理解常见事件onmouseover、onmouseout、onclick、onload、onunload含义并灵活运用； 3、完成教师发放的课堂自测及自我评价表，严格按照上面的评分评价（表格见附件） 网上搜索不同下拉菜单及广告条，动手尝试以“时尚资讯”为主题制作首页并添加广告条和菜单及链接等 效果行为应用 一、 广告条制作 1、 绘制父层 2、 绘制子层 3、 插入图片 4、 添加行为 二、 下拉式菜单制作 1、 绘制AP层 2、 插入图像和输入文字 文案大全
实用标准
3、 添加行为 三、属性更改制作 1、 宽高增大 2、 宽高还原 3、 添加行为 教学反思 4、添加超链接 本次授课我主要采用任务驱动法，以任务的形式激发学生学习兴趣。学生主要以小组讨论法进行自主学习，把学生当作学习的主体。充分调动了学生学习的自主性和积极性。但是本次课也存在不足，比如在复习以前常见事件onclick、onmouseover应该再加以强调，让学生在学习新知识的同时也复习旧知。
附件：课堂自测及自我评价表（每人一份）
课堂自测及自我评价表 知识测评 打开（10） 鼠标经过（10） 关闭（10） 鼠标离开（10） 自我评价 是否提前预习（10） 是否积极参与讨论（10） 是否参加上台演示（10） 我在学习中感到快乐（10） 本节课知识都掌握了吗（10） 点击（10） 本次课学习 的行为有： （10） 知识测评：将常见事件对应的英文写在后面的空格里，共50分；
自我评价：每个自我评价都是10分，可根据自己的实际情况，在后面的空格给自己打分
实训课题 实训 图片展播实例 9、 掌握显示/隐藏行为应用 10、 掌握AP DIV层的绘制 11、 掌握图像的插入和属性设置 1、 表格的拆分和合并 2、 AP DIV层的绘制 行为的综合运用 上机实训 实训课时 2课时 实训目标 实训重点 实训难点 实训方法 文案大全
实用标准
实训准备 教案、素材、案例、教材、计算机机房 31、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 32、 33、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 1、 首先用ps或者其他软件将几张图片的大小p成一样的。比如笔者把三张图片都p成了200x268的大小 2、 打开Dreamweaver，新建一个网页（笔者这里建立一个html类型的网页） 任务 图片展播 3、 点击菜单栏：插入-->表格。插入一个1行1列的表格 文案大全
实用标准
4、 把鼠标放到刚刚新建的AP Div里边，点击菜单栏的：插入-->图像，选择一张需要插入的图片 5、 按上面的方法依次添加其他几个AP Div，并在里边插入图片 6、 接下来插入一个AP Div，然后再里边添加一个1行3列的表格 7、 鼠标指针放到表格第一个方框中，单击菜单栏：插入-->表单-->按钮。操作如图 文案大全
实用标准
8、 鼠标点中添加的按钮，然后再下方属性面板中，把值修改为1 9、 按照上述步骤依次为表格的第二个框、第三个框添加一个按钮，并把属性值改成2和3。如图 10、 把几个AP Div移动到同一个区域。 11、 鼠标点击第一个方框的按钮，点击标签检查器行为面板下方的“+”号，弹出的菜单中选择“显示-隐藏元素” 12、 预览 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次实训内容较充实，学生操作较好。
课题 自主练习 实训总结 5.1认识和编辑CSS 知识目标 教学课时 2课时 1、了解CSS样式表 2、掌握新建CSS样式表及从外部导入样式表 1、能掌握CSS的相关基本操作 2、能了解CSS相关知识点 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学目标 能力目标 情感目标 教学重点 教学难点 教学资源 1、创建CSS样式 2、设置CSS样式的属性 设置CSS滤镜 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 文案大全
实用标准
3.教学资料：辅助课件、多媒体教学软件 教法 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 过程安排 教学内容 网页制作学到现在，我们基本上的一些操作都知道了，做一个完整的网站是没有太大问题了，但是页面的美观还有待考究。那如何美化这些页面呢？ 教师活动 通过1.html和1_mh.html进行对比，学生分组讨论并找出他们的差别 讲解CSS和HTML之间的区别并适当举例说明 分组竞赛，每个小组完成教学活动中的任务 分组竞赛，以小组为单位竞赛CSS属性里的翻译 学生活动 讨论两套网页的差别并标注出来 设计意图 通过两个网页修改前后的效果，让学生自己去发现它们之间的差别并探讨 理解并掌握必要的基础知识 提高学生的学习积极性及 导入新课 （5min） 一、 关于CSS样式 CSS样式作为一种格式化网页的标准方式，主要用来定义网页内容的编排、显示、格式化及特殊效果，扩展了HTML的功能，使用它可以十分灵活地控制网页的外观。 任务一 1.CSS：Cascading Style Sheets层叠CSS基础知识 样式表。 （55min） 2.在Dreamweaver中可定义三种类 型的CSS样式，即自定义CSS样 式、重定义HTML标记、CSS选择 器样式。 3.CSS样式面板 二、创建CSS 1.新建CSS样式 2.输入CSS样式的名称 （.unnamed1） 设置CSS样式的类型（类） 3.设置将在何处定义这个CSS样式（仅对该文档） 4.设置CSS样式 三、设置CSS样式的属性 类型、背景、区块、方框、边框、列表、定义、扩展 适当做笔记并理解教师的讲解 积极参与教师的设置的竞赛活动 积极参与竞赛 任务二 CSS体验 （20min） 实训： 1、将
我的背包
设置为标题1；将我的背包1
利用代码设置为红色；将我的背包2
设置为紫色 2、将以下段落在 之间设置一个样式，将所有代码都设置为红色，字体14号，宋体我的背包
文案大全实用标准
我的背包1
我的背包2
课堂小结 （5min） 课后作业 （5min） 学会用CSS控制页面，能使网页更美观、风格更统一。 做一个用CSS来规划页面的小型网站，体会CSS带来的方便和神奇效果 本节内容较为枯燥，但效果很吸引人，同学们自己动手练习时会找到更多的乐趣。 教学反思 实训课题 实训目标 15、 16、 美化页面 掌握页面属性设置 掌握类样式的设置 实训课时 2课时 实训重点 3、 选择器类型的选中 4、 选择器名称命名规则 5、 类样式的选择 类样式的应用 上机实训 教案、素材、案例、教材、计算机机房 34、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训难点 实训方法 实训准备 实训要求 35、 36、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 文案大全实用标准
打开教师提供的素材11-1.html，对页面进行如下操作： 1） 设置网页属性设置（字体12像素、黑色；背景图片bg.gif；边距均为0），可直接在页面属性里进行设置 2） 新建样式.line，创建表格边框样式 .line （颜色#CC66FF），应用在该网页的边框里 3) 设置底部文字的样式 .white （字体白色），应用在本网页最后一行里，最后得到的结果如下图所示： 4） 新建样式.input，美化输入文本框样式 .input，要求左、右、上没有线条，下为实线，1px，颜色为黑色，设置完成后如下图所示： 任务 美化页面 5)思考：步骤4）设置完成预览会发现文本框里为白色，表格背景颜色为灰色，如何让他们颜色设置为一样？ 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次上机作业较简单，从收作业效果来看也较好，大部分学生都能准时完成作业，较好。 自主练习 实训总结 实训课题 实训目标 17、 18、 应用CSS到网页中 掌握选择器三种类型之间的区别 掌握选择器名称命名规则 实训课时 2课时 实训重点 6、 类选择器命名前须加.,标签选择器必须是dw里有的标签 7、 掌握ID选择器命名时前面须加# 8、 类样式的灵活应用 运用CSS美化页面 实训难点 文案大全
实用标准
实训方法 实训准备 上机实训 教案、素材、案例、教材、计算机机房 37、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 38、 39、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 打开nocss.html，进行如下操作： 1）．新建名称为“.title1”的类样式，定义在样式表文件“css2.css”中，具体设置如下： 类型分类下设置：字体“隶书”（若无该字体，用宋体代替），大小“24”，颜色“#FF0000”（应用在“桂林山水”四字中），新建样式表“css1.css”中 2）.新建名称为“.tb”的类样式，定义在样式表文件“css2.css”中，具体设置如下：在“背景”分类下设置背景颜色为“#EEDEDB”。 任务 应用CSS到网页中 3）．新建关于标签“body”的样式，定义在新的样式表文件“css1.css”中，具体设置如下： （应用在网页正文中） 分类 类型 背景 区块 文案大全
具体设置 字体“黑体”，大小“14”，行高“16” 背景颜色“#DFC0BB” 文本对齐“居中” 实用标准
4）．新建名称为“.copy”的类样式，定义在样式表文件“css1.css”中，具体设置如下： （主要控制网页下方最后一行的单元格区域） 分类 类型 具体设置 字体“宋体”，大小“12”，行高“25” 颜色“#333333” 背景 区块 背景颜色“#04A292” 文本对齐“居中” 5）. 新建名称为“.img01”的类样式，定义在样式表文件“css2.css”中，具体设置如下：（应用在图片上） 分类 边框 方框 具体设置 样式“outset”，宽度“4px”，颜色“#846761” 宽“270px”，高“180px”，浮动“向左” 填充“5px”，边界“5px” 文案大全
实用标准
6）. 新建名称为“.lead”的类样式，定义在样式表文件“css2.css”中，具体设置如下：（应用在导航栏上） 分类 类型 具体设置 字体“宋体”，大小“14”，行高“25” 颜色“#FFFFFF” 背景 区块 文案大全
背景颜色“#03756B” 文本对齐“居中” 实用标准
方框 边框 宽“109”，高“25” 样式：“右”下拉列表框中选择“实线” 宽度：取消全部相同 “右”下拉列表框 “1” “上”、“下”、“左”下拉列表框 “0” 颜色：取消全部相同 “右”下拉列表框 “#FFFFFF” 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次上机作业较复杂，需要建立的类样式比较多，学生需要花费较多的时间去操作，但是效果也是很惊人的，学生能从操作中找过满足感。 自主练习 实训总结 课题 5.2类型、背景和区块样式 知识目标 教学课时 2课时 1、掌握新建CSS样式表 2、掌握类型、背景、区块属性设置 1、能掌握CSS属性相关基本操作 2、能了解CSS相关知识点 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学目标 能力目标 情感目标 教学重点 教学难点 1、新建CSS样式 2、类型、背景、区块的属性 属性设置 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 教学资源 文案大全
实用标准
教法 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 过程安排 教学内容 上次我们学了利用CSS控制页面，但是往往我们制作网页的时候不是只有一套方案，而是有很多套方案供别人选择，那我们如何制作呢？ 教师活动 同一个网页演示2套不同风格的方案，并提出问题：如何制作？ 学生活动 讨论不同风格网页之间的差别 设计意图 通过网页强烈对比，引起学生学习兴趣 导入新课 （5min） 任务一 认识配色软件 （25min） 二、 magic matching color演示软件并讲解适当做笔记并理解并掌握必如何搭配色彩 理解教师的讲要的基础知识 软件 播放原网页和完二、利用CSS练习配色 利用上周实习操作的网页，制作一成效果后的对比，套方案，原网页如下图所示： 跟学生共同探讨前后对比 这是一款练习配色的软件，大家可以利用它来帮助提升自己的审美情趣，如下图所示： 解 用笔记下来每一项网页对比的不同点，然后讨论如何实现 提高学生的学习积极性及 任务二 项目制作 （50min） 课堂小结 （5min） 三、 配色软件除了应用在网页上面，在实际生活当中也应用很广，大家可认真观察 二、CSS控制网页，同样的网页颜色搭配不同风格变化很大 文案大全
实用标准
课后作业 （5min） 建立一个简单的时尚资讯首页，利用CSS来控制搭配不同的风格 本节内容较为新鲜，看到的效果也比较明显，学生学习效果较好。 教学反思 实训课题 实训目标 实训重点 实训难点 实训方法 实训准备 实训 方框、边框和导航栏 19、 20、 实训课时 2课时 掌握方框宽、高、填充、浮动等设置 掌握背景颜色、边框样式、宽度、颜色等设置 利用CSS样式新建类对页面控制 滤镜的应用 上机实训 教案、素材、案例、教材、计算机机房 40、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 41、 42、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 一、打开nocss.html重建css样式表文件css2.css，改变网页风格 二、可下载magic matching color软件进行配色搭配，最后制作的效果如下图所示：（可选择自己喜欢的颜色设置，以下为参考） 任务 利用CSS样式控制页面 文案大全
实用标准
三、使用样式表的滤镜，对图片增加效果。（该滤镜效果能在IE浏览器浏览看到效果 参数参考：filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=300, FinishY=240); 文案大全
实用标准
height: 300px; width: 660px; 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次上机效果比较明显，发挥空间比较大，学生可根据自己的经验和喜好选择喜欢的颜色进行搭配，较好。 自主练习 实训总结 实训课题 实训目标 实训重点 实训难点 实训方法 实训准备 实训 超链接样式及设置技巧 21、 掌握复合选择器类型的应用 实训课时 2课时 22、 掌握a:link a:visited选择器的应用 9、 链接样式的设置 10、 导航栏的设置技巧 链接样式的设置 上机实训 教案、素材、案例、教材、计算机机房 43、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训要求 44、 45、 文案大全
实用标准
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤 打开shiliupo-1.html，该网站是一个时尚资讯的网站，需要完成以下任务：（具体可参考13周做的旅游网站的操作步骤） 1、 仿造上周作业对旅游网的设置，对该网页进行设置；首先是网页主色调，由该网站的阅读人群来决定该网站的主色调（提示：大部分以淡粉色为主） 2、 仿造上周旅游网站的设置，对该网页新建一个CSS样式表，对图片和网页文字进行设置 3、 要求设置如下： （1） 整体背景颜色必须设置 （2） 表格背景颜色必须设置 （3） 导航栏必须设置，并且要求导航栏字体颜色链接部分点击前和点击后颜色不同（提示：新建CSS规则，设置如下图所示： 任务 链接设置 超链接2中状态含义： a:link超链接默认状态 a:visited已经浏览过的链接 新建css规则后，选中要设置的颜色（案例是为白色），同理新建CSS规则，选择器类型为复合内容（基于选择的内容），选择器名称为a:link，选中要设置的颜色（案例为青绿色） （4） 网页最下部分最后一行必须设置 （5） 整体网页内容需要居中对齐 下截图为教师参考，你也可根据自己的想法设计另外一套方案，主要是给人感觉漂亮、时尚、实用为主。 文案大全
实用标准
完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次上机作业主要以时尚资讯为主题，学生可根据自己的生活经验选择主色调进行搭配，学生发挥的空间比较大，效果较好。
文案大全
自主练习 实训总结 实用标准
课题 6.1DIV布局页面 知识目标 教学课时 2课时 1、掌握新建DIV标签 2、掌握利用DIV标签布局页面 1、能掌握DIV标签相关基本操作 2、能了解DIV标签相关知识点 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学目标 能力目标 情感目标 教学重点 教学难点 1、利用CSS控制标签 2、嵌套标签的浮动性设置 学会使用css+div布局和美化网页 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 前面我们已经学过AP DIV层布局页面，今天学习运用DIV标签和CSS对页面进行控制 教师活动 讲授这次课的内容 学生活动 观察布局并讨论 设计意图 网页的展示让学生了解本次课的重点 导入新课 （5min） 文案大全
实用标准
一、 布局页面 任务一 页面布局 （25min） 引导学生对布局通过新建DIV标签，也页面进行总进行分析 体控制，设置如下图所示的布局： 要求： 1、 分别新建DIV标签top、mid、 bottom 2、 在标签mid里分别新建mid_left和mid_right标签，分别浮动向左和向右 3、 标签设置如图所示的颜色 并加以分解任务 讨论布局的分布，并尝试把布局画下来 理解并掌握必要的基础知识 二、制作如下图所示的页面： 展示制作的效果讨论任务二在以任务驱动法任务一的基础上增加了哪些知识点，分解成小项目制作 让学生自主完成任务 任务二 布局应用 （50min） 要求： 1） 利用Spry制作菜单栏 2） 利用Spry制作折叠式样式 课堂小结 （5min） 课后作业 （5min） 1、DIV布局页面 2、Spry菜单栏制作 3、Spry折叠式菜单制作 浏览湖南商业技师学院官方网站，分析菜单栏的制作 本节内容布局较多，对Spry菜单栏和折叠式菜单制作应用较广泛，学生学习兴趣较大 教学反思 文案大全
实用标准
课题 6.２认识spry 知识目标 教学课时 2课时 1、学会Spry布局控件的编辑、应用 2、掌握spry布局控件创建动态导航栏的方法 在运用中理解spry框架是一组用标准HTML、CSS和JavaScript编写的可重用控件。 通提高了对网页设计的理解能力和认识水平，能够树立学生探索知识的兴趣 教学目标 能力目标 情感目标 教学重点 教学难点 学会Spry布局控件的编辑、应用。 学会使用spry布局控件创建动态导航栏的方法 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 前一次课我们学习了ap标签布局，布局完成后我们来学习来如何利用spry构件制作常见网页 一、spry菜单 1、 首先引入spry，说出本节课需要学习的内容的重难点。 2、 启动Dreamweaver cs5,选择站点“网页特效制作”，新建文件spry1.html. 3、 选择“插入→spry→spry菜单栏”命令，打开“spry菜单栏”对话框，如图3-57所示。选择“水平”单选项，单击“确定”按钮，网页效果如图3-58所示 教师活动 演示菜单栏和折叠式效果 学生活动 观察并讨论 设计意图 网页的展示让学生了解本次课的重点 主要介绍spry菜单栏常用的功能 导入新课 （5min） 任务一 认识spry （25min） 演示并介绍spry菜单栏 听讲并做笔记 文案大全
实用标准
4、 在“属性”面板中或者在“设计”视图中添加项目的属性值，“项目1：站内质询，项目2：原创图书，项目3：图文教程，项目4：视频教程”，如图3-59和3-60所示： 5、 继续在“属性”面板中或者在“设计”视图中添加“站内咨询”的二级项目的属性值，”项目1.1：图书咨询，项目1.2：会员信息，项目1.3：业界新闻，项目1.4：课件质询“，如图所示： 文案大全
实用标准
利用spry制作如下所示的效果： 1、菜单栏 讲述菜单栏、选项卡式面板、折叠式 三个任务的要求 分组讨论并尝试完成任务 将学习要求分为三个小的任务，利于学生的学习 2、选项卡式面板 任务二 Spry制作菜单栏 （50min） 3、折叠式 课堂小结 （5min） 课后作业 （5min） 1、 spry菜单栏制作 2、 选项卡式面板 3、 折叠式菜单栏制作 课后浏览不同网页并总结，以我的班级为主题自己动手制作菜单栏等 本次教学内容趣味性较强，学生兴趣较浓厚，特别是13高12电子商务班，学生学习自主性教学反思 和积极性都较好。计算机班同学学习氛围有待提高，
文案大全
实用标准
实训课题 实训目标 实训重点 实训难点 实训方法 实训准备 23、 24、 实训 调整样式 掌握div标签布局 掌握Spry构件的应用 实训课时 2课时 DIV布局及Spry菜单栏设置 Spry菜单设置 上机实训 教案、素材、案例、教材、计算机机房 46、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 47、 48、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 一、新建站点和默认图像文件夹 二、新建网页div.html，新建DIV标签top（宽：720，高60,背景颜色自拟—新建CSS规则）。新建DIV标签mid（宽：720，高250,背景颜色自拟）. 新建DIV标签bottom（宽：720，高20,背景颜色自拟） 三、在mid标签再新建两个子标签，分别为mid_left（宽：220，高250，颜色自拟）和mid_right（宽：500，高250，颜色自拟），布局完成后如下图所示： 任务 利用CSS样式控制页面 四、布局完成后，在Spry里新建Spry菜单和Spry折叠式，Spry菜单栏内容可自拟，完成后如下图所示： 文案大全
实用标准
五、用户登录展开是如下图所示：（插入表单—表单里插入表格3行2列，宽度90%，单元格边距为5，其它为0—插入文本字段和按钮） 六、完成后打包上交给教师（252026957@qq.com） 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 DIV布局在网页中运用较多，学生兴趣较浓厚 自主练习 实训总结 课题 6.3选择服务器和使用虚拟机 知识目标 教学课时 2课时 掌握DW安装最低的环境要求 能申请域名并进行网站发布 教学目标 能力目标 文案大全
实用标准
情感目标 教学重点 教学难点 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 1、域名概念 2、如何申请域名 如何申请域名 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 通过前面的学习，同学们已经掌握了如何制作网页，网页制作完成后如何申请发布呢？ 教师活动 讲授这次课的内容 学生活动 积极讨论并请代表总结如何申请域名 了解Dreamweaver 设计意图 激发学生学习的兴趣 导入新课 （5min） 安装Dreamweaver （25min） 一、了解Dreamweaver 介Dreamweaver 是美国 Macromedia Dreamweaver公司（目前该公司已属于美国 景 Adobe 公司）开发的集网页制作和网站管理于一身的所见即所得的网页编辑器，是公认的最好的网页设计工具。 二、安装步骤 1、下载Dreamweaver 8.0 简体中文 2、解压缩至当前文件夹并安装 选择“dreamweaver cs5官方简体中文正式版双击运行，安装提示的安装步骤安装软件 3、激活软件 绍背理解并掌握必要的基础知识 任务二 oracleVM virtualbox的安装 （50min） 一、VirtualBox的下载官方下载地址：http://www.virtualbox.org/wiki/Downloads 二、VirtualBox 软件安装： 1、开始安装 2、同意软件安装条款。 3、软件安装目录选择。 4、软件快捷方式生成。 .5、安装网络特性。 6、软件安装完成。 三、制作网页 1、 服务器的选择 2、 Dreamweaver按照及最低环境要求 课堂小结 （5min） 文案大全
实用标准
课后作业 （5min） 动手安装Dreamweaver cs5，总结安装所需环境 服务器的选择一直是一个比较重要的环节，学生需要掌握它最低环境才能正确选择服务器教学反思 和使用虚拟机，本次内容学生还是需要加强对虚拟机的理解。
课题 知识目标 教学目标 能力目标 情感目标 教学重点 教学难点 6.4申请域名 1、掌握域名概念 2、掌握申请域名步骤 能申请域名并进行网站发布 教学课时 2课时 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 1、域名概念 2、如何申请域名 如何申请域名 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 通过前面的学习，同学们已经掌握了如何制作网页，网页制作完成后如何申请发布呢？ 一、 域名概念 域名：由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置），目前域名已经成为互联网的品牌、网上商标保护必备的产品之一。 二、 是否付费 域名按是否付费可分别免费域名和教师活动 讲授这次课的内容 学生活动 积极讨论并请代表总结如何申请域名 讨论布局的分布，并尝试把布局画下来 设计意图 激发学生学习的兴趣 导入新课 （5min） 理解并掌握必要的基础知识 了解域名 （25min） 文案大全
实用标准
付费域名，免费域名通常为二级域名，是由其它公司所提供的基于本站的域名。而付费域名则通常是一级域名，尤其适合公司使用 三、申请域名详细步骤 1、 首先我们登陆“花生壳”官网，点击页面右上角的“注册”按钮注意一个花生壳账户。 任务二 申请域名 （50min） 2、 注册完成后，输入“真实姓名”和“身份证”，将免费获取一个域名。 3、 如何免费的域名不符合我们的要求时，我们可以自己注册想要的域名。待免费获取域名完成后，点击“进入我的控制台”链接 文案大全
实用标准
4、 在“我的控制台”界面中，点击“产品管理”->“域名管理”项 5、 接着在打开的界面中点击“添加域名”按钮 6、 然后勾选“注册域名”，并点击“下一步”按钮。 文案大全
实用标准
7、 接着输入要注册的域名对应的主机名，点击“查询”按钮来判断是否可以注册，当可以注册时，点击“注册”按钮即可成功注册该域名 8、 最后就可以在“域名管理”界面看到已注册的域名信息 课堂小结 （5min） 课后作业 （5min） 3、 域名概念 4、 如何注册域名 网上利用自己的身份申请一个域名 本次教学内容较简单，学生对软件的安装等有一定的经验，所以操作起来还算是得心应手。教学反思 但是学生的总结能力有待提高。 实训课题 实训目标 实训重点 25、 26、 实训 网站发布 实训课时 2课时 了解Dreamweaver 学会利用Dreamweaver制作网页掌握Spry构件的应用 网站发布流程及方法 文案大全
实用标准
实训难点 实训方法 实训准备 发布站点操作 上机实训 教案、素材、案例、教材、计算机机房 49、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 50、 51、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 在发布网站之前先使用Dreamweaver站点管理器对你的网站文件进行检查和整理，这一步很必要。可以找出断掉的链接、错误的代码和未使用的孤立文件等，以便进行纠正和处理。 步骤如下：在编辑视图点「站点」菜单＞选“检查站点范围的链接”，弹出“结果”对话框，如下图： 任务 利用CSS样式控制页面 下图是检查器检查出本网站与外部网站的链接的全部信息，对于外部链接，检查器不能判断正确与否，请自行核对。 下图是检查器找出的孤立文件，这些文件您的网页没有使用，但是仍在你的网站文件夹里存放，上传后它会占据有效空间，应该把它清除。清除办法是：先选中文件，点Delete键，确定。这些文件就放在“回收站” 文案大全
实用标准
如果不想删除这些文件，点保存报告按钮（上图所示），在弹出的对话框中您给报告文件一个保存路径和文件名即可。该报告文件为一个检查结果列表。你可以参照此表，进行处理。 纠正和整理之后，您的网站就可以发布了。 【发布站点操作】 如果您是第一次上传文件，您的远程 Web 服务器根文件夹是空文件夹时按以下操作进行。如果不是空文件夹，另行操作附后。 服务器根文件夹是空文件夹时，连接到远程站点，请执行以下操作： 在 Dreamweaver MX 2004中，选择“站点”>“管理站点”。管理站点对话框中“dwmx2004”是在本教程第5页设置的，如果想回忆一下，请查看“设置站点”。 选择一个站点（即本地根文件夹），然后单击“编辑”。 文案大全
实用标准
单击对话框顶部的“基本”选项卡。在前面“设置站点”时，已填写了“基本”选项卡中的前几个步骤，因此单击几次“下一步”，直到向导顶部高亮显示“共享文件”步骤。如下图： 在标有“您如何连接到远程服务器？”的弹出式菜单中，选择“FTP”。单击“下一步”，弹出如下对话框： 文案大全
实用标准
请输入以下选项： 输入服务器的主机名；（必须填入） “您打算将您的文件储存在服务器上的什么文件夹中？”（可以留空） 在相应的文本框中输入您的用户名和密码。 “使用安全 FTP (SFTP)”选项。（可不勾选） 单击“测试连接”。 如果连接不成功，请检查设置或咨询系统管理员。 在输入相应的信息后，单击“下一步”。 不要为站点启用文件存回和取出。 单击“下一步”。 单击“完成”以完成远程站点的设置。 再次单击“完成”以退出“管理站点”对话框。 【上传文件】 在设置了本地文件夹和远程文件夹（空文件夹）之后，可以将文文案大全
实用标准
件从本地文件夹上传到 Web 服务器。 请执行以下操作： 在“文件”面板（“窗口”>“文件”）中，选择站点的本地根文件夹。 单击“文件”面板工具栏上的“上传文件”蓝色箭头图标。 Dreamweaver MX 2004会将所有文件复制到服务器默认的远程根文件夹。 多数空间提供商都设置有服务器默认的文件夹，请在此文件夹下创建一个空文件夹，方法是：在“文件”面板，将“本地视图”转换为“远程视图”。右键点击文件夹，选“新建文件夹”，输入一个名称，用作您的远程根文件夹，名称与您本地根文件夹的名称一致，便于操作。 也可以最大化“文件”面板。请打开“文件”面板的最右边的“扩展/折叠”按钮，最大化文件面板，如下图，左边为远端站点内容，右边为本地文件内容。 点击 ，Dreamweaver MX 2004将所有文件复制到您定义的远程文件夹。 第一次上传必须搞清楚网络空间服务商指定的服务器默认的存放网页的文件夹，在此文件夹下存放您的站点文件。访问您的网站地址为：文案大全
实用标准
http://......./index.htm 如果你在服务器默认的文件夹下上建立了与本地根文件夹同名的文件夹，那么访问您的网站，需要用这样的地址：http://........./ （您的文件夹名）/index.htm 上传完毕，请在浏览器中输入浏览地址，测试您上传的结果。 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 前面一直在讲网站如何制作，这次上机实训讲述网站的发布，学生比较有兴趣，每个学生跃跃欲试，想把自己制作的网站发布，让别人来进行访问，所以学生的积极性比较高，较好。 自主练习 实训总结 课题 7.1个人主页制作 知识目标 1、掌握网站策划书的书写 2、掌握网站制作流程 教学课时 2课时 教学目标 能力目标 情感目标 能灵活运用所学知识制作个人主页 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学重点 教学难点 1、网站策划书写 2、网站制作流程等 策划网站 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 小组讨论法 教学资源 教法 文案大全
实用标准
教学过程 过程安排 教学内容 通过前几章的学习，我们已经能够制作一个简单的网站，假如现在你是网站开发人员，需要制作一个医生主页，该如何制作？ 教师活动 引导学生分析医生主页该如何制作？ 引导学生分析制作个人主页流程并用流程图画出来 学生活动 小组讨论个人主页制作 讨论个人主页制作流程 设计意图 激发学生学习积极性 导入新课 （5min） 制作一个肿瘤医生的个人主页，系统而详细的介绍个人主页制作的过程，整个准备过程流程如下： 任务一 网站制作流程 分析客户需求——》制作网站策划——》准备所需素材——》创建网（25min） 页布局——》创建CSS样式——》 制作首页模板——》制作子页模板 ——》案例扩展分析——》测试上传 以讨论的方式激发学生的兴趣 一、网站策划 根据客户的要求，参照网上一些医生主页的样式，为该网站策划了如下栏目： 1、 个人介绍 2、 临床实践 3、 肿瘤知识 4、 生活感悟 5、 健康问答 二、网站结构规划 1、在正式创建网站之前，先规划网站目录的结构，如下图所示： 任务二 网站策划及结构规划 （50min） 引导学生医生个人网站设计应该要开设哪些栏目？ 分组讨论需要开设的栏目 以任务驱动法让学生自主完成任务 2、准备所需素材 文案大全
实用标准
课堂小结 （5min） 课后作业 （5min） 1、 网站设计流程及策划 2、 网站结构规划及素材 浏览网上一些关于医生的个人主页并进行总结，为下次课制作个人主页打下基础 本次内容主要是网页制作的一个综合分析，主要是讨论网站的主题以及色调搭配以及考虑教学反思 个人职业方面所需要准备的素材和站点等，学生讨论较积极，较好。
课题 7.2策划构思及设计流程 知识目标 1、掌握构划页面布局草图 2、掌握设计界面 教学课时 2课时 教学目标 能力目标 情感目标 能灵活运用所学知识制作个人主页 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学重点 教学难点 1、 页面布局草图绘制 2、 新建站点和默认图像文件夹 页面布局 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 教师活动 学生活动 小组讨论页面布局 设计意图 激发学生的创造性 导入新课 （5min） 通过上次网页设计流程的分析，引导学生自己绘这次课我们运用自己的经验来构划制布局草图，可不页面布局 统一标准 文案大全
实用标准
通过小组之间的讨论，得到如下所示的页面布局草图： 任务一 页面布局图 （25min） 完成后如下图所示： 任务二 首页制作 （50min） 课堂小结 （5min） 课后作业 （5min） 3、 页面布局的绘制 4、 制作个人主页首页 尝试动手制作个人主页 文案大全
实用标准
本次课主要是讨论网页制作的策划以及构思，是制作网站非常重要的一个环节，但是这个教学反思 环节往往被很多学生忽略，甚至有些学生一拿到题目就开始动手做，根本就没有思考如何去规划，自然得到不好的效果，教师需要再强调策划的重要性。 实训课题 实训目标 实训重点 实训难点 实训方法 实训准备 实训 页面布局 制作医生个人主页网站 个人站点的建立及主页制作 Dreamweaver的应用 上机实训 教案、素材、案例、教材、计算机机房 52、 实训课时 2课时 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 53、 54、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 一、新建站点文件夹，如图所示： 任务 利用CSS样式控制页面 二、新建网页Index.html 文案大全
实用标准
三、设置标题栏 四、设置页面属性 1、设置外观 2、设置链接 3、设置标题/编码 五、创建CSS样式表 六、画出页面布局草图，参考图如下（仅供参考，不能抄袭）： 七、画出布局草图后，网上搜索自己需要的图片、音乐、视频等进行保存 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 自主练习 实训总结
课题 7.3制作页面头部 知识目标 1、掌握从外部引入CSS样式表 2、掌握表格合并和拆分 1、会应用摸板创建新网页 2、用库项目为网页添加元素 教学课时 2课时 教学目标 能力目标 文案大全
实用标准
情感目标 教学重点 教学难点 培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力 制作网站首页头部及子页模板流程 1、 代码书写 2、 图片路径的正确书写 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 经过前面的准备，即可以正式制作网页了，制作网页的同时也要同步创建适合页面的CSS样式。 教师活动 网页的制作一般秉承什么原则呢？如何从外面导入CSS样式呢？ 1、 将学生分5组 2、 尝试自学操作附加样式表添加链接 学生活动 学生分组讨论教师提出的两个问题 设计意图 调动学生学习积极性，抛出问题引出下文 导入新课 （5min） 1、打开“CSS样式”面板，单击，或在空白处单击鼠标右键，在弹出的菜单中选择“附加样式表”命令 2、弹出 “链接外部样式表”对话框，选择样式表文件，选择“添加为”的选项为“链接”。 3、单击“确定”按钮，完成从外部任务一 引入CSS样式表的设置。 导入CSS表及4、新建宽度为739px、2行2列的表建立头部表格 格，合并第一列的两个单元格 （25min） 5、将“设为首页”设置为空链接“#”，再切换到代码视图，输入首页的代码如下：
实用标准
任务二 制作导航条 （30min） 6、网站的导航条能让用户在流浪网页时很容易到达站点的不同页面，是网页的重要组成部分。 7、在第2列第2行插入宽度为100%的1行3列的表格，将表格设置为导航条的背景。 注意：让填充和间距均为0，否则在插入图像后会有间隙 8、在表格第2列中再插入一个宽为100%的表格，按栏目分配表格的列，输入导航栏的名称，并在两个名称之间插入一个细长的图片 9、为刚插入的对象设置链接，并设置CSS样式，预览，如下图所示： 1、提出任务，以小组为单位进行尝试操作 2、教师巡回指导 1、 小组合作完成教师提出任务 2、 组员之间可对任务进行讨论 以自主学习为主，提高学生自主学习能力 10、Banner的位置一般用于宣传自己的网站或是当前的主题活动，此处一般用图片或动画来实现 11、建立一个宽度为739px的3行1列的表格，间距和填充设置为0，设置第一行高度为4，用背景填充，代码如下：
实用标准
教学反思 课题 7.4制作中间表格内容 知识目标 1、掌握插入分割线 2、掌握表格属性代码修改 3、掌握信息排行 教学课时 2课时 教学目标 能力目标 情感目标 1、会应用摸板创建新网页 2、用库项目为网页添加元素 通过自主探究，相互合作的学习能力 教学重点 1、层的布局 2、表格拆分和合并 3、分割线插入和属性设置 中间表格的排版布局 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学难点 教学资源 教法 过程安排 教学内容 如何实现层的精确定位？摸板是一种特殊的文档，通过摸板来创建和更新网页可以大大提高工作效率，网站的维护也会轻松很多 教师活动 展示教师提前完成的网页效果 学生活动 观看完成的网页效果展示并对教师提出的问题思考讨论 设计意图 以提问的方式抓住学生的吸引力 导入新课 （5min） 文案大全
实用标准
任务一 创建表格 （25min） 一、创建表格 在头部表格下新建一个1行3列的表格，宽度为739px，填充和间距，边框都设置为0，居中对齐 二、制作分割线 1、 设置第一列的单元格宽度为182px 2、 第2列的单元格制作分割线，高度为2px，再用事先做好的图片进行填充 明确提出要求，教师巡回指导 提示学生医生这个职业，大家注意选择好颜色 以小组为单位积极尝试并解决教师的问题 注意选择颜色和图片 理解并掌握必要的基础知识 教师的提醒对学生的设计有很大的帮助 三、制作侧栏 1、 电子名片：为余医生设置一个电子名片 2、 新闻搜索：对于一个网站，搜索的功能很重要，特别是信息量非常大时，通过搜索功能，只需要输入关键字或者相关类别，即可查找到需要的信息，如下图所示： 任务二 制作侧栏 （50min） 课堂小结 （5min） 课后作业 （5min） 教学反思 一、创建表格和插入分割线 二、制作侧栏 接着上次的网页头部，模仿教师的方案，完成中间表格内容 文案大全
实用标准
文案大全
因篇幅问题不能全部显示，请点此查看更多更全内容