Web前端設(shè)計(jì)與開(kāi)發(fā)課程整體教學(xué)設(shè)計(jì)

1、1Web前端設(shè)計(jì)與開(kāi)發(fā)課程整體教學(xué)設(shè)計(jì)（20192020學(xué)年第2學(xué)期）課程名稱：Web前端設(shè)計(jì)與開(kāi)發(fā)所屬系部：信息工程學(xué)院制定人：XXX合作人： _XXX_制定時(shí)間：2020年7月WebWeb 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課2 2課程整體教學(xué)設(shè)計(jì)、課程基本信息課程名稱：WebWeb 前端設(shè)計(jì)與開(kāi)發(fā)課程代碼：1831000718310007學(xué)分：3 3學(xué)時(shí)：4848授課時(shí)間：第三學(xué)期授課對(duì)象： 高職計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)大二 學(xué)生、高職計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)大二學(xué)生課程類型：專業(yè)核心課先修課程：信息技術(shù)素養(yǎng)與技能、 計(jì)算機(jī)程序設(shè)計(jì)后續(xù)課程：HTML5HTML5 混合 AppApp 開(kāi)發(fā)、PHPPHP WE

2、BkWEBk 用開(kāi)發(fā)二、課程定位（一）學(xué)生所在專業(yè)面向的崗位（群）。專業(yè)服務(wù)區(qū)域：臨沂市及周邊地區(qū)專業(yè)服務(wù)領(lǐng)域（行業(yè)）：為智慧物流、智慧貿(mào)易、智慧農(nóng)業(yè)、智慧工業(yè)、智慧 公共服務(wù)相關(guān)行業(yè)服務(wù)的應(yīng)用軟件開(kāi)發(fā)行業(yè)。主要就業(yè)崗位：在各大中小軟件開(kāi)發(fā)公司從事 WebWeb 與企業(yè)應(yīng)用軟件的開(kāi)發(fā)、 測(cè)試、銷售與運(yùn)維等工作崗位。（二）本課程選擇的背景實(shí)踐崗位。表1典型工作任務(wù)分析表序號(hào)工作崗位典型工作任務(wù)工作過(guò)程簡(jiǎn)述1程序員WEB界面開(kāi)發(fā)運(yùn)用各種工具進(jìn)行頁(yè)面布局，WEBWEB 圖像、音頻、視 頻、動(dòng)畫制作。2程序代碼編寫運(yùn)用面向?qū)ο蟮拈_(kāi)發(fā)工具規(guī)范地編寫程序，使用數(shù) 據(jù)庫(kù)訪問(wèn)技術(shù)連接訪問(wèn)數(shù)據(jù)庫(kù)。3WEB部署運(yùn)

3、行安裝網(wǎng)絡(luò)操作系統(tǒng)，配置各類服務(wù)器、發(fā)布站點(diǎn)表2崗位職業(yè)能力分析表崗位性質(zhì)序號(hào)崗位名稱典型工作任務(wù)職業(yè)能力支撐課程WebWeb 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課3 3基礎(chǔ)崗位1程序員WEBWEB 界面開(kāi)發(fā)網(wǎng)頁(yè)制作能力HTML5HTML5 混合 APPAPP 開(kāi)發(fā)()WEBWEB 前端設(shè)計(jì)與開(kāi)發(fā)()JAVAJAVA WEBWEB 應(yīng)用開(kāi)發(fā)()PHPPHP WEBWEB 應(yīng)用開(kāi)發(fā)()數(shù)據(jù)庫(kù)基礎(chǔ)網(wǎng)絡(luò)操作系統(tǒng)程序代碼編寫代碼編寫能力WEBWEB 部署運(yùn)行網(wǎng)站發(fā)布能力用戶培訓(xùn)網(wǎng)絡(luò)與應(yīng)用系統(tǒng)安裝能力軟件管理維護(hù)數(shù)據(jù)庫(kù)安裝、升級(jí)、遷 移、數(shù)據(jù)恢復(fù)能力2軟件測(cè)試 人員軟件測(cè)試與跟蹤搭建測(cè)試環(huán)境， 編寫測(cè)試 腳本，

