04-表格處理2.ppt

1、網(wǎng)頁制作基礎(chǔ)教程(dreamweaver版本8.0 )、第4章表格布局頁，在本章中，重點(diǎn)介紹表格的基本操作、表格布局的應(yīng)用(標(biāo)準(zhǔn)視圖下)、表格視圖的布局、在表格和單元中輸入各種網(wǎng)頁要素的方法、表格格式化等操作方法、第四章表格布局頁、4.1制作網(wǎng)站相冊(cè)初識(shí)表4.2表使用基本操作4.3網(wǎng)頁的頁布局4.4表其他視圖4.5表布局頁4.6實(shí)戰(zhàn)演習(xí)我的第一頁附加：制作流行表、4.1制作網(wǎng)站相冊(cè)初識(shí)表、4.1 4.1制作網(wǎng)站相冊(cè)初識(shí)表，4.1.2個(gè)案研究【制作網(wǎng)站相冊(cè)】指令制作的Photo.htm網(wǎng)頁采用表格版面設(shè)計(jì)，將圖像的縮略圖排列在網(wǎng)頁上。 表的修改和美化表的插入矩陣分割添加和刪除合并單元等的基本操作

2、，4.1網(wǎng)站相冊(cè)初識(shí)表的制作，4.1.3實(shí)現(xiàn)步驟1，網(wǎng)站相冊(cè)的制作方法： 1，將制作相冊(cè)的圖像放入源圖像文件夾，同時(shí)制作空的目標(biāo)文件夾，Shi 2、運(yùn)行“命令|創(chuàng)建站點(diǎn)相冊(cè)”命令3，并在“創(chuàng)建站點(diǎn)相冊(cè)”對(duì)話框中鍵入適當(dāng)?shù)臍垔W儀表即可。 4.1.3步驟2，實(shí)現(xiàn)網(wǎng)站相冊(cè)的修改方法：選擇“頁面屬性”，可進(jìn)行文字、背景、顏色、表格的修改。 三、美化相冊(cè)表格選擇“指令|格式表格”指令。 4.1制作網(wǎng)站相冊(cè)初始識(shí)別表，4.2表的基本操作，4.2.1插入表【插入】【表】指令，或者【插入】欄的【常用】類型的【插入表】按鈕，按照理解單元的順序點(diǎn)擊，在中央一行的列表單元格每個(gè)值都是圖：4.2表格的基本操作、表格、

3、單元格：4.2表格的基本操作、4.2表格的基本操作，單擊表格邊框、單元格邊框、間距：以了解填充。 單元格邊框和內(nèi)容之間的距離是填充的。 4.2表格的基本操作、表格由三個(gè)組件組成：行、列和單元格。 1 .整個(gè)表2的選擇、行或列3的選擇、單元格的選擇、4.2.2表和單元格的選擇、4.2表的基本操作、1、選擇表的鼠標(biāo)拖動(dòng)。4.2.3調(diào)整表格大小、4.2基本操作、2、調(diào)整行和列寬度、將鼠標(biāo)置于列上，出現(xiàn)向下箭頭時(shí)，單擊可選擇列。 在“屬性”面板中，可以設(shè)置選定列的寬度和高度。 4.2表的基本操作，4.2.4表和單元格的屬性設(shè)定表屬性設(shè)定單元格屬性，4.2表的基本操作，4.2.5追加/刪除矩陣是表【屬性

4、】面板追加和刪除表的行和列是用【修改】菜單完成的4.2.6單元格的連接和分割1，連接單元格按Ctrl鍵，指向單元格4.2表格的基本操作，2，分割單元格在單元格內(nèi)單擊，選擇單元格。 單擊“屬性”面板中的“將單元格拆分為行或列”，然后設(shè)置拆分方法。4.2表的基本操作、分割后的效果、4.2表的基本操作、4.2.7單元格的復(fù)制、粘貼、移動(dòng)和清除，在設(shè)計(jì)網(wǎng)頁時(shí)，一次可以復(fù)制、粘貼、移動(dòng)和清除一個(gè)或多個(gè)單元格。 操作方法是在網(wǎng)頁編輯窗口中選擇要復(fù)制的對(duì)象復(fù)制，然后按Ctrl C鍵，或者按【編輯】【復(fù)制】命令。 按下Ctrl X鍵或移動(dòng)【編輯】【剪切】指令。 按下貼上Ctrl V，或按下【編輯】【貼上】指令

