中考化學(xué)總復(fù)習(xí)第一輪復(fù)習(xí)系統(tǒng)梳理夯基固本第15講金屬活動性順序的實(shí)驗(yàn)探究及應(yīng)用練習(xí)課件20190116111

第11講創(chuàng)建網(wǎng)頁特效2016年河南大學(xué)環(huán)境與規(guī)劃學(xué)院第11講創(chuàng)建網(wǎng)頁特效2016年河南大學(xué)環(huán)境與規(guī)劃學(xué)院1

在制作網(wǎng)頁中，為了豐富網(wǎng)頁內(nèi)容，使網(wǎng)頁新穎有風(fēng)格，需要為網(wǎng)頁添加特殊效果。制作網(wǎng)頁特效主要使用Dreamweaver8中自帶的行為以及在網(wǎng)頁中添加JavaScript代碼完成。創(chuàng)建網(wǎng)頁特效在制作網(wǎng)頁中，為了豐富網(wǎng)頁內(nèi)容，使網(wǎng)頁新穎有風(fēng)格，需2

行為：指的是網(wǎng)頁中進(jìn)行的一系列動作，通過這些動作，可以實(shí)現(xiàn)用戶同網(wǎng)頁的交互，也可以通過動作使某個(gè)任務(wù)被執(zhí)行，比如用戶在瀏覽網(wǎng)頁時(shí)單擊按鈕彈出一個(gè)提示對話框，這就是一個(gè)完整的行為。創(chuàng)建網(wǎng)頁特效行為：指的是網(wǎng)頁中進(jìn)行的一系列動作，通過這些動作，可以實(shí)3通常一個(gè)行為由一個(gè)行為和一個(gè)動作構(gòu)成，通過一個(gè)事件能夠激活一個(gè)動作，完成用戶和頁面的交互，比如，當(dāng)將鼠標(biāo)移動到一副圖片時(shí)，可以引發(fā)OnMouseOver事件，用戶設(shè)置某一個(gè)動作，比如一副大圖片的顯示，這一事件就會激發(fā)這個(gè)動作，實(shí)現(xiàn)用戶和頁面的交互。DW中通常動作是一段預(yù)先寫好的Javascript代碼，利用這些代碼可以完成相應(yīng)的任務(wù)。創(chuàng)建網(wǎng)頁特效通常一個(gè)行為由一個(gè)行為和一個(gè)動作構(gòu)成，通過一個(gè)事件能夠激活一4創(chuàng)建網(wǎng)頁特效彈出消息、廣告頁面特效滾動字體特效、顯示隱藏層特效創(chuàng)建網(wǎng)頁特效彈出消息、廣告頁面特效滾動字體特效、顯示隱藏層特5創(chuàng)建網(wǎng)頁特效例11.1創(chuàng)建如下的網(wǎng)站，學(xué)習(xí)滾動字體特效和顯示隱藏層特效的實(shí)現(xiàn)創(chuàng)建網(wǎng)頁特效例11.1創(chuàng)建如下的網(wǎng)站，學(xué)習(xí)滾動字體特效和顯示6要求：頁面底部的“云臺山歡迎你”呈現(xiàn)從左向右的滾動狀態(tài)顯示，點(diǎn)擊右側(cè)的小圖片，在頁面中間出現(xiàn)較大的圖片創(chuàng)建網(wǎng)頁特效要求：頁面底部的“云臺山歡迎你”呈現(xiàn)從左向右的滾動狀7主要步驟：首先在MyWeb文件夾下新建yuntaishan站點(diǎn)，打開Dreamweaver管理該站點(diǎn)，右單擊站點(diǎn)-新建文件，新建index.html，打開index.html然后，進(jìn)行如下的操作：1、進(jìn)行整體布局：插入5行2列的表格，表格寬為850px，居中排列，高為550px，合并第1列，設(shè)置第１列寬620；創(chuàng)建網(wǎng)頁特效主要步驟：1、進(jìn)行整體布局：插入5行2列的表格，表格寬為8582、輸入表格內(nèi)容：左側(cè)1列輸入：云臺山，換行并插入－HTML－水平線，換行輸入內(nèi)容“云臺山位于河南省焦作市修武縣境內(nèi)，景區(qū)面積240平方公里，含百家?guī)r、紅石峽、子房湖、潭瀑峽、獼猴谷、茱萸峰、峰林峽、青龍峽等主要景點(diǎn)。區(qū)地形復(fù)雜，氣候隨海拔與山勢山形變化各異、差異明顯，原始次生林覆蓋了整個(gè)山巒，各種樹木和奇花異草種類達(dá)五百多種。云臺山主峰茱萸峰海拔1314米，有落差314米的云臺天瀑，在景區(qū)泉瀑峽的盡端，是中國發(fā)現(xiàn)的落差最大的瀑布之一。園區(qū)內(nèi)地質(zhì)遺跡豐富，30億年來，形成了太古宇、元古宇、古生界和新生界地層；多次的構(gòu)造運(yùn)動，尤其是2300萬年以來，新構(gòu)造運(yùn)動的強(qiáng)烈抬升和水蝕作用的深度下切，造就了云臺山雙崖對峙的峽谷群和各種動態(tài)的瀑、泉、溪、潭，共同構(gòu)成了曠奧兼具的“云臺地貌”景觀。云臺山上溯夏商，下至明清，文人墨客不絕于此，竹林七賢隱居山中，對中國園林從宮廷走向大自然起到了承前啟后的作用。2004年2月13日，云臺山被聯(lián)合國教科文組織評選為全球首批世界地質(zhì)公園。2014年1月，云臺山景區(qū)被列入資源型城市重點(diǎn)旅游區(qū)自然風(fēng)光旅游項(xiàng)目?！眲?chuàng)建網(wǎng)頁特效2、輸入表格內(nèi)容：左側(cè)1列輸入：云臺山，創(chuàng)建網(wǎng)頁特效93、右側(cè)5行分別插入圖像占位符4、設(shè)置表格內(nèi)容的CSS樣式：1）選中右側(cè)1列，右單擊選中CSS樣式-新建，新建類選擇符，命名為.left_td,鏈接為外部樣式表，在右側(cè)CSS面板選擇.left_td，設(shè)置字體為隸書，大小為18px，行高為18px，背景為images/bg_2.jpg，不重復(fù)，方框?qū)挒?50px，高為500px，填充全部相同為15px，邊框?yàn)閮蓚€(gè)寬度的虛線，顏色為#006699；2）選中云臺山三個(gè)字，右單擊選中CSS樣式-新建，新建ID選擇符為.left_td#yuntaishan，設(shè)置樣式為字體為隸書、大小為30，粗細(xì)為粗體、顏色為紅色，設(shè)置鏈接為http:///，鼠標(biāo)點(diǎn)擊顯帶下劃線的藍(lán)色創(chuàng)建網(wǎng)頁特效3、右側(cè)5行分別插入圖像占位符創(chuàng)建網(wǎng)頁特效103）右單擊右側(cè)的圖像占位符，選擇CSS樣式-新建，新建名為pic的類選擇符.pic,設(shè)置.pic樣式為：方框?qū)?80，高100px，從images中分別為每個(gè)圖像占位符選擇圖片5、設(shè)置頁面底部紅色的滾動字體“云臺山歡迎你”：首先選擇布局選擇卡的繪制層命令，在頁面底部繪制一層，輸入“你迎歡山臺云”,其id為layer1；其次，設(shè)置layer1的樣式為字體為華為新魏，大小為50，粗體，斜體，顏色為紅色，文本居中，方框?qū)挒?00，高為50，定位類型為絕對，寬為700，高為50，植入，上側(cè)為501，左側(cè)為280；創(chuàng)建網(wǎng)頁特效3）右單擊右側(cè)的圖像占位符，選擇CSS樣式-新建，新建名為p11最后，設(shè)置字體的滾動效果，在代碼位置<divid=layer1>和</div>增加<marqueedirection=right></marquee>注意：<marquee></marquee>是設(shè)置頁面元素的移動效果，常用的屬性包含1）移動方向<direction=#>（#=left,right,up,down），移動方式<behavior=#>（#=scroll（重復(fù)滾動）,slide（不重復(fù)滾動）,alternate（來回滾動）），循環(huán)<loop=#>（

