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

网站设计实训报告

题 目：购物商城网站前台的设计与实现
学生姓名：杨宇飞
学 号：1176807432
专 业：计算机4班
指导教师：张静
课程设计(论文)任务及指导书
题 目
购物商城网站前台的设计与实现
题 目 来 源
□实际工程项目 □科研课题 ■教学模拟题目 □其它
题 目 类 型
□工程设计型 □科学研究型 □调研综述型 ■其它类型
一、课程设计（论文）任务（包括对工程图纸的具体要求）及设计参数
1问题定义、可行性研究
2需求分析。
3总体设计。
4详细设计及实现。
5测试及调试。
二、专题部分要求
设计与实现购物商城网站前台页面，包括网站首页、商品展示页、具体商品详细介绍页、购物车页、注册页、登录页、帮助中心客服页。
三、本题目的重点和难点以及与同组其它学生所做题目的关系
重点：采用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.1 html 6
2.1.2 CSS 6
2.1.3 Div+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.1 html
使用html描述的文件，能独立于各种操作系统平台，访问它只需要www浏览器，我们所看到的网页，是浏览器对html文件进行解释的结果。Html是由标记和属性组成的规则。这些规则规定了文字，表格和超链接在网页中显示等内容。
2.1.2 CSS
它是一种用来表现html（标准通用语言的一个应用）或xml（标准通用标记语言的一个子集）等文件样式的计算机语言。
它是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
2.1.3 Div+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”。首页的整体布局结构代码如下：
<div id ="header"> <iframe src="顶部.html"></iframe>顶部</div>
<div id ="main">主体</div>
<div id ="footer"><iframe src="底部.html"></iframe>底部</div>
3.添加CSS样式代码：
#header{width:100%;height:150px;background:url(images/h_bg.jpg); background-repeat:no-repeat; background-position:center; }
#main{width:100%; height:500px; margin-top:20px; }
#footer{width:980px;height:150px;text-align:center;line-height:20px; 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。顶部的整体布局结构代码如下：
<div id="header">
<div id="logo"></div>
<div class="menu"></div>
<div class="hello"></div>
<div class="nav"></div>
</div>
3.添加css样式代码
.menu {width:45%;height:28px;float:right; margin:-5px 50px 0px 0px;}
.hello {float:right; margin:35px 500px 0px 0px; color:#636362;}
.nav{width:800px;clear:both; margin-left:130px; padding-top:8px; }
4.首页头部效果图如图4.3所示

图4.4 首页头部效果图
4.1.3 主体main的实现
1.主体main整体布局如图4.5所示

you

zhong

zuo

图4.5 主体main整体布局
2.建立HTML的组织结构
顶部整体布局时分为三个div块，即zuo， zhong，和you。顶部的整体布局结构代码如下：
<div id="main">
<div id="divzuo">
<div id="divzhong">
<div class="shang"></div>
<div id="xia"></div>
<div id="divyou">
</div>
3.添加css样式代码
#main{width:100%; height:500px; margin-top:20px; }
#divzuo{width:200px;height:680px;float:left;background-image:url(images/bg%201.gif); background-repeat:no-repeat; margin-left:178px; }
#divzhong{width:524px; height:650px; float:left; margin:8px 0px 0px 8px;}
.shang{height:203px;background-image:url(images/ad-01.jpg); background-repeat:no-repeat;}
#xia{background-image:url(images/bg%201.gif);background-repeat:no-repeat;background-position:-213px -200px; width:524px; height:450px; margin-top:-10px;}
#divyou{width:240px;height:680px;float:left;background-image:url(images/bg%201.gif);background-repeat:no-repeat;background-position:-740px 0px; margin-left:8px;}
4.首页主体效果图如图4.6所示

图4.6 首页主体效果图
4.1.4 底部footer的实现
1.整体布局只有一个div块
2.建立HTML的组织结构
<div id="footer" ></div>
3.添加css样式代码
#footer{width:980px; height:150px; text-align:center;line-height:20px; margin-left:160px;}
4.首页头部效果图如图所示

图4.7 首页底部效果图
4.2 登陆页
4.1.1登陆布局的实现
登陆页和主页为同一网站的不同页面，整体布局一样，故略。
4.1.2登陆页主体布局的实现
1.登陆页整体布局如图4.8所示

you

zuo

图4.8 登陆页整体布局
2.建立HTML的组织结构
<div class="denglu">
<ul class="zuo">
</ul>
<ul class="you">
</ul>
</div>
3.添加css样式代码
.denglu{padding:50px0px;width:100%;height:400px;background:url('images/login_bg.gif')no-repeat;line-height:40px;background-position:center; background-position:top; font-size:10px; letter-spacing:1px;}
.zuo{width:40%;height:500px;float:left; margin:10px 0px 0px 186px; list-style:none; border-right:1px #ccc solid; }
.you{width:27%;height:500px;float:left;margin:10px0px;list-style:none;}
4.登陆页主体效果图如图4.9所示

4.9 登陆页主体效果图
4.2 购物车页
4.2.1购物车页布局的实现
购物车页和主页为同一网站的不同页面，整体布局一样，故略。
4.2.2购物车页主体布局的实现
1.购物车主体整体布局如图4.10所示
上部

中部

下部

4.10 购物车主体整体布局
2.建立HTML的组织结构
<div id="divg">
<div></div>
<table><table>
<table><table>
</div>
3.添加css样式代码
#divg{margin:0px 0px 0px 187px; font-size:15px;}
4.购物车主体效果图如图4.11所示

4.11 购物车主体效果图
第五章网站的兼容性测
5.1浏览器之间的兼容性测试方法
1.IE多版本使用IE Collection 软件模拟
2.Firefox 3.5（需安装Firebug插件）
5.2验证是否符合W3C标准的方法
1.制作期间使用Dreamweaver兼容性提示
2.网页制作完成后使用Firefox插件进行检测
3.发送到validator.w3.org官方网站进行在线验证
第六章 结论
通过学习网页设计与制作，我对网站建设有所了解，现在模拟建设一个购物网站，对网站建设的心得有以下：
网站主题：购物网站主要是关于网上购物的网站，网站的主要购物类型有生活用品、家电、日用品等。
1.利用表格进行排版：表格主要有三个元素－表格、行和列及单元格，而且表格还可以嵌套，不过在这里建议大家不要把所有的网页都放在一个大表格中，并且嵌套最好不要超过3层，因为如果你那样做了，浏览器解析的时间会增加了，那么当浏览者访问时速度就慢了。
2.利用层排版：层很适合形式自由的排版，现在WEB标准建议排版时抛弃表格，不过如果初学者学习利用层排版时还要学习其它好多相关知识，其中最重要的是CSS，使用CSS来辅助层可以对网页实现排版，可以解决表格给我们带来的烦恼。如果你对WEB标准感兴趣，那么你就该好好的学习CSS了！
3.利用框架进行排版：它是一种用浏览器窗口，显示多个网页的形式，前几天记得有人在论坛中求，网页格式的课件，网页格式的课件大部分是用框架做出来的。
4.编辑文档与超级连接 经过上面的几个步骤之后，一切准备工作都已经就绪，现在可以象装箱一样把收集到的资料及制作的组件放到页面布局中为它们指定的位置上了。 插入到网页布局之后，文字都是同一种字号，同一种风格，同一种颜色；图片有大有小。所以这时就要对各种元素进行编辑了，例如，改变文本字体、字号、颜色、大小等，对图片进行大小，表格的调整，按钮行为的调整等等！ 连接是网页的灵魂。浏览者在浏览网页时，单击网页设置的超级连接可以跳转到相关页面，所以一个好的网页是离不开连接的。
参考文献
[1]武创.网页探索之旅.北京：电子工业出版社
[2]胡艳洁.HTML 标准教程 .北京：中国青年出版社
. . . .