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

1、万顺达百货网站设计实训报告题 目：购物商城网站前台的设计与实现学生姓名：杨宇飞学 号：1176807432专 业：计算机4班指导教师：张静课程设计（论文）任务及指导书题 目购物商城网站前台的设计与实现题目 源来口实际工程项目科研课题教学模拟题目口其它题目 型类工程设计型口科学研究型调研综述型其它类型一、课程设计（论文）任务（包括对工程图纸的具体要求）及设计参数1问题定义、可行性研究2需求分析。3总体设计。4详细设计及实现。5测试及调试。二、专题部分要求设计与实现购物商城网站前台页面，包括网站首页、商品展示页、具体商品详细介绍 购物车页、注册页、登录页、帮助中心客服页。三、本题目的重点和难点以及

2、与同组其它学生所做题目的关系重点：采用DIV+CSS局。难点：编码符合W3Gs准，无冗余代码。选题分组方式：三人一组，分工合作完成。四、指导方式和工作进度要求指导方式：集中辅导、个别答疑相结合。工作进度：1天 需求分析；2天总体设计；3-4天详细设计及编码；5天测试及调试。五、与本设计题目相关的理论知识（包括新知识）提要网站前台的开发流程；W3C?口 Web2.琳准；DIV+CS布局；HTML CSSS言；开发工具UltraEditDreamweave站点管理；调试工具 Firefox+Firebugff 件。六、建议参考资料及使用方法1北京阿博泰克北大青鸟使用HTML语言和CSSFF发商业站

3、点，科学技术文献出版社201 年2前沿科技精通CSS+DIV页样式布局人民邮电出版社2007年3徐延章.美工与创意一一网页设计艺术科学出版社201邪4王爽、徐仕猛、张晶网站设计网页配色：经典网页设课00例科学出版社,2011七、答辩之前学生应作的准备工作提要1完成目标网站前台的开发2完成课程设计报告的撰写页脚内容5目录课程设计（论文）任务及指导书 2第一章引言61.1 网站开发的背景61.2 网站开发的目的和意义 61.3 网站开发的需求分析6第二章开发技术和工具的介绍72.1 开发技术82.1.1 html82.1.2 CSS82.1.3 Div+CSS82.2 开发工具8第三章网站的总体设

4、计9第四章 网站的详细设计与实现 104.1 首页104.1.1 首页布局的实现104.1.2 顶部header的实现114.1.3 主体 main的实现 .124.1.4 底部footer的实现144.2 登陆页 登陆布局的实现 144.2.2 登陆页主体布局的实现 144.2购物车页 购物车页布局的实现154.2.2 购物车页主体布局的实现 15第五章网站的兼容性测185.1 浏览器之间的兼容性测试方法 185.2 验证是否符合 W3c标准的方法 18第六章结论19参考文献20万顺达百货第一章引言1.1 网站开发的背景近年来，随着Internet的迅速崛起，

5、互联网已日益成为收集提供信息的最佳最快渠道，并快速进入传统的流通领域。互联网的跨地域性、可交互性、全天候性使其在与传统媒体行业和 传统贸易行业的竞争中具不可抗拒的优势，因而发展十分迅速。在电子商务在中国逐步兴起 的大环境下，越来越多的人们开始选择在网上购物，这其中包括所有日常生活用品及食品、 服装等。通过在网上订购商品，可以由商家直接将商品运送给收货人，节省了亲自去商店挑 选礼品的时间，具备了省时、省事、省心等特点，让顾客足不出户可以购买到自己满意的商 品。1.2 网站开发的目的和意义我们的网上商城建设在为浏览者与网站所有人搭建起一个网络平台，浏览者或潜在客户 在这个平台上可以进行整个交易、交

6、流过程，与商务型网站相比，商城网站建设的业务更依 赖于互联网，基于互联网络销售，消费者基本都来源于网上。电子商城的订购功能更强大， 集批发、零售、团购及在线支付等功能于一体的订单创建与费用支付。网上商城方案结合网 站建设电子商务应用与开发的成功经验和技术积累，以实惠的价格向更多的商家及个人提供 先进、稳定的网上商城平台开发服务。(1)以独立域名在互联网上开设网上商城， 集销售、服务、资讯一体化的电子商务平台； (2)依托此商城开展综合性的网络营销活动，推广网站，树立品牌；(3)建立起良好的数据/应用集成接口。1.3 网站开发的需求分析1 .网站目标受众：电子商品需求者、商业人士。2 .通过贵美

