dreamweaver編寫css必需掌握的技巧
來源:易賢網 閱讀:737 次 日期:2016-06-16 10:01:05
溫馨提示:易賢網小編為您整理了“dreamweaver編寫css必需掌握的技巧”,方便廣大網友查閱!

在dreamweaver中編寫css,這種編寫習慣并不提倡,不過由于“可視化”和操作簡便,使用的朋友依然很多,今天羅列一些“最佳習慣”,希望對這些朋友有所幫助。

css正在改變網站設計的進程。為迎合不斷增長的傾向于css的設計人員的需求,macromediadwmx引進了一些新的及改善過的css相關的特性。有了這些新的特性,你可以為未來的更新作好計劃,開發與w3c標準更加兼容的站點。本文討論在dwmx中使用css以及突出某一特定css特性時的一些建議。

一般地講,樣式表(stylesheet)就是控制網頁內容外觀的格式化的規則的集合。可以以三種不同的方式在你的頁面中使用css:

代碼式(inline):寫入到代碼中的一次性的樣式。

內嵌式(embedded):可控制一個頁面中所有元素的樣式表

外聯式(external):可控制許多頁面中的元素的樣式表

事實上,許多站點都根據需要把這三種方式結合起來使用。

在使用css時一個需要重點考慮的事實是不同的瀏覽器以及同一瀏覽器的不同版本以不同的方式來解析css。除了網絡瀏覽器的差異之外,你還要意識到還有很多其他的瀏覽器,比如聽力瀏覽器,基于電視的瀏覽器以及palmpilot和tty(teletypewriter,遠程打字機)一類的手持設備。

最佳習慣是指什么?

大多數技術都有自己約定俗成的標準。css也不例外。雖然并非網絡上存在的所有css都很規范,但按照現有標準來使用css卻還是不無裨益的。一般來說,開發人員應盡可能將內容與報告分離開來。這樣做的好處在于:

1:增加站點的壽命

不規范的樣式表可能在當時覺得很方便,但新版本的瀏覽器出來以后,很可能就會出現兼容性問題。到時逐頁修改站點就是一項非常費時的工作同時也使使用css失去了意義。

2:讓你的站點對所有的用戶以及瀏覽器都適用。

有些地方的政府已經立法要求網站必須讓殘障人士也同樣可以瀏覽。為殘障認識設計的瀏覽設備,比如聽力瀏覽器,對css規范性要求極其嚴格。

3:讓站點更新和維護更加輕松。

使用方式得當的話,css可讓你在一個頁面中的調整快速應用到所有頁面中去。

你首先要做的選擇是使用哪一種樣式表。當涉及到最佳習慣時,對不同樣式表的分析如下:

inlinecss;簡單地說,你應該盡量避免使用。除了一些其他的缺點之外,使用inlinecss意味著你并沒有利用到css的真正優點,即你并沒有將內容與格式分離開。dwmx使用inlinecss主要是為了定位頁面元素(這些元素在dwmx的用戶界面中稱為“層”),或者為了使用某個dhtml特效,它需要使用inline樣式的&#106avascript來改變一個對象的屬性。

embeddedcss:它也不是最理想的,因為它只能對當前頁面施加影響。在更新的過程中,如果某一個頁面丟失,將會使站點的風格不一致;另外,當用戶瀏覽你的站點時,每一頁都要下載一次樣式表信息。

externalcss:這是你的第一選擇。externalcss可以讓所有連接到它的頁面保持一致的外觀風格;提綱挈領,更改一次,輕松更新所有相關頁面;讓你的頁面體積更小,瀏覽速度更快。其他的一些最佳習慣將在下文分析具體的css特性時提及。

在dwmx中創建css樣式表

在dwmx中創建css樣式表時(text》cssstyle》newstylesheet),在彈出的對話框中,你有兩個選擇:新樣式表文檔(newstylesheetfile)和只用于當前頁(thisdocumentonly)。選中“newstylesheetfile”你就開始了創建externalcss的過程。這個選項要求你在真正的創建過程之前先命名樣式表并為它選定一個保存位置;另外一個選項,thisdocumentonly,則會直接把相關代碼寫入到頁面的部分。

