汽车之家网站设计范文Word文件下载.docx

汽车之家网站设计范文Word文件下载.docx

《汽车之家网站设计范文Word文件下载.docx》由会员分享，可在线阅读，更多相关《汽车之家网站设计范文Word文件下载.docx（46页珍藏版）》请在冰豆网上搜索。

html，div+css，javascript，php，mysql网上4s店

Carhomewebsitedesign

Abstract:

Thispaperintroducesthedevelopmentofonline4Sshopcarsaleswebsiteconstruction,thesitetosellproductsforthepurpose,userexperiencepurposedesign.ShowthatthiswebsiteisaserviceconsumerautomotiveWebsite,theuseisB2Cmarketingmode,thesystemusesstaticpagesusingdiv+CSS,combinedwithJavaScriptandCSStwoscriptinglanguages,dynamicpagesusingPHP+MySQLinteractivewayandwithavarietyofwebdevelopmenttools,realizedthee-commerceplatformforautomobilesales.Andthedivisionofthewebsitefunction,thedesignandfunctionoftheinternalstructureofthesitearedescribed.Thewebsitewastestedaccordingtothemethodofstabilitytestbasedonthebrowser,andthebackgroundofthemainfunctionmodulewascompiled.Attheendofthisdesignaresummarized,andtheonlinewebsiteofthe4Sshopsignificanceanddevelopmentprospectarebrieflydescribed.

Keywords:

HTML,div+css,JavaScript,PHP,MySQL,4Sshoponline

一、引言

当代社会互联网经济飞速发展，很多行业开始或已经进军互联网销售模式，中国作为人口第一的大国，我国网络普及率相当高，手机网民突破8亿，电脑用户突破4亿。

网络技术飞速发展,渗透到各行各业，网上店铺和企业网站也如雨后春笋般出现。

汽车网上4s店可以面向全国，信息的咨询也更加方便快捷，加上互联网作为传播媒介，可以迅速扩大一个店铺或企业的知名度，网站销售已然成为一种潮流，越来越适合当代生活的需求。

汽车之家网站是基于浏览器的交互、信息传递的资讯网站,既方便了消费者又使商家获益。

二、相关技术

在确定了汽车4s网站的发展前景，下一步是选择一个好的目标，开发工具及开发利用技术相关的系统。

网站选择静态页面采用div+css，结合JavaScript和css两种脚本语言，动态页面采用php+mysql的交互方式以及配合多种网页开发工具，只要打开浏览器即可浏览网站。

（一）PHP简介

PHP是可以说是当今服务器端脚本语言最容易学的，使用最方便的。

你只需要很少的编程，看一本书的知识你建立一个使用php做的真正交互的WEB站点。

这个语言你甚至不需要完全学号了解，就可以让你尽快加入动态网站站点开发的行列。

如果在拥有html的基本知识和一些编程思想。

PHP是网站应用非常广的动态语言，特别在现在的网络网站开发。

PHP的执行大多在服务器端执行，通过服务器执行PHP的代码产生网页内容提供给人们浏览，甚至也可以用来命令行脚本程式和使用者端的GUI应用程式。

能够执行php的服务器、操作系统、平台有很多很多，许多数据库也可以和php相结合。

PHPGroup组织为程序开发提供了非常完整的源代码，允许开发人员修改、编译、扩充来使用，而且开发网站使用PHP不交费用。

ＰＨＰ执行环境架构

PHP的语法混合了C、C++、Perl以及PHP自创的独特语法。

php可以比其他动态语言更快的执行网页内容解析。

用其他不同的动态语言和PHP语言做出的网站页面相比较，PHP是把php语言嵌套到HTML页面中去执行的，执行的效率比完全靠生成HTMl要高很多；

PHP也能执行编译后的代码，编译后可以加密和优化网站代码运行速度，使页面内容运行更加快速。

PHP的功能非常强大，CGI的所有功能PHP语言都能实现，并且所有流行的数据库和操作系统php都支持。

最重要的是PHP可以对C、C++语言进行程序的扩展！

保定胸部整形医院

（二）HTML简介

HTML简介

超级文本标记语言其实就是网页的本质，通过结合使用其他的编程语言（如：

脚本语言、公共网关接口、插件等），可以创造出效果绚丽而且功能非常强大的网页。