7、商城网站：(1)展示商品价格、质量和类型；页脚内容6万顺达百货(2)传达企业人士的设计理念；(3)加深浏览者对商品的认识3 .网站整体设计风格考虑网站的定位、主要受众群体和设计目标，我们采用的设计风格简洁大方，稳重4 .配色方案以橙色主色，以白色为辅助色，字体采用宋体设计。5 .网上商城功能概述：(1)首页，冏品展小；会员注册、登录，建立完整的会员资料库；(3)管理员发布、管理商品信息、上传图片等；支持商品多级分类检索、关键词模糊搜索；(5)支持价格的管理，包括市场价、批发价等；(6)方便快捷的购物车、网上支付；(7)可编辑的订购说明。第二章开发技术和工具的介绍2.1 开发技术2.1.1 ht

8、ml使用html描述的文件，能独立于各种操作系统平台，访问它只需要 www浏览器，我们 所看到的网页，是浏览器对 html文件进行解释的结果。Html是由标记和属性组成的规则。 这些规则规定了文字，表格和超链接在网页中显示等内容。2.1.2 CSS它是一种用来表现html （标准通用语言的一个应用）或 xml （标准通用标记语言的一个 子集）等文件样式的计算机语言。它是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。2.1.3 Div+CSSDIV+CSS WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局 定位的方式不同，它可以实现网页页面内容与表

9、现相分离。 提起DIV+CSSfi合，还要从XHTML 说起。XHTML是一种在HTML （标准通用标记语言的子集）基础上优化和改进的新语言，目 的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。“DIV+CSS其实是错误的叫法，而标准的叫法应是 XHTML+CSS因为DIV与Table者B 是XHTML或HTML语言中的一个标记，而 CSS只是一种表现形式。也许其提出者本意并没 有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS件的组合。2.2 开发工具Dreamweaver 介绍：一个可视化的网页设计和网站管理工具， 支持最新的 Web技术，包含HTM

10、L检查、HTML 格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查 找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态 HTML、基于团队的 Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。第三章网站的总体设计贵美商城的总体设计结构图如图3.1所示贵美商城品展示页品介绍页助中心页页脚内容13图3.1贵美商城总体设计结构图第四章网站的详细设计与实现4.1 首页4.1.1 首页布局的实现1首页包括头部、主体部分、和底部三大部分。首页布局如图4.1所示。顶部（header）主体部分（main）底部(foote

11、r)1 .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

12、"><iframe src=" 底部.html"></iframe> 底部 </div>3 .添加CSS样式代码：#headerwidth:100%;height:150px;background:url(images/h_bg.jpg);background-repeat:no-repeat; background-position:center; #mainwidth:100%; height:500px; margin-top:20px; #footerwidth:980px;height:150px;text-al

13、ign:center;line-height:20px; margin-left:160px;4 .首页效果图如图4.2所示贵美.商城J7GuiMeE Sho poing拜叫官车-.悔班,；，打*麻黄为m更曾w h中向灯，黄美后说:此二山H 或号用电然手物料阴U用白曲书常初司中心免帮川感旁底咨，擅奈畲新庭颖眄函用曲随时而 新对尚初1够?后;学旧段；处仝程叱j三百零和;畏埋E制电;E3工.笨号军主f开明 安上畦1r吐火灯自 襟叮黠ff?MO度用H 颂 RLt？'MC&WI鹿一加in风吃奈印口蹄薪上两已持色 乒蜃丁精前株；百嗫 I 审acU I H虎 I 特E ,R I =W I

14、ji-i wVfftt出露Im事I冏口 I t!H I行扑I fl-.LR I通版 I仔网用myrKTSWT 0 WTP-沔” 川面瞄盲屿脚嫡3u即 PiTEam"斗船 峡书T的机 面。L Tflrrjcpri cerKT E巧琳二艺明1收召.'爨 OS!：图4.2首页效果图4.1.2顶部header的实现图4.3顶部header整体布局2建立HTML的组织结构顶部整体布局时分为四个 div块，即logo, menu, hello,和nav。顶部的整体布局结构代码如下:<div id="header"><div id="logo

15、"></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; co

16、lor:#636362;.navwidth:800px;clear:both; margin-left:130px; padding-top:8px; 4 .首页头部效果图如图4.3所示图4.4首页头部效果图4.1.3主体main的实现1主体main整体布局如图4.5所示zuzhongyouo图4.5主体main整体布局2建立HTML的组织结构顶部整体布局时分为三个 div块，即zuo, zhong,和you。顶部的整体布局结构代码如<div id="main"><div id="divzuo"> <div id="

