利用Photoshop+Dreamweaver制作網頁的方法與技巧

摘要:該文介紹了通過Photoshop和Dreamweaver相結合，輕松創作完美網頁的方法與技巧。

關鍵詞:布局;切片;Photoshop;Dreamweaver

中圖分類號:TP393文獻標識碼:A文章編號:1009-3044(2010)02-445-02

The Method and Technique of Using Photoshop and Dreamweaver to Make Web Page

ZHOU Chun-yu， ZHAN Jie

(Dalian Fisheries University， Dalian 116023， China)

Abstract: This article introduces some methods and techniques about making the web page. By using Photoshop and Dreamweaver， the web page will be very fine.

Key words: composition; slice; photoshop; dreamweaver

隨著互聯網的廣泛應用，網頁制作已成為熱門，一個好的網頁既要內容翔實，又要視覺新穎，還要布局合理，既要把內容的層次性和空間性突出顯示出來，又要使頁面合理流暢、環環相扣。網頁制作的工具有很多，但是利用Photoshop和Dreamweaver配合使用制作出來的網頁布局更規范，頁面更精美，因此深受網頁制作者的推崇。

1 網頁布局的原則

網頁布局是決定網站美觀與否的一個重要方面，通過合理的、有創意布局，才可以把文字、圖像等內容完美地展現在瀏覽者前面。最好先用筆和紙將構思的草圖畫下來，不需要很詳細，只需要畫出頁面的大體結構作為創作樣本即可。布局的原則如下:

1) 對稱均衡:對稱是一種美，能給人穩定感，但過度的對稱就會給人一種呆板、死氣沉沉的感覺，對稱形式構成的網頁具有重心穩定和莊重整齊的美感，均衡的網頁生動活潑富于變化，具有變化美。

2) 對比協調:對比使網頁形式生動、個性鮮明，避免平淡無奇;對比協調則給人以柔和、親切的美感。

3) 比例適度:確立良好的比例關系，并非黃金分割，但一定要適度、協調，才能使整個頁面和諧、勻稱明朗。

4) 疏密交錯:網頁上重復的形式過多，會使頁面顯得呆板，容易使瀏覽者產生視覺疲勞。因此不要整個網頁一種樣式，要通過留白、空格、改變行間距、字間距等變化來打破頁面呆板、平淡的格局。

5) 節奏韻律:韻律是使節奏富有律動感的變化美，將點、圓形、線條等沿一定的曲線重復排列時，就會產生韻律感，使畫面顯得輕盈而富有靈氣。

2 在Photoshop中布局網頁

1) 首先在Photoshop中建一個1001×550像素的文件，這樣在1024×768這種常規分辨率下，不會出現水平滾動條和垂直滾動條(長度1001像素是作者在多次實驗中總結出的數據)。

2) 一般情況下頁面分頭、中、底三個部分，如果看到別人的版面想借鑒的話，那就做個截圖，然后把截圖放在最底層，作為最初的草圖。如果不想用別人的版面，最好也還是找一個同類網站借鑒一下。

3) 參考線是布局網頁的有效工具，先用橫參考線將網頁布局分成幾大版塊，然后再用豎參考線將每個板塊按思路分為幾個小板塊，最后整體觀察一下。需要注意的是網站的Logo和導航條等都是事先設計好的，有固定大小，在做這些區域時尺寸一定要按照這些元素尺寸設計，不能有絲毫差錯，否則進入Dreamweaver整合時，則可能出現空邊或撐開表格的現象。

4) 導航文字的特殊字體要在Photoshop中直接添加上去，字體的顏色設置要考慮到整個頁面效果，另外，如果想?制作出變化的導航效果，就復制對應的圖層，設計好變化效果之后再隱藏該圖層。將導航改變效果的圖層進行切片的時候，保存另外一個名字存在另一個路徑下，然后再將這些改變效果的圖片拷貝到存放所有切片圖片的路徑下，為在Dreamweaver中替換圖像做準備。

5) 網頁中的元素有很多，像Banner條、文本區域、文字、Logo等，盡量把這些相對獨立的元素放在不同的圖層中，這樣方便以后的再編輯。

3 從Photoshop通向Dreamweaver的重要環節——“切片”

利用Photoshop設計網頁之后，要進行“切片”， 然后才能通過Dreamweaver進行加工制作。以下列舉了切片的幾個方法和技巧。

1) 依靠參考線進行切片，在設計的時候用到參考線，在切圖的時候也要用參考線，參考線能保證我們切出圖在同一表格中的尺寸統一協調，有效避免“留白”和“爆邊”。

2) Logo和導航條必須先切成圖片，因為一般情況下，Logo和導航條都是特別設計的，尤其是導航條，只有必須經過切片后才能在Dreamweaver實現效果。

