1、一體化全書教案完整版教學(xué)設(shè)計(jì)課 程HTML5授課教師林曉儀課 題項(xiàng)目1制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容分課題任務(wù)1.3 在網(wǎng)頁(yè)中添加段落、文字和列表授課班級(jí)16五年制電子商務(wù)2班授課日期2022.02.282022.03.02課時(shí)8課時(shí)學(xué)習(xí)目標(biāo)專業(yè)理論知識(shí)學(xué)生能夠表述常見HTML格式化文本標(biāo)簽的含義實(shí)際操作技能學(xué)生能夠在網(wǎng)頁(yè)中按要求正確應(yīng)用HTML文本標(biāo)簽重 點(diǎn)能夠在網(wǎng)頁(yè)中按要求應(yīng)用HTML文本標(biāo)簽難 點(diǎn)能夠在網(wǎng)頁(yè)中按要求應(yīng)用HTML文本標(biāo)簽教學(xué)對(duì)象分析授課班級(jí)為15五年制電子商務(wù)2班，因之前已學(xué)過(guò)網(wǎng)頁(yè)相關(guān)知識(shí)，對(duì)網(wǎng)頁(yè)制作有一定了解，在教學(xué)時(shí)應(yīng)聯(lián)系現(xiàn)實(shí)生活中的例子進(jìn)行講解。教學(xué)場(chǎng)地與教具教學(xué)場(chǎng)地：機(jī)

2、房 教具：計(jì)算機(jī)課后分析安全注意事項(xiàng)及其它說(shuō)明1、提醒學(xué)生注意用電安全。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。審閱簽名： 年 月 日項(xiàng)目1 制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教 學(xué) 過(guò) 程任務(wù)1.2 在網(wǎng)頁(yè)中添加段落和文字- -教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說(shuō)明組織教學(xué)1、嚴(yán)格遵守上下課時(shí)間，上課鈴響前5分鐘進(jìn)入教室；2、檢查學(xué)生的儀容儀表，嚴(yán)禁帶食品和飲料進(jìn)入教室；3、檢查教室線路布置，提醒學(xué)生注意用電安全；4、按照固定座位清點(diǎn)人數(shù)；5、提醒學(xué)生檢查是否將電腦接入英特網(wǎng)；6、利用紅蜘蛛軟件將教學(xué)資料“素材”文件夾發(fā)送到學(xué)生電腦的文件接收柜中，同時(shí)將文件放置在教師機(jī)共享文件夾供學(xué)生訪問(wèn)查閱。1、提前5分

3、鐘按照固定座位就坐；2、不帶食品飲料進(jìn)入教室（機(jī)房）；3、開機(jī)，配置好IP地址，確保紅蜘蛛軟件運(yùn)行并鏈接教師機(jī)，同時(shí)能夠訪問(wèn)英特網(wǎng)；4、注意電腦接電用電安全。課前5分鐘營(yíng)造上課環(huán)境，保證用電安全任務(wù)引入1、講解現(xiàn)實(shí)生活中網(wǎng)頁(yè)制作的用處，明白本門課程的作用2、明確本次任務(wù)在項(xiàng)目完成中的地位：（加為本次課任務(wù)）步驟一：制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容（本項(xiàng)目（即項(xiàng)目一）任務(wù)1 工作環(huán)境準(zhǔn)備任務(wù)2 創(chuàng)建一個(gè)空白網(wǎng)頁(yè)任務(wù)3 在網(wǎng)頁(yè)中添加段落、文字和列表任務(wù)5 在網(wǎng)頁(yè)中添加表格任務(wù)6 在網(wǎng)頁(yè)中添加圖片任務(wù)7 在網(wǎng)頁(yè)中添加超鏈接任務(wù)8 在網(wǎng)頁(yè)中添加表單3、任務(wù)要求按HTML格式化文本標(biāo)簽要求，在新建的空白頁(yè)面中

4、添加移動(dòng)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容文字和段落內(nèi)容。與教師一起回憶上次課的內(nèi)容。理解本次課程任務(wù)要求10分鐘1、明確本次課程要完成的任務(wù)在項(xiàng)目中的位置2、明確本次課程任務(wù)要求預(yù)備知識(shí)【教師講解理論知識(shí)，操作并演示課程練習(xí)，在學(xué)生操作課堂練習(xí)時(shí)巡視并輔導(dǎo)學(xué)生完成】1、 標(biāo)題標(biāo)簽-一般文章都有標(biāo)題、副標(biāo)題、章和節(jié)等結(jié)構(gòu)，HTML中也提供了相應(yīng)的標(biāo)題標(biāo)簽，其中n為標(biāo)題的等級(jí)，HTML總共提供六個(gè)等級(jí)的標(biāo)題，即h1h6，h1定義最大的標(biāo)題，h6定義最小的標(biāo)題。其語(yǔ)法形式如下：1級(jí)標(biāo)題：2級(jí)標(biāo)題：6級(jí)標(biāo)題：【課堂練習(xí)1.1-1 顯示6級(jí)標(biāo)題的效果】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼

5、：123456一級(jí)標(biāo)題二級(jí)標(biāo)題三級(jí)標(biāo)題四級(jí)標(biāo)題五級(jí)標(biāo)題六級(jí)標(biāo)題顯示效果如下：圖1.3-1顯示6級(jí)標(biāo)題效果2、段落標(biāo)簽在網(wǎng)頁(yè)制作的過(guò)程中，常常需要將一篇文章分成相應(yīng)的段落，只需要在內(nèi)容前加內(nèi)容后加即可實(shí)現(xiàn)文章?lián)Q段落。其語(yǔ)法形式如下：段落文字【課堂練習(xí)1.3-2使用標(biāo)題和段落的網(wǎng)頁(yè)】打開Dreamweaver軟件，在標(biāo)簽中輸入如下代碼：1234段落標(biāo)簽我是第一段落我是第二段落我是第三段落顯示效果如下：圖1.3-2使用了標(biāo)題和段落的網(wǎng)頁(yè)3、通用div塊無(wú)素div標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。div是一個(gè)塊級(jí)元素，也就是說(shuō)，瀏覽器通常會(huì)在

6、div元素前后放置一個(gè)換行符。其語(yǔ)法形式如下：任何網(wǎng)頁(yè)元素（標(biāo)簽）注釋：HTML中的元素可分為兩種類型：塊級(jí)元素和行級(jí)元素。塊級(jí)元素：顯示在一塊內(nèi)，會(huì)自動(dòng)換行，元素會(huì)從上到下垂直排列，各自占一行，如前面所講過(guò)的p,h1,div等標(biāo)簽元素。行內(nèi)元素：元素在一行內(nèi)水平排列，高度由元素的內(nèi)容決定，height屬性不起作用，如后面要講的span,a等元素?！菊n堂練習(xí)1.3-3使用div分割文檔】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：12345678 h1標(biāo)題標(biāo)簽 我是第一段落 h2標(biāo)題標(biāo)簽 我是第二段落效果顯示如下：圖1.3-3使用div分割文檔4、通用內(nèi)聯(lián)元素span標(biāo)

7、簽是被用來(lái)組合文檔中的行內(nèi)元素。span沒(méi)有固定的格式表現(xiàn)。當(dāng)對(duì)它應(yīng)用樣式（在后面的章節(jié)中會(huì)進(jìn)行詳細(xì)講解）時(shí)，它才會(huì)產(chǎn)生視覺上的變化。span標(biāo)簽在行內(nèi)定義一個(gè)區(qū)域，也就是一行內(nèi)可以被span劃分成好幾個(gè)區(qū)域，從而實(shí)現(xiàn)某種特定效果。span標(biāo)簽本身沒(méi)有任何屬性。其語(yǔ)法形式如下：要修改樣式的文字【課堂練習(xí)1.3-4使用span標(biāo)簽】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：12345678 h1標(biāo)題標(biāo)簽 我是第一段落中的span h2標(biāo)題標(biāo)簽 我是第二段落span效果顯示如下：圖1.3-4使用span標(biāo)簽聽講根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼

