第 9 章用 dreamweaver 制作网页

佛山科学技术学院

第 9 章用 Dreamweaver 制作网页

Internet 及多媒体应用

Internet及多媒体应用

主要内容

基本操作1

编辑网页2

使用表格3

使用框架4

CSS 样式5

网页标准化设计6


主要内容

添加网页特效7

使用表单8

网站发布与测试9


9.1 基本操作


9.1.1 管理站点创建本地站点

创建站点文件夹• 按照网站规划可事先创建站点根目录，再根据网站复

杂程度创建若干子文件夹，至少要有 images 文件夹，并将准备好的图像文件复制到该文件夹中。

启动 Dreamweaver CS5 ，定义本地站点• 若是首次启动 Dreamweaver ，则在“欢迎屏幕”的

“新建”区域中单击“ Dreamweaver 站点”，弹出“站点设置对象”对话框，在“站点名称”框中填写站点名称，如：“中国元素”，在“本地站点文件夹”框中直接填写或单击右侧“浏览文件夹”按钮选择文件夹为事先创建的站点根目录路径，如：“ D:\chineseelements” ，最后，单击“保存”按钮。


9.1.1 管理站点

创建本地站点启动 Dreamweaver CS5 ，定义本地站点

• 若 Dreamweaver 已经启动，则选择菜单“站点”→“新建站点”命令，在弹出的“站点设置对象”对话框中，进行上述操作。

• 如果单击“站点设置对象”对话框左侧“高级设置”的下拉列表按钮，在展开的设置选项中选择“本地信息”，在“默认图像文件夹”框中设置默认图像文件夹的路径，则当用户插入站外图像文件时，系统将以原名自动复制站外图像文件到该默认图像文件夹中，而不再提示“是否复制图像文件到站点文件夹中” 。


9.1.1 管理站点管理站点

编辑站点 • 选择菜单“站点”→“管理站点”命令，会打开

“管理站点”对话框，选择要编辑的站点，单击“编辑”按钮，即可重新打开“站点设置对象”对话框，对站点的本地信息、远程服务器、测试服务器信息等重新设置。

打开站点• 选择菜单“站点”→“管理站点”命令，在打开的

“管理站点”对话框中，选择要打开的站点，再单击“完成”按钮即可

• 启动 Dreamweaver 后，默认打开的站点是最近一次打开的站点。


9.1.1 管理站点管理站点

删除站点• 在“管理站点”对话框中选择要删除的站点，单击

“删除”按钮，在打开的提示框中单击“是”按钮。• 删除站点操作只是删除站点信息，恢复站点文件夹

为普通文件夹，并未真正删除该文件夹。可以通过资源管理器删除它，或再次设置为站点文件夹。

管理本地文件和文件夹• 在“文件”面板（选择菜单“窗口”→“文件”命

令可打开该面板）中，用户可以对各级文件和文件夹进行管理，如进行新建、选择、打开、复制、移动、删除、重命名等操作。具体操作方法类似于Windows 资源管理器的操作，建议多采用单击右键快捷菜单命令的方式进行操作。


9.1.2 新建网页文档基于空白网页创建网页文档

• 选择菜单“文件”→“新建”命令，在弹出的“新建文档”对话框中选择“空白页”、页面类型为“ HTML” 、布局为“无”，单击“创建”按钮，即可创建一个空白网页，如图所示。


9.1.2 新建网页文档基于网页布局模板快速建立网页

• 选择菜单“文件”→“新建”命令，在弹出的“新建文档”对话框中选择“空白页”、页面类型为“ HTML” 、布局为某种自己所需要的布局，如“ 3 列固定，标题和脚注”，单击“创建”按钮，即可按照该布局模板创建一个网页。用户可根据需要自行修改网页中的内容。

• Dreamweaver 提供 16 种布局模板，布局中选用“列固定”方式时，指定页面宽度为固定像素值，不随浏览器窗口大小和屏幕分辨率高低而变化。而“列液态”方式则采用浏览器窗口大小的百分比来指定页面宽度。


9.1.3 网页编辑与浏览方式 “ 设计”视图

主要用于网页的可视化设计和编辑。“代码”视图

用于查看和修改网页的 HTML 源代码。“拆分”视图

将文档窗口拆分为“代码”视图和“设计”视图两个窗格，用户可以同时使用“代码”视图和“设计”视图。

选择菜单“查看”→“垂直拆分”命令，可将“拆分”视图分为左右或上下两个窗格。


9.1.3 网页编辑与浏览方式实时视图

在这种视图方式下，不能编辑网页，主要用于预览网页在浏览器中的显示效果，但不是所有的效果都能预览。

实时代码用于查看网页的 HTML 源代码，但不能修改代码。

检查在这种模式中，当鼠标在某一页面元素上悬停时，

将以可视化方式详细显示该页面元素的 CSS属性，包括填充、边框和边距等。


9.1.4 页面属性设置页面属性，主要是一些影响整个网页的参数。选

择菜单“修改”→“页面属性”命令，可弹出“页面属性”对话框。在该对话框中包括外观、链接、标题、标题 /编码和跟踪图像等属性类型设置项，可以设置 Web 页面的若干基本布局选项，如网页边距、字体、背景颜色、背景图像、网页标题、超链接样式等。

