黃岡職業(yè)技術(shù)學(xué)院計科系:孫小英,網(wǎng)頁設(shè)計與制作,第2單元：茶文化網(wǎng)站的設(shè)計任務(wù)4：二級頁面的設(shè)計,目錄,一、教學(xué)目標(biāo),四、考核與反饋,二、教學(xué)內(nèi)容,五、學(xué)法指導(dǎo),三、教學(xué)設(shè)計,一、教學(xué)目標(biāo)-課程描述,網(wǎng)頁設(shè)計與制作這門課程是我院計算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)的一門專業(yè)核心課程。,本課程的先修課程是網(wǎng)頁美工，與其后續(xù)課程動態(tài)網(wǎng)頁設(shè)計、DIV+CSS相結(jié)合，形成滿足職業(yè)崗位實際工作需要的課程體系。,一、教學(xué)目標(biāo)-課程目標(biāo),掌握網(wǎng)站規(guī)劃、網(wǎng)站測試發(fā)布、維護(hù)管理方法；掌握文字、圖像的處理方法；掌握表格的布局方法；掌握模板、框架的使用方法；掌握CSS的運用。,職業(yè)能力目標(biāo),具備初步的網(wǎng)站開發(fā)、維護(hù)和管理能力；具備獨立撰寫網(wǎng)站制作說明等科技文件的基本能力,具備信息收集、處理、加工的能力；具備靜態(tài)網(wǎng)頁設(shè)計的基本能力，能獨立設(shè)計一個內(nèi)容完整、圖文并茂、技術(shù)運用得當(dāng)?shù)木W(wǎng)站；,職業(yè)素質(zhì)目標(biāo),培養(yǎng)學(xué)生按時守信的誠實作風(fēng)；樂觀向上的敬業(yè)精神；溝通協(xié)作的團(tuán)隊意識；知識獲取和應(yīng)用的自主學(xué)習(xí)能力；探索實踐的創(chuàng)新能力。,一、教學(xué)目標(biāo)-本次課的教學(xué)目標(biāo),知識目標(biāo)：掌握模板的創(chuàng)建與保存方法；掌握模板中可編輯區(qū)域的設(shè)置；掌握模板在網(wǎng)頁中的應(yīng)用；,能力目標(biāo)：能熟練運用模板完成多個具有相同或相似布局的頁面的設(shè)計,素質(zhì)目標(biāo)：培養(yǎng)學(xué)生溝通協(xié)作的團(tuán)隊意識；知識獲取和應(yīng)用的自主學(xué)習(xí)能力；探索實踐的創(chuàng)新能力。,二、教學(xué)內(nèi)容-教學(xué)內(nèi)容的選取依據(jù),本課程教學(xué)的側(cè)重點就在于頁面的布局設(shè)計，在網(wǎng)頁的設(shè)計中，最重要同時也是最難、最費時間的就是各頁面的版式布局設(shè)計。,1、依據(jù)教學(xué)目標(biāo)的要求,2：依據(jù)網(wǎng)站設(shè)計風(fēng)格的一致性要求,3：依據(jù)網(wǎng)站的更新要求,在網(wǎng)頁設(shè)計中還有一個重要的設(shè)計原則：網(wǎng)站應(yīng)保持設(shè)計風(fēng)格的一致性。而網(wǎng)站風(fēng)格的一致性除了對文字格式、配色方案的要求外，還體現(xiàn)在頁面布局風(fēng)格的一致性要求上。在一個網(wǎng)站中，除了首頁獨立采用一種布局方案外，一般要求所有的二級頁頁采用相同或相近的布局，對所有的三級頁面的設(shè)計要求也是如此。,茶文化網(wǎng)的設(shè)計與制作,利用模板設(shè)計多個布局相同或相近的頁面的共享結(jié)構(gòu)，既可以節(jié)省設(shè)計時間，又可以保持頁面布局風(fēng)格的一致性，同時也利于頁面的更新操作。,二、教學(xué)內(nèi)容-教學(xué)內(nèi)容的載體,1、教學(xué)任務(wù)：完成“鳳凰旅游網(wǎng)”二級頁面的設(shè)計（學(xué)生分組完成）,二、教學(xué)內(nèi)容-教學(xué)內(nèi)容的載體,2、訓(xùn)練任務(wù)：完成“鳳凰旅游網(wǎng)”二級頁面的設(shè)計（學(xué)生獨立完成）,二、教學(xué)內(nèi)容-教學(xué)重點、難點,教學(xué)重點,教學(xué)難點,模板的創(chuàng)建、保存與應(yīng)用,模板的保存位置；模板中可編輯區(qū)域的定義與修改；,三、教學(xué)設(shè)計-時間安排,復(fù)習(xí)舊課,任務(wù)布置及分析,講練結(jié)合,擴(kuò)展任務(wù)訓(xùn)練與評價,項目,時間,5分鐘,15分鐘,70分鐘,90分鐘,90分鐘,三、教學(xué)設(shè)計-教學(xué)準(zhǔn)備工作,分組情況按第一次上課時時確定的方案執(zhí)行,上課之前將相關(guān)資料、素材分發(fā)給學(xué)生。,素材準(zhǔn)備,確定分組,教學(xué)組織流程,一、復(fù)習(xí)舊課并引入新課,二.分析任務(wù),三.提出解決方案,四、學(xué)生實施任務(wù)、老師指導(dǎo),三、教學(xué)設(shè)計-教學(xué)步驟,六、學(xué)生繼續(xù)實施任務(wù),五、疑難問題講解,七、歸納總結(jié),八、完成訓(xùn)練任務(wù)及評價,1、復(fù)習(xí)舊課布局表格的特點標(biāo)準(zhǔn)表格與布局表格的區(qū)別如何根據(jù)頁面的版式設(shè)計需求合理選擇相應(yīng)表格,三、教學(xué)設(shè)計-具體過程,2、布置本次設(shè)計任務(wù)打開茶文化網(wǎng)站各二級頁面，展示網(wǎng)頁效果，確定本次任務(wù)目標(biāo)。,3、任務(wù)分析（）各子頁面在布局上存在的共同點：,三、教學(xué)設(shè)計-具體過程,各子頁在布局上基本是相同或相近的,（2）利用已學(xué)知識實現(xiàn)布局結(jié)構(gòu)相同的網(wǎng)頁的設(shè)計方法,方法1：每個頁面單獨進(jìn)行設(shè)計方法2：設(shè)計好一個頁面后，在已經(jīng)設(shè)計好的頁面上直接進(jìn)行修改，再通過“另存為”保存為其它網(wǎng)頁,思考：以上設(shè)計方法有何缺點？（通過此問題引入模板這一應(yīng)用。）,4、提出解決方案如果將所有子頁面相同的格式設(shè)為模板，再通過模板建立不同的網(wǎng)頁，即可解決上述問題解決方案一：、先設(shè)計一個子頁面（如about.html)2、通過“文件”“另存為模板”，將已設(shè)計好的頁面存為模板3、創(chuàng)建其它各個子頁面并將模板應(yīng)用于其中解決方案二：、先創(chuàng)建一個模板，在該模板中設(shè)計所有子頁面相同或相近的布局格式2、保存模板3、通過模板創(chuàng)建各個子頁面,三、教學(xué)設(shè)計-具體過程,5、學(xué)生開始實施任務(wù)、老師指導(dǎo)對設(shè)計方案作簡單的說明后，要求學(xué)生按上課前所發(fā)的資料中提供的詳細(xì)設(shè)計方案開始實施任務(wù)。在這一過程中，老師積極參與指導(dǎo)并記錄下學(xué)生在任務(wù)實施過程中存在的問題。（由于在前一次課中已利用表格完成了其中一個子頁面的設(shè)計，所以對于此次設(shè)計任務(wù)要求學(xué)生用第一種方案去實施。）,三、教學(xué)設(shè)計-具體過程,6、疑難問題分析與講解針對學(xué)生在任務(wù)實施過程中出現(xiàn)的問題進(jìn)行詳細(xì)的分析與講解。,7、學(xué)生繼續(xù)完成任務(wù),7、歸納總結(jié),三、教學(xué)設(shè)計-具體過程,對學(xué)生完成任務(wù)的情況進(jìn)行點評，并針對典型問題進(jìn)行講解。最后對模板的設(shè)計知識進(jìn)行歸結(jié)總結(jié)。,8、訓(xùn)練任務(wù)要求學(xué)生按第二種方案完成“鳳凰旅游網(wǎng)”所有二級頁面的設(shè)計,三、教學(xué)設(shè)計-具體過程,9、訓(xùn)練任務(wù)質(zhì)量評價,通過訓(xùn)練任務(wù)既考核學(xué)生對于模板應(yīng)用的掌握程度，又加強(qiáng)學(xué)生對表格布局的運用。,擴(kuò)展功能:重復(fù)區(qū)域的使用,四、考核反饋-考核方式,模板的創(chuàng)建與運用,頁面布局的整體方案及效果,考核內(nèi)容:圖片文件是否單獨存放于images文件夾中；圖片及網(wǎng)頁的文件名是否使用合理的名稱分值比例:10%,考核內(nèi)容:模板的創(chuàng)建與運用分值比例:60%,考核內(nèi)容:布局方案的合理性；布局效果的美觀性分值比例:30%,針對學(xué)生對于擴(kuò)展任務(wù)的完成質(zhì)量進(jìn)行評價,評價方式：采用學(xué)生自評與教師評價相結(jié)合的方法,四、考核反饋-教學(xué)反饋,反饋,課堂反饋教師提問學(xué)生提問學(xué)生完成任務(wù)質(zhì)量,課后反饋QQ群電子郵箱,五、學(xué)法指導(dǎo),平時多看一些優(yōu)秀的網(wǎng)站，學(xué)習(xí)他人之長,遇到不懂的問題要及時地向老師或同學(xué)請教,對于教學(xué)中的設(shè)計任務(wù)或課后瀏覽到的優(yōu)秀網(wǎng)頁，要多思考、分析,在課內(nèi)、課外一定要多動手,根據(jù)課程的特點對學(xué)生實施行之有效的學(xué)習(xí)指導(dǎo)方法,六、資源設(shè)計,電子課件：主要包括知識點、設(shè)計的詳細(xì)步驟及注意事項。訓(xùn)練素材學(xué)習(xí)參考網(wǎng)站（精品課程網(wǎng)站）,ThankYou!,