1、實(shí)驗(yàn)六基于CSS的網(wǎng)頁(yè)布局設(shè)計(jì)實(shí)驗(yàn)?zāi)康?、CSS的頁(yè)面分割技術(shù)、盒模式和定位技術(shù)2、熟悉層（AP Div）的基本操作并能利用層（AP Div）來(lái)定位頁(yè)面元素；3、掌握模板的創(chuàng)建、編輯和應(yīng)用。實(shí)驗(yàn)環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。實(shí)驗(yàn)重點(diǎn)及難點(diǎn)CSS盒模式和定位技術(shù)靈活利用層來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)元素的精確定位。利用模板生成多個(gè)風(fēng)格一致的網(wǎng)頁(yè)。實(shí)驗(yàn)內(nèi)容1、在你的站點(diǎn)中創(chuàng)建文件夾：sy6。在sy6文件夾下創(chuàng)建兩個(gè)文件：my.html、和zzy.html。 并將給定的多媒體文件放入相應(yīng)的文件夾中。2、結(jié)合所學(xué)的CSS布局知識(shí)和實(shí)驗(yàn)操作說(shuō)明中關(guān)

2、于AP Div（層）的知識(shí)，利用Dreamweaver 對(duì)my.htm進(jìn)行設(shè)計(jì)編輯，效果如下圖所示。要點(diǎn)：文件操作：從文件面板中打開(kāi)my.htm 文檔操作：分析設(shè)計(jì)要求1）確定頁(yè)面分割數(shù)量2）從插入面板中打開(kāi)“布局”類別，從布局中選擇繪制AP div，然后拖放到大致位置并調(diào) 整其大小。3）依次選中各個(gè)分割區(qū)域，利用屬性面板進(jìn)行編輯；或利用CSS面板對(duì)各分割區(qū)域進(jìn)行編 輯，尤其是盒模式屬性（CSS面板的方框和邊框）和定位屬性，從而實(shí)現(xiàn)對(duì)整體布局的精確 調(diào)整和控制。4）將元素分別插入到各個(gè)區(qū)域；選中要編輯的元素，利用屬性面板進(jìn)行編輯；或利用CSS 面板對(duì)各元素進(jìn)行編輯，尤其是盒模式屬性（CSS面板

3、的方框和邊框）和定位屬性，從而實(shí) 現(xiàn)對(duì)整體布局的精確調(diào)整和控制。3、編輯網(wǎng)頁(yè)文件“zzy.html”，效果如下圖所示。注：要充分利用盒模式屬性和定位屬性實(shí)現(xiàn)局部和整體布局。4、編輯網(wǎng)頁(yè)文件“zzy.html”，效果如下圖所示。拒 http : f 1 oc：lhos t/fqh.Fzzy. html| 密 | | 今 | | X | | 竅 Lim &arcih133文件史）編輯 查看成）收藏夾 工具成）幫助但）收藏夾1盒句百度句網(wǎng)頁(yè)快訊庫(kù)，卷無(wú)標(biāo)題攵走3命，國(guó)口柚，頁(yè)面堂）安全，工具，,勘，概述 歷史發(fā)展主要景觀拙政園名冠江南，勝甲東吳，是中國(guó)的四大名園之一，蘇州園林中的經(jīng)典作品。拙政園位于

4、蘇州 古城區(qū)東北婁門(mén)內(nèi)的東北街。園林占弛面積約4公頃。公元150釁由御史王獻(xiàn)臣始建。在以后的 四百余年間，滄桑變遷，屢易其主，幾度興廢，原來(lái)渾然一體的園林演變?yōu)橄嗷シ蛛x、自成格局 的三座園林*經(jīng)歷一百二十余年后，明崇初四年（公元1631年）己蕩為丘墟的東部園林。歸侍郎王心一所有。王善 畫(huà)山水，悉心經(jīng)營(yíng)，布置丘壑，并以陶潛“歸田園居”詩(shī)，命名此園。該園有放眼亭，夾耳崗，嘯 月臺(tái)，紫藤塢，杏花澗，竹香廊等諸勝?？煞譃樗膫€(gè)景區(qū)。中為涵青池，池北為主要建筑蘭雪 堂，周?chē)怨?、梅、竹屏之。池南及池左，有綴云峰、聯(lián)壁峰，峰下有洞，曰“小桃源）步游入 洞，如漁郎入桃源，桑麻鴻犬，別成世界.蘭雪堂之酉，梧桐參