外观• 外观属性包括“外观（ CSS ）”和“外观

（ HTML ）”两种类别。选择“外观（ CSS ）”选项时，所设置的页面属性，会在文档的源代码中自动生成相应的 CSS 样式规则；而选择“外观（ HTML ）”选项时，所设置的页面属性会添加到 HTML 标签中。


9.1.4 页面属性设置链接

可进行整个页面超链接样式的设置，包括字体、大小、颜色、下画线等选项。

标题可对页面各级标题的字体、大小、颜色、样式进行设置。

标题 /编码可以输入网页的标题，指定页面的文档类型（ DTD ）、编码、 Unicode 规范等，并显示站点文件夹等信息。

跟踪图像 “跟踪图像”是在复制设计时作为参考的图像，该图像只

供参考，当文档在浏览器中显示时并不出现。


9.2 编辑网页


9.2.1 添加文本添加普通文本

直接输入文本• Dreamweaver 会自动换行，按 Shift+Enter组合键强

行换行。• 按 Enter 键来分段。

粘贴文本• 在其他文档中复制或剪切所需文本，再选择菜单“编

辑”→“粘贴”或“编辑”→“选择性粘贴”命令，粘贴文本，并删除不必要的换行符和回车符。

• “ 选择性粘贴”时，一般不带格式，仅粘贴文本，以便用户使用符合标准化设计的 CSS 样式进行格式设置。


9.2.1 添加文本添加普通文本

导入文本• 用户可以向页面导入 Word 、 Excel 等其他文档。

如：选择菜单“文件”→“导入”→“ Excel 文档”命令，可导入 Excel 文档。

添加空格• 按“ Shift+Ctrl+ 空格”组合键一次可输入一个空格，

重复该组合键可输入多个空格。• 在中文输入方式下，输入全角空格。• 设置首选参数：选择菜单“编辑”→“首选参数”

命令，弹出“首选参数”对话框，在该对话框的“常规”类别中选中“允许多个连续的空格”。


9.2.1 添加文本添加特殊字符

• 在“插入”面板的“文本”类别中，单击“字符”按钮下拉箭头，并从子菜单中选择相应的特殊字符。

• 在菜单“插入”→“ HTML”→“ 特殊字符”子菜单中选择字符名称。

• 若上述子菜单中没有所需的字符，可单击“其他字符”，弹出“插入其他字符”对话框，从中选择所需字符。

插入水平线• 用菜单“插入”→“ HTML”→“水平线”命令或在

“插入”面板的“常用”类别中，单击“水平线”按钮，即可插入水平线。


9.2.1 添加文本插入水平线

• 单击水平线，切换到水平线属性检查器（即“属性”面板），可以进一步设置水平线的各项属性，宽度即水平线的长度，高度即水平线的粗细。

• 在水平线 HTML代码的 hr 标签中添加 color属性，或设置 CSS 规则，更全面地设置水平线的样式。

创建列表新建列表

• 在文档中定位插入点，再在“插入”面板的“文本”类别中，单击“项目列表”、“编号列表”或“定义列表”按钮，即可在插入点处输入列表项目文本，每输完一项，都要按 Enter 键，若要完成整个列表，则按两次 Enter 键。


9.2.1 添加文本创建列表

使用现有文本创建列表• 编辑现有文本，要作为一个列表项的文本均应设置

为一个段落。选择要组成列表的一系列段落。• 在 HTML属性面板中，单击“项目列表”或“编号

列表”按钮。创建嵌套列表

• 定位插入点或选择要嵌套的列表项目。• 按 Tab 键或单击 HTML 属性面板中“文本缩进”

按钮。• 按 Shift+Tab组合键或单击 HTML 属性面板中“文

本凸出”按钮。


9.2.1 添加文本创建列表

列表属性设置• 选择“格式”→“列表”→“属性”，打开“列表属性”对话框，可在该对话框中设置整个列表或列表的个别项目的类别、样式、起始计数等。

文本格式设置使用 HTML 设置文本格式

• 选择要设置格式的文本，在 HTML属性面板中或选择“格式”菜单中的相应命令，来设置段落格式、对齐方式、缩进、凸出和粗体、斜体等样式。

• 有些格式设置，如：字体和文本颜色，需要用户创建 CSS 规则，才能设置文本格式，这部分将在后续章节中介绍。


9.2.1 添加文本文本格式设置

使用 CSS 内联样式设置文本格式• 选择要设置格式的文本，并切换到 CSS属性面板中，

首先在“目标规则”框中选择“新内联样式”选项，再设置其他 CSS属性，如字体、大小、颜色、对齐方式和加粗、斜体等。 Dreamweaver 会自动生成CSS 样式属性，并添加到 HTML代码行中。

选择菜单“格式”→“字体”→“编辑字体列表”命令，在弹出的“编辑字体列表”对话框中，添加新字体或新字体组合。


9.2.2 插入图像插入图像

• 定位插入点，然后在“插入”面板的“常用”类别中，单击“图像”按钮，或选择菜单“插入”→“图像”命令，在弹出的“选择图像源文件”对话框中，选择要插入的图像文件，最后，单击“确定”按钮，在弹出的“图像标签辅助功能属性”对话框中的“替换文本”框里，输入提示文本（这是一个良好习惯）。