你也可以在“新樣式(newstyle)”對話框中選擇一個現存的樣式表來編輯或添加新的定義。

應該連接到externalcss還是導入?

創建外部樣式表以后,你需要把它附加在每個頁面上(或是模板)。要這樣做,可以在css面板上淡季“附加樣式表(attachstylesheet)”按紐,此時會彈出連接外部樣式表(linkexternalstylesheet)對話框,在上面可以瀏覽到你的目標樣式表的名字,找到以后,你可以選擇連接(link)或者導入(import)此外部樣式表。

連接是最常用的方式,選擇“link”即可把樣式表連接到頁面。它會在你的頁面中加入下面的標記:

所有支持css的瀏覽器都支持連接選項。如果你想一些比較舊的瀏覽器(比如netscape4.x)也能“看到”這個樣式表的話,就要采用下面的方法。

如果你選擇“導入”選項,所用的標記為:

netsscape4會完全忽略導入的css,而按照連接的css來解釋頁面。這樣我們就可以放心使用css中的新功能,不必擔心瀏覽器的兼容性問題了。

css屬性檢查器

在dwmx的屬性檢查器中可以輕易切換到css模式。缺省情況下,屬性檢查器會顯示原始的html模式下字體標簽。點擊字體下拉菜單旁邊的小“a”,你就可以看到目前可用的css樣式表,而不是字體標簽列表。

同時,你也可以輕松切回到html模式。

現成的css樣式表

dwmx中一個令人激動的css特性就是它包含了已制作好的css樣式表。css的新用戶可以先體驗一下。選擇file>new,在彈出的新文檔對話框中選擇選中cssstylesheets,在右邊的方框中會出現所有可用的css列表。為了實踐我們所說的最佳習慣,選擇一個標記為“accessible”的。

將文檔保存在站點文件夾內,然后就可以用上述的方法來把css附加在你的文檔中了。

設計時間樣式表(designtimestylesheets)

dwmx的這一特性可以讓你在設計視圖下工作時將樣式表應用到頁面,讓你對站點的外觀有一個更直觀的認識。設計時間樣式表將不會出現在站點內。從我們的最佳習慣的觀點來講,這一特性是非常有用的。如果你使用同時導入和連接兩種方式(如上所述),附加設計時間樣式表可以讓你使用其中的任何一個來開發站點。當你想看在另一個樣式表下頁面外觀如何時,你可以輕松更改為另一個樣式表。

對于要將css應用于服務器端(比如asp,php,orcoldfusion)或是要在客戶端通過&#106avascript來存取的開發者來說,設計時間樣式表同樣有用。服務器端樣式表也是處理客戶端瀏覽器對css支持不好的又一種方式。但在以前版本的dw中,這種方式卻不能讓你在設計階段查看css的實際效果。設計時間樣式表讓你實時查看樣式表效果,所以你可在dwmx中以可視界面工作。另外一個好處就是當你上傳站點文件時,你不必再檢查整個站點尋找冗余的樣式表了。

驗證

無論你是自己創建樣式表還是編輯現有的樣式表,驗證可以確保你不會誤用不標準的標簽或錯誤的代碼。dwmx本身不包含css驗證程序,你可以使用w3c站點提供的驗證服務。在dwmx內你可以驗證html或dhtml標簽(file>checkpage>validatemarkup或file>checkpage>validateasxmlforxhtml.)。在開發基于css的站點時,dwmx提供了很多輔助工具。有了mwmx的幫助,再加上對css良好的理解,你就可以開發出能經受時間考驗的站點了。

更多信息請查看網頁制作
易賢網手機網站地址:dreamweaver編寫css必需掌握的技巧
由于各方面情況的不斷調整與變化,易賢網提供的所有考試信息和咨詢回復僅供參考,敬請考生以權威部門公布的正式信息和咨詢為準!

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
云南網警備案專用圖標
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網
云南網警報警專用圖標
未满十八18勿进黄网站免费看