【網(wǎng)頁設(shè)計(jì)】網(wǎng)頁表格-大學(xué)課件-

YANGTZE

NORMAL

UNIVERSITY5

網(wǎng)頁表格YANGTZE

NORMAL

UNIVERSITY第5章表格的應(yīng)用5.1表格的創(chuàng)建5.2表格的格式化5.3導(dǎo)入和導(dǎo)出表格式數(shù)據(jù)5.4對(duì)表格進(jìn)行排序5.5實(shí)例制作YANGTZE

NORMAL

UNIVERSITY5.1表格的創(chuàng)建5.1.1插入表格YANGTZE

NORMAL

UNIVERSITY設(shè)置表格屬性(1).表格ID(2).行列：(3).寬高(4).填充(5).間距(6).對(duì)齊(7).邊框(8).背景顏色(9).背景圖象(10).邊框顏色YANGTZE

NORMAL

UNIVERSITY5.1.1插入表格在文檔窗口中，將光標(biāo)放在需要?jiǎng)?chuàng)建表格的位置，在“插入”欄的“ 常用”類別中，單擊“表格”按鈕，或選擇“插入”菜單下的“表格 ”選項(xiàng)，彈出“表格”對(duì)話框。對(duì)“表格”對(duì)話框中的各個(gè)參數(shù)進(jìn)行設(shè)置行數(shù)：確定表格具有的行的數(shù)目。列數(shù)：確定表格具有的列的數(shù)目。

表格寬度：以像素為單位或按占瀏覽器窗口寬度的百分比指定表格的寬度。邊框粗細(xì)：指定表格邊框的寬度。如果您沒有明確指定邊框粗細(xì)的值，則大多數(shù)瀏覽器按邊框粗細(xì)設(shè)置為1顯示表格。若要確保瀏覽器顯示的表格沒有無邊框，請(qǐng)將邊框粗細(xì)設(shè)置為0。單元格邊距：確定單元格邊框和單元格內(nèi)容之間的像素?cái)?shù)。單元格間距：確定相鄰的表格單元格之間的像素?cái)?shù)。YANGTZE

NORMAL

UNIVERSITY5.1.2.創(chuàng)建嵌套表格表格之中還有表格就叫做嵌套表格。引入嵌套表格，由總表格負(fù)責(zé)整體排版，由嵌套的表格負(fù)責(zé)各個(gè)子欄目的排版，并插入到總表格的相應(yīng)位置中，各司其職，互不沖突。另外，通過嵌套表格，利用表格的背景圖像、邊框、單元格間距和單元格邊距等屬性可以得到漂亮的邊框效果，制作出精美的網(wǎng)頁。制作嵌套表格的步驟如下：?jiǎn)螕粢粋€(gè)表格中的單元格，定位插入的光標(biāo)。選擇“插入”菜單中的“表格”選項(xiàng)，打開“表格”對(duì)話框。在“表格”對(duì)話中，為嵌套表格指定所需要的屬性，然后單擊“確定”按鈕，完成操作。在表格中可以直接輸入文字或插入圖像，也可以進(jìn)行文字粘貼。YANGTZE

NORMAL

UNIVERSITY5.2表格的格式化5.2.1選擇單元格對(duì)象5.2.2表格的HTML代碼5.2.3設(shè)置表格屬性5.2.4設(shè)置單元格、行和列屬性5.2.5套用“表格模板”5.2.6去除表格輔助線YANGTZE

NORMAL

UNIVERSITY5.2.1選擇單元格對(duì)象1.選中整個(gè)表格要選中整個(gè)表格，有如下幾種方法：選擇整個(gè)表格的方法是把鼠標(biāo)放在表格邊框的任意處，當(dāng)鼠標(biāo)指針右下角出現(xiàn)標(biāo)志時(shí)，單擊鼠標(biāo)左鍵即可選中整個(gè)表格。在表格內(nèi)任意處單擊，然后在狀態(tài)欄的標(biāo)簽選擇器中單擊<table>標(biāo)記，即可選中整個(gè)表格。在單元格任意處單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格”選項(xiàng)中的“選擇表格”命令或者按Ctrl+A組合鍵，即可選中整個(gè)表格。YANGTZE

