实验一：考察并设计网站建设方案（9月13日）
1、考察一个电子商务网站建设情况
2、仿造并完成一个网站设计方案
3、编写一份电子商务网站商业计划书
实验二：超越时空网上书城网站需求分析报告撰写（9月27日）
1、设计需求分析
2、确定网站建设目标及功能定位
3、设计网站技术方案
4、网站内容规划
5、网页设计思路
实验三：设计并完成电器商城的网站首页及主要页面（10月11日）
1、确定网站的设计风格
2、设计静态的网站首页
3、设计静态的二级页面及链接
实验四：电子商务网站的设计方案（11月1日）
1、web服务器准备
2、数据库准备与连接数据库的设计方案
3、网站的管理和维护方案
实验五：完成电子商务网站的各主要模块功能（11月22日）
1、完成管理模块设计
2、会员系统模块的设计
3、图书管理模块的设计与开发
4、会员管理模块的设计与开发
5、订单管理模块的设计与开发
实验六：综合网站测试实例（12月20日）
1、编写测试方案
2、根据测试方案测试网站功能与性能，并修改网站
实验目的：
1、考察一个电子商务网站建设情况
2、仿造并完成一个网站设计方案
实验内容：
一、旅行社网店设计：（游）
网店栏目：首页、公司简介、公司动态、旅游线路(产品展示)、游记攻略（总站调用）、精彩图库、人才招聘、联系我们
企业简介：包括企业简介，企业文化，组织机构，成长历程等二级栏目
产品订购：一个产品订购反馈信息表单
联系我们：公布联系方法
首页版块：简介(包括企业简介，企业文化，组织机构，成长历程，人才招聘等二级栏目) 公司动态（横向滚动条） 企业形象(资质证书，荣誉证书) 旅游新闻（来自总站新闻）
经理人名片 线路（组团游线路、地接游线路） 图片欣赏（总站调用）
促销活动专区 本单位点评 城市点评 景点点评（来自总站） 友情链接 便利中心（来自总站）
景点景区网店设计
网店栏目：首页、景点景区、公司动态、旅游线路、游记攻略、精彩图库、人才招聘、联系我们
企业简介：包括企业简介，企业文化，组织机构，成长历程等二级栏目
产品订购：一个产品订购反馈信息表单
联系我们：公布联系方法
首页版块：简介(包括企业简介，企业文化，组织机构，成长历程等二级栏目
) 公司动态（横向滚动条）景点门票查询(指本景区的门票) 企业形象(资质证书，荣誉证书) 旅游新闻（来自总站新闻）
经理人名片 线路（组团游线路、地接游线路） 图片欣赏 活动专区 景点门票
大全 本单位点评 城市点评 景点点评 友情链接 便利中心
二、酒店网店设计：（住）
网店栏目：首页 酒店简介 酒店动态 客房介绍 设施介绍 酒店相册 人才招聘
首页版块：简介、 酒店动态（横向滚动条）、 旅游新闻（来自总部） 经理人名片 活动专区 酒店图片 便利中心（排在页面上）友情链接 本单位点评 城市点评 景点点评
三、旅游交通网店设计：（行）
网店栏目：首页 公司简介 公司动态 车型介绍 旅游攻略 人才招聘
首页版块：简介、公司动态（横向滚动条）、旅游新闻（来自总站新闻） 经理人名片 车型介绍、旅游攻略、便利中心（排在页面上）、本单位点评、城市点评、景点点评
四、旅游餐饮单位网店设计：（食）
网店栏目：首页、公司简介 公司动态 酒店设施 饮食文化 本店菜系 人才招聘
首页版块：简介、公司动态（横向滚动条），每周一菜，活动专区、经理人名片、美食展台（图片）、便利中心（排在页面上）、本单位点评、城市点评、景点点评
参照颜色：http://www.scysw.com/web/index.htm
五、旅游娱乐单位网店设计（娱）
网店栏目：首页 公司简介 公司动态 场所设施 精彩图库 本店特色 人才招聘
首页版块：简介、公司动态、旅游新闻、经理人名片 图片欣赏 活动专区 便利中心（排在页面上） 本单位点评 城市点评 景点点评
六、旅游购物单位网店设计（购）
网店栏目：首页 公司简介 公司动态
特别注意：
1、网店下面要有免责申明：以上所展示的信息由企业自行提供,内容的真实性、准确性和合法性由发布企业负责.本站对此不承担任何保证责任
2、当每个专区内无网店时隐藏，当有网店按规定大小显示；
（一）实践目的
1．掌握网站策划书的书写格式；
2．掌握网站策划书的书写方法与技巧。
（二）实践要求
本实践要求学生掌握网站策划书所包涵的内容，掌握网站策划书的书写方法格式与技巧。
（三）实践内容
1．书写超越时空网站调查报告；
2．书写网站建设策划书；
3．编排网站策划书格式。
网站是中国主要的运动鞋、皮鞋网络零售网站，聚焦在垂直的鞋及其相关商品领域深耕。
凭借雄厚的资金实力和在电子商务业界的诚信积累，与Nike、Adidas、Converse、NewBalance等国际大牌深度合作。
保证了产品与专卖店同步更新，让您不出家门能最快速度买到当季新款名牌鞋。
功能介绍
|
平台 |
模块 |
功能 |
|
移动端web端 |
首页 |
静态展示页面模块 |
|
移动端web端 |
分类 |
一级分类、二级分类 |
|
移动端web端 |
商品 |
搜索中心、商品列表、商品详情 |
|
移动端web端 |
购物车 |
购物车管理 |
|
移动端web端 |
用户 |
登录、注册、账户管理 |
|
移动端web端 |
收货地址 |
展示、添加、编辑、删除 |
|
- |
- |
- |
|
pc端后台管理 |
登录 |
管理员登录 |
|
pc端后台管理 |
用户管理 |
用户权限管理 |
|
pc端后台管理 |
分类管理 |
一级分类、二级分类管理 |
|
pc端后台管理 |
商品管理 |
商品录入、删除、修改、展示 |
项目架构
|
系统分层 |
使用技术 |
|
数据层： |
MYSQL |
|
服务层： |
NodeJs(express) |
|
前端展示： |
mobile web application,pc management system |
用户模块 ：注册接口、登录接口、登出接口、修改密码接口、查询个人信息接口、注册验证码接口、修改密码验证码接口
分类模块 ：一级分类查询接口、二级分类查询接口、火热的二级分类查询接口
购物车 ：添加接口、修改接口、删除接口、查询接口、查询带分页接口、
收货地址模块 ：添加接口、修改接口、删除接口、查询接口、pc端接口列表
分类模块 ：一级分类新增接口、一级分类修改接口、一级分类查询接口、二级分类新增接口、二级分类上传图片接口、二级分类修改接口、二级分类查询接口：用户模块 、用户查询接口、用户启用停用接口、品牌销量比较接口、某产品按时间的销量图接口、轮播图、导航栏
商品区
分类浏览：分类页面、菜单区域滚动、一级菜单渲染、二级分类联动渲染
搜索中心：搜索中心页面、搜索查询功能、搜索记录管理
学习目的：完成页面，本地存储，模版引擎使用，关键字搜索。
商品列表：商品列表页面、搜索查询功能、商品列表渲染、列表排序功能、上拉刷新功能、下拉加载功能
商品详情：商品详情页面、商品数据展示、商品尺码选择、商品数量选中、加入购物车
购物车：购物车商品展示、购物车商品删除、购物车商品编辑、购物车下拉刷新、购物车总额计算、用户模块
用户登录:1.1 用户登录页面 1.2 异步登录 1.3 登录回跳
个人中心:2.1 个人中心页面 2.2 个人信息展示 2.3 退出功能
用户注册:3.1 用户注册页面 3.2 获取短信验证 3.3 用户注册功能
管理员登录、管理员登录页面、异步登录交互
学习目的：使用bootstrap完成页面，异步登录交互业务。
首页模块、首页快速搭建、菜单功能、退出功能、数据可视化
学习目的：完成页面搭建，二级菜单交互功能，echarts完成数据可视化，退出业务。
用户管理:1.用户分页展示 2.用户禁用启用
分类管理:一级分类管理1.1 一级分类分页展示 1.2 一级分类添加
1.3 一级分类删除1.1 二级分类分页展示 1.2 二级分类添加 1.3 二级分类删除
实验目的与要求
（1）给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。
（2）给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。
一、实验目的与要求
给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。
给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。
二、实验内容
.构建基础网页
三、实验器材
微机+windows操作系统+HB
四、实验步骤
结构分析
图4-19所示的“咖啡店banner”可以使用内外嵌套的两个盒子(div)来定义，结构如图4-29所示。
结构分析
样式分析
控制效果图4-19的样式主要分为2个部分：
给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。
给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。
制作页面结构
根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example09】所示。
【example09】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>咖啡店banner</title>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
运行【example09】，此时页面中将不显示任何元素。
定义CSS样式
搭建完页面的结构后，接下来使用CSS对页面的样式进行修饰。本节采用从整体到局部的方式实现图4-19所示的效果，具体如下：
定义基础样式
/*将页面中所有元素的内外边距设置为0*/
*{ padding:0; margin:0;}
控制外层盒子
.outer{ /*设置外面盒子的样式*/
width:900px;
height:344px;
margin:50px auto;
background:url(images/bg.png) repeat-x;
}
在上面的代码中，第5行代码“background:url(images/bg.png) repeat-x;”用于给外层的盒子添加水平平铺的背景图像。
控制内层盒子
.inner{ /*设置里面盒子的样式*/
width:900px;
height:344px;
background:url(images/coffee.png) no-repeat center 30px;
}
在上面的代码中，第4行代码“background:url(images/coffee.png) no-repeat center 30px;”用于给内层盒子添加不平铺的背景图像，该背景图像在外层盒子垂直居中、且距离外层盒子的左边缘30px。
至此，完成图4-19所示“咖啡店banner”的CSS样式部分。刷新【example09】所在的页面，效果如图4-30所示。
CSS控制“咖啡店banner”效果
实验目的：
1、web服务器准备
2、数据库准备与连接数据库的设计方案
3、网站的管理和维护方案
实验内容：
一、实验目的与要求：
掌握数据表的创建及数据查询的方法及JDBC驱动程序的加载。
二、实验内容：
制作数据库文件，实现查询英语成绩及格的学生信息及完成向表中添加记录。
三、实验器材：
windows操作系统 + JDK + Tomcat + MyEclipse+SQL Server200+Access
四、实验步骤：
1、查询的应用
（1）利用Access建立数据库表students。
（2）通过ODBC数据源加载驱动程序，获取连接对象。
（3）编写程序代码grade.jsp，该程序关键代码如下。
<%
Connection con;
Statement sql;
ResultSet rs;
try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
}
catch(ClassNotFoundException e) {}
try{
con=DriverManager.getConnection("jdbc:odbc:grade" );
sql=con.createStatement(); // 通过无参的createStatement()方法创建语句对象（sql）
rs=sql.executeQuery("select * from students where english>=60");
out.print("<Table Border=1 bgcolor=cyan >");
out.print("<TR>");
out.print("<TH width=50>"+"学号");
out.print("<TH width=50>"+"姓名");
out.print("<TH width=100>"+"数学成绩");
out.print("<TH width=100>"+"英语成绩");
out.print("<TH width=100>"+"物理成绩");
out.print("</TR>");
while(rs.next())
{
out.print("<TR>");
out.print("<TD >"+rs.getString(1)+"</TD>");
out.print("<TD >"+rs.getString(2)+"</TD>");
out.print("<TD >"+rs.getInt(3)+"</TD>");
out.print("<TD >"+rs.getInt(4)+"</TD>");
out.print("<TD >"+rs.getInt(5)+"</TD>");
out.print("</TR>") ;
}
out.print("</Table>");
con.close();
}
catch(SQLException e1) {}
%>
2、数据添加的应用
本程序是向students表中添加记录，该程序由两个页面组成。
（1）制作表单界面insert.jsp将录入的数据提交给newdata.jsp页面。
（2）制作负责将数据添加到表students中的页面newdata.jsp，并显示添加后的记录。该程序的主要代码如下：
<% //获取提交的学号
String number=request.getParameter("number");
if(number==null)
{ number=""; }
byte b[]=number.getBytes("ISO-8859-1");
number=new String(b);
//获取提交的姓名
String name=request.getParameter("name");
if(name==null)
{ name=""; }
byte c[]=name.getBytes("ISO-8859-1");
name=new String(c);
//获取提交的新的数学成绩
String m=request.getParameter("math");
if(m==null)
{ m="-100"; }
//获取提交的新的英语成绩
String e=request.getParameter("english");
if(e==null)
{ e="-100"; }
//获取提交的新的物理成绩
String p=request.getParameter("phics");
if(p==null)
{ p="-100"; }
Connection con=null;
Statement sql=null;
ResultSet rs=null;
try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
}
catch(ClassNotFoundException event){}
try{
con=DriverManager.getConnection("jdbc:odbc:grade","","");
sql=con.createStatement();
String condition=
"INSERT INTO students VALUES"+"("+"'"+number+"','"+name+"',"+m+","+e+","+p+")";
sql.executeUpdate(condition); //执行添加操作
%>
<p>添加记录后的表
五、实验结果：
1．将students表中所有英语成绩高于60的学生信息显示在页面上。
2．通过页面输入学生的考试成绩，并将输入信息添加到students表中。
六 实验小结：（要能回答如下问题）
1．能说出JDBC驱动程序的加载方法。
2．能熟练操作在JSP页面中如何操作sql语句。
1、完成管理模块设计
2、会员系统模块的设计
3、图书管理模块的设计与开发
4、会员管理模块的设计与开发
5、订单管理模块的设计与开发
一、实验目的及要求
1）掌握JDBC技术及工作原理
2）制作网上投票系统
二、实验环境：
1）编程环境：MySQL，Tomcat，MyEclipse,jdk
2）操作系统软件：windowsXP
三、实验原理
1) C/S结构程序与B/S结构程序的区别
2) 常用集合的使用方法
3) JDBC的工作原理
4) JDBC连接数据库的方法和步骤
5) 使用JDBC进行CRUD操作的方法
四、实验内容
1）创建数据库及表格存放用户名和密码、主题、选项标。
2）开发页面查看页面主题信息
3）开发文件进行投票管理
4）开发页面添加新投票内容。
五、实验步骤及代码
(1)数据库的建立
本次投票系统使用的是Mysql数据库。共建了3张表：administrator表、topic表、optionlist表。administrator表是用户表，记录了管理员的帐号和密码；topic表是主题表，这张表记录了所有已存在的投票主题，其中的关键属性有投票主题的id号topic_id、开启或关闭的状态status以及该投票是单选或多选的属性issingle。option表是选项表，所有主题的所有选项都记录在此表，其中相同主题的选项拥有相同的主题id，此id为外码，参照的是topic表的topic_id属性，这样就可以将相同主题的属性关联在一起。数据库设计如下图：
(2)每个投票主题的查看
在用户打开投票系统的首页时，会看到所有已存在的投票主题，包括开启和关闭的投票，在每个主题后有一个状态属性，用于显示该主题是否开启。而每一个主题都是一个超链接，点击超链接可以查看此主题的详细信息以及进入投票等。实现这个功能其实很简单，我是遍历了一遍topic表，并将所有主题以超链接的形式输出，每个主题的超链接是带着该主题的主题号链接到一个servlet的，通过这个servlet进行数据库的访问，将该主题号的所有选项输出，这样就可以看到每个主题的选项以及相应的信息。核心代码如下：
|
<% if(session.getAttribute("username")!=null) session.removeAttribute("username"); Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/vote"; Connection conn = DriverManager.getConnection(url,"root","root"); Statement stmt = conn.createStatement(); String sql = "select topic_id,topic_name,status from topic"; ResultSet rs = stmt.executeQuery(sql); int i = 1; out.print("<p><table border='5'>"); while(rs.next()){ out.print("<tr>"); int topic_id = rs.getInt("topic_id"); String topic_name = rs.getString("topic_name"); String status = rs.getString("status"); out.print("<td><a href='display?topic_id=" + topic_id + "&topic_name=" + topic_name + "&status=" + status +"'>" + i + "." + topic_name + "</a></td> " + "<td>状态：" + status + "</td>"); out.print("</tr>"); i++; } out.print("</table></p>"); rs.close(); stmt.close(); conn.close(); %> |
(3)进行投票
点击超链接查看该主题的详细信息后，会跳转到一个名为display的servlet，用于显示该主题的选项以及得票情况，并根据其状态，设置一个超链接：若该投票是开启的，这此超链接会链接到一个投票页面，此超链接同时带着此主题的主题号进行链接；若此投票是关闭的，则不显示超链接，因而也无法投票。核心代码如下：
|
out.print("<h2><br>查看投票</h2>"); out.print("</body>"); out.print("<p><div style='font-weight:700;'>主题：" + topic_name + "</div>"); out.print("状态：" + status + "<br></p>"); if(status.equals("开启")) out.print("<a href='vote.jsp?topic_id=" + topic_id + "&topic_name=" + topic_name + "'>进入投票</a> "); out.print("<a href='user.jsp'>返回</a>"); out.print("<p><table border='5'>"); out.print("<tr style='font-weight:700;'><td>选项</td><td>票数</td></tr>"); while(rs.next()){ out.print("<tr>"); out.print("<td>" + i + "." + rs.getString("option_name") + "</td><td>" + rs.getInt("checked") + "</td>"); out.print("<tr>"); |
点击进入投票后，链接到一个投票页面，该投票页面根据链接过来的主题号查询数据库，并将所有选项以表单的形式输出已达到投票的目的。选择选项之后，点击提交按钮，会将此表单提交到一个名为VoteHandle的servlet进行处理。此servlet根据得到的选项号更新数据库，并转发到此主题的界面，此时数据已更新。核心代码如下：
|
Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/vote";
for(int i=0;i<checkboxchecked.length;i++){ Connection conn = DriverManager.getConnection(url, "root", "root"); String sql = "update optionlist set checked=checked+1 where option_id='" + checkboxchecked[i] + "'"; PreparedStatement ps = conn.prepareStatement(sql); ps.executeUpdate(); ps.close(); conn.close(); out.print("<script language='javascript'>alert('投票成功！');window.location.href='display?topic_id=" + topic_id + "&topic_name=" + topic_name + "&status=" + status +"';</script>"); |
(4)管理员对投票的操作
管理员输入正确的用户名和密码后，进入到管理员界面。其中会显示所有已存在的投票，点击超链接后，会进入到此主题的操作界面。此为一个名为TopicHandle的servlet，可以对该主题进行状态的设置，即设置开启或关闭。我的做法是在此servlet中根据该主题的状态显示一个超链接，点击此超链接便可对此主题进行处理，设置原理很简单，就是修改数据库中的状态一栏。核心代码如下：
|
out.print("<body>"); out.print("<h2><br>查看投票</h2>"); out.print("</body>"); out.print("<p><div style='font-weight:700;'>主题：" + topic_name + "</div>"); out.print("状态：" + status + "<br></p>"); if(status.equals("开启")) out.print("<a href='OpenOrClose?topic_id=" + topic_id + "&topic_name=" + topic_name + "&status=" + status + "'>关闭此投票</a> "); if(status.equals("关闭")) out.print("<a href='OpenOrClose?topic_id=" + topic_id + "&topic_name=" + topic_name + "&status=" + status + "'>开启此投票</a> "); out.print("<a href='administrator.jsp'>返回</a>"); out.print("<p><table border='5'>"); out.print("<tr style='font-weight:700;'><td>选项</td><td>票数</td></tr>"); while(rs.next()){ out.print("<tr>"); out.print("<td>" + i + "." + rs.getString("option_name") + "</td><td>" + rs.getInt("checked") + "</td>"); out.print("<tr>"); |
(5)发起新投票
在管理员界面有一个发起投票的超链接，该超链接将链接到一个新建投票的页面newtopic.jsp。该页面是一个表单，对新建投票的信息进行采集。我在页面中设计了一个下拉框，可以进行选项个数的选择，选择完个数后点击生成选项按钮，会动态添加相应个数的文本框，该功能是用javascript实现的。核心代码如下：
|
function addoption(){ var count = document.getElementsByName("count")[0].value; var i = 1; while(i<=count){ window.upid.innerHTML += "选项" + i + ".<input type='text' name='option" + i + "' title='选项" + i + "'><br>"; i++; } document.getElementById("button1").disabled="disabled";//失效代码 document.getElementById("submit").disabled=""; } function clearoption(){ window.upid.innerHTML = ""; document.getElementById("button1").disabled=""; document.getElementById("submit").disabled="disabled"; } <form id="form1" method="post" action="AddTopic" onsubmit="return check(this)"> <input type="submit" name="submit" id="submit" value="发起投票" disabled="true" class="button1"> <input type="reset" name="reset" id="reset" value="重置" class="button1"><br> 主题：<input type="text" name="topic" title="主题"><br> 投票方式：<input type="radio" name="type" value="单选" checked>单选 <input type="radio" name="type" value="多选">多选<br> 选项个数：<select name="count"> <%for (int i = 2; i <= 20; i++) {%> <option value="<%=i%>"><%=i%></option> <%}%> </select> <input type="button" name="button1" id="button1" value="生成选项" onclick="addoption()" class="button1"> <input type="button" name="button2" id="button2" value="清空选项" onclick="clearoption()" class="button1"><br> <div id="upid"></div> </form> |
五、实验结果：
1．能够完成发起投票，浏览投票管理投票的工作。
六、实验小结：
1．能熟练使用简单投票系统的应用。
实验目的：
1、编写测试方案
2、根据测试方案测试网站功能与性能，并修改网站
实验内容：
1. 测试目的
通过主要功能页面的前端性能测试，从前端分析引起页面响应缓慢的原因，并根据优化建议对其进行优化，提升前端性能，从而达到提升系统整体性能的目的。
2. 测试范围
主要对用户常用的页面进行测试，至少包括：首页、各分类页、搜索结果页等，此处我们只以首页为例进行测试和分析。
3. 测试方法
利用YSlow、PageSpeed等工具进行测试，因该网站是第三方的并不是我们自己的，所以无法进行埋点测试。其他的测试方法大家可自行练习。
4. WEB端测试结果分析
通过YSlow、PageSpeed等工具的测试后，综合结果并不算好，属于较差的情况，其中YSlow给出的评级是F（最差），具体结果分析如下：
l 存在较多的HTTP请求。其中有16个external Javascript scripts，7个external stylesheets，18个external background images，这些都可以尝试进行合并。
l 未使用CDN。
l 未指定失效时间。部分CSS、JS和图片等静态资源未指定失效时间，尤其像logo这样的不经常变化的图片应该指定Expires headers，可指示浏览器从本地磁盘中加载以前下载的资源，而不是通过网络加载。
l 未启用压缩。部分CSS、JS和图片等静态资源未启用压缩，为这些资源资源启用压缩可将其传送大小减少135.2 KiB (68%)。
l 未优化图片。适当地设置图片的格式并进行压缩可以节省大量的数据字节空间。尤其是对类似客服电话.jpg这样的图片。对这些图片资源进行优化后可将其大小减少282.1 KiB (47%)。
l 不要在HTML中进行图片缩放。本网站有11个图片进行了缩放。YSlow给出的建议是：你希望展现多大的图片，原始的图片大小就应该是多大，图片不要比期望的尺寸小，也不要比需要的尺寸大。
比如，如果我们要求现实一个200x200的图片，而我们的原始图片只有100x100，访问的时候浏览器需要等待图片完全下载完毕之后才知道图片的实际尺寸，然后才会判断图片是否满足预定的尺寸大小，如果大了就要缩小，如果小了就要放大。换句话说：图片下载完毕之前，浏览器无法正确给出判断，而且图片的清晰度也可能受到影响。
5. 移动端测试结果分析
移动端发现的问题以及需要优化的资源同4.WEB端测试结果分析中的内容，除此之外，还有如下内容需要进行优化：
l 字体大小无法自适应，在移动端不清晰。
l 移动端的页面没有自适应，导致用户需要水平滚动屏幕，如图8.32所示。
l 页面中并未设置视口。该网页在移动设备上的呈现尺寸将与在桌面浏览器中一样，因此系统会将其缩小到适合在移动屏幕上显示的尺寸。可以在Header区增加类似如下的代码：<meta name=viewport content="width=device-width, initial-scale=1">