Dreamweaver 8.0 里的样式设计器

原文转自：
Dreamweaver 8.0学习教程 - 使用CSS美化页面 http://www.zznj.com/web2/info/info_982.html

二、使用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光照效果

posted on 2008-09-02 14:42 黄小二阅读(242) 评论(0) 编辑收藏所属分类: Web Design

文章分类(147)

文章档案(108)

在线帮助

开源软件库

社区

最新评论

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: html中图片ATL参数分行、出错显示 CSS网页配色、隔行换色、选项卡、Div滚动条 [转] 完美打造超完美CSS圆角框 CSS 书写相关《重构HTML: 改善Web应用的设计》读书笔记正则表达式相关（增加收集中...）网页实际时用GBK还是UTF-8 Dreamweaver 8.0 里的样式设计器