软ac控制器下载:Dreamweaver8学习教程

Dreamweaver8学习教程

一、Dreamweaver8 的操作环境

　　在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。

　　在Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目，建议大家保留。

　　新建或打开一个文档，进入Dreamweaver8的标准工作界面。Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。

1、标题显示栏 　

　　启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。

2、菜单栏

　　Dreamweave 8的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。

　　文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。

　　编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。

　　查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。

　　插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。

　　修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。

　　文本：用来对文本操作，例如设置文本格式等。

　　命令：所有的附加命令项

　　站点：用来创建和管理站点

　　窗口：用来显示和隐藏控制面板以及切换文档窗口

　　帮助：联机帮助功能。例如按下F1键，就会打开电子帮助文本

3、插入面板组

　　 插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。

4、文档工具栏

　“文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。

5、标准工具栏

　　“标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮：“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。

6、文档窗口

　　当我们打开或创建一个项目，进入文档窗口，我们可以在文档区域中进行输入文字、插入表格和编辑图片等操作。

　　“文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。“代码”视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。

7、状态栏

　　“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击 可以选择文档的整个正文。

8、属性面板

　　属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么属性面板上就出现该图像的相关属性；如果选择了表格，那么属性面板会相应的变化成表格的相关属性。

9、浮动面板

　　其它面板可以同称为浮动面板，这些面板都浮动于编辑窗口之外。在初次使用Dreamweave 8的时候，这些面板根据功能被分成了若干组。在窗口菜单中，选择不同的命令可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资源面板组和其它面板组。

二、创建站点

要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点，位于互联网web服务器里的网站被称为远程站点。Dreamweaver 8提供了对本地站点和远程站点强大的管理功能。

1、规划站点结构

　　 网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单的集合。为了达到最佳效果，在创建任何 Web 站点页面之前，要对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的。

　　我们可以通过把文件分门别类的放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。

2、创建站点

　　在Dreamweave 8中可以有效的建立并管理多个站点。搭建站点可以有两种方法，一是利用向导完成，二是利用高级设定来完成。

　　在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。

　　 （1）选择菜单栏——站点——管理站点，出现“管 理站点”对话框。点击“新建”按钮，选择弹出菜单中的“站点”项。

　　在打开的窗口上方有“基本”和“高级”两个标签，可以在站点向导和高级设置之间切换。下面选择“基本”标签。

　　在文本框中，输入一个站点名字以在 Dreamweaver8.0中标识该站点。这个名字可以是任何你需要的名字。单击“下一步”。出现向导的下一个界面，询问是否要使用服务器技术。

　　我们现在建立的是一个静态页面，所以选择“否”。

　　点下一步，在文档框设置本地站点文件夹的地址。

　　点下一步，进入站点定义，我们将在站点建设完成后再与FTP链接，这里选择“无”。

　　单击“完成”按钮，结束“站点定义“对话框的设置。

　　单击“完成”按钮，文件面板显示出刚才建立的站点。

　　到此，我们完成了站点的创建。

3、搭建站点结构

　　站点是文件与文件夹的集合，下面我们根据前面对xmweb网站的设计，来新建xmweb站点要设置的文件夹和文件。

　　新建文件夹，在文件面板的站点跟目录下单击鼠标右键，从弹出菜单中选择“新建文件夹”项，然后给文件夹命名。这里我们创建新建8个文件夹，分别命名为：img、med、swf、txt、css、js、moan和fy。

　　创建页面，在文件面板的站点跟目录下单击鼠标右键，从弹出菜单中选择“新建文件”项，然后给文件命名。首先要添加首页，我们把首页命名为index.html，再分别新建01.html、02.html、03.html、04.html和05.html。

4、文件与文件夹的管理

对建立的文件和文件夹，可以进行移动、复制、重命名和删除等基本的管理操作。单击鼠标左键选中需要管理的文件或文件夹，然后单击鼠标右键，再弹出菜单中选“编辑”项，即可进行相关操作。

三、制作一个图文混排的简单页面

（一）页面的总体设置

　　 1、设置页面的头内容

　　 头内容再浏览器中是不可见的，但是却携带着网页的重要信息，如关键字、描述文字等，还可以实现一些非常重要的功能，如自动刷新功能。

　　 鼠标左键单击插入工具栏最左边按钮旁的下拉小三角，在弹出菜单中选择“HTML”项，出现“文件头”按钮，点开下拉菜单，就可以进行头内容的设置了。

