《》教案20-20學(xué)年第學(xué)期課程名稱：授課教師：職稱：開課部門：年月日

《》教案首頁課程名稱授課專業(yè)班級(jí)授課教師職稱部門課程類型學(xué)位課□公共必修課□專業(yè)必修課□素質(zhì)拓展必修課□公共選修課□專業(yè)選修課□素質(zhì)拓展選修課非學(xué)位課□公共必修課專業(yè)必修課□素質(zhì)拓展必修課□公共選修課□專業(yè)選修課□素質(zhì)拓展選修課課程性質(zhì)□理論□實(shí)踐理論+實(shí)踐考核方式考試□考查課程教學(xué)總學(xué)時(shí)數(shù)64學(xué)分3.5學(xué)情分析大*年級(jí)的學(xué)生首次正式接觸WEB的相關(guān)概念，但是在之前的基礎(chǔ)課程中學(xué)過***（操作系統(tǒng)、計(jì)算機(jī)原理、Python編程、C語言編程）等相關(guān)專業(yè)方面基礎(chǔ)知識(shí)，具備有一定的計(jì)算機(jī)操作能力，與基礎(chǔ)應(yīng)用知識(shí)；并且在日常中大量使用電腦與手機(jī)等計(jì)算機(jī)設(shè)備，其中日常生活中也對(duì)于網(wǎng)頁的使用更是頗多。但對(duì)于WEB方面的專業(yè)知識(shí)沒有一個(gè)準(zhǔn)確、完整的知識(shí)體系構(gòu)建。教學(xué)方法談?wù)摲?、講授法、演示法、練習(xí)法、抽象法教材名稱《HTML5+CSS3Web前端開發(fā)技術(shù)》作者于麗娜出版社及出版時(shí)間人民郵電出版社2021.09參考書目作者出版社及出版時(shí)間教研室意見教研室主任簽字：年月日注：表中□選項(xiàng)請(qǐng)打“√”。每門課程只需填寫一次本表。

《》教案授課教師班級(jí)學(xué)時(shí)6授課日期教學(xué)任務(wù)《使用CSS3定位布局頁面》授課方式講授實(shí)踐授課地點(diǎn)多媒體教室實(shí)驗(yàn)/實(shí)訓(xùn)室□企業(yè)主要參考資料教學(xué)PPT、微課、動(dòng)畫、思維導(dǎo)圖課程思政視頻習(xí)題等教學(xué)目標(biāo)素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生團(tuán)隊(duì)合作精神；2.培養(yǎng)學(xué)生分析問題、解決問題的能力。知識(shí)目標(biāo)：1.了解使用position四種定位方式的特點(diǎn)；2.理解z-index屬性調(diào)整定位元素堆疊方式。能力目標(biāo)：1.掌握常見元素重疊覆蓋效果的實(shí)現(xiàn)；2.掌握頁面固定定位實(shí)現(xiàn)功能按鈕。教學(xué)內(nèi)容四種定位方式四種定位方式的對(duì)比z-index重點(diǎn)難點(diǎn)教學(xué)重點(diǎn)：四種定位方式四種定位方式的對(duì)比z-index教學(xué)難點(diǎn)：四種定位方式教學(xué)方法談?wù)摲?、講授法、演示法、練習(xí)法素材資源R文本素材R實(shí)物展示RPPT幻燈片□音頻素材R視頻素材R動(dòng)畫素材R圖形/圖像素材□網(wǎng)絡(luò)資源□其他課后作業(yè)任務(wù)一：總結(jié)提升任務(wù)二：能力進(jìn)階教學(xué)反思注：教案按授課次數(shù)填寫，每次授課均應(yīng)填寫一份本表。重復(fù)班授課可不另填寫教案。?

