HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案 第9章 設(shè)置背景、邊框、邊距和補(bǔ)白_第1頁
HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案 第9章 設(shè)置背景、邊框、邊距和補(bǔ)白_第2頁
HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案 第9章 設(shè)置背景、邊框、邊距和補(bǔ)白_第3頁
HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案 第9章 設(shè)置背景、邊框、邊距和補(bǔ)白_第4頁
HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案 第9章 設(shè)置背景、邊框、邊距和補(bǔ)白_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實踐□理實一體習(xí)題復(fù)習(xí)□考核評價□其他活動□學(xué)習(xí)量安排課內(nèi)：課外形式調(diào)查分析小組研討□實踐任務(wù)理論探究□考核評價□匯報展示□其他活動課外：序號9授課日期月日月日月日月日授課班級課內(nèi)教學(xué)內(nèi)容：第9章設(shè)置背景、邊框、邊距和補(bǔ)白課外學(xué)習(xí)任務(wù)：（1）課前：以小組為單位，討論設(shè)置背景、邊框、邊距和補(bǔ)白的相關(guān)知識并以PPT的形式記錄下來。（2）課后：=1\*GB3①使用相關(guān)屬性為元素添加背景圖像，并設(shè)置背景圖像的平鋪方式和滾動模式。=2\*GB3②使用邊框?qū)傩詾榫W(wǎng)頁中元素添加邊框樣式。=3\*GB3③使用margin屬性和padding屬性來設(shè)置網(wǎng)頁中元素的邊距和補(bǔ)白。教學(xué)目標(biāo)：知識目標(biāo)掌握背景顏色的設(shè)置。掌握背景圖像的設(shè)置。掌握邊框的設(shè)置。掌握邊距的設(shè)置。掌握補(bǔ)白的添加。能力目標(biāo)能夠掌握使用CSS實現(xiàn)背景、邊框、邊距和補(bǔ)白的設(shè)置；素質(zhì)目標(biāo)較強(qiáng)的專業(yè)知識和自學(xué)能力；豐富知識結(jié)構(gòu)，提升專業(yè)知識；掌握背景、邊框、邊距和補(bǔ)白的CSS屬性，理解并應(yīng)用專業(yè)知識。重點(diǎn)難點(diǎn)及解決方法：（1）重點(diǎn)：使用CSS設(shè)置背景和邊框解決方法：通過知識點(diǎn)講解+課堂示例相結(jié)合的方法，教師講解元素背景和邊框樣式的設(shè)置，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識；同時通過課堂示例展示，使學(xué)生可以掌握背景和邊框相關(guān)屬性的使用；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點(diǎn)：使用CSS添加邊距和補(bǔ)白解決方法：通過案例解析+啟發(fā)式教學(xué)講解的方式，細(xì)致講解使用CSS為元素添加邊距和補(bǔ)白。幫助學(xué)生掌握CSS中關(guān)于邊距和補(bǔ)白相關(guān)屬性的使用方法和技巧。從實用的角度幫助學(xué)生提高專業(yè)知識。課內(nèi)教學(xué)授課地點(diǎn)：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計算機(jī)、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習(xí)效果評價方式：對理論知識學(xué)習(xí)效果評價：采用課堂提問、課后習(xí)題和查閱技術(shù)論文研讀筆記的方式；對技能的評價：教師對學(xué)生上交網(wǎng)頁作品按制作要求進(jìn)行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學(xué)生自評、小組內(nèi)評價和教師評價相結(jié)合的方式。課后小結(jié)：填表說明：1.序號，指該課程授課的順序號，應(yīng)與授課計劃一致；2.授課形式在相應(yīng)的選項打“√”。課內(nèi)教學(xué)內(nèi)容及過程時間分配方法及手段【導(dǎo)引示例】jQuery提供了十分豐富的工具函數(shù)，這些工具函數(shù)主要用于數(shù)據(jù)操作。例如，使用jQuery的數(shù)組操作函數(shù)對數(shù)組元素進(jìn)行批量操作。1.背景顏色背景通常是指除了文本與邊框之外的所有顏色。在CSS中可以使用background-color來設(shè)置背景顏色。background-color屬性的語法格式如下。background-color:transparent|顏色|inherit各屬性值的含義如下。transparent：設(shè)置背景顏色為透明，該值為默認(rèn)值。顏色：可以為英文顏色名、RGB顏色或百分比顏色。inherit：繼承父級樣式。HTML中的大多數(shù)標(biāo)簽都可以設(shè)置背景顏色，如<body>、<div>、<td>等。2.背景圖像【設(shè)置背景圖像】在HTML中設(shè)置網(wǎng)頁背景圖像的方式為<bodybackground="圖片URL">。在CSS中設(shè)置背景圖像的屬性為background-image，該屬性不但可以設(shè)置網(wǎng)頁背景圖像，還可以設(shè)置表格、單元格、按鈕等元素的背景圖像。background-image屬性的語法格式如下。background-image:none|url(uri)|inherit各屬性值的含義如下。none：無背景圖像，該值為默認(rèn)值。url(uri)：圖像的URL地址，該類地址可以是絕對地址或相對地址。inherit：繼承父級樣式?！驹O(shè)置固定背景圖像】通常在為網(wǎng)頁設(shè)置背景圖像之后，背景圖像都會平鋪在網(wǎng)頁的下方。當(dāng)網(wǎng)頁內(nèi)容比較多時，拖動滾動條，網(wǎng)頁的背景圖像會跟著網(wǎng)頁的內(nèi)容一起滾動。在CSS中使用background-attachment屬性可以將背景圖像固定在瀏覽器上，此時拖動滾動條，背景圖像不會隨著網(wǎng)頁內(nèi)容的滾動而滾動，看起來好像文字是浮動在圖片上似的。background-attachment屬性的語法格式如下。background-attachment:scroll|fixed|inherit各屬性值的含義如下。scroll：背景圖像隨內(nèi)容滾動，該值為默認(rèn)值。fixed：背景圖像固定，不隨內(nèi)容滾動。inherit：繼承父級樣式。【設(shè)置背景圖像平鋪方式】在HTML中，如果背景圖像小于瀏覽器窗口大小，瀏覽器會自動將背景圖像平鋪以充滿整個瀏覽器窗口。不過在很多情況下，這種方式并不是展現(xiàn)背景圖像最好的方式。在