　　设置标题，网页标题可以是中文、英文或符号，显示在浏览器的标题栏中。我们直接在设计窗口上方的标题栏内输入或更改，就可以完成网页标题的编辑了。

　　插入关键字，关键字用来协助网络上的搜索引擎寻找网页。要想让更多的人看见你的网站，这项要好好填哦^_^单击上图所示的“关键字”项，弹出“关键字”对话框，填入关键字即可。

　　插入META，META标记用于记录当前网页的相关信息，如编码，作者，版权等，也可以用来给服务器提供信息。单击上图所示的“META”项，弹出“META”对话框，在“属性”栏选择“名称”属性，在“值”文本框中输入相应的值，可以定义相应的信息。

　　author—作者信息，copyright—版权声明，generator—网页编辑器。

　　2、设置页面属性

　　单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。

　　设置外观，“外观”是设置页面的一些基本属性。我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。我们设置页面的所有边距为0。

　　设置链接，“链接”选项内是一些与页面的链接效果有关的设置。“链接颜色”定义超链接文本默认状态下的字体颜色，“变换图像链接”定义鼠标放在链接上时文本的颜色，“已访问链接”定义访问过的链接的颜色，“活动链接”定义活动链接的颜色。“下划线样式”可以定义链接的下划线样式。

　　设置标题，“标题”用来设置标题字体的一些属性。如下图所示，在左侧“分类”列表中选择“标题”，这里的标题指的并不是页面的标题内容，而是可以应用在具体文章中各级不同标题上的一种标题字体样式。我们可以定义“标题字体”及6种预定义的标题字体样式，包括粗体、斜体、大小和颜色。按自己的喜欢的风格设置吧。

（二）Dreamweaver 8 文本的插入与编辑

1、插入文本

　　 要向 Dreamweaver 文档添加文本，可以直接在Dreamweaver“文档”窗口中键入文本，也可以剪切并粘贴，还可以从word文档导入文本。

　　 用鼠标在文档编辑窗口的空白区域点一下，窗口中出现闪动的光标，提示文字的起始位置，将01.rar中的文字素材复制/粘贴进来。

2、编辑文本格式

　　 网页的文本分为段落和标题两种格式。

　　 在文档编辑窗口中选中一段文本，在属性面板“格式”后的下拉列表框中选择“段落”把选中的文本设置成段落格式。

　　 “标题1”到“标题6”分别表示各级标题，应用于网页的标题部分。对应的字体由大到小，同时文字全部加粗。

　　 另外，在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。

　　 3、设置字体组合

　　 Dreamweaver8预设读的可供选择的字体组合只有6项英文字体组合，要想使用中文字体，必须重新编辑新的字体组合，在“字体”后的下拉列表框中选择“编辑字体列表”，弹出“编辑字体列表”对话框：

　　4、文字的其它设置

　　 文本换行，按Enter键换行的行距较大（在代码区生成

　　 文本空格，我们选择编辑/首选参数，在弹出得对话框中左侧的分类列表中选择“常规”项，然后在右边选“允许多个连续的空格”项，我们就可以直接按“空格”键给文本添加空格了。

　　特殊字符，要向网页中插入特殊字符，需要在快捷工具栏选择“文本”，切换到字符插入栏，单击文本插入栏的最后一个按钮，可以向网页中插入相应的特殊符号。

　　插入列表，列表分为两种，有序列表和无序列表，无序列表没有顺序，每一项前边都以同样的符号显示，有序列表前边的每一项有序号引导。在文档编辑窗口中选中需要设置的文本，在属性面板中单击 ，则选中的文本被设置成无序列表，单击 则被设置成有序列表。

　　插入水平线，水平线起到分隔文本的排版作用，选择快捷工具栏的“HTML”项，单击HTML栏的第一个按钮 ，即可向网页中插入水平线。选中插入的这条水平线，可以在属性面板对它的属性进行设置。

　　 插入时间，在文档编辑窗口中，将鼠标光标移动到要插入日期的位置，单击常用插入栏的“日期”按钮，在弹出的“插入日期”对话框中选择相应的格式即可。

（三）Dreamweaver 8 插入图像

目前互联网上支持的图像格式主要有GIF、JPEG和PNG。其中使用最为广泛的是GIF和JPEG。

　　1、插入图像