4、運(yùn)用測(cè)試腳本尋找bugbug 能力(三)本課程與中職、高職(?？?、本科)、普通高校、培訓(xùn)班同類課程的區(qū)別。中職教育的人才培養(yǎng)目標(biāo)定位是明確的，培養(yǎng)高素質(zhì)勞動(dòng)者和技能型人才。高職?？茖?次的人才培養(yǎng)目標(biāo)應(yīng)該是多元化的，不同區(qū)域、不同專業(yè)、不同生源的要求是不一樣的，所 以人才培養(yǎng)目標(biāo)定位也不一樣，WEB前端設(shè)計(jì)與開(kāi)發(fā)課程中職階段主要培養(yǎng)學(xué)生的操作技能，而高職階段則培養(yǎng)具有良好的職業(yè)道德、較為扎實(shí)的專業(yè)基礎(chǔ)知識(shí)和技能、較強(qiáng)的競(jìng)爭(zhēng)能力 與適應(yīng)能力、可持續(xù)發(fā)展的學(xué)習(xí)能力、能在Web前端開(kāi)發(fā)領(lǐng)域占有一席之地。三、課程目標(biāo)總體目標(biāo)：本課程以HTML語(yǔ)言為主要工具，學(xué)習(xí)Web應(yīng)用程序和網(wǎng)站前端開(kāi)發(fā)技術(shù)。通過(guò)本

5、 課程的學(xué)習(xí)，學(xué)生能夠掌握HTML標(biāo)簽與CSS樣式基礎(chǔ)、圖像設(shè)計(jì)在網(wǎng)頁(yè)中的應(yīng)用、制作導(dǎo)航欄、表格在網(wǎng)頁(yè)中的應(yīng)用、表單在網(wǎng)頁(yè)中的應(yīng)用、CSS標(biāo)準(zhǔn)流布局、CSS浮動(dòng)布局、CSS定位布局、JavaScript的應(yīng)用等知識(shí)。通過(guò)完成相關(guān)的項(xiàng)目，使學(xué)生掌握WEB前端設(shè)計(jì)的主要方法，并能熟練利用HTML、CSS JavaScript等技術(shù)控制WEB頁(yè)面各級(jí)元素，實(shí)現(xiàn)WEB前端的開(kāi)發(fā)任務(wù)。在課程的學(xué)習(xí)中，培養(yǎng)誠(chéng)實(shí)、守信性格，培養(yǎng)善于 自我學(xué)習(xí)、團(tuán)隊(duì)協(xié)作和解決實(shí)際問(wèn)題的能力，為后續(xù)專業(yè)課的學(xué)習(xí)打下良好的基礎(chǔ)。能力目標(biāo)：1.能夠配置典型的網(wǎng)站開(kāi)發(fā)環(huán)境。WebWeb 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課4 42.能夠使用

6、HTML制作包含基本內(nèi)容的網(wǎng)頁(yè)。3.能夠使用HTML及CSS等技術(shù)來(lái)設(shè)計(jì)網(wǎng)頁(yè)布局。4.能夠使用JavaScript技術(shù)來(lái)提高網(wǎng)頁(yè)交互性、體驗(yàn)性。5.能夠綜合使用HTML、CSS與JavaScript的相關(guān)知識(shí)，來(lái)豐富、渲染網(wǎng)頁(yè)。6.能夠開(kāi)發(fā)電腦端靜態(tài)網(wǎng)頁(yè)和移動(dòng)端靜態(tài)網(wǎng)頁(yè)。7.能夠根據(jù)具體應(yīng)用需求，創(chuàng)新性地設(shè)計(jì)網(wǎng)頁(yè)。知識(shí)目標(biāo)：1.了解本課程內(nèi)容在Web開(kāi)發(fā)領(lǐng)域的定位與作用。2.了解HTML、CSS及JavaScript技術(shù)的發(fā)展脈絡(luò)、趨勢(shì)及應(yīng)用前景。3.掌握HTML中的基本元素、文字與段落元素、圖像元素、列表元素、表格元素、 超鏈接元素、多媒體元素、框架元素及表單元素的語(yǔ)法、屬性和參數(shù)等基礎(chǔ)知識(shí)

