一體化全書教案完整版教學(xué)設(shè)計(jì)

一體化全書教案完整版教學(xué)設(shè)計(jì)課程HTML5授課教師林曉儀課題工程1制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容分課題任務(wù)1.3在網(wǎng)頁(yè)中添加段落、文字和列表授課班級(jí)16五年制電子商務(wù)2班授課日期課時(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é)過網(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ī)房教具：計(jì)算機(jī)課后分析平安注意事項(xiàng)及其它說明1、提醒學(xué)生注意用電平安。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。審閱簽名:年月日教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明3、根據(jù)學(xué)生任務(wù)完成的情況進(jìn)行總結(jié)。任務(wù)評(píng)價(jià)評(píng)價(jià)【評(píng)價(jià)】9分鐘建立評(píng)價(jià)機(jī)制：自評(píng)（不修興理，沒學(xué)會(huì)）1興趣?學(xué)會(huì)（認(rèn)知）業(yè)置作布通過查看源代碼的方式，查看局部網(wǎng)頁(yè)的內(nèi)容文本所使用的標(biāo)簽是否與我們所用的相同，不管是與不是，請(qǐng)將你查看的網(wǎng)頁(yè)代碼截圖發(fā)教師郵箱：理解作業(yè)要求1分鐘加強(qiáng)課堂知識(shí)的鞏固與遷移潔理清整1、設(shè)備恢復(fù)和整理。2、教學(xué)場(chǎng)地的清潔。3、人走五關(guān)（關(guān)門、關(guān)窗、關(guān)燈、關(guān)風(fēng)扇，關(guān)電源）。清潔整理值日生清掃衛(wèi)生課后5分鐘清潔整理工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)任務(wù)1.2在網(wǎng)頁(yè)中添加段落和文字教學(xué)過程

教學(xué)過程教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明也可使用指定方向的4種關(guān)鍵詞。該值為選填，不填寫時(shí)漸變方向默認(rèn)為從上到下。數(shù)值參數(shù)：如Odeg漸變方向從下到上，45deg方向從左下到右上，90deg從左到右。toleft：設(shè)置漸變?yōu)閺挠业阶螅喈?dāng)于270degtoright：設(shè)置漸變從左到右，相當(dāng)于90degtotop：設(shè)置漸變從下到上，相當(dāng)于Odegtobottom：設(shè)置漸變從上到下。相當(dāng)于180deg。（默認(rèn)值，等同于留空不寫）顏色位置值：顏色值決定顏色的漸變順序，可以填寫多個(gè)顏色值，使用逗號(hào)分隔。位置值使用百分比為數(shù)值，決定當(dāng)前顏色在漸變方向上的位置。如“#f000%,#0f050%,#00f100%”的意義是起始位置紅色，中間綠色，結(jié)束位置藍(lán)色。如果位置值不填寫，顏色將從0%-100%平均分配位置,如“#f00,#0f0用00f”作用等同于“#foo0%,#0f050%,#00f100%”。>ackground：Linear-gradient#333,#fff)-12-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)八一備注說明分配background：1inear-gradient(

toright,#99920%,#fff50%,#99980%教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)八一備注說明分配background：1inear-gradient(

toright,#99920%,#fff50%,#99980%XJZ?SJZooOasdao,a，daseaaa5dgbgbgb4rrrbackground:1inear-gradient(-45deg；#9990%,#99975%,#fff90%,#999100%說明：linear-gradient。是作為圖片添加到背景中，而不是背景顏色,所以linear-gradient()不能和url()一起使用，但可以和背景顏色#FFO一起使用，如：-13-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明錯(cuò)誤寫法：background:linear-gradient(#fff,#333z#fff)url(img/test.png);正確寫法：background:linear-gradient(#fffz#333,#fff)#FFO;【課堂練習(xí)2.4-3制作新聞標(biāo)題的漸變色背景】為練習(xí)2.4-2的新聞標(biāo)題設(shè)置漸變色背景，漸變方向從左向右，顏色白色，透明度從100%漸變到0%,如下列圖：「臺(tái)風(fēng)〃尼伯特”登陸臺(tái)灣為1949年以來最強(qiáng)初臺(tái)V中國(guó)天氣網(wǎng)訊今年第1號(hào)臺(tái)風(fēng)“尼伯特”于今天(8日)5時(shí)5吩以超強(qiáng)臺(tái)下要控制透明度的漸變需要使用rgba()色，控制最后一個(gè)透明度參數(shù)的變化。漸變的參數(shù)可不填寫，默認(rèn)從標(biāo)簽的開頭位置漸變到尾部。CSS.mainh2{background:linear-gradient(toright,rgba(255,255,255,1),rgba(255,255,255,0));padding:5px;}2)徑向漸變色：radial-gradient()產(chǎn)生圓形或橢圓形的漸變效果，漸變顏色從圓心向外發(fā)散式漸變。語法：radial-gradient(漸變形狀漸變半徑at圓心坐標(biāo)，顏色1位置，顏色2位置，……)-14-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明取值范圍：漸變形狀：決定徑向漸變的形狀，有兩個(gè)關(guān)鍵詞參數(shù)，circle（圓形）、ellipse（橢圓形）。漸變半徑：決定徑向漸變的半徑長(zhǎng)度，設(shè)置circle（圓形）時(shí)使用一個(gè)參數(shù)，設(shè)置ellipse（橢圓形）時(shí)使用兩個(gè)個(gè)參數(shù)，如“circlelOOpx”、“ellipselOOpx200px”。也使用關(guān)鍵詞決定半徑取值，如下：closest-side：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊closest-corner：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角farthest-side：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊f(xié)arthest-corner：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角圓心坐標(biāo)：決定圓的圓心坐標(biāo)，前面固定添加at,可以使用px、%單位的數(shù)值，也可使用left、center、right、top、bottom方位關(guān)鍵詞，圓心坐標(biāo)有兩個(gè)參數(shù)（橫向和縱向坐標(biāo)），如果只寫一個(gè)，第二個(gè)默認(rèn)為center0顏色位置值：用法與linear-gradient一樣，決定漸變顏色的順序和位置，具體使用不再介紹。說明：“漸變形狀漸變半徑at圓心坐標(biāo)”3個(gè)參數(shù)可選填，不填寫有以下效果：不設(shè)置“漸變半徑”將默認(rèn)取值為farthest-corner；不設(shè)置“漸變形狀”，“漸變半徑”只填寫一個(gè)半徑值，“潮變形狀”取值為circle,其余情況都取值ellipse；-15-教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間

分配備注說明■不設(shè)置“at圓心坐標(biāo)”，那么默認(rèn)取值為center。-16-教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間

分配備注說明漸變效果還有下面兩種，可以重復(fù)漸變的效果:漸變顏色值作用-17-教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明repeating-1inear-gradient()重復(fù)的線性漸變r(jià)epeating-radial-gradient()重復(fù)的徑向漸變?nèi)蝿?wù)實(shí)施要求學(xué)生參考如下步驟完成任務(wù)：（教師巡視并輔導(dǎo)學(xué)生的任務(wù)完成）為系部宣傳網(wǎng)頁(yè)的home、services,team模塊設(shè)置對(duì)應(yīng)的背景樣式。home模塊使用圖片aheader_bg.jpg"為背景，圖片自動(dòng)縮放填充滿整個(gè)模塊。services、team模塊使用圖片“bg.jpg”為背景,背景相對(duì)于瀏覽器窗口固定，不隨滾動(dòng)條移動(dòng)，圖片自動(dòng)縮放填充滿整個(gè)窗口。修改水平線＜hr＞的效果，使用漸變色為背景，制作出中間深兩側(cè)淺的水平線效果。1）修改上一任務(wù)中home模塊臨時(shí)設(shè)置的背景樣式，使用圖片為背景，設(shè)置cover的大小縮放方式以適應(yīng)模塊的區(qū)域，圖片頂部居中放置。原本的背景色可同時(shí)添加，如果因網(wǎng)絡(luò)問題讀取不到圖片時(shí)，可作為臨時(shí)的背景。CSS.home{/*原本的設(shè)置background:#24B0DA;*/background:url（../img/header_bg.jpg）topcenter/coverS24B0DA;}效果學(xué)生在總結(jié)前面課堂練習(xí)知識(shí)的基礎(chǔ)上，參考教師提供的操作步驟（左邊）獨(dú)立完成任務(wù)的實(shí)施。7、提供學(xué)生的知識(shí)遷移能力8、提高學(xué)生的自學(xué)能力和問題解決能力-18-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明2)同樣修改servi置背景相對(duì)位置為fixecss.services,/*原;backgiS24B0DA;)效果ces、team模塊的背景樣式，使td其余設(shè)置與上一步操作相同c.team{本的設(shè)置background:#24B0DA;-ound:url(../img/bg.jpg)top目圖片為背景，設(shè)*/center/coverfixed-19-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明本科專業(yè)介紹優(yōu)秀本科畢'也生口前我校的信息工程系主要開設(shè)有計(jì)算機(jī)科學(xué)。技術(shù)、網(wǎng)絡(luò)工程、軟件工程三個(gè)專業(yè).其中計(jì)算機(jī)科學(xué)與技術(shù)又分為嵌入式方向和物聯(lián)網(wǎng)方向.計(jì)算機(jī)科學(xué)與技術(shù)本專業(yè)分為嵌入式和物聯(lián)M兩個(gè)方向?主要的培養(yǎng)口標(biāo)是致力「培養(yǎng)具有扎實(shí)的嵌入式、物W網(wǎng)AS礎(chǔ)理論,熟練運(yùn)用開發(fā)技術(shù)和工具，在通信、信圮家電、工業(yè)控制、移動(dòng)計(jì)算設(shè)備、網(wǎng)絡(luò)設(shè)法等領(lǐng)域從事產(chǎn)品開發(fā)、產(chǎn)品測(cè)試、維護(hù)等方面的高索質(zhì)專C人才.演趙文我校計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)畢業(yè)生?2005年畢業(yè)后任職睛訊公司，現(xiàn)為阿里.巴巴某部門經(jīng)用.3)將水平線＜hr＞標(biāo)簽修改為如下列圖效果。由于＜hr＞標(biāo)簽原本的線條效果由邊框線(border)構(gòu)成，現(xiàn)在需要清除掉該邊框，再通過背景的方式加入漸變效果。￥下面通過CSS為＜hr＞追加新的樣式：hr(/*省略已有的其它設(shè)置*/border:0;/*清除邊框*/height:3px;/*添加hr的高度，即水平線的高度*/background:linear-gradient(-20-教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間

