网站建设技术任务5 制作网站商品内容页.docx

上传人:b****7 文档编号:9840157 上传时间:2023-02-07 格式:DOCX 页数:19 大小:303.47KB
下载 相关 举报
网站建设技术任务5 制作网站商品内容页.docx_第1页
第1页 / 共19页
网站建设技术任务5 制作网站商品内容页.docx_第2页
第2页 / 共19页
网站建设技术任务5 制作网站商品内容页.docx_第3页
第3页 / 共19页
网站建设技术任务5 制作网站商品内容页.docx_第4页
第4页 / 共19页
网站建设技术任务5 制作网站商品内容页.docx_第5页
第5页 / 共19页
点击查看更多>>
下载资源
资源描述

网站建设技术任务5 制作网站商品内容页.docx

《网站建设技术任务5 制作网站商品内容页.docx》由会员分享,可在线阅读,更多相关《网站建设技术任务5 制作网站商品内容页.docx(19页珍藏版)》请在冰豆网上搜索。

网站建设技术任务5 制作网站商品内容页.docx

网站建设技术任务5制作网站商品内容页

浙江金融职业学院

教案首页

周次:

课外完成日期:

课时序:

课外完成

课题

项目1实战建站任务5制作网站商品内容页

教学目的

要求

●能够用DIV+CSS制作网站商品内容页,包括在美工设计的基础上对商品内容页进行切片、网页制作等;

●在不同浏览器下测试并调整商品内容页使之能够在不同浏览器下都能正常显示。

重点

1、在IETESTER中测试并调整商品内容页,使之能够在各种浏览器正常显示。

难点

1、在IETESTER中测试并调整商品内容页,使之能够在各种浏览器正常显示。

教学过程

设计

时间分配

一、介绍课程并引入新课(20´)

复习文章列表页的制作,展示商品内容页的美工效果图,引入本次课内容。

二、讲授新课(55´)

1、商品内容页布局;

2、商品内容页切片;

3、利用网站首页快速实现商品内容页的头部底部;

4、商品内容页主体部分左边的实现;

5、商品内容页主体部分右边的实现;

6、在IETESTER、firefox中测试并调整商品内容页,使之能够在各种浏览器正常显示。

二、总结布置作业(5´)

在自己的电脑上实现商品内容页的制作和测试。

教学场所教学方法

专业机房;

翻转课堂教学法、讲授法、演示教学法

使用

教具

多媒体、电子教室、PC机

作业

在自己的电脑上实现商品内容页的制作和测试。

课后记

授课教师:

基本内容

任务5制作网站商品内容页

一、教学目标

终极目标:

1.能够用DIV+CSS制作商品内容页,包括在美工设计的基础上对商品内容页进行切片、网页制作等;2.在不同浏览器下测试并调整商品内容页使之能够在不同浏览器下都能正常显示。

促成教学目标:

1.了解商品内容页的特点;2.了解如何利用已经制作好的网页快速实现网页的头部、底部、左边;3.了解用DIV实现商品内容页的方法。

二、工作任务

(一)商品内容页布局

(二)商品内容页切片

(三)利用网站首页和文章列表页快速实现商品内容页的头部底部和左边

(四)商品内容页主体部分右边的实现

(五)在IETESTER中测试并调整商品内容页,使之能够在各种浏览器正常显示。

三、具体内容

(一)商品内容页布局及效果图

(二)商品内容页切片

(三)利用网站首页快速实现商品内容页的头部底部和左边

(四)商品内容页主体部分右边的实现

1.商品内容页arc_pic_1.htm代码如下

(1)头部代码(略)

(2)主体部分代码

--正文开始-->

--按产品分类-->

按产品分类

  • 礼盒系列
  • 名优高端
  • 散装商品
  • 野生山珍
  • 有机产品
  • 特产药材
  • 休闲食品
  • 健康食品
  • 粮油干货
  • 酒糖茶
  • 果蔬新鲜
  • 蛋禽肉
  • >>查看全部商品

--按地区分类-->

按地区分类

--畅销排行榜-->

畅销排行榜

--区域1右部-->

当前位置:

首页〈〈土特产类

--产品内容开始-->

五台山核桃油软胶囊

商品产地:

北京

商品货号:

12345678

市场价格:

230元

会员价:

180元

产品规格:

150g80*60(mm)

--产品描述-->

各位老师、同志们:

大家好!

今天,我们在这里召开学院第五次师资工作暨教师“千万培养工程”再推进大会,这既是落实学院第二次党代会提出的全面建设更高品质幸福金院的重要举措,也是推进学院新一轮内涵建设、推进实施“攀越计划”和“创新业工程”的重要抓手。

刚才我们隆重授予郭福春教授、孔德兰教授为“金晖学者”,这是我们推进高层次队伍建设的重要信号,希望能在全校范围内产生重大的激励效应。

王琦同志代表学校做了工作报告,我完全同意,出台《教师职业发展指引(试行)》、实施“十大计划”、千万培养很有意义,希望能以此为契机,推动学院新一轮师资队伍建设取得新进展,为建设高品质幸福金院写下更为精彩的辉煌的一笔。

下面,我再讲几点意见:

--相关推荐-->

--正文结束-->

(3)底部代码(略)

2.要求商品内容页与首页的CSS规则都存放在同一个css.css文件中,商品内容页主体部分CSS代码如下:

#quyu1{

width:

980px;

margin-right:

auto;

margin-left:

auto;

margin-top:

5px;

margin-bottom:

5px;

overflow:

hidden;

display:

block;

}

#quyu1.l{

height:

auto;

width:

193px;

float:

left;

overflow:

hidden;

display:

block;

}

#quyu1.l.canpin{

width:

191px;

margin-bottom:

10px;

border:

1pxsolid#D6DCB8;

