網(wǎng)頁設(shè)計(jì)中元素定位和布局問題的研究

【摘要】隨著網(wǎng)站及網(wǎng)頁技術(shù)的發(fā)展迅猛，網(wǎng)頁設(shè)計(jì)中元素的定位和布局也成為人門關(guān)心的一個(gè)問題。本文重點(diǎn)對(duì)網(wǎng)頁設(shè)計(jì)中元素的定位和布局進(jìn)行了探究，然后針對(duì)這些問題提出了一些實(shí)用的定位及布局的技術(shù)，旨在促進(jìn)計(jì)算機(jī)網(wǎng)絡(luò)及信息技術(shù)的不斷進(jìn)步。

【關(guān)鍵詞】網(wǎng)頁設(shè)計(jì)定位布局

網(wǎng)頁定位技術(shù)就是指如何把各種各樣的網(wǎng)頁元素，如文字、圖像、flash動(dòng)畫等放置在網(wǎng)頁中的制定位置。定位網(wǎng)頁中的元素有很多種方法，運(yùn)用圖層，還可以運(yùn)用表格、框架、布局視圖等技術(shù)，而使用模版和庫(kù)及利用其復(fù)用技術(shù)能充分減少網(wǎng)頁設(shè)計(jì)人員的工作量和網(wǎng)頁布局的誤差。網(wǎng)頁元素定位一直是WEB標(biāo)準(zhǔn)應(yīng)用中的難點(diǎn)，如果網(wǎng)頁中的元素定位不合理，那么可能應(yīng)實(shí)現(xiàn)的效果實(shí)現(xiàn)不了。只有結(jié)合實(shí)際情況，靈活運(yùn)用這些技術(shù)，理清了定位的原理，那才能讓網(wǎng)頁實(shí)現(xiàn)的更加完美。

一、利用表格對(duì)網(wǎng)頁元素定位

一般的設(shè)計(jì)者大多使用表格定位的方法對(duì)頁面元素進(jìn)行定位，其在網(wǎng)頁中的應(yīng)用已經(jīng)突破了傳統(tǒng)的用來記載大量數(shù)據(jù)的功能，它可以使插入頁面的圖像和文本等對(duì)象被限制在某一固定位置。現(xiàn)今所有的綜合性網(wǎng)站都使用了大量的表格，利用表格來組織網(wǎng)頁內(nèi)容，可以設(shè)計(jì)出布局合理、結(jié)構(gòu)協(xié)調(diào)、美觀勻稱的網(wǎng)頁。

在網(wǎng)頁中，有時(shí)候需要展開多種內(nèi)容，如文本、圖片等，由于這些內(nèi)容的顯示，使它們更加整齊美觀。但也帶來了一定的問題，比如下載速度慢，網(wǎng)頁元素定位不準(zhǔn)確等等。表格內(nèi)容的下載比較耗時(shí)，往往要在整張表格中全部?jī)?nèi)容下載完成后，才能顯示該表格內(nèi)容。因此，表格中盡量不要嵌套過多的表格，以免影響頁面的下載速度。

瀏覽器解釋html頁面的順序是自上而下依次逐行解釋和顯示，只有等到瀏覽器解釋到了頁面的最后，才會(huì)將整個(gè)頁面的內(nèi)容在訪問者眼前顯示出來。一些優(yōu)秀網(wǎng)站的設(shè)計(jì)，通常也都采用表格來定位，而且大多數(shù)都是一行一行來設(shè)計(jì)的，當(dāng)然每個(gè)單行排列的表格里也存有表格嵌套，但整個(gè)頁面的內(nèi)容最好不要放于一張大表格里面。因此在使用表格進(jìn)行網(wǎng)頁元素布局時(shí)，應(yīng)盡量避免使用整個(gè)表格。

總表格和嵌套表格在設(shè)置寬度和高度時(shí)需要注意的是：總表格設(shè)置的是網(wǎng)頁整體的排版，為了使之在不同分辨率的顯示器下能保持統(tǒng)一的外觀，總表格的高度和寬度一般使用像素值。而為了使嵌套表格的高度和寬度不和總表格發(fā)生沖突，嵌套表格一般使用百分比設(shè)置高度和寬度。