分配備注說明6toright,7rgba(0,0,0,0)0%,8rgba(0,0,0,0.1)30%,9rgba(0,0,0,0.1)70%,10rgba(0,0,0,0)100%11）；/*顏色黑色，通過透明度控制漸變*/12)4）水平線在藍(lán)色背景的模塊下還有一種效果，如下列圖。由于這些模塊的標(biāo)簽都有添加class="white”,所以可以設(shè)置在“white〃內(nèi)的所有<hr>將采用另一種漸變樣式。1123456789.whitehr{background:linear-gradient(toright,rgba(255,255,255,0)0%,rgba(255,255,255,0.3)30%,rgba(255,255,255,0.3)70%,rgba(255,255,255,0)100%);/*顏色白色，通過透明度控制漸變*/}-21-工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程審閱簽名：年月日

課程HTML5課師授教林曉儀課題工程1制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容分課題任務(wù)1.2創(chuàng)立空白網(wǎng)頁(yè)授課班級(jí)16五年制電子商務(wù)2班授課日期課時(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、能夠使用VisualStudioCode新建和保存頁(yè)面重點(diǎn)HTML基本的標(biāo)簽語法難點(diǎn)HTML5新增結(jié)構(gòu)標(biāo)簽教學(xué)對(duì)象分析授課班級(jí)為15五年制電子商務(wù)2班，因之前已學(xué)過網(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ī)房教具：計(jì)算機(jī)課后分析平安注意事項(xiàng)及其它說明1、提醒學(xué)生注意用電平安。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明務(wù)結(jié)任總.CSS的background相關(guān)屬性為標(biāo)簽設(shè)置背景顏色。.屬性background-repeat等設(shè)置背景圖片的樣式效果。.顏色值radial-gradient等為背景添加漸變色效果。聽講根據(jù)教師的總結(jié)找出自己在任務(wù)完成時(shí)存在的缺乏。5分鐘總結(jié)任務(wù)并回顧教學(xué)目標(biāo)的知識(shí)和技能目標(biāo)評(píng)價(jià)V（不感興趣，沒學(xué)會(huì)）k興趣【評(píng)價(jià)】9分鐘建立評(píng)價(jià)機(jī)制：自評(píng)V》學(xué)會(huì)（認(rèn)知）作業(yè)布置通過查看源代碼的方式，查看局部網(wǎng)頁(yè)所使用的標(biāo)簽和樣式是否與我們所用的相同。理解作業(yè)要求1分鐘清潔整理潔理清整1、設(shè)備恢復(fù)和整理。2、教學(xué)場(chǎng)地的清潔。3、人走五關(guān)（關(guān)門、關(guān)窗、關(guān)燈、關(guān)風(fēng)扇，關(guān)電源）。清潔整理值日生清掃衛(wèi)生課后5分鐘-22-教學(xué)過程課程HTML5+CSS3網(wǎng)頁(yè)布局授課教師林曉儀課題工程2使用CSS設(shè)置網(wǎng)頁(yè)格式分課題任務(wù)5使用CSS設(shè)置列表格式、超鏈接效果授課班級(jí)16中級(jí)電子商務(wù)（2）班授課日期2022.5.16-2022.5.25課時(shí)16課時(shí)學(xué)習(xí)目標(biāo)業(yè)論識(shí)專理知1、學(xué)生能夠陳述列表的默認(rèn)樣式2、學(xué)生能夠陳述偽類選擇符的特點(diǎn)實(shí)際操作技能1>能使用list-style-type>list-style-image>list-style-position屬性設(shè)置列表標(biāo)簽的樣式，熟悉列表元素標(biāo)簽的特點(diǎn)。2、掌握4種CSS偽類選擇符的使用：：link、：visited、：hover、：active。能制作出標(biāo)簽在不同狀態(tài)下改變樣式的效果。3、能使用偽類選擇符制作導(dǎo)航欄當(dāng)鼠標(biāo)接觸時(shí)下拉顯示的效果。重點(diǎn)1、使用屬性設(shè)置列表標(biāo)簽的樣式2、4種CSS偽類選擇符的使用：:link>:visited>:hover、:activeo難點(diǎn)使用偽類選擇符制作導(dǎo)航欄當(dāng)鼠標(biāo)接觸時(shí)下拉顯示的效教學(xué)對(duì)象分析授課班級(jí)為16電子商務(wù)2班，屬于初中起點(diǎn)班級(jí)，因之前未學(xué)過網(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ī)房教具：計(jì)算機(jī)課后分析平安注意事項(xiàng)及其它說明1、提醒學(xué)生注意用電平安。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。審閱簽名：年月日教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明織學(xué)組教.嚴(yán)格遵守上下課時(shí)間，上課鈴響前走入班級(jí)。.課堂教學(xué)所需的用具齊全。.上課前要求學(xué)生準(zhǔn)備好學(xué)習(xí)用品，上課時(shí)保證學(xué)生全身心投入。.強(qiáng)調(diào)關(guān)鍵知識(shí)和方法，讓學(xué)生及時(shí)做好筆記。.禁止在課堂上做一些與教學(xué)無關(guān)的事。1、提前5分鐘按照固定座位就坐；2、‘不帶食品飲料進(jìn)入教室（機(jī)房）；3、注意電腦接電用電平安。營(yíng)造上課環(huán)境，保證用電平安任務(wù)引入1、回顧工程要求及上次課內(nèi)容（1）工程要求：完成一個(gè)簡(jiǎn)單網(wǎng)頁(yè)（2）上次課已完成任務(wù)：制作網(wǎng)頁(yè)內(nèi)容（復(fù)習(xí)并講解網(wǎng)頁(yè)的結(jié)構(gòu)）2、明確本次任務(wù)在工程完成中的地位：（加▲為本次課任務(wù)）工程2制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容任務(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邊框設(shè)置表格格式任務(wù)7使用CSS美化表單3、任務(wù)要求設(shè)置系部宣傳網(wǎng)頁(yè)頭部的導(dǎo)航欄局部，導(dǎo)航欄的列表內(nèi)容默認(rèn)隱敏不可見，當(dāng)鼠標(biāo)接觸導(dǎo)航欄的圖標(biāo)時(shí)，列表內(nèi)容將自動(dòng)顯示，相反鼠標(biāo)離開時(shí)自動(dòng)隱藏。并對(duì)導(dǎo)航欄中的列表標(biāo)簽進(jìn)行樣式設(shè)置和排版。與教師共同分析任務(wù)的實(shí)施步驟。1、回顧工程及上一次課程內(nèi)容2、明確本次課程要完成的任務(wù)在工程中的位置3、明確本次課程任務(wù)要求工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)任務(wù)1.8在網(wǎng)頁(yè)中添加表單-1-教學(xué)過程教學(xué)過程教學(xué)過程

工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明預(yù)備知識(shí)【教師講解理論知識(shí)，操作并演示課程練習(xí)，在學(xué)生操作課堂練習(xí)時(shí)巡視并輔導(dǎo)學(xué)生完成】1、列表標(biāo)簽的樣式設(shè)置列表標(biāo)簽的特點(diǎn)是＜li＞標(biāo)簽會(huì)自帶標(biāo)記符號(hào)，＜li＞標(biāo)簽?zāi)芡ㄟ^CSS控制其標(biāo)記的樣式效果。1）標(biāo)記樣式：list-style-type語法：list-style-type:標(biāo)記關(guān)鍵詞；取值范圍：disc|circle|square|decimal|lower-roman|upper-roman|disc：實(shí)心圓（默認(rèn)）circle：空心圓square：實(shí)心方塊decimal：阿拉伯?dāng)?shù)字lower-roman：小寫羅馬數(shù)字upper-roman：大寫羅馬數(shù)字lower-alpha：小寫英文字母upper-alpha：大寫英文字母none：不使用工程符號(hào)其它關(guān)鍵詞：armenian、cjk-ideographic、georgian、ower-greek＞hebrew、hiragana、hiragana-iroha＞katakana＞katakana-irohalower-latin^upper-latin說明：設(shè)置為disc、circle＞square可使用固定的符號(hào)作為標(biāo)簽的標(biāo)記；none可去除掉標(biāo)記，這時(shí)＜li＞標(biāo)簽相當(dāng)于＜div＞標(biāo)簽的效果；設(shè)置其它的關(guān)鍵詞將顯示對(duì)應(yīng)的序列符號(hào)，如a、b^c、o2、聽講，理解CSS樣式修改網(wǎng)頁(yè)文字格式及段落格式的方法邊講邊練，完成理論知識(shí)的學(xué)習(xí)任務(wù)1.8在網(wǎng)頁(yè)中添加表單-2-教學(xué)過程

