《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第29課 開發(fā)者商務(wù)網(wǎng)站建設(shè)（四）

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第29課開發(fā)者商務(wù)網(wǎng)站建設(shè)（四）課時2課時（90min）教學目標知識技能目標：掌握制作一級列表頁、二級列表頁、詳情頁和訂單列表頁的具體操作素質(zhì)目標：鍛煉從全局視角看問題，客觀辯證地思考和處理問題的科學思維方式教學重難點教學重點：制作一級與二級列表頁，制作商品詳情頁教學難點：制作訂單列表頁教學方法問答法、討論法、講授法、實踐練習法教學用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學設(shè)計第1節(jié)課：→→→傳授新知（28min）→課堂討論（10min）第2節(jié)課：→傳授新知（27min）→課堂討論（10min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學過程主要教學內(nèi)容及步驟設(shè)計意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學生負責人取得聯(lián)系，讓其提醒同學通過文旌課堂APP或其他學習軟件，完成課前任務(wù)請大家了解制作一級列表頁、二級列表頁、詳情頁和訂單列表頁等相關(guān)內(nèi)容?！緦W生】完成課前任務(wù)通過課前任務(wù)，使學生了解本節(jié)課的主要內(nèi)容，增加學生的學習興趣考勤

（2min）【教師】使用文旌課堂APP進行簽到【學生】按照老師要求簽到培養(yǎng)學生的組織紀律性，掌握學生的出勤情況問題導入（5min）【教師】提出以下問題一級列表頁包含哪些內(nèi)容？【學生】思考、舉手回答【教師】通過學生的回答引入要講的知識通過問題導入的方法，引導學生主動思考，激發(fā)學生的學習興趣傳授新知

