第六章 层叠样式模板与库.ppt

1、第六章 层叠样式、模板与库 6.1 层叠样式表的创建、编辑与应用 6.2 模板的应用 6.3 库的应用,DREAMWEAVER,6.1 层叠样式表的创建、编辑与应用 6.1.1 关于层叠样式表 通常情况下我们希望将页面显示内容与显示方式分开，使得内容编辑人员的工作重心放在网站内容的撰写上，而站点的美工和界面设计人员的工作重心放在页面显示的风格和样式上。 样式是预先定义好的、格式化文档的工具。CSS全称Cascading Styles Sheet，译为层叠样式表，是由W3C（World Wide Web Consortium）组织所拟定的。,DREAMWEAVER,6.1 层叠样式表的创建、编辑

2、与应用 6.1.1 关于层叠样式表 CSS（Cascading Style Sheets ）是开放性样式设定语句，它扩充了HTML标记的属性设定，这些属性设定可以通过脚本语言进行控制，使网页的视觉效果更加丰富多彩。 CSS将页面的样式与显示内容的文档分开，可以高效、统一地组织页面元素。对于具有相同风格多个页面的站点来说，只需要建立定义样式的CSS文件，并使需要使用这些样式的文档调用相应的样式文件即可。当网站的风格需要更新时，只要更改CSS样式文件即可。 CSS技术的应用使得网站的开发、管理和维护大为简化，提高了开发效率。,DREAMWEAVER,6.1 层叠样式表的创建、编辑与应用 6.1.1

3、 关于层叠样式表 1、样式表的版本： 1996年，W3C推出CSS1 。 1998年中期，W3C公布CSS2。 目前，W3C正在开发CSS3。 IE6与NS7已经实现了CSS1中的绝大部分特性，但并没有实现全部特性；而且这两种浏览器在支持CSS2方面远远不够，尤其是IE6。 本章介绍的属性可以被至少其中一种浏览器所支持,DREAMWEAVER,6.1 层叠样式表的创建、编辑与应用 6.1.1 关于层叠样式表 2、样式表的层次： 样式表称为层叠样式表是因为它们可以以三层的形式定义，以此指定文档的样式；较低层的样式表能够覆盖较高层的样式表。 CSS的三个层次，按照从底层到高层的顺序，分别为行内样式

4、表、文档层样式表和外部样式表，其中行内样式表只能作用于单个标签的内容；文档层样式表则能够对文档的整个主体起作用，而外部样式表可以应用到任意数目文档的主体中。 如果浏览器无法满足样式表指定的属性，则浏览器或者采用另一个值代替此值或者忽略这个给定值。,DREAMWEAVER,6.1 层叠样式表的创建、编辑与应用 6.1.1 关于层叠样式表 3、CSS的基本格式： 选择符规则 例如：h1color:blue 选择符（selector）：是样式要套用的对象，一般是HTML标记，如上例的h1。在HTML文件中标记之间的内容将全部继承h1的全部规则，例如字体显示为蓝色。 规则：是样式设定的内容，用括起来的

5、部分，如上例中的color:blue。,DREAMWEAVER,6.1.2 创建和编辑CSS样式表 要创建一个CSS样式表，操作步骤如下： 选择“窗口”“CSS 样式”命令，打开CSS面板。 在“CSS 样式”面板中，单击面板底部的“新建 CSS 样式”按钮 (+)。 在“类型”选项组中，选择要定制的类型单选项。该选项组中3个选项的意义如下： HTML 标签样式重定义特定标签（如 h1）的格式。创建或更改 h1 标签的 CSS 样式时，所有用 h1 标签设置了格式的文本都立即更新。,DREAMWEAVER,6.1.2 创建和编辑CSS样式表 自定义 CSS 样式（也称为类样式）使您可以将样式属