设置图像属性• 单击图像选中它，在图像属性面板中设置图像显示的宽、

高及对齐方式等属性。• 注意：在此设置图像的宽、高尺寸只是其显示的大小，

不会改变图像本身的原始尺寸。


9.2.2 插入图像图像处理

• 还可以在图像属性面板中单击相应的编辑按钮，对图像进行编辑处理，如，单击“编辑图像设置”按钮，在弹出的“图像预览”对话框中，可对图像的原始大小，格式、品质等进行更改。

插入图像占位符• 如果需要插入的图像尚未准备好，可选择菜单“插

入”→“图像对象”→“图像占位符”命令，插入图像占位符，当准备好图像后，双击图像占位符，再选择所需图像插入到网页中。


9.2.3 使用超级链接创建超链接

• 选定要添加的文本或图像（即超链接的源端点）• 切换到 “ Html ” 或“图像”属性面板，在“链接”

框中设置超链接目标（即目标端点），超链接目标端点可以是以下几种情形：

• 一个完整的 URL （即网址），实现站点间链接• 文档的路径和文件名，实现站内链接，可直接拖动

“指向文件”图标，指向目标文件。• 命名锚记，如“＃ top” ，实现页面内部链接• 电子邮件地址，创建电子邮件链接• 一个“＃”号或“ javasccript:;” ，创建空链接• 脚本代码，如 JavaScript代码，实现脚本链接


9.2.3 使用超级链接创建图像地图

• 可以在同一张图片上创建多个热点区域，分别链接到不同的目标端点，来实现在一张图片上创建多个超链接。

• 具体操作是：选中图片，选用图像属性检查器上的矩形、圆形或多边形热点工具，在图片上创建相应的热点区域；利用指针热点工具选择、移动、调整区域范围，再对每一个热点区域创建链接。

设置超链接目标和标题• 在“标题”框中输入文本，以便浏览网页时，当鼠

标指向超链接即显示该提示文本。• 在“目标”框中选择目标网页的打开方式： _blank

（新窗口）、 _parent （上一级窗口）、 _self （本窗口）、 _top （顶层窗口）


9.2.3 使用超级链接更改或取消超链接

• 更改超链接：在“链接”框中或择菜单“修改”→“更改链接”命令，在弹出的“选择文件”对话框中更改目标端点的具体内容即可。

• 取消超链接：选中要取消的链接，选择菜单“修改”→“移除链接”命令，或删除 “链接”框中的内容即可。


9.2.4 添加多媒体元素添加声音

插入声音链接• 将链接的目标端点设置为声音文件，浏览时，单击超链接，即可打开用户端默认播放器并播放声音文件。

插入插件添加声音• 选择菜单“插入”→“媒体”→“插件”命令，在弹

出的“选择文件”对话框中找到相应文件并选中，单击“确定”按钮，但要注意，只有访问者计算机安装了所选声音文件的适当插件，声音才可以正常播放。

插入 bgsound 标签添加背景音乐• 一般紧跟在“ body” 标签之后，通过选择菜单“插

入”→“标签”命令，插入 bgsound 标签，来插入网页背景音乐。


9.2.4 添加多媒体元素添加 Flash 对象

插入普通 Flash 动画• 定位插入点，选择菜单“插入”→“媒体”→“ SWF”

命令，在弹出的“选择 SWF” 对话框中找到相应文件并选中，单击“确定”按钮，在插入点处即出现 SWF 文件占位符。

• 选中插入的 Flash 动画占位符，切换到“属性”面板，对 Flash 动画的显示大小、名称、播放参数等进行设置，当“ Wmode” 参数设置为“透明”时，动画将透明显示，没有背景。

插入 FLV视频• 定位插入点，选择菜单命令 “插入”→“媒

体”→“ FLV” ，在弹出的“插入 FLV” 对话框中，设置视频类型（一般为“累进式下载视频” ）、 FLV 文件的路径和文件名或完整的 URL 、外观、大小等，最后，按“确定” 。


9.2.4 添加多媒体元素添加其他多媒体对象

• 在 Dreamweaver 网页文档中，还可以插入 Shockwave影片、 Java Applet 、 ActiveX控件，以及多种音、视频媒体对象。

• 在“插入”面板的“常用”类别中，单击“媒体”下拉箭头，选择下拉列表中相应的选项，并在弹出的“选择文件”对话框中找到需要的文件，单击“确定”按钮。

• 也可以通过插入插件方式插入多媒体对象。• 注意：为了保证多媒体对象能正常播放，用户计算机应安装相应的播放器或插件，或具备相应的运行环境，如运行 Java虚拟机。

在网页中添加上述部分多媒体元素后， Dreamweaver 会在网站文件夹下自动生成如 Scripts 文件夹、 .swf 、 .js 、 .gif 等文件，不能删除，上传网站时一并传送。


9.3 使用表格


9.3.1 表格结构网页中的表格结构

• 一般意义上的表格是由水平表格线（横线）和竖直表格线（竖线）交织而成的，相邻两条横线构成表格的一行，相邻两条竖线构成表格的一列，行和列交叉处的小方格称为单元格。

