1、網(wǎng)頁設(shè)計工程化教程-個人網(wǎng)站設(shè)計 內(nèi) 容 項目功能分析 1 工程任務(wù)實施 2 項目完成情況評估 3工程功能分析 【能力目標(biāo)】能理解需求方的意向完成個人網(wǎng)站的規(guī)劃能夠設(shè)計完成個人網(wǎng)站的需求分析報告【知識目標(biāo)】掌握網(wǎng)站建設(shè)的根本流程掌握模板的創(chuàng)立和應(yīng)用【素質(zhì)目標(biāo)】培養(yǎng)工作標(biāo)準(zhǔn)化意識培養(yǎng)分析問題、解決問題的能力培養(yǎng)溝通能力和團隊協(xié)作能力培養(yǎng)自我學(xué)習(xí)、創(chuàng)新的能力 工程任務(wù)實施-任務(wù)一 設(shè)計制作模板頁 【任務(wù)分析】在頁面布局上，采用上中下的結(jié)構(gòu)：上側(cè)為個人網(wǎng)站宣傳Bana條和導(dǎo)航、中間為欄目主要內(nèi)容展示、下面為版權(quán)等頁腳信息，所以模板頁面的布局如下圖。 Banner圖片可編輯區(qū)域 版權(quán)等說明 首頁 個人

2、簡歷 個人作品工程任務(wù)實施-任務(wù)一 設(shè)計制作模板頁 【任務(wù)實施】 -參考教材【知識梳理】 在一個網(wǎng)站的制作中，通常有幾十甚至幾百個風(fēng)格根本類似的頁面，如果每次制作都重新設(shè)定網(wǎng)頁結(jié)構(gòu)和相同的導(dǎo)航條、各類圖標(biāo)等就非常麻煩，這時我們可以借助Dreamweaver的模板、庫功能來簡化操作。 1 模板模板本身就是一個文檔，它可以作為創(chuàng)立其他文檔的根底。當(dāng)編輯一個文檔時，設(shè)置好哪些元素不可編輯、哪些元素可以編輯，就可以做為模板保存起來，模板的擴展名為.dwt。2 庫庫是能夠在整個站點假設(shè)干網(wǎng)頁中重復(fù)私用的頁面元素、如文本、圖像、表格、表單等元素，這些元素通常被稱為庫工程。如，網(wǎng)站中的所有頁面的頁腳都類似，

3、這時可以使用庫工程來存儲這些信息，庫文件的擴展名為.lbi。 工程任務(wù)實施-任務(wù)二 設(shè)計制作其他頁面 【任務(wù)分析】模板頁創(chuàng)立完成之后，就可以使用模板創(chuàng)立個人網(wǎng)站的其他頁面了，包括“首頁面、“個人簡歷、“作品展示三個頁面。 工程任務(wù)實施-任務(wù)二 設(shè)計制作其他頁面 【任務(wù)實施】 -參考教材。【知識梳理】1 模板的修改可以直接翻開一個模板文件進行編輯，或者可以翻開一個基于模板的文檔，然后翻開附著的模板進行編輯。當(dāng)保存更改的模板時，Dreamweaver 將提示更新基于該模板的文檔。步驟1 在【資源】面板中，選擇面板左側(cè)的“模板類別，將顯示出站點可用的所有模板并顯示選定模板的預(yù)覽。步驟2 雙擊您要編輯

4、的模板名稱，或者選擇要編輯的模板，然后單擊“資源面板底部的“編輯按鈕。 步驟3 模板在“文檔窗口中翻開，根據(jù)需要修改模板的內(nèi)容。 步驟4 保存該模板。 Dreamweaver 提示您更新基于該模板的頁面，單擊“更新更新基于修改后的模板的所有文檔；如果不想更新基于修改后的模板的文檔，可以單擊“不更新。 工程任務(wù)實施-任務(wù)二 設(shè)計制作其他頁面 【知識梳理】2 從模板別離文檔假設(shè)要更改基于模板的文檔的鎖定區(qū)域，必須將該文檔從模板別離。將文檔別離之后，整個文檔都將變?yōu)榭删庉嫷摹２襟E1 翻開想要別離的基于模板的文檔。 步驟2 選擇【修改】|【模板】|【從模板中別離】命令， 文檔被從模板別離出來，所有模板

5、代碼都被刪除。 工程任務(wù)實施-任務(wù)三 為頁面添加特效 【任務(wù)分析】 有很多優(yōu)秀的網(wǎng)頁，不僅包含文本、圖像和動畫，還有許多其他交互式的效果，例如鼠標(biāo)效果、頁面音樂等。本任務(wù)主要實現(xiàn)添加預(yù)設(shè)的行為實現(xiàn)頁面背景音樂的播放和利用Javascript腳本語言編寫跟隨鼠標(biāo)顯示的時鐘特效。 工程任務(wù)實施-任務(wù)三 為頁面添加特效 【任務(wù)實施】 -參考教材?！局R梳理】 在網(wǎng)頁設(shè)計過程中，除了網(wǎng)站要有很強的功能，也要有豐富多彩的網(wǎng)頁效果。我們可以使用JavaScript腳本語言來編寫制作動態(tài)特效，并通過客戶端的WEB瀏覽器來執(zhí)行。JavaScript是一種通用的腳本編程語言，也是一種基于對象(object)和事

6、件驅(qū)動(event Driven)并具有平安性能的腳本語言，JavaScript代碼嵌套在HTML頁面中，只要瀏覽器支持JavaScript，就可以實現(xiàn)用戶和界面的交互，而不需要效勞器端進行數(shù)據(jù)的回傳。下面介紹網(wǎng)頁設(shè)計制作過程中最長用的圖片特效和菜單特效。1圖片切換循環(huán)顯示效果實現(xiàn)圖片特殊效果的很多，如：圖片幻燈片特效、圖片滾動效果 、圖片新聞特效等，在頁面中選擇恰當(dāng)?shù)膱D片特效可以實現(xiàn)豐富的頁面動態(tài)效果；下面介紹圖片切換循環(huán)顯示效果的實現(xiàn)方法和代碼。將如下代碼，放置在之間。效果如下。 工程任務(wù)實施-任務(wù)三 為頁面添加特效 【知識梳理】 2 js實現(xiàn)仿flash效果的彈性導(dǎo)航菜單在之間添加如下代碼.效果如下。 工程完成情況評估 個人網(wǎng)站制作使用模板技術(shù)，大大節(jié)省了開發(fā)的時間，方便后期維護；同時為頁面添加了常用的行為，為頁面添加了活力。個人網(wǎng)站開發(fā)需要設(shè)計者按照實際需求進行籌劃、實施。設(shè)計完成后，從專業(yè)技能和職業(yè)素養(yǎng)方面進行考核 .情境評價方式評價標(biāo)準(zhǔn)分值個人網(wǎng)站學(xué)生互評10% 能夠小組成員互相協(xié)作、敬業(yè)、認(rèn)真完成分工任務(wù)教師評價過程考核30%遵守學(xué)校的各項規(guī)章制度擁有分析問題、解決問題的能力擁有獨立思考意識、勇于克服困