display:

block;

overflow:

hidden;

padding-bottom:

20px;

}

#quyu1.lul{

list-style-type:

none;

margin-left:

18px;

overflow:

hidden;

}

 

#quyu1.lulli{

width:

48%;

margin-top:

8px;

float:

left;

}

#quyu1.lullia{

text-decoration:

none;

font-size:

12px;

color:

#61615F;

}

#quyu1.l.canpinul.more{

width:

100px;

}

#quyu1.lullia:

hover{

font-weight:

bold;

color:

#030;

}

#quyu1.l.diqu{

width:

191px;

margin-bottom:

10px;

border:

1pxsolid#D6DCB8;

display:

block;

overflow:

hidden;

padding-bottom:

20px;

}

#quyu1.l.changxiao{

width:

191px;

margin-bottom:

10px;

border:

1pxsolid#8FB86A;

display:

block;

overflow:

hidden;

padding-bottom:

20px;

}

#quyu1.l.changxiaoul{

list-style-type:

none;

margin-left:

6px;

overflow:

hidden;

}

 

#quyu1.l.changxiaoulli{

width:

180px;

margin-top:

8px;

float:

left;

line-height:

1.5em;

padding-left:

8px;

}

#quyu1.l.changxiaoullib{

height:

14px;

width:

14px;

background-color:

#3F7909;

font-size:

12px;

line-height:

1.2em;

text-align:

center;

vertical-align:

middle;

color:

#FDFCFF;

display:

block;

overflow:

hidden;

float:

left;

margin-top:

2px;

}

#quyu1.l.changxiaoulli.hs{

background-color:

#D35D05;

}

#quyu1.l.changxiaoullia{

font-size:

12px;

color:

#616161;

text-decoration:

none;

float:

left;

margin-left:

6px;

}

#quyu1.rr{

float:

right;

height:

auto;

width:

777px;

margin-left:

5px;

}

#quyu1.rr.position{

font-size:

12px;

color:

#686868;

background-color:

#F8F8F8;

height:

29px;

width:

760px;

border:

1pxsolid#DADADA;

display:

block;

overflow:

hidden;

text-align:

left;

padding-left:

10px;

line-height:

2em;

margin-top:

10px;

margin-bottom:

10px;

float:

right;

}

.rr.positiona{

font-size:

12px;

color:

#999;

text-decoration:

none;

}

.rr.positiona:

hover{

font-weight:

bold;

color:

#030;

}

.rr.arc_pic{

height:

auto;

width:

775px;

margin-bottom:

10px;

font-size:

12px;

color:

#666;

line-height:

2.5em;

}

 

.rr.arc_pic.arc_pic_l.big_img{

border:

1pxsolid#999;

height:

303px;

width:

303px;

text-align:

center;

margin-bottom:

10px;

}

 

.rr.arc_pic.arc_pic_l{

height:

375px;

width:

310px;

float:

left;

margin-right:

20px;

}

.rr.arc_pic.arc_pic_lul{

margin-top:

10px;

width:

250px;

}

.rr.arc_pic.arc_pic_lulli{

float:

right;

width:

50px;

height:

50px;

margin-right:

4px;

margin-left:

4px;

border:

1pxsolid#C9C9C9;

}

.rr.arc_pic.arc_pic_rh2{

font-size:

14px;

font-weight:

bold;

color:

#515151;

height:

25px;

display:

block;

overflow:

hidden;

float:

left;

}

.rr.arc_pic.arc_pic_rp{

font-size:

12px;

color:

#666;

line-height:

18px;

clear:

both;

}

.rr.arc_pic.arc_pic_rpspan{

font-size:

18px;

color:

#F00;

font-weight:

bold;

}

.rr.arc_pic.arc_pic_r{

float:

left;

padding-top:

2px;

padding-right:

0px;

padding-bottom:

2px;

padding-left:

0px;

}

.rr.arc_pic.arc_pic_r.baozeng{

height:

60px;

width:

270px;

border:

1pxsolid#EBEDE0;

}

.rr.arc_pic.arc_pic_r.baozengul{

margin-top:

4px;

margin-bottom:

4px;

}

.rr.arc_pic.arc_pic_r.baozengulli{

font-size:

12px;

color:

#5B5B5B;

float:

left;

width:

43%;

}

#quyu1.rr.canpinmiaoshu{

height:

auto;

width:

775px;

clear:

both;

margin-bottom:

15px;

}

#quyu1.rr.canpinmiaoshuh2{

height:

37px;

background-image:

url(arc_pic_1_29.jpg);

background-repeat:

repeat-x;

}

#quyu1.rr.canpinmiaoshuh2span{

height:

37px;

width:

111px;

float:

left;

display:

block;

background-image:

url(arc_pic_1_26.jpg);

}

#quyu1.rr.canpinmiaoshup{

font-size:

12px;

line-height:

1.5em;

text-indent:

2em;

}

#quyu1.rr.xiangguanruijian{

height:

auto;

width:

775px;

clear:

both;

margin-bottom:

10px;

}

#quyu1.rr.xiangguanruijianh2{

height:

27px;

background-image:

url(arc_pic_1_42.jpg);

background-repeat:

repeat-x;

}

#quyu1.rr.xiangguanruijianh2span{

height:

27px;

width:

111px;

float:

left;

display:

block;

background-image:

url(arc_pic_1_38.jpg);

}

#quyu1.rr.xiangguanruijianh2b{

height:

27px;

width:

1px;

float:

right;

background-image:

url(arc_pic_1_42.jpg);

}

#quyu1.rr.xiangguanruijianul{

list-style-type:

none;

padding-left:

5px;

padding-top:

10px;

}

#quyu1.rr.xiangguanruijianu

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 总结汇报 > 学习总结

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1