• 不同于一般表格，网页中的表格在结构上是由一个大方框（表格的边框）包含若干个排成一行行（表格行）、一列列（表格列）的小方格（单元格）构成的，每一个单元格都有自己独立的四条边框，不相交叉，各单元格上、下、左、右之间都有间距。


9.3.2 创建表格

创建表格• 在“插入”面板的“常用”或“布局”类别中，单

击“表格”按钮，在弹出的“表格”对话框中，根据需要设置各项属性，然后单击“确定”按钮，即可在插入点处创建一个表格。

• 设置各项属性值时，一般以像素为单位。• 作为组织表格式内容的表格应该设置有边框、标题

行、列等。• 用于布局的表格，要求浏览器显示表格时不显示表

格线、边距和间距，则应将“边框粗细”、“单元格边距”和“单元格间距”均设置为 0 ，也不需要有标题。


9.3.3 编辑表格

选择表格元素• 一般操作方法：拖动鼠标。• 移动鼠标指向表格的任意位置行或列的边框，当鼠标

指针变成双向箭头时，单击鼠标即可选择整个表格。 • 单击表格的某个单元格，然后在“文档”窗口左下角

的标签选择器中单击 <td> 、 <tr> 或 <table> 标签，可选定该单元格、单元格所在行或整个表格。

修改表格行列数• 选中表格，然后在表格属性检查器中修改所需的行列数即可。


9.3.3 编辑表格调整表格、行或列大小

• 拖动相应边框即可。插入、删除表格、行或列

• 将光标定位到相应的单元格，在“插入”面板的“布局”类别中，单击“在上面插入行”或“在下面插入行”按钮，即可在相应位置插入一行。如果单击“在左边插入列”或“在右边插入列”按钮，则可插入一列。

• 如果要添加多行或多列，先单击一个单元格，确定插入位置。选择菜单“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在该对话框中设置行数或列数，并指定新行或新列的插入位置后，单击“确定”按钮。


9.3.3 编辑表格拆分、合并单元格

• 选择要拆分的单元格，单击单元格属性检查器中的“拆分单元格”按钮，在弹出的“拆分单元格”对话框中设置所需行数或列数，单击“确定”按钮即可完成拆分单元格操作。

• 选择需要合并的单元格区块，单击单元格属性检查器中的“合并单元格”按钮，即可完成合并单元格操作。

编辑单元格内容• 基本方法也是先选择编辑对象，再根据操作要求，选

用“删除”、“剪切”、“复制”、“粘贴”或“选择性粘贴”等命令进行具体的编辑操作。


9.3.4 设置表格属性设置表格属性

• 选择表格，“属性”面板将切换为表格的属性检查器，在这里设置表格的名称、宽度、对齐方式、边框粗细、填充、间距等。

设置单元格属性• 选择表格的单元格、行、列或单元格区块，属性

面板将切换为单元格的属性检查器，在这里对所选择的表格对象进行各项属性的设置，如 ID号、文本格式、宽度、高度、水平或垂直对齐方式、背景颜色等。


9.3.5 制作细线表格

• 插入一个表格，并设置边框为 0 像素、单元格间距为 1 像素。

• 选定表格，设置“背景颜色”为将要创建的细线表格的表格线颜色，如黑色，单击“确定”按钮完成设置。

• 选择所有单元格，在单元格属性检查器中将它们的背景色设置为需要的颜色，如白色。

• 保存网页文档并预览，即可看到一个细线表格。


9.3.6 利用表格布局页面• 虽然Web 标准化设计不建议用表格来布局整个页面，但

是，页面中的一些局部内容对象，如超链接序列、图片序列、文本列表及一些表格式数据等，还是可以使用表格来布局的，另外，仍然有部分用户还习惯于使用表格来布局整个页面。

• 创建用于布局的表格时，要根据网页设计要求来设置表格的属性，如表格宽度、边框、边距和间距等。

• 在页面中布局各个相互独立的内容对象时，不要简单地只用一个表格的不同单元格来布局。必要时要用不同的嵌套表格来布局不同的内容对象，这样，可以相对独立地设置其格式样式，避免互相干扰。


9.4 使用框架


9.4.1 框架和框架集框架结构

• 框架（ frame ）是浏览器窗口中的一个区域，它可以独立显示一个 HTML 网页文档。

• 框架集包含一组属于同一个浏览器窗口的框架。• 框架集对应一个 HTML 文档，它定义一组框架的布

局和属性，包括框架的数目、框架的大小和位置以及最初在每个框架中显示的页面的 URL 。

• 框架结构提供了将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML 网页文档的方法。使用框架的最常见情况就是：一个框架显示包含导航控件的文档，而另一个框架显示包含内容的文档。


9.4.2 创建框架页面创建框架

• Dreamweaver CS5 提供了 15 种预定义的框架集，以便用户快速地创建框架页面。

• 选择菜单“文件”→“新建”命令，在打开的“新建文档” 对话框中，选择“示例中的页”类别，在“示例文件夹”列中选择“框架页”文件夹，再从“示例页”列表中选择一个框架集，最后单击“创建”按钮。

保存框架• 选择菜单“文件”→“框架集另存”命令，弹出“另存

为”对话框，输入文件名，单击“保存”按钮，即可将框架集保存为指定文件名的网页文档。

