|
前几节，我们探讨了简单网页制作的方法，如果要使你的网页更加美观，还需要掌握一些其它技巧。现在我们开始接触网页制作的进阶技术。例如CSS，JavaScript等等。但是您不必担心，用Dreamweaver MX 2004实现这样的一些功能是完全可视化的，无需编写代码。这一节介绍样式表及其应用实例。
让我们先认识一下CSS，CSS不属于HTML，它属于HTML的辅助语言，是对HTML语言功能的一种扩展，用CSS可以做出美观工整令浏览者赏心悦目的网页，CSS能给网页添加许多我们想象不到的效果。
网页制作中流行的那些好看的9pt字和超级链接光标移动上去以后下划线会消失变色的效果及网页背景图片固定不动。这些都是使用CSS样式表制作的。
下面我们就通过三个典型的样式表实例来了解 CSS 的创建过程。
分别讨论：①9pt字 ②固定背景图片 ③活动的超级链接。这三个例子中我们将分别使用了三种不同的样式类型：
○〖自定义样式〗 ○〖重定义HTML标签〗 ○〖使用CSS选择器〗
①9pt字的制作：
1、选择“窗口”菜单＞CSS样式或从面板组打开样式面板。
2、在样式面板中单击新建按钮。（如下图所示）
3、 系统弹出新建样式对话框（如下图所示）。填写一个名称，点「确定」按钮。
※ 填写名称必须以句点开头，如果您没有输入开头的句点，Dreamweaver MX 2004将自动为您添加。
注：如果您选择○仅对该文档，您所创建的 CSS 样式仅在本页有效，下边这一步将不再出现，直接进入第4步。
类型：弹出保存样式表文件对话框（如下图所示），在文件名框填入名字点击保存，生成一个后缀为*.CSS的样式表文件。
4、点击保存后，系统弹出（如下图所示）样式定义对话框。设定参数。首先，样式类型，为文字类型。字体为：宋体。大小为9（pt）。为了有较好的显示效果，我们同时把行距也设定一下，行高为180%(或自定其它值）。颜色自定。其它参数保持默认。按「确定」。
5、 一个新的样式就在样式面板中做好了（如下图所示）。
应用时，在网页中选中文本，然后右键单击CSS样式面板中的mycss1样式选“套用”。
或选中文本后从属性面板样式选择，如下图：
看看，文本字体的效果。
②固定的背景图片效果制作：
本教程大部分页面在浏览状态，无论滚动条怎样拉动，背景图片总是固定不动。就是用CSS制作的。延续上例定义“类型”后，打开“背景”选项，如下图：在文本输入框填入相应的内容，则可以将此CSS样式定义在前述zt1.CSS 之中。
下边介绍设置“重定义特定标签的外观”标签方法，完成背景固定的效果。
1、 打开CSS样式面板。按新建按钮。
2、 在新样式对话框（如下图）中选择。选“标签（重定义特定标签的外观）”。被重定义的标签选择为：body。
点击确定，存盘后，弹出保存样式表文件对话框：
填入保存文件名后，点“保存”按钮，弹出＂选择图像源文件＂对话框：
选择图像文件后点“确定”。弹出“body 的CSS样式定义”对话框：
3、 在样式定义对话框中选择参数。
l 背景图像：单击浏览按钮选择背景图片。
l 重复：选择重复。
l 附加：固定
l水平位置：默认
l垂直位置：默认
4、 保存网页，预览效果。
【提示】在编辑状态下不能马上看到固定背景效果。预览状态才能看见固定背景效果。
③活动的超级链接制作：
在网页上经常会看到这样的一些效果，超级链接是活动的，光标移动上去以后会变色下划线会消失。这样的效果也是使用CSS来制作的。
操作方法：
1. 打开样式面板。按新建按钮。
2. 在新建样式对话框中选择。使用CSS选择器。选择器：选择a:hover
3、在样式定义对话框内设定参数。（如下图所示）
点击确定，保存页面。预览网页。
该例是用新建CSS样式的办法创建的链接的下划线样式，也是以往常用的手法，主要是让您了解使用选择器类型“高级”选项的设置方法。
Dreamweaver MX 2004提供了更便捷的途径：使用“页面属性”对话框，可以很容易指定特殊的 CSS 链接样式，可以“从下划线样式”选择框直接选择。如下图：
操作方法如下：
- 选择“修改”>“页面属性”，或从“文档”窗口的“设计”视图中的上下文菜单中选择“页面属性”。
- 在“页面属性”对话框中选择“链接”类别。
- 从“下划线样式”弹出菜单中，选择您的页面的默认下划线样式。
- 单击“确定”。
通过上面的这几个例子。我们现在对于样式表CSS有了初步了解。下面我们就其中的一些操作进行说明。这三个例子中我们分别使用了三种不同的样式类型。
〖自定义样式〗〖重定义HTML标签〗〖使用CSS选择器〗
他们是有区别的。自定义样式是生成一个新的样式。制作完毕以后，就可以在样式面板中看到制作完成的样式。在应用的时候，首先在页面中选中对象，然后选择样式即可。第一个例子中，我们新生成了一个.mycss1样式。然后把样式赋给文字。当我们制作网页时候需要对某些对象使用这些效果的时候可以使用。
重定义HTML标签，将现有的HTML标签赋上样式。因此制作完毕以后不需要选中对象就直接应用到页面中去了。网页的核心是HTML语言。HTML语言是一种标记语言。它的形式主要是这样的：<标签名>内容</标签名>。在第二个例子中，把背景图片固定的效果赋给<body>标签。<body>标签是浏览状态才生效的。这样浏览网页就会生效。（注：可以重定义的标签有很多）。 CSS选择器用于针对超级链接进行设置。一共有四种状态。 a:active 选中超级链接状态 a:hover 光标移上超级链接状态 a:link 超级链接的正常状态 a:visited 访问过的超级链接状态。 在第三个例子中，我们需要实现将光标移动到超级链接上去时，超级链接的下划线消失。也就是对于超级链接的hover状态进行设置。 样式表的可选参数有很多，全部在在样式定义对话框中选择参数。分为若干类。其中针对文字的类、背景类、项目列表类这些都是比较常用的。
样式的删除：
1、 直接在样式面板中选中样式。如果是重定义标签和CSS选择器从编辑样式表删除。 2、 单击面板中的 按钮即可。
样式的编辑： 1、 单击样式面板中的 按钮。
2、 在对话框中选择样式直接按“编辑”按钮即可编辑。
样式表简单应用就介绍到这里。想全面了解 CSS 应用，请您浏览另一个专题教程【 DW MX 2004 CSS 属性详解】。
|
设为首页
加入收藏
总编信箱
投稿或申请专栏请先 [登 陆]
