AE材料

目录

一、培训班简介„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„01 二、软件简介 „„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„01

三、DW全部教学课时

第一课时 Dreamweaver的概述„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„02 第二课时 站点的创建和管理„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„02 第三课时 文本的使用„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„03 第四课时 图像的使用„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„04 第五课时 超链接„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„05 第六课时 网页属性„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„05 第七课时 表格的使用„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„06 第八课时 页面布局„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„06 第九课时 表单的使用„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„08 第十课时 多媒体的使用„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„08 第十一课时 框架的使用„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„10 第十二课时 层的使用„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 12 第十三课时 时间轴的使用„„„„„„„„„„ „„„„„„„„„„„„„„„„„„„„„13 第十四课时 历史和资源管理器„„„„„„ „„„„„„„„„„„„„„„„„„„„„„„14 第十五课时 模板和库„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 15 第十六课时 层叠样式表„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 16 第十七课时 行为的应用„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 17 第十八课时 扩展功能„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 18 第十九课时 动态网页开发基础知识„„„„„„„„„„„„„„„„„„„„„„„„„„„ 19 第二十课时 网站设计„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 20

四、DW快捷键一览表 „„„„„„„„„„„„„„„„„„„„„„„„„„14~17

DW教材

一、培训班简介

本培训班能够让你详尽系统地学习DW、主要功能模块，使你的专业知识更加全面系统。 主要学习目标：

1、了解DW基本知识

2、掌握标准化、美观化、规范化的DW图纸作图方法与技巧 3提高综合设计能力、思维能力和实操能力。

二、软件简介

DW主要用来做前台设计，html div css 编辑 静态页面，动态页面如asp,asp.net,可以自动生成动态网页代码完成基本的动态页面登陆注册留言和一些前端脚本代码的基本功能，DW可视性强，做为前台设计的必备工具非常强大

三、DW全部教学课时DW

第一课时 Dreamweaver的概述

1. Dreamweaver是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。

2. 用于对Web站点.Web页和Web应用程序进行设计。编码和开发。

它的主要特点如下：

1.可视化的设计界面：学习简单，操作快捷

2.跨浏览器支持：支持多种浏览器，并可以选择主要的浏览器 3.支持动态网页技术：CSS.层.行为.JavaScript 4.强大的网站管理功能：库.模板.标签等

第二课时 站点的创建和管理 创建本地站点

1.选择“站点”>“管理站点”。出现“管理站点”对话框。

注意：如果没有定义过任何Dreamweaver站点，则会直接出现“站点定义”对话框，您可以跳过下一步。

2.单击“新建”按钮。出现“站点定义”对话框。

2

3.执行下列操作之一：

单击“基本”选项卡以使用“站点定义向导”，它将引导您逐步完成设置过程。

单击“高级”选项卡以实用“高级”设置，他使您可以根据需要分别设置本地.远程和测试文件夹。 4.完成Dreamweaver站点设置过程

在“站点定义向导”中，回答每一屏上出现的问题，然后单击“下一步”继续进行设置，或者单击“上一步返回到前一屏。

对于“高级”设置，可根据需要完成“本地信息”类别.“远程信息”类别和“测试服务器”等类别。

网站文件的管理

1.文件创建：文件面版中右键单击>新建文件（快捷键Ctrl+N） 2.选择文件：可单击选一或配合Ctrl键和Shift键进行多重选择。 3.打开和编辑：双击 4.删除：Delete键 5.改名：两次单击

6.关于保存：保存.另存为.全部保存.回复至上一次的保存 7.复制与粘贴：快捷菜单或Ctrl+拖动 8.移动：直接拖动

9.关闭：快捷键Ctrl+W

10.消除文件只读属性：右键快捷菜单 11.设为首页：右键快捷菜单 12.添加设计备注：右键快捷菜单

第三课时 文本的使用

1.文字输入 要注意细节： （1）换行与分段

换行：Shift+Enter（菜单：插入>HTML>特殊字符>换行符） 分段：Enter （2）空白 全角空格

代码视图中输入 ：或插入栏>文本>字符>不换行空格

输入多个连续空格：编辑>首选参数>常规>选中“允许多个连续的空格” 直接按Ctrl+Shift+空白键输入空白 （3）插入时间与日期 插入栏>常用>日期 菜单：插入>日期 （4）插入特殊符号 插入栏>文本>字符

菜饭：插入>HTML>特殊字符 （5）分隔线

插入栏>HTML>水平线 菜单：插入>HTML>水平线 2.文字编辑 （1）文字选取 拖动选取

双击选择英文单词或中文句子：三击选择段落：

3

单击起点，然后按Shift，再单击终点，选中两点之间文本。 编辑>全选：

单击状态行上的标签选择器：

（2）剪切.复制与粘贴及撤销与重做 Ctrl+拖动：复制 拷贝HTML/粘贴HTML 撤销：CTRL+Z 重做：Ctrl+Y 3.清理当前页面

（1）清理HTML/XHTML

此功能可删除空白标签.合并嵌套FONT标签，以及通过其他方法改善杂乱或不可读的HTML代码。 命令>清理HTML/XHTML 文件>转换>XHTML

（2）导入Word文件和清理Word生成的HTML 文件>导入>Word稳当

命令>清理Word生成的HTML

第四课时 图像的使用

1.图像的格式

虽然图像标准中存在多种图形文件格式，但网页中通常使用的只有三种，即GIF.JPEG和PNJ。目前GIF和JPEG格式的支持情况最好，大多数浏览器都可以查看。 GIF：只支持256种颜色。 JPEG：有损压缩的形式。

PNG：无损压缩图像，支持一千六百万种颜色。 2.图像文件和图像占位符插入 菜单：插入>图像

工具栏：插入栏>常用>图像

在站点面版中直接将图像文件拖到页面上 从资源管理器中直接将图像文件拖到页面上 菜单：插入>图像对象>图像占位符 工具栏：插入栏>常用>图像占位符 3.图像和图像占位符属性面板使用

主要属性：图像的名称.大小.源文件.链接.替代文字.边框和边距.对齐方式等。 4.图像热区

使用图像地图，可以在单个图像中创建多个热点或热区（可单击的区域），并使每一个热点连接到不同的URL。

（1）绘制热区 矩形 椭圆形 多边形

（2）选择热区

多选方法：SHIFT+单击 （3）移动热区 （4）调整热区大小 5.插入交互式图像

鼠标经过图像（简单反转图）

4

使用以下方法之一插入鼠标经过图像：

(1)在“插入”栏中，选择“常用”，然后点击“鼠标经过图像”图标。

(2)在“插入”栏中，选择“常用”，然后点击“鼠标经过图像”图标拖到“文档”窗口中的所需要位置。

(3)选择“插入”>“图像对象”>“鼠标经过图像” 导航条

（1）导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。每个页面只能有一个导航条。

（2）使用“插入导航条”命令之前，须首先为各个导航项目的显示状态创建一组图像。 若要创建导航条，请执行以下操作： ① 执行下列操作之一：

选择“插入”>“图像对象”>“导航条”。