• 将光标依次定位于各个框架中，选择菜单“文件”→“保存框架”命令，在弹出的“另存为”对话框中输入相应的文件名后，单击“保存”按钮，分别保存三个框架的初始网页文档。


9.4.3 编辑框架页面拆分、删除框架及调整框架大小

调整框架大小• 拖动框架边框或在框架集属性面板中精确设置值

删除框架• 将框架边框拖离页面或拖到父框架的边框上，就可以

删除该框架。• 如果要删除框架集，则必须先关闭显示它的“文档”

窗口，然后再删除框架集文件。拆分框架

• 定位插入点到要拆分的框架，选择菜单“修改”→“框架集”子菜单，从中选择拆分项。


9.4.3 编辑框架页面设置框架和框架集属性

• 在“框架”面板中（选择菜单“窗口”→“框架”命令，可打开或关闭该面板）单击相应的框架，可选中该框架，属性面板为该框架的属性面板。若单击环绕框架集的边框，则选中框架集，属性面板将切换为框架集的属性面板。

• 在框架集的属性面板中，可设置边框是否要显示，边框宽度、颜色，以及框架结构中各框架的尺寸等。

• 在框架的属性面板中，可设置该框架的名称、边框是否要显示、边框颜色、边界、是否显示滚动条，在“源文件”框中输入该框架初始网页文档的路径和文件名，勾选“不能调整大小”。


9.4.3 编辑框架页面

编辑框架中的网页文档• 当用户创建一个框架集以后，可以为每个框架

新建网页文档，也可以为框架指定已经制作好的网页文档。然后，用户可独立打开各个框架中的网页文档进行编辑，也可直接在框架中一起编辑网页文档。

• 在创建超链接时，要注意设置链接打开时的目标框架，可在属性面板的“目标”栏中指定目标框架名称。


9.4.4 插入嵌入式框架 • 用户可以根据需要，在自己的网页中插入一个嵌入式框

架，用来显示另一个独立的网页或任意一个 URL 指定的网页 / 网站。框架自带滚动条，便于浏览其中网页。

• 选择菜单“插入”→“ HTML”→“ 框架”→“ IFRAME”命令或在“插入”面板的“布局”类别中，单击“ IFRAME” 按钮，可在光标处添加一个灰色方块的入式框架的占位符。

• 单击嵌入式框架的占位符，选中它，然后选择菜单“修改”→“编辑标签”命令，弹出“标签编辑器－ iframe”对话框。在对话框中设置要显示网页的路径、文件名或URL 、显示界面的宽度和高度等参数，单击“确定”按钮，保存网页即可。


9.5 CSS 样式


9.5.1 CSS 语法规则 CSS （ Cascading Style Sheets ）即层叠样式表，是由W3C 开发的一种 HTML 规范，可以用来统一页面的外观，对页面元素的显示效果进行精确控制Web技术。 “层叠”是指用户在浏览器中浏览网页的最终外观是由制作者为网页创建的各级样式、浏览器本身显示网页的默认样式，以及网页浏览者自定义的浏览样式（如设置浏览器用大字体显示网页等），这三种规则共同作用（或者说“层叠”）的结果，最后以最佳方式呈现网页。本节将介绍 CSS 样式的基本概念、语法结构和规则，以及在 Dreamweaver 中如何创建和应用 CSS样式。


9.5.1 CSS 语法规则 CSS 基本语法

• 层叠样式表（ CSS ）由一组格式设置规则组成• CSS 样式规则基本格式如下：Selector ｛ property : value｝（即选择符 {属性 : 值 } ）例如：p ｛ font-size : 12pt; color : blue; background-color : yellow;｝为便于阅读，常书写为如下结构化形式：p｛ font-size : 12pt;

color : blue;

background-color : yellow;

｝选择符（也称选择器）是 p ， p 是一个表示段落的 HTML 标签，在此被重新定义，设置了段落的文字大小为 12pt ，文字颜色为蓝色，背景色为黄色。


9.5.1 CSS 语法规则

CSS 基本语法 CSS 选择符类型

• 类：定义的样式可以应用于任何元素• ID ：定义的样式可以应用于页面上指定 ID 的任何元素，但一般地，同一个页面上的某一种标签仅指定一个 ID 。

• 标签：重新定义特定标签（如 h1 ）的格式。• 复合内容：重新定义特定组合元素的格式，如选择器 td

h2 规定的样式，仅应用于表格单元格内出现的 h2 标题标签。

9.5.1 CSS 语法规则网页引用 CSS 的方法

CSS 在 HTML 中引用（或者说 CSS 样式规则可以放置的位置）有三种方法：

• 内部或嵌入式样式表• 将 CSS 样式规则包括在 HTML 文档头部（ <head>...</head> ）

的 style 标签中，例如： <head> <style type="text/css"></style> </head>

• 内联样式• 直接在 HTML 行内定义，例如：

<h1 style="font-family:宋体 ;font-size:12pt;color:blue">这是行间定义的 H1 标记 </h1>

• 外部样式表


9.5.1 CSS 语法规则

网页引用 CSS 的方法• 外部样式表• 将若干组 CSS 样式规则放在外部样式表（ .css ）

文件中，此文件利用文档头部的 Link 或 @import规则链接或导入到网站中的一个或多个页面。例如：

<head>