因而，万维网（Web）编程的基础就是超级文本标记语言，也可以说万维网就是是建立在超文本链接基础之上的。

超级文本标记语言之所以能够被大家称为超文本标记语言，其实就是因为文本中包含了“超级链接”描点。

HTML结构图

超级文本标记语言是一种规范，一种标准，它通过a连接符号来连接网站中的网页。

网页是一种网站文本文件，不用编辑器通过在网页文件中可以添加html标记符，告诉浏览器网页要如何显示其中网站需要的内容（如：

文字如何编排，网页效果安排，图片显示效果等）。

浏览器的顺序阅读方式是以自上而下的方式，然后根据html标记符显示其标记的文本内容，浏览器并不指出我们书写出错的标记的地方，且不停止其解释执行过程，开发人员只能通过浏览器显示出来的效果来分析出错地方以及出错的原因。

同时我们应该注意的是，不同公司制作的浏览器，对与网页中的同一标记符都有可能有不同的解析，因此网页会显示不同的网页效果。

（三）DIV+CSS简介

DIV+CSS是目前最常用的静态语言，div+css是一种网页的布局方法,传统的HTML网页设计语言中的表格定位方式与DIV+CSS有不同的区别,DIV+CSS真正地达到了w3c内容与样式相分离。

CSS是样式表，用来定义页面的显示效果，用DIV制作的网页比Tabl表格更科学、精确，网页兼容性更好，而且网页被浏览器打开速度更快，并且网站内容也利于搜索引擎收录。

修改网站网页的显示效果，用DIV+CSS修改网页是非常的方便，用Table制作的网页修改则非常麻烦。

因此现在的网站，都用DIV+CSS来实现网页效果的。

很方便的网页的内容拖拽和编辑网页内容。

怎么样祛痘

Div+css样式实例

css是层叠样式表的缩写，用于定义HTML的显示效果，是W3C推出的格式化网页内容的技术。

网页前端制作者必须掌握的技术之一。

在HTML文档中加入CSS样式表可分为嵌入式样式表、外联样式表和内联样式表三种，网站大多数采用的是外联样式表的方式。

div+css制作的页面效果结构清晰，搜索引擎容易收录网站的内容，适合网站的seo，而且降低网页大小，较快的加载网页内容。

（五）Dreamweaver简介

Dreamweaver网页编辑

AdobeDreamweaver由adobe公司开发的制作网站网页的所见即所得网页编辑器，DW为程序员提供可视化的网页设计和网站管理。

可视化的网页开发工具的易用性非常好，因为它更比较符合开发人员的交互和操作的自然逻辑。

DW是第一个针对网页开发人员的视觉化网页开发工具，一个好的文本编辑器可以提加速网页开发人员的开发速度。

DW基本对最新的Web技术都有所支持，包含HTML标签检查、网页格式化选项、文本格式控制、网站站点捆绑、图像编辑、可视化网页设计、全局查找替换、全FTP功能、处理Flash和动态HTML、基于团队的Web创作和Shockwave等富媒体格式。

在编辑上制作者可以选择可视化方式或者喜欢的源码编辑方式。

DW编辑区是非常灵活的，因此它可以非常快的让开发人员适应各种不同的工作风格，Dreamweaver常用的工作区组件有以下：

1文档窗口可显示当前编辑网页文档，文档的显示效果和浏览器中看到的基本是一样的效果。

2可以在装载器当中打开和关闭常用检查器和模板。

3对象工具栏包含创建不同网站网页类型的对象（例如图象、表格和层等）的按钮。

整形美容

4属性检查器可以显示网页中的选定对象的属性。

5快捷菜单可以使网页开发人员对当前选择或区域快速执行命令。

网页开发人员可以通过固定的浮动工具栏、浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。

三、网站需求分析

（一）网站总体功能分析设计

通过对网站进行详细的分析与研究，最终得出了网站的功能需求。

系统可分为9个模块，包括首页显示模块、子页显示模块、用户注册模块、用户登录模块、留言管理模块、留言板模块、产品添加模块、产品显示模块、后台登录模块

。

网站功能模块图，如图3-1所示。

图3-1网站总体模块图

1.用户模块

用户管理模块包括用户登录、用户注册等2个子页面。

