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

《第六章层叠样式模板与库课件.ppt》由会员分享，可在线阅读，更多相关《第六章层叠样式模板与库课件.ppt（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、cadingStyleSheets）是开放性样）是开放性样式设定语句，它扩充了式设定语句，它扩充了HTML标记的属性设定，标记的属性设定，这些属性设定可以通过脚本语言进行控制，使网页这些属性设定可以通过脚本语言进行控制，使网页的视觉效果更加丰富多彩。的视觉效果更加丰富多彩。CSS将页面的样式与显示内容的文档分开，可将页面的样式与显示内容的文档分开，可以高效、统一地组织页面元素。对于具有相同风以高效、统一地组织页面元素。对于具有相同风格多个页面的站点来说，只需要建立定义样式的格多个页面的站点来说，只需要建立定义样式的CSS文件，并使需要使用这些样式的文档调用相应的文件，并使需要使用这些样式的文档

3、调用相应的样式文件即可。当网站的风格需要更新时，只要更改样式文件即可。当网站的风格需要更新时，只要更改CSS样式文件即可样式文件即可。CSS技术的应用使得网站的开发、管理和维护大为简技术的应用使得网站的开发、管理和维护大为简化，提高了开发效率。化，提高了开发效率。DREAMWEAVER第3页，此课件共34页哦v 6.1 层叠样式表的创建、编辑与应用层叠样式表的创建、编辑与应用6.1.1关于层叠样式表关于层叠样式表1、样式表的版本：、样式表的版本：1996年，年，W3C推出推出CSS1。1998年中期，年中期，W3C公布公布CSS2。目前，目前，W3C正在开发正在开发CSS3。IE6与与NS7已

4、经实现了已经实现了CSS1中的绝大部分特性，但中的绝大部分特性，但并没有实现全部特性；并没有实现全部特性；IE8的最新版本支持的最新版本支持CSS2。本章介绍的属性可以被至少其中一种浏览器所支本章介绍的属性可以被至少其中一种浏览器所支持持DREAMWEAVER第4页，此课件共34页哦v 6.1 层叠样式表的创建、编辑与应用层叠样式表的创建、编辑与应用6.1.1关于层叠样式表关于层叠样式表2、样式表的层次：、样式表的层次：样式表称为层叠样式表是因为它们可以以三层的样式表称为层叠样式表是因为它们可以以三层的形式定义，以此指定文档的样式；较低层的样式形式定义，以此指定文档的样式；较低层的样式表能够覆

5、盖较高层的样式表。表能够覆盖较高层的样式表。CSS的三个层次，按照从底层到高层的顺序，分的三个层次，按照从底层到高层的顺序，分别为别为行内样式表行内样式表、文档层样式表文档层样式表和和外部样式表外部样式表，其，其中行内样式表只能作用于单个标签的内容；文档层中行内样式表只能作用于单个标签的内容；文档层样式表则能够对文档的整个主体起作用，而外部样样式表则能够对文档的整个主体起作用，而外部样式表可以应用到任意数目文档的主体中。式表可以应用到任意数目文档的主体中。如果浏览器无法满足样式表指定的属性，则浏览如果浏览器无法满足样式表指定的属性，则浏览器或者采用另一个值代替此值或者忽略这个给定器或者采用另一

6、个值代替此值或者忽略这个给定值。值。DREAMWEAVER第5页，此课件共34页哦v 6.1 层叠样式表的创建、编辑与应用层叠样式表的创建、编辑与应用6.1.1关于层叠样式表关于层叠样式表3、CSS的基本格式：的基本格式：选择符选择符规则规则例如：例如：h1color:blue选择符（选择符（selector）：是样式要套用的对象，一）：是样式要套用的对象，一般是般是HTML标记，如上例的标记，如上例的h1。在。在HTML文件中文件中标记之间的内容将全部继承标记之间的内容将全部继承h1的全部的全部规则，例如字体显示为蓝色。规则，例如字体显示为蓝色。规则：是样式设定的内容，用规则：是样式设定的内