#=次數(shù)；若未指定則循環(huán)不止）如：<marqueedirection=rightbehavior=scrollloop=3>設(shè)置從右向左走，重復(fù)滾動，循環(huán)三次</marquee>創(chuàng)建網(wǎng)頁特效最后，設(shè)置字體的滾動效果，在代碼位置<divid=l126、設(shè)置點(diǎn)擊右側(cè)小圖片，在頁面中部出現(xiàn)相應(yīng)的大圖片：1）繪制大圖片所在的層并設(shè)置內(nèi)容和樣式：單擊菜單【插入】→【布局對象】→【層】，或單單擊“布局”插入工具欄中的“繪制層”按鈕，在文檔窗口中繪制一個(gè)層，其id為layer2，設(shè)置該層的樣式為絕對定位，置入上150px，左300px，層中放置一個(gè)圖像占位符，右單擊該圖像占位符，選擇【CSS樣式】-【新建】，新建類選擇符.pic2,設(shè)置寬為500，高為400；點(diǎn)擊圖像占位符，選擇圖片1；創(chuàng)建網(wǎng)頁特效6、設(shè)置點(diǎn)擊右側(cè)小圖片，在頁面中部出現(xiàn)相應(yīng)的大圖片：創(chuàng)建網(wǎng)頁132）設(shè)置鼠標(biāo)移入小圖片的行為：點(diǎn)擊選擇右側(cè)圖片1，打開行為面板窗口，點(diǎn)擊選擇顯示-隱藏層命令，打開顯示-隱藏層對話框，在該對話框選擇該層后設(shè)置行為為顯示，確定后在行為面板設(shè)置事件為onMouseOver；創(chuàng)建網(wǎng)頁特效2）設(shè)置鼠標(biāo)移入小圖片的行為：點(diǎn)擊選擇右側(cè)圖片1，打開行為面143）設(shè)置鼠標(biāo)移出小圖片的行為：點(diǎn)擊選擇右側(cè)圖片1，點(diǎn)擊行為面板按鈕，從彈出快捷菜單選擇選擇顯示-隱藏層命令，打開“顯示-隱藏層”對話框，在該對話框選擇該層后設(shè)置行為隱藏，確定后在行為面板設(shè)置事件為onMouseOut；創(chuàng)建網(wǎng)頁特效3）設(shè)置鼠標(biāo)移出小圖片的行為：點(diǎn)擊選擇右側(cè)圖片1，點(diǎn)擊行為面154）設(shè)置鼠標(biāo)移動至其他圖片的行為和事件：在layer2位置添加層layer3（layer4、layer5、layer6），設(shè)置layer3（layer4、layer5、layer6）的樣式的樣式為絕對定位，置入上150px，左300px，重復(fù)以上3步，設(shè)置鼠標(biāo)移動至其他圖片的行為和事件；5）設(shè)置layer2、layer3、layer4、layer5、layer6在頁面加載時(shí)隱藏：單擊選中文檔編輯窗口左下角的<body>標(biāo)簽，行為面板點(diǎn)擊添加行為按鈕，選擇顯示-隱藏層命令，點(diǎn)擊這些層，設(shè)置隱藏，行為面板選擇onLoad事件。創(chuàng)建網(wǎng)頁特效4）設(shè)置鼠標(biāo)移動至其他圖片的行為和事件：在layer2位置添167、打開頁面播放背景音樂“天空之城”：點(diǎn)擊添加行為按鈕(+標(biāo)記)，選擇播放聲音命令，在如下的對話框，點(diǎn)擊瀏覽按鈕，選擇音樂文件，單擊確定，網(wǎng)頁出現(xiàn)背景音樂圖標(biāo)

