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

下載本文檔

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

文檔簡介

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

評論

0/150

提交評論