5、。 按住Ctrl鍵拖動(dòng)可完成復(fù)制操作。 直接拖動(dòng)可完成對(duì)象的操作。 按Delete鍵或清除【編輯】【清除】指令。4.2表的基本操作，4.2.8表的嵌套表是表內(nèi)的表。 如果在單元格中插入表格，則形成嵌套表格。 在當(dāng)前表格所在的單元格中插入光標(biāo)，選擇【插入】【表】命令，或者關(guān)于【插入】欄的【常用】類型的【表插入】按鈕、4.3頁的頁面布局、4.3.1頁面布局類型“”4.3.2第一畫面，一般為800600 IE安裝后的默認(rèn)狀態(tài)(即工具欄地址欄等不變)下，IE窗口的可見部分為778px435px .4.3頁的頁面布局，但第一畫面可能小于上述435px。 考慮到這一點(diǎn)，水平導(dǎo)航欄優(yōu)于垂直導(dǎo)航欄。 4.3頁

6、的頁面布局，4.3.4什么樣的布局最好？ 如果內(nèi)容不太多，說明性的東西比較多，標(biāo)題正文類型可以考慮那些框架結(jié)構(gòu)的共同特征之一，閱覽方便，速度快，但結(jié)構(gòu)變化不靈活，企業(yè)網(wǎng)站想展示企業(yè)的形象，或者個(gè)人主頁采用個(gè)人風(fēng)格封面性優(yōu)先。Flash型更靈活，好的Flash豐富了網(wǎng)頁，但是不能表現(xiàn)太多的文字信息。 4.3頁的頁面布局，1，頁面的主要內(nèi)容： LOGO標(biāo)志Banner導(dǎo)航欄的頁面內(nèi)容版權(quán)聲明，4.3頁的頁面布局，1， 標(biāo)題區(qū)域設(shè)計(jì)若干國際尺寸的Banner:46860 (全尺寸Banner LOGO: 16771 2)，導(dǎo)航欄形式的導(dǎo)航欄，在網(wǎng)頁設(shè)計(jì)中，直接連接到網(wǎng)頁的使用方便性，網(wǎng)頁在導(dǎo)航欄中，

7、有的是橫向排列的，有的是縱向排列的。 4.3網(wǎng)頁布局，2，網(wǎng)頁結(jié)構(gòu)分析這是主頁的簡單結(jié)構(gòu)，由三個(gè)表格組成。 將導(dǎo)航菜單放置在第一個(gè)表格、第二行第一列、第一行LOGO和Banner以及第二行。 第二個(gè)表單用于放置網(wǎng)頁內(nèi)容。 第三種形式輸入版權(quán)信息。 4.3網(wǎng)頁的頁面布局，常見的欄結(jié)構(gòu)，還有3欄、4欄。 以下，4.3頁的頁面布局、三、表的初始設(shè)定可選擇“寬768高430”、“寬776高430”等的近似值作為以800600分辨率在整個(gè)畫面上顯示的頁面。 以像素為單位的表格，往往使表格居中對(duì)齊。 選擇表格，然后在“屬性”面板中選擇“居中對(duì)齊”。 四、表格布局要領(lǐng)完全下載一個(gè)表格的內(nèi)容，在IE上顯示。

8、如果頁面文件很小，則只能有一個(gè)表放置內(nèi)容。 如果頁面文件大，則從上到下放置相同寬度的幾個(gè)表，分別放置不同的內(nèi)容，如圖所示，4.3頁的頁面布局，使用4.4表的其他視圖，Dreamweaver 8是標(biāo)準(zhǔn)視圖、擴(kuò)展視圖、布局視圖通常使用標(biāo)準(zhǔn)視圖，可以從插入欄的“布局”類別切換到布局視圖或擴(kuò)展視圖。 中的組合圖層性質(zhì)變更選項(xiàng)。 按一下版面配置(layout )切換至版面配置(layout )檢視，并在4.4中使用表格的其他檢視。 4.4.1擴(kuò)展視圖擴(kuò)展視圖的主要作用是：臨時(shí)為文檔中的所有表添加單元格邊距和間距，然后添加表邊框，以便于編輯。 4.4.2版面視圖使用、4.4表格的其他視圖，以版面視圖方式使