由于表格定位只能解決平面布局中的定位問題，隨著人們對(duì)平面布局精確度要求的提高和三維空間定位需求的增加，越來越多的網(wǎng)頁采用層來實(shí)現(xiàn)元素的定位。

二、利用圖層對(duì)網(wǎng)頁元素定位

在設(shè)計(jì)網(wǎng)頁時(shí)，必須對(duì)頁面元素進(jìn)行定位，使頁面布局整齊、美觀。層就是一種新的網(wǎng)頁元素定位布局技術(shù)，因?yàn)閳D層具有像素級(jí)精確定位特性以及層疊特性，所以可以利用圖層技術(shù)來定位某一網(wǎng)頁元素在網(wǎng)頁中的絕對(duì)位置。例如，要定位一個(gè)圖片在頁面上的絕對(duì)位置時(shí)，可以先繪制一個(gè)圖層，接著將圖片插入到該圖層中，然后選擇該圖層，在層屬性面板中設(shè)置層的右上坐標(biāo)即可。層具有隱藏屬性，利用隱藏屬性可以控制頁面元素的顯示與隱藏，增加網(wǎng)頁的動(dòng)態(tài)效果。把頁面元素置于層中，用戶瀏覽頁面時(shí)，當(dāng)鼠標(biāo)移到一個(gè)圖片上時(shí)，顯示與該圖片有關(guān)的文字說明；當(dāng)鼠標(biāo)移出該圖片時(shí)，文字說明隱藏。這種效果就可以利用層的技術(shù)實(shí)現(xiàn)。配合時(shí)間軸的使用，可同時(shí)移動(dòng)一個(gè)或多個(gè)層，從而輕松地制作出動(dòng)態(tài)效果。層具有透明特性，在排列圖層時(shí)可以觀察到網(wǎng)頁元素的定位情況，并且在移動(dòng)和編輯某個(gè)圖層時(shí)不會(huì)影響其它層。但是當(dāng)改變顯示器分辨率，改變窗口大小之后，層就錯(cuò)位了。解決這些問題可以通過層的相對(duì)定位來實(shí)現(xiàn)，必要的時(shí)候還可以實(shí)現(xiàn)表格和層的相互轉(zhuǎn)換。在網(wǎng)頁設(shè)計(jì)中靈活地應(yīng)用表格和層可以設(shè)計(jì)出結(jié)構(gòu)整齊而美觀的頁面。

三、利用框架對(duì)網(wǎng)頁元素定位

框架是將一個(gè)網(wǎng)頁分割成多個(gè)html頁面，每個(gè)框架頁都是一個(gè)獨(dú)立的html頁面，通過框架集的使用，這些框架能夠很好地在一起運(yùn)作，使網(wǎng)站的風(fēng)格一致。框架的作用通常被用來把瀏覽器窗口劃分為若干區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁，定義頁面的導(dǎo)航區(qū)域和內(nèi)容區(qū)域，它的主要特征是網(wǎng)頁中的一部分固定不動(dòng)，而另一部分換頁更新內(nèi)容。這樣可以用來增強(qiáng)頁面的導(dǎo)航功能。

框架是一種成熟的版面控制技術(shù)，它的應(yīng)用雖然可以有效地控制網(wǎng)頁的版面，但由于框架中鏈接目標(biāo)屬性較復(fù)雜，因此對(duì)于網(wǎng)頁制作初學(xué)者來說使用框架過程中很難控制頁面顯示。

四、利用設(shè)計(jì)網(wǎng)頁布局

dreamweaver為用戶提供了幾個(gè)不同的途徑來創(chuàng)建和控制網(wǎng)頁頁面布局。頁面布局是一項(xiàng)重要的設(shè)計(jì)，創(chuàng)建頁面布局的一種常用方法是使用表格對(duì)元素的定位，但是，使用表格進(jìn)行布局不太方便，因?yàn)樽畛鮿?chuàng)建表格是為了了顯示表格數(shù)據(jù)，而不是用于對(duì)web頁進(jìn)行布局，為了簡(jiǎn)化使用表格進(jìn)行頁面布局的過程，dreamweaver提供了布局視圖。

