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

下載本文檔

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

文檔簡介

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

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

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

10.1.1認(rèn)識(shí)AP元素

10.1使用AP元素

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

10.1.2插入AP元素

10.1使用AP元素

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

10.1.2插入AP元素

10.1使用AP元素

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

10.1.2插入AP元素

10.1使用AP元素

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

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

10.1使用AP元素

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

10.1.4顯示AP元素標(biāo)識(shí)

10.1使用AP元素

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

10.1.5AP元素的屬性面板

10.1使用AP元素

1，單個(gè)AP元素的屬性面板2，多個(gè)AP元素的屬性面板

10.1.6AP元素面板

10.1使用AP元素

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

10.1.7AP元素的操作

10.1使用AP元素

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

4，對(duì)齊多個(gè)AP元素

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

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

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

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

1．定義AP元素位置（1）position，取值有absolute（絕對(duì)定位）和relative（相對(duì)定位）。（2）left，定義AP元素在頁面左端的位置，單位是像素。（3）top，定義AP元素在頁面頂端的位置，單位是像素。2．定義AP元素大?。?）width，定義AP元素的寬度，單位是像素。（2）height，定義AP元素的高度，單位是像素。3．定義AP元素的顯示層次z-index，值是相對(duì)值，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認(rèn)識(shí)行為

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

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

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

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

10.3認(rèn)識(shí)行為

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

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

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

10.6.1實(shí)驗(yàn)1-隱藏和顯示AP元素10.6上機(jī)實(shí)驗(yàn)

10.6.2實(shí)驗(yàn)2-用JavaScript腳本顯示日期和星期today=newDate();y=today.getFullYear();m=today.getMonth()+1;d=today.getDate();w=today.getDay();document.write("今天是："+y+"年"+m+"月"+d+"號(hào)"+"  ");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上機(jī)實(shí)驗(yàn)

10.6.2實(shí)驗(yàn)2-用JavaScript腳本顯示日期和星期10.6上機(jī)實(shí)驗(yàn)

10.6.3實(shí)驗(yàn)3-綜合使用AP元素、CSS樣式、JavaScript函數(shù)10.6上機(jī)實(shí)驗(yàn)<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>風(fēng)景如畫</title><scriptlanguage="javascript">functionShowDiv(Tdiv)<!--本函數(shù)顯示一個(gè)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個(gè)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等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論