在“插入”栏的“常用”类别中，单击“图像”菜单并选择“插入导航条”按钮。 ② 出现“插入导航条”对话框。设置相关项目 导入Fireworks HTML

Fireworks可利用切片将图片文档分割成多个较小的部分并将每部分导出为单独的文件。插入>图像对象> Fireworks HTML 插入栏>常用> Fireworks HTML

制作WEB相册

命令菜单>创建网站相册 图像的优化和格式转换

（1）用Fireworks优化页面图像 右击图像>在 Fireworks中优化 命令> 在 Fireworks中优化图像

（2）用Photoshop和Fireworks转换图像文件格式和优化处理

第五课时 超链接

1、关于URL

URL（统一资源定位符）：用于描述网络资源的位置、类型和访问方法。 一般格式：

协议://IP地址（域名）[:端口号]/目录/文件名

协议：指明访问该资源所采用的协议。如HTTP、FTP等。 2、超链接的制作方法

（1）通过“指向文件”图标创建链接

注：文件名最好不用中文。如一定要使用中文文件名，则需要设置： 编辑>首选参数>代码改写>使用%将URL中的特殊字符编码 （2）属性面板Link栏输入和文件夹图标创建链接 3、超链接的类型

(1) HTML链接（页面链接） (2) E-mail链接

Link栏手工输入 mailto:邮件地址 插入栏>常用>电子邮件链接 插入菜单>电子邮件链接 (3) 文件链接 (4) 锚点和链接

5

①创建锚点

插入菜单>命名锚记 插入栏>常用>命名锚记 ②锚点引用

同一文件中锚点引用，在属性面板中超链栏填写#锚点名 不同文件之间锚点引用，则填写文件名#锚点名 (5)空链接

创建空链接，只需在属性面板Link栏输入符号 # 或者 javascript:; (6)脚本链接

主要用于让页面文字具有获取事件的能力，尤其是方便文字与行为和脚本程序的结合。 脚本链接 --续

创建脚本链接，在属性面板Link栏输入 javascript:(后面跟一些 JavaScript 代码或函数调用) 例如：

打印当前页面，在属性面板Link栏输入 javascript: self.print() 关闭当前窗口，在属性面板Link栏输入 javascript: self.close() 4、设置链接的目标窗口

_blank:在新的浏览窗口中打开链接的文档

_parent:在显示链接的框架父框架集中打开链接的文档，同时替换整个框架集。 _self：在当前框架中打开链接，同时替换所有框架。

_top：在当前浏览器窗口中打开链接的文框，同时替换所有框架。

第六课时 网页属性

1、设置页面属性 修改菜单>页面属性

标题、背景、字体和链接的颜色，页边距等。 2、使用头元素

（1）Meta 标签的常见功能： 帮助主页被各大搜索引擎登录 定义页面的使用语言 自动刷新并指向新的页面 实现网页转换时的动画效果

（2）显示和修改当前页面现有的文件头信息 查看>文件头内容：查看文件头栏及其属性面板 （3）设置当前页面新的文件头信息 插入栏>HTML>文件头标签>选择项目 插入菜单>HTML>文件头标签>选择项目 （4）Meta的属性

Meta的属性有两种：name和http-equiv。

Name属性主要用于描述网页，与之对应的属性值为content（网页内容），以便于搜索引擎查找、分类（目前几乎所有的搜索引擎都使用网上自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个Meta值。

3、页面配色方案

命令菜单>设定配色方案 4、可视化助理

设置在设计视图下，是否显示页面对象的边框或页面的不可见元素。

6

查看菜单>可视化助理>„„（选择项目）

工具栏>视图选项>可视化助理>„„（选择项目） 编辑菜单>首选参数>不可见元素

第七课时 表格的使用

1、插入表格 插入菜单>表格 插入栏> 常用>表格 或插入栏> 布局>表格 2、表格基本操作 （1）选择表格元素

整个表格：标签、修改>表格>选择表格、右键、Ctrl+A+A、边框 行、列 ：标签（行）、边框、拖拽

单元格：标签、 Ctrl+单击、 Ctrl+A、拖拽 （2）处理表格行、列

插入行（Ctrl+M）、列（ Ctrl+Shift+A ） 修改菜单、右键、属性检查器、Tab

删除行（ Ctrl +Shift +M ）、列（ Ctrl +Shift +- ） （3）单元格分、合

单元格合并（ Ctrl +Alt +M ） 单元格拆分（ Ctrl +Alt +S ） 4）其它操作

行列宽度调整和高度调整 表格复制、剪切和粘贴 3、设置表格属性 4、格式化表格

命令菜单>格式化表格 5、表格排序

命令菜单>排序表格

6、表格与表格式数据导入和导出 导入：

文件菜单>导入>表格式数据 或插入栏>布局>表格数据 导出：

文件菜单>导出>表格

第八课时 页面布局

1、布局视图下绘制表格（布局表格） （1）视图切换

查看菜单>表格模式>„„

插入栏>布局>标准视图/布局视图 编辑>首选参数>布局模式 （2）绘制布局表格

插入栏>布局>绘制布局表格（按住CTRL连续绘制多个，按住Alt取消自动吸附功能） （3）绘制布局单元格

插入栏>布局>绘制布局单元格（按住CTRL可连续绘制多个，按住Alt取消自动吸附功能）

7

（4）嵌套布局表格 （5）移动表格或单元格 （6）设置表格和单元格属性 2、跟踪图像

可以使用跟踪图像作为重新创建已经使用图形应用程序（如 Macromedia Freehand 或 Fireworks）创建的页面设计的向导。

跟踪图像是放在“文档”窗口背景中的 JPEG、GIF 或 PNG 图像。可以隐藏图像、设置图像的不透明度和更改图像的位置。

若要将跟踪图像放在“文档”窗口中，可执行以下操作： (1)选择“查看”>“跟踪图像”>“载入”。

或者选择“修改”>“页面属性”，然后单击“跟踪图像”文本框旁边的“浏览”按钮。

(2)在出现的对话框中，选择图像文件并单击“选择”(Windows) 或“选择”(Macintosh)。 “页面属性”对话框随即出现。

(3)拖动“图像透明度”滑块指定图像的透明度，然后单击“确定”。

(4)若要随时切换到另一跟踪图像或更改当前跟踪图像的透明度，请选择“修改”>“页面属性”。 若要显示或隐藏跟踪图像，请执行以下操作： 选择“查看”>“跟踪图像”>“显示”。

仅在 Dreamweaver 中跟踪图像是可见的。当在浏览器中查看页面时，跟踪图像永远不可见。当跟踪图像可见时，页面的实际背景图像和颜色在“文档”窗口中不可见；但是，在浏览器中查看页面时，背景图像和颜色是可见的。

若要更改跟踪图像的位置，请执行以下操作： (1)选择“查看”>“跟踪图像”>“调整位置”。 (2)执行下列操作之一：

若要准确地指定跟踪图像的位置，请在“X”和“Y”文本框中输入坐标值。 若要逐个像素地移动图像，请使用箭头键。

若要一次五个像素地移动图像，请按 Shift 键和箭头键。 (3)重设跟踪图像的位置：

