初中八年級(jí)信息技術(shù)課件駕輕就熟-應(yīng)用模板創(chuàng)建網(wǎng)頁(yè) 一等獎(jiǎng)

駕輕就熟——應(yīng)用模板創(chuàng)建網(wǎng)頁(yè)任務(wù)導(dǎo)航創(chuàng)建模板是為了能夠快速生成風(fēng)格統(tǒng)一的網(wǎng)頁(yè)，加快網(wǎng)站建設(shè)，其過(guò)程就像蛋糕房用模具來(lái)制作蛋糕一樣。當(dāng)模板創(chuàng)建完成之后，面臨的任務(wù)自然就是利用模板創(chuàng)建網(wǎng)頁(yè)了。本課，我們應(yīng)用模板制作“日常生活”篇，并且插入導(dǎo)航按鈕完成欄目導(dǎo)航，制作完成后的網(wǎng)頁(yè)效果如圖所示。1.應(yīng)用模板創(chuàng)建網(wǎng)頁(yè)

（1）規(guī)劃“日常生活”文件夾打開(kāi)“文件”面板，在網(wǎng)站的根目錄（D:\safe）下新建文件夾rcsh（日常生活），用于存放“日常生活”篇?jiǎng)?chuàng)建的3個(gè)頁(yè)面以及素材，包括制作網(wǎng)頁(yè)過(guò)程中生成的文件（如Flash按鈕文件）。

（2）應(yīng)用模板現(xiàn)在我們要利用已經(jīng)制作完成的網(wǎng)頁(yè)模板文件module.dwt，生成網(wǎng)站中“日常生活”篇包含的網(wǎng)頁(yè)。應(yīng)用模板創(chuàng)建網(wǎng)頁(yè)經(jīng)常使用兩種方法，即用模板新建網(wǎng)頁(yè)和創(chuàng)建網(wǎng)頁(yè)后再應(yīng)用模板。①用模板直接創(chuàng)建網(wǎng)頁(yè)步驟1：執(zhí)行“文件”→“新建”命令，在彈出的“新建文檔”對(duì)話框中打開(kāi)“模板中的頁(yè)”標(biāo)簽，然后在“安全自護(hù)我能行”站點(diǎn)下選擇模板文件module，單擊“創(chuàng)建”按鈕，如圖所示。步驟2：執(zhí)行“文件”→“保存”命令，將網(wǎng)頁(yè)命名為rcsh.html，并將其保存在Templates文件夾下，再?gòu)摹拔募泵姘逯型系絩csh文件夾下。②新建空白網(wǎng)頁(yè)后再應(yīng)用模板步驟1：執(zhí)行“文件”→“新建”命令，在“新建文檔”對(duì)話框中單擊“空白頁(yè)”標(biāo)簽，在“頁(yè)面類(lèi)型”選項(xiàng)中選擇HTML，然后在“布局”選項(xiàng)中選擇“無(wú)”，單擊“創(chuàng)建”按鈕，創(chuàng)建空白的普通網(wǎng)頁(yè)。步驟2：執(zhí)行“窗口”→“資源”命令，打開(kāi)“資源”面板，單擊“模板”按鈕，則模板資源顯示在面板中。步驟3：在面板的“名稱(chēng)”列表中，左鍵拖動(dòng)module到新建立的網(wǎng)頁(yè)中再釋放鼠標(biāo)就可以應(yīng)用模板了，也可以右擊module，在彈出的快捷菜單中執(zhí)行“套用”命令，即可應(yīng)用此模板，或者單擊module選中模板后，再單擊“應(yīng)用”按鈕，如圖所示。

（3）將“日常生活”網(wǎng)頁(yè)鏈接到框架網(wǎng)頁(yè)網(wǎng)頁(yè)rcsh.html創(chuàng)建完成后，一定要與代表二級(jí)目錄的框架網(wǎng)頁(yè)（all.html）進(jìn)行鏈接，才能在瀏覽網(wǎng)頁(yè)的過(guò)程中從首頁(yè)出發(fā)，順利地導(dǎo)航到“日常生活”篇。步驟1：打開(kāi)框架網(wǎng)頁(yè)all.html，選擇上框架中的rcsh圖像，如圖所示。步驟2：在“屬性檢查器”中單擊“鏈接”文本框后的“瀏覽文件”按鈕，在打開(kāi)的“選擇文件”窗口中找到文件夾rcsh下的網(wǎng)頁(yè)rcsh.html，單擊“確定”按鈕。步驟3：在“屬性檢查器”中設(shè)置目標(biāo)框架為mainFrame，表示單擊圖片時(shí)將網(wǎng)頁(yè)“日常生活”在框架網(wǎng)頁(yè)中的下框架（mainFrame）打開(kāi)。2.利用“鼠標(biāo)經(jīng)過(guò)圖像”制作導(dǎo)航欄

（1）圖像素材的整理將我們?yōu)椤叭粘Ｉ睢睓谀康膶?dǎo)航欄準(zhǔn)備好如圖所示的6張圖像素材存放到rcsh\images文件夾中。

（2）制作導(dǎo)航欄執(zhí)行“插入”→“圖像對(duì)象”→“鼠標(biāo)經(jīng)過(guò)圖像”命令，對(duì)話框中相關(guān)的設(shè)置如圖所示。3.測(cè)試網(wǎng)頁(yè)保存網(wǎng)頁(yè)，在瀏覽器中測(cè)試網(wǎng)頁(yè)效果。知識(shí)著陸1.可以采用兩種方法利用模板創(chuàng)建網(wǎng)頁(yè)：一是用模板新建網(wǎng)頁(yè)；二是創(chuàng)建網(wǎng)頁(yè)后再應(yīng)用模板。2.恰當(dāng)?shù)厥褂谩笆髽?biāo)經(jīng)過(guò)圖像”制作導(dǎo)航，可以制作出具有導(dǎo)航效果的網(wǎng)頁(yè)按鈕，使網(wǎng)頁(yè)變得動(dòng)感十足，富