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

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

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