DreamWeaver cs6網(wǎng)頁制作中CSS樣式的應(yīng)用研究

韓瑩

摘要：DreamWeaver作為網(wǎng)頁三劍客之首，是在網(wǎng)頁制作領(lǐng)域中應(yīng)用最為廣泛且功能最為強(qiáng)大的工具之一，CSS是控制網(wǎng)頁內(nèi)容、外觀的格式規(guī)則，在近年來的網(wǎng)頁設(shè)計(jì)領(lǐng)域應(yīng)用十分廣泛。本文通過簡要分析CSS樣式表的使用方式，研究CSS樣式在DreamWeaver cs6中的實(shí)踐操作，給CSS樣式表的靈活運(yùn)用提供參考借鑒。

關(guān)鍵詞：DreamWeaver；cs6；CSS樣式；應(yīng)用研究

中圖分類號：TP393.09 文獻(xiàn)標(biāo)識碼：A 文章編號：1007-9416（2017）01-0094-01

伴隨著信息技術(shù)的發(fā)展，計(jì)算機(jī)與網(wǎng)絡(luò)已經(jīng)得到普及，網(wǎng)頁制作與網(wǎng)站建設(shè)也逐步成為企業(yè)或是個(gè)人進(jìn)行宣傳的重要手段，網(wǎng)站建設(shè)作為一門涵蓋了動(dòng)態(tài)開發(fā)技術(shù)、網(wǎng)絡(luò)技術(shù)以及數(shù)據(jù)庫技術(shù)的交叉學(xué)科，對網(wǎng)站建設(shè)人才的需求量在逐步增大，而DreamWeaver cs6是目前最常用的網(wǎng)頁制作軟件，CSS樣式則是該軟件控制網(wǎng)頁內(nèi)容和外觀的主要工具，可以實(shí)現(xiàn)對網(wǎng)頁制作中各對象顯示屬性的控制。

1 CSS樣式的具體使用方式

CSS在網(wǎng)頁中的使用方式主要有三種：代碼式、內(nèi)嵌式和外聯(lián)式。其中，代碼式主要通過將一次性樣式寫入代碼中，實(shí)現(xiàn)CSS的操作；而內(nèi)嵌式和外聯(lián)式則是通過分別控制一個(gè)或多個(gè)頁面中元素的樣式表來實(shí)現(xiàn)CSS的操作。在實(shí)際制作網(wǎng)頁時(shí)，也有很多站點(diǎn)會(huì)綜合三種方式來滿足網(wǎng)頁建設(shè)需要，不同瀏覽器、手持設(shè)備、統(tǒng)一瀏覽器的不同版本等需要的CSS解析方式也不相同。由此可見，CSS樣式選擇不是固定的，一定要根據(jù)實(shí)際情況選擇相應(yīng)的使用方式[1]。

2 CSS樣式編寫習(xí)慣

為了保證站點(diǎn)的壽命，使CSS適用于所有用戶及瀏覽器，開發(fā)人員就需要規(guī)范自己的CSS樣式編寫習(xí)慣。對于代碼式CSS來說，其作用主要是定位頁面元素，或滿足DHTML特效的需求，開發(fā)人員應(yīng)盡量避免或減少使用代碼式CSS。而內(nèi)嵌式CSS只能控制一個(gè)頁面中元素的樣式，一旦出現(xiàn)頁面丟失現(xiàn)象，就會(huì)影響整個(gè)站點(diǎn)的統(tǒng)一風(fēng)格，增大頁面體積，耗費(fèi)較大的應(yīng)用空間，減慢用戶網(wǎng)頁瀏覽速度，不方便站點(diǎn)的實(shí)際使用。所以，開發(fā)人員在編寫CSS樣式時(shí)應(yīng)該盡量使用外聯(lián)式CSS，保持站點(diǎn)頁面風(fēng)格的統(tǒng)一，同時(shí)也可以一次更新其他相關(guān)頁面的外觀，減小站點(diǎn)頁面體積，提高用戶的瀏覽速度。

3 CSS樣式表在DreamWeaver cs6中的創(chuàng)建

3.1 創(chuàng)建樣式表

