现在位置:中国IDC吧>网页设计>Dreamweaver教程> 文章内容

Dreamweaver4神童教程之五

收藏发布 来源:互联网 作者:中国IDC吧 更新日期:2008-09-30 点击:


Define:定义作用的范围,New Style Sheet File,即创建一个新的样式表文件;如果该网页已套用样式表文件,还可以在下拉框中找到文件,将新的样式应用到该文件中(也就是改变改文件中的相关设置);This Document Only,则该样式表仅作用于本网页。

这里我们是创建新的样式表,因此选择 Type 中自定义样式表选项,然后点按 OK ,弹出如图十一的面板:


图十一

在此面板上,可以对多种网页元素进行精确控制,如文字类型(Type),背景(Background),区域设置(Block),边界设置(Border),列表设置(List),等等。由于篇幅有限,仅在此列出一些比较常用的设置。

*Type:

Size:文字大小,从下拉框中进行选择。大家可以明显看出,这里提供了对文字大小的更多控制选项。另外,如果你对所有下拉选项都不满意,还可以通过输入数字,自己定义文字大小。如图十二:


图十二

Line:行间高度,可以是默认的 Normal ,也可以自定义(选择 Value ,然后在输入框中输入数字)。如图十三:


图十三

Decoration:文本修饰属性,包括添加下划线(Underline),上划线(Overline),删除线(Line-through),闪烁(Blink),右边还可以进行颜色的选择。

提示:带"*"号的选项表示不能直接在 Dreamweaver 编辑器中显示,只能在浏览器中才能看到它的效果。

*List:

Type 中提供了多种类型可供选择,如图十四:


图十四

2.样式表的引用:
样式表的引用有多种方法,这里我们只列出一种最简单的方法以便于大家掌握。

假设我们已经建立了两个新的自定义样式表,名字分别为: .unamed 1 与 .unamed 2 ,如图十五:


图十五

.unamed 1 将字体大小设为 36 ,斜型,红色,如图十六:


图十六

.unamed 2 将字体大小设为 16 ,蓝色,如图十七:


图十七

在 Dreamweaver 的文档编辑窗口中输入"Welcome to My Homepage

This is my homepage, it's very poor,Now, because it's my first homepage。"字样。结果如图十八:


图十八

用鼠标将光标位置移动到第一行文字处,然后点选样式面板上的 .unamed 1 ,这时你将看到样式表自动套用到文字上了!如图一十九:


图一十九

同理,光标位置移动到第二行,然后点选样式面板上的 .unamed 2 ,第二个样式表又套用上了!结果如图二十:


图二十

提示:Dreamweaver 4.0 在样式表的套用上较以前版本方便多了,既可以直接用于某个段落,也可以直接用于某行对象,而不需再如以前般要在选择下拉单中选择套用了。

Dreamweaver 中对样式表的套用有多种方式,如刚才这种方式我们称为"内嵌式样式表",除此之外,还有内联式样式,链接式样式表,等等。为了不让大家觉得太难,我们就省却了这些内容的介绍,当你在掌握了本教程后,可以再专门就 CSS 进行学习。