NORMAL

UNIVERSITY2.選中表格行要選中表格行，有如下三種方法：將鼠標(biāo)指針移動(dòng)到表格行左方表格之外的位置，當(dāng)鼠標(biāo)指針變?yōu)橐粋€(gè)指向右方的黑色箭頭形狀時(shí)，單擊鼠標(biāo)左鍵即可選中相應(yīng)的表格行。在此基礎(chǔ)上，按住鼠標(biāo)左鍵，上下拖動(dòng)鼠標(biāo)，即可選中多行。先單擊要選中表格行的第一個(gè)單元格，然后按住鼠標(biāo)左鍵拖動(dòng)鼠標(biāo)，直到表格行的最后一個(gè)單元格中，再釋放鼠標(biāo)，即可選中表格行，如圖5-5所示。在此基礎(chǔ)上，若繼續(xù)按住鼠標(biāo)左鍵上下拖動(dòng)鼠標(biāo)，即可選中多個(gè)表格行。先單擊要選中表格行的任意一個(gè)單元格，然后在狀態(tài)欄的標(biāo)記選擇器中單擊<tr>標(biāo)記，即可選中該表格行。YANGTZE

NORMAL

UNIVERSITY3.選中表格列選中表格列的方法與選中表格行的方法類似，這里不再贅述。5.選中單元格在要選擇的單元格中按下鼠標(biāo)左鍵，并拖拽鼠標(biāo)到相鄰單元格中，當(dāng)單元格四周帶有黑色粗框時(shí)釋放鼠標(biāo)，即可選中該單元格。要選中某一單元格，按住Ctrl鍵，用鼠標(biāo)在需要選中的單元格單擊即可。在要選中的單元格單擊鼠標(biāo)左鍵，然后在狀態(tài)欄的標(biāo)記選擇器中單擊<td>標(biāo)記，即可選中該單元格。YANGTZE

NORMAL

UNIVERSITY5.2.2表格的HTML代碼插入表格后，切換到代碼模式或拆分模式，都可以看到一個(gè)表格的代碼表示。任何表格都有三個(gè)基本要素：表行、表頭和表項(xiàng)，每個(gè)要素都有自己的標(biāo)簽。其基本定義格式如下：<table>…</table>

定義表格；<tr>…</tr><th>…</th><td>…</td>定義表行定義表頭定義表項(xiàng)（單元格）YANGTZE

NORMAL

UNIVERSITY1.表格尺寸設(shè)置一個(gè)表由<table>開始，</table>結(jié)束，表格的標(biāo)題和內(nèi)容全都包含在這兩個(gè)標(biāo)記之間。表格的整體外觀由<table>標(biāo)記的屬性決定。主要有以下幾項(xiàng)表格屬性：表的大小用width=“數(shù)值”和height=“數(shù)值”屬性說明。前者為表寬，后者為表高，數(shù)值是為像素?cái)?shù)或占窗口的百分比。定義表格的粗細(xì)由border=“n”說明，n取整數(shù)，單位是像素（如果省略，則不帶邊框）。將border設(shè)成不同的值，可產(chǎn)生不同的效果。表格間距用cellspacing="數(shù)值"表示，"數(shù)值"的單位是像素。YANGTZE

NORMAL

UNIVERSITY2.表格內(nèi)文字的布局與對(duì)齊表格中數(shù)據(jù)的排列方式有兩種，分別是左右排列和上下排列。左右排列以align屬性來設(shè)置，而上下排列則由valign屬性來設(shè)置。其中左右排列的位置可以分為三種：居左（left）、居中（center）和居右（right）。上下排列常用的有四種：上對(duì)齊（top）、居中（middle）、下對(duì)齊（bottom）和基線（baseline）。YANGTZE

NORMAL

UNIVERSITY3.表格的顏色在表格中，既可以對(duì)整個(gè)表格設(shè)置底色，也可以對(duì)任何一行、一個(gè)單元格使用背景色。主要有以下三種：表格的背景顏色：<table

