頁面板式設計及頁面結構布局

確定網頁的版式結構是設計網頁的第一步，與傳統的報紙雜志一樣，設計者可以將網頁當成一張白紙，然后將網頁內容安排在這張紙上，這就出現了布局問題，那么今天我們就來講講網頁板式設計及網頁結構布局。網頁的版式結構與平面設計一樣，有著相同的基本美學原則，好的布局可以使網頁結構清晰、平衡視覺，給用戶以舒適、大方的感覺。

一、具體采用什么樣的版式結構，可以遵循以下幾點設計原則。

1、對稱的原則

網頁的區域劃分完全均等，主要強調秩序感，給人以安定、誠實、信賴的感受，但其缺點是過于死板。

2、平衡的原則

這里的平衡指視覺平衡，不是對稱平衡，而是指利用視覺規律，通過大小、距離、形狀、疏密等因素形成的非對稱平衡，它可以給人以新穎、活潑的感覺。

3、對比的原則

對比原則是指有效地運用網頁元素的各種差異，通過大小、形狀、顏色、方向、明暗、面積等變化來引起用戶的注意，這種方法多運用在個人網站中。

4、留白的原則

版面中適當留出一定的空白，能夠起到強調、引起注意的作用。在網頁設計中，留白是一種比較有效的設計方法。

二、網頁結構的基本類型很多，主要包括骨骼型、滿版型、分割型、中軸型、對稱型、三角型、自由型等。本節主要討論最常見的版式結構——骨骼型。它是一種規范化的、理性的、成熟的版式結構，主要分為通欄、二分欄、三分欄、四分欄等。

1、網頁通欄結構布局

通欄結構通常適用于信息較少的網站。本實例中，頁面中占有大半個畫面的汽車圖片非常直觀地向用戶傳達出產品的相關信息。網頁運用紅色和黑色作為主色調，傳遞了一種活力和野性十足的味道，與越野吉普車的定位相得益彰。具體操作步驟如下。

(1)執行“文件>新建”菜單命令，建立個尺寸為1003×650像素，分辨率為72像素/英寸、背景色為黑色的新文件，將其存儲為“通欄結構psd”文件。
(2)執行“文件>打開”菜單命令，打開張圖像文件，如右圖所示。
(3)選擇工具箱中的“移動工具”，將圖像拖至“通欄結構”圖像窗口中，這時將自動產生“圖層1”，設置“圖層1”的“不透明度”為10%，圖像效果如下圖所示。

(4)繼續打開另一張汽車圖像，使用“移動工具”將其中的汽車圖像拖至“通欄結構”圖像窗口中。
(5)選擇工具箱中的“橡皮擦工具”，在“橡皮擦工具”選項欄中設置各項參數，如下圖所示。

(6)在畫面中沿著汽車邊緣擦除背景圖像，如下圖所示。

(7)選擇工具箱中的“多邊形套索工具”，在工具選項欄中設置“羽化”值為O，在按住Shift鍵的同時在畫面中依次單擊，創建兩個選擇區域，如下圖所示。

(8)創建一個新圖層“圖層3”，如下圖所示。

(9)設置前景色的RGB值為172、0、0，按Alt+Delete快捷鍵填充前景色，然后設置“圖層3”的“填充”值為43%。
(1 0)按Ctrl+D快捷鍵取消選擇區域。
(1 1)執行“圖層>圖層樣式>描邊”菜單命令，在彈出的“圖層樣式”對話框中設置各項參數，如下圖所示。

(1 2)單擊“確定”按鈕，效果如下圖所示。

(1 3)使用“多邊形套索工具”，在按住Shift鍵的同時，再次在畫面中創建兩個選區，如下圖所示。

(1 4)在“圖層”面板中創建個新圖層“圖層4”，按Alt+Delete快捷鍵填充前景色，再按Ctrl+D快捷鍵取消選擇區域。然后設置“圖層4”的“不透明度”值為38%，效果如下圖所示。

(1 5)用同樣的方法在“圖層”面板中，創建一個新圖層“圖層5”，設置前景色的RGB值為245、43、43，使用“多邊形套索工具”在畫面中創建一個選區，按Air+Delete快捷鍵填充前景色，圖像效果如下圖所示。

(16)按Ctrl+D快捷鍵取消選區，完成制作。

2、網頁二分欄結構布局

二分欄結構在網絡上十分常見，在一般情況下都是左窄右寬，在右側的寬欄中嵌入多個橫向的分欄，以便放下更多的信息條目。這種結構效果簡練、大氣、個性鮮明，各個功能區域分割清晰，一目了然，便于查閱。本實例是一個專為女性開設的婚慶類門戶網站，采用了二分欄結構，運用了柔美、溫暖的粉紅色為主色調，容易受到年輕女性的青睞。

具體操作步驟如下。

(1)執行“文件>新建”菜單命令，建立尺寸為1003×1200像素、分辨率為72像素/英寸、背景色為淡粉色，RGB值為245、230、230的新文件，將其存儲為“2分欄．psd”文件。
(2)按Ctl+R快捷鍵打開標尺，分別從上端和左側的標尺處拖動出多條參考線，如下圖所示。

