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

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

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

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

1、插入表格

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

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

2、設(shè)置表格屬性

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

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

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

寬:設(shè)置表格的寬度,單位可以是像素或百分比。當(dāng)單位是百分比時(shí),表示表格的寬度占級(jí)元素的百分比寬度。

對(duì)齊:表示表格在上一級(jí)元素的對(duì)齊方式。

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

3、合并單元格

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

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

而在拆分單元格時(shí),HTML代碼中的標(biāo)記方法是讓其他行或列中的單元格合并起來(lái),然后在需要拆分的單元格的旁邊增加單元格

4、選取表格對(duì)象

在進(jìn)行表格操作時(shí),需要選取表格對(duì)象。表格對(duì)象可以選取整個(gè)表格、選取某一個(gè)單元格、選取多個(gè)單元格、選取整行或整列

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

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

在一個(gè)單元格中單擊,光標(biāo)會(huì)在這個(gè)單元格中閃動(dòng),這個(gè)單元格就處于被選中狀態(tài)。在進(jìn)行單元格屬性設(shè)置時(shí),只需要在這個(gè)單元格中單擊即可選中這個(gè)表格。

5、表格的復(fù)雜嵌套實(shí)現(xiàn)網(wǎng)頁(yè)的排版

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

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

標(biāo)題名稱：網(wǎng)頁(yè)制作表格布局方法
文章分享：http://www.muchs.cn/news49/225949.html

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

廣告

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