【正文】 層中可以放置任何網(wǎng)頁對象 ，包括文本 、 圖像 、 表單 、 對象插件及其他層等 。 4. 框架 框架的作用是把瀏覽器窗口劃分為若干個區(qū)域 ，各區(qū)域可以分別顯示不同的網(wǎng)頁內(nèi)容 。 框架由兩個主要部分組成：框架集和單個框架 。 框架可以起到折分瀏覽器窗口的作用 ， 它本身并不是網(wǎng)頁 ， 在使用框架建立并編輯網(wǎng)頁時 ， 一定要分別保存與名框架相鏈接的網(wǎng)頁 。 框架與框架中顯示的網(wǎng)頁是鏈接關(guān)系 ， 改變框架的結(jié)構(gòu)并不會改變與框架鏈接的網(wǎng)頁的內(nèi)容 。一般建立完成框架后 ， 會分別設(shè)計與框架鏈接的網(wǎng)頁 ， 然后檢測網(wǎng)頁內(nèi)容是否可以在框架中正確地顯示 。 5 實訓(xùn) 。 （ 1） 建立表格 ① 建立一個新的空白頁面 ，在文件中選定插入點。 ② 單擊 【 插入 】 → 【 表格 】選項，或單擊 “ 常用 ”工具欄上的 “ 插入表格 ”按鈕，彈出 “ 表格 ” 對話框。如圖所示。 ③ 在對話框中設(shè)置 5行 8列表格 ，寬度為 600像素 ， 邊框粗細為 1，單元格邊距為 1， 單元格間距為 0。 如圖所示 。 ④ 如果需要查看表格的屬性 ，可以選中表格 ， 彈出表格屬性面板 。 如圖所示 。 ⑤ 如果需要查看單元格的屬性，可以選中單元格，彈出單元格屬性面板。如圖所示。 ⑥ 單擊 “ 確定 ” 按鈕，保存，按 F12預(yù)覽。效果如圖所示。 （ 2） 調(diào)整表格行數(shù)和列數(shù) ① 打開文件 。 ② 將鼠標(biāo)指向目標(biāo)單元格內(nèi)，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇目標(biāo)選項，如圖所示。 ③ 插入一行，單擊“表格”中的“插入行”選項，在插入點上方插入一行單元格。 (要刪除一行單元格，單擊“表格”中的“刪除行”選項。 ) ④ 插入一列，單擊“表格”中的“插入列”選項，在插入點左側(cè)插入一列單元格。 (要刪除一列單元格，單擊“表格”中的“刪除列”選項。 ) ⑤ 如果要插入多行多列，單擊“表格”中的“插入行 /列”選項，彈出“插入行 /列”對話框，如圖所示，輸入行數(shù)或列數(shù)，選擇插入行或列的位置，單擊“確定”按鈕。 (3) 調(diào)整表格寬度和高度的設(shè)置 ① 打開文件 。 ② 選取表格，在彈出的表格屬性面板中的“行”或“寬”中選擇寬度和高度的單位，輸入數(shù)值，寬 600像素，高 300像素。如圖所示。 ③ 保存。按 F12預(yù)覽。如圖所示。 （ 4） 設(shè)置帶邊框的表格 如果想讓表格的邊框具有立體感和個性，可以把表格邊框加粗，設(shè)置喜愛的顏色。 ① 打開文件 。 ② 選取表格，在屬性面板中設(shè)置填充、間距為 0，邊框為 4，單擊“邊框顏色”按鈕，在彈出的顏色面板中選擇顏色“ 990000”，如圖所示。 ③ 將鼠標(biāo)指向邊框點單擊鼠標(biāo)右鍵，如圖所示，在彈出的菜單中單擊“編輯標(biāo)簽”，彈出“標(biāo)簽編輯器”。 ④ 在“標(biāo)簽編輯器”中單擊“瀏覽器特定的”選項，在該項中設(shè)置邊框的顏色990000、亮色“ 000099”和暗色“ 333333”，設(shè)置完成，單擊“確定”按鈕。如圖所示。 ⑤ 保存。按 F12預(yù)覽。如圖所示。 （ 5）合并與拆分單元格 ① 打開文件 。 ② 單擊一個目標(biāo)單元格，按住“ Shift”鍵點擊下一個目標(biāo)單元格，選取4個相鄰的單元格。如圖所示。 ③ 單擊屬性面板中的“合并單元格按鈕”，如圖所示，合并單元格。 ④ 保存。按 F12預(yù)覽。如圖所示。 ⑤ 在需要合并的單元格上單擊鼠標(biāo)。單擊屬性面板的“拆分單元格”按鈕，彈出“拆分單元格”對話框。如圖所示。 ⑥ 在對話框中設(shè)置列為4。單擊“確定”按鈕。 ⑦ 保存。按 F12預(yù)覽。如圖所示。 6 實訓(xùn) 。 （ 1）繪制布局表格和單元格 ① 建立一個新的頁面 。 ② 在“布局”工具欄上單擊“布局”按鈕，如圖所示，進入布局模式。 ③ 單擊“布局”工具欄上的“繪制布局表格”按鈕，繪制布局表格。單擊“布局”工具欄上的“繪制布局單元格”按鈕，繪制布局單元格。 ④ 拖動鼠標(biāo)在頁面上繪制出所需要的表格，即可完成布局模式的創(chuàng)建。如圖所示，布局表格為淺綠色，上面帶有布局表格的標(biāo)簽和列標(biāo)題欄。在列標(biāo)題欄上顯示著每列的寬度，單擊列標(biāo)題欄可以打開列標(biāo)題菜單。 ⑤ 繪制完布局表格和單元格后，如圖所示，系統(tǒng)會自動生成表格，如圖所示。 （ 2）移動布局表格和單元格 ① 打開 ，切換到布局模式下。 ② 選中需要移動的嵌入的布局表格，然后利用鼠標(biāo)拖動到適當(dāng)?shù)奈恢?，或者利用鍵盤上的方向鍵移動 (每次移動 1個像素的距離，如果按住“ Shift鍵 +方向鍵”，則每次移動 10像素 )。如下圖所示。 ③ 選中需要移動的布局單元格，然后利用鼠標(biāo)拖動到適當(dāng)?shù)奈恢?。如圖所示。 （ 3）重設(shè)布局表格和單元格的大小 ① 打開 ，切換到布局模式下。 ② 選中要調(diào)整的布局表格，出現(xiàn)控制點，用鼠標(biāo)拖動控制點，調(diào)整布局表格的大小。如圖所示。 ③ 選中要調(diào)整的布局單元格，出現(xiàn)控制點，用鼠標(biāo)拖動控制點，調(diào)整布局表格的大小。如圖所示。 （ 4）清除單元格高度 當(dāng)在單元格中插入內(nèi)容后，發(fā)現(xiàn)單元格大小與插入內(nèi)容不匹配，需要清除單元格高度的方法來使單元格與內(nèi)容匹配。操作如下： ① 打開 ，切換到布局模式下，在某單元格內(nèi)輸入文本。如圖所示。 ② 單擊該單元格所在列的標(biāo)題欄上的按鈕打開列標(biāo)題菜單。 ③ 在菜單中選擇“清除所有高度”選項，此時單元格的高度設(shè)置就被取消，單元格高度將隨單元格的內(nèi)容而變化。如圖所示。 7 實訓(xùn) 層 (Layer)是一種 HTML頁面元素，您可以將它定位在頁面上的任意位置。層可以包含文本、圖像或其它 HTML文檔。層的出現(xiàn)使網(wǎng)頁從二維平面拓展到三維。可以使頁面上元素進行重疊和復(fù)雜的布局。 （ 1）層的建立 ① 新建一個頁面，在頁面中選擇插入點。 ② 單擊 【 插入 】 →【 布局對象 】 → 【 層 】選項，在頁面中顯示一個層。如圖所示。 ③ 選中新建的層，通過周圍的控制點拖動控制層的大小，如圖所示，拖動左上角的“選擇柄”或者層邊框可以移動層。如圖所示。 ④ 再在頁面中插入一個層。單擊 【 窗口 】 → 【 層 】選項。彈出“層”對話框。如圖所示。 一個頁面中可以畫出很多的層，這些層都會列在層面板中。層有“隱藏”和“顯示”的屬性。改變層數(shù)就可以改變層的重疊順序。層面板上面還有防止層重疊。層還有一種父子關(guān)系也就是隸屬關(guān)系。在層面板中是這樣表示的。如圖所示。 （ 2）層和表格之間轉(zhuǎn)換 由于層在網(wǎng)頁布局上非常方便，所以，有些用戶可能不喜歡使用表格或“布局”模式來 創(chuàng)建自己的頁面，而是喜歡通過層來進行設(shè)計。Dreamweaver MX 2022可以使用層來創(chuàng)建自己的布局，然后將它們轉(zhuǎn)換為表格。 A 層轉(zhuǎn)換為表格 ① 新建頁面，插入 3個層。如圖所示。 ② 在轉(zhuǎn)換為表格之前，請確保層沒有重疊。 ③ 單擊 【 修改 】 →【 轉(zhuǎn)換 】 → 【 層到表格 】 選項。彈出“轉(zhuǎn)換層為表格”對話框。如圖所示。 ④ 選擇所需的選項。單擊“確定”。轉(zhuǎn)換后如圖所示。 B 表格轉(zhuǎn)換為層 ① 若要將表轉(zhuǎn)換為層，單擊 【 修改 】 → 【 轉(zhuǎn)換 】 →【 表格到層 】 選項。彈出“轉(zhuǎn)換表格為層”對話框。如圖所示。 ② 選擇所需的選項。單擊“確定”。 8 實訓(xùn) 框架是一種先進的 Web技術(shù)，它比模板更靈活，可以方便創(chuàng)建使用相同布局的多個頁面。本文介紹創(chuàng)建基于框架的網(wǎng)頁步驟和對框架的修改。 在制作該框架頁面之前先做好 3個頁面。 （ 1）創(chuàng)建框架 ① 單擊 【 文件 】 → 【 新建 】 ，在“新建文檔”對話框中，選擇“框架集”類別，從“框架集”列表選擇合適的框架集。如圖所示。 ② 單擊 【 窗口 】 → 【 框架 】 選項 ,打開框架面板。在框架面板中單擊框架，選擇一個框架。 (如果要選擇一個框架集，在框架面板中單擊環(huán)繞框架集的邊框 )。如圖所示。 ③ 在框架面板中單擊其中的一個框架頁，然后打開屬性面板，單擊“瀏覽文件”按鈕。給它選擇一個文件。如圖 。 ④ 選擇在框架中打開的頁面。之后重復(fù)上面的步驟為第 3個框架設(shè)置相應(yīng)的框架頁。 ⑤ 單擊 【 文件 】 → 【 保存全部 】 選項。 因為前幾步已經(jīng)選定了框架文件，這里只出現(xiàn)保存框架集文件，為框架命名，保存。按F12預(yù)覽。 （ 2）修改框架 A 拆分框架 ① 在框架頁面中，將插入點放在邊框上，出現(xiàn)雙向箭頭。 ② 向上拖動邊框，產(chǎn)生一個新的框架文件。 ③ 在屬性面板上，為新框架命名，并且點擊“瀏覽文件”，選擇一個文件作為框架的“源文件”。 ④ 單擊 【 文件 】 → 【 保存全部 】 選項。要使用不在“設(shè)計”視圖邊緣的框架邊框拆分一個框架，在按住 “ Alt ”鍵的同時拖動框架邊框。 B查看和設(shè)置框架集屬性 單擊 【 窗口 】 → 【 框架 】 選項，打開框架面板。 在框架面板中單擊環(huán)繞框架集的邊框，選中框架集。在屬性面板上，選中框架區(qū)，然后修改框架集屬性。使用類似的方法修改框架文件的屬性。如圖所示。 C 設(shè)置鏈接的目標(biāo)框架 在框架頁面中選擇一個鏈接，在“目標(biāo)”彈出式菜單中，選擇鏈接的文檔應(yīng)在其中顯示的框架或窗口。如圖所示。 “ _blank”：在新的瀏覽器窗口中打開鏈接的文檔，同時保持當(dāng)前窗口不變。 “ _parent ”：在顯示鏈接的框架的父框架集中打開鏈接的文檔，同時替換整個框架集。 “ _self ”：在當(dāng)前框架中打開鏈接，同時替換該框架中的內(nèi)容。 “_top”：在當(dāng)前瀏覽器窗口中打開鏈接的文檔，同時替換所有框架。 如果鏈接需要在框架頁之外打開，使用 target=_top 或 target=_blank。 （ 3）插入 iframe iframe也稱作嵌入式框架，嵌入式框架和框架網(wǎng)頁類似，它可以把一個網(wǎng)頁的框架和內(nèi)容嵌入在現(xiàn)有的網(wǎng)頁中。 ① 單擊“常用”工具欄的“標(biāo)簽選擇器”。如圖所示。 ② 在“標(biāo)簽選擇器”對話框中，選擇 iframe標(biāo)簽，點擊“插入”按鈕。如圖所示。 ③ 在“標(biāo)簽編輯器 Iframe”對話框中，如圖所示，根據(jù)面板提示操作。最基本的兩項是“源”和“名稱”。 ④ 設(shè)置鏈接在某個 iframe中打開。選中鏈接，在屬性面板中的“目標(biāo)”項，手工輸入目標(biāo) iframe的名稱。如圖所示。 ⑤ iframe透明。為了使 iframe內(nèi)容和網(wǎng)頁背景相同，需要使 iframe透明。在“標(biāo)簽編輯器 Iframe”對話框中，選擇“瀏覽器特定的”項目卡，選中“允許透明”。如圖所示。 ⑥ 框架包含應(yīng)用程序。在“標(biāo)簽編輯器 Iframe”對話框中，選擇“瀏覽器特定的”項目卡，選中“框架包含應(yīng)用程序”。如圖所示。 ⑦ Iframe的替代內(nèi)容。在某些不支持 iframe的瀏覽器中， iframe將不能顯示。這時需要輸入替代內(nèi)容。在“標(biāo)簽編輯器 Iframe”對話框中，選擇“替代內(nèi)容”選項，在替代內(nèi)容中輸入代碼或者文字。如圖所示。 9 思考與練習(xí) （ 1） 什么是布局視圖？什么是層？他們的作用是什么？ （ 2）新建一個頁面，創(chuàng)建 5行 6列的表格，并進行單元格合并、拆分操作。 （ 3）在布局視圖中繪制首頁的布局。 （ 4）新建一個層，添加一定內(nèi)容，然后把層轉(zhuǎn)換為表格。 網(wǎng) 頁 編 輯 ——使用 CSS樣式 CSS是一種制作網(wǎng)頁的新技術(shù)，已經(jīng)成為網(wǎng)頁設(shè)計中必不可少的工具之一。目前， Inter 、 Netscape 的瀏覽器都能正確的顯示帶有 CSS樣式的網(wǎng)頁。使用 CSS能夠簡化網(wǎng)頁的格式代碼，加快網(wǎng)頁下載顯示的速度，也減少了需要上傳的代碼數(shù)量，大大的減少了無謂的重復(fù)勞動。 1. CSS樣式定義概念 CSS是 Cascading Style Sheets(層疊樣式表單 )的簡稱。它允許用戶在 HTML文檔中加入樣式 (如字體類型、顏色、大小等等 )。對于設(shè)計者來說它是一個非常靈活的工具，不必再把繁雜的樣式定義編寫在文檔結(jié)構(gòu)中，可以將所有有關(guān)于文檔的樣式指定內(nèi)容全部脫離出來，在行內(nèi)定義、在標(biāo)題中定義，甚至作為外部樣式文件供 HTML調(diào)用。Dreamweaver是最早