8、。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。130分鐘邊講邊練，完成理論知識(shí)的學(xué)習(xí)任務(wù)實(shí)施要求學(xué)生參考如下步驟完成任務(wù)：（教師巡視并輔導(dǎo)學(xué)生的任務(wù)完成）（1）打開任務(wù)2中的index.html文件。（2）完成網(wǎng)頁(yè)廣告單頁(yè)中標(biāo)題和段落的編寫。12345678910111213141516171819202122232425

9、2627 程序猿，攻城獅 是的，這是別人對(duì)我們的稱呼。 關(guān)于我們 信息工程系是華南工業(yè)大學(xué)建立較早的系， 本科生招生計(jì)劃 本科專業(yè)介紹 目前我校的信息工程系主要開設(shè)有 計(jì)算機(jī)科學(xué)與技術(shù) 本專業(yè)分為嵌入式和物聯(lián)網(wǎng)兩個(gè)方向 軟件工程 本專主要培養(yǎng)具備良好科學(xué)素養(yǎng) Copyright 2015 信息工程系.華南工業(yè)大學(xué)學(xué)生在總結(jié)前面課堂練習(xí)知識(shí)的基礎(chǔ)上，參考教師提供的操作步驟（左邊）獨(dú)立完成任務(wù)的實(shí)施。200分鐘提供學(xué)生的知識(shí)遷移能力提高學(xué)生的自學(xué)能力和問(wèn)題解決能力任務(wù)總結(jié)1、文字不僅是網(wǎng)頁(yè)信息傳達(dá)的一種常用方式，也是視覺傳達(dá)最直接的方式，運(yùn)用經(jīng)過(guò)精心處理的文字材料完全可以制作出效果很好的版面。2、

10、在HTML語(yǔ)言中，使用標(biāo)簽來(lái)定義頁(yè)面上16級(jí)的標(biāo)題；使用標(biāo)簽來(lái)定義段落；使用標(biāo)簽將文字進(jìn)行軟換行；還可以使用其它標(biāo)簽和特殊字符來(lái)制作網(wǎng)頁(yè)中的各種元素。3、根據(jù)學(xué)生任務(wù)完成的情況進(jìn)行總結(jié)。聽講根據(jù)教師的總結(jié)找出自己在任務(wù)完成時(shí)存在的不足。5分鐘總結(jié)任務(wù)并回顧教學(xué)目標(biāo)的知識(shí)和技能目標(biāo)任務(wù)評(píng)價(jià)評(píng)價(jià) 興趣 （不感興趣，沒(méi)學(xué)會(huì)） 學(xué)會(huì)（認(rèn)知） 【評(píng)價(jià)】9分鐘建立評(píng)價(jià)機(jī)制：自評(píng)作業(yè)布置通過(guò)查看源代碼的方式，查看部分網(wǎng)頁(yè)的內(nèi)容文本所使用的標(biāo)簽是否與我們所用的相同，不管是與不是，請(qǐng)將你查看的網(wǎng)頁(yè)代碼截圖發(fā)教師郵箱：理解作業(yè)要求1分鐘加強(qiáng)課堂知識(shí)的鞏固與遷移清潔整理、設(shè)備恢復(fù)和整理。、教學(xué)場(chǎng)地的清潔。、人走五關(guān)

11、（關(guān)門、關(guān)窗、關(guān)燈、關(guān)風(fēng)扇，關(guān)電源）。清潔整理值日生打掃衛(wèi)生課后5分鐘清潔整理7.5.1-13-j-02課 程HTML5授課教師林曉儀課 題項(xiàng)目1制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容分課題任務(wù)1.2 創(chuàng)建空白網(wǎng)頁(yè)授課班級(jí)16五年制電子商務(wù)2班授課日期2022.2.23課時(shí)4課時(shí)學(xué)習(xí)目標(biāo)專業(yè)理論知識(shí)1、學(xué)生能夠了解HTML的概念2、學(xué)生能夠掌握HTML的基本結(jié)構(gòu)實(shí)際操作技能1、能夠輸入基本的網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽2、能夠使用Visual Studio Code新建和保存頁(yè)面重 點(diǎn)HTML基本的標(biāo)簽語(yǔ)法難 點(diǎn)HTML5新增結(jié)構(gòu)標(biāo)簽教學(xué)對(duì)象分析授課班級(jí)為15五年制電子商務(wù)2班，因之前已學(xué)過(guò)網(wǎng)頁(yè)相關(guān)知識(shí)，對(duì)網(wǎng)頁(yè)制作有一定

12、了解，在教學(xué)時(shí)應(yīng)聯(lián)系現(xiàn)實(shí)生活中的例子進(jìn)行講解。教學(xué)場(chǎng)地與教具教學(xué)場(chǎng)地：機(jī)房 教具：計(jì)算機(jī)課后分析安全注意事項(xiàng)及其它說(shuō)明1、提醒學(xué)生注意用電安全。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。審閱簽名： 年 月 日項(xiàng)目1 制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教 學(xué) 過(guò) 程任務(wù)1.2 在網(wǎng)頁(yè)中添加段落和文字- -教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說(shuō)明組織教學(xué)1、嚴(yán)格遵守上下課時(shí)間，上課鈴響前5分鐘進(jìn)入教室；2、檢查學(xué)生的儀容儀表，嚴(yán)禁帶食品和飲料進(jìn)入教室；3、檢查教室線路布置，提醒學(xué)生注意用電安全；4、按照固定座位清點(diǎn)人數(shù)；5、提醒學(xué)生檢查是否將電腦接入英特網(wǎng)；6、利用紅蜘蛛軟件將教學(xué)資料“素材”文件夾發(fā)送到學(xué)生電腦的文

13、件接收柜中，同時(shí)將文件放置在教師機(jī)共享文件夾供學(xué)生訪問(wèn)查閱。1、提前5分鐘按照固定座位就坐；2、不帶食品飲料進(jìn)入教室（機(jī)房）；3、開機(jī)，配置好IP地址，確保紅蜘蛛軟件運(yùn)行并鏈接教師機(jī)，同時(shí)能夠訪問(wèn)英特網(wǎng)；4、注意電腦接電用電安全。課前5分鐘營(yíng)造上課環(huán)境，保證用電安全任務(wù)引入1、講解現(xiàn)實(shí)生活中網(wǎng)頁(yè)制作的用處，明白本門課程的作用2、明確本次任務(wù)在項(xiàng)目完成中的地位：（加為本次課任務(wù)）步驟一：制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容（本項(xiàng)目（即項(xiàng)目一）任務(wù)1 工作環(huán)境準(zhǔn)備任務(wù)2 創(chuàng)建一個(gè)空白網(wǎng)頁(yè)任務(wù)3 在網(wǎng)頁(yè)中添加段落和文字任務(wù)4 在網(wǎng)頁(yè)中添加列表任務(wù)5 在網(wǎng)頁(yè)中添加表格任務(wù)6 在網(wǎng)頁(yè)中添加圖片任務(wù)7 在網(wǎng)頁(yè)中添加

14、超鏈接任務(wù)8 在網(wǎng)頁(yè)中添加表單3、任務(wù)要求使用Visual Studio Code新建并保存一個(gè)簡(jiǎn)單的基本頁(yè)面與教師回憶上次課的內(nèi)容。理解本次課程任務(wù)要求10分鐘1、明確本次課程要完成的任務(wù)在項(xiàng)目中的位置2、明確本次課程任務(wù)要求預(yù)備知識(shí)【教師講解理論知識(shí)，操作并演示課程練習(xí)，在學(xué)生操作課堂練習(xí)時(shí)巡視并輔導(dǎo)學(xué)生完成】1、HTML概念HTML（HyperText Mark-up Language，超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言），是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語(yǔ)言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說(shuō)明文字、圖形、動(dòng)畫、聲音、表格、鏈接等。2

