购物商城网站前台的设计与实现Word下载.doc

购物商城网站前台的设计与实现Word下载.doc

《购物商城网站前台的设计与实现Word下载.doc》由会员分享，可在线阅读，更多相关《购物商城网站前台的设计与实现Word下载.doc（18页珍藏版）》请在冰豆网上搜索。

重点：

采用DIV+CSS布局。

难点：

编码符合W3C标准，无冗余代码。

选题分组方式：

三人一组，分工合作完成。

四、指导方式和工作进度要求

指导方式：

集中辅导、个别答疑相结合。

工作进度：

1天需求分析；

2天总体设计；

3-4天详细设计及编码；

5天测试及调试。

五、与本设计题目相关的理论知识（包括新知识）提要

网站前台的开发流程；

W3C和Web2.0标准；

DIV+CSS布局；

HTML、CSS语言；

开发工具UltraEdit；

Dreamweaver站点管理；

调试工具Firefox+Firebug插件。

六、建议参考资料及使用方法

1北京阿博泰克北大青鸟.使用HTML语言和CSS开发商业站点，科学技术文献出版社,2011年

2前沿科技.精通CSS+DIV网页样式布局,人民邮电出版社,2007年

3徐延章.美工与创意——网页设计艺术,科学出版社,2012年

4王爽、徐仕猛、张晶.网站设计网页配色：

经典网页设计800例,科学出版社,2011

七、答辩之前学生应作的准备工作提要

1完成目标网站前台的开发

2完成课程设计报告的撰写

目录

课程设计（论文）任务及指导书 2

第一章引言 4

1.1网站开发的背景 4

1.2网站开发的目的和意义 4

1.3网站开发的需求分析 4

第二章开发技术和工具的介绍 6

2.1开发技术 6

2.1.1html 6

2.1.2CSS 6

2.1.3Div+CSS 6

2.2开发工具 6

第三章网站的总体设计 7

第四章网站的详细设计与实现 8

4.1首页 8

4.1.1首页布局的实现 8

4.1.2顶部header的实现 9

4.1.3主体main的实现 10

4.1.4底部footer的实现 12

4.2登陆页 13

4.1.1登陆布局的实现 13

4.1.2登陆页主体布局的实现 13

4.2购物车页 14

4.2.1购物车页布局的实现 14

4.2.2购物车页主体布局的实现 14

第五章网站的兼容性测 16

5.1浏览器之间的兼容性测试方法 16

5.2验证是否符合W3C标准的方法 16

第六章结论 17

参考文献 18

第一章引言

1.1网站开发的背景

近年来,随着Internet的迅速崛起,互联网已日益成为收集提供信息的最佳最快渠道，并快速进入传统的流通领域。

互联网的跨地域性、可交互性、全天候性使其在与传统媒体行业和传统贸易行业的竞争中具不可抗拒的优势，因而发展十分迅速。

在电子商务在中国逐步兴起的大环境下，越来越多的人们开始选择在网上购物，这其中包括所有日常生活用品及食品、服装等。

通过在网上订购商品，可以由商家直接将商品运送给收货人，节省了亲自去商店挑选礼品的时间，具备了省时、省事、省心等特点，让顾客足不出户可以购买到自己满意的商品。

1.2网站开发的目的和意义

我们的网上商城建设在为浏览者与网站所有人搭建起一个网络平台，浏览者或潜在客户在这个平台上可以进行整个交易、交流过程，与商务型网站相比，商城网站建设的业务更依赖于互联网，基于互联网络销售，消费者基本都来源于网上。

电子商城的订购功能更强大，集批发、零售、团购及在线支付等功能于一体的订单创建与费用支付。

网上商城方案结合网站建设电子商务应用与开发的成功经验和技术积累，以实惠的价格向更多的商家及个人提供先进、稳定的网上商城平台开发服务。

（1）以独立域名在互联网上开设网上商城，集销售、服务、资讯一体化的电子商务平台；

