网站建设技术12实现商品内容页的动态显示效果

1、浙江金融职业学院教案首页周次：12 日期： 课时序：，.47二.48.课题项目1实战建站 任务7制作网站后台 12.实现商品内容页的动态显示效果教学目的要 求能够实现商品内容页的动态显示效果重 点1、实现加入购物车等的动态显示效果；2、实现1个大图4个小图之间切换的动态显示效果。难点1、实现加入购物车等的动态显示效果；2、实现1个大图4个小图之间切换的动态显示效果。教学过程设计及时间分配一、复习并引入新课（10）复习网站商品列表页的动态显示实现方法，演示完成后的网站动态显示效果， 引入本次课内容。二、讲授新课（65）（一）头部修改 （二）实现按产品分类、按地区分类、畅销排行榜的动态显示效果（三

2、）实现当前位置的动态显示效果（四）实现商品产地、货号、加入购物车等的动态显示效果（五）实现1个大图4个小图之间切换的动态显示效果（六）实现产品描述的动态显示效果（七）实现相关推荐的动态显示效果二、总结布置作业（5）在自己的电脑上实现商品内容页的动态显示效果。教学场所 教学方法专业机房；翻转课堂教学法、讲授法、演示教学法使用 教具多媒体、电子教室、PC机作业在自己的电脑上实现商品内容页的动态显示效果。课后记授课教师：郑春瑛基本内容任务7制作网站后台12.实现商品内容页的动态显示效果一、教学目标终极目标：1.能够实现商品内容页的动态显示效果。促成教学目标：1.能够掌握加入购物车的动态显示效果；2.

3、能够掌握实现图片之 间切换的动态显示效果；3.能够掌握利用已经做好的页面快速实现其它页面的方法。二、工作任务（一）头部修改 （二）实现按产品分类、按地区分类、畅销排行榜的动态显示效果（三）实现当前位置的动态显示效果（四）实现商品产地、货号、加入购物车等的动态显示效果（五）实现1个大图4个小图之间切换的动态显示效果（六）实现产品描述的动态显示效果（七）实现相关推荐的动态显示效果三、具体内容任务7制作网站后台12.实现商品内容页的动态显示效果（一）头部修改 dede:field.title/_dede:global.cfg_webname/（二）实现按产品分类、按地区分类、畅销排行榜的动态显示效果

4、 把list_shop.htm正文的左边COPY代替。（三）实现当前位置的动态显示效果（dede:field name=position/（四）实现商品产地、货号、加入购物车等的动态显示效果(dede:field name=title/商品产地：dede:field name=candi /商品货号：dede:field name=huohao/市场价格：dede:field name=price/元会员价:dede:field name=trueprice/产品规格：dede:field name=guige/(mm)加入购物车ts车输入br /）加入购物车I(此图片为 images/arc

5、_pic_1_06.jpg, Shift+回代码如下: 购物车: 查看购物车 dede: field najR 已二? t it le? / 商品.产i也：dede:field n：djne= c:diidi , / 商品法号：dede:field n：ajTie= huohao, / 市 fji格：dede: field nam已二? price? /元 尝 员 1升: de de: field rLanie 二t ruep rice1 /元 ：；：口).产 品猊格：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；：顼司物车： 查看购物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;实现1个大图4个小图之间切换的动态显示效果(点击换图效果，其中alert(img_name)调试用的，检查参数是否传递正确，高度结 束删除。)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 向实现产品描述的动态显示效果dede:field.body/G产品描您-.dede:field. body/发表文章后马上更新相关栏目在“系统 系统基本参数 性能选项”中设置。实现相关推荐的动态显示效果(dede:arclist typeid=4 row=2 titlelen=20 orderby=

10、randaddfields=img1,candi,trueprice,price channelid=6field:title/产地:field:candi/市场价:field:price/X会员价：field:trueprice/元(/dede:arclist(dede:arclist typeid=4 limit=2,1 titlelen=20 orderby=rand addfields=img1,candi,trueprice,price channelid=6field:title/产地:field:candi/市场价:field:price/会员价：field:trueprice/

11、元(/dede:arclist!一相关推茬”一“ f ield: t it 1 e/ b r F ).声 i也：field: c aiidi/ 市 ig 1 ft : sp ail) f ield:pric e/ 元 会员： 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/元 会员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