你的位置:首页>>Dreamweaver教程>>Dreamweaver 8.0学习教程 - 使用CSS美化页面

Dreamweaver 8.0学习教程 - 使用CSS美化页面

发表时间：2006-11-22 下午 06:52:54

浏览次数：

层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常为 <head> 部分）中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。
术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到您的 Web 页面上的元素，并最终创建您想要的设计。
CSS样式表的创建，可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效果。在Dreamweaver 8中CSS样式的设置方式有了很大的改进，更为方便、实用、快捷。
一、创建CSS样式
1、选中菜单“窗口”>“CSS样式”。打开CSS样式面板。

2、单击“CSS样式”面板右下角的“新建CSS规则”按钮，打开“新建CSS规则”对话框。

在“选择器类型”选项中，可以选择创建CSS样式的方法包括以下三种：
    类：我们可以在文档窗口的任何区域或文本中应用类样式，如果将类样式应用于一整段文字，那么会在相应的标签中出现CLASS属性，该属性值即为类样式的名称。
    标签（重新定义特定标签的外观）：重新定义HTML标记的的默认格式。我们可以针对某一个标签来定义层叠样式表，也就是说定义的层叠样式表将只应用于选择的标签。例如，我们为<body>和</body>标签定义了层叠样式表，那么所有包含在<body>和</body>标签的内容将遵循定义的层叠样式表。
    高级（ID、伪类选择器等）：为特定的组合标签定义层叠样式表，使用ID作为属性，以保证文档具有唯一可用的值。高级样式是一种特殊类型的样式，常用的有4种：
    a:link 设定正常状态下链接文字的样式。
    a:active   设定鼠标单击时链接的外观。
    a:visited 设定访问过的链接的外观。
    a:hover   设定鼠标放置在链接文字之上时，文字的外观。
    3、为新建CSS样式输入或选择名称、标记或选择器，其中：
    对于自定义样式，其名称必须以点（.）开始，如果没有输入该点，则DW回自动添加上。自定义样式名可以是字母与数字的组合，但.之后必须是字母。
    对于重新定义HTML标记，可以在“标签”下拉列表中输入或选择重新定义的标记。
    对于CSS选择器样式，可以在“选择器”下拉列表中输入或选择需要的选择器。
    4、在“定义在”区域选择定义的样式位置，可以是“新建样式表文件”或“仅对该文档”。单击“确定”按钮，如果选择了“新建样式表文件”选项，回弹出“保存样式表文件为”对话框，给样式表命名，保存后，回弹出“CSS规则定义”对话框。如果选择了“仅对该文档”，则单击“确定”后，直接弹出“CSS规则定义”，在其中设置CSS样式。

5、“CSS规则定义”对话框中设置CSS规则定义。主要分为类型、背景、区块、方框、边框、列表、定位和扩展8项。每个选项都可以对所选标签做不同方面的定义，可以根据需要设定。定义完毕后，单击“确定”按钮，完成创建CSS样式。
    二、使用CSS样式美化页面
    在“CSS规则对话框”中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来美化我们的页面，当然啦，我们在定义某个CSS样式的时候，不需要对每一个项都进行设置，需要什么效果，选择相应的项进行设置就可以了。
    1、文本样式的设置
    新建CSS样式, “选择器类型”为类，名称为 “style1”定义在“仅对该文档”。保存至站点根目录下的CSS文件夹内，弹出“CSS规则定义”对话框，默认显示的就是对文本进行设置的“类型”项。
    字体：可以在下拉菜单种选择相应的字体。
    大小：大小就是字号，可以直接填入数字，然后选择单位。
    样式：设置文字的外观，包括正常、斜体、偏斜体。
    行高：这项设置在网页制作种很常用。设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。需要注意的是，单位应该和文字的单位一致，行高的数值是包括字号数值在内的。例如，文字设置为12pt，如果要创建一倍行距，则行高应该为24pt。
    变量：在英文种，大写字母的字号一般比较大，采用“变量”中的“小型大写字母”设置，可以缩小大写字母。
