|
|
|
一篇文章配上一個(gè)漂亮的版面，可以使人耳目一新或著是一種視覺享受。版面設(shè)計(jì)可以用photoshop軟件制作，用PS制作網(wǎng)頁(yè)版面可以很好的控制和調(diào)整網(wǎng)頁(yè)框架的布局或色彩的協(xié)調(diào)搭配，也便于整體的修改和局部的細(xì)致刻畫，使網(wǎng)頁(yè)更具個(gè)性化。
用PS制作網(wǎng)頁(yè)前，應(yīng)對(duì)制作的網(wǎng)頁(yè)有個(gè)初步的構(gòu)思，等把大的色塊做好后，再調(diào)整色塊間的明暗度、對(duì)比度、飽和度進(jìn)行調(diào)整，而后再把小的插件放到網(wǎng)頁(yè)上，先整體后局部的制作過程。由于百度空間受文字字?jǐn)?shù)（4000字）或圖片大?。?00KB)的限制，所以在網(wǎng)頁(yè)框架的制作中盡量的簡(jiǎn)化其結(jié)構(gòu)，圖片的格式也盡量的選擇GIF格式。還要考慮空間文章區(qū)像素的大小，本人空間的文章區(qū)寬度是950像素，所以本人的網(wǎng)頁(yè)框架圖片一般設(shè)置為920像素。
讓我們先來了解一下版面布局的步驟：
一.草案 新建頁(yè)面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮你的想象力，將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆，當(dāng)然用作圖軟件photoshop等也可以)。這屬于創(chuàng)造階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡你的可能多畫幾張，最后選定一個(gè)滿意的作為繼續(xù)創(chuàng)作的腳本。
二.粗略布局 在草案的基礎(chǔ)上，將你確定需要放置的功能模塊安排到頁(yè)面上。(注：功能模塊我們?cè)?首頁(yè)設(shè)計(jì)-引子"中提過，主要包含網(wǎng)站標(biāo)志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計(jì)數(shù)器,版權(quán)信息等)。注意，這里我們必須遵循突出重點(diǎn)、平衡諧調(diào)的原則，將網(wǎng)站標(biāo)志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。
三.定案 將粗略布局精細(xì)化，具體化。（靠你的智慧和經(jīng)驗(yàn)，旁敲側(cè)擊多方聯(lián)想，才能作出具有創(chuàng)意的布局。）
網(wǎng)頁(yè)框架完成后，下一步就是做成適應(yīng)網(wǎng)頁(yè)框架的背景圖，可以用PS將整圖切割成4部分（圖1）（這里你可以根據(jù)自己的構(gòu)思，進(jìn)行切割）背景圖1為L(zhǎng)OGO區(qū)域，（LOGO制作）背景圖2為過渡區(qū)，也可以把1-2區(qū)域合并為一個(gè)區(qū)域，本人的意圖是為了減少LOGO區(qū)域背景圖的文件的大小，背景圖3為文章區(qū)，這里應(yīng)注意圖片上下的銜接，因該區(qū)域的高度是根據(jù)文章內(nèi)容而定的，背景圖4為網(wǎng)頁(yè)的底部。
圖1
用PS完成框架的制作及切割后，就可以用FrontPage2003搭建我們的網(wǎng)頁(yè)了，該軟件可以在OFFICE安裝光盤里可以找到，你只要會(huì)word，相信這個(gè)也不難掌握。
1、打開FrontPage 2003-新建-文件
2、使用“插入表格”，插入1列4行表格（這里根據(jù)框架背景圖數(shù)而定），
3、選中表格，右鍵-表格屬性，將單元格襯距、單元格間距、邊框粗細(xì)設(shè)置為0，再選中“指定寬度”，選“像素”，把該值設(shè)為“920”（這里也是根據(jù)你的框架寬度的像素而定的）
4、選上第一行，右鍵-單元格屬性-選上“使用背景圖”，打開你上傳到空間里的圖片，將背景圖片的地址復(fù)制粘貼到地址欄里，再根據(jù)圖片的高度，點(diǎn)選“指定高度”輸入圖片的高度（像素）值。
5、以此類推，選中第二行，方法同上。
6、在設(shè)置第三行（文章區(qū))時(shí)，可以不設(shè)定高度值，其高度是有文章內(nèi)容而定的。詳細(xì)方法看圖2
圖2
完成總體框架的設(shè)定后，就該對(duì)每個(gè)單元格進(jìn)行細(xì)部編輯了。第一行的LOGO區(qū)，有“文章索引”、“常用查詢”等各項(xiàng)的超級(jí)連接的編輯，處于對(duì)版面的美觀，文字使用的圖片形式，加入連接就不能用文字類型的超級(jí)連接，只能放入圖片制作超級(jí)連接，為不影響版面效果，這里使用的是“透明的圖片”，這在PS中很容易做到。
（一）LOGO區(qū)的編輯
1.在第一行里右鍵-單元格屬性-設(shè)置“水平對(duì)齊方式”為“居中”，“垂直對(duì)齊方式”為“頂部對(duì)齊”，插入4列1行單元格。
2、調(diào)整總的寬度，與底圖設(shè)置相一致，選中各列，設(shè)置“平均分布各列”。
3、在各列復(fù)制粘貼上“透明的圖片”，使用”菜單上的“格式”-“段落”-“段落前間距”，調(diào)整“透明的圖片”高度，與圖片上文字相吻合。
4、調(diào)整吻合后，選中各“透明的圖片”-右鍵-“超連接...”，在“地址”欄里加入連接。這樣就完成了LOGO去的編輯。
5、第二行是過渡區(qū)，不用考慮。?。ǘ┪恼聟^(qū)的編輯
應(yīng)該說這部分的制作比較費(fèi)事，在這個(gè)區(qū)域中分為文章區(qū)和左側(cè)文章連接區(qū)，這樣可以使版面不至于太單調(diào)，即豐富了頁(yè)面的內(nèi)容，又使版面更美觀。下面是具體的制作方法：
1、設(shè)置該單元格為“居中”“頂部對(duì)齊”，然后插入5列1行單元格，根據(jù)背景圖，可以手動(dòng)調(diào)整各列的寬度，（見圖3）
圖3
2、將文章區(qū)的對(duì)齊方式分別設(shè)置為“默認(rèn)”、“頂部對(duì)齊”，可以使用“格式”-“段落”調(diào)整文字的邊距。
3、左側(cè)的文章連接區(qū)的對(duì)齊方式設(shè)置為“居中”“頂部對(duì)齊”，插入若干行單元格，將連接的文章放置該去。
|
|
發(fā)表留言請(qǐng)先登錄！
|