關於 Fireworks 圖片切片技術的一點心得補充

來源:互聯網
上載者:User
心得   今天看到貴版的切片教程,對於新手老說是好東東哈。

  對於大圖的切割,我自己認為能規則的切就規則的切,不要隨心所欲的切。。。之所以這樣說,是因為通常切片後,我都不怎麼用FW自動產生的HTML表格。。

  我們可以先看看FW自動產生的表格的結構(沒有經過特殊設定的):

  假如一幅圖切了兩行,第一行是三塊圖,第二行是兩塊圖,這五副切片的寬度都不一致,那麼輸出後自動成的表格將會是3行6列的一個大表格。我們發現每個放置切片圖的儲存格是沒有設定固定的width和height參數的,實際上對於儲存格尺寸的控制,FW使用了透明圖片填充的技巧,在表格的最後一行和最後一列,用了若干個固定尺寸的儲存格,這些儲存格裡用了一個spacer.gif的圖片,這也就是我們通常看到FW自動產生的切片源碼及檔案中會出現這個很小的圖片的原因。

  再仔細分析一下這個沒有嵌套的大表的原理,會發現FW會以行(列)中寬度(高度)最小的一個切片為最小單位,來產生這個表格有多少列多少行,也就是說,上面的切片例子中明明只是5個切片圖,卻沒有用一個2行3列的圖來進行布局的原因(事實上在DW中手動進行表格設定的話,也很難達到無縫效果)

  這樣的話,我們如果對某一個切片的大小進行調整時,就需要對整個大表進行重新輸出,對於精益求精的設計者來說,頻繁的改動是件很痛苦的事。

  所以我在實際運用切片的時候,都是只輸出圖片,不輸出表格的,表格自己來做。。。。具體的做法是具有相同高度的同行切片用一個表格,如果實在需要一行中做不同高度的切片(盡量不要這樣做),就需要以高度最高的那個切片為基礎,製作複雜的表格嵌套了。。

這樣做的最終效果是:一副切割後的大圖不是由FW自動產生的那樣是一個大表格,而是若干個表格組合在一起的。。。一是方便了對圖片中某個切片的修改,二是加快了大圖的下載速度(我們知道,瀏覽器對於<table>標籤總是下載到</table>標籤出現時才會顯示給你看的)

  很抱歉,羅嗦了這麼多,不知道大家是不是聽清楚了我的意思,因為現在不便,沒有執行個體圖來給大家輔助講解,改天有空補出來吧。。。。。。

  PS:剛看到了一個關於輸出HTML的設定問題,對於新手來說很有意義,如果大家看了那篇,就不用聽我在這裡羅嗦這麼多了,哈哈~不過感覺還是自己做表格好。。。。

相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。