网站设计实训报告题目：购物商城网站前台的设计与实现学生姓名：杨宇飞学号：1176807432专业：计算机4班指导教师：张静课程设计(论文)任务及指导书目录课程设计(论文)任务及指导书 (2)第一章引言 (6)1.1网站开发的背景 (6)1.2 网站开发的目的和意义 (6)1.3 网站开发的需求分析 (6)第二章开发技术和工具的介绍 (7)2.1 开发技术 (8)2.1.1 html (8)2.1.2 CSS (8)2.1.3 Div+CSS (8)2.2开发工具 (8)第三章网站的总体设计 (9)第四章网站的详细设计与实现 (10)4.1首页 (10)4.1.1首页布局的实现 (10)4.1.2 顶部header的实现 (11)4.1.3 主体main的实现 (12)4.1.4 底部footer的实现 (14)4.2 登陆页 (14)4.1.1登陆布局的实现 (14)4.1.2登陆页主体布局的实现 (14)4.2 购物车页 (15)4.2.1购物车页布局的实现 (15)4.2.2购物车页主体布局的实现 (15)第五章网站的兼容性测 (18)5.1浏览器之间的兼容性测试方法 (18)5.2验证是否符合W3C标准的方法 (18)第六章结论 (19)参考文献 (20)第一章引言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+CSSDIV+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所示。
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所示图4.5 主体main整体布局2.建立HTML的组织结构顶部整体布局时分为三个div块，即zuo，zhong，和you。
顶部的整体布局结构代码如下：<div id="main">zuozhong you<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);ba ckground-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登陆布局的实现登陆页和主页为同一网站的不同页面，整体布局一样，故略。