網頁設計中元素定位和布局問題的研究

【摘要】隨著網站及網頁技術的發展迅猛，網頁設計中元素的定位和布局也成為人門關心的一個問題。本文重點對網頁設計中元素的定位和布局進行了探究，然后針對這些問題提出了一些實用的定位及布局的技術，旨在促進計算機網絡及信息技術的不斷進步。

【關鍵詞】網頁設計定位布局

網頁定位技術就是指如何把各種各樣的網頁元素，如文字、圖像、flash動畫等放置在網頁中的制定位置。定位網頁中的元素有很多種方法，運用圖層，還可以運用表格、框架、布局視圖等技術，而使用模版和庫及利用其復用技術能充分減少網頁設計人員的工作量和網頁布局的誤差。網頁元素定位一直是WEB標準應用中的難點，如果網頁中的元素定位不合理，那么可能應實現的效果實現不了。只有結合實際情況，靈活運用這些技術，理清了定位的原理，那才能讓網頁實現的更加完美。

一、利用表格對網頁元素定位

一般的設計者大多使用表格定位的方法對頁面元素進行定位，其在網頁中的應用已經突破了傳統的用來記載大量數據的功能，它可以使插入頁面的圖像和文本等對象被限制在某一固定位置。現今所有的綜合性網站都使用了大量的表格，利用表格來組織網頁內容，可以設計出布局合理、結構協調、美觀勻稱的網頁。

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

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

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

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

二、利用圖層對網頁元素定位

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

三、利用框架對網頁元素定位

框架是將一個網頁分割成多個html頁面，每個框架頁都是一個獨立的html頁面，通過框架集的使用，這些框架能夠很好地在一起運作，使網站的風格一致?？蚣艿淖饔猛ǔ１挥脕戆褳g覽器窗口劃分為若干區域，每個區域可以分別顯示不同的網頁，定義頁面的導航區域和內容區域，它的主要特征是網頁中的一部分固定不動，而另一部分換頁更新內容。這樣可以用來增強頁面的導航功能。

框架是一種成熟的版面控制技術，它的應用雖然可以有效地控制網頁的版面，但由于框架中鏈接目標屬性較復雜，因此對于網頁制作初學者來說使用框架過程中很難控制頁面顯示。

四、利用設計網頁布局

dreamweaver為用戶提供了幾個不同的途徑來創建和控制網頁頁面布局。頁面布局是一項重要的設計，創建頁面布局的一種常用方法是使用表格對元素的定位，但是，使用表格進行布局不太方便，因為最初創建表格是為了了顯示表格數據，而不是用于對web頁進行布局，為了簡化使用表格進行頁面布局的過程，dreamweaver提供了布局視圖。

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

由于頁面尺寸和顯示器大小及分辨率有關系，網頁的局限性就在于無法突破顯示器的范圍，而且因為瀏覽器也將占去不少空間，留下給頁面范圍變得越來越小。

五、利用庫與模板

模板和庫是批量制作網頁，統一網站風格的重要工具。在網頁的制作過程中，常常會制作很多布局結構和版式風格相似而網頁內容不同的頁面，這種類型的網頁每個頁面都是重復的制作，不但效率低而且很乏味。模板是一種預先設計好的網頁樣式，在制作風格相似的頁面時，只要套用這種模板，便可在其可編輯區域輸入不同的網頁內容，從而便可設計出風格一致的網頁。

任何套用了同一個模板的網頁與模板本身都建立了一種鏈接關系，當模板改變時，所有使用這種模板的網頁都將隨之改變。模板技術可以幫助設計者把網頁的布局和內容分離，快速制作大量風格布局相似的網頁頁面，這樣設計出的網頁更規范，設計制作和更新維護網頁的效率更高。

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

使用庫項目文件是直接方便了用戶高效制作網頁的方法，但頁編排很難調整，此時右鍵單擊頁面上庫項目文件，從彈出的快捷菜單選擇從源文件中分離，這樣就可以實現對網頁的精確編排。

參考文獻

[1]趙祖蔭.《網頁制作教程》清華大學出版社

[2]黃禮南.《網頁設計基礎教程與上機實訓》中國鐵道出版社

[3]秦波.《dreamweaver網頁設計實訓教程》兵器工業出版設計