大连海事大学电子商务(张思老师)实验报告.pdf

大连海事大学本科生实验报告

《电子商务》上机实验

院(系)：交通运输管理学院

专业班级：信息管理与信息系统专业

课程名称：电子商务

姓名：

学号：

指导教师：张偲

完成日期：2012年10月10日

试验报告正文

网站设计

一、实验名称：

电子商务网站设计

二、实验目的

1.通过实验增强对网站的感性认识

2.学习使用工具软件进行简单网页制作

3.练习编辑和使用HTML语言

三、实验要求

1、创建一个本地站点，至少包含五个页面。

2、网页有标题，有内容；

3、设置背景颜色或背景图片；

4、插入至少一个图片；

5、主体内容分几个段落，需要有换行、有字形、字号、颜色的变化；

6、至少有两个超链接，一个连接到E-MAIL，另一个连接到其它网站；

7、至少添加一个音频文件。

四、实验内容与步骤

1、内容（介绍自己所建网站包含的内容，宋体，四号字）

网站名：校园美食网

内容：包含大连各大学校园的美食，根据大学进行分类，可以在网站点击进

入自己的大学，看见自己生活中吃的美食，可以再本网站注册成为会员，参

与对自己学校美食的评价和推荐。并且提供学校商店的外卖电话（如果可以

的话还想提供在线购买外卖）。

网站主要组成：一共有5个网页，首页和4个普通网页。首页由标题、导航

2

试验报告正文

条、由几个推荐美食图片滚动组成并包含一些文字介绍、还有一些美食网站

的链接和E-MAIL的链接、背景音乐《嗨嗨人生》组成。其余4页是由各个

大学的美食更加细节的介绍还有各种链接组成。

2、步骤（要求截图）

A.先建立站点，以gg文件夹作为根文件，网页存入HTML文件夹，CSS文

件存入css文件夹，还有PHOTO文件夹存放图片和音频等文件，而后建立

CSS大概框架。Mianfram、headfram、titlefram、listfram等。

CSS代码如下：

.mainfram{

width:1000px;

height:auto;

margin:10px;

margin-top:10px;

padding-top:3px;

}

.headfram{width:980px;

height:170px;background-image:url(../photo/ss120930-08_副本.jpg);

}

.titlefram{

width:1000px;

height:50px;border-style:solid;border-color:#FFFF00;

3

试验报告正文

}

.listfram{border:solid1px#cccccc;

width:150px;

margin:10px;

float:left;}

B.在headfram中插入标题图片和logo.插入背景音乐。

代码：

embedembedembedembedembed

C.在listfram中插入导航条，用列表做成，代码如下：

ol

lialialialia

首页/a/li/a/li

海事美食/a/li/a/li