|
|
|
[Photoshop基礎教程合集一]制作簡單網頁小技巧
發布時間：2017-05-27 點擊率：次 來源：www.cmndlta.cn 作者：電腦技術學習網
一篇文章配上一個漂亮的版面，可以使人耳目一新或著是一種視覺享受。版面設計可以用photoshop軟件制作，用PS制作網頁版面可以很好的控制和調整網頁框架的布局或色彩的協調搭配，也便于整體的修改和局部的細致刻畫，使網頁更具個性化。
用PS制作網頁前，應對制作的網頁有個初步的構思，等把大的色塊做好后，再調整色塊間的明暗度、對比度、飽和度進行調整，而后再把小的插件放到網頁上，先整體后局部的制作過程。由于百度空間受文字字數（4000字）或圖片大小（500KB)的限制，所以在網頁框架的制作中盡量的簡化其結構，圖片的格式也盡量的選擇GIF格式。還要考慮空間文章區像素的大小，本人空間的文章區寬度是950像素，所以本人的網頁框架圖片一般設置為920像素。
讓我們先來了解一下版面布局的步驟：
一.草案 新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發揮你的想象力，將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆，當然用作圖軟件photoshop等也可以)。這屬于創造階段，不講究細膩工整，不必考慮細節功能，只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張，最后選定一個滿意的作為繼續創作的腳本。
二.粗略布局 在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。(注：功能模塊我們在"首頁設計-引子"中提過，主要包含網站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意，這里我們必須遵循突出重點、平衡諧調的原則，將網站標志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。
三.定案 將粗略布局精細化，具體化。（靠你的智慧和經驗，旁敲側擊多方聯想，才能作出具有創意的布局。）
網頁框架完成后，下一步就是做成適應網頁框架的背景圖，可以用PS將整圖切割成4部分（圖1）（這里你可以根據自己的構思，進行切割）背景圖1為LOGO區域，（LOGO制作）背景圖2為過渡區，也可以把1-2區域合并為一個區域，本人的意圖是為了減少LOGO區域背景圖的文件的大小，背景圖3為文章區，這里應注意圖片上下的銜接，因該區域的高度是根據文章內容而定的，背景圖4為網頁的底部。
圖1
用PS完成框架的制作及切割后，就可以用FrontPage2003搭建我們的網頁了，該軟件可以在OFFICE安裝光盤里可以找到，你只要會word，相信這個也不難掌握。
1、打開FrontPage 2003-新建-文件
2、使用“插入表格”，插入1列4行表格（這里根據框架背景圖數而定），
3、選中表格，右鍵-表格屬性，將單元格襯距、單元格間距、邊框粗細設置為0，再選中“指定寬度”，選“像素”，把該值設為“920”（這里也是根據你的框架寬度的像素而定的）
4、選上第一行，右鍵-單元格屬性-選上“使用背景圖”，打開你上傳到空間里的圖片，將背景圖片的地址復制粘貼到地址欄里，再根據圖片的高度，點選“指定高度”輸入圖片的高度（像素）值。
5、以此類推，選中第二行，方法同上。
6、在設置第三行（文章區)時，可以不設定高度值，其高度是有文章內容而定的。詳細方法看圖2
圖2
完成總體框架的設定后，就該對每個單元格進行細部編輯了。第一行的LOGO區，有“文章索引”、“常用查詢”等各項的超級連接的編輯，處于對版面的美觀，文字使用的圖片形式，加入連接就不能用文字類型的超級連接，只能放入圖片制作超級連接，為不影響版面效果，這里使用的是“透明的圖片”，這在PS中很容易做到。
（一）LOGO區的編輯
1.在第一行里右鍵-單元格屬性-設置“水平對齊方式”為“居中”，“垂直對齊方式”為“頂部對齊”，插入4列1行單元格。
2、調整總的寬度，與底圖設置相一致，選中各列，設置“平均分布各列”。
3、在各列復制粘貼上“透明的圖片”，使用”菜單上的“格式”-“段落”-“段落前間距”，調整“透明的圖片”高度，與圖片上文字相吻合。
4、調整吻合后，選中各“透明的圖片”-右鍵-“超連接...”，在“地址”欄里加入連接。這樣就完成了LOGO去的編輯。
5、第二行是過渡區，不用考慮。（二）文章區的編輯
應該說這部分的制作比較費事，在這個區域中分為文章區和左側文章連接區，這樣可以使版面不至于太單調，即豐富了頁面的內容，又使版面更美觀。下面是具體的制作方法：
1、設置該單元格為“居中”“頂部對齊”，然后插入5列1行單元格，根據背景圖，可以手動調整各列的寬度，（見圖3）
圖3
2、將文章區的對齊方式分別設置為“默認”、“頂部對齊”，可以使用“格式”-“段落”調整文字的邊距。
3、左側的文章連接區的對齊方式設置為“居中”“頂部對齊”，插入若干行單元格，將連接的文章放置該去。
發表留言
|
|
發表留言請先登錄！
|
免責聲明：本站發布的信息和評論純屬網民個人行為，并不代表本站立場，如發現有違法信息或侵權行為，請直接與本站管理員聯系，我們將在收到您的信息后24小時內作出處理！
Copyright © 十堰電腦維修 All Rights Reserved 鄂ICP備12000326號-1
電子郵箱：956066850@qq.com