15、、HTML文本基本結(jié)構(gòu)一個(gè)網(wǎng)頁(yè)對(duì)應(yīng)于一個(gè)HTML文件，HTML文件以.htm或.html為擴(kuò)展名。HTML的結(jié)構(gòu)包括頭部（head）、主體（body）兩大部分，其中頭部描述瀏覽器所需的信息，主體部分包含網(wǎng)頁(yè)所要說(shuō)明的具體內(nèi)容。其完整結(jié)構(gòu)如下所示：123456789無(wú)標(biāo)題文檔其中聲明位于文檔中的最前面的位置，處于標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。標(biāo)簽標(biāo)識(shí)了文件的開頭與結(jié)尾，表示這對(duì)標(biāo)記間的內(nèi)容是HTML文檔。標(biāo)記包含了文件的頭部，標(biāo)記內(nèi)的內(nèi)容不在瀏覽器中顯示，主要用來(lái)說(shuō)明文件的有關(guān)信息，如文件標(biāo)題、作者、編寫時(shí)間等。標(biāo)簽沒(méi)有結(jié)束標(biāo)簽，位于head元素內(nèi)部，標(biāo)簽的屬

16、性定義了與文檔相關(guān)聯(lián)的名稱和值。例如表示使用的字符編碼為簡(jiǎn)體中文編碼，比較常見的還有國(guó)際化編碼UTF-8。在head標(biāo)記內(nèi)最常用的標(biāo)記是，該標(biāo)記是網(wǎng)頁(yè)主題標(biāo)記，提示網(wǎng)頁(yè)內(nèi)容和功能的文字，它將出現(xiàn)在瀏覽器的標(biāo)題欄中。標(biāo)記是HTML文檔的主體部分，網(wǎng)頁(yè)正文中的所有內(nèi)容包括文字、表格、圖像、聲音和動(dòng)畫等都包含在這對(duì)標(biāo)記對(duì)之間?！菊n題練習(xí)1.2-1：錄入一個(gè)完整的網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽】打開記事本，輸入如下標(biāo)簽：12345678910這是一個(gè)完整的網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽 歡迎光臨我的網(wǎng)頁(yè)！3、移動(dòng)設(shè)備的HTML基本結(jié)構(gòu)電腦經(jīng)過(guò)多年的發(fā)展，現(xiàn)在顯示器的屏幕分辨率已經(jīng)能夠達(dá)到1024x768及更高的1280 x1024等。因

17、此我們的移動(dòng)設(shè)備無(wú)法將普通網(wǎng)頁(yè)全屏顯示在移動(dòng)設(shè)備上，雖然通過(guò)屏幕放大縮小也可訪問(wèn)傳統(tǒng)的網(wǎng)頁(yè)，也由于用戶體驗(yàn)不佳，很難得到實(shí)際的應(yīng)用。為了增加對(duì)移動(dòng)設(shè)備的友好，應(yīng)該將針對(duì)移動(dòng)設(shè)備的樣式融合進(jìn)框架的每個(gè)角落，而不是增加一個(gè)額外的文件。為了確保適當(dāng)?shù)睦L制和觸屏縮放，需要在之中添加viewport元數(shù)據(jù)標(biāo)簽。在移動(dòng)設(shè)備瀏覽器上，通過(guò)為視口（viewport）設(shè)置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能后，用戶只能滾動(dòng)屏幕，就能讓你的網(wǎng)站看上去更像原生應(yīng)用的感覺。注意，這種方式我們并不推薦所有網(wǎng)站使用，還是要看你自己的情況而定?！菊n題練

18、習(xí)1.2-2：錄入一個(gè)完整的移動(dòng)設(shè)備網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽】打開記事本，輸入如下標(biāo)簽： 這是一個(gè)完整的網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽 歡迎光臨我的網(wǎng)頁(yè)！其中主要是告訴各個(gè)瀏覽器用的這種字符集，如果沒(méi)有，那么瀏覽器就按各自默認(rèn)的字符來(lái)顯示，這樣各個(gè)瀏覽器顯示就可能不一樣了。聽講根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。90分鐘邊講邊練，完成理論知識(shí)的學(xué)習(xí)任務(wù)實(shí)施要求學(xué)生參考如下步驟完成任務(wù)：（教師巡視并輔導(dǎo)學(xué)生的

19、任務(wù)完成）（1）打開任務(wù)1中的index.html文件。（2）完成網(wǎng)頁(yè)廣告單頁(yè)HTML結(jié)構(gòu)的編寫。123456789101112131415161718 信息工程系 Copyright 2015 信息工程系.華南工業(yè)大學(xué) 學(xué)生在總結(jié)前面課堂練習(xí)知識(shí)的基礎(chǔ)上，參考教師提供的操作步驟（左邊）獨(dú)立完成任務(wù)的實(shí)施。60分鐘提供學(xué)生的知識(shí)遷移能力提高學(xué)生的自學(xué)能力和問(wèn)題解決能力任務(wù)總結(jié)1、HTML是網(wǎng)頁(yè)主要的組成部分，基本上每一個(gè)網(wǎng)頁(yè)都是由HTML語(yǔ)言組成的，所以要學(xué)習(xí)網(wǎng)站怎樣建設(shè)，必須從網(wǎng)頁(yè)的基本語(yǔ)言學(xué)起。2、HTML的結(jié)構(gòu)包括頭部（head）、主體（body）兩大部分，其中頭部描述瀏覽器所需的信息，

20、主體部分包含網(wǎng)頁(yè)所要說(shuō)明的具體內(nèi)容。3、根據(jù)學(xué)生任務(wù)完成的情況進(jìn)行總結(jié)。聽講根據(jù)教師的總結(jié)找出自己在任務(wù)完成時(shí)存在的不足。5分鐘總結(jié)任務(wù)并回顧教學(xué)目標(biāo)的知識(shí)和技能目標(biāo)任務(wù)評(píng)價(jià)評(píng)價(jià) 興趣 （不感興趣，沒(méi)學(xué)會(huì)） 學(xué)會(huì)（認(rèn)知） 【評(píng)價(jià)】9分鐘建立評(píng)價(jià)機(jī)制：自評(píng)作業(yè)布置通過(guò)查看源代碼的方式，查看部分網(wǎng)頁(yè)的內(nèi)容文本所使用的標(biāo)簽是否與我們所用的相同，不管是與不是，請(qǐng)將你查看的網(wǎng)頁(yè)代碼截圖發(fā)教師郵箱：理解作業(yè)要求1分鐘加強(qiáng)課堂知識(shí)的鞏固與遷移清潔整理、設(shè)備恢復(fù)和整理。、教學(xué)場(chǎng)地的清潔。、人走五關(guān)（關(guān)門、關(guān)窗、關(guān)燈、關(guān)風(fēng)扇，關(guān)電源）。清潔整理值日生打掃衛(wèi)生課后5分鐘清潔整理7.5.1-13-j-02課 程HT

21、ML5授課教師林曉儀課 題項(xiàng)目1制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容分課題任務(wù)1.3在網(wǎng)頁(yè)中添加表格和圖片授課班級(jí)16五年制電子商務(wù)（2）班授課日期2022.03.072022.03.09課時(shí)8課時(shí)學(xué)習(xí)目標(biāo)專業(yè)理論知識(shí)1、學(xué)生能夠說(shuō)出表格的三個(gè)基本標(biāo)簽2、學(xué)生能夠表述適合在網(wǎng)頁(yè)中使用的圖片格式實(shí)際操作技能1、學(xué)生能夠在網(wǎng)頁(yè)中使用表格標(biāo)簽對(duì)表格的數(shù)據(jù)結(jié)構(gòu)進(jìn)行編排，從而呈現(xiàn)數(shù)據(jù)間的關(guān)系2、學(xué)生能夠區(qū)分絕對(duì)路徑和相對(duì)路徑3、學(xué)生能夠在網(wǎng)頁(yè)中正確添加圖片4、學(xué)生能夠正確設(shè)置圖片屬性重 點(diǎn)能夠按要求在網(wǎng)頁(yè)中使用表格及正確添加圖片難 點(diǎn)學(xué)生能夠區(qū)分絕對(duì)路徑和相對(duì)路徑教學(xué)對(duì)象分析授課班級(jí)為16五年制電子商務(wù)2班，因之

