《Dreamweaver网页设计》教案

作业： 课堂作业：1.叙述3种模式的概念及切换方法。 2.说出表格和布局表格的作用 3.叙述“表格扩展模式”的作用 4.什么是间隔图像？ 书面作业：课后习题。 小结：通过与学生熟悉的word中表格的操作对照讲解，本章的讲解显得较轻松；让学生上台操作，提高了学生的学习积极性和主动性，教学效果较好。 第5章 使用框架布局网页 教学目标与要求 了解框架网页的概念；熟练创建、保存框架网页，并设置框架和框架集的属性；框架中超级链接的创建和目标属性设置 熟练创建保存框架网页，并设置框架和框架集的属性；框架中超级链接的创建和目标属性设置 框架网页的概念和保存；框架中超级链接的创建和目标属性设置 多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲授，师生互动，提问式教学。 2学时 教学重点 教学难点 教学方法 教学课时 第5章 框架网页 5.1框架和框架集的概念、结构和应用 1.基本概念  框架网页、框架集、框架  框架和框架集的关系 2．框架网页的结构 3.认识框架面板： 4.框架网页的应用：通常用于导航。 5.框架网页的优缺点 5.2 创建和保存框架与框架集 5.2.1 使用预设的框架集 1.创建新的空预设框架的具体操作步骤。 教学提示 通过看看和分析知名网站使用框架的布局效果，引入框架和框架集的概念 学习好资料 欢迎下载

修改框架名称必须以字母开头，可以包含数字、下划线（_）； 但不允许是javascript中的保留字（如top或navigator）、连字 符（-）、句点、空格和；而且区分大小写。 2.创建预设的框架集并在某一框架中显示现有文档 5.2.2 创建和编辑框架 1.创建框架 2.删除框架 3.建立嵌套的框架集 4.保存框架和框架集 5.3设置框架及框架集的属性 1.选择框架：通过“框架”面板来选择框架和子框架。 2.设置框架属性  框架的背景颜色可以在页面属性中进行设置  在框架的属性面板中进行设置框架的的名称、源文件、链接、边距、滚动、边框和能否调整大小等。 3.设置框架集属性：边框、边框大小和边框颜色。 5.4设置框架集中的超级链接 5.4.1在框架网页中建立超链接 5.4.2框架网页中设置超级链接的目标打开方式 1.相对链接目标：_blank 、_top 、_parent、_self 举例演示框架的创建和保存操作 打开框架面板，查看并总结框架和框架集的属性设置及其含义 演示框架中的超级链接效果 2.绝对链接目标：mainframe、Leftframe、Rightframe、Topframe。 5.6课堂实例――制作一个框架网页 举例演示框架网页的设计与制作 学习好资料 欢迎下载

作业： 1.使用框架的优点是什么？ 2.课后习题 小结：本章介绍了框架网页的创建、保存和属性设置，着重讲解了框架网页的中超级链接的创建和目标设置，内容较少，授课效果较好。 学习好资料 欢迎下载

第6章 AP元素的创建和使用 理解AP元素的作用；熟记AP元素的命名原则和特点；掌握教学目标与要绘制AP元素和插入AP元素的方法和区别；熟练设置AP元求 素的属性；灵活、合理地使AP元素随心所欲的布局页面内容。 教学重点 教学难点 教学方法 AP元素的作用；AP元素的插入和绘制；AP元素的属性设置；AP元素的特点；AP元素的应用 AP元素的作用；AP元素的属性设置；AP元素的应用 多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲授，师生互动，提问式教学。 教学课时 2课时 第6章AP元素的创建和使用 在浏览网页时，注意到滚动的广告图片了吗？---它是使用AP元素做出来的效果。 6.1应用AP元素布局网页 6.1.1AP元素的概述 1、AP元素的应用：布局网页；制作简单动画；设计特效等。 2、AP元素的定义、AP元素的特点、AP元素的分类、AP元素的优缺点、AP元素面板。 教学提示 抛出问题，引入新课 强调AP元素在页面布局中的作用 演示AP元素的绘制要领； 选择AP元素，让学生观察的属性，并详细讲解各属性的设6.1.2创建AP元素 1.在首选参数对话框中设置AP元素的参数，可设置AP元素嵌套和显示AP元素锚记。 2.插入AP元素与绘制AP元素 3.绘制AP元素和插入AP元素的差别 4.AP元素的html代码 5.AP元素的绝对定位（一般是默认设置）和相对定位 6.1.3.AP元素属性详解 1.单个AP元素的属性：AP元素编号、左和上、宽和高、Z 轴、背景图像、背景颜色、剪辑、可见性、溢出： 学习好资料 欢迎下载

