admin管理员组文章数量:1539090
2024年5月12日发(作者：)
第一天的内容可能让你觉得枯燥乏味，不过，“工欲善其事，必先利其器”，让我们一起来了
解 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 的时候，这些面板根据功能被分成了若干组。在窗口菜单中，选择不同的命
令可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资源面板组和其它面
板组。
终于把Dreamweave 8 的基本工作界面介绍完了，你是否已经了解它？从现在开始，
让我们一起来建造一座小房子。
图表 1
要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站， 然后把这个网站
传到互联网的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。
创建页面， 在文件面板的站点跟目录下单击鼠标右键， 从弹出菜单中选择“新建文件”项，
然后给文件命名。首先要添加首页，我们把首页命名为 ，再分别新建 、
、、和 。
4、文件与文件夹的管理
对建立的文件和文件夹，可以进行移动、复制、重命名和删除等基本的管理操作。单击
鼠标左键选中需要管理的文件或文件夹，然后单击鼠标右键，再弹出菜单中选“编辑”项，即
可进行相关操作。
我们已经描绘了小屋的蓝图，从现在开始，为我们的小屋添砖加瓦吧。打开 ，制作
一个图文混排的简单页面。
一、页面的总体设置
1、设置页面的头内容
头内容再浏览器中是不可见的，但是却携带着网页的重要信息，如关键字、描述文字
等，还可以实现一些非常重要的功能，如自动刷新功能。
鼠标左键单击插入工具栏最左边按钮旁的下拉小三角，在弹出菜单中选择“HTML”项，
出现“文件头”按钮，点开下拉菜单，就可以进行头内容的设置了。
设置标题，网页标题可以是中文、英文或符号，显示在浏览器的标题栏中。我们直接在
设计窗口上方的标题栏内输入或更改，就可以完成网页标题的编辑了。
插入关键字，关键字用来协助网络上的搜索引擎寻找网页。要想让更多的人看见你的网
站， 这项要好好填哦^_^单击上图所示的“关键字”项， 弹出“关键字”对话框， 填入关键字即可。
插入META，META 标记用于记录当前网页的相关信息，如编码，作者，版权等，也
可以用来给服务器提供信息。单击上图所示的“META”项，弹出“META”对话框，在“属性”栏
选择“名称”属性，在“值”文本框中输入相应的值，可以定义相应的信息。
author—作者信息，copyright—版权声明，generator—网页编辑器。
2、设置页面属性
单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。
设置外观，“外观”是设置页面的一些基本属性。我们可以定义页面中的默认文本字体、
文本字号、文本颜色、背景颜色和背景图像等。我们设置页面的所有边距为 0。
设置链接，“链接”选项内是一些与页面的链接效果有关的设置。“链接颜色”定义超链接
文本默认状态下的字体颜色，“ 变换图像链接”定义鼠标放在链接上时文本的颜色，“ 已访问链
接”定义访问过的链接的颜色，“活动链接”定义活动链接的颜色。“下划线样式”可以定义链接
的下划线样式。
设置标题，“标题”用来设置标题字体的一些属性。如下图所示，在左侧“分类”列表中选
择“标题”，这里的标题指的并不是页面的标题内容，而是可以应用在具体文章中各级不同标
题上的一种标题字体样式。我们可以定义“标题字体”及 6 种预定义的标题字体样式，包括粗
体、斜体、大小和颜色。按自己的喜欢的风格设置吧。
Dreamweaver 8 文本的插入与编辑
1、插入文本
要向 Dreamweaver 文档添加文本，可以直接在 Dreamweaver“文档”窗口中键入文
本，也可以剪切并粘贴，还可以从word 文档导入文本。
用鼠标在文档编辑窗口的空白区域点一下，窗口中出现闪动的光标，提示文字的起始
位置，将 中的文字素材复制/粘贴进来。
2、编辑文本格式
网页的文本分为段落和标题两种格式。
在文档编辑窗口中选中一段文本， 在属性面板“格式”后的下拉列表框中选择“段落”把选
中的文本设置成段落格式。
“标题 1”到“标题 6”分别表示各级标题，应用于网页的标题部分。对应的字体由大到小，
同时文字全部加粗。
另外，在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。
3、设置字体组合
Dreamweaver8 预设读的可供选择的字体组合只有 6 项英文字体组合，要想使用中文
字体， 必须重新编辑新的字体组合， 在“字体”后的下拉列表框中选择“编辑字体列表”， 弹出“编
辑字体列表”对话框：
4、文字的其它设置
文本换行， 按 Enter 键换行的行距较大 （在代码区生成
标签）， 按 Enter＋Shift键换行的行间距较小（在代码区生成
标签）。
文本空格，我们选择编辑/首选参数，在弹出得对话框中左侧的分类列表中选择“常规”
项，然后在右边选“允许多个连续的空格”项，我们就可以直接按“空格”键给文本添加空格了。
特殊字符，要向网页中插入特殊字符，需要在快捷工具栏选择“文本”，切换到字符插入
栏，单击文本插入栏的最后一个按钮，可以向网页中插入相应的特殊符号。
插入列表，列表分为两种，有序列表和无序列表，无序列表没有顺序，每一项前边都以
同样的符号显示，有序列表前边的每一项有序号引导。在文档编辑窗口中选中需要设置的文
本， 在属性面板中单击 ， 则选中的文本被设置成无序列表， 单击 则被设置成有序列表。
插入水平线，水平线起到分隔文本的排版作用，选择快捷工具栏的“HTML”项，单击
HTML 栏的第一个按钮 ，即可向网页中插入水平线。选中插入的这条水平线，可以在属
性面板对它的属性进行设置。
插入时间，在文档编辑窗口中，将鼠标光标移动到要插入日期的位置，单击常用插入
栏的“日期”按钮，在弹出的“插入日期”对话框中选择相应的格式即可。
Dreamweaver 8 插入图像
目前互联网上支持的图像格式主要有 GIF、JPEG 和PNG。其中使用最为广泛的是 GIF和
JPEG。
1、插入图像
在制作网页时，先构想好网页布局，在图像处理软件中将需要插入的图片进行处理，然
后存放在站点根目录下的文件夹里。
插图图像时，将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常用插入栏的
“图像”按钮。
弹出的“选择图像源文件”对话框，选择 img/，单击“确定”按钮就把图像
插入到了网页中。
注意：如果我们在插入图片的时候，没有将图片保存在站点根目录下，会弹出下图所示
的对话框，提醒我们要把图片保存在站点内部，这时单击“是”按钮，
然后选择本地站点的路径将图片保存，图像也可以被插入到网页中。
2、设置图像属性
选中图像后，在属性面板中显示出了图像的属性，如下如所示。
在属性面板的左上角，显示当前图像的缩略图，同时显示图像的大小。在缩略图右侧有
一个文本框，在其中可以输入图像标记的名称。
图像的大小是可以改变的，但是在 DW 里更改是极不好的习惯，如果我们的电脑安装
了 FW 软件，单击属性面板的“编辑”旁边的 ，即可启动 FW 对图像进行缩放等处理。当
图像的大小改变时，属性栏中“宽”和“高”的数值会以粗体显示，并在旁边出现一个弧形箭头，
单击它可以恢复图像的原始大小。
“水平边距”和“垂直边距”文本框用来设置图像左右和上下与其它页面元素的距离。
“边框”文本框时用来设置图像边框的宽度，默认的边框宽度为 0。
“替代”文本框用来设置图像的替代文本，可以输入一段文字，当图像无法显示时，将
显示这段文字。
单击属性面板中的
对齐、居右对齐。
对齐按钮，可以分别将图像设置成浏览器居左对齐、居中
在属性面板中，“对齐 ”下拉列表框时设置图像与文本的相互对齐方式， 共有 10 个选项。
通过它我们可以将文字对齐到图像的上端、下端、左边和右边等，从而可以灵活的实现文字
与图片的混排效果。
3、插入其它图像元素
在我们单击常用插入栏的“图像”按钮时，可以看到，除了第 1 项“图像”外，还有“图像
占位符”、“鼠标经过图像”、“导航条”等项目。
插入图像占位符，在我们布局页面时，如果要在网页中插入一张图片，可以先不制作
图片， 而是使用占位符来代替图片位置。 单击下拉列表中的“图像占位符”， 打开“图像占位符”
对话框。按设计需要设置图片的宽度和高度，输入呆插入图像的名称，即可。
鼠标经过图像，鼠标经过图像实际上由两个图像组成，主图像（当首次载入页时显示的
图像）和次图像（当鼠标指针移过主图像时显示的图像）。这两张图片要大小相等，如果不
相等，DW 自动调整次图片的大小跟主图像大小一致。
图片与文本一样，是网页中最常用到的内容，其变化相对较少，要想排出精致美观的
网页，下一节课的内容可是必不可少的哦，继续努力吧^_^
Dreamweaver 8 插入并编辑表格
表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据
和表单的元素有序的显示在页面上，让我们可以设计出漂亮的页面，使用表格排版的页面在
不同平台、不同分辨率的浏览器里都能保持其原有的布局，而在不同的浏览器平台有较好的
兼容性，所以表格是网页中最常用的排版方式之一。
一、插入并编辑表格
1、插入表格
在文档窗口中，将光标放在需要创建表格的位置，单击“常用”快捷栏中的表格按钮弹出
的“表格”对话框，指定表格的属性后，在文档窗口中插入设置的表格。
“行数”文本框用来设置表格的行数。
“列数”文本框用来设置表格的列数。
“表格宽度”文本框用来设置表格的宽度，可以填入数值，紧随其后的下拉列表框用来设
置宽度的单位，有两个选项——百分比和像素。当宽度的单位选择百分比时，表格的宽度会
随浏览器窗口的大小而改变。
“单元格边距”文本框用来设置单元格的内部空白的大小。
“单元格间距”文本框用来设置单元格与单元格之间的距离。
“边框粗细”用来设置表格的边框的宽度。
“页眉”定义页眉样式，可以在四种样式中选择一种。
“标题” 定义表格的标题。
“对其标题”定义表格标题的对齐方式。
“摘要” 可以在这里对表格进行注释。
2、选择单元格对象
对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。
选择整个表格的方法是把鼠标放在表格边框的任意处，当出现 这样的标志时单击即
可选中整个表格，或在表格内任意处单击，然后在状态栏选中
| 标签。 要选中连续的单元格， 按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的 方向拖动。要选中不连续的几个单元格，可以按住 Ctrl 键，单击要选择的所有单元格即可。 要选择某一行或某一列，将光标移动到行左侧或列上方，鼠标指针变为向右或向下的箭 头图标时，单击即可。 3、设置表格属性 选中一个表格后，可以通过属性面板更改表格属性。 “填充”文本框用来设置单元格边距，“间距”文本框用来设置单元格间距。 “对齐”下拉列表框用来设置表格的对齐方式，默认的对齐方式一般为左对齐。 “边框”文本框用来设置表格边框的宽度。 “背景颜色”文本框用来设置表格的背景颜色。 “边框颜色”用来设置表格边框的颜色。 在“背景图像”文本框填入表格背景图像的路径，可以给表格添加背景图像。也可以如 下图所示给文本框加上链接路径。还可以单击文本框后的“浏览”按钮，查找图像文件。在“选 择图像源”对话框中定位并选择要设置为背景的图片，单击“确认”按钮即可。 4、单元格属性 把光标移动到某个单元格内，可以利用单元格属性面板对这个单元格的属性进行设置。 “水平”文本框用来设置单元格内元素的水平排版方式，是居左、居右或是居中。 “垂直”文本框用来设置单元格内的垂直排版方式， 是顶端对齐、 底端对齐或是居中对齐。 “高”、“宽”文本框用来设置单元格的宽度和高度。 “不换行”复选框可以防止单元格中较长的文本自动换行。 “标题”复选框使选择的单元格成为标题单元格，单元格内的文字自动以标题格式显示出 来。 “背景”文本框用来设置表格的背景图像。 “背景颜色”文本框用来设置表格的背景颜色。 “边框”文本框用来色设置表格边框的颜色。 5、表格的行和列 选中要插入行或列的单元格，单击鼠标右键，在弹出菜单中选择“插入行”或“插入列”或 “插入行或列”命令。 如果选择了“插入行”命令，在选择行的上方就插入了一个空白行，如果选择了“插入列” 命令，就在选择列的左侧插入了一列空白列。 如果选择了“插入行或列”命令，会弹出“插入行或列”对话框，可以设置插入行还是列、 插入的数量，以及使在当前选择的单元格的上方或下方、左侧或是右侧插入行或列。 要删除行或列，选择要删除的行或列，单击鼠标右键，在弹出菜单中选择“删除行”或“删 除列”命令即可。 6、拆分与合并单元格 拆分单元格时，将光标放在待拆分的单元格内，单击属性面板上的“拆分”按钮，在弹出 对话框中，按需要设置即可。 合并单元格时，选中要合并的单元格，单击属性面板中的“合并”按钮即可。 Dreamweaver 8 嵌套表格 表格之中还有表格即嵌套表格。 网页的排版有时会很复杂， 在外部需要一个表格来控制总体布局，如果内部排版的细节 也通过总表格来实现，容易引起行高列宽等的冲突，给表格的制作带来困难。其次，浏览器 在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格 非常复杂，浏览者要等待很长时间才能看到网页内容。 引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入 到总表格的相应位置中，各司其职，互不冲突。 另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可 以得到漂亮的边框效果，制作出精美的音画贴图网页。 创建嵌套表格的操作方法，先插入总表格，然后将光标置于要插入嵌套表格的地方，继 续插入表格即可。 1、将光标放置在文档窗口要插入表格的位置，单击常用插入栏“表格”按钮，插入一个 1 行 1 列的表格一，宽度 500 像素，高度 100％，边框为 0，单元格间距为 0，单元格边距为 12 像素。背景图像选择 beij/。 2、将光标放置在表格一内，插入表格二，1 行1 列，宽度 100％，高度 100％，边框 为 0，单元格间距为 0，单元格边距为 12 像素。背景图像选择beij/。 3、将光标放置在表格二内，插入表格二，1 行1 列，宽度 100％，高度 100％，单元 格间距和单元格边距都为 8 像素，边框为 10，边框颜色为#FEE4ED。背景图像选择 beij/。 4、 将光标放置在表格三内， 选择单元格的背景图像为 beij/。 添加文字“恭贺新禧”， 字号 68px，字体为隶书，颜色为#A51008。 三、表格的格式化 做好的表格可以使用 DW 提供的预设外观，可以提高制作效率，保持表格外观的同一 性，同时样式提供的色彩搭配也比较美观。 插入一个 5 行 6 列的表格，表格的宽为 500 像素，高为 300 像素，边框、单元格间距 和边距全为 0 。 选择表格，居中对齐表格后，执行命令/格式化表格，弹出“格式化表格”对话框，我们选 择 AltRows red 格式，单击“确定”表格的样式就设定好了。 m 这里，还可以自己设定相应的参数值。 Dreamweaver 8 插入Flash动画 通过前面三课的学习，相信你已经能制作出一个简单的网页了，很有成就感吧^_^ 不过，一个优秀的网站应该不仅仅是由文字和图片组成的，而是动态的、多媒体。为了 增强网页的表现力，丰富文档的显示效果，我们可以向其 Flash 动画、Java 小程序、音频 播放插件等多媒体内容。 一、插入 Flash 动画 1、插入 Flash 为了合理的安排这一课的页面元素，在插入 Flash 动画之前，让我们先来复习一下表格 布局吧^_^ 打开 ，设置页面属性，在弹出的“页面属性”对话框中，“外观”项设置字体为“宋 体”，字号为 16px，文本颜色为#F282A8，背景图像为 img/，上边距为 50px、下、 左、右的边距都为 0。 “链接”项选择始终无下划线，链接颜色为#F282A8，已访问链接为 #F5E458。 现在我们开始布局～^_^～ （1）插入一个 1 行 1 列的表格（表格 1），表格的宽度为 726px，边框粗细为 0，单 元格边距为 0、单元格间距为 1，背景颜色为#892321，将表格居中对齐。 （2） 插入一个 3 行 2 列的表格（表格 2），表格的宽度为 100％，边框粗细为 0，单 元格边距和单元格间距都为 0，背景颜色#6DCFF6。设置第一行左边单元格的宽为 173px， 高为 137px，设置第二行的高为 238px，将第三行的两个单元格合并，高度为 50px。在第 一行左侧单元格插入图片 img/,在右侧单元格插入图片 img/。 在第三行将光标 水平居中，输入文字“版权所有©闪客启航” （3）在表格 2 第二行左侧单元格插入一个 6 行一列的表格（表格 3），表格宽度为 95％， 边框和单元格边距为 0，单元格间距为 5，将表格居中对齐。第一行高度为 15，其余各行高 度都为 40。 (4) 在表格 2 右侧单元格插入一个 1 行 2 列的表格（表格 4），表格宽度为 550px。 边框、单元格边距和间距都为 0。 好啦～我们完成了页面的布局，开始插入页面元素。 将光标放置在表格 4 右侧单元格中，单击常用快捷栏中的媒体按钮，然后在弹出的列 表中选择 Flash。 弹出“选择文件”对话框，选择 swf 文件夹中的 文件。单击“确定”按钮后，插 入的 Flash 动画并不会在文档窗口中显示内容，而是以一个带有字母 F 的灰色框来表示。 在文档窗口单击这个 Flash 文件，就可以在属性面板中设置它的属性了。 勾选“循环”复选框时影片将连续播放，否则影片在播放一次后自动停止。 通过勾选“自动播放”复选框后，可以设定 Flash文件是否在页面加载时就播放。 在“品质”下拉列表中可以选择 Flash 影片的画质，以最佳状态显示，就选择“高品质”。 “对齐”下拉列表用来设置 Flash 动画的对齐方式， 为了使页面的背景在 Flash 下能够衬托出来，我们可以使 Flash 的背景变为透明。单击 属性面板中的“参数”按钮，打开“参数”对话框，设置参数为wmode，值为 transparent。 这样在任何背景下，Flash 动画都能实现透明背景的显示。 2、插入 Flash 文本 我们将光标放置在表格 3 第二行的单元格中，用 Flash 文本制作导航栏目。单击常用 快捷栏的媒体按钮，在列表中选择 Flash 文本，弹出“插入 Flash 文本”对话框，字体随意， 大小 22px，颜色设置为#F5E458，转滚颜色为#54C994，文本为“图片素材”，背景颜色 #6DCFF6，选择自己需要的路径链接。同样方法我们分别在表格 3 的第 3、4、5、6 行制 作“代码素材”、“Flash 动漫”、“精美壁纸”和“音频视频”等栏目。 3、插入 Flash 按钮 我们在将光标放置于插入Flash 按钮的位置，单击常用快捷栏的媒体按钮，在列表中选 择 Flash 按钮，弹出“插入 Flash 按钮”对话框。 “样式”用来选择按钮的外观，“按钮文本”用来输入按钮上的文字，“字体”和“大小”用于设 置按钮上文字的字体和大小，字号变大，按钮并不会跟着改变。 “链接”用于输入按钮的链接，可以是外部链接，也可以是内部链接。“目标”用来设置打 开的链接窗口。 如果需要修改Flash 按钮对象，可以先选中它，然后在属性面板中单击“编辑”按钮， 会自动弹出刚才的“插入 Flash 按钮”对话框，更改它的设置就可以了。 4、插入 FlashPaper 我们还可以在网页中插入 Macromedia FlashPaper 文档。在浏览器中打开包含 FlashPaper 文档的页面时，浏览者能够浏览 FlashPaper 文档中的所有页面，而无需加载 新的 Web 页。也可以搜索、打印和缩放该文档。 在“文档”窗口中，将光标放放在页面上想要显示 FlashPaper 文档的位置，然后选择 “插入”>“媒体”>“FlashPaper”。 在“插入 FlashPaper”对话框中，浏览到一个 FlashPaper 文档并将其选定。 如果需要，通过输入宽度和高度（以像素为单位）指定 FlashPaper 对象在网页上的 尺寸。 FlashPaper 将缩放文档以适合宽度。 单击“确定”在页面中插入文档。 由于 FlashPaper 文档是 Flash 对象，因此页面上将 出现一个 Flash 占位符。 如果需要，在属性检查器中设置其他属性。 5、插入 Flash 视频 请参见玉树老师的教程（在上面的FlashPaper文档中）。 Dreamweaver 8 插入声音 声音能极好的烘托网页页面的氛围，网页中常见的声音格式有WAV、MP3、MIDI、AIF、 RA、或 Real Audio 格式。 1、添加背景音乐 在页面中可以嵌入背景音乐。这种音乐多以 MP3，MIDI 文件为主，在DW 中，添加 背景音乐有两种方法，一种是通过手写代码实现，还有一种是通过行为实现。 在 HTML 语言中，通过 骤是： 我们将 音乐文件存放在med 文件夹里。 打开 网页，我们为这个页面添加背景音乐 切换到DW 的“拆分”视图，讲光标定位到之前的位置，在光标的位置写下下面 这段代码： 按下 F12 键，在浏览器中查看效果，我们可以听见背景音乐声。 如果希望循环播放音乐，将刚才的源代码修改为以下代码即可： src="med/" loop="true"> 2、嵌入音乐 嵌入音频可以将声音直接插入页面中， 但只有浏览者在浏览网页时具有所选声音文件的 适当插件后，声音才可以播放。如果希望在页面显示浏览器的外观，可以使用这种方法。 打开 网页，将光标放置于我们想要显示播放器的位置。 单击快捷栏上的“媒体”按钮，从下拉列表中选择“插件”。 弹出“选择文件”对话框，在对话框中 音频文件。 单击确定按钮后，插入的插件在文档窗口中以下图所示图标来显示。 选中该图标，在属性面板中可以对播放器的属性进行设置： 要实现循环播放音乐的效果，单击属性面板中的“参数”按钮，然后单击“＋”按钮，在“参 数”列中输入 loop，并在“值”列中输入 true 后，单击“确定”按钮。 要实现自动播放，可以继续编辑参数，在参数对话框的“参数”列中输入 autostart，并在 值中输入 true，单击“确定”按钮。 按下 F12 键，打开浏览器预览，这个页面实现了嵌入音乐的效果，在浏览器里显示了 播放插件。 Dreamweaver 8 创建链接关系 链接是一个网站的灵魂，一个网站是由多个页面组成的，而这些页面之间依据链接确定相互 之间的导航关系。 超级链接是指站点内不同网页之间、站点与Web 之间的链接关系，它可以使站点内的 网页成为有机的整体，还能够使不同站点之间建立联系。超级链接由两部分组成：链接载体 和链接目标。 许多页面元素可以作为链接载体，如：文本、图像、图像热区、动画等。而链接目标可 以是任意网络资源，如：页面、图像、声音、程序、其他网站、Email 甚至是页面中的某个 位置 锚点。 链接的类型 如果按链接目标分类，可以将超级链接分为以下几种类型： * 内部链接：同一网站文档之间的链接。 * 外部链接：不同网站文档之间的链接。 * 锚点链接：同一网页或不同网页中指定位置的链接。 * Email链接：发送电子邮件的链接。 1、关于链接路径 绝对路径，为文件提供完全的路径，包括适用的协议，例如 http、ftp，rtsp 等。 ftp://202.136.254.1/ 相对路径，相对路径最适合网站的内部链接。如果链接到同一目录下，则只需要输入要 链接文件的名称。要链接到下一级目录中的文件，只需要输入目录名。然后输入“/“，再输入 文件名。如链接到上一级目录中的文件，则先输入”../“再输入目录名，文件名。 根路径：是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头，例如， /fy/ 就是站点根文件夹下的fy子文件夹中的一个文件（ ）的根 路径。 2、创建外部链接 不论是文字还是图像，都可以创建链接到绝对地址的外部链接。创建链接的方法可以直 接输入地址也可以使用超级链接对话框。 （1）直接输入地址 打开 页面，输入并选中文字“闪客启航网页技术区”。 在属性面板中，“链接”用来设置图像或文字的超链接，“目标”用来设置打开方式。 我们在“链接”文本框直接输入外部绝对地址，在“目标”项的下拉 列表中选择_blank（在一个新的未命名的浏览器窗口中打开链接）。如下图所示。 （2）使用超级链接对话框 打开 页面，选中文字“闪客启航”。 单击常用快捷栏中的“超级链接”按钮。 弹出“超级链接”对话框，我们进行以下各项的设置： “文本”文本框用来设置超级链接显示的文本。 “链接”用来设置超链接连接到的路径。 “目标”下拉列表框用来设置超链接的打开方式，有四个选项。 “标题”文本框用来设置超链接的标题。 设置好后，单击“确定”按钮，向网页中插入超链接。 3、创建内部链接 在文档窗口选中文字，单击属性面板“链接”后的 按钮，弹出“选择文件”对话框，选择 要链接到的网页文件，即可链接到这个网页。 我们也可以拖动“链接”后的 按钮到站点面板上的相应网页文件， 则链接将指向这个网页文 件。 此外，我们还可以直接将相对地址输入到“链接”文本框里来链接一个页面。 4、创建 E－mail 链接 单击常用快捷栏中的“电子邮件链接”按钮，弹出“电子邮件链接”对话框，在对话框的文 本框那输入要链接的文本，然后在 E－mail 文本框内输入邮箱地址即可。 5、创建锚点链接 所谓锚点链接，是指在同一个页面中的不同位置的链接。 打开一个页面较长的网页，将光标放置于要插入锚点的地方，单击常用快捷栏的“命名 锚记”按钮，插入锚点。再选中需要链接锚点的文字，再属性面板中拖动链接后的 到锚点 上即可。 6、制作图像映射 打开 文件，选中 102。gif 图片，在属性面板中，有不同形状的图像热区按钮， 选择一个热区按钮单击。 然后在图像上需要创建热区的位置拖动鼠标，即可创建热区。此时，选中的部分被称着 图像热点。 选中这个图像热点，在属性面板上可以给这个图像热点设置超链接即可。 现在，请发挥你的想象力，巧妙运用各种页面元素来丰富你的网页，把它装扮的更加生 动和精彩！ Dreamweaver 8 创建CSS样式 层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时， 内容与表现形式是相互分开的。 页面内容 （HTML 代码） 位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档 的另一部分（通常为 观，从精确的布局定位到特定的字体和样式等。 术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一 文本。所定义的样式“层叠”到您的 Web 页面上的元素，并最终创建您想要的设计。 CSS 样式表的创建，可以统一定制网页文字的大小、字体、颜色、边框、链接状态等 效果。在Dreamweaver 8 中 CSS 样式的设置方式有了很大的改进，更为方便、实用、快 捷。 一、创建 CSS 样式 1、选中菜单“窗口”>“CSS 样式”。打开 CSS 样式面板。 2、单击“CSS 样式”面板右下角的“新建 CSS 规则”按钮，打开“新建 CSS 规则”对话框。 在“选择器类型”选项中，可以选择创建 CSS 样式的方法包括以下三种： 类：我们可以在文档窗口的任何区域或文本中应用类样式，如果将类样式应用于一整段 文字，那么会在相应的标签中出现 CLASS 属性，该属性值即为类样式的名称。 标签（重新定义特定标签的外观）：重新定义 HTML 标记的的默认格式。我们可以针 对某一个标签来定义层叠样式表， 也就是说定义的层叠样式表将只应用于选择的标签。 例如， 我们为 和标签定义了层叠样式表， 那么所有包含在和标签的内容将遵循定义的层叠样式表。 高级（ID、伪类选择器等）：为特定的组合标签定义层叠样式表，使用 ID 作为属性， 以保证文档具有唯一可用的值。高级样式是一种特殊类型的样式，常用的有 4 种： a:link 设定正常状态下链接文字的样式。 a:active 设定鼠标单击时链接的外观。 a:visited 设定访问过的链接的外观。 a:hover 设定鼠标放置在链接文字之上时，文字的外观。 3、为新建CSS 样式输入或选择名称、标记或选择器，其中： 对于自定义样式，其名称必须以点（.）开始，如果没有输入该点，则DW 回自动添加 上。自定义样式名可以是字母与数字的组合，但.之后必须是字母。 对于重新定义HTML 标记，可以在“标签”下拉列表中输入或选择重新定义的标记。 对于CSS 选择器样式，可以在“选择器”下拉列表中输入或选择需要的选择器。 4、在“定义在”区域选择定义的样式位置，可以是“新建样式表文件”或“仅对该文档”。单 击“确定”按钮，如果选择了“新建样式表文件”选项，回弹出“保存样式表文件为”对话框，给样 式表命名，保存后，回弹出“CSS 规则定义”对话框。如果选择了“仅对该文档”，则单击“确定” 后，直接弹出“CSS 规则定义”，在其中设置CSS 样式。 5、“CSS 规则定义”对话框中设置CSS 规则定义。主要分为类型、背景、区块、方框、 边框、列表、定位和扩展 8 项。每个选项都可以对所选标签做不同方面的定义，可以根据 需要设定。定义完毕后，单击“确定”按钮，完成创建CSS 样式。 Dreamweaver 8 使用CSS样式美化页面 在“CSS 规则对话框”中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展 项的设置，来美化我们的页面，当然啦，我们在定义某个 CSS 样式的时候，不需要对每一 个项都进行设置，需要什么效果，选择相应的项进行设置就可以了。 1、文本样式的设置 新建CSS 样式, “选择器类型”为类，名称为 “style1”定义在“仅对该文档”。保存至站点 根目录下的CSS 文件夹内，弹出“CSS 规则定义”对话框，默认显示的就是对文本进行设置 的“类型”项。 字体：可以在下拉菜单种选择相应的字体。 大小：大小就是字号，可以直接填入数字，然后选择单位。 样式：设置文字的外观，包括正常、斜体、偏斜体。 行高：这项设置在网页制作种很常用。设置行高，可以选择“正常”，让计算机自动调整 行高，也可以使用数值和单位结合的形式自行设置。需要注意的是，单位应该和文字的单位 一致，行高的数值是包括字号数值在内的。例如，文字设置为 12pt，如果要创建一倍行距， 则行高应该为 24pt。 变量：在英文种，大写字母的字号一般比较大，采用“变量”中的“小型大写字母”设置， 可以缩小大写字母。 颜色：设置文字的色彩。 2、背景样式的设置 在 HTML 中，背景只能使用单一的色彩或利用图像水平垂直方向的平铺。使用CSS 之 后，有了更加灵活的设置。 在 CSS 规则定义”对话框左侧选择“背景”项，可以在右边区域设置CSS 样式的背景格 式。 背景颜色：选择固定色作为背景。 背景图像：直接填写背景图像的路径，或单击“浏览”按钮找到背景图像的位置。 重复：在使用图像作为背景的时，可以使用此项设置背景图像的重复方式，包括“不重 复”、“重复”、“横向重复”、和“纵向重复“。 附件：选择图像做背景的时候，可以设置图像是否跟随网页一同滚动。 水平位置：设置水平方向的位置，可以“左对齐“右对齐”、“居中”。还可以设置数值与单 位结合表示位置的方式，比较常用的是像素单位。 垂直位置：可以选择“顶部”、“底部”、“居中”。还可以设置数值和单位结合表示位置的方 式。 3、区块样式设置 在 CSS 规则定义”对话框左侧选择“区块”项，可以在右边区域设置CSS 样式的区块格 式。 单词间距“英文单词之间的距离，一般选择默认设置。 字母间距：设置英文字母间距，使用正值为增加字母间距，使用负值为减小字母间距。 垂直对齐：设置对象的垂直对齐方式。 文本对齐：设置文本的水平对齐方式。 文字缩进：这是最重要的项目。中文文字的首行缩进就是由它来实现的。首先填入具体 的数值，然后选择单位。文字的缩进和字号要保持统一。如字号为 12px，像创建两个中文 自的缩进效果，文字缩进就应该为 18px。 空格：对源代码文字空格的控制。选择“正常”，忽略源代码文字之间的所有空格。选择 “保留”，将保留源代码中所有的空格形式，包括由空格键、Tab 键、Enter 键创建的空格。 显示：制定是否以及如何显示元素。选择“无”则关闭它被制定给的元素的显示。在实际 控制中很少使用。 4、方框样式的设置 在前面我们设置过图像的大小、设置图像水平和垂直方向上的空白区域、设置图像是否 有文字环绕效果等。方框设置进一步完善、丰富了这些设置。 在 CSS 规则定义”对话框左侧选择“方框”项，可以在右边区域设置CSS 样式的方框格 式。 宽：通过数值和单位设置对象的宽度。 高：通过设置和单位设置对象的高度。 浮动：实际就是文字等对象的环绕效果。选择“右对齐”、对象居右。文字等内容从另外 一侧环绕对象。选择“左对齐”。对象居左，文字等内容从另一侧环绕。“无”取消环绕效果。 清除：规定对象的一侧不许有层。可以通过选择“左对齐”、“右对齐”，选择不允许出现 层的一侧。如果在清除层的一侧有层，对象将自动移到层的下面。“两者”是指左右都不允许 出现层。“无”是不限制层的出现。 “填充”和“边界”： 如果对象设置了边框，“ 填充”是指边框和其中内容之间的空白区域；“ 边 界”是指边框外侧的空白区域。 5、边框样式设置 边框样式设置可以给对象添加边框，设置边框的颜色、粗细、样式。 在 CSS 规则定义”对话框左侧选择“边框”项，可以在右边区域设置CSS 样式的边框格 式。 样式设置边框的样式，如果选中“全部相同”复选框，则只需要设置“上”样式，其它方向 的样式与“上”相同。 宽度：设置 4 个方向边框的宽度。可以选择相对值：细、中、粗。也可以设置边框的 宽度值和单位。 颜色：设置边框对应的颜色，如果选中“全部相同”复选框，则其他方向的设置都与“上” 相同。 6、列表样式设置 CSS 中有关列表的设置丰富了列表的外观。在CSS 规则定义”对话框左侧选择“列表” 项，可以在右边区域设置 CSS 样式的列表格式。 类型：设置引导列表项目的符号类型。可以选择圆点、圆圈、方块、数字、小写罗马数 字、大写罗马数字、小写字母、大写字母、无列表符号等。 项目符号图像：可以选择图像作为项目的引导符号，单击右侧的“浏览”按钮，找到图像 文件即可。选择 ul 标签可以对整个列表应用设置，选中 li 标签可对单独的项目应用。 位置：决定列表项目缩进的程度。选择“外”，列表贴近左侧边框，选择“内”，列表缩进。 这项设置效果不明显。 7、定位样式设置 “定位”项实际上是对层的设置，但是因为 DW 提供了可视化的层制作功能，所以此项设 置在实际操作中几乎不会使用。 8、扩展样式的设置 CSS 样式还可以实现一些扩展功能，这些功能集中在扩展面板上。这个面板主要包括 3 种效果：分页、光标和过滤器。在 CSS 规则定义”对话框左侧选择“扩展”项，可以在右边 区域设置CSS 样式的扩展格式。 分页：通过样式来为网页添加分页符号。允许用户指定在某元素前或后进行分页。分页 的概念是打印网页种的内容时在某指定的位置停止， 然后将接下来的内容继续打印在下一页 纸上。 光标：通过样式改变鼠标形状，鼠标放置于被此项设置修饰的区域上的时，形状会发生 改变。具体的形状包括：Hand（手）、crosshair（交叉十字）、text（文本选择符号）、 wait（Windows 的沙漏形状）、default（默认的鼠标形状）、help（带问号的鼠标）、eresize （向东的箭头）、neresize（指向东北方的箭头）、nresize（向北的箭头）、nwresize （指向西北的箭头）、wresize（向西的箭头）、swresize（向西南的箭头）、sresize（向 南的箭头）、seresize（向东南的箭头）、auto（正常鼠标）。） 过滤器：使用 CSS 语言实现过滤器（滤镜）效果。单击“过滤器”下拉列表框旁的按钮， 可以看见有多种滤镜效果可供选择。 滤镜效果 描述 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、新建 的文件插入一个 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、可编辑可选区域 是可选区域的一种，可以设置显示或隐藏所选区域，并且可以编辑该区域中的内容。 Dreamweaver 8 使用库 所谓库项目，实际上就是文档内容的任意组合，可以将文档中的任意内容存储为库项目，使 它在其它地方被重复使用。 1、创建库 在文档窗口中选择需要保存为库项目的内容。 单击资源面板“库”分类中右下角的“新建库项目”按钮。 一个新的项目出现在资源面板“库”分类的列表中，预览框中显示预览的效果，还可以 给该项目键入新名称。这样，一个库项目就创建好了。 2、插入库 将光标方在网页中需要插入库文件的位置，在资源面板“库”分类中选择需要插入的库 项目，直接拖动到光标所在位置即可。 3、更改库 如果修改了库文件，选择“文件/保存”命令，弹出“更新库项目”对话框，询问是否更新 网站中使用了该库文件的网页。单击“更新”按钮，将更新网站中使用了该库文件的网页。 五、创建基于模板的页面 1、打开素材 文件，选择菜单栏的文件>另存为模板命令。 2、在弹出的另存为模板对话框中，在“站点”文本框选择“xmweb”，在“另存为”给模板 命名为mo1，点击确定。 3、 弹出是否更改链接的提示， 选择“是”。 此时， 在站点内自动生成一个名为“Templates” 的文件夹，名称为 的模板文件被保存在该文件夹中。 4、鼠标在网页表格的最下一行空白处单击一下，选中状态栏的 |
发表评论