《網(wǎng)頁(yè)設(shè)計(jì)與制作》教學(xué)大綱一、前言（一）課程性質(zhì)本課程是中等職業(yè)學(xué)校計(jì)算機(jī)應(yīng)用專業(yè)的一門專業(yè)核心課程，是從事Web前端開發(fā)崗位工作的必修課程。圍繞互聯(lián)網(wǎng)+、新興技術(shù)行業(yè)帶來(lái)的Web前端開發(fā)技術(shù)技能人才需求，通過對(duì)相關(guān)工作崗位進(jìn)行整體化的調(diào)研與分析，以就業(yè)為導(dǎo)向，采用模塊化項(xiàng)目式的課程開發(fā)方法，形成的一門學(xué)習(xí)領(lǐng)域課程。通過對(duì)本課程的學(xué)習(xí)，要求學(xué)生掌握網(wǎng)頁(yè)制作的基本概念，學(xué)會(huì)使用網(wǎng)頁(yè)制作工具制作網(wǎng)頁(yè)、掌握基本的網(wǎng)頁(yè)代碼語(yǔ)言HTML+CSS，能夠設(shè)計(jì)制作小型靜態(tài)網(wǎng)站，具備基本的維護(hù)能力。同時(shí)通過本課程的學(xué)習(xí)，培養(yǎng)學(xué)生的綜合職業(yè)能力和良好的職業(yè)道德。（二）設(shè)計(jì)思路本課程總體設(shè)計(jì)思路是以計(jì)算機(jī)技術(shù)應(yīng)用專業(yè)相關(guān)工作任務(wù)和職業(yè)能力分析為依據(jù)，參照“1+X”Web前端技能等級(jí)（初級(jí)）標(biāo)準(zhǔn)確定課程目標(biāo)，設(shè)計(jì)課程內(nèi)容，以工作任務(wù)為線索構(gòu)建任務(wù)引領(lǐng)型課程。課程結(jié)構(gòu)是以網(wǎng)頁(yè)制作為線索進(jìn)行設(shè)計(jì)，進(jìn)行一個(gè)完整的教學(xué)項(xiàng)目。為了充分體現(xiàn)任務(wù)引領(lǐng)、實(shí)踐導(dǎo)向的課程思想，將課程的教學(xué)內(nèi)容設(shè)計(jì)成若干個(gè)工作任務(wù)，以工作任務(wù)為中心引出相關(guān)專業(yè)知識(shí)；以典型的網(wǎng)頁(yè)制作技術(shù)為基礎(chǔ)，展開網(wǎng)頁(yè)制作教學(xué)過程。教學(xué)活動(dòng)設(shè)計(jì)深入淺出，采用參與式教學(xué)模式，提升學(xué)生的課堂參與度與獲得感。本課程要求充分運(yùn)用現(xiàn)代職教理念與技術(shù)，引導(dǎo)學(xué)生在學(xué)習(xí)活動(dòng)中學(xué)會(huì)學(xué)習(xí)，培養(yǎng)興趣；在與自然的交流中培養(yǎng)一切從實(shí)踐而來(lái)，尊重科學(xué)的理念；在與身邊的老師、同學(xué)共同討論中深化對(duì)學(xué)習(xí)內(nèi)容的理解，形成基本的職業(yè)能力。二、課程目標(biāo)通過本課程的教學(xué)活動(dòng)，使學(xué)生能整體認(rèn)識(shí)網(wǎng)頁(yè)制作的一般流程，每個(gè)環(huán)節(jié)要注意的事項(xiàng)和實(shí)現(xiàn)辦法，培養(yǎng)學(xué)生具備如下基本職業(yè)技能。（一）知識(shí)目標(biāo)1.掌握網(wǎng)頁(yè)制作軟件的安裝。2.掌握網(wǎng)頁(yè)文字處理的一般原則。3.能運(yùn)用不同技術(shù)進(jìn)行設(shè)計(jì)。4.掌握?qǐng)D片在網(wǎng)頁(yè)中的運(yùn)用。5.理解并掌握CSS技術(shù)在網(wǎng)頁(yè)中的應(yīng)用。6.明白表格、表單設(shè)計(jì)的一般原則，掌握美化辦法。7.理解網(wǎng)頁(yè)的布局方式，掌握常見布局定位辦法。8.能掌握網(wǎng)頁(yè)制作的相關(guān)技巧。（二）能力目標(biāo)1.善于與客戶溝通，明白客戶需求，留住項(xiàng)目。2.明白不同行業(yè)用戶的需求，能按照用戶的要求快速規(guī)劃網(wǎng)站的設(shè)計(jì)方案；3.能按照設(shè)計(jì)方案，創(chuàng)意性設(shè)計(jì)網(wǎng)頁(yè)界面。4.能在規(guī)定的時(shí)間拿出設(shè)計(jì)草圖，再次與用戶溝通，整改并確定設(shè)計(jì)草圖。5.會(huì)選取、制作網(wǎng)頁(yè)需要的素材，包括文字、圖片、動(dòng)畫等。6.能按照網(wǎng)頁(yè)三層結(jié)構(gòu)，遵循Web設(shè)計(jì)標(biāo)準(zhǔn)，設(shè)計(jì)網(wǎng)頁(yè)。（三）素質(zhì)目標(biāo)1.具有良好的人際交往能力、團(tuán)隊(duì)合作精神和客戶服務(wù)意識(shí)。2.具備吃苦耐勞、積極進(jìn)取、敬業(yè)愛崗的工作態(tài)度。3.具備勤于思考、善于動(dòng)手、勇于創(chuàng)新的精神。三、課程內(nèi)容與要求（一）教學(xué)內(nèi)容選取依據(jù)針對(duì)就業(yè)崗位需求，建構(gòu)課程體系；以工作過程為導(dǎo)向安排學(xué)習(xí)的進(jìn)程，以獲得職業(yè)工作能力為目標(biāo)，進(jìn)行專業(yè)核心能力一體化教學(xué)，對(duì)“工作任務(wù)—案例—項(xiàng)目”進(jìn)行“非線性結(jié)構(gòu)”的整合，通過對(duì)課程的有效控制與評(píng)價(jià)，促進(jìn)學(xué)生工作任務(wù)的完成，在參加職業(yè)活動(dòng)中學(xué)習(xí)“如何工作”。（二）教學(xué)內(nèi)容組織與安排教學(xué)內(nèi)容共4個(gè)項(xiàng)目，結(jié)合HTML+CSS的基礎(chǔ)知識(shí)及技能應(yīng)用，提供了3種不同類型的網(wǎng)頁(yè)開發(fā)實(shí)例。項(xiàng)目一為Web前端開發(fā)基礎(chǔ)。介紹Web前端開發(fā)的基礎(chǔ)知識(shí)，包括Web的起源、Web的相關(guān)概念、Web標(biāo)準(zhǔn)三劍客、前端框架技術(shù)、前端開發(fā)工具、瀏覽器工具、Web工作原理、前端開發(fā)流程、HTML文檔的基本結(jié)構(gòu)等。項(xiàng)目二為簡(jiǎn)單展示類網(wǎng)頁(yè)開發(fā)項(xiàng)目。通過講解HTML中文本、圖片、超鏈接元素以及CSS的概念、引入方式和基本樣式等知識(shí)技能，讓學(xué)生能夠制作“中國(guó)民俗”網(wǎng)站的專題內(nèi)容。項(xiàng)目三為網(wǎng)站功能模塊類開發(fā)項(xiàng)目。通過講解CSS選擇器基礎(chǔ)、盒子模型、浮動(dòng)布局以及列表、表格元素等知識(shí)技能，讓讀者能夠制作“古詩(shī)文”網(wǎng)站的功能模塊。項(xiàng)目四為綜合電商類網(wǎng)站開發(fā)項(xiàng)目。通過講解CSS選擇器進(jìn)階、元素類型轉(zhuǎn)換、CSS精靈圖、定位布局以及表單、iframe框架元素等知識(shí)技能，讓學(xué)生能夠制作“助農(nóng)樂購(gòu)”網(wǎng)站頁(yè)面。項(xiàng)目2~項(xiàng)目4為3個(gè)完整的網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例，按照網(wǎng)頁(yè)結(jié)構(gòu)功能細(xì)化知識(shí)點(diǎn)，用任務(wù)帶動(dòng)知識(shí)點(diǎn)的學(xué)習(xí)。在學(xué)習(xí)這些項(xiàng)目時(shí)，要求讀者要多上機(jī)實(shí)踐，以加深對(duì)項(xiàng)目中所涉及知識(shí)點(diǎn)的理解。四、實(shí)施建議本大綱適用于計(jì)算機(jī)應(yīng)用及相關(guān)專業(yè)中職學(xué)生，根據(jù)各學(xué)期教學(xué)周數(shù)的不同，學(xué)時(shí)數(shù)可能有所調(diào)整。建議學(xué)時(shí)為48~64學(xué)時(shí)，建議采用理實(shí)一體化的教學(xué)模式，各任務(wù)的參考學(xué)時(shí)見下面的學(xué)時(shí)分配表。項(xiàng)目項(xiàng)目和任務(wù)內(nèi)容建議學(xué)時(shí)項(xiàng)目1Web前端開發(fā)基礎(chǔ)任務(wù)1.1、任務(wù)1.21-2任務(wù)1.3、任務(wù)1.41-2項(xiàng)目2簡(jiǎn)單展示類網(wǎng)頁(yè)開發(fā)項(xiàng)目——“中國(guó)民俗”網(wǎng)站專題內(nèi)容的實(shí)現(xiàn)任務(wù)2.1、任務(wù)2.24-6任務(wù)2.34-6任務(wù)2.44-6項(xiàng)目3網(wǎng)站功能模塊類開發(fā)項(xiàng)目——“古詩(shī)文”網(wǎng)站功能模塊的實(shí)現(xiàn)任務(wù)3.1、任務(wù)3.24-6任務(wù)3.34-6任務(wù)3.44-6項(xiàng)目4綜合電商類網(wǎng)站開發(fā)項(xiàng)目——“助農(nóng)樂購(gòu)”網(wǎng)站頁(yè)面的實(shí)現(xiàn)任務(wù)4.1、任務(wù)4.26-8任務(wù)4.38任務(wù)4.48教學(xué)內(nèi)容可根據(jù)具體情況作適當(dāng)?shù)膭h補(bǔ)，同時(shí)在教學(xué)中應(yīng)注意隨時(shí)增加新的功能，讓學(xué)生了解軟件的發(fā)展動(dòng)態(tài)。絕大部分教學(xué)內(nèi)容可以在理實(shí)一體化實(shí)訓(xùn)室完成。教師可以采用情景化的教學(xué)模式，寓教于樂，激發(fā)學(xué)生的學(xué)習(xí)興趣。在課時(shí)順序的安排上，教師可以按照教學(xué)任務(wù)劃分的小節(jié)，分階段完成整個(gè)項(xiàng)目的設(shè)計(jì)和制作。（一）教材編寫1.本課程教材編寫應(yīng)打破傳統(tǒng)的學(xué)科式內(nèi)容體系，構(gòu)建以職業(yè)能力培養(yǎng)以及職業(yè)標(biāo)準(zhǔn)為依據(jù)的模塊化項(xiàng)目式課程內(nèi)容體系。以本課程標(biāo)準(zhǔn)為依據(jù)進(jìn)行編寫。2.教材編寫應(yīng)以行業(yè)專家對(duì)計(jì)算機(jī)應(yīng)用專業(yè)所涵蓋的工作任務(wù)和職業(yè)能力分析為依據(jù)，體現(xiàn)基礎(chǔ)性、趣味性和開拓性相統(tǒng)一的課程思想，激發(fā)學(xué)生對(duì)所學(xué)專業(yè)課程的熱愛與追求，鼓勵(lì)學(xué)生開展創(chuàng)造性思維活動(dòng)。并應(yīng)為教師留有根據(jù)實(shí)際教學(xué)情況進(jìn)行調(diào)整和創(chuàng)新的空間。3.教材內(nèi)容應(yīng)凸顯實(shí)踐性、應(yīng)用性和層次性的特征，不求體系的完整性，強(qiáng)調(diào)與崗位業(yè)務(wù)相吻合，并使學(xué)生易學(xué)、易懂、易接受。同時(shí)要具有前瞻性，應(yīng)納入本專業(yè)領(lǐng)域的發(fā)展趨勢(shì)及新知識(shí)、新技術(shù)和新方法。4.教材提倡圖文并茂，增加直觀性，隨同教材配備電子教案，多媒體教學(xué)課件和多媒體素材庫(kù)等，便于組織教學(xué)和有利于初學(xué)者引發(fā)學(xué)習(xí)興趣，提高學(xué)習(xí)的持續(xù)性。（二）教學(xué)方法與手段1.本課程以理實(shí)一體化教學(xué)為主。在教學(xué)過程中應(yīng)立足于加強(qiáng)學(xué)生實(shí)際操作能力的培養(yǎng)，采用項(xiàng)目教學(xué)，以任務(wù)引領(lǐng)激發(fā)學(xué)生的學(xué)習(xí)興趣。2.本課程采用現(xiàn)場(chǎng)教學(xué)，注重以學(xué)生為主，“教”與“學(xué)”互動(dòng)。在教學(xué)過程中由教師提出階梯狀要求，學(xué)生在不斷的練習(xí)中逐步達(dá)到目標(biāo)。3.教學(xué)中，要?jiǎng)?chuàng)設(shè)趣味性情景。練習(xí)項(xiàng)目有最近熱點(diǎn)新聞報(bào)道、笑話、故事、日常工作報(bào)告等不同形式，旨在不斷提高學(xué)生學(xué)習(xí)興趣，讓學(xué)生在愉快中完成學(xué)習(xí)。4.教學(xué)中應(yīng)培養(yǎng)學(xué)生具有踏實(shí)、穩(wěn)重、善于溝通和合作的品質(zhì)，為提升學(xué)生職業(yè)素養(yǎng)奠定良好的基礎(chǔ)。（三）考核與評(píng)價(jià)1.采用學(xué)習(xí)過程評(píng)價(jià)、項(xiàng)目完成評(píng)價(jià)等