该模块功能模块图如图3-2所示:

图3-2用户模块

2.产品管理模块

产品管理模块包括添加产品、产品列表、修改产品、删除产品等4个子模块。

该模块功能模块图如图3-3所示：

图3-3产品管理模块

3.后台管理模块

订单管理模块包括订单列表、删除订单等2个子模块。

该子模块功能模块图如图3-4所示：

图3-4后台管理模块

4.收货地址管理模块

收货地址管理模块包括添加收货地址、收货地址列表、修改收货地址、删除收货地址等4个子模块。

该子模块功能模块图如图3-5所示：

图3-5收货地址管理模块

5.我的帐户模块

帐户模块包括我本人的个人资料，我的购物车，我的订单等3个模块。

图3-5我的帐户模块

6.用户模块

用户模块包括登录、注册、退出系统等3个子模块。

该子模块功能模块图如图3-6所示：

图3-6用户模块

7.图片上传模块

在添加产品的时候必然会用到图片上传功能，在J2EE开发中将使用jspSmartUpload组件进行图片上传，其特点如下：

使用方便，能控制上传，上传文件大小，类型等方面作出灵活的特点，下载限制。

8.页面UI模块

页面UI模块包括产品首页、产品详细、后台页面等3个子模块。

该子模块功能模块图如图3-7所示：

图3-7页面UI模块

（二）总体设计分析

网页总体设计

网站网页的布局类型

网页的布局一般大致可以分为标题正文型、拐角型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。

眼部整形

我们开发的网页页面结构布局采用左右和上下型，也包含两种布局方式的结合。

和拐角型的结构基本相似。

这种网页结构在很多新闻网站页面中采用的比较多。

采用这种页面结构可以是网站信息能够非常清楚的展示在在用户面前，能够突出页面信息的标题，能使用户非常快速的获取到这个网站页面的内容。

网站框架设计

网站主页设计

1.网站页面头部

网站网页的头部首先显示网站的logo，并加上超级链接a标签，作为醒目的标题。

然后网站的导航菜单并列的方式显示。

根据网站统一性，网站的所有的头部都采用相同的结构方式。

2.网页中部

页面中部主要是用来向用户显示网站具体的内容信息。

我们的网站网页，我们页面中部设置为两种结构，分别为左右部分或者上下部分。

网站的首页中部采用上下结构，依次展示商品的一些信息

3.网页底部

网页页面下部设计显示版权信息。

以及网站开发的版权信息和用户联系网站开发者的连接。

二级页面设计

根据网页的特点，网页的统一性，各个二级页面也将采用主页的整体布局风格。

头部和底部都采用相同的布局方式。

页面内容中将显示各个不同的专题各自的文章。

四、网站制作

（一）系统设计原则

在这个项目中，必须在设计阶段认真细致的工作，以保证工程的顺利进行，避免不必要的风险。

因此，根据项目的特点和业务的要求，我认为系统设计应遵循以下原则：

1. 

实用性

本实用和有效的方法来确保投资和系统，我会选择相对成熟和稳定的系统开发技术，系统易于使用。

2.易用性

本系统必须正视用户的体验效果。

因而，本系统的界面显示的非常大气简洁。

在系统设计时，在系统设计中，系统应该是整体式布局，简洁，易于使用的实用原则，用户界面是一致的，友好的，注重整体的界面效应，精心设计的细节，如按钮接口，数据表现方式，使操作者可以很容易的操作和易于理解的接口信息和内容，便于用户快速掌握系统的使用。

3．可扩展性

在前面我已提到整个系统结构的重要性，其中十分重要的一点就在于整套系统的可扩展性。

（二）系统总体架构设计

本系统是基于J2EE的WEB应用系统，采用B/S模式。

B/S模式系统开发中的优势，维护和升级方便，管理成本较低。

一般客户机只需安装有浏览器就可以进行操作。

应用程序运行在服务器端，有效地保证了系统平台和服务器数据库的安全。

整个网站系统架构，如图4-1所示。

图4-1基于Struts的MVC三层体系架构

（三）系统功能模块设计

通过对系统进行详细的分析与研究，最终得出了系统的功能需求。

系统可分为用户模块、产品管理模块、订单管理模块、收货地址管理模块、我的帐户模块、用户模块、图片上传模块、页面UI模块等八大模块。