6、性设置为任何文本范围或文本块。 .topcolor:red;font-size:12px; 这里是类选择器控制的样式 注意：类选择器的前面有一个“点”，class名称在HTML文档中类用class来定义。,DREAMWEAVER,CSS 选择器样式重定义具体某个标签组合的格式（如每当 h2 标题出现在表格单元格内时都应用 td h2），或重定义包含特定 id 属性的所有标签的格式。例如： #top p color:red; 这里是内容，以上的样式定位到了这个p标签 在定义选项组中，选择要定义的样式表位置，可以是定义新的样式表文件，也可以是将样式表文件定义在当前文档中。 完成设置后单击“确定”按

7、钮，在“CSS样式定义对话框中设置个类别的属性。,DREAMWEAVER,编辑CSS样式表 右单击CSS样式表面板，选择“编辑样式表”。 单击“链接”，可打开链接外部样式表对话框 单击“新建”，可打开新建CSS样式对话框 单击“编辑”，可打开样式定义对话框对样式进行编辑。 单击“删除”，可删除该样式。 单击“复制”，针对要复制着样式的类型不同，将打开新建样式对话框，提示输入复制产生的新的CSS样式名称，或者重定义的HTML标记，或者新的CSS样式选择符。,DREAMWEAVER,6.1.3 精确定制CSS样式 无论是新建CSS样式，还是编辑已有的CSS 样式，CSS样式的具体格式都是通过CSS

8、样式定 义对话框来定义的。 该对话框中左边的“分类”列表框显示样式类目。由于CSS属性较多，DW将其分为8大类目，可以单击左边的样式类目名来选择样式类型，然后在右边的区域进行相应的属性定义下面分别介绍： 定义 CSS 类型属性 “字体”为样式设置字体家族（或家族系列）,DREAMWEAVER,“大小”定义文本大小。可以通过选择数字和度量单位选择特定的大小，也可以选择相对大小。 “样式”将“正常”、“斜体”或“偏斜体”指定为字体样式。默认设置是“正常”。 “行高”设置文本所在行的高度。 “修饰”向文本中添加下划线、上划线或删除线，或使文本闪烁。正常文本的默认设置是“无”。 “粗细”对字体应用特定

9、或相对的粗体量。“正常”等于 400；“粗体”等于 700。 “变量”设置文本的小型大写字母变量。 “大小写”将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写。,DREAMWEAVER,“颜色”设置文本颜色。 定义 CSS 样式背景属性 “背景颜色”设置元素的背景颜色。 “背景图像”设置元素的背景图像。 “重复”确定是否以及如何重复背景图像。 “附件”确定背景图像是固定在它的原始位置还是随内容一起滚动。 水平位置和垂直位置指定背景图像相对于元素的初始位置。 定义 CSS 样式边框属性 “样式”设置边框的样式外观。取消选择“全部相同”可设置元素各个边的边框样式。,DREAMWEAV

10、ER,“宽度”设置元素边框的粗细。取消选择“全部相同”可设置元素各个边的边框宽度。 “颜色”设置边框的颜色。取消选择“全部相同”可设置元素各个边的边框颜色。 定义 CSS 样式块属性 “单词间距”设置单词的间距。 “字母间距”增加或减少字母或字符的间距。若要减少字符间距，请指定一个负值（例如 -4）。 “垂直对齐”指定它应用于的元素的垂直对齐方式。 “文本对齐”设置元素中的文本对齐方式。 “文本缩进”指定第一行文本缩进的程度。可以使用负值创建凸出，但显示取决于浏览器。,DREAMWEAVER,“空格”确定如何处理元素中的空格。从下面三个选项中选择：“正常”收缩空格；“保留”的处理方式与文本被括

11、在 pre 标签中一样（即保留所有空白，包括空格、制表符和回车）；“不换行”指定仅当遇到 br 标签时文本才换行。 “显示”指定是否以及如何显示元素。“无”关闭它被指定给的元素的显示。 定义 CSS 样式“盒子”属性 “宽和高”设置元素的宽度和高度。 “浮动”设置其它元素（如文本、层、表格等）在哪个边围绕元素浮动。 “清除”定义不允许层的边。如果清除边上出现层，则带清除设置的元素移到该层的下方。,DREAMWEAVER,“填充”指定元素内容与元素边框（如果没有边框，则为边距）之间的空格量。 “边界”指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的空格量。 定义 CSS 样式列表属