22、前未學(xué)過(guò)網(wǎng)頁(yè)基礎(chǔ)知識(shí)，在教學(xué)時(shí)應(yīng)根據(jù)教學(xué)實(shí)際適當(dāng)調(diào)整教學(xué)進(jìn)度和教學(xué)內(nèi)容難度。教學(xué)場(chǎng)地與教具教學(xué)場(chǎng)地：機(jī)房 教具：計(jì)算機(jī)課后分析安全注意事項(xiàng)及其它說(shuō)明1、提醒學(xué)生注意用電安全。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。審閱簽名： 年 月 日教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說(shuō)明組織教學(xué)（課前5分鐘）1.嚴(yán)格遵守上下課時(shí)間，上課鈴響前走入班級(jí)。2.課堂教學(xué)所需的用具齊全。3.上課前要求學(xué)生準(zhǔn)備好學(xué)習(xí)用品，上課時(shí)保證學(xué)生全身心投入。 4.強(qiáng)調(diào)關(guān)鍵知識(shí)和方法，讓學(xué)生及時(shí)做好筆記。5.禁止在課堂上做一些與教學(xué)無(wú)關(guān)的事。1、提前5分鐘按照固定座位就坐；2、不帶食品飲料進(jìn)入教室（機(jī)房）；3、注意電腦接電用電安全。營(yíng)造上

23、課環(huán)境，保證用電安全項(xiàng)目引入 （5分鐘）1、回顧項(xiàng)目要求及上次課內(nèi)容（1）項(xiàng)目要求：完成一個(gè)簡(jiǎn)單網(wǎng)頁(yè)（2）上次課已完成任務(wù)：在網(wǎng)頁(yè)中添加了列表（復(fù)習(xí)并講解列表標(biāo)簽）2、明確本次任務(wù)在項(xiàng)目完成中的地位：（加為本次課任務(wù)）步驟一：制作網(wǎng)頁(yè)內(nèi)容（本項(xiàng)目（即項(xiàng)目一）任務(wù)1.1 安裝軟件并創(chuàng)建空白頁(yè)面任務(wù)1.2 在網(wǎng)頁(yè)中添加段落文字和列表任務(wù)1.3 在網(wǎng)頁(yè)中添加表格和圖片任務(wù)1.4 在網(wǎng)頁(yè)中添加超鏈接和表單步驟二：編輯內(nèi)容格式（項(xiàng)目二 使用CSS設(shè)置網(wǎng)頁(yè)格式）3、任務(wù)要求（1）根據(jù)百度搜索引擎網(wǎng)頁(yè)質(zhì)量白皮書效果圖，制作該白皮書中的表格。（2）根據(jù)“網(wǎng)頁(yè)廣告單頁(yè)”效果圖，添加該網(wǎng)頁(yè)中的相關(guān)圖片。1、與教師

24、共同回顧之前學(xué)過(guò)的內(nèi)容；2、明確本次課程的任務(wù)。1、明確本次課程要完成的任務(wù)在項(xiàng)目中的位置 2、明確本次課程任務(wù)要求預(yù)備知識(shí)1（100分鐘）預(yù)備知識(shí)1（100分鐘）預(yù)備知識(shí)1（100分鐘）預(yù)備知識(shí)1（100分鐘）預(yù)備知識(shí)1（100分鐘）表格的作用是組織信息。HTML表格就像是電子表格，由行和列構(gòu)成，每個(gè)表格單元格處于行和列的交匯處。表格由table元素來(lái)定義，以標(biāo)記開始，標(biāo)記結(jié)束。表格中的行以tr元素來(lái)定義，每一行都以標(biāo)記開始，標(biāo)記結(jié)束。表格中的單元格以td元素來(lái)定義，每個(gè)單元格都以標(biāo)記開始，標(biāo)記結(jié)束。表格單元格的可包含文本、圖片和其他的HTML元素。其語(yǔ)法形式如下： 單元格內(nèi)的文字 單元格內(nèi)

25、的文字 單元格內(nèi)的文字 單元格內(nèi)的文字 【課堂練習(xí)1.5-1創(chuàng)建簡(jiǎn)單的兩行兩列表格】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：1234567891011 A B C D 顯示效果如下：圖1.5-1簡(jiǎn)單的兩行兩列表格默認(rèn)情況下，表格沒(méi)有邊框線，可以使用樣式表為其定義邊框線，定義線條樣式，粗細(xì)和邊框顏色。這在后面的章節(jié)中會(huì)學(xué)到。1、表格的標(biāo)題（caption元素）每一個(gè)表格都可以通過(guò)caption元素來(lái)對(duì)表格的目的作一個(gè)簡(jiǎn)單的說(shuō)明，caption元素的內(nèi)容用來(lái)描述表格的特征，并且caption元素必須緊接著table元素開始標(biāo)簽后被定義，一個(gè)table元素中僅能包含一個(gè)c

26、aption元素。其語(yǔ)法形式如下： 東部地區(qū)的人均GDP增長(zhǎng) 【課堂練習(xí)1.5-2添加表格標(biāo)題】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：12345678910111213141516 東部地區(qū)的人均GDP增長(zhǎng) 第一季度 第二季度 第三季度 第四季度 20.4 27.4 90 20.4 顯示效果如下：圖1.5-2添加表格標(biāo)題3、表格的表頭（th元素）在表格中還有一種特殊的單元格，稱為表頭。表格的表頭一般位于第1行和第1列，用來(lái)配置列標(biāo)題或行標(biāo)題，用和標(biāo)簽來(lái)表示。表格的表頭與標(biāo)簽使用方法相同，但表頭元素中的文本居中和加粗顯示。其語(yǔ)法形式如下： 表格的表頭 表格的表頭 單

27、元格內(nèi)的文字 單元格內(nèi)的文字 【課堂練習(xí)1.5-3添加表格表頭】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：123456789101112131415161718 部分地區(qū)常住人口數(shù)據(jù)統(tǒng)計(jì) 部分地區(qū) 北京 天津 河北 山東 人數(shù) 1962368 12938224 71854202 95793065 顯示效果如下：圖1.5-3添加表格表頭4、跨多行、多列的單元格單元格可以跨越多個(gè)豎列或橫行的多個(gè)單元格，跨越豎列或橫行的數(shù)量通過(guò)colspan或rowspan屬性來(lái)對(duì)th或td元素進(jìn)行設(shè)置。（1）colspan屬性指定單元格所占的列數(shù)。其語(yǔ)法形式如下：（2）rowspan屬性

28、指定單元格所占的行數(shù)。其語(yǔ)法形式如下：根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成使用Visual Studio Code軟件制作一個(gè)含有標(biāo)題標(biāo)簽網(wǎng)頁(yè)的課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成使用Visual Studio Code軟件制作一個(gè)含有段落標(biāo)簽網(wǎng)頁(yè)的課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成使用Visual Studio Code軟件制作一個(gè)含有段落標(biāo)簽網(wǎng)頁(yè)的課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成使用Visual Studio Code軟件制作一個(gè)含有段落標(biāo)簽網(wǎng)頁(yè)的課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟

29、和講解，獨(dú)立完成使用Visual Studio Code軟件制作一個(gè)含有段落標(biāo)簽網(wǎng)頁(yè)的課堂練習(xí)，并測(cè)試代碼。邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)任務(wù)實(shí)施1（88分鐘）布置學(xué)生完成如下任務(wù)：（巡視并輔導(dǎo)學(xué)生的任務(wù)完成）（1）打開任務(wù)4中的index.html文件（2）完成網(wǎng)頁(yè)廣告單頁(yè)中表格顯示效果學(xué)生在總結(jié)前面課堂練習(xí)知識(shí)的基礎(chǔ)上，獨(dú)立完成任務(wù)的實(shí)施。1、提供學(xué)生的知識(shí)遷移能力；2、提高學(xué)生的自學(xué)能力和問(wèn)題解決能力任務(wù)回顧1（5分鐘）在日常生活中，我們對(duì)表格式數(shù)據(jù)已經(jīng)很熟悉了。這種數(shù)據(jù)有多種形

