电子商务网站建设实验报告

电子商务网站建设

期末设计报告

班级 3170802

第一作者杨秋旋 08690238

（姓名/学号）

第二作者杨庆 08690204

（姓名/学号）

指导教师代宇

20##年5月

一网站介绍

这是一个小论坛，本论坛包含几大功能，包含发帖，回复，邮件，编辑，删除，引用，管理员用户可以删除帖子，修改帖子，加精等操作。

网站布局：

二.设计原理或方法

总体设计方案：

1网页布局设计：采用JSP，然后通过改HTML代码实现各个板块论坛的更能

2网站推广与管理，包括测试、维护、发布与推广及后台管理

具体：设计工具Dreamweaver，MyEclipse 6.5，Apache Tomcat 6.0，MySQL

具体实验步骤：关于一些实验所用的代码：

一、HTML各种命令的代码：

1、文本标签(命令)

<pre></pre>　　　　　　　　　创建预格式化文本

<h1></h1>　　　　　　　　　　创建最大的标题

<h6></h6>　　　　　　　　　　创建最小的标题

<b></b>　　　　　　　　　　　创建黑体字

<i></i>　　　　　　　　　　　创建斜体字

<tt></tt>　　　　　　　　　　创建打字机风格的字体

<cite></cite>　　　　　　　　创建一个引用,通常是斜体

<em></em>　　　　　　　　　　加重一个单词（通常是斜体加黑体）

<strong></strong>　　　　　　加重一个单词（通常是斜体加黑体）

<font size=?></font> 　　　　设置字体大小，从 1 到 7

<font color=?></font>　　　　设置字体的颜色,使用名字或十六进制值

2、图形(命令)

<img src="name"> 　　　　　　添加一个图像

<img src="name" align=?> 　　排列对齐一个图像:左中右或上中下

<img src="name" border=?>　　设置围绕一个图像的边框的大小

<hr> 　　　　　　　　　　　　加入一条水平线

<hr size=?>　　　　　　　　　设置水平线的大小（高度）

<hr width=?> 　　　　　　　　设置水平线的宽度（百分比或绝对像素点）

<hr noshade> 　　　　　　　　创建一个没有阴影的水平线

3、链接(命令)

<a href="URL"></a> 　　　　　创建一个超链接

<a href="mailto:EMAIL"></a>　创建一个自动发送电子邮件的链接

<a name="NAME"></a>　　　　　创建一个位于文档内部的靶位

<a href="#NAME"></a> 　　　　创建一个指向位于文档内部靶位的链接

4、格式排版(命令)

<p>　　　　　　　　　　　　　创建一个新的段落

<p align=?>　　　　　　　　　将段落按左、中、右对齐

<br> 　　　　　　　　　　　　插入一个回车换行符

<blockquote></blockquote>　　从两边缩进文本

<dl></dl>　　　　　　　　　　创建一个定义列表

<dt> 　　　　　　　　　　　　放在每个定义术语词之前

<dd> 　　　　　　　　　　　　放在每个定义之前

<ol></ol>　　　　　　　　　　创建一个标有数字的列表

<li> 　　　　　　　　　　　　放在每个数字列表项之前，并加上一个数字

<ul></ul>　　　　　　　　　　创建一个标有圆点的列表

<li> 　　　　　　　　　　　　放在每个圆点列表项之前，并加上一个圆点

<div align=?>　　　　　　　　一个用来排版大块HTML 段落的标签，也用于格式化表

二、HTML基本语法

文件格式<html></html>(文件的开头与结尾)

主题<title></title>(放在文件的开头)

文头区段<head></head>(描述文件的信息)

内文区段<body></body>(放此文件的内容)

标题<h?></h>(?=1~6,改变标题字的大小)

标题对齐<h align=right,left,center></h>

字加大<big></big>

字变小<small></small>

粗体字<b></b>

斜体字<i></i>

底线字<u></u>

上标字<sup></sup>

下标字<sub></sub>

居中<center></center>

居左<left> </left>

居右<right> </right>

基本字体大小<basefont size>(取值范围从1到7，默认值为3)

改变字体大小<font size=?></font>(?=1~7)

字体颜色<font color=#rrggbb></font>(RGB色码)

指定字型<font face=?></font>(?=宋体，楷体等)

网址链结<a href="URL"></a>

设定锚点<a name="?"></a>(?以容易记为原则)

链结到锚点<a href="#?"></a>(同一份文件)

<a href="URL#?"></A>(锚点不同文件)

显示图形<img src="URL"></a>

图形位置<img src="URL" align=top,bottom,middle,left,right>(分别为上、下、中、左、右的位置)

图形取代文字<img src="URL"alt=?>(无法显示图形时用)

图形尺寸<img src="URL" width=? height=?>(?以像素为单位)

连结图形边线<img src="URL"border=?>(?以像素为单位)

图形四周留白<img src="URL"hspace=? vspace=?>(?以像素为单位)