在布局模式中，可以使用表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計(jì)自己的網(wǎng)頁布局，并且可以避免使用表格帶來的缺陷，例如可以在網(wǎng)頁上輕松地畫出單元格，讓后定制和移動(dòng)單元格到任何需要的地方，創(chuàng)建的布局可以有固定的寬度或者可以占滿整個(gè)瀏覽器窗口。當(dāng)然也可以使用傳統(tǒng)的表格來創(chuàng)建網(wǎng)頁布局，或者是先創(chuàng)建多個(gè)互不重疊的層，讓后將它們轉(zhuǎn)換為表格，但是dreamweaver的布局視圖是創(chuàng)建頁面布局更簡(jiǎn)單的方法。

由于頁面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁的局限性就在于無法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給頁面范圍變得越來越小。

五、利用庫(kù)與模板

模板和庫(kù)是批量制作網(wǎng)頁，統(tǒng)一網(wǎng)站風(fēng)格的重要工具。在網(wǎng)頁的制作過程中，常常會(huì)制作很多布局結(jié)構(gòu)和版式風(fēng)格相似而網(wǎng)頁內(nèi)容不同的頁面，這種類型的網(wǎng)頁每個(gè)頁面都是重復(fù)的制作，不但效率低而且很乏味。模板是一種預(yù)先設(shè)計(jì)好的網(wǎng)頁樣式，在制作風(fēng)格相似的頁面時(shí)，只要套用這種模板，便可在其可編輯區(qū)域輸入不同的網(wǎng)頁內(nèi)容，從而便可設(shè)計(jì)出風(fēng)格一致的網(wǎng)頁。

任何套用了同一個(gè)模板的網(wǎng)頁與模板本身都建立了一種鏈接關(guān)系，當(dāng)模板改變時(shí)，所有使用這種模板的網(wǎng)頁都將隨之改變。模板技術(shù)可以幫助設(shè)計(jì)者把網(wǎng)頁的布局和內(nèi)容分離，快速制作大量風(fēng)格布局相似的網(wǎng)頁頁面，這樣設(shè)計(jì)出的網(wǎng)頁更規(guī)范，設(shè)計(jì)制作和更新維護(hù)網(wǎng)頁的效率更高。

在創(chuàng)建網(wǎng)站的過程中，不同的網(wǎng)頁頁面上可能經(jīng)常會(huì)反復(fù)用到很多相同的網(wǎng)頁元素。Dreamweaver可以把網(wǎng)站頁面中經(jīng)常反復(fù)要用的元素存入一個(gè)庫(kù)中，這些存入庫(kù)中的元素稱為庫(kù)項(xiàng)目。在網(wǎng)頁制作時(shí)可將庫(kù)項(xiàng)目的一個(gè)副本直接插入到網(wǎng)頁中，同時(shí)還插入了對(duì)該庫(kù)項(xiàng)目的引用。當(dāng)對(duì)該項(xiàng)目編輯修改后，引用該項(xiàng)目的網(wǎng)頁能自動(dòng)更新。從而可以方便地實(shí)現(xiàn)整個(gè)網(wǎng)站各頁面上與庫(kù)項(xiàng)目的相關(guān)內(nèi)容一次更新。而庫(kù)就是網(wǎng)頁上能夠被重復(fù)使用的網(wǎng)頁元素的集合，它從局部上維護(hù)網(wǎng)頁風(fēng)格。在dreamweaver中，可以將單獨(dú)的網(wǎng)頁內(nèi)容定義成庫(kù)項(xiàng)目。編輯庫(kù)項(xiàng)目的時(shí)候，慎用嵌套表格或者復(fù)雜技術(shù)，以免引起不必要的麻煩。

使用庫(kù)項(xiàng)目文件是直接方便了用戶高效制作網(wǎng)頁的方法，但頁編排很難調(diào)整，此時(shí)右鍵單擊頁面上庫(kù)項(xiàng)目文件，從彈出的快捷菜單選擇從源文件中分離，這樣就可以實(shí)現(xiàn)對(duì)網(wǎng)頁的精確編排。

參考文獻(xiàn)

[1]趙祖蔭.《網(wǎng)頁制作教程》清華大學(xué)出版社

[2]黃禮南.《網(wǎng)頁設(shè)計(jì)基礎(chǔ)教程與上機(jī)實(shí)訓(xùn)》中國(guó)鐵道出版社

[3]秦波.《dreamweaver網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)教程》兵器工業(yè)出版設(shè)計(jì)