工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明list-style-tvpe:square;列表項(xiàng)列表項(xiàng)列表項(xiàng)列表項(xiàng)list-style-type:upper-alpha;A.列表項(xiàng)B.列表項(xiàng)C.列表項(xiàng)D.列表項(xiàng)list-style-type:decimal;.列表項(xiàng).列表項(xiàng).列表項(xiàng).列表項(xiàng)list-style-tvpe:none;列表項(xiàng)列表項(xiàng)列表項(xiàng)列表項(xiàng)2)圖片標(biāo)記：list-style-image語法：list-style-image:url(圖片路徑);取值范圍：url()：與設(shè)置背景圖片類似，在()中填入圖片路徑，使用圖片代替標(biāo)記符號(hào)，也可填寫none代表不設(shè)置圖片。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。任務(wù)1.8在網(wǎng)頁(yè)中添加表單-3-教學(xué)過程

工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明說明：設(shè)置了該屬性后，list-style-type屬性將會(huì)無效。選取的圖片無法縮放大小，所以請(qǐng)選擇與文字行高近似的圖片。list-style-image:url（img/ico_list.png）;列表項(xiàng)列表項(xiàng)列表項(xiàng)列表項(xiàng)3）標(biāo)記位置：list-style-position語法：list-style-position:位置關(guān)鍵詞；取值范圍：outside|insideoutside：標(biāo)記放置在＜li＞標(biāo)簽以外，不占用網(wǎng)頁(yè)空間（默認(rèn)）inside：標(biāo)記放置在＜li＞標(biāo)簽以內(nèi)，且與文本環(huán)繞排列下面的例子中，淺色背景為＜3＞標(biāo)簽的范圍，深色背景為＜li＞標(biāo)簽的范圍，注意兩個(gè)參數(shù)的區(qū)別：list-style-position:outside;列表項(xiàng)列表項(xiàng)列表項(xiàng)列友項(xiàng)list-stvle-position:inside;?列表項(xiàng)列表項(xiàng)列表項(xiàng)列式項(xiàng)【課堂練習(xí)2.5-1結(jié)合圖片素材制作如下列圖效果的列表樣式】16xl6px根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。任務(wù)1.8在網(wǎng)頁(yè)中添加表單-4-教學(xué)過程

工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明茴歐美電影商日本電影商國(guó)產(chǎn)電影■商電影短片4)標(biāo)記的綜合設(shè)置：list-style語法：list-style:標(biāo)記樣式標(biāo)記位置標(biāo)記圖片；說明：將上述的3種屬性綜合的寫法，每個(gè)參數(shù)都可選填，不填寫的參數(shù)自動(dòng)使用默認(rèn)值，即“discoutsidenone"。參數(shù)的順序不能改變，否那么設(shè)置無效。list-style:decimalinsideurl(imgico_list.png);?列表項(xiàng)?列表項(xiàng)?列表項(xiàng)?列表項(xiàng)list-style:decimalinside;.列表項(xiàng).列表項(xiàng).列表項(xiàng).列表項(xiàng)list-style:url(imgico_list.png);列表項(xiàng)列表項(xiàng)列表項(xiàng)列表項(xiàng)根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。任務(wù)1.8在網(wǎng)頁(yè)中添加表單-5-教學(xué)過程

工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明2、列表標(biāo)簽的標(biāo)簽類型列表標(biāo)簽由組合而成，<li>標(biāo)簽的排列特性近似于<div>等塊元素標(biāo)簽，但它自帶標(biāo)記內(nèi)容，屬于“列表元素(list-item)"。<3>標(biāo)簽不屬于“列表元素”，而是塊元素標(biāo)簽，特點(diǎn)是自帶左填充的間距，用于放置<1i>標(biāo)簽的標(biāo)記。所以<li>標(biāo)簽脫離了<ul>標(biāo)簽也能正常使用，或者將<3>標(biāo)簽的填充清除，將<li>標(biāo)簽的標(biāo)記設(shè)置為不使用，這時(shí)<ulxli>標(biāo)簽和<div>標(biāo)簽沒有區(qū)別。例：使用列表標(biāo)簽制作水平排列的標(biāo)簽樣式html<ul><li>列表項(xiàng)</li><li>列表項(xiàng)</li><li>列表項(xiàng)</li><li>列表項(xiàng)</li></ul>cssul{padding:0;}/*清除左側(cè)多余的填充間距*/ulli{list-style:none;/*不使用標(biāo)記*/float:left;width:80px;margin:5px;background:#eee;)效果任務(wù)1.8在網(wǎng)頁(yè)中添加表單-6-教學(xué)過程

工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明列表項(xiàng)列表項(xiàng)列表項(xiàng)列表項(xiàng)相反的，使用其它標(biāo)簽并修改為“列表元素(list-item)”，一樣可制作出列表效果。例：使用<span>標(biāo)簽制作列表樣式效果html<span>span標(biāo)簽〈/span)<span>span標(biāo)簽</span><span>span標(biāo)簽</span><span>span標(biāo)簽〈/span〉cssspan{display:list-item;/*改變標(biāo)簽類型*/list-style:circleinside;}效果ospan標(biāo)簽ospan標(biāo)簽ospan標(biāo)簽ospan標(biāo)簽【課堂練習(xí)2.5-2制作如下列圖效果的二級(jí)列表樣式】任務(wù)1.8在網(wǎng)頁(yè)中添加表單教學(xué)過程教學(xué)過程教學(xué)過程

工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明.文字樣式font-sizefont-weightcolor??????.文本樣式text-aligntext-indent??????.布局樣式widthheightmargin??????4.3、使用偽類選擇符設(shè)置標(biāo)簽不同狀態(tài)下的效果<a>超鏈接標(biāo)簽一共有4種狀態(tài)：未訪問、已訪問、鼠標(biāo)懸停、被點(diǎn)住?？赏ㄟ^CSS為這4種狀態(tài)設(shè)置不同的樣式效果，使標(biāo)簽根據(jù)鼠標(biāo)不同的操作呈現(xiàn)不同的效果。未訪問已訪問鼠標(biāo)懸停被點(diǎn)住要實(shí)現(xiàn)上面的效果，需要使用css的偽類選擇符。偽類選擇符以“冒號(hào)：”的形式附加在通常選擇符的后面，為選擇符附加特定的選擇條件。上面4種狀態(tài)的偽類選擇符如下：也偽類選擇符語法作用選擇符：link當(dāng)前選擇符中未被訪問過的標(biāo)簽選擇符：visited當(dāng)前選擇符中已被訪問過的標(biāo)簽選擇符：hover當(dāng)前選擇符中被鼠標(biāo)懸停的標(biāo)簽任務(wù)1.8在網(wǎng)頁(yè)中添加表單-8-教學(xué)過程

