網(wǎng)頁(yè)設(shè)計(jì)技術(shù)論文

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

　　網(wǎng)頁(yè)設(shè)計(jì)技術(shù)論文篇一

　　網(wǎng)頁(yè)設(shè)計(jì)中的CSS應(yīng)用技術(shù)

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

　　【關(guān)鍵詞】CSS技術(shù) CSS與網(wǎng)頁(yè)相關(guān)性 CSS缺陷 局部?jī)?yōu)化

　　一、引言

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

　　二、什么是CSS

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

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

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

　　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)頁(yè)的相關(guān)性

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

　　CSS樣式在HTML中以STYLE標(biāo)識(shí)出現(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文檔后，刷新顯示，則所有錨點(diǎn)變?yōu)槠胀ㄗ煮w，顏色為黃，但當(dāng)鼠標(biāo)移至其上時(shí)，則錨點(diǎn)的提示字符變?yōu)閹聞澗€的紫色字體;整個(gè)文檔中被置標(biāo)P包圍的文字將以紅底藍(lán)字、字體大小為20個(gè)象素的形式出現(xiàn)。如果其中某段文字需另加修飾，可以單獨(dú)的的形式出現(xiàn)，例如

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

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

　　< /p >

　　則此段文字白底藍(lán)字，30個(gè)象素大小，且字體加粗。

　　五、CSS缺陷

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

　　六、CSS局部?jī)?yōu)化方法

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

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

　　參考文獻(xiàn)：

　　[1]《基于Web技術(shù)的CSS網(wǎng)頁(yè)布局應(yīng)用》 吳芳費(fèi)，計(jì)算機(jī)光盤(pán)軟件與應(yīng)用，2011.

　　[2]《CSS層疊樣式表在DHTML中的應(yīng)用》王丹玲，鞍山師范學(xué)院學(xué)報(bào)，2006

　　[3]《CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用與優(yōu)化》杜濤，長(zhǎng)治學(xué)院學(xué)報(bào)，2007

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

　　作者簡(jiǎn)介：

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

點(diǎn)擊下頁(yè)還有更多>>>網(wǎng)頁(yè)設(shè)計(jì)技術(shù)論文