（中職）Web前端設(shè)計基礎(chǔ) 項目十-2電子教案

1、（中職）Web前端設(shè)計基礎(chǔ) 項目十-2電子教案（中職）Web前端設(shè)計基礎(chǔ) 項目十-2電子教案（中職）Web前端設(shè)計基礎(chǔ) 項目十-2電子教案教學(xué)課題項目10 CSS 3創(chuàng)建網(wǎng)格布局10.2知識準(zhǔn)備授課班級授課時間教學(xué)目標(biāo)知識目標(biāo)1.掌握網(wǎng)格布局的術(shù)語；2.掌握子元素網(wǎng)格容器的屬性。能力目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問題和解決問題的能力；2.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識的能力。德育目標(biāo)1.鼓勵學(xué)生主動學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專業(yè)素質(zhì)；2.培養(yǎng)學(xué)生的團(tuán)隊合作精神。學(xué)情分析通過前面知識的學(xué)習(xí)，已經(jīng)掌握了CSS 3的各類選擇器的應(yīng)用，掌握了CSS 3美化文本、段落和圖片的方法以及 CSS 3美化超鏈接

2、和項目列表，掌握了使用CSS修飾表格表單，并掌握CSS美化邊框、美化背景的方法。網(wǎng)格布局是網(wǎng)站設(shè)計的基礎(chǔ)，CSS Grid是創(chuàng)建網(wǎng)格布局最強(qiáng)大和最簡單的工具。網(wǎng)格布局目前獲得了主流新版本瀏覽器（Safari、Chrome、Firefox、Edge）的原生支持，所以前端開發(fā)人員都必須學(xué)習(xí)這項技術(shù)。教學(xué)重點(diǎn)1.網(wǎng)格布局的重要術(shù)語；2.子元素網(wǎng)格容器的屬性。教學(xué)難點(diǎn)1.子元素網(wǎng)格容器的屬性。教學(xué)方法項目教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動新課導(dǎo)入給學(xué)生展示一個網(wǎng)頁頁面，通過網(wǎng)頁中網(wǎng)格的效果，導(dǎo)入本節(jié)課的內(nèi)容。教師提出問題，學(xué)生可分組討論，協(xié)作探究。技能學(xué)習(xí)子元素網(wǎng)格容

3、器屬性1. grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性通過指定網(wǎng)格線來確定網(wǎng)格內(nèi)網(wǎng)格項的位置。 HYPERLINK /archives/8510 l prop-grid-column-row-start-end grid-column-start和 HYPERLINK /archives/8510 l prop-grid-column-row-start-end grid-row-start是網(wǎng)格項開始的網(wǎng)格線， HYPERLINK /archives/8510 l prop-grid-column-row-s

4、tart-end grid-column-end和 HYPERLINK /archives/8510 l prop-grid-column-row-start-end grid-row-end是網(wǎng)格項結(jié)束的網(wǎng)格線。屬性值為：（1）：可以是一個數(shù)字引用一個編號的網(wǎng)格線，或一個名字來引用一個命名的網(wǎng)格線。（2）span：該網(wǎng)格項將跨越所提供的網(wǎng)格軌道數(shù)量。（3）span：該網(wǎng)格項將跨越到所提供的名稱位置。（4）auto：表示自動放置，自動跨度，默認(rèn)會擴(kuò)展一個網(wǎng)格軌道的寬度或者高度。CSS代碼為:.itemgrid-column-start:|span|span|auto;grid-column-e

5、nd:|span|span|auto;grid-row-start:|span|span|auto;grid-row-end:|span|span|auto;【例10-4】網(wǎng)格項跨行、跨列和重疊實例。1 2 3 4 5 網(wǎng)格項跨行、跨列6 7 .wrapper8 display: grid;9 grid-template-columns: 200px 200px 200px;10 grid-template-rows: 100px 100px 100px; 11 12 .wrapper div13 color:#fff;14 font-size: 50px;15 line-height: 50

