網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)課程教學(xué)設(shè)計(jì)2013～2014學(xué)年第二學(xué)期教學(xué)部門 信息技術(shù)系課程名稱 網(wǎng)頁設(shè)計(jì)專業(yè)、班級13網(wǎng)絡(luò)主講教師丁寧山東省濰坊商業(yè)學(xué)校網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第1頁。

網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第1頁?！毒W(wǎng)頁設(shè)計(jì)》課程整體教學(xué)設(shè)計(jì)管理信息課程名稱：《網(wǎng)頁設(shè)計(jì)》 制定時(shí)間：2014年3月課程代碼： 所屬部門：信息技術(shù)系制定人：丁寧 批準(zhǔn)人：基本信息學(xué)分：4 課程類型：專業(yè)課學(xué)時(shí)：80 先修課：授課對象：13網(wǎng)絡(luò) 后續(xù)課：課程設(shè)計(jì)課程目標(biāo)設(shè)計(jì)(1)能力目標(biāo)總體目標(biāo)：學(xué)生學(xué)習(xí)完本課程后，能掌握不同應(yīng)用領(lǐng)域中常用的平面設(shè)計(jì)手法，并將這些手法揉合到網(wǎng)頁設(shè)計(jì)中；熟練應(yīng)用Photoshop制作頁面的平面效果圖，并能夠運(yùn)用多dreamweaver制作簡單的靜態(tài)網(wǎng)頁。具體目標(biāo)：①掌握網(wǎng)頁當(dāng)中卡通元素的設(shè)計(jì)和制作。②熟練應(yīng)用Photoshop制作頁面的平面效果圖的能力。(2)知識目標(biāo)①了解網(wǎng)站制作流程,布局方法以及不同方法的差異、優(yōu)缺點(diǎn)，學(xué)會書寫網(wǎng)站設(shè)計(jì)說明書②了解各類網(wǎng)站的各自特點(diǎn)及設(shè)計(jì)原則③分析并用Photoshop臨摹制作各類優(yōu)秀網(wǎng)站效果圖④運(yùn)用dreamweaver將制作好的平面效果圖制作成靜態(tài)網(wǎng)頁(3)素質(zhì)目標(biāo)①養(yǎng)成良好的開關(guān)機(jī)的習(xí)慣。②養(yǎng)成小組合作學(xué)習(xí)的習(xí)慣。③在表述與回答問題的過程中提高語言表達(dá)能力。網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第2頁。課程內(nèi)容設(shè)計(jì)網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第2頁。=模塊名稱學(xué)時(shí)Dreamweaver的基本應(yīng)用方法和簡單命令52網(wǎng)頁制作的基本流程（綜合實(shí)訓(xùn)）20學(xué)生學(xué)習(xí)完本課程后，能掌握不同應(yīng)用領(lǐng)域中常用的平面設(shè)計(jì)手法，并將這些手法揉合到網(wǎng)頁設(shè)計(jì)中；熟練應(yīng)用Photoshop制作頁面的平面效果圖，從臨摹到帶有一定自己的創(chuàng)意，為畢業(yè)設(shè)計(jì)做好準(zhǔn)備。網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第3頁。能力訓(xùn)練項(xiàng)目設(shè)計(jì)網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第3頁。編號能力訓(xùn)練項(xiàng)目名稱擬實(shí)現(xiàn)的能力目標(biāo)相關(guān)支撐知識訓(xùn)練方式、手段及步驟結(jié)果（可展示）單元一創(chuàng)建站點(diǎn)與瀏覽網(wǎng)頁①創(chuàng)建和管理本地站點(diǎn)②工作界面的認(rèn)識③簡單的基本操作以及參數(shù)的設(shè)置①管理網(wǎng)站中的文件和文件夾②打開網(wǎng)頁瀏覽網(wǎng)頁保存網(wǎng)頁文檔和關(guān)閉網(wǎng)頁文檔等基本操作②瀏覽窗口的基本組成和網(wǎng)頁基本元素組成④使用“資源”面板管理網(wǎng)站中的資源⑤設(shè)置頁面頭部內(nèi)容①講解操作方法及注意事項(xiàng)；②上機(jī)加以實(shí)踐練習(xí)通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況單元二制作基本頁面①基本頁面的制作方法與制作流程②初步認(rèn)識和使用html代碼①網(wǎng)頁文檔和頁面屬性②網(wǎng)頁中文字，圖片和特殊符號等內(nèi)容的插入③表格的基本用法①講解操作方法及注意事項(xiàng)；②上機(jī)加以實(shí)踐練習(xí)通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況單元三創(chuàng)建超鏈接與導(dǎo)航欄①了解導(dǎo)航欄的用途，掌握導(dǎo)航欄的制作方法②創(chuàng)建導(dǎo)航鏈接③學(xué)會制作導(dǎo)航特殊效果①導(dǎo)航欄的創(chuàng)建以及內(nèi)部鏈接和外部鏈接的添加②命名錨記和熱點(diǎn)區(qū)域的創(chuàng)建③電子郵件和空連接的創(chuàng)建①講解操作方法及注意事項(xiàng)；②上機(jī)加以實(shí)踐練習(xí)通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況單元四制作表單網(wǎng)頁①掌握注冊頁面的制作方法②美化注冊登陸頁面①了解注冊登錄頁面的具體用途②表單，表單域的插入與屬性設(shè)置③在表單中插入按鈕，文本域，文本區(qū)域④美化頁面①講解操作方法及注意事項(xiàng)；②上機(jī)加以實(shí)踐練習(xí)通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況單元五布局與美化網(wǎng)頁①掌握網(wǎng)頁樣式美化頁面的方法②初步認(rèn)識css+div①利用表格布局頁面②利用css+div布局頁面③創(chuàng)建樣式，美化頁面④利用標(biāo)簽對網(wǎng)頁布局①講解操作方法及注意事項(xiàng)；②上機(jī)加以實(shí)踐練習(xí)通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況單元六創(chuàng)建與應(yīng)用模版和庫①掌握網(wǎng)頁模板的制作方法②能夠創(chuàng)建包含庫項(xiàng)目的網(wǎng)頁①制作模板網(wǎng)頁頁面，并存為模板②模板頁面的編輯方法③利用模板生成新網(wǎng)頁，并對新網(wǎng)頁進(jìn)行編輯①講解操作方法及注意事項(xiàng)；②上機(jī)加以實(shí)踐練習(xí)通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況單元七實(shí)現(xiàn)網(wǎng)頁特效①掌握制作網(wǎng)頁特效的具體方法②能夠?qū)⒕W(wǎng)頁特效運(yùn)用到適合的頁面當(dāng)中①網(wǎng)頁中日期和問候語的顯示②文字滾動效果③字體大小的改變④自動切換焦點(diǎn)圖片①講解操作方法及注意事項(xiàng)；②上機(jī)加以實(shí)踐練習(xí)通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況單元八規(guī)劃網(wǎng)站與設(shè)計(jì)網(wǎng)頁①掌握一個(gè)較完整網(wǎng)站的制作流程②掌握網(wǎng)站的測試，發(fā)布和推廣①熟悉網(wǎng)站的開發(fā)流程②網(wǎng)頁模板等基礎(chǔ)知識的應(yīng)用③頁面等級的劃分④網(wǎng)站測試①講解操作方法及注意事項(xiàng)；②上機(jī)加以實(shí)踐練習(xí)通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第4頁。進(jìn)度表設(shè)計(jì)網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第4頁。序號或周次學(xué)時(shí)教學(xué)目標(biāo)和主要內(nèi)容單元標(biāo)題能力目標(biāo)能力訓(xùn)練項(xiàng)目編號知識目標(biāo)其他內(nèi)容12新學(xué)期課程導(dǎo)入24基本頁面的制作①掌握網(wǎng)頁制作的基本操作方法②學(xué)會簡單的網(wǎng)頁布局形式單元一①新頁面的創(chuàng)建以及頁面屬性的設(shè)置②文本輸入，空格，拆分單元格等基本操作方法③網(wǎng)頁中圖像的編輯方法與技巧通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況34基本頁面的制作①掌握各種屬性的設(shè)置方法②html語言標(biāo)記③掌握簡單的鏈接的添加單元二①利用外觀設(shè)置屬性②html的各種標(biāo)記語言的掌握③網(wǎng)頁標(biāo)題的屬性設(shè)置④超鏈接的添加通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況44基本頁面的制作①掌握各種屬性的設(shè)置方法②html語言標(biāo)記③掌握簡單的鏈接的添加單元二、三①利用外觀設(shè)置屬性②html的各種標(biāo)記語言的掌握③網(wǎng)頁標(biāo)題的屬性設(shè)置④超鏈接的添加通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況54創(chuàng)建超鏈接與導(dǎo)航欄①創(chuàng)建橫向?qū)Ш綑冖趧?chuàng)建多種形式的導(dǎo)航欄單元三①導(dǎo)航的設(shè)計(jì)與制作②導(dǎo)航鏈接的添加③下拉菜單的制作④超鏈接標(biāo)記通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況64制作表單網(wǎng)頁①制作用戶登陸頁面②美化用戶登陸頁面單元四①表單和表單域的使用以及屬性的設(shè)置②按鈕，文本域的插入與設(shè)置③字符寬度和最多字?jǐn)?shù)的設(shè)置④頁面的美化通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況74制作表單網(wǎng)頁①制作用戶注冊頁面②美化用戶注冊頁面單元四①表單和表單域的使用以及屬性的設(shè)置②按鈕，文本域的插入與設(shè)置③字符寬度和最多字?jǐn)?shù)的設(shè)置④頁面的美化通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況84布局與美化網(wǎng)頁①利用表格布局網(wǎng)頁頁面②為頁面添加樣式美化頁面單元五①表格的使用②創(chuàng)建樣式文件，定義布局樣式③利用css定義樣式美化頁面通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第5頁。9網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第5頁。4布局與美化網(wǎng)頁①利用表格布局網(wǎng)頁頁面②為頁面添加樣式美化頁面單元五①表格的使用②創(chuàng)建樣式文件，定義布局樣式③利用css定義樣式美化頁面通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況10期中考試114布局與美化網(wǎng)頁①利用Div+css布局網(wǎng)頁頁面②為頁面添加樣式美化頁面單元五①插入div標(biāo)簽，搭建網(wǎng)頁結(jié)構(gòu)②創(chuàng)建樣式文件，定義布局樣式③利用css定義樣式美化頁面通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況124創(chuàng)建與應(yīng)用模板和庫①能夠創(chuàng)建網(wǎng)頁模板頁面②創(chuàng)建包含庫項(xiàng)目和代碼片段的網(wǎng)頁單元六①創(chuàng)建與編輯網(wǎng)頁模板②定義修改可編輯區(qū)域、可選區(qū)域的方法③利用模板生成新網(wǎng)頁④創(chuàng)建庫項(xiàng)目和代碼片段，并在網(wǎng)頁插入已有的代碼片段通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況134創(chuàng)建與應(yīng)用模板和庫①能夠創(chuàng)建網(wǎng)頁模板頁面②創(chuàng)建包含庫項(xiàng)目和代碼片段的網(wǎng)頁單元六①創(chuàng)建與編輯網(wǎng)頁模板②定義修改可編輯區(qū)域、可選區(qū)域的方法③利用模板生成新網(wǎng)頁④創(chuàng)建庫項(xiàng)目和代碼片段，并在網(wǎng)頁插入已有的代碼片段通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況144實(shí)現(xiàn)網(wǎng)頁特效①掌握繪制房產(chǎn)類網(wǎng)站的布局圖②掌握房產(chǎn)類網(wǎng)站界面設(shè)計(jì)全流程單元七①編寫簡單的java程序，明確他的具體意義②在網(wǎng)頁中實(shí)現(xiàn)當(dāng)前日期，不同時(shí)段顯示不同的問候語③滾動效果的實(shí)現(xiàn)④鼠標(biāo)指示時(shí)切換圖片的方法通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況154實(shí)現(xiàn)網(wǎng)頁特效①掌握繪制房產(chǎn)類網(wǎng)站的布局圖②掌握房產(chǎn)類網(wǎng)站界面設(shè)計(jì)全流程單元七①編寫簡單的java程序，明確他的具體意義②在網(wǎng)頁中實(shí)現(xiàn)當(dāng)前日期，不同時(shí)段顯示不同的問候語③滾動效果的實(shí)現(xiàn)④鼠標(biāo)指示時(shí)切換圖片的方法通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況164規(guī)劃網(wǎng)站與設(shè)計(jì)網(wǎng)頁①掌握繪制房產(chǎn)類網(wǎng)站的布局圖②掌握房產(chǎn)類網(wǎng)站界面設(shè)計(jì)全流程單元八①熟悉網(wǎng)站的開發(fā)流程和規(guī)范②合理的規(guī)劃布局網(wǎng)站風(fēng)格和結(jié)構(gòu)③設(shè)計(jì)模板④測試網(wǎng)站通過現(xiàn)場操作、上傳作業(yè)方式評價(jià)學(xué)生掌握情況174期末復(fù)習(xí)184期末考試第一堂課設(shè)計(jì)（網(wǎng)頁制作流程和設(shè)計(jì)常識）網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第6頁。1.簡介網(wǎng)頁設(shè)計(jì)制作教學(xué)設(shè)計(jì)全文共8頁，當(dāng)前為第6頁。2.案例解析-斑馬網(wǎng)1）網(wǎng)站的分類2）構(gòu)成網(wǎng)頁的元素3）網(wǎng)頁制作的基本步驟3.案例解析-布局新浪1）布局實(shí)用原則2）布局應(yīng)用3）優(yōu)秀布局賞析4.案例解析-配色亞馬遜1）網(wǎng)頁配色實(shí)用原則2）配色應(yīng)用3）經(jīng)典配色賞析5.案例解析-08奧運(yùn)網(wǎng)站設(shè)計(jì)說明書1）設(shè)計(jì)說明書的目的2）設(shè)計(jì)說明書寫注意事項(xiàng)3）設(shè)計(jì)說明書的一般步驟考核方案設(shè)計(jì)（供參考）本課程屬于實(shí)踐性、應(yīng)用性很強(qiáng)的課程，所以要加強(qiáng)過程性考核，加強(qiáng)動手應(yīng)用能力的考核。1、項(xiàng)目一采用實(shí)操考核的方式；項(xiàng)目二采用交大作業(yè)的方式總成績＝平時(shí)考核成績（10分）＋實(shí)踐考核成績