实验一 简单静态网页设计
一、 实验目的：
- 复习使用记事本编辑网页的方法。
- 熟悉不同表单控件类型的应用。
- 练习使用记事本在网页中添加表单与表单元素。
二、 实验内容：
根据提供的素材设计在线调查问卷。
三、 实验要求：
- 熟练掌握使用记事本进行简单网页编辑的方法。
- 能够区分不同表单元素的应用场景。
- 掌握表单与表单元素的元素名和属性对。
四、 实验学时：4学时
五、 实验步骤：
实验准备： 1.在硬盘上为本实验建立文件夹（以下称为“实验文件夹”）。
2.根据提供的素材设计在线调查问卷：
（1） 从开始菜单启动记事本；
（2） 在记事本中，录入一个最简合法HTML文档；
（3） 设置该HTML文档首页如图。要求按照首页来设计页面index.html.使用的图片在image文件夹中。
（4） 在首页点击提交后转向企业电子商务调查问卷.
（5） 打开本实验提供的WORD文档questionnaire.doc，这个调查问卷比较长，浏览该调查问卷的内容。由于该调查问卷比较长，选取并标示该调查问卷中具有代表性的问题（更改一下文本背景），准备将它们在网页中进行实现，保存该WORD文档；
（6） 在记事本中添加表单；
（7） 在表单中插入表单元素，用于在网页中显示步骤（4）中标示的问题及答案；
（8） 为表单添加提交和重置按钮；
（9） 保存网页为questionaire.htm。
提示：本实验没有标准答案，但是在将WORD文档中的调查问题及答案移植到网页中时，要尽可能多地使用到讲过的表单元素（如文本框、单选按钮、复选按钮、下拉菜单/列表、框架等）。另外，网页上调查问卷的答案的表现形式与并不一定要与WORD中的一致，而是应该选择使用更符合需要的表单元素，例如对于答案选项比较多的问题来说，应该优先选用下拉菜单/列表，单选使用下拉菜单，多选使用列表。
六、 实验代码：
博客.html
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2136">
<title>博客</title>
<style type="text/css">
body{
font-family:黑体，隶书;
font-size:18px;
margin:auto;
}
.top{
margin:auto;
width:100%;
float:left;
}
.left{
width:5%;
float:left;
height:auto;
}
.right{
width:6.3%;
height:auto;
float:right;
}
.left1{
width:24%;
float:left; /*文本的浮动*/
padding:0 10px; /*设置边线据内容的距离*/
height:auto;
}
.line{
border:1px green;
cellspacing:0;
cellpadding:0;
height:400px;
border-right-style:solid;
border-left-style:none;
border-bottom-style:none;
border-top-style:none;
}
div{
box-sizing:border-box;
width:600px;
line-height:1.5;
} </style>
<script language="JavaScript">
<!--
function check(){
var p = document.form1.Dengru1.value;
var p1 = document.form1.Dengru2.value;
if(p1!==p){
alert("密码不一致");
return false;
}else{ } }
//--> </script>
</head>
<body>
<img src="data:image/01.gif" class="top"/>
<img src="data:image/02.gif" class="left"/>
<div class="left1">
<img src="data:image/reg.gif"/>
<b>注册帮助</b><br/>
<ul>
<li>会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。</li>
<br/>
<li>密码：请设定在6-20位之间。</li>
<br/>
<li>确认密码：确认密码必须与密码一致。</li>
<br/>
<li>Email：请填写有效的Email地址，以便于与您联系。</li>
</ul>
</div>
<div class="left1" style="width:100px"><table class="line"></table></div>
<form name="form1" action="调查问卷.html" onSubmit="return check()">
<div class="left1">
<div style="height:80px"></div>
<table border=0>
<tr></tr>
<tr>
<td>用 户 名：</td>
<td><input type="text" name="Dengru" placeholder="长度控制在3-20个字符之内" size=31 pattern="^.{3,20}$" required="required"></td>
</tr>
<tr></tr>
<tr>
<td>密 码：</td>
<td><input type="password" name="Dengru1" placeholder="请设定在6-20位之间" size=32 pattern="^.{6,20}$" required="required" ></td>
</tr>
<tr></tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="Dengru2" size=32 pattern="^.{6,20}$" required="required"></td>
</tr>
<tr></tr>
<tr>
<td>性 别：</td>
<td><input type="radio" name="De2" value="Male">男 <input type="radio" name="De2" value="Female">女</td>
</tr>
<tr></tr>
<tr>
<td>E-mail：</td>
<td><input type="email" name="Dengru3"size=40></td>
</tr>
</table>
<br/>
<input type="submit" name="Submit" value="提交">
<input type="reset" name="Reset" value="重置">
</div>
</form>
<img src="data:image/04.gif" class="right"/>
<img src="data:image/03.jpg" class="top"/>
</body>
</html>
博客
调查问卷.html
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2136">
<style type="text/css">
body{
background-color:#DEDEDE;
width:640px;
margin:auto; /*设置页面边距*/
}
.headline{
font-size:22px;
font-family:宋体;
text-align:center; /*设置居中*/
font-weight:bold; /*设置为粗体*/
}
.top{
font-size:10。5px; /*字体大小*/
font-family:楷体;
line-height:2; /*设置行高为1.5*/
}
.right{
text-align:right;
line-height:2;
}
.left{
text-align:left;
}
.down{
font-size:14px;
font-family:宋体;
line-height:2;
text-align:left;
}
.headline1{
font-size:16px;
font-family:黑体;
text-align:left; /*设置左对齐*/
font-weight:bold; /*粗体*/
}
.line{
border:1px solid #DEDEDE;
border-bottom:1px solid #000000;
background-color:#DEDEDE; }
div{
box-sizing:border-box; /*设置显示盒子模式*/
line-height:1.5;
border-size:100;
}
</style>
<script language="JavaScript">
<!--
function checkCount(){
var q9box = document.getElementsByName("q9");
var count = 0;
for(i = 0; i< q9box.length;i++){
if(q9box[i].checked){
count += 1;
}
}
if(count > 4){
alert("最多只能选4个"); return false;
}
}
//-->
</script>
<title>调查问卷</title>
</head>
<body>
<div class="top">
<div class="headline">
<h2>企业电商务调查问卷</h2>
</div>
<div>尊敬的先生/女士：<br/></div>
<div style="text-indent:3em">您好！为了了解目前企业开展电子商务的状况和问题，我们课题组希望您能协助填写<br/>这份调查表。在此，我们郑重承诺，调查结果仅供研究使用。如果您有兴趣和需要，我们可<br/>以将最终的统计和分析结果通过电子邮件的方式反馈给您。<br/></div>
<div style="text-indent:3em">本次调查对于电子商务的界定是：通过计算机网络完成的购买和销售货物以及服务的<br/>行为，这些货物或服务的订单是通过相关网络下达的，但是支付和物流可以是网下进行的。<br/>通过传真、电话和电子邮件达成的交易不算在内。<br/></div>
<div style="text-indent:3em">非常感谢您的大力支持！<br/><br/></div>
<div class="right" >广东省电子商务发展规划前期研究课题组</div>
<div style="border:1px solid #000000"></div>
</div> <form name="form2" action="反馈.html" onSubmit="return check()" >
<div class="down">
<div class="headline1">
<h3>一、企业基本简况</h3>
</div>
<table style="width:500px;height:150px" border=0>
<tr>
<td>1.企业名称： <input type="text" name="u" class="line" size=20> 注册地：</td>
<td><input type="text" name="u" class="line" size=15></td>
</tr>
<tr>
<td>2.您在所在企业的职务（职位）： <input type="text" name="u" class="line" size=15></td>
</tr>
<tr>
<td>3. 企业成立时间： <input type="text" name="u" class="line" size=20></td>
</tr>
<tr>
<td>4. 企业所在行业： <input type="text" name="u" class="line" size=20></td>
</tr>
</table>
<u><b style="font-size:17px">以下选择题，若无特别声明，皆为多项选择题</b></u><br/>
<p>5.您所在企业的所有制形式为：（单选）<br/>
<input type="radio" name="a">国有
<input type="radio" name="a">集体
<input type="radio" name="a">民营
<input type="radio" name="a">外资
<input type="radio" name="a">合资
<input type="radio" name="a">股份制
<input type="radio" name="a">其他<input type="text" name="u" class="line" size=10>
</p>6.2005年，您所在企业的销售收入为（单位：人民币）： <input type="text" name="u" class="line" size=10>万元，比上年增<br/>
长 <input type="text" name="u" class="line" size=10> ％。
<p>7. 您所在企业应用到哪些物流服务？<br/>
<input type="checkbox" name="b">网络型邮政物流企业（具体为:
<input type="radio" name="b1">广东邮政
<input type="radio" name="b1">EMS
<input type="radio" name="b1">UPS
<input type="radio" name="b1">其他<input type="text" name="u" class="line" size=10>）<br/>
<input type="checkbox" name="c">运输仓储公司（
<input type="radio" name="c1">本市企业
<input type="radio" name="c1">异地企业）<br/>
<input type="checkbox" name="d">第三方物流企业（
<input type="radio" name="d1">本市企业
<input type="radio" name="d1">异地企业）<br/>
<input type="checkbox" name="e">企业自行解决<br/>
<input type="checkbox" name="f">其他<input type="text" name="u" class="line" size=10>
</p>
8.请列出贵企业所在行业的主要企业情况<br/>
<table border=1 cellspacing="0" cellpadding="0" style="width:600px;height:200px;text-align:center">
<tr>
<td>企业名称</td>
<td>该企业的竞争优势</td>
<td>是否已开展电子商务</td>
</tr>
<tr>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="radio" name="g">是 <input type="radio" name="g">否</td>
</tr>
<tr>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="radio" name="g1">是 <input type="radio" name="g1">否</td>
</tr>
<tr>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="radio" name="g2">是 <input type="radio" name="g2">否</td>
</tr>
</table>
<div class="headline1">
<h3>二、企业信息化总体状况</h3>
</div>
<p>9.您所在企业网站的更新周期是多长时间？（单选）
<select>
<option value ="0">单选，请下拉</option>
<option value="1">每天</option>
<option value="2">每周</option>
<option value="3">每月</option>
<option value="4">每季度</option>
<option value="5">半年</option>
<option value="6">半年以上</option>
</select>
</p>
10.您所在企业最需要的信息包括（选择其中最重要的4项信息）：<br/>
<table>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">产品开发 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">生产技术 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">技术引进 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">市场行情</td>
</tr>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">竞争对手 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">政策法规 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">薪酬水平 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">人才信息 </td>
</tr>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">社交活动 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">合作伙伴信息 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">企业绩效</td>
<td><input type="checkbox" name="q9" onclick="checkCount()">行业动态 </td>
</tr>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">客户信息</td>
<td><input type="checkbox" name="q9" onclick="checkCount()">供应商信息 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">产品价格</td>
<td><input type="checkbox" name="q9" onclick="checkCount()">质量管理 </td>
</tr>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">财务状况 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">投资融资 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">市场预测</td>
<td><input type="checkbox" name="q9" onclick="checkCount()">员工关系 </td>
</tr>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">其他 <input type="text" name="u" class="line" size=10> </td>
</tr>
</table>
<br/>
<p>11.您所在企业是否建立了以下电子商务系统，各个系统的作用如何？<br/>
<table border=0 style="width:500px;height:150px;text-align:center">
<tr><th></th><th>非常重要</th><th>重要</th><th>一般</th><th>不重要</th><th>不存在</th></tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">没有重视电子商务规划</td>
<td><input type="radio" name="l">5</td>
<td><input type="radio" name="l">4</td>
<td><input type="radio" name="l">3</td>
<td><input type="radio" name="l">2</td>
<td><input type="radio" name="l">1</td>
</tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">企业之间存在利益冲突</td>
<td><input type="radio" name="l1">5</td>
<td><input type="radio" name="l1">4</td>
<td><input type="radio" name="l1">3</td>
<td><input type="radio" name="l1">2</td>
<td><input type="radio" name="l1">1</td>
</tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">管理理念与技术冲突</td>
<td><input type="radio" name="l2">5</td>
<td><input type="radio" name="l2">4</td>
<td><input type="radio" name="l2">3</td>
<td><input type="radio" name="l2">2</td>
<td><input type="radio" name="l2">1</td>
</tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">外部环境与技术冲突</td>
<td><input type="radio" name="l3">5</td>
<td><input type="radio" name="l3">4</td>
<td><input type="radio" name="l3">3</td>
<td><input type="radio" name="l3">2</td>
<td><input type="radio" name="l3">1</td>
</tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">企业文化保守</td>
<td><input type="radio" name="l4">5</td>
<td><input type="radio" name="l4">4</td>
<td><input type="radio" name="l4">3</td>
<td><input type="radio" name="l4">2</td>
<td><input type="radio" name="l4">1</td>
</tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">其他<input type="text" name="u" class="line" size=20></td>
</tr>
</table>
</p>
<p>12.您认为企业要进一步发展电子商务，需要所在地方*哪些支持？<br/>
<input type="text" name="u" class="line" size=70><br/>
<input type="text" name="u" class="line" size=70><br/>
<input type="text" name="u" class="line" size=70><br/>
</p>
<b>问卷填写人签名：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=20><b>单位负责人签名：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=20><br/>
<b>问卷填写人联系电话：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=15><b>单位盖章：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=25><br/>
<b>问卷填写日期：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=40><br/><br/>
<pre><input type="submit" name="Submit" value="提交"> <input type="reset" name="Reset" value="重置"></pre>
</div>
</form> </body>
</html>
调查问卷
反馈.html
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2136">
<title>反馈</title>
<script language="JavaScript">
alert("感谢您的参与！");
</script>
</head>
<body>
</body>
</html>
反馈