Fw與Dw結合:看執行個體學切片

來源:互聯網
上載者:User
  織夢論壇(http://www.it365cn.com/bbs/)上有不少人問關於切片的問題,同樣也有不少人寫這樣的教程,其中也有像本文這樣通過執行個體來講解的,看了一些之後覺得,如果是純文字的經驗之談對初學者而言有些地方會不大明白,而一部分執行個體教程則是FW直接產生htm檔案然後在DW匯入,這當然不失為一種方法但是本人不喜歡,覺得會產生一些不必要的代碼,也不便於調整.所以自己又寫一個,不知道以前有沒有這樣的,我沒找到過,希望不是多此一舉。

   Fireworks部分
  1.在FW裡處理好圖片.圖片大小為506*125


  2.切割圖片.先不忙著一頓亂切,我們先來看一下規律.
  圖片四周是色彩簡單而且沒有什麼變化的邊框,上下左右都是一些重複的漸層和灰色點.把視圖放大來切.先切四個角大小均是13*13


  再切上下左右四邊.其中上\下兩個切片的大小為13*3,左/右兩個切片的大小為3*13.


  有人也許會奇怪,為什麼要這麼切成這樣,不是13*4,4*13而偏要把大小定得這麼死.再仔細瞧瞧__發現了吧,上面和下面的邊框每隔3個像素寬就重複一次,而左邊和右邊的邊框則是每隔3個像素高就重複一次.這樣一來就可以在DW的表格裡把它們作為一格的背景圖了(如果還是不大清楚,請暫時照著做,繼續往下面看就自然明白了)
  最後切中間的大圖,把整個圖包在裡面,大小就是整個圖片的大小減去邊框所佔的大小,寬為506-2*13=480;高為125-2*13=99.


  3.設定各個切片的輸出格式和品質並命名
  這一步最好把FW切換到2-UP模式(左邊為原圖,右邊為輸出的預覽效果),同時結合Optimize(最佳化)面板.最終目的是讓圖片的輸出品質最佳,容量最小.有的人也許會說,乾脆都設成JPEG格式的,品質為100豈不是又方便又好?如果是有一個無限大的空間給你,這當然無所謂,但是如果是給別人或公司做,別人一定會要圖片的所佔容量越小越好.並且,如果圖片品質沒多大區別的話,讓圖片容量最小又何樂而不為呢!而給每個圖片命名,這是本人喜歡的一種方式,這樣便於在DW裡匯入圖片時辨認.如果不想自己命名,FW也會自動產生一個名字.
  邊框顏色少,雖有光暈效果形成的陰影漸層,但仍沒多大變化,所以選擇輸出GIF格式的圖片,並在Project(屬性)面板中給切片命名.(如果漸層很複雜,那還是得輸出為JPEG,否則看起來就是一塊一塊的了)


  下圖就是我設定的圖片大小\名字\格式


  4.輸出
  返回Original(原始?)模式,一一選中切片,右擊,選擇第一項Expert Selected Slice...(輸出所選擇熱區...)進入匯出



   Dreamweaver部分
  1.在DW裡插入表格.3行3列,506象素寬(圖片的寬度),其餘參數為0


  2.插入圖片,在上下左右四個角和中間插入圖片,這樣,九個格子就有五個是滿的了
  3.設定背景圖


  給剩下的四個格子設定背景圖.因為表格的背景圖是平鋪的,所以作為設定作為背景的圖片(如圖中的engine_top)只需要3*13或13*3的尺寸.


  在DW裡看來,似乎就這樣好了.那按F12預覽一下看看:


  為什麼在DW裡看是好的預覽時卻是這樣呢?
  4.查看原始碼.
  把視圖切換到"Code and Design(源碼和設計?)"模式,看到表格對應的代碼如下:
<table width="506" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://www.webjx.com/htmldata/2005-06-05/engine_top_left.gif" width="13" height="13"></td>
<td background="engine_top.gif">& n b s p;</td>
<td><img src="http://www.webjx.com/htmldata/2005-06-05/engine_top_right.gif" width="13" height="13"></td>
</tr>
<tr>
<td background="engine_left.gif">& n b s p;</td>
<td><img src="http://www.webjx.com/htmldata/2005-06-05/engin_mid.jpg" width="480" height="99"></td>
<td background="engine_right.gif"> </td>
</tr>
<tr>
<td><img src="http://www.webjx.com/htmldata/2005-06-05/engine_bottom_left.gif" width="13" height="13"></td>
<td background="engine_bottom.gif">& n b s p</td>
<td><img src="http://www.webjx.com/htmldata/2005-06-05/engine_bottom_right.gif" width="13" height="13"></td>
</tr>
</table>
  那些我們只設了背景圖而並沒插入任何東西的格子裡都有一個:& n b s p;用DW畫表格如果不插入任何東西就會有這樣的一串代碼,反映到瀏覽器上就會是一個空格,因為有了空格,就把表格撐開了,我們只需手動在原始碼裡把這些東西刪掉就行了.
再預覽一下,OK了!
  另外,你也會發現,中間那個圖可以是任何尺寸的圖片,不僅僅是480*99.

  源檔案下載



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。