网页设计与制作教案备课笔记.pdf

word 文档 可自由复制编辑 教 案（首 页）编号：YJSD/JWC-17-10 授课序号 1 授课班级 锡五 08 装潢 授课课时 2 授课形式 新授 授课章节 名 称 第一章 网页概述 使用教具 多媒体教室 教学目的 知道网络发展的历史 描述网络的特点与网络的分类 知道网站和网页的区别、网页的类型、网页的构成元素等 教学重点 1、知道网站和网页的区别、网页的类型、网页的构成元素 2、了解网站的开发流程。教学难点 1、知道网站和网页的区别、网页的类型、网页的构成元素 2、了解网站的开发流程。更新、补 充、删节 内 容 无 课外作业 补充 教学后记 学生有一定基础，掌握情况较好！授课主要内容或板书设计 网站是网页的集合，是一个整体，其中包括一个首页和若干个网页。网站设计者先把整个网站结构规划好，然后再分别制作各个网页。大多数网站为网站浏览者提供一个首页，首页再链接多个网页。一般来说，一个网站是由很多网页构建而成的。首页是一个网站的门面，也是访问量最大的一个页面，访问者可以通过首页进入到网站的各个分页。因此，网站首页的制作是很重要的，它给浏览者一个第一印像，首页也奠定了网站的主题和整个基调，使访问者进入首页就能清楚地知道该网站所要传递的信息。word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 学习任务目标 1、知识与技能目标 知道网络发展的历史；描述网络的特点与网络的分类；了解 Web 的结构；了解 Web 的常用术语 2、操作技能目标 能够描述网络的发展历史概况；描述网络在社会、生活、工作中的应用；能够了解网页制作工具，以及网站的开发流程 3、情感目标 结合生活实际，浏览学习需要的网站。培养学生独立 思考和探究性学习的能力，协作学习的能力，培养学生 的团队意识和人际交往能力。教学指导 教学策略：任务驱动学习和协作学习、探究学习相结合 教学环境：多媒体网络教室 机房 学习活动 导入新课：整顿课堂纪律，检查书本情况，准备进入教学 任务 认识计算机 根据教学演示计算机，同学们说说计算机各部分的作用 提示学生从生活中的经常浏览的网页入手，通过观察大致了解网页的组成。word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 讲授新课 讲授法 一、网页的基础知识：WWW（World Wide Web），中文称为万维网，人们习 惯上将 WWW简称为 Web，或称为 3W。Web 的含义是 指通过超级链接将各种文档组合在一起，形成一个大规模 的信息集合。1、Web 网页的特点 Web 网页：扩展名为.htm或.html的文档，称为 HTML文 档或超文本，可通过浏览器打开，将其内容呈现给浏览者。由于超文本可以给浏览者带来视觉和听觉的享受，所以 Web 技术又称为超媒体技术。Web 网站：由一个或多个 Web 网页、相关文档组成。这 些网页及相关文档存放在 WWW服务器中，供浏览者访 问，它们之间相互关联、构成一个有机的整体。2、Web 网页常用术语 1）HTML（Hyper Text Markup Language）：HTML通过标 记符（Tag）标记网页的各个组成部分，通过在网页中添 加标记符，指示浏览器如何显示网页内容。2）URL（Uniform Resource Locator）：统一资源定位器，URL 的表示可以是绝对的，也可以是相对的。例如 http：word 文档 可自由复制编辑 /www.E_ 等.3）网页：一个网站可以包含若干个网页。静态网页，扩 展名为.htm或.html。4）主页：又叫首页，每个网站都有一个主页，主页文件 基本名为 index或 default，如 index.htm、default.htm、index.asp、index.aspx 等 3、Web 网页的基本元素 （1）文本（2）图像（3）超链接（4）导航栏 （5）表格（6）表单（7）多媒体及特殊效果 4、Web 网页的常见类型 静态网页、动态网页 二、认识网页制作工具 1、Frontpage 2、Dreamweaver 3、flash 4、Fireworks 5、Photoshop 6、Ulead GIF Animator 三、认识网站开发流程 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 1.确定网站的主题与名称 （1）主题鲜明 （2）明确设立网站的目的 （3）体现自己的个性 2.搜集材料 3.规划网站 主题栏的设置 目录结构设计 颜色搭配 网站标志 Logo 版面布局 确 定 主 题 搜 集 素 材 规 划 网 站 网站规划 推 销 网 站 维 护 更 新 后期维护 网站制作 制 作 网 站 正 式 上 传 测 试 评 估 图 网站设计的工作流程 word 文档 可自由复制编辑 图像的运用 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 课堂小结1、网页的特点有哪些？2、网页中包括哪些内容？任务训练(1)什么是主页？(2)HTML 是什么？(3)在教师的组织下，浏览学校相关的、家乡的一些网站 请注意听教师介绍的术语名称、作用(功能)、性能指标，并用表格的形式记录或注释教师的解说术语或内容。(3)自己设计一个网站，并写出网站规划，位后续实验做 好准备。课后作业 试根据你的个人兴趣爱好构思一个网站，拟定主题，并为 你的网站划分功能模块，设计目录结构，收集素材，并偿 试设计网页。通过提问的方式了解学生任务学习的成果 word 文档 可自由复制编辑 教 案（首 页）编号：YJSD/JWC-17-10 授课序号 2 授课班级 锡五 08 装潢 授课课时 2 授课形式 新授 word 文档 可自由复制编辑 授课章节 名 称 2.1 Dreamweaver 8 的工作窗口 2.2 使用面板、菜单和辅助设计 使用教具 多媒体教室 机房 教学目的 了解 Dreamweaver 的工作窗口 会使用面板、菜单和辅助设计工具 了解 HTML语言的语法结构，初步掌握 HTML语言的基本结构 教学重点 HTML的基本结构及文字版面、图像的 HTML语法 教学难点 HTML语法含义的理解及进一步自学方法的掌握 更新、补 充、删节 内 容 无 课外作业 补充 教学后记 学生有一定基础，掌握情况较好！授课主要内容或板书设计 HTML语言 HTML标记放在与之间，一般./成对使用，也有个别单独使用 HTML不区分大小写 许多 HTML标记中含有属性，如font size=5 HTML源代码中的一个或多个半角空格，一个或多个换行在网页显示时只当一个半角空格显示 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 学习任务目标 1、知识与技能目标 Dreamweaver 是最优秀的可视化网页设计制作工具和网 站管理工具之一。HTML最基本的 Web 网页开发语言，可以适用于各种操作平台。2、操作技能目标 了解 Dreamweaver CS3 的安装运行环境 认识工作窗口、文档窗口和面板 HTML基础 3、情感目标 自己尝试编写简单 HTML语句。培养学生独立思考和 探究性学习的能力，协作学习的能力，培养学生的团队 意识和人际交往能力。教学指导 教学策略：任务驱动学习和协作学习、探究学习相结合 教学环境：多媒体网络教室 机房 学习活动 导入新课：点评上次课后作业的情况，由此准备进入教学 讲授新课 任务 1 了解 Dreamweaver CS3 的安装运行环境 任务 2 认识工作窗口、文档窗口和面板 任务 3 HTML 基础 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 讲授法 任务 1 Dreamweaver CS3 安装环境、启动与退出 1安装和运行环境：Windows2000/XP/2003，内存推荐 128MB，采用 256 色以上的 VGA 显示器。“网络四剑客”2007 包括 Dreamweaver CS3、Flash CS3、Fireworks CS3 和 Photoshop CS3 Extended 4 个程序组 件，是网页设计工具的优秀组合，全部安装需要约 1G 的 硬盘空间。安装十分简单，只要按照屏幕提示即可完成安 装。2启动 Dreamweaver CS3 3退出 Dreamweaver CS3 任务 2 认识工作窗口、文档窗口和面板 1工作窗口 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 2文档窗口 显示代码视图 同时显示代码与设计视图 显示设计视图 网页标题 错误检查 验证标记 文件管理 在浏览器中 预览/调试 刷新设计视图 视图选项 可视化助理 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 任务 3 HTML基础 1HTML网页的基本概念 HTML网页使用 HTML语言编写，它不需要编译，由浏览器（如 IE）解释执行。HTML网页文件的命 名规则如下。1）只能用英文字母、数字和下划线，不能包含空格和特 殊符号。2）名称区分大小写。3）网站的主页文件名为 index.htm 或 index.html。创建并浏览一个最简单的 HTML网页：1、在记事本中输入如下代码，命名为 first.html 并保存。使用 HTML编写网页 这是一个用 HTML编写的简单网页 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 PPT 演示 2HTML网页的基本结构 1）每一个 HTML文件以开始，以 结束。和 是成对出现的，所有的文本和命令都在 它们之间。2）是网页的头部标记，通常紧跟在之后。与 之间的文本是整个文件的序言，不在浏 览器中显示。3）和之间是网页的标题，浏览时将显示在 IE浏览器的标题栏上。一个好的标题应该使读者能从中 判断出该网页的大概内容。4）和之间是网页主体内容。在标记 中可以规定整个文档的一些基本属性，例如，bgcolor属 性用于指定文档的背景颜色，text 属性用于指定文档中文 字的颜色。5）编写 HTML代码时，字符不区分大小写，标记之间的 空格不影响网页的显示。3HTML 网页的编写方法 HTML网页是纯文本文件 保存时扩展名为.htm或.html word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 课堂小结 1、本章介绍 Dreamweaver CS3 的安装，工作窗口和操作 初步。2、通常所说的静态网页即 HTML网页，由 HTML语言编 写，由浏览器解释执行。HTML网页可以由记事本等文本 编辑工具编写，但一般用专用网页编辑工具（如 Dreamweaver、FrontPage）编写，既方便又高效。任务训练(1)HTML 网页由开始，以 结束。(2)标记是 HTML网页文件的主要组成部分，有头部标记、主体标记、文本标记、链接标记、图像标记、表格标记、表单标记、框架标记和其他标记。，(3)标记的一般写法：。课后作业 1、HTML 的主体标记有哪些属性？2、HTML 的水平线标记共有哪些属性？3、HTML 表单标记的属性中，get 和 post 方式的区别是 什么？word 文档 可自由复制编辑 教 案（首 页）编号：YJSD/JWC-17-10 授课序号 3 授课班级 锡五 08 装潢 授课课时 2 授课形式 新授 授课章节 名 称 2.3 HTML 基础 使用教具 多媒体教室 机房 教学目的 HTML 称为超文本标记语言；任何网页页面都是以 HTML 语言为核心和基础的。教学重点 了解 HTML网页文件的命名规则 了解 HTML网页的结构 了解 HTML常用元素实例 教学难点 了解 HTML网页文件的命名规则 了解 HTML网页的结构 了解 HTML常用元素实例 更新、补 充、删节 内 容 无 课外作业 补充 教学后记 学生有一定基础，掌握情况较好！授课主要内容或板书设计 HTML网页的基本结构：每一个 HTML文件以开始，以 结束。和 是成对出现的，所有的文本和命令都在它们之间；是网页的头部标记，通常紧跟在之后。与 之间的文本是整个文件的序言，不在浏览器中显示；和之间是网页的标题，浏览时将显示在 IE 浏览器的标题栏上。一个好的标题应该使读者能从中判断出该网页的大概内容；和之间是网页主体内容。在标记中可以规定整个文档的一些基本属性，例如，bgcolor属性用于指定文档的背景颜色，text属性用于指定文档中文字的颜色。；编写 HTML代码时，字符不区分大小写，标记之间的空格不影响网页的显示。word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 学习任务目标 1、知识与技能目标 本课主要通过几个简单的网页制作实例来举例说明如何 使用和认识 HTML语言，了解 HTML语言的基本概念和 HTML网页的编写编写方法。2、操作技能目标 能够根据要求自己编写操作实例中的网页，并独立完成 保存、预览等操作。3、情感目标 结合生活实际，制作简单网页。培养学生独立思考和 探究性学习的能力，协作学习的能力，培养学生的团队 意识和人际交往能力。教学指导 教学策略：任务驱动学习和协作学习、探究学习相结合 教学环境：多媒体网络教室 机房 学习活动 导入新课：整顿课堂纪律，检查预习情况，准备进入教学 任务 2.3 中的操作实例 HTML 称为超文本标记语言。使用 HTML 编写的超文本文档 称为 HTML 文档。任何网页页面都是以 HTML 语言为核心 和基础的。查看源文件 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 讲授新课 讲授法 任务 1 操作实例 2-2 自己编写程序，熟悉代码的格式以及含义，并尝试用网页 的形式打开文件，观察变化！任务 2 操作实例 2-3 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 任务 3 操作实例 2-4 自己编写程序，熟悉代码的格式以及含义，并尝试用网页 的形式打开文件，观察变化！任务 4 操作实例 2-5 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 通过幻灯片演 任务 5 操作实例 2-6 示给学生看 任务 6 操作实例 2-7 自己编写程序，熟悉代码的格式以及含义，并尝试用网页 的形式打开文件，观察变化！任务 7 操作实例 2-8 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 课堂小结1、HTML 语言的重要性 2、熟记 HTML 的各类标记 任务训练(1)利用记事本编写简单的网页 (2)利用 HTML编写一个合并单元格的表格网页 (3)利用 HTML编写一个简单的文章网页 (4)利用 HTML编写一个会员注册的表单网页 (5)利用 HTML编写一个嵌套的框架网页 课后作业 1、熟记 HTML 的各类标记 2、利用 HTML编写一个嵌入不同的多媒体元素的网页 通过提问的方式了解学生任务学习的成果 word 文档 可自由复制编辑 教 案（首 页）编号：YJSD/JWC-17-10 授课序号 4 授课班级 锡五 08 装潢 授课课时 2 授课形式 新授 授课章节 名 称 第三章 创建“我们的班”站点 使用教具 多媒体教室 机房 教学目的 了解如何创建和编辑网络站点 会建立和设置网页文件 了解如何申请主页空间与发布网站 教学重点 站点文件、文件夹的创建 教学难点 能够独立完成制作“我们的班”站点网页 更新、补 充、删节 内 容 无 课外作业 补充 教学后记 学生有一定基础，掌握情况较好！授课主要内容或板书设计 制作“我们的班”网页 1、创建“我们的班”站点 6、设置网页属性 2、制作网页标题 7、保存网页 3、设置导航栏 8、浏览页面 4、设置网页内容 9、设置首页及应用站点地图 5、网页的超链接 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 学习任务目标 1、知识与技能目标 本课主要通过一个简单的网页制作实例来说明如何创建 与编辑网络站点，建立与设置网页文件，申请主页空间与 发布网站。2、操作技能目标 能够自己创建本地站点、创建网页文件与文件、制作网页 建立超链接、保存完整的 Web 站点。能够描述如何申请主页空间与注册域名、并能够上传网页 与更新网站。3、情感目标 结合生活实际，制作简单网页。培养学生独立思考和 探究性学习的能力，协作学习的能力，培养学生的团队 意识和人际交往能力。教学指导 教学策略：任务驱动学习和协作学习、探究学习相结合 教学环境：多媒体网络教室 机房 学习活动 导入新课：整顿课堂纪律，检查背诵情况，准备进入教学 任务 创建“我们的班”网页 根据教学演示计算机，同学们说说网页各个组成，如果是 你如何开始做这个网页。word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 讲授新课 讲授法 任务 1 创建“我们的班”站点 1站点文件的规划 （1）按照文件的类型进行规划，例如可以将所有的夹下，便于查找。如图像素材存放在 images文件夹中。（2）按照网页主题进行规划，便于日后更好地管理 站点。建立目录结构的一些建议：不要将所有的文件都存放在根文件夹下，那样会造成文件 管理混乱。在每个主栏根文件夹下都建立独立的 images文件夹。按栏目内容建立根文件夹。文件夹的层次不要太深。不要使用中文文件夹名。2创建站点 1）设置站点存放位置（即站点根文件夹）2）建立 Dreamweaver 站点 方法：启动 Dreamweaver CS3 工作窗口，在菜单栏 中选择“站点”|“新建站点”命令，弹出“公司网站的站点定 义为”对话框。word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 任务 2 网页内容的制作和页面属性的设置 1建立新网页的方法 建立网页文件时应注意以下两个问题：主页文件必须存放在本地站点根文件夹下。例如，本例就 将首页文件存放在 D:chap3文件夹下。网页文件名、文件夹和网站内的其他文件名一般使用小写 英文字母（不要使用中文文件名或文件夹名），并且有些 网站服务器要区分大小写。2网页内容的制作 1）网页主题的制作 2）网页导航栏的设置 3）网页中文字、图像等的设置 4）网页中的超链接设置 指定本地站点所使用的文件夹本地根文件夹输入本网站所使用的网址，网页上传后，用户可使用此网址登录到本网站HTTP 地址选中“启用缓存”复选框，则当用户移动、重命名或删除站内的文件时，可以提高链接更新的速度缓存输入站点的名字站点名称含义项 目 名 称 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 通过幻灯片演 3页面属性的设置 示给学生看 外观的设置 超链接文本属性的设置 网页标题/编码的设置 任务 3 网站上传 知识点：注册域名、申请网页空间和网站上传 1保存完整 Web 站点 2注册域名与申请网页空间 3上传本地站点 4设置远程站点 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 课堂小结1、创建本地站点的作用是什么？2、什么是超链接？任务训练(1)为网站中的文件夹或文件命名时需要注意什么？(2)网站文件的文件名一般是什么？(3)如何在网上发布一个网站？(4)上传网页之前应该准备好哪些信息？(5)总结制作一个网站的全过程 课后作业 1、设计自己规划的网站 2、如果有条件可申请网页空间并上传自己的网站 通过提问的方式了解学生任务学习的成果 此选项与输入名填入用户登录的密码密码“密码”选项的ISP授权的用户名与密码是在申请网页空间时获取的，应填入申请网页空间时的用户名登录Web 服务器的FTP 地址，当用户申请主页空间时，Web 服务器的管理员将使用E-mail 告诉用户该地址FTP 主机选择“FTP”访问含义称 word 文档 可自由复制编辑 教 案（首 页）编号：YJSD/JWC-17-10 授课序号 5 授课班级 锡五 08 装潢 授课课时 2 授课形式 新授 授课章节 名 称 3.2 制作“我们的班”网页 使用教具 多媒体教室 机房 教学目的 通过一个简单的网页实例来说明如何建立和设置网页文件 教学重点 1、了解网站的开发流程 2、熟悉网页的构成元素 教学难点 1、了解网站的开发流程 2、熟悉网页的构成元素 更新、补 充、删节 内 容 无 课外作业 补充 教学后记 学生有一定基础，掌握情况较好！授课主要内容或板书设计 1、制作网页标题 2、设置导航栏 3、设置网页内容 4、网页的超级链接 5、设置网页属性 6、保存网页 7、浏览页面 8、设置首页以及应用站点地图 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 学习任务目标 1、知识与技能目标 本课主要通过一个简单的网页制作案例来说明如何建立 与设置网页文件。2、操作技能目标 能够自己创建本地站点、创建网页文件与文件、制作网页 建立超链接、保存完整的 Web 站点。能够描述如何设置首页以及应用站点地图 3、情感目标 结合生活实际，制作简单网页。培养学生独立思考和 探究性学习的能力，协作学习的能力，培养学生的团队 意识和人际交往能力。教学指导 教学策略：任务驱动学习和协作学习、探究学习相结合 教学环境：多媒体网络教室 机房 学习活动 导入新课：整顿课堂纪律，检查预习情况，准备进入教学 任务 创建“我们的班”网页 根据教学演示计算机，演示已经完成的“我们的班”网页，如果是你如何开始做这个网页。word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 讲授新课 讲授法 任务 1 制作网页标题 任务 2 设置导航栏 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 任务 3 设置网页内容 任务 4 设置超链接 1、选中需要设置超级链接的文字或图片 2、“属性”“链接”3、选择需要相关链接的文件 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 通过幻灯片演 任务 5 设置页面属性 示给学生看 1、设置网页标题 2、设置网页的背景图像或颜色 3、设置网页文本的属性 4、设置页面边距 5、设置文档编码 任务 6 保存网页 “文件”“保存”word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 任务 7 浏览页面 “文件”“在浏览器中预览”或 F12 任务 8 设置首页以及应用站点地图 “站点”站点地图 课堂小结1、网页制作中应该注意什么？2、什么是超链接？任务训练 完成课程中相应的操作实例！课后作业 1、继续编辑和完善“我们的班”网站 2、如果有条件可申请网页空间并上传自己的网站 通过提问的方式了解学生任务学习的成果 word 文档 可自由复制编辑 教 案（首 页）编号：YJSD/JWC-17-10 授课序号 6 授课班级 锡五 08 装潢 授课课时 2 授课形式 新授 授课章节 名 称 3.3 网站上传 使用教具 多媒体教室 教学目的 知道如何保存网站的 WEB 站点 描述如何申请网页空间和注册域名 知道如何上传本地站点 教学重点 1、知道如何申请网页空间和注册域名 2、知道如何上传本地站点 教学难点 1、知道如何申请网页空间和注册域名 2、知道如何上传本地站点 更新、补 充、删节 内 容 无 课外作业 补充 教学后记 学生有一定基础，掌握情况较好！授课主要内容或板书设计 将制作完成的网站发布到 internet，一般需要 3 个步骤：1、在本地计算机保存完整的 WEB站点；2、申请网页空间 3、上传网页文件到服务器 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 学习任务目标 1、知识与技能目标 所谓完整的 web 站点，是指保存在本地计算机上的站点必 需具备完整性与独立性。站点文件夹必须包含所用到的所 有文件。2、操作技能目标 能够自己在本地计算机上保存完整的 WEB站点 能够自己申请网页空间 能够上传网页文件到服务器 3、情感目标 结合生活实际，制作简单网页。培养学生独立思考和 探究性学习的能力，协作学习的能力，培养学生的团队 意识和人际交往能力。教学指导 教学策略：任务驱动学习和协作学习、探究学习相结合 教学环境：多媒体网络教室 机房 学习活动 导入新课：整顿课堂纪律，检查预习情况，准备进入教学 任务 网站上传 根据教学演示计算机，将制作完成的网站发布到internet word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 讲授新课 讲授法 任务 1 检查站点的文件链接 1、“文件”“站点”2、“站点”“检查站点范围的链接”“链接检查 器”自动检查 3、在“链接检查”按钮的下拉菜单有 3 种检查方式 4、显示检查结果 任务 2 申请网页空间与注册域名 1、申请主页空间 （1）租用虚拟主机 （2）申请免费空间 2、注册域名 任务 3 上传本地站点 1、制作好的网页 2、上传网页的域名 3、ISP服务商所提供的服务器的 URL 地址 4、ISP服务商所分配的用户名和密码 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 任务 4 上机实训 按 所 示 自 己 动 手 制 作 网 页 课堂小结1、保存完整的 WEB 站点的作用是什么？2、总结制作一个网站的全过程。任务训练 自己动手完成课后练习中图 3-36的网页 课后作业 1、继续完成“我们的班”网站 2、预习第四章内容 通过提问的方式了解学生任务学习的成果 word 文档 可自由复制编辑 教 案（首 页）编号：YJSD/JWC-17-10 授课序号 7 授课班级 锡五 08 装潢 授课课时 2 授课形式 新授 授课章节 名 称 4.1 网页中文本的设置 4.2 网页中图像的设置 使用教具 多媒体教室 机房 教学目的 输入文本和设置文本属性 在网页中插入图像并设置图像属性 教学重点 1、知道输入文本和设置文本属性 2、了解在网页中插入图像并设置图像属性 教学难点 1、知道输入文本和设置文本属性 2、了解在网页中插入图像并设置图像属性 更新、补 充、删节 内 容 无 课外作业 补充 教学后记 学生有一定基础，掌握情况较好！授课主要内容或板书设计 文本是网页的主体部分，是向浏览者传递有效信息的最主要的方式。虽然没有图像的多彩，也没有动画的强大冲击力，但文本却包含着最详尽的内容。通过文本，浏览者可以完全明白作者想要传达哪些信息。word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 学习任务目标 1、知识与技能目标 本课主要通过一个简单的网页制作案例来说明如何输入 文本和设置文本属性、在网页中插入图像并设置图像属 性。2、操作技能目标 能够自己在网页中输入文本和设置文本属性、在网页中插 入图像并设置图像属性。3、情感目标 结合生活实际，制作简单网页。培养学生独立思考和 探究性学习的能力，协作学习的能力，培养学生的团队 意识和人际交往能力。教学指导 教学策略：任务驱动学习和协作学习、探究学习相结合 教学环境：多媒体网络教室 机房 学习活动 导入新课：整顿课堂纪律，检查预习情况，准备进入教学 任务 按照要求完成操作实例 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 讲授新课 讲授法 任务 1 网页中文本的设置 知识点：输入文本和设置文本属性 1输入文本 在 Dreamweaver 中，文本的输入和其他字处理程序 （如 Word）基本相同。1）输入文字 直接输入文本：在编辑窗口中将鼠标光标定位到需插入文 本的位置，选择所需的输入法后输入文本。从其他文档中复制文本。2）输入空格 将中文输入法切换到全角模式，可以按“空格”键输入空 格。利用 Shift+空格键可以切换半角与全角状态。在“属性”面板的“格式”下拉列表框中选择“预先格式 化的”选项，可以按空格键输入空格。2修饰文本 1）插入列表 Dreamweaver CS3 中的列表就是字处理软件中的 “项目符号”与“项目编号”。在 HTML中有两种 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 类型的列表：一种是项目列表，用于软件无序的项目；另一种是编号列表，使用编号标记项目的顺序。设置为列表的方法如下。选中要设置为列表形式的文本，或将光标置于要设置为列 表的段落中。单击“文本”插入栏中的“项目列表”或“编号列表”按 钮，也可单击“属性”面板上的“项目列表”按钮或“编 号列表”按钮。2）文本的断行 在 Dreamweaver CS3 文档窗口中输入文字时，如果按 Ente r键换行，两段之间的距离比较大，为保持正常的行距，可采用插入“换行符”的方法。将光标定位在希望换行的位置。单击“文本”插入栏中的 “字符”按钮，选择下拉列表框中的“换行符”选项，即可插入一个换行符。也可按 Shift+Enter 键完成操作。3）设置文本属性 通过“属性”面板可以设置文本的字体、字号、颜色和对 齐方式，并可在文档窗口中查看效果。选择要修饰的文本，在文档的底部显示文本“属性”面板 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 通过幻灯片演 示给学生看 任务 2 插入图像并设置图像属性 知识点：在网页中插入图像并设置图像属性 1、插入图像 执行下列操作可以插入图像，步骤:（1）在希望插入图像的位置单击设置插入点，选 择“插入记录”|“图像”命令。（2）选取所要插入的图像文件，单击“确定”按钮。2、设置图像属性 1）图像“属性”面板 要设置图像属性，首先在文档窗口中选中指定图像，然后 选择“窗口”|“属性”命令，打开“属性”面板。通过 “属性”面板右下角的“展开”按钮可以控制显示常用 属性或所有属性 2）调整图像的大小 调整图像时需注意以下问题 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 “属性”面板的“宽”与“高”将显示图像的当前宽度和 高度，调整图像的大小将重置图像的“宽”与“高”。改变 GIF、JPEG 和 PNG 图像的“宽”与“高”时，图像 可能会失真或模糊。3）设置图像的对齐方式 执行下列操作可以设置图像的对齐方式。在文档窗口中选中图像，在图像“属性”面板中单击“左 对齐”、“居中”或“右对齐”按钮，可使图像放置在整个 页面的左侧位置、右侧位置或左侧位置。在文档窗口中选中图像，在图像“属性”面板的“对齐”下拉列表框中，可设置图像与同段落或同行中的其他元素 的相对对齐方式 课堂小结 1、在网页中如何输入文本、输入文本的时候 需要注意什么？2、在网页中如何插入图片、如何设置图片的 属性，需要注意什么？任务训练 完成课题上的操作实例 课后作业 课后操作练习 通过提问的方式了解学生任务学习的成果 word 文档 可自由复制编辑 教 案（首 页）编号：YJSD/JWC-17-10 授课序号 8 授课班级 锡五 08 装潢 授课课时 2 授课形式 新授 授课章节 名 称 4.3 制作图像效果 4.4 制作超链接 使用教具 多媒体教室 机房 教学目的 滚盖图、图像映射和 Flash 动画的插入 网站相册的创建 超链接的设置 教学重点 1、掌握滚盖图、图像映射和 Flash 动画的插入 2、了解网站相册的创建 3、掌握超链接的设置 教学难点 1、掌握滚盖图、图像映射和 Flash 动画的插入 2、掌握超链接的设置 更新、补 充、删节 内 容 无 课外作业 补充 教学后记 学生有一定基础，掌握情况较好！授课主要内容或板书设计 1、制作网页中的滚盖图 2、创建图像映射 3、插入 Flash电影 4、网站相册的创建 5、超链接的设置 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 学习任务目标 1、知识与技能目标 学习如何在网页中制作滚盖图；能够自己创建图像映射；能够在网页中插入 FLASH电影；能够自己创建网页相册；能够按需对超链接进行设置。2、操作技能目标 能够在网页中制作滚盖图；能够自己创建图像映射；能够在网页中插入 FLASH电影；能够自己创建网页相册；能够能够按需对超链接进行设置。3、情感目标 结合生活实际，制作简单网页。培养学生独立思考和 探究性学习的能力，协作学习的能力，培养学生的团队 意识和人际交往能力。教学指导 教学策略：任务驱动学习和协作学习、探究学习相结合 教学环境：多媒体网络教室 机房 学习活动 导入新课：整顿课堂纪律，检查预习情况，准备进入教学 任务 完成课堂操作实例 word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 讲授新课 讲授法 任务 1 制作图像效果和插入 Flash电影 知识点：滚盖图、图像映射和 Flash动画的插入 1制作网页中的滚盖图 浏览网页时经常会看到这样的效果：当鼠标指向某图像 时，图像大小不变但图像却变化为另一幅图像；当鼠标移 出该图像时，图像又可以还原，一般将这类图像称为“滚 盖图”。执行下列操作可以在网页中制作滚盖图。（1）单击需要插入滚盖图的位置，设置插入点，选择“插 入记录”|“图像对象”|“鼠标经过效果”命令。，word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 （2）在“插入鼠标经过图像”对话框中可进行如 下设置。在“图像名称”文本框中输入滚盖图的名称，也可 以使用默认设置。在“原始图像”文本框后单击“浏览”按钮并选取 图像文件或直接输入第一幅图像文件的路径。在“鼠标经过图像”文本框后单击“浏览”按钮并 选取图像文件或直接输入第二幅图像文件的路径。如果需要将图像预先加载到浏览器的高速缓存中，可选中“预载鼠标经过图像”复选框，此复选框默 认被选中。替换文本：输入当鼠标指向图像时显示的提示信 息。在“按下时，前往的 URL”文本框后，单击“浏览”按钮并选取链接文件或直接输入链接文件。如果不 为图像设置链接，Dreamweaver CS3 将在 HTML 源 代码的滚盖图附加行为中插入一个空链接（#），如 果删除该空链接，滚盖图将不正常显示。单击“确定”按钮。word 文档 可自由复制编辑 课 堂 教 学 安 排 教 学 过 程 主 要 教 学 内 容 及 步 骤 备 注 通过幻灯片演 2创建图像映射 示给学生看 一幅图像一般只有一个超链接。如果希望一幅图像 具有多个超链接，则必须使用图像热点进行处理。例如，在网页上插入一幅世界地图，该地图可创建 多个不同的热点区域，当浏览者单击中国地区的热 点时即可进入有关中国的页面