<LINK REL="stylesheet" href="sample.css">

</head>


9.5.2 创建 CSS 样式通过 Dreamweaver 的“ CSS 样式”面板、“新建 CSS 规则”对话框和“ CSS 规则定义”对话框，用户可以方便地创建、编辑和链接 CSS 样式。

“ CSS 样式”面板• 选择菜单“窗口”→“ CSS 样式”命令，即可打开

或关闭“ CSS 样式”面板，单击该面板顶部的“切换”按钮可以在“全部”和“当前”两种模式之间进行切换。

• 在“全部”模式下，显示和编辑当前文档中定义的规则。

• 在“当前”模式下，显示和编辑应用于当前文档中所选内容的规则的 CSS属性。

• 在“ CSS 样式”面板的右下角包含了用于新建、编辑 CSS 规则的工具按钮。


9.5.2 创建 CSS 样式新建 CSS 规则

• 在“ CSS 样式”面板中，单击面板右下侧的“新建CSS 规则”按钮或从 CSS属性面板的“目标规则”弹出菜单中选择“新建 CSS 规则”，然后单击“编辑规则”按钮，可打开“新建 CSS 规则”对话框，在该对话框中指定要新建的 CSS 样式规则类型、名称及其引用方式（存放位置）。

• 新建 CSS 样式规则时，选择好 CSS 规则选择器和保存位置，并单击“保存”按钮后，或在 CSS 面板中，选择 CSS 规则选择器，单击“编辑”按钮后，弹出“ CSS 规则定义”对话框，用户可以通过该对话框，可视化地具体定义列出的属性，而不用手动编写代码。


9.5.2 创建 CSS 样式定义 CSS 规则

定义文本样式• 在“ CSS 规则定义”对话框的分类栏中，在分类栏

中选择“类型”选项，用户可在右侧选项中定义文本的字体、大小、样式等，具体设置如下（若某一属性选项不做设置，可保留为空，下同）。

定义背景样式• 在“ CSS 规则定义”对话框的分类栏中，选择“背景”选项，用户可在右侧选项中对背景样式进行定义。

定义区块样式• 区块样式用于块中元素间距、缩进和对齐方式等属性

的设置。


定义 CSS 规则定义方框样式

• 方框样式用于控制元素（文本、图像、 AP Div 、表格等）在页面上的放置方式，以及元素在页面中占据的大小、浮动方式、填充、边界等。

• 在此设置元素的宽度和高度，是元素自身内容的大小尺寸，而它在页面中实际占据的尺寸，要根据“盒（框）模型”概念计算的尺寸。

• 设置元素的浮动方式，使得该元素在页面上脱离普通流而浮动显示。

9.5.2 创建 CSS 样式


9.5.2 创建 CSS 样式定义 CSS 规则

定义边框样式• 使用“ CSS 规则定义”对话框的“边框”类别可以

设置元素周围的边框（如宽度、颜色和样式等）。定义列表样式

• 列表样式属性用于设置项目列表的外观显示。定义定位样式

• “ 定位”样式属性确定与选定的 CSS 样式相关的内容在页面上的定位方式， CSS 定位属性定义及应用效果，主要用于 AP Div 。

定义扩展样式• “扩展”样式属性包括滤镜、分页和指针选项。


9.5.3 应用和管理 CSS 样式应用和管理 CSS 样式

定义了 CSS 样式后，标签、伪类和复合内容的 CSS样式会自动应用到相应的 XHTML 标签、伪类和复合内容上，但 CSS 类样式，则需要手动将其应用到需要的页面元素上。

应用 CSS 类样式• 首先选中所需的网页元素，然后在 HTML属性检查器

中，从“类”框的下拉列表中选择要应用的类样式。修改 CSS 样式

• 在“ CSS 样式”面板（全部模式）的“所有规则”窗格中，选中需要修改的 CSS 规则（即类名称或其他选择器名称），然后单击右下角中的“编辑样式”按钮，可编辑 CSS 样式。


9.5.3 应用和管理 CSS 样式应用和管理 CSS 样式

删除 CSS 样式• 在“ CSS 样式”面板中选择要删除的 CSS 样式，单

击“删除 CSS 规则”按钮，即可删除该 CSS 样式。使用外部 CSS 样式表

• 在“ CSS 样式”面板的右下角，单击“附加样式表”按钮，弹出“链接外部样式表”对话框。在“文件 /URL” 框中输入要引用的样式表文件的路径或单击“浏览”按钮，找到并选择要引用的外部 CSS 样式表文件。在“添加为”中选择“链接”或“导入”其中的一个选项。


9.5.3 应用和管理 CSS 样式

应用和管理 CSS 样式 CSS 样式规则的转换和移动

• 内联 CSS 规则的转换• 将光标定位到设置有内联样式的对象中，在“ CSS

样式”面板（当前模式）的“规则”列表中右键单击要转换的内联样式，弹出快捷菜单，选择“转换为规则”命令，在弹出的“转换内联 CSS” 对话框中，输入新规则的类名称，然后指定要在其中放置新 CSS 规则的样式表或选择文档头作为放置新 CSS 规则的位置，最后单击“确定”按钮。


9.5.3 应用和管理 CSS 样式

应用和管理 CSS 样式将嵌入式 CSS 规则移至外部样式表