　　在制作网页时，先构想好网页布局，在图像处理软件中将需要插入的图片进行处理，然后存放在站点根目录下的文件夹里。

　　插图图像时，将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常用插入栏的“图像”按钮。

　　弹出的“选择图像源文件”对话框，选择img/001.jpg，单击“确定”按钮就把图像001.jpg插入到了网页中。

　　注意：如果我们在插入图片的时候，没有将图片保存在站点根目录下，会弹出下图所示的对话框，提醒我们要把图片保存在站点内部，这时单击“是”按钮，

　　然后选择本地站点的路径将图片保存，图像也可以被插入到网页中。

　　2、设置图像属性

　　选中图像后，在属性面板中显示出了图像的属性，如下图所示。

　　在属性面板的左上角，显示当前图像的缩略图，同时显示图像的大小。在缩略图右侧有一个文本框，在其中可以输入图像标记的名称。

　　 图像的大小是可以改变的，但是在DW里更改是极不好的习惯，如果我们的电脑安装了FW软件，单击属性面板的“编辑”旁边的 ，即可启动FW对图像进行缩放等处理。当图像的大小改变时，属性栏中“宽”和“高”的数值会以粗体显示，并在旁边出现一个弧形箭头，单击它可以恢复图像的原始大小。

　　 “水平边距”和“垂直边距”文本框用来设置图像左右和上下与其它页面元素的距离。

　　 “边框”文本框时用来设置图像边框的宽度，默认的边框宽度为0。

　　 “替代”文本框用来设置图像的替代文本，可以输入一段文字，当图像无法显示时，将显示这段文字。

　　 单击属性面板中的 对齐按钮，可以分别将图像设置成浏览器居左对齐、居中对齐、居右对齐。

　　 在属性面板中，“对齐”下拉列表框时设置图像与文本的相互对齐方式，共有10个选项。通过它我们可以将文字对齐到图像的上端、下端、左边和右边等，从而可以灵活的实现文字与图片的混排效果。

　　 3、插入其它图像元素

　　 在我们单击常用插入栏的“图像”按钮时，可以看到，除了第1项“图像”外，还有“图像占位符”、“鼠标经过图像”、“导航条”等项目。

　　 插入图像占位符，在我们布局页面时，如果要在网页中插入一张图片，可以先不制作图片，而是使用占位符来代替图片位置。单击下拉列表中的“图像占位符”，打开“图像占位符”对话框。按设计需要设置图片的宽度和高度，输入呆插入图像的名称，即可。

　　鼠标经过图像，鼠标经过图像实际上由两个图像组成，主图像（当首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。这两张图片要大小相等，如果不相等，DW自动调整次图片的大小跟主图像大小一致。

　　 图片与文本一样，是网页中最常用到的内容，其变化相对较少，要想排出精致美观的网页，下一节课的内容可是必不可少的哦，继续努力吧^_^

（四）Dreamweaver 8 插入并编辑表格

表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上，让我们可以设计出漂亮的页面，使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，而在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。

一、插入并编辑表格

　　1、插入表格

　　在文档窗口中，将光标放在需要创建表格的位置，单击“常用”快捷栏中的表格按钮弹出的“表格”对话框，指定表格的属性后，在文档窗口中插入设置的表格。

　　“行数”文本框用来设置表格的行数。

　　“列数”文本框用来设置表格的列数。

　　“表格宽度”文本框用来设置表格的宽度，可以填入数值，紧随其后的下拉列表框用来设置宽度的单位，有两个选项——百分比和像素。当宽度的单位选择百分比时，表格的宽度会随浏览器窗口的大小而改变。

　　 “单元格边距”文本框用来设置单元格的内部空白的大小。

　　 “单元格间距”文本框用来设置单元格与单元格之间的距离。

　　 “边框粗细”用来设置表格的边框的宽度。

“页眉”定义页眉样式，可以在四种样式中选择一种。

　　 “标题” 定义表格的标题。

　　 “对其标题”定义表格标题的对齐方式。

　　 “摘要” 可以在这里对表格进行注释。

　　2、选择单元格对象

　　对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。

　　选择整个表格的方法是把鼠标放在表格边框的任意处，当出现 这样的标志时单击即可选中整个表格，或在表格内任意处单击，然后在状态栏选中

　　要选中某一单元格，按住Ctrl键，鼠标在需要选中的单元格单击即可；或者，选中状态栏中的

