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