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

大 连 海 事 大 学

实验报告 分数：分

专业班号 电子商务2011级 姓名 试验日期 指导教师

第 实验名称 电子商务网站设计 一、 实验目的与要求

目的：熟练掌握超文本标记语言HTML，用HTML建立内容。合理设计文档的结构以及格式化文本。

要求：设计并实施一个网站，至少包括5个网页，涵盖第二部分所规定的实验内容。要求网站风格、色彩、布局统一；页面遵循HTML4.01或XHTML1.0标准；页面的表现和布局用CSS文件实现。

二、 实验内容

网页设计时至少包含如下内容 1、指定文档标题 2、设置背景图象、背景颜色 3、向搜索引擎提供信息 4、设置默认路径 5、自动刷新和重定向 6、样式的定义 7、设置分行 8、设置分区 9、块引用 10、预先格式化文本 11、表单、表格、列表、贞 12、浮动和定位

三、 实验步骤与结果

网站整体布局图：（导入页，主页，链接，帧集）

1、

指定文档标题

操作：（代码及结果） <title>我的个人网站</title><title>我的个人主页</title><title>我的兴趣爱好</title><title>自然风光

</title> <title>名人

</title> <title>风味美食

</title> <title>个人档案</title>

2、 设置背景图象、背景颜色

操作：（代码及结果）

body { background-color: #FFFFCC;}设置背景色为浅黄色

body { background-color: #FF0000; }设置背景色为大红色 body { background-color: #000000; }设置背景色为黑色 本网站主调色为大红色，浅黄色及黑色。

3、 向搜索引擎提供信息

操作：

<meta name="keywords" content="我的个人主页" /> 向搜索引擎提供关键字：我的个人主页。

4、 操作：

设置默认路径

<base href="http://www.77cn.com.cn/document.html">”设置了文档的默认位置。

5、

自动刷新和重定向

操作：（代码及结果）

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="refresh" content="5";URL=my homepage.html" /> 结果： 刷新前:

五秒钟之后 刷新重定向到

6、

样式的定义

刷新后：

<style type="text/css"> body,td,th { font-size: 36px;--------设置字体大小36像素 color: #000000;---------设置字体颜色为黑色 font-weight: bold;---------设置字体为粗体 font-family: 楷体_GB2312;---------设置字体为楷体 text-align: center;---------设置文本居中 }

body { background-color: #FFFFCC;--------设置背景色为浅黄色 text-align: center;---------设置文本居中

}

</style> 结果如下：

7、 操作：

<lable for="highschool">高中及以下</lable></br>

<input type="studycard" name="university" id="university"> <lable for="university">本科</lable></br>

<input type="studycard" name="seacher" id=" seacher"> <lable for="seacher">研究生及以上</lable></br> 结果如下：

设置分行

8、设置分区 操作：

<div class="bordered">

<img src="i.jpg" width="220" height="160" /> <pre>

“水煮鱼(fish filets in hot chili oil）”，又

称“江水煮江鱼”，系重 庆渝北风味。看似原始的做法，实际 做工考究--选新鲜生猛活鱼，又充分发挥辣椒御寒、益气养血 功效，烹调出来的肉质一点也不会变韧，口感滑嫩，油而不腻。 既去除了鱼的腥味，又保持了鱼的鲜嫩。满目的辣椒红亮养眼， 辣而不燥，麻而不苦。“麻上头，辣过瘾”，让水煮鱼在全国流 行得一塌糊涂。</pre> </div>

结果如下：

9、块引用

操作： <tr>

<td><p align="left" style="margin-top:0px; margin-bottom:0px"> <font size="+6"><b>

<blockquote>个人档</blockquote></b></font></p></td>

</tr>

结果如下：

10、预先格式化文本

操作：

<pre> 江西历史悠久，山川秀丽，人文荟萃，名胜古迹众多。现拥有庐山、井冈山、龙虎山、三清山4个国家级风景名胜区，其中庐山作为“世界文化景观”列入“世界遗产名录”；有南昌、景德镇、赣州 3座国家级历史文化名城；还有中国第一大淡水湖 鄱阳湖及鄱阳湖国家级候鸟自然保护区；9座国家级森林公园 ；5个国家重点保护寺观；17处国家重点文物保护单位， 全省各类风景名胜区（点）多达2400余处 </pre>

操作结果如下：

11、表单、表格、列表、贞

操作: 1:表单

<table width="98%" height="90%" border="1" bordercolor="#FF0000"> <tr>

<td height="150" valign="top">&nbsp;</td> <td align="left" valign="top">

<form action="formhandler.cgi" method="post"> <p><lable for="fname">姓</lable>

<input type="text" name="fname" id="fname" size="5" /> <lable for="lname">名</lable>

<input type="text" name="lname" id="lname" size="10" /> </p>

<p><legend>性别</legend>

<input type="radio" name="sex" value="nan" id="nan"> <lable for="nan">男</lable>

<input type="radio" name="sex" value="nv" id="nv"> <lable for="nv">女</lable> </p>

<p><lable for="password">年龄</lable>

<input type="password" name="password" id="password" size="5" /> </br>

<lable for="password">星座</lable>

<input type="password" name="password" id="password" size="5" /> </br>

<lable for="password">职业</la …… 此处隐藏：4512字，全部文档内容请下载后查看。喜欢就下载吧 ……