DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> Dreamweaver表格經驗談
Dreamweaver表格經驗談
編輯:Dreamweaver相關     

 做過主頁的朋友,幾乎沒有一個人沒用到它,它使我們排版更加輕松。有人說DW的表格沒有Fp的好用,我認為不然,Fp就是多一個平均分配行高、列高功能,但DW參數的更改設置非常方便,可清除表格行高,列高定義的HTML語句,這個功能非常好好。

下面我們直奔主題,我將以提問的方式介紹我的幾個經驗。

  經驗(一):為什麼說表格比圖層排版要好?

  一開始學DW的朋友,都比較喜歡用圖層排版,其主要原因是圖層可以把對象放到你想放的任意位置,並且只需拖動鼠標,看起來非常輕松,但用F12預覽就面目全非,後悔了吧?還是用表格排版吧。層的定位方式與表格的不同,層采取的定位方式是動態定位方式(引自《Dreamweaver3 網頁設計》),它的定位靠的是兩個參數Left和Top,這兩個參數設置層框架與浏覽器的邊框的的距離,無論你是在最大化,還是在不同的分辨率下他都始終在一個位置,而表格在不同的情況下它將有所變化。尤其當你用表格的同時又用圖層排版,這樣的效果會讓你痛苦一輩子。圖層沒用嗎?當然有用,一般用它來做一些特效,用的好可以讓你的主頁錦上添花。本站有一個DW圖層應用的教程,有興趣可以看看。

  經驗(二):如何消除分辨率的差異?

  這是一個比較老套的話題,但總有人問。我們現在的網頁最佳浏覽分辨率大多是800*600,但有不少的兄弟用的是640*480或1024*768,怎樣讓你的網頁兼容性更好,你只需把表格的寬度設為100%即可該決這個問題。

  經驗(三):為什麼我的表格在預覽時發生變化?

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

  經驗(四):關於表格背景圖片的一個技巧。

  大家都知道在一個較大的表格中放入背景圖片,背景圖片就會重復填充直到整個頁面。我們可以利用表格的這個特性來減小我們網頁中圖片的大小,比如下面的一個漸變圖,你看上去像是一整張圖片,它其實用的就是表格背景重復填充特性,而用的圖片就是右邊的那張,大小只有1.3k,在此如果要用一張大的圖片是很不劃算的。你若要插入一根水平線,用這方法也很有效
(五):如何使鼠標指到表格,表格背景變色?

  這個特效用的是表格樣式表,要達到此效果你只需在<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.單一表格的結構盡量整齊

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved