Dreamweaver網(wǎng)頁制作

第五單元制作“家鄉(xiāng)山水”網(wǎng)頁主編：王樹平副主編：杜大志劉彥惠范永泰第五單元制作“家鄉(xiāng)山水”網(wǎng)頁任務(wù)一添加熱點和錨記鏈接任務(wù)二添加和使用層任務(wù)三制作頁面動態(tài)效果任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

本單元將通過“添加熱點與錨記鏈接”、“添加和使用層”以及“制作頁面動態(tài)效果”幾個任務(wù)來完成“家鄉(xiāng)山水”頁面的制作?！凹亦l(xiāng)山水”頁面的效果如下圖所示：

整個頁面分為左側(cè)、右上和右下三部分，左側(cè)放置景區(qū)地圖圖像，右上部放置景區(qū)名稱，右下部顯示景區(qū)圖像及景區(qū)簡介。當(dāng)鼠標(biāo)指向景區(qū)地圖的一個景區(qū)時，會在光標(biāo)下方顯示對應(yīng)景區(qū)的名稱，同時在頁面的右下部顯示該景區(qū)的風(fēng)景圖像及簡單介紹。當(dāng)鼠標(biāo)單擊一個景區(qū)時，會另外打開一個“景區(qū)介紹”頁面，如下圖所示。第五單元制作“家鄉(xiāng)山水”網(wǎng)頁景區(qū)介紹

第五單元制作“家鄉(xiāng)山水”網(wǎng)頁任務(wù)一添加熱點與錨記鏈接

任務(wù)描述：為景區(qū)地圖中的各個景區(qū)與“景區(qū)介紹”頁面中相關(guān)內(nèi)容建立鏈接關(guān)系。

任務(wù)分析：建立好本單元的目錄結(jié)構(gòu)，在“景區(qū)介紹”頁面中為每個景區(qū)的介紹內(nèi)容添加錨記，之后在景區(qū)地圖上按景區(qū)繪制熱點，然后為每個熱點添加錨記鏈接，鏈接到“景區(qū)介紹”頁面的對應(yīng)位置。第五單元制作“家鄉(xiāng)山水”網(wǎng)頁自己動手1．建立本欄目目錄結(jié)構(gòu)所在路徑文件/文件夾的名字說明D:\mysite\traveltravel.html“家鄉(xiāng)山水”頁面viewpoint.html“景區(qū)介紹”頁面<tlimages>頁面所需圖像任務(wù)一添加熱點和錨記鏈接3．為“家鄉(xiāng)山水”頁面的景區(qū)地圖添加熱點使用多邊形熱點工具為圖中“金華山景區(qū)”添加熱點。然后用同樣的方法為其他景區(qū)添加熱點。繪制過程中，相鄰的兩個頂點會自動連接，起始和結(jié)束兩個頂點會自動閉合。尚未點選的部分。3．什么是熱點？4．熱點工具有哪些？任務(wù)一添加熱點和錨記鏈接4．設(shè)置熱點屬性添加錨記鏈接

選中為“金華山景區(qū)”添加的熱點，在“屬性”面板中，進行如下設(shè)置：5．熱點屬性面板各個屬性的含義是什么？6．熱點工具的操作有哪些？任務(wù)一添加熱點和錨記鏈接熱點區(qū)域錨記鏈接路徑替換文本金華山景區(qū)“viewpiont.html#jd1”金華山景區(qū)龍門天關(guān)景區(qū)“viewpiont.html#jd2”龍門天關(guān)景區(qū)白草畔景區(qū)“viewpiont.html#jd3”白草畔景區(qū)魚谷洞景區(qū)“viewpiont.html#jd4”魚谷洞景區(qū)百里峽景區(qū)“viewpiont.html#jd5”百里峽景區(qū)拒馬河景區(qū)“viewpiont.html#jd6”拒馬河景區(qū)依據(jù)下表所示，使用同樣方法設(shè)置其他熱點的屬性，分別將其鏈接到“viewpiont.html”頁面中對應(yīng)景區(qū)介紹的錨記位置。任務(wù)一添加熱點和錨記鏈接任務(wù)總結(jié)：通過完成以上任務(wù)，學(xué)習(xí)了什么是熱點、如何添加熱點、如何設(shè)置熱點的屬性和添加錨記以及創(chuàng)建錨記鏈接等。任務(wù)一添加熱點和錨記鏈接舉一反三：將本單元“舉一反三”文件夾中的“pra5-1”文件夾拷貝到D盤根目錄，利用圖像文件“practice5-3.jpg”，制作一個有關(guān)荷花的簡單網(wǎng)頁“practice5-3.html”。使用多邊形熱點工具為圖像中的荷花添加熱點，熟悉使用指針熱點工具對熱點進行移動和修改大小的操作。添加替換文本“映日荷花別樣紅”，添加鏈接到“practice5-4.html”，熱點替換如下圖所示。1．啟發(fā)思路：添加熱點和創(chuàng)建錨記鏈接2．分組完成任務(wù)。任務(wù)一添加熱點和錨記鏈接

