王立恒
【摘 要】在電子商務(wù)不斷發(fā)展的過(guò)程中,網(wǎng)頁(yè)的設(shè)計(jì)也得到迅速的發(fā)展,因此,對(duì)網(wǎng)頁(yè)設(shè)計(jì)的要求也不斷提高,尤其是在創(chuàng)新的社會(huì)背景下,網(wǎng)頁(yè)設(shè)計(jì)的新理念和新方法,不斷推陳出新。在這里,主要針對(duì)網(wǎng)頁(yè)設(shè)計(jì)中的布局技術(shù)進(jìn)行了簡(jiǎn)單分析與探討。
【關(guān)鍵詞】布局技術(shù);HTML網(wǎng)頁(yè)設(shè)計(jì);運(yùn)用
一、引言
現(xiàn)代社會(huì)是一個(gè)信息飛速發(fā)展的時(shí)代,網(wǎng)絡(luò)作為一種傳播信息的手段正在以超乎想象的速度不斷向前發(fā)展,各種新技術(shù),新模式應(yīng)運(yùn)而生。我國(guó)的網(wǎng)絡(luò)建設(shè)更是取得了世人矚目的成績(jī),網(wǎng)絡(luò)用戶成倍的增長(zhǎng),但是所有網(wǎng)站中頁(yè)面的設(shè)計(jì)確是千篇一律,沒(méi)有多大的提升。其實(shí)網(wǎng)站本身就是無(wú)數(shù)個(gè)頁(yè)面的拼合,網(wǎng)頁(yè)的設(shè)計(jì)是一種審美藝術(shù)的視覺(jué)表達(dá),也是美學(xué)的一種體現(xiàn)和眼神,作為網(wǎng)頁(yè)的設(shè)計(jì)人員,必須把傳統(tǒng)的平面設(shè)計(jì)和現(xiàn)代的布局設(shè)計(jì)理念結(jié)合起來(lái),才能做出有自我特色的網(wǎng)頁(yè),設(shè)計(jì)者應(yīng)該結(jié)合網(wǎng)絡(luò)的特點(diǎn),關(guān)注網(wǎng)站所針對(duì)的人群,設(shè)計(jì)出具有自我的特色的網(wǎng)絡(luò)傳播頁(yè)面。
在網(wǎng)頁(yè)設(shè)計(jì)中,布局主要是利用各種元素在布局處理中的方法以及規(guī)律。從規(guī)律性上來(lái)講,其主要的特點(diǎn)就是重復(fù)布局、近似布局、漸變布局、發(fā)射布局、特異布局,從非規(guī)律性的特點(diǎn)上來(lái)講,主要表現(xiàn)為密集布局、分割布局、對(duì)比布局、肌理布局、空間布局。在網(wǎng)頁(yè)設(shè)計(jì)中,布局作為整個(gè)設(shè)計(jì)的結(jié)構(gòu)因素,必須要在布局中,通過(guò)科學(xué)安排相關(guān)的功能和區(qū)域,運(yùn)用不同的形態(tài)、材料,重新組合成為一個(gè)新的單元,并賦予視覺(jué)化概念,將相關(guān)基本形任意組合成新的視覺(jué)元素,才能達(dá)到應(yīng)有的設(shè)計(jì)效果。另外,布局關(guān)系到網(wǎng)頁(yè)設(shè)計(jì)文化和水平的好壞,通過(guò)點(diǎn)、線、面的運(yùn)用,以及各個(gè)元素之間關(guān)系的正確處理,滿足不同文化環(huán)境對(duì)網(wǎng)頁(yè)設(shè)計(jì)的要求,以便順應(yīng)人們的視覺(jué)感受,打動(dòng)觀看者的視覺(jué),進(jìn)而達(dá)到設(shè)計(jì)想要的效果。
二、HTML網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的布局方式
(一)表格
表格布局是頁(yè)面布局技術(shù)中最常見(jiàn)的布局方式。在Dreamweaver中插入表格就類似于在WORD里插入表格,具有所見(jiàn)即所得的特點(diǎn)。利用表格組織各種網(wǎng)頁(yè)元素,既直觀又操作簡(jiǎn)單。但是,使用表格進(jìn)行布局不太方便,因?yàn)樽畛鮿?chuàng)建表格是為了了顯示表格數(shù)據(jù),而不是用于對(duì)web頁(yè)進(jìn)行布局,為了簡(jiǎn)化使用表格進(jìn)行頁(yè)面布局的過(guò)程,dreamweaver提供了布局視圖。
在布局模式中,可以使用表格作為基礎(chǔ)結(jié)構(gòu)來(lái)設(shè)計(jì)自己的網(wǎng)頁(yè)布局,并且可以避免使用表格帶來(lái)的缺陷,例如可以在網(wǎng)頁(yè)上輕松地畫(huà)出單元格,然后定制和移動(dòng)單元格到任何需要的地方,創(chuàng)建的布局可以有固定的寬度或者可以占滿整個(gè)瀏覽器窗口。當(dāng)然也可以使用傳統(tǒng)的表格來(lái)創(chuàng)建網(wǎng)頁(yè)布局,或者是先創(chuàng)建多個(gè)互不重疊的層,讓后將它們轉(zhuǎn)換為表格。
由于在網(wǎng)頁(yè)中插入大量表格,會(huì)造成頁(yè)面源代碼存在大量冗余、可讀性差、直接導(dǎo)致網(wǎng)頁(yè)讀取速度慢的問(wèn)題,不利于網(wǎng)站的更新和維護(hù),目前大中型網(wǎng)站一般不用表格布局。
(二)框架
框架是將一個(gè)網(wǎng)頁(yè)分割成多個(gè)HTML頁(yè)面,每個(gè)框架頁(yè)都是一個(gè)獨(dú)立的HTML頁(yè)面,通過(guò)框架集的使用,這些框架能夠很好地在一起運(yùn)作,使網(wǎng)站的風(fēng)格一致??蚣芸梢园褳g覽器窗口劃分為若干區(qū)域,每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè),定義頁(yè)面的導(dǎo)航區(qū)域和內(nèi)容區(qū)域,它的主要特征是網(wǎng)頁(yè)中的一部分固定不動(dòng),而另一部分換頁(yè)更新內(nèi)容。這樣可以用來(lái)增強(qiáng)頁(yè)面的導(dǎo)航功能。
框架布局比較靈活,若有效運(yùn)用,則能使網(wǎng)頁(yè)更整潔、清晰。但是,由于框架中鏈接目標(biāo)屬性較復(fù)雜,因此對(duì)于網(wǎng)頁(yè)制作初學(xué)者來(lái)說(shuō)使用框架過(guò)程中很難控制頁(yè)面顯示。對(duì)于內(nèi)容多、布局復(fù)雜的網(wǎng)站,也不宜采用框架布局,因?yàn)?,過(guò)多的框架會(huì)影響網(wǎng)頁(yè)下載所需的時(shí)間,影響網(wǎng)頁(yè)的讀取速度,而且瀏覽器對(duì)框架結(jié)構(gòu)的兼容性也不是很好。
(三)DIV+CSS
DIV+CSS布局技術(shù)的出現(xiàn)彌補(bǔ)了表格和框架布局的不足,優(yōu)勢(shì)在于代碼精簡(jiǎn)、頁(yè)面下載速度快,表現(xiàn)和內(nèi)容相分離,布局靈活,便于維護(hù)。我們可以將樣式單獨(dú)保存在CSS文件中,例如用手機(jī)WAP上網(wǎng)時(shí),樣式文件就可以不加載,大大地節(jié)約頁(yè)面下載時(shí)間。多個(gè)頁(yè)面可共享一個(gè)CSS文件,要修改頁(yè)面樣式時(shí),只需修改CSS文件即可實(shí)現(xiàn)對(duì)整個(gè)頁(yè)面的重新布局,不影響網(wǎng)頁(yè)內(nèi)容。目前多數(shù)大型網(wǎng)站都采用此種方法進(jìn)行布局,但是對(duì)于初學(xué)者來(lái)說(shuō),它的操作相對(duì)復(fù)雜,要求用戶對(duì)代碼有一定的了解。
三、HTML網(wǎng)頁(yè)設(shè)計(jì)布局的運(yùn)用方法
(一)圖片的應(yīng)用
圖片作為網(wǎng)頁(yè)中的重要組成元素,是說(shuō)明網(wǎng)頁(yè)內(nèi)容和美化頁(yè)面的關(guān)鍵。因此,需要設(shè)計(jì)師把握布局設(shè)計(jì)理念,把圖片加到適當(dāng)?shù)牡胤?,利用圖片對(duì)頁(yè)面進(jìn)行處理。如利用Photoshop或Illustrator可以將圖片切成小塊,根據(jù)情況分別進(jìn)行優(yōu)化。一般我們把有較為復(fù)雜顏色變化的小塊優(yōu)化為jpg,而把那種只有單純色塊的卡通畫(huà)式的小塊優(yōu)化為gif,這是由這兩種格式的特點(diǎn)決定的。
(二)頁(yè)面排版的應(yīng)用
在網(wǎng)頁(yè)設(shè)計(jì)中,頁(yè)面排版作為視覺(jué)傳達(dá)的重要手段,同樣,決定著網(wǎng)頁(yè)設(shè)計(jì)的成敗。頁(yè)面排版包括頁(yè)面距、版面設(shè)置、表格處理、頁(yè)碼格式等內(nèi)容,種類繁多,需要設(shè)計(jì)者從中尋找相關(guān)的規(guī)律,要根據(jù)網(wǎng)頁(yè)的形式,利用特異處理,將一些相同的基本型中出現(xiàn)一個(gè)形狀或者大小特異的基本型進(jìn)行整合,進(jìn)而達(dá)到和諧統(tǒng)一的畫(huà)面效果機(jī)理。
以表格的處理為例進(jìn)行說(shuō)明,在使用Dream weaver制作網(wǎng)頁(yè)時(shí),會(huì)自動(dòng)在每一個(gè)td內(nèi)添加一個(gè)空字符“”。如果單元格內(nèi)沒(méi)有填充其它元素,這個(gè)空字符會(huì)保留,在指定td的寬度或高度后,可以在源代碼內(nèi)將其刪去。
(三)造型組合的應(yīng)用
造型代表著一個(gè)頁(yè)面的整體形象,而這種形象一定要突出整體性。在網(wǎng)頁(yè)設(shè)計(jì)中,要利用經(jīng)典圖形,用最簡(jiǎn)單的設(shè)計(jì)技術(shù)創(chuàng)造經(jīng)典的視覺(jué)效果,同時(shí),這也是創(chuàng)意和理論的高度結(jié)合,簡(jiǎn)單來(lái)講,就是在確定好圖形與背景之間的關(guān)系,通過(guò)雙重意象的構(gòu)建、產(chǎn)生與形成,吸引觀眾的注意力,使得他們的視線更多集中在圖形或背景上,因此,這就需要強(qiáng)化頁(yè)面布局的局部以及整體效果。比如我們平常所見(jiàn)到的頁(yè)面布局,其在背景和圖像的區(qū)別雖然不明顯,但是卻存在著一定的差異,由黑白條紋所布局,用上下交錯(cuò)的手法創(chuàng)造出了雙重意象,給觀者造成一種視覺(jué)上的錯(cuò)覺(jué),能夠讓人反復(fù)的觀賞畫(huà),成功地吸引了注意力。
【參考文獻(xiàn)】
[1]郭軍軍,常用網(wǎng)頁(yè)布局對(duì)比研究[J].信息技術(shù),2012.
[2]張趙輝,探析網(wǎng)頁(yè)前端技術(shù)及其升華[J].科技致富向?qū)В?015.