电子商务网站制作小组报告.docx

电子商务网站制作小组报告.docx

《电子商务网站制作小组报告.docx》由会员分享，可在线阅读，更多相关《电子商务网站制作小组报告.docx（17页珍藏版）》请在冰点文库上搜索。

电子商务网站制作小组报告

电子商务小组课程设计报告

-----太原二手房交易信息网站

班级：

小组编号：

小组组长：

小组成员：

目录

1概述3

1.1设计背景和需求3

1.2网站简介3

1.3设计工具3

2准备工作3

2.1服务器安装与配置3

2.2数据库4

2.3创建数据源4

3本地站点构建5

3.1创建站点5

3.2连接数据源6

4模板的制作6

4.1背景6

4.2LOGO6

4.3AP-Div的使用6

4.4创建CSS6

4.5导航的制作6

4.6搜索栏表单7

4.7可编辑区域7

4.8模板效果截图7

5不涉及数据库的页面制作7

5.1套用模板7

5.2添加页面对象7

6记录显示页的制作8

6.1分类导航菜单的制作8

6.2记录显示表格8

6.3添加记录集8

6.4显示记录属性9

6.5添加转到详细页面的链接9

6.6显示多条记录9

6.7记录显示页静态效果截图9

7详细信息页面的制作9

7.1表格9

7.2记录集9

7.3显示记录属性10

7.4详细记录显示页静态效果10

8插入记录页面的制作10

8.1表单10

8.2向数据库中插入记录10

8.3房屋信息注册页静态效果截图11

9小组成员及分工11

9.1小组成员11

9.2分工情况11

1概述

设计背景和需求

住房是人们生活舒适要解决的首要问题，然而，我国人口压力大，土地资源紧缺，住房资源分布不均匀，一手房早已不能满足人们的需求。

有些人没有住房，而有些人却有很多闲置住房资源，如果充分发挥二手房市场的作用，将更好的为人们解决住房问题。

二手房交易信息网，有助于人们更快捷的获取二手房的相关信息，便于人们购买或租赁，适应二手房交易市场的发展。

网站简介

1.1.1网站名称：

你爱我家-太原二手房交易信息网

1.1.2运行环境

WindowsXPSP3

1.1.3网站功能

●一些基本功能。

●对二手房信息进行注册。

●对二手房信息进行浏览。

●按照房屋所在区、理想价格、建筑面积、类型对房屋信息分类查看。

●通过输入房屋所在小区对房屋进行检索。

1.1.4网站结构设计

设计工具

图片编辑工具：

AdobeFireworkscs5

网站开发工具：

AdobeDreamweavercs5

2准备工作

服务器安装与配置

2.1.1安装IIS

单击开始菜单—控制面板—添加或删除程序—添加/删除Windows组件。

单击Internet信息服务器复选框，下一步，选择从网上下载的IIS安装文件的位置以安装。

2.1.2配置IIS

单击开始菜单—控制面板—管理工具—Internet信息服务，右击默认站点，选择属性—主目录，设置目录为c:

\inetpub\wwwroot，选择网站选项卡，设置IP地址为全部为分配。

2.1.3测试

打开浏览器，输入http:

//localhoat/，显示如图内容，则表示服务器安装成功。

数据库

2.1.4数据库的创建与表的编辑

打开Access2003，选择文件—新建—空数据库。

选择使用设计器创建表，编辑字段名称，类型，默认值等。

如果需要设置选项，选择查阅向导数据类型，添加选项即可。

2.1.5添加记录

向表中添加一些记录以对网站进行测试，在此不做赘述。

创建数据源

单击开始菜单—控制面板—管理工具—ODBC数据源管理器—系统DSN选项卡—添加，在弹出对话框中选择MicrosoftAccessDriver，单击完成。

在弹出对话框中单击选择。

在弹出对话框中选择数据库，单击确定，并填写数据源名为five。

单击确定。

3本地站点构建

创建站点

打开Dreamweaver，在欢迎区域选择新建站点。

3.1.1设置站点