作業(yè)：

1．創(chuàng)建網(wǎng)頁“practice5-1.html”，插入本單元素材“舉一反三”文件夾中的圖像“practice5-1.jpg”，練習(xí)使用矩形熱點工具、多邊形熱點工具和橢圓形熱點工具繪制不同形狀的熱點。2．創(chuàng)建網(wǎng)頁“practice5-2.html”，插入本單元素材“舉一反三”文件夾中的圖像“practice5-2.jpg”，在圖像上添加圓形熱點，并添加替換文本“月到中秋分外明”。效果如圖所示。任務(wù)一添加熱點和錨記鏈接任務(wù)二添加和使用層任務(wù)描述：完成“家鄉(xiāng)山水”頁面中層的制作。任務(wù)分析：景區(qū)地圖上共有六個景區(qū)，每個景區(qū)對應(yīng)一個層，加上初始顯示層共有七個層疊放在同一位置，顯示相應(yīng)的圖像。另外，還需要建立一個層，用于顯示簡單的介紹文字。本任務(wù)將在頁面中插入八個層，改變層的大小，確定層的位置，然后在層中添加內(nèi)容。第五單元制作“家鄉(xiāng)山水”網(wǎng)頁自己動手：1．插入層

在“文件”面板中雙擊“travel.html”文件，打開“家鄉(xiāng)山水”網(wǎng)頁。將光標(biāo)放到表格“table3”的第一行，選擇菜單欄“插入”→“布局對象”→“層”選項，插入一個層。使用同樣方法，在表格“table3”的第一行中再插入6個層，分別命名為“Layer2”、“Layer3”、“Layer4”、“Layer5”、“Layer6”和“Layer7”，然后在第二行中插入層“Layer8”?！皩用姘濉比缦聢D：勾選此處可以防止繪制層的過程中，層與層重疊。單擊層名可選中層，雙擊可以修改層的名稱。1．插入層的另一種方法和層的操作。任務(wù)二添加和使用層2．設(shè)置層的屬性在“層”面板中，單擊“Layer8”選中該層，“屬性”面板如下圖所示：2．屬性面板各項的含義是什么？任務(wù)二添加和使用層3．在層中添加內(nèi)容在“層”面板中選中層“Layer1”，將光標(biāo)放入層中，用“插入”菜單插入“D:\mysite\travel\tlimages”文件夾中的圖像“ysp.jpg”，用于顯示“家鄉(xiāng)山水”頁面右下部的初始圖像。用同樣的方法為其他層添加內(nèi)容注意：要在層中添加內(nèi)容，一定先要將光標(biāo)放入該層中。任務(wù)二添加和使用層4．設(shè)置層的顯示屬性單擊切換全部層是否可見。眼睛閉合表示層不可見，睜開表示層可見。單擊切換該層是否可見。任務(wù)二添加和使用層任務(wù)總結(jié)：通過完成以上任務(wù)，學(xué)習(xí)了如何插入層、設(shè)置層的屬性以及如何在層中插入內(nèi)容等。任務(wù)二添加和使用層舉一反三：將本單元“舉一反三”文件夾中的“pra5-2”文件夾拷貝到D盤根目錄，運行Dreamweaver8，使用文件夾中的圖像與文本制作“我的心事”網(wǎng)頁“practice5-7.html”,整個頁面使用層進行布局，效果如下圖所示。1．啟發(fā)思路：回憶插入層的方法，在層中添加內(nèi)容。2．分組完成任務(wù)。任務(wù)二添加和使用層