5、差，茂林修竹，溪澗環(huán)繞，為流 觴曲水之意。北部系紫羅山、漾蕩池。東甫為荷花池，面積達(dá)四五畝，中有林香樓。家田種秫， 皆在望中.乾隆初年，拙政園東部園林以酉又分割成中、西兩個(gè)部分。酉部現(xiàn)有布局形成于光緒三年公元 18二年），由張履謙修葺，改名、補(bǔ)園”,遂有塔影亭、留聽(tīng)閣、浮翠閣、笠亭、與誰(shuí)同坐軒、宜兩 亭萼景觀。又新建三十六鴛鴦館和十八曼陀羅花館，裝修精致奢麗。中部，系拙政園最精彩的部 分.雖歷經(jīng)變遷，與早期拙政園有較大變化和差異，但園林以水為主，池中堆山，環(huán)池布置堂、 榭、亭、軒，基本上延續(xù)了明代的格局。從咸豐年間拙政園圖、同治年間拙政園圖和光 緒年間八旗奉直會(huì)館圖中可以看到山水之南的海棠春塢

6、、聽(tīng)雨軒、玲戲館、批杷園和小飛 虹、小滄浪、聽(tīng)松風(fēng)處、香洲、玉蘭堂等庭院景觀與現(xiàn)狀諸景毫無(wú)二致。因而拙政園中部風(fēng)貌的 形成，應(yīng)在晚渭咸豐至光緒年間.京成100% 要點(diǎn)：文件操作：從文件面板中打開(kāi)zzy.htm文檔操作：分析設(shè)計(jì)要求1）確定頁(yè)面分割數(shù)量2）從插入面板中打開(kāi)“布局”類別，從布局中選擇繪制APdiv，然后拖放到大致位置并調(diào) 整其大小。3）依次選中各個(gè)分割區(qū)域，利用屬性面板進(jìn)行編輯；或利用CSS面板對(duì)各分割區(qū)域進(jìn)行編 輯，尤其是盒模式屬性（CSS面板的方框和邊框）和定位屬性，從而實(shí)現(xiàn)對(duì)整體布局的精確 調(diào)整和控制。4）將元素分別插入到各個(gè)區(qū)域；選中要編輯的元素，利用屬性面板進(jìn)行編輯；或利

7、用CSS 面板對(duì)各元素進(jìn)行編輯，尤其是盒模式屬性（CSS面板的方框和邊框）和定位屬性，從而實(shí) 現(xiàn)對(duì)整體布局的精確調(diào)整和控制。5、a）根據(jù)網(wǎng)頁(yè)文件“拙政園.html”生成模板文件“my.dwt”。文件存放于sy6文件夾下。b）根據(jù)模板文件“my.dwt”創(chuàng)建網(wǎng)頁(yè)文檔“yhy.html”、“bssz.html”和“l(fā)y.html”，站 點(diǎn)中的my.html的目錄內(nèi)容“拙政園”、“頤和園”、“避暑山莊”以及“留園”分別 鏈接到網(wǎng)頁(yè)文件 “zzy.html”、“yhy.html”、“bssz.html”和“l(fā)y.html”。點(diǎn)：本例是基于現(xiàn)有文檔創(chuàng)建模板1 打開(kāi) zzy.htmlo2執(zhí)行下列操作之一：

8、-選擇“文件”“另存為模板”。-在“插入”面板的“常用”類別中，單擊“模板”按鈕，然后從彈出菜單中選擇“創(chuàng) 建模板”。3從“站點(diǎn)”彈出菜單中選擇一個(gè)用來(lái)保存模板的站點(diǎn)，然后在“另存為”框中為模板 輸入一個(gè)唯一的名稱。4單擊“保存”。Dreamweaver將模板文件以文件擴(kuò)展名.dwt保存在站點(diǎn)的本地根文 件夾中的Templates文件夾中。如果該Templates文件夾在站點(diǎn)中尚不存在，Dreamweaver 將在保存新建模板時(shí)自動(dòng)創(chuàng)建該文件夾。編輯模板并保存。1）選中準(zhǔn)備編輯的元素2）從插入萊單或插入面板中選擇“模板對(duì)象”，從彈出的萊單中選擇可編輯區(qū)域的 類型3）重復(fù)上述步驟，直至確定所有可