工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明織學(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é)生訪問查閱。1、提前5分鐘按照固定座位就坐；2、不帶食品飲料進(jìn)入教室（機(jī)房）；3、開機(jī)，配置好IP地址，確保紅蜘蛛軟件運(yùn)行并鏈接教師機(jī)，同時(shí)能夠訪問英特網(wǎng)；4、注意電腦接電用電平安。課前5分鐘營(yíng)造上課環(huán)境，保證用電平安任務(wù)引入1、講解現(xiàn)實(shí)生活中網(wǎng)頁(yè)制作的用處，明白本門課程的作用2、明確本次任務(wù)在工程完成中的地位：（加▲為本次課任務(wù)）步驟一：制作一個(gè)網(wǎng)頁(yè)廣告單頁(yè)的內(nèi)容（本工程（即工程一））任務(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è)中添加超鏈接任務(wù)8在網(wǎng)頁(yè)中添加表單3、任務(wù)要求使用VisualStudioCode新建并保存一個(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（HyperTextMark-upLanguage,超文本標(biāo)記語言或超文本鏈接標(biāo)示語言），是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說聽講90分鐘邊講邊練，完成理論知識(shí)的學(xué)習(xí)任務(wù)1.2在網(wǎng)頁(yè)中添加段落和文字-1-教學(xué)過程

工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明選擇符：active當(dāng)前選擇符中被鼠標(biāo)點(diǎn)住的標(biāo)簽上面的效果可使用CSS寫為：a:link（color:#333;}/*未訪問的鏈接樣式*/a:visited{color:#999;}/*已訪問的鏈接樣式*/a:hover{/*被鼠標(biāo)懸停的鏈接樣式*/font-weight:bold;font-size:20px;color:#FF7F00;}a:active{color:#fOO;}/*被鼠標(biāo)點(diǎn)住的鏈接樣式*/超鏈接標(biāo)簽不一定要設(shè)置所有的偽類樣式，可選擇需要的狀態(tài)效果進(jìn)行設(shè)置,但設(shè)置的順序必須按link、visited^hover、active的順序排列，否那么局部效果會(huì)不生效。不設(shè)置的偽類狀態(tài)可使用一般的選擇符a{}代替，代表超鏈接的默認(rèn)使用效果，如下面的例子：atcolor:#333;}/*未訪問和鼠標(biāo)懸停默認(rèn)采用該設(shè)置*/a:visited{color:#9991）/*己訪問的鏈接樣式*/a:active{color:#f00;}/*被鼠標(biāo)點(diǎn)住的鏈接樣式*/除了＜a＞標(biāo)簽外，其余的標(biāo)簽也能設(shè)置偽類效果，但上述4種偽類中只有鼠標(biāo)懸停（hover）有效。在設(shè)置時(shí)先通過普通的選擇符設(shè)置出標(biāo)簽的默認(rèn)狀態(tài)，再通過hover選擇符設(shè)置出鼠標(biāo)接觸時(shí)標(biāo)簽發(fā)生改變的樣式屬性例：【課堂練習(xí)2.5-1】為例，添加鼠標(biāo)接觸＜li＞標(biāo)簽時(shí)，改變樣式的效果：CSS1.listli{任務(wù)1.8在網(wǎng)頁(yè)中添加表單-9-教學(xué)過程教學(xué)過程工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程任務(wù)1.8在網(wǎng)頁(yè)中添加表單教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明/*保持原本的設(shè)置*/}.list1i:hover{/*鼠標(biāo)接觸時(shí)改變的樣式*/padding-left:20px;background:#305363;color:#fff;line-height:2em;list-style:squareinsidenone;/*最后一個(gè)none為了取消圖片標(biāo)記*/)效果歐美電影【課堂練習(xí)2.5-3使用＜a＞標(biāo)簽制作如下列圖效果的菜單欄】HOMESERVICESPORTFOLIO先設(shè)置默認(rèn)的超鏈接樣式，添加左浮動(dòng)使其水平排列，通過寬高、間距等屬性控制超鏈接的大小。任務(wù)

實(shí)施要求學(xué)生參考如下步驟完成任務(wù)：（教師巡視并輔導(dǎo)學(xué)生的任務(wù)完成）在第3任務(wù)

實(shí)施要求學(xué)生參考如下步驟完成任務(wù)：（教師巡視并輔導(dǎo)學(xué)生的任務(wù)完成）在第3個(gè)任務(wù)的操作中，系部宣傳網(wǎng)頁(yè)頭部的導(dǎo)航欄局部（＜nav＞學(xué)生在總結(jié)前面課堂練習(xí)知識(shí)的基礎(chǔ)上，參考教師提供的操作步驟（左邊）獨(dú)立完成任務(wù)的實(shí)9、提供學(xué)生的知識(shí)遷移能力-io-工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程任務(wù)1.8在網(wǎng)頁(yè)中添加表單教學(xué)工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程任務(wù)1.8在網(wǎng)頁(yè)中添加表單教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明10、提高學(xué)生

的自學(xué)能力和

問題解決能力10、提高學(xué)生

的自學(xué)能力和

問題解決能力標(biāo)簽）被設(shè)置為隱藏，現(xiàn)在修改該局部的設(shè)置，實(shí)現(xiàn)如下列圖10、提高學(xué)生

的自學(xué)能力和

問題解決能力置導(dǎo)航欄＜nav＞為一小塊區(qū)域放置在頭部的右側(cè)，當(dāng)鼠標(biāo)接觸時(shí)將顯示它內(nèi)部的列表內(nèi)容，該內(nèi)容將在網(wǎng)頁(yè)頭部的下方顯示，當(dāng)鼠標(biāo)離開時(shí)該內(nèi)容也自動(dòng)隱藏。信息工程系鼠標(biāo)接觸顯示導(dǎo)航欄-11-教學(xué)過程工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明任務(wù)回顧列表有默認(rèn)樣式，但有些樣式是我們不需要的，即ul和ol的左邊內(nèi)留白在這個(gè)工程中都不需要，所以我們可以簡(jiǎn)化CSS樣式，提取中相同的局部單獨(dú)羅列。聽講根據(jù)教師的總結(jié)找出自己在任務(wù)完成時(shí)存在的缺乏?？偨Y(jié)任務(wù)ul{padding：Opx;}總結(jié)評(píng)價(jià)1、總結(jié)?列表的默認(rèn)樣式■根據(jù)要求設(shè)置列表的本2、評(píng)價(jià)i（不感興趣.沒學(xué)會(huì)）各式1興趣聽講【評(píng)價(jià)】①回顧教學(xué)目標(biāo)的知識(shí)和技能目標(biāo)②建立評(píng)價(jià)機(jī)制：自評(píng)V“學(xué)會(huì)（認(rèn)知）V作業(yè)布置通過查看源代碼的方式，查看局部網(wǎng)頁(yè)的圖片和超鏈接所使用的標(biāo)簽是否與我們所用的相同，不管是與不是，請(qǐng)將你查看的網(wǎng)頁(yè)代碼截圖發(fā)教師郵箱：理解作業(yè)要求加強(qiáng)課堂知識(shí)的鞏固與遷移清潔整理1、設(shè)備恢復(fù)和整理。2、教學(xué)場(chǎng)地的清潔。3、人走五關(guān)（關(guān)門、關(guān)窗、關(guān)燈、關(guān)風(fēng)扇，關(guān)電源）。清潔整理值日生清掃衛(wèi)生清潔整理任務(wù)1.8在網(wǎng)頁(yè)中添加表單-12-

工程1工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)教學(xué)過程課程HTML5+CSS3網(wǎng)頁(yè)布局授課教師林曉儀課題工程2使用CSS設(shè)置網(wǎng)頁(yè)格式分課題任務(wù)6使用CSS邊框設(shè)置表格格式授課班級(jí)16五年制電子商務(wù)2班授課日期2022-05-302022-06-01課時(shí)16學(xué)習(xí)目標(biāo)專業(yè)理論知識(shí).能表達(dá)各種標(biāo)簽邊框樣式的屬性和特點(diǎn)。.能表達(dá)2種table布局方式的特點(diǎn)。實(shí)際操作技能1、能使用border等相關(guān)屬性設(shè)置標(biāo)簽的邊框樣式。2、能使用屬性border-radius、box-shadow、outline制作各種標(biāo)簽輪廓效果。3、能使用屬性border-spacing、border-collapse、table-layout設(shè)置表格樣式。4、能使用偽類選擇符“child”選擇指定位置的標(biāo)簽。重點(diǎn)L使用border屬性設(shè)置標(biāo)簽邊框2.使用偽類選擇符“child”選擇指定位置的標(biāo)簽難點(diǎn)1.table-layout屬性兩個(gè)參數(shù)的區(qū)別教學(xué)對(duì)象分析授課班級(jí)為16五年制電子商務(wù)2班，因之前未學(xué)過網(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)及其它說明1、提醒學(xué)生注意用電平安。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。審閱簽名:年月日

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明組織教學(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é)生訪問查閱。1、提前5分鐘按照固定座位就坐；2、‘不帶食品飲料進(jìn)入教室（機(jī)房）；3、開機(jī)，配置好IP地址，確保紅蜘蛛軟件運(yùn)行并鏈接教師機(jī)，同時(shí)能夠訪問英特網(wǎng)；4、注意電腦接電用電平安。營(yíng)造上課環(huán)境，保證用電平安任務(wù)引入為系部宣傳網(wǎng)頁(yè)局部圖片、標(biāo)簽設(shè)置邊框線，設(shè)置標(biāo)簽的圓角效果。為“本科生招生計(jì)劃〃的表格設(shè)置間隔行背景色，完善其它表格樣式的設(shè)置。與教師共同回顧之前學(xué)過的內(nèi)容。理解本次課程任務(wù)要求1、明確本次課程要完成的任務(wù)在工程中的位置2、明確本次課程任務(wù)要求預(yù)備知識(shí)【教師講解理論知識(shí)，操作并演示課程練習(xí)，在學(xué)生操作課堂練習(xí)時(shí)巡視并輔導(dǎo)學(xué)生完成】1、標(biāo)簽的邊框樣式設(shè)置在任務(wù)3中學(xué)習(xí)過標(biāo)簽占用網(wǎng)頁(yè)空間由寬度、高度、邊界、填充、邊框5種屬性決定，現(xiàn)在學(xué)習(xí)最后一種“邊框（border）”，邊框介于邊界和填充之間，分上右下左4個(gè)方向，可設(shè)置多種樣式效果。1）邊框樣式：border語法：border:邊框樣式寬度顏色；取值范圍：聽講聽講邊講邊練，完成理論知識(shí)的學(xué)習(xí)-1-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明邊框樣式使用下面的關(guān)鍵詞，產(chǎn)生不同的邊框效果：■none|hidden：無邊框■dotted：點(diǎn)狀邊框■dashed：虛線邊框■solid：實(shí)線邊框?qū)挾?px、％等長(zhǎng)度單位的參數(shù)值顏色：十六進(jìn)制色、rgba色等顏色值說明：border為標(biāo)簽的4個(gè)方向產(chǎn)生相同樣式的邊框，3個(gè)參數(shù)的順序可以隨意調(diào)整，'邊框樣式”是必填參數(shù)，不填寫無邊框效果；“寬聽講度”、“顏色”不填寫時(shí)，默認(rèn)為3Px和黑色。2）邊框樣式的單獨(dú)設(shè)置border屬性是對(duì)邊框的統(tǒng)一設(shè)置，如果需要針對(duì)邊框樣式或?qū)挾然蝾伾M(jìn)行單獨(dú)設(shè)置，再或者針對(duì)上右下左4個(gè)方向設(shè)置不同的邊框，可使用下面的邊框相關(guān)屬性：聽講邊框?qū)傩宰饔胋order-width邊框?qū)挾?，可針?duì)4個(gè)方向分別設(shè)置border-style邊框樣式，可針對(duì)4個(gè)方向分別設(shè)置border-color邊框顏色，可針對(duì)4個(gè)方向分別設(shè)置border-top上邊框樣式，參數(shù)寫法與border一樣border-right右邊框樣式，參數(shù)寫法與border一樣border-bottom下邊框樣式，參數(shù)寫法與border一樣border-left左邊框樣式，參數(shù)寫法與border一樣屬性border-widthsborder-style^border-color可填寫1至4個(gè)參-2-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明數(shù)，依次對(duì)上右下左4個(gè)方向進(jìn)行設(shè)置。根據(jù)填寫參數(shù)的數(shù)量的不同，效果有所區(qū)別，具體參考margin參數(shù)的寫法，效果如下：■border-style:solid;Iborder-width:5pxlOpx;卜;屬性border-top、border-right>border-bottom^border-left單獨(dú)針對(duì)某一方向的邊框進(jìn)行設(shè)置，上圖的效果也可寫為：Iborder-top:solid5px#f00;Iborder-right:solidlOpx#ffO;Iborder-bottom:solid5px#0cc;[borderTeft:solidlOpx#909;2、標(biāo)簽輪廓的樣式設(shè)置除了邊框?qū)傩?，影響?biāo)簽輪廓效果的還有border-radius（圓角邊框）、box-shadow（標(biāo)簽陰影）、outline（輪廓），這3個(gè)屬性的特點(diǎn)是不會(huì)對(duì)標(biāo)簽的空間排版產(chǎn)生任何影響，即使屬性產(chǎn)生的效果超出了標(biāo)簽的范圍，也不會(huì)占用任何網(wǎng)頁(yè)空間。1）圓角邊框：border-radius語法：border-radius:圓角的半徑（1-4個(gè)參數(shù)）；border-radius:水平方1可四個(gè)角的半徑/垂直方向-3-教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明四個(gè)角的半徑；取值范圍：PX、％等長(zhǎng)度單位的圓角半徑值，以％為單位時(shí),圓角分別以標(biāo)簽的寬度和長(zhǎng)度為參考，換算出圓角的水平半徑和垂直半徑，圓角可能會(huì)呈現(xiàn)出橢圓效果。四個(gè)角的半徑；四個(gè)角的半徑；取值范圍：PX、％等長(zhǎng)度單位的圓角半徑值，以％為單位時(shí),圓角分別以標(biāo)簽的寬度和長(zhǎng)度為參考，換算出圓角的水平半徑和垂直半徑，圓角可能會(huì)呈現(xiàn)出橢圓效果。2）標(biāo)簽陰影：2）標(biāo)簽陰影：box-shadow語法：box-shadow:陰影的水平位置垂直位置模糊范圍陰影尺寸陰影顏色inset;取值范圍：px、％等長(zhǎng)度單位的參數(shù)值，十六進(jìn)制色、rgba色等顏色值2）標(biāo)簽陰影：2）標(biāo)簽陰影：box-shadow語法：box-shadow:陰影的水平位置垂直位置模糊范圍陰影尺寸陰影顏色inset;取值范圍：px、％等長(zhǎng)度單位的參數(shù)值，十六進(jìn)制色、rgba色等顏色值教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明3)輪廓：outline語法：outline:邊框樣式寬度顏色；取值范圍：取值與border屬性完全相同，不再表達(dá)。說明：outline效果與border相同,區(qū)別在于outline不占用網(wǎng)頁(yè)空間，如在【練習(xí)2.6-1］中使用可不必考慮邊框?qū)ε虐娴挠绊?。outline可與border同時(shí)使用，outline的效果在border的外層，但添加圓角效果時(shí)outline始終保持矩形。外兄是卜靜rder:dashed4px#00f;J4border-radius:20px;V內(nèi)；；；匕諭tline:solid4px#333;1]border:solid4px#00f:r'1Ioutline:dotted4px#333;E3、表格標(biāo)簽的樣式設(shè)置由＜table＞＜tr＞＜td＞三層結(jié)構(gòu)組成的表格標(biāo)簽，布局規(guī)那么上與任務(wù)3中學(xué)習(xí)的盒模型有所不同。＜table＞標(biāo)簽無填充(padding)效果，＜tr＞標(biāo)簽除了高度(height)其余影響空間布局的屬性都無效，＜td＞標(biāo)簽無邊界(margin)效果。卜面將介紹其它影響表格相關(guān)的屬性：1)單元格間距：border-spacing語法：border-spacing:橫向間距縱向間距；取值范圍：px、％等長(zhǎng)度單位的圓角半徑值。說明：該屬性只能為＜table＞標(biāo)簽設(shè)置，用于控制＜table＞和＜td＞之間的間距，代替了邊界和填充屬性。兩個(gè)參數(shù)分別控制橫向和縱向的間距，-5-

