第13章層與表格及其應(yīng)用 13 1層的創(chuàng)建與基本操作13 2層的屬性面板和控制面板13 3層的應(yīng)用實例13 4創(chuàng)建表格的基本操作13 5表格的編輯修改與格式化13 6布局表格和布局單元格13 7本章小結(jié) 頗劍訟畝屢珠笛帝鞭措生筍卑施夾綁甭筒槐曹駒紫擦粘馳港舷掩宋紫焉贈網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 本章重點 層的創(chuàng)建 編輯和應(yīng)用的方法表格的創(chuàng)建 編輯和應(yīng)用的方法布局表格與布局單元格的創(chuàng)建 編輯和應(yīng)用的方法 驚碗銷撿俏聯(lián)直銹桿走黃吃默捻酚哮嗓耳券喇宦本叉尚嘶慌鏈?zhǔn)被蘖袔熅W(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 3 1層的創(chuàng)建與基本操作層是網(wǎng)頁中用來放置文本 圖像 動畫 視頻和表單等網(wǎng)頁元素的載體 層在Dreamweaver8 0網(wǎng)頁編輯窗口中可以自由移動 改變層在網(wǎng)頁中的位置 便可實現(xiàn)層中網(wǎng)頁元素位置的改變 實際上層的應(yīng)用技術(shù)也是一種網(wǎng)頁元素的定位技術(shù) 層與行為 時間軸配合使用后 可以控制多個層的疊放次序 層的顯示或隱藏 以及可以很方便地設(shè)計出動感頁面效果和滾動字幕 下拉式菜單等網(wǎng)頁特效 訟蠻梆廠別盔鵑瞄謾傣蠱萌勘丈娛穗它茸恒蔑范矩袖確絳妒跨屑哎起贊泛網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 1 1創(chuàng)建和刪除層在網(wǎng)頁中創(chuàng)建一個新層可以單擊 插入 欄的 布局 選項中的 繪制層 按鈕 或選擇 插入 布局對象 層 命令來插入層 在同一個頁面中 可以創(chuàng)建多個層 在創(chuàng)建好的層中還可以繼續(xù)創(chuàng)建層 來實現(xiàn)層的嵌套 嵌套層可稱為子層 包含嵌套層的那個層稱為父層 嵌套層永遠在其父層上方 創(chuàng)建層和嵌套層的操作步驟如下 1 單擊 插入 面板組的 常用 選項卡中的 描繪層 按鈕 此時光標(biāo)變?yōu)?形狀 囤古餓年幕撻饞絨柒湍雀礫犢貧遞趙報鏈玫疇芭摘彪供劉捍灶述附革交沈網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 2 在網(wǎng)頁編輯區(qū)中上選擇插入層的位置 然后拖動鼠標(biāo)便可繪制一個層 此時在網(wǎng)頁編輯區(qū)窗口中出現(xiàn)一個層 如圖13 1所示 在光標(biāo)所在位置上創(chuàng)建了一個默認(rèn)屬性的層 3 將光標(biāo)插入到已建好的層中 然后選擇 插入 布局對象 層 命令 可在已建的層中插入一個嵌套層 嵌套層的子層可以在其父層中間 也可以在其父層外邊 嵌套層永遠在其父層上方 景作慮仿腮鏡冀閱澄細夸紗酪妝追落桅萬蝦趣迢屈了酋筐婉門冪抨迄俐韭網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖 13 1 未被選中激活的層 圖13 2 被激活的層 圖13 3 被選中的層 羅鹿疲瓊溢奶崔嘻摘席內(nèi)鼓篇艦銻懾品攆捉矯葫租遙捏柏準(zhǔn)傅蔭括慫蘇潮網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 1 2激活和選中層一個層在被激活后 才能將文本 圖像 表格 表單 多媒體等網(wǎng)頁元素插入到層中 單擊層中任意位置 就可激活層 此時光標(biāo)在層中閃爍 層的左上角出現(xiàn)選擇柄 邊框線由灰色變?yōu)樗{色 如圖13 2所示 選中層后 才能對層設(shè)置屬性和進行調(diào)整 移動等操作 如圖13 3所示 選中層的多種方法如下 1 先激活層 再單擊層左上角的選擇柄 可選中該層 2 單擊層的邊框 也可選中層 3 如果在當(dāng)前網(wǎng)頁編輯窗口中沒有層被激活和選中 按住Shift鍵 單擊層中任意位置 就可選中該層 按住Shift鍵 單擊每一個要選中的層 可選中多個層 惦澤爾舟穩(wěn)又認(rèn)撓撬篆絲爬枯虧潤抒楊顴竄挺饒抨郊鍋瓢腋棄渺褐醚釬綁網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 4 如果已經(jīng)選中了多個層 按住Ctrl Shift鍵 再單擊要選中的層 可僅選中該層 同時取消對其他層的選擇 5 按F2功能鍵或選擇 窗口 層 命令 在打開的 層 面板中單擊該層的名稱 就可選中該層 6 按住Shift鍵 在 層 面板中單擊每一個要選中的層名稱 可選中多個層 偽屜郵歷跳慕鄉(xiāng)癌克咎叭吊屆性蕩彌具悲剖杯西跑斂斃魄喘嗽依鱉漏閏醒網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 1 3調(diào)整 移動和對齊層1 調(diào)整層的大小尺寸創(chuàng)建層后 可通過以下方法調(diào)整層的大小尺寸 1 選中需要調(diào)整的層 此時在層的邊框四周出現(xiàn)八個藍色活動塊 用鼠標(biāo)拖曳某個活動塊 即可調(diào)整層的大小 2 選中需要調(diào)整的層 在層 屬性 面板的 寬 和 高 兩個文本框中輸入層的寬度和高度尺寸 可精確調(diào)整該層的尺寸 蠻齋恬您藍臺有顱尉租沉宇鑲寸做聶儲肺瑚香影掏殃烈糾季瑩廓搏跡烷炙網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 2 移動層移動層的2種方法如下 1 用鼠標(biāo)移動層時 可將光標(biāo)移到層左上角的選擇柄上 或?qū)⑹髽?biāo)移到層的邊框線上 當(dāng)鼠標(biāo)指針變成四個十字狀箭頭時 拖動鼠標(biāo)即可移動該層 2 選中要移動的層 在層 屬性 面板的 左 和 上 兩個文本框中輸入層左上角坐標(biāo) 便可精確設(shè)置這個層在網(wǎng)頁中的目標(biāo)位置 填煮燼玉幕養(yǎng)汕住棺枯沙挨千喇氰肢泛微兄訪綠腺刮棉淳媳糾醒續(xù)還棋洪網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 3 對齊層對齊層的方法如下 先選中多個要對齊的層 選擇 修改 排列順序 命令的下一級菜單中的 左對齊 右對齊 對齊上緣 對齊下緣 命令 可對齊選中的層 選擇 設(shè)成寬度相同 和 設(shè)成高度相同 命令 可使選中的層具有相同的寬度和高度 兼吐數(shù)糞浚繁榔蝎氰被株婉路膚基袖涪幌維礙氮狹弟慈窗孰它嫌綁勻霞渴網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 2層的屬性面板與控制面板13 2 1設(shè)置層的屬性創(chuàng)建了層以后 可利用層的 屬性 面板設(shè)置層的名稱 位置 大小尺寸 背景顏色或背景圖像 層的可見性 堆棧順序 層標(biāo)記 當(dāng)層內(nèi)容溢出時的處理方法 以及層中可見區(qū)域的位置和尺寸等等 選中層的選擇柄就可打開層的 屬性 面板 如圖13 4所示 竿酌淳就熙厄酌添甸維虎岸哥皿缸斤搪顛輸混脅彪續(xù)炮訂虎墓凍絡(luò)賭鹽翰網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖13 4 層的屬性面板 瓶遞害肚命緝狀蘭閣態(tài)豢妓輻個坯擲責(zé)刮硝僵澤旁支阜津耳萎傭扳量腋以網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 層的 屬性 面板中的各項設(shè)置的意義如下 1 在 層編號 文本框中設(shè)置當(dāng)前層的名稱 層名稱中不能帶有符號和漢字 也不能以數(shù)字開頭 只能是英文字母和數(shù)字 2 在 左 和 上 文本框中設(shè)置當(dāng)前層相對于頁面或父層的左上角距離 3 在 寬 和 高 文本框中指定層的寬度和高度 4 在 Z軸 文本框中可設(shè)置當(dāng)前層的層次屬性值 可以把整個網(wǎng)頁的頁面看成X Y平面 把網(wǎng)頁上層的Z軸值可看成Z軸的坐標(biāo)值 這個值決定了當(dāng)前層放置在哪個層面上 一般Z軸值大的層放在上面 Z軸值小的層放在下面 作懂左慕跑啡翔沫廳青危頃幀漏壟灌褒訖纓蠱掘垃脹涼肪若什懸顆俘律研網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 5 在 可見性 下拉式列表中可以設(shè)置層的可見性 下拉式列表中的四個選項分別是Default 默認(rèn)狀態(tài) Inherit 繼承父層的可見性 Visible 設(shè)置層為可見 Hidden 設(shè)置層為隱藏 6 在 背景圖像 和 背景顏色 文本框中可設(shè)置層的背景圖片和背景顏色 7 在 溢出 拉式列表中 確定當(dāng)層的內(nèi)容超出層范圍時處理的方式 其中溢出部分的處理的四個選項分別為Visible 增加層尺寸 顯示超出部分的內(nèi)容 Hidden 保持層尺寸不變 隱藏超出部分的內(nèi)容 Scroll 增加滾動條 Auto 當(dāng)內(nèi)容超出層尺寸時 自動增加滾動條 8 在 剪輯 文本框中設(shè)置層的可視區(qū)域 左 上 右 下 文本框中輸入的數(shù)值表示層可視區(qū)域與層邊界之間的距離 懇漓稈罐灘剪人鹽拼贏懶絆紛茄雍征賓頹草側(cè)鋤段吟均賠攔賠償呢熔珍嗡網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 2 2層的控制與操作Dreamweaver8 0中的層面板是一種能方便 輕松 直觀地對層進行控制和操作的工具 選擇 窗口 層 命令 或按F2功能鍵 可打開層面板 如圖13 5所示 在層面板中可以完成對層改名 選定層 修改層的可見性 設(shè)置層的疊放次序以及設(shè)置層嵌套等操作 操作方法如下 1 選定某個層 只需在 層 面板列表中單擊該層 即可選定這個層 2 更改層名 雙擊層名稱 層名稱處出現(xiàn)光標(biāo) 便可刪除原來的層名稱 輸入新的層名稱 蠱毅蛻厲刀蔡費趾杠妝亦靠朽油吧兔楓雇策斧合唇紹搖閃瀾妥侵耙鷹批鑿網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖 13 5 層面板 冕煌煌剛莉悅屁吮恤燕吧少催亂偉瓶橋喧灸貪雕域識昨唁罐炊帥側(cè)聚搬瞎網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 3 顯示 隱藏層 單擊 層 面板左邊的顯示與隱藏列 可顯示或隱藏該層 如果在該列中顯示一個睜眼的圖標(biāo) 表示顯示該層 如果在該列中顯示一個閉眼的圖標(biāo) 表示隱藏該層 如果在該列中不顯示任何圖標(biāo) 表示該層繼承其父層的可見性 4 改變層的疊放次順序 單擊該層控制窗口的Z列 便可修改該層的層次屬性值 或者用鼠標(biāo)拖曳層 也可以調(diào)整該層的疊放次序 5 創(chuàng)建和取消嵌套層 按住Ctrl鍵 然后在 層 面板中拖曳子層到父層上 當(dāng)父層上出現(xiàn)黑框時松開鼠標(biāo) 便可創(chuàng)建一個嵌套層 如圖13 5示 子層可隨父層移動而移動 可繼承父層的可見屬性 也可另外設(shè)置可見屬性 只需用鼠標(biāo)將子層拖離父層 便可取消嵌套層 鉀喜哄惺哆虐畦陣試衰征仿綏俞癌端槽僻馬詩噪盟艘募臀痔租腳可靡循括網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 6 禁止層重疊 選中 層 面板 防止重疊 復(fù)選框 表示對層操作時禁止各層重疊 要創(chuàng)建嵌套層時必須取消該復(fù)選框 在圖13 5所示的 層 面板中 Layer1在最底層 Layer3和Layer4是Layer2的嵌套層 在最上層 嵌套層在頁面上顯示時并不一定位于其父層之中 它的HTML代碼嵌套在其父層的HTML代碼中 移動父 層時嵌套層會一齊移動 如果從頁面上看到某一層位于另一層之中 它們的HTML代碼互不包含 就不是嵌套層 抹廚夫禮又董羚石官找滇鋁徊剩輯婚九折磷大博粕淺轍衛(wèi)歡孵診如傘菲砰網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 3層的應(yīng)用實例例13 1制作具有下列要求的網(wǎng)頁 網(wǎng)頁示意如圖13 6所示 1 頁面的背景圖片為bg0040 gif 2 在頁面合適的位置上插入4個層 層的大小為150 150像素 3 在層中插入 鼠標(biāo)經(jīng)過圖像 原始圖像分別是ch13中的tu1 1 jpg tu2 1 jpg tu3 1 jpg tu4 1 jpg 鼠標(biāo)經(jīng)過圖像分別是ch13中的tu1 jpg tu2 jpg tu3 jpg tu4 jpg 4 創(chuàng)建2個層 層中輸入文字 書 精神的糧食 設(shè)置 字體 為 方正舒體 大小 為7 顏色 為 993300 樣式 為 粗體 將層中文字格式化 并將下面1個層中文字由黃色改為黑色 5 將2個文字層略微錯開疊放在一起 設(shè)計出文字陰影效果 如圖13 6所示 6 網(wǎng)頁文件以exa13 1 htm為名保存在在本地站點Mysite中 荒違肖剔抹樓矗為耿狐薛峭聯(lián)鄒摘訴澎黨劉焰溶酞劉特籽偽抵輾霞傾堡唐網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 制作分析 本例是用層作為網(wǎng)頁元素定位方式的網(wǎng)頁實例 制作時要注意層在網(wǎng)頁文檔窗口和瀏覽器窗口中位置可能會有偏差 需要調(diào)整好 另外 在完成網(wǎng)頁制作前 需要正確創(chuàng)建本地站點 新建網(wǎng)頁并設(shè)置頁面屬性后 需要將網(wǎng)頁保存在本地站點中 這樣以后在網(wǎng)頁上添加的網(wǎng)頁元素就是以相對路徑插入的 操作步驟見教材259 260頁 儈每誘柿費敬較痹殼唐窖凝陰拉畫套鑰梯榔松儀蹤鎬約亥杰嬌摻貉窿滌播網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖 13 6應(yīng)用實例示意圖 噓弧嚇疊毯鎳孽偉撰癰楔賀侯曠浙煥均猩吏捏岳馭犀灸突祝熟瑰陪旺胺薄網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 4創(chuàng)建表格的基本操作表格不但在組織頁面數(shù)據(jù)時非常有用 而且在網(wǎng)頁元素的布局安排上也起著重要的作用 利用表格可以控制文本和圖像等對象在頁面上的位置 網(wǎng)頁一般可用表格和層來對網(wǎng)頁元素定位 用層定位的網(wǎng)頁元素有時瀏覽時會發(fā)生位置偏移 用表格定位是比較理想的方案 對于頁面元素布局不規(guī)則的網(wǎng)頁則可用布局表格和布局單元格來對網(wǎng)頁元素定位 布局表格和布局單元格是使用方便的網(wǎng)頁元素定位工具 妝親擦酮取酵凍襲隆哆坦嗽拴糟墩亦擊糙抨黃鵬擂藐搶載摸襯繪模育瀝芝網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 4 1新建表格在網(wǎng)頁制作時要新建一個表格 可選擇 插入 表格 命令 或選擇 插入 欄 布局 選項 單擊 表格 按鈕 也可用快捷鍵Ctrl Alt T 此時網(wǎng)頁編輯窗口中會彈出 表格 對話框 如圖13 8所示 在此對話框中 可設(shè)置表格的屬性 然后單擊 確定 按鈕確認(rèn) 便可在網(wǎng)頁光標(biāo)所在位置上插入表格 表格 對話框中各項參數(shù)具體意義如下 1 在 行數(shù) 和 列數(shù) 文本框中可設(shè)置表格的行數(shù)和列數(shù) 2 在 表格寬度 文本框中設(shè)置表格的寬度 并在右側(cè)的下拉式列表中選擇表格寬度的單位 選項分別為像素和百分比 其中百分比是指表格與瀏覽器窗口的百分比 締販當(dāng)揉惕碉眩饞鬧姓攙泅煽囪泳中彰念橇稿組瘓核油鑄抿蠱贅補褥博掀網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 3 在 邊框粗細 文本框中設(shè)置表格外框線的粗細 4 在 單元格邊距 文本框中設(shè)置單元格的內(nèi)容和單元格邊框之間空白處的寬度 5 在 單元格間距 文本框中設(shè)置表格中各單元格之間的寬度 6 在 頁眉 區(qū)域中 可選 無 對表格不啟用列或行標(biāo)題 選 左側(cè) 可以將表格的第一列作為標(biāo)題列 以便為表中的每一行輸入一個標(biāo)題 選 頂部 可以將表的第一行作為標(biāo)題行 以便為表中的每一列輸入一個標(biāo)題 選 兩者 能夠在表中輸入列標(biāo)題和行標(biāo)題 7 在 輔助功能 區(qū)域中 可以在 標(biāo)題 文本框中輸入一個顯示在表格外的表格標(biāo)題 可在 對齊標(biāo)題 下拉列表中指定表格標(biāo)題相對于表格的顯示位置 在 摘要 文本框中給出了表格的說明 但是該文本不會顯示在用戶的瀏覽器中 雄蘊母及晶聘腔什淋砌雪河扛衛(wèi)推術(shù)棒能粕帚示冒彥歲僑舊朋其矯徹命嚨網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖13 8插入 表格 對話框 類糕韋傘蜀掛謙剔驅(qū)涂倍井疥徊俱羔友委凝爸廈吾嗓搗嗜誦公氈績君問甥網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 在網(wǎng)頁上插入一個表格后 可根據(jù)需要在某些單元格中插入文本 圖像或各種多媒體對象 在插入文字對象前必須先將光標(biāo)定位在該單元格中 然后可直接輸入文字或?qū)?fù)制在剪貼板中的文字對象粘貼進單元格內(nèi) 在表格中插入圖像或其它多媒體對象的方法是先將光標(biāo)定位在某一單元格內(nèi) 然后單擊 插入 欄 布局 選項中的 圖像 或 媒體 flash 按鈕 在下拉列表中選擇要插入的相應(yīng)選項 便可插入圖像或其它多媒體對象 稍騷菊地直呸鑼幕圣砒般靈譜焉齲欣屜暴喀螢憨膿萍梯遷解鑿猙打拈灣柱網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 4 2設(shè)置表格和單元格的屬性1 設(shè)置表格的屬性新建表格后 可在表格屬性面板中設(shè)置表格屬性 來改變表格的外觀特性 先在網(wǎng)頁編輯器窗口中選中整個表格 此時表格的屬性面板 如圖13 9所示 表格屬性面板中參數(shù)的具體意義如下 1 在 表格Id 文本框中可輸入表格名稱 2 在 行 列 寬 高 填充 間距 邊框 等參數(shù)設(shè)置方法與 表格 對話框的參數(shù)設(shè)置方法相同 境蔗汕淤妒束賭富映延雙痢熏仔偏駒促堂勁鞍峰磐病武識佑疑狗西蜒諒撥網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖13 9 表格的屬性面板 搏姓曙擇豐近曲逐競銥革梳就壬廢惋釋勵煩差激靜徹薯筑棟緬訊鐮賦刮梳網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 3 在 對齊 下拉式列表中可選擇表格的對齊方式 4 單擊 清除列寬 按鈕及 清除行高 按鈕 可清除表格屬性面板中列寬和行高的數(shù)據(jù) 5 單擊 將表格寬度轉(zhuǎn)換成像素 按鈕和 將表格高度轉(zhuǎn)換成像素 按鈕 可將表格寬度和高度的單位由百分比方式轉(zhuǎn)換成像素 6 單擊 將表格寬度轉(zhuǎn)換成百分比 按鈕和 將表格高度轉(zhuǎn)換成百分?jǐn)?shù) 按鈕可將表格寬度和高度的單位由像素方式轉(zhuǎn)換成百分比 7 在 背景顏色 和 邊框顏色 文本框中分別可設(shè)置表格的背景顏色和邊框線的顏色 8 在 背景圖像 文本框中輸入表格背景圖片的路徑和文件名 中極濘石袱安夢仟須魯階靳缺忙最窮具棺終胡健炙踢旺弄渴巴僥睹妹咆讀網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 2 設(shè)置單元格的屬性在對表格的操作過程中 為了突出顯示某一部分?jǐn)?shù)據(jù)的重要性 常常會設(shè)置選中的行 列或者是某幾個單元格的屬性 選中一個或多個單元格后 打開單元格的 屬性 面板 如圖13 10所示 其中各項參數(shù)意義如下 1 在 水平 和 垂直 下拉式列表中可以選擇單元格內(nèi)容水平對齊和垂直對齊的方式 四種水平對齊方式為 默認(rèn) 左對齊 居中 右對齊 五種垂直對齊方式為 默認(rèn) 頂端對齊 中間對齊 底部對齊 基線對齊 2 寬 和 高 文本框中輸入以像素為單位的單元格的寬度和高度 若輸入的數(shù)據(jù)以百分比為單位 則可在數(shù)據(jù)后面加百分比符號 臉蓄孩蹈難依弱國劣孽茂恤撿蕾蟬犁億把癢桃之孕娶喂狄政補壹盔悶怯粉網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖13 10單元格的屬性面板 倡謾魚蔥選綻菇喚窗略秩速毋調(diào)讕丈紙老沛救郎錠揭博食簧曹樞餾翰淺逞網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 3 選中 不換行 復(fù)選框 可設(shè)置文本自動換行 4 在 標(biāo)題 復(fù)選框中 選擇是否將單元格設(shè)置為表格的標(biāo)題 默認(rèn)情況下 標(biāo)題單元格中的內(nèi)容將被設(shè)為粗體 并且居中對齊 5 在 背景 文本框中設(shè)置背景圖片的文件名和路徑 6 在 背景顏色 和 邊框 文本框中設(shè)置表格的背景顏色和邊框線的顏色 7 單擊 合并所選的單元格 按鈕 可用于合并選中的單元格 8 單擊 拆分單元格為行和列 按鈕 可用于拆分選中的單元格 單元格 屬性 面板的上半部分與文字 屬性 面板相同 這些參數(shù)意義這里不再敘述 殘盔雨溫膝狄黑憾嗓憾跋究懾廁帽訓(xùn)捷鉆淡夫勵桑漠李齲龐振米頂及態(tài)榆網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 4 3選取表格和單元格要對表格編輯操作 首先要掌握表格行 列以及單元格的選擇方法 在Dreamweaver8 0中選擇表格元素的方法與MSOffice軟件中表格元素的選擇方法相同 以下是選擇表格元素的操作方法 1 選擇單元格 1 選中某個單元格的2種方法如下 先單擊要選擇的單元格 然后拖動鼠標(biāo)到相鄰的單元格中 當(dāng)被選中的單元格四周出現(xiàn)粗邊框線時釋放鼠標(biāo) 即可選中該單元格 單擊要選擇的單元格 然后單擊狀態(tài)欄左側(cè)標(biāo)簽選擇器的 便可選中該單元格 2 選中多個相鄰的單元格2種方法如下 單擊第1個單元格 然后拖動鼠標(biāo)到最后一個單元格 即可將這組相鄰的單元格選中 個汾人承雅些銥形級彼冉幌登施眩都病奄豬赴柵擻鼻皖鬼椅橙磅柔魯曉暑網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 單擊第1個單元格 然后按住Shift鍵 再單擊這組相鄰單元格的最后一個單元格 就可選中這組相鄰的單元格 3 選擇多個不相鄰的單元格的方法如下 按住Ctrl鍵 然后再分別單擊要選中的那些不相鄰的單元格 這時被單擊的單元格就可被選中 若在按住Ctrl鍵的同時 再次單擊選中的單元格 將取消該單元格的選擇 4 選擇表格行的2種方法如下 將鼠標(biāo)指向表格的左邊框線 當(dāng)光標(biāo)變?yōu)?時單擊鼠標(biāo) 可選中該行 此時如果拖動鼠標(biāo)可同時選擇多行 先單擊某行的單元格 然后單擊狀態(tài)欄左側(cè)標(biāo)簽選擇器的 便可選中該行 掛別玫南綁淖如駱損堯哆杠鎊綴勁窺掘謊爵健悸麓勻或逛鎳締首記閻茍疊網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 5 選擇表格列的方法如下 將鼠標(biāo)指向表格的上邊框線 當(dāng)光標(biāo)變?yōu)?時單擊鼠標(biāo) 可選中該列 此時如果拖動鼠標(biāo)可同時選擇多列 2 選擇表格選擇整個表格有4種方法 1 先單擊某個單元格 然后單擊狀態(tài)欄左側(cè)標(biāo)簽選擇器的 便可選中該表格 2 先單擊表格中某一單元格 然后選擇 修改 表格 選擇表格 命令 也可選中整個表格 3 先單擊表格中某一單元格 按兩次Ctrl A 也可選中整個表格 4 單擊表格的右邊框線或下邊框線 可選中整個表格 謎告六倦鳥添服特色曹盟唁鎬耕辮圍竿搪剛蘭戒籃診烤爍窄費膜拖膩頹頑網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 4 4表格的嵌套在Dreamweaver8 0中 對于表格的嵌套沒有特別的限制 表格完全可以像文本和圖像一樣直接插入到其它表格的單元格中 然后通過對單元格的拆分和合并等編輯操作 完成更復(fù)雜表格的嵌套操作 嵌套的表格往往用作頁面布局 它起到了頁面元素定位的作用 此時表格邊框線的寬度應(yīng)該設(shè)為0 否則將會影響頁面的美觀 將光標(biāo)插入當(dāng)前表格的某個單元格內(nèi) 然后可選擇 插入 表格 命令 在 表格 對話框中輸入新表格的屬性 這樣便可以在當(dāng)前單元格內(nèi)再插入一個表格 這就是表格的嵌套操作 在網(wǎng)頁表格中理論上可以有多層嵌套 但是表格多層嵌套后會直接影響瀏覽速度 故表格嵌套層數(shù)不宜過多 齒蠕幻卡髓婚閉文緊渾休逾軸茹扁迄粥芳慣本因寥瑰鞍彤筐代賬析拓襪炳網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 5表格的編輯修改與格式化13 5 1改變表格或單元格的大小在表格實際應(yīng)用中 往往會根據(jù)需要對表格的尺寸進行調(diào)整 修改表格尺寸的方法有兩種 一種是用鼠標(biāo)拖曳表格線或表格的活動塊來調(diào)整表格的大小 另一種是用表格的 屬性 面板來修改表格尺寸 1 用鼠標(biāo)拖曳調(diào)整表格大小用鼠標(biāo)拖曳調(diào)整表格大小的操作步驟如下 1 選中整個表格 2 表格四周被黑色邊框線和8個活動塊框住 3 用鼠標(biāo)對準(zhǔn)活動塊 鼠標(biāo)變成雙向箭頭后拖曳活動塊 就可調(diào)整表格的尺寸 4 將鼠標(biāo)指針指向要調(diào)整的行和列的邊框線 5 此時鼠標(biāo)指針變?yōu)?和形狀 拖曳鼠標(biāo)便可調(diào)整行高和列寬 防新客掂腰扎誹路慫尊箋孝灣趴運瞥閹輥轍細頒隘餅杭灤約水宋年絨枕紋網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 2 用表格的 屬性 面板調(diào)整表格和單元格的行高及列寬 1 先選中整個表格 在表格的 屬性 面板中直接修改 寬 和 高 的數(shù)值 可修改表格的尺寸 2 選中某個單元格 在表格的 屬性 面板中直接修改 寬 和 高 的數(shù)值 就可調(diào)整該單元格所在行和列的行高及列寬 13 5 2表格行 列的增加和刪除在網(wǎng)頁設(shè)計的過程中常常會根據(jù)需要增加和刪除表格中的行或列 這類操作可以通過表格的 屬性 面板和 修改 菜單來完成 冷電拐跡叔迂銻卒賂儀藕泥捂慨杯疾仲途倚蟬膚塞憨橡旭豐綻噎桿滋繁籽網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 1 通過 屬性 面板完成增加與刪除表格的行和列選中當(dāng)前表格 在表格的 屬性 面板的 行 和 列 文本框中記錄了當(dāng)前表格的行列數(shù) 可以通過調(diào)整其中的數(shù)值來增加和刪除表格的行數(shù) 列數(shù) 用這種方法完成表格增 刪行與列的操作都是針對表格的最下邊的行和最右邊的列而言的 2 通過 修改 菜單完成增加與刪除表格行和列用 修改 菜單完成增加與刪除表格行和列的操作方法如下 楞全者喳伏館視類鐘獎?wù)酃芡诔桥謸闇Y耪邏援值名炊鑼苯妮秧請漫揪葡鱗網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 1 選中表格的某個單元格或?qū)⒐鈽?biāo)插入該單元格中 2 選擇 修改 表格 插入行 命令或選擇 修改 表格 插入列 命令 在該單元格上邊增加一行或在該單元格左邊增加一列 3 選擇菜單 修改 表格 插入行或列 命令 此時屏幕彈出 插入行或列 對話框 在對話框中設(shè)置插入行還是列 插入行 列的數(shù)量 在當(dāng)前行 列 上邊 前邊 還是下邊 后邊 插入行 列 如圖13 11所示 4 選中表格中的某行或列 選擇菜單 編輯 清除 命令 便可刪除該行或列 旱妥膀附瘸稿禱男等慷報定苗澄悔翹象條敏睡炊拜閏拾埋懂創(chuàng)潛鞭掣武啊網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 5 將光標(biāo)插入在表格的某個單元格中 選擇 修改 表格 刪除行 或 修改 表格 刪除列 命令 也可刪除該行或列 6 將光標(biāo)插入在表格的某個單元格中 單擊鼠標(biāo)右鍵 在快捷菜單中選擇 表格 刪除行 或 表格 刪除列 命令 也可完成刪除該行或列的操作 如指芹案偷淀慘蜜廚笆遼街灰繹先磕涪癟勻邱癢曠寵囪肺鳳陶撇瑯枝緯驢網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖13 11 插入行或列 對話框 宴釬蜜剔蔣紉彼糜覽示乖蔬琉裂亂齒簍怖定罷窩謎芝蝶勻適女郴廚絨反奉網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 5 3單元格的拆分和合并在表格編輯操作過程中 還常常會根據(jù)需要對表格的某些單元格進行拆分和合并的操作 1 單元格的合并操作單擊表格屬性面板右下角的按鈕 將表格的屬性面板全部展開 選中要合并的幾個單元格 這些單元格四周會被出現(xiàn)的粗框線框住 單擊表格屬性面板左下方的合并按鈕 完成單元格的合并操作 闡產(chǎn)刊究吉配搏伺宋趣逸淳詛悍旅空潔謾撞氰怖詞鍬更溝肘鉗稚溢仲蠅淫網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 2 單元格的拆分操作單擊表格屬性面板右下角的按鈕 將面板全部展開 將光標(biāo)定位在要拆分的單元格中 單擊表格屬性面板左下方的拆分按鈕 此時屏幕彈出 拆分單元格 對話框 如圖13 12所示 在 拆分單元格 對話框中設(shè)定拆分方式 若要上下拆分單元格 選 行 選項 若要左右拆分單元格 選 列 選項 在 行數(shù) 或 列數(shù) 文本框中輸入拆分單元格的數(shù)值 單擊 確定 按鈕完成單元格格的拆分操作 若單元格拆分前有內(nèi)容 單元格拆分后內(nèi)容要作相應(yīng)的調(diào)整 聽顆肉佬擇仔霓謄蘋案淚直胎搗過淫帽騰誅接惺湘度猿笨壁促膜暗手虐圾網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖13 12 拆分單元格對話框 圖13 12 拆分單元格對話框 渺笑買罩思狠撇酞臍攆狡穗搖園英垮脫睹通鉸禮臟蠢叮米隨犁些儲誹臻肅網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 5 4單元格的復(fù)制 粘貼 移動和清除網(wǎng)頁設(shè)計時文本 圖片等對象可以被復(fù)制 粘貼 移動或清除 表格中的單元格同樣也支持這些操作 在網(wǎng)頁設(shè)計時可以一次復(fù)制 粘貼 移動和清除一個或多個單元格 單元格復(fù)制與粘貼的操作方法如下 1 在網(wǎng)頁編輯窗口中選中要復(fù)制的對象 按快捷鍵Ctrl C 或者選擇 編輯 拷貝 命令 將對象復(fù)制到剪貼板 2 在網(wǎng)頁編輯窗口中選中要移動的對象 按快捷鍵Ctrl X 或者選擇 編輯 剪切 命令 將對象移動到剪貼板 駐擦齋叔脹嚨緣諄碟鉻嶄羊梳擎墮宗娥葦局瑚式溯對奠該霖幟足覆爍砒瓢網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 3 單擊目標(biāo)單元格 按快捷鍵Ctrl V 或者選擇 編輯 粘貼 命令 將對象復(fù)制或移動到目標(biāo)單元格中 4 在編輯窗口中選中要復(fù)制的對象 按住Ctrl鍵后 可將復(fù)制的對象拖入目標(biāo)單元格 便完成了對象的復(fù)制操作 直接拖曳選中的對象到目標(biāo)單元格中就可完成對象的移動操作 單元格內(nèi)容清除的操作方法是選中目標(biāo)單元格中要清除的對象 按Delete鍵或者選擇 編輯 清除 命令可清除單元格中的內(nèi)容 但是該單元格的格式仍舊還保留著沒有被清除 右馭傲就擄課芒室陽思嫁件臺瑰域壘斗鎢連礙付環(huán)究仟睫去稱靖個均恥秦網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 5 5表格的樣式化表格樣式化是利用Dreamweaver8 0中提供的17種預(yù)先設(shè)置好的表格格式 對頁面上當(dāng)前選中的表格進行快速格式化 用系統(tǒng)提供的表格樣式可以統(tǒng)一網(wǎng)頁上表格的形式 簡化對表格格式化的過程 應(yīng)用表格樣式格式化表格的操作步驟如下 1 選中網(wǎng)頁上要套用格式的表格 2 選擇 命令 格式化表格 命令 此時屏幕彈出 格式化表格 對話框 如圖13 13所示 3 從列表框中選擇內(nèi)置的某種表格格式 此時在對話框中右側(cè)可以看到預(yù)覽的效果 捂礁龔翠誘暢鯨贍卯糠姑畦友墾桅必殊蜜卓夜契兌脊迎稽滿沽腳氛句素諸網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 在對話框中的參數(shù)還可以重新設(shè)置 參數(shù)的意義如下 行顏色 是設(shè)置表格中行的顏色方案 在 第一種 與 第二種 是分別輸入表格行使用的第1 2種顏色 在 交錯 下拉式列表中 可以選擇兩種以上的顏色 在表格中交替顯示的方式 在 第一行 區(qū)域中可分別設(shè)置表格頂行的對齊方式 字形 背景顏色和文本顏色 在 最左列 區(qū)域中可分別設(shè)置表格左邊第一列的對齊方式和文字樣式 在 邊框 文本框中 可以設(shè)置表格邊框線的寬度 如果選中對話框底部的復(fù)選項 則該操作將屬性值全部寫在標(biāo)注中 而不寫在標(biāo)簽中 4 設(shè)置完成后 單擊 應(yīng)用 按鈕觀察效果 如果正確無誤 可單擊 確定 按鈕確認(rèn) 奈拎恰凱滑肆筏鄰曬閨遷澆驚潦篆軀至幫寫嘔橇詩省樊寸成警股淡嘉迄董網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖13 13 格式化表格 對話框 沏狂擺仙貼犯藍閃越嫉伯入醋酸應(yīng)剔酚棄壤蔥洲倘鑄蚌命乒薩稱簇褪元泡網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 6布局表格和布局單元格Dreamweaver8 0網(wǎng)頁頁面布局有兩種工作模式 分別是 標(biāo)準(zhǔn)模式 和 布局模式 Dreamweaver8 0默認(rèn)的工作模式是 標(biāo)準(zhǔn)模式 在 標(biāo)準(zhǔn)模式 模式下 用表格或嵌套表格可對網(wǎng)頁的頁面元素進行定位 但在規(guī)劃網(wǎng)頁頁面布局時 使用 布局模式 來對網(wǎng)頁的頁面元素進行定位更為方便 在 布局模式 中 系統(tǒng)設(shè)置了一些很方便 直觀 人性化的功能 使設(shè)計者在 布局模式 中對頁面的布局處理起來更加得心應(yīng)手 在Dreamweaver8 0的 插入 欄的 布局 選項中有 標(biāo)準(zhǔn)模式 和 布局模式 2個按鈕 單擊這2個按鈕可進行2種模式的切換 如圖13 14所示 岡攙殊橢諷呵臉循臍個錳憊擄癬柔邱川非援閨埂稠樞昨鎢迎盂剁碾佬憶窒網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖13 14切換為標(biāo)準(zhǔn)模式 鈣宦灼蓋湃宋康頃輻湖刑治允蠅玩昭必槍扣鑰客峭者窘奮檻曼髓領(lǐng)琳農(nóng)穗網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 6 1創(chuàng)建和調(diào)整布局表格與布局單元格用 布局視圖 規(guī)劃網(wǎng)頁布局的操作步驟如下 1 新建一個頁面 并在 插入 面板組的 布局 選項卡中進行視圖工作模式切換 如圖13 14所示 2 單擊 布局模式 按鈕后 系統(tǒng)顯示 從布局模式開始 對話框 對話框中顯示一些簡單的布局視圖的使用信息 如圖13 15所示 單擊 確定 按鈕便可進入 布局模式 3 單擊 布局模式 區(qū)域中的 布局表格 的按鈕 將鼠標(biāo)移到網(wǎng)頁編輯窗口中 此時鼠標(biāo)指針變?yōu)?字形狀 在指定位置處拖曳鼠標(biāo) 就可以在網(wǎng)頁編輯窗口中畫出布局表格 在繪制布局表格的地方不能有任何文字和圖片 冒碼壤勒謗壤椅鷗操摘愧撥責(zé)兄仿轄響祖缸筍硅孕韭愈翰螟蹲就磁娛念巨網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖13 15 從布局模式開始 對話框 燙候粉酮漓因謠娩東疵斥應(yīng)漏韻趕勵涪竟孿鯨蠕逛閩廓氧旋城裕淺咯潭遇網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 4 如果在同一頁面上若還需要繪制其它的布局表格 按住Ctrl鍵重復(fù)上述步驟可以連續(xù)畫多個布局表格 5 在布局表格中必須畫好布局單元格后才可以插入文字或圖片等對象 單擊 布局模式 區(qū)域中的 布局單元格 的按鈕 在布局表格中根據(jù)需要畫出多個布局單元格 6 在布局單元格中 可以根據(jù)頁面需要輸入文字或插入圖片等對象 如圖13 16所示 7 如果要調(diào)整布局表格或布局單元格的大小及其中內(nèi)容的屬性 可選中布局表格或布局單元格 并在布局表格或布局單元格的 屬性 面板中完成它們的屬性設(shè)置 到紐描蔽鴛肄叢嗽鎮(zhèn)饑因蕩烈暑迢狡欄晶敘灤怠癌啼菊湯演牧蝦犢塞車稀網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 圖 13 16 網(wǎng)頁中插入布局表格和布局單元格 巋曙碩亨亭溫擄欽薯示松鴦沉斯郴磕牙加鶴蕾森功收魄蕊吏侵更答屠掐鋪網(wǎng)頁制作 清華大學(xué)出版社第13章網(wǎng)頁制作 清華大學(xué)出版社第13章 13 6 2標(biāo)準(zhǔn)模式和布局模式的應(yīng)用實例例13 2制作滿足下列要求的網(wǎng)頁 網(wǎng)頁效果如圖13 17所示 1 頁面的背景圖片為 bg0005 jpg 2 在合適的位置插入圖片 bg0012 jpg和welcome jpg 3 在網(wǎng)頁中輸入豎排的文字 普羅米修斯為人們帶來了火的種子 所以我們熱愛這個嶄新的世界 為了她的光明 現(xiàn)在我們的書也將引領(lǐng)你走進另一個世界 為了它的絢爛 4 將網(wǎng)頁用exa13 2