网页设计(CSS&JS)
实验一 简单静态网页设计
一、 实验目的:
- 复习使用记事本编辑网页的方法。
- 熟悉不同表单控件类型的应用。
- 练习使用记事本在网页中添加表单与表单元素。
二、 实验内容:
根据提供的素材设计在线调查问卷。
三、 实验要求:
- 熟练掌握使用记事本进行简单网页编辑的方法。
- 能够区分不同表单元素的应用场景。
- 掌握表单与表单元素的元素名和属性对。
四、 实验学时: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
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gb2136"> 5 <title>博客</title> 6 <style type="text/css"> 7 body{ 8 font-family:黑体,隶书; 9 font-size:18px; 10 margin:auto; 11 } 12 .top{ 13 margin:auto; 14 width:100%; 15 float:left; 16 } 17 .left{ 18 width:5%; 19 float:left; 20 height:auto; 21 } 22 .right{ 23 width:6.3%; 24 height:auto; 25 float:right; 26 } 27 .left1{ 28 width:24%; 29 float:left; /*文本的浮动*/ 30 padding:0 10px; /*设置边线据内容的距离*/ 31 height:auto; 32 } 33 .line{ 34 border:1px green; 35 cellspacing:0; 36 cellpadding:0; 37 height:400px; 38 border-right-style:solid; 39 border-left-style:none; 40 border-bottom-style:none; 41 border-top-style:none; 42 } 43 div{ 44 box-sizing:border-box; 45 width:600px; 46 line-height:1.5; 47 } 48 49 </style> 50 <script language="javascript"> 51 <!-- 52 function check(){ 53 var p = document.form1.dengru1.value; 54 var p1 = document.form1.dengru2.value; 55 if(p1!==p){ 56 alert("密码不一致"); 57 return false; 58 }else{ 59 60 } 61 62 } 63 //--> 64 65 </script> 66 </head> 67 <body> 68 <img src="image/01.gif" class="top"/> 69 <img src="image/02.gif" class="left"/> 70 <div class="left1"> 71 <img src="image/reg.gif"/> 72 <b>注册帮助</b><br/> 73 <ul> 74 <li>会员名:为会员登录网站的通行证,长度控制在3-20个字符之内。</li> 75 <br/> 76 <li>密码:请设定在6-20位之间。</li> 77 <br/> 78 <li>确认密码:确认密码必须与密码一致。</li> 79 <br/> 80 <li>email:请填写有效的email地址,以便于与您联系。</li> 81 </ul> 82 </div> 83 <div class="left1" style="width:100px"><table class="line"></table></div> 84 <form name="form1" action="调查问卷.html" onsubmit="return check()"> 85 <div class="left1"> 86 <div style="height:80px"></div> 87 <table border=0> 88 <tr></tr> 89 <tr> 90 <td>用 户 名:</td> 91 <td><input type="text" name="dengru" placeholder="长度控制在3-20个字符之内" size=31 pattern="^.{3,20}$" required="required"></td> 92 </tr> 93 <tr></tr> 94 <tr> 95 <td>密 码:</td> 96 <td><input type="password" name="dengru1" placeholder="请设定在6-20位之间" size=32 pattern="^.{6,20}$" required="required" ></td> 97 </tr> 98 <tr></tr> 99 <tr> 100 <td>确认密码:</td> 101 <td><input type="password" name="dengru2" size=32 pattern="^.{6,20}$" required="required"></td> 102 </tr> 103 <tr></tr> 104 <tr> 105 <td>性 别:</td> 106 <td><input type="radio" name="de2" value="male">男 <input type="radio" name="de2" value="female">女</td> 107 </tr> 108 <tr></tr> 109 <tr> 110 <td>e-mail:</td> 111 <td><input type="email" name="dengru3"size=40></td> 112 </tr> 113 </table> 114 <br/> 115 <input type="submit" name="submit" value="提交"> 116 <input type="reset" name="reset" value="重置"> 117 </div> 118 </form> 119 <img src="image/04.gif" class="right"/> 120 <img src="image/03.jpg" class="top"/> 121 </body> 122 </html>
调查问卷.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gb2136"> 5 <style type="text/css"> 6 body{ 7 background-color:#dedede; 8 width:640px; 9 margin:auto; /*设置页面边距*/ 10 } 11 .headline{ 12 font-size:22px; 13 font-family:宋体; 14 text-align:center; /*设置居中*/ 15 font-weight:bold; /*设置为粗体*/ 16 } 17 .top{ 18 font-size:10。5px; /*字体大小*/ 19 font-family:楷体; 20 line-height:2; /*设置行高为1.5*/ 21 } 22 .right{ 23 text-align:right; 24 line-height:2; 25 } 26 .left{ 27 text-align:left; 28 } 29 .down{ 30 font-size:14px; 31 font-family:宋体; 32 line-height:2; 33 text-align:left; 34 } 35 .headline1{ 36 font-size:16px; 37 font-family:黑体; 38 text-align:left; /*设置左对齐*/ 39 font-weight:bold; /*粗体*/ 40 } 41 .line{ 42 border:1px solid #dedede; 43 border-bottom:1px solid #000000; 44 background-color:#dedede; 45 46 47 } 48 div{ 49 box-sizing:border-box; /*设置显示盒子模式*/ 50 line-height:1.5; 51 border-size:100; 52 } 53 </style> 54 <script language="javascript"> 55 <!-- 56 function checkcount(){ 57 var q9box = document.getelementsbyname("q9"); 58 var count = 0; 59 for(i = 0; i< q9box.length;i++){ 60 if(q9box[i].checked){ 61 count += 1; 62 } 63 } 64 if(count > 4){ 65 alert("最多只能选4个"); 66 67 return false; 68 } 69 } 70 //--> 71 </script> 72 <title>调查问卷</title> 73 </head> 74 <body> 75 <div class="top"> 76 <div class="headline"> 77 <h2>企业电商务调查问卷</h2> 78 </div> 79 <div>尊敬的先生/女士:<br/></div> 80 <div style="text-indent:3em">您好!为了了解目前企业开展电子商务的状况和问题,我们课题组希望您能协助填写<br/>这份调查表。在此,我们郑重承诺,调查结果仅供研究使用。如果您有兴趣和需要,我们可<br/>以将最终的统计和分析结果通过电子邮件的方式反馈给您。<br/></div> 81 <div style="text-indent:3em">本次调查对于电子商务的界定是:通过计算机网络完成的购买和销售货物以及服务的<br/>行为,这些货物或服务的订单是通过相关网络下达的,但是支付和物流可以是网下进行的。<br/>通过传真、电话和电子邮件达成的交易不算在内。<br/></div> 82 <div style="text-indent:3em">非常感谢您的大力支持!<br/><br/></div> 83 <div class="right" >广东省电子商务发展规划前期研究课题组</div> 84 <div style="border:1px solid #000000"></div> 85 </div> 86 87 <form name="form2" action="反馈.html" onsubmit="return check()" > 88 <div class="down"> 89 <div class="headline1"> 90 <h3>一、企业基本简况</h3> 91 </div> 92 <table style="width:500px;height:150px" border=0> 93 <tr> 94 <td>1.企业名称: <input type="text" name="u" class="line" size=20> 注册地:</td> 95 <td><input type="text" name="u" class="line" size=15></td> 96 </tr> 97 <tr> 98 <td>2.您在所在企业的职务(职位): <input type="text" name="u" class="line" size=15></td> 99 </tr> 100 <tr> 101 <td>3. 企业成立时间: <input type="text" name="u" class="line" size=20></td> 102 </tr> 103 <tr> 104 <td>4. 企业所在行业: <input type="text" name="u" class="line" size=20></td> 105 </tr> 106 </table> 107 <u><b style="font-size:17px">以下选择题,若无特别声明,皆为多项选择题</b></u><br/> 108 <p>5.您所在企业的所有制形式为:(单选)<br/> 109 <input type="radio" name="a">国有 110 <input type="radio" name="a">集体 111 <input type="radio" name="a">民营 112 <input type="radio" name="a">外资 113 <input type="radio" name="a">合资 114 <input type="radio" name="a">股份制 115 <input type="radio" name="a">其他<input type="text" name="u" class="line" size=10> 116 </p>6.2005年,您所在企业的销售收入为(单位:人民币): <input type="text" name="u" class="line" size=10>万元,比上年增<br/> 117 长 <input type="text" name="u" class="line" size=10> %。 118 <p>7. 您所在企业应用到哪些物流服务?<br/> 119 <input type="checkbox" name="b">网络型邮政物流企业(具体为: 120 <input type="radio" name="b1">广东邮政 121 <input type="radio" name="b1">ems 122 <input type="radio" name="b1">ups 123 <input type="radio" name="b1">其他<input type="text" name="u" class="line" size=10>)<br/> 124 <input type="checkbox" name="c">运输仓储公司( 125 <input type="radio" name="c1">本市企业 126 <input type="radio" name="c1">异地企业)<br/> 127 <input type="checkbox" name="d">第三方物流企业( 128 <input type="radio" name="d1">本市企业 129 <input type="radio" name="d1">异地企业)<br/> 130 <input type="checkbox" name="e">企业自行解决<br/> 131 <input type="checkbox" name="f">其他<input type="text" name="u" class="line" size=10> 132 </p> 133 8.请列出贵企业所在行业的主要企业情况<br/> 134 <table border=1 cellspacing="0" cellpadding="0" style="width:600px;height:200px;text-align:center"> 135 <tr> 136 <td>企业名称</td> 137 <td>该企业的竞争优势</td> 138 <td>是否已开展电子商务</td> 139 </tr> 140 <tr> 141 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td> 142 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td> 143 <td><input type="radio" name="g">是 <input type="radio" name="g">否</td> 144 </tr> 145 <tr> 146 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td> 147 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td> 148 <td><input type="radio" name="g1">是 <input type="radio" name="g1">否</td> 149 </tr> 150 <tr> 151 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td> 152 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td> 153 <td><input type="radio" name="g2">是 <input type="radio" name="g2">否</td> 154 </tr> 155 </table> 156 <div class="headline1"> 157 <h3>二、企业信息化总体状况</h3> 158 </div> 159 <p>9.您所在企业网站的更新周期是多长时间?(单选) 160 <select> 161 <option value ="0">单选,请下拉</option> 162 <option value="1">每天</option> 163 <option value="2">每周</option> 164 <option value="3">每月</option> 165 <option value="4">每季度</option> 166 <option value="5">半年</option> 167 <option value="6">半年以上</option> 168 </select> 169 </p> 170 10.您所在企业最需要的信息包括(选择其中最重要的4项信息):<br/> 171 <table> 172 <tr> 173 <td><input type="checkbox" name="q9" onclick="checkcount()">产品开发 </td> 174 <td><input type="checkbox" name="q9" onclick="checkcount()">生产技术 </td> 175 <td><input type="checkbox" name="q9" onclick="checkcount()">技术引进 </td> 176 <td><input type="checkbox" name="q9" onclick="checkcount()">市场行情</td> 177 </tr> 178 <tr> 179 <td><input type="checkbox" name="q9" onclick="checkcount()">竞争对手 </td> 180 <td><input type="checkbox" name="q9" onclick="checkcount()">政策法规 </td> 181 <td><input type="checkbox" name="q9" onclick="checkcount()">薪酬水平 </td> 182 <td><input type="checkbox" name="q9" onclick="checkcount()">人才信息 </td> 183 </tr> 184 <tr> 185 <td><input type="checkbox" name="q9" onclick="checkcount()">社交活动 </td> 186 <td><input type="checkbox" name="q9" onclick="checkcount()">合作伙伴信息 </td> 187 <td><input type="checkbox" name="q9" onclick="checkcount()">企业绩效</td> 188 <td><input type="checkbox" name="q9" onclick="checkcount()">行业动态 </td> 189 </tr> 190 <tr> 191 <td><input type="checkbox" name="q9" onclick="checkcount()">客户信息</td> 192 <td><input type="checkbox" name="q9" onclick="checkcount()">供应商信息 </td> 193 <td><input type="checkbox" name="q9" onclick="checkcount()">产品价格</td> 194 <td><input type="checkbox" name="q9" onclick="checkcount()">质量管理 </td> 195 </tr> 196 <tr> 197 <td><input type="checkbox" name="q9" onclick="checkcount()">财务状况 </td> 198 <td><input type="checkbox" name="q9" onclick="checkcount()">投资融资 </td> 199 <td><input type="checkbox" name="q9" onclick="checkcount()">市场预测</td> 200 <td><input type="checkbox" name="q9" onclick="checkcount()">员工关系 </td> 201 </tr> 202 <tr> 203 <td><input type="checkbox" name="q9" onclick="checkcount()">其他 <input type="text" name="u" class="line" size=10> </td> 204 </tr> 205 </table> 206 <br/> 207 <p>11.您所在企业是否建立了以下电子商务系统,各个系统的作用如何?<br/> 208 <table border=0 style="width:500px;height:150px;text-align:center"> 209 <tr><th></th><th>非常重要</th><th>重要</th><th>一般</th><th>不重要</th><th>不存在</th></tr> 210 <tr> 211 <td style="text-align:left"><input type="checkbox" name="w10">没有重视电子商务规划</td> 212 <td><input type="radio" name="l">5</td> 213 <td><input type="radio" name="l">4</td> 214 <td><input type="radio" name="l">3</td> 215 <td><input type="radio" name="l">2</td> 216 <td><input type="radio" name="l">1</td> 217 </tr> 218 <tr> 219 <td style="text-align:left"><input type="checkbox" name="w10">企业之间存在利益冲突</td> 220 <td><input type="radio" name="l1">5</td> 221 <td><input type="radio" name="l1">4</td> 222 <td><input type="radio" name="l1">3</td> 223 <td><input type="radio" name="l1">2</td> 224 <td><input type="radio" name="l1">1</td> 225 </tr> 226 <tr> 227 <td style="text-align:left"><input type="checkbox" name="w10">管理理念与技术冲突</td> 228 <td><input type="radio" name="l2">5</td> 229 <td><input type="radio" name="l2">4</td> 230 <td><input type="radio" name="l2">3</td> 231 <td><input type="radio" name="l2">2</td> 232 <td><input type="radio" name="l2">1</td> 233 </tr> 234 <tr> 235 <td style="text-align:left"><input type="checkbox" name="w10">外部环境与技术冲突</td> 236 <td><input type="radio" name="l3">5</td> 237 <td><input type="radio" name="l3">4</td> 238 <td><input type="radio" name="l3">3</td> 239 <td><input type="radio" name="l3">2</td> 240 <td><input type="radio" name="l3">1</td> 241 </tr> 242 <tr> 243 <td style="text-align:left"><input type="checkbox" name="w10">企业文化保守</td> 244 <td><input type="radio" name="l4">5</td> 245 <td><input type="radio" name="l4">4</td> 246 <td><input type="radio" name="l4">3</td> 247 <td><input type="radio" name="l4">2</td> 248 <td><input type="radio" name="l4">1</td> 249 </tr> 250 <tr> 251 <td style="text-align:left"><input type="checkbox" name="w10">其他<input type="text" name="u" class="line" size=20></td> 252 </tr> 253 </table> 254 </p> 255 <p>12.您认为企业要进一步发展电子商务,需要所在地方*哪些支持?<br/> 256 <input type="text" name="u" class="line" size=70><br/> 257 <input type="text" name="u" class="line" size=70><br/> 258 <input type="text" name="u" class="line" size=70><br/> 259 </p> 260 <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/> 261 <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/> 262 <b>问卷填写日期:</b><input type="text" name="u" style="border:1px solid #dedede;background-color:#dedede" size=40><br/><br/> 263 <pre><input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"></pre> 264 </div> 265 </form> 266 267 </body> 268 </html>
反馈.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gb2136"> 5 <title>反馈</title> 6 <script language="javascript"> 7 alert("感谢您的参与!"); 8 </script> 9 </head> 10 <body> 11 </body> 12 </html>
上一篇: 科学计算库Numpy——数值计算
下一篇: 醉人的爸妈很能惹人笑呀!