《網(wǎng)頁(yè)設(shè)計(jì)》課程標(biāo)準(zhǔn)

1、網(wǎng)頁(yè)設(shè)計(jì)課程標(biāo)準(zhǔn)課程名稱(chēng)：網(wǎng)頁(yè)設(shè)計(jì)適用專(zhuān)業(yè)：計(jì)算機(jī)應(yīng)用技術(shù)，電子商務(wù)建議學(xué)時(shí)：72學(xué)分：41.前言1.1課程的性質(zhì) 網(wǎng)頁(yè)設(shè)計(jì)dreamweaver是計(jì)算機(jī)應(yīng)用技術(shù)專(zhuān)業(yè)和電子商務(wù)的主要專(zhuān)業(yè)課之一，是為滿足行業(yè)企業(yè)在網(wǎng)絡(luò)媒體內(nèi)容制作崗位對(duì)靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)和制作人員的用人需求而開(kāi)設(shè)的一門(mén)專(zhuān)業(yè)必修課，占4學(xué)分。1.2 課程定位本課程主要培養(yǎng)學(xué)生從事網(wǎng)頁(yè)設(shè)計(jì)與制作的基本技能，使學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)的概念和方法，能夠運(yùn)用專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)工具和腳本語(yǔ)言，進(jìn)行網(wǎng)站規(guī)劃、建立和維護(hù)，具備網(wǎng)頁(yè)設(shè)計(jì)崗位的職業(yè)技術(shù)能力。在本課程之前，學(xué)生已學(xué)習(xí)了計(jì)算機(jī)應(yīng)用基礎(chǔ)、Photoshop平面設(shè)計(jì)等基礎(chǔ)課程的，具備基本的計(jì)算機(jī)操作與圖形

2、圖像制作能力，本課程的后續(xù)課程是ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)。1.3設(shè)計(jì)思路本課程的設(shè)計(jì)思路以就業(yè)為導(dǎo)向，按照基于工作過(guò)程的職業(yè)能力來(lái)進(jìn)行課程開(kāi)發(fā)，邀請(qǐng)企業(yè)行業(yè)網(wǎng)絡(luò)專(zhuān)家對(duì)計(jì)算機(jī)網(wǎng)絡(luò)專(zhuān)業(yè)所涵蓋的崗位群進(jìn)行工作任務(wù)和職業(yè)能力分析，以此為依據(jù)確定本課程的工作任務(wù)和課程內(nèi)容，并參照行業(yè)職業(yè)標(biāo)準(zhǔn)，以任務(wù)引領(lǐng)為課程框架，將課程按遞進(jìn)方式設(shè)計(jì)成項(xiàng)目，并以項(xiàng)目為單元組織教學(xué)，使學(xué)生由淺入深，以點(diǎn)到面的全面掌握網(wǎng)頁(yè)設(shè)計(jì)的職業(yè)技能。同時(shí)開(kāi)發(fā)教材，對(duì)教學(xué)過(guò)程的組織 、教學(xué)條件、課程評(píng)價(jià)都進(jìn)行了詳細(xì)的設(shè)計(jì)，完成本課程的整體教學(xué)內(nèi)容和教學(xué)實(shí)施的整體設(shè)計(jì)，建立了基于網(wǎng)頁(yè)設(shè)計(jì)的課程標(biāo)準(zhǔn)。2.課程目標(biāo)本課程以學(xué)生能夠獨(dú)立進(jìn)行靜態(tài)網(wǎng)站開(kāi)

3、發(fā)與維護(hù)的實(shí)際工作能力為學(xué)習(xí)目標(biāo)，要求學(xué)生具備綜合運(yùn)用HTML技術(shù)制作網(wǎng)頁(yè)，規(guī)劃、開(kāi)發(fā)、發(fā)布管理靜態(tài)網(wǎng)站的專(zhuān)業(yè)知識(shí)和技能，形成解決實(shí)際應(yīng)用問(wèn)題的方法能力，為以后的學(xué)習(xí)ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)課程打下基礎(chǔ)。本課程培養(yǎng)學(xué)生綜合運(yùn)用HTML技術(shù)制作網(wǎng)頁(yè)，以及使用常用網(wǎng)頁(yè)設(shè)計(jì)工具規(guī)劃、開(kāi)發(fā)、發(fā)布、管理靜態(tài)網(wǎng)站的專(zhuān)業(yè)知識(shí)和技能，具備解決實(shí)際應(yīng)用問(wèn)題的方法能力，為以后的學(xué)習(xí)ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)課程打下基礎(chǔ)。具體目標(biāo)如下：2.1知識(shí)目標(biāo)能處理網(wǎng)頁(yè)圖形圖像素材能規(guī)劃、創(chuàng)建、發(fā)布、維護(hù)靜態(tài)網(wǎng)站能運(yùn)用javascript控制網(wǎng)頁(yè)行為能運(yùn)用多種布局技術(shù)制作網(wǎng)頁(yè)布局 能靈活運(yùn)用css技術(shù)規(guī)范、美化網(wǎng)頁(yè)內(nèi)容能跟蹤和學(xué)習(xí)并應(yīng)用網(wǎng)

4、頁(yè)設(shè)計(jì)與制作的新知識(shí)和新技術(shù)2.2技能目標(biāo) 能合理的規(guī)劃商業(yè)網(wǎng)站； 能合理設(shè)計(jì)網(wǎng)頁(yè)的布局方案和美術(shù)設(shè)計(jì)方案； 能規(guī)范的編寫(xiě)網(wǎng)頁(yè)策劃書(shū)； 能熟練應(yīng)用Photoshop繪制網(wǎng)頁(yè)導(dǎo)航要素； 能熟練應(yīng)用Photoshop繪制網(wǎng)頁(yè)信息區(qū)塊； 能熟練應(yīng)用Photoshop繪制網(wǎng)頁(yè)美術(shù)文字效果； 能熟練應(yīng)用Photoshop處理網(wǎng)頁(yè)插圖； 能熟練應(yīng)用Photoshop繪制網(wǎng)頁(yè)整體效果圖； 能熟練應(yīng)用Photoshop正確的對(duì)網(wǎng)頁(yè)效果圖進(jìn)行切片和優(yōu)化； 能熟練應(yīng)用Dreamweaver進(jìn)行網(wǎng)站站點(diǎn)管理和初始化頁(yè)面； 能熟練應(yīng)用Dreamweaver對(duì)網(wǎng)頁(yè)的總體結(jié)構(gòu)進(jìn)行排版； 能熟練應(yīng)用Dreamweaver對(duì)