7、。4.掌握CSS中元素的語(yǔ)法、屬性和參數(shù)等基礎(chǔ)知識(shí)。5.了解網(wǎng)頁(yè)布局的幾種方法，掌握使用CSS進(jìn)行網(wǎng)頁(yè)布局、樣式設(shè)計(jì)的基礎(chǔ)知識(shí)。6.掌握J(rèn)avaScript中的基本語(yǔ)法知識(shí)。7.掌握J(rèn)avaScript進(jìn)行提交內(nèi)容校驗(yàn)、生成網(wǎng)頁(yè)特效等方法。8.了解并掌握HTML5和CSS3新技術(shù)。素質(zhì)目標(biāo)：1.通過(guò)編寫代碼經(jīng)驗(yàn)積累，培養(yǎng)學(xué)生良好的編程風(fēng)格。2.通過(guò)網(wǎng)絡(luò)、課程等資料學(xué)習(xí)，培養(yǎng)學(xué)生學(xué)習(xí)網(wǎng)站開(kāi)發(fā)的興趣。3.通過(guò)企業(yè)崗位職責(zé)與國(guó)家相關(guān)法律學(xué)習(xí)，著力培養(yǎng)學(xué)生誠(chéng)實(shí)、守信的思想品質(zhì)。4.通過(guò)校外實(shí)踐鍛煉，著力培養(yǎng)學(xué)生自我學(xué)習(xí)、團(tuán)隊(duì)協(xié)作和解決實(shí)際問(wèn)題的職業(yè)素質(zhì)5.通過(guò)各類技能競(jìng)賽，培育學(xué)生勇于創(chuàng)新、善于發(fā)現(xiàn)的

8、創(chuàng)新意識(shí)。WebWeb 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課5 5四、課程的知識(shí)理論內(nèi)容:項(xiàng)目模塊線下學(xué)時(shí)模塊1 Web前端開(kāi)發(fā)崗位認(rèn)知2學(xué)時(shí)模塊2靜態(tài)網(wǎng)頁(yè)升發(fā)12學(xué)時(shí)模塊3靜態(tài)網(wǎng)頁(yè)美化10學(xué)時(shí)模塊4動(dòng)態(tài)效果開(kāi)發(fā)8學(xué)時(shí)模塊5移動(dòng)端靜態(tài)網(wǎng)頁(yè)升發(fā)8學(xué)時(shí)模塊6移動(dòng)端靜態(tài)網(wǎng)頁(yè)美化8學(xué)時(shí)合計(jì)48學(xué)時(shí)W W e e b b 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課6 6五、能力訓(xùn)練項(xiàng)目設(shè)計(jì)編號(hào)能力訓(xùn)練項(xiàng) 目名稱子項(xiàng)目編虧、 名稱能力目標(biāo)知識(shí)目標(biāo)訓(xùn)練方式、手段 及步驟可展示的結(jié)果和驗(yàn)收的標(biāo)準(zhǔn)1項(xiàng)目1 WEB前端崗位認(rèn)知1-1 “Web前端工程師崗位認(rèn)知能夠?qū)eb前端設(shè)計(jì)與開(kāi) 發(fā)”崗位和課程有個(gè)明確的 認(rèn)知了解Web前端工程師

9、的 工作；熟悉Web前端開(kāi) 發(fā)學(xué)習(xí)路線虛擬企業(yè)參觀、工程師 連線、網(wǎng)絡(luò)調(diào)研文檔1-2 “1+x ” Web前端開(kāi)發(fā)職業(yè)技能 標(biāo)準(zhǔn)能夠理解Web前端開(kāi)發(fā)所具備的專業(yè)技能；能夠根據(jù)職業(yè)技能標(biāo)準(zhǔn)進(jìn)行職業(yè)學(xué)習(xí)規(guī)劃認(rèn)識(shí)并了解Web前端開(kāi) 發(fā)和調(diào)試所具備的專業(yè)知 識(shí)和技能圖片視頻資料展示；文檔（WORDC檔）2項(xiàng)目2紅色沂蒙”旅游網(wǎng)首頁(yè)制作2-1需求分析與頁(yè) 面布局能夠根據(jù)UI設(shè)計(jì)稿對(duì)貝面 布局結(jié)構(gòu)進(jìn)行分析；能夠使 用HTML標(biāo)記進(jìn)行頁(yè)面布 局；掌握頁(yè)面結(jié)構(gòu)布局的方 法；掌握DIV的使用任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上網(wǎng)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼2-2制作頭部模塊能夠使用常用的前端開(kāi)發(fā)軟 件； 能夠使