滤镜效果

描述

Alpha

　　设置透明效果

Blru

　　设置模糊效果

Chroma

　　把指定的颜色设置为透明

DropShadow

　　设置投射阴影

FlipH

　　水平反转

FlipV

　　垂直反转

Glow

　　为对象的外边界增加光效

Grayscale

　　降低图片的彩色度

Invert

　　将色彩、饱和度以及亮度值完全反转建立底片效果

Light

　　设置灯光投影效果

Mask

　　设置遮罩效果，Color指定遮罩的颜色

Shadow

　　设置阴影效果

Wave

　　设置水平方向和垂直方向的波动效果

Xray

　　设置X光照效果

Dreamweaver 8 CSS样式表的其他操作

单击CSS样式面板右上方的扩展按钮，弹出下图所示的菜单。CSS的相关操作都是通过这个菜单上的项目来实现的。

　　1、编辑CSS样式

　　选中需要编辑的样式类型，选择上图中的“编辑”项或直接单击“编辑样式”按钮 ，在弹出的“CSS规则定义”对话框中修改相应的设置。编辑完成后单击“确定”按钮，CSS样式就编辑完成了。

　　2、应用CSS自定义样式

　　鼠标右键单击在网页中被选中的元素，在弹出的快捷菜单中选择“CSS样式”，在其子菜单中选择需要的自定义样式。

　　3、附加样式表

　　选择“附加样式表”项，打开“链接外部样式表”对话框，可以链接外部的CSS样式文件。

　　“文件/URL”设置外部样式表文件的路径，可以单击浏览按钮，在浏览窗口中找到样式表文件。

　　“添加为”选择“链接”，这IE和Netscape两种浏览器都支持的导入方式。“导入”只有Netscape浏览器支持。

　　设置完毕后单击“确定”按钮，CSS文件即被导入到当前页面。

（三）Dreamweaver 8 CSS样式表滤镜实例

1、制作模糊文字效果

　　1、新建05.html的文件插入一个1行1列的表格，边框和边距全部设置为0。然后在表格中输入要修饰的文字。

　　2、打开CSS样式面板，创建一个CSS样式，在弹出的“新建样式对话框”做如下设置。

　　3、设置完成后，单击“确定”按钮弹出“CSS样式定义”对话框，在类型设置区域中设置：大小：60，字体：黑体，粗细：粗，颜色：＃FF9900。

　　4、要产生文字特效，最重要的是在扩展设置区域中进行特殊设置。

　　Blur滤镜产生像被风吹一样的模糊效果。打开滤镜选项的下拉菜单，对Blur滤镜进行设置：

　　Blur(Add=?, Direction=?, Strength=?)

　　Add参数是一个布尔值，一般来说，当滤镜用于图片时取0，用于文字时取1。

　　“Direction=?”模糊方向，以45度为单位改变，“0”为垂直向上，“45”向右上，“90”水平向右，“135”向右下，以依次改变。这里我们设置Direction=90。

　　Strength代表模糊移动值，单位为像素。我们设置Strength=180。

　　设置完成后，点击“确定”。

　　5、在文档编辑区选中文字所在单元格，在属性面板设置文字的样式为.test。

　　保存文件，按F12预览效果。

　　在只有HTML的时代，只能实现简单的网页效果。有了CSS样式，网页排版发生了翻天覆地的变化，在Dreamweaver8里，使用CSS样式是如此的简单，而制作出来的效果可以如此的炫目。

五、Dreamweaver 8 创建模板

在我们制作网站的过程中，为了统一风格，很多页面会用到相同的布局、图片和文字元素。为了避免大量的重复劳动，可以使用Dreamweaver8提供的模板功能，将具有相同版面结构的页面制作为模板，将相同的元素（如导航栏）制作为库项目，并存放在库中可以随时调用。

（一）创建模板

　　模板的创建有三种方式。

　　1、直接创建模板

　　选择“窗口/资源”命令，打开“资源”面板，切换到模板子面板，如下图所示。

　　单击模板面板上的“扩展”按钮，在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件，给模板命名。

　　然后单击“编辑”按钮，打开模板进行编辑。

　　编辑完成后，保存模板，完成模板建立。

　　2、将普通网页另存为模板

　　 打开一个已经制作完成的网页，删除网页中不需要的部分，保留几个网页共同需要的区域。