（2）依托此商城开展综合性的网络营销活动，推广网站，树立品牌；

（3）建立起良好的数据/应用集成接口。

1.3网站开发的需求分析

1.网站目标受众：

电子商品需求者、商业人士。

2.通过贵美商城网站：

（1）展示商品价格、质量和类型；

（2）传达企业人士的设计理念；

（3）加深浏览者对商品的认识

3.网站整体设计风格

考虑网站的定位、主要受众群体和设计目标，我们采用的设计风格简洁大方，稳重。

4.配色方案

以橙色主色，以白色为辅助色，字体采用宋体设计。

5.网上商城功能概述：

（1）首页，商品展示；

（2）会员注册、登录，建立完整的会员资料库；

（3）管理员发布、管理商品信息、上传图片等；

（4）支持商品多级分类检索、关键词模糊搜索；

（5）支持价格的管理，包括市场价、批发价等；

（6）方便快捷的购物车、网上支付；

（7）可编辑的订购说明。

第二章开发技术和工具的介绍

2.1开发技术

2.1.1html

使用html描述的文件，能独立于各种操作系统平台，访问它只需要www浏览器，我们所看到的网页，是浏览器对html文件进行解释的结果。

Html是由标记和属性组成的规则。

这些规则规定了文字，表格和超链接在网页中显示等内容。

2.1.2CSS

它是一种用来表现html（标准通用语言的一个应用）或xml（标准通用标记语言的一个子集）等文件样式的计算机语言。

它是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2.1.3Div+CSS

DIV+CSS是WEB设计标准，它是一种网页的布局方法。

与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。

提起DIV+CSS组合，还要从XHTML说起。

XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。

“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。

因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。

也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。

2.2开发工具

Dreamweaver介绍：

一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。

在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。

第三章网站的总体设计

贵美商城的总体设计结构图如图3.1所示。

贵美商城

首

页

注

册

帮

助

中

心

登

录

购

物

车

商

品

介

绍

展

示

图3.1贵美商城总体设计结构图

第四章网站的详细设计与实现

4.1首页

4.1.1首页布局的实现

1.首页包括头部、主体部分、和底部三大部分。

首页布局如图4.1所示。

顶部（header）

主体部分（main）

底部（footer）

4.1首页整体布局

2.首先建立HTML的组织结构

主页整体布局时分为三个div块，即头部header，中间主体部分main和底部footer。

顶部和底部使用iform引用“顶部.html”和“底部.html”。

首页的整体布局结构代码如下：

<

divid="

header"

>

<

iframesrc="

顶部.html"

/iframe>

顶部<

/div>

main"

主体<

footer"

底部.html"

底部<

3.添加CSS样式代码：

#header{width:

100%;

height:

150px;

background:

url（images/h_bg.jpg）;

background-repeat:

no-repeat;

background-position:

center;

}

#main{width:

height:

500px;

margin-top:

20px;

#footer{width:

980px;

text-align:

line-height:

margin-left:

160px;

}

4.首页效果图如图4.2所示

图4.2首页效果图

4.1.2顶部header的实现

1.整体布局如图4.3所示

图4.3顶部header整体布局

2.建立HTML的组织结构

顶部整体布局时分为四个div块，即logo，menu，hello，和nav。

顶部的整体布局结构代码如下：

divid="

<

logo"

divclass="

menu"

<

hello"

nav"

<

3.添加css样式代码

.menu{width:

45%;

28px;

float:

right;

margin:

-5px50px0px0px;

.hello{float:

35px500px0px0px;

color:

#636362;

.nav{width:

800px;

clear:

both;

130px;

padding-top:

8px;

}

4.首页头部效果图如图4.3所示

图4.4首页头部效果图

4.1.3主体main的实现

1.主体main整体布局如图4.5所示

you

zhong

zuo

图4.5主体main整体布局

顶部整体布局时分为三个div块，即zuo，zhong，和you。

<

divzuo"

divzhong"

<

shang"

<

xia"

divyou"

margin-t