（28min）6.3制作其他頁面【教師】講解制作一級列表頁、二級列表頁的具體操作6.3.1制作一級列表頁【實現(xiàn)目標】【教師】ppt展示“一級列表頁二級分類導航區(qū)域”“一級列表頁熱門商品展示區(qū)域”“一級列表頁分類商品展示區(qū)域”圖片（詳見教材），并講解一級列表頁從上到下分為頭部區(qū)域、二級分類導航區(qū)域、熱門商品展示區(qū)域、分類商品展示區(qū)域、腳部區(qū)域和返回頂部按鈕。其中，腳部區(qū)域和返回頂部按鈕同首頁，頭部區(qū)域中的輪播圖更換為一級列表頁相關(guān)圖片?！菊n堂互動】?【教師】提問一級列表頁制作過程中需要注意些什么問題？?【學生】聆聽、思考、回答（1）二級分類導航包含當前一級分類下的所有二級分類名稱，當鼠標單擊二級分類時，將跳轉(zhuǎn)到當前頁中相應(yīng)的商品展示區(qū)域。（2）熱門商品展示區(qū)域包含所有當前一級分類下的熱門商品，當鼠標懸浮于某商品圖片上時，圖片向左向上移動5px，同時顯示陰影，陰影向右向下偏移5px，陰影半徑為2px，陰影顏色為#999。（3）分類商品展示區(qū)域包含所有二級分類導航中的商品類型，每一個類型包含一個宣傳圖和對應(yīng)的商品列表。（4）頁面的跳轉(zhuǎn)效果如下：①各banner圖與分類商品展示區(qū)域的宣傳圖都鏈接到二級列表頁，即smallClass.html；②各商品鏈接到商品詳情頁，即com.html；③二級導航通過錨鏈接定位到當前頁相應(yīng)分類商品展示區(qū)域。（5）其他交互效果同首頁?！局R掃描】（1）HTML相關(guān)知識點：錨鏈接。（2）CSS3相關(guān)知識點：①邊框陰影；②2D轉(zhuǎn)換?！緦崿F(xiàn)步驟】1使用HTML5布局一級分類列表頁，頁面名稱為bigClass.html。12實現(xiàn)單擊二級分類導航跳轉(zhuǎn)到當前頁相應(yīng)區(qū)域的效果。2（1）將分類商品展示區(qū)域的宣傳圖放在<a>標簽中，并設(shè)置name屬性。例如，設(shè)置第一張圖片的代碼如下：<aname="1"class="big-show-small"> <imgsrc="img/yangrong.jpg"/></a>（2）將二級分類導航中的分類名稱設(shè)置為<a>標簽，其href屬性為錨鏈接。例如，第一個二級分類導航的代碼如下：<ahref="#1"class="big-nav">羊絨衫</a>3設(shè)置頁面的CSS樣式。首先在css文件夾中創(chuàng)建bigClass.css文件，將其與index.css文件都關(guān)聯(lián)至本頁面；然后在bigClass.css文件中輸入樣式代碼。其中，設(shè)置鼠標懸浮于熱門商品展示區(qū)域時交互效果的CSS樣式代碼如下：3.big-hot:hover{ box-shadow:5px5px2px#999; transform:translate(-5px,-5px);}4設(shè)置與首頁相同的靜態(tài)交互效果，將“jquery-1.12.1.js”和“fun.js”文件都關(guān)聯(lián)至本頁面。46.3.2制作二級列表頁【實現(xiàn)目標】【教師】ppt展示“二級列表頁排序和篩選行效果”“二級列表頁商品展示區(qū)域效果”圖片（詳見教材），并講解二級列表頁從上到下分為頭部區(qū)域、排序和篩選行、商品展示區(qū)域和腳部區(qū)域。其中，頭部區(qū)域為首頁的一部分，腳部區(qū)域同首頁。【課堂互動】?【教師】提問二級列表頁制作過程中需要注意哪些問題？?【學生】聆聽、思考、回答①交互效果同首頁；②單擊商品列表中的各商品時，跳轉(zhuǎn)到商品詳情頁，即com.html?！局R掃描】鞏固表單控件、超鏈接標簽的使用?！緦崿F(xiàn)步驟】1使用HTML5布局二級分類列表頁，頁面名稱為smallClass.html。12制作排序和篩選行。其中，篩選部分的代碼如下：2<inputclass="select1"type="text"><divclass="select">￥</div><divclass="select"></div><inputclass="select1"type="text"><divclass="select">￥</div><divclass="select">篩選：</div>3制作商品展示區(qū)域。例如，設(shè)置第一個商品的代碼如下：3<divclass="big-show-com"> <ahref="com.html"class="big-com-img"> <imgsrc="img/miantao1.jpg"/> </a> <divclass="big-com-wen1">類名名稱男女裝顏色</div> <divclass="big-com-wen2">售價:￥199.00</div></div>4設(shè)置頁面的CSS樣式。首先在css文件夾中創(chuàng)建smallClass.css文件，將其與“index.css”和“bigClass.css”文件關(guān)聯(lián)至本頁面；然后在smallClass.css文件中設(shè)置排序和篩選行的樣式，代碼如下：4#order{ width:1200px; height:50px; padding:020px; margin:20pxauto; border-top:1pxsolid#E7E7E7; border-bottom:1pxsolid#E7E7E7;}.order{ width:auto; height:40px; margin:020px00; line-height:40px; color:#999; float:left;}.select{ width:auto; height:40px; margin:02px; line-height:40px; color:#666; float:right;}.select1{ width:40px; height:20px; margin:10px2px; float:right; display:block;}5將“jquery-1.12.1.js”“fun.js”“index.js”關(guān)聯(lián)至本頁面。5【學生】聆聽、記錄、理解通過教師講解、課堂互動等方式，使學生了解制作一級與二級列表頁的相關(guān)流程及操作課堂討論（10min）【教師】提出以下問題，組織學生分組開展討論（1）舉例說明邊框陰影的設(shè)置方法。（2）舉例說明2D轉(zhuǎn)換的用法。（3）舉例說明表單控件的種類?！緦W生】思考、討論通過小組討論，使學生鞏固所學知識第二節(jié)課問題導入（3min）【教師】提出以下問題制作商品詳情頁需要哪些模塊？【學生】思考、舉手回答通過提問引導學生思考本節(jié)課內(nèi)容傳授新知