17、;divzhong"><div class="shang"></div><div id="xia"></div><div id="divyou"></div>3 .添加css样式代码#mainwidth:100%; height:500px; margin-top:20px; #divzuowidth:200px;height:680px;float:left;background-image:url(images/bg%201.gif);back

18、ground-repeat:no-repeat; margin-left:178px; #divzhongwidth:524px; height:650px; float:left; margin:8px 0px 0px 8px; .shangheight:203px;background-image:url(images/ad-01.jpg);background-repeat:no-repeat;#xiabackground-image:url(images/bg%201.gif);background-repeat:no-repeat;background- position:-213P

19、x -200px; width:524px; height:450px; margin-top:-10px;#divyouwidth:240px;height:680px;float:left;background-image:url(images/bg%201.gif);ba ckground-repeat:no-repeat;background-position:-740Px 0px; margin-left:8px;4 .首页主体效果图如图4.6所示*军赳 *T*l 啡叔讯%匕椁*苒日用白盘大震电 遭衣风 钿中.根市愁市H雷府御商*3CL1E3艮新0道内二4i ftntfV花制停的H奥

20、对戈记. rtTuii-rus ¥ ,博北中僧 帝4叼F2|言主司工冏上开一室巨屯占mvti Ir3 3金机3愤wiffgsftS瓶 msstl ft 】砒岗爱SHU fflOJt?1F捡功精标TIB元尺寸：n声1 *|14 恰：，miu，T -图4.6首页主体效果图万顺达百货4.1.4底部footer的实现1整体布局只有一个div块2 .建立HTML的组织结构<div id="footer" ></div>3 .添加css样式代码#footerwidth:980px; height:150px; text-align:center;lin

21、e-height:20px; margin-left:160px;4 .首页头部效果图如图所示主R里基： 雪芭I小2I狂爽I毋 I鞘相I的 I冷刍I才手南鼻I国H ImI时蝠 ffil 迪卜 产上用I g网IrzpniGHr trim 用i口 出南市工金拓案杓睥公司mx j脑用餐不用蜉： r (OO0&-1 比(I Er ii.1中S6科安ICF t 户RP&IHE I LOI号图4.7首页底部效果图4.2登陆页4.1.1 登陆布局的实现登陆页和主页为同一网站的不同页面，整体布局一样，故略4.1.2 登陆页主体布局的实现1登陆页整体布局如图4.8所示zuoyou图4.8登陆页整

22、体布局2 .建立HTML的组织结构<div class="denglu"><ul class="zuo"></ul><ul class="you"></ul></div>3 .添加css样式代码.denglupadding:50px0px;width:100%;height:400px;background:url('images/login_bg.gif) no-repeat;line-height:40px;background-position:ce

23、nter;background-position:top;font-size:10px; letter-spacing:1px;.zuowidth:40%;height:500px;float:left; margin:10Px 0px 0px 186px; list-style:none; border-right:1px #ccc solid; .youwidth:27%;height:500px;float:left;margin:10px0px;list-style:none;&我捐鞋疗针非邑g时第M同加电遍则冲噩选，4 .登陆页主体效果图如图4.9所示费外"

24、3;广而三码施继，L 4,六七/甘三：飞料肝睥幽帆 ffert T.现在说“口巾遮间1灯14.9登陆页主体效果图4.2购物车页4.2.1 购物车页布局的实现购物车页和主页为同一网站的不同页面，整体布局一样，故略4.2.2 购物车页主体布局的实现页脚内容151购物车主体整体布局如图4.10所示4.10购物车主体整体布局2建立HTML的组织结构<div id="divg"><div></div><table><table><table><table></div>3 .添加css样式代

25、码#divgmargin:0px 0Px 0Px 187px; font-size:15px;4 .购物车主体效果图如图4.11所示月我的明物宇全悟话的一般元磊计芦器府认有品愉用、交附某件用mw身价jj折鼬量m嶙*用诲髀,塾授修胃,色）¥1浦.次S.OJt 卜|懒福巩工上山造-士国淡出二il热飞炉 IPS¥2死,。口孔语 |l州际阖.把折丁全法印71r 舶fft卢品目1r.r13S. Hi103. SUa.OSf l刊时物*持世商品辛MTPW侪#中有 ¥ 31B, 6i;-亮鱼&".部片地址和山罪人基本信京F货件大*地址：|遭点击宜归我城电 ft ： T- 区号电褶官55r分机I4.11购物车主体效果图万顺达百货第五章网站的兼容性测5.1浏览器之间的兼容性测试方法1.IE多版本使用IE Collection软件模拟2.Firefox