作業(yè)：1.創(chuàng)建網(wǎng)頁“practice5-5.html”，使用層完成如下工作：在圖像“practice5-4.jpg”的上方疊放另一張圖像“practice5-5.gif”（所需素材在本單元素材文件夾中的“舉一反三”文件夾中），完成效果如下圖所示。任務(wù)二添加和使用層2.創(chuàng)建網(wǎng)頁“practice5-6.html”，利用層的可重疊性，制作陰影效果的文字，如下圖所示。任務(wù)二添加和使用層任務(wù)三制作頁面動態(tài)效果

任務(wù)描述：為“家鄉(xiāng)山水”網(wǎng)頁添加動態(tài)效果。

任務(wù)分析：通過為“家鄉(xiāng)山水”網(wǎng)頁中的熱點添加“顯示-隱藏層”行為，控制相應(yīng)層的狀態(tài)；添加“設(shè)置層文本”行為，控制層“Layer8”中顯示的文本內(nèi)容。第五單元制作“家鄉(xiāng)山水”網(wǎng)頁

自己動手：1．為“金華山景區(qū)”熱點添加“顯示-隱藏層”行為

A.為熱點添加行為在“文件”面板中雙擊“travel.html”文件，打開“家鄉(xiāng)山水”頁面，勾選“窗口”菜單中的“行為”選項，或者按下鍵盤的Shift+F4鍵打開“行為”面板。選中景區(qū)地圖“map.jpg”中覆蓋“金華山景區(qū)”的熱點，單擊“行為”面板上的“添加行為”按鈕，在下拉菜單中選擇“顯示-隱藏層”選項，彈出“顯示-隱藏層”對話框，設(shè)置層“Layer2”（“金華山景區(qū)”圖像所在層）和層“Layer8”（顯示文本的層）為“顯示”，其他層全部設(shè)置為“隱藏”，單擊“確定”按鈕，如下圖所示。任務(wù)三制作頁面動態(tài)效果

什么叫行為？任務(wù)三制作頁面動態(tài)效果

層“Layer2”和層“Layer8”為“顯示”，其他層全部設(shè)置為“隱藏”B.為行為設(shè)置事件在“行為”面板的事件欄中，選擇該行為的事件為“onMouseOver”，效果如下圖所示：任務(wù)三制作頁面動態(tài)效果

常用事件有哪些？常用行為有哪些？行為面板介紹。至此，為“金華山景區(qū)”熱點添加了一個行為，此時預(yù)覽“家鄉(xiāng)山水”頁面，鼠標(biāo)移上“金華山景區(qū)”熱點時，層“Layer2”和“Layer8”顯示，其他層都隱藏，右側(cè)顯示的是“金華山景區(qū)”圖像和簡介。任務(wù)三制作頁面動態(tài)效果

2．為“金華山景區(qū)”熱點添加“設(shè)置層文本”行為

A.選中“金華山景區(qū)”熱點，在“行為”面板中，選擇“添加行為”按鈕，在彈出的下拉菜單中選擇菜單欄“設(shè)置文本”→“設(shè)置層文本”選項，彈出“設(shè)置層文本”對話框，在“層”中選擇層“Layer8”，在“新建HTML”中輸入對該景區(qū)的簡單介紹，然后單擊“確定”按鈕。效果如下圖所示：任務(wù)三制作頁面動態(tài)效果

輸入對該景區(qū)的簡單介紹選擇層“Layer8”B.在“行為”面板的事件欄中，選擇“onMouseOver”，按下F12預(yù)覽頁面，效果如下圖所示。任務(wù)三制作頁面動態(tài)效果

左邊選中景區(qū)，右邊顯示相應(yīng)介紹。