教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明明文字、圖形、動(dòng)畫、聲音、表格、鏈接等。2、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è)所要說明的具體內(nèi)容。其完整結(jié)構(gòu)如下所示：<!doctypehtmi><html><head>4<metacharset="gb2312">〈title>無標(biāo)題文檔</head><body></body></html>其中<!DOCTYPE>聲明位于文檔中的最前面的位置，處于標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。<htmlx/html>標(biāo)簽標(biāo)識(shí)了文件的開頭與結(jié)尾，表示這對(duì)標(biāo)記間的內(nèi)容是HTML文檔。<head></head>標(biāo)記包含了文件的頭部，標(biāo)記內(nèi)的內(nèi)容不在瀏覽器中顯示，主要用來說明文件的有關(guān)信息，如文件標(biāo)題、作者、編寫時(shí)間等。<meta>標(biāo)簽沒有結(jié)束標(biāo)簽，位于head元素內(nèi)部，<meta>標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱和值。例如<metacharset="gb2312”>表示使用的字符編碼為簡(jiǎn)體中文編碼，比擬常見的還有國(guó)際化編碼UTF-8。根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)任務(wù)1.2在網(wǎng)頁(yè)中添加段落和文字-2-教學(xué)過程教學(xué)過程教學(xué)過程教學(xué)過程教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明不像邊界屬性分為上右下左四個(gè)方向。也可只填一個(gè)參數(shù)，對(duì)各個(gè)方向2）相鄰邊框合并：border-collapse語法：border-collapse:關(guān)鍵詞；取值范圍：separate|collapseseparate：邊框獨(dú)立（默認(rèn)）collapse：相鄰邊被合并說明：表格中＜table＞和＜td＞可添加邊框效果，border-collapse屬性可將相鄰的邊框合并，此時(shí)border-spacing的效果將會(huì)無效。相鄰邊框合并時(shí)，優(yōu)先采用邊框?qū)挾容^大的樣式。設(shè)置了邊框合并的表格，＜tr＞標(biāo)簽也能設(shè)置邊框樣式，對(duì)邊框合并后的效果有影響。border-collapse屬性只能為＜table＞標(biāo)簽設(shè)置。教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明table!border^co11apse:collspse;table{table{table{border:solidIpx#999;}table{tabletd,tableth{border:solidIpx#999;}border-collapse:collspse;border:solid2px#666：}tabletd,tableth{border:solidIpx4999;3）表格布局方式：table-layout語法：table-layout:關(guān)鍵詞；取值范圍：auto（默認(rèn)）|fixed說明：表格的整體寬高度由以下幾個(gè)屬性決定：＜table＞和＜td＞的邊框、單元格間距、＜td＞的填充、＜td＞的寬高。默認(rèn)情況下（table-layout:auto）如果為＜table＞設(shè)置了寬度屬性，表格的整體寬度將始終保持該寬度值，即便調(diào)整單元格＜td＞的寬度也不會(huì)有任何影響。可能你給某個(gè)單元格定義寬度為lOOpx,但結(jié)果可能并不是lOOpx,因?yàn)閱卧駮?huì)自動(dòng)調(diào)整適應(yīng)整個(gè)表格的寬度。

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明設(shè)置“table-layout:fixed”后，如果影響表格寬度的所有屬性值（上述的4個(gè)屬性）相加后超過＜table＞設(shè)置的寬度，將采用相加后的寬度作為表格總寬度。如果相加總和小于＜table＞設(shè)置寬度，將采用＜table＞設(shè)置寬度為表格總寬度，相當(dāng)于“table-layout:aut?！钡奶幚矸绞?。4、使用偽類選擇符“child”選擇指定位置的標(biāo)簽在任務(wù)5中學(xué)習(xí)了4種關(guān)于標(biāo)簽狀態(tài)的選擇符，現(xiàn)在進(jìn)一步學(xué)習(xí)其它偽類選擇符，可用于選擇指定位置的標(biāo)簽。1）偽類選擇符E:first-child在當(dāng)前選擇對(duì)象（E）中，選擇處于標(biāo)簽層第1個(gè)的標(biāo)簽。2）偽類選擇符E:last-child在當(dāng)前選擇對(duì)象（E）中，選擇處于標(biāo)簽層最后1個(gè)的標(biāo)簽。3）偽類選擇符E:nth-child（x）在當(dāng)前選擇對(duì)象（E）中，選擇處于標(biāo)簽層第x個(gè)的標(biāo)簽。（x為填寫的數(shù)值）4）偽類選擇符E:nth-last-child（x）在當(dāng)前選擇對(duì)象（E）中，選擇處于標(biāo)簽層倒數(shù)第x個(gè)的標(biāo)簽。5）偽類選擇符E:only-child在當(dāng)前選擇對(duì)象（E）中，在標(biāo)簽層中是唯一一個(gè)的標(biāo)簽。任務(wù)實(shí)施要求學(xué)生參考如下步驟完成任務(wù)：（教師巡視并輔導(dǎo)學(xué)生的任務(wù)完成）在第3個(gè)任務(wù)的操作中，系部宣傳網(wǎng)頁(yè)頭部的導(dǎo)航欄局部（＜nav＞標(biāo)簽）被設(shè)置為隱臧，現(xiàn)在修改該局部的設(shè)置，實(shí)現(xiàn)如下列圖的效果。設(shè)學(xué)生在總結(jié)前面課堂練習(xí)知識(shí)的基礎(chǔ)上，參考教師提供的操作步驟（左邊）獨(dú)立完成任務(wù)的實(shí)施。11、提供學(xué)生的知識(shí)遷移能力12、提高學(xué)生-8-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明置導(dǎo)航欄＜nav＞為一小塊區(qū)域放置在頭部的右側(cè)，當(dāng)鼠標(biāo)接觸時(shí)將顯示它內(nèi)部的列表內(nèi)容，該內(nèi)容將在網(wǎng)頁(yè)頭部的下方顯示，當(dāng)鼠標(biāo)離開時(shí)該內(nèi)容也自動(dòng)隱臧。°也1）設(shè)置頭部（header＞內(nèi)的＜nav＞標(biāo)簽樣式，使其作為一小塊區(qū)域放置在頭部右側(cè)。當(dāng)前頭部左側(cè)文字的高度為39Px（26px文字大小X1.5倍行高），所以＜nav＞標(biāo)簽的整體高度應(yīng)在40Px左右。暫時(shí)設(shè)置簡(jiǎn)單的背景色為樣式效果，具體設(shè)置在任務(wù)7中完成。2）由于＜nav＞標(biāo)簽的空間變小，內(nèi)部的＜ul＞＜li＞溢出標(biāo)簽范圍，導(dǎo)致排版混亂。這里需要將＜ul＞標(biāo)簽設(shè)置為“絕對(duì)定位（position:absolute;）"（任務(wù)3拓展練習(xí)的知識(shí)），使其脫離網(wǎng)頁(yè)的空間布局，獨(dú)立于網(wǎng)頁(yè)的上層。將＜ul＞標(biāo)簽設(shè)置為相對(duì)于頁(yè)面左上角排布的“絕對(duì)定位”，位置應(yīng)放置到＜nav〉標(biāo)簽的下方，并要與＜nav＞標(biāo)簽保持接觸，否那么后面鼠標(biāo)接觸的操作可能會(huì)不正常。3）完善標(biāo)簽的排版樣式設(shè)置。4）通過CSS制作鼠標(biāo)觸發(fā)導(dǎo)航欄顯示的效果。參考下面html代碼的結(jié)構(gòu)，先將＜ul＞標(biāo)簽設(shè)置為隱藏（display:none）,由于＜ul＞屬于＜nav＞標(biāo)簽的子標(biāo)簽，可以通過選擇符“headernav:hoverul”設(shè)置當(dāng)＜nav＞被鼠標(biāo)接觸時(shí)，＜ul＞標(biāo)簽變更為顯示狀態(tài)（display:block）,實(shí)現(xiàn)了顯示的效果。而且＜ul＞屬于＜nav＞的一局部，當(dāng)＜ul＞被鼠標(biāo)接觸時(shí)，也可保持顯示狀態(tài)。的自學(xué)能力和問題解決能力務(wù)結(jié)任總1、設(shè)置標(biāo)簽的邊框樣式。2、使用屬性制作各種標(biāo)簽輪廓效果。聽講根據(jù)教師的總結(jié)找出自己在任總結(jié)任務(wù)并回顧教學(xué)目標(biāo)的-9-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)備注說明3、使用屬性設(shè)置表格樣式。4、使用偽類選擇符“child”選擇指定位置的標(biāo)簽。務(wù)完成時(shí)存在的缺乏。知識(shí)和技能目標(biāo)評(píng)價(jià)V（不感興趣，沒學(xué)會(huì)）k興趣【評(píng)價(jià)】建立評(píng)價(jià)機(jī)制：自評(píng)V“學(xué)會(huì)（認(rèn)知）作業(yè)布置通過查看源代碼的方式，查看局部網(wǎng)頁(yè)所使用的標(biāo)簽和樣式是否與我們所用的相同。理解作業(yè)要求清潔整理清潔整理1、設(shè)備恢復(fù)和整理。2、教學(xué)場(chǎng)地的清潔。3、人走五關(guān)（關(guān)門、關(guān)窗、關(guān)燈、關(guān)風(fēng)扇，關(guān)電源）。清潔整理值日生清掃衛(wèi)生-10-