7、容，用括起来的部分，括起来的部分，如上例中的如上例中的color:blue。DREAMWEAVER第6页，此课件共34页哦6.1.2 创建和编辑CSS样式表1.要创建一个CSS样式表，操作步骤如下：a)选择“窗口”“CSS 样式”命令，打开CSS面板。b)在“CSS 样式”面板中，单击面板底部的“新建 CSS 样式”按钮(+)。c)在“类型”选项组中，选择要定制的类型单选项。该选项组中3个选项的意义如下：HTML 标签样式重定义特定标签（如 h1）的格式。创建或更改 h1 标签的 CSS 样式时，所有用 h1 标签设置了格式的文本都立即更新。DREAMWEAVER第7页，此课件共34页哦6.1

8、.2 创建和编辑CSS样式表n自定义 CSS 样式（也称为类样式类样式）使您可以将样式属性设置为任何文本范围或文本块。n.topcolor:red;font-size:12px;nn这里是类选择器控制的样式这里是类选择器控制的样式nn注意：注意：类选择器的前面有一个类选择器的前面有一个“点点”，class名称名称在在HTML文档中类用文档中类用class来定义。来定义。DREAMWEAVER第8页，此课件共34页哦CSS 选择器样式重定义具体某个标签组合的格式（如每当 h2 标题出现在表格单元格内时都应用 td h2），或重定义包含特定 id 属性的所有标签的格式。例如：#toppcolor:

9、red;这里是内容，以上的样式定位到了这个这里是内容，以上的样式定位到了这个p标标签签 d)在定义选项组中，选择要定义的样式表位置，可以是定义新的样式表文件，也可以是将样式表文件定义在当前文档中。e)完成设置后单击“确定”按钮，在“CSS样式定义对话框中设置个类别的属性。DREAMWEAVER第9页，此课件共34页哦2.编辑CSS样式表a)右单击CSS样式表面板，选择“编辑样式表”。b)单击“链接”，可打开链接外部样式表对话框c)单击“新建”，可打开新建CSS样式对话框d)单击“编辑”，可打开样式定义对话框对样式进行编辑。e)单击“删除”，可删除该样式。f)单击“复制”，针对要复制着样式的类型

10、不同，将打开新建样式对话框，提示输入复制产生的新的CSS样式名称，或者重定义的HTML标记，或者新的CSS样式选择符。DREAMWEAVER第10页，此课件共34页哦6.1.3精确定制精确定制CSS样式样式 无论是新建无论是新建CSS样式，还是编辑已有的样式，还是编辑已有的CSS样式，样式，CSS样式的具体格式都是通过样式的具体格式都是通过CSS样式定样式定义对话框来定义的。义对话框来定义的。该对话框中左边的该对话框中左边的“分类分类”列表框显示样式类目。由列表框显示样式类目。由于于CSS属性较多，属性较多，DW将其分为将其分为8大类目，可以单击左大类目，可以单击左边的样式类目名来选择样式类型

11、，然后在右边的区域进边的样式类目名来选择样式类型，然后在右边的区域进行相应的属性定义下面分别介绍：行相应的属性定义下面分别介绍：1.定义定义CSS类型属性类型属性a)“字体字体”为样式设置字体家族（或家族系列）DREAMWEAVER第11页，此课件共34页哦b)“大小大小”定义文本大小。可以通过选择数字和度量单位选择特定的大小，也可以选择相对大小。c)“样式样式”将“正常”、“斜体”或“偏斜体”指定为字体样式。默认设置是“正常”。d)“行高行高”设置文本所在行的高度。e)“修饰修饰”向文本中添加下划线、上划线或删除线，或使文本闪烁。正常文本的默认设置是“无”。f)“粗细粗细”对字体应用特定或相

12、对的粗体量。“正常”等于 400；“粗体”等于 700。g)“变量变量”设置文本的小型大写字母变量。h)“大小写大小写”将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写。DREAMWEAVER第12页，此课件共34页哦i)“颜色颜色”设置文本颜色。2.定义定义CSS样式背景属性样式背景属性a)“背景颜色背景颜色”设置元素的背景颜色。b)“背景图像背景图像”设置元素的背景图像。c)“重复重复”确定是否以及如何重复背景图像。d)“附件附件”确定背景图像是固定在它的原始位置还是随内容一起滚动。e)水平位置和垂直位置水平位置和垂直位置指定背景图像相对于元素的初始位置。3.定义定义CSS样