5、網(wǎng)頁(yè)插片和文字進(jìn)行編排； 能熟練應(yīng)用Dreamweaver制作網(wǎng)頁(yè)的細(xì)節(jié)效果；能應(yīng)用Dreamweaver進(jìn)行DIV+CSS結(jié)構(gòu)排版； 能熟練應(yīng)用Dreamweaver制作模板與網(wǎng)站子頁(yè)； 能應(yīng)用Dreamweaver制作框架頁(yè)面結(jié)構(gòu)和簡(jiǎn)單頁(yè)面腳本交互功能； 能熟練應(yīng)用Dreamweaver鏈接網(wǎng)頁(yè)與測(cè)試網(wǎng)站； 能應(yīng)用互聯(lián)網(wǎng)資源發(fā)布網(wǎng)站； 能熟練應(yīng)用Dreamweaver維護(hù)網(wǎng)頁(yè)。 2.3 素質(zhì)目標(biāo)培養(yǎng)良好的勞動(dòng)紀(jì)律觀念； 培養(yǎng)認(rèn)真做事、細(xì)心做事的態(tài)度；培養(yǎng)團(tuán)隊(duì)協(xié)作精神； 培養(yǎng)表述、回答等語(yǔ)言表達(dá)能力； 培養(yǎng)交流、溝通的能力 3.課程內(nèi)容和學(xué)時(shí)安排以真實(shí)工作項(xiàng)目為依據(jù)，對(duì)項(xiàng)目進(jìn)行功能分解、歸納

6、，提取工作任務(wù)，分析工作任務(wù)所涉及的相關(guān)知識(shí)，設(shè)計(jì)一系列能力要求不斷提升的進(jìn)階式學(xué)習(xí)任務(wù)，以學(xué)習(xí)任務(wù)為教學(xué)單元組織課程教學(xué)，將網(wǎng)頁(yè)各類(lèi)語(yǔ)言的應(yīng)用融入到各學(xué)習(xí)情境中，模擬網(wǎng)站開(kāi)發(fā)流程，設(shè)計(jì)以訓(xùn)練學(xué)生為主、教師指導(dǎo)為輔的基于工作過(guò)程教學(xué)活動(dòng)，培養(yǎng)學(xué)生崗位職業(yè)技能應(yīng)用及自主學(xué)習(xí)能力，從而構(gòu)建該課程的教學(xué)內(nèi)容。網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)內(nèi)容設(shè)計(jì)如下表所示。 (一)總體設(shè)計(jì)序號(hào)任務(wù)名稱(chēng)知識(shí)要點(diǎn)技能目標(biāo)課時(shí)1制作圖文混排網(wǎng)頁(yè) 常見(jiàn)網(wǎng)頁(yè)設(shè)計(jì)工具的使用 HTML文檔基本結(jié)構(gòu) 文本排版控制標(biāo)記符 圖像插入標(biāo)記符 特殊字符 css的意義、創(chuàng)建與使用方法 安裝與啟用網(wǎng)頁(yè)制作軟件 熟悉網(wǎng)頁(yè)制作的基本步驟 正確插入文本與特殊字符

7、 正確對(duì)文本進(jìn)行分段分行 正確插入圖像 運(yùn)用css技術(shù)控制文字圖片樣式42制作個(gè)人簡(jiǎn)歷網(wǎng)頁(yè) 有序列表標(biāo)記符 無(wú)序列表標(biāo)記符 表格標(biāo)記符 超鏈接標(biāo)記符 Css技術(shù)對(duì)列表的控制方法 制作有序列表、無(wú)序列表 制作混合列表 運(yùn)用超鏈接啟動(dòng)電子郵箱鏈接 .運(yùn)用表格進(jìn)行簡(jiǎn)單頁(yè)面排版 運(yùn)用css技術(shù)設(shè)置列表顯示方式43制作電子相冊(cè)網(wǎng)頁(yè) 網(wǎng)頁(yè)圖像素材的特點(diǎn)與主要類(lèi)型 Fireworks對(duì)圖片進(jìn)行批處理的方法 電子相冊(cè)排版要點(diǎn) 圖像、表格、超鏈接標(biāo)記符的相關(guān)屬性 Css技術(shù)的濾鏡使用方法 熟悉網(wǎng)頁(yè)圖像素材的特點(diǎn)與類(lèi)型 掌握Fireworks的基本操作方法 了解并掌握網(wǎng)頁(yè)圖片處理的主要方法 熟知圖像、表格、超鏈接

8、標(biāo)記符的屬性 運(yùn)用css濾鏡技術(shù)美化圖片效果64制作唐詩(shī)欣賞網(wǎng)站 本地網(wǎng)站的創(chuàng)建與發(fā)布 IIS的安裝與設(shè)置方法 網(wǎng)站的規(guī)劃與制作流程 框架技術(shù)進(jìn)行網(wǎng)頁(yè)布局的方法 超鏈接標(biāo)記符在框架技術(shù)中的作用 錨點(diǎn)鏈接技術(shù) 網(wǎng)站LOGO的制作方法 制作網(wǎng)站flash banner的方法 多媒體素材網(wǎng)頁(yè)的制作方法 個(gè)人網(wǎng)站的規(guī)劃與制作流程 正確創(chuàng)建、設(shè)置、發(fā)布本地網(wǎng)站 正確安裝、設(shè)置與管理IIS 運(yùn)用框架技術(shù)進(jìn)行網(wǎng)頁(yè)布局 錨點(diǎn)技術(shù)在長(zhǎng)版面網(wǎng)頁(yè)中的應(yīng)用 運(yùn)用圖像設(shè)計(jì)軟件制作LOGO 運(yùn)用flash制作具有動(dòng)態(tài)效果的banner 掌握向網(wǎng)頁(yè)插入動(dòng)畫(huà)、視頻等多媒體素材的方法 熟悉css控制超鏈接樣式的方法105制作個(gè)

