《HTML5 CSS3 網(wǎng)頁設(shè)計(jì)與制作》教案全套 向文娟 第1章 第 1-4節(jié) 網(wǎng)站開發(fā)相關(guān)知識(shí)、HTML與CSS基礎(chǔ)語法、網(wǎng)頁基本結(jié)構(gòu)-第9章 第 6-8節(jié) 書城首頁制作書城登錄頁面制作

課程教案-1課題名稱第1章HTML5基本標(biāo)簽及開發(fā)工具介紹第1-4節(jié)網(wǎng)站開發(fā)相關(guān)知識(shí)、HTML與CSS基礎(chǔ)語法、網(wǎng)頁基本結(jié)構(gòu)授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解網(wǎng)站開發(fā)的基本流程和相關(guān)知識(shí)；了解HBuilderX工作環(huán)境及使用方法，能夠建立站點(diǎ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)知識(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)理解網(wǎng)頁的基本結(jié)構(gòu)、熟悉網(wǎng)頁的開發(fā)工具教學(xué)難點(diǎn)網(wǎng)頁的基本結(jié)構(gòu)、掌握HBuilderX的應(yīng)用，能夠熟練新建頁面學(xué)情分析本次所講內(nèi)容選自教材第1章第1-4節(jié)。因?yàn)楸敬握n程是學(xué)習(xí)網(wǎng)站制作的基礎(chǔ)，學(xué)生必須掌握軟件的使用，掌握站點(diǎn)的建立及網(wǎng)頁的創(chuàng)建。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入網(wǎng)站是一種新型的信息傳播工具，人們通過它來發(fā)布自己想要公開的資訊及提供相關(guān)的網(wǎng)絡(luò)服務(wù)，許多公司都要自己的網(wǎng)站，用于宣傳公司或發(fā)布產(chǎn)品信息等，那么大家可以思考下如何開發(fā)一個(gè)網(wǎng)站，即開發(fā)的流程課中：1、網(wǎng)站基礎(chǔ)知識(shí)，介紹HTML的發(fā)展歷程。2、講解第一個(gè)入門網(wǎng)頁講解網(wǎng)頁的結(jié)構(gòu)及網(wǎng)頁中各種標(biāo)簽的含義。制作簡單的入門網(wǎng)頁介紹常用的開發(fā)工具使用記事本編輯器使用EditPlus編輯器使用Sublime編輯器使用Dreamweaver編輯器重點(diǎn)講解HBuilderX課后：自行安裝并啟動(dòng)HBuilderX，熟悉其工作界面；創(chuàng)建任意一個(gè)網(wǎng)站，并創(chuàng)建一個(gè)網(wǎng)頁文件“index.html”和圖像子文件夾“img”教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-2課題名稱第1章HTML5基本標(biāo)簽及開發(fā)工具介紹第5-6節(jié)在頁面中添加HTML，HTML5新增標(biāo)簽授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解HBuilderX工作環(huán)境及使用方法，掌握HTML頁面中的常用標(biāo)簽及HTML5的新增標(biāo)簽技能目標(biāo)：能使用HBuilderX制作網(wǎng)頁素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)在頁面中添加HTML教學(xué)難點(diǎn)掌握HBuilderX的應(yīng)用，能夠熟練新建頁面學(xué)情分析本次所講內(nèi)容選自教材第1章第5-6節(jié)。因?yàn)楸敬握n程是學(xué)習(xí)網(wǎng)站制作的基礎(chǔ)，學(xué)生必須掌握軟件的使用，掌握站點(diǎn)的建立及網(wǎng)頁的創(chuàng)建。教學(xué)過程課前：復(fù)習(xí)理論課講授的網(wǎng)頁的基本結(jié)構(gòu)及相關(guān)工具課中：講解HTML中的常用標(biāo)簽，重點(diǎn)講解以下內(nèi)容：標(biāo)題及段落標(biāo)簽列表插入圖片插入超鏈接2、講解HTML5中的新增標(biāo)簽上機(jī)實(shí)戰(zhàn)，講解并完成以下作業(yè)上機(jī)實(shí)戰(zhàn)，講解并完成以下作業(yè)課后：總結(jié)在上機(jī)實(shí)戰(zhàn)過程中存在的問題，并完成以下練習(xí)題目：制作一個(gè)自我介紹網(wǎng)頁，并給其添加背景圖片。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-3課題名稱第2章HTML5基本標(biāo)簽及開發(fā)工具介紹第1-3節(jié)初步認(rèn)識(shí)CSS、HTML與CSS基礎(chǔ)語法、網(wǎng)頁基本結(jié)構(gòu)授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解CSS的基本語法；理解常用的選擇器；理解三種樣式表；技能目標(biāo)：能夠熟練使用不用的選擇器和樣式表素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)理解常用的選擇器；理解三種樣式表；教學(xué)難點(diǎn)能夠熟練使用不用的選擇器和樣式表學(xué)情分析本次所講內(nèi)容選自教材第2章第1-3節(jié)。因?yàn)楸敬握n程是學(xué)習(xí)CSS的樣式表基礎(chǔ)，需要學(xué)生在掌握了基本標(biāo)簽的基礎(chǔ)上學(xué)生在網(wǎng)頁中使用不同的選擇器。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入隨著網(wǎng)頁設(shè)計(jì)技術(shù)的發(fā)展，人們已經(jīng)漸漸不滿足原有的一些HTML標(biāo)記，而是希望能夠?yàn)轫撁鎯?nèi)容添加一些更加絢麗的屬性，如鼠標(biāo)標(biāo)記、漸變效果等。CSS技術(shù)的發(fā)展使這些成為現(xiàn)實(shí)。本章主要介紹了CSS中的選擇器和樣式表，通過本章的學(xué)習(xí)，能夠熟練使用選擇器和樣式表來制作網(wǎng)頁。課中：1、介紹CSS的概念及發(fā)展歷史。2、講解CSS的語法結(jié)構(gòu)。選擇器{樣式屬性：屬性值；樣式屬性：取值；}其中，選擇器可以是多種形式的，例如要定義HTML標(biāo)記中H2的樣式，可以使用以下代碼：H2{font-family:黑體;font-size:24px;}以上代碼表示，選擇器字體屬性為黑體，字體大小為24px。講解各種元素選擇器，重點(diǎn)講解CLASS及ID選擇器。CLASS選擇器的語法格式如下：類名｛樣式屬性：取值；樣式屬性：取值；......｝ID選擇器的語法格式如下：#ID名｛..樣式規(guī)則：｝與CLASS選擇器不同的是，ID名前面是“#”號(hào)，ID的名稱可以是任意取名，但在整個(gè)網(wǎng)頁中必須唯一，不能重名。講解三種樣式表根據(jù)樣式代碼的位置不同，可以將樣式分為三類：（1）行內(nèi)樣式表（2）內(nèi)部樣式表（3）外部樣式表課后：總結(jié)復(fù)習(xí)以下內(nèi)容：1.樣式表由樣式規(guī)則組成，這些規(guī)則告訴瀏覽器如何顯示文檔。樣式表是將樣式(如字體、顏色、字號(hào)等)添加到網(wǎng)頁中的簡單機(jī)制。2.樣式表包括選擇器和樣式規(guī)則，選擇器又分為HTML選擇器、CLASS類選擇器和ID選擇器。3.根據(jù)樣式代碼的位置不同，可以將樣式分為三類：行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-4課題名稱第2章HTML5基本標(biāo)簽及開發(fā)工具介紹第1-3節(jié)初步認(rèn)識(shí)CSS、HTML與CSS基礎(chǔ)語法、網(wǎng)頁基本結(jié)構(gòu)授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解CSS的基本語法；理解常用的選擇器；理解三種樣式表；技能目標(biāo)：能夠熟練使用不用的選擇器和樣式表素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)理解常用的選擇器；理解三種樣式表；教學(xué)難點(diǎn)能夠熟練使用不用的選擇器和樣式表學(xué)情分析本次所講內(nèi)容選自教材第2章第1-3節(jié)。上一次課進(jìn)行了理論課程的學(xué)習(xí)，本次上機(jī)課主要是進(jìn)行實(shí)操。教學(xué)過程課前：復(fù)習(xí)理論課講授的CSS的基本語法及三種樣式表。課中：練習(xí)混合樣式的使用要求使用外部樣式表、行內(nèi)樣式表、內(nèi)嵌樣式表完成下面的網(wǎng)頁設(shè)計(jì)。2.上機(jī)實(shí)戰(zhàn)，利用CSS的屬性實(shí)現(xiàn)圖示的效果3.上機(jī)實(shí)戰(zhàn)，使用行內(nèi)樣式表實(shí)現(xiàn)如下圖所示的效果，圖中對(duì)最下面的一段話應(yīng)用了行內(nèi)樣式。課后：總結(jié)在上機(jī)實(shí)戰(zhàn)過程中存在的問題，并完成以下練習(xí)題目：使用樣式表和層實(shí)現(xiàn)教材中圖2-17所示的效果。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-5課題名稱第3章表格的應(yīng)用第1-2節(jié)表格的應(yīng)用、表格的基礎(chǔ)用法授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解行和列的概念；了解單元格，熟練進(jìn)行合并單元格、設(shè)置表格邊框、設(shè)置表頭及表格標(biāo)題等操作。技能目標(biāo)：掌握與表格相關(guān)的HTML標(biāo)簽、表格的基礎(chǔ)用法，能夠在網(wǎng)頁中使用表格顯示數(shù)據(jù)素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)掌握與表格相關(guān)的HTML標(biāo)簽、表格的基礎(chǔ)用法教學(xué)難點(diǎn)能夠在網(wǎng)頁中使用表格顯示數(shù)據(jù)學(xué)情分析本次所講內(nèi)容選自教材第3章第1-2節(jié)。在學(xué)習(xí)本次課前，學(xué)生在前2章已經(jīng)學(xué)習(xí)了網(wǎng)頁的基本標(biāo)簽及CSS樣式表，本次主要是學(xué)習(xí)如何用表格來布局網(wǎng)頁以及表格中的一些常用標(biāo)簽。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入在前面已經(jīng)學(xué)習(xí)了構(gòu)成網(wǎng)頁的基本標(biāo)簽。從本章開始學(xué)習(xí)表格標(biāo)簽，表格主要用于設(shè)計(jì)和規(guī)劃網(wǎng)頁，也讓日常使用表格也能在網(wǎng)頁中正常展現(xiàn)。本章主要講解表格的相關(guān)標(biāo)簽，以及表格的基礎(chǔ)用法，讓網(wǎng)頁中能夠正常展現(xiàn)表格的內(nèi)容。課中：講解表格的基本結(jié)構(gòu)。添加表格的語法如下：<table>……</table>2、舉例講解行、列、單元格等概念。舉例講解行和列的合并。講解調(diào)整表格在文字內(nèi)的位置。講解添加表格標(biāo)題等操作，最終實(shí)現(xiàn)如下效果。課后：總結(jié)并復(fù)習(xí)以下知識(shí)點(diǎn)：（1）常見的html表格的有行代碼、單元格、列的合并、行的合并、表格大小、表格內(nèi)文字位置、單元格、邊框的背景顏色、單元格間距、表頭、標(biāo)題。（2）其中關(guān)于文字還可以使用文字的設(shè)置方式來調(diào)整。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建表格和簡單的網(wǎng)頁頁面；課后布置了有關(guān)表格的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-6課題名稱第3章表格的應(yīng)用第1-2節(jié)表格的應(yīng)用、表格的基礎(chǔ)用法授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解行和列的概念；了解單元格，熟練進(jìn)行合并單元格、設(shè)置表格邊框、設(shè)置表頭及表格標(biāo)題等操作。技能目標(biāo)：掌握與表格相關(guān)的HTML標(biāo)簽、表格的基礎(chǔ)用法，能夠在網(wǎng)頁中使用表格顯示數(shù)據(jù)素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)掌握與表格相關(guān)的HTML標(biāo)簽、表格的基礎(chǔ)用法教學(xué)難點(diǎn)能夠在網(wǎng)頁中使用表格顯示數(shù)據(jù)學(xué)情分析本次所講內(nèi)容選自教材第3章第1-2節(jié)。上一次課進(jìn)行了理論課程的學(xué)習(xí)，本次上機(jī)課主要是進(jìn)行實(shí)操。教學(xué)過程課前：復(fù)習(xí)理論課講授的表格的相關(guān)語法及應(yīng)用課中：根據(jù)本章學(xué)習(xí)的表格知識(shí)制作下圖銷售統(tǒng)計(jì)表。2、結(jié)合本章學(xué)習(xí)的表格知識(shí)制作游戲人物介紹頁面如下圖所示。3、根據(jù)本章學(xué)習(xí)內(nèi)容完成下圖的報(bào)銷單表格。課后：總結(jié)在上機(jī)實(shí)戰(zhàn)過程中存在的問題，自行完成以下練習(xí)。題目：制作一個(gè)個(gè)人簡歷的表格。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了表格的制作；課后布置了有表格的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)任務(wù)課程教案-7課題名稱第4章表單的應(yīng)用第1-3節(jié)表單的應(yīng)用、在表單中添加元素、HTML5新增表單輸入類型授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：熟悉表單的應(yīng)用、在表單中添加元素【文本字段和密碼域、單選按鈕、復(fù)選框、普通按鈕、提交按鈕、重置按鈕、隱藏域、文件域、菜單列表類、文本域】、HTML5新增表單輸入類型【email類、number類、range類、url類】技能目標(biāo)：掌握與表單相關(guān)的HTML標(biāo)簽，能夠根據(jù)需要在網(wǎng)頁中插入表單標(biāo)簽掌握HTML5新增表單標(biāo)簽素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)理解網(wǎng)頁的基本結(jié)構(gòu)、熟悉網(wǎng)頁的開發(fā)工具教學(xué)難點(diǎn)網(wǎng)頁的基本結(jié)構(gòu)、掌握HBuilderX的應(yīng)用，能夠熟練新建頁面學(xué)情分析本次所講內(nèi)容選自教材第4章第1-3節(jié)。因?yàn)楸敬握n程是學(xué)習(xí)網(wǎng)站制作的基礎(chǔ)，學(xué)生必須掌握表單的使用，掌握如何使用表單來豐富頁面上的數(shù)據(jù)。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入在前面已經(jīng)學(xué)習(xí)了構(gòu)成網(wǎng)頁常見的表格標(biāo)簽。從本章開始學(xué)習(xí)表單標(biāo)簽，表格主要用于設(shè)計(jì)和規(guī)劃網(wǎng)頁，而表單多用于注冊(cè)頁面的設(shè)計(jì)。本章主要講解表單的應(yīng)用，以及表單中的各種元素和HTML5新增的表單標(biāo)簽。課中：表單的應(yīng)用在HTML文檔中，表單多數(shù)用于注冊(cè)頁面，表單用來接收用戶輸入的信息，當(dāng)用戶提交表單時(shí)，瀏覽器將用戶在表單中輸入的數(shù)據(jù)打包，并發(fā)送給服務(wù)器，從而實(shí)現(xiàn)用戶與web服務(wù)器的交互。在HTML中，<form></form>標(biāo)簽用來創(chuàng)建一個(gè)表單，定義表單的開始和結(jié)束，在這兩個(gè)標(biāo)簽之間的內(nèi)容都屬于表單的內(nèi)容。添加表單的語法如下：<formname="表單名"method="傳送方示"action="表單處理程序">……</form>表單的屬性:name、method、action2、在表單中添加元素在html中，<form>標(biāo)簽是使用來創(chuàng)建供用戶輸入的html表單。<form>標(biāo)簽中通常會(huì)有很多子元素，用來定義各種交互控件（文本字段、復(fù)選框、單選框、提交按鈕等等），比如<input>、<button>、<select>、<textarea>等標(biāo)簽。按照表單元素的填寫方示可以將表單分為輸入類控件和菜單列表類控件。輸入類的控件一般以input標(biāo)記開始，說明這個(gè)表單元素需要用戶的輸入；菜單列表類控件則以select開始，表示用戶需要選擇。input標(biāo)記定義的表單元素最常用的有文本框、按鈕、單選按鈕等，這個(gè)標(biāo)記的基本語法是：<form……><inputname="控件名稱"type="控件類型"></form>Input標(biāo)簽中包含的元素屬性說明text單行文本字段password密碼字段radio單選按鈕checkbox多選按鈕button普通按鈕submit提交按鈕reset重置按鈕hidden隱藏域file文件域文本字段和密碼域文本字段（text）和密碼域（password）用于創(chuàng)建單行文本輸入框，供訪問者輸入單行文本信息。Type、name、size、maxlength、value登錄頁面<body><p>登錄頁面</p><p>用戶名：<inputtype="text"name="username"size="15"value="請(qǐng)輸入用戶名"></p><p>密碼：<inputtype="password"name="password"size="15"maxlength="6"></p></body>單選按鈕Radio元素用于創(chuàng)建單選按鈕，單選按鈕中的每個(gè)單選按鈕需要使用相同的名稱，用戶一次只能選擇一個(gè)選項(xiàng)。單選按鈕還需要使用value值，選定的單選按鈕在提交時(shí)生成對(duì)應(yīng)的name/vale值。radio屬性描述:checked、name、value案例:<body><p>登錄頁面</p><p>用戶名：<inputtype="text"name="username"size="15"value="請(qǐng)輸入用戶名"></p><p>密碼:<inputtype="password"name="password"size="15"maxlength="6"></p><p>性別：<inputtype="radio"name="sex"value="male"checked>男<inputtype="radio"name="sex"value="female">女</p></body>復(fù)選框checkbox元素用于創(chuàng)建復(fù)選框。復(fù)選框允許用戶在有限數(shù)量的選項(xiàng)中選擇零個(gè)或多個(gè)選項(xiàng)。選定的多選按鈕在提交時(shí)生成對(duì)應(yīng)的name/vale值。表4-5列出了checkbox元素的屬性。checkbox屬性描述:checked、name、value案例:<body> <p>登錄頁面</p> <p>用戶名：<inputtype="text"name="username"size="15"value="請(qǐng)輸入用戶名"></p> <p>密碼：<inputtype="password"name="password"size="15"maxlength="6"></p> <p>性別： <inputtype="radio"name="sex"value="male"checked>男 <inputtype="radio"name="sex"value="female">女 </p> <p> <inputtype="checkbox"name="test"value="book"checked>看書 <inputtype="checkbox"name="test"value="spot">運(yùn)動(dòng) <inputtype="checkbox"name="test"value="sing">唱歌 <inputtype="checkbox"name="test"value="game">游戲 </p> </body>普通按鈕button元素是普通按鈕，普通按鈕在正常情況下點(diǎn)擊是沒有效果的，需要給按鈕單獨(dú)設(shè)置方法后點(diǎn)擊才能生效。<p><inputtype="button"name="b1"value="這是點(diǎn)擊無效按鈕"></p>提交按鈕submit元素用于創(chuàng)建提交按鈕。當(dāng)用戶點(diǎn)擊提交按鈕時(shí)，表單的內(nèi)容就會(huì)提交至指定的位置。當(dāng)value值沒有設(shè)置時(shí)，提交按鈕的默認(rèn)字樣為提交。<p><inputtype="submit"name="button2"value="提交表單"></p>重置按鈕reset元素用于創(chuàng)建重置按鈕。當(dāng)用戶單擊此按鈕時(shí)，此重置按鈕所在表單中的所有元素的值被重置為其value屬性中指定的初始值。當(dāng)value值沒有設(shè)置時(shí)，提交按鈕的默認(rèn)字樣為重置。<p><inputtype="submit"name="button2"value="提交表單"><inputtype="reset"name="b3"value="重新填寫"></p>隱藏域表單中的隱藏域主要用來傳遞一些參數(shù)，而這些參數(shù)不需要在頁面中顯示。當(dāng)瀏覽者提交表單時(shí)，隱藏域的內(nèi)容會(huì)被一起提交給處理程序。<inputtype="hidden"name="page_id"value="example">文件域在上傳文件時(shí)常常會(huì)用到文件域，它用于查找硬盤中的文件路徑，然后通過表單將選中的文件上傳。在設(shè)置電子郵件的附件、上傳頭像、發(fā)送文件時(shí)，常常會(huì)看到這個(gè)控件。<p>請(qǐng)上傳你的頭像：<inputtype="file"name="picture"></p>菜單列表類表單元素select元素用于顯示下拉列表。每個(gè)選項(xiàng)由一個(gè)option元素表示，select必須包含至少一個(gè)option元素。用戶所選擇的選項(xiàng)將高亮顯示塊表示。select屬性描述:name、size、multiple<p>請(qǐng)選擇你的學(xué)歷 <selectname="cardtype"> <optionvalue="university">大學(xué)</option> <optionvalue="high">高中</option> <optionvalue="middle">初中</option> <optionvalue="small">小學(xué)</option> <optionvalue="other">其他</option> </select> </p>文本域textarea元素?于創(chuàng)建多??本輸?控件。此元素使?結(jié)束標(biāo)記</textarea>結(jié)束，在<textarea>和</textarea>之間的內(nèi)容是該多??本框的初始值。textarea屬性描述:name、cols、rows<p> 您對(duì)我們的建議： <textareaname="info"cols="35"rows="7">請(qǐng)將意見輸入此區(qū)域 </textarea><p>課后：創(chuàng)建一個(gè)html頁面，在頁面中寫入常見的標(biāo)簽教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了創(chuàng)建登錄和注冊(cè)界面的常用數(shù)據(jù)；課后布置了登錄注冊(cè)界面的創(chuàng)建，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-8課題名稱第4章表單的應(yīng)用第1-3節(jié)在頁面中添加HTML，HTML5新增標(biāo)簽授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握頁面里面的布局，能夠畫出登錄和注冊(cè)頁面。技能目標(biāo)：能使用HBuilderX制作登錄和注冊(cè)界面。素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)HTML的頁面結(jié)構(gòu)、登錄和注冊(cè)界面的頁面標(biāo)簽。教學(xué)難點(diǎn)掌握HBuilderX的應(yīng)用，能夠熟練新建項(xiàng)目頁面學(xué)情分析本次所講內(nèi)容選自教材第4章第1-3節(jié)。因?yàn)楸敬握n程是學(xué)習(xí)頁面創(chuàng)建的基礎(chǔ)，學(xué)生必須學(xué)好表單的應(yīng)用，掌握頁面的布局和常用標(biāo)簽。教學(xué)過程課前：復(fù)習(xí)理論課講授的網(wǎng)頁的基本結(jié)構(gòu)及相關(guān)工具課中：布置練習(xí)完成如下圖的頁面操作完成如下圖所示的頁面數(shù)據(jù)先講一些，將頁面上的內(nèi)容布局好，督促學(xué)生完成相應(yīng)的內(nèi)容。課后：總結(jié)在上機(jī)實(shí)戰(zhàn)過程中存在的問題，并完成以下練習(xí)題目：制作一個(gè)注冊(cè)界面，并給其添加背景圖片。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上督促學(xué)生完成相應(yīng)的內(nèi)容，確保學(xué)生真實(shí)的完成頁面數(shù)據(jù)。課程教案-9課題名稱第4章表單的應(yīng)用第1-3節(jié)表單的應(yīng)用、在表單中添加元素、HTML5新增表單輸入類型授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：熟悉表單的應(yīng)用、在表單中添加元素【文本字段和密碼域、單選按鈕、復(fù)選框、普通按鈕、提交按鈕、重置按鈕、隱藏域、文件域、菜單列表類、文本域】、HTML5新增表單輸入類型【email類、number類、range類、url類】技能目標(biāo)：掌握與表單相關(guān)的HTML標(biāo)簽，能夠根據(jù)需要在網(wǎng)頁中插入表單標(biāo)簽掌握HTML5新增表單標(biāo)簽素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)理解網(wǎng)頁的基本結(jié)構(gòu)、熟悉網(wǎng)頁的開發(fā)工具教學(xué)難點(diǎn)網(wǎng)頁的基本結(jié)構(gòu)、掌握HBuilderX的應(yīng)用，能夠熟練新建頁面學(xué)情分析本次所講內(nèi)容選自教材第4章第1-3節(jié)。因?yàn)楸敬握n程是學(xué)習(xí)網(wǎng)站制作的基礎(chǔ)，學(xué)生必須掌握表單的使用，掌握如何使用表單來豐富頁面上的數(shù)據(jù)。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入在前面已經(jīng)學(xué)習(xí)了構(gòu)成網(wǎng)頁常見的表格標(biāo)簽。從本章開始學(xué)習(xí)表單標(biāo)簽，表格主要用于設(shè)計(jì)和規(guī)劃網(wǎng)頁，而表單多用于注冊(cè)頁面的設(shè)計(jì)。本章主要講解表單的應(yīng)用，以及表單中的各種元素和HTML5新增的表單標(biāo)簽。課中：HTML5新增表單輸入類型1.Email類型當(dāng)input的type屬性設(shè)置為email，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證email域的值是否符合email的標(biāo)準(zhǔn)格示，再也不用自己用正則表達(dá)示去寫email的格示驗(yàn)證了。<p>請(qǐng)輸入你的郵箱：<inputtype="email"name="useremail"/></p>number類型當(dāng)input的type屬性設(shè)置為number時(shí)，會(huì)自動(dòng)檢驗(yàn)輸入內(nèi)容是否為數(shù)字類型，您還能夠設(shè)定該輸入框數(shù)字的限定。number屬性描述:max、min、step、value<p>請(qǐng)輸入你的電話:<inputtype="number"name="phone"min="11"max="11"/></p>range類型range類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range類型顯示為滑動(dòng)條。您還能夠設(shè)定對(duì)所接受的數(shù)字的限定。<inputtype="range"name="user_range"min="5"max="10"/>url類型當(dāng)input的type屬性設(shè)置為url，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證url域的值是否符合url的標(biāo)準(zhǔn)格示。此類型與email類型一致。<p>請(qǐng)輸入您的個(gè)人主頁:<inputtype="url"name="link_url"/></p>【項(xiàng)目小結(jié)】常見的html輸入表單的元素類型包括：text、password、radio、checkbox、button、submit、reset、hidden、file等。其他常用的表單類型主要為：select、textarea。HTML5新增表單輸入類型：email、number、range、search、url等。課后：創(chuàng)建一個(gè)html頁面，寫一個(gè)登錄和注冊(cè)的界面教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了創(chuàng)建登錄和注冊(cè)界面的常用數(shù)據(jù)；課后布置了登錄注冊(cè)界面的創(chuàng)建，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-10課題名稱第4章表單的應(yīng)用第1-3節(jié)頁面的應(yīng)用授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握頁面里面的布局，能夠畫出登錄和注冊(cè)頁面。技能目標(biāo)：能使用HBuilderX制作登錄和注冊(cè)界面。素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)HTML的頁面結(jié)構(gòu)、登錄和注冊(cè)界面的頁面標(biāo)簽。教學(xué)難點(diǎn)掌握HBuilderX的應(yīng)用，能夠熟練新建項(xiàng)目頁面學(xué)情分析本次所講內(nèi)容選自教材第4章第1-3節(jié)。因?yàn)楸敬握n程是學(xué)習(xí)頁面創(chuàng)建的基礎(chǔ)，學(xué)生必須學(xué)好表單的應(yīng)用，掌握頁面的布局和常用標(biāo)簽。教學(xué)過程課前：復(fù)習(xí)理論課講授的網(wǎng)頁的基本結(jié)構(gòu)及相關(guān)工具課中：1、布置練習(xí)完成如下圖的頁面操作2、在這個(gè)頁面上，將其內(nèi)容更豐富一點(diǎn)，加上圖片，設(shè)置常見樣式。先講一些，將頁面上的內(nèi)容布局好，督促學(xué)生完成相應(yīng)的內(nèi)容。課后：總結(jié)在上機(jī)實(shí)戰(zhàn)過程中存在的問題，并完成以下練習(xí)題目：將上課寫的界面，寫的更漂亮一點(diǎn)，更精細(xì)一點(diǎn)，逐步培養(yǎng)有一定自己的設(shè)計(jì)思路。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上督促學(xué)生完成相應(yīng)的內(nèi)容，確保學(xué)生真實(shí)的完成頁面數(shù)據(jù)。課程教案-11課題名稱第5章應(yīng)用CSS設(shè)置鏈接和導(dǎo)航菜單第1-2節(jié)超鏈接偽類的應(yīng)用、應(yīng)用CSS美化表單元素授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解超鏈接偽類的應(yīng)用；掌握如何使用CSS美化表單元素；技能目標(biāo)：超鏈接偽類；CSS美化表單元素素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)理解超鏈接偽類、熟悉CSS美化表單元素教學(xué)難點(diǎn)理解超鏈接偽類、熟悉CSS美化表單元素學(xué)情分析本次所講內(nèi)容選自教材第5章第1-2節(jié)。學(xué)生必須了解超鏈接偽類的使用，掌握CSS美化表單元素。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入本章主要介紹超鏈接和導(dǎo)航菜單的美化。包括超鏈接的4種樣式、按鈕的美化、表單元素的美化等。本章會(huì)對(duì)以上內(nèi)容進(jìn)行全面分析，包括制作的方法、樣式的美化實(shí)現(xiàn)等。課中：1、超鏈接的4種樣式。偽類名作用:link設(shè)置超鏈接未被訪問時(shí)的樣式:active設(shè)置鼠標(biāo)單擊時(shí)的樣式（鼠標(biāo)單擊下去而未松開時(shí)）:visited設(shè)置超鏈接訪問后的樣式:hover設(shè)置鼠標(biāo)指針懸停在超鏈接上時(shí)的樣式2、將鏈接轉(zhuǎn)換為塊級(jí)元素（1）塊級(jí)元素和行內(nèi)元素塊級(jí)元素在頁面中是區(qū)域塊的形式，它會(huì)生成一個(gè)矩形框。通常塊級(jí)元素會(huì)獨(dú)占一行顯示，相鄰的塊級(jí)元素從上到下依次垂直排列。例如，p、ul、ol、h1～h6、form、div等都是塊級(jí)元素。塊級(jí)元素可以設(shè)置高度、寬度等屬性塊級(jí)元素與行內(nèi)元素的轉(zhuǎn)換錨點(diǎn)（1）創(chuàng)建錨點(diǎn)（2）鏈接到本頁錨點(diǎn)鏈接到其他網(wǎng)頁的錨點(diǎn)4、用CSS制作按鈕（1）CSS制作按鈕（2）button元素按鈕（3）按鈕的美化5、首字下沉6、改變文本框和文本域樣式（1）文本框（2）CSS美化文本框（3）文本域及其美化圖片美化按鈕課后：完成習(xí)題，制作案例完成表單元素的美化教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；課后布置了有關(guān)美化的作業(yè)課程教案-12課題名稱第5章應(yīng)用CSS設(shè)置鏈接和導(dǎo)航菜單第1-2節(jié)超鏈接偽類的應(yīng)用、應(yīng)用CSS美化表單元素授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解超鏈接偽類的應(yīng)用；掌握如何使用CSS美化表單元素；技能目標(biāo)：超鏈接偽類；CSS美化表單元素素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)理解超鏈接偽類、熟悉CSS美化表單元素教學(xué)難點(diǎn)理解超鏈接偽類、熟悉CSS美化表單元素學(xué)情分析本次所講內(nèi)容選自教材第5章第1-2節(jié)。學(xué)生必須了解超鏈接偽類的使用，掌握CSS美化表單元素。教學(xué)過程課前：復(fù)習(xí)理論課講授的內(nèi)容課中：復(fù)習(xí)上節(jié)課內(nèi)容上機(jī)實(shí)戰(zhàn)，講解并完成以下作業(yè)課后：總結(jié)在上機(jī)實(shí)戰(zhàn)過程中存在的問題教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何制作表單；并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-13課題名稱第5章應(yīng)用CSS設(shè)置鏈接和導(dǎo)航菜單第2-3節(jié)應(yīng)用CSS美化表單元素、設(shè)置導(dǎo)航菜單授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握如何使用CSS美化表單元素；掌握如何使用CSS美化導(dǎo)航菜單技能目標(biāo)：CSS美化表單元素；CSS美化導(dǎo)航菜單素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)CSS美化表單元素；CSS美化導(dǎo)航菜單教學(xué)難點(diǎn)CSS美化表單元素；CSS美化導(dǎo)航菜單學(xué)情分析本次所講內(nèi)容選自教材第5章第2-3節(jié)。學(xué)生必須了解CSS美化表單元素；CSS美化導(dǎo)航菜單教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入本章主要介紹表單元素和導(dǎo)航菜單的美化。課中：1、改變下拉列表樣式2、用label標(biāo)簽提升用戶體驗(yàn)3、橫向列表菜單。4、用圖片美化的橫向?qū)Ш?、CSS?Sprites技術(shù)6、二級(jí)菜單列表課后：完成習(xí)題，制作案例完成菜單的美化教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；課后布置了有關(guān)美化的作業(yè)課程教案-14課題名稱第5章應(yīng)用CSS設(shè)置鏈接和導(dǎo)航菜單第2-3節(jié)應(yīng)用CSS美化表單元素、設(shè)置導(dǎo)航菜單授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握如何使用CSS美化表單元素；掌握如何使用CSS美化導(dǎo)航菜單技能目標(biāo)：CSS美化表單元素；CSS美化導(dǎo)航菜單素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)CSS美化表單元素；CSS美化導(dǎo)航菜單教學(xué)難點(diǎn)CSS美化表單元素；CSS美化導(dǎo)航菜單學(xué)情分析本次所講內(nèi)容選自教材第5章第2-3節(jié)。學(xué)生必須了解CSS美化表單元素；CSS美化導(dǎo)航菜單教學(xué)過程課前：復(fù)習(xí)理論課講授的內(nèi)容課中：復(fù)習(xí)上節(jié)課內(nèi)容上機(jī)實(shí)戰(zhàn)，講解并完成以下作業(yè)課后：總結(jié)在上機(jī)實(shí)戰(zhàn)過程中存在的問題，并完成課后作業(yè)教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何美化導(dǎo)航欄；并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-15課題名稱第6章應(yīng)用CSS3樣式美化網(wǎng)頁第1節(jié)使用CSS美化網(wǎng)頁授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握與表單相關(guān)的HTML標(biāo)簽，能夠根據(jù)需要在網(wǎng)頁中插入表單標(biāo)簽；掌握設(shè)置表單樣式的CSS代碼，能夠使用CSS對(duì)表單進(jìn)行美化；能夠制作出常見的注冊(cè)、登錄和留言前臺(tái)頁面；技能目標(biāo)：與表單相關(guān)的HTML標(biāo)簽；設(shè)置表單樣式；素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)常用的表單HTML標(biāo)簽教學(xué)難點(diǎn)使用CSS定義表單樣式學(xué)情分析本次所講內(nèi)容選自教材第6章第1節(jié)。學(xué)生須熟練掌握表單相關(guān)的HTML標(biāo)簽；學(xué)會(huì)在網(wǎng)頁中插入表單標(biāo)簽、最后通過本節(jié)課的學(xué)習(xí)能夠制作出常見的注冊(cè)、登錄等頁面。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入網(wǎng)頁主要由HTML、CSS、JavaScript三部分構(gòu)成，而CSS的主要作用就是美化網(wǎng)頁。網(wǎng)頁上顯示的一些漂亮的樣式，是由CSS實(shí)現(xiàn)的。課中：1、網(wǎng)站基礎(chǔ)知識(shí)，介紹CSS可以做美化那些內(nèi)容。2、講解使用CSS美化網(wǎng)頁文字通過CSS設(shè)置文本的字體、字號(hào)、顏色、底紋和邊框等屬性來改變文本的視覺效果講解使用CSS美化網(wǎng)頁圖片講解使用CSS美化網(wǎng)頁背景講解使用CSS美化網(wǎng)頁邊框講解使用CSS美化網(wǎng)頁表格講解使用美化網(wǎng)頁表單課后：將之前做過的表單頁面使用css進(jìn)行美化教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-16課題名稱第1章HTML5基本標(biāo)簽及開發(fā)工具介紹第5-6節(jié)在頁面中添加HTML，HTML5新增標(biāo)簽授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握與表單相關(guān)的HTML標(biāo)簽，能夠根據(jù)需要在網(wǎng)頁中插入表單標(biāo)簽；掌握設(shè)置表單樣式的CSS代碼，能夠使用CSS對(duì)表單進(jìn)行美化；能夠制作出常見的注冊(cè)、登錄和留言前臺(tái)頁面；技能目標(biāo)：與表單相關(guān)的HTML標(biāo)簽；設(shè)置表單樣式；素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)美化網(wǎng)頁導(dǎo)航教學(xué)難點(diǎn)美化網(wǎng)頁菜單學(xué)情分析本次所講內(nèi)容選自教材第6章第1節(jié)。學(xué)生須熟練掌握表單相關(guān)的HTML標(biāo)簽；學(xué)會(huì)在網(wǎng)頁中插入表單標(biāo)簽、最后通過本節(jié)課的學(xué)習(xí)能夠制作出常見的注冊(cè)、登錄等頁面。教學(xué)過程課前：復(fù)習(xí)理論課講授的使用css美化網(wǎng)頁課中：使用CSS美化網(wǎng)頁導(dǎo)航使用css美化網(wǎng)頁表單3、上機(jī)實(shí)戰(zhàn)，講解并完成以下作業(yè)課后：課程總結(jié)，本次課程主要講解了常用的表單HTML標(biāo)簽、如何使用CSS定義表單樣式等。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-17課題名稱第6章應(yīng)用CSS3樣式美化網(wǎng)頁第2節(jié)CSS美化網(wǎng)頁案例——制作百度熱搜授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：通過CSS知識(shí)完成一個(gè)案例制作，加深CSS美化網(wǎng)頁設(shè)計(jì)的實(shí)際應(yīng)用；技能目標(biāo)：使用css技術(shù)來完成頁面的優(yōu)化；素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)使用css美化頁面教學(xué)難點(diǎn)美化搜索列表欄目學(xué)情分析本次所講內(nèi)容選自教材第6章第2節(jié)。學(xué)生須熟練掌握CSS美化頁面的設(shè)計(jì)；學(xué)會(huì)在不同頁面中使用CSS美化網(wǎng)頁。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入過CSS完成該案例，首先要對(duì)頁面進(jìn)行分析。根據(jù)效果圖，分析頁面，該頁面由哪幾部分組成，用到了哪些元素，每個(gè)元素的樣式有什么區(qū)別，對(duì)頁面了解清楚后，接下來完成該案例就顯得比較容易。課中：先完成基本的HTML內(nèi)容。2、根據(jù)HTML基本內(nèi)容使用css美化頁面課后：完成百度熱搜頁面教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-18課題名稱第6章應(yīng)用CSS3樣式美化網(wǎng)頁第2節(jié)CSS美化網(wǎng)頁案例——制作百度熱搜授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：通過CSS來美化頁面中的表單，并在復(fù)雜的頁面下使用CSS美化；技能目標(biāo)：使用css技術(shù)來完成頁面的優(yōu)化；素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)使用css美化登錄頁面教學(xué)難點(diǎn)使用css美化百度搜索頁面學(xué)情分析本次所講內(nèi)容選自教材第6章第2節(jié)。學(xué)生須熟練掌握CSS美化頁面的設(shè)計(jì)；學(xué)會(huì)在不同頁面中使用CSS美化網(wǎng)頁。教學(xué)過程課前：復(fù)習(xí)理論課講授的使用css美化網(wǎng)頁案例中的重難點(diǎn)課中：1、使用CSS美化表格頁面使用css美化門神頁面3、上機(jī)實(shí)戰(zhàn)，講解并完成以下作業(yè)4、上機(jī)實(shí)戰(zhàn)，講解并完成以下作業(yè)課后：總結(jié)在上機(jī)實(shí)戰(zhàn)過程中存在的問題，并安排預(yù)習(xí)下一章節(jié)：基于DIV+CSS的網(wǎng)頁。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作。課程教案-19課題名稱第7章基于DIV+CSS的網(wǎng)頁第1-2節(jié)理解表現(xiàn)和結(jié)構(gòu)分離、認(rèn)識(shí)DIV授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解Web制作中內(nèi)容、結(jié)構(gòu)、表現(xiàn)的概念；了解DIV+CSS的優(yōu)勢(shì)。認(rèn)識(shí)DIV技能目標(biāo)：使用DIV布局素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度，培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的能力教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)理解“表現(xiàn)和結(jié)構(gòu)分離”、認(rèn)識(shí)DIV教學(xué)難點(diǎn)DIV的使用，塊級(jí)元素和行內(nèi)元素學(xué)情分析本次所講內(nèi)容選自教材第7章第1-2節(jié)。通過本節(jié)課的學(xué)習(xí)使學(xué)生了解什么內(nèi)容和表現(xiàn)分離；以及什么是DIV，DIV的使用。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入Web標(biāo)準(zhǔn)是用于Web表現(xiàn)的一系列技術(shù)標(biāo)準(zhǔn)的集合，以便于通過不同瀏覽器或終端設(shè)備向用戶展示信息。隨著Web標(biāo)準(zhǔn)化設(shè)計(jì)理念的普及，使用DIV+CSS進(jìn)行網(wǎng)頁設(shè)計(jì)和布局已經(jīng)是必然趨勢(shì)。Web標(biāo)準(zhǔn)的好處之一是“表現(xiàn)和結(jié)構(gòu)相分離”，那這到底是什么意思呢？課中：1、內(nèi)容、結(jié)構(gòu)和表現(xiàn)的概念。2、DIV與CSS結(jié)合的優(yōu)勢(shì)改善現(xiàn)有網(wǎng)站的方法認(rèn)識(shí)DIVDIV的概念DIV（div，不區(qū)分大小寫）的解釋是“層疊樣式表單元的位置和層次劃分”。通俗地說，就是“塊”的意思，可以把一個(gè)網(wǎng)頁理解為由n個(gè)塊（區(qū)域）組成的，不同的塊顯示不同的內(nèi)容，如導(dǎo)航欄、banner、內(nèi)容區(qū)等。使用DIV通過案例演示講解DIV的使用5、理解DIV通過案例講解在CSS布局中經(jīng)常使用的塊級(jí)元素<div>在標(biāo)準(zhǔn)文檔流中的幾個(gè)特性。6、并列與嵌套DIV結(jié)構(gòu)案例講解7、使用適合的對(duì)象來布局網(wǎng)頁課后：利用DIV+CSS對(duì)頁面進(jìn)行簡單布局教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-20課題名稱第7章基于DIV+CSS的網(wǎng)頁第3節(jié)盒模型詳解授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握盒子模型的基本概念；掌握塊元素和行內(nèi)元素的區(qū)別技能目標(biāo)：掌握設(shè)置元素邊框、邊界等控制大小和間距的CSS屬性；能夠?qū)φ麄€(gè)頁面進(jìn)行HTML結(jié)構(gòu)設(shè)計(jì)；能夠讓頁面整體居中，以及對(duì)整體頁面及頁面各布局的大小進(jìn)行控制；能夠計(jì)算每個(gè)元素所占的寬度；素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)盒子模型教學(xué)難點(diǎn)對(duì)整體頁面、頁面元素及頁面各布局的大小進(jìn)行控制學(xué)情分析本次所講內(nèi)容選自教材第7章第3節(jié)。通過本節(jié)課的學(xué)習(xí)使學(xué)生掌握盒子模型的基本概念。掌握設(shè)置元素邊框、邊界等控制大小和間距的CSS屬性；能夠?qū)φ麄€(gè)頁面進(jìn)行HTML結(jié)構(gòu)設(shè)計(jì)；能夠讓頁面整體居中，以及對(duì)整體頁面及頁面各布局的大小進(jìn)行控制；能夠計(jì)算每個(gè)元素所占的寬度；理解內(nèi)外邊距的不同之處。教學(xué)過程課前：復(fù)習(xí)理論課講授的DIV+CSS相關(guān)概念課中：講解盒子模型，重點(diǎn)講解以下內(nèi)容：盒模型寬度、高度內(nèi)邊距邊框外邊距2、上機(jī)實(shí)戰(zhàn)，講解并完成以下網(wǎng)頁課后：總結(jié)在上機(jī)實(shí)戰(zhàn)過程中存在的問題，預(yù)習(xí)下次課知識(shí)教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-21課題名稱第7章基于DIV+CSS的網(wǎng)頁第4-5節(jié)使用CSS完善盒模型、認(rèn)識(shí)浮動(dòng)與定位授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：使用CSS完善盒模型；理解標(biāo)準(zhǔn)流布局，浮動(dòng)布局；了解position屬性和CSS定位的類型，掌握相對(duì)定位與絕對(duì)定位的區(qū)別；掌握left、right、top和bottom屬性的作用；掌握z-index屬性的作用；技能目標(biāo)：使用position屬性和CSS定位布局網(wǎng)頁；掌握left、right、top和bottom屬性的作用；z-index屬性的作用；素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度，培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的能力教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)CSS相對(duì)定位和絕對(duì)定位、元素的堆疊順序、溢出和剪裁教學(xué)難點(diǎn)CSS相對(duì)定位和絕對(duì)定位布局學(xué)情分析本次所講內(nèi)容選自教材第7章第4-5節(jié)。通過本節(jié)課的學(xué)習(xí)使學(xué)生了解position屬性和CSS定位的類型；掌握相對(duì)定位與絕對(duì)定位和z-index；。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入在學(xué)習(xí)并列與嵌套div之后，可以通過將塊級(jí)元素轉(zhuǎn)換為行內(nèi)塊級(jí)元素讓多個(gè)div在同一行顯示，但這里會(huì)有兩個(gè)小問題：div之間會(huì)有小縫隙，很難去除；要讓其中一個(gè)div顯示在最右邊，實(shí)現(xiàn)起來比較麻煩?？梢酝ㄟ^CSS浮動(dòng)或定位輕易解決。課中：1、使用CSS完善盒模型、溢出和剪裁2、文檔流3、CSS定位①定位模式。在CSS中，position屬性用來定義元素的定位模式，其常用屬性值有static、relative，absolute、fixed、sticky②邊偏移(位置屬性)。定位模式僅僅定義了元素的定位方式，而并不能確定元素的具體位置。在CSS中，位置屬性用來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，定位屬性包括top、bottom、left和right。通過案例操作演示幾種定位模式。4、元素的堆疊順序課后：利用position對(duì)頁面進(jìn)行定位布局教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-22課題名稱第7章基于DIV+CSS的網(wǎng)頁第5節(jié)認(rèn)識(shí)浮動(dòng)與定位授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握浮動(dòng)布局的基本原理和float屬性的用法；掌握浮動(dòng)元素的盒子模型計(jì)算；掌握clear屬性的含義和用法；掌握浮動(dòng)元素的display屬性；技能目標(biāo)：浮動(dòng)布局的基本原理和float屬性的用法；浮動(dòng)元素的盒子模型計(jì)算；clear屬性的含義和用法；浮動(dòng)元素的display屬性；能夠利用浮動(dòng)方式對(duì)頁面進(jìn)行布局。素質(zhì)目標(biāo)：培養(yǎng)自主學(xué)習(xí)意識(shí)和嚴(yán)謹(jǐn)?shù)膶W(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)float和clear屬性；浮動(dòng)布局的原理教學(xué)難點(diǎn)常用的浮動(dòng)布局方法；清除浮動(dòng)學(xué)情分析本次所講內(nèi)容選自教材第7章第5節(jié)。通過本節(jié)課的學(xué)習(xí)，學(xué)生須熟練掌握浮動(dòng)布局的基本原理、float和clear屬性的含義和用法；掌握浮動(dòng)元素的display屬性。教學(xué)過程課前：復(fù)習(xí)理論課講授的幾種定位布局課中：講解浮動(dòng)布局，重點(diǎn)講解以下內(nèi)容：float和clear屬性浮動(dòng)布局的原理常用的浮動(dòng)布局方法清除浮動(dòng)對(duì)布局的不良影響浮動(dòng)布局應(yīng)用技巧2、上機(jī)實(shí)戰(zhàn)，講解并完成以下網(wǎng)頁課后：總結(jié)在上機(jī)實(shí)戰(zhàn)過程中存在的問題，預(yù)習(xí)下次課知識(shí)教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-23課題名稱第8章應(yīng)用CSS3布局網(wǎng)頁第1節(jié)應(yīng)用CSS布局網(wǎng)頁授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解CSS布局網(wǎng)頁的相關(guān)知識(shí)；了解應(yīng)用CSS進(jìn)行布局的幾種模式；了解如何使用HbuilderX進(jìn)行CSS網(wǎng)頁布局。技能目標(biāo)：掌握一列固定寬度及高度、一列自適應(yīng)寬度、一列固定寬度居中等CSS布局模式。素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)掌握用CSS進(jìn)行網(wǎng)頁布局的幾種方法教學(xué)難點(diǎn)了解一列固定寬度高度、一列自適應(yīng)寬度和一列自適應(yīng)寬度居中的效果區(qū)別，了解這幾種CSS應(yīng)用模式的適用情形。學(xué)情分析本次所講內(nèi)容選自教材第8章第1節(jié)。本次課程是學(xué)習(xí)CSS網(wǎng)站布局應(yīng)用，學(xué)生必須熟練掌握CSS的相關(guān)知識(shí)和語句，才能接著學(xué)習(xí)CSS在布局中的應(yīng)用。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入CSS的布局是一種很新的布局理念，完全有別于傳統(tǒng)的布局習(xí)慣。它首先將頁面在整體上進(jìn)行<div>標(biāo)記的分塊，然后對(duì)各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。通過CSS布局的頁?，更新十分容易，甚?是頁?的拓?fù)浣Y(jié)構(gòu)，都可以通過修改CSS屬性來重新定位。本節(jié)主要介紹CSS布局的?些基本技巧。課中：1、關(guān)于CSS在布局中的幾種應(yīng)用模式。2、講解第一個(gè)基礎(chǔ)模式：一列固定寬度和高度<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>一列固定寬度</title> <styletype="text/css"> #layout{ border:2pxsolid#A9C9E2; background-color:#E8F5FE; height:300px; width:400px; } </style> </head> <body> <divid="layout"><imgsrc="img/1.png"></div> </body></html>講解該CSS布局模式的結(jié)構(gòu)及網(wǎng)頁中各種標(biāo)簽的含義。講解第二個(gè)CSS應(yīng)用模式：一列自適應(yīng)寬度<htmlxmlns="/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>一列自適應(yīng)寬度</title> <styletype="text/css"> #layout{ border:2pxsolid#A9C9E2; background-color:#E8F5FE; width:300px; width:80%; } </style> </head> <body> <divid="layout"><imgsrc="img/1.png"></div> </body></html>講解第三個(gè)CSS應(yīng)用模式：一列自適應(yīng)寬度居中<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>一列固定寬度</title> <styletype="text/css"> #layout{ border:2pxsolid#A9C9E2; background-color:#E8F5FE; height:300px; width:400px; } </style> </head> <body> <divid="layout"><imgsrc="img/1.png"></div> </body></html>課后：啟動(dòng)Hbuilder，在軟件中練習(xí)課堂所講的三種CSS模式的代碼實(shí)現(xiàn)。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何使用CSS進(jìn)行布局和幾種不同的布局模式；課后布置了有關(guān)CSS網(wǎng)頁布局的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-24課題名稱第8章應(yīng)用CSS3布局網(wǎng)頁第1節(jié)應(yīng)用CSS3布局網(wǎng)頁授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解CSS布局網(wǎng)頁的相關(guān)知識(shí)；了解應(yīng)用CSS進(jìn)行布局的幾種模式；了解如何使用HbuilderX進(jìn)行CSS網(wǎng)頁布局。技能目標(biāo)：熟練掌握、正確使用HBuilderX進(jìn)行CSS網(wǎng)頁布局的幾種方法。素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)CSS布局語句的設(shè)計(jì)與實(shí)現(xiàn)教學(xué)難點(diǎn)熟練掌握CSS布局的具體實(shí)現(xiàn)方法學(xué)情分析本次所講內(nèi)容選自教材第8章第2節(jié)。本次課程是學(xué)習(xí)CSS網(wǎng)站布局應(yīng)用，學(xué)生必須熟練掌握CSS的相關(guān)知識(shí)和語句，才能接著學(xué)習(xí)CSS在布局中的應(yīng)用。教學(xué)過程課前：復(fù)習(xí)理論課講授的CSS3在網(wǎng)頁中的幾種應(yīng)用模式：一列固定寬度和高度、一列自適應(yīng)寬度和一列固定寬度居中。課中：講解實(shí)現(xiàn)CSS網(wǎng)頁布局的具體步驟，如下：使用div塊將要布局的內(nèi)容分類制成盒子模型給盒子模型進(jìn)行CSS樣式設(shè)置適當(dāng)調(diào)整格子的布局格式和顯示效果2、講解CSS3布局模式中各個(gè)CSS標(biāo)簽的修飾作用上機(jī)實(shí)戰(zhàn)，講解并完成以下作業(yè)上機(jī)實(shí)戰(zhàn)，講解并完成以下CSS布局結(jié)構(gòu)課后：根據(jù)本章的知識(shí)點(diǎn)完成css布局效果，針對(duì)3個(gè)不同的盒子進(jìn)行設(shè)置。題目：給冰墩墩?qǐng)D片分別制作三種不同的css布局效果。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)站點(diǎn)的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-25課題名稱第8章應(yīng)用CSS3布局網(wǎng)頁第2節(jié)應(yīng)用CSS布局網(wǎng)站實(shí)例授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解CSS布局網(wǎng)頁的相關(guān)知識(shí)；了解應(yīng)用CSS進(jìn)行布局的幾種模式；了解如何使用HbuilderX進(jìn)行CSS網(wǎng)頁布局。技能目標(biāo)：掌握幾種CSS布局模式在網(wǎng)站中的實(shí)例應(yīng)用和實(shí)現(xiàn)過程。素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)CSS布局在網(wǎng)站中的實(shí)際應(yīng)用教學(xué)難點(diǎn)不同CSS布局模式的效果區(qū)別，以及適用情形，能根據(jù)不同顯示需求選擇最優(yōu)布局學(xué)情分析本次所講內(nèi)容選自教材第8章第2節(jié)。本次課程是學(xué)習(xí)CSS網(wǎng)站布局應(yīng)用，學(xué)生必須熟練掌握CSS的相關(guān)知識(shí)和語句，才能接著學(xué)習(xí)CSS在布局中的應(yīng)用。教學(xué)過程課前：預(yù)習(xí)+課程導(dǎo)入通過前面內(nèi)容的學(xué)習(xí)，掌握了CSS布局網(wǎng)站，本節(jié)通過CSS知識(shí)完成一個(gè)案例制作，加深CSS布局網(wǎng)站的實(shí)際應(yīng)用。課中：講解實(shí)現(xiàn)CSS布局的具體步驟，如下：將內(nèi)容做成一個(gè)個(gè)盒子，同時(shí)上成不同的色塊<html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> *{ margin:0; padding:0; } #meau{ height:98px; background-color:#FFE4C4; } #box{ width:900px; margin:0auto; } #shang{ width:980px; height:300px; background-color:aqua; } #zeng1{ width:680px; height:350px; background-color:blueviolet; float:left; } #zeng2{ width:300px; height:350px; background-color:coral; margin-left:680px; } #xai{ width:980px; height:30px; background-color:#FFE4C4; } </style> </head> <body> <divid="meau"> </div> <divid="box"> <divid="shang"> </div> <divid="zeng"> <divid="zeng1"> </div> <divid="zeng2"> </div> </div> <divid="xai"> </div> </div> </body></html>在不同的色塊中填入內(nèi)容，調(diào)整格式布局根據(jù)每個(gè)div需要的內(nèi)容，完成html內(nèi)容和css內(nèi)容2、總結(jié)章節(jié)知識(shí)：一列固定寬度及高度主要使用width和height；一列自適應(yīng)寬度主要使用%的形式來設(shè)置；一列固定寬度使用align來設(shè)置居中。課后：啟動(dòng)Hbuilder，新建“鳳凰古城”項(xiàng)目，利用CSS布局知識(shí)完成鳳凰古城經(jīng)典介紹頁面。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何使用CSS進(jìn)行布局和幾種不同的布局模式；課后布置了有關(guān)CSS網(wǎng)頁布局的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-26課題名稱第8章應(yīng)用CSS3布局網(wǎng)頁第2節(jié)應(yīng)用CSS3布局網(wǎng)站實(shí)例授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解CSS布局網(wǎng)頁的相關(guān)知識(shí)；了解應(yīng)用CSS進(jìn)行布局的幾種模式；了解如何使用HbuilderX進(jìn)行CSS網(wǎng)頁布局。技能目標(biāo)：熟練掌握、正確使用HBuilderX進(jìn)行CSS網(wǎng)頁布局的幾種方法。素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)CSS幾種布局模式語句的設(shè)計(jì)與實(shí)現(xiàn)教學(xué)難點(diǎn)熟練掌握CSS布局的具體實(shí)現(xiàn)方法學(xué)情分析本次所講內(nèi)容選自教材第8章第2節(jié)。本次課程是學(xué)習(xí)CSS網(wǎng)站布局應(yīng)用，學(xué)生必須熟練掌握CSS的相關(guān)知識(shí)和語句，才能接著學(xué)習(xí)CSS在布局中的應(yīng)用。教學(xué)過程課前：復(fù)習(xí)理論課講授的CSS3在網(wǎng)頁中的幾種應(yīng)用模式：一列固定寬度和高度、一列自適應(yīng)寬度和一列固定寬度居中。課中：講解實(shí)現(xiàn)CSS網(wǎng)頁布局的具體步驟，如下：使用色塊進(jìn)行網(wǎng)頁的布局給色塊添加內(nèi)容適當(dāng)調(diào)整格式與排版2、講解CSS3布局模式中各個(gè)標(biāo)簽的作用上機(jī)實(shí)戰(zhàn)，講解并完成以下作業(yè)上機(jī)實(shí)戰(zhàn)，講解并完成以下CSS布局結(jié)構(gòu)課后：根據(jù)本章的知識(shí)點(diǎn)完成css布局效果，熟練使用3種不同的布局模式，并在不同需求的網(wǎng)頁中靈活應(yīng)用。題目：利用所學(xué)知識(shí)完成鳳凰古城景點(diǎn)介紹頁面的布局結(jié)構(gòu)。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡單的網(wǎng)頁頁面；課后布置了有關(guān)CSS布局的作業(yè)，并且利用上機(jī)時(shí)間完成和指導(dǎo)工作課程教案-27課題名稱第9章應(yīng)用DIV+CSS設(shè)計(jì)商業(yè)網(wǎng)站第1-4節(jié)建立站點(diǎn)，結(jié)構(gòu)分析，框架搭建，商業(yè)網(wǎng)站頁面布局授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解網(wǎng)站開發(fā)流程；了解網(wǎng)頁布局設(shè)計(jì)；技能目標(biāo)：可以使用DIV+CSS進(jìn)行網(wǎng)頁布局；掌握網(wǎng)站開發(fā)流程及實(shí)際方法；素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度，能夠根據(jù)實(shí)際情況對(duì)網(wǎng)頁進(jìn)行結(jié)構(gòu)分析；教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重