9、編輯區(qū)域4）保存從文件萊單中選擇“新建”，從彈出的對(duì)話框中選擇“模板中的頁(yè)”，選中模板后單 擊“創(chuàng)建”。編輯并保存創(chuàng)建的網(wǎng)頁(yè)文件為yhy.html注：不要將模板移動(dòng)到Templates文件夾之外或者將任何非模板文件放在Templates文件 夾中。此外，不要將Templates文件夾移動(dòng)到本地根文件夾之外。這樣做將在模板中的路 徑中引起錯(cuò)誤。實(shí)驗(yàn)操作說(shuō)明使用CSS 對(duì)頁(yè)面進(jìn)行布局關(guān)于Dreamweaver中的AP元素AP元素（絕對(duì)定位元素，層）是分配有絕對(duì)位置的HTML頁(yè)面元素，具體地說(shuō)，就 是div標(biāo)簽或其它任何標(biāo)簽。AP元素可以包含文本、圖像或其它任何可放置于HTML文檔正文中的內(nèi)容。AP

10、元素用于設(shè)計(jì)頁(yè)面的布局。AP元素通常是絕對(duì)定位的div標(biāo)簽。（它們是Dreamweaver默認(rèn)插入的AP元素類 型。）但是請(qǐng)記住，可以將任何HTML元素（例如，一個(gè)圖像）作為AP元素進(jìn)行分 類，方法是為其分配一個(gè)絕對(duì)位置。所有AP元素（不僅僅是絕對(duì)定位的div標(biāo) 簽）都將在“AP元素”面板中顯示。AP Div元素的HTML代碼Dreamweaver使用div標(biāo)簽創(chuàng)建AP元素。當(dāng)使用“繪制AP Div”工具繪制AP元 素時(shí)，Dreamweaver在文檔中插入一個(gè)div標(biāo)簽，并為該div指定一個(gè)ID值（默認(rèn)情況 下為第一個(gè)div指定apDivl，第二個(gè)div分配apDiv2，依此類推）?？梢允褂谩?/p>

11、AP元素”面板或?qū)傩詸z查器將AP Div重新命名為想要的任何名稱。以下是AP Div的示例HTML代碼：Sample AP Div Page可以更改頁(yè)面上的AP Div （或任何AP元素）的屬性，包括x坐標(biāo)和y坐標(biāo)、z軸 （也稱作堆疊順序）和可見(jiàn)性等所有CSS布局屬性。插入AP Div將插入點(diǎn)放置在“文檔”窗口中，然后選擇“插入” “布局對(duì)象”“AP Div”。 創(chuàng)建AP Div后，只需將插入點(diǎn)放置于該AP Div中，然后就可以像在頁(yè)面中添加內(nèi)容一樣， 將內(nèi)容添加到AP Div中。使用嵌套的AP Div嵌套的AP Div是其代碼包含在另一個(gè)AP Div的標(biāo)簽內(nèi)的AP Div。例如：apDiv4

12、 div實(shí)際上位于apDiv3 div的內(nèi)部。（可以在“AP元素”面板中更改AP Div堆 疊順序。）嵌套通常用于將AP Div組合在一起。嵌套AP Div隨其父AP Div 一起移動(dòng)，并且 可以設(shè)置為繼承其父級(jí)的可見(jiàn)性。插入嵌套AP Div1確保已取消選擇“防止重疊”。2在“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放置在一個(gè)現(xiàn)有AP Div的內(nèi)部，然 后選擇“插入”“布局對(duì)象” “AP Div”。使用AP元素面板將現(xiàn)有AP元素嵌套在另一個(gè)AP元素中1選擇“窗口”“AP元素”打開(kāi)“AP元素”面板。2在“AP元素”面板中選擇一個(gè)AP元素，然后按住Ctrl拖動(dòng)（Windows）將此AP元 素拖動(dòng)到“A