9、人網(wǎng)站 個(gè)人網(wǎng)站的規(guī)劃方法與制作特點(diǎn) 運(yùn)用圖形制作工具繪制網(wǎng)頁(yè)布局 Fireworks切片并導(dǎo)出網(wǎng)頁(yè)的方法 Dreamweaver布局切片網(wǎng)頁(yè)的方法 頁(yè)內(nèi)框架技術(shù)布局網(wǎng)頁(yè)的方法 動(dòng)態(tài)導(dǎo)航條的制作方法 css進(jìn)行樣式規(guī)范與美化網(wǎng)頁(yè)的方法 了解個(gè)人網(wǎng)站的制作方法與特點(diǎn) 設(shè)計(jì)并繪制網(wǎng)頁(yè)布局圖 應(yīng)用切片技術(shù)設(shè)計(jì)網(wǎng)頁(yè)布局結(jié)構(gòu) 運(yùn)用Dreamweaver優(yōu)化切片網(wǎng)頁(yè) 運(yùn)用頁(yè)內(nèi)框架技術(shù)實(shí)現(xiàn)網(wǎng)站超鏈接 掌握制作動(dòng)態(tài)導(dǎo)航條的方法 運(yùn)用css對(duì)網(wǎng)頁(yè)進(jìn)行樣式規(guī)范與美化106制作用戶注冊(cè)網(wǎng)頁(yè) 表單與表單元素的相關(guān)標(biāo)記符 表單與表單元素的作用 表格布局表單元素 css對(duì)表格、表單元素的控制方法 Dreamweaver檢

10、驗(yàn)表單行為的應(yīng)用 以電子郵件方式提交表單的方法 熟悉表單及表單元素的設(shè)置方法 掌握表格布局表單元素的方法 運(yùn)用css對(duì)表格、表單元素進(jìn)行規(guī)范與美化 掌握Dreamweaver驗(yàn)證表單的方法 掌握電子郵件形式提交表單的方法47制作智能顯示效果的網(wǎng)頁(yè) Javascript基本語(yǔ)法知識(shí) Javascript語(yǔ)句嵌入到html的方法 表單元素調(diào)用Javascript語(yǔ)句的方法 Javascript函數(shù)的調(diào)用方法 時(shí)間對(duì)象的使用方法 瀏覽器對(duì)象的控制方法 熟悉javascript語(yǔ)法知識(shí) 掌握在html中調(diào)用javascript代碼的方法 熟悉調(diào)用javascript的事件 控制與使用時(shí)間對(duì)象、瀏覽器對(duì)

11、象68制作訂單網(wǎng)頁(yè) Javascript判斷、循環(huán)等語(yǔ)句的語(yǔ)法知識(shí) 創(chuàng)建與調(diào)用Javascript自定義函數(shù)的方法 數(shù)組對(duì)象的控制與使用方法 字符對(duì)象的控制與使用方法 文檔對(duì)象的控制與使用方法 靈活運(yùn)用Javascript分支與循環(huán)語(yǔ)句 掌握J(rèn)avascript自定義函數(shù)的方法 掌握數(shù)組對(duì)象、字符對(duì)象、文檔對(duì)象的控制與使用方法 綜合運(yùn)用javascript、html、css技術(shù)69制作在線考試網(wǎng)頁(yè) Javascript對(duì)表單元素的訪問(wèn)與控制方法 定時(shí)器的使用方法 HTML技術(shù)的綜合應(yīng)用方法 掌握J(rèn)avascript訪問(wèn)與控制表單元素的方法 靈活設(shè)置與取消定時(shí)器 運(yùn)用HTML處理頁(yè)面的能力610

12、制作數(shù)碼產(chǎn)品門(mén)戶網(wǎng)站 門(mén)戶網(wǎng)站的設(shè)計(jì)、規(guī)劃與制作流程 網(wǎng)站創(chuàng)建、發(fā)布、維護(hù)管理的方法 Div+css布局網(wǎng)頁(yè)的方法 創(chuàng)建子菜單的方法 html技術(shù) Dreamweaver的高級(jí)應(yīng)用技術(shù) 熟悉運(yùn)用div+css技術(shù)設(shè)計(jì)網(wǎng)頁(yè) 掌握Dreamweaver創(chuàng)建與運(yùn)用div Ap的方法 掌握運(yùn)用Dreamweaver時(shí)間軸功能制作網(wǎng)頁(yè)漂移元素的方法 掌握Dreamweaver行為面板的使用方法 靈活應(yīng)用HTML增加網(wǎng)頁(yè)特效1268整個(gè)課程通過(guò)10個(gè)技術(shù)難度漸進(jìn)式的工作過(guò)程為向?qū)В缘湫凸ぷ魅蝿?wù)為基點(diǎn)，設(shè)計(jì)綜合理論知識(shí)、操作技能和職業(yè)素養(yǎng)為一體教學(xué)單元活動(dòng)。用任務(wù)驅(qū)動(dòng)教學(xué)的各個(gè)環(huán)節(jié)。邊做邊學(xué)，帶動(dòng)相關(guān)知識(shí)

