CSS应用
CSS基础
什么是css
CSS,又名层叠样式表（英文全称：CascadingStyleSheets），一般简称样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级的精确控制，支持几乎所有的字体、字号样式，拥有对网页对象和模型样式编辑的能力。
CSS的特点
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式而更新与之相关的所有页面元素。
总体来说，CSS具有以下特点。
丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，设置元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大、小写方式，修饰方式以及其他页面效果。
易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，还可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，只需要在样式列表中找到相应的样式声明进行修改。
多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
层叠？
简单地说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后设置的样式效果C5）页面压缩在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的体积增加。而将样式的声明单独放到CSS样式表中，可以大大地减小页面的体积，这样在加载页面时所用的时间也会大大地减少。另外，CSS样式表的复用更大程度地缩减了页面的体积，缩短了下载的时间。
工作原理
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名“_CSS”的外部样式单文档中。
样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。
CSS名称中的“层叠”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。
Dreamweaver工具对CSS的支持
创建CSS样式表的过程，就是对各种CSS属性的配置过程，所以了解和掌握属性配置很重要。Dreamweaver中的CSS样式包含了W3C规范定义的任何CSS1的属性，这些属性分为类型、背景、区块、方框、边框、列表、定位、扩展等8个部分。
实际界面
在Dreamweaver中实现CSS属性配置功能是完全可视化的，无须编写代码。下面分别讲解，为了便于理解，从开始创建新的CSS样式表讲起。
创建CSS样式
将插人点放在文档中，然后执行以下操作：
第一步，在“CSS样式”面板（“窗口”/“CSS样式”）中，单击面板右下角的“新建CSS样式”按钮：
第二步：在文本属性检査器中，从“样式”弹出式菜单中选择“管理样式”，然后在出现的对话框中单击“新建”。
第三步：在“相关CSS”选项卡（选择“窗口”/“标签检查器”，然后单击“相关CSS”选项卡）中单击鼠标右键，然后从上下文菜单中选择“新建规则‘第四步：选择”文本“/”CSS样式“/”新建“新建CSS样式”对话框随即出现。
实际“新建CSS样式”对话框
第五步：定义要创建的CSS样式的类型：
若要创建可作为class属性应用于文本范围或文本块的自定义样式，选择“创建自定义样式”，然后在“名称”文本框中输入样式名称。
注意：
类名称必须以句点开头，并且能够包含任何字母和数字组合（例如“mycss”）。假如没有输入开头的句点，工具将自动输入。
若要重定义特定HTML标签的默认格式，选择“重定义标签”，然后在“标签”字段中输人一个HTML标签，或从弹出式菜单中选择一个标签。
若要为某个具体标签组合或任何包含特定Id属性的标签定义格式，选择“使用CSS选择器”，然后在“选择器”文本框中输人一个或多个HTML标签，或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器（称作伪类选择器）包括a:active、a:hover、a:link和a:visited。
选择定义样式的位置：
若要创建外部样式表，选择“新建样式表文档”。
若要在当前文档中嵌人样式，选择“仅对该文档”。
最后，单击“确定”按钮即可。
CSS分类属性设置
CSS“类型”属性
定义CSS“类型”属性
使用“CSS样式定义”对话框中的“类型”类别能够定义css样式的基本字体和类型配置。
定义CSS样式的“类型”配置
在“CSS样式定义”对话框中，选择“类型”，然后配置所需的样式属性。
注意，假如认为下列任意属性不重要，可保留为空：
字体：为样式配置字体。Dreamweaver内置多个系列的英文字体。
Arial,Hilvciica,sansrserif霣Rowan,Ti??s,s?rifCouritrMrr,Co?ri?r4nonoTimesRo??o.Tiati,serifVerdana,Ariel,K?Ivetie?,s*as-i?rifGcMva,s?tLS*s*ri￡摘規字钰胃实际字体一般英文字体常用“Arial，Helvetica,sans-serif”这个系列，比较美观，假如不用这些字体系列，可通过下拉列表最下面的“编辑字体列表”来创建新的字体系列。中文网页默认字体是宋体，一般留空即可。浏览器最好选择用户系统第一种字体显示文本。两种浏览器都支持字体属性。
大小：定义文本大小。可通过选择数字和度量单位选择特定的大小，也可选择相对大小。以像素为单位能够有效地防止浏览器变形文本。
提示：CSS中长度的单位分绝对长度单位和相对长度单位，表示如下：
①px（像素）：根据显示器的分辨率来确定长度。
②pt（字号）：根据Windows系统定义的字号来确定长度。
③in、cn、mm（英寸、厘米、毫米）：根据显示的实际尺寸来确定长度。此类单位不随显示器分辨率的改变而改变。
④em:当前文本的尺寸。例如：ifont-size:2em（是指文字大小为原来的2倍。
⑤ex:当前字母“x”的高度，一般为字体尺寸的一半。
⑥％：以当前文本的百分比定义尺寸。例如：jfont-size：300%）是指文字大小为原来的3倍。
样式：将“正常”“斜体”或“偏斜体”指定为字体样式。默认配置是“正常”。两种浏览器都支持样式属性。
行髙：配置文本所在行的高度。选择“正常”自动计算字体大小的行髙，或输人一个确切的值并选择一种度量单位。比较直观的写法用百分比，例如180%是指行高等于文字大小的1.8倍。相对应的CSS属性是“line-height”。两种浏览器都支持行高属性。
修饰：向文本中添加下划线、上划线或删除线，或使文本闪烁。正常文本的默认配置是“无”。链接的默认配置是“下划线”。将链接配置设为无时，能够通过定义一个特别的类删除链接中的下划线。这些效果能够同时存在，将效果前的复选框选定即可。相对应的CSS属性是“text-decoration”。两种浏览器都支持修饰属性。
粗细：对字体应用特定或相对的粗体量。“正常”等于400;“粗体”等于700、相对应的CSS属性是“font-weight”。两种浏览器都支持粗细属性。
变量：配置文本的小型大写字母变量。DreamweaverMX2004不在“文档”窗口中显示该属性。IE支持变量属性，但NetscapeNavigator不支持。
小写：将选定内容中的每个单词的首字母大写或将文本配置为全部大写或小写。两种浏览器都支持大、小写属性。
颜色：配置文本颜色。两种浏览器都支持颜色属性。
CSS“背景”属性
应用方法
使用“CSS样式定义”对话框的“背景”类别能够定义css样式的“背景”配置。可对网页中的任何元素应用“背景”属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可配置背景图像的位置D2.定义CSS样式的“背景”配置在“CSS样式定义”对话框中，选择“背景”，然后配置所需的样式属性。
分类背景
背景颜色：配置元素的背景颜色。两种浏览器都支持背景颜色属性。
背景图像：配置元素的背景图像。两种浏览器都支持背景图像属性。
重复：定义背景图像是否重复以及怎样重复。两种浏览器都支持重复属性。
①“不重复”，在元素开始处显示一次图像。
②“重复”，在元素的后面水平和垂直平铺图像。
③“横向重复”和“纵向重复”，分别显示图像水平带区和垂直带区。图像被剪辑以适应元素的边界。
附件：确定背景图像是固定在其原始位置还是随内容一起滚动。注意，某些浏览器可能将“固定”选项视为“滚动”。正支持该选项，但NetscapeNavigator不支持。
水平位置：和垂直位置指定背景图像相对于元素的初始位置。这可用于将背景图像和页面中央垂直和水平对齐。假如附件属性为“固定”，则位置相对于“文档”窗口而不是元素。IE支持该属性，但NetscapeNavigator不支持。
配置完这些选项后，在面板左侧选择另一个CSS类别以配置其他的样式属性，或单击“确定”按钮。
CSS“区块’属性
使用”CSS样式定义“对话框的”区块“类别能够定义标签和属性的间距和对齐配置。定义”区块“配置：在”CSS样式定义“对话框中，选择”区块“，然后配置所需的样式属性。
注意，假如认为下列任意属性不重要，可保留为空：
单词间距：配置单词的间距。若要配置特定的值，在弹出菜单中选择”值“，然后输入一个数值。在第二个弹出菜单中选择度量单位。
注意：其能够指定负值，但显示取决于浏览器。Dreamweaver不在”文档“窗口中显示该属性。
实际”区块“属性
字母间距：增加或减小字母或字符的间距。若要减少字符间距，请指定一个负值（例如-4）。字母间距配置覆盖对齐的文本配置。IE4及更髙版本连同NetscapeNavigator6均支持”字母间距“属性。
垂直对齐：指定应用其元素的垂直对齐方式。仅当应用于＜img＞#签时，Dream-weaver才在”文档“窗口中显示该属性。
文本对齐：配置元素中的文本对齐方式。两种浏览器都支持”文本对齐“属性。
文本缩进：指定第一行文本缩进的程度。其能够使用负值创建凸出，但显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver才在”文档“窗口中显示该属性。两种浏览器都支持”文本缩进“属性。
空格：确定怎样处理元素中的空白。从下面三个选项中选择：”正常“，收缩空白；”保留“，保留任何空白，包括空格、制表符和回车；”不换行“，指定仅当碰到＜br＞标签时文本才换行。Dreamweaver不在”文档“窗口中显示该属性。NetscapeNavigator和IE5.5均支持”空格“属性。
显示：指定是否显示以及怎样显示元素。”无“表示关闭被指定的元素的显示。
配置完这些选项后，在面板左侧选择另一个CSS类别以配置其他的样式属性，或单击”确定“按钮。
CSS”方框“属性
使用”CSS样式定义“对话框的”方框“类别能够为控制元素在页面上的放置方式的标签和属性定义配置。其能够在应用填充和边距配置时将配置应用于元素的各个边，也能够使用”全部相同“配置将相同的配置应用于元素的任何边。
定义元素在页面上的放置方式：在”CSS样式定义“对话框中，选择”方框“，然后配置所需的样式属性。
注意，认为下列任意属性假如不重要，可保留为空：
宽和高：配置元素的宽度和高度。宽度和高度定义的对象多为图片、表格、层等。
浮动：配置元素浮动方式。其他元素按通常的方式环绕在浮动元素的周围。两种浏览器都支持浮动属性。
清除：不允许元素的浮动。”左对齐“表示不允许左边有浮动对象。”右对齐“表示不允许右边有浮动对象。”两者“表示允许两边都能够有浮动对象。”无“表示不允许有浮动对象。两种浏览器都支持”清除“属性。
填充：指定元素内容和元素边框（假如没有边框，则为边距）之间的距离。取消选择”全部相同“选项可配置元素各个边的填充。
全部相同：将相同的”填充“属性配置为其应用于元素的”上“”右“”下“和”左“侧。
边界：指定一个元素的边框（假如没有边框，则为填充）和另一个元素之间的距离。仅当应用于块级元素（段落、标题、列表等）时，DreamweaverMX2004才在”文档“窗口中显示该属性。取消选择”全部相同“可配置元素各个边的边距。
全部相同：将相同的边距属性配置为其应用于元素的”上“”右“”下“和”左“侧。
配置完这些选项后，在面板左侧选择另一个css类别以配置其他样式属性，或单击”确定“按钮。
CSS”边框“属性
使用”CSS样式定义“对话框的”边框“类别能够定义元素周围的边框的配置。
定义”边框“配置：在”CSS样式定义“对话框中，选择”边框“，然后配置所需的样式属性。
注意，假如认为下列任意属性不重要，可保留为空。
样式：配置边框的样式外观。样式的显示方式取决于浏览器。DreamweaverMX2004在”文档“窗口中将所有样式呈现为实线。两种浏览器都支持”样式“属性。取消选择”全部相同“可配置元素各个边的边框样式。
全部相同：将相同的边框样式属性配置应用于元素的”上“”右“”下“和”左“侧。
宽度：配置元素边框的粗细。两种浏览器都支持”宽度“属性。取消选择”全部相同“可配置元素各个边的边框宽度。
全部相同：将相同的边框宽度配置应用于元素的”上“”右“”下“和”左“侧。
颜色：配置边框的颜色。能够分别配置每个边的颜色，但显示取决于浏览器。取消选择”全部相同“可配置元素各个边的边框颜色。”全部相同“表示将相同的边框颜色配置应用于元素的”上“”右“、”下“和”左“侧。
配置完这些选项后，在面板左侧选择另一个CSS类别以配置其他样式属性，或单击”确定“按钮。
CSS”列表“属性
使用”CSS样式定义“对话框中的”列表“类别可为列表标签定义列表配置。
定义”列表“配置：在”CSS样式定义“对话框中，选择”列表“，然后选择所需的样式属性。
注意，假如认为下列任意属性不重要，可保留为空。
类型：配置项目符号或编号的外观。两种浏览器都支持”类型“属性。
项目符号图像：能够为项目符号指定自定义图像。单击”浏览“按钮选择图像或键人图像的路径。
位置：配置列表项文本是否换行和缩进以及文本是否换行到左边。
配置完这些选项后，在面板左侧选择另一个CSS类别以配置其他样式属性，或单击”确定“按钮。
CSS”定位“属性
使用”定位“样式属性时最好选择参数中定义层的默认标签，将标签或所选文本块更改为新层。
定义”定位“配置：在”CSS样式定义“对话框中，选择”定位“，然后配置所需的样式属性。
注意，假如认为下列任意属性不重要，可保留为空。
类型：确定浏览器应怎样来定位层。
绝对：使用”定位“框中输人的坐标（相对于页面左上角）来放置层。
相对：使用”定位“框中输入的坐标（相对于对象在文本中的位置）来放置层。该选项不显示在”文档“窗口中。
静态：将层放在它在文本中的位置。
显示：确定层的初始显示条件。假如不指定可见性属性，默认情况下大多数浏览器都继承父级的值。选择以下可见性选项之一：
①继承：继承层父级的可见性属性。假如层没有父级，则它将是可见的。
②可见：显示该层的内容，而不管父级的值是什么。
③隐藏：隐藏这些层的内容，而不管父级的值是什么。
Z轴：确定层的堆叠顺序。编号较髙的层显示在编号较低的层的上面。其值能够为正，也能够为负（注：使用”层“面板更改层的堆叠顺序更容易）。
溢出（仅限于CSS层）：确定在层的内容超出其大小时将发生的情况。这些属性控制怎样处理此扩展：
①可见：增加层的大小，使它的任何内容均可见。层向右下方扩展。
②隐藏：保持层的大小并剪辑任何超出的内容。不提供任何滚动条。
③滚动：在层中添加滚动条，不论内容是否超出层的大小。专门提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。该选项不显示在”文档“窗口中，并且仅适用于支持滚动条的浏览器。IE和NetscapeNavigator6支持此属性。
④自动：使滚动条仅在层的内容超出它的边界时才出现。该选项不显示在”文档“窗口中。
⑤定位：指定层的位置和大小。浏览器怎样解释位置取决于”类型“配置。假如层的内容超出指定的大小，则大小值被覆盖。
位置和大小的默认单位是像素。对于CSS层，还能够指定下列单位：pc（十二点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）、ems、exs或％（父级值的百分比）。缩写必须紧跟在值之后，中间不留空格，例如：3mm。
剪辑：定义层的可见部分。假如指定了剪辑区域，能够通过脚本语言访问，并操作属性以创建特别效果。通过使用”改变属性“行为能够配置这些效果。
配置完这些选项后，在面板左侧选择另一个CSS类别以配置其他样式属性，或单击”确定“按钮。
CSS”扩展“属性
”扩展“样式属性包括”过滤器“”分页“和”光标“选项，它们中的大部分效果仅被IE4.0和更高版本所支持。
定义”扩展“配置：在”CSS样式定义“对话框中，选择”扩展“，然后配置所需的样式属性。
注意，假如认为下列任意属性不重要，可保留为空。
分页：在打印期间，在样式所控制的对象之前或之后强行分页。选择要在弹出式菜单中配置的选项。此选项不被任何版本浏览器所支持，但可能被未来的浏览器所支持。
光标：位于”视觉效果“下的”光标“选项，是光标显示属性配置。当指针位于样式所控制的对象上时改变指针图像。其详细说明见实际。
过滤器：又称CSS滤镜，对样式所控制的对象应用特别效果。”滤镜“属性使页面变得更加漂亮。从”过滤器“弹出式菜单中选择一种效果并视具体需要加以配置。各种CSS滤镜属性的详细介绍请在导航条中选择”滤镜属性“按钮浏览。
其功能见实际。
实际滤镜功能
滤镜说明
Alpha透明的渐进效果
BlendTrans淡人/淡出效果
Blur风吹模糊的效果
Chroma指定颜色透明
DropShadow阴影效果
续表
滤镜说明
FlipH水平翻转
FlipV垂直翻转
Glow边缘光晕效果
Gray彩色图片变灰度图
Invert底片的效果
Light模拟光源效果
Mask矩形遮罩效果
RevealTrans动态效果
Shadow轮廓明影效果
Wave波浪扭曲变形效果
XrayX光照片效果
实际中列出了16项滤镜及说明，下面作进一步介绍：
”Alpha“滤镜：其在Flash和Photoshop中经常见到。它们的作用基本类似，就是把一个目标元素和背景混合。能够指定数值来控制混合的程度。这种”和背景混合“功能通俗地说就是个元素的透明度。
”BlendTrans“滤镜：此功能比较单一，就是产生一种精细的淡人/淡出的效果。
”Blur“滤镜：把它加载到文字上，可产生风吹模糊的效果，类似立体字，这为在网页上制作立体字标题带来了方便。也可把”Blur“滤镜加载到图片上，以达到用图像处理软件制作的效果。
”DrepShadow“滤镜：顾名思义就是为对象添加阴影效果。其实际效果看上去就像原来的对象离开了页面，然后在页面上显示出该对象的投影。
CSS的无参数滤镜共有6个（FlipH、FlipV、Invert、Xray、Gray和Light），虽然它们没有参数，相对来讲，灵活性要差点，但它们用起来更方便，效果也相当明显。用它们能够使文字或图片翻转、获得图片的”底片“效果，甚至能够制作图片的”X光片“效果。
”Glow“滤镜：使对象的边缘产生类似发光的效果，操作很简便。
”Mask“滤镜：为网页上的元件对象作出一个矩形遮罩效果。
”Wave“滤镜：它的作用是把对象按照垂直的波形样式进行扭曲。
”Light“滤镜：它能产生一个模拟光源的效果，配合使用简单的JavaScript，使对象产生奇特的光照效果。
RevealTrans”动态滤镜：它能产生23种动态效果，还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态转换很方便。
编辑CSS样式
更改css样式
为了使网页设计的风格统一和更加完美，有时需要更改设置好的CSS样式。在Dreamweaver中可以通过“CSS样式”面板进行更改，操作如下：
首先，打开“CSS样式”面板。
实际“CSS样式”面板
其次，在“所有规则”当中选中要更改的样式。
最后，使用右下角的“编辑CSS规则”按钮，
宁波网站设计弹出该样式的规则定义对话框，对其进行设置；或者在“属性”区域中进行更改；或者双击“所有规则”中要更改的样式名称，弹出该样式的规则定义对话框，对其进行设置。
删除CSS样式
如果想要删除已有的样式，同样可以通过“CSS样式”面板删除。打开“CSS样式”面板，在“所有规则”当中选中要更改的样式，使用右下角的“删除css规则”按钮即可删除已有的样式规则。
导出CSS样式
在Dreamweaver中可以将网页当中的内部样式导出。
将光标定位在该文档中，单击“文件”菜单，选择“导出”当中的“CSS样式”命令；或者利用“文本”菜单中的“导出”命令，弹出如实际所示的对话框，选择保存路径，并写上文件名称即可。
导出样式为csa件
实际保存CSS
应用外部样式表
在制作网页的过程中，有时需要使用已有的“外部样式表”文件。通常来讲，有两种方式可以使用外部样式表：
一种是链接样式表，其代码如下：
/*Nl.css为外部样式表文件的名称*/
另一种是导入样式表，其代码如下：
@import“mystyle.cssn；/*mystyle.css为外部样式表文件的名称*/
两种方式的显示效果略有区别：
连接式：会在装载页面主体部分之前装载CSS文件，这样显示出来的网页从一开始就是带有样式效果的；导入式：会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下无样式的页面，闪烁一下之后再出现设置样式后的效果，从浏览者的感受来说，这是导人式的一个缺陷。
在Dreamweaver中可以通过以下操作步骤实现使用外部样式表：
打开”CSS样式“面板。
单击面板的”链接样式表“按钮，将指定的外部样式表文件链接到当前文档。
在当前文档中应用外部样式表中的CSS样式。
样式冲突解决
在网页的制作过程中，有时候两个或者多个样式规则会使用在同一个元素上。通常有两种情况：一种是应用于同一元素的多个规则分别定义了元素的不同属性，多个规则同时起作用；另一种是两个或者多个声明使用在同一个元素上。这就可能带来冲突。例如：在同一个网页中，应用的外部样式表中规定中字体为12pt，而在正文中存在这样的代码：
样式冲突
此时，就产生了样式冲突。
如果产生了样式冲突该怎么解决呢？
通常浏览器的解决方法是就近原则，以后为准。实质上这是由样式事先设置的优先级决定的。
课堂练习
练习目标
熟练掌握样式表的建立方法。
学会使用样式表进行页面美化工作。
练习题目
制作一个诗歌网站，包括”主页“”诗人简介“”古代诗歌鉴赏“和”近代诗歌鉴赏“4个页面。
练习要求
正确建立样式式表。
通过样式表，设定诗歌标题加大、加粗、居中、彩色显示。
通过样式表，设计诗歌正文的字体样式、字体大小和行距。
通过样式表，设定页面背景图。
通过样式表，设定页面排版大小、间距等。
页面美观大方。
层与行为
层基础
层是指某个事物在结构或功能方面的等级秩序。层具有多样性，可按物质的质量、能量、运动状态、空间尺度、时间顺序、组织化程度等多种标准划分。不同层次具有不同的性质和特征，其既有共同的规律，又各有特殊规律。
在网页设计中，图层是网页的一个区域，在一个网页中可以有多个图层存在，它最大的魅力在于各个图层可以重叠，并且可以决定每个图层是否可见，同时也能够自定义各图层之间的层次关系。熟练掌握图层技术，可以给网页提供强大的页面控制能力。
层工具提供弹性的画面设计功能，就像Word的图文框，可以放人任何网页组件，包含文本、图像或其他任何可以在HTML文档正文中放人的内容。它的最大好处是可以任意移动位置，并互相重叠。因此，也可以认为层其实是一个更小的空白网页，在里面可以插人任何网页组件，从而为网页设计提供灵活、多变的架构。
在Dreamweaver中，自CS5版本以后，系统采取使用＜div＞标签和CSS技术来实现AP层对象的效果，所以也称为绝对定位的＜div＞标记。
创建层
创建层相对简单。
第一步，把Dreamweaver的工作界面切换至”标椎扩展。
计“界面，然后在工作窗口的上方找到”布局“工作实际”布局“工作栏栏，单击布局模式上的按钮。
第二步，在网页编辑区按住鼠标左键进行拖动即可创建层。
d代《分」|也十1标嚴咧的番鼻
绘制层
实际创建层
第三步，在层中插人页面元素内容。
层的编辑
修改层的位置与大小
在Dreamweaver中修改层的位置与大小与在Word中编辑图片类似。选中所要编辑的层，在层的四周会出现黑色节点，对这些节点进行拖放操作就可达到预计的效果了。
实际修改层的大小与位置
拖动到适＞当大小
删除层
在页面上用鼠标单击图层边框，选中某个图层后，按键盘上的Delete键即可删除该图层。
注意：当删除某个图层时，会将该图层所包含的页面元素一并删除。
通过”层“面板修改层
在Dreamweaver的工作界面中，在右上角找到”设计“面板，打开”层“标签页，就可以打开”层“面板，在这个面板中可对层进行修改编辑。
层的组合应用
嵌套图层
所谓嵌套图层指的是一个图层创建在另外一个图层中，实际上制作这种嵌套图层很简单，只要创建一个父图层之后用鼠标点击图层内部，再次插人一个图层即可。不过嵌套的图层并不意味着子图层必须要在父图层内部，它们之间存在着继承关系。
继承的作用是使子图层的可见性和父图层保持一致，由于很多动态网页的特效是通过控制图层的可见性来实现的，因此当父图层的可见性改变时，子图层的可见性也随之改变。继承关系也可以让子图层和父图层的相对位置不变，比如拖曳父图层使其移动，此时子图层也会随着移动，这在制作动态网页的时候非常有用。
操作方法如下：
第一步，打开Dreamweaver,新建一个文件，在文件内创建一^图层。
第二步，用鼠标点击层内，当光标在层内闪动时点击”描绘层“按钮，并将其拖动到层内，就新创建了一个嵌套的层了。
实际嵌套层
第三步，査看代码，可以发现一个子层嵌套在一个父层内了。
第四步。子层属性内的左和上分别是指子层的左边到父层左边的距离和上边到母层上边的距离。这就把子层和父层的关系固定了。拖动父层时子层跟随着一起移动。
设置图居顺序
和表格相比，图层的最大优势在于图层可以重叠，为了表示各个图层哪个在上面，哪个在下面，要给每个图层设定一个序号，这个序号就是”Z-顺序“，它的意思就是除了屏幕的X和Y坐标之外，人为增加一个垂直于屏幕的Z轴。
—旦在Dreamweaver中修改了AP元素的堆叠顺序，也就自动确定了AP元素在Z轴上的层级位置。Z轴上的数字越大，该元素就越靠近用户；Z轴上的数字越小，该元素就越远离用户。在同一位置上，如果有两个或两个以上的HTML元素同时存在，那么Z轴上数字最大的那个元素，必定会遮盖那些Z轴上数字比较小的元素而单独呈现在用户面前，也就是在同一位置上，用户只能看到Z轴上数字最大的那个元素，而看不到其他元素。
在Dreamweaver中要设置AP元素的堆叠顺序，首先要打开需要编辑的HTML文档，点击”设计“视图，使文档处于”设计“视图的编辑窗口中，然后按照下面的步骤进行操作：
方法一，使用”属性“面板设置AP元素的堆叠顺序。
单击”窗口“菜单，选择”AP元素“命令，打开”AP元素“面板，查看AP元素当前的堆叠顺序。
在文档的”设计“视图窗口中，或者在”AP元素“面板中，选择要更改Z轴值的AP元素。
单击”窗口“菜单，选择”属性“命令，打开AP元素的”属性“窗口。
在”Z轴“文本框中输入需要的数字，即可改变该AP元素的堆叠顺序：
输人比原来大的数字可以使AP元素在堆叠顺序中往上移；输人比原来小的数字可以使AP元素在堆叠顺序中往下移。
方法二，使用”AP元素“面板设置AP元素的堆叠顺序。
单击”窗口“菜单，选择”AP元素“命令，打开”AP元素“面板。
在”AP元素“面板中，双击要修改Z轴值的AP元素旁的Z轴数字。
双击”2“使之成为可编辑的状态，再输入需要的数字，然后按回车键，即可更改AP元素的堆叠顺序。
小技巧：
在”AP元素“面板中，AP元素是按照Z轴值的顺序排列的，Z轴值越大，排列越靠近顶部，反之，Z轴值越小，排列越靠近底部。
使用图层建立表格
虽然使用图层来定位网页元素比使用表格方便得多，但是只有IE4.0以上版本的浏览器才支持图层功能，因此为了让使用旧版本浏览器的用户也可以看到相关作品，最好的方法就是把图层转换为表格。
第一步：在窗口中选取上部的”防止重叠“复选框，这样使每个图层不能互相重叠，否则在转换过程中会有警告信息提示。
第二步：运行”修改“/”转换“/”层到表格“命令，在”表格布局“区域中分别选择”最精确“和”使用透明GIFs“两个选项。前者通过精确转换为每个图层建立一个单元格，确保各个单元格之间的距离；后者在转换的表格最后一行中填充透明的GIF图，这样可以保证网页在所有浏览器中都有相同的外观。
第三步：按”OK“按钮，完成图层到表格的转换操作。
提示：Dreamweaver还提供了从表格到图层的转换功能，操作步骤类似。
层与时间轴的应用
与层密切相关的另一个功能是时间轴，利用时间轴可以实现动画效果。随着时间的变化改变层的位置、尺寸、可视性以及叠放顺序可以实现更多的效果。
”时间轴“面板
使用”Alt+F9“快捷键或者在菜单”窗口“中选择”时间轴“即可打开”时间轴“面板。面板样式如实际所示。
司轴m回退后退胃播故胃帧频胃动撒
iTimglinslH|^||[l斗|Fpe|15「自动播放厂
实际”时间轴“面板
下面说明各部分的作用：
”播放头“：显示当前页面上的层是时间轴的哪一帧。
”动画通道“：显示层与图像的动画条。
”动画条“：显示每个对象的动画持续时间。
”关键帧“：在动画条中被指定动画属性的帧。
”行为通道“：在时间轴上某一帧执行指令的显示。
”帧频“：每秒钟播放的帧数，但超过用户浏览器可处理的速率会被忽略掉，15FPS是平均较好的速率。
”自动播放“：选中后，在浏览器打开页面，动画就自动播放。
”循环“：选中后在浏览器中会无限循环播放动画，在行为通道中可以看到循环的标签，双击标签可以修改行为的参数和循环次数。
劍建时间轴动画
第一步：在文档窗口插人一个层，并在层中插人素材包中的”qiqhi.gif“图片。
第二步：选中层，将层用鼠标拖曳到”时间轴“面板中，此时一个动画条出现在时间轴的第一个通道中，层的名字出现在动画条中。
实际设定第15帧
第四步：选中层，将层用鼠标拖曳到动画结束的地方，这里设定在文档窗口右下角，此时一条线段显示出动画运动的轨迹。
实际拖动动画运动轨迹
第五步：至此，一个动画创建完毕，按”播放“按钮可以浏览动画效果。选中”自动播放“和”循环“，保存文件后在浏览器中也能看到动画效果。
第六步：如果想改变运动路径，则需要添加关键帧，在第7帧处用鼠标右键添加一个关键帧。
实际添加关键帧
在文档窗口选定层，并将层拖曳到需要的位置，可以看到运动的轨迹发生了相应的变化。
实际轨迹变化
行为的应用
行为是Dreamweaver中最有特色的功能，它可以让用户不用书写一行JavaScript代码即可实现多种动态网页效果。Dreamweaver提供了很多动作，它们其实就是标准的JavaScript程序，每个动作可以完成特定的任务。这样，如果所需要的功能在这些动作中，那么就不需要自己编写JavaScript代码了。
下面介绍常见行为的使用方法。
弹出消息框
如果希望进人网站首页的时候用一个弹出的消息框来显示一些内容，可以通过下述方法实现：
第一步：在Dreamweaver主窗口中新建一个页面，接着运行”窗口“/”行为“命令激活行为面板。
第二步：在行为面板中点击”+“按钮，在弹出菜单中选择”弹出消息“命令，这时可以在窗口中输人提示信息。
第三步：添加提示文字之后，控制面板中多出一个名为”弹出消息“的行为，此时单击左部的下拉菜单，并且从中选择”载人“一项，这样进人页面之后就会自动执行设置的行为，自然也就能够看见弹出的消息框了。
提示：在下拉菜单中还可以选择”键盘按下“”鼠标按下“等行为，其使在按下键盘上的按键或者单击鼠标之后出现消息框。
链接解释文字
在浏览一些网页的时候，将鼠标放在图像或者链接上会有解释文字出现，这种效果可以通过下述步骤实现：
第一步：在Dreamweaver的编辑窗口中插人一张图片，单击这张图片，在”属性“面板的链接输人框内填写”#“号让它链接本页。
第二步：通过”插人“/”布局对象“/”层“命令在图像旁边添加一个层，并且输人需要显示的话。选择这个层之后，在”属性“面板中将”可见性“属性设置为”隐藏“来隐藏该层。
第三步：选择图像之后，通过”窗口“/”行为“命令激活”行为“面板，单击”+“按钮并选择”显示“/”隐藏层“。在弹出的窗口中选择需要显示的层，接着单击下部的”显示“按钮，确认之后在”行为“面板中多出了一个名为”鼠标悬停“的事件。此时单击”+“按钮并选择”鼠标悬停“项，这样当鼠标放在图像上时就可以显示该层，即出现浮动的文字解释。
第四步：参照第三步为刚才的层添加”隐藏“事件，并且将行为设置为”鼠标离开“，这样鼠标拿开时就可以隐藏该层了。
完成上述操作之后，按F12键即可打开IE浏览器进行预览，当鼠标移动到这个图片上的时候会出现预先设置好的提示字样，而鼠标移开图片时字样自动隐藏。
自动调整窗口大小
有些网页在改变窗口大小的时候也会随之调整网页页面大小，因此窗口过大就不会有空白处，窗口过小边缘就不会跑出移动条。这种自动调整页面大小的功能，在Dreamweaver中可以参照下述步骤来实现：
第一步：新建一个页面，然后通过”插人“/”表格“命令插入一个1行3列的表格，此时可以先不管它的宽度，而是通过下述设置让它自动伸展以适合浏览器窗口。
第二步：这时可以看见每个单元格下部都标明了宽度且有一个小三角形。在这个表格中，可以设定哪部分是需要固定的，不过只能让一列自动伸展，比如设定最后一列随着窗口大小的变化自动伸展。
第三步：选中最后一列，运行”查看“/”表格模式“/”布局模式“命令，在弹出的菜单中选择”获取列信息“。
第四步：接着将出现对话框，并且会提示为了能够使行伸展，Dreamweaver需要放置一些间隔图片在其他列中，在此选择”创建一个占位图像“，这样图片在浏览器窗口中不会显示出来，而是起固定表格的作用。
第五步：确认之后返回原先的编辑窗口，可以看见最后一列已经自动伸展填充了整个浏览器窗口，而另外两列则保持固定的宽度。
提示：设定自动伸展的列可以在列上端看见一个波浪线。
完成上述操作之后，在IE浏览器中预览页面效果的时候，如果改变窗口的大小，则最后一列的宽度也会随之变化，而前两列的宽度保持不变。
拖动图层的应用
某些网页中，一些类似的图片或文字，可以通过鼠标点击拖拉任意改变位置，这种效果一般是通过”拖动图层“来完成的，而拖动图层的实现需要鼠标事件的响应，比如”Onclick、OnMouseOver等。下面以插人一个图片拖动图层为例进行说明。
先建一个图层放人需要的内容，比如插入一张图片。
单击选中图层，同时进入动作浮动面板（直接按“Shift+F3”组合键即可），选取“+”号列表中的“DragLayer”项，如果这时该选项不可使用，可以调整动作事件支持的浏览器类型和版本，这时弹出DragLayer编辑窗口。
DragLayer编辑窗口包括两个标签“Basic（基础）”和“Advanced（髙级）”，下面解释一下各标签下各项内容的含义。
①“Basic”标签下：
“Layer”：网页中使用的所有图层的选择列表，默认即当前操作图层。
“Movement”：移动选项。“Unconstrained（不受限制）”表示可以在网页中的任何位置拖动，“Constrained（受限制）”表示控制目标图层的拖动范围，选中以后在菜单后面自动产生的“Up”“Down”“Left”“Right”输人框中键入定位数字。
“DragTarget”：拖动图层在网页中的位置，单击“GetCurrentPosition”获取当前位置。
“SnapIfWithin”：允许的最大误差，单位为px。
②“Advanced”标签下：
“DragHandle”：指定拖动图层的响应范围，即鼠标在哪些位置才能拖动图层。
?EntireLayer“：表示任何位置都可拖动。
”AreaWithinLayer“：指定拖动范围，选中以后在后面的定位输人框中键人数值，注意这是相对图层而言的。
”WhileDragging“：多个拖动图层时使用，决定显示关系。
按”确定“按钮以后，拖动图层即完成，默认使用的事件为Onclick（单击），若想把它改成OnMouseOver（鼠标悬停）事件，单击”Actions（动作）“下的小三角形选”OnMouseOver（鼠标悬停）“即可，这时不需要单击”激活“，只要将鼠标滑动到图层上就可以拖动了。按F12键可以预览拖动效果。
利用图层隐藏不可见内容
制作作网页时，有时需要某些元素或内容在网页载人时始终不显示出来，只有单击某特定按钮时才显示出来，这时应用图层来处理应该是最好的选择。
把”Objects（项目）“面版调出来，插人两个按钮。注意，两个按钮的”Action（动作）“选”None（无）“，否则不能做出效果。
把图层里的内容准备好，并把它设为隐含。图层里的内容由制作者决定，在这里假设为”反馈信息，根据你的需要来更改图层中的内容。“点击”显示反馈信息“按钮，调出”Behaviors（行为）“菜单，加人”Events（事件）“显示图层，”Actions（动作）“不要改动，千万不要把它改为”OnMouseOver（鼠标悬停）“，否则这个按钮没用。
点击”隐藏反馈信息“按钮，同样加人”Events（事件）“隐藏图层。
本文转载自
宁波网站设计www.leseo.net
补充词条：宁波谷歌seo
宁波seo哪家好
宁波网站排名优化
宁波网站seo
宁波网站seo优化