段落<p></p>

断行<br></br>

横线<hr>

横线厚度<hr size=?>(?以像素为单位)

横线长度<hr width=?>(?以像素为单位)

横线长度<hr width=?%>(?与页宽相比较)

实横线<hr noshade>(无立体效果)

背景图案<body background=图形文件名>(图形文件格式为gif和jpg)

背景颜色<body bgcolor=#rrggbb>(RGB色码)

背景文字颜色<body text=#rrggbb>(RGB色码)

未链结点颜色<body link=#rrggbb>(RGB色码)

已链结点颜色<body vlink=#rrggbb>(RGB色码)

正在链结点颜色<body alink=#rrggbb(RGB色码)

三.数据库设计

数据库存放注册用户，管理员等的数据。

MySQL是一个小型关系型数据库管理系统,目前MySQL被广泛地应用在Internet上的中小型网站中。

MySQL特性：

SQL，即结构化查询语言，是关系数据库的标准语言，SQL是一个通用的、功能性极强的关系数据库语言。其优点有：

1.综合统一

2.高度非过程化

3.面向集合的操作方式

4.以一种语法结构提供多种使用方式

5.语言简洁，易学易用

四.主要功能及实现介绍

以下为网站截图

该页面是通过index.html页面来实现的。改页面只是一个普通的HTML网页，包含三个论坛，可查看帖子的数量，回复时间等信息

进入分论坛之后也可查看文章，回复时间等信息。

3 进入论坛之后可浏览帖子，发帖，回复等功能。

4后台管理页面，可以修改论坛的公告，帖子内容等信息。

五：部分代码

1主论坛代码：

<html>

<head>

function Popup(url, window_name, window_width, window_height)

{ settings=

"toolbar=no,location=no,directories=no,"+

"status=no,menubar=no,scrollbars=yes,"+

"resizable=yes,width="+window_width+",height="+window_height;

NewWindow=window.open(url,window_name,settings); }

function icon(theicon) {

document.input.message.value += " "+theicon;

document.input.message.focus();

}

</script>

<title>喜洋洋论坛</title>

</head>

<body>

<tr>

<p>

name1 欢迎您

现在时间

22:47 06月07日星期一

            【<a href='manager.html'><font color='yellow'>管理</font></a>】

</font>

</td>

| <a href='modifyinfo.html'><font color='#B6F1FD'>修改资料</font></a>

| <a href="chatroom.html"><font color="#B6F1FD">聊天室</font></a> | <a href="../forum2/index.html"><font color="#B6F1FD">首页</font></a>

| <a href='logout.html'><font color='#B6F1FD'>退出</font></a>

</font></td>

</tr>

</table></td>

</form>

</tr>

<tr>

<tr>

<B>公告一:</B><font color=black>这是第一个公告。。。</font><font color=gray> 20##-5-31 15:21</font>   <B>公告二:</B><font color=black>大家注意一下！！！公告二，(*^__^*) 嘻嘻……，不要告诉别人是我张三写的。一定不要告诉哦。哈哈哈。</font><font color=gray> 20##-5-31 19:15</font>   

</marquee> </td>

</tr>

</table>

</td>

</tr>

</tr>

<br />

</td>

作者：<a href='member.html?member=name6'>name6</a></a></td>

</tr>

<br />

</td>

作者：<a href='member.html?member=name2'>name2</a></a></td>

</tr>

<br />

</td>

作者：无</a></td>

</tr>

<td colspan="7" height="14" width="734"><b><font color="#333399">在线人员

- 目前有 0 位游客和 1 位会员在线 </font></b></td>

</tr>

</tr>

</table>

</td></tr></table>

<tr>

</select> <input type="submit" value="确认">

</td></tr></table></form>

</td>

</tr>

<tr>

程序作者：小秋 E_Mail:<a href="mailto:22222@163.com">xyworker@163.com</a><br>

QQ:xxxxxxxxx</p>

</div>

</tr></table>

</body></html><html><script language="JavaScript"></script></html>

2 帖子代码：

<html>

<head>

function Popup(url, window_name, window_width, window_height)

{ settings=

"toolbar=no,location=no,directories=no,"+

"status=no,menubar=no,scrollbars=yes,"+

"resizable=yes,width="+window_width+",height="+window_height;

NewWindow=window.open(url,window_name,settings); }

function icon(theicon) {

document.input.message.value += " "+theicon;

document.input.message.focus();

}

</script>

</head>

<tr>

<tr>

<p>

name1 欢迎您

现在时间

22:48 06月07日星期一

            【<a href='manager.html'><font color='yellow'>管理</font></a>】

</font>

</td>

| <a href='modifyinfo.html'><font color='#B6F1FD'>修改资料</font></a>

| <a href="chatroom.html"><font color="#B6F1FD">聊天室</font></a> | <a href="../forum2/index.html"><font color="#B6F1FD">首页</font></a>

