《Web前端技術(shù)》實(shí)驗(yàn)教學(xué)大綱

課程代碼3080000112課程名稱Web前端技術(shù)適用專業(yè)軟件工程本科先修課程程序設(shè)計(jì)基礎(chǔ)、計(jì)算機(jī)導(dǎo)論實(shí)驗(yàn)性質(zhì)非獨(dú)立設(shè)課開設(shè)學(xué)期3實(shí)驗(yàn)方式上機(jī)操作周數(shù)（學(xué)時(shí)）24學(xué)分1課程目標(biāo)（1）職業(yè)規(guī)范與道德修養(yǎng)：通過學(xué)習(xí)Web前端技術(shù)的理論和實(shí)踐知識，培養(yǎng)學(xué)生樹立社會(huì)主義核心價(jià)值觀，成為社會(huì)主義現(xiàn)代化建設(shè)事業(yè)的合格建設(shè)者和可靠接班人。學(xué)生應(yīng)養(yǎng)成良好的職業(yè)規(guī)范和職業(yè)操守，具有人文社會(huì)科學(xué)素養(yǎng)、社會(huì)責(zé)任感，能夠在工程實(shí)踐中理解并遵守工程職業(yè)道德和規(guī)范，履行責(zé)任。（2）綜合應(yīng)用能力：根據(jù)掌握的HTML5和CSS3相關(guān)知識，能夠?qū)eb前端開發(fā)各個(gè)環(huán)節(jié)的實(shí)際問題進(jìn)行分析，具備能夠獨(dú)立構(gòu)建簡單網(wǎng)站及復(fù)雜網(wǎng)站的能力。（3）終身學(xué)習(xí)能力：能夠跟蹤Web前端技術(shù)前沿，持續(xù)提高HTML和CSS的應(yīng)用能力，不斷拓展頁面布局和移動(dòng)開發(fā)的應(yīng)用方法。能夠適應(yīng)移動(dòng)互聯(lián)網(wǎng)行業(yè)對Web前端開發(fā)人員崗位需求的不斷變化。（4）團(tuán)隊(duì)領(lǐng)導(dǎo)與協(xié)作：能夠就Web前端相關(guān)的一般工程問題與業(yè)界同行及團(tuán)隊(duì)成員進(jìn)行有效溝通和交流，掌握團(tuán)隊(duì)協(xié)作與沖突解決的方法。培養(yǎng)學(xué)生的創(chuàng)新能力、溝通能力、團(tuán)隊(duì)協(xié)作能力、應(yīng)變能力、領(lǐng)導(dǎo)能力等。通過分工與合作，增強(qiáng)合作意識，培養(yǎng)協(xié)作精神。教學(xué)要求完成課程學(xué)習(xí)后，學(xué)生將具備以下能力：1.

在前端技術(shù)與移動(dòng)開發(fā)等學(xué)科具備基本的知識、技術(shù)和能力；2.

在前端開發(fā)團(tuán)隊(duì)中有效工作的能力；3.

通過實(shí)驗(yàn)報(bào)告、書面報(bào)告和口頭報(bào)告有效溝通的能力；4.

理解專業(yè)的、道德的和社會(huì)責(zé)任的能力；5.

尊重多樣性、現(xiàn)代化專業(yè)知識、社會(huì)和全球問題；6.

保證前端項(xiàng)目質(zhì)量和實(shí)效性并不斷進(jìn)步。一、實(shí)驗(yàn)的性質(zhì)、目的和任務(wù)1.

性質(zhì)本課程的實(shí)驗(yàn)性質(zhì)是非獨(dú)立設(shè)置實(shí)驗(yàn)課，在實(shí)驗(yàn)實(shí)訓(xùn)室中采用上機(jī)操作進(jìn)行。2.

目的通過開展實(shí)驗(yàn)，可以讓學(xué)生掌握HTML、CSS、Javascript等前端技術(shù)的基本用法并能配合使用。為學(xué)生今后從事Web技術(shù)及應(yīng)用方面的工作打下基礎(chǔ)。3.

