用Dreamweaver建站如何設計CSS?,一般地講,樣式表(style sheet)就是控制網(wǎng)頁(yè)內容外觀(guān)的格式化的規則的集合??梢砸匀N不同的方式在你的頁(yè)面中使用CSS:
代碼式(Inline):寫(xiě)入到代碼中的一次性的樣式。
內嵌式(Embedded):可控制一個(gè)頁(yè)面中所有元素的樣式表
外聯(lián)式(External):可控制許多頁(yè)面中的元素的樣式表
事實(shí)上,許多站點(diǎn)都根據需要把這三種方式結合起來(lái)使用。
在使用CSS時(shí)一個(gè)需要重點(diǎn)考慮的事實(shí)是不同的瀏覽器以及同一瀏覽器的不同版本以不同的方式來(lái)解析CSS。除了網(wǎng)絡(luò )瀏覽器的差異之外,你還要意識到還有很多其他的瀏覽器,比如聽(tīng)力瀏覽器,基于電視的瀏覽器以及Palm pilot和TTY(teletypewriter,遠程打字機)一類(lèi)的手持設備。
最佳習慣是指什么?
大多數技術(shù)都有自己約定俗成的標準。CSS也不例外。雖然并非網(wǎng)絡(luò )上存在的所有CSS都很規范,但按照現有標準來(lái)使用CSS卻還是不無(wú)裨益的。一般來(lái)說(shuō),開(kāi)發(fā)人員應盡可能將內容與報告分離開(kāi)來(lái)。這樣做的好處在于:
1:增加站點(diǎn)的壽命
不規范的樣式表可能在當時(shí)覺(jué)得很方便,但新版本的瀏覽器出來(lái)以后,很可能就會(huì )出現兼容性問(wèn)題。到時(shí)逐頁(yè)修改站點(diǎn)就是一項非常費時(shí)的工作同時(shí)也使使用CSS失去了意義。
2:讓你的站點(diǎn)對所有的用戶(hù)以及瀏覽器都適用。
有些地方的政府已經(jīng)立法要求網(wǎng)站必須讓殘障人士也同樣可以瀏覽。為殘障認識設計的瀏覽設備,比如聽(tīng)力瀏覽器,對CSS規范性要求極其嚴格。
3:讓站點(diǎn)更新和維護更加輕松。
使用方式得當的話(huà),CSS可讓你在一個(gè)頁(yè)面中的調整快速應用到所有頁(yè)面中去。
你首先要做的選擇是使用哪一種樣式表。當涉及到最佳習慣時(shí),對不同樣式表的分析如下:
Inline CSS;簡(jiǎn)單地說(shuō),你應該盡量避免使用。除了一些其他的缺點(diǎn)之外,使用Inline CSS意味著(zhù)你并沒(méi)有利用到CSS的真正優(yōu)點(diǎn),即你并沒(méi)有將內容與格式分離開(kāi)。DW使用Inline CSS主要是為了定位頁(yè)面元素(這些元素在DW的用戶(hù)界面中稱(chēng)為“層(layer)”),或者為了使用某個(gè)DHTML特效,它需要使用Inline 樣式的Javascript來(lái)改變一個(gè)對象的屬性。
Embedded CSS:它也不是最理想的,因為它只能對當前頁(yè)面施加影響。在更新的過(guò)程中,如果某一個(gè)頁(yè)面丟失,將會(huì )使站點(diǎn)的風(fēng)格不一致;另外,當用戶(hù)瀏覽你的站點(diǎn)時(shí),每一頁(yè)都要下載一次樣式表信息。
External CSS:這是你的第一選擇。External CSS可以讓所有連接到它的頁(yè)面保持一致的外觀(guān)風(fēng)格;提綱挈領(lǐng),更改一次,輕松更新所有相關(guān)頁(yè)面;讓你的頁(yè)面體積更小,瀏覽速度更快。其他的一些最佳習慣將在下文分析具體的CSS特性時(shí)提及。
在DW中創(chuàng )建CSS樣式表
在DW中創(chuàng )建CSS樣式表時(shí)(Text 》CSS Style 》New style sheet),在彈出的對話(huà)框中,你有兩個(gè)選擇:新樣式表文檔(New Style Sheet File) 和只用于當前頁(yè)(This Document Only)。選中“New Style Sheet File ”你就開(kāi)始了創(chuàng )建External CSS的過(guò)程。這個(gè)選項要求你在真正的創(chuàng )建過(guò)程之前先命名樣式表并為它選定一個(gè)保存位置;另外一個(gè)選項,This Document Only,則會(huì )直接把相關(guān)代碼寫(xiě)入到頁(yè)面的部分。
你也可以在“新樣式(New style)”對話(huà)框中選擇一個(gè)現存的樣式表來(lái)編輯或添加新的定義。
應該連接到External CSS還是導入?
創(chuàng )建外部樣式表以后,你需要把它附加在每個(gè)頁(yè)面上(或是模板)。要這樣做,可以在CSS面板上淡季“附加樣式表(Attach Style Sheet)”按紐,此時(shí)會(huì )彈出連接外部樣式表 (Link External Style Sheet)對話(huà)框,在上面可以瀏覽到你的目標樣式表的名字,找到以后,你可以選擇連接(link) 或者導入(import )此外部樣式表。
連接是最常用的方式,選擇“link”即可把樣式表連接到頁(yè)面。它會(huì )在你的頁(yè)面中加入下面的標記:
所有支持CSS的瀏覽器都支持連接選項。如果你想一些比較舊的瀏覽器(比如Netscape 4.x)也能“看到”這個(gè)樣式表的話(huà),就要采用下面的方法。
如果你選擇“導入”選項,所用的標記為:
NetSscape4會(huì )完全忽略導入的CSS,而按照連接的CSS來(lái)解釋頁(yè)面。這樣我們就可以放心使用CSS中的新功能,不必擔心瀏覽器的兼容性問(wèn)題了。
CSS屬性檢查器
在DW的屬性檢查器中可以輕易切換到CSS模式。缺省情況下,屬性檢查器會(huì )顯示原始的HTML模式下字體標簽。點(diǎn)擊字體下拉菜單旁邊的小“A”,你就可以看到目前可用的CSS樣式表,而不是字體標簽列表。同時(shí),你也可以輕松切回到HTML模式。
現成的CSS樣式表
DW中一個(gè)令人激動(dòng)的CSS特性就是它包含了已制作好的CSS樣式表。CSS的新用戶(hù)可以先體驗一下。選擇File > New,在彈出的新文檔對話(huà)框中選擇選中CSS style sheets,在右邊的方框中會(huì )出現所有可用的CSS列表。為了實(shí)踐我們所說(shuō)的最佳習慣,選擇一個(gè)標記為“Accessible”的。
將文檔保存在站點(diǎn)文件夾內,然后就可以用上述的方法來(lái)把CSS附加在你的文檔中了。
設計時(shí)間樣式表(Design Time style sheets)
DW的這一特性可以讓你在設計視圖下工作時(shí)將樣式表應用到頁(yè)面,讓你對站點(diǎn)的外觀(guān)有一個(gè)更直觀(guān)的認識。設計時(shí)間樣式表將不會(huì )出現在站點(diǎn)內。從我們的最佳習慣的觀(guān)點(diǎn)來(lái)講,這一特性是非常有用的。如果你使用同時(shí)導入和連接兩種方式(如上所述),附加設計時(shí)間樣式表可以讓你使用其中的任何一個(gè)來(lái)開(kāi)發(fā)站點(diǎn)。當你想看在另一個(gè)樣式表下頁(yè)面外觀(guān)如何時(shí),你可以輕松更改為另一個(gè)樣式表。
對于要將CSS應用于服務(wù)器端(比如ASP, PHP, or ColdFusion)或是要在客戶(hù)端通過(guò)Javascript來(lái)存取的開(kāi)發(fā)者來(lái)說(shuō),設計時(shí)間樣式表同樣有用。服務(wù)器端樣式表也是處理客戶(hù)端瀏覽器對CSS支持不好的又一種方式。但在以前版本的DW中,這種方式卻不能讓你在設計階段查看CSS的實(shí)際效果。設計時(shí)間樣式表讓你實(shí)時(shí)查看樣式表效果,所以你可在DW中以可視界面工作。另外一個(gè)好處就是當你上傳站點(diǎn)文件時(shí),你不必再檢查整個(gè)站點(diǎn)尋找冗余的樣式表了。
驗證
無(wú)論你是自己創(chuàng )建樣式表還是編輯現有的樣式表,驗證可以確保你不會(huì )誤用不標準的標簽或錯誤的代碼。DW本身不包含CSS驗證程序,你可以使用W3C站點(diǎn)提供的驗證服務(wù)。
在DW內你可以驗證HTML 或DHTML標簽( File > Check Page > Validate Markup (for HTML) 或 File > Check Page > Validate as XML for XHTML.)。在開(kāi)發(fā)基于CSS的站點(diǎn)時(shí),DW提供了很多輔助工具。有了MW MX的幫助,再加上對CSS良好的理解,你就可以開(kāi)發(fā)出能經(jīng)受時(shí)間考驗的站點(diǎn)了。