《购物商城网站前台的设计与实现》由会员分享，可在线阅读，更多相关《购物商城网站前台的设计与实现（19页珍藏版）》请在金锄头文库上搜索。
1、精选优质文档-倾情为你奉上 网站设计实训报告题 目：购物商城网站前台的设计与实现学生姓名：杨宇飞学 号：专 业：计算机4班指导教师：张静课程设计(论文)任务及指导书题 目购物商城网站前台的设计与实现题 目 来 源实际工程项目 科研课题 教学模拟题目 其它题 目 类 型工程设计型 科学研究型 调研综述型 其它类型一、课程设计（论文）任务（包括对工程图纸的具体要求）及设计参数1问题定义、可行性研究2需求分析。3总体设计。4详细设计及实现。5测试及调试。二、专题部分要求设计与实现购物商城网站前台页面，包括网站首页、商品展示页、具体商品详细介绍页、购物车页、注册页、登录页、帮助中心客服页。三、本题目的
2、重点和难点以及与同组其它学生所做题目的关系重点：采用DIV+CSS布局。难点：编码符合W3C标准，无冗余代码。选题分组方式：三人一组，分工合作完成。四、指导方式和工作进度要求指导方式：集中辅导、个别答疑相结合。 工作进度：1天 需求分析；2天 总体设计；3-4天 详细设计及编码；5天 测试及调试。五、与本设计题目相关的理论知识（包括新知识）提要网站前台的开发流程；W3C和Web2.0标准；DIV+CSS布局；HTML、CSS语言；开发工具UltraEdit；Dreamweaver站点管理；调试工具Firefox+Firebug插件。六、建议参考资料及使用方法1 北京阿博泰克北大青鸟.使用HTM
3、L语言和CSS开发商业站点，科学技术文献出版社,2011年2 .精通CSS+DIV网页样式布局,2007年3 徐延章.美工与创意网页设计艺术, 2012年4 、.网站设计网页配色：经典网页设计800例,2011七、答辩之前学生应作的准备工作提要1 完成目标网站前台的开发2 完成课程设计报告的撰写目录第一章引言1.1网站开发的背景近年来,随着Internet的迅速崛起,互联网已日益成为收集提供信息的最佳最快渠道，并快速进入传统的流通领域。互联网的跨地域性、可交互性、全天候性使其在与传统媒体行业和传统贸易行业的竞争中具不可抗拒的优势，因而发展十分迅速。在电子商务在中国逐步兴起的大环境下，越来越多的
4、人们开始选择在网上购物，这其中包括所有日常生活用品及食品、服装等。通过在网上订购商品，可以由商家直接将商品运送给收货人，节省了亲自去商店挑选礼品的时间，具备了省时、省事、省心等特点，让顾客足不出户可以购买到自己满意的商品。1.2 网站开发的目的和意义我们的网上商城建设在为浏览者与网站所有人搭建起一个网络平台，浏览者或潜在客户在这个平台上可以进行整个交易、交流过程，与商务型网站相比，商城网站建设的业务更依赖于互联网，基于互联网络销售，消费者基本都来源于网上。电子商城的订购功能更强大，集批发、零售、团购及在线支付等功能于一体的订单创建与费用支付。网上商城方案结合网站建设电子商务应用与开发的成功经验
5、和技术积累，以实惠的价格向更多的商家及个人提供先进、稳定的网上商城平台开发服务。（1）以独立域名在互联网上开设网上商城，集销售、服务、资讯一体化的电子商务平台；（2）依托此商城开展综合性的网络营销活动，推广网站，树立品牌；（3）建立起良好的数据/应用集成接口。1.3 网站开发的需求分析 1.网站目标受众：电子商品需求者、商业人士。2.通过贵美商城网站：(1)展示商品价格、质量和类型；(2)传达企业人士的设计理念；(3)加深浏览者对商品的认识3.网站整体设计风格考虑网站的定位、主要受众群体和设计目标，我们采用的设计风格简洁大方，稳重。4.配色方案以橙色主色，以白色为辅助色，字体采用宋体设计。5.
6、网上商城功能概述：(1)首页，商品展示；(2)会员注册、登录，建立完整的会员资料库；(3)管理员发布、管理商品信息、上传图片等；(4)支持商品多级分类检索、关键词模糊搜索；(5)支持价格的管理，包括市场价、批发价等；(6)方便快捷的购物车、网上支付；(7)可编辑的订购说明。 第二章 开发技术和工具的介绍2.1 开发技术2.1.1 html使用html描述的文件，能独立于各种操作系统平台，访问它只需要www浏览器，我们所看到的网页，是浏览器对html文件进行解释的结果。Html是由标记和属性组成的规则。这些规则规定了文字，表格和超链接在网页中显示等内容。2.1.2 CSS它是一种用来表现html
7、（标准通用语言的一个应用）或xml（的一个子集）等样式的计算机语言。它是用于增强控制样式并允许将信息与网页内容分离的一种标记性语言。2.1.3 Div+CSSDIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起组合，还要从XHTML说起。是一种在（的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表
8、现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。2.2开发工具Dreamweaver 介绍： 一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。第三章 网站的总体设计贵美商城的总体设计结构图如图3.1所示。贵美商城首页注册页帮助中心页登录页购物
9、车页商品介绍页商品展示页图3.1贵美商城总体设计结构图第四章 网站的详细设计与实现 4.1首页4.1.1首页布局的实现1.首页包括头部、主体部分、和底部三大部分。首页布局如图4.1所示。顶部（header） 主体部分（main） 底部（footer）4.1首页整体布局 2.首先建立HTML的组织结构主页整体布局时分为三个div块，即头部header，中间主体部分main和底部footer。顶部和底部使用iform引用“顶部.html”和“底部.html”。首页的整体布局结构代码如下： 顶部主体底部3.添加CSS样式代码：#headerwidth:100%;height:150px;backgr
10、ound:url(images/h_bg.jpg); background-repeat:no-repeat; background-position:center; #mainwidth:100%; height:500px; margin-top:20px; #footerwidth: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的组织结
11、构顶部整体布局时分为四个div块，即logo，menu，hello，和nav。顶部的整体布局结构代码如下： 3.添加css样式代码.menu width:45%;height:28px;float:right; margin:-5px 50px 0px 0px;.hello float:right; margin:35px 500px 0px 0px; color:#;.navwidth:800px;clear:both; margin-left:130px; padding-top:8px; 4.首页头部效果图如图4.3所示图4.4 首页头部效果图4.1.3 主体main的实现 1.主体ma
12、in整体布局如图4.5所示youzhongzuo 图4.5 主体main整体布局2.建立HTML的组织结构顶部整体布局时分为三个div块，即zuo， zhong，和you。顶部的整体布局结构代码如下： 3.添加css样式代码#mainwidth:100%; height:500px; margin-top:20px; #divzuowidth:200px;height:680px;float:left;background-image:url(images/bg%201.gif); background-repeat:no-repeat; margin-left:178px; #divzhon
13、gwidth: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:-213px -200px; width:524px; height:450px; margin-top:-10px;#divyouw