13、點(diǎn)，使學(xué)生通過(guò)完成工作任務(wù)教學(xué)單元的學(xué)習(xí)，不但能夠掌握網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)的專(zhuān)業(yè)知識(shí)和專(zhuān)業(yè)技能，還能夠全面培養(yǎng)其團(tuán)隊(duì)協(xié)作、溝通表達(dá)、工作責(zé)任心、職業(yè)道德與規(guī)范等綜合素質(zhì)，學(xué)生通過(guò)學(xué)習(xí)的過(guò)程掌握工作崗位所需要的各項(xiàng)技能和相關(guān)專(zhuān)業(yè)知識(shí)。（二）課程單元內(nèi)容任務(wù)名稱(chēng)一、制作圖文并茂的網(wǎng)頁(yè)參考課時(shí)2知識(shí)要點(diǎn) 常見(jiàn)網(wǎng)頁(yè)設(shè)計(jì)工具的使用 HTML文檔基本結(jié)構(gòu) 文本排版控制標(biāo)記符 圖像插入標(biāo)記符 特殊字符以及物理顯示標(biāo)記符 css的意義、創(chuàng)建與使用方法技能目標(biāo) 安裝和啟動(dòng)網(wǎng)頁(yè)制作軟件 熟悉網(wǎng)頁(yè)制作的基本步驟 正確插入文本與特殊字符 正確對(duì)文本進(jìn)行分段分行 正確插入圖像 運(yùn)用css技術(shù)控制文字圖片樣式任務(wù)驅(qū)動(dòng)工作過(guò)

14、程1安裝、啟動(dòng)與認(rèn)識(shí)常用的網(wǎng)頁(yè)制作工具2制作一個(gè)基本結(jié)構(gòu)完整、內(nèi)容空白的HTML文檔3設(shè)置HTML文檔的基本屬性4向HTML文檔中添加文本信息，并運(yùn)用相關(guān)標(biāo)記符號(hào)進(jìn)行排版5向HTML文檔插入圖片，并運(yùn)用相關(guān)標(biāo)記符號(hào)進(jìn)行圖文混排6為網(wǎng)頁(yè)的基本屬性、文字的樣式建立并應(yīng)用相關(guān)css類(lèi)型，規(guī)范樣式美化頁(yè)面拓展任務(wù)1給定文本內(nèi)容與素材，制作一個(gè)圖文并茂的網(wǎng)頁(yè)2給定主題，自行組織與制作素材，制作一個(gè)圖文并茂的網(wǎng)頁(yè)任務(wù)名稱(chēng)二、制作個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)參考課時(shí)4知識(shí)要點(diǎn) 有序列表標(biāo)記符 無(wú)序列表標(biāo)記符 表格標(biāo)記符 超鏈接標(biāo)記符 Css技術(shù)對(duì)列表的控制方法技能目標(biāo) 制作有序列表、無(wú)序列表 制作混合列表 運(yùn)用超鏈接標(biāo)記符

15、啟動(dòng)電子郵箱鏈接 運(yùn)用表格進(jìn)行簡(jiǎn)單頁(yè)面排版 運(yùn)用css技術(shù)設(shè)置列表顯示方式簡(jiǎn)單任務(wù)活動(dòng)安排序號(hào)任務(wù)名稱(chēng)說(shuō)明1制作一個(gè)包含有序列表、無(wú)序列表的網(wǎng)頁(yè)應(yīng)用UL OL標(biāo)記符2制作一個(gè)包含混合列表的網(wǎng)頁(yè)嵌套應(yīng)用UL OL標(biāo)記符3制作一個(gè)顯示課程表的網(wǎng)頁(yè)應(yīng)用TABLE標(biāo)記符4制作一個(gè)將以上鏈接以上網(wǎng)頁(yè)的網(wǎng)頁(yè)應(yīng)用A標(biāo)記符5制作個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)給出布局供學(xué)生參考，分析制作過(guò)程，給出指引后學(xué)生自行完成任務(wù)工作過(guò)程指導(dǎo)(1)表格布局頁(yè)面(2)對(duì)表格中的單元格進(jìn)行合并、拆分，完成頁(yè)面主體格局(3)在相應(yīng)單元格中插入相關(guān)信息，完成簡(jiǎn)歷信息制作(4)電子郵箱啟動(dòng)的制作任務(wù)名稱(chēng)三、制作電子相冊(cè)網(wǎng)頁(yè)參考課時(shí)6知識(shí)要點(diǎn) 網(wǎng)頁(yè)圖像

16、素材的特點(diǎn)與主要類(lèi)型 Fireworks對(duì)圖片進(jìn)行批處理的方法 電子相冊(cè)排版要點(diǎn) 圖像、表格、超鏈接標(biāo)記符的相關(guān)屬性 Css技術(shù)的濾鏡使用方法技能目標(biāo) 熟悉網(wǎng)頁(yè)圖像素材的特點(diǎn)與類(lèi)型 掌握Fireworks的基本操作方法 了解并掌握網(wǎng)頁(yè)圖片處理的主要方法 熟知圖像、表格、超鏈接標(biāo)記符的屬性 運(yùn)用css濾鏡技術(shù)美化圖片效果任務(wù)驅(qū)動(dòng)工作過(guò)程1規(guī)劃與設(shè)計(jì)網(wǎng)頁(yè)的風(fēng)格與布局結(jié)構(gòu)2運(yùn)用Fireworks制作具有藝術(shù)效果的網(wǎng)頁(yè)文字標(biāo)題3運(yùn)用Fireworks對(duì)相冊(cè)素材圖片的大小、版面樣式、色彩等進(jìn)行批處理，并導(dǎo)出結(jié)果4利用表格對(duì)網(wǎng)頁(yè)進(jìn)行基本布局5創(chuàng)建css文件，設(shè)置文字與圖片格式，特別是為圖片設(shè)置美化的濾鏡效

17、果6向布局表格的單元格中插入相應(yīng)的圖片素材和文字說(shuō)明，并應(yīng)用css樣式7為圖片素材和文字設(shè)置相關(guān)超鏈接拓展任務(wù)任務(wù)名稱(chēng)四、制作唐詩(shī)欣賞網(wǎng)站參考課時(shí)10知識(shí)要點(diǎn) 本地網(wǎng)站的創(chuàng)建與發(fā)布 IIS的安裝與設(shè)置方法 網(wǎng)站的規(guī)劃與制作流程 框架技術(shù)進(jìn)行網(wǎng)頁(yè)布局的方法 超鏈接標(biāo)記符在框架技術(shù)中的作用 錨點(diǎn)鏈接技術(shù) 網(wǎng)站LOGO的制作方法 制作網(wǎng)站flash banner的方法 多媒體素材網(wǎng)頁(yè)的制作方法技能目標(biāo) 正確創(chuàng)建、設(shè)置、發(fā)布本地網(wǎng)站 正確安裝、設(shè)置與管理IIS 運(yùn)用框架技術(shù)進(jìn)行網(wǎng)頁(yè)布局 錨點(diǎn)技術(shù)在長(zhǎng)版面網(wǎng)頁(yè)中的應(yīng)用 運(yùn)用圖像設(shè)計(jì)軟件制作LOGO 運(yùn)用flash制作具有動(dòng)態(tài)效果的banner 掌握向網(wǎng)頁(yè)

