振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
Dreamweaver 網站表格經驗談
2010/06/18
Dreamweaver 表格經驗談

做過主頁的朋友,幾乎沒有一個人沒用到它,它使我們排版更加輕鬆。有人說DW的表格沒有Fp的好用,我認為不然,Fp就是多一個平均分配行高,列高功能,但DW參數的更改設置非常方便, 可清除表格行高,列高定義的HTML語句,這個功能挺好。好!好!我不再囉嗦了,直奔主題,我將以提問的方式介紹我的那幾個經驗,Follw me :

經驗(一):為什麼說表格比圖層排版要好?
一開始學DW的朋友,都比較喜歡用圖層排版,其主要原因是圖層可以把對象放到你想放的任意位置,並且只需拖動滑鼠,看起來非常輕鬆,但用F12預覽就面目全非,後悔了吧?還是用表格排版吧。層的定位方式與表格的不同,層採取的定位方式是動態定位方式,它的定位靠的是兩個參數Left和Top,這兩個參數設置層框架與瀏覽器的邊框的的距離,無論你是在最大化,還是在不同的解析度下他都始終在一個位置,而表格在不同的情況下它將有所變化。尤其當你用表格的同時又用圖層排版,這樣的效果會讓你痛苦一輩子。圖層沒用嗎?當然有用,一般用它來做一些特效,用的好可以讓你的主頁錦上添花。  

經驗(二):如何消除解析度的差異?
這是一個比較老套的話題,但總有人問。我們現在的網頁最佳瀏覽解析度大多是1024*768,但有不少的人用的是1152*864或1280*720,怎樣讓你的網頁相容性更好,你只需把表格的寬度設為100%即可該決這個問題。

經驗(三):為什麼我的表格在預覽時發生變化?
我們經常會在做完表格排版後預覽,發現表格的樣子變了,不是有的高度變長了,就是寬度變寬了。出現這個情況的原因是,你在排版的時候,把表格高度或長度用滑鼠拖長或拖短過,這樣DW就會在你網頁代碼中自動加入一些寬的長度代碼或高度代碼。由於在排版的過程中,經常會這樣做,所以你的網頁代碼加了許多的這些高和寬的代碼,當你預覽的時候瀏覽器就會按這些代碼來顯示,於是就會出現表格樣子發生變化。好在DW為你提供了決辦法,按Ctrl+F3後用滑鼠點擊表格邊框出來表格屬性面板,點屬性面板的Clear row heiht(除掉表格中定義高度的Html語句) ,而Clear Column Wedths(除掉表格中定義寬度的Html語句)你最好少用,用不好會弄巧成拙,如果你的網頁中用到割過的圖片,此時用它來消除圖片間的空隙非常有效。

經驗(四):關於表格背景圖片的一個技巧。
大家都知道在一個較大的表格中放入背景圖片,背景圖片就會重複填充直到整個頁面。我們可以利用表格的這個特性來減小我們網頁中圖片的大小。你若要插入一根水平線,用這方法也很有效。

經驗(五):如何使滑鼠指到表格,表格背景變色?
這個特效用的是表格樣式表,要達到此效果你只需在<td>代碼中加入:
onmouseout="this.style.backgroundColor='' " onmouseover="this.style.backgroundColor='#FFcccc'"
例:<td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">,“#ffccc”是你滑鼠指到表格上要變的顏色,你根據需要改變個顏色。

經驗(六):如何利用表格實現畫中畫,也就是頁中頁效果?
網頁的排版大多使用表格,利用一個表單元可以嵌入一個網頁,你知道嗎?這樣做有很多好處,比如你把經常更新的區域劃分一個表格單元,然後在這個表格單元中嵌入你想要更新的內容,今後更新主頁只需上傳這個被嵌套的頁面就可以了,沒有必要對首頁進行更新,是不是很方便。我寫個最簡單的例子代碼:
<html>
<head>
<title>範例</title>
<body>
<table border="1" width="100%">
<tr>
<td>
<IFRAME src="example.htm" width="300" heitht="100"></IFRAME>
</td>
</tr>
</table>
</body>
</html>
插入被嵌入頁的關鍵代碼是:<IFRAME src="example.htm" width="300" heitht="100"></IFRAME>。example.htm是被嵌入的頁面,標籤<IFRAME>還有一些可用的參數設置如下:
marginwidth:網頁中內容在表格右側的預留寬度;例如:marginwidth="20",單位是pix,下同。
marginheight:網頁中內容在表格頂部預留的高度;
hspace:網頁右上角的的橫坐標;
vspace:網頁右上角的縱坐標;
frameborder:是否顯示邊緣;填"1"表示"是",填"0"表示"否"
scrolling:是否出現捲軸;填"1"表示"是",填"0"表示"否"

經驗(七):在使用表格中應注意那些問題?
1.整個表格不要都套在一個表格裡,儘量拆分成多個表格。
2.表格的嵌套層次儘量要少,最好巢狀表格格不超過3層。
3.單一表格的結構儘量整齊。

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

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

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

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