教學(xué)過程課程網(wǎng)頁(yè)布局授課教師鐘愛青課題工程2使用CSS設(shè)置網(wǎng)頁(yè)格式分課題任務(wù)7使用CSS美化表單授課班級(jí)16預(yù)備技師計(jì)算機(jī)網(wǎng)絡(luò)1班授課日期2022-04-28、05-02、03課時(shí)12學(xué)習(xí)目標(biāo)專業(yè)理論知識(shí).能表達(dá)內(nèi)聯(lián)元素標(biāo)簽中文字的水平排列規(guī)那么。.能表達(dá)字體圖標(biāo)與普通圖片圖標(biāo)的區(qū)別實(shí)際操作技能1、能綜合使用CSS樣式設(shè)置美化表單標(biāo)簽的效果，使用屬性vertical-align調(diào)整表單標(biāo)簽的水平排列方式。2、能使用語法@font-face為網(wǎng)頁(yè)加載額外字體，掌握字體圖標(biāo)的使用方法，在網(wǎng)頁(yè)中使用字體圖標(biāo)代替?zhèn)鹘y(tǒng)的圖片。重點(diǎn).表單標(biāo)簽的美化方法.為網(wǎng)頁(yè)添加外部字體難點(diǎn)1.使用:before添加字體圖標(biāo)教學(xué)對(duì)象分析本次教學(xué)對(duì)象經(jīng)過上學(xué)期網(wǎng)頁(yè)UI設(shè)計(jì)的學(xué)習(xí)，掌握了網(wǎng)頁(yè)設(shè)計(jì)的基本布局結(jié)構(gòu)，對(duì)網(wǎng)頁(yè)制作有一定的了解。本學(xué)期將進(jìn)一步學(xué)習(xí)網(wǎng)頁(yè)制作的知識(shí)，將網(wǎng)頁(yè)UI轉(zhuǎn)化為網(wǎng)頁(yè)實(shí)體。教學(xué)以任務(wù)驅(qū)動(dòng)法、練習(xí)法、小組競(jìng)賽法，充分開掘他們學(xué)習(xí)的主動(dòng)性，為能更好的進(jìn)入現(xiàn)實(shí)中的工作環(huán)境做好準(zhǔn)備。教學(xué)場(chǎng)地與教具教學(xué)場(chǎng)地：機(jī)房教具：計(jì)算機(jī)課后分析平安注意事項(xiàng)及其它說明1、提醒學(xué)生注意用電平安。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。審閱簽名：年月日教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明織學(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é)生訪問查閱。1、提前5分鐘按照固定座位就坐；2、‘不帶食品飲料進(jìn)入教室（機(jī)房）；3、開機(jī)，配置好IP地址，確保紅蜘蛛軟件運(yùn)行并鏈接教師機(jī)，同時(shí)能夠訪問英特網(wǎng)；4、注意電腦接電用電平安。課前5分鐘營(yíng)造上課環(huán)境，保證用電平安任務(wù)引入完成系部宣傳網(wǎng)頁(yè)剩余的設(shè)置，使用字體圖標(biāo)技術(shù)，為網(wǎng)頁(yè)頭部等其它模塊添加字體圖標(biāo)，并調(diào)整大小、顏色等樣式。使用前面學(xué)習(xí)的知識(shí)，設(shè)置“聯(lián)系我們”中表單的樣式，使其簡(jiǎn)潔美觀。與教師共同回顧之前學(xué)過的內(nèi)容。理解本次課程任務(wù)要求10分鐘1、明確本次課程要完成的任務(wù)在工程中的位置2、明確本次課程任務(wù)要求預(yù)備知識(shí)課堂綾1、大（inline邊界等由瀏覽表圖效果【教師講解理論知識(shí)，技'習(xí)時(shí)巡視并輔導(dǎo)學(xué)生完使用CSS美化表單多數(shù)表單標(biāo)簽（如＜ipnut＞、t-block）,可與文字一同水邛各種屬性。但也有局部表印器直接控制，無法使用CSS單標(biāo)簽一般自帶邊框樣式，??abedk作并演示課程練習(xí)，在學(xué)生操作成】＜textarea＞等）都屬于內(nèi)聯(lián)塊元素:排列，也可通過CSS設(shè)置寬高、邊框、.標(biāo)簽（如單項(xiàng)選擇、多項(xiàng)選擇標(biāo)簽等）的效果修改。我們可根據(jù)需求對(duì)其美化設(shè)置，如下abed聽講聽講180分鐘邊講邊練，完成理論知識(shí)的學(xué)習(xí)-1-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明上圖＜ipnut＞表單添加了圓角效果、改變了邊框顏色、并添加了內(nèi)部填充使文字與邊框不會(huì)過分緊密。代碼如下：html＜inputtype="lexl"class=css.foil(padding:5px;border:solidIpx#FFAC00;border-radius:3px;}2、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊元素的水平對(duì)齊方式內(nèi)聯(lián)元素、內(nèi)聯(lián)塊元素在水平方向上并不是以標(biāo)簽的頂端進(jìn)行對(duì)齊，而是以標(biāo)簽內(nèi)的文字底端為對(duì)齊的基準(zhǔn)線，如下列圖：聽講聽講基迪-「確一定一.乂定aaaaaaaaaaaaaaaaaaaaa當(dāng)文字樣式發(fā)生變化時(shí)，如調(diào)整N影響到標(biāo)簽的排版。。字大小、行高、字體等，可能會(huì)?文生文字行圖為3em[確定為了解決這個(gè)問題,最好的方法是將水平排列的標(biāo)簽都設(shè)置為浮動(dòng)，這樣可使標(biāo)簽固定以頂端對(duì)齊。但如果情況不允許，還可以通過屬性“vertical-align”調(diào)整對(duì)齊的基準(zhǔn)方式。語法：vertical-align:值；-2-教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間

分配備注說明教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間