2.多个AP元素的属性： 置含义。 演示AP元素的各种操作 综合举例 6.1.4AP元素的基本操作 激活AP元素、选择AP元素、调整AP元素大小、移动AP元素、对齐AP元素、吸附AP元素到网格 6.1.5嵌套AP元素 6.1.6.AP元素和表格的相互转换 6.2 课堂实例――用AP元素布局网站首页 作业：课后习题 上机作业：使用AP元素、表格和css排版网站首页 小结：本章着重讲解AP元素的创建、命名和属性设置，让学生亲自上台制作案例，加深了对新知识的印象。上机时发现学生基本都能完成操作任务，总体感觉授课效果较好。

学习好资料 欢迎下载

第7章超级链接 了解超级链接的路径和链接结构；熟记超级链接目标打开方教学目标与要求 式的设置含义；熟练掌握超级链接的4种创建方法；能快速完成5种特殊超级链接的创建方法和步骤。 1.超级链接的各种创建步骤 教学重点 2.超级链接目标打开方式的设置含义 3.超级链接的4种创建方法 4. 5种特殊超级链接的创建方法和步骤 教学难点 教学方法 1.超级链接的路径 2.超级链接目标打开方式的设置含义 多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲授，师生互动，提问式教学。 教学课时 2课时 第7章 超级链接 大家已经会创建不同内容的网页了，怎样把这些分散的网页组合成一个统一的整体，让浏览者只打开主页就能访问到其它各个面呢？----需要创建超级链接。 7.1超级链接的定义和目标选项的含义 1 .超级链接的定义 2.属性检查器的“目标”弹出菜单中各个选项的含义：_blank、_parent、_self、_top。 教学提示 抛出问题，引入新课。（2分钟） 打开几个典型网站的主页，让大家分析超级链接的功能，进而引入超级链接的定义、分类让3：创建一个完整的超级链接必须考虑的4个方面： 和目标列表的设置。 ①链接的载体 ②链接的目标 ③链接的路径 ④链接目标的打开方式 学生讨论总结创建超级链接的注意事项（20分钟） 通过举例和配图讲解链接路径的类型和在创建超级链接时路径的书写方法（20分钟） 采用讨论法，让学生讨7.2超级链接的路径 在dreamweaver中有三种类型的链接路径： 绝对路径、文档相对路径、站点根目录相对路径。 学习好资料 欢迎下载

7.3超级链接的分类 １按照链接路径的不同，网页中超链接一般分为内部链接、锚点链接、外部链接3种类型。 ２按照使用对象的不同，网页中的链接又可以分为以下几种：文本超链接、图像超链接、电子邮件链接、锚点链接、软件下载链接、多媒体文件链接、空链接等。 论总结超级链接的分类。（8分钟） 举例讲解各种方法下超级链接的创建方法和创建步骤，并总结各种方法的使用情况 （25分钟） 借助上面讲过的创建方法，让学生上台操作实践，创建各种类型的超级链接。根据情况不部分内容调整到机房讲解。（30分钟） 简要讲述超级链接的修改与更新操作。（15分钟） 结构较为简单（15分钟） 总结并提出建议。（10分钟） 7.4超级链接的创建方法 1. 使用属性检查器中链接后的文本框创建各种各样的超级链接； 2.使用属性检查器中的浏览文件图标创建各种各样的超级链接； 3.使用“指向文件”图标创建超级链接； 4.使用菜单中的“超级链接”命令创建超级链接； 7.5几种特殊的超级链接详解 1．锚记链接 2．创建脚本链接 3．给图像热区加上超级链接 4．创建电子邮件超链接 5．创建空链接 7.6超级链接的基本操作：更新、修改、检查 7.7超级链接的结构 7.8总结创建超级链接的5点建议 作业：1.叙述超级链接的定义 2.说出超级链接的路径 3.说出超级链接的4种创建方法。 小结：本章内容较多，超级链接的路径较难理解；其他内容相对容易，且操作性较强，易掌握，学生基本都能创建各种类型的超级链接，总体 感觉授课效果还好。 学习好资料 欢迎下载

