靓丽阁时尚女装网站的设计与实现
目 录
一、引言 1
二、课题意义及目标 1
三、网站制作工具 1
（一）PHOTOSHOP 1
（二）DREAMWEAVER 1
四、网站设计 1
（一）网站总体规划 1
（二）首页设计 1
（三）列表页设计 3
（四）内容详细页设计 3
（五）注册和登录页设计 4
五、网站实现 4
（一）首页实现 4
1、页头设计 5
2、内容设计 5
3、页脚设计 6
（二）列表页实现 7
（三）内容详细页实现 8
（四）注册和登录页实现 9
（五）网站JS部分实现 10
1、网站banner部分JS实现 10
2、本周上新部分JS实现 11
六、网站测试 12
致谢 14
参考文献 15
附录 16
一、引言
当今世界已进入信息时代，网站已经被许多企业们所运用。互联网应用规模正不断扩大，越来越多的服装商家把传统的服装移植到互联网上,众多的服装企业也在互联网上建立了自己的网络销售平台。
二、课题意义及目标
随着因特网的快速发展下,社会竞争越来越激烈,在这个竞争和效率并存的社会，人们有很强的时间观念，使网络的应用已普及到经济和社会生活的各个领域。靓丽阁时尚女装网站主要用Dreamw
*景先生毕设|www.jxszl.com +Q: ^351916072*
eaver软件作为开发的工具，使用DIV+CSS开发出的一个服装商城网站。
三、网站制作工具
（一）Photoshop
Photoshop是Adobe公司名下最好的图像处理软件之一，一直都被大家所使用。它是一个对图片处理，加工以及图片合成的软件。尤其会被专业的设计师使用。这个软件可以让一个图片变成另一个图像，很是奇妙。
（二）Dreamweaver
Adobe Dreamweaver，简称“DW”，主要用来制作网站的编写。使用这个软件，做出来的作品会让人眼前一亮，不可思议。呈现出的网站，让人一看就知道她的整体布局和颜色搭配。非常适合用来制作网站的一款软件。
四、网站设计
（一）网站总体规划
本网站是一个功能比较齐全的服装商城网站，网站总体规划了网站首页，春装连衣裙、针织衫、高领毛衣、百搭衬衫、短外套、卫衣、风衣、注册、登录几个模版。在春装连衣裙、针织衫、高领毛衣、百搭衬衫、短外套、卫衣、风衣等二级页面下又做了三级详细商品页面。具体结构如下图41所示。
（二）首页设计
网站首页就是一个网站的第一页，当浏览者点击进去第一眼就会被首页所吸引。首页是作为一个网站的门面。非常的重要，可以让大家看出整个的布局和设计，一目了然非常的清楚。
首页网站页面结构设计如图42所示。
图41 网站结构图
注册和登录
Logo
网站搜索
导航栏
Banner
新品推荐
时尚速递
本周上新
网站底部信息
版权声明
图42 页面布局
（三）列表页设计
春装连衣裙、针织衫、高领毛衣、百搭衬衫、短外套、卫衣、风衣等二级页面是属于列表页，对于他们我采用了相同的页面结构，具体列表页面结构如图43所示。
注册和登录
Logo
网站搜索
导航栏
Banner
商品精选
二级栏目商品列表
网站底部信息
版权声明
图43 列表页结构表
（四）内容详细页设计
内容详细页设计主要是服装的展示，浏览者只要点击列表页商品，就可以看到商品的详细介绍以及清楚的图片，方便浏览者更清楚的了解该商品。具体页面结构如下表44所示。
注册和登录
Logo
网站搜索
导航栏
Banner
商品精选
商品详细介绍
网站底部信息
版权声明
表44 内容详细表
（五）注册和登录页设计
这个地方主要显示注册和登录的功能，浏览者只需进入网页注册个人信息后登录，就可以看到网站的整个布局。具体页面结构如下表45所示。
注册和登录
Logo
网站搜索
导航栏
Banner
注册和登录部分
网站底部信息
版权声明
表45 注册登录表
五、网站实现
（一）首页实现
首页是指一个网站的第一个页面，顾客点击进去后会了解网站，阅读里面的内容。贯穿网站的主要部分。根据网站的各页面设计，网站首页的整体页面布局可以分为“页头设计”、“内容设计”、“页脚设计”几个部分，具体如下：
1、页头设计
在页面部分主要使用4个DIV版面分为4个部分，分别是“注册、登录和用户信息”、“LOGO和网站搜索”、“网站导航栏”和“网站BANNER”部分见图51所示。
图51 网站页头部分
注册、登录和用户信息部分，浏览者可以点击“请登录”链接链接到“登录”页面，单击“注册按钮”链接到注册页面，用户还可以在这部查询到订单信息、收藏的品牌、个人信息等等内容。
- 正品保证
原文链接：http://www.jxszl.com/jsj/xxaq/50579.html
