Web前端开发实例与实战第11 章 电商网站.docxVIP

编写日期：授课日期：任课教师：

课程

名称

《Web前端开发实例与实战》

授课

专业

授课

班级

周次

节次

授课

章节

第11章

电商网站

授课

学时

5学时

教学

目标

知识

1.了解电商网站。

2.了解网页的头部内容。

3.了解首页主体部。

4.了解网页的底部内容。

5.了解二级页面的头部元素和页尾元素。

能力

1.能够对分析效果图。

2.能够制作头部。

3.能够制作首页的主体部分。

4.能够制作首页的底部。

5.能够制作二级页面。

素质

培养学生的技能，坚定理想信念。

教学

重点

制作多列商品展示模块

教学

难点

制作双列商品展示模块

教学

方法

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

教学

用具

多媒体、课件

教学

内容

第11章电商网站

11.1分析首页效果图

在网站制作之前会由专业的美工人员对网站页面进行设计。设计完成后，程序员需要按照设计的样式使用代码编写网页。所以，在编写网站之前首先需要对网页的效果图进行分析。

分析效果图主要注意2个方面，一是网页的布局形式，二是网页中可以重用的模块。在网页中有很多地方都拥有相似的布局，此时就可以利用重用的方式提升网页编程速度。

11.2制作头部

网页头部的内容不宜过多，通常网页的头部可以包括网站的LOGO、搜索框、导航栏及通页banner等部分。头部元素需要使用一个div元素进行分隔，代码如下所示。

divid=header

divid=search/div

divid=navigaiton/div

/div

11.2.1制作LOGO与搜索框

LOGO和搜索框位于网页最顶端，是网页第1个要展示的部分。LOGO主要内容是一张图片，搜索框由文本ipnut元素和按钮ipnut元素组成，代码如下所示。

divid=search

divid=himgimgsrc=11/img/logo.jpg//div

divid=search1inputid=intexttype=text/input

id=inbuttype=buttonvalue=搜索//div

/div

11.2.2制作导航栏

头部的导航栏主要用于导向网站的其他二级页面。导航栏需要使用ul元素进行布局。

11.3制作首页的主体部分

首页主体部分包括三列布局、双列布局及多列布局3种形式。其中，双列布局和多列布局的内容有很多模块可以进行重用。整个主体部分全部元素居中显示，并且只占整个网页宽度的80%，主体的布局样式代码如下所示。

#main{width:80%;margin:auto;margin-top:30px;}

11.3.1制作Banner部分

Banner部分为三列布局，包括第1列的侧边栏导航，第2列的Banner，第3列的用户登录框。

11.3.2制作双列商品展示模块

双列展示商品模块包含“爆品伙拼”和“新品直播”2个部分。这2个部分的代码是相同的，所以可以进行重用，此时元素要求使用class属性进行标记。

11.3.3制作多列商品展示模块

多列商品展示模块大量地使用了重用方式编写元素。水平方向重用了6次商品展示框，垂直方向将整个模块进行了重用

11.4制作首页的底部

网页的底部主要包含网站LOGO和版权信息、联系信息等内容。

divid=foot

divid=logo2imgsrc=11/img/logo.jpg//div

divid=copyrightahref=#关于本站/a

ahref=#服务协议/a

ahref=#全站地图/a

ahref=#意见反馈/a

ahref=#京公网安备11000002000001号/a

ahref=#京ICP证030173号/a

a违法和不良信息举报电话：400-921-6/a/div

11.5二级页面的制作

二级页面作为网站的分支，设计和展示内容的方式与网站首页的风格要保持一致。二级页面包括双列布局和多列布局2部分。

二级页面的头部元素和页尾元素与首页完全相同。主体部分的双列模块也与首页的双列模块相同，唯一不同的是多列模块只使用一个完整模块，并将商品模块按列进行了重用。

课后

分析