1、網(wǎng)頁(yè)制作基礎(chǔ)教程（Dreamweaver CS3）,第四章表格處理,本章重點(diǎn)： 表格的基本操作 應(yīng)用表格布局（標(biāo)準(zhǔn)視圖下） 布局表格視圖的使用,第四章表格處理,4.1創(chuàng)建網(wǎng)站相冊(cè)初識(shí)表格 4.2表格的基本操作 4.3網(wǎng)頁(yè)布局的基本概念 4.4 應(yīng)用表格布局頁(yè)面 4.5 使用表格的其他視圖,4.1 創(chuàng)建網(wǎng)站相冊(cè)初識(shí)表格,4.1.1 案例綜述 使用Dreamweaver 中提供的【創(chuàng)建網(wǎng)站相冊(cè)】命令，自動(dòng)生成足球明星頁(yè)photo.htm。從中使讀者初步認(rèn)識(shí)表格的基本操作方法及其作用。,4.1 創(chuàng)建網(wǎng)站相冊(cè)初識(shí)表格,4.1.2 案例分析 使用【創(chuàng)建網(wǎng)站相冊(cè)】命令創(chuàng)建的Photo.htm頁(yè)是采用表格布

2、局，將圖片的縮略圖排列在網(wǎng)頁(yè)中的。 表格的修改和美化 表格的插入 添加或刪除行列 拆分合并單元格等基本操作,4.1 創(chuàng)建網(wǎng)站相冊(cè)初識(shí)表格,4.1.3 實(shí)現(xiàn)步驟 一、創(chuàng)建網(wǎng)站像冊(cè) 方法： 1、將需制作相冊(cè)的圖片放在源圖像文件夾中，同時(shí)建立一個(gè)空目標(biāo)文件夾，用來(lái)存放系統(tǒng)生成的圖片和文件。 2、執(zhí)行 “命令|創(chuàng)建網(wǎng)站相冊(cè)”命令 3、在【創(chuàng)建網(wǎng)站相冊(cè)】對(duì)話框中輸入相應(yīng)的參數(shù)，即可。,4.1.3 實(shí)現(xiàn)步驟 二、網(wǎng)站相冊(cè)的修改 方法： 選擇“頁(yè)面屬性”，可以進(jìn)行文字、背景、顏色，以及表格的一些修改。 三、相冊(cè)表格的美化 選擇“命令|格式化表格”命令。,4.1 創(chuàng)建網(wǎng)站相冊(cè)初識(shí)表格,4.2表格的基本操作,4

3、.2.1 插入表格 【插入】【表格】命令，或單擊【插入】欄中的【常用】類型中的【插入表格】按鈕,理解表格、單元格：,4.2表格的基本操作,4.2表格的基本操作,理解表格邊框、單元格邊框、間距：,4.2表格的基本操作,理解填充：?jiǎn)卧襁吙蚝蛢?nèi)容之間的距離就是填充。,表格包括行、列、單元格3個(gè)組成部分 。 1、選定整個(gè)表格 2、選定行或列 3、選定單元格,4.2.2選定表格和單元格,4.2表格的基本操作,方法一：?jiǎn)螕魳?biāo)簽選擇器中的相應(yīng)標(biāo)簽 方法二：使用菜單命令 方法三：用鼠標(biāo)或鍵盤,1、選定表格鼠標(biāo)拖動(dòng) 。,4.2.3調(diào)整表格的大小,4.2表格的基本操作,2、調(diào)整行和列的寬度,鼠標(biāo)放在一列的上面，

4、出現(xiàn)向下的箭頭時(shí)，單擊，就可以選中一列。在屬性面板中可以設(shè)置所選列的寬和高。,4.2表格的基本操作,4.2.4 設(shè)置表格和單元格的屬性 設(shè)置表格屬性 設(shè)置單元格屬性,4.2表格的基本操作,4.2.5 添加/刪除行列 通過(guò)表格【屬性】面板增加與刪除表格的行和列 通過(guò)【修改】菜單完成增加與刪除表格的行和列,4.2表格的基本操作,4.2表格的基本操作,4.2.6單元格的合并和拆分 1、合并單元格 按Ctrl，點(diǎn)單元格，選中表格，在屬性面板中點(diǎn)“合并所選單元格，使用跨度”。,4.2表格的基本操作,2、拆分單元格 在單元格中單擊，選中單元格。點(diǎn)擊屬性面板中的“拆分單元格為行或列”，設(shè)置拆分方式。,4.2