10、用圖像標(biāo)記和段 落標(biāo)記對(duì)頭部模塊進(jìn)行制作HTML標(biāo)記的組成；HTML頭部標(biāo)記；HTML的圖像標(biāo)記；相對(duì)路徑與 絕對(duì)路徑；段落標(biāo)記任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上網(wǎng)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼2-3制作導(dǎo)航模塊能夠使用文本控制標(biāo)記進(jìn)仃 導(dǎo)航模塊的制作文本控制標(biāo)記；轉(zhuǎn)義字符任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上網(wǎng)實(shí)訓(xùn)網(wǎng)貝文件及圖片， 程序代碼2-4制作“紅色沂 蒙”介紹模塊能夠使用HTML標(biāo)記制作介 紹模塊；能夠使用表格標(biāo)記 對(duì)網(wǎng)頁(yè)進(jìn)行布局HTML標(biāo)題標(biāo)記；義本樣 式標(biāo)記；圖像標(biāo)記任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)貝文件及圖片， 程序代碼2-5制作推薦模塊能夠使用HTML的列表標(biāo)記 制作推薦模塊

11、有序列表；無(wú)序列表；定 義列表及列表的嵌套應(yīng)用任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上網(wǎng)實(shí)訓(xùn)網(wǎng)貝文件及圖片， 程序代碼W W e e b b 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課7 7編號(hào)能力訓(xùn)練項(xiàng) 目名稱子項(xiàng)目編虧、 名稱能力目標(biāo)知識(shí)目標(biāo)訓(xùn)練方式、手段 及步驟可展示的結(jié)果和驗(yàn)收的標(biāo)準(zhǔn)2-6制作評(píng)論模塊能夠使用HTML標(biāo)記制作評(píng)論模塊掌握特殊字符標(biāo)記和div標(biāo)記的方法任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)貝文件及圖片，程序代碼2-7制作頁(yè)腳模塊能夠使用HTML標(biāo)記制作頁(yè) 腳模塊了解常用的圖像格式 理解切片的原理及方法任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上網(wǎng)實(shí)訓(xùn)網(wǎng)貝文件及圖片， 程序代碼2-8制作注冊(cè)和登 陸模塊能

12、夠創(chuàng)建具有相應(yīng)功能的表 單控件；能夠通過(guò)控制表單 樣式美化表單界面表單及表單控件任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上網(wǎng)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼3項(xiàng)目3紅色沂蒙”旅游網(wǎng)貞面美化3-1布局及定義基礎(chǔ)樣式能夠使用CSS定義基礎(chǔ)樣式了解CSS樣式規(guī)則掌握引入CSS樣式表的不 問(wèn)方式；掌握CSS基礎(chǔ)選 擇器的用法任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼3-2頭部模塊的美 化能夠使span標(biāo)記制作導(dǎo)航及banner模塊掌握CSS字體樣式及文杰 外觀屬性； 熟悉CSS復(fù)合 選擇器 （標(biāo)簽指定、后代、 并集）任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼3-3注冊(cè)及登

13、陸頁(yè) 面的美化能夠使用CSS控制表單樣式初識(shí)表單，創(chuàng)建表單；掌 握表單相關(guān)標(biāo)記； 熟悉表 單樣式的控制任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼3-3介紹模塊的美 化能夠靈活利用元素的轉(zhuǎn)換制 作最新動(dòng)態(tài)模塊掌握CSS層疊性、繼承性 與優(yōu)先級(jí)；了解盒子模型 的概念任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼3-4推存模塊的美 化能夠使用DIV標(biāo)記與浮動(dòng)樣式制作推薦模塊掌握盒子的相關(guān)屬性任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)貝文件及圖片，程序代碼3-5評(píng)論模塊的美 化能夠使用塊兀素和行內(nèi)兀素 的轉(zhuǎn)換美化評(píng)論模塊熟悉兀素的類型與轉(zhuǎn)換方 法任務(wù)驅(qū)動(dòng)法；講授法；