(3)創建一個新圖層“圖層1”。
(4)設置前景色的RGB值為245、218、21 8，然后選擇工具箱中的“矩形工具”，在工具選項欄中設置“半徑”為30像素，并按“填充像素”按鈕，在畫面的頂端依照參考線拖動鼠標，創建兩個粉紅色的矩形圖形，如下圖所示。

(5)在兩個矩形相交夾角處拖動鼠標，再創建一個粉紅色的矩形，如下圖所示。

(6)在“圓角矩形工具”選項欄中按“路徑”按鈕，仍設置“半徑”為30像素，在最后創建的圓角矩形圓形上拖動鼠標，創建一個圓角矩形路徑，如下圖所示。

(7)在按住Ctrl鍵的同時，單擊“路徑”面板中的“工作路徑”，將路徑轉換為選擇區域。
(8)按Delete鍵刪除選擇區域內的圖像，使保留的粉紅色圖形的夾角呈圓角狀態，再按Ctl+D快捷鍵取消選區，圖像效果如下匿所示。

(9)在“圖層”面板中創建新圖層“圖層2”。
(1 O)設置前景色的RGB值為234、238、239，在“圓角矩形工具”選項欄中設置“半徑”為30像素，并按“填充像素”按鈕，然后在畫面的左下方拖動鼠標，創建一個淡藍色圓角矩形，如下圖所示。

(1 1)在“圖層”面板中創建一個新圖層“圖層3”。
(1 2)在“圓角矩形工具”選項欄中，調整“半徑”值為20像素，然后在畫面中拖動鼠標，創建一個淡藍色的圓角矩形圖形，如下圖所示。

(1 3)執行“圖層>圖層樣式>漸變疊加”菜單命令，在彈出的“圖層樣式”對話框中單擊漸變按鈕，打開“漸變編輯器”對話框。設置漸變條下方兩個色標的RGB值分別為235、231、228和255、255、255，然后在“圖層樣式”對話框中設置各項參數，如下圖所示。

(14)單擊“確定”按鈕，圖形效果如下圖所示。

(15)在“圖層”面板中創建一個新圖層“圖層4”。
(1 6)在“圓角矩形工具”選項欄中調整“半徑”值為100像素，在畫面的上方拖動鼠標，創建一個圓角矩形圖形，如下圖所示。

(1 7)執行“窗口>樣式”菜單命令，在打開的“樣式”面板中單擊應用“選中狀態的紅色膠體按鈕”樣式。
(1 8)在“圖層”面板中創建個新圖層“圖層5”。
(19)選擇工具箱中的“矩形工具”，在“矩形工具”選項欄中設置各項參數，如下圖所示。

(20)分別設置前景色的RGB值為1 31、60、1 23，21 7、1 90、21 4，254、1 57、1 76，225、167、20了和21 2、221、237，在畫面的左側依照參考線拖動鼠標，分別創建不同顏色的矩形組合，如下圖所示。

(21)設置前景色的RGB值為243、239、245，在畫面中問的位置拖動鼠標，創建一個淡紫紅色的圓角矩形圖形，如下圖所示。

3、網頁三分欄結構布局

在分欄結構中，三分欄最為常見，其特點是結構清晰，分類明確，通常適合于信息流量大、更新速度快、內容繁雜的門戶類網站。本實例是一個標準的官方門戶網站，頁面整潔、大氣，文字分布、間距掌握適中，閱讀舒適。其采用藍色和橙黃色為主色調，對比色的運用使網站莊重而不失活潑，頁面充滿朝氣蓬勃的生命力。

具體操作步驟如下。

(1)執行“文件>新建”菜單命令，建立 個尺寸為1003×1160像素，分辨率為72像素/英寸、背景色為白色的新文件，將其存儲為“3分欄．psd”文件。
(2)按Ctrl+R快捷鍵打開標尺，分別從上端和左側的標尺處拖動出多條參考線，如下圖所示。

(3)選擇工具箱中的“矩形選框工具”，在工具選項欄中設置“羽化”值為O，然后在畫面上方依照參考線拖動鼠標，創建一個矩形選擇區域，如下圖所示。

(4)執行“文件>打開”菜單命令，打開文件，按CtrL+A快捷鍵全選圖像，如下圖所示。然后按Ctrl+C快捷鍵復制選區內的圖像。

(5)激活“3分欄”圖像窗口，按Shift+CtrL+V快捷鍵，將復制的圖像粘貼至選區內，則“圖層”面板中將生成個帶有蒙版的新圖層“圖層1”，如下圖所示。

(6)使用“矩形選框工具”在畫面中再創建一個矩形選區，如下圖所示。

(7)參照前面的操作方法，打開圖像文件，如下圖所示。

(8)選擇工具箱中的“魔棒工具”，在工具選項欄中設置“容差”為32，選擇“連續”選項。然后在圖像的藍天上分別單擊，將藍天全部選中，按Shift+CtrL+I快捷鍵反向選擇圖像，如圖所示。

