HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第12章 控制元素布局_第1頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第12章 控制元素布局_第2頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第12章 控制元素布局_第3頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第12章 控制元素布局_第4頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第12章 控制元素布局_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

網(wǎng)頁設(shè)計(jì)與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實(shí)踐□理實(shí)一體習(xí)題復(fù)習(xí)□考核評(píng)價(jià)□其他活動(dòng)□學(xué)習(xí)量安排課內(nèi)：課外形式調(diào)查分析小組研討□實(shí)踐任務(wù)理論探究□考核評(píng)價(jià)□匯報(bào)展示□其他活動(dòng)課外：序號(hào)12授課日期月日月日月日月日授課班級(jí)課內(nèi)教學(xué)內(nèi)容：第12章控制元素布局課外學(xué)習(xí)任務(wù)：（1）課前：以小組為單位，討論控制元素布局的相關(guān)知識(shí)，并以PPT的形式記錄下來。（2）課后：=1\*GB3①通過絕對(duì)定位的方式設(shè)置元素的位置。=2\*GB3②通過浮動(dòng)屬性設(shè)置元素的位置。=3\*GB3③通過清除浮動(dòng)屬性，元素可恢復(fù)到默認(rèn)的位置。教學(xué)目標(biāo)：知識(shí)目標(biāo)掌握塊級(jí)元素和內(nèi)聯(lián)元素布局。掌握定位和浮動(dòng)樣式的使用。掌握溢出與剪切方法。掌握對(duì)象的顯示與隱藏方法能力目標(biāo)能夠獨(dú)立實(shí)現(xiàn)元素的定位和浮動(dòng)；能夠獨(dú)立應(yīng)對(duì)元素的溢出和裁剪的處理。素質(zhì)目標(biāo)較強(qiáng)的專業(yè)知識(shí)和自學(xué)能力；豐富知識(shí)結(jié)構(gòu)，提升專業(yè)知識(shí)；掌握控制元素布局的能力，理解并應(yīng)用專業(yè)知識(shí)。重點(diǎn)難點(diǎn)及解決方法：（1）重點(diǎn)：定位和浮動(dòng)解決方法：通過知識(shí)點(diǎn)講解+課堂在線展示相結(jié)合的方法，教師講解定位和浮動(dòng)的相關(guān)屬性，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識(shí)；同時(shí)通過課堂在線展示，使學(xué)生可以更直觀的了解元素定位和浮動(dòng)的方法；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點(diǎn)：溢出和裁剪解決方法：通過代碼講解+在線演示的的方式教學(xué)，細(xì)致講解網(wǎng)頁中遇到元素溢出后的各種處理方式。幫助學(xué)生掌握溢出和裁剪的的實(shí)現(xiàn)方法和技巧。從實(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í)效果評(píng)價(jià)方式：對(duì)理論知識(shí)學(xué)習(xí)效果評(píng)價(jià)：采用課堂提問、課后習(xí)題和查閱技術(shù)論文研讀筆記的方式；對(duì)技能的評(píng)價(jià)：教師對(duì)學(xué)生上交網(wǎng)頁作品按制作要求進(jìn)行綜合性評(píng)價(jià)；對(duì)職業(yè)素養(yǎng)的評(píng)價(jià)：采用學(xué)生自評(píng)、小組內(nèi)評(píng)價(jià)和教師評(píng)價(jià)相結(jié)合的方式。課后小結(jié)：填表說明：1.序號(hào)，指該課程授課的順序號(hào)，應(yīng)與授課計(jì)劃一致；2.授課形式在相應(yīng)的選項(xiàng)打“√”。課內(nèi)教學(xué)內(nèi)容及過程時(shí)間分配方法及手段1.塊級(jí)元素和內(nèi)聯(lián)元素【塊級(jí)元素和內(nèi)聯(lián)元素的概念】塊級(jí)元素生成的是一個(gè)矩形框，并且和相鄰的塊級(jí)元素依次垂直排列，不會(huì)排在同一行。例如，p、ul、h1、form等這些元素都是塊級(jí)元素，它們總是以一個(gè)塊的形式出現(xiàn)，總是單獨(dú)占據(jù)一行。內(nèi)聯(lián)元素通俗來說就是文本的顯示方式，我們常用的a、img、input都屬于內(nèi)聯(lián)元素。內(nèi)聯(lián)元素的顯示特點(diǎn)就是像文本一樣顯示，各個(gè)元素之間橫向排列，到最右端自動(dòng)換行，不會(huì)獨(dú)自占據(jù)一行。當(dāng)然，塊級(jí)元素也能變換成內(nèi)聯(lián)元素，這時(shí)就要用到下面所講的定位和浮動(dòng)了。【div元素和span元素】為了更好地理解塊級(jí)元素和內(nèi)聯(lián)元素，這里重點(diǎn)介紹在CSS布局中經(jīng)常使用的div元素和span元素。利用這兩個(gè)元素，加上CSS對(duì)其樣式的設(shè)計(jì)，可以很方便地實(shí)現(xiàn)各種效果。1．div元素div