CSS

中可以通過background-repeat屬性來設(shè)置背景圖像的平鋪方式，background-repeat屬性的語法格式如下。background-repeat:repeat|no-repeat|repeat-x|repeat-y|inherit各屬性值的含義如下。repeat：平鋪背景圖像，該值為默認(rèn)值。no-repeat：不平鋪背景圖像。repeat-x：背景圖像在水平方向平鋪。repeat-y：背景圖像在垂直方向平鋪。inherit：繼承父級樣式?！颈尘皥D像定位】在默認(rèn)情況下，背景圖像都是從元素的左上角開始顯示的。使用background-position屬性可以更改背景圖像的開始顯示位置，其語法格式如下。background-position:位置的具體值設(shè)置背景圖像位置的屬性值有多種方式：可以為x、y軸方向的百分比或絕對值方式，也可以使用表示位置的英文名稱方式。設(shè)置背景圖像位置的具體的屬性取值及其含義如表9.1所示。表9.1設(shè)置背景圖像位置的具體的屬性取值及其含義屬性取值方式及取值含義百分比（x%y%）起始位置與左上角的距離占整個元素的比例，包括水平方向和垂直方向。例如，設(shè)置頁面的背景圖像，則會以整個頁面的大小為依據(jù)絕對值（x,y）起始位置的絕對坐標(biāo)（以左上角為原點(diǎn)），包括橫坐標(biāo)和縱坐標(biāo)。使用這種格式時需要同時設(shè)置長度單位top使圖像在垂直方向上居于頂端bottom使圖像在垂直方向上居于底端left使圖像在水平方向上居于左端right使圖像在水平方向上居于右端center使圖像在水平方向或垂直方向居中顯示在這些取值方式中，百分比方式和絕對值方式可以混用，即前面是百分比，后面是數(shù)值；同樣地，前面可以是數(shù)值，后面可以是百分比。注意：無論使用哪一種取值方式，都應(yīng)該包括水平方向和垂直方向兩個位置，它們之間用空格分開。3.邊框【設(shè)置邊框樣式】邊框樣式在邊框的幾個屬性中可以說是最重要的。設(shè)置邊框樣式除了可以改變HTML中呆板的邊框樣式外，在某些時候還可以控制邊框是否顯示。在CSS中設(shè)置邊框樣式的屬性為border-style，該屬性的語法格式如下。border-style:邊框的樣式值開發(fā)者可以為邊框設(shè)置多種線條效果，也就是設(shè)置邊框的樣式值，如實線、點(diǎn)線、短線等。邊框的線條具體屬性取值及其含義效果如表9.2所示。屬性值含義線條的效果none無邊框solid實線效果dotted點(diǎn)線效果，即邊框由點(diǎn)組成dashed短線效果，即邊框由多個短線組成double雙實線效果groove帶立體效果的溝槽ridge突出的脊形效果inset內(nèi)嵌一個立體的邊框outset外嵌一個立體的邊框注意：只有邊框和元素以及頁面其他屬性結(jié)合在一起時，才能真正展現(xiàn)頁面的風(fēng)格。表9.2中給出的效果可能不能很好地體現(xiàn)出來，讀者可以在實例中應(yīng)用不同的值來體會其風(fēng)格。其中，groove、ridge、inset、outset和邊框顏色結(jié)合設(shè)置能達(dá)到更好的效果?！驹O(shè)置不同的邊框樣式】使用border-style屬性也可以為對象的4個邊框設(shè)置不同的樣式，其設(shè)置方法與border-width屬性類似。開發(fā)者可以直接使用border-style屬性設(shè)置4個邊框的樣式，它們對應(yīng)的邊框順序依次是上邊框、右邊框、下邊框和左邊框。如果只設(shè)置了1個邊框樣式，則會對4個邊框同時起作用；如果設(shè)置了2個，則第1個用于上下邊框，第2個用于左右邊框；如果提供3個，則第1個用于上邊框，第2個用于左右邊框，第3個用于下邊框。【設(shè)置邊框?qū)挾取吭贖TML中可以使用border屬性來設(shè)置table元素的邊框?qū)挾?，在CSS中可以使用border-width屬性來設(shè)置邊框?qū)挾?。border-width屬性不僅可以設(shè)置表格的邊框?qū)挾?，還可以設(shè)置任何一個有邊框的對象的邊框?qū)挾?。border-width屬性的語法格式如下。border-width:medium|thin|thick|數(shù)值各屬性值的含義如下。medium：默認(rèn)寬度。thin：比默認(rèn)寬度小。thick：比默認(rèn)寬度大。數(shù)值：以絕對單位數(shù)值或相對單位數(shù)值來指定邊框的寬度?！驹O(shè)置不同的邊框?qū)挾取渴褂胋order-width屬性不僅可以設(shè)置整個邊框的寬度，還可以設(shè)置單個邊框的寬度。其用法與設(shè)置邊框樣式一樣，如果只設(shè)置了1個邊框?qū)挾?，則會對4個邊框同時起作用；如果設(shè)置了2個邊框?qū)挾?，則第1個應(yīng)用于上下邊框，第2個應(yīng)用于左右邊框；如果提供3個邊框?qū)挾?，則第1個應(yīng)用于上邊框，第2個應(yīng)用于左右邊框，第3個應(yīng)用于下邊框?！驹O(shè)置邊框顏色】在HTML中無法為表格設(shè)置邊框顏色，而CSS中的border-color屬性可以做到，并且不僅可以為表格設(shè)置邊框顏色，還可以設(shè)置幾乎所有塊對象的邊框顏色，如p、div等。border-color屬性的語法格式如下。border-color:顏色|transparent各屬性值的含義如下。顏色：邊框的顏色，可以是顏色英文名、RGB表示法和百分?jǐn)?shù)表示法。transparent：透明顏色，即不設(shè)置顏色?！驹O(shè)置不同的邊框顏色】使用border-color屬性不僅可以統(tǒng)一設(shè)置4個邊框的顏色，還可以設(shè)置單個邊框的顏色，其設(shè)置方法與border-width屬性和border-style屬性類似。【綜合設(shè)置邊框效果】在CSS中，還可以使用border屬性直接設(shè)置邊框的整體效果，其語法格式如下。border:邊框?qū)挾冗吙驑邮竭吙蝾伾_發(fā)者可以只設(shè)置其中的一項或幾項屬性值，但如果要正常顯示設(shè)置的邊框效果，就需要設(shè)置邊框的樣式，即使是采用默認(rèn)的solid。說明：border屬性一般用于設(shè)置統(tǒng)一的邊框風(fēng)格，即使用該屬性設(shè)置邊框后，元素的4個邊框都采用該效果。即使設(shè)置了多個寬度，也只取最后一個值。如果希望元素4個邊框的效果不同，還是要分別設(shè)置。4.邊距【設(shè)置上邊距】在CSS中可以分別為一個元素設(shè)置其各個方向的邊界寬度。上邊距就是指元素與它上面的元素之間的距離，采用的是margin-top屬性。設(shè)置上邊距的語法格式如下。margin-top:距離值這里的距離值可以是百分比方式，也可以是由數(shù)值和單位組成的確定距離。如果只給出一個數(shù)值，則默認(rèn)單位是px。百分比是以該元素的上一級元素為基礎(chǔ)設(shè)置的?！驹O(shè)置下邊距】下邊距與上邊距相對，是指元素距離下方元素的邊距值，其語法格式如下。margin-bottom:距離值這里的距離值同樣可以是百分比或具體的數(shù)值加單位方式。如果只給出一個數(shù)值，則會認(rèn)為其單位是px。【設(shè)置左邊距】左邊距就是指元素與其左側(cè)元素的距離。設(shè)置左邊距的語法格式如下。margin-left:距離值這里的距離值可以采用百分比方式，也可以采用數(shù)值加單位方式來設(shè)置。如果僅給出一個數(shù)值，其單位默認(rèn)為px?！驹O(shè)置右邊距】右邊距就是指元素與其右側(cè)元素的距離。設(shè)置右邊距的語法格式如下。margin-right:距離值這里的距離值可以是百分比方式的，也可以是具體的數(shù)值方式的。設(shè)置為具體數(shù)值時，可以同時設(shè)置其單位；如果不設(shè)置單位，則默認(rèn)單位為px?！揪C合設(shè)置邊距】如果要同時設(shè)置某個元素的4個邊距，除了可以分別設(shè)置外，還可以使用復(fù)合屬性margin設(shè)置。其語法格式如下。margin:各個邊距的值這里可以設(shè)置1~4個邊距值。設(shè)置1個值時，同時作用于元素的4個方向；設(shè)置2個值時，分別作用于上下和左右邊距；設(shè)置3個值時，分別作用于上邊距、左右邊距和下邊距；設(shè)置4個值時，按照上、右、下、左的順序起作用。5.補(bǔ)白【設(shè)置頂端補(bǔ)白】頂端補(bǔ)白是指元素的內(nèi)容與其上邊框的距離，一般用來設(shè)置頁面補(bǔ)白。其語法格式如下。padding-top:距離值其中，距離值一般采用數(shù)值的方式，并可以為其添加單位。如果沒有設(shè)置單位，則默認(rèn)以px為單位?！驹O(shè)置底部補(bǔ)白】底部補(bǔ)白就是指設(shè)置頁面元素與下邊框的距離。其語法格式如下。padding-bottom:距離值其中，距離值一般采用數(shù)值加單位的方式。如果省略單位，則默認(rèn)以px為單位?！驹O(shè)置左側(cè)補(bǔ)白】左側(cè)補(bǔ)白是指頁面中的元素與左側(cè)邊界的間隔。其語法格式如下。padding-left:距離值一般采用數(shù)值加單位的方式設(shè)置距離。如果省略單位，則默認(rèn)以px為單位。【設(shè)置右側(cè)補(bǔ)白】右側(cè)補(bǔ)白是指頁面中元素與右側(cè)邊界的間隔。其語法格式如下。padding-right:距離值一般采用數(shù)值加單位的方式設(shè)置距離。如果省略單位，則默認(rèn)以px為單位?！揪C合設(shè)置補(bǔ)白】如果要同時設(shè)置某個元素的4個補(bǔ)白，除了可以分別設(shè)置外，還可以使用復(fù)合屬性padding來設(shè)置。其語法格式如下。padding:各個方向的補(bǔ)白這里可以設(shè)置1~4個補(bǔ)白值。設(shè)置1個值時，同時作用于4個方向；設(shè)置2個值時，分別作用于上下和左右方向；設(shè)置3個值時，分別作用于頂端補(bǔ)白、左右補(bǔ)白和底部補(bǔ)白；設(shè)置4個值時，按照上、右、下、左的順序起作用。6.教學(xué)評價【組織階段考核與學(xué)生自評互評、展示考核結(jié)果】本次課的考核注重過程評價：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評價表》，組織學(xué)生自評、互評。7．上機(jī)指導(dǎo)1．使用相關(guān)屬性為元素添加背景圖像，并設(shè)置背景圖像的平鋪方式和滾動模式。2．使用邊框?qū)傩詾榫W(wǎng)頁中元素添加邊框樣式。3．使用margin屬性和padding屬性來設(shè)置網(wǎng)頁中元素的邊距和補(bǔ)白。8.板書設(shè)計背景顏色背景圖像邊框邊距補(bǔ)白教學(xué)評價上機(jī)指導(dǎo)課外學(xué)習(xí)任務(wù)及學(xué)習(xí)指導(dǎo)課前：【教師布置調(diào)研任務(wù)】調(diào)研主題：《分析如何設(shè)置背景、邊框、邊距和補(bǔ)白》要求：以小組為單位，分析設(shè)置背景、邊框、邊距和補(bǔ)白，同時制作匯報PPT，提交到

溫馨提示

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

最新文檔

評論

0/150

提交評論