Dreamweaver3之一学就会（六）
5D精英网 机器猫
2000年 第29期
#1 样式篇
从这期开始我们进入到网页制作的进阶技术学习阶段，即学习CSS，JavaScript等等。大家不必担心，用Dreamweaver实现这些功能是完全可视化的，无需编写代码。这期要和大家介绍的就是样式表。
样式表可以做什么呢？网页制作中现在流行的那些又小又好看的9磅字号，超级链接光标移动上去以后下划线会消失变色，背景图片可以固定不动，可以实现将列表前面的小黑点或者数字变成漂亮的图片，还有不少朋友一定羡慕FrontPage 2000提供的主题Theme功能。这些都是使用样式表制作的。
下面我们就通过三个经典的样式表实例来体会样式表的魅力。他们分别是9磅字，固定背景图片，活动的超级链接。
#1 9磅字的制作
如^29040201a^1就是大家熟悉的9磅字。使用属性面板中的Size是无法做到的，只有用样式表才做得到。
1.打开样式面板。可以使用快速启动栏，或者选择菜单Window→CSS Styles。
2.在样式面板中单击新建按钮（如^29040201b^2右下脚）。
3.系统弹出New Style新样式对话框。
Type类型：选择默认的Make Custom Style自定义样式。
Name命名：起个名字叫做.myFont，名字按照个人喜好而定，但是打头的小黑点不能漏掉。
4.在Style Definition 样式定义对话框内设定参数。首先，样式类型，也就是Category确定为Type文字，Size尺寸定为9，单位为Point（磅）。为了使效果更好，我们同时把行距也设定一下，Line为150％（如^29040201c^3），按OK确认。
5.一个新的样式就在样式面板中做好了。在网页中选中文字，然后单击样式面板中的myFont样式。看看，是不是出来了（如^29040201d^4）？
#1 固定的背景图片
去过www.5dmedia.com的朋友一定会发现，5D精英网的背景图片是固定不动的，无论滚动条怎样拉动，背景图片总是固定在网页的右上角，并且背景图片不像一般的背景图片那样会重复贴满整个网页。下面我们就来用样式表制作这个特效。
1.打开样式面板，按新建按钮。
2.在New Style（新样式）对话框中Type选择Redefine HTML Tag（重定义HTML标签），被重定义的标签Tag选择body。
3.在Style Definition 样式定义对话框中选择参数（如^29040201e^5）。
●Background Image（背景图像）：单击Browse按钮选择背景图片。
●Repeat（背景图像重复否）：选择No－repeat，这样背景图像就不会重复贴满整个页面了。
●Attachment（附着方式）：Fixed固定不动。
●Horizontal（水平对齐方式）：right靠右。
●Vertical（垂直对齐方式）：top居顶端。
4.保存网页，预览。效果出来了。注意，当定义完效果以后不一定能马上在编辑状态下看到效果，要预览才能看见。
#1 活动的超级链接
在网页上经常会看到这样的一些效果：超级链接是活动的，光标移动上去以后会变色，下划线会消失。这样的效果也是使用CSS来制作的。
1.打开样式面板，按新建按钮。
2.在New Style新样式对话框中Type选择：Use CSS Selector（使用CSS选择器）。Selector选择：a:hover。
3.在Style Definition 样式定义对话框内设定参数，在Decoration处选择none（如^29040201f^6）。
4.预览网页。光标移动到超级链接上，下划线消失。
通过上面的这几个例子，我们现在对于样式表CSS有了一定的了解。下面我们就其中的一些操作进行解释，这三个例子中我们分别使用了三种不同的样式类型。
●Make Custom Style 自定义样式
●Redefine HTML Tag 重定义HTML标签
●Use CSS Selector 使用CSS选择器
自定义样式（Make Custom Style）是生成一个新的样式。制作完毕以后，就可以在样式面板中看到制作完成的样式。在应用的时候，首先在页面中选中对象，然后选择样式即可。第一个例子中，我们新生成了一个.myFont样式，然后把样式赋予文字，当我们需要对某些对象使用这些效果的时候可以使用。
重定义HTML标签（Redefine HTML Tag）就是将现有的HTML标签赋予样式。它制作完毕以后不需要选中对象就直接应用到页面中去。网页的核心是HTML语言，HTML语言是一种标记语言，它的形式主要是这样的：<标签名>内容。例如1号标题的HTML代码是：这是1号标题
。这段代码的结果就是显示一段文字“这是1号标题”，文字的大小是1号标题。例如把标签重新定义成为9磅字体，那么在网页中一旦选择1号标题，对应的文字就是9磅字体。在第二个例子中，标签是一浏览网页就生效的，因此把背景图片的效果赋给标签，这样一浏览网页就会生效。可以重定义的标签有很多，例如把
标签重新定义，就可以做出用图片替换项目符号的圆点，标签可以在Tag下拉菜单种选择。
CSS选择器（Use CSS Selector） 用于针对超级链接进行设置，一共有四种状态：
●a:Active 选中超级链接状态；
●a:Hover 光标移上超级链接状态；
●a:Link 超级链接的正常状态，没有任何动作的时候；
● a:Visited 访问过的超级链接状态。
在第三个例子中，我们需要实现将光标移动到超级链接上去时，超级链接的下划线消失。也就是对于超级链接的Hover状态进行设置。
样式表的可选参数有很多，全部在Style Definition 样式定义对话框中选择。它分为若干类，其中针对文字的Type类，针对背景的Background类，针对项目列表的List类，这些都是比较常用的。
#1 样式的删除
1.直接在样式面板中选中样式。如果是重定义标签和CSS选择器从Apply To菜单中可以选择。
2.单击面板中的“Delete Style”按钮即可。
#1 样式的编辑
1.单击样式面板中的“Open Style Sheet……”按钮。
2.在对话框中选择样式，直接按Edit按钮即可编辑。
关于样式表就介绍到这里，有什么问题欢迎发E－mail给我：rudolf@21cn.com。