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

PAGE1PAGE1PAGE2PAGE2

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