18、插入動(dòng)畫(huà)、視頻等多媒體素材的方法 熟悉css控制超鏈接樣式的方法任務(wù)驅(qū)動(dòng)工作過(guò)程1規(guī)劃網(wǎng)站的模塊（可按作者劃分模塊）、首頁(yè)布局結(jié)構(gòu)（左上下結(jié)構(gòu)）2素材準(zhǔn)備：設(shè)計(jì)并制作網(wǎng)站LOGO、flash Banner及相關(guān)多媒體素材3創(chuàng)建相關(guān)文件夾，在Dreamweaver創(chuàng)建本地站點(diǎn)，在IIS做相關(guān)設(shè)置4運(yùn)用錨點(diǎn)技術(shù)創(chuàng)建長(zhǎng)版面子模塊網(wǎng)頁(yè)，并運(yùn)用css技術(shù)實(shí)現(xiàn)圖文并茂的效果5創(chuàng)建left.htm頁(yè)面，插入LOGO、標(biāo)題并設(shè)置超鏈接源及目的窗口，形成導(dǎo)航條效果6創(chuàng)建top.htm頁(yè)面，插入相關(guān)flash Banne7創(chuàng)建main.htm頁(yè)面，內(nèi)容為圖文并茂的網(wǎng)站主題簡(jiǎn)介，作為首頁(yè)主框架的內(nèi)容 8創(chuàng)建首頁(yè)in

19、dex.htm，運(yùn)用框架集布局頁(yè)面，插入相關(guān)的框架頁(yè)面，完成相關(guān)超鏈接9發(fā)布與調(diào)試網(wǎng)站任務(wù)名稱(chēng)五、制作個(gè)人網(wǎng)站參考課時(shí)10知識(shí)要點(diǎn) 個(gè)人網(wǎng)站的規(guī)劃方法與制作特點(diǎn) 運(yùn)用圖形制作工具設(shè)計(jì)繪制網(wǎng)頁(yè)布局 Fireworks執(zhí)行切片并導(dǎo)出網(wǎng)頁(yè)的方法 Dreamweaver布局切片網(wǎng)頁(yè)的方法 頁(yè)內(nèi)框架技術(shù)在網(wǎng)頁(yè)布局中的應(yīng)用方法 動(dòng)態(tài)導(dǎo)航條的制作方法 css對(duì)網(wǎng)頁(yè)進(jìn)行樣式規(guī)范與美化的方法技能目標(biāo) 了解個(gè)人網(wǎng)站的制作方法與特點(diǎn) 設(shè)計(jì)并繪制網(wǎng)頁(yè)布局圖 應(yīng)用切片技術(shù)設(shè)計(jì)網(wǎng)頁(yè)布局結(jié)構(gòu) 運(yùn)用Dreamweaver優(yōu)化切片網(wǎng)頁(yè) 運(yùn)用頁(yè)內(nèi)框架技術(shù)實(shí)現(xiàn)網(wǎng)站超鏈接 掌握制作動(dòng)態(tài)導(dǎo)航條的方法 運(yùn)用css對(duì)網(wǎng)頁(yè)進(jìn)行樣式規(guī)范與美化

20、任務(wù)驅(qū)動(dòng)工作過(guò)程1規(guī)劃個(gè)人網(wǎng)站的模塊內(nèi)容（基本模塊為：自我介紹、個(gè)人愛(ài)好、個(gè)人相冊(cè)、文章）、首頁(yè)布局結(jié)構(gòu)（上左右結(jié)構(gòu)）2設(shè)計(jì)并繪制網(wǎng)站首頁(yè)布局圖3在Fireworks中對(duì)布局圖進(jìn)行切片操作，并導(dǎo)出文件夾4在Dreamweaver創(chuàng)建本地站點(diǎn)，在IIS做相關(guān)設(shè)置5素材準(zhǔn)備：動(dòng)態(tài)導(dǎo)航條及相關(guān)多媒體素材6創(chuàng)建css文件，在Dreamweaver設(shè)置并優(yōu)化切片網(wǎng)頁(yè)，創(chuàng)建頁(yè)內(nèi)框架標(biāo)記符7創(chuàng)建并制作“自我介紹”、“個(gè)人愛(ài)好”、“相冊(cè)”、“文章”等子模塊頁(yè)面及相關(guān)css8建立超鏈接，完成網(wǎng)站拓展任務(wù)運(yùn)用切片技術(shù)，由全球300強(qiáng)企業(yè)網(wǎng)站首頁(yè)的截圖，設(shè)計(jì)并制作首頁(yè)、二級(jí)子頁(yè)樣式任務(wù)名稱(chēng)六、制作用戶注冊(cè)網(wǎng)頁(yè)參考課

21、時(shí)4知識(shí)要點(diǎn) 表單與表單元素的相關(guān)標(biāo)記符 表單與表單元素的作用 表格布局表單元素 css對(duì)表格、表單元素的控制方法 Dreamweaver檢驗(yàn)表單行為的應(yīng)用 以電子郵件方式提交表單的方法技能目標(biāo) 熟悉表單及表單元素的設(shè)置方法 掌握表格布局表單元素的方法 運(yùn)用css對(duì)表格、表單元素進(jìn)行規(guī)范與美化 掌握Dreamweaver驗(yàn)證表單的方法 掌握電子郵件形式提交表單的方法任務(wù)驅(qū)動(dòng)工作過(guò)程1創(chuàng)建頁(yè)面，插入表單標(biāo)記符，將表單行為設(shè)置為電子郵件提交2在表單中插入表格，并創(chuàng)建相應(yīng)的css樣式對(duì)表格格式進(jìn)行控制3在表格的單元格中插入表單元素，并創(chuàng)建相應(yīng)的css樣式對(duì)表單格式進(jìn)行控制4通過(guò)Dreamweaver

