WEB编程基础课程设计说明书

WEB编程基础网站开发设计说明书

姓名：陈洪杰

学号： 20111080101

班级： 11微高

指导教师：毕春华

完成日期： 2012-12-16

目录

前言............................................................................................................................- 1 -1 设计说明................................................................................................................- 2 -

1.1 设计背景.....................................................................................................- 2 -

1.2 设计目的.....................................................................................................- 2 -

1.3 相关技术综述.............................................................................................- 2 -

2 概要设计................................................................................................................- 5 -

2.1 网站结构.....................................................................................................- 5 -

3 网站详细介绍........................................................................................................- 7 -

3.1 首页设计.....................................................................................................- 7 -

3.2 子页设计...................................................................................................- 10 -

3.3 客服........................................................................................................... - 11 -

4 常见问题与解决..................................................................................................- 13 -

4.1 常见问题...................................................................................................- 13 -

4.2 兼容问题...................................................................................................- 14 -总结..............................................................................................................................- 15 -参考文献......................................................................................................................- 16 -

海澜之家电子商务网站设计说明书

前言

在国家大力推进信息化建设的宏观背景下，城市网络基础设施及应用水平均已得到了较大的完善和提升。特别是在经济发达的沿海地区，商贸服务业也较为发达，市民接受新事物能力和消费水平均较高，进行商贸流通业（即商品流通和为居民服务的第三产业）信息化与电子商务建设是政府的一项重要工作。

越来越多的商贸服务企业意识到了用现代信息技术改造传统经营方式，用电子商务手段提升管理和服务水平的重要性。已有许多企业在着手计划或已进行自身的电子商务建设，这就有了对商贸服务业电子商务应用平台的迫切需求。

电子商务建设的最终目的是发展业务和应用。电子商城系统的建设，可以建立起电子商务服务的门户站点，是现实社会到网络社会的真正体现，为广大网上商家以及网络客户提供一个符合中国国情的电子商务网上生存环境和商业运作空间。

电子商务销售规模不受地盘限制。传统商店有多大就只能摆放多少商品，生意大小常常被小店面积限制。而在网上，即便在地面上只有一个小商店，或者干脆就没有门面，开店的生意却可以照样做得很大。不受店面空间的限制。哪怕只是街边小店，在网上却可以拥有百货大楼那么大的店面，只要投资者愿意，可以摆上成千上万种商品。不受地理位置影响。不管客户离店有多远，也不管顾客是国内还是国外，在网上，客户一样可以很方便地找到并购买商品。这令消费群体突破了地域的限制，变得无限广阔了。

1设计说明

1.1 设计背景

当今社会，电子商务在信息技术的强有力的推动下，正以惊人的速度在发展。计算机的全球联网，形成了与地球、空间无关的世界一体化市场，一种全新的、基于计算机网络的新型商业机制正在逐步形成。建设一个能够充分展示产品，提供相关信息，帮助用户了解商品，以及实现用户订购产品等功能的商务类型网站是适应现在商业发展的一个主流方向。

1.2 设计目的

现在，无论在网上、杂志上、或是电视上，各种各样的关于女士的购物网站数不胜数，而男士购物网站却寥寥无几。针对这一现象，选择制作专门关于男士的购物网。融合了多种多样的男士商品，能满足男士们的需求，便于男士们轻松快速的购物。

1.3 相关技术综述

1.3.1 HTML

HTML（Hyper Text Mark-up Language ）即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee提出。HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。

HTML是制作网页的基础。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

HTML可以实现：

1．网站所有文字页面

2．静态图片

3．表格

1.3.2 CSS

CSS是Cascading Style Sheets（层叠样式表单）的简称。它是一种用来表现HTML 或 XML 等文件式样的计算机语言。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化。CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀的表现设计语言。

Css在网页中作用：

1．网站页面布局

2．网站页面效果

使用CSS的技术，网页便会给人一种赏心悦目，工工整整的感觉，同时字体的色彩变化、背景的改变。实现效果，简单明了。

1.3.3 JScript