站点名称：

你爱我家

站点本地文件夹：

C:

\Inetpub\wwwroot\Five\

3.1.2设置服务器

在服务器选项卡单击“+”，设置连接方法：

本地/网络，服务器文件夹：

C:

\Inetpub\wwwroot\，WebURl：

http:

//localhost/，单击保存。

勾选测试和远程。

连接数据源

在数据库面板单击“+”，选择数据源名称（DSN），选择上面创建的数据源。

4模板的制作

为方便asp网页套用模板，我们制作的是ASPVBScript模板。

背景

单击属性面板中的页面属性，选择背景图片及重复方式。

LOGO

●在插入面板选择常用—图像—选择事先准备好的LOGO图片文件，输入替换文本为：

你爱我家主页，调整图片大小。

●

在属性面板连接一栏中输入主页文件地址，即将LOGO超链接到主页。

●在边框一栏输入0，以消除图片超链接带来的边框效果。

AP-Div的使用

●AP-Div中可以包含图片、文字、表格、表单等多种元素，编辑方式与编辑网页相同。

●AP-Div是浮于页面上方的元素，不与其他元素冲突，可随意拖动，比利用表格排版等其他方式更加灵活便捷，方便排版。

●在插入面板布局选项卡中可以添加AP-Div，在属性面板中可设置其Z轴等属性，后面将多次用到AP-Div排版，以后不再赘述。

●利用AP-Div制作下拉菜单，详见4.5.2。

创建CSS

●在CSS样式面板中右击，选择新建，设置相关参数以创建网页中要用到的CSS样式。

●通过套用这些CSS样式来调整页面中各个对象的格式，如字体、字体大小、颜色。

边框、背景等等。

导航的制作

4.1.1利用表格制作导航栏

●在要纺织导航栏的位置绘制AP-Div，或在其上插入表格，使其下边缘正好到导航栏上边缘，以控制导航栏表格插入的位置。

●插入一个1行4列、宽度为100%的表格，在前三行分别输入网站简介、房屋分类导航、房屋注册。

●分别选中单元格或单元格内的文字，在属性面板中设置其要链接的网页文件。

●选中表格、单元格或文字，在属性面板的类中选择要用的CSS样式，或在CSS样式面板中右击要用的CSS样式，选择套用。

●调整单元格大小、背景颜色，使其美观。

4.1.2利用AP-Div制作下拉菜单

●将要成为下拉菜单的表格、图像、文字等添加在一个AP-Div中，调整到合适的大小、位置。

●选中下拉菜单的触发文字或其所在单元格，在标签检查器面板中选择行为，单击“+”，选择显示隐藏元素，选择刚才制作的下拉菜单所在的AP-Div元素，点击显示（或隐藏），在行为面板中选择onMouseOver（或onMouseout）。

●

选中下拉菜单所在AP-Div元素或表格，再次添加上述两个行为。

●选中下拉菜单所在AP-Div，在属性面板中将其可见性调整为隐藏，或者在AP元素面板中点击眼睛图标控制AP元素可见性。

搜索栏表单

●在导航栏最右侧单元格中添加表单，在表单中添加一个文本域“XQ”和一个提交按钮。

●选中表单，在动作中填写提交表单后要链接的结果页，在方法中选择GET。

●注：

以GET方式传送，表单中的数据会附加在网址后面，以字符串方式传递到下一页，我们用这种方式传递的是URL参数；以POST方式传送，数据不会在网址中有所显示。

两种方式要用不同方式设置搜索结果页记录集，前者为URL参数，后者为表单变量。

可编辑区域

●模板文件直接应用到网页，编辑网页时是不能做任何编辑的，我们要在制作模板时设置可编辑区域，模板应用到网页时，可在可编辑区域进行网页的编辑。

●本站只需设置一个可编辑区域在导航下方，不必考虑大小，其大小会随着编辑网页是内容的增加而自动扩展。

模板效果截图

5

不涉及数据库的页面制作

套用模板

