網(wǎng)頁設(shè)計技術(shù)論文
網(wǎng)頁設(shè)計技術(shù)論文
網(wǎng)頁是組成互聯(lián)網(wǎng)的最基本要素，其在互聯(lián)網(wǎng)中扮演著極其重要的角色。下面是由學(xué)習(xí)啦小編整理的網(wǎng)頁設(shè)計技術(shù)論文，謝謝你的閱讀。
網(wǎng)頁設(shè)計技術(shù)論文篇一
網(wǎng)頁設(shè)計中的CSS應(yīng)用技術(shù)
【摘 要】本文從講述CSS產(chǎn)生的背景過渡到解釋什么是CSS技術(shù)，CSS與網(wǎng)頁的關(guān)系等。雖然目前我們使用的CSS技術(shù)已經(jīng)能精確控制網(wǎng)頁的整體布局、提高網(wǎng)頁代碼的重用率、能簡化HTML靜態(tài)網(wǎng)頁中的各種繁瑣標(biāo)記、提升網(wǎng)頁在互聯(lián)網(wǎng)上的傳輸連率、使得網(wǎng)頁的更新與維護(hù)變得方便。但是在一些實際的使用過程中，由于CSS技術(shù)依然存在不少缺陷，因此還是需要進(jìn)行一些局部的優(yōu)化操作。
【關(guān)鍵詞】CSS技術(shù) CSS與網(wǎng)頁相關(guān)性 CSS缺陷 局部優(yōu)化
一、引言
從網(wǎng)絡(luò)誕生到發(fā)展至今.HTML的功能也隨著網(wǎng)絡(luò)的發(fā)展而日趨完善。然而，網(wǎng)頁內(nèi)容跟控制樣式夾雜混合一直是網(wǎng)頁設(shè)計語言的一大缺陷。為了能夠使網(wǎng)頁具有更好的兼容性，萬維網(wǎng)聯(lián)盟制定出統(tǒng)一的CSS規(guī)范，把需要利用樣式來控制的內(nèi)容徹底地從網(wǎng)頁中分離出來。
二、什么是CSS
CSS的全稱是Cascading Style Sheets，中文又稱為“層疊樣式表”，是一種用于控制網(wǎng)頁頁面布局的便捷技術(shù)，可以較輕松地控制頁面的布局，使頁面的元素變得合一;與此同時，它不再需要一頁一頁地修改單個頁面(假設(shè)每個頁面都是修改相同的部分)，而可以將多個網(wǎng)頁的風(fēng)格同時進(jìn)行更新;并且由于CSS具有非常好的兼容性，幾乎能在所有瀏覽器上使用。因此CSS技術(shù)在現(xiàn)代網(wǎng)頁設(shè)計中得到了非常廣泛的應(yīng)用。
三、CSS的產(chǎn)生背景
CSS是萬維網(wǎng)聯(lián)盟組織為了克服HTML語言在設(shè)計網(wǎng)頁樣式時的不足而制定出的擴(kuò)展樣式標(biāo)準(zhǔn)。CSS在各個方面不僅原本繼承了HTML各種標(biāo)記的屬性設(shè)定(即樣式) ，同時還擴(kuò)充了HTML中沒有實現(xiàn)的功能區(qū)，比如它能夠通過VBScript程序等設(shè)計語言來控制網(wǎng)頁，這樣便能實現(xiàn)有效地對網(wǎng)頁的外觀和布局進(jìn)行更精確的控制，繼而使網(wǎng)頁的展示、網(wǎng)頁的布局更加靈活。CSS可以將網(wǎng)頁內(nèi)容與控制網(wǎng)頁內(nèi)容的樣式分開設(shè)定，也就是說將網(wǎng)頁的外觀設(shè)定信息從網(wǎng)頁內(nèi)容中獨立出來，并集中管理。如果進(jìn)一步將重用的CSS樣式信息存儲為單個獨立的文件我們就能讓多個不同的網(wǎng)頁搭配同一個樣式，從而實現(xiàn)統(tǒng)一的風(fēng)格，這樣的話在修改網(wǎng)頁模板時可單獨修改被保存的獨立CSS文件，節(jié)省出修改每一個網(wǎng)頁文件的時間。
CSS的每一條定義都有如下的形式：
selector{property： value; property： value;……}
其中，selector可以是HTML的tag，ID或class，如P，BODY，A;property就是那些將要被修改的性質(zhì)(屬性)，如color;value是給property賦的值(參數(shù))，如color的值為red。
四、CSS與網(wǎng)頁的相關(guān)性
CSS樣式跟HTML網(wǎng)頁的完美結(jié)合，實現(xiàn)了網(wǎng)頁的展現(xiàn)效果控制代碼跟網(wǎng)頁實際內(nèi)容的分離。使得新的網(wǎng)頁設(shè)計經(jīng)常利用CSS技術(shù)來控制網(wǎng)頁的樣式，這其中通常包括控制頁面的整體布局、文字、圖片、背景等等相關(guān)信息，而HTML則干脆只用來羅列網(wǎng)頁中的幾大元素。一個完備的CSS樣式表可以以多種方式應(yīng)用到HTML頁面當(dāng)中，但外部連接通常是最常用也是最好的方式之一。這種方式采取將CSS樣式代碼單獨放入一個外部文件中，再由HTML中的link標(biāo)記來進(jìn)行調(diào)用。這樣做的好處是可以使多個網(wǎng)頁調(diào)用同一個樣式表文件，最大限度的實現(xiàn)了代碼重用及網(wǎng)站文件的最優(yōu)化配置。
CSS樣式在HTML中以STYLE標(biāo)識出現(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，顏色為黃，但當(dāng)鼠標(biāo)移至其上時，則錨點的提示字符變?yōu)閹聞澗€的紫色字體;整個文檔中被置標(biāo)P包圍的文字將以紅底藍(lán)字、字體大小為20個象素的形式出現(xiàn)。如果其中某段文字需另加修飾，可以單獨的的形式出現(xiàn)，例如
< p style=”font-size：30; font-weight ：bolder; background：white;color：blue” >
................
< /p >
則此段文字白底藍(lán)字，30個象素大小，且字體加粗。
五、CSS缺陷
(一)DIV+CSS盡管不是高不可攀，但是在網(wǎng)站建設(shè)中至少要比表格定位復(fù)雜的多，即使是對于網(wǎng)站建設(shè)的高手也是容易出現(xiàn)問題，更不要說是初學(xué)者了。(二)CSS網(wǎng)站建設(shè)的設(shè)計元素通常會放在一個外部文件中，或幾個文件，有可能相當(dāng)?shù)膹?fù)雜，甚至比較龐大，如果在網(wǎng)站建設(shè)中CSS文件調(diào)用出現(xiàn)異常，那么整個網(wǎng)站將變得慘不忍睹。(三)雖然說DIV+CSS解決了大部分瀏覽器兼容的問題，但是也有在部分瀏覽器中使用出現(xiàn)異常。(四)DIV+CSS在網(wǎng)站建設(shè)中對搜索引擎優(yōu)化與否，取決于網(wǎng)頁設(shè)計的專業(yè)水平，而不是DIV+CSS本身，在網(wǎng)站建設(shè)中使用DIV+CSS樣式的方法其實并不能保證網(wǎng)頁對搜索引擎的優(yōu)化，甚至不能保證一定比用HTML進(jìn)行網(wǎng)站建設(shè)更加的簡潔。
六、CSS局部優(yōu)化方法
編寫網(wǎng)頁時盡量減少占用網(wǎng)頁字節(jié)，同時簡化CSS代碼，讓自己寫的CSS代碼更加專業(yè)，多采用同屬性提取共用CSS選擇器，分離網(wǎng)頁顏色和背景設(shè)置樣式等技術(shù)。
總的來說，雖然CSS技術(shù)給網(wǎng)頁布局模式注入了新的生命力，能夠使得相同的HTML代碼呈現(xiàn)出數(shù)以百計風(fēng)格迥異的網(wǎng)站。但是要想比較熟練的掌握這種布局方式還需要更多的學(xué)習(xí)，積累實踐經(jīng)驗，最終目標(biāo)是要能夠靈活掌握CSS語言并能設(shè)計制作出符合Web標(biāo)準(zhǔn)的網(wǎng)頁。
參考文獻(xiàn)：
[1]《基于Web技術(shù)的CSS網(wǎng)頁布局應(yīng)用》 吳芳費，計算機(jī)光盤軟件與應(yīng)用，2011.
[2]《CSS層疊樣式表在DHTML中的應(yīng)用》王丹玲，鞍山師范學(xué)院學(xué)報，2006
[3]《CSS技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用與優(yōu)化》杜濤，長治學(xué)院學(xué)報，2007
[4]《CSS技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用探析》張志潔，電腦知識與技術(shù)，2007
作者簡介：
曹方明(1983―)，男，湖南郴州市，工作單位：郴州技師學(xué)院，職務(wù)：專職教師。
點擊下頁還有更多>>>網(wǎng)頁設(shè)計技術(shù)論文