《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程說(shuō)課 課件

專業(yè)：軟件技術(shù)及相關(guān)專業(yè)課程性質(zhì)：專業(yè)基礎(chǔ)課程對(duì)象：三年制高職課時(shí)：48課程說(shuō)明：靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)制作HTML+CSS+JavaScript課程簡(jiǎn)介網(wǎng)頁(yè)設(shè)計(jì)與制作課程設(shè)計(jì)說(shuō)課主要內(nèi)容課程設(shè)計(jì)教學(xué)內(nèi)容與設(shè)施教學(xué)方法與手段課程保障課程定位課程特色一課程定位課程定位Ｃ語(yǔ)言程序設(shè)計(jì)數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)庫(kù)管理與應(yīng)用網(wǎng)頁(yè)設(shè)計(jì)與制作系統(tǒng)基礎(chǔ)課程軟件測(cè)試Java程序設(shè)計(jì)JavaWeb程序設(shè)計(jì)JavaEE企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)C#程序設(shè)計(jì)ASP.NET程序設(shè)計(jì).NET企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)軟件工程與項(xiàng)目實(shí)踐Web開(kāi)發(fā)工程師培養(yǎng)目標(biāo)課程的教學(xué)目標(biāo)掌握HTML+CSS+JavaScript相關(guān)技術(shù)，使學(xué)生能夠獨(dú)立進(jìn)行客戶端頁(yè)面的開(kāi)發(fā)。通過(guò)本課程的學(xué)習(xí)，使學(xué)生逐步建立和掌握Web客戶端靜態(tài)頁(yè)面設(shè)計(jì)的思想方法，具有分析問(wèn)題和解決問(wèn)題的能力，能夠使用HTML語(yǔ)言、CSS樣式、JavaScript腳本編寫(xiě)Web客戶端靜態(tài)頁(yè)面解決實(shí)際問(wèn)題，具備吃苦耐勞、團(tuán)結(jié)協(xié)作的良好品質(zhì)。

通過(guò)感性、直觀的實(shí)踐操作，激發(fā)學(xué)生開(kāi)發(fā)軟件項(xiàng)目的熱情，帶動(dòng)學(xué)生學(xué)習(xí)其他專業(yè)核心課程的學(xué)習(xí)積極性。二課程設(shè)計(jì)課程設(shè)計(jì)理念以培養(yǎng)網(wǎng)站開(kāi)發(fā)相關(guān)崗位的職業(yè)能力為核心

第四、基于能力本為的技能訓(xùn)練“以學(xué)生為主體、以教師為主導(dǎo)”，培養(yǎng)自信、自主、自學(xué)職業(yè)能力培養(yǎng)第三、基于真實(shí)項(xiàng)目載體的教學(xué)內(nèi)容第二、基于工作過(guò)程系統(tǒng)化的課程開(kāi)發(fā)第一、基于工學(xué)結(jié)合的人才培養(yǎng)模式

設(shè)計(jì)的特點(diǎn)：針對(duì)性強(qiáng)適用性強(qiáng)可拓展性強(qiáng)2職業(yè)能力分析3學(xué)習(xí)者分析4以培養(yǎng)職業(yè)能力

