04-表格處理2.ppt

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

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

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

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

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

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

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

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

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

10、，然后按住Ctrl鍵并單擊單元格中的任意位置，可以在單元格周圍顯示選擇控點。 拖動選擇控點以調整單元格大小。 2、使用4.4表格的其他視圖移動布局單元格和表格，調整它們的大小和布局表格的大小：單擊表格頂部的選項卡選擇表格。 選擇控制點出現(xiàn)在表格周圍。 拖動選擇控制點來調整表格的大小。 2、移動布局單元格和表格，按住布局單元格：ctrl鍵，同時單擊單元格中的任意位置，然后將單元格拖動到布局表格中的其他位置，4.4使用表格的其他視圖。 按方向鍵一次移動一個像素。 Shift箭頭鍵每次移動10個像素。 2、使用表格、4.4的其他視圖移動布局單元格和表格，要調整它們的大小并移動布局表格：請單擊表格頂部

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

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