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

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

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

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

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

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

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