devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

实验一 简单静态网页设计_静态网页设计实验

作者：Li_阴宅 | 2024-08-18 07:46:40

赞

踩

静态网页设计实验
  • 实验目的：
    1. 复习使用记事本编辑网页的方法。
    2. 熟悉不同表单控件类型的应用。
    3. 练习使用记事本在网页中添加表单与表单元素。
  • 实验内容：

根据提供的素材设计在线调查问卷。

  • 实验要求：
    1. 熟练掌握使用记事本进行简单网页编辑的方法。
    2. 能够区分不同表单元素的应用场景。
    3. 掌握表单与表单元素的元素名和属性对。
  • 实验学时：4学时
  • 实验步骤：
  1. 实验准备：

（1）在硬盘上为本实验建立文件夹（以下称为“实验文件夹”）。

（2）根据提供的素材设计在线调查问卷：

       1-从开始菜单启动记事本；

       2-在记事本中，录入一个最简合法HTML文档；

       3-设置该HTML文档首页如图1。要求按照首页来设计页面index.html.使用的图片在image文件夹在记事本中，录入一个最简合法HTML文档；

         

 

      4-在首页点击提交后转向企业电子商务调查问卷.

 

 

      5-打开本实验提供的WORD文档questionnaire.doc，这个调查问卷比较长，浏览该调查问卷的内容。由于该调查问卷比较长，选取并标示该调查问卷中具有代表性的问题（更改一下文本背景），准备将它们在网页中进行实现，保存该WORD文档；在记事本中添加表单；

     6-在表单中插入表单元素，用于在网页中显示步骤（4-）中标示的问题及答案；

     7-为表单添加提交和重置按钮；

     8-保存网页为questionaire.htm。

提示：本实验没有标准答案，但是在将WORD文档中的调查问题及答案移植到网页中时，要尽可能多地使用到讲过的表单元素（如文本框、单选按钮、复选按钮、下拉菜单/列表、框架等）。另外，网页上调查问卷的答案的表现形式与并不一定要与WORD中的一致，而是应该选择使用更符合需要的表单元素，例如对于答案选项比较多的问题来说，应该优先选用下拉菜单/列表，单选使用下拉菜单，多选使用列表。

 

 

本人为菜鸟，刚入jsp，实验也是勉强能合格，基本功能虽能实现，但还是有些问题存在，但以我目前的水平解决不了，所以大家看到有缺陷的地方欢迎指教！