（四）系统数据库设计

1.数据库设计规定

为了使数据库系统需要具有一定的安全水平，通过验证程序来测试它是否是合法的用户，只有通过身份验证的后方可进行相关操作，防止非法用户的登录和执行非法操作，让数据库的安全性得到进一步提高。

（1）容错要求

数据输入或输入一个有效的测试条件下，非合法的数据块从客户端和服务器的正常运行，数据库也有了进一步的安全。

第二，一些技巧和错误或用户错误连接数据库操作的警告，非正常着陆系统的安全控制。

随着产品的网络运行环境，服务器很容易受到不法人员通过各种攻击手段，为了找到控制系统在一定程度上的方法，应该做的：

界面结构应避免直接的框架，所有的代码显示；

（2）灵活性要求

查询时查询完后可返回继续查找；

（3）硬性要求

用户使用环境不应存在太多限制。

（4）故障处理要求

为了防止对数据库服务器的访问请求的用户是“无限”的状态，系统应判断的时间，超过规定的时间或要求服务器放弃对其运行，且对用户的错误请求做出一定“智能”的处理。

2.数据库的设计

系统实体表如图4-1所示：

表4-1系统实体表

表名

描述

收货地址信息表

用于存储收货地址的信息

订单信息表

用于存储订单的信息

产品信息表

用于存储产品的信息

产品订购信息表

用于记录产品订购的信息

购物车信息表

用于存储购物车的信息

用户信息表

用于存储用户的信息

（1）送货地址信息表，用来存储传递地址信息，其结果如表4-2所示的结构：

表4-2收货地址信息表

Address

列名

数据类型（精度范围）

空/非空

约束条件

id

int

不为空

主键

userid

provice

varchar（100）

city

detailedaddress

tcode

ownername

ownertelephone

createtime

datetime

补充说明

（2）订单信息表，用于存储订单的信息，其结构如表4-3所示：

表4-3订单信息表

Orderinfo

Int

ordernum

sumprice

double

address

（3）产品信息表，用于存储产品的信息。

其结构如表4-4所示：

表4-4产品信息表

Productinfo

productnumber

varchar（200）

productdescription

productdetailcontent

productprice

productcover

（4）产品订购，用于存储产品订购的消息，其结构如表4-5所示：

表4-5产品订购信息表

Productorder

orderinfoid

varchar（400）

productno

productnum

（5）物车信息表，用于记录购物车的消息，其结构如表4-6所示：

表4-6购物车信息表

Shopcart

数据类型（精度）

约束

Varchar（200）

ispay

smallint

（6）用户信息表，用于记录用户的信息，其结构如表4-6所示：

表4-6用户信息表

Users

username

Varchar（100）

password

owner

sex

telephone

（五）系统用例分析

（1）在该系统中，需要用户的参与，此系统的用户是需要用户及管理员进行操作。

（2）系统中的信息是需要维护和管理的，根据甲方要求，对于非常敏感的信息要给予及时的处理等。

在案件的管理包括：

产品管理，订单管理，用例，用例，账户管理。

以下表格为具体内容：

用例名称

产品管理用例

用例描述

管理员可进行添加产品、修改产品信息、删除产品信息等

参与者

管理员

优先级

1

前置条件

登录页面用管理员帐号登录

后置条件

基本操作流程

无

可选操作流程

被泛化的用例

被包含的用例

被扩展的用例

订单管理用例

管理员可以管理所有订单及删除订单等操作

管理员进入系统,并进入订单管理模块

完成了管理所有订单及删除订单

1.管理员进入订单管理模块,进行管理所有订单及删除订单等操作

2.系统根据管理员的请求响应相应操作

3-管理员确认相应操作

4-系统保存这次的操作

管理员选择取消订单和订单管理等。

帐户管理用例

案例描述

管理员可以管理所有帐户，删除帐户等操作

管理员进入系统,并进入用户模块

完成了管理所有帐户及删除帐户

1.管理员进入用户模块,进行管理所有帐户及删除帐户等操作

下单用例

注册用户可以进行添加到购物车、下单结算等

注册用户

注册用户首页

1.注册进入首页，可以进行添加到购物车、下单结算等操作

2.系统根