6、px;16 text-align: center;17 margin: 1px;18 19 .item120 background-color: #acf888;21 grid-column: 1/4;22 23 .item224 background-color: #fe0975;25 26 .item327 background-color: #5efffa;28 grid-row-start: 2;29 grid-row-end: 4;30 31 .item432 background-color: #e6b4fd;33 opacity: 0.8;34 grid-column: 2/4;

7、35 grid-row: 3/4;36 z-index:0;37 38 .item539 background-color: #8dfecd;40 grid-column: 1/3;41 42 .item643 background-color: #fd9a5c;44 grid-row: 2/5;45 grid-column: 3/4;46 47 48 49 50 51 152 253 354 455 556 657 58 59 在瀏覽器中預(yù)覽效果如圖所示。2.justify-self和align-self屬性justify-self屬性：沿著行軸線對齊網(wǎng)格項內(nèi)的內(nèi)容，此值適用于單個網(wǎng)格項內(nèi)的

8、內(nèi)容。屬性值為：start：將內(nèi)容對齊到網(wǎng)格區(qū)域的左側(cè)end：將內(nèi)容對齊到網(wǎng)格區(qū)域的右側(cè)center：將內(nèi)容對齊到網(wǎng)格區(qū)域的中間（水平居中）stretch：填充整個網(wǎng)格區(qū)域的寬度（這是默認(rèn)值）CSS代碼:.item-ajustify-self: start|end|center|stretch;教師操作演示，學(xué)生觀看、實訓(xùn)。必要時要求一個具有典型特質(zhì)的學(xué)生與老師互動，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實訓(xùn)。必要時要求一個具有典型特質(zhì)的學(xué)生與老師互動，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實訓(xùn)。必要時要求一個具有典型特質(zhì)的學(xué)生與老師互動，共同完成操

9、作任務(wù)，借此查看教學(xué)效果。知識歸納本節(jié)課學(xué)習(xí)了網(wǎng)格容器、網(wǎng)格項、網(wǎng)格線、網(wǎng)格軌道、網(wǎng)格區(qū)域等網(wǎng)格布局的重要術(shù)語和子元素網(wǎng)絡(luò)容器的屬性。知識點(diǎn)內(nèi)容網(wǎng)格容器屬性display將元素定義為網(wǎng)格容器grid-template-columns用來定義網(wǎng)格的列，表示網(wǎng)格軌道大小。grid-template-rows用來定義網(wǎng)格的行，表示網(wǎng)格軌道大小。fr單位指用等分網(wǎng)格容器剩余可用空間來設(shè)置網(wǎng)格軌道的大小。grid-template-areas指定網(wǎng)格區(qū)域名稱來定義網(wǎng)格模板grid-column-gap指定列網(wǎng)格線的大小，列和列之間的寬度。grid-row-gap指定行網(wǎng)格線的大小，行和行之間的寬度。ju

10、stify-items設(shè)置沿著行軸線對齊網(wǎng)格項內(nèi)的內(nèi)容。align-items設(shè)置沿著列軸線對齊網(wǎng)格項內(nèi)的內(nèi)容。justify-content設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格沿著行軸線的對齊方式。align-content設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格沿著列軸線的對齊方式。grid-auto-columns指定自動生成的隱式網(wǎng)格軌道列的大小。grid-auto-rows指定自動生成的隱式網(wǎng)格軌道行的大小。grid-auto-flow設(shè)置用自動放置算法會自動放置這些網(wǎng)格項。網(wǎng)格項的屬性grid-column-start和grid-row-start通過指定網(wǎng)格線來確定網(wǎng)格內(nèi)網(wǎng)格項的位置，grid-column-start和grid-row-start是網(wǎng)格項目開始的網(wǎng)格線。grid-column-end和grid-row-end通過指定網(wǎng)格線來確定網(wǎng)格內(nèi)網(wǎng)格項的位置，grid-column-end和grid-row-end是網(wǎng)格項結(jié)束的網(wǎng)格線。justify-self沿著行軸線對齊網(wǎng)格項內(nèi)的內(nèi)容align-self沿著列軸線對齊網(wǎng)格項內(nèi)的內(nèi)容教師講授，學(xué)生歸納總結(jié)，并作適當(dāng)?shù)墓P記。課后作業(yè)一、填