；點(diǎn)擊該圖標(biāo)，在屬性面板選擇參數(shù)，打開參數(shù)對話框，設(shè)置autostart為true（設(shè)置自動播放），Loop為true（自動循環(huán)播放），如此背景音樂就可以重復(fù)循環(huán)播放了。創(chuàng)建網(wǎng)頁特效7、打開頁面播放背景音樂“天空之城”：點(diǎn)擊添加行為按鈕(+17創(chuàng)建網(wǎng)頁特效彈出消息、廣告頁面特效滾動字體特效、顯示隱藏層特效創(chuàng)建網(wǎng)頁特效彈出消息、廣告頁面特效滾動字體特效、顯示隱藏層特18創(chuàng)建網(wǎng)頁特效例11.2實(shí)現(xiàn)在打開例10.1頁面彈出如下的廣告頁面，關(guān)閉頁面彈出如下的消息頁面創(chuàng)建網(wǎng)頁特效例11.2實(shí)現(xiàn)在打開例10.1頁面彈出如下的廣19打開彈出廣告頁面實(shí)現(xiàn)步驟：1、單擊選中文檔編輯窗口左下角的<body>標(biāo)簽2、單擊行為面板的按鈕，從彈出快捷菜單選擇“打開瀏覽器窗口”選項(xiàng)，打開“打開瀏覽器窗口”對話框，點(diǎn)擊瀏覽按鈕，選擇“廣告.jpg”,在窗口寬度設(shè)置為600，高度設(shè)置為400，窗口名稱設(shè)為廣告創(chuàng)建網(wǎng)頁特效打開彈出廣告頁面實(shí)現(xiàn)步驟：創(chuàng)建網(wǎng)頁特效203、單擊確定按鈕，完成行為的添加4、觀察“行為”面板，檢查該行為對應(yīng)的觸發(fā)事件是不是onload，若不是，重新選擇5、保存，按F12觀察效果創(chuàng)建網(wǎng)頁特效3、單擊確定按鈕，完成行為的添加創(chuàng)建網(wǎng)頁特效21打開關(guān)閉頁面彈出消息實(shí)現(xiàn)步驟：1、單擊選中文檔編輯窗口左下角的<body>標(biāo)簽2、單擊行為面板的按鈕，從彈出快捷菜單選擇“彈出消息”選項(xiàng)，打開“彈出消息”對話框3、在“消息文本框輸入“謝謝你光臨本網(wǎng)站?。。　比鐖D所示創(chuàng)建網(wǎng)頁特效打開關(guān)閉頁面彈出消息實(shí)現(xiàn)步驟：創(chuàng)建網(wǎng)頁特效224、單擊確定按鈕，完成彈出消息行為的添加5、觀察“行為”面板，檢查該行為對應(yīng)的觸發(fā)事件是不是onbeforeunload，若不是，重新選擇6、保存，按F12觀察效果創(chuàng)建網(wǎng)頁特效4、單擊確定按鈕，完成彈出消息行為的添加創(chuàng)建網(wǎng)頁特效23創(chuàng)建網(wǎng)頁特效控制Flash播放特效彈出消息、廣告頁面特效滾動字體特效、顯示隱藏層特效創(chuàng)建網(wǎng)頁特效控制Flash播放特效彈出消息、廣告頁面特效滾動24例11.3，創(chuàng)建一個(gè)如下的網(wǎng)頁，頁面下方有播放和停止，分別控制控制的飛舞和停止。

創(chuàng)建網(wǎng)頁特效例11.3，創(chuàng)建一個(gè)如下的網(wǎng)頁，頁面下方有播放和停止，分別控25實(shí)現(xiàn)步驟：1、在MyWeb文件夾下新建huacong站點(diǎn)，在dreamweaver8.0中加載該站點(diǎn)，并新建index.html2、打開index.html，將插入工具欄切換為布局選項(xiàng)卡，單擊布局按鈕，將文檔窗口切換為布局模式下工作，在頁面中間位置繪制一個(gè)單元格，在屬性面板設(shè)置居中對齊，并在該單元格下方再分別繪制2個(gè)單元格創(chuàng)建網(wǎng)頁特效實(shí)現(xiàn)步驟：創(chuàng)建網(wǎng)頁特效26創(chuàng)建網(wǎng)頁特效創(chuàng)建網(wǎng)頁特效273、將鼠標(biāo)置于單元格1中，執(zhí)行插入-圖像命令，插入圖像huacong.jpg4、單擊布局選項(xiàng)卡標(biāo)準(zhǔn)按鈕，將文檔窗口切換至標(biāo)準(zhǔn)模式，在該模式下選擇繪制層命令，在huacong.jpg所在位置繪制一層5、執(zhí)行插入-媒體-flash命令，彈出選擇文件對話框，在對話框中選擇所需要的flash影片，如圖所示，單擊確定，完成flash影片的插入創(chuàng)建網(wǎng)頁特效3、將鼠標(biāo)置于單元格1中，執(zhí)行插入-圖像命令，插入圖像hua286、選中插入的Flash，在屬性面板的名稱位置定義名稱為hudie,對齊方式為居中對齊，點(diǎn)擊參數(shù)，進(jìn)入?yún)?shù)設(shè)置對話框，設(shè)置參數(shù)為wmode，值為tran