JScript是由微软公司开发的活动脚本语言，是微软对ECMAScript规范的实现。JScript最初是随Internet Explorer 3.0于1996年8月发布。典型的JScript源文件使用的扩展名是.js。JScript 是一种宽松类型的语言。宽松类型意味着您不必显式定义变量的数据类型。事实上 JScript 更进一步。您无法在JScriot上明确地定义数据类型。此外，在大多数情况下，JScript 将根据需要自动进行转换。例如，如果将一个数值添加到由文本组成的某项，该数值将被转换为文本。

JScript实现效果：

1．网站动态菜单

/*最新动态滚动*/

$(function(){

var $this = $(".scrollNews");

var scrollTimer;

$this.hover(function(){

clearInterval(scrollTimer);

},function(){

scrollTimer = setInterval(function(){

scrollNews( $this );

}, 3000 );

}).trigger("mouseleave");

});

function scrollNews(obj){

var $self = obj.find("ul:first");

var lineHeight = $self.find("li:first").height(); $self.animate({ "marginTop" : -lineHeight +"px" }, 600 , function(){

$self.css({marginTop:0}).find("li:first").appendTo($self); })

}

2．图片自动播放

/*图片轮换*/

$(document).ready(function(){

$("#KinSlideshow").KinSlideshow({

intervalTime:3,

mouseEvent:"mouseover"

});

})

2 概要设计

2.1 网站结构

图2.1 网站结构

1、首页：导航、最新动态、会员登陆、搜索、图片自动播放、商品展示、新手指

南； 2、西服：单件西服、商务西服、休闲西服、仿毛礼服套装、毛料礼服套装、修身

仿毛套装； 3、休闲外套：大衣、风衣、西克装、茄克、薄棉茄克；

4、衬衫：长袖休闲衬衫、长袖正装衬衫、长袖衬衫（保暖）、短袖正装衬衫、短袖休闲衬衫、衬衫领针织衫；

5、裤子：西裤、休闲裤、牛仔裤、休闲中裤、休闲牛仔裤、牛仔中裤、传统西裤、

针织长裤；

6、毛衫：长袖毛衫、羊毛背心、短袖针织、长袖针织、衬衫领毛衫；

7、T 恤：长袖T 恤、长袖丝光棉T 恤、短袖T 恤、短袖丝光棉T 恤：

8、配饰：太阳镜、皮带、围巾、领带、帽子、票夹、休闲皮鞋、正装皮鞋、休闲

海澜

首

页

西服 休闲外套

衬衫

裤子

毛衫

配饰

新手帮助

T 恤

礼服套装

休闲西服等

风衣

大

衣 等 休闲衬衫

正装衬衫等

休闲裤

西裤 等

针织衫

羊毛背心等 长袖丝光棉

短袖 等 领 带 眼镜

等 用户注册

联系我们等 最爱海澜之家

鞋；

9、新手帮助

（1）新手指南：用户注册、网站订购流程；

（2）如何退款/付款：支付方式、各种支付方式的付款期限、常见支付问题、如何办理退款、发票制度说明；

（3）配送方式：配送时间、配送费收取标准、未收到的问题；

（4）售后服务：退换货政策、如何办理退换货；

（5）客服中心：联系我们。

3网站详细介绍

网页设计作为一种视觉语言，特别讲究编排和布局，版式设计通过文字图形的空间组合，表达出和谐之美。

多页面站点页面的编排设计要求要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，设计时考虑到整体布局的合理性，使浏览者有一个流畅的视觉体验。网站设计认真分析项目客户群体的特点，并从客户群体的感受出发安排页面布局。网站的主页给顾客比较清晰、明了的印象，要突出购物网站的特点和风格。

3.1 首页设计

页头：网站名制作的LOGO和动态flash。

页面：导航，会员注册、会员登陆对话框，最新商品动态，图片自动播放展示，商品简单展示，小图自动播放，新手指南等。

首页

首页利用div设计，分成几个盒子。把不同内容划分到不同区域。

图3.1 首页大概

3.1.1 导航设计

导航系统是有效连接网站各处的工具，它有效的分类网站内容并指向它所代表的内容。是通过超文本链接，使浏览者能够在网站上自由前进或后退。

网站导航项目：

