一篇文章配上一個漂亮的版面，可以使人耳目一新或著是一種視覺享受。版面設(shè)計可以用photoshop軟件制作，用PS制作網(wǎng)頁版面可以很好的控制和調(diào)整網(wǎng)頁框架的布局或色彩的協(xié)調(diào)搭配，也便于整體的修改和局部的細致刻畫，使網(wǎng)頁更具個性化。

　　用PS制作網(wǎng)頁前，應(yīng)對制作的網(wǎng)頁有個初步的構(gòu)思，等把大的色塊做好后，再調(diào)整色塊間的明暗度、對比度、飽和度進行調(diào)整，而后再把小的插件放到網(wǎng)頁上，先整體后局部的制作過程。由于百度空間受文字字數(shù)（4000字）或圖片大?。?00KB)的限制，所以在網(wǎng)頁框架的制作中盡量的簡化其結(jié)構(gòu)，圖片的格式也盡量的選擇GIF格式。還要考慮空間文章區(qū)像素的大小，本人空間的文章區(qū)寬度是950像素，所以本人的網(wǎng)頁框架圖片一般設(shè)置為920像素。

　　讓我們先來了解一下版面布局的步驟：

　　一.草案 　　新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮你的想象力，將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆，當然用作圖軟件photoshop等也可以)。這屬于創(chuàng)造階段，不講究細膩工整，不必考慮細節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡你的可能多畫幾張，最后選定一個滿意的作為繼續(xù)創(chuàng)作的腳本。

　　二.粗略布局 　　在草案的基礎(chǔ)上，將你確定需要放置的功能模塊安排到頁面上。(注：功能模塊我們在"首頁設(shè)計-引子"中提過，主要包含網(wǎng)站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數(shù)器,版權(quán)信息等)。注意，這里我們必須遵循突出重點、平衡諧調(diào)的原則，將網(wǎng)站標志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。

　　三.定案　　將粗略布局精細化，具體化。（靠你的智慧和經(jīng)驗，旁敲側(cè)擊多方聯(lián)想，才能作出具有創(chuàng)意的布局。）

　　網(wǎng)頁框架完成后，下一步就是做成適應(yīng)網(wǎng)頁框架的背景圖，可以用PS將整圖切割成4部分（圖1）（這里你可以根據(jù)自己的構(gòu)思，進行切割）背景圖1為LOGO區(qū)域，（LOGO制作）背景圖2為過渡區(qū)，也可以把1-2區(qū)域合并為一個區(qū)域，本人的意圖是為了減少LOGO區(qū)域背景圖的文件的大小，背景圖3為文章區(qū)，這里應(yīng)注意圖片上下的銜接，因該區(qū)域的高度是根據(jù)文章內(nèi)容而定的，背景圖4為網(wǎng)頁的底部。

圖1

    用PS完成框架的制作及切割后，就可以用FrontPage2003搭建我們的網(wǎng)頁了，該軟件可以在OFFICE安裝光盤里可以找到，你只要會word，相信這個也不難掌握。

　　1、打開FrontPage 2003-新建-文件

　　2、使用“插入表格”，插入1列4行表格（這里根據(jù)框架背景圖數(shù)而定），

　　3、選中表格，右鍵-表格屬性，將單元格襯距、單元格間距、邊框粗細設(shè)置為0，再選中“指定寬度”，選“像素”，把該值設(shè)為“920”（這里也是根據(jù)你的框架寬度的像素而定的）

　　4、選上第一行，右鍵-單元格屬性-選上“使用背景圖”，打開你上傳到空間里的圖片，將背景圖片的地址復(fù)制粘貼到地址欄里，再根據(jù)圖片的高度，點選“指定高度”輸入圖片的高度（像素）值。

　　5、以此類推，選中第二行，方法同上。

　　詳細方法看圖2

圖2

    完成總體框架的設(shè)定后，就該對每個單元格進行細部編輯了。第一行的LOGO區(qū)，有“文章索引”、“常用查詢”等各項的超級連接的編輯，處于對版面的美觀，文字使用的圖片形式，加入連接就不能用文字類型的超級連接，只能放入圖片制作超級連接，為不影響版面效果，這里使用的是“透明的圖片”，這在PS中很容易做到。

    （一）LOGO區(qū)的編輯

　　1.在第一行里右鍵-單元格屬性-設(shè)置“水平對齊方式”為“居中”，“垂直對齊方式”為“頂部對齊”，插入4列1行單元格。

　　2、調(diào)整總的寬度，與底圖設(shè)置相一致，選中各列，設(shè)置“平均分布各列”。

　　3、在各列復(fù)制粘貼上“透明的圖片”，使用”菜單上的“格式”-“段落”-“段落前間距”，調(diào)整“透明的圖片”高度，與圖片上文字相吻合。

　　4、調(diào)整吻合后，選中各“透明的圖片”-右鍵-“超連接...”，在“地址”欄里加入連接。這樣就完成了LOGO去的編輯。

　　（二）文章區(qū)的編輯

　　應(yīng)該說這部分的制作比較費事，在這個區(qū)域中分為文章區(qū)和左側(cè)文章連接區(qū)，這樣可以使版面不至于太單調(diào)，即豐富了頁面的內(nèi)容，又使版面更美觀。下面是具體的制作方法：

　　1、設(shè)置該單元格為“居中”“頂部對齊”，然后插入5列1行單元格，根據(jù)背景圖，可以手動調(diào)整各列的寬度，（見圖3）

圖3

    2、將文章區(qū)的對齊方式分別設(shè)置為“默認”、“頂部對齊”，可以使用“格式”-“段落”調(diào)整文字的邊距。

　　3、左側(cè)的文章連接區(qū)的對齊方式設(shè)置為“居中”“頂部對齊”，插入若干行單元格，將連接的文章放置該去。