分配備注說明取值范圍：關(guān)鍵詞I數(shù)值baseline：以文字的底端為基準(zhǔn)進(jìn)行對(duì)齊（默認(rèn)）sub：垂直對(duì)齊文本的下標(biāo)super：垂直對(duì)齊文本的上標(biāo)top：以標(biāo)簽頂端進(jìn)行對(duì)齊middle：以標(biāo)簽中間進(jìn)行對(duì)齊bottom：以標(biāo)簽底端進(jìn)行對(duì)齊數(shù)值：以px或％為單位，之間調(diào)整標(biāo)簽在水平方向上的偏移，可設(shè)置負(fù)數(shù)。說明：通過關(guān)鍵詞top、middle等進(jìn)行對(duì)齊的效果并不一定穩(wěn)定，有時(shí)會(huì)因?yàn)樽煮w、瀏覽器等因素的影響產(chǎn)生意外的效果。無法得到滿意的結(jié)果時(shí)，可嘗試使用數(shù)值參數(shù)，直接調(diào)整標(biāo)簽的垂直偏移。取值范圍：關(guān)鍵詞取值范圍：關(guān)鍵詞I數(shù)值baseline：以文字的底端為基準(zhǔn)進(jìn)行對(duì)齊（默認(rèn)）sub：垂直對(duì)齊文本的下標(biāo)super：垂直對(duì)齊文本的上標(biāo)top：以標(biāo)簽頂端進(jìn)行對(duì)齊middle：以標(biāo)簽中間進(jìn)行對(duì)齊bottom：以標(biāo)簽底端進(jìn)行對(duì)齊數(shù)值：以px或％為單位，之間調(diào)整標(biāo)簽在水平方向上的偏移，可設(shè)置負(fù)數(shù)。說明：通過關(guān)鍵詞top、middle等進(jìn)行對(duì)齊的效果并不一定穩(wěn)定，有時(shí)會(huì)因?yàn)樽煮w、瀏覽器等因素的影響產(chǎn)生意外的效果。無法得到滿意的結(jié)果時(shí)，可嘗試使用數(shù)值參數(shù)，直接調(diào)整標(biāo)簽的垂直偏移。3、表單標(biāo)簽的焦點(diǎn)狀態(tài)當(dāng)一個(gè)表單標(biāo)簽被鼠標(biāo)點(diǎn)擊后進(jìn)行輸入等操作，這時(shí)可以稱該標(biāo)簽處于“焦點(diǎn)”狀態(tài)，通過偽類":focus”可以給該狀態(tài)下的標(biāo)簽設(shè)置特殊樣式效果,類似于任務(wù)5中學(xué)習(xí)的”:hover”。例：設(shè)置文本表單處于焦點(diǎn)狀態(tài)時(shí)，顯示外發(fā)光效果，改變邊框顏

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明色。CSSinput:focus(box-shadow:004pxttOODDFF;border:lpxsolid#51EAFF;outline:none;)效果■?焦點(diǎn)狀態(tài)|局部瀏覽器（如chrome）會(huì)自帶焦點(diǎn)狀態(tài)效果，代碼中的"outline:none;”是為了消除自帶的輪廓效果。4、字體圖標(biāo)的使用一般情況之下，都是通過＜img＞標(biāo)簽或是標(biāo)簽的背景屬性來添加圖標(biāo)，但這些使用的圖片都屬于位圖圖片，放大會(huì)產(chǎn)生鋸齒，且無法隨意修改顏色。寸卜放大后圖不像失真字體圖標(biāo)的原理是將大量圖標(biāo)保存為字體文件，保存的圖標(biāo)屬于矢量數(shù)據(jù)，可以隨意縮放不失真。使用CSS將字體文件加載到網(wǎng)頁(yè)中使用，-4-

教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明在head標(biāo)記內(nèi)最常用的標(biāo)記是該標(biāo)記是網(wǎng)頁(yè)主題標(biāo)記，提示網(wǎng)頁(yè)內(nèi)容和功能的文字，它將出現(xiàn)在瀏覽器的標(biāo)題欄中。<body〉</body>標(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)簽：<!doctypehtmi><html><head>4<metacharset="gb2312">這是一個(gè)完整的網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽</head><body><p>歡迎光臨我的網(wǎng)頁(yè)!</p></body></html>3、移動(dòng)設(shè)備的HTML基本結(jié)構(gòu)電腦經(jīng)過多年的開展，現(xiàn)在顯示器的屏幕分辨率已經(jīng)能夠到達(dá)1024x768及更高的1280x1024等。因此我們的移動(dòng)設(shè)備無法將普通網(wǎng)頁(yè)全屏顯示在移動(dòng)設(shè)備上，雖然通過屏幕放大縮小也可訪問傳統(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制和觸屏縮放，需要在<head>之中添加viewport根據(jù)教師的課堂任務(wù)操作步驟和講解，獨(dú)立完成課堂練習(xí)，并測(cè)試代碼。工程1制作一個(gè)簡(jiǎn)單文章網(wǎng)頁(yè)任務(wù)1.2在網(wǎng)頁(yè)中添加段落和文字-3-教學(xué)過程教學(xué)過程教學(xué)過程

教學(xué)過程教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明在網(wǎng)頁(yè)中需要使用圖標(biāo)的位置通過特殊編碼調(diào)用出來，再通過css的字體大小、顏色等屬性設(shè)置圖標(biāo)的樣式。1)字體文件的加載在使用字體圖標(biāo)的功能前，需要有記錄了圖標(biāo)數(shù)據(jù)的字體文件，這類型的文件互聯(lián)網(wǎng)中有免費(fèi)提供，這里使用課件中準(zhǔn)備好的字體文件icomoon為例，該文件記錄了將近500個(gè)圖標(biāo)，如下列圖將字體文件放入到網(wǎng)頁(yè)的相關(guān)目錄中。>網(wǎng)站>fontsAbflJ.icomoon.eicomoon.sicomoon.ticomoon.otvgtfwoff同同同同同同同］?S000SSHHH0ESHHSS叵］回國(guó)回回區(qū)1回回字體文件有多種文件格式，如TureTpe(.ttf)、WebOpenFontFormat(.woff)sEmbeddedOpenType(.eot)^SVG(.svg)等。由于不同瀏覽器對(duì)字體文件格式的兼容性不同，為了使各種瀏覽器都能正常使用字體圖標(biāo)，以上兒種格式的字體文件都是必須的。要使用這些字體文件，需要使用CSS的語法“@font-face”將字體文-5-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明件加載到網(wǎng)頁(yè)中。語法：@font-face{font-family:"定義字體名稱”;src:url（"字體路徑"）format（"格式名，}說明：“@font-face{}”屬于固定的語法結(jié)構(gòu)，表示在網(wǎng)頁(yè)中定義一種新的字體?！癴ont-family:"字體名稱"”用于設(shè)置該字體的名稱，字體名稱自行定義，以后一般標(biāo)簽可通過字體屬性"font-family”使用該名稱的字體。“src:url（"字體路徑”）”通過設(shè)置的路徑加載字體文件，后面的“format（"格式名用于聲明該字體的格式，便于瀏覽器識(shí)別，該局部也可不添加。如果要加載多種字體格式的文件，可使用逗號(hào)分隔依次填寫，如“src:url（“路徑1"）,url（“路徑2"）,url（“路徑3"）”。通過上面的兼容性表格可發(fā)現(xiàn)woff格式的字體在新版本瀏覽器中都支持，字體文件icomoon的加載設(shè)置可簡(jiǎn)單寫成：CSS?font-face{font-family:〃myicons”;src:url（/zfonts/icomoon.woff〃）；）如果要考慮舊版本瀏覽器的兼容，代碼可寫為：（注釋局部是兼容的瀏覽器及版本）CSS-6-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明@font-face{font-family:〃my_icons”;src:url(^fonts/icomoon.eot，z);/*IE9+*/src:url(*fonts/icomoon.eot?#iefix")format("embedded-opentype"),/*IE6TE8*/url(^fonts/icomoon.woff77)format(〃woff〃)，/*chrome、firefox*/url(*fonts/icomoon.ttf/，)format("truetype"),/*chrome>firefox、opera>Safari,Android,iOS4.2+*/url(^fonts/icomoon.svg#my_icons，/)format(〃svg");/*iOS4.1-*/9}2)字體圖標(biāo)的使用和偽對(duì)象選擇器:before、：after網(wǎng)頁(yè)中加載了字體文件后，便可讓標(biāo)簽使用該字體，但由于字體圖標(biāo)不屬于文字?jǐn)?shù)據(jù)，無法直接寫為文字顯示，需要使用特定的編碼代表圖標(biāo)。圖標(biāo)的編碼在字體文件制作時(shí)已被設(shè)定好，具體可翻開字體文件附帶的說明文件查看，如下如中的“e90a”、“e909”等就是圖標(biāo)對(duì)應(yīng)的編碼。/icon-eyedropper企icon-blog0icon-pen網(wǎng)s□?909□o9O8,icon-quill&icon-penci124icon-pen?9070?906□q905國(guó)icon-newspaperBricon-office-icon-home904□?903□?902-7-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明圖標(biāo)的編碼不能直接寫在標(biāo)簽內(nèi)，標(biāo)簽無法正確識(shí)別，需要使用偽對(duì)象選擇器:before或:after,該選擇器的作用是通過CSS的方式在標(biāo)簽內(nèi)插入一個(gè)標(biāo)簽和數(shù)據(jù)。語法：E:before{content:"內(nèi)容其它屬性}說明：”:before”在標(biāo)簽內(nèi)開頭局部插入一個(gè)新的標(biāo)簽，該標(biāo)簽屬于內(nèi)聯(lián)標(biāo)簽，文字內(nèi)容是屬性"content:“內(nèi)容"”所設(shè)置的文字，如果要設(shè)置該標(biāo)簽的其它屬性，可在選擇器:before內(nèi)直接添加?！?after”是將新標(biāo)簽插入到當(dāng)前標(biāo)簽的末尾局部。字體圖標(biāo)的編碼以“content:〃'編碼〃；”的格式添加到偽對(duì)象選擇器中，并設(shè)置當(dāng)前使用的字體為圖標(biāo)字體，便可被正確識(shí)別并顯示。html<spanclass=z，icon_twitter，，X/span><spanclass="zicon_facebook//></span><spanclass=/zicon_tree，，></span>css.icon_twitter:before{font-family:my_icons;/*使用圖標(biāo)字體*/content:，，\ea96，/;/*圖標(biāo)編碼*/).icon_facebook:before{font-family:my_icons;-8-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明content:〃\ea9()〃；).icon_tree:before{font-family:my_icons;content:"\c9bc”;color:#f00;font-size:40px;)效果?f市任務(wù)實(shí)施要求學(xué)生參考如下步驟完成任務(wù)：（教師巡視并輔導(dǎo)學(xué)生的任務(wù)完成）完成系部宣傳網(wǎng)頁(yè)剩余的設(shè)置，在CSS中加載字體圖標(biāo)文件，為網(wǎng)頁(yè)頭部等其它模塊添加字體圖標(biāo)，并調(diào)整大小、顏色等樣式。美化“contact”模塊中的表單樣式?！餍畔⒐こ滔礢學(xué)生在總結(jié)前面課堂練習(xí)知識(shí)的基礎(chǔ)上，參考教師提供的操作步驟（左邊）獨(dú)立完成任務(wù)的實(shí)施。335分鐘13、提供學(xué)生的知識(shí)遷移能力14、提高學(xué)生的自學(xué)能力和問題解決能力

教學(xué)過程教學(xué)過程教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間

分配備注說明發(fā)送郵件教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間

分配備注說明1）將字體文件放到網(wǎng)頁(yè)相關(guān)的文件夾中，在CSS中加載字體圖標(biāo)文件并設(shè)置所使用的圖標(biāo)。這里將該局部CSS代碼保存到一個(gè)新的CSS文件（命名fonts.css）中，再加載到網(wǎng)頁(yè)里，這樣以后在制作其它網(wǎng)站的頁(yè)面時(shí)也能直接使用這些圖標(biāo)字體設(shè)置。2）在頭部log。標(biāo)簽內(nèi)加入一個(gè)＜span＞標(biāo)簽用于放置字體圖標(biāo)，之后所有字體圖標(biāo)將統(tǒng)一使用＜span＞標(biāo)簽放置。為＜span＞標(biāo)簽設(shè)置對(duì)應(yīng)圖標(biāo)的類選擇符，再設(shè)置該標(biāo)簽的文字大小、顏色等樣式。如果圖標(biāo)與log。文字無法對(duì)齊，嘗試使用“vertical-align”屬性進(jìn)行調(diào)整。3）重新設(shè)置頭部右側(cè)的導(dǎo)航欄按鈕標(biāo)簽的樣式，同樣使用＜span＞標(biāo)簽為其添加圖標(biāo)。為了使圖標(biāo)居中對(duì)齊，將＜span＞標(biāo)簽設(shè)置為塊元素,文本水平居中，設(shè)置行高與外層標(biāo)簽一致，這樣字體圖標(biāo)可以放置在正中間。4）在“services”模塊的標(biāo)題前加入圖標(biāo)標(biāo)簽，由于該模塊已設(shè)置文字居中，只需要統(tǒng)一設(shè)置圖標(biāo)的大小和顏色。5）在“contact”模塊也是用類似的方法設(shè)置。6）網(wǎng)頁(yè)腳部的圖標(biāo)-10-

教學(xué)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配備注說明6）美化“contact”模塊的表單設(shè)置，文本表單和多行文本表單的樣式相近，相同的效果可統(tǒng)一設(shè)置，并設(shè)置標(biāo)簽處于“焦點(diǎn)”狀態(tài)時(shí)，產(chǎn)生發(fā)光效果。另外要注意雖然兩個(gè)文本表單并排排列，但整體寬度之和不能為100%,因?yàn)閮?nèi)聯(lián)塊標(biāo)簽之間會(huì)產(chǎn)生空格，空格也會(huì)占用空間，應(yīng)該預(yù)留因位置容納空格。7）最后設(shè)置表單按鈕的樣式，完成整個(gè)頁(yè)面的設(shè)置操作。務(wù)結(jié)任總1、使用CSS樣式設(shè)置美化表單標(biāo)簽的效果2、使用屬性vertical-align調(diào)整表單標(biāo)簽的水平排列方式。3、使用語法@fom-face為網(wǎng)頁(yè)加載額外字體4、在網(wǎng)頁(yè)中使用字體圖標(biāo)代替?zhèn)鹘y(tǒng)的圖片。聽講根據(jù)教師的總結(jié)找出自己在任務(wù)完成時(shí)存在的缺乏。5分鐘總結(jié)任務(wù)并回顧教學(xué)目標(biāo)的知識(shí)和技能目標(biāo)評(píng)價(jià)V（不感興趣，沒學(xué)會(huì)）k興趣VJ【評(píng)價(jià)】9分鐘建立評(píng)價(jià)機(jī)制：自評(píng)V?學(xué)會(huì)（認(rèn)知）作業(yè)布置通過查看源代碼的方式，查看局部網(wǎng)頁(yè)所使用的標(biāo)簽和樣式是否與我們所用的相同。理解作業(yè)要求1分鐘清潔整理清潔整理1＞設(shè)備恢復(fù)和整理。2、教學(xué)場(chǎng)地的清潔。3、人走五關(guān)（關(guān)門、關(guān)窗、關(guān)燈、關(guān)風(fēng)扇，關(guān)電源）。清潔整理值日生清掃衛(wèi)生課后5分鐘-11-

教學(xué)過程技師學(xué)院審閱簽名：2022年05月15日課程網(wǎng)頁(yè)布局授課教師鐘愛青課題工程3讓網(wǎng)頁(yè)兼容不同的平臺(tái)分課題任務(wù)3.1變更網(wǎng)頁(yè)導(dǎo)航菜單授課班級(jí)16預(yù)備技師計(jì)算機(jī)網(wǎng)絡(luò)1班授課日期、17、19課時(shí)12課時(shí)學(xué)習(xí)目標(biāo)業(yè)論識(shí)專理知.能表達(dá)什么叫做響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。.能表達(dá)CSS媒體查詢?cè)陧憫?yīng)式網(wǎng)頁(yè)設(shè)計(jì)中的重要性。.能夠表達(dá)CSS媒體查詢的相關(guān)參數(shù)配置。際作能實(shí)操技1.能使用CSS媒體查詢代碼實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。重點(diǎn)能使用CSS媒體查詢代碼實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。難點(diǎn)樣式代碼符合W3C推薦的媒體查詢CSS樣式規(guī)那么。教學(xué)對(duì)象分析授課班級(jí)為16級(jí)五年制電商班，網(wǎng)頁(yè)基礎(chǔ)知識(shí)薄弱，進(jìn)度盡量放慢，加深對(duì)知識(shí)的理解和內(nèi)化，在教學(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ī)、VisualStudioCode軟件課后分析女全注總事項(xiàng)及其它說明1、提醒學(xué)生注意用電平安。2、提醒學(xué)生不要將食品飲料帶入機(jī)房。