（27min）6.3.3制作商品詳情頁【教師】講解商品詳情頁的具體操作【實現(xiàn)目標】【教師】ppt展示“商品詳情頁主體區(qū)域效果”圖片（詳見教材），并講解商品詳情頁從上到下分為頭部區(qū)域、主體區(qū)域和腳部區(qū)域。其中，頭部和腳部區(qū)域與首頁相關(guān)部分相同?！菊n堂互動】?【教師】提問商品詳情頁制作過程中需要注意哪些問題？?【學生】聆聽、思考、回答①鼠標單擊“立即訂購”按鈕，可跳轉(zhuǎn)到訂單列表頁，即indent.html；②交互效果同首頁?！局R掃描】HTML相關(guān)知識：①表單的action屬性和method屬性；②表單控件name屬性的作用；③列表框及其默認選項；④單選鈕及其默認選項；⑤數(shù)字型輸入框及其默認值；⑥提交按鈕?！緦崿F(xiàn)步驟】1使用HTML5布局商品詳情頁，頁面名稱為com.html。12制作主體區(qū)域。添加一個表單元素，并將表單的提交頁面設(shè)置為indent.html，代碼如下：2<formid="com-news"action="indent.html"method="get"> …</form>最后將HTML文檔中所有類名為btns的元素刪除。3主體區(qū)域中的顏色部分為下拉列表框，將其默認值設(shè)置為灰色，代碼如下：3<selectname="color"id=""> <optionvalue="灰色"selected="selected">灰色</option> <optionvalue="黑色">黑色</option> <optionvalue="紅色">紅色</option></select>4主體區(qū)域中的型號部分為單選鈕，將其默認選項設(shè)置為S，代碼如下：4<inputtype="radio"name="size"value="S"checked>S<inputtype="radio"name="size"value="M">M<inputtype="radio"name="size"value="L">L<inputtype="radio"name="size"value="xL">xL<inputtype="radio"name="size"value="xxL">xxL5主體區(qū)域中的數(shù)量部分為數(shù)值型輸入框，將其默認值設(shè)置為1，代碼如下：5<inputtype="number"name="num"min="1"max="10"value="1">6主體區(qū)域中的“加入購物車”按鈕即提交按鈕，其表單控件類型為submit，代碼如下：6<inputtype="submit"class="place"value="加入購物車">7設(shè)置該頁面的樣式。首先在css文件夾中創(chuàng)建com.css文件，將其與index.css文件一同關(guān)聯(lián)至本頁面；然后在com.css文件中設(shè)置主體區(qū)域的樣式，代碼如下：7#com-box{ width:1200px; height:300px; margin:50pxauto50px;}……（詳見教材）8將“jquery-1.12.1.js”“fun.js”“index.js”文件關(guān)聯(lián)至該頁面。8【學生】聆聽、記錄、理解6.3.4制作訂單列表頁【教師】講解制作訂單列表頁的具體操作【實現(xiàn)目標】【教師】ppt展示“訂單列表頁主體區(qū)域布局”圖片（詳見教材），并講解訂單列表頁從上到下分為頭部區(qū)域、主體區(qū)域與腳部區(qū)域。其中，頭部和腳部區(qū)域與首頁相關(guān)部分相同?！局R掃描】【課堂互動】?【教師】提問制作訂單列表頁時，需要用到哪些方面的知識點？?【學生】聆聽、思考、回答（1）HTML相關(guān)知識點：①表格標簽；②表格行標簽；③表格列標題標簽；④表格單元格標簽。（2）CSS3相關(guān)知識點：邊框合并屬性?！緦崿F(xiàn)步驟】1使用HTML5布局商品詳情頁，頁面名稱為indent.html。12制作主體區(qū)域。2HTML文檔編輯操作：（1）使用表格顯示每個訂單信息，部分代碼如下：<table> <tr> <th>商品名稱</th> <th>商品圖片</th> <th>商品顏色</th> <th>商品型號</th>……（詳見教材）【提示】另外兩個商品的圖片地址為“miantao2.jpg”與“miantao3.jpg”。（2）制作翻頁模塊。<divid="box"> <divclass="page">最后一頁</div> <divclass="page">下一頁</div> <divclass="page">第n頁</div> <divclass="page">上一頁</div> <divclass="page">第一頁</div></div>CSS文檔編輯操作如下：（1）首先在css文件夾中創(chuàng)建indent.css文件，將其與index.css文件一同關(guān)聯(lián)至本頁面。（2）設(shè)置主體區(qū)域的樣式。①設(shè)置表格元素屬性，寬度為1200px；高度為自動被子元素撐開；合并邊框；計算尺寸方式為包含邊框；頂端邊框和底端邊框?qū)傩跃鶠?px、實心線、藍色。#indent-box{ width:1200px; height:auto; margin:50pxauto50px; color:#666; border-top:3pxsolid#2DA8E6; border-bottom:3pxsolid#2DA8E6;……（詳見教材）②設(shè)置表格行元素屬性，高度為40px；底端邊框為1px、實心線、灰色。tr{ height:40px; line-height:40px; border-bottom:1pxsolid#E0E0E0;}③設(shè)置表格單元格元素屬性，文本居中；圖片高度和寬度均為100px。td{ text-align:center;}tdimg{ width:100px; height:100px;}④設(shè)置翻頁模塊的樣式。#box{ width:1200px; height:auto; margin:0auto40px; overflow:hidden;}……（詳見教材）3將“jquery-1.12.1.js”“fun.js”“index.js”文件關(guān)聯(lián)至該頁面。3【學生】