表格的應(yīng)用二《網(wǎng)頁設(shè)計制作》

1、DreamWeaver表格妙用,網(wǎng)頁制作,DreamWeaver表格妙用 線框制作 頁面設(shè)計中的層次感,1、線框制作,在DreamWeaver里，表格被更多的應(yīng)用在布局網(wǎng)頁，定位內(nèi)容上。其實除了這些“大功能”的運用，通過各種變通的方法，表格還能實現(xiàn)很多在設(shè)計中一般難以達(dá)到的效果,線框”對象在網(wǎng)頁中是經(jīng)常見到的，比如一條細(xì)線，一個方框等等都在包含之列。在某些效果的協(xié)調(diào)制作中，“線框”的修飾是必不可少的,1 跨幅細(xì)線的制作,步驟,插入一行一列的表格； 將其中的“邊框”，“邊距”，“間距”值全部設(shè)定為0 ； 切換到單元格的屬性設(shè)置窗口，將單元格的“背景顏色”設(shè)定為“紅色”（為最終細(xì)線的顏色，可自由設(shè)

2、置），同時把“高”設(shè)置為“1,2細(xì)線邊框的制作,細(xì)線邊框是網(wǎng)頁中定位區(qū)分內(nèi)容常用的一種方法，配合特定圖片的使用，往往能夠達(dá)到不錯的效果，那么如何制作細(xì)線邊框呢,細(xì)線邊框的制作步驟,將屬性板中，“邊框”、“邊距”設(shè)置為“0”，“間距”設(shè)置為“1”。 將表格的“背景色”設(shè)定為“紅色”，同時將單元格的“背景色”設(shè)定為同網(wǎng)頁背景色-“白色,3 隔距邊框的制作,隔距邊框”在網(wǎng)頁中主要用來排列各個欄目或頻道的項目列表用的，為了方便大家理解，先把制作完成以后的效果圖給大家展示下，如下,下面是相應(yīng)的制作過程，（以制作三框隔距為例說明,首先在網(wǎng)頁中插入一個1行3列的表格對象，在插入過程中直接把“邊框”設(shè)定為0，

3、 “邊距”設(shè)定為1 ，“間距”設(shè)定為2，； 將3個單元格對象的“背景色”設(shè)定為“紅色”，注意該顏色即隔距邊框的顏色。 依次在三個單元格中插入一個表格對象，將“邊框”，“間距”，“邊距”全部設(shè)定為“0”，同時在屬性板中將每個表格的背景顏色均設(shè)定為同網(wǎng)頁背景色“白色,2、頁面設(shè)計中的層次感,1 ）新建一個頁面文件，然后在編輯區(qū)域中插入一個 2 1 的表格，并設(shè)置表格的基本屬性參數(shù),2 ）設(shè)置表格。將光標(biāo)置于第一行的單元格中，再將單元格的背景顏色設(shè)置為 #69A538，并應(yīng)用同樣的方法將第二行單元格的背景顏色設(shè)置為 #8FCB5A。設(shè)置完成后將光標(biāo)至于第一行的單元格中，然后在此單元格中插入一個 1

4、5 的表格，并設(shè)置表格的基本屬性參數(shù),3 ）錄入文字并設(shè)置單元格：在新插入的表格的所有單元格中輸入文字，然后選中所有單元格，設(shè)置單元格的相關(guān)屬性（背景色#728d43，字體顏色#e1f0d0,4 ）改變其中一個單元格的文字顏色和背景顏色，使其突出顯示（背景色#8fcb5a，字體顏色#ffffff,表格使用經(jīng)驗,經(jīng)驗（一）：為什么說表格比圖層排版要好？ 一開始學(xué)DW的朋友，都比較喜歡用圖層排版，其主要原因是圖層可以把對象放到你想放的任意位置，并且只需拖動鼠標(biāo)，看起來非常輕松，但用F12預(yù)覽就面目全非，后悔了吧？還是用表格排版吧。 層的定位方式與表格的不同，層采取的定位方式是動態(tài)定位方式，它的定位

5、靠的是兩個參數(shù)Left和Top，這兩個參數(shù)設(shè)置層框架與瀏覽器的邊框的的距離，無論你是在最大化，還是在不同的分辨率下他都始終在一個位置，而表格在不同的情況下它將有所變化,表格使用經(jīng)驗,經(jīng)驗（二）：如何消除分辨率的差異？ 怎樣讓你的網(wǎng)頁兼容性更好，你只需把表格的寬度設(shè)為100%即可該決這個問題,表格使用經(jīng)驗,經(jīng)驗（三）：為什么我的表格在預(yù)覽時發(fā)生變化？ 我們經(jīng)常會在做完表格排版后預(yù)覽，發(fā)現(xiàn)表格的樣子變了，不是有的高度變長了，就是寬度變寬了。出現(xiàn)這個情況的原因是，你在排版的時候，把表格高度或長度用鼠標(biāo)拖長或拖短過，這樣DW就會在你網(wǎng)頁代碼中自動加入一些寬的長度代碼或高度代碼。由于在排版的過程中，經(jīng)常

6、會這樣做，所以你的網(wǎng)頁代碼加了許多的這些高和寬的代碼，當(dāng)你預(yù)覽的時候瀏覽器就會按這些代碼來顯示，于是就會出現(xiàn)表格樣子發(fā)生變化。 好在DW為你提供了決辦法，點屬性面板的“清除行高”（除掉表格中定義高度的Html語句） ，而“清除列寬”（除掉表格中定義寬度的Html語句）你最好少用，用不好會弄巧成拙,表格使用經(jīng)驗,經(jīng)驗（四）：關(guān)于表格背景圖片的一個技巧。 大家都知道在一個較大的表格中放入背景圖片，背景圖片就會重復(fù)填充直到整個頁面。我們可以利用表格的這個特性來減小我們網(wǎng)頁中圖片的大小,表格使用經(jīng)驗,經(jīng)驗（五）：如何利用表格實現(xiàn)畫中畫，也就是頁中頁效果？ 網(wǎng)頁的排版大多使用表格，利用一個表格單元可以嵌入一個網(wǎng)頁，你知道嗎？這樣做有很多好處，比如你把經(jīng)常更新的區(qū)域劃分一個表格單元，然后在這個表格單元中嵌入你想要更新的內(nèi)容，今后更新主頁只需上傳這個被嵌套的頁面就可以了，沒有必要對首頁進(jìn)行更新，是不是很方便,例如,htmlheadtitle范例/titlebodytable border=1 width=100%trtdIFRAME src=example.htm width=300 heitht=100/IFRAME/td/tr/table/