13、P元素”面板中的目標(biāo)AP元素。3當(dāng)目標(biāo)AP元素的名稱高亮顯示時(shí)，松開(kāi)鼠標(biāo)按鈕。注：使用“首選參數(shù)”對(duì)話框中的“AP元素”類別可指定新建AP元素的默認(rèn)設(shè)置。1 選擇“編輯”“首選參數(shù)”（Windows）或“Dreamweaver”“ 首選參數(shù)（Macintosh）。使用 DREAMWEAVER CS4 142使用CSS創(chuàng)建頁(yè)面2從左側(cè)的“分類”列表選擇AP元素并指定以下任意首選參數(shù)，然后單擊“確定”。 可見(jiàn)性確定AP元素在默認(rèn)情況下是否可見(jiàn)。其選項(xiàng)為“default”、“繼承”、“可見(jiàn)”和 “隱藏”。寬和高指定使用“插入” “布局對(duì)象” “AP Div倉(cāng)U建的AP元素的默認(rèn)寬度和高度 （以像素為

14、單位）。背景顏色指定一種默認(rèn)背景顏色。請(qǐng)從顏色選擇器中選擇顏色。背景圖像指定默認(rèn)背景圖像。單擊“瀏覽”可在計(jì)算機(jī)上查找圖像文件。嵌套：在AP Div內(nèi)創(chuàng)建時(shí)嵌套指定從現(xiàn)有AP Div邊界內(nèi)的某點(diǎn)開(kāi)始繪制的AP Div是 否應(yīng)該是嵌套的AP Div。查看或設(shè)置單個(gè)AP元素的屬性當(dāng)選擇一個(gè)AP元素時(shí)，屬性檢查器將顯示AP元素的屬性。AP元素面板概述“AP元素”面板（“窗口”“AP元素”）用于管理文檔中的AP元素。使用“AP元 素”面板可防止重疊，更改AP元素的可見(jiàn)性，嵌套或堆疊AP元素，以及選擇一個(gè)或多 個(gè)AP元素。注：Dreamweaver中的 AP元素是分配有絕對(duì)位置的HTML頁(yè)面元素，“AP

15、元素” 面 板不會(huì)顯示相對(duì)定位的元素。選擇多個(gè)AP元素.請(qǐng)執(zhí)行下列操作之一：. 在“AP元素”面板（“窗口 ”“AP元素”）中，按住Shift單擊兩個(gè)或更多個(gè)AP元 素名稱。.在“文檔”窗口中，按住Shift鍵并在兩個(gè)或更多個(gè)AP元素的邊框內(nèi)（或邊框上）單 擊。更改AP元素的堆疊順序使用屬性檢查器或“AP元素”面板可更改AP元素的堆疊順序。“AP元素”面板 列表頂部的AP元素位于堆疊順序的頂部，并出現(xiàn)在其它AP元素之前。在HTML代碼中，AP元素的堆疊順序或z軸決定了 AP元素在瀏覽器中的繪制順 序。AP元素的z軸值越高，該AP元素在堆疊順序中的位置就越高。可以使用“AP元 素”面板或?qū)傩詸z查

16、器來(lái)更改每個(gè)AP元素的z軸。使用AP元素面板更改AP元素的堆疊順序1選擇“窗口”“AP元素”打開(kāi)“AP元素”面板。2將AP元素向上或向下拖至所需的堆疊順序。當(dāng)移動(dòng)AP元素時(shí)會(huì)出現(xiàn)一條線，它指示AP元素將出現(xiàn)的位置。當(dāng)放置線出現(xiàn)在堆疊順 序中的所需位置時(shí)，松開(kāi)鼠標(biāo)按鈕。使用屬性檢查器更改AP元素的堆疊順序1選擇“窗口”“AP元素”打開(kāi)“AP元素”面板以查看當(dāng)前的堆疊順序。2在“AP元素”面板或“文檔”窗口中選擇AP元素。3在屬性檢查器（“窗口” “屬性”）中，在“Z軸”文本框中鍵入一個(gè)數(shù)字。.鍵入一個(gè)較大的數(shù)字可將AP元素在堆疊順序中上移。.鍵入一個(gè)較小的數(shù)字可將AP元素在堆疊順序中下移。顯示和

