利用Photoshop_Dreamweaver制作網(wǎng)頁的方法與技巧

1、Computer Knowledge and Technology 電腦知識與技術(shù)多媒體技術(shù)及其應(yīng)用本欄目責(zé)任編輯:唐一東第6卷第2期(2010年1月利用Photoshop+Dreamweaver 制作網(wǎng)頁的方法與技巧周純玉,詹劼(大連水產(chǎn)學(xué)院現(xiàn)代教育技術(shù)與網(wǎng)絡(luò)中心,遼寧大連116023摘要:該文介紹了通過Photoshop 和Dreamweaver 相結(jié)合,輕松創(chuàng)作完美網(wǎng)頁的方法與技巧。關(guān)鍵詞:布局;切片;Photoshop ;Dreamweaver中圖分類號:TP393文獻(xiàn)標(biāo)識碼: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隨著互聯(lián)網(wǎng)的廣泛應(yīng)用,網(wǎng)頁制作已成為熱門,一個好的網(wǎng)頁既要內(nèi)容翔實,又要視覺新穎,還要布局合理,既要把內(nèi)容的層次性和空間性突出顯示出來,又要使頁面合理流暢、環(huán)環(huán)相扣。網(wǎng)頁制作的工具有很多,但是利用Photoshop 和Dreamweaver 配合使用制作出來的網(wǎng)頁布局更規(guī)范,頁面更精美,因此深受網(wǎng)頁制作者的推崇。1網(wǎng)頁布局的原則網(wǎng)頁布局是決定網(wǎng)站美觀與否的一個重要方面,通過合理的、有創(chuàng)意布局,才可以把文字、圖像等內(nèi)容完美地展現(xiàn)在瀏覽者前面。最好先用筆和紙將構(gòu)思的草圖畫下來,不需要很詳細(xì),只需要畫出頁面的大體結(jié)構(gòu)作為創(chuàng)作樣本即可。布局的原則如下:1對稱

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

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

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

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

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

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

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

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

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