網(wǎng)頁制作表格布局方法

在網(wǎng)頁中迸行排版設計肘,需要對設計的內(nèi)容進行布局。但網(wǎng)頁中的元素,并不能像平面設計中的元素一樣,能實現(xiàn)任意的旋轉(zhuǎn)或隨意放置在一個位置。網(wǎng)頁中的元素,需要放置在一定的“容器”里,通過不同容器的定位,實現(xiàn)對一個網(wǎng)頁元素的定位。例如,在網(wǎng)頁中并不能按照自己的設想在任意地方插入圖片,一般是把圖片放在表格中,通過對表格的布局和定位來達到對圖片定位的目的。在進行網(wǎng)頁布局肘,通常使用表格和層兩種方法。一般通過表格或?qū)觼韺W(wǎng)頁進行分區(qū)和布局,復雜網(wǎng)頁的布局則是通過表格或?qū)拥那短讈韺崿F(xiàn)的。

網(wǎng)頁制作表格布局方法

表格是最常用的網(wǎng)頁布局實現(xiàn)方式。在表格中,很容易實現(xiàn)表格行和列的大小操作,從而方便地實現(xiàn)網(wǎng)頁布局。對單元格進行合并或拆分的操作,可以實現(xiàn)網(wǎng)頁布局的劃分可以在表格的單元格中再次插入表格,實現(xiàn)表格的嵌套。表格的嵌套可以實現(xiàn)各種復雜的布局,通過表格嵌套的方法來對網(wǎng)頁進行排版,操作便捷,修改簡單

1、插入表格

在Dreamweaver的設計視圖中需要插入表格的位置單擊,然后單擊“常用”工具欄中的“表格按鈕囯,即可在網(wǎng)頁中插入一個表格。也可以選擇“插入”“表格”命令插入一個表格。在“行數(shù)”文本框中輸入“3”,在“列”文本框中輸入“3”。單擊“確定按鈕,即可在網(wǎng)頁中插入一個3行3列的表格。

網(wǎng)頁的diV等標簽都可以插入表格,在表格的單元格中也可以插入表格。在單格中插入表格就是表格的嵌套。

2、設置表格屬性

在表格的“屬性”面板中,可以對表格的寬度、邊框等屬性進行設置。在設計視圖中單擊表格的邊框選擇一個表格,在屬性欄中就會出現(xiàn)表格的“屬性”面板,可以在其中對表格的各項屬性進行設置。

在“屬性”面板中,相應參數(shù)的設置如下：

行和列:設置表格的行數(shù)與列數(shù)。

寬:設置表格的寬度,單位可以是像素或百分比。當單位是百分比時,表示表格的寬度占級元素的百分比寬度。

對齊:表示表格在上一級元素的對齊方式。

類:選擇表格需要使用的樣式表中的樣式。

3、合并單元格

當表格中需要在連續(xù)的幾個單元格中插入內(nèi)容時,可以把表格中的單元格合并起來。在同一個表格中連續(xù)的幾個單元格,或是在連續(xù)的行和列的區(qū)域上,都可以合并為一個單元格如果要合并單元格,需要先選擇合并的單元格。在一個單元格中單擊,再按住鼠標左鍵不放向相鄰的單元格拖動,然后單擊表格“屬性”面板中的“合并所選單元格”按鈕回,即可完成合并單元格的操作。如圖12-3所示是用合并單元格的方法來實現(xiàn)的網(wǎng)頁布局。需要對網(wǎng)頁中的布局和版塊進行調(diào)整時,可以靈活采用合并單元格的方法,把表格中需要連通的單元格進行合并。

與合并單元格相反的是,同一個單元格也可以進行拆分單元格的操作,把一個單元格拆分為多個單元格。在需要拆分的單元格中單擊,然后單擊“屬性”面板中的“拆分單元格為行或列”按鈕珥,在顯的“拆分單元格”對話框中設置需要拆分的行數(shù)或列數(shù),然后單擊“確定”按鈕,完成單元格的拆分,合并與拆分單元格的操作,實際上就是在HTML代碼中標記某一個單元格占有其他某些單元格的區(qū)域。

而在拆分單元格時,HTML代碼中的標記方法是讓其他行或列中的單元格合并起來,然后在需要拆分的單元格的旁邊增加單元格

4、選取表格對象

在進行表格操作時,需要選取表格對象。表格對象可以選取整個表格、選取某一個單元格、選取多個單元格、選取整行或整列

(1)選取整個單元格。在 Dreamweaver CS6的設計視圖中,在表格的邊框上單擊,選擇整個表格這時,表格會以黑色邊框顯示。

(2)選擇多個單元格。在 Dreamweaver CS6的設計視圖中,在一個單元格中單擊,然后按住鼠標鍵不放,向需要選擇的單元格拖動,選擇了多個單元格以后釋放鼠標,選擇的單元格以黑色邊框顯示。

在一個單元格中單擊,光標會在這個單元格中閃動,這個單元格就處于被選中狀態(tài)。在進行單元格屬性設置時,只需要在這個單元格中單擊即可選中這個表格。

5、表格的復雜嵌套實現(xiàn)網(wǎng)頁的排版

在網(wǎng)頁中使用表格合并與拆分的方法,可以實現(xiàn)網(wǎng)頁布局的靈活排版,但是,用單元格合并或拆分的方法完成網(wǎng)頁的設計以后,就很難再進行行列操作,且不同的單元格互相影響,在更改一個單元格的大小時,同時會對其他單元格造成影響,很難進行靈活控制另一個實現(xiàn)布局排版的方法是用表格的嵌套。表格嵌套就是在表格的單元格中再插入表格,以實現(xiàn)對網(wǎng)頁布局的排版。

在進行表格嵌套操作之前,需要明確在哪些單元格中怎樣再插入表格進行表格嵌套。用表格嵌套的方法,不同的單元格之間不會相互影響,可以分別設置不同表格各自的屬性,可以靈活地使用邊框拖動的方法來改變各個嵌套表格的大小。單元格中再次插入一個完整的< table>表格標簽。在用表格嵌套實現(xiàn)網(wǎng)頁布局時,表格的邊框常常是0,這樣就看不到表格的邊框,以達到布局的目的。用表格嵌套的方法實現(xiàn)了網(wǎng)頁的布局以后,在單元格中插入文本、圖片、多媒體等內(nèi)容,不同單元格中的內(nèi)容互不影響。

標題名稱：網(wǎng)頁制作表格布局方法
文章分享：http://www.bm7419.com/news49/225949.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、域名注冊、虛擬主機、用戶體驗、小程序開發(fā)、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)