13、式边框属性样式边框属性a)“样式样式”设置边框的样式外观。取消选择“全部相同”可设置元素各个边的边框样式。DREAMWEAVER第13页，此课件共34页哦b)“宽度宽度”设置元素边框的粗细。取消选择“全部相同”可设置元素各个边的边框宽度。c)“颜色颜色”设置边框的颜色。取消选择“全部相同”可设置元素各个边的边框颜色。4.定义定义CSS样式块属性样式块属性a)“单词间距单词间距”设置单词的间距。b)“字母间距字母间距”增加或减少字母或字符的间距。若要减少字符间距，请指定一个负值（例如-4）。c)“垂直对齐垂直对齐”指定它应用于的元素的垂直对齐方式。d)“文本对齐文本对齐”设置元素中的文本对齐方式

14、。e)“文本缩进文本缩进”指定第一行文本缩进的程度。可以使用负值创建凸出，但显示取决于浏览器。DREAMWEAVER第14页，此课件共34页哦f)“空格空格”确定如何处理元素中的空格。从下面三个选项中选择：“正常”收缩空格；“保留”的处理方式与文本被括在 pre 标签中一样（即保留所有空白，包括空格、制表符和回车）；“不换行”指定仅当遇到 br 标签时文本才换行。g)“显示显示”指定是否以及如何显示元素。“无”关闭它被指定给的元素的显示。5.定义定义CSS样式样式“盒子盒子”属性属性a)“宽和高宽和高”设置元素的宽度和高度。b)“浮动浮动”设置其它元素（如文本、层、表格等）在哪个边围绕元素浮动

15、。c)“清除清除”定义不允许层的边。如果清除边上出现层，则带清除设置的元素移到该层的下方。DREAMWEAVER第15页，此课件共34页哦d)“填充填充”指定元素内容与元素边框（如果没有边框，则为边距）之间的空格量。e)“边界边界”指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的空格量。6.定义定义CSS样式列表属性样式列表属性a)“类型类型”设置项目符号或编号的外观。b)“项目符号图像项目符号图像”使您可以为项目符号指定自定义图像。c)“位置位置”设置列表项文本是否换行和缩进（外部）以及文本是否换行到左边距（内部）。7.定义定义CSS样式定位属性样式定位属性。“定位”样式属性使

16、用“层”参数选择中定义层的默认标签，将标签或所选文本块更改为新层。DREAMWEAVER第16页，此课件共34页哦a)“类型类型”确定浏览器应如何来定位层b)“绝对绝对”使用“定位”框中输入的坐标，相对于页面左上角来放置层。c)“相对相对”使用“定位”框中输入的坐标，相对于对象在文档的文本流中的位置来放置层。d)“静态静态”将层放在它在文本流中的位置。e)“显示显示”确定层的初始显示条件。f)“继承继承”继承层父级的可见性属性。g)“可见可见”显示层的内容，而不管父级的值是什么。h)“隐藏隐藏”隐藏层的内容，而不管父级的值是什么。DREAMWEAVER第17页，此课件共34页哦i)“Z轴轴”确

17、定层的堆叠顺序。编号较高的层显示在编号较低的层的上面。值可以为正，也可以为负j)“溢出（仅限于溢出（仅限于CSS层）层）”确定在层的内容超出它的大小时将发生的情况。k)“可见可见”增加层的大小，使它的所有内容均可见。l)“隐藏隐藏”保持层的大小并剪辑任何超出的内容。m)“滚动滚动”在层中添加滚动条，不论内容是否超出层的大小。n)“自动自动”使滚动条仅在层的内容超出它的边界时才出现。o)“定位定位”指定层的位置和大小。DREAMWEAVER第18页，此课件共34页哦8.定义定义CSS样式扩展属性样式扩展属性a)“分页分页”在打印期间在样式所控制的对象之前或者之后强行分页。b)“光标光标”当指针位

