數(shù)字媒體藝術(shù)專(zhuān)業(yè)《網(wǎng)站制作技術(shù)》課程教學(xué)大綱

本科課程教學(xué)大綱一、課程基本信息課程名稱(chēng)（中文）網(wǎng)站制作技術(shù)（英文）WebFront-EndDevelopment課程代碼2040596課程學(xué)分2課程學(xué)時(shí)32理論學(xué)時(shí)16實(shí)踐學(xué)時(shí)16開(kāi)課學(xué)院藝術(shù)設(shè)計(jì)學(xué)院適用專(zhuān)業(yè)與年級(jí)數(shù)字媒體藝術(shù)二年級(jí)課程類(lèi)別與性質(zhì)專(zhuān)業(yè)必修課考核方式考查選用教材《網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML5+CSS3）》，矯桂娥，ISBN：978-7-113-23798-1,中國(guó)鐵道出版社2017年10月第1版是否為馬工程教材否先修課程人機(jī)界面設(shè)計(jì)2040215（4），圖標(biāo)設(shè)計(jì)(1)2040650（2）課程簡(jiǎn)介網(wǎng)頁(yè)的實(shí)質(zhì)是代碼：HTML，CSS以及其他類(lèi)型的代碼通過(guò)瀏覽器的解析形成了可視頁(yè)面。學(xué)習(xí)HTML/CSS語(yǔ)言，不僅僅能夠掌握網(wǎng)頁(yè)制作的技法，同時(shí)能夠增強(qiáng)對(duì)于網(wǎng)頁(yè)的理解，對(duì)網(wǎng)頁(yè)設(shè)計(jì)有很大的好處。網(wǎng)站制作是網(wǎng)頁(yè)設(shè)計(jì)的后續(xù)工作，是網(wǎng)頁(yè)設(shè)計(jì)的實(shí)施階段，也是網(wǎng)頁(yè)設(shè)計(jì)的檢驗(yàn)階段。本課程內(nèi)容涵蓋了進(jìn)行網(wǎng)站制作中所涉及的常用技術(shù)。一是網(wǎng)站制作基礎(chǔ)知識(shí)，包括網(wǎng)站制作技術(shù)概述，HTML、CSS的基本知識(shí)；二是以實(shí)際案例為基礎(chǔ)，以“從圖形到網(wǎng)頁(yè)，從整體到局部”的方式學(xué)習(xí)網(wǎng)頁(yè)的制作過(guò)程，以單一頁(yè)面為基礎(chǔ)進(jìn)行網(wǎng)站的主體頁(yè)面的制作。通過(guò)本課程的學(xué)生，能掌握制作常規(guī)靜態(tài)頁(yè)面的方法。選課建議與學(xué)習(xí)要求本課程適合數(shù)字媒體藝術(shù)專(zhuān)業(yè)二、三年級(jí)學(xué)生，要求學(xué)習(xí)本門(mén)課程的學(xué)生應(yīng)該了解一定的網(wǎng)絡(luò)知識(shí)，有相當(dāng)?shù)幕ヂ?lián)網(wǎng)使用經(jīng)驗(yàn)，初步具備網(wǎng)頁(yè)設(shè)計(jì)的能力，有編程基礎(chǔ)或者相關(guān)經(jīng)歷。