• 在“ CSS 样式”面板（全部模式）的“所有规则”列表中选择一个或多个要移动的规则并右键单击，弹出快捷菜单，选择“移动 CSS 规则”命令，在弹出的“移至外部样式表”对话框中，指定要在其中放置 CSS 规则的样式表或选择新样式表，最后单击“确定”按钮。

• 打开某个样式表文件，采用类似的操作方法，也可以将其中的 CSS 规则移至其他样式表中实现样式表之间的规则转移。


9.6 网页标准化设计


9.6.1 Web 标准

Web 标准• Web 标准不是某一个标准，而是一系列标准的集合。

网页主要由三部分组成：结构（ Structure ）、表现（ Presentation ）和行为（ Behavior ）。对应的Web 标准也就分为三个标准集：结构标准主要是XHTML 和 XML；表现标准主要是 CSS；行为标准主要是对象模型（如 W3C DOM ）和ECMAScript 等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准。


9.6.1 Web 标准

理解内容、结构、表现和行为• 内容就是页面实际要传达的真正信息，包括数据、

文档或图片等。• 结构就是整理和分类页面内容的框架。• 所有用来改变内容外观的东西，称之为表现。• 行为是对内容的交互及操作效果。

所有 HTML 和 XHTML 页面都由结构、表现和行为组成（内容一般包含在结构中）。可以这样理解，内容是基础层，然后是附加在基础层上的结构层和表现层，最后再对这三个层实施“行为”，使其具有交互性和某种特殊效果。


9.6.1 Web 标准

网页标准化设计思想• 真正符合Web 标准的网页设计是指能够灵活使用

Web 标准对网页进行内容、结构、表现及行为相分离。这就是网页标准化设计的核心思想。


9.6.2 DIV+CSS 页面布局

DIV+CSS 页面布局，就是使用 Div 标签结构化页面上各部分内容的布局区域，再采用与之对应的一系列 CSS 样式来定义其外观显示效果。实际上，页面中的各种网页元素也是以 CSS 为基础来定义其外观表现的。


9.6.3 使用 Dreamweaver 实现页面标准化设计

预设计布局 Dreamweaver CS5 提供了 16 种精选模板。可

以在不同浏览器中工作的预设计布局，分为 1 列布局、 2 列布局和 3 列布局，每种布局里又分为固定列布局和液态列布局。具体参考 9.1.2节。

自定义布局自定义布局，就是手动插入 Div 标签，并将 CSS

定位样式应用于这些标签，以创建页面布局。


9.6.3 使用 Dreamweaver 实现页面标准化设计

自定义方式进行 DIV+CSS 布局页面的基本操作过程页面规划设计创建页面（添加 Div 标签）定义 Body 标签、外部容器及各版面的 CSS 样式规则插入页面内容导出 CSS 样式


9.6.4 使用其他布局对象创建 AP Div

• AP 元素是指分配有绝对位置的 HTML 页面元素，可以包含文本、图像或其他任何可放置到 HTML 文档正文中的内容。 AP 元素通常是具有绝对定位的Div 标签，即 AP Div 。

• 单击“插入”面板“布局”类别中的“绘制 AP Div” 按钮，鼠标形状变成十字形，即可在页面任意位置拖出一个 AP Div 。

• 选中 AP Div ，可在属性检查器中设置其各项属性，如名称、高、宽度、定位、背景等。

• 创建多个 AP Div 以后，可以分别在其中插入所需网页元素，然后在页面上移动、拖放完成布局。还可以添加相关行为，来实现一些特殊效果。

• 由于 AP Div 是绝对定位的，因此其位置永远无法根据浏览器窗口的大小变化而变化。


9.6.4 使用其他布局对象使用 Spry 布局控件

• Spry 框架是用来构建 Ajax 网页的 JavaScript 和 CSS库的，包括 Spry数据控件、 Spry 表单控件、 Spry 布局控件和 Spry 效果。 Spry 布局控件又包括 Spry 菜单栏、 Spry 选项卡式面板、 Spry折叠式控件和 Spry 可折叠面板。插入 Spry 菜单栏的一般操作步骤如下：

• 定位插入点后，单击“插入”面板“布局”类别中的“ Spry 菜单栏”按钮，在弹出的“ Spry 菜单栏”对话框中，选择“水平”或“垂直”布局方式，单击“确定”按钮。

• 在属性面板中具体设置各级各项菜单选项的名称、超链接、目标及增减选项等。

• 添加 Spry 菜单栏时会自动生成代码行及一些辅助文件（如 .js ， .css ， .gif 等），默认情况下会在站点文件夹下创建 SpryAssets 文件夹，并将这些辅助文件存入其中，不能删除。如果对外观不满意，用户还可以在其 CSS 文件中修改规则。


9.7 添加网页特效


9.7.1 设置网页过渡效果网页过渡是指当浏览者通过单击超链接在原窗口进入或离开目标网页时，页面所呈现的不同的刷新效果，如卷动、百叶窗等，网页看起来更具有动感。

设置网页过渡效果的操作步骤如下：选择菜单“插入”→“ HTML”→“ 文件头标签”→“ Meta”

命令，弹出 Meta 对话框。在“属性”框的下拉列表中选择“ HTTP-equivalent” 选项，