bgcolor="值">行的背景顏色：<tr

bgcolor="值">單元格的背景顏色：<th

bgcolor="值">或<td

bgcolor="值">注："值"為顏色的名稱。YANGTZE

NORMAL

UNIVERSITY5.2.3設(shè)置表格屬性在編輯窗口中，單擊表格的左上角或在邊框線上的任意位置雙擊，即可選中表格，在屬性面板中可進(jìn)一步設(shè)置表格YANGTZE

NORMAL

UNIVERSITY5.2.4設(shè)置單元格、行和列屬性表格由很多單元格組成，每個(gè)單元格可以設(shè)置不同的屬性。也可以同時(shí)選中多個(gè)單元格，設(shè)置其共同的屬性。YANGTZE

NORMAL

UNIVERSITY添加和刪除行或列(1).在表格添加一行光標(biāo)放在單元格內(nèi)修改---表格---插入行(2).在表格中添加一列同上

提示：按下<Ctrl+M>組合鍵能添加一行，按下<Ctrl+Shift+A>能添加一列。

(3).在表格添加多行或多列光標(biāo)放在單元格內(nèi)表格---插入行列(4)單元格的復(fù)制，粘貼，移動(dòng)YANGTZE

NORMAL

UNIVERSITY單元格的合并及拆分

在制作網(wǎng)頁的過程中，有時(shí)需要合并或拆分單元格。(1).單元格的合并表格---合并單元格(2).單元格的拆分表格---拆分單元格YANGTZE

NORMAL

UNIVERSITY5.2.5套用“表格模板”

在要格式化的表格中單擊，再使用“命令

”菜單中的“格式化表格”命令，打開“格式化表格”對(duì)話框，在該對(duì)話框中選擇一種樣式，最后按“確定”按鈕YANGTZE

NORMAL

UNIVERSITY5.2.6去除表格輔助線方法一：選中表格，單擊寬度輔助線上的數(shù)字和小三角形，從下拉菜單中選擇“隱藏表格寬度”，這樣，表格的寬度輔助線就被去掉了。

方法三：選擇“查看”菜單中的“可視化助理”選項(xiàng)，在打開的級(jí)聯(lián)菜單中單擊“表格寬度”選項(xiàng)同。這樣也可以刪除表格的寬度輔助線。

方法二：選擇工具欄上的“視圖選項(xiàng)”圖標(biāo)，從下拉菜單中選擇“表格寬度”，這樣表格寬度的輔助線沒有了。YANGTZE

NORMAL