5、表格的基本操作,拆分后的效果,4.2表格的基本操作,4.2.7單元格的復(fù)制、粘貼、移動(dòng)和清除 在網(wǎng)頁(yè)編輯窗口中選中要復(fù)制的對(duì)象 復(fù)制按Ctrl+C，或【編輯】【復(fù)制】命令。 移動(dòng)按Ctrl+X，或【編輯】【剪切】命令。 粘貼按Ctrl+V，或【編輯】【粘貼】命令。 拖動(dòng)按住Ctrl拖，則完成復(fù)制操作。直接拖曳可完成對(duì)象的操作。 清除按Delete，或【編輯】【清除】命令。,4.2表格的基本操作,4.2.8 表格的嵌套 嵌套表是在表格中的一個(gè)表格。在一個(gè)單元格中，插入一個(gè)表格，就是嵌套表。 將光標(biāo)插入當(dāng)前表格的某個(gè)單元格中，然后可選擇【插入】【表格】命令，或單擊【插入】欄的【常用】類型中的【插入

6、表格】按鈕,4.3網(wǎng)頁(yè)布局的基本概念,4.3.1 網(wǎng)頁(yè)布局類型,“國(guó)”字型 拐角型 標(biāo)題正文型 左右框架型 上下框架型,綜合框架型 封面型 Flash型 變化型,4.3網(wǎng)頁(yè)布局的基本概念,4.3.2 頁(yè)面構(gòu)成 1. 頁(yè)面尺寸： 分辨率為800600：頁(yè)面的顯示尺寸為：780428個(gè)象素； 分辨率為640480：頁(yè)面的顯示尺寸為:620311個(gè)象素； 分辨率為1024768：頁(yè)面的顯示尺寸為：1007600。,4.3網(wǎng)頁(yè)布局的基本概念,4.3.2 頁(yè)面構(gòu)成 2. 頁(yè)頭 頁(yè)頭又可稱之為頁(yè)眉，頁(yè)眉的作用是定義頁(yè)面的主題。 頁(yè)頭常放置站點(diǎn)名字的圖片（Logo）和公司標(biāo)志以及旗幟廣告（Banner）。,

7、4.3網(wǎng)頁(yè)布局的基本概念,4.3.2 頁(yè)面構(gòu)成 3. 頁(yè)腳： 頁(yè)腳和頁(yè)頭相呼應(yīng)。頁(yè)頭是放置站點(diǎn)主題的地方，而頁(yè)腳是放置制作者或者公司信息的地方，稱為版權(quán)信息。 4. 導(dǎo)航欄 導(dǎo)航欄能讓人們?cè)跒g覽時(shí)方便地到達(dá)不同的頁(yè)面，是網(wǎng)頁(yè)元素非常重要的部分，所以導(dǎo)航欄一定要清晰、醒目，一般來(lái)講，導(dǎo)航欄要在第一屏能顯示出來(lái)。,表格布局要領(lǐng) 在IE中只有當(dāng)完全下載一個(gè)表格的內(nèi)容后，才能顯示出來(lái)。 如果頁(yè)面文件小，可以只有一個(gè)表格放內(nèi)容。 如果頁(yè)面文件很大，則從上到下放幾個(gè)寬度相同的表格，分別放不同的內(nèi)容.,4.3網(wǎng)頁(yè)布局的基本概念,4.4應(yīng)用表格布局頁(yè)面布局案例,4.4.1 案例綜述 本例使用表格進(jìn)行頁(yè)面布局，

