先做一個簡單的說明為什么選擇Photoshop軟件而沒有選擇Firework軟件。Friework Dreamweaver Flash號稱網(wǎng)頁制作三劍客，F(xiàn)riework與Dreamwaver整合得更為緊密，在這里只所以選擇photoshop只是因為我的偏好，況且我對firework軟件使用的次數(shù)很少，不太喜歡他提供的層面板。
在這里我們使用的PS的版本是CS3 以前的版本與此相差無幾，但注意不能使用迷你安裝版，必須是完整安裝。

再說一下我們為什么要使用切片：
1 使用切片是最直白的網(wǎng)頁布局方法。不要再想如何去設計表格，也不要想什么DIV，你首先要想的是你的網(wǎng)頁要做成什么樣子？把你所想的畫出來就行了!! 
2 使用切片可以有效地減小頁面文件的大小，提高瀏覽者瀏覽頁面的體驗。想想看是把一個圖片完整下載下來快，還是把一個圖片分成若干個小圖同時下載快呢？

如何切片：
一 打開你設計好的PS圖，選擇切片工具 

 

二  按網(wǎng)頁的結(jié)構(gòu)和圖片的特點進行切片
切片的大水上和位置可以通過切片選項來進行調(diào)整 
 
三 選擇文件菜單 另存為WEB格式命令，保存時會生成index.html 圖片文件會存放在images文件夾中(CS3要選擇存儲為html和圖片) 
 
四 使用Dreamweaver軟件打開剛剛保存生成的html文件進行編輯，刪除不必須的圖片和進行內(nèi)容的填充。 

 

切片原則和常見問題：
 一 切片是生成表格的依據(jù)，切片的過程要先總體后局部，即先把網(wǎng)頁整體切分成幾個大部分，再細切其中的小部分。
二  對于漸變的效果或圓角等圖片特殊效果，需要在頁面中表現(xiàn)出來的，要單獨切出來
三 在DW中進行編輯時，少用圖片，如果能用背景顏色代替的就使用背景顏色 能使用圖案的也盡可能使用圖案平鋪來形成背景
四 在DW中進行編輯時，刪除圖片時出面表格錯位如何辦？
    刪除圖片的時候記住圖片的長寬，再插入一個相同長寬的表格。
五 在DW中如何自定義表格的長寬？
    使用表格長寬一樣的圖片做為單元格的背景。
六 如何在圖片上輸入文字？
    把圖片設置成背景。
其實我感覺很重要的兩步如下：
第一步：

第二步：

最新評論