快易达网上超市的设计与建站是基于当今社会，网络销售已经成为一种潮流一种时尚，方便了人们的衣食住行。越来越多的人依赖于网上购物，可以足不出户的买到自己想要的商品，又可以省了购物逛商场的时间，当今社会互联网产业飞速发展，已经深入人心，改变了人们以往的生活方式，渐渐地成为人们生活中必不可少的生活精神需求品。快易达网上超市的建立正是基于人们对网上购物的认同以及网上购物带给人们的便捷。本网站使用HTML和CSS等技术平台进行的设计与建站，运用了Javascript对部分图片和文字进行特效处理，使得网站变得更加美观、新颖。
目录
一、引言 1
二、需求分析 1
三、网站开发工具介绍 2
四、主体设计 2
（一）网站开发流程 2
1.功能结构图设计 2
2.界面设计 3
（二）网站实现的基本功能 10
1.首页 10
2.注册页面介绍 11
3.快易达公告页面介绍 12
4.我的购物车介绍 12
5.我的宝贝的介绍 13
6.三级页面介绍 14
（三）JavaScript特效实现 15
五、网站的兼容性设计 17
六、总结 18
致谢 19
一、引言
如今，互联网事业发展迅速，从而带动了很多互联网相关产业的发展，互联网相关产业越来越被人们所认同。也有不少商家通过互联网事业的发展来发展自己的事业，像淘宝，京东，苏宁易购等等，也带动了快递行业的发展，解决了一部分人的就业问题，加快了货物的流通速度。 不少商家为了提高自己产品的知名度也建了自己的网站。网上超市作为一种新型产业的兴起，改变了传统的只能在店里买东西的方式，也为不少不便出行买东西和没有时间外出购物的人提供了很多方便。快易达网上超市的建立，一方面改变了本来只可以在实体店售货的方式，增加了网上售货，增加了销售途径和收益，另一方面，为部分人提供了相应的职业，增加了他们的收入，给他们的生活带来了物质保障，同时也为政府解决了一些就业问题。
本网站是使用HTML和CSS同时配合JS特效完成的 。这是现在比较风行的建站方法， 这种方式
 *景先生毕设|www.jxszl.com +Q: &351916072& 
建站资料丰富，有大量的资料为本网站的建立提供帮助。
二、需求分析
当今超市遍布全国各地，人们的购物是离不开超市的，随着近些年来互联网的飞速发展，把人们带领导一个新的时代——网络时代，网上购物越来越成为一种时尚，也成为人们购物的新一种捷径，尤其是年轻人更依赖于网上购物。快易达网上超市的建立打破传统只能在实体店购物的方式，大大的促进人们购物的速度和购物的数量，同时也为一部分人提供了就业岗位，促进了中国经济的发展。同时网上购物甚至会比实体店里面更便宜一点，不仅为人们提供了方便也为人们得到了优惠而又实惠的商品。
所以网上超市的建立不管是从宏观方面考虑还是微观方面考虑都是很有必要的。因为这样可以给我们的生活带来很多的方便，也增加了我们的经济收入，改善我们的生活方式和生活质量。快易达网上超市的建立是很有必要的。
三、网站开发工具介绍
快易达网上超市使用通过Photoshop的运用可以制作许多精美的图片，使得图片内容与网站内容有更高的契合度，很大程度上也提高网站页面的美观程度。
Dreamweaver是著名的网站开发工具，可以将代码直接通过设计把每一个框架和位置展现出来。在代码编写的过程中能通过首字母得到各种标签的提示，不同类型的标签也会由不同的颜色区分，内容清晰明了，很大程度上减少了代码查看和编写的难度。
网站建设中配合使用的还有记事本和JavaScript，记事本能更快的打开网页代码，且记事本不限制对网页代码的查看，减少了在应用软件上的麻烦，提高了代码编写的效率。JavaScript脚本语言的运用使得网站在格式内容上有更多的变化和选择。所以选择Dreamweaver、Photoshop、JavaScript 和记事本来建设网站，并在后期使用 Internet Explorer和Google Chrome来对页面进行兼容性的测试。
四、主体设计
（一）网站开发流程
1.功能结构图设计
本网站分为首页、秒杀、闪拍、服装城、家用电器、超市、电脑、手机、数码产品、零食、生鲜等功能模块。网站详细结构图如图41所示：


图41网站详细结构图
首页是一个网站的脸面，也是吸引网站浏览者眼球的重要方式。所以首页设计的好坏关系着网站流量的命运。固然首页显得尤为重要。
2.界面设计
网站首页是整个网站的核心和框架，其他页面的布局也大都会依照网站首页布局来进行。网站采用DIV+CSS的布局方式确定首页的框架，首页具体框架如图42所示：
LOGO
导航
Banner
各种商品的陈列
下部导航
版权
图42首页具体框架
首页使用三级导航给人一目了然的感觉，且大度自然，能够吸引浏览者浏览，大大促进了人们购买物品的欲望。同时也可促进商品的成交。如图43
Logo
导航条
二级导航
主要页面内容
下部导航
版权
图43字页框架
子页使用的是普通的排列方式，保留了首页的header和footer，这样的布局样式和苏宁易购、京东、淘宝都相差无几，就是为了让浏览者找到那种浏览淘宝京东的熟悉感，从而不会拒生，首页采用是head、body的普通样式。
（1）首页头部div和层样式如下所示：
navindex
header
main
mainnav
w
w
wrap
middlepiclist
rightnotice
clear
W
dapai
box1
footer
首页部分DIV结构代码如下：