30、式，如財(cái)務(wù)數(shù)據(jù)、調(diào)查數(shù)據(jù)、事件日歷、公交時(shí)刻表、電視節(jié)目等。在大多數(shù)情況下，這類信息都會(huì)使用表格來(lái)進(jìn)行表示。表格由行和列構(gòu)成，就像是電子表格。它是一行一行編碼的，類似的，一行中的單元格也是一個(gè)一個(gè)編碼的。聽講根據(jù)教師的總結(jié)找出自己在任務(wù)完成時(shí)存在的不足?？偨Y(jié)任務(wù)預(yù)備知識(shí)2（100分鐘）預(yù)備知識(shí)2（100分鐘）預(yù)備知識(shí)2（100分鐘）預(yù)備知識(shí)2（100分鐘）1、圖像格式每天在網(wǎng)絡(luò)上交流的計(jì)算機(jī)數(shù)不勝數(shù)，因此使用的圖像格式一定要能夠被每一個(gè)操作平臺(tái)所接受。GIF、JPEG和PNG是最適合在網(wǎng)頁(yè)中使用的文件格式。（1）GIF格式。GIF格式采用LZW壓縮，是以壓縮相同顏色的色塊來(lái)減少圖像的大小。由于

31、LZW壓縮，不會(huì)造成任何品質(zhì)上的損失而且壓縮效率高，再加上GIF在各種平臺(tái)上都可使用，所以很適合在互聯(lián)網(wǎng)上使用，但GIF只能處理256色。GIF格式適合商標(biāo)、新聞式的標(biāo)題或其他小于256色的圖像。（2）JPEG格式。JPEG格式通常用來(lái)保存超過(guò)256色的圖像格式。JPEG的壓縮過(guò)程會(huì)造成一些圖像數(shù)據(jù)的損失，所造成的“損失”是剔除一些視覺上不容易察覺的部分。如果剔除適當(dāng)，視覺上不但能夠接受，而且圖像的壓縮效率也會(huì)提高，而使圖像文件變??；反之，剔除太多圖像，則會(huì)造成圖像過(guò)度失真。對(duì)于照片這類全彩的圖像通常都以JPEG格式來(lái)進(jìn)行壓縮。（3）PNG格式。PNG圖像是指“可移植網(wǎng)絡(luò)圖形”，它提供了將圖像

32、文件以最小的方式壓縮卻又不造成圖像失真的技術(shù)。不僅具備了GIF圖像格式的大部分優(yōu)點(diǎn)，而且還支持48bit的色彩，更快的交錯(cuò)顯示，跨平臺(tái)的圖像亮度控制，更多層的透明度設(shè)置，結(jié)合了GIF和JPEG圖片的優(yōu)勢(shì)，是GIF格式的很好替代品。表1.3-2圖片文件類型對(duì)比圖片類型擴(kuò)展名壓縮透明動(dòng)畫顏色GIF.gif有損支持支持256JPEG.jpg或.jpeg有損不支持不支持1000萬(wàn)以上PNG.png有損支持不支持1000萬(wàn)以上2、圖片標(biāo)簽img 有了圖像文件后，就可以使用標(biāo)簽將圖片添加到網(wǎng)頁(yè)中，從而達(dá)到美化頁(yè)面的效果。img元素為空元素，在HTML文件中沒(méi)有終止標(biāo)簽，但在XHTML文件中必須在起始標(biāo)簽右

33、括號(hào)前加上一個(gè)右斜線“/”作結(jié)束，或?qū)mg元素也加上終止標(biāo)簽。其語(yǔ)法形式如下：說(shuō)明：在該語(yǔ)法中，src參數(shù)用來(lái)設(shè)置圖像文件所在的路徑，這一路徑可以是絕對(duì)路徑，也可以是相對(duì)路徑。3、設(shè)置圖片屬性（1）圖片的幅面大小（width屬性和height屬性）在網(wǎng)頁(yè)中直接添加圖片時(shí)，圖片的大小和原圖是相同的。而在實(shí)際應(yīng)用時(shí)，可以通過(guò)width屬性和height屬性分別設(shè)置圖片的寬度和高度。其語(yǔ)法形式如下：【課堂練習(xí)1.6-2設(shè)置圖片大小】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：12顯示效果如下： 圖1.6-2設(shè)置圖片大小也可以使用百分比作為width屬性和height屬性值，

34、例如下面的代碼將圖片縮放到原始尺寸的50%。但一般情況下，我們不建議使用該方法，而是使用樣式表為其定義圖片的width屬性和height屬性。這在后面的章節(jié)中會(huì)學(xué)到。（2） 圖片的說(shuō)明（title元素）title屬性是對(duì)圖片的文字說(shuō)明，如果把鼠標(biāo)放在圖片上稍作停留，title屬性的值就會(huì)以浮動(dòng)的形式顯示出來(lái)；在瀏覽器尚未完全讀入圖像時(shí)，在圖像位置處會(huì)顯示該文字說(shuō)明。其語(yǔ)法形式如下：【課堂練習(xí)1.6-3添加圖片說(shuō)明】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：1顯示效果如下：圖1.6-3添加圖片說(shuō)明（3）圖片的備用說(shuō)明（alt屬性）alt屬性用于添加的圖片不存在的情況，或

35、者一些用戶為了提高瀏覽速度而關(guān)閉了圖片下載，alt的作用很重要，它的內(nèi)容會(huì)顯示在瀏覽器中，搜索引擎（如百度、谷歌）一般以title和alt作為圖片的描述關(guān)鍵字計(jì)入網(wǎng)頁(yè)權(quán)重。其語(yǔ)法形式如下：【課堂練習(xí)1.6-4添加圖片的備用說(shuō)明】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：1顯示效果如下： 圖1.6-4添加圖片備用說(shuō)明根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成使用Visual Studio Code軟件制作一個(gè)含有換行標(biāo)簽網(wǎng)頁(yè)的課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成使用Visual Studio Code軟件制作一個(gè)含有強(qiáng)調(diào)標(biāo)簽網(wǎng)頁(yè)的課堂練習(xí)，并

36、測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成使用Visual Studio Code軟件制作一個(gè)含有上標(biāo)及下標(biāo)標(biāo)簽網(wǎng)頁(yè)的課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成使用Visual Studio Code軟件制作一個(gè)含有特殊符號(hào)標(biāo)簽網(wǎng)頁(yè)的課堂練習(xí)，并測(cè)試代碼。邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)任務(wù)實(shí)施2（87分鐘）布置學(xué)生完成如下任務(wù)：（巡視并輔導(dǎo)學(xué)生的任務(wù)完成）（1）打開任務(wù)5中的index.html文件。（2）完成網(wǎng)頁(yè)廣告單頁(yè)中圖片顯示效果。學(xué)生在總結(jié)前面課堂練習(xí)知識(shí)的基礎(chǔ)上，獨(dú)立完成

37、任務(wù)的實(shí)施。1、提供學(xué)生的知識(shí)遷移能力2、提高學(xué)生的自學(xué)能力和問(wèn)題解決能力任務(wù)回顧2（5分鐘）文本使網(wǎng)頁(yè)的內(nèi)容得到充實(shí)，圖片使網(wǎng)頁(yè)的內(nèi)容更加豐富多彩。使用圖片不僅能使網(wǎng)頁(yè)更加美觀、大方、整潔、形象和生動(dòng)，而且能給網(wǎng)頁(yè)增添無(wú)限生機(jī)，從而吸引更多的瀏覽者。因此圖片在網(wǎng)頁(yè)中的作用是舉足輕重的。添加圖片使用標(biāo)簽，該標(biāo)簽放在要顯示圖片的位置，使用src屬性指定圖片源文件所在的路徑。聽講根據(jù)教師的總結(jié)找出自己在任務(wù)完成時(shí)存在的不足?？偨Y(jié)任務(wù)總結(jié)評(píng)價(jià)（9分鐘）1、總結(jié)回顧網(wǎng)頁(yè)中常用于菜單欄的有序列表、無(wú)序列表的使用回顧網(wǎng)頁(yè)中較常見的表格標(biāo)簽2、評(píng)價(jià) 興趣 （不感興趣，沒(méi)學(xué)會(huì)） 學(xué)會(huì)（認(rèn)知） 聽講評(píng)價(jià)1、回顧