颜色：设置文字的色彩。
    2、背景样式的设置
    在HTML中，背景只能使用单一的色彩或利用图像水平垂直方向的平铺。使用CSS之后，有了更加灵活的设置。
    在CSS规则定义”对话框左侧选择“背景”项，可以在右边区域设置CSS样式的背景格式。
    背景颜色：选择固定色作为背景。
    背景图像：直接填写背景图像的路径，或单击“浏览”按钮找到背景图像的位置。
    重复：在使用图像作为背景的时，可以使用此项设置背景图像的重复方式，包括“不重复”、“重复”、“横向重复”、和“纵向重复“。
    附件：选择图像做背景的时候，可以设置图像是否跟随网页一同滚动。
    水平位置：设置水平方向的位置，可以“左对齐“右对齐”、“居中”。还可以设置数值与单位结合表示位置的方式，比较常用的是像素单位。
    垂直位置：可以选择“顶部”、“底部”、“居中”。还可以设置数值和单位结合表示位置的方式。
    3、区块样式设置
    在CSS规则定义”对话框左侧选择“区块”项，可以在右边区域设置CSS样式的区块格式。
    单词间距“英文单词之间的距离，一般选择默认设置。
    字母间距：设置英文字母间距，使用正值为增加字母间距，使用负值为减小字母间距。
    垂直对齐：设置对象的垂直对齐方式。
    文本对齐：设置文本的水平对齐方式。
    文字缩进：这是最重要的项目。中文文字的首行缩进就是由它来实现的。首先填入具体的数值，然后选择单位。文字的缩进和字号要保持统一。如字号为12px，像创建两个中文自的缩进效果，文字缩进就应该为18px。
    空格：对源代码文字空格的控制。选择“正常”，忽略源代码文字之间的所有空格。选择“保留”，将保留源代码中所有的空格形式，包括由空格键、Tab键、Enter键创建的空格。
    显示：制定是否以及如何显示元素。选择“无”则关闭它被制定给的元素的显示。在实际控制中很少使用。
    4、方框样式的设置
    在前面我们设置过图像的大小、设置图像水平和垂直方向上的空白区域、设置图像是否有文字环绕效果等。方框设置进一步完善、丰富了这些设置。
    在CSS规则定义”对话框左侧选择“方框”项，可以在右边区域设置CSS样式的方框格式。
    宽：通过数值和单位设置对象的宽度。
    高：通过设置和单位设置对象的高度。
    浮动：实际就是文字等对象的环绕效果。选择“右对齐”、对象居右。文字等内容从另外一侧环绕对象。选择“左对齐”。对象居左，文字等内容从另一侧环绕。“无”取消环绕效果。
    清除：规定对象的一侧不许有层。可以通过选择“左对齐”、“右对齐”，选择不允许出现层的一侧。如果在清除层的一侧有层，对象将自动移到层的下面。“两者”是指左右都不允许出现层。“无”是不限制层的出现。
    “填充”和“边界”：如果对象设置了边框，“填充”是指边框和其中内容之间的空白区域；“边界”是指边框外侧的空白区域。
    5、边框样式设置
    边框样式设置可以给对象添加边框，设置边框的颜色、粗细、样式。
    在CSS规则定义”对话框左侧选择“边框”项，可以在右边区域设置CSS样式的边框格式。
    样式设置边框的样式，如果选中“全部相同”复选框，则只需要设置“上”样式，其它方向的样式与“上”相同。
    宽度：设置4个方向边框的宽度。可以选择相对值：细、中、粗。也可以设置边框的宽度值和单位。
    颜色：设置边框对应的颜色，如果选中“全部相同”复选框，则其他方向的设置都与“上”相同。
    6、列表样式设置
    CSS中有关列表的设置丰富了列表的外观。在CSS规则定义”对话框左侧选择“列表”项，可以在右边区域设置CSS样式的列表格式。
    类型：设置引导列表项目的符号类型。可以选择圆点、圆圈、方块、数字、小写罗马数字、大写罗马数字、小写字母、大写字母、无列表符号等。
    项目符号图像：可以选择图像作为项目的引导符号，单击右侧的“浏览”按钮，找到图像文件即可。选择ul标签可以对整个列表应用设置，选中li标签可对单独的项目应用。
    位置：决定列表项目缩进的程度。选择“外”，列表贴近左侧边框，选择“内”，列表缩进。这项设置效果不明显。
    7、定位样式设置
    “定位”项实际上是对层的设置，但是因为DW提供了可视化的层制作功能，所以此项设置在实际操作中几乎不会使用。
    8、扩展样式的设置
    CSS样式还可以实现一些扩展功能，这些功能集中在扩展面板上。这个面板主要包括3种效果：分页、光标和过滤器。在CSS规则定义”对话框左侧选择“扩展”项，可以在右边区域设置CSS样式的扩展格式。
    分页：通过样式来为网页添加分页符号。允许用户指定在某元素前或后进行分页。分页的概念是打印网页种的内容时在某指定的位置停止，然后将接下来的内容继续打印在下一页纸上。
    光标：通过样式改变鼠标形状，鼠标放置于被此项设置修饰的区域上的时，形状会发生改变。具体的形状包括：Hand（手）、crosshair（交叉十字）、text（文本选择符号）、wait（Windows的沙漏形状）、default（默认的鼠标形状）、help（带问号的鼠标）、e-resize（向东的箭头）、ne-resize（指向东北方的箭头）、n-resize（向北的箭头）、nw-resize（指向西北的箭头）、w-resize（向西的箭头）、sw-resize（向西南的箭头）、s-resize（向南的箭头）、se-resize（向东南的箭头）、auto（正常鼠标）。）
    过滤器：使用CSS语言实现过滤器（滤镜）效果。单击“过滤器”下拉列表框旁的按钮，可以看见有多种滤镜效果可供选择。