在“值”框中输入“ Page-Enter” ，表示进入网页时有网页过渡效果。

根据所需效果，参照教材表 9 － 2 ，在“内容”框中输入相应的值，如：“ Revealtrans(Duration=4,Transition=2)” ， Duration=4 表示网页过渡效果的延续时间为 4 秒， Transition表示过渡效果方式，值为 2 时表示圆形收缩。

单击“确定”按钮。


9.7.2 添加行为实现网页特效Dreamweaver 行为

• Dreamweaver 行为是指当被一个特定事件（如单击鼠标）触发时，执行一个动作（如打开一个浏览器窗口）的 JavaScript代码。

• 行为由事件和动作构成，事件是用户浏览网页时执行了某种操作，由浏览器定义、产生的。动作是预先编写好的 JavaScript代码，这些代码执行指定的任务，当事件发生后，触发浏览器做出相应的反应，执行这段代码，这就是整个行为发生的过程。

• 通过在页面中添加行为，可以实现许多网页特效，增强页面的交互性。


9.7.2 添加行为实现网页特效在网页中添加和编辑行为的一般步骤

• 选择想要添加行为的页面元素（超链接、图像等，若是整个页面，则单击“文档”窗口左下角标签选择器中的 <Body> 标签）。

• 在“行为”面板（选择菜单“窗口”→“行为”命令打开面板）中，单击加号（ + ）按钮并从“添加行为”下拉菜单中选择一个动作。灰色显示的动作不可选择，可能是当前文档中缺少某个所需的对象。

• 现一个对话框，显示该动作的参数和说明。为该动作输入参数，然后单击“确定”按钮。

• 动作名称会显示在“事件”列中，触发该动作的默认事件显示在“事件”列中。如果这不是所需的触发事件，可从“事件”下拉列表中选择其他事件。若要编辑动作的参数，可双击动作名称或将其选中并按 Enter 键，然后在对话框中更改相应参数并单击“确定”按钮。

• 若要删除某个行为，可将其选中然后单击减号（ - ）按钮或按Delete 键。


9.7.3 应用 Spry 效果应用 Spry 效果的一般操作步骤如下：

• 选择要为其应用效果的内容或布局元素。• 在“行为”面板中，单击加号（ + ）按钮，从

“效果”子菜单中选择一个效果。• 在弹出的对话框中的目标元素下拉选项中，选择

元素的 ID 。如果已选择元素，可选择“ < 当前选定内容 >” 。

• 单击“确定”按钮，验证默认事件是否正确。添加 Spry 效果时会自动生成一些辅助文件，默认情况下会在站点文件夹下创建 SpryAssets 文件夹，并将这些辅助文件存入其中，不能删除。


9.8 使用表单


9.8 使用表单表单是网页与访问者的一种交互界面，主要用于数据采集（例如收集访问者的名称、 E-mail 地址、调查表、留言簿等），也可以用于实现搜索。

插入表单在网页中添加表单的操作步骤如下：

• 定位插入点后，选择菜单“插入”→“表单”→“表单”命令，即可插入一个表单，以红色虚线框表示。

• 在虚线框内，根据需要插入具体的表单对象。在• “ 插入”面板的“表单”类别中选择要插入的表单

对象，按回车键增加空行。 • 在表单内除了表单对象外，还可以添加其他元素，如

文本、图像、表格等。通常添加表单对象之前，插入一个表格来布局表单对象。


9.8 使用表单

设置表单属性单击表单虚线框，然后切换到表单的属性检查器

（即表单属性面板），即可查看、设置或修改表单属性。

设置表单对象属性单击表单对象，切换到表单对象的属性检查器，

即可查看、设置或修改该表单对象的属性。


9.9 网站发布与测试


网站发布与测试

申请主页空间主页空间，即一个存放网页的空间。在许多大学，学校会给每位学生提供免费的个人主页

空间。可以向一些大型的网站（如新浪、搜狐、网易等）申请，不过有些网站是免费提供的，另一些则要收费。申请主页空间的具体方法，可以参考各大网站的说明。

申请到主页空间后，提供主页空间的单位（ ISP ）会提供四项信息：主页的 URL 、主页空间所在的主机地址、用户的账号及密码。


网站发布与测试测试网站

使用 Dreamweaver 上传功能或专用 FTP软件工具，登录到主页空间所在的主机，将自己制作的整个网站上传。需要注意的是，一定要将本地计算机上网站目录内的所有内容都上传，包括所有下级的子目录。

上传网站网站上传后，就可以在浏览器中输入 ISP 提供的 URL ，检验网页是否正常。

如果测试时发现错误，则要仔细分析错误的原因，并加以改正，回到 Dreamweaver 中对有错误的网页进行修改，修改后再用 FTP软件将修改过的网页上传。

佛山科学技术学院本章小结

本章介绍Dreamweaver 建立和管理网站、普通网页制作的操作方法。介绍 CSS 规则的定义和应用，概述网页标准化设计的基本概念，以及利用Dreamweaver实现网页标准化设计的方法。介绍网页特殊效果的添加方法，简述网站发布与测试方法。

实验要求课后完成配套实验指导书第 5 篇中的实验 3至实验 5 和综合实验。

第 9 章用 dreamweaver 制作网页

Documents