使用以上方法，參照教材表5-1為其他熱點設(shè)置“顯示-隱藏層”行為。注意在設(shè)置某一景區(qū)熱點的行為時，將該景區(qū)圖像所在層和用于顯示文本的“Layer8”層設(shè)置為“顯示”，其他層設(shè)置為“隱藏”。使用以上方法，參照教材表5-7為相應(yīng)熱點添加“設(shè)置層文本”行為，輸入熱點相對應(yīng)的景區(qū)介紹文字。至此，“家鄉(xiāng)山水”欄目的制作全部完成，保存并預(yù)覽檢查效果。任務(wù)三制作頁面動態(tài)效果

任務(wù)小結(jié)1．掌握為熱點添加“顯示-隱藏層”行為。2．掌握為熱點添加“顯示層文本”行為。任務(wù)三制作頁面動態(tài)效果

舉一反三：將本單元“舉一反三”文件夾中的“pra5-3”文件夾拷貝到D盤根目錄，為其中的兩個網(wǎng)頁“practice5-8.html”、“practice5-9.html”添加“打開瀏覽器窗口”行為，設(shè)置事件為“onLoad”，使瀏覽任一網(wǎng)頁時，兩個網(wǎng)頁在兩個瀏覽器窗口中同時打開。

1．啟發(fā)思路：注意選擇正確的行為和事件。

2．分組完成任務(wù)。任務(wù)三制作頁面動態(tài)效果

作業(yè)任務(wù)三制作頁面動態(tài)效果

1．創(chuàng)建網(wǎng)頁“practice5-10.html”，插入本單元素材“舉一反三”文件夾中的圖像“practice5-2.jpg”，為圖像添加“彈出信息”行為，使鼠標(biāo)經(jīng)過圖像時彈出信息“月到中秋分外明”。2．創(chuàng)建網(wǎng)頁“practice5-11.html”，使用表格、層及行為創(chuàng)建如課本圖JYFS5-6所示菜單，鼠標(biāo)移到菜單選項時顯示下拉列表，移出時下拉列表隱藏，目錄結(jié)構(gòu)參照課本表JYFS5-1。任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

任務(wù)描述：

使用HTML代碼編寫網(wǎng)頁，當(dāng)單擊導(dǎo)航圖像中不同文字時，在網(wǎng)頁中顯示不同的內(nèi)容。任務(wù)分析：網(wǎng)頁由上下兩部分組成，上半部分添加用于導(dǎo)航的文字圖像，下半部分顯示文字對應(yīng)的風(fēng)景圖像。這些風(fēng)景圖像分別放在不同的層中，這些層重疊在相同位置，并且大小相同。通過為上半部分導(dǎo)航圖像上的文字添加三個矩形熱點、把熱點鏈接到一段JavaScript代碼，該代碼功能為調(diào)用ShowDiv函數(shù)，該函數(shù)控制層的顯示與隱藏，實現(xiàn)各熱點的行為。

第五單元制作“家鄉(xiāng)山水”網(wǎng)頁自己動手：

1．準(zhǔn)備工作。

在D盤新建一個名為“ygfq”的文件夾，將光盤中本單元素材“html”文件夾中的“htmlimages”文件夾拷貝到新建的文件夾中。在Dreamweaver8中新建一個網(wǎng)頁文件，命名為“ygfq.html”，保存在新建的“ygfg”文件夾中。

將“文檔”窗口切換到“代碼”視圖，<title>標(biāo)簽中的內(nèi)容以及<body>標(biāo)簽進行如下修改。任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

<head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>異國風(fēng)情</title></head><bodybgcolor="#3399FF"topmargin="35"><!--topmargin:設(shè)置頁面的上邊矩--></body><!--修改網(wǎng)頁的標(biāo)題-->任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

2.添加導(dǎo)航圖片在<body>……</body>標(biāo)簽之間，添加的代碼如下。<center><p><imgsrc="htmlimages/top.jpg"width="500"height="30"border="0"/></center>任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

