HTML5CSS3 教案及教學(xué)設(shè)計合并_第1頁
HTML5CSS3 教案及教學(xué)設(shè)計合并_第2頁
HTML5CSS3 教案及教學(xué)設(shè)計合并_第3頁
HTML5CSS3 教案及教學(xué)設(shè)計合并_第4頁
HTML5CSS3 教案及教學(xué)設(shè)計合并_第5頁
已閱讀5頁，還剩192頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論