教學(xué)過程及內(nèi)容一、導(dǎo)入新課【約5分鐘】教師：網(wǎng)頁內(nèi)容呈現(xiàn)的方式是平面的，但網(wǎng)頁中要表達(dá)的內(nèi)容并不一定也是平面的，大多情況下，我們需要通過一定的元素層疊覆蓋，給瀏覽者營造出立體空間感或者層次感。我們將在項(xiàng)目首頁的課程列表部分通過定位樣式實(shí)現(xiàn)課程角標(biāo)效果、實(shí)現(xiàn)頁面頭部粘性定位、實(shí)現(xiàn)固定位置的置頂按鈕。通過講解相對(duì)定位和絕對(duì)定位的應(yīng)用，同學(xué)們要提高多角度分析問題，全方面看待問題的能力。二、新知識(shí)點(diǎn)、技能點(diǎn)講解【約x分鐘】新課講解1：【約10分鐘】教師：在CSS中有三種基本的布局機(jī)制，分別是標(biāo)準(zhǔn)流、浮動(dòng)和定位。position屬性與float屬性一樣都是CSS排版中非常重要的概念。position屬性從字面義即是位置的設(shè)置，進(jìn)行子元素在父元素內(nèi)部的位置確定。......值說明static默認(rèn)值，沒有定位作用。relative相對(duì)定位，主要表示根據(jù)自身原位置進(jìn)行位置偏移。absolute絕對(duì)定位，主要用來在具有定位屬性的父元素中，根據(jù)父元素的邊界距離來確定元素位置。fixed固定定位，類似于絕對(duì)定位，固定定位的定位參考依據(jù)為瀏覽器的可視區(qū)域。top距離量，配合relative、absolute、fixed進(jìn)行定位。right同top屬性。left同top屬性。bottom同top屬性。（案例演示）新課講解2：【約15分鐘】教師：使用relative屬性值設(shè)置元素的相對(duì)定位，除了將position屬性設(shè)置為relative之外，還需要指定一定的偏移量，水平方向使用left或right屬性來指定，垂直方向使用top或bottom屬性來指定。（案例演示）學(xué)生：（討論分析）教師：總結(jié)下相對(duì)定位的特點(diǎn)：設(shè)置相對(duì)定位的盒子會(huì)相對(duì)它原來的位置，通過指定偏移，到達(dá)新的位置。它對(duì)父級(jí)盒子和相鄰的盒子都沒有任何影響。設(shè)置相對(duì)定位的盒子原來的位置會(huì)被保留下來。新課講解3：【約15分鐘】教師：絕對(duì)定位同時(shí)需要配合top、left、bottom與right偏移量與參考依據(jù)來進(jìn)行定位，與相對(duì)定位所不同的是，絕對(duì)定位的依據(jù)是該定位元素的最近且具有定位屬性的祖先元素。（案例演示）學(xué)生：（討論分析）教師：使用了絕對(duì)定位的元素(第二個(gè)盒子)以它最近的一個(gè)已經(jīng)定位的“祖先”元素(#father)為基準(zhǔn)進(jìn)行偏移。絕對(duì)定位的元素從標(biāo)準(zhǔn)文檔流中脫離，這意味著它們對(duì)其他元素(第一個(gè)第三個(gè)盒子)的定位不會(huì)造成影響。進(jìn)行絕對(duì)定位的元素沒有沒有指定寬高的話，在定位之后會(huì)有類似浮動(dòng)的包裹特性，即元的寬高由內(nèi)容的寬高決定。如果進(jìn)行絕對(duì)定位的元素，找不到最近的已經(jīng)定位的"祖先"元素，則將body元素作為定位的參考依據(jù)。這里的已定為指的是元素的定位置為relative、absolute或者fixed之一，通常是用relative與absolute進(jìn)行組合使用，因?yàn)榻o參考元素僅僅添加相對(duì)定位屬性而不提供偏移屬性的話，對(duì)與參考元素沒有任何影響。新課講解4：【約15分鐘】教師：掌握前兩的兩種定位之后，固定定位就簡單多了，固定定位與絕對(duì)定位相似，唯一不同點(diǎn)同樣出現(xiàn)在參考依據(jù)不同，固定定位的參考為瀏覽器的可視區(qū)域，并且使動(dòng)態(tài)變換識(shí)別的，即瀏覽器窗口的大小變化，都會(huì)重新出發(fā)固定定位元素的重新定位渲染。（案例演示）學(xué)生：（討論分析）教師：綜合上面的結(jié)果我們可以總結(jié)處固定定位的特點(diǎn)：使用了固定定位的元素以瀏覽器的可視區(qū)域?yàn)榛鶞?zhǔn)進(jìn)行偏移。固定定位的元素從標(biāo)準(zhǔn)文檔流中脫離，這意味著它們對(duì)其他元素的定位不會(huì)造成影響。進(jìn)行固定定位的元素沒有沒有指定寬高的話，在定位之后會(huì)有類似浮動(dòng)的包裹特性，即元的寬高由內(nèi)容的寬高決定。新課講解5：【約15分鐘】教師：sticky是CSS3新增的屬性；可以說是默認(rèn)static定位和固定定位fixed的結(jié)合；當(dāng)元素可以正常完整的顯示在頁面可視區(qū)域中的，和標(biāo)準(zhǔn)文檔流中的普通元素相同；但是一旦由于頁面滾動(dòng)或其他原因?qū)е虏荒茉陧撁婵梢晠^(qū)域內(nèi)顯示時(shí)，便會(huì)顯示出同固定定位一樣的特性，固定于頁面固定位置，不隨滾動(dòng)而改變位置。粘性定位的出現(xiàn)是為了解決，之前如果想實(shí)現(xiàn)頁面內(nèi)容不在可視區(qū)域時(shí)，可以動(dòng)態(tài)進(jìn)行定位方式的變更，必須要借助js進(jìn)行復(fù)雜繁瑣的頁面滾動(dòng)狀態(tài)的判斷弊端。作為CSS3的新特性，當(dāng)前主流瀏覽器版本均能正常的支持該樣式屬性。新課講解6：【約20分鐘】教師：在上面的例子中我們發(fā)現(xiàn)定位的元素，最終的顯示都是懸浮于標(biāo)準(zhǔn)文檔流之上，那么如果兩個(gè)定位元素的定位出現(xiàn)了重疊，那么其堆疊后的效果應(yīng)該是如何？學(xué)生：（思考討論）......后面的在上。教師：（案例演示）根據(jù)以上結(jié)果可以推出，如果定位元素出現(xiàn)了堆疊現(xiàn)象時(shí)，后出現(xiàn)在html代碼的定位元素的權(quán)重更高，會(huì)覆蓋在之前的定位元素之上顯示。那么我們是否可以自定義這個(gè)權(quán)重，從而靈活控制定位元素的堆疊結(jié)果？答案是肯定的，這里我門是通過z-index屬性來定義每一個(gè)定位元素的堆疊權(quán)重。z-index屬性在立體空間中表示垂直于頁面方向的z軸。z-index屬性的值為整數(shù)，可以是正數(shù)也可以是負(fù)數(shù)。z-index屬性默認(rèn)值為0，z-index屬性值大的層位于其值小的層上方。如果出現(xiàn)權(quán)重相同的情況，則根據(jù)元素出現(xiàn)順序，后出現(xiàn)的權(quán)重較大會(huì)在顯示在上層。新課講解7：【約20分鐘】教師：演示操作上機(jī)任務(wù)-制作課程層疊角標(biāo)學(xué)生：跟做新課講解8：【約20分鐘】教師：演示操作上機(jī)任務(wù)-絕對(duì)定位實(shí)現(xiàn)登錄頁面居中學(xué)生：跟做新課講解9：【約20分鐘】教師：演示操作上機(jī)任務(wù)-固定定位置頂按鈕學(xué)生：跟做新課講解10：【約20分鐘】教師：演示操作上機(jī)任務(wù)-粘性定位頁面通用頭部學(xué)生：跟做教學(xué)總結(jié)【約5分鐘】本單元主要講述定位概念，元素的定位屬性及網(wǎng)頁常見的