8、從中使讀者掌握以下知識(shí)要點(diǎn),1 表格在用于頁(yè)面布局時(shí)的屬性設(shè)置。 2 表格的嵌套。 3 表格細(xì)線的制作。,4.4應(yīng)用表格布局頁(yè)面布局案例,信息區(qū)為三個(gè)嵌套的表格 其他區(qū)均為寬度一致的獨(dú)立表格,4.4.2 案例分析,4.4應(yīng)用表格布局頁(yè)面布局案例,4.4.3 實(shí)現(xiàn)步驟 一、設(shè)計(jì)頁(yè)眉區(qū) T1：33表寬778 頁(yè)面屬性：左、上邊距均為0 可插入固定大小占位符，以方便排版。,4.4應(yīng)用表格布局頁(yè)面布局案例,二、設(shè)計(jì)導(dǎo)航欄區(qū) T 2：217表寬778 欄目間的分隔符用，也可用其他特殊符號(hào)。 第二行用于間隔。,4.4應(yīng)用表格布局頁(yè)面布局案例,三、設(shè)計(jì)信息區(qū) T3：13表寬778 1.設(shè)置左右內(nèi)容區(qū) T31

9、：21表，寬100%，表格邊框?yàn)?，白色。 第1格高15，第2格高163，單元格邊框?yàn)?，綠色。 第1格：背景圖像，輸入欄目名 第2格：輸入欄目的具體內(nèi)容 復(fù)制T31表至左、右內(nèi)容區(qū)。,4.4應(yīng)用表格布局頁(yè)面布局案例,三、設(shè)計(jì)信息區(qū) 2.設(shè)計(jì)主內(nèi)容區(qū) T32：23表，寬100%，邊框?yàn)?，邊距為0，間距為0 第一行：設(shè)置各單元格背景圖像，輸入欄目名稱 第二行：合并第二行 T321：在第二行插入11表，寬100%，邊框?yàn)?，白色，單元格邊框?yàn)?，綠色。 拆分T321為2列，第一列輸入具體內(nèi)容，第二列設(shè)置132145的圖像占位符。 復(fù)制和T32表，更名，并添加內(nèi)容,4.4應(yīng)用表格布局頁(yè)面布局案例,

10、四、設(shè)計(jì)版權(quán)區(qū) T4：21表，寬778，邊框?yàn)?，邊距為0，間距為0 第一行：插入水平線 第二行：輸入相關(guān)版本信息,4.5使用表格的其他視圖,Dreamweaver CS3提供了標(biāo)準(zhǔn)視圖、擴(kuò)展視圖、布局視圖3種視圖模式。通常使用的是標(biāo)準(zhǔn)視圖，可通過(guò)插入欄的“布局”類別，切換到布局視圖或擴(kuò)展視圖。,4.5使用表格的其他視圖,4.5.1 擴(kuò)展視圖 擴(kuò)展視圖的主要作用是臨時(shí)向文檔中的所有表格添加單元格的邊距和間距，并且增加表格的邊框，這樣可以使編輯操作更加容易 。,“插入”面板|“布局”類型中，可看到“標(biāo)準(zhǔn)”、“擴(kuò)展”視圖按鈕， 單擊可切換,4.5使用表格的其他視圖,4.5.2 布局視圖 在“布局視

11、圖”方式下利用表格進(jìn)行網(wǎng)頁(yè)排版設(shè)計(jì)更為直觀方便。通過(guò)鼠標(biāo)自由拖拽就可繪制任意的表格布局，且可自由移動(dòng)。,“查看”|“表格模式”|“布局模式”命令，可切換為布局視圖。,4.5使用表格的其他視圖,4.5.3 創(chuàng)建布局表格和布局單元格 在“布局視圖”模式下，需要先繪制表格，后繪制單元格。 1、繪制布局表格 2、繪制布局單元格 3、移動(dòng)布局表格和布局單元格,4.5使用表格的其他視圖,1、繪制布局表格 步驟： 在“布局視圖”模式下，單擊“繪制布局表格”圖標(biāo)，光標(biāo)變?yōu)槭中螤?，開始繪制布局表格。 移動(dòng)光標(biāo)到想要繪制單元格的任意位置，拖動(dòng)鼠標(biāo)，就完成了布局表格的繪制。此時(shí)表格的標(biāo)志名稱“布局表格”及其尺寸在表格頂部區(qū)域顯示出來(lái)。,4.5使用表格的其他視圖,1、繪制布局單元格 布局單元格不能存在于布局表格之外。當(dāng)不在布局表格中繪制布局單元格時(shí)，會(huì)自動(dòng)創(chuàng)建一個(gè)布局表格以容納該單元格。 步驟： 插入欄“布局”“繪