3) 大圖要切成小圖，圖片太大會影響網頁瀏覽。把大的圖切分均勻的小圖，可以提高網頁下載速度。

4) 漸變效果一定要切，雖然漸變特效Dreamweaver可以實現，但其效果簡單，無法給人以流暢的感覺，所以我們必須在導入Dreamweaver之前先切成圖片，利用Photoshop的優勢來美化。

5) 虛線和轉角形狀必切，虛線和轉角形狀在Dreamweaver不能實現，因此只能使用Photoshop先切片，然后再通過Dreamweaver加工實現。

6) 每個內容編輯區域可單獨作為一個切片，在Dreamweaver中將該小“切片”刪除后就是一個表格，可以在該表格中進行內容編輯。但并不是所有的圖片都可以被刪除。一般的做法是，圖片被刪除后，由于圖片外圍是表格，我們可以定義表格的長寬數值為圖片的長寬數值，以保持整體圖像的完整性。

7) 有效存儲切片。存儲切片的文件夾必須位于站點的根目錄下，文件夾名必須是英文名字。存儲切片時用“文件—存儲為Web所用格式”命令，選擇路徑通常在網站根目錄下，保存文件名如index.html。這樣切切后的圖片都保存在了根目錄下的images文件夾中。如果將導航改變效果的圖層進行切片的時候，要將對應原圖層隱藏，然后再執行一次“文件—存儲為web所用格式”命令，保存另外一個名字如tihuan.html存在另一個路徑下，然后再將這些改變效果的導航圖片拷貝到根目錄下的images中，為在Dreamweaver中替換圖像做準備。

4 在Dreamweaver中加工網頁

將切片后的網頁在Dreamweaver中打開，如:index.html。其實整個網頁是一個大表格，每個切片是個大表個劃分的小表格。下面就進入網頁制作階段。以下列舉了常用技巧:

1) 在Dreamweaver中，如何輸入一個空格呢?

Dreamweaver中對空格輸入的限制是針對“半角”文字狀態而言的，將中文輸入法的“半角”摸時改稱“全角”模式就可以了。

2) 怎樣才能夠保證網頁中文字不跟隨瀏覽器字體大小設置而變動?

由于IE瀏覽器可以自由設置窗口內容字體的大小，這樣由于用戶的原因可能會導致顯示上出現問題。怎樣才能固定文字大小呢?辦法就是通過CSS樣式表對字體進行強制性控制，即不容許變化。新建一個樣式表，選擇“類型”，然后對文字的大小、字體、樣式等進行修改，一般情況下，文字的大小選擇12較為適宜。

3) 怎么樣才能為圖片添加指定顏色的邊框?

如果圖片沒有經過處理直接插在網頁上，看上去很難看，這時如果給圖片加上個邊框，效果立馬就不一樣了。方法是新建一個CSS樣式表，選擇“邊框”，然后對邊框進行樣式、寬度和顏色的修改。

4) 怎樣制作可以響應鼠標事件的翻轉圖片?

我們經常會在一些網頁中看到當鼠標滑過時，能變成另外的樣子。這是通過兩張不同的圖片來實現的，也就是所謂的“翻轉圖片”效果。方法是選擇“行為”里的“交換圖像”，然后點擊“瀏覽”找到原文件和所對應的替換圖片，當然你要提前準備兩張大小完全一樣的圖片，這樣才能保證翻轉時不會產生視覺上的不適。

5) 如何添加圖片的提示信息?

在我們瀏覽網頁時，當鼠標停留在圖片對象或鏈接上時，在鼠標的右下有時會出現一個提示信息框進行注釋說明，作用顯而易見。方法是先選中圖片對象，然后在屬性面板中的“替代”輸入框里輸入需要提示的內容就可以了。

6) 如何制作一個邊框為1的表格?

如果是僅僅將“邊框”值設為1，那么制作出來的表格要比1粗，并且看上去很不美觀，如果將表格的“邊框”、“填充”都設置為“0”，“間距”設置為“1”，并且設定整個表格的“背景顏色”如紅色，同時設定單元格的“背景顏色”如白色，就制作出了一個邊框為1的紅格白底表格。

以上是對我多年設計網頁的一個小結，通過Photoshop設計網頁，通過Dreamweaver加工網頁，以達到網頁布局合理，頁面精美的目的。綜上，希望通過我的這些建議，可以對讀者有所啟發和幫助，實現自己的完美設計。

參考文獻:

[1] 隋涌.網頁布局之形式原理與設計要素[J].北京印刷學院報，2007(6).

[2] http://hi.baidu.com/cx901124/blog/item/1a6748513dbd726b8535248e.html.

[3] 騰飛科技.Dreamweaver8 完美網頁制作基礎、實例與技巧[M].北京:人民郵電出版社，2007.