為核心的教學(xué)目標(biāo)5工作任務(wù)導(dǎo)向確定學(xué)習(xí)單元6多種模式\工學(xué)結(jié)合培養(yǎng)學(xué)生7持續(xù)關(guān)注學(xué)生在企業(yè)的發(fā)展，定期回訪學(xué)生8以企業(yè)標(biāo)準(zhǔn)更新學(xué)習(xí)單元1企業(yè)崗位需求調(diào)研課程設(shè)計(jì)思路整個(gè)課程設(shè)計(jì)的思路凸顯實(shí)踐性、開(kāi)放性、職業(yè)性崗位需求的Web客戶端技術(shù)內(nèi)容的選取標(biāo)準(zhǔn)與原則堅(jiān)持理論以必須、夠用為度的教學(xué)內(nèi)容選擇標(biāo)準(zhǔn)。選取原則：1）根據(jù)企業(yè)發(fā)展需要、職業(yè)崗位實(shí)際工作任務(wù)所需要的知識(shí)、能力、素質(zhì)要求來(lái)確定教學(xué)內(nèi)容；2）反復(fù)強(qiáng)化在實(shí)踐過(guò)程中常用的知識(shí)和技能。資源搜索內(nèi)容草圖形成靜態(tài)頁(yè)面CSS與JS動(dòng)態(tài)網(wǎng)站技術(shù)角度的課程設(shè)計(jì)超級(jí)鏈接的使用下拉菜單的設(shè)計(jì)HTML+CSS+JavaScript綜合項(xiàng)目開(kāi)發(fā)JavaScript的表單驗(yàn)證配置Web站點(diǎn)發(fā)布Web站點(diǎn)Web站點(diǎn)發(fā)布HTML應(yīng)用CSS引用CSS應(yīng)用JS應(yīng)用綜合應(yīng)用課外項(xiàng)目拓展文字段落與圖片的設(shè)定頁(yè)面布局多媒體頁(yè)面設(shè)計(jì)表單設(shè)計(jì)窗口框架的使用頁(yè)面樣式設(shè)計(jì)區(qū)塊與層表格美化的設(shè)計(jì)三教學(xué)內(nèi)容與設(shè)施內(nèi)容的選取與組織網(wǎng)站編輯頁(yè)面設(shè)計(jì)靜態(tài)網(wǎng)頁(yè)的開(kāi)發(fā)網(wǎng)站的頁(yè)面的規(guī)范規(guī)范布局頁(yè)面客戶端驗(yàn)證客戶端特效Web站點(diǎn)發(fā)布網(wǎng)頁(yè)版面設(shè)計(jì)HTML高級(jí)應(yīng)用CSS的應(yīng)用JavaScript腳本編程軟件專業(yè)調(diào)研崗位能力分析本課程崗位能力分析崗位需求學(xué)習(xí)模塊項(xiàng)目設(shè)計(jì)HTML標(biāo)簽應(yīng)用CSS規(guī)范網(wǎng)頁(yè)內(nèi)容CSS頁(yè)面布局JS表單驗(yàn)證JS項(xiàng)目編程內(nèi)容的選取與組織課程內(nèi)容序化、重構(gòu)遵循職業(yè)成長(zhǎng)規(guī)律（課時(shí)安排）編號(hào)知識(shí)模塊安排1站點(diǎn)發(fā)布2HTML語(yǔ)言基礎(chǔ)3HTML表格布局4HTML框架布局5HTML表單設(shè)計(jì)6多媒體頁(yè)面設(shè)計(jì)7層疊樣式表CSS8DIV+CSS網(wǎng)頁(yè)布局9CSS特效10JavaScript基本語(yǔ)法11JavaScript表單驗(yàn)證12JavaScript事件處理與應(yīng)用項(xiàng)目1：web站點(diǎn)發(fā)布（4）1項(xiàng)目2：頁(yè)面版面設(shè)置（8）2項(xiàng)目3：HTML高級(jí)應(yīng)用（6）3項(xiàng)目4：CSS的應(yīng)用（10）4項(xiàng)目5：JavaScript腳本編程（20）5網(wǎng)頁(yè)設(shè)計(jì)師職業(yè)成長(zhǎng)規(guī)律初學(xué)者高級(jí)初學(xué)者有能力者熟練者專家入門(mén)和概念性知識(shí)：在不太明確的工作情境中利用復(fù)雜規(guī)律關(guān)聯(lián)性知識(shí)：在工作中注意和分析多種因素和規(guī)律間的關(guān)系詳細(xì)和功能性知識(shí)：能面對(duì)無(wú)固定答案的問(wèn)題、并獲得知識(shí)系統(tǒng)化知識(shí)：能感受對(duì)對(duì)經(jīng)驗(yàn)的和專業(yè)知識(shí)要求較高的復(fù)雜任務(wù)課程的組織與實(shí)施教學(xué)組織與實(shí)施計(jì)劃（宏觀）教學(xué)理念教學(xué)設(shè)計(jì)課堂教學(xué)工學(xué)結(jié)合工作流程模塊化模塊內(nèi)容案例化項(xiàng)目考核過(guò)程化理論實(shí)踐一體化課程教學(xué)重視“學(xué)習(xí)的內(nèi)容是工作，通過(guò)工作實(shí)現(xiàn)學(xué)習(xí)”的工學(xué)結(jié)合的思想，采用了：工作流程模塊化，模塊內(nèi)容案例化，課程考核過(guò)程化，理論實(shí)踐一體化的教學(xué)模式，充分實(shí)現(xiàn)了教學(xué)做一體化的教學(xué)體系。