18、于样式所控制的对象上时改变指针图像。c)“过滤器过滤器”对样式所控制的对象应用特殊效果（包括模糊和反转）。DREAMWEAVER第19页，此课件共34页哦6.1.4外部样式表的链接、导入和编辑外部样式表的链接、导入和编辑n单独的通用的单独的通用的CSS样式表文件样式表文件n每个网页文档都可以与这个每个网页文档都可以与这个CSS样式表建立一种链样式表建立一种链接。接。n样式表一经更改，所有链接到此样式表的网页都会样式表一经更改，所有链接到此样式表的网页都会发生相应的更新发生相应的更新。DREAMWEAVER第20页，此课件共34页哦v 6.2 模板的应用6.2.1 关于模板1.概念：在DW中，模

19、板是一种特殊的文档，它可以作为其它文档的基础；模板就是一种样板。2.作用：复制相同布局结构的网页；使内容与布局脱离，以便于页面内容的更新。（例如在线杂志）3.特性：有可编辑和不可编辑两类区域；模板的更改会使相关的网页更改。DREAMWEAVER第21页，此课件共34页哦6.2.2 模板的创建与保存 模板的创建有两种方法：新建一个空白 模板；利用一个现有的文档，进行修改，然后保存为模板。1.新建一个空白模板a)在网页编辑窗口中先选择要创建模板的站点。b)选择“窗口|资源”命令，或按功能键F11，可打开“资源”管理面板，选择面板左边的模板按钮。c)右单击面板中的空白区域，打开菜单，选择“新建模板”

20、命令。d)在模板列表中输入新建模板的名字。DREAMWEAVER第22页，此课件共34页哦e)右单击该新建模板文件，选择“编辑”命令，在空白的模板中添加内容。本例在模板中插入一个层。f)选中该层，右单击选择“模板|新建可编辑区域”命令，系统弹出“新建可编辑区域”对话框。g)在此对话框的“名称”文本框中输入可编辑区域的名字，单击确定。h)选择“文件|另存为模板”命令，保存新创建的模板。2.将现有的HTML文档转换为模板。a)打开一个现成的HTML文档。b)选择“文件|另存为模板”命令，系统弹出另存为模板对话框。DREAMWEAVER第23页，此课件共34页哦c)单击对话框中的“站点”命令，设置该

21、模板在那个网站中使用。d)在“现存的模板”列表框中是当前网站中已经建好的模板，在“另存为”文本框中输入新建模板的名称，本例新建模板名为“personalsite”,单击“保存”按钮即可保存模板。此时新建的模板文件会保存在网站根文件夹下的Templates文件夹中。e)此时该模板的所有区域都被锁定为不可编辑区，要是模板能应用于网页制作，还要在模板上设置可编辑区。f)分别设置各个可编辑区域，并把它们命名。DREAMWEAVER第24页，此课件共34页哦g)设置完可编辑区域后，选择“文件|保存”命令，将该模板保存。h)注意：在定义表格的可编辑区域是应注意，可将整个表格或表格的某个单元个设置为可编辑区

22、域，但不能同时将多个单元格设置为可编辑区域。i)问题：层和层中的内容是不同的元素。定义了层为可编辑区域和定义了层中的内容为可编辑区域有什么区别？3.创建模板时应注意两点：a)应明确新建的模板是建立在哪个站点中。b)新建的模板必须有可编辑区域。DREAMWEAVER第25页，此课件共34页哦6.2.3 模板的修改与应用1.应用模板制作网页a)选择“文件”“新建”打开“新建文档”对话框。b)在“新建文档”对话框中选择“模板”选项卡。c)在“模板用于”列表中选择包含想要使用的模板的站点。d)在该列表中选择想要使用的模板。e)单击“创建”创建一个基于模板的新页面。f)在可编辑区域进行个性化编辑。g)选

23、择“文件|保存”命令保存网页。DREAMWEAVER第26页，此课件共34页哦2.让文档与模板脱钩a)若要更改基于模板的文档的锁定区域，必须将该文档从模板分离。将文档分离之后，整个文档都将变为可编辑的。b)打开想要分离的基于模板的文档。c)选择“修改”“模板”“从模板中分离”。d)文档被从模板分离，所有模板代码都被删除。3.模板的修改与文档更新a)打开模板控制面板b)选择要编辑的模板，然后打开右键快捷菜单，选择“编辑”命令。c)然后对需要编辑的模板进行修改。DREAMWEAVER第27页，此课件共34页哦d.保存修改后的模板e.选择“修改|模板”名后，菜单中选择的命令意义选项如下：“套用模板到