cjf1.html. （登录界面）

  1. <html>
  2.  
  3. <head>
  4. 	<title>
  5. 		用户注册
  6. 	</title>
  7. 	<style>
  8. 		section {/*文档中的区段*/
  9. 			width: 694px;/*长度高度由顶部图片决定*/
  10. 			height: 300px;
  11. 		}
  12.  
  13. 		#nav {
  14. 			line-height: 15px;
  15. 			height: 150px;
  16. 			width: 200px;
  17. 			float: left;
  18. 			/*左浮动*/
  19. 		}
  20.  
  21. 		#center {
  22. 			width: 400px;
  23. 			height: 150px;
  24. 			float: left;
  25. 		}
  26.  
  27. 		#right {
  28. 			float: right;
  29. 			/*右浮动*/
  30. 		}
  31.  
  32. 		#yuandian {
  33. 			/*在center部分的列表去掉小圆圈*/
  34. 			list-style: none;
  35. 		}
  36. 	</style>
  37. 	<script type="text/javascript">
  38. 		//验证邮箱
  39. 		function checkEmail(email, tip) {
  40. 			var checkEmail = document.getElementById(email);
  41. 			var checkTip = document.getElementById(tip);
  42. 			var Expression = /^(\w)+\@(\w)+\.(\w)+$/;
  43. 			var objExp = new RegExp(Expression);
  44. 			if (!objExp.test(checkEmail.value)) {
  45. 				checkTip.innerHTML = "<font color='red'>邮箱格式不正确</font>";//设置提示字体为红色
  46. 				document.getElementById("submit").disabled = true;//提交按钮被禁用
  47. 			} else {
  48. 				checkTip.innerHTML = "";
  49. 				document.getElementById("submit").disabled = false;
  50. 			}
  51. 			return objExp.test(checkEmail.value);
  52. 		}
  53. 		//检查用户名
  54. 		function checkUsername(name, tip) {
  55. 			var checkName = document.getElementById(name);
  56. 			var checkTip = document.getElementById(tip);
  57. 			var Expression = /^(\w){3,20}$/;
  58. 			var objExp = new RegExp(Expression);
  59. 			if (!objExp.test(checkName.value)) {
  60. 				checkTip.innerHTML = "<font color='red'>用户格式不正确</font>";//设置提示字体为红色
  61. 				document.getElementById("submit").disabled = true;
  62. 			} else {
  63. 				checkTip.innerHTML = "";
  64. 				document.getElementById("submit").disabled = false;
  65. 			}
  66. 			return objExp.test(checkName.value);
  67. 		}
  68. 		//检查密码
  69. 		function checkPwd(pwd, tip) {
  70. 			var checkPwd = document.getElementById(pwd);
  71. 			var checkTip = document.getElementById(tip);
  72. 			//至少包含一个字母
  73. 			var Expression = /^(?=.*[A-Za-z])[A-Za-z\d]{6,20}$/;
  74. 			var objExp = new RegExp(Expression);
  75. 			if (checkPwd.value.length < 6 || checkPwd.value.length > 20) {
  76. 				checkTip.innerHTML = "<font color='red'>长度请控制在6-20</font>";
  77. 			}
  78. 			else if (!objExp.test(checkPwd.value)) {
  79. 				checkTip.innerHTML = "<font color='red'>至少包括一个字母</font>";
  80. 			} else {
  81. 				checkTip.innerHTML = "";
  82. 				document.getElementById("submit").disabled = false;
  83. 			}
  84. 			return objExp.test(checkPwd.value);
  85. 		}
  86. 		//确认密码
  87. 		function checkRePwd(repwd, tip, pwd) {
  88. 			var checkRePwd = document.getElementById(repwd);
  89. 			var checkTip = document.getElementById(tip);
  90. 			var checkPwd = document.getElementById(pwd);
  91. 			if (checkRePwd.value != checkPwd.value) {
  92. 				checkTip.innerHTML = "<font color='red'>密码不匹配</font>";
  93. 				document.getElementById("submit").disabled = true;
  94. 			} else {
  95. 				checkTip.innerText = "";
  96. 				document.getElementById("submit").disabled = false;
  97. 			}
  98. 		}
  99. 	</script>
  100. </head>
  101.  
  102. <body>
  103. 	<form name="form1" method="POST" action="question.html" onsubmit="return validate_form(this)">
  104.  
  105. 		<section>
  106. 			<div id="header">
  107. 				<!--用div作布局工具，头部-->
  108. 				<img src="/Library/jsptest/images/01.gif" />
  109. 			</div>
  110. 			<div id="nav">
  111. 				<img src="/Library/jsptest/images/02.gif" />
  112. 				<img src="/Library/jsptest/images/reg.gif" />
  113. 				<b>注册帮助</b>
  114. 				<ul>
  115. 					<li> 会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。<br>
  116. 						<br>
  117. 					</li>
  118. 					<li>密码：请设定在6-20位之间。<br>
  119. 						<br>
  120. 					</li>
  121. 					<li>确认密码：确认密码必须与密码一致。<br>
  122. 						<br>
  123. 					</li>
  124. 					<li>Email：请填写有效的Email地址，以便于与您联系。</li>
  125. 				</ul>
  126. 			</div>
  127. 			<div style="width:2px;height: 300px;border-left: 1px solid #ccc;float:left;margin-left: 15px;"></div><!--画竖线-->
  128. 			<div id="center">
  129. 				<!--<img src="/Library/jsptest/images/03.gif" />-->
  130.  
  131.  
  132.  
  133. 				<ul id="yuandian">
  134. 					<br>
  135. 					<br>
  136. 					<li>
  137. 						用&nbsp;&nbsp;户&nbsp;&nbsp;名:<input id="username" placeholder="长度控制在3-20个字符之间" name="username"
  138. 							type="test" oninput="checkUsername('username','usertip')" required>
  139. 						<span id="usertip"></span>
  140.  
  141. 					</li>
  142. 					<br>
  143. 					<li>
  144. 						密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<input placeholder="请设定在6-20位之间" name="pwd"
  145. 							id="pwd" type="password" oninput="checkPwd('pwd','pwdtip')" required>
  146. 						<span id="pwdtip"></span>
  147. 					</li>
  148. 					<br>
  149. 					<li>
  150. 						确认密码:<input id="repwd" name="repwd" type="password"
  151. 							oninput="checkRePwd('repwd','repwdtip','pwd')" required>
  152. 						<span id="repwdtip"></span>
  153. 					</li>
  154. 					<br>
  155. 					<li>
  156. 						性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:
  157. 						<input type="radio" name="sex" value="男">Male
  158. 						<input type="radio" name="sex" value="女">Female
  159. 					</li>
  160. 					<br>
  161. 					<li>
  162. 						&nbsp;&nbsp;&nbsp;E-mail&nbsp;&nbsp;:<input type="test" name="email" id="email"
  163. 							oninput="checkEmail('email','emailtip')" required>
  164. 						<span id="emailtip"></span>
  165. 					</li>
  166. 					<br>
  167. 					<li>
  168. 						<input id="submit" type=submit value="提交" onclick="myfuction()">
  169. 						<input type="reset" name="reset" id="reset" value="重置">
  170. 					</li>
  171. 				</ul>
  172. 	</form>
  173. 	</div>
  174. 	<div id="right">
  175. 		<img src="/Library/jsptest/images/04.gif" />
  176. 	</div>
  177. 	</section>
  178.  
  179. 	<body>
  180.  
  181. </html>

