第10章 使用AP元素和行為_第1頁
第10章 使用AP元素和行為_第2頁
第10章 使用AP元素和行為_第3頁
第10章 使用AP元素和行為_第4頁
第10章 使用AP元素和行為_第5頁
已閱讀5頁，還剩38頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

網(wǎng)頁制作實例教程

(第3版)——使用AP元素和行為

（第10章）1，AP元素的使用方法2，行為的使用方法本章要點：

10.1.1認識AP元素

10.1使用AP元素

AP元素是容器對象，HTML文件正文中的對象都能包含在AP元素中，所以AP元素能用來實現(xiàn)頁面布局。AP元素的位置是可重疊的，設(shè)計者不僅能控制AP元素的前后位置，也能控制AP元素的顯示或隱藏。AP元素在頁面中的位置不受限制，可以用來給HTML頁面元素分配絕對位置，對應(yīng)的HTML標記是“div”。網(wǎng)頁制作不一定必須使用AP元素，但掌握了AP元素的使用方法，能夠大大加強網(wǎng)頁設(shè)計的靈活性，給網(wǎng)頁添加意想不到的效果。

10.1.2插入AP元素

10.1使用AP元素

1．用命令菜單“插入”菜單→“布局對象”→“APDiv”，系統(tǒng)在當前光標位置自動插入一個默認大小的AP元素。

10.1.2插入AP元素

10.1使用AP元素

2．用功能面板打開“插入”面板的“布局”選項組→單擊“標準”按鈕→單擊“繪制APDiv”→拖動鼠標在“設(shè)計”視圖畫一塊區(qū)域，松開鼠標后網(wǎng)頁中顯示AP元素的范圍。

10.1.2插入AP元素

10.1使用AP元素

3．插入嵌套的AP元素光標置于AP元素中→單擊“插入”面板的“繪制APDiv”圖標→拖動鼠標在AP元素內(nèi)部畫出一塊區(qū)域，松開鼠標后顯示嵌套的AP元素。

10.1.3設(shè)置AP元素首選參數(shù)

10.1使用AP元素

“編輯”菜單→“首選參數(shù)”→“分類”列表選“AP元素”→設(shè)置選項。

10.1.4顯示AP元素標識

10.1使用AP元素

頁面中插入AP元素以后，頁面左上角會顯示APDiv標識，嵌套的AP元素左上角也會顯示APDiv標識。按住Alt鍵單擊標識會顯示AP元素的名稱。如果標識沒有顯示，進行以下操作使標識顯示出來。（1）定義“首選參數(shù)”的“不可見元素”“編輯”菜單→“首選參數(shù)”→“分類”列表選“不可見元素”→右邊選項列表中勾選“AP元素的錨點”→單擊“確定”按鈕。（2）定義“可視化助理”“查看”菜單→“可視化助理”→使“不可見元素”前有對勾。

10.1.5AP元素的屬性面板

10.1使用AP元素

1，單個AP元素的屬性面板2，多個AP元素的屬性面板

10.1.6AP元素面板

10.1使用AP元素

“AP元素”面板顯示當前網(wǎng)頁所有AP元素。（1）勾選“防止重疊”，AP元素互不重疊。（2）“眼睛”列定義AP元素在“設(shè)計”窗口是否可見。（3）“ID”列定義AP元素名字，雙擊名字后可以更換名字。（4）“Z”列定義AP元素的顯示級別，數(shù)字大的顯示在數(shù)字小的元素上面。這個數(shù)字是相對值。

10.1.7AP元素的操作

10.1使用AP元素

1，選中AP元素2，調(diào)整AP元素大小3，移動AP元素

4，對齊多個AP元素

10.1.8AP元素與表格相互轉(zhuǎn)換10.1使用AP元素

“修改”菜單→“轉(zhuǎn)換”→級聯(lián)菜單中選擇相應(yīng)命令。10.1使用AP元素

例10-1在網(wǎng)頁中使用AP元素

10.2.1定義AP元素位置和大小的樣式10.2AP元素樣式

1．定義AP元素位置（1）position，取值有absolute（絕對定位）和relative（相對定位）。（2）left，定義AP元素在頁面左端的位置，單位是像素。（3）top，定義AP元素在頁面頂端的位置，單位是像素。2．定義AP元素大?。?）width，定義AP元素的寬度，單位是像素。（2）height，定義AP元素的高度，單位是像素。3．定義AP元素的顯示層次z-index，值是相對值，z-index數(shù)值高的AP元素顯示在z-index的數(shù)值低的AP元素上層。10.2AP元素樣式