任務(wù)（1）掌握HTML語法，掌握CSS的基本語法、選擇器類型、CSS定義與引用方法。（2）理解CSS盒子模型、掌握邊框、邊界、填充及內(nèi)容等屬性及設(shè)置方法熟練地使用DIV標(biāo)記的CSS各類屬性。（3）會(huì)使用外部樣式表定義頁面樣式、熟悉各類常見的頁面布局類型、能夠?qū)懗鱿鄳?yīng)的DIV結(jié)構(gòu)及CSS規(guī)則。（4）熟悉常見網(wǎng)頁布局結(jié)構(gòu)類型、能夠?qū)χ髁魃虡I(yè)網(wǎng)站布局結(jié)構(gòu)進(jìn)行分析；（5）能夠綜合運(yùn)用DIV+CSS對小型網(wǎng)站頁面進(jìn)行布局規(guī)劃、編寫代碼實(shí)現(xiàn)布局效果。

（6）熟悉自適應(yīng)網(wǎng)頁布局結(jié)構(gòu)方式、能夠使用bootstrap創(chuàng)建自適應(yīng)頁面。二、實(shí)驗(yàn)的基本內(nèi)容和要求序號實(shí)驗(yàn)項(xiàng)目天數(shù)（學(xué)時(shí)數(shù)）實(shí)驗(yàn)屬性內(nèi)容與要求1CSS基礎(chǔ)6演示性內(nèi)容：了解CSS的規(guī)則。要求：（1）掌握CSS的基本語法；（2）掌握CSS選擇器類型；（3）掌握CSS定義與引用方法。2盒子模型6演示性內(nèi)容：盒子模型的相關(guān)性質(zhì)。要求：（1）理解CSS盒子模型；（2）掌握邊框、邊界、填充及內(nèi)容等屬性及設(shè)置方法；（3）熟練地使用DIV標(biāo)記的CSS各類屬性；（4）掌握CSS定義與引用方法，學(xué)會(huì)使用外部樣式表定義頁面樣式；（5）熟悉各類常見的頁面布局類型，能夠?qū)懗鱿鄳?yīng)的DIV結(jié)構(gòu)及CSS規(guī)則。3小兔鮮兒項(xiàng)目制作6演示性內(nèi)容：使用DIV+CSS方式進(jìn)行布局。要求：（1）熟悉常見網(wǎng)頁布局結(jié)構(gòu)類型；（2）能夠?qū)χ髁魃虡I(yè)網(wǎng)站布局結(jié)構(gòu)進(jìn)行分析；（3）綜合運(yùn)用DIV+CSS對小型網(wǎng)站頁面進(jìn)行布局規(guī)劃、編寫代碼實(shí)現(xiàn)布局效果。4彈性布局6演示性內(nèi)容：使用彈性網(wǎng)絡(luò)構(gòu)建頁面布局。要求：（1）熟悉自適應(yīng)網(wǎng)頁布局結(jié)構(gòu)方式；（2）能夠使用bootstrap創(chuàng)建自適應(yīng)頁面。三、主要儀器設(shè)備及材料PC終端Win10/Win11操作系統(tǒng)VisualStudioCode編輯器chrome瀏覽器像素大廚軟件四、實(shí)驗(yàn)的考核辦法實(shí)驗(yàn)考核內(nèi)容主要分為：實(shí)驗(yàn)過程、實(shí)驗(yàn)設(shè)計(jì)和實(shí)驗(yàn)報(bào)告三部分。實(shí)驗(yàn)過程考核主要考查學(xué)生課程出勤、實(shí)驗(yàn)態(tài)度、實(shí)驗(yàn)任務(wù)完成情況、實(shí)驗(yàn)過程中分析問題和解決問題的能力等方面；實(shí)驗(yàn)設(shè)計(jì)考核主要考查學(xué)生設(shè)計(jì)的規(guī)范性、合理性和美觀性等方面；實(shí)驗(yàn)報(bào)告考核主要是考查實(shí)驗(yàn)報(bào)告內(nèi)容的完整性、正確性和規(guī)范性等方面。以上三部分分別占三分之一的分?jǐn)?shù)。考核采用分組形式進(jìn)行，同一小組成員分工不同，按照分工打分。五、指