UNIVERSITY5.3導(dǎo)入和導(dǎo)出表格式數(shù)據(jù)1.導(dǎo)入表格數(shù)據(jù)(1)選擇“文件”菜單下的“導(dǎo)入”選項(xiàng)，在其子菜單中單擊“表格式數(shù)據(jù)”命令，或選擇“插入”菜單下的“表格對(duì)象”選項(xiàng)，在其子菜單中單擊“導(dǎo)入表格式數(shù)據(jù)”。打開“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框(2）在該對(duì)話框中，此對(duì)話框允許您指定有關(guān)表格式數(shù)據(jù)文件的信息，并指定要使用這些數(shù)據(jù)創(chuàng)建的表格的屬性。若要完成“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框，請(qǐng)執(zhí)行以下操作：數(shù)據(jù)文件：是要導(dǎo)入的文件的名稱。單擊“瀏覽”按鈕選擇一個(gè)文件，數(shù)據(jù)文件可以是純文本格式，也可以是Excel等軟件創(chuàng)建的文件，定界符：是正在導(dǎo)入的文件中所使用的分隔符，其中有逗號(hào)，分號(hào)，Tab，引號(hào)，其它等幾個(gè)選項(xiàng)。設(shè)置完畢后，單擊“確定”按鈕，系統(tǒng)完成導(dǎo)入表格數(shù)據(jù)操作。YANGTZE

NORMAL

UNIVERSITY2.導(dǎo)出表格請(qǐng)將插入點(diǎn)放置在表格中的任意單元格中，選擇“文件”菜單中“導(dǎo)出”選項(xiàng)，在子菜單中單擊“表格”命令。即會(huì)出現(xiàn)“導(dǎo)出表格”對(duì)話框。在“導(dǎo)出表格”對(duì)話框中，指定導(dǎo)出表格的選項(xiàng)。此對(duì)話框允許您設(shè)置分隔符和換行符樣式以通過從表格中導(dǎo)出數(shù)據(jù)來創(chuàng)建文本文件。定界符：指定應(yīng)該使用哪個(gè)分隔符字符在導(dǎo)出的文件中隔開各項(xiàng)。換行符：指定您將在哪個(gè)操作系統(tǒng)中打開導(dǎo)出的文件：Windows、Macintosh還是UNIX。（不同的操作系統(tǒng)具有不同的指示文本行結(jié)尾的方式。）設(shè)置后單擊“導(dǎo)出”按鈕，即會(huì)出現(xiàn)“表格導(dǎo)出為”對(duì)話框，在該對(duì)話框中輸入文件名稱，單擊“保存”，完成導(dǎo)出表格的操作。YANGTZE

NORMAL

UNIVERSITY5.5對(duì)表格進(jìn)行排序選擇該表格或單擊任意單元格。選擇“命令”菜單中的“排序表格” 命令。即會(huì)出現(xiàn)“排序表格”對(duì)話框該對(duì)話框允許您指定表格的排序方式，若要完成“排序表格”對(duì)話框，請(qǐng)執(zhí)行以下操作：排序按：可以確定哪個(gè)列的值將用于對(duì)表格的行進(jìn)行排序。順序：確定是按字母還是按數(shù)字順序以及是以升序（A到Z，小數(shù)字到大數(shù)字）還是降序?qū)α羞M(jìn)行排序。再按/順序：確定在不同列上第二種排序方法的排序順序。在“再按”彈出式菜單中指定應(yīng)用第二種排序方法的列，并在“順序”彈出式菜單中指定第二種排序方法的排序順序。排序包含第一行：指定表格的第一行應(yīng)該包括在排序中。如果第一行是不應(yīng)移動(dòng)的標(biāo)題，則不選擇此選項(xiàng)。對(duì)標(biāo)題行：進(jìn)行排序指定使用與body行相同的條件對(duì)表格thead部分（如果存在）中的所有行進(jìn)行排序。對(duì)腳注行進(jìn)行：排序指定使用與body行相同的條件對(duì)表格tfoot部分（如果存在）中的所有行進(jìn)行排序。設(shè)置完成后，單擊“應(yīng)用”或“確定”按鈕，完成操作。YANGTZE

NORMAL

UNIVERSITY實(shí)例1創(chuàng)建網(wǎng)站相冊(cè)創(chuàng)建相冊(cè)相冊(cè)修改及美化YANGTZE

NORMAL

UNIVERSITY網(wǎng)頁布局國(guó)字型工商銀行

大型網(wǎng)站所喜歡的類型，最上面是網(wǎng)站的標(biāo)題和廣告，下面是內(nèi)容，左右分為兩小條內(nèi)容，中間是主要部分，底下是版權(quán)聲明等。YANGTZE

NORMAL

UNIVERSITY拐角型標(biāo)題正文型左右框架型上下框架型綜合框架型封面型Flash型YANGTZE

NORMAL

UNIVERSITY頁面構(gòu)成頁面尺寸800*600頁面顯示尺寸為780*4281024*768頁面顯示尺寸為1007*600

1、800*600下，網(wǎng)頁寬度保持在778以內(nèi)，就不會(huì)出現(xiàn)水平滾動(dòng)條，高度則視版面和內(nèi)容決定。2、1024*768下，網(wǎng)頁寬度保持在1002以內(nèi)，如

果滿框顯示的話,高度是612-615之間.就不會(huì)出現(xiàn)水平滾動(dòng)條和垂直滾動(dòng)條。頁面長(zhǎng)度原則上不超過3屏，寬度不超過1屏YANGTZE

NORMAL

UNIVERSITY頁眉，頁腳

全尺寸banner為468*60px，半尺寸banner為234*60px，小banner為88*31