question.html（调查问卷）

  1. <html>
  2.  
  3. <head>
  4.     <title>
  5.         企业电子商务调查问卷
  6.     </title>
  7. </head>
  8. <script>
  9.     var limit = 3, num = 0;
  10.     function check(obj) {
  11.  
  12.         obj.checked ? num++ : num--;
  13.         if (num > limit) {
  14.             obj.checked = false;
  15.             alert("最多选择3项");
  16.             num--;
  17.         }
  18.     };
  19.     function test() {
  20.         var s1 = document.getElementById("qiyemingchen");
  21.         location.href = "success.html?" + "qiyemingchen=" + encodeURI(s1.value);
  22.         var s2 = document.getElementById("zhucedi");
  23.         location.href = "success.html?" + "zhucedi=" + encodeURI(s2.value);
  24.     }
  25. </script>
  26.  
  27. <body bgcolor="AliceBlue">
  28.  
  29.  
  30.  
  31.     <!--设置背景颜色-->
  32.     <form action="success.html" method="POST">
  33.         <h1>企业电子商务调查问卷</h1>
  34.         <!--设置标题-->
  35.         <p>
  36.             尊敬的先生/女士：
  37.         </p>
  38.         <p style="text-indent:2em;">
  39.             <!--段首空格两格-->
  40.             您好！为了了解目前企业开展电子商务的状况和问题，我们课题组希望您能协助填写这份调查表。在此，我们郑重承诺，调查结果仅供研究使用。如果您有兴趣和需要，我们可以将最终的统计和分析结果通过电子邮件的方式反馈给您。
  41.         </p>
  42.         <p style="text-indent:2em;">
  43.             本次调查对于电子商务的界定是：通过计算机网络完成的购买和销售货物以及服务的行为，这些货物或服务的订单是通过相关网络下达的，但是支付和物流可以是网下进行的。通过传真、电话和电子邮件达成的交易不算在内。
  44.         </p>
  45.         <p style="text-indent:2em;">
  46.             非常感谢您的大力支持！
  47.         </p>
  48.         <p style="text-align: right">
  49.             <!--向右对齐-->
  50.             广东省电子商务发展规划前期研究课题组
  51.         </p>
  52.         <hr />
  53.         <div class="content">
  54.             <div class="vote">
  55.                 <div class="votechoice">
  56.                     <h2>企业基本情况</h2>
  57.                     <form>
  58.                         1.企业名称：<input type="text" name="qiyemingchen" id="qiyemingchen" style="border: none" required>
  59.                         注册地:<input type="text" name="zhucedi" id="zhucedi" style="border: none" required>
  60.                         <br>
  61.                         2.您在所在企业的职务（职位）：<input type="text" name="zhiwei" style="border: none" required><br>
  62.                         3.企业成立时间:<input type="text" name="shijian" style="border: none" required><br>
  63.                         4.企业所在行业:<input type="text" name="hangye" style="border: none" required><br>
  64.                     </form>
  65.                     <br>
  66.                     <ul class="vote1" required>
  67.                         <p>1.您所在企业的所有制形式为：（单选）</p>
  68.                         <li>
  69.                             <input type="radio" name="xingshi" value="国有" />
  70.                             <!--radio为单选框-->
  71.                             <span class="votechoicename">国有</span></li>
  72.                         <li>
  73.                             <input type="radio" name="xingshi" value="集体" />
  74.                             <span class="votechoicename">集体</span></li>
  75.                         <li>
  76.                             <input type="radio" name="xingshi" value="民企" />
  77.                             <span class="votechoicename">民企</span></li>
  78.                         <li>
  79.                             <input type="radio" name="xingshi" value="外资" />
  80.                             <span class="votechoicename">外资</span></li>
  81.                         <li>
  82.                             <input type="radio" name="xingshi" value="合资" />
  83.                             <span class="votechoicename">合资</span></li>
  84.                         <li>
  85.                             <span class="votechoicename">其他</span>
  86.                             <input type="test" value="" /></li>
  87.                         </li>
  88.                     </ul>
  89.                 </div>
  90.                 <div class="votechoice">
  91.                     <ul class="vote2">
  92.                         <p>2.您所在企业是否是上市公司：（单选）</p>
  93.                         <li>
  94.                             <input type="radio" name="shangshi" value="是">
  95.                             <span class="votechoicename">是</span></li>
  96.                         <li>
  97.                             <input type="radio" name="shangshi" value="不是" />
  98.                             <span class="votechoicename">不是</span></li>
  99.                         </li>
  100.                     </ul>
  101.                 </div>
  102.                 <div class="votechoice">
  103.                     <ul class="vote3">
  104.                         <p>3.您认为贵企业所在行业是否非常有必要开展电子商务? （单选）</p>
  105.                         <li>
  106.                             <input type="radio" name="taidu" value="非常有必要" />
  107.                             <span class="votechoicename">非常有必要</span></li>
  108.                         <li>
  109.                             <input type="radio" name="taidu" value="不知道" />
  110.                             <span class="votechoicename">不知道</span></li>
  111.                         <li>
  112.                             <input type="radio" name="taidu" value="没有必要" />
  113.                             <span class="votechoicename">没有必要</span></li>
  114.                         </li>
  115.                     </ul>
  116.                 </div>
  117.                 <div class="votechoice">
  118.                     <ul class="vote4">
  119.                         <p>4.您所在的企业现在是否开展了电子商务？(多选) </p>
  120.                         <li>
  121.                             <input type="checkbox" name="liucheng" value="已经开展电子商务" />
  122.                             <!--checkbox为复选框-->
  123.                             <span class="votechoicename">已经开展电子商务</span></li>
  124.                         <li>
  125.                             <input type="checkbox" name="liucheng" value="计划开展电子商务" />
  126.                             <span class="votechoicename">计划开展电子商务</span></li>
  127.                         <li>
  128.                             <input type="checkbox" name="liucheng" value="没有开展电子商务" />
  129.                             <span class="votechoicename">没有开展电子商务</span></li>
  130.                         </li>
  131.                     </ul>
  132.                 </div>
  133.                 <div class="votechoice">
  134.                     <ul class="vote5">
  135.                         <p>5.企业对市面上“电子商务师”之类的资格认证的看法：（最多只能选3个）</p>
  136.                         <li>
  137.                             <input type="checkbox" name="zige" value="含金量很高，能够反映出专业的能力" onclick="check(this)" />
  138.                             <span class="votechoicename">含金量很高，能够反映出专业的能力</span></li>
  139.                         <li>
  140.                             <input type="checkbox" name="zige" value="能够帮助我们培养和选择相关层次的人才" onclick="check(this)" />
  141.                             <span class="votechoicename">能够帮助我们培养和选择相关层次的人才</span></li>
  142.                         <li>
  143.                             <input type="checkbox" name="zige" value="没有针对性，难以确定能够胜任特定的工作" onclick="check(this)" />
  144.                             <span class="votechoicename">没有针对性，难以确定能够胜任特定的工作</span></li>
  145.                         <li>
  146.                             <input type="checkbox" name="zige" value="名不副实，没有反映出相应的专业能力" onclick="check(this)" />
  147.                             <span class="votechoicename">名不副实，没有反映出相应的专业能力</span></li>
  148.                         </li>
  149.                     </ul>
  150.                 </div>
  151.                 <div class="votechoice">
  152.                     <ul class="vote6">
  153.                         <p>6.企业对高校电子商务专业毕业生的基本看法：</p>
  154.                         <select name="kanfa" size=1>
  155.                             <!--select为下拉列表 size=2为下滚列表-->
  156.                             <option value="能够胜任较高级的工作，表现出专业的水平">能够胜任较高级的工作，表现出专业的水平</option>
  157.                             <option value="仅有书本知识，不能解决实际问题">仅有书本知识，不能解决实际问题</option>
  158.                             <option value="知识结构不合理，没有反映出业界的发展现实">知识结构不合理，没有反映出业界的发展现实</option>
  159.                             <option value="高职高专的毕业生工作能力比本科的毕业生实际能力更强">高职高专的毕业生工作能力比本科的毕业生实际能力更强</option>
  160.                             <option value="职业定位不清晰，能力知识宽而不精">职业定位不清晰，能力知识宽而不精</option>
  161.                         </select>
  162.                         <p>7.请列出贵企业所在行业的主要企业情况</p>
  163.                         <table border="1" required>
  164.                             <tr>
  165.                                 <td>企业名称</td>
  166.                                 <td>该企业的竞争优势</td>
  167.                                 <td>是否已开展电子商务</td>
  168.                             </tr>
  169.                             <tr>
  170.                                 <td><input type="text"></td>
  171.                                 <td><input type="text"></td>
  172.                                 <td><input type="radio" name="a">是
  173.                                     <input type="radio" name="a">否
  174.                                 </td>
  175.                             </tr>
  176.                             <tr>
  177.                                 <td><input type="text"></td>
  178.                                 <td><input type="text"></td>
  179.                                 <td><input type="radio" name="b">是
  180.                                     <input type="radio" name="b">否
  181.                                 </td>
  182.                             </tr>
  183.                             <tr>
  184.                                 <td><input type="text"></td>
  185.                                 <td><input type="text"></td>
  186.                                 <td><input type="radio" name="c">是
  187.                                     <input type="radio" name="c">否
  188.                                 </td>
  189.                             </tr>
  190.                         </table>
  191.                         <p> 请提宝贵意见：</p>
  192.                         <textarea name="suggest" cols="50" rows="3"></textarea>
  193.                         <!--textarea为多行输入文本框-->
  194.                     </ul>
  195.                     <li>
  196.                         <input type="submit" value="提交" onclick="test()"/>
  197.                     </li>
  198.                 </div>
  199.             </div>
  200.         </div>
  201.     </form>
  202. </body>
  203.  
  204. </html>

 

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/996659
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号