PAGEPAGE0教案課程名稱網(wǎng)頁設(shè)計(jì)與制作（HTML5+CSS3+JavaScript）

（第5版）（微課版）課程代碼系(部)教研室(實(shí)驗(yàn)室)授課教師職稱2025年1月PAGE2課程名稱網(wǎng)頁設(shè)計(jì)與制作（HTML5+CSS3+JavaScript）

（第5版）（微課版）總計(jì)：62（參考）學(xué)時課程類別專業(yè)課課程代碼講授：42學(xué)時實(shí)驗(yàn)：20學(xué)時其他：學(xué)時授課教師學(xué)分授課對象教材和主要參考資料參考資料：顏珍平,

陳承歡

,湯夢姣，編著，《HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作實(shí)戰(zhàn)》第5版，人民郵電出版社，2023.2課程簡介《網(wǎng)頁設(shè)計(jì)與制作（HTML5+CSS3+JavaScript）》課程系統(tǒng)全面地介紹網(wǎng)頁制作和前端開發(fā)技術(shù)的基本理論和實(shí)際應(yīng)用，共10章，從邏輯上可分為三大部分。前5章為第1部分，主要介紹網(wǎng)頁制作的基本技術(shù)—HTML和CSS，同時介紹Photoshop在網(wǎng)頁制作過程中的應(yīng)用；第6章和第7章為第2部分，主要介紹CSS技術(shù)的高級應(yīng)用技巧和JavaScript編程，并對各種常見的前端開發(fā)技術(shù)進(jìn)行系統(tǒng)梳理；最后3章為第3部分，其中，第8章從心理學(xué)和設(shè)計(jì)理論視角介紹如何進(jìn)行網(wǎng)頁設(shè)計(jì)，第9章介紹如何使用Dreamweaver制作網(wǎng)頁，第10章則從項(xiàng)目實(shí)踐的角度介紹如何設(shè)計(jì)和開發(fā)網(wǎng)站，使學(xué)生能夠在具體應(yīng)用中鞏固所學(xué)知識。本課程以實(shí)用為基本出發(fā)點(diǎn)，不僅包括各種網(wǎng)頁制作和前端開發(fā)技術(shù)的基礎(chǔ)理論，還強(qiáng)調(diào)了它們的具體應(yīng)用，使學(xué)生既能打下堅(jiān)實(shí)的理論基礎(chǔ)，又能掌握實(shí)際的操作技能。本課程絕大部分內(nèi)容經(jīng)過了長期的教學(xué)檢驗(yàn)，重點(diǎn)突出、詳略得當(dāng)。教學(xué)難點(diǎn)重點(diǎn)1．創(chuàng)建網(wǎng)頁。2．設(shè)置文本格式和創(chuàng)建超鏈接。3．在網(wǎng)頁中使用CSS。4．圖像處理基本操作5．創(chuàng)建并設(shè)置表格和表單。6．CSS3布局和CSS3高級選擇器、高級屬性。7．JavaScript與前端開發(fā)技術(shù)。8．設(shè)計(jì)導(dǎo)航和頁面版式。9．用Dreamweaver制作網(wǎng)頁。10．“游戲天地”網(wǎng)站綜合設(shè)計(jì)

授課題目：第1章HTML5基礎(chǔ)授課方式（請打√）理論課□討論課□實(shí)驗(yàn)課□習(xí)題課□其他□課時安排理論課：教學(xué)大綱要求：讓學(xué)生可以使用基本的標(biāo)記符和屬性，構(gòu)建出單個的網(wǎng)頁。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：HTML標(biāo)記符和屬性的語法規(guī)則和基于Web標(biāo)準(zhǔn)的網(wǎng)站開發(fā)作業(yè)、討論題、思考題：課后總結(jié)分析：教學(xué)內(nèi)容主要教學(xué)內(nèi)容：第1章HTML5基礎(chǔ)【知識目標(biāo)】【技能目標(biāo)】【素養(yǎng)目標(biāo)】1.1什么是HTML1.1.1網(wǎng)頁的基本概念1.1.2HTML的工作原理1.1.3創(chuàng)建和測試網(wǎng)頁1.1.4網(wǎng)頁編輯工具1.2創(chuàng)建網(wǎng)頁1.2.1標(biāo)記符基礎(chǔ)1.2.2網(wǎng)頁的基本結(jié)構(gòu)1.2.3在網(wǎng)頁中添加內(nèi)容1.3綜合實(shí)例：人物介紹網(wǎng)頁【要點(diǎn)回顧】練習(xí)題