第8章交互（行为、图AP元素和时间轴的综合运用，以及javascript） 1. 熟练地应用行为，能够随心所欲地制作出具交互功能的网页； 教学目标与要求 2. 掌握时间轴的概念和基本用法； 3. 通过对行为的学习应用，增加网页设计的特殊效果，提高学生对学习网页制作的兴趣，培养大家的动手操作能力。 4. 了解java脚本的基本用法 教学重点 1.行为的概念和创建，2.使用DW内置的行为3.AP元素、行为和时间轴的综合运用 1.使用DW内置的行为；2.高级行为的应用；3.AP元素、行为和时间轴的综合运用 多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲授，师生互动，提问式教学；任务驱动、引导教学、理论与操作紧密结合。 教 学 课 时 4课时 教学提示 教学难点 教 学 方 法 第8章交互（行为、图AP元素和时间轴的综合运用，以及js） 问题：大家已经会在网页中的特殊效果如：弹出消息、检查表单、设置导航文本、鼠标的花瓣、棉花糖、下雪了、礼花绽放等，这样的动态网页是如何制作的呢？使用行为就可以实现。 8.1.1初步认识行为 1、DW行为的引出 2、行为的概念 3、与行为相关的三个重要部分：对象、事件和动作。 4、认识行为面板 抛出问题，导入新课 举出几个典型的带有行为的网页显示行为的应用，进而引出行为的作用和相关概念（25分钟） 举例讲解行为的创建步骤。（10分钟） 8.1.2行为的创建、修改和更新 创建行为的三个步骤 修改行为 更新行为 学习好资料 欢迎下载

8.1.3使用DW内置的行为 dw8.0自带的行为主要有: 1.弹出消息 2、“播放声音”实例 3、跳转菜单和跳转菜单开始 4、打开浏览器窗口 演示常用的DW内置行为的操作步骤和要领，5、交换图象与恢复交换图象 6、控制shockshave或flash 部分调整在机7、设置导航栏图像 8、设置文本 9、显示弹出菜单（下拉菜单） 10、显示和隐藏AP元素 11、拖动AP元素 12、滚动链接的AP元素 8.1.4高级行为的应用 1、插入滚动字幕 示例：文本自动向上循环滚动，鼠标放到上面还会暂停 2、下载安装扩展插件 3、下载网页特效，适当修改相关代码，再把代码放到代码视图的具体位置。 举例：花瓣、棉花糖。 8.2AP元素、行为和时间轴的综合运用 1.时间轴面板 2、时间轴和图AP元素的综合运用 （1）滚动字幕 （2）网页浮动动画 （3）设置文字的阴影效果（4）幻灯片效果 （5）控制图像播放动画 （6）制作滚动的折叠菜单 （7）具有预览功能的电子相册效果 房讲解；（30分钟） 本部分为选讲内容。举例讲解高级行为的应用；重点讲解4种扩展插件的安装和应用效果。（30分钟） 举典型实例演示AP元素和行为综合应用效果（40分钟） 引入特效代码，举例讲解js在Dw中的应用。（20分钟） 8.3在网页中应用javascript 1.认识代码片段面板 2.应用代码片段 3.应用举例 作业：课后习题１、２、３题 小结：通过举例，详细讲解了AP元素、时间轴和行为的综合运用。本节的内容较多，步骤也繁琐。通过视频演示和实际操作演示，加深对行为的理解，加强了学生的实际操作能力。希望同学们下去自己多多练习。学完本章，大家应该能灵活的制作出较为简单的具有特殊效果的动态网页。

学习好资料 欢迎下载

