HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第10章 設(shè)置表格、列表和滾動(dòng)條樣式

網(wǎng)頁設(shè)計(jì)與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實(shí)踐□理實(shí)一體習(xí)題復(fù)習(xí)□考核評價(jià)□其他活動(dòng)□學(xué)習(xí)量安排課內(nèi)：課外形式調(diào)查分析小組研討□實(shí)踐任務(wù)理論探究□考核評價(jià)□匯報(bào)展示□其他活動(dòng)課外：序號(hào)14授課日期月日月日月日月日授課班級(jí)課內(nèi)教學(xué)內(nèi)容：第10章設(shè)置表格、列表和滾動(dòng)條樣式課外學(xué)習(xí)任務(wù)：（1）課前：以小組為單位，討論設(shè)置表格、列表和滾動(dòng)條樣式的相關(guān)知識(shí)，并以PPT的形式記錄下來。（2）課后：=1\*GB3①使用CSS中的與表格相關(guān)的屬性為表格添加樣式。=2\*GB3②使用CSS中的列表屬性來設(shè)置列表樣式（列表符號(hào)樣式和列表符號(hào)的位置樣式）。=3\*GB3③使用CSS中的與滾動(dòng)條相關(guān)的屬性來設(shè)置滾動(dòng)條的顏色樣式。教學(xué)目標(biāo)：知識(shí)目標(biāo)掌握表格樣式的設(shè)置。掌握列表樣式的設(shè)置。掌握滾動(dòng)條樣式的設(shè)置。能力目標(biāo)能夠掌握表格、列表和滾動(dòng)條的相關(guān)屬性；能夠通過CSS實(shí)現(xiàn)對表格、列表和滾動(dòng)條樣式的添加。素質(zhì)目標(biāo)較強(qiáng)的專業(yè)知識(shí)和自學(xué)能力；豐富知識(shí)結(jié)構(gòu)，提升專業(yè)知識(shí)；掌握表格、列表和滾動(dòng)條樣式的使用，理解并應(yīng)用專業(yè)知識(shí)。重點(diǎn)難點(diǎn)及解決方法：（1）重點(diǎn)：表格和列表樣式的設(shè)置解決方法：通過知識(shí)點(diǎn)講解+課堂在線展示相結(jié)合的方法，教師講解表格和列表的相關(guān)樣式屬性，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識(shí)；同時(shí)通過課堂在線展示，使學(xué)生可以更直觀的學(xué)習(xí)使用CSS屬性實(shí)現(xiàn)對表格和列表樣式的設(shè)置；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點(diǎn)：滾動(dòng)條樣式的設(shè)置解決方法：通過示例展示+啟發(fā)式教學(xué)講解的方式，細(xì)致講解使用滾動(dòng)條的各種樣式屬性。幫助學(xué)生掌握使用CSS屬性設(shè)置滾動(dòng)條樣式的方法。從實(shí)用的角度幫助學(xué)生提高專業(yè)知識(shí)。課內(nèi)教學(xué)授課地點(diǎn)：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計(jì)算機(jī)、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習(xí)效果評價(jià)方式：對理論知識(shí)學(xué)習(xí)效果評價(jià)：采用課堂提問、課后習(xí)題和查閱技術(shù)論文研讀筆記的方式；對技能的評價(jià)：教師對學(xué)生上交網(wǎng)頁作品按制作要求進(jìn)行綜合性評價(jià)；對職業(yè)素養(yǎng)的評價(jià)：采用學(xué)生自評、小組內(nèi)評價(jià)和教師評價(jià)相結(jié)合的方式。課后小結(jié)：填表說明：1.序號(hào)，指該課程授課的順序號(hào)，應(yīng)與授課計(jì)劃一致；2.授課形式在相應(yīng)的選項(xiàng)打“√”。課內(nèi)教學(xué)內(nèi)容及過程時(shí)間分配方法及手段1.表格【合并表格邊框】表格同時(shí)存在兩種邊框：一種是表格的邊框，即表格最外面的4個(gè)邊框；另一種是單元格的邊框，每一個(gè)單元格都有自己的邊框。在默認(rèn)情況下，這兩種邊框是分開顯示的，但在CSS中border-collapse屬性的作用下，可以將這兩種邊框合并起來。border-collapse屬性的語法格式如下。border-collapse:collapse|separate|inherit各屬性值的含義如下。collapse：合并兩種邊框。separate：兩種邊框獨(dú)立，該值為默認(rèn)值。inherit：繼承父級(jí)樣式?！驹O(shè)置表格邊框間距】在CSS中可以使用border-spacing屬性來為表格設(shè)置邊框間距，這一點(diǎn)與HTML中的table元素的cellspacing屬性十分類似。border-spacing屬性的語法格式如下。border-spacing:寬度|inherit各屬性的含義如下。寬度：邊框間距的大小，可以為絕對單位值或相對單位值，但不能為負(fù)數(shù)。inherit：繼承父級(jí)樣式?！驹O(shè)置表格標(biāo)題位置】在HTML中可以使用caption元素來設(shè)置表格的標(biāo)題，而CSS中的caption-side屬性用來設(shè)置標(biāo)題放在表格的什么位置上。caption-side屬性的語法格式如下。caption-side:top|bottom|inherit各屬性值的含義如下。top：標(biāo)題位于表格頂部。bottom：標(biāo)題位于表格底部。inherit：繼承父級(jí)樣式?！驹O(shè)置表格布局】當(dāng)單元格中對象的寬度超過單元格定義的寬度且能換行（如文字）時(shí)，瀏覽器會(huì)自動(dòng)在寬度的最大處換行；在不能換行（如圖片或一個(gè)超長單詞時(shí)）時(shí)，瀏覽器就會(huì)自動(dòng)調(diào)整表格列的寬度，以容納單元格中的對象。在CSS中的table-layout屬性可以設(shè)置單元格寬度是否不被改變。table-layout屬性的語法格式如下。table-layout:auto|fixed|inherit各屬性值的含義如下。auto：當(dāng)內(nèi)容超過寬度時(shí)，如能自動(dòng)換行則自動(dòng)換行，如不能自動(dòng)換行則增加寬度。該值為默認(rèn)值。fixed：無論內(nèi)容是否超過表格寬度，都保持表格width屬性規(guī)定的寬度不變。inherit：繼承父級(jí)樣式。2.列表【設(shè)置列表符號(hào)樣式】HTML中的列表符號(hào)只能是一個(gè)黑點(diǎn)或數(shù)字，十分單調(diào)。使用CSS中的list-style-type屬性可以指定符號(hào)的樣式，其語法格式如下。list-style-type:circle|disc|decimal|square|upper-roman|lower-roman|upper-alpha|lower-alpha|none|armenian|cjk-ideographic|georgian|hebrew|lower-greek|hiragana|hiragana-iroha|katakana|katakana-iroha|lower-latin|upper-latin各屬性值的含義如下。circle：顯示空心圓符號(hào)。disc：默認(rèn)值，顯示實(shí)心圓符號(hào)。decimal：顯示阿拉伯?dāng)?shù)字。square：顯示實(shí)心方塊符號(hào)。upper-roman：顯示大寫羅馬數(shù)字。lower-roman：顯示小寫羅馬數(shù)字。upper-alpha：顯示大寫英文字母。lower-alpha：顯示小寫英文字母。none：不使用項(xiàng)目符號(hào)。armenian：顯示傳統(tǒng)的亞美尼亞數(shù)字。cjk-ideographic：顯示表意數(shù)字。georgian：顯示喬治數(shù)字。hebrew：顯示希伯來數(shù)字。lower-greek：顯示希臘小寫字母。hiragana：顯示日文平假名字符。hiragana-iroha：顯示日文平假名序號(hào)。katakana：顯示日文片假名字符。katakana-iroha：顯示日文片假名序號(hào)。lower-latin：顯示小寫拉丁字母。upper-latin：顯示大寫拉丁字母。list-style-type屬性可以作用在<ol>、<ul>與<li>標(biāo)簽上，并且該屬性將獲得優(yōu)先顯示權(quán)。例如，在有序列表ol上使用list-style-typ:circle屬性，將會(huì)顯示實(shí)心圓符號(hào)，而不是有序數(shù)字?！臼褂脠D片設(shè)置列表符號(hào)樣式】除了采用系統(tǒng)提供的列表符號(hào)外，在CSS中還可以利用list-style-image屬性將圖片設(shè)置為列表符號(hào)。其語法格式如下。list-style-image:url(源文件地址)【列表符號(hào)顯示位置】在列表中使用了文本樣式（如背景顏色等）時(shí)，可以使用list-style-position屬性指定符號(hào)的顯示位置，即指定符號(hào)是放在文本塊之外還是放在文本塊之內(nèi)。list-style-position的語法格式如下。list-style-position:outside|inside各屬性值的含義如下。outside：將列表符號(hào)放在文本塊之外，該值為默認(rèn)值。inside：將列表符號(hào)放在文本塊之內(nèi)。list-style-position屬性可以作用在<ol>、<ul>與<li>標(biāo)簽上?！揪C合設(shè)置列表樣式】在CSS中可以使用list-style屬性來綜合設(shè)置列表的樣式，不用輸入list-style-image、list-style-type或list-style-position這個(gè)屬性名，只需輸入屬性值，從而簡化輸入。list-style屬性的語法格式如下。list-style:list-style-image|list-style-type|list-style-position使用list-style設(shè)置列表樣式時(shí)要注意以下兩點(diǎn)。同時(shí)指定list-style-image和list-style-type時(shí)，list-style-image將優(yōu)先顯示。除非list-style-image為none或圖片地址錯(cuò)誤，才會(huì)無法顯示。當(dāng)列表與列表項(xiàng)同時(shí)使用樣式時(shí)，列表項(xiàng)的樣式將優(yōu)先顯示。與list-style-image、list-style-type和list-style-position樣式相同，list-style-position樣式可以作用在<ol>、<ul>與<li>標(biāo)簽上。3.滾動(dòng)條【設(shè)置滾動(dòng)條顏色】使用scrollbar-color屬性可以設(shè)置滾動(dòng)條軌道和滑塊的顏色，其語法格式如下。scrollbar-color:colorcolorscrollbar-color有兩個(gè)顏色屬性值，其值可以為十六進(jìn)制的RGB顏色、顏色的英文名和百分制顏色表示法。第一個(gè)顏色值用于控制滾動(dòng)條滑塊的顏色，第二個(gè)顏色值用于控制滾動(dòng)條軌道的顏色。【交互設(shè)置滾動(dòng)條寬度】使用scrollbarwidth屬性可以設(shè)置滾動(dòng)條的寬度，其語法格式如下。scrollbar-width:auto|thin|none各屬性值的含義如下。auto：系統(tǒng)默認(rèn)的滾動(dòng)條寬度。thin：系統(tǒng)提供的瘦滾動(dòng)條寬度，或者比默認(rèn)滾動(dòng)條寬度更窄的寬度。none：不顯示滾動(dòng)條，但是該元素依然可以滾動(dòng)。4.教學(xué)評價(jià)【組織階段考核與學(xué)生自評互評、展示考核結(jié)果】本次課的考核注重過程評價(jià)：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評價(jià)表》，組織學(xué)生自評、互評。5．上機(jī)指導(dǎo)1．使用CSS中的與表格相關(guān)的屬性為表格添加樣式。2．使用CSS中的列表屬性來設(shè)置列表樣式（列表符號(hào)樣式和列表符號(hào)的位置樣式）。3．使用CSS中的與滾動(dòng)條相關(guān)的屬性來設(shè)置滾動(dòng)條的顏色樣式。8.板書設(shè)計(jì)表格列表滾動(dòng)條教學(xué)評價(jià)上機(jī)指導(dǎo)課外學(xué)習(xí)任務(wù)及學(xué)習(xí)指導(dǎo)課前：【教師布置調(diào)研任務(wù)】調(diào)研主題：《分析如何實(shí)現(xiàn)設(shè)置表格、列表和滾動(dòng)條樣式》要求：以小組為單位，分析如何設(shè)置表格、列表和滾動(dòng)條樣式，同時(shí)制作匯報(bào)PPT，提交到“微信群”?！緦W(xué)生調(diào)研，教師線上指導(dǎo)】學(xué)生采用線上調(diào)研的方式，開展調(diào)研。教師使用“微信群”對學(xué)生進(jìn)行指導(dǎo)?！窘處煂Ω鹘M調(diào)研成果進(jìn)行評價(jià)】教師查閱學(xué)生調(diào)研結(jié)果PPT，對每個(gè)小組的PPT進(jìn)行評價(jià)，記錄評價(jià)成績，并挑選出優(yōu)秀作品。課后：【使用CSS中的與表格相關(guān)的屬性為表格添加樣式】小組成員團(tuán)結(jié)協(xié)作，首先使用border-spacing屬性設(shè)置表格邊框間距為12px，然后使用caption-side屬性設(shè)置表格標(biāo)題位于表格的頂部。教師使用“微信群”對學(xué)生進(jìn)行指導(dǎo)?！臼褂肅SS中的列表屬性來設(shè)置列表樣式（列表符號(hào)樣式和列表符號(hào)的位置樣式）】學(xué)生通過之前所學(xué)的知識(shí)，首先使用list-style-type屬性設(shè)置列表符號(hào)樣式為大