二、課程目標(biāo)與畢業(yè)要求（一）課程目標(biāo)類(lèi)型序號(hào)內(nèi)容知識(shí)目標(biāo)1知道網(wǎng)絡(luò)前端技術(shù)基本知識(shí)技能目標(biāo)2能夠使用HTML/CSS代碼編輯器的基本使用方法3能初步運(yùn)用HTML/CSS語(yǔ)言4能根據(jù)網(wǎng)頁(yè)設(shè)計(jì)稿制作網(wǎng)頁(yè)素養(yǎng)目標(biāo)(含課程思政目標(biāo))5理解數(shù)字設(shè)計(jì)審美特點(diǎn)6在設(shè)計(jì)實(shí)踐中能夠遵守設(shè)計(jì)規(guī)范7具備自主學(xué)習(xí)的意識(shí)與能力（二）課程支撐的畢業(yè)要求LO1品德修養(yǎng)：擁護(hù)中國(guó)共產(chǎn)黨的領(lǐng)導(dǎo)，堅(jiān)定理想信念，自覺(jué)涵養(yǎng)和積極弘揚(yáng)社會(huì)主義核心價(jià)值觀，增強(qiáng)政治認(rèn)同、厚植家國(guó)情懷、遵守法律法規(guī)、傳承雷鋒精神，踐行“感恩、回報(bào)、愛(ài)心、責(zé)任”八字校訓(xùn)，積極服務(wù)他人、服務(wù)社會(huì)、誠(chéng)信盡責(zé)、愛(ài)崗敬業(yè)。②遵紀(jì)守法，增強(qiáng)法律意識(shí)，培養(yǎng)法律思維，自覺(jué)遵守法律法規(guī)、校紀(jì)校規(guī)。LO2專(zhuān)業(yè)能力：具有人文科學(xué)素養(yǎng)，具備從事某項(xiàng)工作或?qū)I(yè)的理論知識(shí)、實(shí)踐能力。⑥能夠?yàn)閿?shù)字媒體產(chǎn)品提供內(nèi)容制作，網(wǎng)絡(luò)與多媒體方向能夠進(jìn)行產(chǎn)品研究、交互設(shè)計(jì)、制定產(chǎn)品視覺(jué)規(guī)范以及DEMO的制作。LO4自主學(xué)習(xí)：能根據(jù)環(huán)境需要確定自己的學(xué)習(xí)目標(biāo)，并主動(dòng)地通過(guò)搜集信息、分析信息、討論、實(shí)踐、質(zhì)疑、創(chuàng)造等方法來(lái)實(shí)現(xiàn)學(xué)習(xí)目標(biāo)。②能搜集、獲取達(dá)到目標(biāo)所需要的學(xué)習(xí)資源，實(shí)施學(xué)習(xí)計(jì)劃、反思學(xué)習(xí)計(jì)劃、持續(xù)改進(jìn)，達(dá)到學(xué)習(xí)目標(biāo)。LO5健康發(fā)展：懂得審美、熱愛(ài)勞動(dòng)、為人熱忱、身心健康、耐挫折，具有可持續(xù)發(fā)展的能力。③懂得審美，有發(fā)現(xiàn)美、感受美、鑒賞美、評(píng)價(jià)美、創(chuàng)造美的能力。（三）畢業(yè)要求與課程目標(biāo)的關(guān)系畢業(yè)要求指標(biāo)點(diǎn)支撐度課程目標(biāo)對(duì)指標(biāo)點(diǎn)的貢獻(xiàn)度LO1②M6.在設(shè)計(jì)實(shí)踐中能夠遵守設(shè)計(jì)規(guī)范100%LO2⑥H1.知道網(wǎng)絡(luò)前端技術(shù)基本知識(shí)10%2.能夠使用HTML/CSS代碼編輯器的基本使用方法20%3.能初步運(yùn)用HTML/CSS語(yǔ)言30%4.能根據(jù)網(wǎng)頁(yè)設(shè)計(jì)稿制作網(wǎng)頁(yè)40%LO4②M7.具備自主學(xué)習(xí)的意識(shí)與能力100%LO5③M5.理解數(shù)字設(shè)計(jì)審美特點(diǎn)100%三、課程內(nèi)容與教學(xué)設(shè)計(jì)（一）各教學(xué)單元預(yù)期學(xué)習(xí)成果與教學(xué)內(nèi)容1.前端技術(shù)概覽知道前端技術(shù)以及掌握技術(shù)的重要性，知道編寫(xiě)代碼技術(shù)以及網(wǎng)站制作技術(shù)的類(lèi)型以及發(fā)展趨勢(shì)。2.HTML基礎(chǔ)知道HTML的基本知識(shí)，理解編寫(xiě)HTML的流程，能熟練掌握幾種常見(jiàn)的元素如段落、標(biāo)題、超鏈接、列表、超鏈接等，能使用一種業(yè)界常用代碼編輯器。3.CSS基礎(chǔ)本單元學(xué)生需要了解CSS的基本概念及工作原理，掌握使用CSS設(shè)置頁(yè)面元素樣式方法，掌握使用CSS為超鏈接添加互動(dòng)效果的方法。理解HTML元素的分類(lèi)（class）與標(biāo)識(shí)（id）的概念，掌握頁(yè)面布局的基本方法及深刻理解盒模型的含義與應(yīng)用方法，理解浮動(dòng)元素的概念；掌握使用CSS布局與定位頁(yè)面元素的重要方法4.網(wǎng)頁(yè)制作本單元從圖像到網(wǎng)頁(yè)。學(xué)生需要了解HTML和CSS技術(shù)制作網(wǎng)頁(yè)的技巧，掌握Photoshop切圖的技巧，對(duì)圖像的優(yōu)化并合理選擇圖像的格式，掌握建立網(wǎng)站/網(wǎng)頁(yè)項(xiàng)目建立的方法，掌握頁(yè)面背景的制作方法，掌握網(wǎng)站整體與局部布局的方法，初步了解CSSReset的使用方法，掌握f(shuō)avicon的設(shè)置方法。（二）教學(xué)單元對(duì)課程目標(biāo)的支撐關(guān)系課程目標(biāo)教學(xué)單元12345671.前端技術(shù)概覽√√2.HTML基礎(chǔ)√√√3.CSS基礎(chǔ)√√√4.網(wǎng)頁(yè)制作√√√√√（三）課程教學(xué)方法與學(xué)時(shí)分配教學(xué)單元教與學(xué)方式考核方式學(xué)時(shí)分配理論實(shí)踐小計(jì)1.前端技術(shù)概覽教師通過(guò)理論授課、案例分析、課堂討論等方式進(jìn)行教學(xué)快題設(shè)計(jì)2022.HTML基礎(chǔ)教師進(jìn)行實(shí)踐演示，學(xué)生根據(jù)演示與源代碼進(jìn)行學(xué)習(xí)實(shí)踐?？祛}設(shè)計(jì)4483.CSS基礎(chǔ)教師進(jìn)行實(shí)踐演示，學(xué)生根據(jù)演示與源代碼進(jìn)行學(xué)習(xí)實(shí)踐?？祛}設(shè)計(jì)46104.網(wǎng)頁(yè)制作教師進(jìn)行實(shí)踐演示，學(xué)生根據(jù)演示與源代碼進(jìn)行學(xué)習(xí)實(shí)踐。項(xiàng)目制作6612合計(jì)161632（四）課內(nèi)實(shí)驗(yàn)項(xiàng)目與基本要求序號(hào)實(shí)驗(yàn)項(xiàng)目名稱(chēng)目標(biāo)要求與主要內(nèi)容實(shí)驗(yàn)時(shí)數(shù)實(shí)驗(yàn)類(lèi)型1HTML基礎(chǔ)了解HTML語(yǔ)法格式，掌握HTML語(yǔ)言的基本寫(xiě)法，掌握HTML常用語(yǔ)句，能夠獨(dú)立編寫(xiě)基本的網(wǎng)頁(yè)代碼4④2CSS基礎(chǔ)了解CSS語(yǔ)法格式，掌握CSS語(yǔ)言的基本寫(xiě)法，掌握CSS常用語(yǔ)句，能夠獨(dú)立編寫(xiě)基本的網(wǎng)頁(yè)樣式表代碼。6④3網(wǎng)頁(yè)整體布局掌握網(wǎng)頁(yè)切圖的相關(guān)技巧，能夠理解HTML元素盒模型的含義，并利用其進(jìn)行頁(yè)面整體與局部的布局。6③實(shí)驗(yàn)類(lèi)型：①演示型②驗(yàn)證型③設(shè)計(jì)型④綜合型四、課程思政教學(xué)設(shè)計(jì)一、課程思政教學(xué)要點(diǎn)設(shè)計(jì)原則將社會(huì)主義核心價(jià)值觀融入技術(shù)教學(xué)，通過(guò)實(shí)踐操作培養(yǎng)學(xué)生的愛(ài)國(guó)情懷和社會(huì)責(zé)任感。結(jié)合課程內(nèi)容，引導(dǎo)學(xué)生自覺(jué)遵守法律法規(guī)，增強(qiáng)法律意識(shí)。通過(guò)項(xiàng)目實(shí)踐，培養(yǎng)學(xué)生誠(chéng)信盡責(zé)、愛(ài)崗敬業(yè)的職業(yè)精神。鼓勵(lì)學(xué)生積極服務(wù)他人、服務(wù)社會(huì)，將技術(shù)與人文關(guān)懷相結(jié)合。二、分單元的課程思政教學(xué)要點(diǎn)1.前端技術(shù)概覽強(qiáng)調(diào)前端開(kāi)發(fā)技術(shù)在中國(guó)互聯(lián)網(wǎng)產(chǎn)業(yè)中的重要地位，培養(yǎng)學(xué)生的民族自豪感和自信心。介紹前端技術(shù)的發(fā)展趨勢(shì)，引導(dǎo)學(xué)生關(guān)注國(guó)家科技發(fā)展，增強(qiáng)國(guó)家認(rèn)同感。結(jié)合中國(guó)優(yōu)秀網(wǎng)站案例，分析前端技術(shù)在文化傳承和社會(huì)責(zé)任方面的作用。2.HTML基礎(chǔ)在教授HTML基礎(chǔ)知識(shí)的同時(shí)，強(qiáng)調(diào)遵守互聯(lián)網(wǎng)法律法規(guī)的重要性，如不得制作傳播違法違規(guī)內(nèi)容。通過(guò)案例分析，讓學(xué)生了解HTML技術(shù)在社會(huì)公益網(wǎng)站中的應(yīng)用，培養(yǎng)學(xué)生的社會(huì)責(zé)任感。引導(dǎo)學(xué)生關(guān)注網(wǎng)站無(wú)障礙訪(fǎng)問(wèn)設(shè)計(jì)，培養(yǎng)關(guān)愛(ài)弱勢(shì)群體的意識(shí)。3.CSS基礎(chǔ)在教授CSS基礎(chǔ)知識(shí)時(shí)，強(qiáng)調(diào)遵守版權(quán)法律法規(guī)，不得盜用他人作品。結(jié)合中國(guó)優(yōu)秀網(wǎng)站案例，分析CSS技術(shù)在提升用戶(hù)體驗(yàn)和視覺(jué)效果方面的作用，培養(yǎng)學(xué)生的審美能力和創(chuàng)新意識(shí)。鼓勵(lì)學(xué)生利用CSS技術(shù)為公益網(wǎng)站設(shè)計(jì)美觀的界面，將技術(shù)與公益相結(jié)合。4.網(wǎng)頁(yè)制作在講授網(wǎng)頁(yè)制作技巧時(shí)，強(qiáng)調(diào)誠(chéng)信盡責(zé)、愛(ài)崗敬業(yè)的職業(yè)精神，要求學(xué)生以高度的責(zé)任心和敬業(yè)精神完成每一個(gè)項(xiàng)目。結(jié)合項(xiàng)目實(shí)踐，引導(dǎo)學(xué)生關(guān)注網(wǎng)站內(nèi)容的合規(guī)性和正當(dāng)性，增強(qiáng)法律意識(shí)。鼓勵(lì)學(xué)生利用所學(xué)技能為社會(huì)提供有價(jià)值的服務(wù)，如制作公益網(wǎng)站、參與志愿服務(wù)等，將技術(shù)與社會(huì)責(zé)任相結(jié)合。通過(guò)以上課程思政教學(xué)要點(diǎn)的設(shè)計(jì)