版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
課程教案課題名稱第1章網(wǎng)站開發(fā)入門第1-3節(jié)網(wǎng)站開發(fā)相關(guān)知識(shí)、HTML與CSS基礎(chǔ)語法、網(wǎng)頁(yè)基本結(jié)構(gòu)授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解網(wǎng)站開發(fā)的基本流程和相關(guān)知識(shí)；了解HBuilder工作環(huán)境及使用方法，能夠建立站點(diǎn)及新建網(wǎng)頁(yè)；了解HTML&CSS在網(wǎng)頁(yè)制作中的作用，了解Web標(biāo)準(zhǔn)的概念，能夠使用HTML標(biāo)簽創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)；技能目標(biāo)：網(wǎng)站開發(fā)的基本流程和相關(guān)知識(shí)；HBuilder工作環(huán)境；Web標(biāo)準(zhǔn)的概念素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)HTML與CSS基礎(chǔ)語法、網(wǎng)頁(yè)的基本結(jié)構(gòu)教學(xué)難點(diǎn)網(wǎng)頁(yè)的基本結(jié)構(gòu)學(xué)情分析本次所講內(nèi)容選自教材第1章第1-3節(jié)。因?yàn)楸敬握n程是學(xué)習(xí)網(wǎng)站制作的基礎(chǔ)，學(xué)生必須掌握軟件的使用，掌握站點(diǎn)的建立及網(wǎng)頁(yè)的創(chuàng)建。教學(xué)過程課前：預(yù)習(xí)課中：網(wǎng)站基礎(chǔ)知識(shí)創(chuàng)建HBuilder站點(diǎn)制作簡(jiǎn)單的HTML+CSS頁(yè)面課后：?jiǎn)?dòng)HBuilder，熟悉其工作界面；創(chuàng)建“陽光旅游”網(wǎng)站，并創(chuàng)建一個(gè)網(wǎng)頁(yè)文件“index.html”和圖像子文件夾“img”教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場(chǎng)演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡(jiǎn)單的網(wǎng)頁(yè)頁(yè)面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程網(wǎng)站開發(fā)軟件及基礎(chǔ)語法教學(xué)設(shè)計(jì)課程名稱HTML5&CSS3授課對(duì)象2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)1-4班授課章節(jié)第1章網(wǎng)站開發(fā)入門第1-3節(jié)網(wǎng)站開發(fā)相關(guān)知識(shí)、HTML與CSS基礎(chǔ)語法、網(wǎng)頁(yè)基本結(jié)構(gòu)本次課學(xué)時(shí)數(shù)2學(xué)時(shí)教學(xué)目的1.了解網(wǎng)站開發(fā)的基本流程和相關(guān)知識(shí)；2.了解HBuilder工作環(huán)境及使用方法，能夠建立站點(diǎn)及新建網(wǎng)頁(yè)；3.了解HTML&CSS在網(wǎng)頁(yè)制作中的作用，了解Web標(biāo)準(zhǔn)的概念，能夠使用HTML標(biāo)簽創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)；教學(xué)分析本次所講內(nèi)容選自教材第1章第1-3節(jié)。因?yàn)楸敬握n程是學(xué)習(xí)網(wǎng)站制作的基礎(chǔ)，學(xué)生必須掌握軟件的使用，掌握站點(diǎn)的建立及網(wǎng)頁(yè)的創(chuàng)建。教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)HTML與CSS基礎(chǔ)語法、網(wǎng)頁(yè)的基本結(jié)構(gòu)難點(diǎn)網(wǎng)頁(yè)的基本結(jié)構(gòu)教學(xué)方法與手段●課堂講授●講解例題●電子課件●案例分析○小組討論●文字材料●提問○音像材料其他：代碼演示教學(xué)過程設(shè)計(jì)教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配課程導(dǎo)入網(wǎng)站是一種新型的信息傳播工具，人們通過它來發(fā)布自己想要公開的資訊及提供相關(guān)的網(wǎng)絡(luò)服務(wù)，許多公司都要自己的網(wǎng)站，用于宣傳公司或發(fā)布產(chǎn)品信息等，那么大家可以思考下如何開發(fā)一個(gè)網(wǎng)站，即開發(fā)的流程引入本章所學(xué)內(nèi)容5分鐘了解網(wǎng)站開發(fā)流程（1）網(wǎng)站基礎(chǔ)知識(shí)網(wǎng)頁(yè)就是我們上網(wǎng)時(shí)在瀏覽器中打開的一個(gè)個(gè)畫面；網(wǎng)站就是一組相關(guān)網(wǎng)頁(yè)的集合；主頁(yè)就是打開某個(gè)網(wǎng)站時(shí)顯示的第一個(gè)網(wǎng)頁(yè)，又叫首頁(yè)；（2）Internet,IP地址和域名Internet的全稱是Internetwork，中文稱為因特網(wǎng)；因特網(wǎng)上連接了不計(jì)其數(shù)的服務(wù)器和客戶機(jī)，每一個(gè)主機(jī)在因特網(wǎng)上都有一個(gè)唯一的地址，我們稱這個(gè)地址為IP地址；一種與IP地址對(duì)應(yīng)的字符來表示地址，這就是域名；（3）WWW,HTTP,URL和瀏覽器WWW是WorldWideWeb的縮寫，中文稱為“萬維網(wǎng)”，也可簡(jiǎn)稱為Web；HTTP：超文本傳送協(xié)議，它負(fù)責(zé)規(guī)定瀏覽器和服務(wù)器怎樣互相交流；URL：統(tǒng)一資源標(biāo)識(shí)符，也稱為網(wǎng)址；瀏覽器：是WWW服務(wù)的客戶端瀏覽程序；讓學(xué)生理解網(wǎng)站開發(fā)流程20分鐘創(chuàng)建站點(diǎn)步驟1：選擇菜單欄中的“站點(diǎn)”>“新建站點(diǎn)”菜單；步驟2：在“站點(diǎn)名稱”文本框中輸入站點(diǎn)名稱，在“本地站點(diǎn)文件夾”輸入步驟1中文件夾的物理地址；步驟3：?jiǎn)螕簟氨４妗薄Ｗ寣W(xué)生掌握如何創(chuàng)建站點(diǎn)20分鐘制作簡(jiǎn)單的HTML+CSS頁(yè)面以案例講解網(wǎng)頁(yè)基本結(jié)構(gòu)（1）HTML標(biāo)簽概述HTML標(biāo)簽是由尖括號(hào)括起來的關(guān)鍵詞，絕大多數(shù)HTML標(biāo)簽都是成對(duì)出現(xiàn)的，包含標(biāo)記頭<>和標(biāo)記尾</>。標(biāo)記頭是開始標(biāo)簽，標(biāo)記尾是結(jié)束標(biāo)簽，中間是元素內(nèi)容，如段落標(biāo)簽<p></p>。除雙標(biāo)簽外也存在少量的單標(biāo)簽，如換行標(biāo)簽<br/>。（2）HTML標(biāo)簽格式格式1：<標(biāo)簽名>標(biāo)簽內(nèi)容（文本或超文本）<／標(biāo)簽名>格式2：<標(biāo)簽名屬性名1＝"屬性值1"屬性名2＝"屬性值2">標(biāo)簽內(nèi)容（文本或超文本）</標(biāo)簽名>格式3：<標(biāo)簽名/>（3）網(wǎng)頁(yè)基本結(jié)構(gòu)<html><head><title></title><meta/><style></style><link></link><script></script></head><body></body></html>（4）網(wǎng)頁(yè)的WEB標(biāo)準(zhǔn)認(rèn)識(shí)Web標(biāo)準(zhǔn)；Div+CSS布局優(yōu)勢(shì)；符合Web標(biāo)準(zhǔn)的HTML代碼規(guī)范通過具體網(wǎng)頁(yè)實(shí)例讓學(xué)生深入理解網(wǎng)頁(yè)節(jié)本結(jié)構(gòu)35分鐘課程內(nèi)容總結(jié)本次課程重點(diǎn)了解網(wǎng)站開發(fā)流程。理解HTML基本結(jié)構(gòu)，并且學(xué)會(huì)創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)。貫穿本節(jié)所講知識(shí)，對(duì)必須掌握的內(nèi)容進(jìn)行總結(jié)復(fù)習(xí)5分鐘思考題或預(yù)習(xí)題或作業(yè)題啟動(dòng)Dreamweaver，熟悉其工作界面；創(chuàng)建“陽光旅游”網(wǎng)站，并創(chuàng)建一個(gè)網(wǎng)頁(yè)文件“index.html”和圖像子文件夾“img”鞏固課堂知識(shí)5分鐘參考資料《前端HTML+CSS修煉之道》主編：聶常紅《HTML5網(wǎng)頁(yè)設(shè)計(jì)》主編：李強(qiáng)《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》主編：馬濤、王然、彭芳課后小結(jié)采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場(chǎng)演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡(jiǎn)單的網(wǎng)頁(yè)頁(yè)面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案課題名稱第1章網(wǎng)站開發(fā)入門第1-3節(jié)網(wǎng)站開發(fā)相關(guān)知識(shí)、HTML與CSS基礎(chǔ)語法、網(wǎng)頁(yè)基本結(jié)構(gòu)授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式上機(jī)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：在理論課基礎(chǔ)上通過上機(jī)練習(xí)理解HTML基本結(jié)構(gòu)以及一些常用標(biāo)簽的使用。技能目標(biāo)：通過上機(jī)練習(xí)讓學(xué)生基本可以熟練掌握開發(fā)環(huán)境的基本操作，以及HTML基本結(jié)構(gòu)、熟練掌握一些基本標(biāo)簽的使用。素質(zhì)目標(biāo)：讓學(xué)生對(duì)HTML有初步認(rèn)識(shí)，能靈活使用HTML常用的標(biāo)簽。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)HTML與CSS基礎(chǔ)語法、網(wǎng)頁(yè)的基本結(jié)構(gòu)教學(xué)難點(diǎn)網(wǎng)頁(yè)的基本結(jié)構(gòu)學(xué)情分析本次上機(jī)課為課程第一次上機(jī)課，上機(jī)任務(wù)內(nèi)容相對(duì)不是特別難，通過此次課程來調(diào)用學(xué)生積極學(xué)習(xí)的態(tài)度和學(xué)習(xí)興趣。教學(xué)過程課前：預(yù)習(xí)教材第一章節(jié)內(nèi)容課中：復(fù)習(xí)理論課知識(shí)點(diǎn)任務(wù)一:使用記事本編寫HTML基本結(jié)構(gòu)任務(wù)二:使用Hbuilder開發(fā)工具制作詩(shī)詞或歌詞顯示網(wǎng)頁(yè)課后：復(fù)習(xí)上機(jī)內(nèi)容，預(yù)習(xí)下章節(jié)內(nèi)容，思考CSS樣式表的作用。教學(xué)反思任務(wù)工作量不大，但學(xué)生剛接觸課程，會(huì)有部分同學(xué)基本操作有很大問題，需要指派其他學(xué)生或者老師自己慢慢給學(xué)生啟發(fā)，提醒，讓學(xué)生能夠在基礎(chǔ)操作上不掉隊(duì)。課程網(wǎng)站開發(fā)軟件及基礎(chǔ)語法教學(xué)設(shè)計(jì)課程名稱HTML5&CSS3授課對(duì)象2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)1-4班授課章節(jié)第1章網(wǎng)站開發(fā)入門第1-3節(jié)網(wǎng)站開發(fā)相關(guān)知識(shí)、HTML與CSS基礎(chǔ)語法、網(wǎng)頁(yè)基本結(jié)構(gòu)本次課學(xué)時(shí)數(shù)2學(xué)時(shí)教學(xué)目的1.熟練掌握HBuilder工作環(huán)境及使用方法，以及在環(huán)境中文件夾的命名習(xí)慣。2.熟練掌握HBuilder工作環(huán)境站點(diǎn)創(chuàng)建及文件的創(chuàng)建；3.熟練掌握HTML基本結(jié)構(gòu)以及HTML常見標(biāo)簽的使用；教學(xué)分析本次上機(jī)課為課程第一次上機(jī)課，上機(jī)任務(wù)內(nèi)容相對(duì)不是特別難，通過此次課程來調(diào)用學(xué)生積極學(xué)習(xí)的態(tài)度和學(xué)習(xí)興趣。教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)1.熟練掌握HBuilder工作環(huán)境及使用方法，以及在環(huán)境中文件夾的命名習(xí)慣。2.熟練掌握HBuilder工作環(huán)境站點(diǎn)創(chuàng)建及文件的創(chuàng)建；3.熟練掌握HTML基本結(jié)構(gòu)以及HTML常見標(biāo)簽的使用；難點(diǎn)熟練掌握HTML基本結(jié)構(gòu)以及HTML常見標(biāo)簽的使用；教學(xué)方法與手段●課堂講授●講解例題●電子課件●案例分析●小組討論●文字材料●提問○音像材料其他：代碼演示教學(xué)過程設(shè)計(jì)教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配課程導(dǎo)入復(fù)習(xí)理論課知識(shí)點(diǎn)，以學(xué)生回答問題+老師引導(dǎo)的方式回顧理論課：（1）HTML基本結(jié)構(gòu)中有哪些標(biāo)簽，分別代表什么含義。（2）<br/>,<P>,<hn>標(biāo)簽分別能產(chǎn)生什么效果?；仡欀R(shí)點(diǎn)，方便學(xué)生在上機(jī)任務(wù)中靈活運(yùn)用這些知識(shí)點(diǎn)10分鐘布置任務(wù):使用記事本編寫HTML基本結(jié)構(gòu)（1）提問學(xué)生文本文件和HTML文件的后綴名分別是什么？（2）講解任務(wù)實(shí)現(xiàn)思路。--創(chuàng)建記事本文件，將記事本文件的后綴txt修改成html.--打開方式中，選擇用記事本打開。--編寫HTML基本結(jié)構(gòu)，并且在body中編寫文本內(nèi)容--保存文件--使用瀏覽器打開文件進(jìn)行測(cè)試（3）關(guān)注學(xué)生完成情況，對(duì)困難學(xué)生進(jìn)行幫助。（4）總結(jié)學(xué)生遇到的共性問題進(jìn)行集中講解。讓學(xué)生能夠熟練掌握HTML的基本結(jié)構(gòu)25分鐘熟悉開發(fā)工具的使用（1）老師演示使用開發(fā)工具創(chuàng)建站點(diǎn)的步驟。（2）布置任務(wù)讓學(xué)生創(chuàng)建站點(diǎn)。（3）總結(jié)共性問題。（4）提問在站點(diǎn)中的img,css,js等文件夾習(xí)慣上分別用于存儲(chǔ)什么類型的文件讓學(xué)生熟悉開發(fā)工具的使用15分鐘布置任務(wù)：實(shí)現(xiàn)文字排版的網(wǎng)頁(yè)（1）任務(wù)需求使用HTML實(shí)現(xiàn)如下詩(shī)詞。（2）講解實(shí)現(xiàn)思路--在站點(diǎn)中創(chuàng)建HTML文件--在body中添加H標(biāo)簽實(shí)現(xiàn)標(biāo)題--使用hr標(biāo)簽實(shí)現(xiàn)分割線--使用p標(biāo)簽實(shí)現(xiàn)詩(shī)句正文的編寫。（3）關(guān)注學(xué)生完成情況，對(duì)困難學(xué)生進(jìn)行幫助。（4）總結(jié)學(xué)生遇到的共性問題進(jìn)行集中講解。讓學(xué)生自主實(shí)踐掌握HTML中常用文本類標(biāo)簽的使用。25分鐘課程內(nèi)容總結(jié)本次課程通過自主上機(jī)實(shí)踐讓學(xué)生熟悉網(wǎng)站開發(fā)流程。熟練掌握HTML基本結(jié)構(gòu)，并且學(xué)會(huì)創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)以及熟練掌握常用文本標(biāo)簽的使用。總結(jié)上機(jī)知識(shí)點(diǎn)和上機(jī)過程，讓學(xué)生知曉自己的掌握情況并根據(jù)掌握情況做復(fù)習(xí)工作。10分鐘思考題或預(yù)習(xí)題或作業(yè)題復(fù)習(xí)上機(jī)內(nèi)容，預(yù)習(xí)下章節(jié)內(nèi)容，思考CSS樣式表的作用。鞏固課堂知識(shí)5分鐘參考資料《前端HTML+CSS修煉之道》主編：聶常紅《HTML5網(wǎng)頁(yè)設(shè)計(jì)》主編：李強(qiáng)《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》主編：馬濤、王然、彭芳課后小結(jié)任務(wù)工作量不大，但學(xué)生剛接觸課程，會(huì)有部分同學(xué)基本操作有很大問題，需要指派其他學(xué)生或者老師自己慢慢給學(xué)生啟發(fā)，提醒，讓學(xué)生能夠在基礎(chǔ)操作上不掉隊(duì)。課程教案課題名稱第2章HTML標(biāo)簽與CSS樣式基礎(chǔ)第1-2節(jié)HTML標(biāo)簽、CSS樣式基礎(chǔ)授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握HTML的語法規(guī)則；掌握網(wǎng)頁(yè)各元素的HTML標(biāo)簽的寫法，能夠編寫網(wǎng)頁(yè)結(jié)構(gòu)層的HTML代碼；掌握CSS的語法規(guī)則；掌握CSS的3選擇器（標(biāo)簽選擇器、類選擇器和id選擇器）的使用；掌握在頁(yè)面中引入CSS的4種方式技能目標(biāo)：HTML的語法規(guī)則；HTML標(biāo)簽的寫法；CSS的語法規(guī)則；掌握CSS的3選擇器；頁(yè)面中引入CSS的4種方式素質(zhì)目標(biāo)：培養(yǎng)學(xué)生自主學(xué)習(xí)意識(shí)；培養(yǎng)學(xué)生良好的編程規(guī)范教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)HTML標(biāo)簽（標(biāo)題、水平線、段落、列表、圖像、超鏈接）教學(xué)難點(diǎn)CSS樣式基礎(chǔ)、選擇器類型學(xué)情分析本次所講內(nèi)容選自教材第2章第1-2節(jié)。學(xué)生須掌握各元素的HTML標(biāo)簽寫法；理解CSS語法規(guī)則、掌握CSS的3種選擇器，并且掌握引入CSS的4種方式。教學(xué)過程課前：預(yù)習(xí)課中：制作鮮花導(dǎo)購(gòu)網(wǎng)頁(yè)的結(jié)構(gòu)——HTML標(biāo)簽修飾鮮花導(dǎo)購(gòu)網(wǎng)頁(yè)——CSS樣式基礎(chǔ)（1）CSS引入的4種方式（2）選擇器的類型（3）選擇器的集體聲明、嵌套和優(yōu)先級(jí)課后：制作個(gè)人主頁(yè)教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場(chǎng)演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)HTML標(biāo)簽及其使用方法；掌握了CSS引入的方法，以及選擇器的格式書寫課后布置了簡(jiǎn)單網(wǎng)頁(yè)的制作，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程HTML標(biāo)簽、CSS樣式基礎(chǔ)教學(xué)設(shè)計(jì)課程名稱HTML5&CSS3授課對(duì)象2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)1-4班授課章節(jié)第2章HTML標(biāo)簽與CSS樣式基礎(chǔ)第1-2節(jié)HTML標(biāo)簽、CSS樣式基礎(chǔ)本次課學(xué)時(shí)數(shù)2學(xué)時(shí)教學(xué)目的掌握HTML的語法規(guī)則；掌握網(wǎng)頁(yè)各元素的HTML標(biāo)簽的寫法，能夠編寫網(wǎng)頁(yè)結(jié)構(gòu)層的HTML代碼；掌握CSS的語法規(guī)則；掌握CSS的3選擇器（標(biāo)簽選擇器、類選擇器和id選擇器）的使用；掌握在頁(yè)面中引入CSS的4種方式教學(xué)分析本次所講內(nèi)容選自教材第2章第1-2節(jié)。學(xué)生須掌握各元素的HTML標(biāo)簽寫法；理解CSS語法規(guī)則、掌握CSS的3種選擇器，并且掌握引入CSS的4種方式。教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)HTML標(biāo)簽（標(biāo)題、水平線、段落、列表、圖像、超鏈接）難點(diǎn)CSS樣式基礎(chǔ)、選擇器類型教學(xué)方法與手段●課堂講授●講解例題●電子課件○案例分析○小組討論●文字材料○提問○音像材料其他：代碼演示教學(xué)過程設(shè)計(jì)教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配課程導(dǎo)入網(wǎng)頁(yè)已從以前大范圍應(yīng)用的表格布局過渡到現(xiàn)在的Div+CSS布局。這個(gè)轉(zhuǎn)變順應(yīng)了技術(shù)的需求，現(xiàn)在網(wǎng)頁(yè)主要由3部分組成：結(jié)構(gòu)、表現(xiàn)和行為，我們本章來學(xué)習(xí)網(wǎng)頁(yè)結(jié)構(gòu)層和表現(xiàn)層。引入本章學(xué)習(xí)的知識(shí)5分鐘制作鮮花導(dǎo)購(gòu)網(wǎng)頁(yè)的結(jié)構(gòu)——HTML標(biāo)簽以實(shí)例來講解HTML標(biāo)簽HTML標(biāo)簽（1）HTML標(biāo)題標(biāo)題的作用是讓用戶快速了解文檔的結(jié)構(gòu)與大致信息，它是通過<h1>~<h6>等標(biāo)簽對(duì)進(jìn)行定義的。<h1>標(biāo)簽對(duì)定義最大的一號(hào)標(biāo)題；<h6>標(biāo)簽對(duì)定義最小的六號(hào)標(biāo)題。當(dāng)為文字添加標(biāo)題標(biāo)簽后，它會(huì)獨(dú)立成一行顯示（2）HTML水平線水平線主要是用來分隔網(wǎng)頁(yè)中的內(nèi)容。水平線標(biāo)簽<hr/>是一個(gè)單標(biāo)簽，其作用是在HTML頁(yè)面中創(chuàng)建水平線（3）HTML段落HTML段落是通過<p></p>標(biāo)簽對(duì)進(jìn)行定義的HTML換行要在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行，需使用<br/>標(biāo)簽無序列表無序列表就是列表結(jié)構(gòu)中的列表項(xiàng)沒有先后順序的列表形式。大部分網(wǎng)頁(yè)中的列表均采用無序列表，使用<ul></ul>標(biāo)簽對(duì)定義，包含的列表項(xiàng)使用<li></li>標(biāo)簽對(duì)定義。列表項(xiàng)的默認(rèn)符號(hào)為小圓點(diǎn)●，要改變符號(hào)類型或去除符號(hào)，可使用CSS屬性進(jìn)行控制有序列表有序列表在列表項(xiàng)前都有編號(hào)，因此，瀏覽者可以清晰地了解每項(xiàng)的順序。其中<ol></ol>標(biāo)簽對(duì)用來定義有序列表，包含的列表項(xiàng)用<li></li>標(biāo)簽對(duì)定義，默認(rèn)序號(hào)為1、2、3（7）自定義列表定義列表是項(xiàng)目及其注釋的組合。其中<dl></dl>標(biāo)簽對(duì)表示定義列表；<dt></dt>標(biāo)簽對(duì)表示每個(gè)定義的名稱（項(xiàng)目名）；<dd></dd>標(biāo)簽對(duì)表示每個(gè)定義名稱的詳細(xì)內(nèi)容（注釋）（8）HTML圖像標(biāo)簽HTML插入圖像是通過<img/>標(biāo)簽進(jìn)行定義的。它是一個(gè)單標(biāo)簽。由圖像標(biāo)簽<img/>和其屬性構(gòu)成。其中src屬性用來表示圖片的源地址，是必不可少的（9）圖像路徑絕對(duì)路徑是書寫完整的路徑，系統(tǒng)按照整個(gè)路徑查找文件。絕對(duì)路徑中的盤符后面用:\或:/分隔，各目錄名之間以及目錄名與文件名之間用\或/分隔；相對(duì)路徑是以當(dāng)前文檔所在的路徑和子目錄為起始目錄，進(jìn)行相對(duì)于文檔的查找。制作網(wǎng)頁(yè)時(shí)通常采用相對(duì)路徑，這樣可以避免站點(diǎn)中的文件整體移動(dòng)后，產(chǎn)生找不到圖片或其他文件等的現(xiàn)象（10）超鏈接標(biāo)簽：超鏈接由源端點(diǎn)和目標(biāo)端點(diǎn)兩部分組成，其中設(shè)置了鏈接的一端稱為源端點(diǎn)，跳轉(zhuǎn)到的頁(yè)面或?qū)ο蠓Q為目標(biāo)端點(diǎn)，源端點(diǎn)可以是文字或圖像等。HTML超鏈接主要由標(biāo)簽對(duì)<a></a>和屬性href構(gòu)成。要實(shí)現(xiàn)鏈接的跳轉(zhuǎn)，必須要使用屬性href通過具體實(shí)際案例來依次講解HTML標(biāo)簽等，使學(xué)生更加容易理解，并且學(xué)會(huì)代碼書寫30分鐘修飾鮮花導(dǎo)購(gòu)網(wǎng)頁(yè)——CSS樣式基礎(chǔ)通過上述案例來學(xué)習(xí)CSS樣式基礎(chǔ)（1）CSS引入的4種方式將CSS樣式表放置在HTML文件頭部：內(nèi)部樣式表。將CSS樣式表放置在HTML文件主體：行內(nèi)樣式表。將CSS樣式表放置在HTML文件外部：鏈接樣式表與導(dǎo)入樣式表（2）選擇器的類型標(biāo)簽選擇器id選擇器類選擇器（3）選擇器的集體聲明、嵌套和優(yōu)先級(jí)通過實(shí)例學(xué)習(xí)CSS引入的4種方法，及選擇器的相關(guān)知識(shí)35分鐘課程內(nèi)容總結(jié)本次課程主要講解了HTML標(biāo)簽等以及CSS引入的4種方法、選擇器的嵌套、優(yōu)先級(jí)等貫穿本節(jié)所講知識(shí)，對(duì)必須掌握的內(nèi)容進(jìn)行總結(jié)復(fù)習(xí)10分鐘思考題或預(yù)習(xí)題或作業(yè)題制作個(gè)人主頁(yè)鞏固課堂知識(shí)10分鐘參考資料《前端HTML+CSS修煉之道》主編：聶常紅《HTML5網(wǎng)頁(yè)設(shè)計(jì)》主編：李強(qiáng)《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》主編：馬濤、王然、彭芳課后小結(jié)采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場(chǎng)演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)HTML標(biāo)簽及其使用方法；掌握了CSS引入的方法，以及選擇器的格式書寫課后布置了簡(jiǎn)單網(wǎng)頁(yè)的制作，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案課題名稱第2章HTML標(biāo)簽與CSS樣式基礎(chǔ)第1-2節(jié)HTML標(biāo)簽、CSS樣式基礎(chǔ)授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式上機(jī)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握HTML的語法規(guī)則；掌握網(wǎng)頁(yè)各元素的HTML標(biāo)簽的寫法，能夠編寫網(wǎng)頁(yè)結(jié)構(gòu)層的HTML代碼；掌握CSS的語法規(guī)則；掌握CSS的3選擇器（標(biāo)簽選擇器、類選擇器和id選擇器）的使用；掌握在頁(yè)面中引入CSS的4種方式技能目標(biāo)：HTML的語法規(guī)則；HTML標(biāo)簽的寫法；CSS的語法規(guī)則；掌握CSS的3選擇器；頁(yè)面中引入CSS的4種方式素質(zhì)目標(biāo)：培養(yǎng)學(xué)生實(shí)踐能力及理解樣式與內(nèi)容分離模式。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)HTML標(biāo)簽（標(biāo)題、水平線、段落、列表、圖像、超鏈接）教學(xué)難點(diǎn)CSS樣式基礎(chǔ)、選擇器類型學(xué)情分析本次課程前面部分在上次課程上機(jī)課已經(jīng)有所涉及，重點(diǎn)內(nèi)容為列表，圖像，超鏈接以及樣式表，其中樣式表的基礎(chǔ)在本次課中為難點(diǎn)內(nèi)容，需要讓學(xué)生理解并在課下進(jìn)行練習(xí)。教學(xué)過程課前：預(yù)習(xí)樣式表內(nèi)容課中：復(fù)習(xí)理論課知識(shí)點(diǎn)布置任務(wù)實(shí)現(xiàn)音樂排行榜列表布置任務(wù)實(shí)現(xiàn)熱門活動(dòng)圖片列表布置任務(wù)實(shí)現(xiàn)使用CSS美化電影劇情介紹頁(yè)面課后：完成個(gè)人主頁(yè)的制作教學(xué)反思引導(dǎo)學(xué)生自己動(dòng)手實(shí)踐；利用上機(jī)實(shí)踐環(huán)節(jié)讓學(xué)生學(xué)會(huì)列表，圖片，超鏈接；熟練掌握CSS引入的方法，以及選擇器的格式。課程HTML標(biāo)簽、CSS樣式基礎(chǔ)教學(xué)設(shè)計(jì)課程名稱HTML5&CSS3授課對(duì)象2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)1-4班授課章節(jié)第2章HTML標(biāo)簽與CSS樣式基礎(chǔ)第1-2節(jié)HTML標(biāo)簽、CSS樣式基礎(chǔ)本次課學(xué)時(shí)數(shù)2學(xué)時(shí)教學(xué)目的1.熟練掌握列表，圖片，超級(jí)鏈接標(biāo)簽的應(yīng)用；2.掌握CSS的語法規(guī)則；3.掌握CSS的3選擇器（標(biāo)簽選擇器、類選擇器和id選擇器）的使用；4.掌握在頁(yè)面中引入CSS的4種方式教學(xué)分析本次上機(jī)內(nèi)容結(jié)合教材第2章第1-2節(jié)。重點(diǎn)內(nèi)容為列表，圖像，超鏈接以及樣式表，其中樣式表的基礎(chǔ)在本次課中為難點(diǎn)內(nèi)容，需要讓學(xué)生理解并在課下進(jìn)行練習(xí)。教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)1.熟練掌握列表，圖片，超級(jí)鏈接標(biāo)簽的應(yīng)用；2.掌握CSS的語法規(guī)則；3.掌握CSS的3選擇器（標(biāo)簽選擇器、類選擇器和id選擇器）的使用；4.掌握在頁(yè)面中引入CSS的4種方式難點(diǎn)1.掌握CSS的3選擇器（標(biāo)簽選擇器、類選擇器和id選擇器）的使用；2.掌握在頁(yè)面中引入CSS的4種方式教學(xué)方法與手段●課堂講授○講解例題●電子課件●案例分析●小組討論●文字材料●提問○音像材料其他：代碼演示教學(xué)過程設(shè)計(jì)教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配課程導(dǎo)入復(fù)習(xí)理論課知識(shí)點(diǎn)，回顧如下內(nèi)容：（1）列表標(biāo)簽；（2）圖片標(biāo)簽；（3）超鏈接標(biāo)簽；（4）CSS基本語法；（5）CSS常見選擇器；（6）引入CSS方法；復(fù)習(xí)理論課知識(shí)點(diǎn)，方便上機(jī)任務(wù)中靈活運(yùn)用10分鐘布置任務(wù)實(shí)現(xiàn)簡(jiǎn)單個(gè)人主頁(yè)（1）布置任務(wù)，實(shí)現(xiàn)簡(jiǎn)單的個(gè)人主頁(yè)，效果如下：（2）講解實(shí)現(xiàn)思路--使用開發(fā)工具創(chuàng)建站點(diǎn)--將需要用到的圖片素材復(fù)制到站點(diǎn)目錄中。--使用標(biāo)題標(biāo)簽，超鏈接，段落標(biāo)簽，列表標(biāo)簽，圖片標(biāo)簽，按照效果截圖將網(wǎng)頁(yè)內(nèi)容放分別復(fù)制相應(yīng)的問題和插入圖片。--預(yù)覽效果（3）觀察學(xué)生完成情況并輔導(dǎo)。（4）共性問題集中講解讓學(xué)生熟練掌握基本標(biāo)簽的使用30分鐘布置任務(wù)使用樣式表美化個(gè)人主頁(yè)（1）布置任務(wù)，使用樣式表美化前面一個(gè)任務(wù)實(shí)現(xiàn)的個(gè)人主頁(yè)：（2）講解實(shí)現(xiàn)思路--樣式設(shè)置網(wǎng)頁(yè)的背景顏色--樣式設(shè)置標(biāo)題的背景顏色并內(nèi)容水平居中--樣式設(shè)置超級(jí)鏈接顏色并水平居中--給四個(gè)小標(biāo)題class屬性，并使用樣式設(shè)置其加粗，字體大小。--給第一個(gè)和最后一個(gè)段落設(shè)置class屬性并設(shè)置下劃線樣式。通過實(shí)例學(xué)習(xí)基本的文本相關(guān)的樣式表的使用30分鐘課程內(nèi)容總結(jié)針對(duì)上機(jī)任務(wù)總結(jié)重要內(nèi)容知識(shí)點(diǎn)：--CSS樣式表基本語法--CSS樣式表的ID,class,標(biāo)簽選擇器--CSS樣式的引入方式總結(jié)上機(jī)知識(shí)點(diǎn)和上機(jī)過程，讓學(xué)生知曉自己的掌握情況并根據(jù)掌握情況做復(fù)習(xí)工作。10分鐘思考題或預(yù)習(xí)題或作業(yè)題預(yù)習(xí)下一章，熟悉個(gè)人博客頁(yè)面的制作以及博客日志頁(yè)面的制作復(fù)習(xí)文本相關(guān)樣式且預(yù)習(xí)列表樣式10分鐘參考資料《前端HTML+CSS修煉之道》主編：聶常紅《HTML5網(wǎng)頁(yè)設(shè)計(jì)》主編：李強(qiáng)《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》主編：馬濤、王然、彭芳課后小結(jié)本次課程前面部分在上次課程上機(jī)課已經(jīng)有所涉及，重點(diǎn)內(nèi)容為列表，圖像，超鏈接以及樣式表，其中樣式表的基礎(chǔ)在本次課中為難點(diǎn)內(nèi)容，需要讓學(xué)生理解并在課下進(jìn)行練習(xí)。課程教案課題名稱第3章使用CSS設(shè)置文字效果第1-3節(jié)文字、段落樣式常用屬性、列表樣式常用屬性授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握與文字相關(guān)的HTML標(biāo)簽，能夠在網(wǎng)頁(yè)中插入標(biāo)題、段落、列表等元素；掌握設(shè)置文字和段落樣式的CSS代碼，能夠使用CSS美化文字和控制段落格式；掌握設(shè)置列表樣式的CSS代碼，能夠在網(wǎng)頁(yè)中插入列表并用CSS美化；技能目標(biāo)：文字相關(guān)的HTML標(biāo)簽；設(shè)置文字和段落樣式的CSS代碼；設(shè)置列表樣式的CSS代碼；素質(zhì)目標(biāo)：培養(yǎng)學(xué)生細(xì)致認(rèn)真的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)CSS文字樣式常用屬性教學(xué)難點(diǎn)CSS文字樣式常用屬性、塊級(jí)元素與行內(nèi)元素學(xué)情分析本次所講內(nèi)容選自教材第3章第1-3節(jié)。學(xué)生須掌握CSS文字樣式常用屬性；為網(wǎng)頁(yè)元素設(shè)置顏色的技巧；了解HTML常用符號(hào)；掌握CSS段落和列表樣式常用屬性，理解塊級(jí)元素與行內(nèi)元素。教學(xué)過程課前：預(yù)習(xí)課中：制作個(gè)人博客首頁(yè)——設(shè)置文字樣式制作個(gè)人博客子頁(yè)——設(shè)置段落和其他文字樣式制作個(gè)人博客排行榜——設(shè)置列表樣式課后：制作企業(yè)新聞網(wǎng)頁(yè)教學(xué)反思在上機(jī)課上學(xué)生學(xué)會(huì)設(shè)置文字、段落樣式設(shè)置及其列表的樣式CSS代碼設(shè)置；課后布置了企業(yè)新聞網(wǎng)頁(yè)的制作，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程文字段落和列表樣式屬性教學(xué)設(shè)計(jì)課程名稱HTML5&CSS3授課對(duì)象2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)1-4班授課章節(jié)第3章使用CSS設(shè)置文字效果第1-3節(jié)文字、段落樣式常用屬性、列表樣式常用屬性本次課學(xué)時(shí)數(shù)2學(xué)時(shí)教學(xué)目的掌握與文字相關(guān)的HTML標(biāo)簽，能夠在網(wǎng)頁(yè)中插入標(biāo)題、段落、列表等元素；掌握設(shè)置文字和段落樣式的CSS代碼，能夠使用CSS美化文字和控制段落格式；掌握設(shè)置列表樣式的CSS代碼，能夠在網(wǎng)頁(yè)中插入列表并用CSS美化；教學(xué)分析本次所講內(nèi)容選自教材第3章第1-3節(jié)。學(xué)生須掌握CSS文字樣式常用屬性；為網(wǎng)頁(yè)元素設(shè)置顏色的技巧；了解HTML常用符號(hào)；掌握CSS段落和列表樣式常用屬性，理解塊級(jí)元素與行內(nèi)元素。教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)CSS文字樣式常用屬性難點(diǎn)CSS文字樣式常用屬性、塊級(jí)元素與行內(nèi)元素教學(xué)方法與手段●課堂講授●講解例題●電子課件○案例分析○小組討論●文字材料○提問○音像材料其他：代碼演示教學(xué)過程設(shè)計(jì)教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配課程導(dǎo)入文字是網(wǎng)頁(yè)中不可缺少的組成元素，它能將各種信息有效地傳遞給瀏覽者，通常內(nèi)容豐富的網(wǎng)頁(yè)都有大量的文本，利用CSS可以方便地設(shè)置網(wǎng)頁(yè)的文本和段落效果，從而更好地向?yàn)g覽者展現(xiàn)網(wǎng)頁(yè)內(nèi)容，本節(jié)課我們就來學(xué)習(xí)基礎(chǔ)樣式設(shè)置。引入本章學(xué)習(xí)的知識(shí)5分鐘制作個(gè)人博客首頁(yè)——設(shè)置文字樣式以實(shí)例來講解文字樣式（1）設(shè)置文字字體屬性為font-family，基本語法為：font-family:字體1,字體2,字體3;（2）設(shè)置斜體屬性為font-style，基本語法為：font-style:normal|italic|oblique;（3）設(shè)置文字大小屬性為font-size，基本語法為：font-size:尺寸|百分比|關(guān)鍵字;（4）設(shè)置文字粗細(xì)屬性為font-weight，基本語法：font-weight:normal|bold|bolder|lighter|number;設(shè)置文字顏色屬性為color，基本語法：color:顏色的名稱|RGB值|十六進(jìn)制數(shù);（6）設(shè)置變體屬性為font-variant，作用是將所有小寫字母轉(zhuǎn)換為小型大寫字母（7）組合設(shè)置文字屬性可以用font來組合設(shè)置文字屬性通過具體實(shí)際案例來依次講解文字樣式基本屬性等，使學(xué)生更加容易理解，并且學(xué)會(huì)代碼書寫25分鐘制作個(gè)人博客子頁(yè)——設(shè)置段落和其他文字樣式通過實(shí)例講解段落和其他文字樣式的設(shè)置（1）修飾文字屬性為text-transform，基本語法為：text-transform:capitalize|uppercase|lowercase;（2）設(shè)置段落的水平對(duì)齊方式屬性為text-align，可以設(shè)置段落的左、中、右和兩端對(duì)齊（3）設(shè)置段落首行縮進(jìn)屬性為text-indent，基礎(chǔ)語法為：text-indent:長(zhǎng)度|百分比;（4）調(diào)整行高指調(diào)整行與行之間的距離，屬性為line-height（5）轉(zhuǎn)換英文字母大小寫（6）設(shè)置中文字符間距（7）調(diào)整英文單詞間距（8）HTML常用符號(hào)通過實(shí)例講解段落和其他文字樣式的設(shè)置，使學(xué)生更易理解，并從中學(xué)會(huì)編寫代碼25分鐘制作個(gè)人博客排行榜——設(shè)置列表樣式通過實(shí)例講解列表樣式的設(shè)置（1）設(shè)置列表符號(hào)屬性為list-style-type，用于設(shè)置列表項(xiàng)的符號(hào)類型（2）使用圖片符號(hào)屬性為list-style-image，用來將圖片作為列表符號(hào)（3）調(diào)整列表位置屬性為list-style-position，用來設(shè)置列表符號(hào)的縮進(jìn)，即列表項(xiàng)的位置通過具體案例講解列表的樣式，讓學(xué)生能夠?qū)W會(huì)CSS樣式代碼的書寫25分鐘課程內(nèi)容總結(jié)本次課程主要講解了文字、段落基礎(chǔ)樣式屬性以及列表樣式常用屬性的設(shè)置等貫穿本節(jié)所講知識(shí)，對(duì)必須掌握的內(nèi)容進(jìn)行總結(jié)復(fù)習(xí)5分鐘思考題或預(yù)習(xí)題或作業(yè)題制作企業(yè)新聞網(wǎng)頁(yè)鞏固課堂知識(shí)5分鐘參考資料《前端HTML+CSS修煉之道》主編：聶常紅《HTML5網(wǎng)頁(yè)設(shè)計(jì)》主編：李強(qiáng)《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》主編：馬濤、王然、彭芳課后小結(jié)采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場(chǎng)演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)設(shè)置文字、段落樣式設(shè)置及其列表的樣式CSS代碼設(shè)置；課后布置了企業(yè)新聞網(wǎng)頁(yè)的制作，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案課題名稱第3章使用CSS設(shè)置文字效果第1-3節(jié)文字、段落樣式常用屬性、列表樣式常用屬性授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式上機(jī)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握與文字相關(guān)的HTML標(biāo)簽，能夠在網(wǎng)頁(yè)中插入標(biāo)題、段落、列表等元素；掌握設(shè)置文字和段落樣式的CSS代碼，能夠使用CSS美化文字和控制段落格式；掌握設(shè)置列表樣式的CSS代碼，能夠在網(wǎng)頁(yè)中插入列表并用CSS美化；技能目標(biāo)：文字相關(guān)的HTML標(biāo)簽；設(shè)置文字和段落樣式的CSS代碼；設(shè)置列表樣式的CSS代碼；素質(zhì)目標(biāo)：讓學(xué)生通過上機(jī)實(shí)踐熟練掌握文本，段落，列表的常見樣式設(shè)置教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)CSS文本，段落及列表樣式設(shè)置教學(xué)難點(diǎn)CSS列表樣式設(shè)置學(xué)情分析本次所講內(nèi)容選自教材第3章第1-3節(jié)。通過上機(jī)實(shí)踐環(huán)節(jié)鞏固文本樣式的使用，并且掌握列表的常見樣式的設(shè)置,文本樣式在前面課程已經(jīng)用過，但內(nèi)容較多，需要學(xué)生記憶，列表樣式為新內(nèi)容需要學(xué)生理解的基礎(chǔ)上掌握教學(xué)過程課前：閱讀教材課件，準(zhǔn)備上機(jī)任務(wù)。課中：制作建筑公司新聞列表頁(yè)面制作建筑公司新聞詳情頁(yè)面制作門戶網(wǎng)站旅游和財(cái)經(jīng)列表部分。課后：預(yù)習(xí)第四章圖片樣式，圖片對(duì)齊方式等知識(shí)點(diǎn)。教學(xué)反思此次上機(jī)課知識(shí)點(diǎn)難度不大，但上機(jī)任務(wù)量偏大，部分沒有完成的學(xué)生需要督促其在課下完成任務(wù)。課程文字段落和列表樣式屬性教學(xué)設(shè)計(jì)課程名稱HTML5&CSS3授課對(duì)象2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)1-4班授課章節(jié)第3章使用CSS設(shè)置文字效果第1-3節(jié)文字、段落樣式常用屬性、列表樣式常用屬性本次課學(xué)時(shí)數(shù)2學(xué)時(shí)教學(xué)目的文字相關(guān)的HTML標(biāo)簽；設(shè)置文字和段落樣式的CSS代碼；設(shè)置列表樣式的CSS代碼；教學(xué)分析讓學(xué)生通過上機(jī)實(shí)踐熟練掌握文本，段落，列表的常見樣式設(shè)置教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)CSS文本，段落及列表樣式設(shè)置難點(diǎn)CSS列表樣式設(shè)置教學(xué)方法與手段●課堂講授○講解例題●電子課件●案例分析●小組討論●文字材料●提問○音像材料其他：代碼演示教學(xué)過程設(shè)計(jì)教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配課程導(dǎo)入復(fù)習(xí)理論課知識(shí)點(diǎn)：（1）常用的文本相關(guān)的樣式設(shè)置（1）列表設(shè)置圖標(biāo)，行高等。復(fù)習(xí)理論課知識(shí)點(diǎn)10分鐘制作建筑公司新聞列表頁(yè)面（1）布置任務(wù)制作建筑公司新聞列表頁(yè)面，如下圖：（2）講解實(shí)現(xiàn)思路：--使用H標(biāo)簽，HR標(biāo)簽，P標(biāo)簽等完成網(wǎng)頁(yè)內(nèi)容的添加。--給標(biāo)題添加背景顏色，文字顏色，水平居中，垂直居中，文字間距等樣式的設(shè)置--實(shí)現(xiàn)新聞列表標(biāo)題超鏈接紅色字體樣式的設(shè)置--設(shè)置段落文字顏色白色，段落的下邊距等樣式。（3）觀察學(xué)生完成情況，并給予輔導(dǎo)（4）共性問題集中講解學(xué)生掌握文字間距，水平和垂直對(duì)齊等樣式的設(shè)置以及內(nèi)外邊距的基本使用20分鐘制作建筑公司新聞詳情頁(yè)面（1）布置任務(wù)制作建筑公司新聞詳情頁(yè)面，如下圖：（2）講解實(shí)現(xiàn)思路：--使用H標(biāo)簽，HR標(biāo)簽，P標(biāo)簽等完成網(wǎng)頁(yè)內(nèi)容的添加。--給標(biāo)題添加背景顏色，文字顏色，垂直居中，內(nèi)邊距等--實(shí)現(xiàn)新聞標(biāo)題的紅色字體和下劃線--分別文字導(dǎo)航位置的居右對(duì)齊--設(shè)置正文文本的白色字體（3）觀察學(xué)生完成情況，并給予輔導(dǎo)（4）共性問題集中講解學(xué)生熟練掌握文字間距，文字顏色，下劃線等樣式的設(shè)置以及內(nèi)外邊距的基本使用20分鐘制作門戶網(wǎng)站旅游和財(cái)經(jīng)列表部分（1）布置任務(wù)制作門戶網(wǎng)站旅游和財(cái)經(jīng)列表部分，如下圖：（2）講解實(shí)現(xiàn)思路：--使用div,ul,li,hr，h等標(biāo)簽實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的添加。--設(shè)置列表項(xiàng)的高度和行高--使用背景小圖標(biāo)，并且不平鋪水平居左，垂直居中方式設(shè)置列表項(xiàng)的小圖標(biāo)--設(shè)置列表項(xiàng)的左內(nèi)邊距實(shí)現(xiàn)列表項(xiàng)文字內(nèi)容的右移。（3）觀察學(xué)生完成情況，并給予輔導(dǎo)（4）共性問題集中講解讓學(xué)生熟練掌握列表的高度行高，背景圖標(biāo)的設(shè)置。20分鐘課程內(nèi)容總結(jié)總結(jié)上機(jī)課知識(shí)點(diǎn)：--CSS文字樣式設(shè)置--網(wǎng)頁(yè)元素的前景色，背景色的設(shè)置--列表項(xiàng)的常用樣式設(shè)置貫穿上機(jī)課知識(shí)點(diǎn)，進(jìn)行復(fù)習(xí)10分鐘思考題或預(yù)習(xí)題或作業(yè)題布置任務(wù)：預(yù)習(xí)第四章圖片樣式，圖片對(duì)齊方式等知識(shí)點(diǎn)。預(yù)習(xí)下次課知識(shí)點(diǎn)10分鐘參考資料《前端HTML+CSS修煉之道》主編：聶常紅《HTML5網(wǎng)頁(yè)設(shè)計(jì)》主編：李強(qiáng)《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》主編：馬濤、王然、彭芳課后小結(jié)此次上機(jī)課知識(shí)點(diǎn)難度不大，但上機(jī)任務(wù)量偏大，部分沒有完成的學(xué)生需要督促其在課下完成任務(wù)。課程教案課題名稱第4章使用CSS設(shè)置圖片效果和網(wǎng)頁(yè)背景第1-2節(jié)CSS設(shè)置圖片和其他元素效果、網(wǎng)頁(yè)元素背景授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握與圖片相關(guān)的HTML標(biāo)簽，能夠在網(wǎng)頁(yè)中插入圖片；掌握修飾圖片的CSS樣式基礎(chǔ)，能夠?yàn)榫W(wǎng)頁(yè)中的圖片或其他元素邊框等，能夠制作圖文混排的頁(yè)面；掌握設(shè)置背景顏色和背景圖片的CSS樣式屬性，能夠?qū)Ρ尘皥D片進(jìn)行控制；能夠?yàn)榫W(wǎng)頁(yè)中的各元素設(shè)置背景；技能目標(biāo)：圖片相關(guān)的HTML標(biāo)簽；修飾圖片的CSS樣式基礎(chǔ)；設(shè)置背景顏色和背景圖片的CSS樣式屬性素質(zhì)目標(biāo)：培養(yǎng)學(xué)生細(xì)致認(rèn)真的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)CSS設(shè)置圖片和其它元素效果教學(xué)難點(diǎn)CSS設(shè)置圖片和其它元素效果學(xué)情分析本次所講內(nèi)容選自教材第4章第1-2節(jié)。學(xué)生須掌握?qǐng)D片的HTML標(biāo)簽寫法；能夠制作圖文混排的頁(yè)面、掌握CSS設(shè)置圖片等元素的樣式和背景。教學(xué)過程課前：預(yù)習(xí)課中：制作休閑文章頁(yè)面——設(shè)置圖片效果制作童話故事頁(yè)面——設(shè)置網(wǎng)頁(yè)元素背景課后：制作旅游景點(diǎn)介紹網(wǎng)頁(yè)教學(xué)反思在上機(jī)課上學(xué)生學(xué)會(huì)使用CSS設(shè)置網(wǎng)頁(yè)元素的圖片及其他元素的效果、CSS設(shè)置背景圖片，讓學(xué)生學(xué)會(huì)CSS代碼的編寫。課后為了鞏固所學(xué)知識(shí)布置了制作旅游景點(diǎn)介紹網(wǎng)頁(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程CSS設(shè)置圖片等效果和網(wǎng)頁(yè)背景教學(xué)設(shè)計(jì)課程名稱HTML5&CSS3授課對(duì)象2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)1-4班授課章節(jié)第4章使用CSS設(shè)置圖片效果和網(wǎng)頁(yè)背景第1-2節(jié)CSS設(shè)置圖片和其他元素效果、網(wǎng)頁(yè)元素背景本次課學(xué)時(shí)數(shù)2學(xué)時(shí)教學(xué)目的掌握與圖片相關(guān)的HTML標(biāo)簽，能夠在網(wǎng)頁(yè)中插入圖片；掌握修飾圖片的CSS樣式基礎(chǔ)，能夠?yàn)榫W(wǎng)頁(yè)中的圖片或其他元素邊框等，能夠制作圖文混排的頁(yè)面；掌握設(shè)置背景顏色和背景圖片的CSS樣式屬性，能夠?qū)Ρ尘皥D片進(jìn)行控制；能夠?yàn)榫W(wǎng)頁(yè)中的各元素設(shè)置背景；教學(xué)分析本次所講內(nèi)容選自教材第4章第1-2節(jié)。學(xué)生須掌握?qǐng)D片的HTML標(biāo)簽寫法；能夠制作圖文混排的頁(yè)面、掌握CSS設(shè)置圖片等元素的樣式和背景。教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)CSS設(shè)置圖片和其它元素效果難點(diǎn)CSS設(shè)置圖片和其它元素效果教學(xué)方法與手段●課堂講授●講解例題●電子課件○案例分析○小組討論○文字材料○提問○音像材料其他：代碼演示教學(xué)過程設(shè)計(jì)教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配課程導(dǎo)入圖片在網(wǎng)頁(yè)設(shè)計(jì)中具有重要作用，它可以讓網(wǎng)頁(yè)變得生動(dòng)和形象，從而大大提高瀏覽者查看網(wǎng)頁(yè)的興趣。CSS處理圖片的能力遠(yuǎn)在HTML之上，本章我們就來學(xué)習(xí)使用CSS設(shè)置圖像效果和網(wǎng)頁(yè)元素背景的方法。引入本章學(xué)習(xí)的知識(shí)5分鐘制作休閑文章頁(yè)面——設(shè)置圖片效果以具體案例來講解設(shè)置圖片效果和背景（1）設(shè)置圖片和其他元素大?。?）設(shè)置圖片和其他元素邊框邊框樣式屬性：border-style；邊框?qū)挾葘傩裕篵order-width；邊框顏色屬性：border-color（3）設(shè)置圖片對(duì)齊方式（4）設(shè)置圖文混排圖片居于文字右邊：float:right;圖片居于文字左邊：float:left;通過具體案例的講解，在案例中穿插需要學(xué)習(xí)的知識(shí)點(diǎn)，讓學(xué)生更容易理解35分鐘制作童話故事頁(yè)面——設(shè)置網(wǎng)頁(yè)元素背景通過案例來學(xué)習(xí)網(wǎng)頁(yè)元素背景的設(shè)置（1）設(shè)置背景顏色設(shè)置背景顏色是指使用CSS設(shè)置整個(gè)頁(yè)面（通過設(shè)置<body>標(biāo)簽）或指定的HTML元素（如<div>塊）內(nèi)的背景顏色，屬性為background-color（2）設(shè)置背景圖片插入背景圖片：background-image；設(shè)置背景圖片的重復(fù)方式：background-repeat；設(shè)置背景圖片的位置：background-position；通過實(shí)例來學(xué)習(xí)網(wǎng)頁(yè)元素背景及背景圖片的設(shè)置方法35分鐘課程內(nèi)容總結(jié)本次課程主要講解了CSS設(shè)置圖片和其他元素效果（大小、邊框、對(duì)齊方式）等貫穿本節(jié)所講知識(shí)，對(duì)必須掌握的內(nèi)容進(jìn)行總結(jié)復(fù)習(xí)10分鐘思考題或預(yù)習(xí)題或作業(yè)題制作旅游景點(diǎn)介紹網(wǎng)頁(yè)鞏固課堂知識(shí)5分鐘參考資料《前端HTML+CSS修煉之道》主編：聶常紅課后小結(jié)學(xué)生學(xué)會(huì)使用CSS設(shè)置網(wǎng)頁(yè)元素的圖片及其他元素的效果、CSS設(shè)置背景圖片，讓學(xué)生學(xué)會(huì)CSS代碼的編寫。課程教案課題名稱第4章使用CSS設(shè)置圖片效果和網(wǎng)頁(yè)背景第1-2節(jié)CSS設(shè)置圖片和其他元素效果、網(wǎng)頁(yè)元素背景授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式上機(jī)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握與圖片相關(guān)的HTML標(biāo)簽，能夠在網(wǎng)頁(yè)中插入圖片；掌握修飾圖片的CSS樣式基礎(chǔ)，能夠?yàn)榫W(wǎng)頁(yè)中的圖片或其他元素邊框等，能夠制作圖文混排的頁(yè)面；掌握設(shè)置背景顏色和背景圖片的CSS樣式屬性，能夠?qū)Ρ尘皥D片進(jìn)行控制；能夠?yàn)榫W(wǎng)頁(yè)中的各元素設(shè)置背景；技能目標(biāo)：圖片相關(guān)的HTML標(biāo)簽；修飾圖片的CSS樣式基礎(chǔ)；設(shè)置背景顏色和背景圖片的CSS樣式屬性素質(zhì)目標(biāo)：讓學(xué)生能通過任務(wù)實(shí)踐熟練掌握?qǐng)D片對(duì)齊，圖片背景及網(wǎng)頁(yè)元素的邊框設(shè)置，網(wǎng)頁(yè)元素外邊距來控制居中等效果。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)--CSS設(shè)置圖片大小，邊框，對(duì)齊方式--CSS設(shè)置網(wǎng)頁(yè)元素的背景顏色，背景圖片教學(xué)難點(diǎn)CSS設(shè)置圖片的平鋪方式和位置學(xué)情分析本次所講內(nèi)容選自教材第4章第1-2節(jié)。學(xué)生通過實(shí)踐需要完成的案例中包含圖片的各種樣式設(shè)置以及圖片背景相關(guān)樣式設(shè)置，學(xué)生學(xué)習(xí)積極性應(yīng)該比較好，通過此次任務(wù)激發(fā)學(xué)生對(duì)后續(xù)課程的學(xué)習(xí)興趣。教學(xué)過程課前：閱讀教材課件，準(zhǔn)備上機(jī)任務(wù)。課中：制作旅游景點(diǎn)網(wǎng)站版本一制作旅游景點(diǎn)網(wǎng)站版本二課后：預(yù)習(xí)第五章導(dǎo)航欄的制作與美化。教學(xué)反思此次上機(jī)課程主要圍繞圖片樣式和背景樣式來實(shí)現(xiàn)相關(guān)的網(wǎng)頁(yè)效果，知識(shí)點(diǎn)難度適中，任務(wù)量適中，學(xué)生得到了很好的鍛煉。課程CSS設(shè)置圖片等效果和網(wǎng)頁(yè)背景教學(xué)設(shè)計(jì)課程名稱HTML5&CSS3授課對(duì)象2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)1-4班授課章節(jié)第4章使用CSS設(shè)置圖片效果和網(wǎng)頁(yè)背景第1-2節(jié)CSS設(shè)置圖片和其他元素效果、網(wǎng)頁(yè)元素背景本次課學(xué)時(shí)數(shù)2學(xué)時(shí)教學(xué)目的讓學(xué)生能通過任務(wù)實(shí)踐熟練掌握?qǐng)D片對(duì)齊，圖片背景及網(wǎng)頁(yè)元素的邊框設(shè)置，網(wǎng)頁(yè)元素外邊距來控制居中等效果。教學(xué)分析本次所講內(nèi)容選自教材第4章第1-2節(jié)。學(xué)生通過實(shí)踐需要完成的案例中包含圖片的各種樣式設(shè)置以及圖片背景相關(guān)樣式設(shè)置，學(xué)生學(xué)習(xí)積極性應(yīng)該比較好，通過此次任務(wù)激發(fā)學(xué)生對(duì)后續(xù)課程的學(xué)習(xí)興趣。教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)--CSS設(shè)置圖片大小，邊框，對(duì)齊方式--CSS設(shè)置網(wǎng)頁(yè)元素的背景顏色，背景圖片難點(diǎn)CSS設(shè)置圖片的平鋪方式和位置教學(xué)方法與手段●課堂講授○講解例題●電子課件●案例分析●小組討論●文字材料●提問○音像材料其他：代碼演示教學(xué)過程設(shè)計(jì)教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配課程導(dǎo)入復(fù)習(xí)理論課知識(shí)點(diǎn)：--CSS設(shè)置圖片大小，邊框，對(duì)齊方式--CSS設(shè)置網(wǎng)頁(yè)元素的背景顏色，背景圖片復(fù)習(xí)理論課知識(shí)點(diǎn)10分鐘制作旅游景點(diǎn)網(wǎng)站版本一（1）布置任務(wù)制作旅游景點(diǎn)網(wǎng)站版本一，如下圖：（2）講解實(shí)現(xiàn)思路：--使用h,p,hr,img等標(biāo)簽完成網(wǎng)頁(yè)內(nèi)容的添加--設(shè)置網(wǎng)頁(yè)標(biāo)題的字體，水平居中，高度--設(shè)置網(wǎng)頁(yè)標(biāo)題的背景圖片平鋪--設(shè)置圖片分別左浮動(dòng)和右浮動(dòng)，實(shí)現(xiàn)圖片文字的混合排版--設(shè)置正文文字為白色文字--設(shè)置圖片的邊框（3）觀察學(xué)生完成情況，并給予輔導(dǎo)（4）共性問題集中講解讓學(xué)生熟練掌握給H標(biāo)題設(shè)置背景平鋪及設(shè)置圖片的浮動(dòng)實(shí)現(xiàn)圖片文字的混合排版及圖片的邊框設(shè)置30分鐘制作旅游景點(diǎn)網(wǎng)站版本二（1）布置任務(wù)制作旅游景點(diǎn)網(wǎng)站版本二，如下圖：（2）講解實(shí)現(xiàn)思路：--使用h,div,p標(biāo)簽實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的添加--設(shè)置標(biāo)題標(biāo)簽的水平和垂直居中--設(shè)置標(biāo)題背景圖片，不平鋪，背景位置為左上。--設(shè)置正文div的下內(nèi)邊距，并設(shè)置div的背景圖片，X平鋪，及位置左上。（3）觀察學(xué)生完成情況，并給予輔導(dǎo)（4）共性問題集中講解讓學(xué)生通過上機(jī)實(shí)踐掌握背景圖片的設(shè)置，背景平鋪的設(shè)置以及背景位置的設(shè)置30分鐘課程內(nèi)容總結(jié)總結(jié)上機(jī)課知識(shí)點(diǎn)：--CSS設(shè)置圖片大小，邊框，對(duì)齊方式--CSS設(shè)置網(wǎng)頁(yè)元素的背景顏色，背景圖片貫穿上機(jī)課知識(shí)點(diǎn)，進(jìn)行復(fù)習(xí)10分鐘思考題或預(yù)習(xí)題或作業(yè)題布置任務(wù)：預(yù)習(xí)第五章導(dǎo)航欄的制作與美化。預(yù)習(xí)下次課知識(shí)點(diǎn)10分鐘參考資料《前端HTML+CSS修煉之道》主編：聶常紅《HTML5網(wǎng)頁(yè)設(shè)計(jì)》主編：李強(qiáng)《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》主編：馬濤、王然、彭芳課后小結(jié)此次上機(jī)課程主要圍繞圖片樣式和背景樣式來實(shí)現(xiàn)相關(guān)的網(wǎng)頁(yè)效果，知識(shí)點(diǎn)難度適中，任務(wù)量適中，學(xué)生得到了很好的鍛煉。課程教案課題名稱第5章制作導(dǎo)航欄并使用CSS美化第1-4節(jié)制作導(dǎo)航欄授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握將列表標(biāo)簽設(shè)置為導(dǎo)航欄，以及使用CSS美化列表的方法；掌握使用CSS轉(zhuǎn)換橫向和縱向列表的方法，能夠制作各類橫向和縱向?qū)Ш綑?；掌握使用CSS制作下拉列表菜單的方法，能夠制作帶下拉菜單的導(dǎo)航欄；技能目標(biāo)：列表標(biāo)簽設(shè)置為導(dǎo)航欄；轉(zhuǎn)換橫向和縱向列表的方法；CSS制作下拉列表菜單；素質(zhì)目標(biāo)：培養(yǎng)學(xué)生自主學(xué)習(xí)意識(shí)和嚴(yán)謹(jǐn)?shù)膶W(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)制作帶圖片效果的橫向?qū)Ш綑诮虒W(xué)難點(diǎn)制作帶下拉菜單的橫向?qū)Ш綑趯W(xué)情分析本次所講內(nèi)容選自教材第5章第1-4節(jié)。學(xué)生須掌握如何將列表標(biāo)簽設(shè)置為導(dǎo)航欄并使用CSS美化；掌握CSS轉(zhuǎn)換橫向和縱向列表的方法、制作下拉菜單列表的方法。教學(xué)過程課前：預(yù)習(xí)課中：制作簡(jiǎn)單縱向?qū)Ш綑谥谱骱?jiǎn)單橫向?qū)Ш綑谥谱鲙D片效果的橫向?qū)Ш綑谥谱鲙吕藛蔚臋M向?qū)Ш綑谡n后：制作3個(gè)不同的導(dǎo)航菜單教學(xué)反思以具體案例進(jìn)行講解導(dǎo)航欄的制作方法，通過演示代碼讓學(xué)生更清晰；課后利用課堂所學(xué)知識(shí)布置了3個(gè)導(dǎo)航菜單的制作并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程導(dǎo)航欄制作教學(xué)設(shè)計(jì)課程名稱HTML5&CSS3授課對(duì)象2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)1-4班授課章節(jié)第5章制作導(dǎo)航欄并使用CSS美化第1-4節(jié)制作導(dǎo)航欄本次課學(xué)時(shí)數(shù)2學(xué)時(shí)教學(xué)目的掌握將列表標(biāo)簽設(shè)置為導(dǎo)航欄，以及使用CSS美化列表的方法；掌握使用CSS轉(zhuǎn)換橫向和縱向列表的方法，能夠制作各類橫向和縱向?qū)Ш綑?；掌握使用CSS制作下拉列表菜單的方法，能夠制作帶下拉菜單的導(dǎo)航欄；教學(xué)分析本次所講內(nèi)容選自教材第5章第1-4節(jié)。學(xué)生須掌握如何將列表標(biāo)簽設(shè)置為導(dǎo)航欄并使用CSS美化；掌握CSS轉(zhuǎn)換橫向和縱向列表的方法、制作下拉菜單列表的方法。教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)制作帶圖片效果的橫向?qū)Ш綑陔y點(diǎn)制作帶下拉菜單的橫向?qū)Ш綑诮虒W(xué)方法與手段●課堂講授●講解例題●電子課件○案例分析○小組討論●文字材料○提問○音像材料其他：代碼演示教學(xué)過程設(shè)計(jì)教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配課程導(dǎo)入導(dǎo)航欄也稱為導(dǎo)航菜單，它在網(wǎng)站中占有很重要的地位，利用它可以打開網(wǎng)站的各個(gè)功能板塊。好的導(dǎo)航欄可以讓網(wǎng)站的易用性得到充分的體現(xiàn)，本章我們便來學(xué)習(xí)如何制作及使用CSS美化導(dǎo)航欄。引入本章學(xué)習(xí)的知識(shí)5分鐘制作簡(jiǎn)單縱向?qū)Ш綑谕ㄟ^案例講解簡(jiǎn)單縱向?qū)Ш綑诘闹谱鞣椒?gòu)建HTML結(jié)構(gòu)構(gòu)建CSS樣式通過案例講解制作簡(jiǎn)單縱向?qū)Ш綑诘姆椒ㄍㄟ^代碼的演示讓學(xué)生更加容易理解并學(xué)會(huì)10分鐘制作簡(jiǎn)單橫向?qū)Ш綑谕ㄟ^案例講解橫向?qū)Ш綑诘闹谱鞣椒?gòu)建HTML結(jié)構(gòu)構(gòu)建CSS樣式通過案例講解橫向?qū)Ш綑诘闹谱鞣椒?，讓學(xué)生更易掌握代碼的編寫15分鐘制作帶圖片效果的橫向?qū)Ш綑诎咐v解：（1）構(gòu)建HTML結(jié)構(gòu)（2）構(gòu)建CSS樣式案例講解教會(huì)學(xué)生如何制作帶圖片效果的橫向?qū)Ш綑?0分鐘制作帶下拉菜單的橫向?qū)Ш綑诎咐v解：構(gòu)建HTML結(jié)構(gòu)構(gòu)建CSS樣式案例講解制作下拉菜單的橫向?qū)Ш綑诘姆椒?0分鐘課程內(nèi)容總結(jié)本次課程主要講解了4種導(dǎo)航欄的制作，在講解過程中以具體的4個(gè)案例為例來分別講解其制作的方法等貫穿本節(jié)所講知識(shí)，對(duì)必須掌握的內(nèi)容進(jìn)行總結(jié)復(fù)習(xí)10分鐘思考題或預(yù)習(xí)題或作業(yè)題制作3個(gè)不同的導(dǎo)航菜單鞏固課堂知識(shí)10分鐘參考資料《前端HTML+CSS修煉之道》主編：聶常紅《HTML5網(wǎng)頁(yè)設(shè)計(jì)》主編：李強(qiáng)《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》主編：馬濤、王然、彭芳課后小結(jié)采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場(chǎng)演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上以具體案例進(jìn)行講解導(dǎo)航欄的制作方法，通過演示代碼讓學(xué)生更清晰；課后利用課堂所學(xué)知識(shí)布置了3個(gè)導(dǎo)航菜單的制作并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案課題名稱第5章制作導(dǎo)航欄并使用CSS美化第1-4節(jié)制作導(dǎo)航欄授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式上機(jī)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握將列表標(biāo)簽設(shè)置為導(dǎo)航欄，以及使用CSS美化列表的方法；掌握使用CSS轉(zhuǎn)換橫向和縱向列表的方法，能夠制作各類橫向和縱向?qū)Ш綑?；掌握使用CSS制作下拉列表菜單的方法，能夠制作帶下拉菜單的導(dǎo)航欄；技能目標(biāo)：列表標(biāo)簽設(shè)置為導(dǎo)航欄；轉(zhuǎn)換橫向和縱向列表的方法；CSS制作下拉列表菜單；素質(zhì)目標(biāo)：讓學(xué)生掌握網(wǎng)頁(yè)中常見導(dǎo)航的制作教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)--制作簡(jiǎn)單縱向?qū)Ш?-制作簡(jiǎn)單橫向?qū)Ш浇虒W(xué)難點(diǎn)制作帶下拉菜單的導(dǎo)航學(xué)情分析本次所講內(nèi)容選自教材第5章第1-4節(jié)。學(xué)生通過給列表設(shè)置樣式，給列表項(xiàng)進(jìn)行浮動(dòng)隱藏，列表項(xiàng)的嵌套顯示隱藏來實(shí)現(xiàn)常見的導(dǎo)航菜單效果，本次上機(jī)任務(wù)最后一個(gè)任務(wù)有一定難度，需要鼓勵(lì)學(xué)生進(jìn)行嘗試教學(xué)過程課前：閱讀教材課件，準(zhǔn)備上機(jī)任務(wù)。課中：制作縱向?qū)Ш街谱鳈M向?qū)Ш街谱飨吕藛蔚膶?dǎo)航課后：預(yù)習(xí)第六章使用樣式表進(jìn)行表格的美化教學(xué)反思此次上機(jī)課最后一個(gè)任務(wù)有一定難度，需要鼓勵(lì)學(xué)生嘗試，對(duì)于無法實(shí)現(xiàn)的同學(xué)給予一定安慰告知在后期的課程中還會(huì)具體講解類似效果的實(shí)現(xiàn)。課程導(dǎo)航欄制作教學(xué)設(shè)計(jì)課程名稱HTML5&CSS3授課對(duì)象2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)1-4班授課章節(jié)第5章制作導(dǎo)航欄并使用CSS美化第1-4節(jié)制作導(dǎo)航欄本次課學(xué)時(shí)數(shù)2學(xué)時(shí)教學(xué)目的讓學(xué)生掌握網(wǎng)頁(yè)中常見導(dǎo)航的制作教學(xué)分析本次所講內(nèi)容選自教材第5章第1-4節(jié)。學(xué)生通過給列表設(shè)置樣式，給列表項(xiàng)進(jìn)行浮動(dòng)隱藏，列表項(xiàng)的嵌套顯示隱藏來實(shí)現(xiàn)常見的導(dǎo)航菜單效果，本次上機(jī)任務(wù)最后一個(gè)任務(wù)有一定難度，需要鼓勵(lì)學(xué)生進(jìn)行嘗試教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)--制作簡(jiǎn)單縱向?qū)Ш?-制作簡(jiǎn)單橫向?qū)Ш诫y點(diǎn)--制作帶下拉菜單的導(dǎo)航教學(xué)方法與手段●課堂講授○講解例題●電子課件●案例分析●小組討論●文字材料●提問○音像材料其他：代碼演示教學(xué)過程設(shè)計(jì)教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配課程導(dǎo)入復(fù)習(xí)理論課知識(shí)點(diǎn)：--設(shè)置li標(biāo)簽的浮動(dòng)樣式--通過偽類選擇器控制嵌套列表的顯示隱藏復(fù)習(xí)理論課知識(shí)點(diǎn)10分鐘制作簡(jiǎn)單的縱向?qū)Ш剑?）布置任務(wù)：制作簡(jiǎn)單的縱向?qū)Ш?，如下圖：講解實(shí)現(xiàn)思路：--使用ul和li制作四個(gè)列表--設(shè)置列表取消項(xiàng)目圖標(biāo)--調(diào)整列表ul和li的內(nèi)邊距和外邊距--設(shè)置ul背景顏色灰色，li背景顏色白色，通過ul的內(nèi)邊距顯示邊緣灰色--給每個(gè)列表的第一項(xiàng)添加class,單獨(dú)設(shè)置其高度，字體大小加粗等效果（3）觀察學(xué)生完成情況，并給予輔導(dǎo)（4）共性問題集中講解讓學(xué)生熟練掌握ul+li實(shí)現(xiàn)列表，并且可以設(shè)置列表的內(nèi)外邊距，高度，行高等樣式。20分鐘制作簡(jiǎn)單的橫向?qū)Ш剑?）布置任務(wù)制作簡(jiǎn)單的橫向?qū)Ш?，如下圖：（2）講解實(shí)現(xiàn)思路--使用UL+LI實(shí)現(xiàn)列表內(nèi)容的添加--設(shè)置列表沒有項(xiàng)目圖標(biāo)--設(shè)置列表的左浮動(dòng)，讓列表項(xiàng)由縱向變成橫向--設(shè)置列表的內(nèi)邊距外邊距--設(shè)置鼠標(biāo)移動(dòng)到菜單的時(shí)候，實(shí)現(xiàn)白色背景，黑色文字的高亮效果（3）觀察學(xué)生完成情況，并給予輔導(dǎo)（4）共性問題集中講解讓學(xué)生熟練掌握元素的浮動(dòng)，偽類選擇器實(shí)現(xiàn)導(dǎo)航高亮效果。20分鐘制作帶下拉菜單的導(dǎo)航（1）布置任務(wù)制作帶下拉菜單的導(dǎo)航，如下圖，鼠標(biāo)移動(dòng)到菜單的時(shí)候會(huì)彈出二級(jí)菜單：（2）講解實(shí)現(xiàn)思路--使用UL+LI的嵌套實(shí)現(xiàn)頁(yè)面一級(jí)列表和二級(jí)列表內(nèi)容的添加--設(shè)置列表沒有項(xiàng)目圖標(biāo)--設(shè)置一級(jí)列表相對(duì)定位，二級(jí)列表絕對(duì)定位控制位置，并且實(shí)現(xiàn)二級(jí)列表的默認(rèn)隱藏。--偽類選擇器實(shí)現(xiàn)鼠標(biāo)移動(dòng)一級(jí)列表的時(shí)候進(jìn)行二級(jí)列表的顯示。--設(shè)置鼠標(biāo)經(jīng)過菜單項(xiàng)的高亮顯示效果（3）觀察學(xué)生完成情況，并給予輔導(dǎo)（4）共性問題集中講解讓學(xué)生熟練掌握列表嵌套的寫法，絕對(duì)定位和相對(duì)定位的作用以及使用偽類選擇器控制內(nèi)部嵌套元素的顯示隱藏20分鐘課程內(nèi)容總結(jié)總結(jié)上機(jī)課內(nèi)容：--簡(jiǎn)單縱向菜單的實(shí)現(xiàn)思路--簡(jiǎn)單橫向菜單的實(shí)現(xiàn)思路貫穿上機(jī)課知識(shí)點(diǎn)，進(jìn)行復(fù)習(xí)10分鐘思考題或預(yù)習(xí)題或作業(yè)題布置任務(wù)：預(yù)習(xí)第六章使用樣式表進(jìn)行表格的美化預(yù)習(xí)下次課知識(shí)點(diǎn)10分鐘參考資料《前端HTML+CSS修煉之道》主編：聶常紅《HTML5網(wǎng)頁(yè)設(shè)計(jì)》主編：李強(qiáng)《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》主編：馬濤、王然、彭芳課后小結(jié)此次上機(jī)課最后一個(gè)任務(wù)有一定難度，需要鼓勵(lì)學(xué)生嘗試，對(duì)于無法實(shí)現(xiàn)的同學(xué)給予一定安慰告知在后期的課程中還會(huì)具體講解類似效果的實(shí)現(xiàn)。課程教案課題名稱第6章制作表格并使用CSS美化第1-2節(jié)表格及CSS美化授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握與表格相關(guān)的HTML標(biāo)簽，能夠在網(wǎng)頁(yè)中使用表格顯示數(shù)據(jù)；掌握設(shè)置表格樣式的CSS屬性，能夠使用CSS美化表格；技能目標(biāo)：表格相關(guān)
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- GB/T 45535-2025中式火腿質(zhì)量要求
- GB/T 18916.8-2025工業(yè)用水定額第8部分：合成氨
- 辦案點(diǎn)突發(fā)火災(zāi)應(yīng)急預(yù)案(3篇)
- 材料疲勞壽命預(yù)測(cè)模型重點(diǎn)基礎(chǔ)知識(shí)點(diǎn)
- 江蘇省南京市、鹽城市2025屆高三下學(xué)期3月一模試題 地理 含解析
- 火災(zāi)應(yīng)急預(yù)案培訓(xùn)內(nèi)容范文(3篇)
- 公路旁管線火災(zāi)應(yīng)急預(yù)案(3篇)
- 軟件考試考前準(zhǔn)備策略試題及答案
- 《環(huán)保與生活》課件-第四篇
- 行政管理的法律法規(guī)變化與應(yīng)對(duì)方式解析試題及答案
- 風(fēng)電安全管理課件
- 2025北京首都機(jī)場(chǎng)大興國(guó)際機(jī)場(chǎng)招聘60人管理單位筆試遴選500模擬題附帶答案詳解
- CAMDS操作手冊(cè)資料
- 長(zhǎng)款厚大衣項(xiàng)目質(zhì)量管理方案
- 模擬試卷（7）-【中職專用】2025年職教高考語文沖刺模擬卷（職教高考）解析版
- 【MOOC】創(chuàng)新與創(chuàng)業(yè)管理-南京師范大學(xué) 中國(guó)大學(xué)慕課MOOC答案
- 《裝配式建筑工程施工》課件-裝配式隔墻與墻面構(gòu)造
- 少先隊(duì)活動(dòng)課《民族團(tuán)結(jié)一家親-同心共筑中國(guó)夢(mèng)》課件
- 物流運(yùn)輸環(huán)境保護(hù)制度
- 法律科技融合發(fā)展
- 《公路建設(shè)項(xiàng)目文件管理規(guī)程》
評(píng)論
0/150
提交評(píng)論