《網頁設計與制作基礎》實驗指導書-實驗6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

21、創(chuàng)作者可以將模板的任何區(qū)域指定為可編輯的。要使模板生效，其中至少應該包含一個可編 輯區(qū)域；否則基于該模板的頁面是不可編輯的。重復區(qū)域文檔布局的一部分，設置該部分可以使模板用戶必要時在基于模板的文檔中 添加或刪除重復區(qū)域的副本。例如，可以設置重復一個表格行。重復部分是可編輯的，這樣， 模板用戶可以編輯重復元素中的內容，而設計本身則由模板創(chuàng)作者控制。可以在模板中插入的重復區(qū)域有兩種：重復區(qū)域和重復表格?？蛇x區(qū)域 模板中放置內容（如文本或圖像）的部分，該部分在文檔中可以出現也可以 不出現?？删庉嫎撕瀸傩杂糜趯δ０逯械臉撕瀸傩越獬i定，這樣便可以在基于模板的頁面中 編輯相應的屬性。例如，可以“鎖定”出

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

23、Enter AddressEnter Telephone注：在“代碼”視圖中編輯模板代碼時請小心，避免更改Dreamweaver所依賴的任何 與模板相關的注釋標簽。在設計視圖中識別基于模板的文檔在基于模板的文檔中，“文檔”窗口的“設計”視圖中的可編輯區(qū)域出周圍會顯示預 設高亮顏色的矩形外框。每個區(qū)域的左上角都會出現一個小的標簽，其中顯示該區(qū)域的名稱。除可編輯區(qū)域的外框之外，整個頁面周圍也會顯示其它顏色的外框，右上角的選項卡給 出該文檔的基礎模板的名稱。不能更改可編輯區(qū)域之外的內容。在代碼視圖中識別基于模板的文檔在“代碼”視圖中，派生自模板的文檔的可編輯區(qū)域用與不可編輯區(qū)域中的代碼不同的 顏色顯

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

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

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