第二十四讲 框架技术与页面属性及设置.doc

此文档收集于网络，如有侵权，请联系网站删除第十八讲 框架技术与页面属性的设置 在上一讲中，我们学习了有关框架的基础知识。在这一讲中，我们继续学习利用框架进行页面布局的方法以及学习如何设置页面属性。通过本讲的学习，我们希望达到下面的学习目标： 学会查看和设置框架属性； 学会查看和设置框架集属性； 学会控制具有链接的框架内容； 学会处理不能显示框架的浏览器； 学会页面基本操作； 学会设置页面属性； 学会更改页面标题； 学会设置 CSS 链接的下划线样式； 学会使用颜色。18.1 查看和设置框架属性 使用属性检查器可以查看和设置大多数框架属性。如果要设置框架集属性，则依照下列步骤操作： 1. 选择需要查看属性的框架； 2. 在属性检查器中，单击右下角的展开箭头，查看所有框架属性； 3. 设置框架属性检查器选项： “框架名称”是链接的 target 属性或脚本在引用该框架时所用的名称。框 架名称必须是单个单词,允许使用下划线 (_)，但不允许使用连字符 (-)、 句点 (.) 和空格。框架名称必须以字母起始（而不能以数字起始）。框架名 称区分大小写。不要使用 JavaScript 中的保留字（例如 top）作为框架名 称。要令链接更改其它框架的内容，用户必须命名目标框架。要令以后创建 跨框架链接更容易一些，请在创建框架时命名每个框架。 “源文件”指定在框架中显示的源文档。单击文件夹图标可以浏览到一个文 件并选择一个文件。 “滚动”指定在框架中是否显示滚动条。将此选项设置为“默认”将不设置 相应属性的值，从而使各个浏览器使用其默认值。大多数浏览器默认为“自 动”，这意味着只有在浏览器窗口中没有足够空间来显示当前框架的完整内 容时才显示滚动条。 “不能调整大小”令访问者无法通过拖动框架边框在浏览器中调整框架大 小。用户始终可以在 Dreamweaver 中调整边框大小；该选项仅适用于在浏览 器中查看框架的访问者。 “边框颜色”为所有框架的边框设置边框颜色。此颜色应用于和框架接触的 所有边框，并且重写框架集的指定边框颜色。关于给定边框颜色应用到哪些 框架边框有一个基础逻辑，但该逻辑十分复杂。 “边框”在浏览器中查看框架时显示或隐藏当前框架的边框。为框架选择 “边框”选项将重写框架集的边框设置。“边框”选项为“是”（显示边 框）、“否”（隐藏边框）和“默认值”；大多数浏览器默认为显示边框， 除非父框架集已将“边框”设置为“否”。只有当共享该边框的所有框架都 将“边框”设置为“否”时，或者当父框架集的“边框”属性设置为“否” 并且共享该边框的框架都将“边框”设置为“默认值”时，边框才是隐藏 的。 “边距宽度”以像素为单位设置左边距和右边距的宽度（框架边框和内容之 间的空间）。 “边距高度”以像素为单位设置上边距和下边距的高度（框架边框和内容之 间的空间）。设置框架的边距宽度和高度并不等同于在“修改”“页面属 性”对话框中设置边距。 如果要设置框架的辅助功能值，则依照下列步骤操作： 1. 在“框架”面板中，通过将插入点放在一个框架中来选择框架； 2. 选择“修改”“编辑标签”，即会显示标签编辑器； 3. 从左侧的类别列表中选择“样式表/辅助功能”； 4. 按需要输入值后单击“确定”。 如果要更改框架中文档的背景颜色，先将插入点放置在框架中，然后依照下列步骤操作： 1. 选择“修改”“页面属性”，打开“页面属性”对话框； 2. 单击“背景颜色”，在弹出菜单中选择一种颜色； 3. 单击“确定”。18.2 使用框架18.2.1 查看和设置框架集属性 使用属性检查器可以查看和设置大多数框架集属性。如果要查看或设置框架集属性，先选择选择框架集，然后在属性检查器中，单击右下角的展开箭头，查看所有框架集属性。最后可以更改属性检查器中的下列选项： “边框”确定在浏览器中查看文档时在框架周围是否应显示边框。要显示边 框，则选择“是”；要使浏览器不显示边框，则选择“否”。 要允许浏览器 确定如何显示边框，则选择“默认值”； “边框宽度”指定框架集中所有边框的宽度； “边框颜色”设置边框的颜色。使用颜色选择器选择一种颜色，或者键入颜 色的十六进制值。 若要设置选定框架集的各行和各列的框架的大小，请单击“行列选择范围”区域的选项卡，然后在“值”文本框中，输入高度或宽度； 若要指定浏览器分配给每个框架的空间大小，请从“单位”菜单中选择以下选项： “像素”将选定列或行的大小设置为一个绝对值。对于应始终保持相同大小 的框架而言，此选项是最佳选择。在为以百分比或相对值指定大小的框架分 配空间前，为以像素为单位指定大小的框架分配空间。设置框架大小的最常 用方法是将左侧框架设置为固定像素宽度，将右侧框架大小设置为相对大 小，这样在分配像素宽度后，能够使右侧框架伸展以占据所有剩余空间。如 果所有宽度都是以像素为单位指定的，而指定的宽度对于访问者查看框架集 所使用的浏览器而言太宽或太窄，则框架将按比例伸缩以填充可用空间。这 同样适用于以像素为单位指定的高度。因此，将至少一个宽度和高度指定为 相对大小通常是一个不错的主意； “百分比”指定选定列或行应相当于其框架集的总宽度或总高度的百分比； “相对”指定在为“像素”和“百分比”框架分配空间后，为选定列或行分 配其余可用空间。剩余空间在大小设置为“相对”的框架中按比例划分。 如果要设置框架集文档的标题，先选择框架集，然后在“文档”工具栏的“标题”字段中，键入框架集文档的名称。当访问者在浏览器中查看该框架集时，标题显示在浏览器的标题栏中。18.2.2 控制具有链接的框架内容 要在一个框架中使用链接以打开另一个框架中的文档，用户必须设置链接目标。链接的 target 属性指定在其中打开链接的内容的框架或窗口。例如，如果用户的导航条位于上面的框架，并且用户希望链接的材料显示在下侧的主要内容框架中，则用户必须将主要内容框架的名称指定为每个导航条链接的目标。当访问者单击导航链接时，将在主框架中打开指定的内容。 如果要设置目标框架，先在“设计”视图中，选择文本或对象，然后依照下列步骤操作： 1. 在属性检查器的“链接”字段中，单击文件夹图标并选择要链接到的文件。或者将“指向文件”图标拖动到“文件”面板以选择要链接到的文件； 2. 在属性检查器的“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口： _blank 在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。 _parent 在显示链接的框架的父框架集中打开链接的文档，同时替换整个框 架集。 _self 在当前框架中打开链接，同时替换该框架中的内容。 _top 在当前浏览器窗口中打开链接的文档，同时替换所有框架。 框架名称也出现在该菜单中。选择一个命名框架以打开该框架中链接的文档。只有当用户在框架集内编辑文档时才显示框架名称。当用户在文档自身的“文档”窗口中编辑该文档时，框架名称不显示在“目标”弹出式菜单中。如果用户正在编辑框架集外的文档，则用户可以将目标框架的名称键入“目标”文本框中。18.2.3 处理不能显示框架的浏览器 Dreamweaver 允许用户指定要在不支持框架的浏览器中显示内容。此类内容存储在框架集文件中，用 noframes 标签括起来。当不支持框架的浏览器加载该框架集文件时，浏览器只显示用 noframes 标签括起来的内容。 如果要为不支持框架的浏览器提供内容，则依照下列步骤操作： 1. 选择“修改”“框架集”“编辑无框架内容”，Dreamweaver 将清除“设计”视图中的内容，并且在“设计”视图顶部显示“无框架内容”字样； 2. 要创建无框架内容，在“文档”窗口中，像处理普通文档一样键入或插入内容。或者， 选择“窗口”“代码检查器”，将插入点置于 noframes 标签中的 body 标签之间，然后键入内容的 HTML 代码； 3. 再次选择“修改”“框架集”“编辑无框架内容”以返回到框架集文档的普通视图。18.3 设置页面属性 Macromedia Dreamweaver MX 2004 提供了许多帮助用户创建新 Web 页的功能。这些页面创建功能可以帮助用户更容易地指定 Web 页面属性，例如页标题、背景图像和颜色及文本和链接的颜色。此外，Dreamweaver MX 2004 还提供了一些工具，帮助用户使 Web 站点的性能处于最佳状态，以及创建和测试页面以确保与不同的 Web 浏览器的兼容性。 18.3.1 页面基本操作 默认情况下，Dreamweaver 使用 CSS设置文本格式。如果用户想使用 HTML 标签，则必须在“首选参数”对话框进行中指定。在“首选参数”对话框的“常规”类别中，取消对选项“使用CSS而不是HTML标签”的选择。 如果选择使用 HTML 而不是 CSS，属性检查器仍显示“样式”弹出菜单。不过，字体、大小、颜色和对齐方式控件将只显示使用 HTML 标签的属性设置。应用于当前选择的 CSS 属性值将是不可见的，“大小”弹出菜单也将被禁用。 使用CSS 页面属性时，Dreamweaver 对在“页面属性”对话框的“外观”、“链接”和“标题”类别中定义的所有属性使用 CSS 标签。定义这些属性的 CSS 标签会嵌入到页面的 head 部分中。用户设置的页面属性仅应用于当前文档。如果一个页面使用了外部 CSS 样式表，Dreamweaver 将不会覆盖在该样式表中设置的标签，因为这将影响使用该样式表的其他所有页面。 “历史记录”面板显示自从用户创建或打开某个文档以来在该活动文档中所执行的步骤列表，列表中步骤的数目最多为指定的数目。“历史记录”面板并不显示用户在其他框架、其他“文档”窗口或“站点”面板中执行的步骤。它允许用户撤消一个或多个步骤，它还允许用户重放步骤以及创建将重复任务自动化的新命令。 可以使用当前的文档名和位置来保存文档，或者使用一个不同的名称和位置来保存文档的副本。给文件命名时，应避免在文件名和文件夹名中使用空格和特殊字符。具体说来就是不要在打算放到远程服务器上的文件名中使用特殊字符或标点符号；很多服务器在上传时会更改这些字符，这会导致与这些文件的链接中断。而且，文件名不要以数字开头。 如果要保存文档，选择下列操作之一： 如果要在磁盘上覆盖当前版本，并保存所做的任何更改，请选择“文 件”“保存”； 如果要在一个不同的文件夹中保存文件或使用不同的名称保存文件，请选择 “文件”“另存为”。在出现的“另存为”对话框中，定位到要用来保存文件的文件夹。然后，在“文件名称”文本框中，键入文件名。单击“保存”保存文件。； 如果要保存所有打开的文档，选择“文件”“保存全部”。 如果要回复到文档上次保存的版本，则选择“文件”“回复”。 Dreamweaver将弹出一个对话框提示用户是否要放弃所作的修改并回复到上一次保存的版本。单击“是”，则回复到上次的版本，若要保留所作的修改，请单击“否”。但是，如果用户保存了一个文档，然后退出 Dreamweaver，当用户重新启动 Dreamweaver 时，不能回复到该文档的以前版本。18.3.2 设置页面属性 可以使用“页面属性”对话框设置或更改页面标题、背景图像和颜色、文本和链接颜色以及边距等Web文档的基本属性。如果要设置页面属性，则选择“修改”“页面属性”。 18.3.3 更改页面标题 HTML 页面的标题可以帮助站点访问者在浏览时明确所查看的内容，并在访问者的历史记录和书签列表中标识页面。如果不给页面加标题，页面会在浏览器窗口、书签列表和历史记录列表中显示为无标题文档。如果要定位站点中的所有无标题文档，则使用“站点”“报告”命令，打开报告对话框。在“报告在”选项中选择“整个当前本地站点”，在“选择报告”选项中选择“无标题文档”。单击“运行”，Dreamweaver就会生成无标题文档的报告。 如果要更改页面标题，则在文档打开时，选择下列操作之一： 选择“查看”“工具栏”“文档”，打开文档工具栏。然后，在“标题” 文本框中，输入页面标题，然后按回车键保存修改； 选择“修改”“页面属性”，打开“页面属性”对话框。然后在“页面属 性”对话框中选择“标题/编码”分类。最后，在“标题”文本框中输入新标 题。 如果在“页面属性”对话框中编辑了标题，单击“确定”保存修改。标题会出现在“文档”窗口的标题栏中。18.3.4 设置 CSS 链接的下划线样式 如果使用默认的“CSS 页面属性”对话框，Dreamweaver 很容易指定特殊的 CSS 链接样式。使用 CSS 链接选项，可以选择从不对链接加下划线、仅当鼠标指针移过该链接时对它加下划线或当鼠标指针移过链接时关闭链接。如果要设置 CSS 链接样式，依照下列步骤操作： 1. 打开“页面属性”对话框； 2. 在“页面属性”对话框中选择“链接”类别； 3. 分别设置“链接字体”、“大小”、“链接颜色”、“交换图像链接”、“已访问链接”和“活动链接”选项； 4. 从“下划线样式”弹出菜单中，选择用户的页面的默认下划线样式； 5. 单击“确定”。18.3.5 使用颜色 在 Dreamweaver 中，很多对话框与许多页面元素的属性检查器一样，都包含可打开颜色选择器的颜色框。使用颜色选择器选择页面元素的颜色。 如果要在 Dreamweaver 中选择颜色，先在任何对话框或属性检查器中单击颜色框。打开颜色选择器。然后选择下列操作之一： 用滴管从调色板中选择颜色样本。 用滴管从屏幕上的任何位置取色，即使从 Dreamweaver 窗口外也可以。要从 桌面或其他应用程序中取色，可按住鼠标按钮；这样滴管仍能保持焦点，可 以从 Dreamweaver 外选择颜色。如果用户单击桌面或其他应用程序， Dreamweaver 会选取用户单击的位置的颜色。 如果要展开颜色选项，使用颜色选择器右上角的弹出菜单。可以选择“立方 色”、“连续色调”、“Windows 系统”、“Mac 系统”、“灰度等级”和 “调整到网页安全色”。 如果使用的调色板颜色不是网页安全色，然后选择“调整到网页安全色”，则 Dreamweaver 会用最接近的网页安全色替换所选颜色。“立方色”和“连续色调”调色板的颜色是网页安全色，而“Windows 系统”、“Mac 系统”和“灰度等级”的颜色则不是。 如果要清除当前颜