瀏覽效果如下：3.給導(dǎo)航圖像添加熱點并設(shè)置熱點的屬性<center><p><imgsrc="htmlimages/top.jpg"width="500"height="30"border="0"usemap="#Map"/><!--usemap屬性指向熱點地圖--><mapname="Map"id="Map"><!--設(shè)置熱點地圖名稱和id為“Map”--><areashape="rect"coords="26,3,140,28"href="javascript:ShowDiv(document.all.aa)"/><areashape="rect"coords="192,4,307,26"href="javascript:ShowDiv(document.all.bb)"/><areashape="rect"coords="365,4,473,27"href="javascript:ShowDiv(document.all.cc)"/></map></p></center>任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

熱點標(biāo)簽語句格式講解在</title>和</head>之間插入Javascript代碼如下。<scriptlanguage="javascript"><!--用來說明腳本代碼使用JavaScript語言-->functionShowDiv(Tdiv)<!--ShowDiv(Tdiv)函數(shù)完成顯示一個層隱藏其他層的功能，該顯示層由被單擊的熱點決定-->{document.all.aa.style.display="none";<!--先將三個層全部設(shè)置為不可見-->document.all.bb.style.display="none";document.all.cc.style.display="none";Tdiv.style.display="";<!--將函數(shù)傳遞過來要顯示的層設(shè)置為可見-->}</script>任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

在</map>和</p>標(biāo)簽之間添加代碼如下

4.添加圖像層，完成本任務(wù)<divid="aa"style="position:relative;width:499px;height:241px;z-index:1;"><imgsrc="htmlimages/ou.jpg"width="499"height="374"border="0"/></div><divid="bb"style="position:relative;width:499px;height:241px;z-index:2;display:none"><imgsrc="htmlimages/ao.jpg"width="499"height="374"border="0"/></div><divid="cc"style="position:relative;width:499px;height:241px;z-index:3;display:none"><imgsrc="htmlimages/mei.jpg"width="499"height="374"border="0"/></div>任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

層標(biāo)簽語句格式講解通過完成本任務(wù)學(xué)習(xí)了使用HTML代碼插入圖像和層、為給圖像添加熱點、為熱點添加行為。任務(wù)總結(jié)：任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

1．啟發(fā)思路：在分析網(wǎng)頁時注意以下幾點：A.頁面屬性。B.層樣式的定義。C.熱點的定義。D.javascript函數(shù)的使用。在Dreamweaver8的代碼視圖下分析“異國風(fēng)情”網(wǎng)頁。舉一反三：任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

2．分組完成任務(wù)。作業(yè)：任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

1.創(chuàng)建網(wǎng)頁“practice5-12.html”，插入本單元素材“舉一反三”文件夾中的圖像“practice5-10.jpg”，練習(xí)矩形熱點的屬性設(shè)置2.使用層代碼編寫網(wǎng)頁“practice5-13.html”,效果如課本圖JYFS5-7所示。所需圖像為本單元素材的舉一反三文件夾中的“practice5-11.jpg”和“practice5-12.jpg”。3.利用本單元素材舉一反三文件夾中的“practice5-13.jpg”圖像，使用代碼制作頁面“practice5-12.html”，給上面的人物添加圓形熱點，為各個熱點設(shè)置“alt”屬性，設(shè)置熱點的替換文本為卡通人物的名稱，效果如課本圖JYFS5-8所示。（七個小矮人的名字分別是萬事通、害羞鬼、瞌睡蟲、噴嚏精、開心果、迷糊鬼和愛生氣）。提示：圓形熱點屬性包括：shape=“circle”cords=“centerx（圓心x軸的坐標(biāo)），centery（圓心y軸的坐標(biāo)），radius（圓的半徑）“。任務(wù)四使用代碼制作“異國風(fēng)情”網(wǎng)頁