38、教學(xué)目標(biāo)的知識(shí)和技能目標(biāo)2、建立評(píng)價(jià)機(jī)制：自評(píng)作業(yè)布置（1分鐘）通過(guò)查看源代碼的方式，查看部分網(wǎng)頁(yè)的列表和表格所使用的標(biāo)簽是否與我們所用的相同，不管是與不是，請(qǐng)將你查看的網(wǎng)頁(yè)代碼截圖發(fā)教師郵箱：理解作業(yè)要求拓展課外知識(shí)清潔整理（課后5分鐘）、設(shè)備恢復(fù)和整理。、教學(xué)場(chǎng)地的清潔。、人走五關(guān)（關(guān)門、關(guān)窗、關(guān)燈、關(guān)風(fēng)扇，關(guān)電源）。清潔整理值日生打掃衛(wèi)生清潔整理7.5.1-13-j-02課 程HTML5授課教師林曉儀課 題項(xiàng)目1制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容分課題任務(wù)1.4在網(wǎng)頁(yè)中添加表單授課班級(jí)16五年制電子商務(wù)（2）班授課日期2022.03.142022.03.16課時(shí)8課時(shí)學(xué)習(xí)目標(biāo)專業(yè)理論知識(shí)1、學(xué)生

39、能夠敘述表單與控件的關(guān)系實(shí)際操作技能1、能夠在網(wǎng)頁(yè)中添加表單2、能夠正確使用各個(gè)控件重 點(diǎn)能夠按要求在網(wǎng)頁(yè)中使用正確使用各個(gè)控件難 點(diǎn)表單與控件的關(guān)系教學(xué)對(duì)象分析授課班級(jí)為15五年制電子商務(wù)2班，因之前已學(xué)過(guò)網(wǎng)頁(yè)基礎(chǔ)知識(shí)，對(duì)網(wǎng)頁(yè)有一定的了解，在教學(xué)時(shí)應(yīng)根據(jù)教學(xué)實(shí)際適當(dāng)調(diào)整教學(xué)進(jìn)度和教學(xué)內(nèi)容難度。教學(xué)場(chǎng)地與教具教學(xué)場(chǎng)地：機(jī)房 教具：計(jì)算機(jī)課后分析安全注意事項(xiàng)及其它說(shuō)明1、提醒學(xué)生注意用電安全。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。審閱簽名： 年 月 日教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說(shuō)明組織教學(xué)（課前5分鐘）1.嚴(yán)格遵守上下課時(shí)間，上課鈴響前走入班級(jí)。2.課堂教學(xué)所需的用具齊全。3.上課前要求學(xué)生準(zhǔn)備

40、好學(xué)習(xí)用品，上課時(shí)保證學(xué)生全身心投入。 4.強(qiáng)調(diào)關(guān)鍵知識(shí)和方法，讓學(xué)生及時(shí)做好筆記。5.禁止在課堂上做一些與教學(xué)無(wú)關(guān)的事。1、提前5分鐘按照固定座位就坐；2、不帶食品飲料進(jìn)入教室（機(jī)房）；3、注意電腦接電用電安全。營(yíng)造上課環(huán)境，保證用電安全項(xiàng)目引入 （5分鐘）1、回顧項(xiàng)目要求及上次課內(nèi)容（1）項(xiàng)目要求：完成一個(gè)簡(jiǎn)單網(wǎng)頁(yè)（2）上次課已完成任務(wù)：在網(wǎng)頁(yè)中添加了圖片及超鏈接（復(fù)習(xí)并講解圖片和超鏈接標(biāo)簽）2、明確本次任務(wù)在項(xiàng)目完成中的地位：（加為本次課任務(wù)）步驟一：制作網(wǎng)頁(yè)內(nèi)容（本項(xiàng)目（即項(xiàng)目一）任務(wù)1.1 安裝軟件并創(chuàng)建空白頁(yè)面任務(wù)1.2 在網(wǎng)頁(yè)中添加段落文字和列表任務(wù)1.3 在網(wǎng)頁(yè)中添加表格和圖片

41、任務(wù)1.4 在網(wǎng)頁(yè)中添加超鏈接和表單步驟二：編輯內(nèi)容格式（項(xiàng)目二 使用CSS設(shè)置網(wǎng)頁(yè)格式）3、任務(wù)要求（1）根據(jù)百度搜索引擎網(wǎng)頁(yè)質(zhì)量白皮書效果圖，制作該白皮書中的表格。（2）根據(jù)“網(wǎng)頁(yè)廣告單頁(yè)”效果圖，添加該網(wǎng)頁(yè)中的相關(guān)圖片。1、與教師共同回顧之前學(xué)過(guò)的內(nèi)容；2、明確本次課程的任務(wù)。1、明確本次課程要完成的任務(wù)在項(xiàng)目中的位置 2、明確本次課程任務(wù)要求預(yù)備知識(shí)1（100分鐘）預(yù)備知識(shí)1（100分鐘）預(yù)備知識(shí)1（100分鐘）預(yù)備知識(shí)1（100分鐘）預(yù)備知識(shí)1（100分鐘）HTML表單主要用來(lái)收集客戶端提供的相關(guān)信息，使網(wǎng)頁(yè)具有交互的功能。一般地，網(wǎng)站管理者要實(shí)現(xiàn)與瀏覽者之間的溝通，就必須借助于表單

42、這個(gè)橋梁。表單通常的應(yīng)用是調(diào)查表、訂單和搜索界面等。1、表單標(biāo)簽在HTML中，標(biāo)簽用來(lái)創(chuàng)建一個(gè)表單，即定義表單的開始位置和結(jié)束位置。在標(biāo)記中，可以設(shè)置表單的基本屬性，包括表單的名稱、處理程序、傳送方法等。2、使用input元素創(chuàng)建表單控件input元素可以定義大多數(shù)類型的控件，控件的類型取決于type的屬性值，不同的值對(duì)應(yīng)不同的表單控件（默認(rèn)值為text），如表1.8-1所示。表1.8-1 表單Type屬性Type取值取值的含義顯示效果text文字字段password密碼域，輸入的數(shù)據(jù)用星號(hào)表示radio單選按鈕checkbox復(fù)選項(xiàng)button普通按鈕submit提交按鈕，將把數(shù)據(jù)發(fā)送到服務(wù)

43、器reset重置按鈕，將重置表單數(shù)據(jù)，以便重新輸入image圖像域，也稱為圖像提交按鈕file文件域（1）文字字段text在網(wǎng)頁(yè)中最常見的是文本字段的表單，如網(wǎng)頁(yè)的用戶登錄區(qū)。將input元素的type屬性的屬性值設(shè)置為text，就可以創(chuàng)建一個(gè)普通文本框。其語(yǔ)法形式如下：【課堂練習(xí)1.8-2在表單中添加文字字段】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：下面是幾種不同屬性的文本框： 姓名：愛好：個(gè)人主頁(yè)：效果顯示如下： 圖1.8-1在表單中添加文字字段（2）密碼域password將input元素的type屬性的屬性值設(shè)置為password，就會(huì)創(chuàng)建一個(gè)密碼文本框。它在

44、網(wǎng)頁(yè)中的效果和文字字段相同，只是當(dāng)用戶輸入文字時(shí)，這些文字只顯示“*”。其語(yǔ)法形式如下：在該語(yǔ)法中的參數(shù)的含義和text文字字段的參數(shù)一樣?！菊n堂練習(xí)1.8-3在表單中添加密碼域】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：1234567891下面是幾種不同效果的密碼域： 登錄密碼： 支付密碼： 原始密碼： 效果顯示如下：圖1.8-2在表單中添加密碼域（3）單選按鈕radio單選按鈕代表互相排斥的選擇，在頁(yè)面中以圓框表示。radio控件中必須要設(shè)置value的值。而對(duì)于一個(gè)選擇中的所有單選按鈕來(lái)說(shuō)，往往要設(shè)定同樣一個(gè)名稱，這樣在傳遞時(shí)才能更好地對(duì)某一個(gè)選擇內(nèi)容的取值進(jìn)行