22、的行為面板設(shè)置單擊提交按鈕的行為5測(cè)試網(wǎng)頁(yè)，驗(yàn)證設(shè)計(jì)結(jié)果任務(wù)名稱(chēng)七、制作智能顯示效果的網(wǎng)頁(yè)參考課時(shí)8知識(shí)要點(diǎn) Javascript基本語(yǔ)法知識(shí) Javascript語(yǔ)句嵌入到html的方法 表單元素調(diào)用Javascript語(yǔ)句的方法 Javascript函數(shù)的調(diào)用方法 時(shí)間對(duì)象的使用方法 瀏覽器對(duì)象的控制方法技能目標(biāo) 熟悉javascript語(yǔ)法知識(shí) 掌握在html中調(diào)用javascript代碼的方法 熟悉調(diào)用javascript的事件 控制與使用時(shí)間對(duì)象、瀏覽器對(duì)象簡(jiǎn)單任務(wù)活動(dòng)安排序號(hào)任務(wù)名稱(chēng)說(shuō)明1制作一個(gè)能夠輸入并記載用戶信息的網(wǎng)頁(yè)prompt( )函數(shù)的調(diào)用2制作一個(gè)具有顯示當(dāng)前時(shí)間功能

23、的網(wǎng)頁(yè)時(shí)間對(duì)象的使用3制作一個(gè)可以更改網(wǎng)頁(yè)背景顏色的網(wǎng)頁(yè)文檔對(duì)象4制作一個(gè)可以設(shè)置瀏覽器狀態(tài)欄信息的網(wǎng)頁(yè)瀏覽器對(duì)象5制作一個(gè)根據(jù)具有智能顯示效果的網(wǎng)頁(yè)給出案例供學(xué)生參考，分析制作過(guò)程，給出指引并鼓勵(lì)學(xué)生添加智能效果，學(xué)生自行完成任務(wù)工作過(guò)程指導(dǎo)(1)根據(jù)用戶的訪問(wèn)時(shí)間設(shè)置相應(yīng)的問(wèn)候語(yǔ)(2)根據(jù)用戶的喜好設(shè)置網(wǎng)頁(yè)背景與字體顏色(3)狀態(tài)欄中顯示用戶當(dāng)前的操作行為(4)具有設(shè)置為默認(rèn)頁(yè)面、添加到收藏夾等功能任務(wù)名稱(chēng)八、制作訂單網(wǎng)頁(yè)參考課時(shí)8知識(shí)要點(diǎn) Javascript判斷、循環(huán)等語(yǔ)句的語(yǔ)法知識(shí) 創(chuàng)建與調(diào)用Javascript自定義函數(shù)的方法 數(shù)組對(duì)象的控制與使用方法 字符對(duì)象的控制與使用方法 文

24、檔對(duì)象的控制與使用方法技能目標(biāo) 靈活運(yùn)用Javascript分支與循環(huán)語(yǔ)句 掌握J(rèn)avascript自定義函數(shù)的方法 掌握數(shù)組對(duì)象、字符對(duì)象、文檔對(duì)象的控制與使用方法 綜合運(yùn)用javascript、html、css技術(shù)簡(jiǎn)單任務(wù)活動(dòng)安排序號(hào)任務(wù)名稱(chēng)說(shuō)明1制作一個(gè)能記錄并輸出一組用戶登記信息的網(wǎng)頁(yè)prompt( )+數(shù)組+文檔對(duì)象2在以上任務(wù)增加功能：用戶可以控制體中止輸入信息判斷語(yǔ)句的使用3在以上任務(wù)增加功能：美化用戶的輸出信息css5制作訂單網(wǎng)頁(yè)給出案例供學(xué)生參考，分析制作過(guò)程，給出指引并鼓勵(lì)學(xué)生從界面友好、操作方便等方面增加網(wǎng)頁(yè)功能，學(xué)生自行完成任務(wù)工作過(guò)程指導(dǎo)(1)能列出商品的名稱(chēng)及單價(jià)供

25、用戶選擇(2)用戶可以在選擇商品的同時(shí)輸入數(shù)量(3)根據(jù)用戶輸入的信息輸出訂單，包括商品名稱(chēng)、數(shù)量、單價(jià)，以及總的金額(4)用戶確認(rèn)訂單后，信息以郵件的方式提交任務(wù)名稱(chēng)九、制作在線考試網(wǎng)頁(yè)參考課時(shí)8知識(shí)要點(diǎn) Javascript對(duì)表單元素的訪問(wèn)與控制方法 定時(shí)器的使用方法 HTML技術(shù)的綜合應(yīng)用方法技能目標(biāo) 掌握J(rèn)avascript訪問(wèn)與控制表單元素的方法 靈活設(shè)置與取消定時(shí)器 運(yùn)用HTML處理頁(yè)面的能力簡(jiǎn)單任務(wù)活動(dòng)安排序號(hào)任務(wù)名稱(chēng)說(shuō)明1制作一個(gè)具有單選及復(fù)選按鈕的網(wǎng)頁(yè)表單設(shè)計(jì)2在以上任務(wù)增加功能：記載用戶的選擇信息，并輸出訪問(wèn)表單、數(shù)組對(duì)象、alert()3在以上任務(wù)增加功能：一定時(shí)間內(nèi)瀏覽