相關(guān)知識：1．錨記是在文檔中設(shè)置的標(biāo)記，這些標(biāo)記通常放在文檔的特定主題處或頂部。使用錨記分為兩步，第一步添加錨記，第二步添加到該錨記的鏈接，這個鏈接可以快速將瀏覽者帶到特定位置。2．錨記名稱通常以英文字母起始，區(qū)分大小寫，不能含有空格，也不能含有特殊字符。如果錨記創(chuàng)建后，在網(wǎng)頁制作窗口中卻看不到錨記圖標(biāo)，選擇菜單欄“查看”菜單里的“可視化助理”選項，勾選“不可見元素”即可。錨記圖標(biāo)在預(yù)覽時不顯示。任務(wù)一添加熱點和錨記鏈接3．熱點是對圖像內(nèi)一個區(qū)域的幾何描述，一般每個熱點都會鏈接到不同的網(wǎng)頁、URL、錨記、圖像等。任務(wù)一添加熱點和錨記鏈接4．熱點工具介紹：多邊形熱點工具橢圓形熱點工具指針熱點工具矩形熱點工具“指針熱點工具”：選中此工具可以拖動熱點改變位置，還可以拖動熱點的頂點來改變其形狀或大小?！熬匦螣狳c工具”：選中此工具后在圖像上拖動鼠標(biāo)可添加矩形熱點，按住Shift鍵拖動可添加正方形熱點?！皺E圓形熱點工具”：選中此工具后在圖像上拖動鼠標(biāo)可添加圓形熱點。此工具不能添加橢圓形熱點?！岸噙呅螣狳c工具”：選中此工具后可以在圖像上通過鼠標(biāo)點選（用鼠標(biāo)連續(xù)單擊圖像中不同位置）添加多邊形熱點。5．熱點“屬性”面板：“鏈接”：用于設(shè)置熱點的鏈接路徑。添加錨記鏈接時，如果鏈接的錨記在本頁面內(nèi)，輸入“#”+“錨記名稱”；如果不在本頁面內(nèi)，輸入“鏈接路徑”+“#”+“錨記名稱”?！澳繕?biāo)”下拉列表中的“_blank”：表示在新的瀏覽器窗口中打開鏈接的文檔，同時保持當(dāng)前瀏覽器窗口不變?！疤鎿Q”：用于設(shè)置當(dāng)鼠標(biāo)指向該熱區(qū)時顯示的“替換文本”。任務(wù)一添加熱點和錨記鏈接6．熱點工具的使用：移動熱點：單擊“屬性”面板中的“指針熱點工具”后，選中某個熱點，可以通過拖拽移動它的位置，還可以利用鍵盤的方向鍵或Shift+方向鍵移動熱點的位置。調(diào)整熱點的大小：用指針熱點工具單擊某個熱點，然后將光標(biāo)移到熱點的頂點處，拖拽鼠標(biāo)可以改變熱點的形狀和大小。選中多個熱點：單擊“屬性”面板中的“指針熱點工具”后，按住Shift鍵的同時，可以通過單擊選中多個熱點；按下鍵盤的Ctrl+A組合可以選中所有的熱點。任務(wù)一添加熱點和錨記鏈接

相關(guān)知識：

1．插入層的另一種方法和層的操作？A．除了采用上述方法插入層外，還可以通過以下方法繪制層。單擊“插入”欄“布局”類別中的“繪制層”按鈕，可以在“設(shè)計”視圖中通過拖拽鼠標(biāo)在任意位置繪制任意大小的層。單擊“繪制層”按鈕后，按住Ctrl鍵，可以連續(xù)繪制多個層。B．選擇一個層的方法在“層”面板中單擊該層的名稱。單擊“標(biāo)簽檢查器”中層的標(biāo)簽<div>。用鼠標(biāo)單擊層邊框。如果在相同位置存在多個層，這種選擇方法不可行。任務(wù)二添加和使用層

C．選擇多個層的方法按住Shift鍵后單擊“層”面板中各個層的名稱。按住Shift鍵后單擊各個層的邊框或內(nèi)部。如果在相同位置存在多個層，這種選擇方法不可行。D．刪除層的方法選中層之后，按Delete鍵刪除。E．修改層大小的方法選中層后執(zhí)行如下任一操作，都可以修改層的大小。拖動該層的控制柄。在層的“屬性”面板中，輸入“寬度”和“高度”值。按住Ctrl鍵，同時使用方向鍵，可以以1個像素為單位精確調(diào)整大小。按住Shift+Ctrl鍵，同時使用方向鍵，可以以10個像素為單位調(diào)整大小。任務(wù)二添加和使用層

