首先是在Photoshop中制作網(wǎng)頁(yè)的框架。網(wǎng)頁(yè)中的元素有很多,像Banner條、文本框、文字、版權(quán)、Logo、廣告等。盡量把這些相對(duì)獨(dú)立的元素放在不同的圖層中,這樣方便以后的再編輯。
不過圖層一多,就顯得很凌亂,可建立多個(gè)圖層組來進(jìn)行管理。單擊圖層面板右上角的小三角按鈕,從彈出菜單中選擇“新建組”,在隨后出現(xiàn)的對(duì)話框中為新建組取一個(gè)名稱(如:“網(wǎng)頁(yè)頂部”),確定即可。這時(shí)圖層面板中多出一個(gè)文件夾圖標(biāo),即圖層組。把相關(guān)聯(lián)的圖層都拖放到同一組中,比如網(wǎng)頁(yè)頂部的所有元素,標(biāo)題、菜單、Logo等都放到“網(wǎng)頁(yè)頂部”組中。同樣方法可以建立多個(gè)組,在組的下面還可以建立子組。
點(diǎn)擊圖層組前面的小三角,就可以像文件夾一樣展開或折疊它,這樣圖層面板就顯示干凈利落得多,要修改某個(gè)元素也能很容易找到。對(duì)同一組中的所以圖層可以方便地進(jìn)行統(tǒng)一操作,如整體復(fù)制、刪除、隱藏、合并等。
小提示:
★如果你想借鑒某個(gè)網(wǎng)頁(yè)的設(shè)計(jì),不妨把它截成圖片放在最下面的圖層中,再拉出多個(gè)參考線劃出網(wǎng)頁(yè)的大致版式,再在此基礎(chǔ)之上邊參考邊制作自己的網(wǎng)頁(yè)。
從Photoshop到Dreamweaver的轉(zhuǎn)換
在Photoshop中設(shè)計(jì)好之后,下面就要用切片工具把它轉(zhuǎn)換成網(wǎng)頁(yè)。有些人在切片之前喜歡合并圖層,其實(shí)沒有必要,合不合并圖層對(duì)最終生成的網(wǎng)頁(yè)沒有多大影響,反而會(huì)妨礙以后的編輯修改。
第1步:我們最終需要的,只是Photoshop中制作的圖形和框架。選擇切片工具(快捷鍵為K),把需要的每個(gè)圖形獨(dú)立切分出來。每切分出一個(gè)圖形,在它的左上角會(huì)顯示出切片編號(hào)。
第2步:在工具箱右擊切片工具,從彈出菜單中選擇“切片選擇工具”,用它可以選取、移動(dòng)切片,并可以調(diào)整切片的大小。右擊某個(gè)切片還可以刪除或劃分這個(gè)切片。
第3步:切分出所有圖片后,執(zhí)行“文件→存儲(chǔ)為Web所用格式”命令,打開存儲(chǔ)對(duì)話框,根據(jù)需要設(shè)置好圖片的格式、調(diào)色板等參數(shù)后,點(diǎn)擊右上角“存儲(chǔ)”按鈕調(diào)出保存對(duì)話框,選擇HTML網(wǎng)頁(yè)格式,使用默認(rèn)設(shè)置,選擇“所有用戶切片”,保存即可。
第4步:在Dreamweaver中打開剛才保存的網(wǎng)頁(yè),添加文字并進(jìn)行各種編輯修改就可以了。怎么樣,簡(jiǎn)單吧!注意:Photoshop導(dǎo)出的實(shí)際上就是一個(gè)大的表格,所有空白的地方也都會(huì)轉(zhuǎn)換為圖片填充,在DW中編輯時(shí),直接刪除這些圖片再添加相應(yīng)的內(nèi)容即可。
上一條:
由小做大的地方網(wǎng)站如何做下一條:
做網(wǎng)站SEO實(shí)戰(zhàn)技巧