第03章-使用表格布局頁面

《網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)教程(第3版)》第三章使用表格布局頁面:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::學(xué)習(xí)目標(biāo)

在網(wǎng)頁中插入的文本和圖像會(huì)隨著瀏覽器窗口的放大與縮小發(fā)生變化，這使得網(wǎng)頁處于不穩(wěn)定的顯示狀態(tài)。要解決這種狀態(tài)，最簡單的方法就是使用表格，表格不僅能夠控制網(wǎng)頁在瀏覽器窗口中的位置，還可以控制網(wǎng)頁元素在網(wǎng)頁中的顯示位置。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::本章重點(diǎn)

創(chuàng)建基本表格

插入表格元素

調(diào)整表格大小

導(dǎo)入與導(dǎo)出表格數(shù)據(jù)

使用表格制作網(wǎng)頁:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.1使用表格

網(wǎng)頁能夠向訪問者提供的信息是多樣化的，包括文字、圖像、動(dòng)畫和視頻等。如何使這些網(wǎng)頁元素在網(wǎng)頁中的合理位置上顯示出來，使網(wǎng)頁變得不僅美觀而且有條理，是網(wǎng)頁設(shè)計(jì)者在著手設(shè)計(jì)網(wǎng)頁之前必須要考慮的問題。表格的作用就是幫助用戶高效、準(zhǔn)確地定位各種網(wǎng)頁數(shù)據(jù)，并直觀、鮮明地表達(dá)設(shè)計(jì)者的思想。

網(wǎng)頁中表格的用途創(chuàng)建表格插入表格元素

設(shè)置表格屬性:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.1.1網(wǎng)頁中表格的用途

使用表格排版的頁面在不同平臺(tái)、不同分辨率的瀏覽器中都能保持其原有的布局，并且在不同的瀏覽器平臺(tái)中具有較好的兼容性，所以表格式網(wǎng)頁中最常用的排版方式之一。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.1.2創(chuàng)建表格

表格是用于在HTML頁面上顯示表格式數(shù)據(jù)以及對(duì)文本和圖形進(jìn)行布局的工具。表格由一行或多行組成，每行又由一個(gè)或多個(gè)單元格組成。

插入表格

插入嵌套表格:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.1.3插入表格元素

為了使網(wǎng)頁中的元素能夠有序的在瀏覽器中顯示，用戶在插入文本和圖像之前，最好先插入一個(gè)表格。在表格中插入文本與圖像的方法與直接在網(wǎng)頁中插入基本相同，只是在插入之前，需要先將鼠標(biāo)光標(biāo)放置在表格中。

在表格中輸入文本在表格中插入圖像:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.1.4設(shè)置表格屬性

表格由單元格組成，即使是一個(gè)最簡單的表格，也由一個(gè)單元格。而表格與單元格的屬性完全不同，選擇不同的對(duì)象（表格或單元格），“屬性”檢查器將會(huì)顯示相應(yīng)的選項(xiàng)參數(shù)。

表格屬性單元格屬性:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.2編輯表格

當(dāng)用戶創(chuàng)建的表格不符合網(wǎng)頁設(shè)計(jì)的要求時(shí)，可以通過拆分與合并表格中的單元格，或者增加與刪除表格行或列來達(dá)到所需的目的。除此之外，在表格中還可以執(zhí)行復(fù)制、剪切、粘貼等操作，并保存原有單元格的格式。

選擇表格元素調(diào)整表格大小更改列寬和行高

添加或刪除行或列

拆分與合并單元格

復(fù)制與粘貼單元格

設(shè)置表格內(nèi)容排序

導(dǎo)入與導(dǎo)出表格式數(shù)據(jù):::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.2.1選擇表格元素

將鼠標(biāo)光標(biāo)放置在網(wǎng)頁中的表格內(nèi)，“屬性”檢查器將顯示單元格的屬性，而不是表格的屬性。這說明選中的單元格，而非表格。在網(wǎng)頁中創(chuàng)建一個(gè)表格，既包括表格自身，還包含單元格、行與列等元素，而這些元素的選擇方法各不相同。

選擇整個(gè)表格

選中行和列

選中單元格

選中單元格區(qū)域

選中不相鄰的單元格:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.2.2調(diào)整表格大小

當(dāng)用戶選中網(wǎng)頁中的表格后，在表格右下角區(qū)域?qū)@示3個(gè)控制點(diǎn)，通過拖動(dòng)這3個(gè)控制點(diǎn)可以將表格橫向、縱向或者整體放大。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.2.3更改列寬和行高

要更改單元格的列寬和行高，可以在“屬性”面板中調(diào)整數(shù)值，或拖動(dòng)列或行的邊框來更改表格的列寬或行高；也可以在“代碼”視圖中修改HTML代碼來更改單元格的寬度和高度。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.2.4添加或刪除行或列

表格中空白的單元格也會(huì)占據(jù)頁面位置，所以多余的行或列可以刪除；此外，也可以在特定行或列上方或左側(cè)添加行或列。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.2.5拆分與合并單元格

在制作頁面時(shí)，如果插入的表格與實(shí)際效果不相符，例如有缺少或多余單元格的情況，可根據(jù)需要，進(jìn)行拆分和合并單元格操作。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.2.6復(fù)制與粘貼單元格

用戶在DreamweaverCC中插入表格并選中表格中一個(gè)單元格后，選擇“編輯”命令，在彈出的的菜單中可以對(duì)表格執(zhí)行“剪切”、“拷貝”、“粘貼”等操作。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.2.7設(shè)置表格內(nèi)容排序

對(duì)于網(wǎng)頁中插入的表格，用戶可以根據(jù)單個(gè)列的內(nèi)容對(duì)表格中的行進(jìn)行排序或者根據(jù)兩個(gè)列的內(nèi)容執(zhí)行更加復(fù)雜的表格排序。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書官方網(wǎng)站edu:::::3.2.8導(dǎo)入與導(dǎo)出表格式數(shù)據(jù)

使用Dreamweav