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