45、判斷。其語(yǔ)法形式如下：在該語(yǔ)法中，checked屬性表示這一單選按鈕默認(rèn)被選中，在一個(gè)單選框中只能有一項(xiàng)單選按鈕控件設(shè)置為checked；value屬性用來(lái)設(shè)置用戶選中該項(xiàng)目后，傳送到處理程序中的值?！菊n堂練習(xí)1.8-4在表單中添加單選按鈕】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：1234567891請(qǐng)選擇一項(xiàng)你喜愛的運(yùn)動(dòng)： 羽毛球 籃球 足球 效果顯示如下：圖1.8-3在表單中添加單選按鈕（4）復(fù)選框checkbox復(fù)選框允許在一組選項(xiàng)中選擇多個(gè)選項(xiàng)，用戶可以選擇任意多個(gè)適用的選項(xiàng)。在頁(yè)面中以方框表示。其語(yǔ)法形式如下：在該語(yǔ)法中，checkbox參數(shù)表示該選項(xiàng)在默

46、認(rèn)情況下已經(jīng)被選中，一個(gè)選擇中可以有多個(gè)復(fù)選框被選中?！菊n堂練習(xí)1.8-5在表單中添加復(fù)選框】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：1234567891請(qǐng)選擇你喜愛的運(yùn)動(dòng)： 羽毛球 籃球 足球 效果顯示如下：圖1.8-4在表單中添加復(fù)選框根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成使用課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。邊講邊練

47、，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)任務(wù)實(shí)施1（88分鐘）布置學(xué)生完成如下任務(wù)：（巡視并輔導(dǎo)學(xué)生的任務(wù)完成）（1）打開任務(wù)3中的index.html文件（2）完成網(wǎng)頁(yè)廣告單頁(yè)中表單顯示效果學(xué)生在總結(jié)前面課堂練習(xí)知識(shí)的基礎(chǔ)上，獨(dú)立完成任務(wù)的實(shí)施。1、提供學(xué)生的知識(shí)遷移能力；2、提高學(xué)生的自學(xué)能力和問(wèn)題解決能力任務(wù)回顧1（5分鐘）在日常生活中，我們對(duì)表格式數(shù)據(jù)已經(jīng)很熟悉了。這種數(shù)據(jù)有多種形式，如財(cái)務(wù)數(shù)據(jù)、調(diào)查數(shù)據(jù)、事件日歷、公交時(shí)刻表、電視節(jié)目等。在大多數(shù)情況下，這類信息都會(huì)使用表格來(lái)進(jìn)行表示。表格由行

48、和列構(gòu)成，就像是電子表格。它是一行一行編碼的，類似的，一行中的單元格也是一個(gè)一個(gè)編碼的。聽講根據(jù)教師的總結(jié)找出自己在任務(wù)完成時(shí)存在的不足?？偨Y(jié)任務(wù)預(yù)備知識(shí)2（100分鐘）預(yù)備知識(shí)2（100分鐘）預(yù)備知識(shí)2（100分鐘）預(yù)備知識(shí)2（100分鐘）3、使用select元素創(chuàng)建表單控件輸入類的控件一般以標(biāo)簽開始，說(shuō)明該控件需要用戶的輸入；而菜單類則以標(biāo)簽開始，表示用戶需要選擇。（1）下拉菜單下拉菜單在正常狀態(tài)下只顯示一個(gè)選項(xiàng)，單擊按鈕打開菜單后才會(huì)看到全部的選項(xiàng)，是一種最節(jié)省頁(yè)面空間的選擇方式。其語(yǔ)法形式如下： 選項(xiàng)顯示內(nèi)容 選項(xiàng)顯示內(nèi)容 在該語(yǔ)法中，選項(xiàng)值是提交表單時(shí)的值，而選項(xiàng)顯示內(nèi)容才是真正在頁(yè)

49、面中顯示的選項(xiàng)。Selected表示該選項(xiàng)在默認(rèn)情況下是選中的，一個(gè)下拉菜單中只能有一項(xiàng)默認(rèn)被選中?！菊n堂練習(xí)1.8-8添加下拉列表】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：1234567891證件類型：身份證學(xué)生證駕駛證其他證件顯示效果如下：圖1.8-7添加下拉列表（2）列表項(xiàng)列表項(xiàng)的設(shè)置方法與下拉菜單類似，不同的是列表項(xiàng)在頁(yè)面中可以顯示出多條信息，一旦超出這個(gè)信息數(shù)量，在列表項(xiàng)右側(cè)會(huì)出現(xiàn)滾動(dòng)條，拖動(dòng)滾動(dòng)條能看到所有的選項(xiàng)。其語(yǔ)法形式如下： 選項(xiàng)顯示內(nèi)容 選項(xiàng)顯示內(nèi)容 【課堂練習(xí)1.8-9添加列表項(xiàng)】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代

50、碼：1234567891 證件類型：身份證 學(xué)生證駕駛證其他證件顯示效果如下： 圖1.8-8添加列表項(xiàng)4 創(chuàng)建文本域除了以上的兩大類控件外，還有一種特殊定義的文本樣式，稱為文字域或文本域，它與文字字段的區(qū)別在于可以添加多行的文字，從而輸入更多的文本內(nèi)容。這類控件在一些留言板中最常見。其語(yǔ)法形式如下：在該語(yǔ)法中，rows是指文本域的行數(shù)，也就是高度值，當(dāng)文本內(nèi)容超出這一范圍時(shí)會(huì)出現(xiàn)滾動(dòng)條；cols設(shè)置文本域的列數(shù)，也就是其寬度?！菊n堂練習(xí)1.8-10添加文件域】打開Visual Studio Code軟件，在標(biāo)簽中輸入如下代碼：12345 留言：顯示效果如下： 圖1.8-9添加文件域根據(jù)教師的課

51、堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)邊講邊練，完成理論知識(shí)的學(xué)習(xí)任務(wù)實(shí)施2（87分鐘）布置學(xué)生完成如下任務(wù)：（巡視并輔導(dǎo)學(xué)生的任務(wù)完成）（1）打開任務(wù)5中的index.html文件。（2）完成網(wǎng)頁(yè)廣告單頁(yè)中表單顯示效果。學(xué)生在總結(jié)前面課堂練習(xí)知識(shí)的基礎(chǔ)上，獨(dú)立完成任務(wù)的實(shí)施。1、提供學(xué)生的知識(shí)遷移能力2、提高學(xué)生的自學(xué)能力和問(wèn)題解決能力任務(wù)回顧2（5分鐘）每當(dāng)使用搜索引

52、擎、下訂單或者加入郵件列表時(shí)，都是在使用表單。表單是一個(gè)HTML元素，它用于包含和組織稱為表單控件的對(duì)象比如文本框、復(fù)選框和按鈕，并從網(wǎng)站訪問(wèn)者那里接收信息。聽講根據(jù)教師的總結(jié)找出自己在任務(wù)完成時(shí)存在的不足?？偨Y(jié)任務(wù)總結(jié)評(píng)價(jià)（9分鐘）1、總結(jié)回顧網(wǎng)頁(yè)中表單的應(yīng)用2、評(píng)價(jià) 興趣 （不感興趣，沒(méi)學(xué)會(huì)） 學(xué)會(huì)（認(rèn)知） 聽講評(píng)價(jià)1、回顧教學(xué)目標(biāo)的知識(shí)和技能目標(biāo)2、建立評(píng)價(jià)機(jī)制：自評(píng)作業(yè)布置（1分鐘）通過(guò)查看源代碼的方式，查看部分網(wǎng)頁(yè)的列表和表格所使用的標(biāo)簽是否與我們所用的相同，不管是與不是，請(qǐng)將你查看的網(wǎng)頁(yè)代碼截圖發(fā)教師郵箱：理解作業(yè)要求拓展課外知識(shí)清潔整理（課后5分鐘）、設(shè)備恢復(fù)和整理。、教學(xué)場(chǎng)地的

53、清潔。、人走五關(guān)（關(guān)門、關(guān)窗、關(guān)燈、關(guān)風(fēng)扇，關(guān)電源）。清潔整理值日生打掃衛(wèi)生清潔整理7.5.1-13-j-02課 程HTML5+CSS3網(wǎng)頁(yè)布局授課教師林曉儀課 題項(xiàng)目2制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容分課題任務(wù)1 將CSS樣式表引入文件授課班級(jí)16五年制電子商務(wù)（2）班授課日期2022.03.282022.03.30課時(shí)16課時(shí)學(xué)習(xí)目標(biāo)專業(yè)理論知識(shí)學(xué)生能夠明白使用CSS樣式表的原因?qū)嶋H操作技能1、掌握CSS樣式表的使用方法，能正確按語(yǔ)法格式進(jìn)行編寫；2、能使用CSS標(biāo)簽選擇符選擇目標(biāo)標(biāo)簽，掌握樣式效果的語(yǔ)法格式；3、能使用CSS設(shè)置文字的大小、顏色和加粗效果。重 點(diǎn)CSS樣式表的使用方法難 點(diǎn)CS

