網(wǎng)頁板式設(shè)計及網(wǎng)頁結(jié)構(gòu)布局

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

一、具體采用什么樣的版式結(jié)構(gòu)，可以遵循以下幾點設(shè)計原則。

1、對稱的原則

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

2、平衡的原則

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

3、對比的原則

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

4、留白的原則

版面中適當(dāng)留出一定的空白，能夠起到強調(diào)、引起注意的作用。在網(wǎng)頁設(shè)計中，留白是一種比較有效的設(shè)計方法。

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

1、網(wǎng)頁通欄結(jié)構(gòu)布局

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

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

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

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

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

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

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

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

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

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

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

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

2、網(wǎng)頁二分欄結(jié)構(gòu)布局

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

具體操作步驟如下。

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

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

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

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

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

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

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

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

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

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

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

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

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

3、網(wǎng)頁三分欄結(jié)構(gòu)布局

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

具體操作步驟如下。

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

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

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

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

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

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

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

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

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

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

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

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

好了，以上就是有關(guān)網(wǎng)頁板式設(shè)計及網(wǎng)頁結(jié)構(gòu)布局的課程，希望對你在網(wǎng)站設(shè)計布局中有所幫助。

4、網(wǎng)頁四分欄結(jié)構(gòu)布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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