元素簡(jiǎn)單而言就是一個(gè)獨(dú)立的對(duì)象，它是一個(gè)標(biāo)準(zhǔn)的塊級(jí)元素。用它可以容納各種元素，從而方便排版。用CSS設(shè)置樣式時(shí)，只需要對(duì)div進(jìn)行相應(yīng)的控制，其中包含的各個(gè)元素都會(huì)隨之改變。div元素的語法格式如下。<div>各種元素或文字</div>2．span元素span元素與div元素一樣，作為容器標(biāo)簽被廣泛應(yīng)用在HTML中。在<span>和</span>之間同樣可以容納各種HTML元素，從而形成獨(dú)立的對(duì)象。span元素與div元素的區(qū)別在于，div元素是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)換行，而span元素是一個(gè)內(nèi)聯(lián)元素，它包圍的元素不會(huì)自動(dòng)換行。span元素沒有結(jié)構(gòu)上的意義，純粹是為了應(yīng)用樣式。當(dāng)其他內(nèi)聯(lián)元素都不適合時(shí)，就可以使用span元素。span元素的語法格式如下。<span>各種元素或文字</span>2.定位【定位模式】在CSS中可以使用position屬性來設(shè)置定位的方式，position屬性的語法格式如下。position:static|relative|absolute|fixed|inherit;各屬性值的含義如下。static：靜態(tài)定位，即無特殊定位。元素以普通方式生成，塊級(jí)元素生成的是一個(gè)矩形框，是文檔流中的一部分。而內(nèi)聯(lián)級(jí)框是由一個(gè)或多個(gè)行框的上下文生成。這些行框流動(dòng)于父級(jí)元素中。該值為默認(rèn)值。relative：相對(duì)于元素正常位置進(jìn)行定位。使用該定位方式，可以配合使用top、left、right和bottom這4個(gè)偏移屬性值來設(shè)置元素相對(duì)于其正常位置的偏移量。absolute：絕對(duì)定位，該定位方式會(huì)以最近的已定位的父元素（父元素的position屬性設(shè)置為relative或absolute）為原點(diǎn)進(jìn)行定位，如果元素沒有已定位的父元素，那么它會(huì)以<html>所在位置為原點(diǎn)進(jìn)行定位。定位時(shí)的偏移量也需要top、left、right和bottom這4個(gè)偏移屬性值配合。該定位方式會(huì)使元素的位置與文檔流無關(guān)，因此不占據(jù)文檔流的空間，使該元素可以與文檔流中的其它元素進(jìn)行重疊。fixed：相對(duì)于瀏覽器定位。使用該定位方式，可以配合使用top、left、right和bottom這4個(gè)偏移屬性值來設(shè)置元素相對(duì)于瀏覽器窗口的偏移量。通過該方式定位的元素會(huì)固定在一個(gè)位置不動(dòng)。當(dāng)網(wǎng)頁發(fā)生滾動(dòng)時(shí)，該元素不會(huì)跟隨網(wǎng)頁滾動(dòng)。inherit：繼承父級(jí)的定位方式。父元素是什么定義方式，當(dāng)前元素就設(shè)置為對(duì)應(yīng)的定位方式?！酒啤吭诙ㄎ荒Ｊ街?，有3種定位模式（relative、absolute和static）都需要使用偏移屬性來指定定位的位置。在CSS中，偏移量有4個(gè)屬性：left、right、top和bottom，分別代表左偏移量、右偏移量、上偏移量和下偏移量。這4個(gè)屬性的語法格式如下。left:長(zhǎng)度|百分比|auto|inheritright:長(zhǎng)度|百分比|auto|inherittop:長(zhǎng)度|百分比|auto|inheritbottom:長(zhǎng)度|百分比|auto|inherit各屬性值的含義如下。長(zhǎng)度：可以是絕對(duì)單位數(shù)值，也可以是相對(duì)單位數(shù)值，用于指明偏移的幅度。百分比：以百分比的形式指定偏移幅度，這個(gè)百分比為父級(jí)元素的寬度和高度的百分比。auto：無特定的偏移量，由瀏覽器自己分配。該值為默認(rèn)值。inherit：繼承父級(jí)樣式。為一個(gè)元素設(shè)置了偏移之后，這個(gè)元素的所有部分都會(huì)跟著一起偏移，如邊框、邊距、填充等。注意：偏移量不僅可以為正值，還可以為負(fù)值?！揪C合應(yīng)用】學(xué)習(xí)了定位和偏移，并知道定位的幾種模式后，下面結(jié)合偏移來分別介紹這幾種定位的不同之處。1．靜態(tài)定位靜態(tài)定位模式是默認(rèn)定位模式。該模式對(duì)定位沒有任何要求，完全由瀏覽器自動(dòng)生成。對(duì)塊級(jí)元素來說，通常是生成一個(gè)矩形框，如div元素等。對(duì)內(nèi)聯(lián)元素來說，則按正常的文檔流生成，如b元素等。注意：塊級(jí)元素是能引起換行的元素，如p、div、hr等。內(nèi)聯(lián)元素是不能引起換行的元素，如b、sup等。將元素的position屬性設(shè)置為static可以設(shè)置元素的靜態(tài)定位。由于靜態(tài)定位模式?jīng)]有對(duì)元素在定位方面有任何要求，因此所有的偏移屬性在該模式下都是不起作用的?！径ㄎ辉氐膶盈B順序】當(dāng)一個(gè)頁面內(nèi)有多個(gè)層時(shí)，需要設(shè)置這些層的層疊順序，這樣才不會(huì)擋住頁面中需要顯示的內(nèi)容。一般情況下，越晚添加的層，位置也越靠上。設(shè)置層疊順序的語法格式如下。z-index:順序號(hào)層疊順序是通過設(shè)置其所在的層順序號(hào)來實(shí)現(xiàn)的。取值為1，表示該層位于最上層，也就是沒有其他層會(huì)覆蓋該層。順序號(hào)越大，層越靠下，被覆蓋的概率也越大。3.浮動(dòng)通常在一個(gè)網(wǎng)頁文件中，文檔流都是從上到下、由左向右流動(dòng)的。對(duì)內(nèi)聯(lián)元素而言，創(chuàng)建一個(gè)元素之后，會(huì)在其右接著創(chuàng)建其他元素；對(duì)塊級(jí)元素而言，在創(chuàng)建一個(gè)元素之后，會(huì)在其下方接著創(chuàng)建其他元素。CSS中的浮動(dòng)可以讓某些元素脫離這種文檔流的流動(dòng)方式?！靖?dòng)的概念】相信讀者對(duì)浮動(dòng)的概念不會(huì)太陌生。在介紹圖片和表格時(shí)都曾介紹過圖片和表格的對(duì)齊方式，這種對(duì)齊方式其實(shí)就是“浮動(dòng)”。例如，“<imgsrc="a.jpg"align="right">”會(huì)讓圖片向右方浮動(dòng)，并且其他元素都會(huì)圍繞著圖片“流動(dòng)”。在HTML中只有圖片與表格可以浮動(dòng)，而使用CSS可以讓所有元素都浮動(dòng)起來?！驹O(shè)置浮動(dòng)】在CSS中使元素浮動(dòng)的屬性為float，其語法格式如下。float:left|right|none各屬性值的含義如下。left：對(duì)象居左浮動(dòng)，文本流向?qū)ο蟮挠覀?cè)。right：對(duì)象居右浮動(dòng)，文本流向?qū)ο蟮淖髠?cè)。none：對(duì)象不浮動(dòng)。該值為默認(rèn)值?！厩宄?dòng)】一個(gè)元素被設(shè)置為浮動(dòng)之后，如果沒有特別指示，這個(gè)元素之后的所有對(duì)象都會(huì)圍繞該元素浮動(dòng)。如圖12.9所示，其中很明顯是兩個(gè)不同的對(duì)象，文本會(huì)圍繞著圖片顯示。在這種情況下，如果希望在“鴨子的習(xí)性”標(biāo)題處停止圍繞圖片顯示，這時(shí)就需要清除“鴨子的習(xí)性”這段文本的左浮動(dòng)樣式。在CSS中可以使用clear屬性來清除浮動(dòng)效果，其語法格式如下。clear:none|left|right|both各屬性值的含義如下。none：不清除浮動(dòng)，該值為默認(rèn)值。left：不允許左邊有浮動(dòng)的元素。right：不允許右邊有浮動(dòng)的元素。both：左右兩側(cè)都不允許有浮動(dòng)的元素。4.溢出與剪切當(dāng)一個(gè)元素的大小無法容納其中的內(nèi)容時(shí)，就會(huì)產(chǎn)生溢出現(xiàn)象，也就是元素中的內(nèi)容已經(jīng)顯示在元素外面。剪切的作用是只顯示元素中的某一部分，把其余部分剪切掉?！驹O(shè)置溢出效果】在CSS中可以通過overflow屬性來處理溢出情況。overflow屬性的語法格式如下。overflow:visible|hidden|scroll|auto|inherit各屬性值的含義如下。visible：不剪切溢出的內(nèi)容，也不添加滾動(dòng)條。該值為默認(rèn)值。hidden：隱藏溢出的內(nèi)容，用戶將看不到溢出部分的內(nèi)容。scroll：添加橫向與縱向滾動(dòng)條，用戶可以拖動(dòng)滾動(dòng)條來查看溢出部分的內(nèi)容。auto：由瀏覽器決定使用什么方法處理溢出的內(nèi)容，通常是在必要時(shí)顯示滾動(dòng)條?！驹O(shè)置水平方向內(nèi)容超出范圍的處理方式】使用overflow屬性可以設(shè)置內(nèi)容超出范圍時(shí)的處理方式，且一旦設(shè)置了，則對(duì)水平方向和垂直方向同時(shí)起作用。如果只需要設(shè)置其中一個(gè)方向，可以單獨(dú)設(shè)置。使用overflow-x可以設(shè)置水平方向上的處理方式，其語法格式如下。overflow-x:visible|auto|hidden|scroll各屬性值的含義如下。visible：表示可見，即使內(nèi)容超出了范圍，依然完整顯示。auto：表示自動(dòng)根據(jù)情況顯示滾動(dòng)條。hidden：表示裁切超出范圍的內(nèi)容。scroll：表示顯示滾動(dòng)條?！驹O(shè)置垂直方向內(nèi)容超出范圍的處理方式】使用overflow-y可以設(shè)置當(dāng)內(nèi)容超出元素的范圍時(shí)，在垂直方向上的處理方式，其語法格式如下。overflow-y:visible|auto|hidden|scroll【內(nèi)容的剪切】在CSS中可以使用clip屬性來剪切對(duì)象。所謂“剪切”，只是在對(duì)象上劃出一個(gè)矩形的區(qū)域，屬于該區(qū)域中的部分會(huì)被顯示出來，不屬于該區(qū)域的部分會(huì)被隱藏。clip屬性的語法格式如下。clip:auto|rect(上右下左)|inherit各屬性值的含義如下。auto：不剪切。該值為默認(rèn)值。rect：按上、右、下、左的順序劃出一個(gè)區(qū)域，屬于該區(qū)域內(nèi)的部分顯示，不屬于該區(qū)域內(nèi)的部分隱藏。rect的4個(gè)參數(shù)分別代表上、右、下、左4條邊距。需要注意的是，這4條邊距并不是指與上邊框、右邊框、下邊框、左邊框之間的距離，而是相對(duì)該對(duì)象的左上角坐標(biāo)而言的距離。注意：clip屬性可以作用在任何對(duì)象上，但該對(duì)象必須是使用position屬性定位的對(duì)象，并且position屬性值不能為static或relative。5.對(duì)象的顯示與隱藏塊狀對(duì)象除了可以設(shè)置溢出與剪切之外，還可以對(duì)整個(gè)塊設(shè)置顯示或隱藏。顯示、隱藏與溢出、剪切不同，溢出與剪切影響的只是對(duì)象的局部（當(dāng)然也可以將局部擴(kuò)大到全部），顯示與隱藏影響的是整個(gè)對(duì)象。在CSS中可以使用visibility（可見性）設(shè)置對(duì)象是否可見。visibility屬性的語法格式如下。visibility:visible|hidden|collapse各屬性值的含義如下。visible：對(duì)象為可見的。hidden：對(duì)象為不可見的。6.教學(xué)評(píng)價(jià)【組織階段考核與學(xué)生自評(píng)互評(píng)、展示考核結(jié)果】本次課的考核注重過程評(píng)價(jià)：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評(píng)價(jià)表》，組織學(xué)生自評(píng)、互評(píng)。7．上機(jī)指導(dǎo)1．通過絕對(duì)定位的方式設(shè)置元素的位置。2．

溫馨提示

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

評(píng)論

0/150

提交評(píng)論