課程的組織與實(shí)施教學(xué)組織與實(shí)施過(guò)程(微觀)內(nèi)容的選取與組織單元四：CSS的應(yīng)用

單元名稱主要內(nèi)容目標(biāo)與要求單元四CSS的應(yīng)用（1）CSS簡(jiǎn)介（2）選擇符的分類與定義（3）CSS的加載方法（4）CSS背景設(shè)置（5）文本樣式（6）CSS列表（7）盒模型（8）CSS定位（9）DIV+CSS頁(yè)面布局（1）掌握CSS簡(jiǎn)介、特點(diǎn)與使用規(guī)則；（2）掌握選擇符的分類與應(yīng)用；（3）掌握CSS的各種加載方法；（4）掌握CSS背景控制與應(yīng)用；（5）掌握CSS對(duì)文本樣式的控制；（6）掌握CSS對(duì)于列表元素的應(yīng)用；（7）掌握盒模型的原理與應(yīng)用；（8）掌握CSS的定位方式；（9）掌握DIV+CSS頁(yè)面布局的方法。技能目標(biāo)：第一、能進(jìn)行CSS設(shè)計(jì)與引用；第二、能使用DIV+CSS進(jìn)行區(qū)塊布局與應(yīng)用。課程的教學(xué)重點(diǎn)類別知識(shí)點(diǎn)解決辦法重點(diǎn)HTML頁(yè)面布局HTML表單與框架設(shè)計(jì)HMTL多媒體頁(yè)面設(shè)計(jì)經(jīng)典網(wǎng)頁(yè)賞析（企業(yè)500強(qiáng)），形成深刻印象多搜集相關(guān)教學(xué)資料，歸類存放、吸收精華通過(guò)拓展項(xiàng)目多實(shí)踐，精益求精網(wǎng)頁(yè)的布局（DIV+CSS）通過(guò)經(jīng)典案例分析CSS，先進(jìn)行操作，然后分析代碼分析使用模板的網(wǎng)站的優(yōu)點(diǎn)，并演示解決模板技術(shù)的捷徑針對(duì)問(wèn)題使用實(shí)踐教學(xué)案例庫(kù)使用CSS樣式美化網(wǎng)頁(yè)使用模板JavaScript設(shè)計(jì)先分析具體實(shí)例，形成感性認(rèn)識(shí)，然后總結(jié)一般規(guī)律，運(yùn)用一般規(guī)律指導(dǎo)網(wǎng)頁(yè)設(shè)計(jì)。下載優(yōu)秀的代碼進(jìn)行分析、吸取精華課程的教學(xué)難點(diǎn)類別知識(shí)點(diǎn)解決辦法難點(diǎn)HTML表單與框架設(shè)計(jì)根據(jù)學(xué)習(xí)規(guī)律，重復(fù)強(qiáng)化，使其知識(shí)內(nèi)化。提供課程案例庫(kù)，學(xué)生可以根據(jù)興趣自主學(xué)習(xí)。網(wǎng)頁(yè)中特效制作通過(guò)分析并掌握目前網(wǎng)站中常用的特效。通過(guò)觀察常見(jiàn)特效的效果及制作方法，了解JavaScript技術(shù)的應(yīng)用，激發(fā)學(xué)生該技術(shù)的興趣。HTML+CSS規(guī)范布局以實(shí)例分析網(wǎng)站的規(guī)劃與組織方法。讓學(xué)生自己動(dòng)手進(jìn)行真實(shí)網(wǎng)站的規(guī)劃與組織。JavaScript代碼的編寫(xiě)以實(shí)踐教學(xué)案例庫(kù)為引導(dǎo)以社會(huì)需求與真實(shí)項(xiàng)目為導(dǎo)向、壓力，引導(dǎo)學(xué)習(xí)編寫(xiě)程序本課程考核采用形成性考核方式，總評(píng)成績(jī)由形成性考核的各項(xiàng)成績(jī)組成，全面考核學(xué)生的動(dòng)手能力、基礎(chǔ)理論和平時(shí)學(xué)習(xí)狀況課程考核綜合素質(zhì)考核過(guò)程性考核