12、性 “类型”设置项目符号或编号的外观。 “项目符号图像”使您可以为项目符号指定自定义图像。 “位置”设置列表项文本是否换行和缩进（外部）以及文本是否换行到左边距（内部）。 定义 CSS 样式定位属性 。“定位”样式属性使用“层”参数选择中定义层的默认标签，将标签或所选文本块更改为新层。,DREAMWEAVER,“类型”确定浏览器应如何来定位层 “绝对”使用“定位”框中输入的坐标，相对于页面左上角来放置层。 “相对”使用“定位”框中输入的坐标，相对于对象在文档的文本流中的位置来放置层。 “静态”将层放在它在文本流中的位置。 “显示”确定层的初始显示条件。 “继承”继承层父级的可见性属性。 “可见

13、”显示层的内容，而不管父级的值是什么。 “隐藏”隐藏层的内容，而不管父级的值是什么。,DREAMWEAVER,“Z 轴”确定层的堆叠顺序。编号较高的层显示在编号较低的层的上面。值可以为正，也可以为负 “溢出（仅限于 CSS 层）”确定在层的内容超出它的大小时将发生的情况。 “可见”增加层的大小，使它的所有内容均可见。 “隐藏”保持层的大小并剪辑任何超出的内容。 “滚动”在层中添加滚动条，不论内容是否超出层的大小。 “自动”使滚动条仅在层的内容超出它的边界时才出现。 “定位”指定层的位置和大小。,DREAMWEAVER,定义 CSS 样式扩展属性 “分页”在打印期间在样式所控制的对象之前或者之后

14、强行分页。 “光标”当指针位于样式所控制的对象上时改变指针图像。 “过滤器”对样式所控制的对象应用特殊效果（包括模糊和反转）。,DREAMWEAVER,6.1.4 外部样式表的链接、导入和编辑 单独的通用的CSS样式表文件 每个网页文档都可以与这个CSS样式表建立一种链接。 样式表一经更改，所有链接到此样式表的网页都会发生相应的更新。,DREAMWEAVER,6.2 模板的应用 6.2.1 关于模板 概念：在DW中，模板是一种特殊的文档，它可以作为其它文档的基础；模板就是一种样板。 作用：复制相同布局结构的网页；使内容与布局脱离，以便于页面内容的更新。（例如在线杂志） 特性：有可编辑和不可编辑

15、两类区域；模板的更改会使相关的网页更改。,DREAMWEAVER,6.2.2 模板的创建与保存 模板的创建有两种方法：新建一个空白 模板；利用一个现有的文档，进行修改，然后保存为模板。 新建一个空白模板 在网页编辑窗口中先选择要创建模板的站点。 选择“窗口|资源”命令，或按功能键F11，可打开“资源”管理面板，选择面板左边的模板按钮。 右单击面板中的空白区域，打开菜单，选择“新建模板”命令。 在模板列表中输入新建模板的名字。,DREAMWEAVER,右单击该新建模板文件，选择“编辑”命令，在空白的模板中添加内容。本例在模板中插入一个层。 选中该层，右单击选择“模板|新建可编辑区域”命令，系统弹

16、出“新建可编辑区域”对话框。 在此对话框的“名称”文本框中输入可编辑区域的名字，单击确定。 选择“文件|另存为模板”命令，保存新创建的模板。 将现有的HTML文档转换为模板。 打开一个现成的HTML文档。 选择“文件|另存为模板”命令，系统弹出另存为模板对话框。,DREAMWEAVER,单击对话框中的“站点”命令，设置该模板在那个网站中使用。 在“现存的模板”列表框中是当前网站中已经建好的模板，在“另存为”文本框中输入新建模板的名称，本例新建模板名为“personalsite”,单击“保存”按钮即可保存模板。此时新建的模板文件会保存在网站根文件夹下的Templates文件夹中。 此时该模板的所