14、 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼W W e e b b 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課8 8編號(hào)能力訓(xùn)練項(xiàng) 目名稱子項(xiàng)目編虧、 名稱能力目標(biāo)知識(shí)目標(biāo)訓(xùn)練方式、手段 及步驟可展示的結(jié)果和驗(yàn)收的標(biāo)準(zhǔn)3-6頁(yè)腳模塊的美 化能夠使用兀素的定位及層疊等級(jí)屬性制作頁(yè)腳和懸浮框模塊掌握元素的浮動(dòng)與定位； 掌握清除浮動(dòng)的方法4項(xiàng)目4紅色沂蒙”旅游網(wǎng)動(dòng)態(tài)效果制作4-14-1導(dǎo)航模塊特效制作能夠使用JavaScript創(chuàng)建導(dǎo)航特效掌握J(rèn)avaScript基本語(yǔ)法任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼4-24-2 bannerbanner 模塊特性制作能夠使用JS制作頭部模塊掌握運(yùn)

15、算符和表逮式的使用方法任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼4-34-3介紹模塊特效制作能夠使用JS中的基本語(yǔ)句制 作導(dǎo)航模塊掌握條件語(yǔ)句、循環(huán)語(yǔ)句 及跳轉(zhuǎn)語(yǔ)句任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼4-44-4 制作 bannerbanner 和時(shí)間模塊能夠通過(guò)運(yùn)算符和表達(dá)式進(jìn) 行簡(jiǎn)單計(jì)算掌握條件語(yǔ)句、循環(huán)語(yǔ)句 及跳轉(zhuǎn)語(yǔ)句任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼4-54-5旅游信息查詢模塊制作學(xué)會(huì)使用流程控制語(yǔ)句編寫JavaScript程序掌握J(rèn)avaScript中函數(shù)的調(diào)用及變量的作用域任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)

16、實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼4-64-6 版權(quán)信息模塊能夠制作版權(quán)信息模塊掌握J(rèn)avaScript中函數(shù)的調(diào)用及變量的作用域任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼5項(xiàng)目5“紅色 沂蒙”旅游網(wǎng)移 動(dòng)端首頁(yè)制作5-15-1移動(dòng)端首頁(yè)適配及定義樣式能夠?qū)σ苿?dòng)端網(wǎng)貝進(jìn)行適配，能夠?qū)σ苿?dòng)端頁(yè)面進(jìn)行布局及定義樣式視口的概念，移動(dòng)端適配任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼5-25-2 制作頭部及導(dǎo) 航模塊能夠使用HTML5新增語(yǔ)義化 兀素、頁(yè)面增強(qiáng)兀素與屬性HTML5新增標(biāo)簽元素任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼W W e e

17、b b 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課9 9編號(hào)能力訓(xùn)練項(xiàng) 目名稱子項(xiàng)目編虧、名稱能力目標(biāo)知識(shí)目標(biāo)訓(xùn)練方式、手段 及步驟可展示的結(jié)果和驗(yàn)收的標(biāo)準(zhǔn)5-35-3 制作介紹模塊能夠使用CSS3的選擇器、邊 框特性、顏色、字體功能設(shè)計(jì) 網(wǎng)頁(yè)CSS3選擇器、 邊框特性、顏色、字體功能任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼5-45-4 制作推薦模塊能夠使用HTML5新增多媒體 兀素等功能進(jìn)行移動(dòng)端頁(yè)面 開(kāi)發(fā)HTML5多媒體元素標(biāo)簽任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼5-55-5 制作頁(yè)腳模塊能夠獨(dú)立完成移動(dòng)端網(wǎng)貝的 制作掌握Web前端開(kāi)發(fā)的基本 方法任務(wù)