| <a href='logout.html'><font color='#B6F1FD'>退出</font></a>

</font></td>

</tr>

</table>

</td>

</form>

</tr>

<tr>

<td width="62%"> <a href="../default1.html">首页</a>>><a href="index.html">喜洋洋论坛</a>>><a href=board.html?fid=2>论坛一</a>>>浏览贴子

</td>

</tr></table>

<tr>

<tr>

</tr>

<tr>

<br />

斑竹<br />

贴子数量：<span class="postauthor">1</span> <br />

注册日期：<span class="postauthor">20##-5-31 </span></div>

</td>

  发表于： <span class="postauthor">20##-5-31 16:12</span></td>

</tr>

<tr>

<td height="120" valign="top" bgcolor="#F7FBFF">  这是文章一的内容 <img src=IMAGES/SMILE.GIF border=0>,我给改了一下，哦，不是我改的，是李四改的。嘿嘿，这样就没有人知道是我改的了

<hr size=1 color=#000000 noshade>签名<br>  这是name4的个性签名。。。

</td>

</tr>

<tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

<br />

系统管理员<br />

贴子数量：<span class="postauthor">18</span> <br />

注册日期：<span class="postauthor">20##-5-31 </span></div>

</td>

  发表于： <span class="postauthor">20##-5-31 18:16</span></td>

</tr>

<tr>

<td height="120" valign="top" bgcolor="#F7FBFF">  这是回复文章一的内容（＊）＊＿）＿）9

<hr size=1 color=#000000 noshade>签名<br>  这是我的个人签名

</td>

</tr>

<tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

<br />

系统管理员<br />

贴子数量：<span class="postauthor">18</span> <br />

注册日期：<span class="postauthor">20##-5-31 </span></div>

</td>

  发表于： <span class="postauthor">20##-5-31 18:31</span></td>

</tr>

<tr>

<td height="120" valign="top" bgcolor="#F7FBFF">  再回复一个，再回复一个，再回复，回复，回复！(*^__^*) 嘻嘻……

</td>

</tr>

<tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

<br />

系统管理员<br />

贴子数量：<span class="postauthor">18</span> <br />

注册日期：<span class="postauthor">20##-5-31 </span></div>

</td>

  发表于： <span class="postauthor">20##-5-31 18:43</span></td>

</tr>

<tr>

<td height="120" valign="top" bgcolor="#F7FBFF">  怎么没有人了呢，接着回复啊，

<BR>?????

<BR>{/ o o /}

<BR> ( (oo) )

<BR> ? ??

<hr size=1 color=#000000 noshade>签名<br>  这是我的个人签名

</td>

</tr>

<tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

<br />

系统管理员<br />

贴子数量：<span class="postauthor">18</span> <br />

注册日期：<span class="postauthor">20##-5-31 </span></div>

</td>

  发表于： <span class="postauthor">20##-5-31 18:16</span></td>

</tr>

<tr>

<td height="120" valign="top" bgcolor="#F7FBFF">  发个废帖子,签名都不用

</td>

</tr>

<tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td></tr>

</table>

</form>

</td></tr>

<tr>

</select> <input type="submit" value="确认">

</td></tr></table></form>

</td>

</tr>

<tr>

程序作者：喜洋洋 E_Mail:<a href="mailto:xyworker@163.com">xyworker@163.com</a><br>

QQ:14516449 </p>

</div>

</tr>

</table>

</body></html>

</table>

</body></html>

五.总结

通过个人设计网站，让我们了解到网站建设是一项浩瀚的工程。不仅涉及到美学,心理学,平面构成,色彩搭配等平面设计的方面的知识,还涉及到html,javascript,css,asp,php等编程语言技术方面的知识。只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能。以前这方面的知识是一片空白，所以在建网站的过程中遇到很多困难。在同学和网络资源的帮助下基本解决了问题，最终我们对网站雏形还是基本满意。在这个过程中，我学到了新的美化网页的方法，运用了更多以前未运用的技巧，并且为我自己在制作网页这方面积累了一些经验，这些将是我人生中的一次重要的经历。我也更加深刻理解了把平时所学知识运用到实践中做到真正的学以致用而不只是纸上谈兵。网站设计远比我想象的复杂，在主页中体现自己的个性、网站齐全的功能和一大段的代码就让我头疼。在以后的学习中还应注意个人技术、创意方面的提升。我认为网页设计的最大特点就是色彩淡雅，布局协调。观之，给人以清丽，纯朴的感觉。不同的网站应针对不同的浏览人群，网页的配色尽量控制在3种色彩以内，已避免给人杂乱无章的感觉，同时用户浏览信息时不会觉得眼睛疲劳。

最后，我感受最深的是，技术方面的学习，最重要的是自己实践做出东西，只通过自己的亲身实践，才能学会、学懂、学通技术。

相关推荐

电子商务网站建设实验报告

专栏推荐