2023年12月20日发(作者：本田crv2022)
网站设计实训报告
题 目：购物商城网站前台的设计与实现
学生姓名：杨宇飞
学 号:1176807432
专 业:计算机4班
指导教师：张静
1
课程设计（论文）任务及指导书
题 目
题 目 来 源
题 目 类 型
购物商城网站前台的设计与实现
□实际工程项目 □科研课题 ■教学模拟题目 □其它
□工程设计型 □科学研究型 □调研综述型 ■其它类型
一、课程设计（论文）任务(包括对工程图纸的具体要求）及设计参数
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
目录
课程设计(论文)任务及指导书 ............................................ 2
第一章引言 ................................................................ 4
1.1网站开发的背景 ..................................................... 4
1。2 网站开发的目的和意义 ............................................. 4
1.3 网站开发的需求分析 ................................................ 4
第二章 开发技术和工具的介绍 ............................................... 5
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
3
第一章引言
1。1网站开发的背景
近年来,随着Internet的迅速崛起,互联网已日益成为收集提供信息的最佳最快渠道，并快速进入传统的流通领域。互联网的跨地域性、可交互性、全天候性使其在与传统媒体行业和传统贸易行业的竞争中具不可抗拒的优势,因而发展十分迅速。在电子商务在中国逐步兴起的大环境下，越来越多的人们开始选择在网上购物，这其中包括所有日常生活用品及食品、服装等。通过在网上订购商品,可以由商家直接将商品运送给收货人，节省了亲自去商店挑选礼品的时间,具备了省时、省事、省心等特点,让顾客足不出户可以购买到自己满意的商品。
1.2 网站开发的目的和意义
我们的网上商城建设在为浏览者与网站所有人搭建起一个网络平台，浏览者或潜在客户在这个平台上可以进行整个交易、交流过程，与商务型网站相比,商城网站建设的业务更依赖于互联网，基于互联网络销售，消费者基本都来源于网上。电子商城的订购功能更强大，集批发、零售、团购及在线支付等功能于一体的订单创建与费用支付.网上商城方案结合网站建设电子商务应用与开发的成功经验和技术积累,以实惠的价格向更多的商家及个人提供先进、稳定的网上商城平台开发服务。
（1）以独立域名在互联网上开设网上商城，集销售、服务、资讯一体化的电子商务平台；
（2）依托此商城开展综合性的网络营销活动，推广网站，树立品牌；
（3)建立起良好的数据/应用集成接口。
1。3 网站开发的需求分析
1。网站目标受众：电子商品需求者、商业人士.
2.通过贵美商城网站：
(1)展示商品价格、质量和类型;
4
（2)传达企业人士的设计理念;
（3）加深浏览者对商品的认识
3。网站整体设计风格
考虑网站的定位、主要受众群体和设计目标，我们采用的设计风格简洁大方，稳重。
4.配色方案
以橙色主色，以白色为辅助色，字体采用宋体设计.
5.网上商城功能概述:
(1)首页，商品展示;
(2）会员注册、登录,建立完整的会员资料库；
（3）管理员发布、管理商品信息、上传图片等；
（4）支持商品多级分类检索、关键词模糊搜索;
(5）支持价格的管理，包括市场价、批发价等；
（6）方便快捷的购物车、网上支付；
（7）可编辑的订购说明。
第二章 开发技术和工具的介绍
5
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创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。
6
第三章 网站的总体设计
贵美商城的总体设计结构图如图3.1所示。
贵美商城
首
页
商
品
展
示
商
品
介
绍
页
购
物
车
页
登
录
页
注
册
页
帮
助
中
心
页
页
图3。1贵美商城总体设计结构图
7
第四章 网站的详细设计与实现
4。1首页
4。1。1首页布局的实现
1.首页包括头部、主体部分、和底部三大部分。首页布局如图4.1所示。
顶部（header）
主体部分（main）
底部（footer）
4。1首页整体布局
2。首先建立HTML的组织结构
主页整体布局时分为三个div块，即头部header，中间主体部分main和底部footer。顶部和底部使用iform引用“顶部.html”和“底部。html\"。首页的整体布局结构代码如下：
〈div id =”footer”>〈iframe src=”底部.html”〉
3。添加CSS样式代码：
＃header{width：100％;height：150px;background:url（images/h_)；
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所示
8
图4.2首页效果图
4.1.2 顶部header的实现
1。整体布局如图4。3所示
图4。3顶部header整体布局
9
2。建立HTML的组织结构
顶部整体布局时分为四个div块,即logo，menu，hello,和nav.顶部的整体布局结构代码如下：
〈div id=”logo\">〈/div〉
〈div class=\"menu”〉
〈div class=\"hello”>
〈div class=”nav”〉
〈/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所示
zuo
zhong you
图4.5 主体main整体布局
2.建立HTML的组织结构
顶部整体布局时分为三个div块，即zuo， zhong，和you。顶部的整体布局结构代码如下：
10
〈div id=”divzhong\"〉
〈div class=\"shang\"〉
〈/div〉
3。添加css样式代码
#main｛width：100％； height：500px； margin-top:20px； }
＃divzuo｛width：200px;height:680px;float:left;background—image：url(images/bg％）; 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％）；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%）;background-repeat:no—repeat；background-position:—740px
0px; margin—left：8px;}
4。首页主体效果图如图4.6所示
11
图4.6 首页主体效果图
4.1.4 底部footer的实现
1.整体布局只有一个div块
2。建立HTML的组织结构
3。添加css样式代码
。denglu｛padding：50px0px；width：100％;height：400px；background：url(’images/login_’）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所示
13
4。9 登陆页主体效果图
4。2 购物车页
4.2.1购物车页布局的实现
购物车页和主页为同一网站的不同页面，整体布局一样，故略。
4。2。2购物车页主体布局的实现
1.购物车主体整体布局如图4。10所示
上部
中部
4.10 购物车主体整体布局
下部
2。建立HTML的组织结构
14
〈div id=”divg”>
〈div〉〈/div〉
发布评论