網(wǎng)頁設計技術論文

　　網(wǎng)頁是組成互聯(lián)網(wǎng)的最基本要素，其在互聯(lián)網(wǎng)中扮演著極其重要的角色。下面是由學習啦小編整理的網(wǎng)頁設計技術論文，謝謝你的閱讀。

　　網(wǎng)頁設計技術論文篇一

　　網(wǎng)頁設計中的CSS應用技術

　　【摘 要】本文從講述CSS產(chǎn)生的背景過渡到解釋什么是CSS技術，CSS與網(wǎng)頁的關系等。雖然目前我們使用的CSS技術已經(jīng)能精確控制網(wǎng)頁的整體布局、提高網(wǎng)頁代碼的重用率、能簡化HTML靜態(tài)網(wǎng)頁中的各種繁瑣標記、提升網(wǎng)頁在互聯(lián)網(wǎng)上的傳輸連率、使得網(wǎng)頁的更新與維護變得方便。但是在一些實際的使用過程中，由于CSS技術依然存在不少缺陷，因此還是需要進行一些局部的優(yōu)化操作。

　　【關鍵詞】CSS技術 CSS與網(wǎng)頁相關性 CSS缺陷 局部優(yōu)化

　　一、引言

　　從網(wǎng)絡誕生到發(fā)展至今.HTML的功能也隨著網(wǎng)絡的發(fā)展而日趨完善。然而，網(wǎng)頁內容跟控制樣式夾雜混合一直是網(wǎng)頁設計語言的一大缺陷。為了能夠使網(wǎng)頁具有更好的兼容性，萬維網(wǎng)聯(lián)盟制定出統(tǒng)一的CSS規(guī)范，把需要利用樣式來控制的內容徹底地從網(wǎng)頁中分離出來。

　　二、什么是CSS

　　CSS的全稱是Cascading Style Sheets，中文又稱為“層疊樣式表”，是一種用于控制網(wǎng)頁頁面布局的便捷技術，可以較輕松地控制頁面的布局，使頁面的元素變得合一;與此同時，它不再需要一頁一頁地修改單個頁面(假設每個頁面都是修改相同的部分)，而可以將多個網(wǎng)頁的風格同時進行更新;并且由于CSS具有非常好的兼容性，幾乎能在所有瀏覽器上使用。因此CSS技術在現(xiàn)代網(wǎng)頁設計中得到了非常廣泛的應用。

　　三、CSS的產(chǎn)生背景

　　CSS是萬維網(wǎng)聯(lián)盟組織為了克服HTML語言在設計網(wǎng)頁樣式時的不足而制定出的擴展樣式標準。CSS在各個方面不僅原本繼承了HTML各種標記的屬性設定(即樣式) ，同時還擴充了HTML中沒有實現(xiàn)的功能區(qū)，比如它能夠通過VBScript程序等設計語言來控制網(wǎng)頁，這樣便能實現(xiàn)有效地對網(wǎng)頁的外觀和布局進行更精確的控制，繼而使網(wǎng)頁的展示、網(wǎng)頁的布局更加靈活。CSS可以將網(wǎng)頁內容與控制網(wǎng)頁內容的樣式分開設定，也就是說將網(wǎng)頁的外觀設定信息從網(wǎng)頁內容中獨立出來，并集中管理。如果進一步將重用的CSS樣式信息存儲為單個獨立的文件我們就能讓多個不同的網(wǎng)頁搭配同一個樣式，從而實現(xiàn)統(tǒng)一的風格，這樣的話在修改網(wǎng)頁模板時可單獨修改被保存的獨立CSS文件，節(jié)省出修改每一個網(wǎng)頁文件的時間。

　　CSS的每一條定義都有如下的形式：

　　selector{property： value; property： value;……}

　　其中，selector可以是HTML的tag，ID或class，如P，BODY，A;property就是那些將要被修改的性質(屬性)，如color;value是給property賦的值(參數(shù))，如color的值為red。

　　四、CSS與網(wǎng)頁的相關性