F．移動層的方法選中層后使用鼠標(biāo)拖拽。選中層后使用方向鍵一次移動1個像素。按住Shift鍵同時使用方向鍵一次移動10個像素。G．對齊層的方法選中多個層，然后在“修改”菜單的“排列順序”選項中選擇這些層的對齊方式。可以把選中的多個層按最后選中的一個層的位置對齊。任務(wù)二添加和使用層

2．屬性面板各項的含義？“層編號”：用于設(shè)置層的名稱，同一頁面中的每個層都有唯一的名稱。第一次插入的層名稱默認為“Layer1”?！白蟆焙汀吧稀保河糜谠O(shè)置層的左上角相對于頁面（如果是嵌套層，則相對于其父層）左上角的水平距離和垂直距離，值默認為0，單位默認為像素，通常使用默認值?！皩挕焙汀案摺保河糜谠O(shè)置層的寬度和高度。單位默認為像素?！癦軸”：用于設(shè)置層在Z軸上的位置，即層疊順序。在瀏覽器中，編號較大的層疊放在編號較小的層的上面。值可以為正，也可以為負?！翱梢娦浴保河糜谠O(shè)置層是否可見。default:默認值；inherit:繼承父層的可見性；visible：可見；hidden：不可見。任務(wù)二添加和使用層

“溢出”：用于設(shè)置當(dāng)前層中的內(nèi)容超出其大小時的狀態(tài)。Visible：層高度自動增加以容納超出的內(nèi)容；hidden：層大小不變，多出的內(nèi)容隱藏；scroll：在預(yù)覽時層自動加上滾動條；auto：自動識別是否顯示滾動條，層中內(nèi)容超過層的大小時顯示，否則不顯示?！凹糨嫛保河糜诙x層在“文檔窗口”中的可見區(qū)域，單位為像素。任務(wù)二添加和使用層知識講解：1．行為行為是Dreamweaver8預(yù)置的JavaScript程序庫。每個行為由一個動作和一個事件組成。其中，事件是指行為發(fā)生的條件，即觸發(fā)動態(tài)效果的原因，如鼠標(biāo)指向、單擊等；動作是指事件發(fā)生后所作出的反應(yīng)，即最終完成的動態(tài)效果，比如交換圖像、彈出信息、播放聲音等?？梢蕴砑有袨榈膶ο笥袌D像、熱點、超級鏈接文本、多媒體文件或者網(wǎng)頁本身等。

任務(wù)三制作頁面動態(tài)效果

2．“行為”面板添加、刪除、修改行為等操作都可以在“行為”面板中完成。“顯示設(shè)置事件”按鈕：“顯示所有事件”按鈕：“添加行為”按鈕：“刪除行為”按鈕：“增加/降低事件值”按鈕：任務(wù)三制作頁面動態(tài)效果

3．瀏覽器所支持的一般事件類型事件說明onClick鼠標(biāo)單擊時觸發(fā)onDblClick鼠標(biāo)雙擊時觸發(fā)onMouseDown按下鼠標(biāo)左鍵時觸發(fā)onMouseUp鼠標(biāo)左鍵按下后松開時觸發(fā)onMouseOver當(dāng)鼠標(biāo)指針移上某對象時觸發(fā)onMouseMove當(dāng)鼠標(biāo)移動時觸發(fā)onMouseOut當(dāng)鼠標(biāo)離開某對象時觸發(fā)onKeyPress當(dāng)鍵盤上某個鍵按下并且放開時觸發(fā)onKeyDown當(dāng)鍵盤上某個鍵按下時觸發(fā)onKeyUp當(dāng)鍵盤上某個鍵松開時觸發(fā)任務(wù)三制作頁面動態(tài)效果

4．Dreamweaver8中預(yù)設(shè)的常用行為。交換圖像：通過更改“img”標(biāo)簽的“src”屬性將一個圖像和另一個圖像進行交換?；謴?fù)交換圖像：將最后一組交換的圖像恢復(fù)為它們以前的源文件。每次將“交換圖像”動作附加到某個對象時都會自動添加該動作；如果在附加“交換圖像”時選擇了“恢復(fù)”選項