选择“查看”>“跟踪图像”>“重设位置”。 跟踪图像随即返回到文档窗口的左上角 (0,0)。 若要将跟踪图像与所选元素对齐，请执行以下操作： 在“文档”窗口中选择一个元素。

选择“查看”>“跟踪图像”>“对齐所选范围”。 跟踪图像的左上角随即与所选元素的左上角对齐。

第九课时 表单的使用

1、关于表单

表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素,被广泛用于各种信息的搜集和反馈，如调查表、订单、站点注册单、搜索引擎等。

表单有两个部分组成：一是面向客户端各种对象部分，一是服务器端的处理程序部分。 当访问者将信息输入Web站点表单单击提交按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序对这些信息进行响应。通常，通过通用网关接口（CGI）脚本、ColdFusion页、Java Server Page（JSP）或ASP来处理信息。如果不使用服务端脚本或应用程序来处理表单数据，就无法收集这些数据。 2、插入表单及设置表单属性 插入表单 插入>表单

插入栏>表单>„„

Dreamweaver插入一个表单（域）。当页面处于设计视图中时，用红色的虚轮廓线指示表单。如果没有

8

看到此轮廓线，请检查是否选中了“查看>可视化助理>不可见元素”。 设置表单属性（用属性检查器设置 ）

在“表单名称”文本框中，键入标识该表单的唯一名称。 命名表单后，就可以使用脚本语言（如 JavaScript 或 VBScript）引用或控制该表单。如果不命名表单，则 Dreamweaver 使用语法 form n 生成一个名称，并在向页面中添加每个表单时递增 n 的值。

在“动作”文本框中，指定处理该表单的动态页或脚本的路径。可以在“动作”文本框中键入完整路径，也可以单击文件夹图标定位到同一站点中包含该脚本或应用程序页的相应文件夹。

在“方法”弹出菜单中，选择将表单数据传输到服务器的方法。有POST、GET和默认三种选择。

如果需要，可以使用“MIME 类型”弹出菜单指定对提交给服务器进行处理的数据使用 MIME 编码类型。 默认设置 application/x-www-form-urlencode 通常与 POST 方法协同使用。如果要创建文件上传域，请指定 multipart/form-data MIME 类型。 3、插入表单元素及属性设置

表单：所有表单对象要发挥作用，就必须存在于表单域中。

文本字段：在表单中插入一个可输入一行文本的文本域。文本域接受任何类型的字母数字。该文本可以显示为单行、多行，也可以显示为一系列点或星号（密码输入）

隐藏域：可以存储用户输入的信息，如姓名、电子邮件地址或常用的查看方式，并在该用户下次访问引站点时使用这些数据。

复选框：允许在一组选项中选择多项。用户可以选择任意多个适用的选项。

单选按钮：代表互相排斥的选择。在某单选按钮组（多个按钮同名）中选择一个按钮，就会取消选择该组中的所有其他按钮。

单选按钮组：直接插入一组多个单选按钮。 列表/菜单：“列表”选项在一个滚动列表中显示选项值，用户可以从该滚动列表中选择多个选项。“菜单”选项则是在一个菜单中显示选项值，用户只能从中选择单个选项。

跳转菜单：是可导航的列表或弹出式菜单，它使你可以插入一种菜单，这种菜单中的每个选项都拥有链接的属性，单击即可跳转至其他网页或文件。

图像域：插入一个可放置图像的区域。该图像用于生成图形化按钮，例如“提交”或“重置”按钮。 文件域：插入一个文本字段和一个“浏览”按钮。用户可以使用文件域浏览本地计算机上的某个文件并将该文件作为表单数据上传。

按钮：在单击时执行某一脚本或程序，例如，提交或重置表单。并且可以自定义按钮名称或标签。 4、表单应用举例 简单举例：

浏览器端：表单中文本提交 服务器端：响应文本