17、隱藏AP元素當(dāng)處理文檔時(shí)，可以使用“AP元素”面板手動(dòng)顯示和隱藏AP元素，以查看頁(yè)面在不同 條件下的顯示方式。注：當(dāng)前選定AP元素始終會(huì)變?yōu)榭梢?jiàn)，并在選定時(shí)將出現(xiàn)在其它AP元素的前面。更改AP元素的可見(jiàn)性1選擇“窗口”“AP元素”打開(kāi)“AP元素”面板。2在AP元素的眼形圖標(biāo)列內(nèi)單擊可以更改其可見(jiàn)性。.眼睛睜開(kāi)表示AP元素是可見(jiàn)的。.眼睛閉合表示AP元素是不可見(jiàn)的。.如果沒(méi)有眼形圖標(biāo)，AP元素通常會(huì)繼承其父級(jí)的可見(jiàn)性。（如果AP元素沒(méi)有 嵌套，父級(jí)就是文檔正文，而文檔正文始終是可見(jiàn)的。）另外，如果未指定可見(jiàn)性， 則不會(huì)顯示眼形圖標(biāo)（在“屬性”檢查器中表示為“default”可見(jiàn)性）。同時(shí)更改所有

18、AP元素的可見(jiàn)性. 在“AP元素”面板（“窗口” “AP元素”）中，單擊列頂部的標(biāo)題眼形圖標(biāo)。注：此過(guò)程可以將所有AP元素設(shè)置為“可見(jiàn)”或“隱藏”，但不能設(shè)置為“繼 承”。調(diào)整AP元素大小1在“設(shè)計(jì)”視圖中，選擇一個(gè)AP元素。2執(zhí)行以下操作之一以調(diào)整AP元素的大?。?若要通過(guò)拖動(dòng)來(lái)調(diào)整大小，請(qǐng)拖動(dòng)AP元素的任一調(diào)整大小手柄。.若要一次調(diào)整一個(gè)像素的大小，請(qǐng)?jiān)诎醇^鍵時(shí)按住Ctrl鍵（Windows）。箭頭鍵可 移動(dòng)AP元素的右邊框和下邊框；對(duì)于此方法，不能使用上邊框和左邊框來(lái)調(diào)整大小。.在屬性檢查器（“窗口” “屬性”）中，鍵入寬度（W）和高度（H）的值。關(guān)于Dreamweaver模板了解 D

19、reamweaver 模板模板是一種特殊類型的文檔，用于設(shè)計(jì)“固定的”頁(yè)面布局；用模板創(chuàng)建的文檔會(huì)繼承 模板的頁(yè)面布局。設(shè)計(jì)模板時(shí)，可以指定在基于模板的文檔中哪些內(nèi)容是用戶“可編輯的”。使用模板，模板創(chuàng)作者控制哪些頁(yè)面元素可以由模板用戶進(jìn)行編輯。模板創(chuàng)作者可以在文檔 中包括數(shù)種類型的模板區(qū)域。注：使用模板可以控制大的設(shè)計(jì)區(qū)域，以及重復(fù)使用完整的布局。如果要重復(fù)使用個(gè)別設(shè) 計(jì)元素，如站點(diǎn)的版權(quán)信息或徽標(biāo)，可以創(chuàng)建庫(kù)項(xiàng)目。使用模板可以一次更新多個(gè)頁(yè)面。應(yīng)用模板創(chuàng)建的文檔與該模板保持連接狀態(tài)，可以修 改模板并立即更新基于該模板的所有文檔中的設(shè)計(jì)。模板區(qū)域的類型模板為基于模板的文檔指定了鎖定（不可編輯