　　 选择“文件/另存为模板”命令将网页另存为模板。

　　 在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。“现存的模板”选框显示了当前站点的所有模板。“另存为”文本框用来设置模板的命名。单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。

　　单击“保存”按钮，保存模板。系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。

　　 在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。我们可以先单击“确定”，以后再定义可编辑区域。

　　3、从文件菜单新建模板

　　 选择“文件/新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。”

（二）Dreamweaver 8 定义可编辑区域

模板创建好后，要在模板中建立可编辑区，只有在可编辑区里，我们才可以编辑网页内容。可以将网页上任意选中的区域设置为可编辑区域，但是最好是基于HTML代码的，这样在制作的时候更加清楚。

　　 在文档窗口中，选中需要设置为可编辑区域的部分，单击常用快捷栏的“模板”按钮，在弹出菜单中选择“可编辑区域”项。

　　在弹出的“新建可编辑区域”对话框中给该区域命名，然后单击“确定”按钮。新添加的可编辑区域有蓝色标签，标签上是可编辑区域的名称。

　　 如果希望删除可编辑区域，可以将光标置于要删除的可编辑区域内，选择“修改/模板/删除模板标记”命令，光标所在区域的可编辑区即被删除。

　　 这样模板文件就创建好了。

（三）其他模板区域

　　 模板中除了可以插入最常用的“可编辑区域”外，还可以插入一些其他类型的区域，分别为“可选区域”、“重复区域”、“可编辑可选区域”和“重复表格”。

　　 1、可选区域

　　 可选区域是模板中的区域，用户可将其设置为在基于模板的文件中显示或隐藏。当要为在文件中显示的内容设置条件时，即可使用可选区域。

　　 2、重复区域

　　 重复区域时可以根据需要在基于模板的页面中负值任意次数的模板部分。重复区域通常用于表格，也可以为其他页面元素定义重复区域。

　　 3、可编辑可选区域

　　 是可选区域的一种，可以设置显示或隐藏所选区域，并且可以编辑该区域中的内容。

（四）创建基于模板的页面

　　 1、打开素材csslianxi.html文件，选择菜单栏的文件>另存为模板命令。

　　 2、在弹出的另存为模板对话框中，在“站点”文本框选择“xmweb”，在“另存为”给模板命名为mo1，点击确定。

　　 3、弹出是否更改链接的提示，选择“是”。此时，在站点内自动生成一个名为“Templates”的文件夹，名称为mo1.dwt的模板文件被保存在该文件夹中。

　　 4、鼠标在网页表格的最下一行空白处单击一下，选中状态栏的

　　 5、弹出“可编辑区域”对话框，点击“确定”。这样我们就完成了模板的制作。

　　 6、新建06.html文件，选择菜单栏>窗口>资源命令，打开资源面板。

　　 7、点击资源面板的“模板”按钮，在资源面板我们就可以看见mo1.dwt文件，选中mo1.dwt，按住鼠标左键直接拖拽到06.html的文档窗口中。即可将该模板应用到06.html中。

六、Dreamweaver 8 使用库

所谓库项目，实际上就是文档内容的任意组合，可以将文档中的任意内容存储为库项目，使它在其它地方被重复使用。

  1、创建库

　　 在文档窗口中选择需要保存为库项目的内容。

　　 单击资源面板“库”分类中右下角的“新建库项目”按钮。

　　 一个新的项目出现在资源面板“库”分类的列表中，预览框中显示预览的效果，还可以给该项目键入新名称。这样，一个库项目就创建好了。

　　 2、插入库

　　 将光标方在网页中需要插入库文件的位置，在资源面板“库”分类中选择需要插入的库项目，直接拖动到光标所在位置即可。

　　 3、更改库

　　 如果修改了库文件，选择“文件/保存”命令，弹出“更新库项目”对话框，询问是否更新网站中使用了该库文件的网页。单击“更新”按钮，将更新网站中使用了该库文件的网页。

七、Dreamweaver 8 制作框架网站

框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。

　　 一个框架结构有两部分网页文件构成：

　　 框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。

　　 框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。

（一）创建框架

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

　　 1、使用预制框架集