滤镜效果	描述
Alpha	设置透明效果
Blru	设置模糊效果
Chroma	把指定的颜色设置为透明
DropShadow	设置投射阴影
FlipH	水平反转
FlipV	垂直反转
Glow	为对象的外边界增加光效
Grayscale	降低图片的彩色度
Invert	将色彩、饱和度以及亮度值完全反转建立底片效果
Light	设置灯光投影效果
Mask	设置遮罩效果，Color指定遮罩的颜色
Shadow	设置阴影效果
Wave	设置水平方向和垂直方向的波动效果
Xray	设置X光照效果

三、样式表的其他操作
单击CSS样式面板右上方的扩展按钮，弹出下图所示的菜单。CSS的相关操作都是通过这个菜单上的项目来实现的。

1、编辑CSS样式
    选中需要编辑的样式类型，选择上图中的“编辑”项或直接单击“编辑样式”按钮，在弹出的“CSS规则定义”对话框中修改相应的设置。编辑完成后单击“确定”按钮，CSS样式就编辑完成了。
    2、应用CSS自定义样式
    鼠标右键单击在网页中被选中的元素，在弹出的快捷菜单中选择“CSS样式”，在其子菜单中选择需要的自定义样式。
    3、附加样式表
    选择“附加样式表”项，打开“链接外部样式表”对话框，可以链接外部的CSS样式文件。
    “文件/URL”设置外部样式表文件的路径，可以单击浏览按钮，在浏览窗口中找到样式表文件。
    “添加为”选择“链接”，这IE和Netscape两种浏览器都支持的导入方式。“导入”只有Netscape浏览器支持。

设置完毕后单击“确定”按钮，CSS文件即被导入到当前页面。

四、CSS滤镜实例
    1、制作模糊文字效果
    1、新建05.html的文件插入一个1行1列的表格，边框和边距全部设置为0。然后在表格中输入要修饰的文字。
    2、打开CSS样式面板，创建一个CSS样式，在弹出的“新建样式对话框”做如下设置。
    3、设置完成后，单击“确定”按钮弹出“CSS样式定义”对话框，在类型设置区域中设置：大小：60，字体：黑体，粗细：粗，颜色：＃FF9900。
    4、要产生文字特效，最重要的是在扩展设置区域中进行特殊设置。
    Blur滤镜产生像被风吹一样的模糊效果。打开滤镜选项的下拉菜单，对Blur滤镜进行设置：
    Blur(Add=?, Direction=?, Strength=?)
    Add参数是一个布尔值，一般来说，当滤镜用于图片时取0，用于文字时取1。
    “Direction=?”模糊方向，以45度为单位改变，“0”为垂直向上，“45”向右上，“90”水平向右，“135”向右下，以依次改变。这里我们设置Direction=90。
    Strength代表模糊移动值，单位为像素。我们设置Strength=180。
    设置完成后，点击“确定”。
    5、在文档编辑区选中文字所在单元格，在属性面板设置文字的样式为.test。
    保存文件，按F12预览效果。

在只有HTML的时代，只能实现简单的网页效果。有了CSS样式，网页排版发生了翻天覆地的变化，在Dreamweaver8里，使用CSS样式是如此的简单，而制作出来的效果可以如此的炫目。

发表评论　

打印本文　

推荐本文　

加入收藏　

返回顶部　

关闭窗口

·Dreamweaver 8.0学习教程
·Dreamweaver 8.0学习教程
·婚纱照片的处理及美化
·Dreamweaver 8.0之设置段
·Flash创意特效:清风不识字
·Dreamweaver 8.0学习教程
·Flash创意特效:飞越星空
·Photoshop特效－火焰制作
·入门：Dreamweaver轻松制作网
·硕思闪客精灵MX 2005三斧“肢解”
·Dreamweaver 8.0学习教程
·网页制作：CSS的常用技巧放送
·妙手天成:Photoshop绘制水珠特
·PS快速为美女照片换头发颜色
·Dreamweaver 8.0学习教程
·相册自己做！五步打制精美Flash相册
·PS模拟玻璃相框上的水滴字
·Photoshop制作糖果质感的特效字
·Dreamweaver 8.0学习教程
·PS快速打造一种实用的艺术效果
·Dreamweaver基础教程：层及其
·Flash制作碧海蓝天海鸥飞片头动画
·使用图片和CSS结合制作动画按钮
·Dreamweaver CS3 Bet
·FLASH 8实例教程：瀑布动画制作方
·PS处理美女肖像照片为琼瑶小说封面
·Dreamweaver 8.0：属性检
·PS绘精美圣诞节彩色铃铛球
·Photoshop打造既简单又漂亮的字
·PS抠图利器Mask Pro 3.0滤