授課題目：第2章文本格式與超鏈接授課方式（請打√）理論課□討論課□實(shí)驗(yàn)課□習(xí)題課□其他□課時安排理論課：教學(xué)大綱要求：掌握<p>、<h1>～<h6>、<hr>、<a>等標(biāo)記符的用法。學(xué)會區(qū)分物理字符樣式和邏輯字符樣式，站內(nèi)鏈接、站外鏈接和錨點(diǎn)鏈接?？梢允褂枚喾N標(biāo)記符和屬性，構(gòu)建出基于文本、具有多個頁面的網(wǎng)站。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：建立基本的網(wǎng)頁文本結(jié)構(gòu)，使用邏輯字符樣式，為網(wǎng)頁文本增加邏輯，設(shè)置有序列表、無序列表和嵌套列表，熟練使用<a>標(biāo)記符和href屬性，創(chuàng)建各種超鏈接。學(xué)會綜合應(yīng)用各種標(biāo)記符，創(chuàng)建基于文本的網(wǎng)站。作業(yè)、討論題、思考題：課后總結(jié)分析：教學(xué)內(nèi)容主要教學(xué)內(nèi)容：第2章文本格式與超鏈接【知識目標(biāo)】【技能目標(biāo)】【素養(yǎng)目標(biāo)】2.1設(shè)置文本格式2.1.1段落格式2.1.2字體格式2.1.3列表格式2.2創(chuàng)建超鏈接2.2.1URL概述2.2.2頁面鏈接2.2.3錨點(diǎn)鏈接2.3綜合實(shí)例：唐詩宋詞網(wǎng)站2.3.1網(wǎng)站規(guī)劃2.3.2網(wǎng)頁設(shè)計(jì)2.3.3網(wǎng)頁制作【要點(diǎn)回顧】練習(xí)題