24、页”，将选定的模板应用于当前的网页页面。“从模板中分离”，可是当前页面与模板中断链接关系，此时该页面上的所有区域都是可编辑的。“打开附加模板”，可打开当前页面所用的模板。“更新当前页面”“更新页面”，用指定模板更新当前整个站点中该模板作用的网页页面。DREAMWEAVER第28页，此课件共34页哦v 6.3 库的应用6.3.1 关于库项目（Library Item）1.概念：可重用的网页对象的集合。2.作用：便于插入和管理需要重复使用或经常更新的网页元素。3.特性：当库项目插入页面时，会插入一份源代码的拷贝，并创建一指向原外部项目的引用。当库项目被修改时，通过指向外部项目的引用，能一次更新整个

25、站点上的内容。DW将库项目存储在本地站点目录下得Library文件夹下DREAMWEAVER第29页，此课件共34页哦库项目可以包含任何元素，如：文本、表格等。而不能包含元素。举例：假定您在为某公司生成一个大型站点。公司想让其广告语出现在站点的每个页面上，但是销售部门还没有最后确定广告语的文字。如果创建一个包含该广告语的库项目并在每个页面上使用，那么当销售部门提供该广告语的最终版本时，您可以更改该库项目并自动更新每一个使用它的页面。6.3.2 新建一个库项目1.选择文档的一部分并另存为库项目。2.选择“窗口”“库”并将选定内容拖动到“资源”面板的“库”类别中。3.输入新的库项目的名称。DREA

26、MWEAVER第30页，此课件共34页哦4.库项目保存在站点本地根文件夹的“库”文件夹中（文件扩展名为.lbi）。注意：对于链接项（如图像），库只存储对该项的引用。原始文件必须保留在指定的位置，才能使库项目正确工作。6.3.3 往文档中添加库项目1.当向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入到文档中。2.问题：在库项目插入后，如果原库项目被删除，那么该插入部分的内容会正常显示么？3.往文档中添加库项目：a)将插入点放在“文档”窗口中。DREAMWEAVER第31页，此课件共34页哦b)选择“窗口”“库”。c)从“资源”面板向“文档”窗口拖动一个库项目，或者选择一个项目并单击

27、“插入”按钮。d)打开HTML源代码检查器，可以看到该库项目对应的代码。4.在文档中插入的库项目是作为一个整体存在的，不能修改局部的内容，但可整体删除。如果希望直接在网页中编辑该库项目，就必须断开文档中的库项目实例与库项目之间的连接。一旦库项目变成可编辑的内容，就不能再在随库项目中更新了。5.使文档中的库项目变成可编辑的内容：a)从当前文档种选择一个库项目。b)在属性检查器中单击“从源文件中分离”。DREAMWEAVER第32页，此课件共34页哦6.3.4 修改库项目1.当更改库项目时，可以选择更新使用该项目的所有文档。如果选择不更新，那么文档将保持与库项目的关联；可以在以后选择“修改”“库”

28、“刷新页面”来更新它们。2.编辑库项目时，“CSS 样式”面板和“时间轴”面板都不可用，因为库项目中只能包含 body 元素，而时间轴和 CSS 样式表代码却可以插入到文档的 head 部分。“页面属性”对话框也不可用，因为库项目中不能包含 body 标记或其属性。3.编辑库项目：a)选择“窗口”“库”。DREAMWEAVER第33页，此课件共34页哦b)选择库项目。c)单击“资源”面板底部的“编辑”按钮。或者，也可以双击库项目。d)编辑库项目然后保存更改。e)在出现的对话框中，选择是否更新本地站点上那些使用编辑过的库项目的文档。2.更改当前文档以使用所有库项目的当前版本a)选择“修改”“库”“刷新当前页”。3.更新整个站点或所有使用特定库项目的文档：a)选择“修改”“库”“刷新页面”。b)在“查看”弹出式菜单中执行下列操作之一：DREAMWEAVER第34页，此课件共34页哦