Web Design佈局的方法

網頁佈局的方法有兩種,第一種為紙上佈局;第二種為軟件佈局。下面分別加以介紹:
1.紙上佈局法
許多網頁設計者不喜歡先畫出頁面佈局的草圖,而是直接在網頁設計器裡邊設計佈局邊加內容。這種不打草稿的方法不能讓你設計出優秀的網頁來。所以在開始製作網頁時,要先在紙上畫出你頁面的佈局草圖來。
準備一若干張白紙和一隻鉛筆,你要設計一個時尚站點。
*尺寸選擇:
目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數訪問者,你網站設計頁面的尺寸以800X600的分辨率為準。
*造型的選擇:
先在白紙上畫出象徵瀏覽器窗口的矩形,這個矩形就是你佈局的範圍了。選擇一個形狀作為整個頁面的主題造型,我們選擇圓形,因為它代表者柔和,和時尚流行比較相稱,然後在矩形框架裡隨意畫出來,你可以試者在增加一些圓形或者其它形狀。這樣畫下來,你會發現很亂。其實,如果你一開始就想設計出一個完美的佈局來是比較困難的,而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點,你不要擔心你設計的佈局是否能夠實現。事實上,只要你能想到的佈局都能靠現今的HTML技術實現。
考慮到左邊向左凹的弧線,為了取得平衡我們在頁面右邊增加了一個矩形(也可以是一條線段)。
*增加頁頭:
.jpg是我們從.jpg和2.jpg得到的佈局造型,那麼我們該增加頁頭了。一般頁頭都是位於頁面頂部,所以我們為.jpg增加了一個頁頭,為了和左邊的弧線和右邊的矩形取得平衡,我們增加了一個矩形頁頭並讓頁頭相交與左邊的弧線。
*增加文本:
頁面的空白部分加別加入文本和圖形。因為在頁面右邊有矩形作為陪襯,所以文本放置在空白部分不會因為左邊的弧線而顯得不協調。
*增加圖片:
圖片是美化頁面和說明內容必須的媒體。在這裡把圖片加入到適當的地方。
經過以上的幾個步驟,一個時尚頁面的大概佈局就出現了。當然,它不是最後的結果,而是你以後製作時的重要參考依據。
2.軟件佈局法
如果你不喜歡用紙來畫出你的佈局意圖,那麼你還可以利用網頁寄存軟件來完成這些工作。這個軟件就是Photoshop。Photoshop所具有的對圖像的編輯功能用到設計網頁佈局上更顯得心應手。不像用紙來設計佈局,利用Photoshop可以方便的使用顏色,使用圖形,並且可以利用層的功能設計出用紙張無法實現的佈局意念。