26、器自動(dòng)關(guān)閉定時(shí)器、瀏覽器對(duì)象4在以上任務(wù)增加功能：將信息輸出在新瀏覽器窗口中文檔對(duì)象、瀏覽器對(duì)象5制作在線考試網(wǎng)頁(yè)向演示案例效果，提示學(xué)生存在幾個(gè)問(wèn)題：成績(jī)最后的提交方式、若自動(dòng)關(guān)閉后成績(jī)?nèi)绾嗡?、等等，鼓?lì)學(xué)生進(jìn)一步完善任務(wù)工作過(guò)程指導(dǎo)(1)登記并顯示用戶登陸信息，并顯示倒計(jì)時(shí)時(shí)間(2)以單選、多選按鈕的形式顯示題目(3)用戶按提交按鈕后，彈出新窗口顯示考試結(jié)果：正確答案、用戶答案、題目得分、總得分(4)在時(shí)限內(nèi)若未按提交按鈕，則考試窗口自動(dòng)關(guān)閉任務(wù)名稱(chēng)十、制作數(shù)碼產(chǎn)品門(mén)戶網(wǎng)站參考課時(shí)12知識(shí)要點(diǎn) 門(mén)戶網(wǎng)站的設(shè)計(jì)、規(guī)劃與制作流程 網(wǎng)站創(chuàng)建、發(fā)布、維護(hù)管理的方法 Div+css布局網(wǎng)頁(yè)的方法 創(chuàng)

27、建子菜單的方法 html技術(shù) Dreamweaver的高級(jí)應(yīng)用技術(shù)技能目標(biāo) 熟悉運(yùn)用div+css技術(shù)設(shè)計(jì)網(wǎng)頁(yè) 掌握Dreamweaver創(chuàng)建與運(yùn)用div Ap的方法 掌握運(yùn)用Dreamweaver時(shí)間軸功能制作網(wǎng)頁(yè)漂移元素的方法 掌握Dreamweaver行為面板的使用方法 靈活應(yīng)用HTML增加網(wǎng)頁(yè)特效任務(wù)工作過(guò)程指導(dǎo)1根據(jù)主題規(guī)劃與設(shè)計(jì)網(wǎng)站功能模塊、風(fēng)格學(xué)生完成作品后，以小組的方式演示答辯，成績(jī)?yōu)閷W(xué)生小組互評(píng)*0.5+教師評(píng)分*0.52做出網(wǎng)站一級(jí)頁(yè)面、二級(jí)頁(yè)面的草稿圖3以上工作經(jīng)老師認(rèn)可后，開(kāi)始進(jìn)行網(wǎng)站的開(kāi)發(fā)4.實(shí)施建議4.1教學(xué)組織建議1、案例教學(xué)引入企業(yè)的工程項(xiàng)目，作為典型案例，緊扣

28、課程應(yīng)解決的理論和實(shí)際問(wèn)題，對(duì)案例的過(guò)程進(jìn)行詳細(xì)的分析、解剖、總結(jié)。教學(xué)過(guò)程中由老師講解案例操作步驟和相關(guān)知識(shí)，然后由學(xué)生仿照老師的演示實(shí)現(xiàn)服務(wù)器架構(gòu)。通過(guò)對(duì)老師操作視頻的觀看，提高了同學(xué)們對(duì)知識(shí)點(diǎn)的應(yīng)用的理解，有助于提高學(xué)生的學(xué)習(xí)興趣力，掌握相應(yīng)崗位技能。2、講練結(jié)合對(duì)基礎(chǔ)知識(shí)精心講解，并配合課堂練習(xí)，加強(qiáng)了師生的及時(shí)交流，便于發(fā)現(xiàn)問(wèn)題、解決問(wèn)題，也便于對(duì)基本知識(shí)的牢固掌握。在每一次授課過(guò)程中，教師先闡述本章項(xiàng)目驅(qū)動(dòng)部分的任務(wù)，然后針對(duì)提出的任務(wù)，精心講解本章節(jié)的知識(shí)點(diǎn)，最后教師現(xiàn)場(chǎng)演示，解決問(wèn)題，完成任務(wù)。在現(xiàn)場(chǎng)演示過(guò)程中，教師指導(dǎo)學(xué)生進(jìn)行練習(xí)，完成部分功能的實(shí)現(xiàn)。通過(guò)講練結(jié)合，達(dá)到了舉一

29、反三，靈活應(yīng)用的目的。3、課堂演示教師為每一章內(nèi)容精心制作了具有動(dòng)態(tài)效果的幻燈片，以及便于對(duì)理論知識(shí)理解的實(shí)例代碼，隨堂演示，條理清晰，并在開(kāi)發(fā)環(huán)境中演示實(shí)例運(yùn)行效果。在上新課前，對(duì)上節(jié)課的知識(shí)要點(diǎn)進(jìn)行回顧、講述本節(jié)課的目標(biāo)及重點(diǎn)、難點(diǎn)，知識(shí)點(diǎn)講解過(guò)程中，通過(guò)幻燈片動(dòng)畫(huà)將知識(shí)點(diǎn)和問(wèn)題逐一引入，充分激發(fā)學(xué)生學(xué)習(xí)的積極性。4、師生之間的良好互動(dòng)，營(yíng)造了一個(gè)輕松、愉快的學(xué)習(xí)氛圍在教學(xué)中，教師將學(xué)生視為等待老師去點(diǎn)燃的炭火，而不是讓老師去填充的容器。以學(xué)生為主體，教師為主導(dǎo)，通過(guò)各任務(wù)單元里精心設(shè)計(jì)的問(wèn)題，引導(dǎo)學(xué)生思考、發(fā)言，表達(dá)自己的設(shè)計(jì)思路，并請(qǐng)學(xué)生到教師機(jī)上演示案例，指出系統(tǒng)給出錯(cuò)誤的原因，幫助

