網(wǎng)站建設(shè)技術(shù)12實(shí)現(xiàn)商品內(nèi)容頁(yè)的動(dòng)態(tài)顯示效果

1、浙江金融職業(yè)學(xué)院教案首頁(yè)周次：12 日期： 課時(shí)序：，.47二.48.課題項(xiàng)目1實(shí)戰(zhàn)建站 任務(wù)7制作網(wǎng)站后臺(tái) 12.實(shí)現(xiàn)商品內(nèi)容頁(yè)的動(dòng)態(tài)顯示效果教學(xué)目的要 求能夠?qū)崿F(xiàn)商品內(nèi)容頁(yè)的動(dòng)態(tài)顯示效果重 點(diǎn)1、實(shí)現(xiàn)加入購(gòu)物車等的動(dòng)態(tài)顯示效果；2、實(shí)現(xiàn)1個(gè)大圖4個(gè)小圖之間切換的動(dòng)態(tài)顯示效果。難點(diǎn)1、實(shí)現(xiàn)加入購(gòu)物車等的動(dòng)態(tài)顯示效果；2、實(shí)現(xiàn)1個(gè)大圖4個(gè)小圖之間切換的動(dòng)態(tài)顯示效果。教學(xué)過(guò)程設(shè)計(jì)及時(shí)間分配一、復(fù)習(xí)并引入新課（10）復(fù)習(xí)網(wǎng)站商品列表頁(yè)的動(dòng)態(tài)顯示實(shí)現(xiàn)方法，演示完成后的網(wǎng)站動(dòng)態(tài)顯示效果， 引入本次課內(nèi)容。二、講授新課（65）（一）頭部修改 （二）實(shí)現(xiàn)按產(chǎn)品分類、按地區(qū)分類、暢銷排行榜的動(dòng)態(tài)顯示效果（三

2、）實(shí)現(xiàn)當(dāng)前位置的動(dòng)態(tài)顯示效果（四）實(shí)現(xiàn)商品產(chǎn)地、貨號(hào)、加入購(gòu)物車等的動(dòng)態(tài)顯示效果（五）實(shí)現(xiàn)1個(gè)大圖4個(gè)小圖之間切換的動(dòng)態(tài)顯示效果（六）實(shí)現(xiàn)產(chǎn)品描述的動(dòng)態(tài)顯示效果（七）實(shí)現(xiàn)相關(guān)推薦的動(dòng)態(tài)顯示效果二、總結(jié)布置作業(yè)（5）在自己的電腦上實(shí)現(xiàn)商品內(nèi)容頁(yè)的動(dòng)態(tài)顯示效果。教學(xué)場(chǎng)所 教學(xué)方法專業(yè)機(jī)房；翻轉(zhuǎn)課堂教學(xué)法、講授法、演示教學(xué)法使用 教具多媒體、電子教室、PC機(jī)作業(yè)在自己的電腦上實(shí)現(xiàn)商品內(nèi)容頁(yè)的動(dòng)態(tài)顯示效果。課后記授課教師：鄭春瑛基本內(nèi)容任務(wù)7制作網(wǎng)站后臺(tái)12.實(shí)現(xiàn)商品內(nèi)容頁(yè)的動(dòng)態(tài)顯示效果一、教學(xué)目標(biāo)終極目標(biāo)：1.能夠?qū)崿F(xiàn)商品內(nèi)容頁(yè)的動(dòng)態(tài)顯示效果。促成教學(xué)目標(biāo)：1.能夠掌握加入購(gòu)物車的動(dòng)態(tài)顯示效果；2.

3、能夠掌握實(shí)現(xiàn)圖片之 間切換的動(dòng)態(tài)顯示效果；3.能夠掌握利用已經(jīng)做好的頁(yè)面快速實(shí)現(xiàn)其它頁(yè)面的方法。二、工作任務(wù)（一）頭部修改 （二）實(shí)現(xiàn)按產(chǎn)品分類、按地區(qū)分類、暢銷排行榜的動(dòng)態(tài)顯示效果（三）實(shí)現(xiàn)當(dāng)前位置的動(dòng)態(tài)顯示效果（四）實(shí)現(xiàn)商品產(chǎn)地、貨號(hào)、加入購(gòu)物車等的動(dòng)態(tài)顯示效果（五）實(shí)現(xiàn)1個(gè)大圖4個(gè)小圖之間切換的動(dòng)態(tài)顯示效果（六）實(shí)現(xiàn)產(chǎn)品描述的動(dòng)態(tài)顯示效果（七）實(shí)現(xiàn)相關(guān)推薦的動(dòng)態(tài)顯示效果三、具體內(nèi)容任務(wù)7制作網(wǎng)站后臺(tái)12.實(shí)現(xiàn)商品內(nèi)容頁(yè)的動(dòng)態(tài)顯示效果（一）頭部修改 dede:field.title/_dede:global.cfg_webname/（二）實(shí)現(xiàn)按產(chǎn)品分類、按地區(qū)分類、暢銷排行榜的動(dòng)態(tài)顯示效果