54、S樣式表兩種添加方法的區(qū)別教學(xué)對(duì)象分析授課班級(jí)為16五年制電子商務(wù)2班，因之前未學(xué)過(guò)網(wǎng)頁(yè)基礎(chǔ)知識(shí)，對(duì)網(wǎng)頁(yè)制作無(wú)基礎(chǔ)，在教學(xué)時(shí)應(yīng)根據(jù)教學(xué)實(shí)際適當(dāng)調(diào)整教學(xué)進(jìn)度和教學(xué)內(nèi)容難度。教學(xué)場(chǎng)地與教具教學(xué)場(chǎng)地：機(jī)房 教具：計(jì)算機(jī)課后分析安全注意事項(xiàng)及其它說(shuō)明1、提醒學(xué)生注意用電安全。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。審閱簽名： 年 月 日教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說(shuō)明組織教學(xué)（課前5分鐘）1.嚴(yán)格遵守上下課時(shí)間，上課鈴響前走入班級(jí)。2.課堂教學(xué)所需的用具齊全。3.上課前要求學(xué)生準(zhǔn)備好學(xué)習(xí)用品，上課時(shí)保證學(xué)生全身心投入。 4.強(qiáng)調(diào)關(guān)鍵知識(shí)和方法，讓學(xué)生及時(shí)做好筆記。5.禁止在課堂上做一些與教學(xué)無(wú)關(guān)的事。1、

55、提前5分鐘按照固定座位就坐；2、不帶食品飲料進(jìn)入教室（機(jī)房）；3、注意電腦接電用電安全。營(yíng)造上課環(huán)境，保證用電安全項(xiàng)目引入 （5分鐘）1、回顧項(xiàng)目要求及上次課內(nèi)容（1）項(xiàng)目要求：完成一個(gè)簡(jiǎn)單網(wǎng)頁(yè)（2）上次課已完成任務(wù)：在網(wǎng)頁(yè)中添加了列表（復(fù)習(xí)并講解列表標(biāo)簽）2、明確本次任務(wù)在項(xiàng)目完成中的地位：（加為本次課任務(wù)）步驟一：制作網(wǎng)頁(yè)內(nèi)容（本項(xiàng)目（即項(xiàng)目一）步驟二：編輯內(nèi)容格式（項(xiàng)目二 使用CSS設(shè)置網(wǎng)頁(yè)格式）任務(wù)1 將CSS樣式表引入文件任務(wù)2 使用CSS設(shè)置段落文字格式任務(wù)3 使用CSS實(shí)現(xiàn)網(wǎng)頁(yè)布局任務(wù)4 將使用CSS背景美化網(wǎng)頁(yè)標(biāo)簽任務(wù)5 使用CSS設(shè)置列表格式、超鏈接效果任務(wù)6 使用CSS邊框

56、設(shè)置表格格式任務(wù)7 使用CSS美化表單3、任務(wù)要求承接上一項(xiàng)目的結(jié)果，現(xiàn)在開始逐步為系部宣傳網(wǎng)頁(yè)添加CSS樣式效果。先通過(guò)本任務(wù)學(xué)習(xí)到的標(biāo)簽選擇符、文字基本樣式為網(wǎng)頁(yè)的文字設(shè)置部分效果。1、與教師共同回顧之前學(xué)過(guò)的內(nèi)容；2、明確本次課程的任務(wù)。1、明確本次課程要完成的任務(wù)在項(xiàng)目中的位置 2、明確本次課程任務(wù)要求預(yù)備知識(shí)1預(yù)備知識(shí)1預(yù)備知識(shí)1預(yù)備知識(shí)1認(rèn)識(shí)CSSCSS（層疊樣式表）是控制標(biāo)簽樣式的樣式代碼，所有標(biāo)簽都可添加CSS用于控制它們的樣式效果。CSS的特點(diǎn)是樣式代碼和標(biāo)簽代碼是分離的，并且同一個(gè)樣式可為多個(gè)標(biāo)簽同時(shí)使用，減少了標(biāo)簽部分的代碼量，也減少了以后修改代碼要花費(fèi)的時(shí)間。如下例代碼

57、5-10行為CSS的樣式代碼，代碼15行為css設(shè)置的對(duì)象。12345678910111314151617Document.targetCSS樣式font-size: 20px;color: #F00;css的設(shè)置對(duì)象CSS的添加方法（兩種方法）方法1嵌入式：將CSS樣式代碼寫在標(biāo)簽之間，并且需要使用標(biāo)簽包括，格式如下：1234567Document/*CSS樣式代碼的編寫位置*/在內(nèi)添加CSS樣式代碼，格式如下：“選擇符”用于設(shè)置樣式應(yīng)用的標(biāo)簽對(duì)象，大括號(hào) 內(nèi)編寫具體的樣式效果。樣式效果的格式為“屬性名: 值 ;”，可設(shè)置多條，每條需要以“分號(hào);”結(jié)尾，多條樣式效果可分行書寫，也可都寫于一行

58、。另外CSS的注釋格式為“/* 注釋 */”。12345678選擇符1 color: red ;/* 文字紅色 */屬性2: 值 ;/* 注釋信息 */屬性3: 值 ;選擇符2 樣式效果 方法2外聯(lián)式：將CSS的樣式代碼寫到一個(gè)獨(dú)立的文本文件中，并修改文件的擴(kuò)展名為.css，在網(wǎng)頁(yè)文件的部分通過(guò)標(biāo)簽引用該文件到網(wǎng)頁(yè)中使用，格式如下：CSS樣式文件.css12div font-size: 16px; color: #F9F; 選擇符2 樣式效果 網(wǎng)頁(yè)文件.html12345Document代碼中，href屬性需要填寫CSS文件的引用地址，可以填寫相對(duì)或絕對(duì)地址，其余部分為固定代碼。在編寫整個(gè)網(wǎng)站

59、的CSS樣式時(shí)，建議使用外聯(lián)式，可使網(wǎng)頁(yè)文件與CSS樣式文件分開，方便閱讀和管理。同一個(gè)樣式文件可被多個(gè)網(wǎng)頁(yè)使用，同一個(gè)網(wǎng)頁(yè)文件也能引用多個(gè)樣式文件，提高了代碼的復(fù)用性?！菊n堂練習(xí)2.1-1使用CSS設(shè)置h1-h6標(biāo)簽的文字顏色，h6文字設(shè)置斜體】編輯器，輸入如下標(biāo)簽：12345678910111213141516Document我是h1我是h2我是h3我是h4我是h5我是h6在標(biāo)簽內(nèi)添加下面的CSS樣式代碼，為不同類型的標(biāo)簽設(shè)置不同的文字顏色。12345678h1 color: #f00; /* 標(biāo)簽的文字顏色為紅色 */h2 color: #d22; h3 color: #b44; h4

60、color: #966; h5 color: #788; h6 color: #5aa; font-style: italic; /* 文字斜體 */CSS選擇符CSS選擇符用于指定樣式設(shè)置對(duì)應(yīng)的目標(biāo)，CSS選擇符寫法多樣，可針對(duì)同種標(biāo)簽進(jìn)行統(tǒng)一設(shè)置，也可針對(duì)指定標(biāo)簽進(jìn)行設(shè)置。這里先介紹“標(biāo)簽選擇符”的用法，選擇符名稱使用標(biāo)簽名（如上一練習(xí)的h1、h2）命名，對(duì)網(wǎng)頁(yè)中所有相同類型的標(biāo)簽進(jìn)行統(tǒng)一設(shè)置。12345div font-size: 20px; color: #0f0; /* 設(shè)置所有div標(biāo)簽 */p font-size: 16px; color: #f00; /* 設(shè)置所有p標(biāo)簽 */