30、排錯(cuò)，鼓勵(lì)學(xué)生參與教學(xué)過(guò)程，變被動(dòng)學(xué)習(xí)為主動(dòng)學(xué)習(xí)。5、任務(wù)驅(qū)動(dòng)利用各章節(jié)分解的項(xiàng)目任務(wù)，培養(yǎng)自學(xué)能力和創(chuàng)新精神。教師授課首先給出本章項(xiàng)目任務(wù)，針對(duì)任務(wù)講授相關(guān)知識(shí)點(diǎn)，然后利用這些知識(shí)點(diǎn)來(lái)解決問(wèn)題，讓學(xué)生帶著問(wèn)題聽(tīng)課，培養(yǎng)了學(xué)生從多角度、多層次、寬范圍獲取和應(yīng)用知識(shí)的能力。6、現(xiàn)場(chǎng)教學(xué)依托企業(yè)，強(qiáng)化實(shí)訓(xùn)。讓具有豐富項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的雙師型教師或企業(yè)項(xiàng)目工程師在真實(shí)的職業(yè)環(huán)境中現(xiàn)場(chǎng)教學(xué)。授課內(nèi)容包括對(duì)某些知識(shí)點(diǎn)擴(kuò)展，新技術(shù)的應(yīng)用，當(dāng)前研發(fā)項(xiàng)目重點(diǎn)等。4.2教學(xué)評(píng)價(jià)建議 1 突出過(guò)程評(píng)價(jià)，以職業(yè)崗位工作過(guò)程為考評(píng)基礎(chǔ)，以全學(xué)期的教學(xué)情境進(jìn)度為考核時(shí)間線，以一個(gè)完整的網(wǎng)站頁(yè)面設(shè)計(jì)制作項(xiàng)目的驅(qū)動(dòng)，在每個(gè)教學(xué)

31、情境完成教學(xué)之后，要求學(xué)生運(yùn)用該教學(xué)情境所學(xué)技能設(shè)計(jì)制作項(xiàng)目中的相關(guān)進(jìn)度作業(yè)（作品），并對(duì)其作業(yè)（作品）進(jìn)行考核。從而形成階段性過(guò)程考核成績(jī)，該成績(jī)作為總評(píng)成績(jī)的重要組成部份（占60）。2 強(qiáng)調(diào)目標(biāo)評(píng)價(jià)和理論與實(shí)踐一體化評(píng)價(jià)，注重引導(dǎo)學(xué)生進(jìn)行學(xué)習(xí)方式的改變。 3 強(qiáng)調(diào)課程結(jié)束后的綜合評(píng)價(jià)，結(jié)合全教學(xué)過(guò)程的過(guò)程考核項(xiàng)目，對(duì)學(xué)生的最終過(guò)程考核作品，從策劃能力、美工設(shè)計(jì)能力、制作技術(shù)應(yīng)用能力三個(gè)方面進(jìn)行綜合評(píng)價(jià)。從而充分發(fā)揮學(xué)生主動(dòng)性和創(chuàng)造力，還要注重考核學(xué)生動(dòng)手能力和在實(shí)踐中分析問(wèn)題、解決問(wèn)題的能力。 4 建議在教學(xué)中注重團(tuán)隊(duì)協(xié)作能力的評(píng)分，課程結(jié)束時(shí)進(jìn)行綜合模塊考核。在過(guò)程考核中，各教學(xué)情境可參

32、照下表進(jìn)行評(píng)價(jià)： 序 號(hào) 工作過(guò)程模塊 評(píng)價(jià)目標(biāo) 評(píng)價(jià)方式 評(píng)價(jià) 分值 1編寫(xiě)網(wǎng)站策劃書(shū) 評(píng)價(jià)學(xué)生的網(wǎng)站規(guī)劃能力 總結(jié)性評(píng)價(jià) 52繪制網(wǎng)頁(yè)效果圖 評(píng)價(jià)學(xué)生的網(wǎng)頁(yè)美術(shù)設(shè)計(jì)能力；評(píng)價(jià)學(xué)生的效果圖繪制能力 總結(jié)性評(píng)價(jià) 153制作網(wǎng)站首頁(yè) 評(píng)價(jià)學(xué)生的網(wǎng)頁(yè)排版能力；評(píng)價(jià)學(xué)生的CSS應(yīng)用能力；評(píng)價(jià)學(xué)生其它網(wǎng)頁(yè)相關(guān)輔助技術(shù)應(yīng)用的能力。 總結(jié)性評(píng)價(jià) 204制作網(wǎng)站模板文件與子頁(yè)面 評(píng)價(jià)學(xué)生的模板文件的制作與應(yīng)用能力。 總結(jié)性評(píng)價(jià) 155鏈接與測(cè)試網(wǎng)站 評(píng)價(jià)學(xué)生的鏈接技術(shù)應(yīng)用能力；評(píng)價(jià)學(xué)生對(duì)網(wǎng)站站點(diǎn)的綜合管理能力。 形成性評(píng)價(jià) 5合計(jì) 60在綜合考核中，各任務(wù)模塊可參照下表進(jìn)行評(píng)價(jià)：序 號(hào) 評(píng)價(jià)點(diǎn) 參考要求 評(píng)價(jià)方式 評(píng)價(jià) 分值 1策劃能力 網(wǎng)站策劃方案充分滿足客戶的建站目的和內(nèi)容要求。網(wǎng)站欄目規(guī)劃合理。方案表達(dá)清晰、直觀、詳實(shí)。方案具有可操作性。 總結(jié)性評(píng)價(jià) 52美工設(shè)計(jì)能力 美工風(fēng)格設(shè)計(jì)符合網(wǎng)站策劃的主題定位、美術(shù)效果佳、整體感強(qiáng)、細(xì)節(jié)豐富、具有專(zhuān)業(yè)感。效果圖繪制技術(shù)運(yùn)用得當(dāng)，表現(xiàn)力強(qiáng)，具有質(zhì)感。 總結(jié)性評(píng)價(jià) 153制作技術(shù)應(yīng)用能力 網(wǎng)站站點(diǎn)管理得當(dāng)，文件命名和存放路徑規(guī)范；排版技術(shù)運(yùn)用得當(dāng)，能完好的再現(xiàn)網(wǎng)頁(yè)美術(shù)設(shè)計(jì)效果；CSS應(yīng)用技術(shù)運(yùn)用得當(dāng)，排版布局合理；模板與子頁(yè)制作得當(dāng)；網(wǎng)頁(yè)腳本交互功能運(yùn)用得當(dāng)；網(wǎng)站鏈接結(jié)構(gòu)正確、合理、有效。