終結(jié)性考核

平時(shí)表現(xiàn)通用能力任務(wù)實(shí)踐考核項(xiàng)目實(shí)訓(xùn)考核期終考核++20%40%40%單元測(cè)試四教學(xué)方法與手段教學(xué)方法與手段多種教學(xué)方法的運(yùn)用123演示法：針對(duì)具體的知識(shí)點(diǎn)的學(xué)習(xí)，示范演示案例教學(xué)法：針對(duì)知識(shí)模塊的學(xué)習(xí)，案例庫(kù)的應(yīng)用項(xiàng)目教學(xué)法：針對(duì)拓展項(xiàng)目學(xué)習(xí)，項(xiàng)目開(kāi)發(fā)4反饋教學(xué)法：針對(duì)學(xué)生作品總結(jié)提高點(diǎn)線面循環(huán)教法學(xué)法教學(xué)方法在項(xiàng)目教學(xué)中教、學(xué)方法的使用教師教法學(xué)生學(xué)法師生互動(dòng)教學(xué)做一體講解座談引導(dǎo)指導(dǎo)資訊計(jì)劃實(shí)施展示構(gòu)建“多模式”的職業(yè)技能訓(xùn)練模式多模式職業(yè)技能訓(xùn)練體系5247模仿操作訓(xùn)練階段測(cè)試訓(xùn)練136優(yōu)秀作品賞析

拓展訓(xùn)練項(xiàng)目實(shí)戰(zhàn)訓(xùn)練現(xiàn)場(chǎng)開(kāi)發(fā)訓(xùn)練項(xiàng)目外包開(kāi)發(fā)教學(xué)手段五教學(xué)保障主編教材高等教育出版多媒體視頻教程課程簡(jiǎn)介學(xué)習(xí)指南課程標(biāo)準(zhǔn)整體設(shè)計(jì)說(shuō)課PPT說(shuō)課錄像單元設(shè)計(jì)教程授課錄像課程PPT實(shí)訓(xùn)報(bào)名冊(cè)習(xí)題與習(xí)題庫(kù)課程案例整體考核標(biāo)準(zhǔn)參考資源豐富的數(shù)字化教學(xué)資源資源庫(kù)平臺(tái)教學(xué)保障1.開(kāi)辟學(xué)生網(wǎng)站實(shí)踐基地2.建設(shè)網(wǎng)站項(xiàng)目開(kāi)發(fā)基地學(xué)生項(xiàng)目企業(yè)教師以項(xiàng)目為中心的實(shí)踐體系六課程特色課程特色特色一

課程教學(xué)內(nèi)容來(lái)源于項(xiàng)目，而教學(xué)過(guò)程中又讓學(xué)生學(xué)習(xí)并參與開(kāi)發(fā)項(xiàng)目。

項(xiàng)目教學(xué)內(nèi)容學(xué)生教師教師教師教師課程特色特色二