例10-2定義AP元素位置的樣式<html><head><title>位置樣式</title><styletype="text/css"><!--#apDiv1{position:absolute;left:65px;top:62px;width:168px;height:212px;background-color:#0000FF;z-index:1;}#apDiv2{position:absolute;left:17px;top:19px;width:136px;height:113px;background-color:#FFC;z-index:2;}#apDiv3{position:absolute;left:24px;top:159px;width:137px;height:31px;background-color:#0000FF;z-index:2;font-size:24px;font-weight:bold;text-align:center;color:#FF0;}-->10.2AP元素樣式

</style></head><body><divid="apDiv1"><divid="apDiv2"><imgsrc="cat1.jpg"width="136"height="113"/></div><divid=“apDiv3”>我是黑貓！</div></div></body></html>

10.2.2控制AP元素的顯示10.2AP元素樣式

例10-3定義AP元素是否顯示<html><head><title>顯示樣式</title><styletype="text/css"><!--#ys1{position:absolute;top:100;left:50;}#ys2{position:absolute;top:100;left:50;visibility:hidden;}p{color:red;font-weight:bolder;}--></style></head><body><p>不管白貓黑貓逮住老鼠就是好貓</p>

10.2AP元素樣式

<ahref="#"nclick="ys1.style.visibility='visible';ys2.style.visibility='hidden'">貓1</a><ahref="#"nclick="ys2.style.visibility='visible';ys1.style.visibility='hidden'">貓2</a><divid=ys1><imgsrc=cat1.jpg><p>我是黑貓</div><divid=ys2><imgsrc=cat2.jpg><p>我也是黑貓</div></body></html>10.3認識行為

10.3.1什么是行為行為是“事件”和“動作”的結(jié)合。例如，當鼠標移動到網(wǎng)頁的圖片上時，圖片變小，此時，鼠標移動稱為“事件”，圖像變化稱為“動作”。

10.3.2什么是事件事件是瀏覽器生成的消息，反映該頁的訪問者所執(zhí)行的操作。例如：用鼠標單擊文字打開信息框，瀏覽器為該行為生成一個“onClick”事件。

10.3.3什么是動作動作是一組預(yù)先編寫好的JavaScript代碼，這些代碼能完成特定任務(wù)。例如：交換圖像、打開瀏覽器窗口等。DreamweaverCS4提供了很多動作，可以在“行為”面板的“行為”菜單中中查看。10.3認識行為

10.3.4“行為”面板“行為”面板提供行為，面板上方有6個按鈕，從左到右依次為：顯示當前對象的行為、顯示全部行為、添加行為、刪除行為、向上移動行為、向下移動行為。

10.3認識行為

10.3.5“行為”菜單在“行為”面板單擊“添加行為”按鈕，顯示“行為”菜單。

“效果”級聯(lián)菜單

10.4使用行為

10.4.1彈出信息框例10-4打開網(wǎng)頁彈出信息框10.4使用行為

10.4.2打開瀏覽器窗口例10-5打開瀏覽器窗口10.4使用行為

10.4.3制作交換圖像例10-6交換圖像10.4使用行為

10.4.4顯示-隱藏AP元素例10-7顯示-隱藏AP元素10.4使用行為

10.4.5改變對象屬性例10-8動態(tài)地改變AP元素的背景色10.4使用行為

10.4.6使用AP元素效果例10-9使用AP元素效果“增大/收縮”效果“遮簾”效果10.4使用行為

10.4.7設(shè)置狀態(tài)欄文本例10-10設(shè)置狀態(tài)欄文本10.5調(diào)用JavaScript

