《web前端技術(shù)》(趙敏)003-0教案 第9課 CSS的文本和圖像屬性

PAGE1PAGE1PAGE2PAGE2

課題第9課CSS3的文本屬性和圖像屬性課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握設(shè)置字體樣式和文本格式的相關(guān)屬性（2）掌握設(shè)置網(wǎng)頁圖像和背景樣式的相關(guān)屬性素質(zhì)目標(biāo)：（1）學(xué)習(xí)CSS3中文本和圖像的常用屬性，增加知識(shí)儲(chǔ)備，鍛煉思維能力（2）體驗(yàn)豐富的案例，養(yǎng)成理論與實(shí)踐相結(jié)合的良好習(xí)慣（3）感受國家強(qiáng)大，增強(qiáng)民族自豪感，提升民族自信心教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：設(shè)置字體樣式和文本格式的相關(guān)屬性；設(shè)置網(wǎng)頁圖像的相關(guān)屬性教學(xué)難點(diǎn)：設(shè)置背景樣式的相關(guān)屬性教學(xué)方法問答法、討論法、講授法、實(shí)踐練習(xí)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（20min）→實(shí)戰(zhàn)拓展（15min）→第2節(jié)課：→傳授新知（20min）→實(shí)戰(zhàn)演練（15min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)了解CSS的文本屬性和圖像屬性，從網(wǎng)上找多種網(wǎng)頁案例查看原代碼，查看其中CSS相關(guān)屬性的設(shè)置【學(xué)生】完成課前任務(wù)通過課前任務(wù)，讓學(xué)生提前預(yù)習(xí)知識(shí)點(diǎn)，了解CSS的文本屬性和圖像屬性考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（3min）【教師】提出問題網(wǎng)頁文件豐富多彩，包含很多元素，請問大家，網(wǎng)頁可以從哪些方面進(jìn)行美化？怎樣美化網(wǎng)頁文本？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識(shí)通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（20min）6.1文本屬性6.1.1設(shè)置字體樣式【教師】講解設(shè)置字體樣式多種屬性的方法，并舉例子說明1．字體類型在CSS3中，使用font-family屬性設(shè)置文本的字體類型（也可直接使用font屬性），具體格式為：font-family:name;其中，name表示字體名稱?！ㄔ斠娊滩模菊n堂拓展】CSS3提供了5個(gè)通用字體作為備用字體，用于替換無法正常顯示的類似字體，它們分別為serif（襯線字體）、sans-serif（無襯線字體）、cursive（草體）、fantasy（奇異字體）和monospace（等寬字體）?！ㄔ斠娊滩模?．字體大小在CSS3中，使用font-size屬性設(shè)置文本的字體大小，具體格式為：font-size:length|百分?jǐn)?shù)|關(guān)鍵字；其中，length最常用，表示某個(gè)固定值……（詳見教材）3．字體粗細(xì)在CSS3中，使用font-weight屬性設(shè)置文本的字體粗細(xì)，具體格式為：font-weight:normal|bold|bolder|lighter|number;……（詳見教材）【課堂拓展】在Windows系統(tǒng)的編輯器中，文本的默認(rèn)字體為“微軟雅黑”，在該系統(tǒng)環(huán)境下為文本設(shè)置font-weight屬性時(shí)，頁面中的字體粗細(xì)可能并未更改，這是因?yàn)椤拔④浹藕凇弊煮w只支持400與700兩種字體粗細(xì)效果，當(dāng)設(shè)置為其他值時(shí)它會(huì)自動(dòng)替換成這兩種效果。4．字體風(fēng)格CSS3中，使用font-style屬性設(shè)置文本的字體風(fēng)格，具體格式為：font-style:normal|italic|oblique;……（詳見教材）5．字體顏色在CSS3中，使用color屬性設(shè)置文本的字體顏色，具體格式為：color:color;……（詳見教材）【課堂拓展】在實(shí)際應(yīng)用中，只有那些常見的顏色，如紅色、白色、黑色等會(huì)使用英文單詞表示，其他顏色更多是使用十六進(jìn)制數(shù)或RGB值表示?！纠?-1】設(shè)置文本的字體樣式，包括字體的類型、大小、粗細(xì)、風(fēng)格、顏色等……（詳見教材）【學(xué)生】聆聽、記錄、理解、觀看效果6.1.2設(shè)置文本格式【教師】講解設(shè)置文本格式多種屬性的方法，并舉例子說明CSS3不僅提供了設(shè)置字體樣式的屬性，還提供了很多設(shè)置文本格式的屬性，包括首行縮進(jìn)、水平對齊、文本修飾、省略標(biāo)記、間距、行距、自動(dòng)換行和空白符處理等。1．首行縮進(jìn)在CSS3中，使用text-indent屬性設(shè)置文本首行字符的縮進(jìn)距離，具體格式為：……（詳見教材）2．水平對齊在CSS3中，使用text-align屬性設(shè)置文本的水平對齊方式，具體格式為：……（詳見教材）3．文本修飾在CSS3中，使用text-decoration屬性設(shè)置添加到文本的修飾，具體格式為：……（詳見教材）【課堂拓展】HTML5中還可以使用<u>標(biāo)簽標(biāo)記下畫線效果，但不常使用。4．省略標(biāo)記在CSS3中，使用text-overflow屬性設(shè)置文本內(nèi)容超出容器邊界（文本溢出）時(shí)省略標(biāo)記的樣式，具體格式為：……（詳見教材）5．間距間距包括字符間距和字間距，字符間距是指字母之間的空白，字間距是指單詞之間的空白。在CSS3中，使用letter-spacing屬性設(shè)置字符間距，使用word-spacing屬性設(shè)置字間距，具體格式為：……（詳見教材）【課堂拓展】對于設(shè)置了字間距的文本，瀏覽器會(huì)以文本中的空格為基準(zhǔn)調(diào)節(jié)單詞的間距。需要注意的是，使用連字符的單詞會(huì)被視為一個(gè)單詞，連續(xù)的漢字不被視為單詞，只有漢字之間用空格隔開時(shí)，被分開的漢字才被視為單詞。6．行高在CSS3中，使用line-height屬性設(shè)置文本的行高，具體格式為：……（詳見教材）【課堂拓展】行高的屬性值小于100%時(shí)，將產(chǎn)生文本重疊效果，屬性值為0時(shí)表示沒有行高，即完全重疊。7．自動(dòng)換行在CSS3中，使用word-break屬性設(shè)置文本的自動(dòng)換行方式，具體格式為：……（詳見教材）8．空白符處理默認(rèn)情況下，瀏覽器在遇到多個(gè)空格時(shí)會(huì)將它們壓縮為一個(gè)空格，其他空白符也將自動(dòng)忽略。當(dāng)需要顯示空白符時(shí)，可以使用white-space屬性設(shè)置瀏覽器對空白符的識(shí)別方式，具體格式為：……（詳見教材）【例6-2】設(shè)置文本格式，包括首行縮進(jìn)、水平對齊、文本修飾、省略標(biāo)記等……（詳見教材）【課堂拓展】在CSS3中，使用overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素邊框時(shí)的處理方式，具體格式為：overflow:visible|hidden|scroll|auto;……（詳見教材）【學(xué)生】聆聽、記錄、理解、觀看效果通過教師的講解使學(xué)生了解CSS3設(shè)置字體樣式和文本格式屬性的方法實(shí)戰(zhàn)拓展（15min）【教師】要求每隊(duì)利用上課所學(xué)知識(shí)，把之前做好的文字部分進(jìn)行格式美化，可自行分配任務(wù)和討論，遇到疑問可咨詢老師【學(xué)生】制作項(xiàng)目，討論通過團(tuán)隊(duì)任務(wù)，拓展學(xué)生所學(xué)知識(shí)，培養(yǎng)學(xué)生創(chuàng)新能力和團(tuán)協(xié)作能力課堂展示（5min）【教師】挑選幾個(gè)學(xué)生上臺(tái)展示上節(jié)課項(xiàng)目美化的效果，并說明使用了什么標(biāo)簽，設(shè)置了哪些屬性【學(xué)生】觀看效果、聆聽、理解通過展示上節(jié)課的效果，活躍課堂氛圍，調(diào)動(dòng)學(xué)生學(xué)習(xí)積極性第二節(jié)課問題導(dǎo)入（5min）【教師】準(zhǔn)備了兩個(gè)網(wǎng)頁，一個(gè)是沒有美化的圖像網(wǎng)頁，一個(gè)是美化了的圖像網(wǎng)頁，讓學(xué)生對比下效果，提出問題請同學(xué)們對比下，這圖像進(jìn)行了哪些美化？【學(xué)生】觀看效果、討論、回答通過網(wǎng)頁效果對比，提出問題，引發(fā)學(xué)生對本節(jié)課學(xué)習(xí)的興趣，引入新課內(nèi)容傳授新知（20min）6.2圖像屬性6.2.1設(shè)置網(wǎng)頁圖像【教師】講解網(wǎng)頁圖像的設(shè)置，并演示例子輔助理解1.圖像大小CSS3中，使用width和height屬性設(shè)置圖像的寬和高，屬性值為數(shù)字（單位為px）。例如，使用標(biāo)簽選擇器設(shè)置圖像的大小，代碼如下：img{width:200px;height:150px}【課堂拓展】若只設(shè)置圖像的寬度或高度，瀏覽器會(huì)自動(dòng)調(diào)整橫縱比，以保證圖像寬高比不變，避免圖像變形。若同時(shí)設(shè)置圖像的寬度和高度，就一定要注意圖形的寬高比，否則圖像可能會(huì)變形。2．邊框樣式網(wǎng)頁中的圖像元素默認(rèn)是沒有邊框的，但CSS3提供的屬性可以設(shè)置邊框的樣式，包括寬度、風(fēng)格和顏色。邊框?qū)挾??！ㄔ斠娊滩模┻吙蝻L(fēng)格?！ㄔ斠娊滩模┻吙蝾伾！ㄔ斠娊滩模┐送?，在CSS3中，使用border屬性可以在一個(gè)聲明中統(tǒng)一設(shè)置邊框的寬度、風(fēng)格和顏色，具體格式為：border:邊框?qū)挾冗吙蝻L(fēng)格邊框顏色;……（詳見教材）【課堂拓展】圖像元素包括4個(gè)方向的邊框，所以在設(shè)置邊框的樣式時(shí)既可以使用一條樣式代碼設(shè)置4個(gè)方向的邊框，如“border-width:2px;”設(shè)置4個(gè)方向的邊框?qū)挾染鶠?px，……（詳見教材）3．不透明度在CSS3中，使用opacity屬性設(shè)置不透明度，具體格式為：……（詳見教材）4．圓角樣式在CSS3中，使用border-radius屬性設(shè)置圓角樣式，具體格式為：……（詳見教材）【課堂拓展】為了分別設(shè)置4個(gè)頂角的圓角樣式，border-radius屬性和邊框樣式屬性類似，派生了4個(gè)子屬性，包括border-top-right-radius屬性，用于設(shè)置右上角的圓角；border-bottom-right-radius屬性，用于設(shè)置右下角的圓角；border-bottom-left-radius屬性，用于設(shè)置左下角的圓角；border-top-left-radius屬性，用于設(shè)置左上角的圓角。……（詳見教材）5．陰影樣式在CSS3中，使用box-shadow屬性給框添加一個(gè)或多個(gè)陰影樣式，具體格式為：……（詳見教材）【例6-3】設(shè)置網(wǎng)頁圖像的樣式，包括圖像大小、邊框樣式、不透明度、圓角樣式、陰影樣式等……（詳見教材）【課堂拓展】本節(jié)介紹的有關(guān)圖像樣式的屬性可應(yīng)用于HTML5中的大多數(shù)塊級元素，如用于設(shè)置視頻元素的大小、邊框、圓角、陰影等樣式。此外，若要將這些樣式應(yīng)用于行內(nèi)元素，則需要使用display屬性修改元素的類型，……（詳見教材）【學(xué)生】觀看效果、聆聽、記錄、理解6.2.2設(shè)置網(wǎng)頁背景【教師】講解網(wǎng)頁背景的設(shè)置，并演示例子輔助理解1．背景顏色在CSS3中，使用background-color屬性設(shè)置背景顏色，具體格式為：……（詳見教材）2．背景圖像在CSS3中，使用background-image屬性設(shè)置背景圖像，具體格式為：……（詳見教材）3．背景圖像的顯示方式在CSS3中，使用background-repeat屬性設(shè)置背景圖像的顯示方式，具體格式為：……（詳見教材）4．背景圖像的起始位置在CSS3中，可以使用background-position屬性設(shè)置背景圖像的起始位置，具體格式為：……（詳見教材）5．背景圖像的固定方式在CSS3中，使用background-attachment屬性設(shè)置背景圖像是否固定或隨著頁面的其余部分滾動(dòng)，具體格式為：……（詳見教材）【課堂拓展】在CSS3中，使用background屬性可以在一個(gè)聲明中設(shè)置所有的背景屬性，具體格式為：……（詳見教材）【例6-4】設(shè)置網(wǎng)頁背景的樣式，包括背景顏色、背景圖像、顯示方式等……（詳見教材）【課堂拓展】為紀(jì)念北京奧運(yùn)會(huì)成功舉辦，國務(wù)院批準(zhǔn)從2009年起，將每年8月8日設(shè)置。為“全民健身日”。2014年10月，我國將全民健身上升為國家戰(zhàn)略，并謀劃和推動(dòng)全民健身事業(yè)，……（詳見教材）【學(xué)生】觀看效果、聆聽、記錄、理解通過講解，和演示例子，使學(xué)生掌握CSS3設(shè)置圖像樣式、網(wǎng)頁背景樣式的屬性實(shí)戰(zhàn)演練（15min）美化“金企鵝教育”主頁“精品圖書”模塊【教師】要求學(xué)生美化“金企鵝教育”主頁“精品圖書”模塊，遇到不會(huì)的問題可以掃描微課二維碼觀看視頻”美化“金企鵝教育”主頁“精品圖書”模塊“（詳見教材）“在第3章的實(shí)戰(zhàn)演練中已經(jīng)介紹過如何使用文本和圖像類標(biāo)簽制作“金企鵝教育”主頁的“精品圖書”模塊，這里介紹如何美化該模塊。步驟1在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第4章\實(shí)戰(zhàn)演練\4.2\JinqieProject”文件夾，然后打開“course.html”文檔。步驟2設(shè)置“精品圖書”模塊容器的樣式。在“index.css”文檔中添加以下代碼，使用選擇器#main_book設(shè)置樣式……（詳見教材）步驟3設(shè)置“精品圖書”標(biāo)題的樣式。在“index.css”文檔中添加以下代碼，使用選擇器.book_title、.book_title>h3等設(shè)置樣式，……（詳見教材）步驟4設(shè)置圖書展示的樣式。……（詳見教材）制作項(xiàng)目，觀看微課【教師】安排每個(gè)隊(duì)做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問題通過制作“美化“金企鵝教育”主頁“精品圖書”模塊，使學(xué)生鞏固所學(xué)知識(shí)，鍛煉動(dòng)手操作能力課堂小結(jié)（3min）【教師】簡要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課主要介紹了CSS3的常用屬性。通過本節(jié)課的學(xué)習(xí)，學(xué)生應(yīng)重點(diǎn)掌握以下內(nèi)容。（1）CSS3提供了多個(gè)設(shè)置字體樣式的屬性，包括font-family（字體類型）、font-size（字體大?。?、font-weight（字體粗細(xì)）、font-style（字體風(fēng)格）、color（字體顏色）等。（2）CSS3不僅提供了設(shè)置字體樣式的屬性，還提供了很多設(shè)置文本格式的屬性，包括text-indent（首行縮進(jìn)）、text-align（水平對齊）、text-decoration（文本修飾）、text-overflow（省略標(biāo)記）、letter-spacing（字符間距）、word-spacing（字間距）、line-height（行高）、word-break（自動(dòng)換行）、white-space（空白處理）等。（3）CSS3提供了設(shè)置網(wǎng)頁圖像樣式的屬性，包括width（寬度）、height（高度）、border-wid