　　 (1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击 “框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。

（2）、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置，这样顶部和嵌套的左侧框架就完成了。

　　2、鼠标拖动创建框架

　　（1）、新建普通网页，命名后将其打开。

　　（2）、把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框，可以垂直或水平分割网页。

（二）保存框架

　　 每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。

　　 选择菜单栏>文件>保存全部，将框架集保存为index.html，上方框架保存为07.html，左侧框架保存为08.html，右侧框架保存为09.html。

　　 这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。

（三） 编辑框架式网页

　　 虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编辑窗口当作一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。框架的大小可以随意修改。

　　 1、 改变框架大小

　　 用鼠标拖拽框架边框可随意改变框架大小。

　　 2、 删除框架

　　 用鼠标把框架边框拖拽到父框架的边框上，可删除框架。

　　 3、设置框架属性

　　 设置框架属性时，必须先选中框架。选择框架方法如下：

　　 选择菜单栏>窗口>框架，打开框架面板，单击某个框架，即可选中该框架。

　　 在编辑窗口某个框架内按住Alt键并单击鼠标，即可选择该框架。当一个框架被选择时，它的边框带有点线轮廓

2. 设置框架属性

　　 选中框架，在属性面板上可以设置框架属性：框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。

　　 需要注意的是：1、框架是不可以合并的。2、在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。

（四）在框架中使用超级链接

　　 在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。

　　 “目标”下拉菜单中的选项：

　　 * _blank 放在新窗口中。

　　 * _parent 放到父框架集或包含该链接的框架窗口中。

　　 * _self 放在相同窗口中（默认窗口无须指定）。

　　 * _top 放到整个浏览器窗口并删除所有框架。

　　 在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFrame、topFrame选项：

　　 * mainFrame 放到名为mainFrame的框架中。

　　 * leftFrame 放到名为leftFrame的框架中。

　　 * topFrame放到名为topFrame的框架中。

（五）制作框架页面

　　 1、选择菜单栏>窗口>框架，打开框架面板，选中整个框架集，如下图所示：

　　在属性面板中，将行的值设置为100，单位为像素，如下图所示：

2、选择菜单栏>窗口>框架，打开框架面板，选中子框架集，如下图所示：

　　在属性面板中，将列的值设置为200，单位为像素，如下图所示：

　　这样，我们就完成了对整个框架的布局。下面我们来布局各个框架页面。

　　 3、鼠标在topFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了07.html。在页面属性中将上、下、左。右边距全部设为0。

　　 插入一个1行2列的表格，宽度为100％，高度为100px，左单元格宽度为382px并插入背景图片img/103.jpg，设置表格的背景颜色为103.jpg图片右边缘的绿色（用吸管吸取）。

　　 4、鼠标在leftFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了08.html，在页面属性中将上、下、左。右边距全部设为0。

　　 插入一个6行1列 的表格，表格宽度为95％，居中对齐。将第一个单元格的高度设为20px，选中其余单元格将高度设置为50px。分别输入文字设置导航栏目。

　　分别对各个导航栏目建立链接关系，链接路径指向要链接到的网页，目标选择mainFrame框架。

　　 5、鼠标在mainFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了09.html，在页面属性中将上、下、左。右边距全部设为0。

　　 自己设置一个欢迎页面。

　　至此，我们完成了一个框架网站的制作。

八、Dreamweaver 8 创建层

层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。

（一）创建层

　　 1、创建普通层

　　 （1）插入层

　　 选择菜单栏>插入>布局对象>层命令，即可将层插入到页面中去。

　　 使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。选中层会出现六个小手柄，拖动小手柄可以改变层的大小。

　　 （2）拖放层

　　 打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。

　　（3）绘制层

　　 打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。

　　 2、创建嵌套层

　　 创建嵌套层就是在一个层内插入另外的层。

　　 方法一：将光标放才某层内，选择菜单栏>插入>布局对象>层命令，即可在改层内插入一个层。

　　方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。

（二）Dreamweaver 8 设置层的属性

选中要设置的层，就可以在属性面板中设置层的属性了。

　　层编号：给层命名，以便在“层”面板和 JavaScript 代码中标识该层。

　　 左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。

　　 宽、高：指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘（按照在　　　Dreamweaver设计视图中的显示）会延伸以容纳这些内容。（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。

　　 Z轴：设置层的层次属性。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的堆叠顺序时，使用“层”面板要比输入特定的 z 轴值更为简便

　　 可见性：在“可见性”下拉列表中，设置层的可见性。使用教本语言如JavaScrip可以控 制层的动态显示和隐藏。有四个选项：

　　 Default——选择该选项，则不指明层的可见性。

　　 Inherit——选择该选项，可以继承父层的可见性。

　　 Visible——选择该选项， 可以显示层及其包含的内容，无论其父级层是否可见。

　　 Hidden——选择该选项，可以隐藏层及其包含的内容，无论其父级层是否可见。

　　 背景颜色：用来设置层的背景颜色。

　　 背景图像——用来设置层的背景图像。

　　 溢出——选择当层内容超过层的大小时的处理方式。有四个选项：

　　 Visible（显示）：选择该选项，当层内容超出层的范围时，可自动增加层尺寸。

　　 hidden（隐藏）: 选择该选项，，当层内容超出层的范围时，保持层尺寸不变，隐藏超出部分的内容。

　　 scroll（滚动条）: 选择该选项，则层内容无论是否超出层的范围，都会自动增加滚动条。

　　 auto（自动）: 选择该选项，，当层内容超出层的范围时，自动增加滚动条（默认）

　　 剪辑：设置层的可视区域。通过上、下、左、右文本框设置可视区域与层边界的像素值。层经过“剪辑”后，只有指定的矩形区域才是可见的。

　　 类：在类的下拉列表中，可以选择已经设置好的CSS样式或新建CSS样式。

　　 注意：位置和大小的默认单位为像素 (px)。也可以指定以下单位：pc (pica)、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或 %（父层相应值的百分比）。缩写必须紧跟在值之后，中间不留空格：

　　 使用层制作特效我们在创建网页的时候，可以发现层可以在网页上随意改变位置，在设定层的属性的时，可以知道层有显示隐藏的功能，通过这两个特点可以实现很多令人激动的网页动态效果。

（三）Dreamweaver 8 时间轴及创建时间轴动画

时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。

　　 1、时间轴的各项功能

　　（1）时间轴弹出菜单：表示当前的时间轴名称。

　　 （2）时间轴指针：在界面上显示当前位置的帧。

　　 （3）不管时间轴在哪个位置，一直移动到第一帧。

　　 （4）表示时间指针的当前位置。

　　 （5）表示每秒显示的帧数。默认值时15帧。增加帧数值，则动画播放的速度将加快。

　　 （6）自动不放：选中该项，则网页文档中应用动画后自动运行。

　　 （7）LOOP（循环）：选中该项，则继续反复时间轴上的动画。

　　 （8）行为通道：在指定帧中选选择要运行的行为。

　　 （9）关键帧：可以变化的帧。

　　 （10）图层条：意味着插入了“层”等对象。

　　 （11）图层通道：它是用于编辑图层的空间。

　　 2、在DW8中显示时间轴

　　 选择菜单栏的窗口/时间轴或按快捷键Alt＋F9，则显示时间轴。

　　 3、创建时间轴动画

　　 时间线只能移动分层对象，如果想移动文本或图像之类的对象，可以将其放在层中。

　　 （1）打开09.html文件，

　　 把光标放到页面左上方的位置，在插入面板选择布局>绘制层，创建六个层。分别输入文字“小”、“木”、“web”、“欢”、“迎”、“你”，将图层排列在适当的位置。

　　 （2）打开时间轴。选择层1后，拖动到时间轴的第一行上。

　　 （3）用同样的方法，把包含有其它文字的层也根据文字的顺序拖动到时间轴的第2－6行上。

　　 （4）为了减慢文字移动的速度，把时间轴中的15帧全部扩展为25帧。

　　 （5）在时间轴中选择Layer1的第一帧，在属性面板的顶端坐标值（T）中输入（－50），这样，可以把文字放置到上侧。

　　 （6）用同样的方法选择其余层的第一帧后，把顶端坐标值（T）统一设定为（－50）。

　　 （7）为了每个一段时间下落一个文字，从第二个动画条开始向后移动5帧。勾选“自动播放选项”。

　　 （8）按F12浏览效果。

九、Dreamweaver 8 利用行为制作动态页面

一般说来，动态网页是通过JaveScript或基于JaveScript的DHTML代码来实现的。包含JaveScript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业需要专门学习，而Dreamweaver提供的“行为”的机制，虽然行为也是基于JaveScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。

　　行为是事件与动作的彼此结合。例如，当鼠标移动到网页的图片上方时，图片高亮显示，此时的鼠标移动称为时间，图片的变化称为动作，一般的行为都是要有事件来激活动作。动作时由预先写好的能够执行某种任务的JavaScript代码组成，而事件是由浏览器前用户的操作相关，如单击鼠标、鼠标上滚等。

（一）了解行为

　　 “行为”可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化(前面介绍过的轮替图像)，就导致发生了一个动作。与行为相关的有三个重要的部分——对象、事件和动作。

　　1. 对象(Object)

　　对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。

　　2. 事件(Event)

　　事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。

3. 动作(Action)

　　行为通过动作来完成动态效果，如：图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码，在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JaveScript代码，就不必自己编写。

　　4. 事件与动作

　　将事件和动作组合起来就构成了行为，例如，将onClick行为事件与一段JaveScript代码相关联，单击鼠标时就可以执行相应的JaveScript代码(动作)。一个事件可以同多个动作相关联(1：n)，即发生事件时可以执行多个动作。为了实现需要的效果，我们还可以指定和修改动作发生的顺序。

　　Dreamweaver内置了许多行为动作，好象是一个现成的JaveScript库。除此之外，第三方厂商提供了更多的行为库，下载并在Dreamweaver中安装行为库中的文件，可以获得更多的可操作行为。如果您很熟悉JaveScript语言，也可以自行设计新动作，添加到Dreamweaver中。

（二）应用行为

　　1. 行为面板

　　在Dreamwaever中，对行为的添加和控制主要通过“行为”面板来实现。选择窗口>行为命令，打开行为面板，下图所示。

　　在行为面板上可以进行如下操作：

　　单击“+”按钮，打开动作菜单，添加行为；单击“-”按钮，删除行为。

　　添加行为时，从动作菜单中选择一个行为项。

　　单击事件列右方的三角，打开事件菜单，可以选择事件。

　　单击"向上"箭头或向下箭头，可将动作项向前移或向后移，改变动作执行的顺序。

　　2. 创建行为

　　一般创建行为有三个步骤：选择对象、添加动作、调整事件。

我们通过一个“打开浏览器窗口”实例说明如何创建行为。我们需要的效果是，在网页上单击一幅小图像，打开一个新窗口显示放大的图像。

　　（1）、打开01.html，选中图片。

　　（2）、单击行为面板上的"+"按钮，打开动作菜单。从动作菜单中选择“打开浏览器”命令，在弹出的对话框中设置参数。

　　在“要显示的URL”文本框中，单击“浏览按钮”选择在新窗口中载入的目标的URL地址(可以是网页也可以是图像)。

　　窗口宽度设为400px，窗口高度设为300px。

　　窗口名称为“放大图片”。

　　（3）、当我们添加行为时，系统自动为我们选择了事件onClick(单击鼠标)，现在，我们单击行为面板上的事件菜单按钮，打开事件菜单，重新选择一个触发行为的事件。把onClick(单击鼠标)的事件改为onMouseOver(鼠标滑过)，如下图所示：

　　4、按F12键预览打开新窗口的效果。

（三）应用案例

　　1、“播放声音”实例

　　利用播放声音的动作，可以在网页中播放声音文件，如背景音乐，或单击某个按钮(文字或图片)播放一段声音。

　　（1）给网页添加背景音乐

　　打开01.html，单击编辑窗口状态栏上的标记，选中整个网页。

　　打开行为面板，单击"+"按钮，在菜单中选择“播放声音”。

　　在弹出的菜单中输入音乐文件的路径，单击“确定”。

　　把事件调整为onLoad(载入页面后)。

　　（2）、给图片添加声音，方法同上。

　　2、设置状态行文本

浏览器下端的状态行通常显示当前状态的提示信息，利用“设置状态栏文本”行为，可以重新设置状态行信息。

　　选中要附加行为的对象，如网页的标记，或一个链接。

　　单击行为面板上的"+"按钮，在打开的动作菜单。

　　选择“设置文本”>“设置状态文本”命令，在打开的“信息”对话框中输入需要的文本。

　　按F12键，可以看到打开网页后，浏览器下端的状态行上有了新输入的信息。

　　3、网页中的变色按钮

　　新建11.html文件，插入一个1行2列的表格，做如下设置：

　　选中全部单元格，在属性面板中做如下设置：

　　在两个单元格中分别输入文字“变色按钮”、“应用行为”，并将它们居中对齐，产生一个DIV标签，在代码区找到第一个div标签，在