10.5.1認識JavaScript1．JavaScript簡介JavaScript是一種基于對象和事件驅(qū)動、并具有安全性能的腳本語言，用來編寫功能模塊，前面介紹的各種行為就是用JavaScript編寫的。嵌入到HTML文檔的腳本要包括在標記<script>和</script>中，腳本代碼可以放在HTML文檔的任何位置，但為了程序清晰方便閱讀，通常將腳本放在文檔頭部。JavaScript腳本區(qū)分大小寫。如果把<script>和</script>括起來的腳本放到HTML的注釋標記<!--與-->之間，那么遇到不支持JavaScript語言的瀏覽器，腳本語句也不會顯示出來。10.5調(diào)用JavaScript2．編程標記<script><script>是HTML的編程標記，<script>與</script>用來界定程序的開始和結(jié)束，之間的部分是腳本代碼和相關(guān)函數(shù)。<script>標記有2個重要屬性：（1）language屬性，定義腳本程序的類型，屬性值可以是JavaScript或VBScript。（2）src屬性，指出腳本源程序的URL。單獨的JavaScript源程序文件以js為擴展名，用src屬性鏈接。如果沒有src屬性，瀏覽器默認所有JavaScript源代碼都在<script>與</script>之間。3．嵌入式JavaScript腳本位于<script>與</script>之間JavaScript腳本稱為嵌入式JavaScript腳本。10.5調(diào)用JavaScript例10-11嵌入式JavaScript腳本<html><head><title>第1個JavaScript程序</title><scriptlanguage="JavaScript">document.write("編寫第1個JavaScript程序")</script></head><body><scriptlanguage="JavaScript">alert("歡迊使用JavaScript語言")</script></body></html>10.5調(diào)用JavaScript4．外部JavaScript腳本建立以“js”為擴展名的腳本文件，存放在腳本文件中的JavaScript腳本稱為“外部JavaScript腳本”。如果HTML文檔中既調(diào)用了外部腳本，也使用嵌入式腳本，則由src屬性指定的腳本先被處理，然后再處理嵌入在HTML文檔中的腳本。<html><head><title>第1個JavaScript程序</title><scriptlanguage="JavaScript"src="jiaoben1.js"></script></head><body></body></html>document.write("編寫第1個JavaScript程序")alert("歡迊使用JavaScript語言")腳本文件網(wǎng)頁文件10.5調(diào)用JavaScript5．用事件觸發(fā)JavaScript腳本如果把腳本放在函數(shù)中，就能用事件觸發(fā)函數(shù)，從而執(zhí)行腳本內(nèi)容。（1）函數(shù)函數(shù)是能夠完成某種功能的語句集合。函數(shù)由設(shè)計人員自己定義，可以在程序中反復(fù)調(diào)用。（2）定義函數(shù)的格式

function函數(shù)名（參數(shù)表）｛函數(shù)體;return表達式;}（3）定義函數(shù)的說明·對函數(shù)的調(diào)用通過函數(shù)名實現(xiàn)，函數(shù)名區(qū)分大小寫?！?shù)表是可選部分，如果多于一個參數(shù)，之間用逗號分隔?！ず瘮?shù)體是腳本代碼，用花括號括起來?！eturn語句用來返回函數(shù)值，如果函數(shù)無返回值，return語句省略。10.5調(diào)用JavaScript例10-13用事件觸發(fā)JavaScript函數(shù)<html><head><title>第1個JavaScript程序</title><scriptlanguage="JavaScript"src="jiaoben2.js"></script></head><bodyonload="abc()"></body></html>functionabc(){document.write("編寫第1個JavaScript程序")alert("歡迊使用JavaScript語言")}腳本文件網(wǎng)頁文件10.5調(diào)用JavaScript

10.5.2“調(diào)用JavaScript”行為例10-14“調(diào)用JavaScript”行為10.5調(diào)用JavaScript

10.5.3使用其他方法插入JavaScript腳本使用菜單使用面板10.6上機實驗

10.6.1實驗1-隱藏和顯示AP元素10.6上機實驗

10.6.2實驗2-用JavaScript腳本顯示日期和星期today=newDate();y=today.getFullYear();m=today.getMonth()+1;d=today.getDate();w=today.getDay();document.write("今天是："+y+"年"+m+"月"+d+"號"+"  ");switch(w){case1:document.write("星期一");break;case2:document.write("星期二");break;case3:document.write("星期三");break;case4:document.write("星期四");break;case5:document.write("星期五");break;case6:document.write("星期六");break;case0:document.write("星期日");}10.6上機實驗

10.6.2實驗2-用JavaScript腳本顯示日期和星期10.6上機實驗

10.6.3實驗3-綜合使用AP元素、CSS樣式、JavaScript函數(shù)10.6上機實驗<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>風(fēng)景如畫</title><scriptlanguage="javascript">functionShowDiv(Tdiv)<!--本函數(shù)顯示一個AP元素隱藏其他AP元素-->{document.all.aa.style.display="none";<!--先將所有AP元素設(shè)置為不可見-->document.all.bb.style.display="none";document.all.cc.style.display="none";document.all.dd.style.display="none";Tdiv.style.display="";<!--將傳遞給函數(shù)的AP元素設(shè)置為可見-->}</script><styletype="text/css"><!--定義4個AP元素的CSS樣式-->#aa{position:relative;width:500px;height:240px;z-index:1;}#bb{position:relative;width:500px;height:240px;z-index:2;}#cc{position:relative;width:500px;height:240px;z-

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論