第9章cssAP元素叠样式表 1.了解css的概念及样式类型 教学目标与要求 2.熟练掌握css的属性设置、能熟练操作（创建、导入、导出）cssAP元素叠样式表； 3.css和表格、css和div的综合运用 教学重点 教学难点 教学方法 教学课时 css的概念及样式类型；Css的创建及属性设置；css和表格的综合运用 Css的创建及属性设置；css和表格、css和div的综合运用 多媒体演示为主，课堂讲授，师生互动，案例教学。 4课时 第9章cssAP元素叠样式表 打开一个没有应用样式设置的预先准备好的网页，先让学生观察设计视图中的效果，然后在IE中预览，让学生总结显示效果的变化，这是怎么回事呢？---没有使用样式。 9.1css基础 1. css样式表的基本概念  样式、cascading和css  Css可能改变的性质  外部css样式表的扩展名是.css。 2.css的5个优点： 3. css面板  打开css面板的3种方法  css面板中的按钮和功能 adobe建议用css面板作为创建和编辑css的主要工具。用户可教学提示 抛出问题，引入新课 打开几个典型的应用css的网页，让大家分析css的优点，进而引入css的定义、类型。 打开样式面板，演示各按钮的作用； 打开css样式以自己创建AP元素叠样式表，还可以dw附带的AP元素叠样式表 4.样式表类型（理解即可） 选择器有三种（常见）类型，可以创建4种不同选择器类型的样式： （1）自定义css规则（类样式），命名规则 （2）html标签样式表 创建的对话框，通过创建过程的选择讲解css的类型。 学习好资料 欢迎下载

（3）对于高级样式（也称ID、伪类选择器） 通过举例详细讲解css规则的各项设置内容。 9.2 CSS规则详解 在“规则对话框”中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来美化页面。在定义某个CSS样式时，不需要对每一个项都进行设置，需要什么效果，就选择相应的项进行设置。 先演示css创建的具体步骤，然后让学生上台操作演练。 先讲解应用的方法，然后通过大量举例讲解各种样式的创建和应用 。举了4个例子，分别是类样式、伪类样式、ID样式、标签样式。 9.3创建新的CSS规则 9.4应用CSS样式 9.4.1各种样式表的应用  应用自定义CSS样式，有下列3种方法  对于html标签样式和高级样式，定义仅对该文档后，会自动应用到相应的文档中。  对于外部的css样式表：在样式面板中选择附件样式表按钮，打开“链接外部样式表”对话框，可以链接外部的CSS样式文件。  清除样式:选中要清除样式的对象,设置成“无”样式即可。  使用范例css样式表 9.4.2应用举例（参看课本p131-139示例） 1.课堂实例――用CSS格式化文本 2.课堂实例――用CSS控制表格 3.用CSS控制列表 4.用CSS控制背景 5.用CSS控制区块 6.CSS样式滤镜的应用 9.5 编辑CSS规则和CSS样式 编辑CSS规则：在样式面板中直接双击进行修改。 学习好资料 欢迎下载

编辑CSS样式：在样式列表中选中需要编辑的规则的名称，直接单击“编辑样式”按钮，在弹出的“CSS规则定义”对话框中修改相应的设置。 打开代码视图，观察各种样式9.6 CSS样式的三种存放方式 （1）直接插入 （叫内部标签）：

学习好资料 欢迎下载

第10章（1）管理和使用站点资源与库项目 教学目标与要求 教学重点 教学难点 教 学 方 法 灵活使用和管理站点资源、库和模板，提高网页制作的速度和效率。 资源面板的使用 库的管理、创建和编辑 任务驱动、引导教学，学生自学为主，教师讲授为辅，简单演示 教 学 课 时 1课时 教学 提示 举例说明资源第10章（1）管理和使用站点资源与库项目 10(1).1资源和库的概念和作用 10(1).2站点资源面板 4.查看和选取资源 5.添加资源 6. 刷新资源面板 7.资源定位 8.管理资源面板 1.打开资源面板的方式 2. 站点资源的资源分类 3 站点资源的类型 和库项目的意义 演示库10(1).3创建、管理和编辑库项目 1. 3种创建库项目的方法 创建的库项目自动保存到站点的library文件夹中，若站点中项目的没有，dreamweaver则会自动创建该文件夹。库项目的扩展名为.lbi。 创建和2.应用库项目：在文档中应用库项目的操作步骤 3.管理库项目：主要有修改、重命名、重建、删除、从源文件中分离几个方面 随堂练习：下列关于库的说法中不正确的一项是( ) A库是一种用来存储想要在整个网站上经常被重复使用或更新的页面元素 B库实际上是一段html源代码 C在dreamweaver中,只有文字\\数字可以作为库项目,而图片脚本则不可作为库项目 D库可以是email地址\\一个表格或版权信息等. 应用 作业：课后习题 小结：知识总结：本章主要介绍了资源面板和库项目的使用，学完本 章应熟练应用站点资源和库项目，提高制作网页的效率。 学习好资料 欢迎下载

