1、本章學(xué)習(xí)要求：利用表格排版,1、表格的嵌套P54 2、在表格中使用不同的背景色P57 3、首字符下沉。,3.1 網(wǎng)頁(yè)布局實(shí)例,3.1.1 網(wǎng)頁(yè)的風(fēng)格,在對(duì)網(wǎng)頁(yè)插入各種對(duì)象、修飾效果前，一定要確定要確定網(wǎng)頁(yè)的總體風(fēng)格。,3.1.1 網(wǎng)頁(yè)的風(fēng)格1,“搜狐”的主頁(yè)的內(nèi)容很豐富，色彩鮮艷并有許多大幅廣告和浮動(dòng)廣告欄。,3.1.1 網(wǎng)頁(yè)的風(fēng)格2,微軟中國(guó)的主頁(yè)，內(nèi)容比較專一，內(nèi)容非常有條理，欄目突出，沒有凌亂的感覺。,3.1.1 網(wǎng)頁(yè)的風(fēng)格3,這是一個(gè)個(gè)人主頁(yè)，它看起來更簡(jiǎn)單，感覺非常清新。,3.1.2 網(wǎng)頁(yè)布局實(shí)例,所謂網(wǎng)頁(yè)的布局，通俗地說，就是確定網(wǎng)頁(yè)上的網(wǎng)站標(biāo)志、導(dǎo)航欄、菜單等元素的位置。,重要的

2、元素都放在突出的位置。,3.1.2 網(wǎng)頁(yè)布局實(shí)例1,“廠”字型結(jié)構(gòu)的特點(diǎn)是內(nèi)容清晰，一目了然。,3.1.2 網(wǎng)頁(yè)布局實(shí)例2,“同”字型結(jié)構(gòu)的特點(diǎn)是超鏈接多、信息量大。,3.1.2 網(wǎng)頁(yè)布局實(shí)例3,標(biāo)題正文型結(jié)構(gòu)的頂端是網(wǎng)站標(biāo)識(shí)和標(biāo)題，下面是網(wǎng)頁(yè)正文。內(nèi)容非常簡(jiǎn)單。,3.1.2 網(wǎng)頁(yè)布局實(shí)例4,分欄型結(jié)構(gòu)，這種結(jié)構(gòu)一般分為左右（或上下）兩欄，也有的分為多欄。一般將導(dǎo)航鏈接與正文放在不同的欄中。這樣打開新的網(wǎng)頁(yè)，導(dǎo)航鏈接欄的內(nèi)容不會(huì)發(fā)生變化。(第5章內(nèi)容）,3.1.2 網(wǎng)頁(yè)布局實(shí)例5,Flash型結(jié)構(gòu)采用Flash技術(shù)來完成,3.1.2 網(wǎng)頁(yè)布局實(shí)例6,封面型結(jié)構(gòu)，,3.1.3 網(wǎng)頁(yè)布局注意事項(xiàng),

3、1.平衡性2.對(duì)稱性 3.對(duì)比性4.疏密度 5.反復(fù)性6.韻律感,網(wǎng)頁(yè)的排版布局是決定網(wǎng)站美觀與否的一個(gè)重要方面，通過合理的、有創(chuàng)意的布局，才可以把文字、圖像等內(nèi)容完美地展現(xiàn)在瀏覽者面前。,3.1.4 畫出網(wǎng)頁(yè)布局草圖,3.2 使用表格,實(shí)現(xiàn)網(wǎng)頁(yè)的布局有兩種方法，一種是采用表格，一種是使用布局視圖。,3.2.1 表格概述,在網(wǎng)頁(yè)中，表格的作用主要有兩種： 一是存放數(shù)據(jù)和顯示信息； 二是組織網(wǎng)頁(yè)的內(nèi)容 對(duì)于圖文混排的網(wǎng)頁(yè)，利用表格可以大大提高網(wǎng)頁(yè)制作的效率，而隱藏表格框線后，可以使瀏覽者感受不到表格的存在。,3.2.2 插入表格,單擊菜單欄上的 “表格” ，打開“表格”菜單，移動(dòng)鼠標(biāo)指針到“插入

4、”上，在下一級(jí)菜單中單擊“表格”，出現(xiàn)“插入表格”對(duì)話框。,在“插入表格”對(duì)話框中，輸入欲插入表格的行數(shù)、列數(shù)和邊框線寬度，單擊“確定”。,3.2.3 插入、刪除表格的行、列和單元格,使光標(biāo)出現(xiàn)在表格中。然后單擊菜單欄上的 “表格” ，打開“表格”菜單，再單擊“表格”菜單中的“插入” ，在下一級(jí)菜單中單擊“行或列”，打開“插入行或列”對(duì)話框。,在“插入行或列”對(duì)話框選中“行”，在“行數(shù)”右端的欄位中輸入1，然后選中“所選區(qū)域之上”。單擊“確定” ，在第二行的上面將插入一行。,3.2.3 插入、刪除表格的行、列和單元格,下面，我們一起將插入的一行再刪除，學(xué)習(xí)一下刪除行的步驟。,首先，單擊鼠標(biāo)使光

5、標(biāo)出現(xiàn)在該行中。然后單擊“表格”菜單，將鼠標(biāo)指針移動(dòng)到“選定”上，自動(dòng)彈出下一級(jí)菜單，最后單擊“行”，選定該行。單擊“表格”菜單，在下拉菜單中選擇“刪除行”，該行被刪除。,3.2.4 合并與拆分單元格,拖動(dòng)鼠標(biāo)選中表格中右端的兩個(gè)單元格。單擊菜單欄上的“確定” ，打開“表格”菜單，再單擊“表格”菜單中的“合并單元格”，兩個(gè)單元格將被合并成一個(gè)單元格。,3.2.4 合并與拆分單元格,首先，單擊鼠標(biāo)，使光標(biāo)出現(xiàn)在該單元格中。然后打開“表格”菜單，再單擊“表格”菜單中的“拆分單元格” 。在“拆分單元格”對(duì)話框中選中“拆分為行”，在“列數(shù)”右端的欄位中輸入“” ，單擊“確定” ，該單元格被分為兩個(gè)單元格。,3.2.5 表格的嵌套,表格的嵌套就是在表格中插入另外一個(gè)表格，這樣除了可以使網(wǎng)頁(yè)內(nèi)容更整齊以外，還可以為選取內(nèi)容進(jìn)行編輯提供方便。,將光標(biāo)移動(dòng)到該單元格中，單擊“表格”菜單，在 “插入”的下一級(jí)菜單中選擇“表格”命令，打開“插入表格”對(duì)話框，輸入6行1列，單擊 “確定” 。,3.3 利用表格規(guī)劃網(wǎng)頁(yè)的布局,由于采用了隱藏表格框線的方法，所以在瀏覽器中絲毫看不到表格影子。,3.3.1 “表格屬性”對(duì)話框,其中“對(duì)齊方式”指表格相對(duì)于網(wǎng)頁(yè)的對(duì)齊方式；單元格襯距指單元格中文字與框線的距離；單元格間距指單元格之間的距離。,3.3.2 框線的設(shè)置,框線寬度為1，即存在細(xì)框線,0時(shí)表格框線變成