17、有区域都被锁定为不可编辑区，要是模板能应用于网页制作，还要在模板上设置可编辑区。 分别设置各个可编辑区域，并把它们命名。,DREAMWEAVER,设置完可编辑区域后，选择“文件|保存”命令，将该模板保存。 注意：在定义表格的可编辑区域是应注意，可将整个表格或表格的某个单元个设置为可编辑区域，但不能同时将多个单元格设置为可编辑区域。 问题：层和层中的内容是不同的元素。定义了层为可编辑区域和定义了层中的内容为可编辑区域有什么区别？ 创建模板时应注意两点： 应明确新建的模板是建立在哪个站点中。 新建的模板必须有可编辑区域。,DREAMWEAVER,6.2.3 模板的修改与应用 应用模板制作网页 选择

18、“文件”“新建”打开“新建文档”对话框。 在“新建文档”对话框中选择“模板”选项卡。 在“模板用于”列表中选择包含想要使用的模板的站点。 在该列表中选择想要使用的模板。 单击“创建”创建一个基于模板的新页面。 在可编辑区域进行个性化编辑。 选择“文件|保存”命令保存网页。,DREAMWEAVER,让文档与模板脱钩 若要更改基于模板的文档的锁定区域，必须将该文档从模板分离。将文档分离之后，整个文档都将变为可编辑的。 打开想要分离的基于模板的文档。 选择“修改”“模板”“从模板中分离”。 文档被从模板分离，所有模板代码都被删除。 模板的修改与文档更新 打开模板控制面板 选择要编辑的模板，然后打开右

19、键快捷菜单，选择“编辑”命令。 然后对需要编辑的模板进行修改。,DREAMWEAVER,保存修改后的模板 选择“修改|模板”名后，菜单中选择的命令意义选项如下： “套用模板到页”，将选定的模板应用于当前的网页页面。 “从模板中分离”，可是当前页面与模板中断链接关系，此时该页面上的所有区域都是可编辑的。 “打开附加模板”，可打开当前页面所用的模板。 “更新当前页面” “更新页面”，用指定模板更新当前整个站点中该模板作用的网页页面。,DREAMWEAVER,6.3 库的应用 6.3.1 关于库项目（Library Item） 概念：可重用的网页对象的集合。 作用：便于插入和管理需要重复使用或经常更

20、新的网页元素。 特性： 当库项目插入页面时，会插入一份源代码的拷贝，并创建一指向原外部项目的引用。当库项目被修改时，通过指向外部项目的引用，能一次更新整个站点上的内容。 DW将库项目存储在本地站点目录下得Library文件夹下,DREAMWEAVER,库项目可以包含任何元素，如：文本、表格等。而不能包含元素。 举例：假定您在为某公司生成一个大型站点。公司想让其广告语出现在站点的每个页面上，但是销售部门还没有最后确定广告语的文字。如果创建一个包含该广告语的库项目并在每个页面上使用，那么当销售部门提供该广告语的最终版本时，您可以更改该库项目并自动更新每一个使用它的页面。 6.3.2 新建一个库项目

21、 选择文档的一部分并另存为库项目。 选择“窗口”“库”并将选定内容拖动到“资源”面板的“库”类别中。 输入新的库项目的名称。,DREAMWEAVER,库项目保存在站点本地根文件夹的“库”文件夹中（文件扩展名为 .lbi）。 注意：对于链接项（如图像），库只存储对该项的引用。原始文件必须保留在指定的位置，才能使库项目正确工作。 6.3.3 往文档中添加库项目 当向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入到文档中。 问题：在库项目插入后，如果原库项目被删除，那么该插入部分的内容会正常显示么？ 往文档中添加库项目： 将插入点放在“文档”窗口中。,DREAMWEAVER,选择“窗口”“库”。 从“资源”面板向“文档”窗口拖动一个库项目，或者选择一个项目并单击“插入”按钮。 打开HTML源代码检查器，可以看到该库项目对应的代码。 在文档中插入的库项目是作为一个整体存在的，不能修改局部的内容，但可整体删除。如果希望直接在网页中编辑该库项目，就必须断开文档中的库项目实例与库项目之间的连接。一旦库项目变成可编辑的内容，就不能再在随库项目中更新了。 使文档中的库项