授課題目：第3章CSS3基礎(chǔ)授課方式（請打√）理論課□討論課□實(shí)驗(yàn)課□習(xí)題課□其他□課時安排理論課：4實(shí)驗(yàn)課：2教學(xué)大綱要求：讓學(xué)生理解CSS的概念和優(yōu)點(diǎn)、掌握標(biāo)記符選擇器、類選擇器、ID選擇器、偽類選擇器和群組選擇器的用法等，并可以使用CSS技術(shù)對網(wǎng)頁進(jìn)行基本的修飾和美化。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：站點(diǎn)樣式、網(wǎng)頁樣式、行內(nèi)樣式的用法，標(biāo)記符選擇器、類選擇器、ID選擇器、偽類選擇器和群組選擇器的用法，常用的CSS顏色與背景屬性、字體屬性和文本屬性。作業(yè)、討論題、思考題：課后總結(jié)分析：教學(xué)內(nèi)容主要教學(xué)內(nèi)容：第3章CSS3基礎(chǔ)【知識目標(biāo)】【技能目標(biāo)】【素養(yǎng)目標(biāo)】3.1CSS入門3.1.1什么是CSS3.1.2CSS樣式定義3.1.3CSS的屬性單位3.2在網(wǎng)頁中使用CSS3.2.1使用站點(diǎn)樣式3.2.2使用網(wǎng)頁樣式3.2.3使用行內(nèi)樣式3.3CSS3基本選擇器3.3.1標(biāo)記符選擇器3.3.2類選擇器3.3.3ID選擇器3.3.4偽類選擇器3.3.5群組選擇器3.4CSS3基礎(chǔ)屬性3.4.1顏色與背景屬性3.4.2字體屬性3.4.3文本屬性3.5綜合實(shí)例：電影欣賞網(wǎng)站3.5.1網(wǎng)站規(guī)劃與設(shè)計(jì)3.5.2網(wǎng)頁制作【要點(diǎn)回顧】練習(xí)題 授課題目：第4章圖像授課方式（請打√）理論課□討論課□實(shí)驗(yàn)課□習(xí)題課□其他□課時安排理論課：4實(shí)驗(yàn)課：2教學(xué)大綱要求：讓學(xué)生可以把圖像等多媒體對象插入網(wǎng)頁中，并且進(jìn)行一定的修飾，從而增強(qiáng)網(wǎng)頁的表現(xiàn)力。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：區(qū)分位圖與矢量圖，區(qū)分GIF、JPEG和PNG格式，<img>標(biāo)記符的用法。作業(yè)、討論題、思考題：課后總結(jié)分析：教學(xué)內(nèi)容主要教學(xué)內(nèi)容：第4章圖像【知識目標(biāo)】【技能目標(biāo)】【素養(yǎng)目標(biāo)】4.1網(wǎng)頁圖像基礎(chǔ)4.1.1位圖與矢量圖4.1.2網(wǎng)頁圖像格式4.1.3使用網(wǎng)頁圖像的要點(diǎn)4.2圖像處理基本操作4.2.1Photoshop的界面4.2.2修改圖像的大小4.2.3調(diào)整圖像的顏色4.2.4修補(bǔ)圖像與摳像4.2.5用適當(dāng)?shù)母袷奖４鎴D像4.3圖像標(biāo)記符<img>4.3.1插入圖像4.3.2設(shè)置圖像屬性4.4綜合實(shí)例：中國符號網(wǎng)站4.4.1網(wǎng)站規(guī)劃與設(shè)計(jì)4.4.2圖像處理與網(wǎng)頁制作【要點(diǎn)回顧】練習(xí)題授課題目：第5章表格與表單授課方式（請打√）理論課□討論課□實(shí)驗(yàn)課□習(xí)題課□其他□課時安排理論課：4實(shí)驗(yàn)課：2教學(xué)大綱要求：讓學(xué)生可以在網(wǎng)頁中使用表格對數(shù)據(jù)進(jìn)行合理組織，使用表單建立起基本的用戶數(shù)據(jù)收集機(jī)制。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：表格的構(gòu)造方法，表單控件類型及用法。作業(yè)、討論題、思考題：課后總結(jié)分析：教學(xué)內(nèi)容主要教學(xué)內(nèi)容：第5章表格與表單【知識目標(biāo)】【技能目標(biāo)】【素養(yǎng)目標(biāo)】5.1創(chuàng)建表格5.1.1表格的基本構(gòu)成5.1.2合并單元格5.1.3構(gòu)造表格的步驟5.2表格的屬性設(shè)置5.2.1邊框與分隔線5.2.2控制單元格空白5.2.3表格的對齊5.3創(chuàng)建表單5.3.1什么是表單5.3.2表單控件的類型5.3.3<form>標(biāo)記符5.4創(chuàng)建表單控件5.4.1文本框與密碼框5.4.2復(fù)選框與單選框5.4.3按鈕5.4.4多行文本框5.4.5選項(xiàng)菜單5.5綜合實(shí)例：表格與表單5.5.1復(fù)雜表格頁面5.5.2登錄注冊頁面【要點(diǎn)回顧】練習(xí)題 授課題目：第6章CSS3進(jìn)階授課方式（請打√）理論課□討論課□實(shí)驗(yàn)課□習(xí)題課□其他□課時安排理論課：4實(shí)驗(yàn)課：2教學(xué)大綱要求：讓學(xué)生能對頁面進(jìn)行更為精確的控制和修飾，設(shè)計(jì)出風(fēng)格統(tǒng)一、樣式美觀的網(wǎng)站。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：后代選擇器、子元素選擇器、相鄰兄弟選擇器和屬性選擇器，CSS盒模型，靜態(tài)定位、浮動定位、相對定位、絕對定位和固定定位，CSS分類屬性、列表屬性和特效屬性。作業(yè)、討論題、思考題：課后總結(jié)分析：教學(xué)內(nèi)容主要教學(xué)內(nèi)容：第6章CSS3進(jìn)階【知識目標(biāo)】【技能目標(biāo)】【素養(yǎng)目標(biāo)】6.1CSS3高級選擇器6.1.1后代選擇器6.1.2子元素選擇器6.1.3相鄰兄弟選擇器6.1.4屬性選擇器6.2CSS3布局6.2.1CSS盒模型6.2.2CSS定位概述6.2.3浮動定位6.2.4相對定位6.2.5絕對定位與固定定位6.3CSS3高級屬性6.3.1分類屬性6.3.2列表屬性6.3.3特效屬性6.4CSS3樣式的優(yōu)先級6.4.1一般性規(guī)則6.4.2樣式優(yōu)先級的計(jì)算6.5綜合實(shí)例：中華美食網(wǎng)站6.5.1網(wǎng)站規(guī)劃與設(shè)計(jì)6.5.2網(wǎng)頁制作【要點(diǎn)回顧】練習(xí)題授課題目：第7章JavaScript與前端開發(fā)技術(shù)授課方式（請打√）理論課□討論課□實(shí)驗(yàn)課□習(xí)題課□其他□課時安排理論課：4實(shí)驗(yàn)課：2教學(xué)大綱要求：讓學(xué)生能在網(wǎng)頁中加入一定的程序邏輯，并通過綜合應(yīng)用前端開發(fā)技術(shù)，設(shè)計(jì)出功能與風(fēng)格兼?zhèn)涞木W(wǎng)站。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：客戶端腳本、變量、運(yùn)算符與表達(dá)式、條件語句、循環(huán)語句、函數(shù)、JavaScript對象、瀏覽器對象和文檔對象、jQuery的基本語法規(guī)則、Bootstrap的使用方法。作業(yè)、討論題、思考題：課后總結(jié)分析：教學(xué)內(nèi)容主要教學(xué)內(nèi)容：第7章JavaScript與前端開發(fā)技術(shù)【知識目標(biāo)】【技能目標(biāo)】【素養(yǎng)目標(biāo)】7.1使用客戶端腳本7.1.1使用<script>標(biāo)記符7.1.2直接添加腳本7.1.3鏈接腳本文件7.2JavaScript編程7.2.1JavaScript語言基礎(chǔ)7.2.2使用JavaScript對象7.2.3使用瀏覽器對象7.2.4使用文檔對象7.3前端開發(fā)技術(shù)7.3.1使用jQuery7.3.2使用Bootstrap7.3.3使用Vue.js7.3.4使用AngularJS7.3.5使用React【要點(diǎn)回顧】練習(xí)題授課題目：第8章網(wǎng)頁設(shè)計(jì)基礎(chǔ)授課方式（請打√）理論課□討論課□實(shí)驗(yàn)課□習(xí)題課□其他□課時安排理論課：8實(shí)驗(yàn)課：4教學(xué)大綱要求：讓學(xué)生能應(yīng)用認(rèn)知和設(shè)計(jì)的原則，設(shè)計(jì)出適合掃描、導(dǎo)航清晰、版式合理的網(wǎng)頁。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：4個基本設(shè)計(jì)原則：緊湊、對齊、重復(fù)、對比，網(wǎng)站導(dǎo)航、頁面比例、頁面分欄、版面率、圖版面積和跳躍率。作業(yè)、討論題、思考題：課后總結(jié)分析：教學(xué)內(nèi)容主要教學(xué)內(nèi)容：第8章網(wǎng)頁設(shè)計(jì)基礎(chǔ)【知識目標(biāo)】【技能目標(biāo)】【素養(yǎng)目標(biāo)】8.1設(shè)計(jì)與認(rèn)知8.1.1格式塔理論概述8.1.2認(rèn)知時的組織原則8.2設(shè)計(jì)原則8.2.1緊湊原則8.2.2對齊原則8.2.3重復(fù)原則8.2.4對比原則8.3設(shè)計(jì)適于掃描的網(wǎng)頁8.3.1建立清楚的視覺層次8.3.2使用習(xí)慣用法8.3.3劃分明確的頁面區(qū)域8.3.4減輕視覺污染8.4設(shè)計(jì)導(dǎo)航8.4.1網(wǎng)頁導(dǎo)航慣例8.4.2全局導(dǎo)航8.4.3站點(diǎn)ID8.4.4導(dǎo)航條8.4.5實(shí)用工具8.4.6返回主頁8.4.7搜索功能8.4.8頁面名稱8.4.9當(dāng)前位置與面包屑8.4.10網(wǎng)站導(dǎo)航測試8.5設(shè)計(jì)頁面版式8.5.1頁面比例8.5.2網(wǎng)頁的分欄8.5.3版面率8.5.4圖版面積8.5.5跳躍率【要點(diǎn)回顧】練習(xí)題授課題目：第9章用Dreamweaver制作網(wǎng)頁授課方式（請打√）理論課□討論課□實(shí)驗(yàn)課□習(xí)題課□其他□課時安排理論課：4實(shí)驗(yàn)課：2教學(xué)大綱要求：讓學(xué)生能使用Dreamweaver快速創(chuàng)建站點(diǎn)、編輯網(wǎng)頁、應(yīng)用CSS和輔助代碼編寫，并實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：Dreamweaver的基本界面元素和站點(diǎn)，響應(yīng)式設(shè)計(jì)。作業(yè)、討論題、思考題：課后總結(jié)分析：教學(xué)內(nèi)容主要教學(xué)內(nèi)容：第9章用Dreamweaver制作網(wǎng)頁【知識目標(biāo)】【技能目標(biāo)】【素養(yǎng)目標(biāo)】9.1Dreamweaver的界面9.2使用本地站點(diǎn)9.2.1創(chuàng)建本地站點(diǎn)9.2.2站點(diǎn)文件操作9.3編輯網(wǎng)頁9.3.1制作網(wǎng)頁的一般過程9.3.2使用文本9.3.3使用超鏈接9.3.4使用圖像9.3.5使用音頻與視頻9.3.6使用表格9.3.7使用表單9.4使用CSS樣式9.4.1鏈接或創(chuàng)建樣式表9.4.2定義樣式規(guī)則9.4.3應(yīng)用樣式規(guī)則9.4.4使用CSS設(shè)計(jì)頁面布局9.5高級功能9.5.1快速代碼編寫9.5.2響應(yīng)式網(wǎng)頁設(shè)計(jì)9.5.3使用Bootstrap9.5.4使用jQuery【要點(diǎn)回顧】練習(xí)題

授課題目：第10章綜合項(xiàng)目實(shí)踐授課方式（請打√）理論課□討論課□實(shí)驗(yàn)課□習(xí)題課□其他□課時安排理論課：4實(shí)驗(yàn)課：1教學(xué)大綱要求：讓學(xué)生能通過項(xiàng)目實(shí)踐，掌握網(wǎng)站開發(fā)的標(biāo)準(zhǔn)流程并深化對各種技術(shù)和原理的理解。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：網(wǎng)站開發(fā)流程