《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)技術(shù)》課程標(biāo)準(zhǔn)一、課程基本信息課程名稱(chēng)：HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)技術(shù)（網(wǎng)頁(yè)設(shè)計(jì)與制作）課程類(lèi)型：專(zhuān)業(yè)核心課適用專(zhuān)業(yè)：高等職業(yè)教育計(jì)算機(jī)應(yīng)用專(zhuān)業(yè)群相關(guān)專(zhuān)業(yè)課程學(xué)時(shí)：90學(xué)時(shí)（理論30學(xué)時(shí)，實(shí)踐60學(xué)時(shí)）學(xué)分：4學(xué)分二、課程目標(biāo)1.知識(shí)目標(biāo)（1）掌握網(wǎng)頁(yè)的基本構(gòu)成要素（HTML結(jié)構(gòu)、CSS樣式、JavaScript基礎(chǔ)交互）。（2）理解靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)的區(qū)別及適用場(chǎng)景。（3）熟悉W3C標(biāo)準(zhǔn)、Web可訪問(wèn)性（WCAG）及SEO基礎(chǔ)規(guī)范。（4）掌握HTML5常用標(biāo)簽（語(yǔ)義化標(biāo)簽、表單、多媒體嵌入）。（5）掌握CSS3核心語(yǔ)法（盒模型、浮動(dòng)、定位、Flex/Grid布局、響應(yīng)式設(shè)計(jì)）。（6）熟悉主流開(kāi)發(fā)工具（如VSCode）2.能力目標(biāo)（1）能獨(dú)立完成符合W3C標(biāo)準(zhǔn)的靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)。（2）能實(shí)現(xiàn)響應(yīng)式布局，適配不同終端（PC、平板、手機(jī)）。（3）能根據(jù)需求分析設(shè)計(jì)合理的網(wǎng)頁(yè)結(jié)構(gòu)與視覺(jué)風(fēng)格。（4）能使用開(kāi)發(fā)者工具調(diào)試代碼并解決兼容性問(wèn)題。（5）能優(yōu)化網(wǎng)頁(yè)性能（如圖片壓縮、代碼壓縮、緩存策略）。（6）能撰寫(xiě)規(guī)范的開(kāi)發(fā)文檔（如README、注釋規(guī)范）。3.素質(zhì)目標(biāo)（1）養(yǎng)成代碼規(guī)范編寫(xiě)的習(xí)慣（命名規(guī)范、縮進(jìn)、注釋?zhuān)?。?）遵守版權(quán)與知識(shí)產(chǎn)權(quán)法律，合理使用開(kāi)源資源。（3）培養(yǎng)細(xì)節(jié)意識(shí)（像素級(jí)還原設(shè)計(jì)稿、跨瀏覽器測(cè)試）。（4）具備時(shí)間管理能力，能按項(xiàng)目周期完成任務(wù)。（5）能與設(shè)計(jì)師、后端開(kāi)發(fā)人員高效溝通需求。（6）具備團(tuán)隊(duì)協(xié)作精神，適應(yīng)敏捷開(kāi)發(fā)流程（如Scrum）。（7）能持續(xù)學(xué)習(xí)，關(guān)注前端技術(shù)發(fā)展趨勢(shì)（如Web組件化、新CSS特性）。三、課程內(nèi)容模塊一網(wǎng)頁(yè)設(shè)計(jì)概述【學(xué)習(xí)目的】（1）了解網(wǎng)站和網(wǎng)頁(yè)的概念。（2）了解HTML、CSS和JavaScript的功能和作用。【教學(xué)內(nèi)容】（1）網(wǎng)站和網(wǎng)頁(yè)的概念。（2）HTML、CSS和JavaScript的功能和作用。（3）靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)的區(qū)別。（4）網(wǎng)頁(yè)開(kāi)發(fā)所使用的基本技術(shù)和工具VSCode。模塊二HTML5基礎(chǔ)【學(xué)習(xí)目的】掌握HTML5文檔結(jié)構(gòu)，能夠用文本標(biāo)簽對(duì)頁(yè)面元素進(jìn)行標(biāo)識(shí)。【教學(xué)內(nèi)容】（1）HTML發(fā)展歷史。（2）HTML5的優(yōu)勢(shì)。（3）HTML5文檔結(jié)構(gòu)和基本語(yǔ)法。（4）HTML5文本標(biāo)簽（標(biāo)題、段落、換行、文本語(yǔ)義等）。模塊三CSS3基礎(chǔ)【學(xué)習(xí)目的】（1）能夠在HTML文檔中引用CSS樣式。（2）能夠使用CSS樣式規(guī)則書(shū)寫(xiě)基礎(chǔ)CSS樣式。（3）能夠用CSS樣式控制文本外觀?！窘虒W(xué)內(nèi)容】（1）CSS的基本概念和在網(wǎng)頁(yè)設(shè)計(jì)中的作用。（2）CSS樣式規(guī)則的書(shū)寫(xiě)方法。（3）CSS基礎(chǔ)選擇器（標(biāo)簽選擇器、類(lèi)選擇器、id選擇器等）。（4）HTML文檔中引用CSS的方法。（5）CSS層疊與繼承。（6）CSS設(shè)置文本的樣式（字體、字號(hào)、顏色等）。模塊四CSS3選擇器【學(xué)習(xí)目的】（1）能夠使用CSS3這些選擇器選擇目標(biāo)元素并設(shè)置相應(yīng)的樣式。（2）掌握CSS3的書(shū)寫(xiě)規(guī)范，能夠編寫(xiě)高效、可維護(hù)的CSS代碼?！窘虒W(xué)內(nèi)容】（1）CSS3組合選擇器的類(lèi)型和基本應(yīng)用（后代、子元素、兄弟選擇器等）。（2）CSS3屬性選擇器的類(lèi)型和基本應(yīng)用（屬性名、屬性值選擇器等）。（3）CSS3偽類(lèi)選擇器的類(lèi)型和基本應(yīng)用（動(dòng)態(tài)偽類(lèi)、結(jié)構(gòu)偽類(lèi)、偽元素等）。模塊五盒子模型【學(xué)習(xí)目的】理解盒子模型，并能夠設(shè)置盒子的邊框、內(nèi)邊距、外邊距等掌握盒子模型的應(yīng)用?！窘虒W(xué)內(nèi)容】（1）CSS盒子模型的概念。（2）盒子模型box-sizing屬性（盒子大小的計(jì)算方式）。（3）盒子模型的邊框?qū)傩裕ㄟ吙蚓€(xiàn)、陰影、圓角）。（4）盒子模型的內(nèi)外邊距屬性。（5）外邊距的合并。（6）設(shè)置盒子模型背景。模塊六列表與超鏈接【學(xué)習(xí)目的】掌握HTML5列表標(biāo)簽和超鏈接標(biāo)簽，能夠用CSS控制列表的樣式，能夠使用CSS偽類(lèi)設(shè)置超鏈接樣式?！窘虒W(xué)內(nèi)容】（1）列表標(biāo)簽（無(wú)序列表、有序列表、自定義列表、列表的嵌套）。（2）用CSS控制列表的樣式（列表符號(hào)、列表位置等）。（3）鏈接標(biāo)簽的使用。（4）偽類(lèi)控制超鏈接樣式。模塊七圖像與音視頻【學(xué)習(xí)目的】能夠在網(wǎng)頁(yè)中正確插入圖像和音視頻，可以用CSS樣式控制圖像的格式，能夠用CSS控制音視頻的外觀、位置等?！窘虒W(xué)內(nèi)容】（1）插入圖像的方式，并能正確應(yīng)用圖像。（2）使用picture標(biāo)簽解決響應(yīng)式圖片的問(wèn)題。（3）HTML5中音視頻的插入方式。（4）用CSS設(shè)置圖像與音視頻元素的樣式。模塊八表格與表單【學(xué)習(xí)目的】能夠設(shè)計(jì)各種樣式的表格并能夠用CSS設(shè)置表格的樣式；能夠設(shè)計(jì)各種功能表單并能夠用CSS設(shè)置表單的樣式。【教學(xué)內(nèi)容】（1）HTML5表格的相關(guān)標(biāo)簽。（2）單元格的跨行和跨列表格。（3）用CSS控制表格的樣式。（4）表單的構(gòu)成。（5）常用表單控件標(biāo)簽。（6）用CSS控制表單的樣式。模塊九轉(zhuǎn)換、過(guò)渡與動(dòng)畫(huà)視頻【學(xué)習(xí)目的】理解各種網(wǎng)頁(yè)特效本質(zhì)，能夠選擇相應(yīng)技術(shù)制作相應(yīng)特效的能力?！窘虒W(xué)內(nèi)容】（1）常用的2D轉(zhuǎn)換。（2）常用的3D轉(zhuǎn)換。（3）CSS3的過(guò)渡效果。（4）CSS3的動(dòng)畫(huà)。模塊十CSS定位技術(shù)【學(xué)習(xí)目的】能夠使用CSS定位技術(shù)設(shè)置元素的位置；能夠使用CSS浮動(dòng)技術(shù)設(shè)置元素位置；能夠使用彈性盒子設(shè)置元素位置。【教學(xué)內(nèi)容】（1）CSS塊元素與行內(nèi)元素。（2）CSS定位技術(shù)。（3）CSS浮動(dòng)技術(shù)。（4）CSS浮動(dòng)塌陷的處理。（5）CSS彈性盒子。模塊十一網(wǎng)頁(yè)布局【學(xué)習(xí)目的】能夠使用DIV+CSS制作常用的網(wǎng)頁(yè)布局結(jié)構(gòu)，能夠用HTML5結(jié)構(gòu)元素布局頁(yè)面，能夠使用DIV+CSS制作實(shí)例網(wǎng)站?！窘虒W(xué)內(nèi)容】（1）DIV+CSS排版的思想。（2）固定寬度居中布局。（3）自適應(yīng)寬度居中布局。（4）圣杯布局。（5）彈性盒子布局。（6）HTML5結(jié)構(gòu)元素。（7）制作一個(gè)實(shí)戰(zhàn)案例。模塊十二實(shí)戰(zhàn)案例——制作企業(yè)網(wǎng)站【學(xué)習(xí)目的】能夠運(yùn)用前面模塊所學(xué)知識(shí)制作一個(gè)符合W3C標(biāo)準(zhǔn)的網(wǎng)站?！窘虒W(xué)內(nèi)容】（1）網(wǎng)站建設(shè)的基本流程。（2）網(wǎng)站結(jié)構(gòu)規(guī)劃。（3）網(wǎng)頁(yè)功能模塊劃分。（4）網(wǎng)站首頁(yè)制作。（5）網(wǎng)站注冊(cè)頁(yè)面的制作。四、學(xué)時(shí)分配序號(hào)教學(xué)內(nèi)容合計(jì)課時(shí)講課課時(shí)實(shí)驗(yàn)課時(shí)1模塊一網(wǎng)頁(yè)設(shè)計(jì)概述4222模塊二HTML5基礎(chǔ)6243模塊三CSS3基礎(chǔ)6244模塊四CSS3選擇器6245模塊五盒子模型10466模塊六列表與超鏈接6247模塊七圖像與音視頻6248模塊八表格與表單8269模塊九轉(zhuǎn)換、過(guò)渡與動(dòng)畫(huà)視頻*84410模塊十CSS定位技術(shù)102811模塊十一網(wǎng)頁(yè)布局82612模塊十二實(shí)戰(zhàn)案例--制作企業(yè)網(wǎng)站*1248合計(jì)903060五、教學(xué)方法與手段1.分層遞進(jìn)教學(xué)法基礎(chǔ)層：先教授HTML標(biāo)簽和基本結(jié)構(gòu)。表現(xiàn)層：引入CSS選擇器和基礎(chǔ)樣式。布局層：教授盒模型、浮動(dòng)、定位等布局技術(shù)。響應(yīng)層：最后教授媒體查詢(xún)和響應(yīng)式設(shè)計(jì)。2.案例教學(xué)法使用真實(shí)網(wǎng)站案例拆解分析。從簡(jiǎn)單到復(fù)雜逐步構(gòu)建完整頁(yè)面。展示優(yōu)秀設(shè)計(jì)案例激發(fā)學(xué)習(xí)興趣。3.任務(wù)驅(qū)動(dòng)法設(shè)置具體網(wǎng)頁(yè)設(shè)計(jì)任務(wù)。讓學(xué)生自主完成從設(shè)計(jì)到編碼全過(guò)程。通過(guò)實(shí)踐掌握知識(shí)點(diǎn)。4.項(xiàng)目式學(xué)習(xí)分組完成小型網(wǎng)站項(xiàng)目。模擬真實(shí)工作流程。培養(yǎng)團(tuán)隊(duì)協(xié)作能力。六、考核方式平時(shí)成績(jī)（50%）：包括課堂參與、作業(yè)完