Dreamweaver式样表设计

• Dreamweaver
• 式样表设计

所谓的层叠式样表就是CSS(Cascading Style Sheets)的中文名字，是由W3C组织制定的一种非常实用的网页元素定义规则。CSS能让网页制作者有效地定制、改善网页。其优点是具有很好的兼容性，Microsoft Internet Explorer3.0和Netscape Communicator4.0以上版本的浏览器都支持或部分支持CSS（级别1），虽然现在W3C组织已经发布了CSS2，但目前浏览器主要还是支持CSS1，所以本章中所有涉及到CSS相应代码的部分全部是CSS1（其实，到现在CSS2是啥样的我自己还没搞懂呢，所以不敢说，不敢胡说。说不定等dreamweaver3出来的时候就应该说CSS2了）。　　

接着，我想先来说说在HTML文件中定义式样表的发方法。一般来说，将式样表加入网页中共有四中方法，分别是植入式样、连接式样、导入式样很行内式样。植入式样表是式样表规则写入HTML文件中，如果你看到某个HTML（比如索易的首页）文件原代码中有类似于〈STYLE TYPE=text/css〉....〈/STYLE〉的标签就说明此网页植入了式样表规则。一般植入式样表都是写在网页文件的〈head〉〈/head〉标签之间，有〈STYLE〉标签说明开始式样表内容，并由〈/STYLE〉结束定义式样表。植入式样表是我所见的最广泛的使用方法。但用的最多的并不一定是最好的，如果为整个网站定义通用式样的话，强烈建议使用连接式样或导入式样。其实这两中方法并无很大区别，他们都是将独立的式样表文件（写有式样表内容的文本文件）导入网页文件。区别在于采用了导入式样的方法后还可以同其他方法结合使用，但连接式样则不行。这类似于导入独立的javascript文本文件。不仅能够让网页瘦身，而且可使网站中网页调用用户终端机缓存中独立的CSS文件，加快网站浏览速度。最后是行内式样，既在HTML行中直接加入式样表规则，这样作的最大优点就是灵活，但是网页增重而且可能引起冲突。大家一定都听说FrontPage98可以建立CSS，但若不是你亲手写代码的话，一般都使用行内式样，从而导致网页代码乱七八糟的结果。

相比之下，Dreamweaver2在这方面做的出色得多—— 　　先打开Dreamweaver2，新建一个文件。然后，无论鼠标在文件的哪个位置只需单击右键，选择Custom Style(Selection) 〉 Edit Style Sheet就能呼出Edit Style Sheet对话框，在对话框的右方的那排按钮分别是：连接独立的式样表文件(Link)、新建一个HTML元素式样(New)、编辑当前式样表中的元素式样(Edit)、复制当前式样表中选定的式样元素(Duplicate)和删除当前式样表中的式样元素(Remove)。 　　

如果网站中已经存在了独立的通用式样表，可以使用Link命令导入式样表，经导入的式样表可以在当前的HTML文件中进行添加、编辑、删除等工作，但此式样表一经修改，网站中所有的连接此式样表的网页都将产生相应变化。 　

要新建式样元素，选择New按钮，出现新建一个式样元素对话框(New Style)。其中的三个选项分别是自定义式样(Make Custom Style)、HTML标签式样(Redefing HTML Tag)和CSS给定的选择用式样(Use CSS Selector)。自定义式样(Make Custom Style)是由用户自己给定式样表元素名称（当然不许不同于HTML标签名称）在式样表中自定义的式样元素可以在整个HTML中被调用。这儿有一点值得注意，当新建式样时默认的式样名称是unmaned1，而且在式样此名称前有一个“.”。这个“.”说明了此式样是一个类式样(class)，根据CSS规则，类式样(class)可以在一个HTML元素中被多次调用。相对的如果将“.”换为“#”，该式样就成了一个序列式样(ID)。在一个HTML文件，一个序列式样只能被调用一次，也就是是说一个ID只能对应唯一的一个HTML标签，这点在包含有多个层(layer)的HTML文件中非常有用。HTML标签式样(Redefing HTML Tag)是直接定义HTML语言中各种标签的式样，式样一经定义就在整个HTML文件中通用。最后是CSS给定的选择用式样(Use CSS Selector)可以用来定义组合式样（两个或两个以上CSS元素组合）以及具有特殊序列号(ID)的式样元素。Dreamweaver2提供了四种给定的组合式样，分别是激活的连接a:active; 当前连接a:hover; 连接a:link; 访问过的连接a:visited，通过对这几个元素的定义可以在网页中非常方便的实现简单的连接互交效果。 　　

选择编辑HTML元素后出现定义式样对话框(Style definition for ...)由于篇幅有限，在此我只对可定义的元素做一个简要的说明，如果希望进行更深层的了解，建议你去看一下CSS的规则，也可以发mail给我。在项目选框(category)中共有Type、Background、Block等八项，我想其中最常用的文字(Type)和背景(Background),所以在此先说这两项，而另外六个选项由于并不常用所以我将在第六、七部分中有必要是提及。 　　

在文字(Type)面板中的设定分别是Font——设定字体、Size——设定大小（九号的中文很漂亮，在GB网上广泛使用）、Weigh——设定字粗（当字号较小时，字体的粗细有一定限度）、Style——设定字体风格（其中的italic为斜体、oblique为倾斜，但中文表现似乎区别并不明显）、Ariant——大小写设定（对于中文没用）、Case——首字效果（包括首字大写、首字上提和首字下沉但似乎对于中文没用）、Color——设定颜色、Decoration——文字修饰（这是CSS的一个十分有用的效果）分别有下划线(underline)、顶划线(overline)、删除线(line-througn)、闪烁(blink)和无修饰(none)。 　　在背景(Background)面板中的设定分别Background——背景颜色、Background Image——背景图案、Repeat——是否重复背景图案、Attackment——判断背景图案是否在原始位置（不少浏览器对此项支持不理想）、Horizontal——设定背景的水平对齐、Vertical——设定背景的垂直对齐。 经过了上述设定，便可以定义一个式样表了。当要调用已经定义了的式样元素时只要选定该网页元素，然后在状态栏左下角的网页元素列表中在该元素（被选定的网页元素为粗黑体）上单击右键在class中选定要调用的式样元素。class中包含的的类式样，如果要让该元素调用单一的序列式样，请在单击右键后选用ID。 　　

有的时候在编辑大段文章或多个图片时，需要连续调用多个不同的式样元素，可以使用〈span〉标签，在所要加入式样的地方单击右键选择Custom Style下的所要调用的式样即可。