第10章（2）利用模板设计网页 教学目标与要求 教学重点 教学难点 教 学 方 法 1、学会创建模板 2、巧妙使用模板创建风格统一的页面 模板的创建、编辑和管理 模板的创建、编辑和管理 任务驱动、引导教学，学生自学为主，教师讲授为辅，简单演示 教 学 课 时 1课时 第10（2）章利用模板设计网页 如何提高做网页的效率呢？----巧用模板。 10(2).1利用模板创建网页 模板的定义、使用模板的实际意义、模板区域类型、模板的链接 模板默认被保存在templetes文件夹中，模板的扩展名为：.dwt。 教学 提示 举例说明模版的作用， 演示操作模板的创建，重点讲解可编辑区域的插入 根据已创建的模板创建新的网页，体会模板的10(2).2 创建模板 1. 将现有的文档保存为模板 2. 通过“资源”面板创建新的空白 3.使用新建文档对话框创建模板 10(2).3使用模板的可编辑区域 1、插入可编辑区  定义可编辑区域的两种方法  可编辑区域的命名规则：不可使用单引号、双引号、尖括号(<>)、和与符号（&） 注意：  可将整个表格或某个单元格定义为可编辑区域，不可同时指定几个单格为可编辑区域；  将AP元素定义为可编辑区域时，用户可以改变AP元素的位置，将AP元素上的内容定义为可编辑区域时，才可以修改AP元素上的内容。 2. 删除可编辑区域 10(2).4使用可选区域 学习好资料 欢迎下载

1.插入可选区域 2.插入可编辑的可选区域 3.修改可选区域 作用 注意模板使用的注意事项 10(2).5使用重复区域 10(2).6应用模板 1. 创建基于模板新页面 2. 将模板应用到现有文档 （自学，容易出现不一致区域，建议不采用） 3. 将文档与模板分离 10(2).7编辑模板 10(2).8管理模板 重命名模板、删除模板、重命名可编辑区域、选择可编辑区域 作业： 1、说出使用模板的使用意义。 2、模板默认被保存在哪个文件夹中，模板的扩展名是什么？ 3、模板共有几种模板区域类型？ 4、课后习题的页面。 小结：本章讲了模板的意义、创建、编辑和应用几个问题，学完本章应创建出风格一致

学习好资料 欢迎下载

第12章DW 8 站点的创建、设置与管理 1.学会编辑设置和管理站点 教学目标与要求 2.理解站点面板的设置使用 3.能打开、编辑、删除、上传站点。 教学重点 教学难点 教学方法 创建和管理站点与站点文件 编辑、设置和管理站点 任务驱动、引导教学，学生自学为主，教师讲授为辅，简单演示 教学课时 1课时 第12章DW 8 站点的创建、设置与管理 12.1安装和配置web服务器 12.2创建和设置站点 一、创建和设置本地站点： 二、设置远端站点 以下是几种连接服务器的方式方式 1.通过ftp访问远端站点 2.通过局域网访问远端站点 3.通过RDS访问远端站点 4.通过Source safe数据库访问远端站点 5.通过WebbDAV访问远端站点 教学提示 演示安装配置的步骤 设置本地站点和远端站点 演示主页的设置和站点地图的打开操作 12.3、站点文件的管理：打开站点、编辑站点、复制站点、删除站点、站点的导入导出、使用存回/取出功能 13.4站点地图 1.设置主页：只有设置了主页，才可打开站点地图 A将现有文件设置为主页 B创建新主页 2.显示站点地图 3.站点地图中显示文件标题 4.从分枝查看站点地图 学习好资料 欢迎下载