<%=Request.Form(\"textfield\") %>

第十课时 多媒体的使用

1、插入Flash动画文件 插入菜单>媒体> Flash 插入栏>常用> Flash

技巧提醒：使Flash动画文件背景透明的方法： 在属性面板中增加属性Wmode，值Transparent 2、插入Flash文本

插入菜单>媒体> Flash文本 插入栏>常用> Flash文本

Flash 文本对象允许您创建和插入只包含文本的 Flash 影片。这使您可以使用自己选择的设

9

计器字体和文本创建较小的矢量图形影片。 3、插入Flash按钮

插入菜单>媒体> Flash按钮 插入栏>常用> Flash按钮 4、插入Shockwave影片 插入菜单>媒体> Shockwave 插入栏>常用> Shockwave

Shockwave 作为 Web 上用于交互式多媒体的 Macromedia 标准，是一种经压缩的格式，使得在 Macromedia Director 中创建的多媒体文件能够被快速下载，而且可以在大多数常用浏览器中进行播放。

5、插入Applet（Java程序）

可以使用 Dreamweaver 将 Java applet 插入 HTML 文档中。Java 是一种编程语言，通过它可以开发可嵌入 Web 页中的小型应用程序（applet）。 插入菜单>媒体> Applet 插入栏>常用> Applet 6、插入参数

插入栏>常用>参数

使用“参数”对话框可为 Shockwave 和 Flash SWF 文件、ActiveX 控件、Netscape Navigator 插件和 Java applets 定义的特定参数输入值。 使用参数体对象 7、插入ActiveX

可以在页面中插入 Active X 控件。ActiveX 控件（以前称作 OLE 控件）是可以充当浏览器插件的可重复使用的组件，有些像微型的应用程序。 插入菜单>媒体> ActiveX 插入栏>常用> ActiveX 8、插入插件 插入媒体元素：

插入菜单>媒体>插件 插入栏>常用>插件 9、音频文件的使用

常用的声音格式主要包括：

mid/wav/aif/mp3/rm/ra/ram/rpm等。 （1）链接到音频文件

需要客户端已安装相应的播放程序。 （2）嵌入音频文件

嵌入音频将声音直接并入页面中，但只有在访问您站点的访问者具有所选声音文件的适当插件后，声音才可以播放。如果希望将声音用作背景音乐，或如果希望控制音量、播放器在页面上的外观或者声音文件的开始点和结束点，请嵌入文件。 若要嵌入音频文件，请执行以下操作： ①插入菜单>媒体>插件 或者 插入栏>常用>插件 ②在属性检查器中，单击文件夹图标以浏览音频文件，或者在“链接”文本框中键入文件的路径和名称。 ③通过在适当的文本框中输入值或者通过在“文档”窗口中调整插件占位符的大小，输入宽度和高度。 （3）使用播放声音行为

先创建基于文本和图像等对象的超链，再设其“播放声音”行为。（通过“行为”面板） （4）设置页面背景声音

10

代码视图下手工输入： 10、视频文件使用 常用的视频格式：

主要包括mpg/mpeg/avi/wmv/asf/mov/ rpm/rm等。 （1）链接到视频文件

需要客户端安装相应的播放程序。 （2）嵌入视频文件 插入菜单>媒体>插件 插入栏>常用>插件

第十一课时 框架的使用

1、概述

框架结构是一种使多个网页通过多种类型区域的划分，显示在同一个窗口的网页结构。 一个框架结构又是由两部分网页文件组成的： 框架 框架集

关于框架和框架集

框架 是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的 HTML 文档。

框架集 也是 HTML 文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。框架集文件本身不包含要在浏览器中显示的 HTML 内容，只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 2、创建/删除框架和框架集

方法有二：一是使用系统预定义的框架集，二是自己动手设计框架集。 （1）使用预定义的框架集 插入菜单>HTML>框架>„„ 插入栏> 布局>框架>„„

“新建文档”对话框创建新的空框架集。 （2）手动设计框架集

提示：在创建框架集或使用框架前，通过选择“查看”>“可视化助理”>“框架边框”，使框架边框在“文档”窗口的“设计”视图中可见。

若要创建框架集，请执行以下操作： 选择“修改”>“框架集”，然后从子菜单选择拆分项（例如“拆分左框架”或“拆分右框架”）。 Dreamweaver 将窗口拆分成几个框架。如果打开一个现有的文档，它将出现在其中一个框架中。 （3）嵌套框架

在另一个框架集之内的框架集称作嵌套的框架集。一个框架集文件可以包含多个嵌套的框架集。大多数使用框架的 Web 页实际上都使用嵌套的框架 （4）删除框架和框架集

将框架的边框拖离“设计”视图范围或拖到父框架的边框上。

如果要删除的框架中的文档有未保存的内容，则DW将提示保存该文档。

注：不能通过拖动边框完全删除一个框架集。要删除一个框架集，先关闭显示它的文档窗口，再删除该框架集文件。 3、选择框架和框架集

可以直接在文档窗口中选择框架（Alt键+单击）或框架集，也可以通过框架面板进行选择。 4、查看和设置框架和框架集属性

11

（1）框架集属性

“边框”确定在浏览器中查看文档时在框架周围是否应显示边框。要显示边框，则选择“是”；要使浏览器不显示边框，则选择“否”。 要允许浏览器确定如何显示边框，则选择“默认值”。 “边框宽度”指定框架集中所有边框的宽度。 （2）框架属性 命名框架：

“框架名称”是链接的 target 属性或脚本在引用该框架时所用的名称。

框架名称必须是单个单词；允许使用下划线 (_)，但不允许使用连字符 (-)、句点 (.) 和空格。 框架名称必须以字母起始（而不能以数字起始）。

框架名称区分大小写。不要使用 JavaScript 中的保留字（例如 top 或 navigator）作为框架名称。 提示：要让链接更改其它框架的内容，您必须命名目标框架。要令以后创建跨框架链接更容易一些，请在创建框架时命名每个框架。 根据需要更改以下选项：

“源文件”指定在框架中显示的源文档。单击文件夹图标可以浏览到一个文件并选择一个文件。 “滚动”指定在框架中是否显示滚动条。将此选项设置为“默认”将不设置相应属性的值，从而使各个浏览器使用其默认值。大多数浏览器默认为“自动”，这意味着只有在浏览器窗口中没有足够空间来显示当前框架的完整内容时才显示滚动条。

“不能调整大小”令访问者无法通过拖动框架边框在浏览器中调整框架大小。

“边框”在浏览器中查看框架时显示或隐藏当前框架的边框。为框架选择“边框”选项将重写框架集的边框设置。

“边框”选项为“是”（显示边框）、“否”（隐藏边框）和“默认值”；

“边框颜色”为所有框架的边框设置边框颜色。此颜色应用于和框架接触的所有边框，并且重写框架集的指定边框颜色。

您可以根据需要设置以下边距选项（如果看不到边距选项，则单击属性检查器右下角的扩展箭头）： “边距宽度”以像素为单位设置左边距和右边距的宽度（框架边框和内容之间的空间）。

“边距高度”以像素为单位设置上边距和下边距的高度（框架边框和内容之间的空间）。 注意：设置框架的边距宽度和高度并不等同于在“修改”>“页面属性”对话框中设置边距。 5、在框架中插入网页文件

直接在空白框架网页中进行编辑 文件菜单>在框架中打开 属性面板中修改源文件

6、保存框架和框架集的文件

可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中所有文档。

（1）保存框架集文件

在“框架”面板或“文档”窗口中选择框架集，选择“文件>保存框架页/框架集另存为” （2）保存框架中显示的文档

在框架中单击，然后选择“文件>保存框架/框架另存为” （3）保存与框架关联的所有文件 文件>保存全部

7、设置框架内超链接

要在一个框架中使用链接以打开另一个框架中的文档，则必须设置链接目标。链接的target属性指定在其中打开链接的内容的框架或窗口。 8、处理不能显示框架的浏览器

Dreamweaver 允许您指定要在不支持框架的基于文本的浏览器和较旧的图形浏览器中显示的内容。此类内容存储在框架集文件中，用 noframes 标签括起来。当不支持框架的浏览器加载该框架集文件时，

12

浏览器只显示用 noframes 标签括起来的内容。

若要为不支持框架的浏览器提供内容，请执行以下操作：

选择“修改”>“框架集”>“编辑无框架内容”。 Dreamweaver 将清除“设计”视图中的内容，并且在“设计”视图顶部将显示“无框架内容”字样。 要创建无框架内容，请执行以下操作之一：

在“文档”窗口中，像处理普通文档一样键入或插入内容。

选择“窗口”>“代码检查器”，将插入点置于 noframes 标签中的 body 标签之间，然后键入内容的 HTML 代码。

再次选择“修改”>“框架集”>“编辑无框架内容”以返回到框架集文档的普通视图。 9、页中页技术（浮动框架） 代码视图下手工编写 如： 代码视图下“插入栏>框架>ifrm浮动框架”

第十二课时 层的使用

1、概述

在网页制作中，对文字和对象的位置控制是比较困难的，我们常常通过表格来定位，但往往达不到精度要求。

“层”是DW中另外一种可以进行排版的工具。它可以被定位在页面的任意位置，并且其中可以包含文本、图像等所有可直接插入至网页的对象。

层拥有很多表格所不具备的特点，比如可以重叠、便于移动、可设为隐藏等。 2、层的创建和删除

面板的显示：窗口>层（F2）

插入栏>布局>描绘层（拖动绘制，按Ctrl可连绘） 拖动“插入栏>布局>描绘层图标”到页面 插入菜单>布局对象>层 删除：Delete键

3、使用“属性面板”设置层的属性

选择一个或多个层后即可对它们进行操作或更改它们的属性。 （1）单个层的属性设置

首先选择层（下列操作之一）：

单击一个层的选择柄。 如果选择柄不可见，请在该层中的任意位置单击以显示该选择柄。 单击一个层的边框。

在一个层中按住 Ctrl-Shift 键并单击 单击层代码标记（在“设计”视图中） 使用属性检查器查看和设置层的属性 层属性面板的设置：

层 ID 用于指定一个名称，以便在“层”面板和 JavaScript 代码中标识该层。只应使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等特殊字符。每个层都必须有它自己的唯一 ID。 左和上（左侧和顶部）指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 （2）多个层的属性设置

首先选择多个层（选择层时按下 Shift 键）

标签：指定用来定义这些层的HTML标签。在下拉列表中有DIV和SPAN两个选项。 4、层的基本操作 （1）调整层的大小

调整单个层的大小（拖动手柄、CTRL+箭头）

13

调整多个层的大小

选择两个或更多个层后，选择“修改”>“对齐”>“设成宽度相同”或“修改”>“对齐”>“设成高度相同”。

（2）移动层的位置

鼠标、箭头或Shift+箭头 （3）层的对齐 修改>对齐>„„

（4）在层中插入对象 与在文档中操作类似 （5）层的叠加顺序 修改>排列顺序>„„ 修改层的“Z轴”属性

（6）层的复制、剪切和粘贴 与其它对象的操作类似 （7）层的嵌套

按住 Alt 键并拖动，可在现有层中嵌套一个层。

在“文档”窗口的“设计”视图中将插入点放置在一个现有层中，然后选择“插入”>“层”。 使用“层”面板将现有层嵌套在另一个层中，

（选择一个层，然后通过按住 Ctrl 键并拖动，将层移动到“层”面板上的目标层。） （8）显示/隐藏层

选择“窗口” >“层”，打开“层”面板。 在层的眼形图标列内单击可以更改其可见性。 5、设置层的默认属性

选择“编辑”>“首选参数”>“层” 设置各对话框选项 6、层和表格之间转换 （1）将表格转换为层

“修改”>“转换”>“表格到层”

注：空单元格不会转换为层（除非它们具有背景颜色）。 （2）将层转换为表格

“修改”>“转换”>“层到表格”。

注：在转换为表格之前，请确保层没有重叠 7、层和行为相结合制作动态效果 例：动态显示-隐藏层

制作几个空链接，分别设置“显示-隐藏层”行为，控制层的显示/隐藏。

第十三课时 时间轴的使用

1、显示时间轴面板

窗口>时间轴（Alt + F9）

最早的DW MX 2004没有时间轴面板。必须升级到DW MX 2004 7.0.1 版。 时间轴面板显示层和图像的属性在一段时间内如何更改。

时间轴下拉式菜单：指定当前在时间轴面板中显示文档的哪个时间轴。 播放栏：显示当前在文档窗口中显示时间轴的哪一帧（红色竖条） 帧编号：指示帧的序号。

自动播放：使时间轴于当前页在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的Body标签，它在页加载时执行“播放时间轴”操作。

14

循环：使当前时间轴于页在浏览器中打开时无限地循环。“循环”在动画的最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在行为面板中双击该行为可编辑此行为的参数并更改循环的次数。 2、时间轴的基本操作 修改>时间轴>选择项目 右键菜单

3、层与时间轴相结合实现动画 （1）直线动画

（2）曲线动画（CTRL添加关键帧） （3）任意路径动画 录制图层路径

直线动画制作

（1）将影像置入图层中；

（2）执行菜单“窗口>时间轴”，调出时间轴面板，准备开始制作动画； （3）选取图层，将图层拖曳进入时间轴中；

（4）调整右侧的关键影格，可控制播放动画时间的长短；

（5）点选最右方的影格，然后移动图层的位置（此时编辑画面中会出现一条直线）；

（6）勾选时间轴上的”自动播放”，按下F12键预览效果（若不勾选此选项，亦可使用行为面板，利用事件来触发动画）。

曲线动画制作

先制作好一个直线移动的动画；

点选中间的（任何）影格，然后按下鼠标右键，选择”增加关键影格”，然后往上或往下拖曳图层（此时移动的路线即会呈现出曲线）。

任意路径动画制作 将影像置入图层中；

点选时间轴中的任一影格；

选择“修改>时间轴>录制层路径”（或使用右键菜单） 拖曳图层（所拖曳出来的轨迹便是移动的路径了）

第十四课时 历史记录和资源管理器

1、历史记录

（1）历史记录面板 显示历史记录面板 窗口>历史记录

设置历史记录保留和显示的步骤数目

编辑菜单>首选参数>常规>历史步骤最多次数 清除历史记录

历史记录面板中右键单击>清除历史记录 （2）历史记录使用 记录选取：

单选、用CTRL/SHIFT键辅助多选 重复应用：

单击“重放”按钮 右击>重播步骤

15

（3）将历史记录存为命令 右击>另存为命令 （4）编辑命令列表 命令菜单>编辑命令列表 2、资源管理器

资源是建立网页和网站中的各种基本元素，如图像、Flash影片文件。 （1）资源管理器面板 窗口菜单>资源（F11键） （2）如何使用资源管理器 （3）选择和编辑资源

（4）使用收藏的“收藏”列表 （5）在其他站点中使用本站资源

第十五课时 模板和库

1、库

库是一种特殊的Dreamweaver文件，其中包含已创建以便放在网页上的单独的“资源”或“资源”副本的集合，库里的这些资源被称为库项目。 库项目是一种用来存储在整个网站上，可以在多个页面中重复使用的对象元素。可以从文档 body 部分中的任意元素创建库项目，这些元素包括文本、表格、表单、Java applet、插件、ActiveX 元素、导航条和图像。

（1）创建、编辑、重命名和删除库项目

“资源”面板（“窗口”>“资源”）的“库”类别中，操作面板下方的按钮，或使用右键菜单。 （2）在文档或模板中加入库项目

直接从库中将库项目拖到文档或模板中。 （3）让文档中应用的库项目脱离库的控制 右击文档中库项目>从源文件中分离 选择属性面板上的“从源文件中分离” 2、模板

模板是一种特殊类型的文档，用于设计布局比较“固定”的页面。模板创作者设计页面布局，确定页面上可编辑区域和固定区域，即设计者可控制哪些页面元素由用户进行编辑，哪些不可编辑。当对一个模板进行修改以后，所有使用了这个模板的网页内容将随之同步被修改，简单地说就是一次可以更改多个页面，这也是模板最强大的功能之一。 （1）创建模板

可以从现有文档（如 HTML、Macromedia ColdFusion 或 Microsoft Active Server Pages 文档）中创建模板，或者从新建的空白文档中创建模板。 若要创建模板，请执行以下操作： （1）创建模板

① 打开要另存为模板的文档：

若要打开一个现有文档，请选择“文件”>“打开”，然后选择该文档。

若要打开一个新的空文档，请选择“文件”>“新建”。在出现的对话框中，选择“基本页”或“动态页”，选择要使用的页面类型，然后单击“创建”。 ②文档打开时，执行下列操作之一： 选择“文件”>“另存为模板”。

在“插入”栏的“常用”类别中，单击“模板”按钮上的箭头，然后选择“创建模板”。

③从“站点”弹出菜单中选择一个用来保存模板的站点，并在“另存为”文本框中为模板输入一个唯一

16

的名称。

④单击“保存”。 Dreamweaver 将模板文件保存在站点的本地根文件夹中的 Templates 文件夹中，使用文件扩展名 .dwt。Dreamweaver 将在您保存新建模板时自动创建该文件夹。 （1）创建模板

使用“资源”面板创建新模板

在“资源”面板（“窗口”>“资源”）中，选择面板左侧的“模板”类别。 即会显示“资源”面板的“模板”类别。 单击“资源”面板底部的“新建模板”按钮。

一个新的、无标题模板将被添加到“资源”面板的模板列表中。 在模板仍处于选定状态时，输入模板的名称，然后按 Enter 键 。 （2）创建可编辑区域 插入可编辑区域

插入栏>常用>模板>可编辑区域 选择可编辑区域 删除可编辑区域

更改可编辑区域的名称 （3）创建基于模板的文档

文件>新建>模板>选择模板文件>创建

资源面板>模板>选择模板>右键菜单>从模板新建 （4）删除文档中使用的模板 修改菜单>模板>从模板中分离 （5）更新模板及基于模板的网页

更新模板后在弹出对话框中选择“更新” （6）模板的嵌套

插入栏>常用>模板>创建嵌套模板

（7）将模板的“可编辑区”转换为“锁定区” 修改菜单>模板>删除模板标记 （8）编辑当前页面的模板 修改菜单>模板>打开附加模板 （9）设置模板的页面属性 修改菜单>页面属性

（10）寻找“可编辑区” 修改菜单>模板>可编辑区名称

（11）模板中可创建的其他区域类型

可选区域：在基于带可选区的模板创建页面时，对于可选区的内容，可以选择显示或隐藏，以适应较复杂的页面布局。 重复区域：是可以根据需要在基于模板的页面中复制任意次数的模板区域。重复区域本身是不可编辑区域，要使重复区域中的内容可编辑，请在重复区域内插入可编辑区域。 （12）模板中可创建的其他区域类型

可编辑可选区域：是可选区域的一种，用户可以设置显示或隐藏所选区域，并且可以编辑该区域中的内容，该可编辑的区域是由条件语句控制的。

重复表格：是重复区域的一种，使用重复表格用户可以创建包含重复行的表格格式的可编辑区域，可以定义表格属性并设置哪些表格单元格可编辑

第十六课时 层叠样式表CSS

17

1、CSS功能和分类

层叠样式表CSS是一系列格式规则，它们控制网页内容的外观。使用CSS样式可以非常灵活地控制网页外观，从精确的布局定位到特定的字体和样式，可以让站点整体风格保持一致。

CSS样式非常灵活，因为样式并不局限于文本对象。对于文本、图像、表格、层等都可以定位样式和格式化样式。

外链样式表：使用单独的样式表文件（.CSS）。编辑建立CSS文件后，普通网页可以通过在样式表设置对话框中指定CSS文件，它的设定将会影响到整个网页。

内嵌样式表：该类样式表是嵌在页面头部代码标记之间的，可以通过Dreamweaver中的样式表对话框设置。

内联样式表：即行间样式表，样式代码直接写在某一HTML标签后部，用styles属性说明。它的作用仅限于它修饰的标签，直接影响网页上单个对象。 设置当前单元格左边有一个象素的红色边框

2、打开“CSS样式”面板

窗口菜单>CSS样式（Shift+F11）

使用“CSS样式”面板可以创建、查看、应用或编辑样式属性。 3、创建新样式

执行下列操作之一, 打开“新建CSS样式”对话框 单击面板右下角位置“新建CSS样式”按钮 右键单击面板，选择“新建„„” 文本>CSS样式>新建„„

在对话框中选择CSS样式类型：

类样式：可以将样式属性设置为任何文本范围或文本块。

标签：重定义特定标签，可以改变特定标签（如H1）的默认格式。 高级：CSS选择器。可以重定义具体某个标签组合的格式。 4、应用样式表

类样式是唯一可以应用于文档中的任何文本的CSS样式类型。 （1）首先在文档中，选择要将CSS样式应用于其上的文本 插入点放在段落中，样式将应用于整个段落。

如果在单个段落中选择一个文本范围，则CSS样式只影响所选范围 使用标签选择器，可以指定要应用CSS样式的确切标签。 （2）然后再执行下列操作之一

在CSS样式面板选择“应用样式”，然后在列表中单击要应用的样式的名称。

18

在文本属性面板中，设置“样式”选项，选择要应用的样式式。

在文档窗口中，右击所选文本，选择“CSS样式”，然后选择要应用的样式。 文本菜单>CSS样式 4、应用样式表

（2）然后再执行下列操作之一

在CSS样式面板选择“应用样式”，然后在列表中单击要应用的样式的名称。 在文本属性面板中，设置“样式”选项，选择要应用的样式式。

在文档窗口中，右击所选文本，选择“CSS样式”，然后选择要应用的样式。 文本菜单>CSS样式 5、编辑现有样式表 （1）修改CSS样式 双击所选样式

CSS样式面板底部的“编辑样式表”按钮 （2）删除CSS样式 （3）复制CSS样式 6、取消应用样式

选择已应用样式的文本，在属性面板或右击，选择“CSS样式>无” 7、从文档中导出样式创建CSS样式文件

可以从文档中导出样式以创建新的CSS样式表文件。然后，可链接到其他文档以应用这些样式。 右击应用样式的文本>CSS样式>导出„ 8、附加样式表（链接外部样式表文件）

在“CSS样式”面板中，单击“附加样式表”按钮，出现“链接外部样式表”对话框，在“添加为”选项中，选择其中一个选项：

链接：创建当前文档和外部样式表之间的链接，该选项在HTML代码中创建一个标签，并引用已发布的样式表所在的URL。

导入：引用外部样式表。该选项在HTML代码中创建一个@import标签，并引用已发布的样式表所在的URL。

第十七课时 行为的应用

1、概念

Dreamweaver行为是一种运行在浏览器中的JavaScript代码，设计者可以将其放置在网页文档中，以允许浏览者与网页本身进行交互。 行为由事件和事件触发的动作组成 2、行为面板

（1）显示行为面板

窗口菜单>行为（Shift+F4） （2）附加行为

行为面板：“+”按钮 （3）删除行为

行为面板：“–”按钮 （4）调整行为顺序 （5）设置浏览器版本

（6）为附加的行为选择事件 3、关于事件

行为是事件与动作的联合，事件用于指明执行某项动作的条件。常用事件包含有鼠标事件、

19

键盘事件、窗体事件和其它事件等。

onClick：单击选定元素（如超链接、图片、按钮）将触发该事件。 onMouseOver：当鼠标首次移动指向特定对象时触发该事件。 onMouseMove：当鼠标停留在对象边界内移动时触发该事件。 onMouseOut：当鼠标离开对象边界时触发该事件。 onMouseDown：当按下鼠标按钮时触发该事件。 onLoad：当图片或页面完成载入后触发该事件。 4、为对象附加行为

可以将行为附加给整个文档、链接、图像、表单元素或其他HTML对象。 5、Dreamweaver内置行为 调用 JavaScript

“调用 JavaScript”动作允许您使用“行为”面板指定当发生某个事件时应该执行的自定义函数或 JavaScript 代码行。（您可以自己编写 JavaScript 或使用 Web 上多个免费的 JavaScript 库中提供的代码。

例如，若要创建一个“后退”按钮，您可以键入if(history.length>0){history.back()}。如果您已将代码封装在一个函数中，则只需键入该函数的名称（例如 hogback()）。 改变属性

使用“改变属性”动作更改对象某个属性（例如层的背景颜色或表单的动作）的值。您可以更改的属性是由浏览器决定的； 检查浏览器

使用“检查浏览器”动作可根据访问者不同类型和版本的浏览器将他们转到不同的页。例如，您可能想要将使用 Netscape Navigator 4.0 或更高版本浏览器的访问者转到一页，而将使用 Internet Explorer 4.0 或更高版本的访问者转到另一页，并让使用任何其它类型浏览器的访问者留在当前页上。 使用“检查插件”动作根据访问者是否安装了指定的插件这一情况将他们转到不同的页。例如，您可能想让安装有 Shockwave 的访问者转到一页，让未安装该软件的访问者转到另一页。 控制 Shockwave 或 Flash

使用“控制 Shockwave 或 Flash”动作来播放、停止、倒带或转到 Macromedia Shockwave 或 Macromedia Flash SWF 文件中的帧。 拖动层

“拖动层”动作允许访问者拖动层。使用此动作创建拼板游戏、滑块控件和其它可移动的界面元素。 转到 URL “转到 URL”动作在当前窗口或指定的框架中打开一个新页。此操作尤其适用于通过一次单击更改两个或多个框架的内容。 跳转菜单

当您使用“插入”>“表单对象”>“跳转菜单”创建跳转菜单时，Dreamweaver 创建一个菜单对象并向其附加一个“跳转菜单”（或“跳转菜单转到”）行为。 打开浏览器窗口

使用“打开浏览器窗口”动作在一个新的窗口中打开 URL。您可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏等）和名称。例如，您可以使用此行为在访问者单击缩略图时在一个单独的窗口中打开一个较大的图像；使用此行为，您可以使新窗口与该图像恰好一样大。 播放声音 使用“播放声音”动作来播放声音。例如，您可能要在每次鼠标指针滑过某个链接时播放一段声音效果，或在页载入时播放音乐剪辑。 弹出消息 “弹出消息”动作显示一个带有您指定的消息的 JavaScript 警告。因为 JavaScript 警告只有一个按钮（“确定”），所以使用此动作可以提供信息，而不能为用户提供选择。

20

预先载入图像 “预先载入图像”动作将不会立即出现在页上的图像（例如那些将通过行为或 JavaScript 换入的图像）载入浏览器缓存中。这样可防止当图像应该出现时由于下载而导致延迟。 设置框架文本

“设置框架文本”动作允许您动态设置框架的文本，用您指定的内容替换框架的内容和格式设置。该内容可以包含任何有效的 HTML 代码。使用此动作动态显示信息。 设置状态栏文本

“设置状态栏文本”动作在浏览器窗口底部左侧的状态栏中显示消息。

设置文本域文本

“设置文本域文本”动作用您指定的内容替换表单文本域的内容。 显示－隐藏层

“显示－隐藏层”动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。例如，当用户将鼠标指针滑过一个植物的图像时，您可以显示一个层给出其详细信息。 “显示－隐藏层”还可用于创建预先载入层，即一个最初挡住页的内容的较大的层，在所有页组件都完成载入后该层即消失。 显示弹出菜单 使用“显示弹出菜单”行为来创建或编辑 Dreamweaver 弹出菜单，或者打开并修改已插入 Dreamweaver 文档的 Fireworks 弹出菜单。

通过在“显示弹出菜单”对话框中设置选项来创建水平或垂直弹出菜单。您可以使用此对话框来设置或修改弹出菜单的颜色、文本和位置。 “交换图像”动作通过更改 img 标签的 src 属性将一个图像和另一个图像进行交换。使用此动作创建按钮鼠标经过图像和其它图像效果（包括一次交换多个图像）。插入鼠标经过图像会自动将一个“交换图像”行为添加到您的页中。

注意：因为只有 src 属性受此动作的影响，所以您应该换入一个与原图像具有相同尺寸（高度和宽度）的图像。否则，换入的图像显示时会被压缩或扩展，以使其适应原图像的尺寸。

“恢复交换图像”动作将最后一组交换的图像恢复为它们以前的源文件。每次您将“交换图像”动作附加到某个对象时都会自动添加该动作；如果您在附加“交换图像”时选择了“恢复”选项，则您就不再需要手动选择“恢复交换图像”动作。 检查表单 “检查表单”动作检查指定文本域的内容以确保用户输入了正确的数据类型。使用 onBlur 事件将此动作分别附加到各文本域，在用户填写表单时对域进行检查；或使用 onSubmit 事件将其附加到表单，在用户单击“提交”按钮时同时对多个文本域进行检查。将此动作附加到表单防止表单提交到服务器后任何指定的文本域包含无效的数据。

第十八课时 扩展功能

1、扩展管理器

扩展管理器是一个的应用程序，可用于安装和管理Macromedia应用程序中的功能扩展。 命令菜单>扩展管理

开始>程序>Macromedia>Macromedia Extension Manager 2、插件安装与删除

若要在应用程序中添加功能，首先应获取要安装的功能扩展。功能扩展的文件扩展名是 . mxp。这种打包的功能扩展文件包包含您安装和使用该功能扩展所需要的全部文件。 双击该功能扩展文件

在扩展管理器中选择“文件菜单>安装扩展”

21

3、插件的获得 网上获取

http://www.windstudio.net/（有风的日子） http://www.kupage.com/extensions/（酷页） 4、常用插件应用

（1）Flash Image插件

用来制作图片渐显渐隐效果，这个效果由鼠标动作控制。起初图片处于半透明的朦胧状态，当鼠标移动到图片上面时，图片就渐渐变得清晰；当鼠标移出图片时，图片又渐渐变得模糊，回到半透明状态。可以用这个插件来制作导航条和栏目插图。 可以到如下地址下载：

http://www.windstudio.net/download/dreamweaver_exchange/flash_image.mxp。 （2）Floating Image插件

这个插件用来在页面中添加一个到处飘浮的图片，很吸引眼球，可以做广告、发提醒等等。 （3）IE5.5 Custom Scrollbars插件

这个插件用来自定义IE浏览器的滚动条，可以让原本单调的滚动条变得色彩缤纷、生动活泼起来。 5、其它常见插件简介

Chromeless Window：用来创建没有边框的精致窗口

DHTML Scrollable Area：用来插入一个可以自动滚动的文本区域，适用于制作公告栏、滚动新闻等。 Disable View Source Code：用来禁止用户使用右键菜单，可以保护源代码。

Preload Images with Status Bar and Redirect：用来制作打开网页时的进度条效果，就像安装软件或者载入游戏进度时的那那种效果，免除枯燥，增添趣味。

Right Click Menu Builder：用来自定义鼠标右键菜单（IE5及以上版本支持），可以加入个人信息和栏目导航等。

CN Insert Greeting：用来在网页中插入问候语，可以根据时间自动变换。 Scrolling Status Bar：让状态栏滚动出现的自定义的文字。

第十九课时 动态网页开发基础知识

1、ASP技术概述

ASP（Active Server Pages）是一种服务器脚本编写环境。

使用ASP可以和HTML页、脚本命令和ActiveX组件等共同创建交互的Web页和基于Web的功能强大的应用程序。

2、Dreamweaver动态页设计工作流程

Macromedia Dreamweaver提供动态数据绑定和动态元素服务器行为等技术，使用户能够在没有编程语言基础的情况下创建动态Web站点。 开发动态网页的关键步骤有： 设计页面

创建动态内容的源 向网页添加动态内容 增强动态页的功能 测试和调试页 3、环境准备

Microsoft IIS，Windows NT server、Windows 2000和Windows XP附带的。 Microsoft PWS，运行在Windows 98和NT Workstation下，是IIS的精简版本。 4、设置支持ASP技术的站点 管理站点>设置测试服务器

22

5、创建数据库连接

要将数据库与ASP应用程序一起使用，则需要在Dreamweaver 中创建数据库连接。 （1）了解ASP数据库连接

ASP应用程序必须通过开放式数据库连接（ODBC）驱动程序或对象链接和嵌入式数据库

（OLEDB）提供程序连接到数据库。该驱动程序或OLEDB提供程序用作解释器，能够使WEB应用程序与数据库进行通信。

（2）数据库连接有两种方法

使用数据源名称（DSN）连接数据库；

DSN是个单个词的标识符，它指向数据库并包含连接到数据库所需的全部信息。如果Windows系统安装了ODBC驱动程序，则可以使用DSN。 使用连接字符串连接到数据库。

连接字符串是手动编码的表达式，它标识数据库并列出连接到该数据库所需的信息。 （3）创建DSN连接数据库

DSN是表示一组数据库连接参数的单词标识符。这些参数包括服务器名称、指向数据库的路径或数据库名称、要使用的ODBC驱动程序、用户和密码（如果有的话）。 控制面板>管理工具> ODBC数据源>系统DSN>添加 （4）使用连接字符串连接到数据库

连接字符串包含Web应用程序在服务器上连接到数据库所需的全部信息。Dreamweaver在页的服务器端脚本中插入该字符串，以便让应用程序服务器在随后进行处理。

Driver={SQL Server};Server=XXXXX;Database=XXXXXX;UID=XXXXX;PWD=XXXXXX

“Provider=Microsoft.Jet.OLEDB.4.0;DataSource=“&Server.MapPath(”xxxxxxx”) （5）创建、编辑或删除数据库连接 ① 创建数据库连接

以创建ACCESS数据库连接字符串为例。

打开一个ASP页，再打开“数据库”面板。单击该面板上的加号(+)按钮，然后从弹出式菜单中选择“自定义连接字符串”。填写对话框，然后单击“确定”。 ②编辑数据库连接

双击“数据库”面板中数据库连接 ③删除数据库连接

在“数据库”面板，选中连接后单击“ – ” 6、创建动态内容的数据源--记录集

将数据库用作动态网页的内容源时，必须首先创建一个要在其中存储检索数据的记录集。 记录集在存储内容的数据库和生成网页的应用程序服务器之间起一种桥梁作用。 记录集由数据库查询返回的数据组成，并且临时存储在应用程序服务器的内存中，以便进行快速数据检索。

记录集本身是从指定数据库中检索到的数据的集合。它可以包括完整的数据库表格，也可以包括表格的行和列的子集。这些行和列通过记录集定义的数据库查询进行检索。数据库查询是用结构化查询语言（SQL）编写的。

应用程序面板组>绑定>添加 窗口菜单>绑定>添加 7、数据库常用操作

添加动态文本、增加记录、删除记录、更新记录、分页显示、查询、创建记录计数器、创建导航条、创建主子页面等。 8、用户身份认证

登录用户、注销用户、对页的访问、检查新用户名 9、简单实例

23

数据库简单浏览：

做好连接后，在asp文件中编写： <% while (! (Recordset1.EOF) ) {%>

<% for( var i=0;i<=(Recordset1.Fields.Count-1);i=i+1) {%> <% =Recordset1.Fields(i).Value %>   <%}%>

<%Recordset1.MoveNext(); }%>

第二十课时 网站设计和维护

1、网站设计的要求 （1）鲜明的主题 （2）丰富的内容 （3）特色的形式 （4）良好的视觉效果 （5）完善的导航系统 （6）优质的服务 2、网站设计的过程

网站设计：名称、徽标（logo）、主题、目录结构、服务项目 素材准备：收集、整理、设计制作

网页设计：版式、布局、色彩、样式、动态效果

网页制作：CSS样式表、库、模板、导航条、栏目标题、横幅、广告 网页预览、网站检查与测试 上传、发布 3、站点维护

（1）定义站点及参数设置

选择一种访问远程文件夹的访问方法

本地/网络：如果访问网络文件夹，或者在本地计算机上运行测试服务器 FTP：如果使用FTP连接到测试服务器。

RDS（远程开发服务）：如果使用RDS连接到WEB服务器，远程文件夹必须位于运行ColdFusion的计算机上。

SourceSafe数据库：如果使用SourceSafe数据库连接到WEB服务器。只有Windows支持SourceSafe数据库，若要在Windows中使用SourceSafe，必须安装了Microsoft Visual SourceSafe Client 第6版。

WebDAV（基于WEB的分布创作和版本控制），如果使用WebDAV协议连接到Web服务器。对于这种访问方法，必须支持此协议的服务器，如Microsoft Internet Information Server (IIS) 5.0 或 Apache Web服务器。

（2）超链检查与修复

① 检查页面或站点内的链接

修复大型站点上断开的链接是一个单调乏味又费力的工作。这是因为大型站点可以包含到内部文档和外部文档的上百个链接，而且这些链接可能会随时间的推移而改变。孤立的文件（指仍然存在于站点内，但是站点内没有其他文件链接到该文件）也是问题，因为它们占据磁盘空间，而且可能使处理此站点的其他小组成员迷惑不解。 “检查链接”功能可用来在打开的文件、本地站点的某一部分或者整个本地站点中搜索断开的链接和未被引用的文件。Dreamweaver只验证站内文档的链接；并不验证外部链接。

24

在Dreamweaver检查完指定文件中的链接后，它打开“链接检查器”面板（在结果面板组中）。此对话框显示一个列有断开的链接、外部链接（不能检查链接）和孤立文件的列表。 3、站点维护

（3）下载和上传文件

① 从远程服务器上下载文件 ② 向远程服务器上传文件 ③ 本地和远程服务器文件同步

DW图标命令快捷键一览表

文件菜单

新建文档 Ctrl+N 打开一个HTML

文件Ctrl+O或者将文件从[文件管理器]或[站点]窗口拖动到[文档]窗口中 在框架中打开Ctrl+Shift+O 关闭Ctrl+W 保存 Ctrl+S

另存为 Ctrl+Shift+S 检查链接Shift + F8 退出 Ctrl+Q

编辑菜单——撤消Ctrl+Z

重复Ctrl+Y 或Ctrl+Shift+Z 剪切Ctrl+X 或Shift+Del 拷贝Ctrl+C 或Ctrl+Ins 粘贴Ctrl+V 或Shift+Ins 清除Delete 全选Ctrl+A

选择父标签Ctrl+Shift+< 选择子标签Ctrl+Shift+> 查找和替换Ctrl+F 查找下一个F3

缩进代码Ctrl+Shift+]

25

26