9、用表格進(jìn)行web排版設(shè)定修訂更直觀且方便。 您可以自由拖曳滑鼠來繪制任意的表格配置，并且可以自由移動(dòng)。使用、4.4表的其他視圖創(chuàng)建4.4.3布局表和布局單元1，繪制布局表2，繪制布局單元3，移動(dòng)布局表和布局單元，使用、4.4表的其他視圖創(chuàng)建1，布局表和布局單元插入條形“布局”“繪制布局單元格”，然后拖動(dòng)指針以創(chuàng)建布局單元格。 插入欄“布局”“繪制布局表”，然后拖動(dòng)指針以創(chuàng)建布局單元。 繪制嵌套布局表：在另一個(gè)布局表中繪制一個(gè)布局表，以創(chuàng)建嵌套表。 繪制Ctrl布局單元格(或表格)時(shí)，將連續(xù)創(chuàng)建布局單元格(或表格)。 2、使用4.4表格的其他視圖移動(dòng)布局單元格和表格，并調(diào)整它們的大小：選擇單元格

10、，然后按住Ctrl鍵并單擊單元格中的任意位置，可以在單元格周圍顯示選擇控點(diǎn)。 拖動(dòng)選擇控點(diǎn)以調(diào)整單元格大小。 2、使用4.4表格的其他視圖移動(dòng)布局單元格和表格，調(diào)整它們的大小和布局表格的大?。簡螕舯砀耥敳康倪x項(xiàng)卡選擇表格。 選擇控制點(diǎn)出現(xiàn)在表格周圍。 拖動(dòng)選擇控制點(diǎn)來調(diào)整表格的大小。 2、移動(dòng)布局單元格和表格，按住布局單元格：ctrl鍵，同時(shí)單擊單元格中的任意位置，然后將單元格拖動(dòng)到布局表格中的其他位置，4.4使用表格的其他視圖。 按方向鍵一次移動(dòng)一個(gè)像素。 Shift箭頭鍵每次移動(dòng)10個(gè)像素。 2、使用表格、4.4的其他視圖移動(dòng)布局單元格和表格，要調(diào)整它們的大小并移動(dòng)布局表格：請(qǐng)單擊表格頂部

11、的選項(xiàng)卡選擇表格。 選擇控制點(diǎn)出現(xiàn)在表格周圍。 將表格拖到頁面上的其他位置。 (僅當(dāng)布局表嵌套在另一個(gè)布局表中時(shí)，才能移動(dòng)布局表。) 4.4.4布局表格和單元格屬性1、布局表格屬性2、布局單元格屬性、4.4表格布局應(yīng)用頁面布局情況4.5.1情況概述本示例使用表格進(jìn)行頁面2 3表細(xì)線的制作。4.5應(yīng)用表格布局頁面布局情況，信息區(qū)域是三個(gè)嵌套表格的其他區(qū)域都是寬度一致的獨(dú)立表格，4.5.2情況分析，4.5.3應(yīng)用表格布局頁面布局情況，4.5.3實(shí)現(xiàn)步驟1，設(shè)計(jì)頁眉4.5可以應(yīng)用顯示布局頁面布局情況來修改導(dǎo)航條區(qū)域T 2:217顯示寬度778欄之間的分隔符號(hào)的使用，以及其他特殊符號(hào)。 第二行用于間隔

12、。 4.5應(yīng)用顯示布局頁面布局情況，設(shè)計(jì)信息區(qū)T3:13顯示寬度778 .左右內(nèi)容區(qū)T31:21顯示，寬度100%，顯示框1，白色。 第一格的高度為15，第二格的高度為163，單元格框?yàn)?，綠色。 第1幀：背景圖像，輸入列名第2幀：輸入列的具體內(nèi)容是將T31表復(fù)制到左、右內(nèi)容區(qū)域。4.5適用表格布局的頁面布局情況、三、設(shè)計(jì)信息區(qū)域2 .設(shè)計(jì)主內(nèi)容區(qū)域T32:23表格、寬度100%、框線0、空白0、間隔0第一行：設(shè)定各單元背景圖像，輸入欄名稱第二行：合并第二行T321 :在分割T321為2列，第一列復(fù)印和T32表，重命名和內(nèi)容追加，4.5應(yīng)用表布局頁面布局情況，4，設(shè)計(jì)著作權(quán)區(qū)T4:21表，寬度778，邊框0，空白0，間隔0第一行：插入水平線第二行：輸入關(guān)聯(lián)版本信息，4.4例為了容易看到效果，pip 單元格填充和邊框設(shè)置為0。 單元格填充與不在邊框中輸入數(shù)值的效果相似。 附件：創(chuàng)建流行表單，選擇表單，并將表單背景顏色設(shè)置為黑色。 可以做出10像素寬的表。 實(shí)際上將間距的顏色設(shè)定為黑色。 單元的背景為白色，附加：制作流行表，表的間隔改為1制作細(xì)線表，附加：制作流行表，