　　CSS樣式跟HTML網(wǎng)頁的完美結合，實現(xiàn)了網(wǎng)頁的展現(xiàn)效果控制代碼跟網(wǎng)頁實際內容的分離。使得新的網(wǎng)頁設計經(jīng)常利用CSS技術來控制網(wǎng)頁的樣式，這其中通常包括控制頁面的整體布局、文字、圖片、背景等等相關信息，而HTML則干脆只用來羅列網(wǎng)頁中的幾大元素。一個完備的CSS樣式表可以以多種方式應用到HTML頁面當中，但外部連接通常是最常用也是最好的方式之一。這種方式采取將CSS樣式代碼單獨放入一個外部文件中，再由HTML中的link標記來進行調用。這樣做的好處是可以使多個網(wǎng)頁調用同一個樣式表文件，最大限度的實現(xiàn)了代碼重用及網(wǎng)站文件的最優(yōu)化配置。

　　CSS樣式在HTML中以STYLE標識出現(xiàn)，其格式為：

　　< style >

　　a{text-decoration：none; color：yellow}

　　a：hover{text-decoration：underline; color：purple}

　　p{font-size：20; background：red; color：blue}

　　< /style >

　　將如上代碼插入任一HTML文檔后，刷新顯示，則所有錨點變?yōu)槠胀ㄗ煮w，顏色為黃，但當鼠標移至其上時，則錨點的提示字符變?yōu)閹聞澗€的紫色字體;整個文檔中被置標P包圍的文字將以紅底藍字、字體大小為20個象素的形式出現(xiàn)。如果其中某段文字需另加修飾，可以單獨的的形式出現(xiàn)，例如

　　< p style=”font-size：30; font-weight ：bolder; background：white;color：blue” >

　　................

　　< /p >

　　則此段文字白底藍字，30個象素大小，且字體加粗。

　　五、CSS缺陷

　　(一)DIV+CSS盡管不是高不可攀，但是在網(wǎng)站建設中至少要比表格定位復雜的多，即使是對于網(wǎng)站建設的高手也是容易出現(xiàn)問題，更不要說是初學者了。(二)CSS網(wǎng)站建設的設計元素通常會放在一個外部文件中，或幾個文件，有可能相當?shù)膹碗s，甚至比較龐大，如果在網(wǎng)站建設中CSS文件調用出現(xiàn)異常，那么整個網(wǎng)站將變得慘不忍睹。(三)雖然說DIV+CSS解決了大部分瀏覽器兼容的問題，但是也有在部分瀏覽器中使用出現(xiàn)異常。(四)DIV+CSS在網(wǎng)站建設中對搜索引擎優(yōu)化與否，取決于網(wǎng)頁設計的專業(yè)水平，而不是DIV+CSS本身，在網(wǎng)站建設中使用DIV+CSS樣式的方法其實并不能保證網(wǎng)頁對搜索引擎的優(yōu)化，甚至不能保證一定比用HTML進行網(wǎng)站建設更加的簡潔。

　　六、CSS局部優(yōu)化方法

　　編寫網(wǎng)頁時盡量減少占用網(wǎng)頁字節(jié)，同時簡化CSS代碼，讓自己寫的CSS代碼更加專業(yè)，多采用同屬性提取共用CSS選擇器，分離網(wǎng)頁顏色和背景設置樣式等技術。

　　總的來說，雖然CSS技術給網(wǎng)頁布局模式注入了新的生命力，能夠使得相同的HTML代碼呈現(xiàn)出數(shù)以百計風格迥異的網(wǎng)站。但是要想比較熟練的掌握這種布局方式還需要更多的學習，積累實踐經(jīng)驗，最終目標是要能夠靈活掌握CSS語言并能設計制作出符合Web標準的網(wǎng)頁。

　　參考文獻：

　　[1]《基于Web技術的CSS網(wǎng)頁布局應用》 吳芳費，計算機光盤軟件與應用，2011.

　　[2]《CSS層疊樣式表在DHTML中的應用》王丹玲，鞍山師范學院學報，2006

　　[3]《CSS技術在網(wǎng)頁設計中的應用與優(yōu)化》杜濤，長治學院學報，2007

　　[4]《CSS技術在網(wǎng)頁設計中的應用探析》張志潔，電腦知識與技術，2007

　　作者簡介：

　　曹方明(1983―)，男，湖南郴州市，工作單位：郴州技師學院，職務：專職教師。

點擊下頁還有更多>>>網(wǎng)頁設計技術論文