4、 把list_shop.htm正文的左邊COPY代替。（三）實(shí)現(xiàn)當(dāng)前位置的動(dòng)態(tài)顯示效果（dede:field name=position/（四）實(shí)現(xiàn)商品產(chǎn)地、貨號(hào)、加入購(gòu)物車等的動(dòng)態(tài)顯示效果(dede:field name=title/商品產(chǎn)地：dede:field name=candi /商品貨號(hào)：dede:field name=huohao/市場(chǎng)價(jià)格：dede:field name=price/元會(huì)員價(jià):dede:field name=trueprice/產(chǎn)品規(guī)格：dede:field name=guige/(mm)加入購(gòu)物車ts車輸入br /）加入購(gòu)物車I(此圖片為 images/arc

5、_pic_1_06.jpg, Shift+回代碼如下: 購(gòu)物車: 查看購(gòu)物車 dede: field najR 已二? t it le? / 商品.產(chǎn)i也：dede:field n：djne= c:diidi , / 商品法號(hào)：dede:field n：ajTie= huohao, / 市 fji格：dede: field nam已二? price? /元 嘗 員 1升: de de: field rLanie 二t ruep rice1 /元 ：；：口).產(chǎn) 品猊格：dede:field n：djne= guige, / (itutl) f o rm id= f o me ar hsitl

6、已二f o rmcarmet ho d= po st act i on= dede: field iiajR 巳=phpur 1, / /po st toe ar. phpinput typ已二“hidden nam已二id* valuer dede:field, id/.input t yp 巳二 “ hi dden nam 巳=price value=de de: field, t ruep ric e/ /input t yp 已二hidden nam 已二unit s valuer de de: field. m_iit s/ /input typ已二submit c 1 ass=rt

7、sub_shop，v value=*r，v / 目皿；丑11；：頊司物車： 查看購(gòu)物I 車 /f orm)-CSS文件中增加：.shop_buy .sub_shop (background-image:url( HYPERLINK http:/localhost/tutecan/templets/default/images/arc_pic_1_06.jpg http:/localhost/tutecan/templets/default/images/arc_pic_1_06.jpg);background-repeat: no-repeat;height: 34px;width: 145p

8、x;border: none;)cursor: pointer;.shop_buy a (color: #030;font-size:12px;shop buy smallcolor: #030;font-size:12px;實(shí)現(xiàn)1個(gè)大圖4個(gè)小圖之間切換的動(dòng)態(tài)顯示效果(點(diǎn)擊換圖效果，其中alert(img_name)調(diào)試用的，檢查參數(shù)是否傳遞正確，高度結(jié) 束刪除。)function change_img(img_name)(alert(img_name)document.getElementById(big_img).innerHTML=;diy class= arc_picfunct i o

9、n chaiig e_ img ( img_iiajR已)alert (ijTLg_n：ajTLe)duciuTLent. setElementByld(? big_img ) . iimerHTML二;：-.div class= tng_iiTLg id= tng_iiTLg .：-1 i1 i 向?qū)崿F(xiàn)產(chǎn)品描述的動(dòng)態(tài)顯示效果dede:field.body/G產(chǎn)品描您-.dede:field. body/發(fā)表文章后馬上更新相關(guān)欄目在“系統(tǒng) 系統(tǒng)基本參數(shù) 性能選項(xiàng)”中設(shè)置。實(shí)現(xiàn)相關(guān)推薦的動(dòng)態(tài)顯示效果(dede:arclist typeid=4 row=2 titlelen=20 orderby=

10、randaddfields=img1,candi,trueprice,price channelid=6field:title/產(chǎn)地:field:candi/市場(chǎng)價(jià):field:price/X會(huì)員價(jià)：field:trueprice/元(/dede:arclist(dede:arclist typeid=4 limit=2,1 titlelen=20 orderby=rand addfields=img1,candi,trueprice,price channelid=6field:title/產(chǎn)地:field:candi/市場(chǎng)價(jià):field:price/會(huì)員價(jià)：field:trueprice/

11、元(/dede:arclist!一相關(guān)推茬”一“ f ield: t it 1 e/ b r F ).聲 i也：field: c aiidi/ 市 ig 1 ft : sp ail) f ield:pric e/ 元 會(huì)員： field:trueprice/元 img src=，v HYPERLINK http:/localhost/tutecan/temp http:/localhost/tutecan/temp 1 ets/def suit/iinages/arc_pic_ 1_58. jpg，v width=，v 108，v height=，v23，v/dede:arclistdede:

12、 arclist t.q：ieid=? 4? limit=W1 titlelen=? 2U, orderb.：r=? rmd5addf ields=7 imgl cmdi trueprice price? ch：aime 1 id二6? 1 i f ield:t itl e/ b r : field: cmdi/ 市 1 ：iT: sp anf ield:pric e/元 會(huì)員fij ： field: t rueprice/元a href=，v field: ar curl/ Ximg src=http: /localhost/tut ec:aivt emp 1 ets/default/images/arc_pic_ 1_58. jpg width= 108 height=23