18、驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)貝文件及圖片， 程序代碼6項(xiàng)目6紅色沂蒙”旅游網(wǎng)移動(dòng)端首頁(yè)美化6-16-1 使用 HTML5HTML5美化“紅色沂蒙” 旅游網(wǎng)首頁(yè)能使用HTML5新增語(yǔ)義化元 素、貝血增強(qiáng)兀素與屬性及 多媒體屬性等功能美化頁(yè)面了解HTML5新增全局屬 性、結(jié)構(gòu)化與頁(yè)面增強(qiáng)、 表單標(biāo)簽、多媒體元素的 使用方法任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片， 程序代碼6-26-2 使用 CSS3CSS3 美化“紅色沂蒙”旅游 網(wǎng)首頁(yè)能夠使用CSS3的選擇器、邊 框特性、顏色、字體功能美化 頁(yè)面了解CSS3選擇器、邊框特 性、顏色、字體的功能任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上

19、機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼7項(xiàng)目7綜合實(shí) 訓(xùn)：“美麗中國(guó)”宣傳頁(yè)制作7-17-1 “美麗中國(guó)”宣傳頁(yè)制作能夠從需求分析、項(xiàng)目搭建、頁(yè)面布局及設(shè)計(jì)、 網(wǎng)貝制作、網(wǎng)頁(yè)美化、網(wǎng)貝測(cè)試及優(yōu)化 等方面制作Web前端貝面掌握設(shè)計(jì)和制作Web前端 貝面的一般步驟和方法任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼7-27-2 移動(dòng)端“美麗 中國(guó)”宣傳頁(yè)制作能夠從需求分析、項(xiàng)目搭建、頁(yè)面布局及設(shè)計(jì)、網(wǎng)貝制作、網(wǎng)頁(yè)美化、網(wǎng)貝測(cè)試及優(yōu)化等方面制作移動(dòng)端Web貝面掌握設(shè)計(jì)和制作移動(dòng)端頁(yè) 面的一般步驟和方法任務(wù)驅(qū)動(dòng)法；講授法； 演示法；上機(jī)實(shí)訓(xùn)網(wǎng)頁(yè)文件及圖片，程序代碼WebWeb 前端設(shè)計(jì)與開(kāi)發(fā)精

20、品資源共享課1010六、項(xiàng)目情境設(shè)計(jì)在工作中，實(shí)習(xí)生小王發(fā)現(xiàn) WebWeb 前端開(kāi)發(fā)是一項(xiàng)很特殊的工作，涵蓋的知識(shí) 面非常廣，既有具體的技術(shù)，又有抽象的理念，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。同時(shí) WebWeb 前端開(kāi)發(fā)在產(chǎn)品開(kāi)發(fā)環(huán)節(jié)中的作用變得越來(lái)越重 要，需要專業(yè)的前端工程師才能做好，這方面的專業(yè)人才近兩年來(lái)備受宵睞。所 以，立志要成為一名優(yōu)秀的前端開(kāi)發(fā)工程師的小王在我們的帶領(lǐng)下邊學(xué)習(xí)邊工作， 在完成項(xiàng)目的同時(shí)也夯實(shí)了理論基礎(chǔ)。七、第一次課設(shè)計(jì)1.課程基本信息介紹教師自我介紹，介紹課程的基本信息，課程紀(jì)律、考核方式等。2.課程導(dǎo)入：介紹課程的整體結(jié)構(gòu)3.積極行動(dòng)：加入工作室，進(jìn)

