《網頁設計與制作（活頁式）》 教案 項目4 盒子模型_第1頁
《網頁設計與制作（活頁式）》 教案 項目4 盒子模型_第2頁
《網頁設計與制作（活頁式）》 教案 項目4 盒子模型_第3頁
《網頁設計與制作（活頁式）》 教案 項目4 盒子模型_第4頁
《網頁設計與制作（活頁式）》 教案 項目4 盒子模型_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

《網頁設計與制作》教學設計課程名稱：網頁設計與制作授課年級：20年級授課學期：20學年第一學期教師姓名：老師

20年月日課題名稱項目四盒子模型計劃課時課時內容分析盒子模型是CSS網頁布局的關鍵技術。掌握盒子模型的相關屬性，更好地控制網頁中各個元素所呈現的效果。本項目將對盒子模型的概念、盒子相關屬性及標簽的類型與轉換進行講解。教學目標理解盒子模型的概念。掌握盒子模型的相關屬性。熟悉標簽的類型與轉換。重點及措施教學重點：使用CSS設置背景；使用塊元素和行內標簽措施：通過上機操作加強學習和補充案例進行鞏固。難點及措施教學難點：使用CSS樣式制作頁面結構措施：通過上機操作加強學習和補充案例進行鞏固。教學方式教學采用教師課堂講授為主，使用教學PPT講解。教學過程任務4.1認識盒子模型4.1.1盒子模型的概念內容學習分組討論對新課進行講解前，先讓學生分組討論以下問題：什么是盒子模型？請小組代表對以上問題發(fā)表見解。教師對上述問題進行解釋：答案：盒子模型是指把HTML5頁面中的元素看作矩形的盒子，每個矩形都是由元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成的。知識點講解講解盒子模型的概念（1）教師展示PPT，對盒子模型的概念進行具體講解。盒子模型是指把HTML5頁面中的元素看作矩形的盒子，每個矩形都是由元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成的。實例1認識盒子模型在<body>標簽中使用<div>標簽定義了一個盒子“box”，并對“box”設置了若干屬性。div是英文division的縮寫，意為分割、分開。<div>標簽就是一個區(qū)塊容器標簽，簡稱塊標簽，塊通常稱為盒子。塊標簽可以容納段落、標題、表格、圖像等各種網頁元素。<div>標簽可以嵌套<div>標簽。實際上DIV+CSS布局就是將網頁內容放入若干<div>標簽中，并使用CSS設置這些<div>標簽的屬性。（2）學生自主提問，教師對疑難問題進行解答。講解盒子模型結構（1）教師展示PPT，對盒子模型結構進行具體講解。一個盒子實際所占有的寬度（或高度）是由“內容+內邊距+邊框+外邊距”組成的。因此，實例1中定義的盒子box的實際寬度和高度均是310px。（2）學生自主提問，教師對疑難問題進行解答。講解<div>標簽的屬性和含義（1）教師展示PPT，對<div>標簽的屬性和含義進行具體講解。注意：1）事實上所有的網頁元素本質上都是以盒子的形式存在的。例如，<body><P><h1~h6><ul><li>等元素都是盒子，這些元素都有默認的盒子屬性值。2）給盒子添加背景色或背景圖像時，該元素的背景色或背景圖像將出現在內邊距中。3）雖然每個盒子模型都擁有內邊距、邊框、外邊距、寬和高這些基本屬性，但是并不要求每個元素都必須定義這些屬性。（2）學生自主提問，教師對疑難問題進行解答。4.1.2盒子模型的相關屬性內容學習分組討論對新課進行講解前，先讓學生分組討論以下問題：盒子模型主要有哪些屬性？請小組代表對以上問題發(fā)表見解。教師對上述問題進行解釋：答案：邊框屬性、內邊距屬性、外邊距屬性。知識點講解講解邊框屬性（1）教師展示PPT，對邊框屬性進行具體講解。邊框屬性設置格式如下：border-top：上邊框寬度樣式顏色border-right：右邊框寬度樣式顏色border-bottom：下邊框寬度樣式顏色border-left：左邊框寬度樣式顏色若四個邊框具有相同的寬度、樣式和顏色，則可以設置如下：border：邊框寬度樣式顏色（2）學生自主提問，教師對疑難問題進行解答。講解內邊距屬性（1）教師展示PPT，對內邊距屬性進行具體講解。內邊距用于設置盒子中內容與邊框之間的距離，也常常稱為內填充。其設置方法類似于邊框屬性的設置，設置格式如下：padding-top：上內邊距大小padding-right：右內邊距大小padding-bottom：下內邊距大小padding-left：左內邊距大小若四個內邊距具有相同的大小，則可以設置如下：padding：內邊距大?。?）學生自主提問，教師對疑難問題進行解答。講解外邊距屬性（1）教師展示PPT，對外邊距屬性進行具體講解。外邊距用于設置盒子與其他盒子之間的距離。其設置格式如下：margin-top：上外邊距大小margin-right：右外邊距大小margin-bottom：下外邊距大小margin-left：左外邊距大小若四個外邊距具有相同的大小，則可以設置如下：margin：外邊距大?。?）學生自主提問，教師對疑難問題進行解答。4.1.3CSS設置背景內容學習分組討論對新課進行講解前，先讓學生分組討論以下問題：CSS中背景顏色的格式是什么？請小組代表對以上問題發(fā)表見解。教師對上述問題進行解釋：答案：background-color：#RRGGBB|#rgb(r，g，b)|預定義的顏色值。知識點講解講解設置背景顏色（1）教師展示PPT，對設置背景顏色進行具體講解。設置背景顏色的格式如下：background-color：#RRGGBB|#rgb(r，g，b)|預定義的顏色值實例2設置背景顏色（2）學生自主提問，教師對疑難問題進行解答。講解設置背景圖像（1）教師展示PPT，對設置背景圖像進行具體講解。設置背景顏色的格式如下：background-image：url（圖像）實例3設置背景圖像（2）學生自主提問，教師對疑難問題進行解答。任務4.2標簽的類型與轉換4.2.1標簽的類型內容學習分組討論對新課進行講解前，先讓學生分組討論以下問題：標簽有哪些類型？請小組代表對以上問題發(fā)表見解。教師對上述問題進行解釋：答案：塊標簽和行內標簽。知識點講解講解塊標簽（1）教師展示PPT，對塊標簽進行具體講解。塊標簽在頁面中以區(qū)域塊的形式出現，其特點是每個塊標簽通常都會占據一整行或多行，可以對其設置寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建。常見的塊標簽有<p><div><ul><ol><li>等，其中<div>標簽是典型的塊標簽。（2）學生自主提問，教師對疑難問題進行解答。講解行內標簽（1）教師展示PPT，對行內標簽進行具體講解。行內標簽也稱為內聯標簽或內嵌標簽，其特點是不必在新的一行開始，同時，也不要求其他標簽必須在新的一行開始。行內標簽一般不可以設置寬度、高度和對齊等屬性，常用于控制頁面中的特殊文本的樣式。常見的行內標簽有<strong><b><em><i><a><span>等，其中<span>標簽是典型的行內標簽。<span>標簽與<div>標簽一樣，它作為容器標簽而被廣泛應用在HTML5中。在<span>與</span>中間同樣可以容納各種HTML標簽，從而形成獨立的對象。<div>與<span>的區(qū)別在于<div>是一個塊標簽，它包圍的標簽會自動換行，而<span>僅僅是一個行內標簽，在它的前后不會換行。<span>沒有結構上的意義，純粹是應用樣式，當其他行內標簽都不合適時，就可以使用<span>標簽。下面舉例說明<span>標簽的使用。實例4使用<span>標簽（2）學生自主提問，教師對疑難問題進行解答。4.2.2標簽的轉換內容學習分組討論對新課進行講解前，先讓學生分組討論以下問題：如何讓行內標簽擁有塊標簽的某些屬性？請小組代表對以上問題發(fā)表見解。教師對上述問題進行解釋：答案：使用display屬性對標簽的類型進行轉換。知識點講解講解標簽的轉換（1）教師展示PPT，對標簽的轉換進行具體講解。網頁是由多個塊標簽和行內標簽構成的盒子排列而成的。如果希望行內標簽具有塊標簽的某些特性或者需要塊標簽具有行內標簽的某些特性，同時希望不獨占一行排列，則可以使用display屬性對標簽的類型進行轉換。display屬性常用的屬性值及含義（2）學生自主提問，教師對疑難問題進行解答。4.2.3塊標簽間的外邊距內容學習分組討論對新課進行講解前，先讓學生分組討論以下問題：如何計算塊標簽間的垂直外邊距？請小組代表對以上問題發(fā)表見解。教師對上述問題進行解釋：答案：當上下相鄰的兩個塊標簽相遇時，如果上面的標簽有下外邊距margin-bottom，下面的標簽有上外邊距margin-top，則它們之間的垂直間距不是兩者的和，而是兩者中的較大者。知識點講解講解塊標簽間的垂直外邊距（1）教師展示PPT，對塊標簽間的垂直外邊距進行具體講解。當上下相鄰的兩個塊標簽相遇時，如果上面的標簽有下外邊距margin-bottom，下面的標簽有上外邊距margin-top，則它們之間的垂直間距不是兩者的和，而是兩者中的較大者。實例5塊標簽間的垂直外邊距實例5定義了第一個塊的下外邊距為10px，定義了第二個塊的上外邊距為30px，此時兩個塊之間的垂直間距為30px，即為margin-bottom和marign-top中的較大者。（2）學生自主提問，教師對疑難問題進行解答。講解塊標簽間的水平外邊距（1）教師展示PPT，對塊標簽間的水平外邊距進行具體講解。當兩個相鄰的塊標簽水平排列時，如果左面的標簽有右外邊距margin-right，右面的標簽有左外邊距margin-left，則它們之間的水平間距是兩者的和。實例6塊標簽間的水平外邊距本例定義了第一個塊的右外邊距為10px，定義了第二個塊的左外邊距為30px，此時兩個塊之間的水平間距是40px，即為marign-right和marign-left的和。（2）學生自主提問，教師對疑難問題進行解答。任務4.3綜合案例——制作蘇軾簡介頁面內容學習分組討論對新課進行講解前，先讓學生分組討論以下問題：如何制作人物簡介頁面？請小組代表對以上問題發(fā)表見解。教師對上述問題進行解釋：答案：創(chuàng)建HTML5文檔→添加文本→添加CSS樣式→保存并瀏覽。知識點講解講解蘇軾簡介頁面的制作（1）教師展示PPT，對制作蘇軾簡介頁面進行具體講解。（2）學生自主提問，教師對疑難問題進行解答。實訓11實訓名稱制作春節(jié)簡介頁面實訓目標使用CSS樣式設置頁面實訓實施使用CSS樣式設置頁面，頁面設置要求如下。頁面結構要求：1.設置元素的外邊距為0。2.設置背景圖像，圖像平鋪。3.設置盒子的寬度為1000px，高度為自動值，邊距為1px，實線，藍色。4.設置元素的頁面上水平居中，內邊距為10px。5.設置標題水平居中，高度為30px。6.設置標題的行高，使文字垂直居中。正文要求：1.設置字體為宋體。2.設置段落文字大小為15px。3.設置首行縮進2個字符。4.設置行高為20px。5.設置段落間距為13px。（作品點評）教師對學生的提交的上機測試作品進行點評，指出代碼中容易出現bug的地方，并給與

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論