5.在站点地图中进行操作 6.显示或隐藏站点地图 7.保存站点地图 演示申请域名空间过程，使用dw自带的上传工具上传网站。 12.5设置站点的参数选项 12.6、指定服务器技术 12.7站点测试与发布 1检查站点链接 2检查浏览器的兼容性 3使用站点报告 4分辩率测试 5上传网页有如下方法 A.用dw 自带的方法上传 B.用cuteftp5.0软件上传 网页必须经过诸如检查站点链接状态、检查浏览器兼容性和页面分辩率兼容性测试等几个步骤后，才能上传到远程服务器上，供浏览器用户欣赏。 作业：请把你制作的网站上传到服务器上。 小结： 本章主要讲解了站点的创建、管理、设置和上传等。

学习好资料 欢迎下载

第13章综合实例——制作“宝贝爱”网站 1.学会编辑设置和管理站点 教学目标与要求 2.理解站点面板的设置使用 3.能打开、编辑、删除、上传站点。 教学重点 教学难点 教学方法 创建和管理站点与站点文件 编辑、设置和管理站点 任务驱动、引导教学，学生自学为主，教师讲授为辅，简单演示 教学课时 1课时 教学提示 以“宝贝爱”网站为第13章综合实例——制作“宝贝爱”网站 13.1 网站规划 13.1.1 网站命名 一般情况下，公司网站直接以公司名作为网站名即可，个人网站例，演示整可依自己爱好命名。网站名应该能反映出网站的性质。本章要制个网站的作的是一个专营婴幼用品的公司网站，网站名为公司名“宝贝爱”。 制作过程。 13.1.2 划分栏目并确定网站结构 如果想要使建站的过程更顺利，就必须事先规划好网站的栏目 和结构，这样在后面的制作中才能做到有章可循。 经过对网站内容的分析，将该网站划分为以下6个栏目：首 页、公司简介、我们的产品、我们的服务、我们的动向和联系我 们。 13.1.3 确定网站风格 一般情况下，要根据公司的性质或标志来确定网站风格。本章要制作一个专营婴幼用品的公司网站，所以选用了代表沉静、理智、诚实的蓝色和代表生命、活力、青春的绿色作为网站主色调；又 学习好资料 欢迎下载

以浅灰色作为点缀，不仅突出了重点，又能产生强烈的视觉效果。 整个网站看起来特色鲜明，生机勃勃。 13.1.4 设置本地站点目录并定义站点 在编辑网页之前，首先要定义一个站点。站点的定义我们在前面已讲了不止一次，这里只简单地介绍一下定义过程。 14.1.5 收集和整理素材 网页设计素材的收集是相当重要的。通常情况下，素材的来源主要有下面几种。  客户提供的素材：主要是与产品或企业相关的图像和文字，比如产品外观图像等，本例中主要指“我们的产品”中用到的图片。  网上收集的素材：主要是一些辅助性的图像，这些图像的装饰性较强，比如背景图像等。  独自创作的素材：主要是整个页面中视觉面积最大、最有说服力的图像，比如广告图像、标题图片等。 13.2 网站制作 13.2.1制作库项目：考虑把版权信息制作成库项目 13.2.2制作网页模板 1．新建模板文档 2．设置模板内容 3．创建可编辑区域 4．在模板中定义CSS样式表 14.2.4制作网站首页 在制作好网页模版后，下面在其基础上制作网站的首页。 学习好资料 欢迎下载

13.2.4 制作一级子页 一级子页主要包括我们的产品、我们的服务和我们的动向的下级 页面，这里以我们的产品的下级页面为例，来讲解一级子页的制 作方法。 最后用15分钟时间总结网站创建的详细步骤 13.2.5 制作二级子页 13.2.6 设置超链接 超链接是网站的灵魂，有了超链接，才能在网站中的各个页面之间来回跳转。接下来为各个页面添加超链接。 学习好资料 欢迎下载

1．为模版设置链接 2．为首页设置链接 作业：创建dw精品课程网站 小结： 本章详细演示了网站创建的详细过程和步骤，从学生的反应情况看，学生对知识的掌握较牢固。