1、Computer Knowledge and Technology 電腦知識與技術多媒體技術及其應用本欄目責任編輯:唐一東第6卷第2期(2010年1月利用Photoshop+Dreamweaver 制作網頁的方法與技巧周純玉,詹劼(大連水產學院現代教育技術與網絡中心,遼寧大連116023摘要:該文介紹了通過Photoshop 和Dreamweaver 相結合,輕松創作完美網頁的方法與技巧。關鍵詞:布局;切片;Photoshop ;Dreamweaver中圖分類號:TP393文獻標識碼:A 文章編號:1009-3044(201002-445-02The Method and Technique

2、of Using Photoshop and Dreamweaver to Make Web PageZHOU Chun-yu,ZHAN Jie(Dalian Fisheries University,Dalian 116023,ChinaAbstract: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

3、;photoshop;dreamweaver隨著互聯網的廣泛應用,網頁制作已成為熱門,一個好的網頁既要內容翔實,又要視覺新穎,還要布局合理,既要把內容的層次性和空間性突出顯示出來,又要使頁面合理流暢、環環相扣。網頁制作的工具有很多,但是利用Photoshop 和Dreamweaver 配合使用制作出來的網頁布局更規范,頁面更精美,因此深受網頁制作者的推崇。1網頁布局的原則網頁布局是決定網站美觀與否的一個重要方面,通過合理的、有創意布局,才可以把文字、圖像等內容完美地展現在瀏覽者前面。最好先用筆和紙將構思的草圖畫下來,不需要很詳細,只需要畫出頁面的大體結構作為創作樣本即可。布局的原則如下:1對稱

4、均衡:對稱是一種美,能給人穩定感,但過度的對稱就會給人一種呆板、死氣沉沉的感覺,對稱形式構成的網頁具有重心穩定和莊重整齊的美感,均衡的網頁生動活潑富于變化,具有變化美。2對比協調:對比使網頁形式生動、個性鮮明,避免平淡無奇;對比協調則給人以柔和、親切的美感。3比例適度:確立良好的比例關系,并非黃金分割,但一定要適度、協調,才能使整個頁面和諧、勻稱明朗。4疏密交錯:網頁上重復的形式過多,會使頁面顯得呆板,容易使瀏覽者產生視覺疲勞。因此不要整個網頁一種樣式,要通過留白、空格、改變行間距、字間距等變化來打破頁面呆板、平淡的格局。5節奏韻律:韻律是使節奏富有律動感的變化美,將點、圓形、線條等沿一定的曲

5、線重復排列時,就會產生韻律感,使畫面顯得輕盈而富有靈氣。2在Photoshop 中布局網頁1首先在Photoshop 中建一個1001×550像素的文件,這樣在1024×768這種常規分辨率下,不會出現水平滾動條和垂直滾動條(長度1001像素是作者在多次實驗中總結出的數據。2一般情況下頁面分頭、中、底三個部分,如果看到別人的版面想借鑒的話,那就做個截圖,然后把截圖放在最底層,作為最初的草圖。如果不想用別人的版面,最好也還是找一個同類網站借鑒一下。3參考線是布局網頁的有效工具,先用橫參考線將網頁布局分成幾大版塊,然后再用豎參考線將每個板塊按思路分為幾個小板塊,最后整體觀察一下

6、。需要注意的是網站的Logo 和導航條等都是事先設計好的,有固定大小,在做這些區域時尺寸一定要按照這些元素尺寸設計,不能有絲毫差錯,否則進入Dreamweaver 整合時,則可能出現空邊或撐開表格的現象。4導航文字的特殊字體要在Photoshop 中直接添加上去,字體的顏色設置要考慮到整個頁面效果,另外,如果想?制作出變化的導航效果,就復制對應的圖層,設計好變化效果之后再隱藏該圖層。將導航改變效果的圖層進行切片的時候,保存另外一個名字存在另一個路徑下,然后再將這些改變效果的圖片拷貝到存放所有切片圖片的路徑下,為在Dreamweaver 中替換圖像做準備。5網頁中的元素有很多,像Banner 條

7、、文本區域、文字、Logo 等,盡量把這些相對獨立的元素放在不同的圖層中,這樣方便以后的再編輯。3從Photoshop 通向Dreamweaver 的重要環節“切片”利用Photoshop 設計網頁之后,要進行“切片”,然后才能通過Dreamweaver 進行加工制作。以下列舉了切片的幾個方法和技巧。1依靠參考線進行切片,在設計的時候用到參考線,在切圖的時候也要用參考線,參考線能保證我們切出圖在同一表格中的尺收稿日期:2009-11-26作者簡介:周純玉(1978-,女,遼寧鐵嶺人,實驗師,碩士,研究方向為電子工程;詹劼(1980-,男,江西景德鎮人,實驗師,碩士,研究方向為教育技術。ISSN

8、 1009-3044Computer Knowledge and TechnologyComputer Knowledge and Technology 電腦知識與技術本欄目責任編輯:唐一東多媒體技術及其應用第6卷第2期(2010年1月寸統一協調,有效避免“留白”和“爆邊”。2Logo 和導航條必須先切成圖片,因為一般情況下,Logo 和導航條都是特別設計的,尤其是導航條,只有必須經過切片后才能在Dreamweaver 實現效果。3大圖要切成小圖,圖片太大會影響網頁瀏覽。把大的圖切分均勻的小圖,可以提高網頁下載速度。4漸變效果一定要切,雖然漸變特效Dreamweaver 可以實現,但其效果簡單

9、,無法給人以流暢的感覺,所以我們必須在導入Dreamweaver 之前先切成圖片,利用Photoshop 的優勢來美化。5虛線和轉角形狀必切,虛線和轉角形狀在Dreamweaver 不能實現,因此只能使用Photoshop 先切片,然后再通過Dreamweaver 加工實現。6每個內容編輯區域可單獨作為一個切片,在Dreamweaver 中將該小“切片”刪除后就是一個表格,可以在該表格中進行內容編輯。但并不是所有的圖片都可以被刪除。一般的做法是,圖片被刪除后,由于圖片外圍是表格,我們可以定義表格的長寬數值為圖片的長寬數值,以保持整體圖像的完整性。7有效存儲切片。存儲切片的文件夾必須位于站點的根

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

11、實整個網頁是一個大表格,每個切片是個大表個劃分的小表格。下面就進入網頁制作階段。以下列舉了常用技巧:1在Dreamweaver 中,如何輸入一個空格呢?Dreamweaver 中對空格輸入的限制是針對“半角”文字狀態而言的,將中文輸入法的“半角”摸時改稱“全角”模式就可以了。2怎樣才能夠保證網頁中文字不跟隨瀏覽器字體大小設置而變動?由于IE 瀏覽器可以自由設置窗口內容字體的大小,這樣由于用戶的原因可能會導致顯示上出現問題。怎樣才能固定文字大小呢?辦法就是通過CSS 樣式表對字體進行強制性控制,即不容許變化。新建一個樣式表,選擇“類型”,然后對文字的大小、字體、樣式等進行修改,一般情況下,文字的

12、大小選擇12較為適宜。3怎么樣才能為圖片添加指定顏色的邊框?如果圖片沒有經過處理直接插在網頁上,看上去很難看,這時如果給圖片加上個邊框,效果立馬就不一樣了。方法是新建一個CSS 樣式表,選擇“邊框”,然后對邊框進行樣式、寬度和顏色的修改。4怎樣制作可以響應鼠標事件的翻轉圖片?我們經常會在一些網頁中看到當鼠標滑過時,能變成另外的樣子。這是通過兩張不同的圖片來實現的,也就是所謂的“翻轉圖片”效果。方法是選擇“行為”里的“交換圖像”,然后點擊“瀏覽”找到原文件和所對應的替換圖片,當然你要提前準備兩張大小完全一樣的圖片,這樣才能保證翻轉時不會產生視覺上的不適。5如何添加圖片的提示信息?在我們瀏覽網頁時,當鼠標停留在圖片對象或鏈接上時,在鼠標的右下有時會出現一個提示信息框進行注釋說明,作用顯而易見。方法是先選中圖片對象,然后在屬性面板中的“替代”輸入框里輸入需要提示的內容就可以了。6如何制作一個邊框為1的表格?如果是僅僅將“邊框”值設為1,那么制作出來的表格要比1粗,并且看上去很不美觀,如果將表格的“邊框”、“填充”都設置為“0”,“間距”設置為“1”,并且設定整個表格的“背景顏色”如紅色,同時設定單元格的“背景顏色”如白色,就制作出了一個邊框為1的紅格白底表格。