20、）區(qū)域和其它可編輯區(qū)域。在基于模板的頁(yè)面中，模板用戶只能編輯可編輯區(qū)域中的內(nèi)容。可以輕松標(biāo)識(shí)和選擇可 編輯區(qū)域來(lái)編輯內(nèi)容。模板用戶不能編輯鎖定區(qū)域中的內(nèi)容.注:默認(rèn)情況下Dreamweaver模板的頁(yè)面中的各部分是固定（即不可編輯）的。將文檔另存為模板以后，文檔的大部分區(qū)域就被鎖定。模板創(chuàng)作者在模板中插入可編輯 區(qū)域或可編輯參數(shù)，從而指定在基于模板的文檔中哪些區(qū)域可以編輯。創(chuàng)建模板時(shí)，可編輯區(qū)域和鎖定區(qū)域都可以更改。而在基于模板的文檔中，模板用戶只 能在可編輯區(qū)域中進(jìn)行更改，不能修改鎖定區(qū)域。共有四種類型的模板區(qū)域：可編輯區(qū)域 基于模板的文檔中未鎖定的區(qū)域，也就是模板用戶可以編輯的部分。模板

21、創(chuàng)作者可以將模板的任何區(qū)域指定為可編輯的。要使模板生效，其中至少應(yīng)該包含一個(gè)可編 輯區(qū)域；否則基于該模板的頁(yè)面是不可編輯的。重復(fù)區(qū)域文檔布局的一部分，設(shè)置該部分可以使模板用戶必要時(shí)在基于模板的文檔中 添加或刪除重復(fù)區(qū)域的副本。例如，可以設(shè)置重復(fù)一個(gè)表格行。重復(fù)部分是可編輯的，這樣， 模板用戶可以編輯重復(fù)元素中的內(nèi)容，而設(shè)計(jì)本身則由模板創(chuàng)作者控制?？梢栽谀０逯胁迦氲闹貜?fù)區(qū)域有兩種：重復(fù)區(qū)域和重復(fù)表格。可選區(qū)域 模板中放置內(nèi)容（如文本或圖像）的部分，該部分在文檔中可以出現(xiàn)也可以 不出現(xiàn)?？删庉嫎?biāo)簽屬性用于對(duì)模板中的標(biāo)簽屬性解除鎖定，這樣便可以在基于模板的頁(yè)面中 編輯相應(yīng)的屬性。例如，可以“鎖定”出

22、現(xiàn)在文檔中的圖像，而允許模板用戶將對(duì)齊設(shè)置為 左對(duì)齊、右對(duì)齊或居中對(duì)齊。模板中的保存模板文件保存在站點(diǎn)的Templates文件夾中，Templates文件夾在第一次創(chuàng)建模板時(shí)創(chuàng) 建。模板文件的擴(kuò)展名為.dwt識(shí)別模板和基于模板的文檔在設(shè)計(jì)視圖中識(shí)別模板在“設(shè)計(jì)”視圖中，可編輯區(qū)域出現(xiàn)在“文檔”窗口的預(yù)設(shè)高亮顏色的矩形外框中。每 個(gè)區(qū)域的左上角都會(huì)出現(xiàn)一個(gè)小的標(biāo)簽，其中顯示該區(qū)域的名稱。在代碼視圖中識(shí)別模板在“代碼”視圖中，使用以下注釋標(biāo)記HTML中的可編輯內(nèi)容區(qū)域： 和 可以使用代碼顏色首選參數(shù)設(shè)置自己的配色方案，以便在“代碼”視圖中查看文檔時(shí)可 以輕松地區(qū)分模板區(qū)域。如：Enter name

23、Enter AddressEnter Telephone注：在“代碼”視圖中編輯模板代碼時(shí)請(qǐng)小心，避免更改Dreamweaver所依賴的任何 與模板相關(guān)的注釋標(biāo)簽。在設(shè)計(jì)視圖中識(shí)別基于模板的文檔在基于模板的文檔中，“文檔”窗口的“設(shè)計(jì)”視圖中的可編輯區(qū)域出周?chē)鷷?huì)顯示預(yù) 設(shè)高亮顏色的矩形外框。每個(gè)區(qū)域的左上角都會(huì)出現(xiàn)一個(gè)小的標(biāo)簽，其中顯示該區(qū)域的名稱。除可編輯區(qū)域的外框之外，整個(gè)頁(yè)面周?chē)矔?huì)顯示其它顏色的外框，右上角的選項(xiàng)卡給 出該文檔的基礎(chǔ)模板的名稱。不能更改可編輯區(qū)域之外的內(nèi)容。在代碼視圖中識(shí)別基于模板的文檔在“代碼”視圖中，派生自模板的文檔的可編輯區(qū)域用與不可編輯區(qū)域中的代碼不同的 顏色顯

