demoshop

demo, trying to be the best_

切割版面的技巧使用CSS Sprites

  • 2009-01-28
  • 22192
  • 0

因為demo正在著手製作demoshop V4所以最近又遇到了要自己切版面的事情，以demo之前的習慣就是把圖切小然後來減少單圖的大小加快傳輸速度，但我只能說這是demo從撥接時代留下來的錯誤觀念，一樣是一個一知半解的錯誤。

要說明原因就會扯到HTTP的運作方式當我們瀏覽網站的時候，是用以下的方式在回應

  1. 瀏覽器與伺服器建立聯繫
  2. 瀏覽器發出要求
  3. 伺服器回應要求
  4. 關閉連結

以前demo的觀念只有在伺服器回應要求的這部份，完全忽略了其實我們建立聯繫和要求的時候也是需要流量的因此以現在的網路頻寬來說，減少要求次數才是加快網頁速度的重點。
上方的HTTP運作方式是簡介詳細可觀看【WIKI的說明】

demo就拿一個超級簡單的範例來說明

你看，我們頁面有四張圖就會產生四次要求，那如果我們利用CSS Sprites就可以達到以下的效果

不要懷疑，一樣的頁面活生生要求變成了一次，而且圖片還可以被快取，完美的縮短了其餘頁面的下載時間，以上是說明，如果你和demo一樣想追求這種效果，那就一起看下面的教學吧

這是原始的HTML

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="images/mAbout.gif" />
        </td>
        <td>
            <img src="images/mIntro.gif" />
        </td>
        <td>
            <img src="images/mContact.gif" />
        </td>
        <td>
            <img src="images/mContact.gif" />
        </td>
    </tr>
</table>

這是運用了CSS Sprites的HTML

<table cellpadding="0" cellspacing="0">
      <tr>
          <td>
              <div class="dd">
                  <img src="images/TEST.gif" /></div>
          </td>
          <td>
          <div class="dd">
                  <img src="images/TEST.gif" style="margin-left: -122px" /></div>
          </td>
          <td>
          <div class="dd">
                  <img src="images/TEST.gif" style="margin-left: -244px"/></div>
          </td>
          <td>
          <div class="dd">
                  <img src="images/TEST.gif" style="margin-left: -366px"/></div>
          </td>
      </tr>
</table>

還有這一段css

<style type="text/css">
 .dd{overflow: hidden;width:122px;height:39px}
</style>

先來解釋css的作用設定了

  • overflow:hidden表示超出範圍就隱藏，所以寬高就是這定張圖的寬高
  • width：就是設定圖的寬
  • height：就是設定圖的高

而HTML裡面就是利用margin-left來把圖左推

CSS Sprites還有另一種運用，就是圖片如果是背景呢就可以利用這方式來寫

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div style="background: url(images/TEST.gif) 0px 0px no-repeat; width: 122px; height: 39px;">
            </div>
        </td>
        <td>
            <div style="background: url(images/TEST.gif) -122px 0px no-repeat; width: 122px; height: 39px;">
            </div>
        </td>
        <td>
            <div style="background: url(images/TEST.gif) -244px 0px no-repeat; width: 122px; height: 39px;">
            </div>
        </td>
        <td>
            <div style="background: url(images/TEST.gif) -366px 0px no-repeat; width: 122px; height: 39px;">
            </div>
        </td>
    </tr>
</table>

來解釋一下圖片後面的 0px 0px是什麼意思，第一各是X軸第二個是Y軸，修改方式就是上方的HTML。

效果在最上面也顯示過了，demo在說明這技術的時候，被朋友說好麻煩唷，沒錯這絕對比直接貼上四張圖麻煩的多，但是好在demo對於css算小熟，所以我並不覺得很難搞，既然有這種比較好的方法當然我就會採用了，至於要不要用倒是看你囉。

相關文章

回應討論

系列文章

本頁段落