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

大连海事大学电子商务网站设计实验报告分数：分专业班号电子商务2011级姓名周慧敏（2220113494）试验日期2012/7/03指导教师张偲第实验实验名称电子商务网站设计实验目的与要求目的：熟练掌握超文本标记语言HTML，用HTML建立内容。合理设计文档的结构以及格式化文本。要求：设计并实施一个网站，至少包括5个网页，涵盖第二部分所规定的实验内容。要求网站风格、色彩、布局统一；页面遵循HTML4.01或XHTML1.0标准；页面的表现和布局用CSS文件实现。实验内容网页设计时至少包含如下内容1、指定文档标题2、设置背景图象、背景颜色3、向搜索引擎提供信息4、设置默认路径5、自动刷新和重定向6、样式的定义7、设置分行8、设置分区9、块引用10、预先格式化文本11、表单、表格、列表、贞12、浮动和定位实验步骤与结果网站整体布局图：（导入页，主页，链接，帧集）导入页导入页个人主页个人主页学校兴趣爱好个人档学校兴趣爱好个人档家乡（帧集）家乡（帧集）自然风光美食名人自然风光美食名人指定文档标题操作：（代码及结果）<title>我的个人网站</title><title>我的个人主页</title><title>我的兴趣爱好</title><title>自然风光</title><title>名人</title><title>风味美食</title><title>个人档案</title>设置背景图象、背景颜色操作：（代码及结果）body{background-color:#FFFFCC;}设置背景色为浅黄色body{background-color:#FF0000;}设置背景色为大红色body{background-color:#000000;}设置背景色为黑色本网站主调色为大红色，浅黄色及黑色。向搜索引擎提供信息操作：<metaname="keywords"content="我的个人主页"/>向搜索引擎提供关键字：我的个人主页。设置默认路径操作：<basehref="/document.html">”设置了文档的默认位置。</style> 结果如下： 设置分行操作：<lablefor="highschool">高中及以下</lable></br><inputtype="studycard"name="university"id="university"><lablefor="university">本科</lable></br><inputtype="studycard"name="seacher"id="seacher"><lablefor="seacher">研究生及以上</lable></br>结果如下：8、设置分区操作：<divclass="bordered"><imgsrc="i.jpg"width="220"height="160"/><pre>“水煮鱼(fishfiletsinhotchilioil）”，又称“江水煮江鱼”，系重庆渝北风味。看似原始的做法，实际做工考究--选新鲜生猛活鱼，又充分发挥辣椒御寒、益气养血功效，烹调出来的肉质一点也不会变韧，口感滑嫩，油而不腻。既去除了鱼的腥味，又保持了鱼的鲜嫩。满目的辣椒红亮养眼，辣而不燥，麻而不苦。“麻上头，辣过瘾”，让水煮鱼在全国流行得一塌糊涂。</pre></div>结果如下：9、块引用操作：<tr><td><palign="left"style="margin-top:0px;margin-bottom:0px"><fontsize="+6"><b><blockquote>个人档</blockquote></b></font></p></td></tr>结果如下：10、预先格式化文本操作：<pre>江西历史悠久，山川秀丽，人文荟萃，名胜古迹众多。现拥有庐山、井冈山、龙虎山、三清山4个国家级风景名胜区，其中庐山作为“世界文化景观”列入“世界遗产名录”；有南昌、景德镇、赣州3座国家级历史文化名城；还有中国第一大淡水湖鄱阳湖及鄱阳湖国家级候鸟自然保护区；9座国家级森林公园；5个国家重点保护寺观；17处国家重点文物保护单位，全省各类风景名胜区（点）多达2400余处</pre>操作结果如下：11、表单、表格、列表、贞操作:1:表单<tablewidth="98%"height="90%"border="1"bordercolor="#FF0000"><tr><tdheight="150"valign="top"> </td><tdalign="left"valign="top"><formaction="formhandler.cgi"method="post"><p><lablefor="fname">姓</lable><inputtype="text"name="fname"id="fname"size="5"/><lablefor="lname">名</lable><inputtype="text"name="lname"id="lname"size="10"/></p><p><legend>性别</legend><inputtype="radio"name="sex"value="nan"id="nan"><lablefor="nan">男</lable><inputtype="radio"name="sex"value="nv"id="nv"><lablefor="nv">女</lable></p><p><lablefor="password">年龄</lable><inputtype="password"name="password"id="password"size="5"/></br><lablefor="password">星座</lable><inputtype="password"name="password"id="password"size="5"/></br><lablefor="password">职业</lable><inputtype="password"name="password"id="password"size="5"/></p><p><lablefor="address">家庭地址</lable><textareaname="address"id="address"cols="60"rows="3"/></textarea></p><legend>学历</legend><p><inputtype="studycard"name="highschool"id="highschool"checked><lablefor="highschool">高中及以下</lable></p><p><inputtype="studycard"name="university"id="university"><lablefor="university">本科</lable></p><p><inputtype="studycard"name="seacher"id="seacher"><lablefor="seacher">研究生及以上</lable></p><fieldset><legend>每周能运动几小时</legend><inputtype="radio"name="buy"value="onethree"id="onethree"><lablefor="onethree">1-3h</lable><inputtype="radio"name="buy"value="fiveten"id="fiveten"><lablefor="fiveten">5-10h</lable><inputtype="radio"name="buy"value="tenfifteen"id="tenfifteen"><lablefor="tenfifteen">大于10h</lable></fieldset><inputtype="submit"value="提交"/><inputtype="reset"name="leave"value="重置"></form></td><tdalign="center"> </td></tr><tr><td> </td><td> </td><td> </td></tr></table>操作结果如下：2：表格<tablewidth="80%"height="100%"border="6"align="center""cellpadding="0"cellspacing="0"bordercolor="#000000"bgcolor="#FFFFCC"><trvalign="top"bordercolor="#000000"bgcolor="#FFFFFF"><tdheight="44"colspan="3"bgcolor="#FFFFCC">我的兴趣爱好广泛......</td></tr><trbordercolor="#000000"><tdwidth="37%"valign="top"bordercolor="#000000"bgcolor="#FF0000">看电影<formid="form1"name="form1"method="post"action=""><label></label></form><imgsrc="17.jpg"width="200"height="120"hspace="70"/></td><tdwidth="29%"bgcolor="#FFFFCC"> </td><tdwidth="34%"bgcolor="#FF0000">美食<imgsrc="16.jpg"width="188"height="137"hspace="60"/></td></tr><trbordercolor="#000000"><tdvalign="top"bordercolor="#000000"bgcolor="#FFFFCC"> </td><tdbgcolor="#FF0000">看书<imgsrc="15.jpg"width="224"height="159"hspace="20"/></td><tdbgcolor="#FFFFCC"> </td></tr><trbordercolor="#000000"><tdvalign="top"bordercolor="#000000"bgcolor="#FF0000">听音乐<imgsrc="14.jpg"width="196"height="123"hspace="70"/></td><tdbgcolor="#FFFFCC"> </td><tdbgcolor="#FF0000">羽毛球<imgsrc="13.jpg"width="206"height="152"hspace="50"/></td></tr></table>操作结果如下：3：帧操作：首先做第一个网页，将页面分成横向的两部分<html><head><title>我的家乡</title></head><framesetrows="25%,*"><framename="top"src="top.html"></frame><framename="content"src="ziran.html"></frame></frameset></html>结果如下：然后再做top与content部分的网页，以下列举列举top部分网页的制作过程：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><styletype="text/css"><!--body{ background-color:#FF0000;}--></style></head><body><tablewidth="80%"height="38"border="1"align="center"cellpadding="0"cellspacing="0"bordercolor="#000000"bgcolor="#FFFFCC"><tr><tdwidth="35%"align="center"><ahref="ziran.html"target="content">自然风光</a></td><tdwidth="30%"align="center"><ahref="mingren.html"target="content">名人</a></td><tdalign="center"><ahref="meishi.html"target="content">风味美食</a></td></