21、入工作狀態(tài)學(xué)生加入老師成立的軟件工作室，包括QQ學(xué)習(xí)群和微信群。4.師生互動(dòng)：了解學(xué)生已有知識(shí)和技能，填寫調(diào)查表，了解學(xué)生對(duì)WEB前端技術(shù)的掌握情 況，以便進(jìn)行分組教學(xué)。5.引起興趣：分配工作任務(wù)并分組，分配工作任務(wù)，接受項(xiàng)目任務(wù)：按照學(xué)生已有水平進(jìn)行分組，以我們的網(wǎng)頁(yè)設(shè)計(jì)為基礎(chǔ)，結(jié)合現(xiàn)有WEB前端技術(shù)，指導(dǎo)實(shí)習(xí)生小王，幫助他成為一名合格的前端開(kāi)發(fā)工程師。情境1:第一次課，加入臨沂職業(yè)學(xué)院軟件工作室。與工作室其他成員一起指導(dǎo)小王掌 握“WEBttr端設(shè)計(jì)與開(kāi)發(fā)”相關(guān)知識(shí)，了解常見(jiàn)的商務(wù)網(wǎng)站，學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的方法和技能。情境2: WEB前端設(shè)計(jì)與開(kāi)發(fā)涉及當(dāng)前各種類型的網(wǎng)站。小王希望通過(guò)完成幾個(gè)典型

22、的項(xiàng)目，能夠全面提高自己的WEB前端設(shè)計(jì)與開(kāi)發(fā)的水平。根據(jù)典型項(xiàng)目任務(wù)的要求，擬定項(xiàng)目化教學(xué)的真實(shí)情境，按照工作過(guò)程完成各個(gè)典型項(xiàng)目的設(shè)計(jì)與開(kāi)發(fā)。WebWeb 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課1111八、 最后一次課設(shè)計(jì)1.課程總結(jié)對(duì)課程中用到了知識(shí)和技能進(jìn)行總結(jié)，各項(xiàng)目、任務(wù)、環(huán)節(jié)間層層遞進(jìn)，體現(xiàn)了 “項(xiàng)目導(dǎo)入、任務(wù)促學(xué)”的課程設(shè)計(jì)思路，使課程體系有效地反映了知識(shí)、技能、專業(yè)素質(zhì)的 緊密結(jié)合，幫助學(xué)生建立起良好的計(jì)算機(jī)基礎(chǔ)語(yǔ)言邏輯思維，為后續(xù)專業(yè)課程的學(xué)習(xí)打下 良好基礎(chǔ)。2. Web前端設(shè)計(jì)與開(kāi)發(fā)技能大賽點(diǎn)評(píng)學(xué)期末舉行Web前端設(shè)計(jì)與開(kāi)發(fā)技能大賽，選擇優(yōu)秀作品進(jìn)行展示并點(diǎn)評(píng)，促進(jìn)學(xué)生 繼續(xù)學(xué)習(xí)，

23、形成你追我趕的學(xué)習(xí)氛圍。3.贈(zèng)送學(xué)生各類前端網(wǎng)頁(yè)源碼資源。4.鼓勵(lì)學(xué)生參加WEB前端設(shè)計(jì)與開(kāi)發(fā)職業(yè)資格認(rèn)證。九、 考核方案本課程的考核采用過(guò)程考核和結(jié)果考核相結(jié)合、理論考試和實(shí)踐考核相結(jié)合的方式，其中過(guò)程性考核占20%，各學(xué)習(xí)單元的項(xiàng)目考核占50%，期末綜合考核占30%。期末綜合 考核分為理論部分和實(shí)踐部分，理論部分考核學(xué)生對(duì)各知識(shí)點(diǎn)綜合應(yīng)用的掌握情況，實(shí)踐部分考核學(xué)生運(yùn)用所學(xué)知識(shí)進(jìn)行綜合項(xiàng)目實(shí)訓(xùn)的能力。如果學(xué)生在各類技能大賽中取得理想成績(jī)，可直接進(jìn)行學(xué)分置換。具體考核方式見(jiàn)下表：表 3 3 : :課程考核方式表考核項(xiàng)目考核力法比重過(guò)程考核課程建設(shè)根據(jù)是否服從課堂紀(jì)律，配合老師工作，為 小組問(wèn)

