前几节,我们探讨了简单网页制作的方法,如果要使你的网页更加美观,还需要掌握一些其它技巧。现在我们开始接触网页制作的进阶技术。例如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提供了更便捷的途径:使用“页面属性