DreamWeaver cs6中外部CSS樣式表創(chuàng)建過程為：命名樣式表→選擇儲(chǔ)存位置→Text→CSS style→New style sheet→New style sheet file；也可以編輯或重新定義現(xiàn)存的樣式表。接著，將剛剛創(chuàng)建的CSS樣式表附加到頁面（模板）上：點(diǎn)擊附加樣式表（Attach style sheet），連接（link）或?qū)耄╥mport）先前創(chuàng)建或選擇好的CSS樣式表。

3.2 利用屬性檢查器切換CSS模式

屬性檢查器是DreamWeaver cs6中切換CSS模式的工具。屬性檢查器會(huì)在缺省情況下將原始HTML模式中的字體標(biāo)簽顯示出來，這時(shí)，其下拉菜單旁會(huì)有小的“A”標(biāo)識，點(diǎn)擊此標(biāo)識就能將字體標(biāo)簽變?yōu)楫?dāng)前狀態(tài)下可以使用的各個(gè)CSS樣式表，再次點(diǎn)擊小“A”可以切換成原來的HTML模式字體標(biāo)簽[2]。

4 DreamWeaver cs6提供的CSS樣式表的直接利用

4.1 CSS樣式表的調(diào)用方式

DreamWeaver cs6中已經(jīng)包含有部分制作完成的樣式表，方便新用戶使用和體驗(yàn)CSS樣式表功能。一般情況下，新用戶可以通過“點(diǎn)擊菜單→選擇File→點(diǎn)擊NewCSS style sheets”的操作順序找到所有可以使用的DreamWeaver cs6提供的CSS列表。需要注意的是，在使用時(shí)一定要遵循上文所述的編寫習(xí)慣，選擇標(biāo)有“Accessible”的CSS樣式表，并將其附加到文檔中。

4.2 時(shí)間樣式表的設(shè)計(jì)方法

由于DreamWeaver cs6已經(jīng)提供了一些可被直接利用的CSS樣式表，因此，用戶可以更清晰、直觀的認(rèn)識到頁面設(shè)計(jì)視圖的整體效果。在用戶創(chuàng)建樣式表時(shí)，可以通過同時(shí)使用連接（link）、導(dǎo)入（import）兩種方式來開發(fā)站點(diǎn)，實(shí)現(xiàn)不同樣式表外觀的自由切換，使CSS樣式表的創(chuàng)建、實(shí)際運(yùn)用更加便捷、高效。

4.3 變換網(wǎng)頁鏈接

通過建立CSS樣式表可以達(dá)到文字鏈接變換效果，使之擁有更加美觀的動(dòng)態(tài)效果。一般情況下，文本超鏈接會(huì)有下劃線，要消除下劃線需要遵循以下步驟：新建CSS樣式表→僅對該文檔→使用CSS選擇器→選擇a： link→確定。創(chuàng)建結(jié)束后要點(diǎn)擊CSS樣式表選項(xiàng)“分類” →修飾→無，也可以根據(jù)自己的需要選擇其他修飾。

5 結(jié)語

綜上所述，CSS樣式可以實(shí)現(xiàn)對網(wǎng)頁內(nèi)容、外觀的靈活控制，但在實(shí)際運(yùn)用中，開發(fā)人員要遵循外聯(lián)式CSS編寫習(xí)慣來創(chuàng)建樣式表以縮小站點(diǎn)體積，統(tǒng)一站點(diǎn)風(fēng)格；同時(shí)可以用連接（link）、導(dǎo)入（import）兩種方式來實(shí)現(xiàn)樣式表的自由切換，方便站點(diǎn)網(wǎng)頁建設(shè)的總體把控。

參考文獻(xiàn)

[1]聶玉成.淺談Dreamweaver網(wǎng)頁制作中CSS樣式的應(yīng)用技巧[J].職業(yè)技術(shù)，2010（1）：94.

[2]閻月.運(yùn)用Dreamweaver的CSS樣式制作動(dòng)態(tài)下拉菜單[J].遼寧師專學(xué)報(bào)（自然科學(xué)版），2014（1）：28-30.