24、學(xué)服務(wù)，團(tuán)結(jié)問(wèn)學(xué)等方面評(píng)定得分io%課堂提問(wèn)根據(jù)課堂回答問(wèn)題、課堂實(shí)踐示范情況，綜 合評(píng)定學(xué)習(xí)態(tài)度得分io%WebWeb 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課1212項(xiàng)目考核任務(wù)結(jié)果由教師與企業(yè)專家合作評(píng)定得分40%r技能競(jìng)賽結(jié)果r由教師根據(jù)分組競(jìng)賽結(jié)果評(píng)定得分10%期末勺試由教師評(píng)定筆試（上機(jī)考試）成績(jī)30%合計(jì)100%十、教學(xué)材料1、教材與參考書籍(1)網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目化教程，人民郵電出版社，黑馬程序員主編(2)基于工作過(guò)程的網(wǎng)頁(yè)設(shè)計(jì)與制作教程，機(jī)械工業(yè)出版社，張洪斌主編(3) HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)指南，清華大學(xué)出版社，趙輝主編(4)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作，高等教育出版社，方玲玉編著2、其他學(xué)習(xí)

25、資源(1) HTML中文參考手冊(cè)；(2)CSS中文參考手冊(cè)；(3)JavaScript中文參考手冊(cè)；(4)湖南鐵道鐵道職業(yè)技術(shù)學(xué)院精品課程網(wǎng)站(5)威海職業(yè)學(xué)院精品課程網(wǎng)站：(6)淮安信息職業(yè)技術(shù)學(xué)院精品課程網(wǎng)站：(7)網(wǎng)頁(yè)設(shè)計(jì)師聯(lián)盟：3、學(xué)習(xí)場(chǎng)地、設(shè)施要求(1)計(jì)算機(jī)硬件要求：Windows2000及以上，CPU主頻1GHz,內(nèi)存容量=512MB(2)軟件要求：IIS , Dreamweaver,虛擬實(shí)訓(xùn)平臺(tái)；(3)其他要求：本課程教學(xué)要求在多媒體機(jī)房實(shí)施，以實(shí)現(xiàn)“教、學(xué)、做”三體合一； 多媒體教學(xué)軟件，便于下發(fā)教學(xué)任務(wù)和收集學(xué)生課堂實(shí)踐任務(wù)；網(wǎng)頁(yè)設(shè)計(jì)與制作編程環(huán) 境。十一、需要說(shuō)明的其他問(wèn)

26、題Web前端設(shè)計(jì)與開(kāi)發(fā)課程實(shí)踐性很強(qiáng)，建議學(xué)習(xí)者課外圖像處理工具與動(dòng)畫設(shè)計(jì) 工具，激發(fā)學(xué)習(xí)者的學(xué)習(xí)興趣，通過(guò)多瀏覽，多實(shí)踐，多交流能夠整體提高學(xué)習(xí)者的綜合素 質(zhì)。WebWeb 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課1313十二、本課程常用術(shù)語(yǔ)中英文對(duì)照表關(guān)于我們：About Us作者：Author公司:Company聯(lián)系我們：Contact Us版權(quán)：Copyright郵箱地址：Email Address首頁(yè)：Home登錄：Login會(huì)員名：Member Name密碼:Password產(chǎn)品：Products真實(shí)姓名：Real Name注冊(cè)：Register網(wǎng)站地圖：Site Map用戶名：User版主：

27、Moderators主題：SubjectTopics標(biāo)簽：Tags積分?jǐn)?shù)：Credits精華貼數(shù):Digestposts關(guān)鍵字:Keyword頻道：Channel板塊：plates幫助：FAQ合作:Cooperation聚合：Feed論壇：Forum線程：Threads新貼：New Thread啟動(dòng)：Post今日：Today文章:Articles主題：Themes俱樂(lè)部：Clubs休閑：Easy原創(chuàng)：Original娛樂(lè)：Fun美食：Food都市生活：City Life工作：Job跳騷市場(chǎng)：Flea Market建議：Suggestions問(wèn)題：Questions廣告合作：Advertise on Site天氣：Weather文化：Culture日?qǐng)?bào)：Daily鏈接：Link搜索查找：Search點(diǎn)擊：Click評(píng)論：Comments技術(shù)支持：SupportWebWeb 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課1414繼續(xù)：Continue提交：SubmitWebWeb 前端設(shè)計(jì)與開(kāi)發(fā)精品資源共享課1515發(fā)送：Send回復(fù)：Posts積分：Points收藏本站:Add to favorite設(shè)為主頁(yè)：Make yourhomepage營(yíng)銷加盟：J