《網(wǎng)頁(yè)設(shè)計(jì)》教學(xué)大綱

《網(wǎng)頁(yè)設(shè)計(jì)》教學(xué)大綱適用范圍：202X版本科人才培養(yǎng)方案課程代碼：09130391課程性質(zhì)：專業(yè)必修課學(xué)分：2.5學(xué)分學(xué)時(shí)：40學(xué)時(shí)（理論24學(xué)時(shí)，上機(jī)16學(xué)時(shí)）先修課程：信息處理技術(shù)后續(xù)課程：無(wú)適用專業(yè)：跨境電子商務(wù)開課單位：經(jīng)濟(jì)學(xué)院一、課程說(shuō)明《網(wǎng)頁(yè)設(shè)計(jì)》是跨境電子商務(wù)專業(yè)的一門專業(yè)必修課。本課程以Web基本概念和Web標(biāo)準(zhǔn)為基準(zhǔn)點(diǎn)、通過(guò)對(duì)Web前端主流開發(fā)技術(shù)的學(xué)習(xí)和研究，讓學(xué)生理解和掌握HTML基本語(yǔ)法格式、HTML5新增元素、CSS基礎(chǔ)知識(shí)、CSS3的相關(guān)知識(shí)，熟悉W3C規(guī)范，理解HTML5、CSS3的語(yǔ)法規(guī)則，掌握常用的Web頁(yè)面布局技術(shù)，理解并能夠應(yīng)用HTML5+CSS3進(jìn)行頁(yè)面排版布局，最終能夠綜合使用所學(xué)技術(shù)編寫符合標(biāo)準(zhǔn)的Web頁(yè)面。二、課程目標(biāo)通過(guò)本課程的學(xué)習(xí)，使學(xué)生達(dá)到如下目標(biāo)：課程目標(biāo)1：了解Web前端開發(fā)技術(shù)的相關(guān)概念、設(shè)計(jì)思想、開發(fā)技術(shù)及發(fā)展趨勢(shì)；理解Web前端頁(yè)面設(shè)計(jì)的基本理論和排版原則、核心知識(shí)點(diǎn)等；掌握HTML5、CSS3語(yǔ)法規(guī)則、盒模型、HTML5+CSS3排版布局的基礎(chǔ)知識(shí)。課程目標(biāo)2：能夠獲取專業(yè)前沿知識(shí)、技能，有自主學(xué)習(xí)、可持續(xù)發(fā)展及相關(guān)創(chuàng)新能力；能夠熟練運(yùn)用Web前端開發(fā)技術(shù)，能夠借助合適的軟件工具，完成Web前端頁(yè)面設(shè)計(jì)與制作。課程目標(biāo)3：能夠清晰表達(dá)網(wǎng)頁(yè)的設(shè)計(jì)思路、方案及效果等，并能與同行及公眾進(jìn)行溝通和交流；具有基本的審美意識(shí)和審美觀，能夠根據(jù)實(shí)際需求選擇合適的網(wǎng)頁(yè)色彩；能夠在網(wǎng)頁(yè)設(shè)計(jì)制作中堅(jiān)持細(xì)致耐心的工作態(tài)度，具有精益求精的工匠精神。三、課程目標(biāo)與畢業(yè)要求《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)目標(biāo)對(duì)跨境電子商務(wù)專業(yè)畢業(yè)要求的支撐見表1。畢業(yè)要求指標(biāo)點(diǎn)課程目標(biāo)支撐強(qiáng)度1.學(xué)科專業(yè)知識(shí)1.2掌握計(jì)算機(jī)科學(xué)與技術(shù)相關(guān)知識(shí)，并能將其應(yīng)用于解決跨境電子商務(wù)相關(guān)問題。課程目標(biāo)1：了解Web前端開發(fā)技術(shù)的相關(guān)概念、設(shè)計(jì)思想、開發(fā)技術(shù)及發(fā)展趨勢(shì)；理解Web前端頁(yè)面設(shè)計(jì)的基本理論和排版原則、核心知識(shí)點(diǎn)等；掌握HTML5、CSS3語(yǔ)法規(guī)則、盒模型、HTML5+CSS3排版布局的基礎(chǔ)知識(shí)。M5.使用現(xiàn)代工具5.1了解專業(yè)常用的信息技術(shù)工具、專業(yè)軟件的使用原理和方法，并理解其局限性。課程目標(biāo)2：能夠獲取專業(yè)前沿知識(shí)、技能，有自主學(xué)習(xí)、可持續(xù)發(fā)展及相關(guān)創(chuàng)新能力；能夠熟練運(yùn)用Web前端開發(fā)技術(shù)，能夠借助合適的軟件工具，完成Web前端頁(yè)面設(shè)計(jì)與制作。M5.2能夠選擇與使用恰當(dāng)?shù)墓ぞ吆蛙浖瑢?duì)跨境電商市場(chǎng)規(guī)模、產(chǎn)品價(jià)格、銷售數(shù)據(jù)及產(chǎn)品表達(dá)等進(jìn)行分析、計(jì)算與設(shè)計(jì)。課程目標(biāo)2：能夠獲取專業(yè)前沿知識(shí)、技能，有自主學(xué)習(xí)、可持續(xù)發(fā)展及相關(guān)創(chuàng)新能力；能夠熟練運(yùn)用Web前端開發(fā)技術(shù)，能夠借助合適的軟件工具，完成Web前端頁(yè)面設(shè)計(jì)與制作。課程目標(biāo)3：能夠清晰表達(dá)網(wǎng)頁(yè)的設(shè)計(jì)思路、方案及效果等，并能與同行及公眾進(jìn)行溝通和交流；具有基本的審美意識(shí)和審美觀，能夠根據(jù)實(shí)際需求選擇合適的網(wǎng)頁(yè)色彩；能夠在網(wǎng)頁(yè)設(shè)計(jì)制作中堅(jiān)持細(xì)致耐心的工作態(tài)度，具有精益求精的工匠精神。H注：表中“H（高）、M（中）”表示課程與相關(guān)畢業(yè)要求的關(guān)聯(lián)度。四、教學(xué)內(nèi)容、基本要求與學(xué)時(shí)分配1.理論部分理論部分的教學(xué)內(nèi)容、基本要求與學(xué)時(shí)分配見表2。表2教學(xué)內(nèi)容、基本要求與學(xué)時(shí)分配教學(xué)內(nèi)容教學(xué)要求，教學(xué)重點(diǎn)難點(diǎn)理論學(xué)時(shí)上機(jī)學(xué)時(shí)對(duì)應(yīng)的課程目標(biāo)1.網(wǎng)頁(yè)設(shè)計(jì)概述1.1網(wǎng)頁(yè)的發(fā)展1.2網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)1.3網(wǎng)站設(shè)計(jì)流程1.4web開發(fā)工具的選用教學(xué)要求：使學(xué)生了解web工作原理、常用的web瀏覽器；掌握網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)概念；了解網(wǎng)站開發(fā)流程；熟悉Web設(shè)計(jì)的原則、網(wǎng)站結(jié)構(gòu)規(guī)劃的原則；了解網(wǎng)頁(yè)布局設(shè)計(jì)類型、布局設(shè)計(jì)元素、布局設(shè)計(jì)技術(shù)；了解web開發(fā)工具的選用。重點(diǎn)：網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)、開發(fā)工具的選用。難點(diǎn)：網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)。21、3HTML5語(yǔ)言HTML5簡(jiǎn)介HTML5文檔基礎(chǔ)結(jié)構(gòu)HTML5語(yǔ)法規(guī)則教學(xué)要求：使學(xué)生了解HTML，各版本文檔結(jié)構(gòu)的不同點(diǎn)；掌握HTML標(biāo)記語(yǔ)法、元素的嵌套。重點(diǎn)：HTML文檔結(jié)構(gòu)、HTML5語(yǔ)法規(guī)則。難點(diǎn)：HTML語(yǔ)法規(guī)則。21、23.HTML常用標(biāo)記3.1HTML文本標(biāo)記3.2列表、表格和框架3.3圖像和超鏈接教學(xué)要求：使學(xué)生掌握HTML文本標(biāo)記的作用，牢記各個(gè)標(biāo)簽的語(yǔ)法格式；掌握行內(nèi)元素與塊級(jí)元素的區(qū)別，了解他們之間的相互轉(zhuǎn)換方法；掌握超鏈接的相關(guān)知識(shí)，會(huì)制作三種不同形式的超鏈接；掌握三種列表的語(yǔ)法規(guī)則，會(huì)用表格元素繪制表格。重點(diǎn)：HTML文本標(biāo)記的作用；標(biāo)記規(guī)則；各個(gè)標(biāo)簽的語(yǔ)法格式。難點(diǎn)：行內(nèi)元素與塊級(jí)元素的區(qū)別；超鏈接的使用；相對(duì)路徑與絕對(duì)路徑；列表的嵌套；表格標(biāo)簽的語(yǔ)法與屬性。421、2、34.HTML表單4.1表單設(shè)計(jì)基礎(chǔ)4.2表單標(biāo)記教學(xué)要求：使學(xué)生了解表單的作用；熟悉并掌握表單標(biāo)記和常用表單元素的標(biāo)記；掌握input標(biāo)記的類型；熟悉并掌握表單的常用屬性。重點(diǎn)：表單標(biāo)記規(guī)則；各個(gè)標(biāo)簽的語(yǔ)法格式。難點(diǎn)：input標(biāo)記的類型和value等屬性；select標(biāo)記的下拉菜單和label標(biāo)記的綁定。221、2、35.CSS基礎(chǔ)5.1CSS概述5.2CSS語(yǔ)法及規(guī)則5.3CSS引用方法5.4CSS選擇器教學(xué)要求：使學(xué)生熟練掌握什么是CSS、它的主要作用，它與HTML之間的關(guān)系；熟練掌握CSS樣式表的三種方式，樣式的優(yōu)先級(jí)；掌握CSS各種基礎(chǔ)選擇器的使用方法，會(huì)根據(jù)需求選擇合適的選擇器；重點(diǎn)：CSS語(yǔ)法規(guī)則；基礎(chǔ)選擇器；難點(diǎn)：優(yōu)先級(jí)；CSS選擇器。421、2、36.使用CSS設(shè)置樣式6.1設(shè)置背景樣式6.2設(shè)置文本樣式6.3設(shè)置列表、表格樣式教學(xué)要求：使學(xué)生熟練掌握使用CSS背景樣式、設(shè)置文本樣式、列表樣式、表格樣式；重點(diǎn)：設(shè)置文本樣式、背景樣式、列表樣式；難點(diǎn)：設(shè)置列表樣式。227.盒子模型7.1盒子模型概念7.2盒子模型相關(guān)屬性7.3盒子模型之間的關(guān)系7.4浮動(dòng)和定位7.5網(wǎng)頁(yè)布局教學(xué)要求：使學(xué)生熟練掌握盒子模型的概念和屬性、掌握浮動(dòng)和定位的方法；會(huì)綜合運(yùn)用CSS知識(shí)對(duì)網(wǎng)頁(yè)元素進(jìn)行排版布局、美化修飾。重點(diǎn)：盒子模型的相關(guān)屬性；浮動(dòng)和定位。難點(diǎn)：浮動(dòng)和定位661、2、38.網(wǎng)頁(yè)多媒體的實(shí)現(xiàn)8.1HTML5音頻和視頻8.2CSS動(dòng)畫設(shè)計(jì)教學(xué)要求：使學(xué)生掌握web頁(yè)面中插入音視頻的方法，能控制音視頻的播放；掌握CSS3中新增的元素和屬性；了解什么叫做過(guò)渡，知道過(guò)渡的屬性、時(shí)間、延遲和相關(guān)函數(shù)；了解CSS3動(dòng)畫的制作原理、動(dòng)畫類型，能夠制作簡(jiǎn)單動(dòng)畫。重點(diǎn)：CSS3新增元素；音視頻的插入、屬性的設(shè)置。難點(diǎn)：CSS3復(fù)雜選擇器、動(dòng)畫、2D和3D轉(zhuǎn)換、過(guò)渡效果。221、2、3合計(jì)24162.上機(jī)部分上機(jī)部分的教學(xué)內(nèi)容、基本要求與學(xué)時(shí)分配見表3。表3上機(jī)項(xiàng)目、上機(jī)內(nèi)容與學(xué)時(shí)上機(jī)項(xiàng)目上機(jī)內(nèi)容和要求上機(jī)學(xué)時(shí)對(duì)應(yīng)的課程目標(biāo)1.用HTML常用標(biāo)簽和語(yǔ)法編輯網(wǎng)頁(yè)上機(jī)內(nèi)容：用HTML常用標(biāo)簽和語(yǔ)法編輯網(wǎng)頁(yè)。上機(jī)要求：掌握HTML文本標(biāo)記的作用，牢記各個(gè)標(biāo)簽的語(yǔ)法格式；掌握行內(nèi)元素與塊級(jí)元素的區(qū)別，了解他們之間的相互轉(zhuǎn)換方法；掌握超鏈接的相關(guān)知識(shí)，會(huì)制作三種不同形式的超鏈接；掌握三種列表的語(yǔ)法規(guī)則，會(huì)用表格元素繪制表格；掌握表單標(biāo)簽各個(gè)元素的用法，會(huì)使用HTML5新增的表單元素制作表單。422.使用CSS美化網(wǎng)頁(yè)上機(jī)內(nèi)容：使用CSS美化網(wǎng)頁(yè)。上機(jī)要求：熟練掌握CSS樣式表的三種方式，樣式的優(yōu)先級(jí)；掌握CSS各種基礎(chǔ)選擇器的使用方法，會(huì)根據(jù)需求選擇合適的選擇器；會(huì)綜合運(yùn)用CSS知識(shí)對(duì)網(wǎng)頁(yè)元素進(jìn)行美化修飾。423.使用DIV+CSS布局網(wǎng)頁(yè)上機(jī)內(nèi)容：使用DIV+CSS布局網(wǎng)頁(yè)。上機(jī)要求：熟練掌握盒子模型的概念和屬性、掌握浮動(dòng)和定位的方法，會(huì)使用盒子模型進(jìn)行排版布局；會(huì)綜合運(yùn)用CSS知識(shí)對(duì)網(wǎng)頁(yè)元素進(jìn)行排版布局、美化修飾。624.使用網(wǎng)頁(yè)多媒體技術(shù)豐富網(wǎng)頁(yè)上機(jī)內(nèi)容：網(wǎng)頁(yè)中插入音視頻、動(dòng)畫等。上機(jī)要求：掌握web頁(yè)面中插入音視頻的方法，能控制音視頻的播放；掌握CSS3中新增的元素和屬性；了解什么叫做過(guò)渡，理解過(guò)渡的屬性、時(shí)間、延遲和相關(guān)函數(shù)；了解CSS3動(dòng)畫的制作原理、動(dòng)畫類型，能夠制作簡(jiǎn)單動(dòng)畫。22合計(jì)16五、教學(xué)方法及手段本課程講練結(jié)合，采用啟發(fā)式、任務(wù)驅(qū)動(dòng)式教學(xué)和案例教學(xué)等，配上視頻資源共享、上機(jī)實(shí)踐等教學(xué)手段完成課程教學(xué)任務(wù)和相關(guān)能力的培養(yǎng)。學(xué)生比較全面地理解web網(wǎng)頁(yè)設(shè)計(jì)原理，在掌握HTML、CSS標(biāo)簽與語(yǔ)法基礎(chǔ)上，具有進(jìn)行web網(wǎng)頁(yè)設(shè)計(jì)和優(yōu)化的初步能力。在上機(jī)實(shí)踐環(huán)節(jié)中，通過(guò)任務(wù)驅(qū)動(dòng)式教學(xué)結(jié)合專業(yè)內(nèi)容培養(yǎng)學(xué)生網(wǎng)頁(yè)設(shè)計(jì)的基本知識(shí)和技能。培養(yǎng)學(xué)生自主學(xué)習(xí)能力、實(shí)際動(dòng)手能力，激發(fā)學(xué)生的創(chuàng)新思維。六、課程資源1.推薦教材：（1）范伊紅.基于HTML5的網(wǎng)頁(yè)設(shè)計(jì)及應(yīng)用（第2版）[M].北京:電子工業(yè)出版社,2022.（2）朱金華.網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京:機(jī)械工業(yè)出版社,2021.2.參考書：（1）秦鳳梅,何桂蘭.網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目案例教程(第2版)[M].北京:電子工業(yè)出版社.2021.10.（2）黑馬程序員.網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML+CSS）[M].北京:\o"中國(guó)鐵道出版社有限公司"中國(guó)鐵道出版社有限公司，2021.（3）未來(lái)科技.HTML5+CSS3從入門到精通[M].北京:中國(guó)水利水電出版社，2018.3.期刊：（1）商業(yè)經(jīng)濟(jì)研究.中國(guó)商業(yè)經(jīng)濟(jì)協(xié)會(huì).（2）中國(guó)商論.中國(guó)商業(yè)聯(lián)合會(huì).（3）JournalofBusinessResearch.ElsevierBV.（4）管理科學(xué)與工程.漢斯出版社.（5）計(jì)算機(jī)學(xué)報(bào).中國(guó)計(jì)算機(jī)學(xué)會(huì);中國(guó)科學(xué)院計(jì)算技術(shù)研究所.4.網(wǎng)絡(luò)資源：（1）WEB技術(shù)教程：/（2）萬(wàn)維網(wǎng)聯(lián)盟:/（3）菜鳥教程：/（4）網(wǎng)易公開課：/special/opencourse/designfortheweb.html（5）網(wǎng)頁(yè)設(shè)計(jì)與制作精品課程：/jxdg.htm七、課程考核對(duì)課程目標(biāo)的支撐課程成績(jī)由過(guò)程性考核成績(jī)和期末考核成績(jī)兩部分構(gòu)成，具體考核/評(píng)價(jià)細(xì)則及對(duì)課程目標(biāo)的支撐關(guān)系見表4。表4課程考核對(duì)課程目標(biāo)的支撐考核環(huán)節(jié)占比考核/評(píng)價(jià)細(xì)則課程目標(biāo)123過(guò)程性考核課堂表現(xiàn)15（1）根據(jù)課堂出勤情況和課堂回答問題情況進(jìn)行考核，滿分100分。（2）以平時(shí)考核成績(jī)乘以其在總評(píng)成績(jī)中所占的比例計(jì)入課程總評(píng)成績(jī)?！獭獭?62上機(jī)作業(yè)20（1）根據(jù)每次上機(jī)任務(wù)完成情況和作品質(zhì)量單獨(dú)評(píng)分，滿分100分。（2）每次上機(jī)單獨(dú)評(píng)分，取各次成績(jī)的平均值作為此環(huán)節(jié)的最終成績(jī)。（3）以上機(jī)成績(jī)乘以其在總評(píng)成績(jī)中所占的比例計(jì)入課程總評(píng)成績(jī)?！獭獭?111小組任務(wù)5主要考核學(xué)生對(duì)所學(xué)知識(shí)點(diǎn)的復(fù)習(xí)、理解和掌握程度，以及團(tuán)隊(duì)的分工合作，滿分100分。每次小組任務(wù)單獨(dú)評(píng)分，取各次成績(jī)的平均值作為此環(huán)節(jié)的最終成績(jī)。（3）以小組任務(wù)成績(jī)乘以其在總評(píng)成績(jī)中所占的比例計(jì)入課程總評(píng)成績(jī)?！獭獭?42章節(jié)測(cè)試10（1）根據(jù)線上單元測(cè)試題完成情況進(jìn)行考核，滿分100分。（2）以章節(jié)測(cè)試考核成績(jī)乘以其在總評(píng)成績(jī)中所占的比例計(jì)入課程總評(píng)成績(jī)。221期末考核50（1）總成績(jī)100分，以期末成績(jī)乘以其在總評(píng)成績(jī)中所占的比例計(jì)入課程總評(píng)成績(jī)。（2）主要考核HTML、CSS的標(biāo)簽、語(yǔ)法在網(wǎng)頁(yè)設(shè)計(jì)和制作中的運(yùn)用。（3）考核題型為：綜合設(shè)計(jì)與制作網(wǎng)頁(yè)?！獭獭?3225合計(jì)：100分444511八、考核與成績(jī)?cè)u(píng)定1.考核方式及成績(jī)?cè)u(píng)定考核方式：本課程主要以課堂表現(xiàn)、上機(jī)作業(yè)、小組任務(wù)、章節(jié)測(cè)試、期末考核等方式進(jìn)行考核評(píng)價(jià)?？己嘶疽螅嚎己丝偝煽?jī)由期末考核成績(jī)和過(guò)程性考核成績(jī)組成。其中：期末考核成績(jī)?yōu)?00分（權(quán)重50%），試題類型為綜合設(shè)計(jì)與制作網(wǎng)頁(yè)；課堂表現(xiàn)、上機(jī)作業(yè)、小組任務(wù)、章節(jié)測(cè)試等過(guò)程性考核成績(jī)?yōu)?00分（權(quán)重50%）；過(guò)程性考核和考試試題分值分配應(yīng)與教學(xué)大綱各章節(jié)的學(xué)時(shí)基本成比例。2.過(guò)程性考核成績(jī)的標(biāo)準(zhǔn)過(guò)程性考核方式重點(diǎn)考核內(nèi)容、評(píng)價(jià)標(biāo)準(zhǔn)、所占比重見表5。表5過(guò)程性考核方式評(píng)價(jià)標(biāo)準(zhǔn)考核方式所占比重(%)100>x≥9090>x≥8080>x≥7070>x≥60x<60課堂表現(xiàn)30按時(shí)簽到，積極參與教學(xué)活動(dòng)，踴躍回答問題，準(zhǔn)確率大于90%。按時(shí)簽到，積極參與教學(xué)活動(dòng)，回答問題準(zhǔn)確率大于80%。不能按時(shí)簽到，不積極參與教學(xué)活動(dòng)，回答問題準(zhǔn)確率大于70%。不能按時(shí)簽到，不積極參與教學(xué)活動(dòng)?；卮饐栴}準(zhǔn)確率大于60%。不能按時(shí)簽到，偶爾參與教學(xué)活動(dòng)?；卮饐栴}準(zhǔn)確率小于60%。上機(jī)作業(yè)40遵規(guī)守紀(jì)，能夠完成每次上機(jī)任務(wù)，網(wǎng)頁(yè)設(shè)計(jì)制作效果非常好。遵規(guī)守紀(jì)，能夠完成每次上機(jī)任務(wù)，網(wǎng)頁(yè)設(shè)計(jì)制作較好。遵規(guī)守紀(jì)，沒有完成上機(jī)任務(wù)次數(shù)2次以內(nèi)，網(wǎng)頁(yè)設(shè)計(jì)制