打开网页文件，在资源面板中选中模板，右击选中套用，或在资源面板中单击应用。

添加页面对象

在页面中添加图片、超链接、表格等对象，不再赘述。

6记录显示页的制作

分类导航菜单的制作

方法参见4.5，此处不再赘述。

记录显示表格

●绘制AP-Div，添加一个3行3列的表格，在其四个角插入准备好的图片，其他单元格设置相应背景颜色，以达到圆角表格美观的效果。

●在中心单元格中添加表格，编辑要显示的数据的排版分布。

添加记录集

●在绑定面板中单击“+”，选择记录集（查询）选项，输入记录集的名称，选中相应连接，输入相应的查询语句及参数的设置。

●下面是各结果页记录集的查询语句和参数设置。

网页

SQL语句（MMColParam为参数）

参数值

区

SELECT*

FROM房屋基本信息

WHERE[街道]LIKE%MMColParam%

区名，如尖草坪

价格

100万以下

SELECT*

FROM房屋基本信息

WHERE[理想价格（万元）]<=MMColParam

100

100-200万

SELECT*

FROM房屋基本信息

WHERE[理想价格（万元）]between100and200

200万以上

SELECT*

FROM房屋基本信息

WHERE[理想价格（万元）]>=MMColParam

200

类型

楼房

SELECT*

FROM房屋基本信息

WHERE[房屋类别]=MMColParam

楼房

平房

SELECT*

FROM房屋基本信息

WHERE[房屋类别]=MMColParam

平房

面积

100平米以下

SELECT*

FROM房屋基本信息

WHERE[建筑面积（平方米）]<=MMColParam

100

100平米以上

SELECT*

FROM房屋基本信息

WHERE[建筑面积（平方米）]>=MMColParam

100

小区房屋搜索结果

SELECT*

FROM房屋基本信息

WHERE[小区]=MMColParam

Request.QueryString（"XQ"）

分类导航

SELECT*

FROM房屋基本信息

显示记录属性

在表格相应位置单击，在绑定面板选择要显示的数据项，单击插入。

如在街道后的单元格插入街道数据。

添加转到详细页面的链接

●选中房屋编号数据的ASP图标，在服务器行为面板中单击“+”，选择转到详细页面。

●输入详细信息网页文件的地址，传递URL参数取名为：

jibenID，选择对应记录集与列。

显示多条记录

●选中表格，在服务器行为面板中单击“+”，选择重复区域，在弹出对话框中选择所有记录。

●为避免记录过多使页面过大，我们选中其所在AP-Div，将其溢出属性改为scroll（滚动），这样数据过多时在此AP元素中拖动滚动条即可查看。

记录显示页静态效果截图

7详细信息页面的制作

表格

详细方法参见6.2，此处不再赘述。

记录集

●SQL语句：

SELECT*

FROM房屋基本信息

WHERE[编号]=MMColParam

●MMColParam参数值：

Request.QueryString（"jibenID"）

显示记录属性

详细方法见6.4，此处不再赘述。

详细记录显示页静态效果

8插入记录页面的制作

表单

●通过插入面板单击表单，或插入—表单—表单，在相应位置插入表单。

●添加文字。

●通过插入面板表单选项卡，在表单中添加文本域、选择（列表/菜单）、提交按钮等。

●在属性面板修改表单对象的属性，如默认值、选择菜单的列表值等。

向数据库中插入记录

在服务器行为面板中单击“+”，选择插入记录，选择插入位置、跳转页面及表单元素与数据库中表的列的对应关系。

房屋信息注册页静态效果截图

9小组成员及分工

小组成员

●组长：

●组员：

分工情况

●：

注册页、部分区结果页、注册成功页

●：

模板、搜索结果页、CSS样式

●：

部分区结果页、面积结果页、公司简介页

●：

详细信息页、类型结果页、主页

●：

分类导航页、价格结果页、广告页

注：

其他工作（如iis的安装与配置、数据源的建立、站点建立与设置、连接数据源、图片的制作等）由小组成员共同商讨完成。