工程3讓網(wǎng)頁(yè)兼容不同的平臺(tái)時(shí)間分配教學(xué)環(huán)節(jié)學(xué)生活動(dòng)教師活動(dòng)教學(xué)資源設(shè)計(jì)意圖課前5分鐘教學(xué)組織準(zhǔn)備上課：1、提前5分鐘入座，禁帶食品飲料進(jìn)入，參與老師的考勤；2、檢查上課資源就位情況，保證課堂教學(xué)中能正常使用，如有問題及時(shí)與老師溝通；3、確保紅蜘蛛軟件運(yùn)行并鏈接教師機(jī)；4、注意電腦接電用電平安。教學(xué)準(zhǔn)備：1、催促學(xué)生按照機(jī)房管理規(guī)定進(jìn)入機(jī)房并就坐，清點(diǎn)人數(shù)；2、保證教學(xué)設(shè)備和資源能夠正常使用；3、提醒學(xué)生注意設(shè)備使用及用電平安；4、利用紅蜘蛛軟件將教學(xué)資料“素材及資料”文件夾發(fā)送到學(xué)生電腦的文件接收柜中，同時(shí)將文件放置在教師機(jī)共享文件夾供學(xué)生訪問查閱。所有教學(xué)資源就位營(yíng)造上課環(huán)境，保證用電平安10分鐘復(fù)習(xí)導(dǎo)入復(fù)習(xí)和前測(cè)：1、通過回答下列問題和完成任務(wù)復(fù)習(xí)鞏固上次課知識(shí)。2、回顧傳統(tǒng)網(wǎng)頁(yè)和自適應(yīng)網(wǎng)頁(yè)的區(qū)別，并引入響應(yīng)式網(wǎng)頁(yè)的概念及特征。復(fù)習(xí)導(dǎo)入：1、引入課堂知識(shí)一一響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)；2、通過展示一個(gè)網(wǎng)頁(yè)（傳統(tǒng)、自適應(yīng)、響應(yīng)式），以提問的方式復(fù)習(xí)如何使用CSS實(shí)現(xiàn)網(wǎng)頁(yè)的自適應(yīng)布局；3、通過小任務(wù)鞏固網(wǎng)頁(yè)元素隱藏與顯示的實(shí)現(xiàn)。工程中本任務(wù)網(wǎng)頁(yè)導(dǎo)航菜單素材文件；任務(wù)：變更網(wǎng)頁(yè)導(dǎo)航菜單