24、示。可以更改可編輯區(qū)域中的代碼或可編輯參數(shù)；但是不能在鎖定區(qū)域中鍵入內(nèi)容。在HTML中使用以下Dreamweaver注釋標(biāo)記可編輯內(nèi)容：!InstanceBeginEditable name=” 可編輯區(qū)域的名稱”和 這些注釋之間的任何內(nèi)容都可以在基于模板的文檔中編輯?？删庉媴^(qū)域的HTML源代 碼可能類似于如下形式：NameAddressTelephone NumberEnter nameEnter AddressEnter Telephone不可編輯文本的默認(rèn)顏色是灰色；您可以在“首選參數(shù)”對(duì)話框中為可編輯區(qū)域和不可編輯區(qū)域選擇不同的顏色。創(chuàng) 建 Dreamweaver模板基于現(xiàn)有文檔創(chuàng)建模

25、板1打開(kāi)要另存為模板的文檔。2請(qǐng)執(zhí)行下列操作之一：-選擇“文件”“另存為模板”。-在“插入”面板的“常用”類別中，單擊“模板”按鈕，然后從彈出菜單中選擇“創(chuàng) 建模板”。注：除非您以前選擇了“不再顯示此對(duì)話框”，否則您會(huì)收到一個(gè)警告，指出您正在保 存的文檔中沒(méi)有可編輯區(qū)域。單擊“確定”將文檔另存為模板，或單擊“取消”退出此對(duì)話框而不創(chuàng)建模板。3從“站點(diǎn)”彈出菜單中選擇一個(gè)用來(lái)保存模板的站點(diǎn)，然后在“另存為”框中為模板 輸入一個(gè)唯一的名稱。4單擊“保存”。Dreamweaver將模板文件以文件擴(kuò)展名.dwt保存在站點(diǎn)的本地根文 件夾中的Templates文件夾中。如果該Templates文件夾在站

26、點(diǎn)中尚不存在，Dreamweaver 將在保存新建模板時(shí)自動(dòng)創(chuàng)建該文件夾。注：不要將模板移動(dòng)到Templates文件夾之外或者將任何非模板文件放在Templates 文件夾中。此外，不要將Templates文件夾移動(dòng)到本地根文件夾之外。這樣做將在模板中 的路徑中引起錯(cuò)誤。使用資源面板來(lái)創(chuàng)建新模板1在“資源”面板(“窗口 ”“資源”)中，選擇面板左側(cè)的“模板”類別。2單擊“資源”面板底部的“新建模板”按鈕。一個(gè)新的、無(wú)標(biāo)題模板將添加到“資源”面板的模板列表中。3在模板仍處于選定狀態(tài)時(shí)，輸入模板的名稱，然后按Enter (Windows)0 Dreamweaver 在“資源”面板和Templates文件夾中創(chuàng)建一個(gè)空模板。使用“插入”萊單項(xiàng)創(chuàng)建面板從“插入”萊單項(xiàng)中的“模板對(duì)象”選擇“創(chuàng)建模板”創(chuàng)建可編輯區(qū)域插入可編輯區(qū)域1在“文檔”窗口中，執(zhí)行下列操作之一選擇區(qū)域：-選擇想要設(shè)置為可編輯區(qū)域的文本或內(nèi)容。-將插入點(diǎn)放在想要插入可編輯區(qū)域的地方。2 執(zhí)行下列操作之一插入可編輯區(qū)域：-選擇“插入”“模板對(duì)象”“可編輯區(qū)域”。-右鍵單擊(Windows)，然后選擇“模板”“新建可編輯區(qū)域”。-在“插入”面板的“常用”類別中，單擊“模板”按鈕，然后從彈出菜單中選擇“可 編輯區(qū)域”。3在“名稱”框中為該區(qū)域輸入唯一的名稱。(不能對(duì)特定模板中的多個(gè)可編