1、商品分类

图3.2 导航

链接到详尽的商品分类列表。

3.1.2 新手帮助

图3.3 新手帮助

帮助新手，完成购买。帮助了解本站信息。

3.1.3 最新商品动态设计

图3.4 最新动态

最新动态包含网站最新更新的商品、特色商品等信息，最新动态以滚动的形式显示。

3.1.4 图片自动播放设计

图3.5 商品自动播放

利用图片自动播放技术，进行商品展示。

3.2 子页设计

在用户点击商品分类后，在商品预览板块中显示出相关商品的信息，包含：

1、商品的图片，图片真实的反映商品的属性及其特征；

2、相关的文字说明包括商品名称、价格、商品分类；

3、同类商品链接，用户点击后能够顺利转到该类商品的全部信息；

4、关注此商品，用户点击后将该商品列入关注列表，以便用户方便选择商品。

3.2.1 商品分类设计

图3.6 产品分类

商品分类中应包括网站能够提供的所有商品的分类，分类清晰明了，便于用户选择。分类列表应注意父子关系，例如：

“西服”可作为父类，其包含“单件西服”、“商务西服”、“休闲西服”等子类信息列表。

3.3 客服

包括客户服务中心电话、QQ、E-mail、阿里旺旺、地址等，以提供在线或电话服务。

图3.7在线客服

图3.8 联系我们

4常见问题与解决

4.1 常见问题

1、如何去除掉链接文字下面的下划线？

在要去掉下划线的那个css样式里加入如下代码:

a{ text-decoration:none;}

2、如何只让下面内容动，导航不动？

在需要动的地方加入如下代码：

3、如何去掉图片因连接出现的边框？

在要去掉边框的css里加入如下代码：

img{ border:0px;}

4.2 兼容问题

在网页设计中都会遇到这样那样的兼容问题，兼容问题是最让人头疼的问题。在不同的浏览器下，都会出现不同的效果，有的甚至还会把自己排好的版面，在别的浏览器上显示的乱七八糟，还有的一些东西显示不出来。每个做网页的人都会遇到这一些问题。就像Padding和margin。这两个就是很常用、特别的。

关于解决兼容问题，在一些常用的浏览器设置它们都兼容的代码。Dreamweaver里有一个“检查浏览器兼容性”功能特别实用；

1、为什么在不同的浏览器显示效果不一样？

因为不同浏览器对于css样式表的解析不一样，所以导致样式乃至层布局发生变化。例如，ff中设置padding属性时，div会相应增加height和width，而ie的解析是不会的，再例如ff对盒模型的解析和ie相差两个象素。

2、设计时要做到所有浏览器都兼容吗？

只要做到IE6 FF2.0 以及新出的IE7.0兼容即可，可以另外设计css文件，然后通过js判断浏览器版本进行选择相应的文件。

总结

通过本次的网站设计，运用了所学到的知识。这样不仅复习了本学期学过的一些知识，同时也加深所学知识的内容，这次的网页制作学会了很多，学会了运用网页特效，怎样的特效才能凸现网页主题。在制作网站的过程中，也碰到了不少的不明白的地方通过老师同学的帮助也解决了不少问题，通过不断的学习慢慢地完成了本次的网站设计，这次做的网页虽不是很好看，有不足之处，比如一些动态效果的运用等运用的不够灵活，同时网页布局也不是很完善。在此次做网页的过程中，从内心来说感觉很满意这次经历，在制作过程中不仅学到了书上没有的东西，也培养了独立思考问题的能力。总之这次设计就是在不断的“发现问题——>解决问题——>再发现问题——>再解决问题——>”这个学习过程中完成的。今后将继续努力，把网页设计的更好。

参考文献

[1] 吴黎兵、罗云芳编，网页设计教程，武汉大学出版社

[2] 任学文、范严编, 网页设计与制作，中国科学技术出版社

[3] 郭根生著网页设计艺术齐鲁电子出版社 2006.8

[4] 何翠平 HTML从入门到精通[M] 电子工业出版社 2007.7

[5] 邱郁慧精通CSS与HTML设计模式[M] 人民邮电出版社 2008.9