(9)按Ctrl+C快捷鍵復制選擇區域內的圖像，然后激活“3分欄”圖像窗口，按Shift+Ctrl+V快捷鍵，將復制的圖像粘貼至選擇區域內。
(1 0)按Ctrl+T快捷鍵添加變形框，在按住Shift鍵的同時，拖動變形框任意一角的控置點，等比例縮小圖像，如下圖所示，然后按Erite r鍵確認變換操作。

(1 1)設置前景色的RGB值為235、131、46，選擇工具箱中的“橫排文字工具”，在“文字工具”選項欄中設置各項參數，如下圖所示。

(1 2)在畫面的上方單擊并輸入文字，如下圖所示。

(13)執行“圖層>圖層樣式>描邊”菜單命令，在彈出的“圖層樣式”對話框中設置參數，如下圖所示。
(1 4)在對話框中單擊漸變按鈕，打開“漸變編輯器”對話框，設置漸變條下方的兩個色標分別為藍色(RGB值為1 O、21、1 22)和白色，如下圖所示。

(1 5)文字效果如下圖所示。

好了，以上就是有關網頁板式設計及網頁結構布局的課程，希望對你在網站設計布局中有所幫助。

4、網頁四分欄結構布局

四分欄結構相對要少見一些，比較適合信息標題短小精煉的情況，通常為了放下更多的信息而選用這種結構。本實例是一個生活類網站，采用了四分欄結構，頁面清晰、淡雅、使人心情舒暢，排列簡潔、時尚、干凈利落，多用圖片輔以文字作為導航，圖文結合．一目了然。圖片的選用也頗為講究，顏色大多與網頁的主色調協調一致，右上角紅色的圖片起了點睛的作用，使整個頁面活躍、生動。

具體操作步驟如下。
(1)執行“文件>新建”菜單命令，建立一個尺寸為1 003×1 000像素，分辨率為72像素/英寸、背景色為白色的新文件，將其存儲為“4分欄．psd”文件。
(2)按Ctrl+R央捷鍵顯示標尺，分別從上端和左側的標尺處拖動出多條參考線，如下圖所示。

(3)創建一個新圖層“圖層1”。
(4)選擇工具箱中的“矩形工具”，在“矩形工具”選項欄中設置各項參數，如下圖所示。

(5)設置前景色的RGB值為210、215、228，在畫面中依照參考線拖動鼠標，創建一個淡藍色的矩形圖形，如下圖所示。

(6)用同樣的方法，分別設置前景色的RGB值為149、161、195，97、106、116，在畫面中創建其他部分的矩形圖形(在“圖層”面板中分別創建相應的新圖層“圖層2”、“圖層3”)，如下圖所示。

(7)選擇工具箱中的“矩形選框工具”，在工具選項欄中設置“羽化”值為O，然后在畫面中依照參考線拖動鼠標，創建個矩形選區，如下頁圖所示。

(8)執行菜單欄中的“文件>打開”命令，打開一張圖像文件，按Ctrl+A快捷鍵全選圖像，然后按CtrI+C快捷鍵復制選擇區域內的圖像，如下圖所示。

(9)激活“4分欄”圖像窗口，按Shift+Ctrl+V快捷鍵，將復制的圖像粘貼至選區內，“圖層”面板中將生成一個帶有蒙版的新圖層“圖層4”。然后選擇工具箱中的“移動工具”，在畫面中調整圖像的位置，圖像效果如下圖所示。

(1 O)選擇工具箱中的“矩形選框工具”，在畫面中拖動鼠標，創建一個矩形選區，如下圖所示。

(1 1)繼續打開圖像文件，參照前面的操作方法，將其中的圖像全選后復制粘貼到“4分欄”圖像窗口中的選區內。
(1 2)按Ctrl+T快捷鍵添加變形框，按住Shift+Alt快捷鍵拖動變形框任意一角的控制點，向中心等比縮小圖像，如下圖所示，然后按Enter鍵，確認變換操作。

(1 3)選擇工具箱中的“矩形選框工具”，在畫面中拖動鼠標，創建個矩形選區。
(1 4)參照前面的操作方法，打開圖形文件，將其復制粘貼至選區內，圖像效果如下圖所示。

(15)執行“圖層>圖層樣式>描邊”菜單命令，在彈出的“圖層樣式”對話框中設置描邊色為黑色，并設置其他各項參數，如下圖所示。

(1 6)得到的效果如下圖所示。

(1 7)在“圖層”面板中，在按住Ctrl鍵的同時，單擊“圖層6”中的圖層蒙版縮覽圖，載入選區。
(1 8)確認當前工具為“矩形選框工具”，在畫面中調整選區至合適的位置，然后參照上面的操作步驟，分別粘貼三幅圖像文件，并添加“描邊”圖層樣式，為每一幅圖片描上1個 像素的邊緣，如下圖所示。

(19)設置前景色的RGB值為132、132、132，選擇工具箱中的“橫排文字工具”，在“文字工具”選擇欄中設置各項參數，如下圖所示。

(20)在畫面的左上角單擊并輸入文字Exuberance。
(21)參考前面的操作方法，使用“橫排文字工具”T．，在網頁中輸入內容文字，最終的四分欄效果如下圖所示。