振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
兩種切割網頁的方法
2010/05/19
兩種切割網頁的方法

1.區域要裝在表格中

區域中不好對齊的部分可考慮用表格的嵌套來顯示

表格的嵌套最好不多於3層,一來方便編輯,二來提高顯示速度

為了精確地裁切區域塊,通常是貼著輔助線來定出裁切範圍的

故裁切後的區域塊圖片大小即為DW中要插入的表格大小

 

裁切區域時有幾個小技巧,根據裁切的內容來定

若是裁切文章欄目清單方塊,則通常是將框的拐角部分包含在框的上下兩部分圖片中,

左右邊框則可只裁切一小部分以在儲存格背景中垂直迴圈顯示即可,

因為表格的高度可自由拉升以顯示超出的要顯示的文本內容。

背景圖片採用風格範本即CSS檔來描述其路徑。

文本清單等內容則通過調用動易標籤來顯示。

就這樣逐一區塊的劃分並切割,然後填充到DW的表格中直至整張網頁的完成。

這種方法要自己給每張切割的圖片命名,有點麻煩。

2. 用PS的切片工具切割後生成HTML頁

這種方法的速度快,它避免了給圖片素材元素命名的麻煩

生成的HTML頁是一個大表格,這樣在實際應用中是不可能的,

因為顯示速度肯定很慢,所以要對生成的網頁進行修改,

行與行之間分成若干個表格

表格中的複雜儲存格結構可改為多個表格的嵌套來完成。

這樣裁切可將某些圖片如文章清單圖片可保留在表格中,

作為背景,以編輯文章清單的HTML表格做輔助對齊作用。

HTML表格修改完成後,再定義CSS。

表格嵌套的小技巧:

外層表格和內層表格寬度相同時,內層表格的寬度要用100%來設置。

若外層表格設置為150,內層表格也設置為150,則外層表格在流覽器中顯示時會稍微寬些。

可通過以下代碼來實驗:

<html><body>

<table width=”150″ height=”50″ border=”1″ cellpadding=”0″ cellspacing=”0″ bordercolor=”#FF0000″>

  <tr>

    <td width=”150″><table width=”150″ height=”30″ border=”0″ cellpadding=”0″ cellspacing=”0″>

      <tr>

        <td>外表格為150,<br />

          內表格設置為150,<br />

          外表格被撐大了</td>

      </tr>

    </table></td>

  </tr>

</table>

<p> </p>

<table width=”150″ height=”50″ border=”1″ cellpadding=”0″ cellspacing=”0″ bordercolor=”#FF0000″>

  <tr>

    <td width=”150″><table width=”100%” height=”30″ border=”0″ cellpadding=”0″ cellspacing=”0″>

      <tr>

        <td>外表格為150,<br />

          內表格設置為100%,<br />

          外表格沒被撐大</td>

      </tr>

    </table></td>

  </tr>

</table>

</body></html>

 

最後更新 ( 2010/10/26 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