網頁布局技術初探

摘 要：隨著網絡的飛速發展，網頁設計技術也變得很熱門。那么一個好的網頁作品首先應在布局上有特色、有美感。本文從網頁布局角度分析介紹了DW中經常使用的幾種布局方法，指出了布局技術的發展方向。

關鍵詞：網頁布局； 表格； 框架； 層； DIV+CSS

中圖分類號：TP39 文獻標識碼：A 文章編號：1006-3315(2011)4-176-001

一、引言

設計網頁的第一步就是設計版面布局。網頁設計者能夠把各種內容進行合理的安排，給瀏覽者以賞心悅目的感覺，這樣才能達到內容與形式的完美結合，增強網站的吸引力。

因此說，設計網頁不但是一項技術性的工作，它還是一項藝術性的工作，要求設計者有較高的藝術修養和審美情趣，這樣才能設計出高水平的網頁來。網頁的排版布局就是決定你的網站美觀與否的一個重要方面。

二、網頁排版布局的步驟

1．方案設計

首先根據自己網站的內容，結合其它優秀的網站確定自己網站的整體風格，其中包括網頁的結構，色彩以及需要的各種素材。也就是說我們需要在一張白紙上，盡可能的發揮想象力，將自己的創意用一只鉛筆勾勒出來。

2．準備初步填充的內容

在第一步的基礎上，把需要的功能模塊安排到頁面上，這里主要是指網站的標志、主菜單、新聞、搜索、友情鏈接、廣告條、版權信息等。這時我們一定要注意我們網站的主要內容是什么，避免添加太多的雜碎內容，一定要主次分明。

3．技術設計

在初步設計的基礎上，應用各種網頁設計技術，首先進行布局，然后進一步解決各部分的技術問題。這其中需要對網站的logo、背景圖、題頭等部分進行設計，然后把他們放到確定的位置上，這樣一個網頁的布局基本上就完成了。

4．定案設計（逐步細化）

最后的調整階段，將頁面布局精細化、具體化。經過不斷的嘗試和修改，使網頁逐步完善。

三、網頁布局的技術

1．表格規劃網頁

表格是用于在HTML頁上顯示表格式數據，以及對文本或圖形進行布局的強有力工具。在DREAMWEAVER中，為了版式的安排，都是通過加入大量的表格來進行定位的，有些人甚至在大表格中嵌套多重的小表格。這實質上也是加大瀏覽器的負擔，使頁面呈現時間大大加長。因此。在使用表格時，應盡量把表格打散，并要盡可能地避免表格的層層相套。

2．用圖層進行布局設計

圖層（layer）是HTML內容的容器，通常由

例如：單擊對象面板中的層按鈕，在起點處插人一個新層，然后在層中插入需要移動顯示的內容，插入一幅圖片。選中圖層，執行“Window/Timeline”命令打開Timeline時間軸編輯窗口，右鍵單擊第一幀，在快捷菜單中執行“Add Object”命令，產生一個15幀的動畫。選擇第15幀，拖拽圖層到路徑終點位置釋放，這樣一個簡單的移動路徑就制作完成了。此時移動路徑是一條兩點間的直線，如果要讓路徑變成平滑的曲線，可以在Timeline中添加關鍵幀，在添加關鍵幀位置右擊，然后選擇“Add Keyframe”命令，拖動圖層對象，此時路徑就變成彎曲的了。

3．利用框架進行布局

框架是在同一瀏覽器頁面中顯示多個相互隔離的HTML頁面的結構，它是一種全新的組織網頁的方法。使用框架集時既可以使用DW提供的框架集，也可以自己創建所需要的頁面結構。

網頁設計時，往往我們希望自己的網頁中的一部分內容保持不動（例如導航部分），而其他部分內容發生變化。例如一個網頁中有左右兩個框架，一個是導航菜單，一個是主視圖。我們希望單擊導航菜單，而主視圖中的內容根據導航菜單的選擇而改變。這時，我們只要改變鏈接的“目標”屬性，將目標更改為主視圖框架的名稱即可。

四、CSS+DIV布局

作為一種新的網頁設計技術快速的流行起來，說明該技術與傳統的網頁布局顯示設計技術比較起來優勢是十分明顯的。如今大部分網站仍然采用表格嵌套內容的方式來制作網站，雖然此方法對于我們來說比較熟悉、容易上手，但是，它卻阻礙了一種更好的、更有親和力的、更靈活的，功能更強大的網頁設計方法——CSS+DIV。

根據新的Web標準，采用DIV+CSS的網頁布局方案，可以把“內容”放在DIV（Division，區塊）中，結構由DIV產生，最后使用CSS（Cascading Style Sheet，層疊樣式表）來進行“表現”重構網站布局，

DIV+CSS的布局方法是基于盒模型的概念，可以把每個DIV塊看成是一個盒子，盒子里面的東西和盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin），如圖所示。

用DIV+CSS設計思路是這樣的：

（1）用DIV來定義語義結構；（2）為這個CSS定義的盒子內加上內容，如文字、圖片等；（3）最后用CSS來美化網頁，如加入背景、線條邊框、對齊屬性等；

CSS樣式表可以用于HTML中3個不同的層次：local(定義一個頁面的局部)，global(定義整個頁面)和linked(定義多個頁面)。為了使瀏覽器意識到CSS樣式表的存在，必須用特定的方法將CSS樣式表加入到HTML文檔中去，概括起來可以分為外部引用、內部引用和局部引用三種。其中，鏈接外部CSS樣式文件是使樣式表功能發揮得最淋漓盡致的方法。

撇開網頁布局的藝術性和創造性，光從技術應用的角度來談網頁布局當然會具有片面性，但是CSS和DIV的應用將帶來的網頁布局技術元素是不可小覷的，并且作為設計者結合多種軟件對網頁布局進行設計是有必要的。我想，隨著網絡的發展，在不久的將來，布局的技術將變得更簡單，更實用。

參考文獻：

[1]姜韡，吳濤．網站全程設計技術.清華大學出版社.北京交通大學出版社

[2]陳月波．網頁設計，電子工業出版，2007