实验一 简单静态网页设计
一、实验目的
1. 复习使用记事本编辑网页的方法。
2. 熟悉不同表单控件类型的应用。
3. 练习使用记事本在网页中添加表单与表单元素。
二、实验内容
根据提供的素材设计在线调查问卷。
三、实验要求
1. 熟练掌握使用记事本进行简单网页编辑的方法。
2. 能够区分不同表单元素的应用场景。
3. 掌握表单与表单元素的元素名和属性对。
四、实验学时:4学时
五、实验步骤
0. 实验准备:(1)在硬盘上为本实验建立文件夹(以下称为“实验文件夹”)。
1. 根据提供的素材设计在线调查问卷:
(1) 从开始菜单启动记事本;
(2) 在记事本中,录入一个最简合法HTML文档;
(3) 设置该HTML文档首页如图1。要求按照首页来设计页面index.html.使用的图片在image文件夹中。
(4) 在首页点击提交后转向企业电子商务调查问卷.
(5) 打开本实验提供的WORD文档questionnaire.doc,这个调查问卷比较长,浏览该调查问卷的内容。由于该调查问卷比较长,选取并标示该调查问卷中具有代表性的问题(更改一下文本背景),准备将它们在网页中进行实现,保存该WORD文档;
(6) 在记事本中添加表单;
(7) 在表单中插入表单元素,用于在网页中显示步骤
中标示的问题及答案;
(8) 为表单添加提交和重置按钮;
(9) 保存网页为questionaire.htm。
提示:本实验没有标准答案,但是在将WORD文档中的调查问题及答案移植到网页中时,要尽可能多地使用到讲过的表单元素(如文本框、单选按钮、复选按钮、下拉菜单/列表、框架等)。另外,网页上调查问卷的答案的表现形式与并不一定要与WORD中的一致,而是应该选择使用更符合需要的表单元素,例如对于答案选项比较多的问题来说,应该优先选用下拉菜单/列表,单选使用下拉菜单,多选使用列表。
六、实验代码
index:
<!Doctype html> <html> <head> <title>实验一 简单静态网页设计</title> <style type="text/css"> body{ margin:0 auto; background-color:#FFF; font-size:12px; } .top,.bottom,.center { height: auto; width: 100%; } .right{ width: 44px; height: 300px; float:right; } .left{ width: 35px; height: 300px; float:left; } #left { width: 30%; float: left; padding: 0 10px; height: auto; } #right { width: 50%; float: right; height: auto; padding-top: 30px; } #line{ height: 300px; border-color: green; border-left-style: solid; border-width: 2px; } </style> <body> <img class="top" src="images/01.gif" style="height: 180px;"> <h1 style="margin: -5px;"></h1> <div class="center"> <img src="images/02.gif" class="left"> <img src="images/04.gif" class="right"> <div id="left"> <img src="images/reg.gif"> <strong>注册帮助</strong> <ul> <li>会员名:为会员登录网站的通行证,长度控制在3-20个字符之内。</li> <br/> <li>密码:请设定在6-20位之间。</li> <br/> <li>确认密码:确认密码必须与密码一致。</li> <br/> <li>Email:请填写有效的Email地址,以便于与您联系。</li> </ul> </div> <div id="right"> <form action="questionaire.html" name=form1 onsubmit="return check()"> <table> <tr> <td>用户名:</td> <td> <input type="text" name="username" placeholder="长度控制在3-20个字符" > </td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="password" placeholder="请设定在6-20位之间" > </td> </tr> <tr> <td>确认密码:</td> <td> <input type="password" name="cpassword" > </td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td>E-mail:</td> <td> <input type="email" name="email"> </td> </tr> <tr> <td><input type="submit" name="submit" value="提交" > </td> <td><input type="reset" name="reset" value="重置" /> </td> </tr> </table> </form> </div> <table id="line"> <tr> <td valign="top"></td> </tr> </table> </div> <img class="bottom" src="images/03.jpg"> </body> </html> <script language="javaScript"> function check(){ if(document.form1.username.value.length<3||document.form1.username.value.length>20){ alert("请输入符合条件的用户名"); return false; } var pd= document.form1.password.value; if(document.form1.password.value.length<6||document.form1.password.value.length>20){ alert("请输入符合条件的密码"); return false; } var cpd= document.form1.cpassword.value; if(document.form1.cpassword.value.length<6||document.form1.cpassword.value.length>20){ alert("请再次输入密码!"); return false; } if(pd !== cpd){ alert("两次密码不相同"); return false; } if(document.form1.email.value.indexOf("@")=-1||document.form1.email.value.length=0){ alert("请输入正确格式的邮箱!"); return false; } return true; } </script>
调查问卷:
<html> <head> <title>问卷调查</title> <style type="text/css"> body { padding: 0px 10% 0px 10%; } #ft { text-align:center; font-size:29px;<!--2号中文字体 --> font-family:SimSun;<!--宋体--> } .fp { font-family:KaiTi;<!--楷体--> font-size:14px;<!--5号中文字体 --> } .st { font-size:21px;<!--3号中文字体 2--> font-family:SimHei;<!--黑体--> } .sp { font-size:16px;<!--5号中文字体 --> font-family:SimSun;<!--宋体--> } </style> </head> <body> <div> <p id="ft"><b>企业电子商务调查问卷</b></p> <div class="fp"> <p>尊敬的先生/女士:</p> <p style="text-indent:2em;">您好!为了了解目前企业开展电子商务的状况和问题,我们课题组希望您能协助填写这份调查表。在此,我们郑重承诺,调查结果仅供研究使用。如果您有兴趣和需要,我们可以将最终的统计和分析结果通过电子邮件的方式反馈给您。 </p> <p style="text-indent:2em;">本次调查对于电子商务的界定是:通过计算机网络完成的购买和销售货物以及服务的行为,这些货物或服务的订单是通过相关网络下达的,但是支付和物流可以是网下进行的。通过传真、电话和电子邮件达成的交易不算在内。 </p> <p style="text-indent:2em;">非常感谢您的大力支持!</p> <p style="text-align:right;">广东省电子商务发展规划前期研究课题组 </p> </div> <hr/> </div> <div> <b class="st">一、企业基本简况</b> <br/> <div class="sp"> <p> 1.企业名称: <input name="qyname" size=30 type="text"> 注册地: <input name="zcaddress" size=10 type="text"> <br/> <br/> 2.您所在的企业的职务(职业): <input name="zyname" size=20 type="text"> <br/> <br/> 3.企业成立时间: <input name="cltime" size=20 type="text"> <br/> <br/> 4企业所在行业: <input name="szhy" size=20 type="text"> <br/> <br/> <u style="font-size=20px"> <b> 以下选择题,若无特别声明,皆为多项选择题 </b> </u> <br/> <br/> <p> 5.您所在企业的所有制形式为:(单选)<br/> <input name="r1" type="radio"/>国有 <input name="r1" type="radio"/>集体 <input name="r1" type="radio"/>民营 <input name="r1" type="radio"/>外资 <input name="r1" type="radio"/>合资 <input name="r1" type="radio"/>股份制 <input name="r1" type="radio"/>其他 <input name="qt1" size=5 type="text" /> </p> <p> 6.您所在企业的类型为: (多选)<br/> <input name="r2" type="checkbox"/>流程型制造业 <input name="r2" type="checkbox"/>离散型制造业 <input name="r2" type="checkbox"/>混合型企业 <input name="r2" type="checkbox"/>旅游服务业 <input name="r2" type="checkbox"/>餐饮服务业 <input name="r2" type="checkbox"/>信息服务业 <input name="r2" type="checkbox"/>金融服务业 <input name="r2" type="checkbox"/>物流服务业 <input name="r2" type="checkbox"/>其他 <input name="qt2" size=10 type="text" /> </p> <p> 7.您所在企业是否是上市公司:(单选) <select> <option value="00">请选择</option> <option value="01">是</option> <option value="02">不是</option> </select> <br> </p> </p> <br/> </div> </div> <div> <b class="st">二、企业信息化总体状况</b> <p> 8.您所在企业最需要的信息包括(选择其中最重要的4项信息): </p> <table> <tr> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">产品开发</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">生产技术</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">技术引进</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">市场行情</td> </tr> <tr> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">竞争对手</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">政策法规</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">薪酬水平</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">人才信息</td> </tr> <tr> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">财务状况</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">投资融资</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">市场预测</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">员工关系</td> </tr> <tr> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">客户信息</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">供应商信息</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">产品价格</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">质量管理</td> </tr> <tr> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">社交活动</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">合作伙伴信息</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">企业绩效</td> <td><input type="checkbox" name="dxcbox" onclick="checkCount(this);">行业动态</td> </tr> <tr> <td><input type="checkbox" name="cbox" />其他 <input name="qt3" size="5" type="text" > </td> </tr> </table> <p> 9.您所在企业从何时开始采用ERP(或MIS)系统? <select id="sel"> </select> 年 </p> <p> 10.您所在企业网站的更新周期是多长时间?(单选) <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> <p> 11.您认为目前您所在企业存在的主要问题: </p> <table border="0"> <tr> <td> </td> <td>非常重要</td> <td>重要</td> <td>一般 </td> <td>不重要</td> <td>不存在</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="110"/>利润增长 </td> <td align="center" align="center"><input name="r4" type="radio"/>5</td> <td align="center" align="center"><input name="r4" type="radio"/>4</td> <td align="center" align="center"><input name="r4" type="radio"/>3</td> <td align="center" align="center"><input name="r4" type="radio"/>2</td> <td align="center" align="center"><input name="r4" type="radio"/>1</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="111"/>市场份额</td> <td align="center" align="center"><input name="c5" type="radio"/>5</td> <td align="center" align="center"><input name="c5" type="radio"/>4</td> <td align="center" align="center"><input name="c5" type="radio"/>3</td> <td align="center" align="center"><input name="c5" type="radio"/>2</td> <td align="center" align="center"><input name="c5" type="radio"/>1</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="112"/>战略管理</td> <td align="center" align="center"><input name="c6" type="radio"/>5</td> <td align="center" align="center"><input name="c6" type="radio"/>4</td> <td align="center" align="center"><input name="c6" type="radio"/>3</td> <td align="center" align="center"><input name="c6" type="radio"/>2</td> <td align="center" align="center"><input name="c6" type="radio"/>1</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="113"/>部门协调</td> <td align="center" align="center"><input name="c7" type="radio"/>5</td> <td align="center" align="center"><input name="c7" type="radio"/>4</td> <td align="center" align="center"><input name="c7" type="radio"/>3</td> <td align="center" align="center"><input name="c7" type="radio"/>2</td> <td align="center" align="center"><input name="c7" type="radio"/>1</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="114"/>员工流失</td> <td align="center" align="center"><input name="c8" type="radio"/>5</td> <td align="center" align="center"><input name="c8" type="radio"/>4</td> <td align="center" align="center"><input name="c8" type="radio"/>3</td> <td align="center" align="center"><input name="c8" type="radio"/>2</td> <td align="center" align="center"><input name="c8" type="radio"/>1</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="115"/>激励机制</td> <td align="center" align="center"><input name="c9" type="radio"/>5</td> <td align="center" align="center"><input name="c9" type="radio"/>4</td> <td align="center" align="center"><input name="c9" type="radio"/>3</td> <td align="center" align="center"><input name="c9" type="radio"/>2</td> <td align="center" align="center"><input name="c9" type="radio"/>1</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="116"/>人才培养和引进</td> <td align="center" align="center"><input name="c10" type="radio"/>5</td> <td align="center" align="center"><input name="c10" type="radio"/>4</td> <td align="center" align="center"><input name="c10" type="radio"/>3</td> <td align="center" align="center"><input name="c10" type="radio"/>2</td> <td align="center" align="center"><input name="c10" type="radio"/>1</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="117"/>领导班子</td> <td align="center" align="center"><input name="c11" type="radio"/>5</td> <td align="center" align="center"><input name="c11" type="radio"/>4</td> <td align="center" align="center"><input name="c11" type="radio"/>3</td> <td align="center" align="center"><input name="c11" type="radio"/>2</td> <td align="center" align="center"><input name="c11" type="radio"/>1</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="118"/>企业信息化建设</td> <td align="center" align="center"><input name="c12" type="radio"/>5</td> <td align="center" align="center"><input name="c12" type="radio"/>4</td> <td align="center" align="center"><input name="c12" type="radio"/>3</td> <td align="center" align="center"><input name="c12" type="radio"/>2</td> <td align="center" align="center"><input name="c12" type="radio"/>1</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="119"/>品牌经营</td> <td align="center" align="center"><input name="c13" type="radio"/>5</td> <td align="center" align="center"><input name="c13" type="radio"/>4</td> <td align="center" align="center"><input name="c13" type="radio"/>3</td> <td align="center" align="center"><input name="c13" type="radio"/>2</td> <td align="center" align="center"><input name="c13" type="radio"/>1</td> </tr> <tr> <td> <input name="r3" type="checkbox" value="120"/>其他<input name="qt4" size=5 type="text" /></td> </tr> </table> </div> </div> </body> </html> <script type="text/javascript"> onload = function () { var year=new Date().getFullYear(); //获取当前年份 var sel = document.getElementById ('sel');//获取select下拉列表 for ( var i = 1990; i <= year; i++)//循环添加2006到当前年份的每个年份依次添加到下拉列表 { var option = document.createElement ('option'); option.value = i; var txt = document.createTextNode (i); option.appendChild (txt); sel.appendChild (option); } /********************************************************/ } function checkCount(cbox) { var dx4 = document.getElementsByName("dxcbox"); var num = 0; for (i = 0; i < dx4.length; i++){ if (dx4[i].checked) num += 1; } if (num > 4) { alert("最多可以选择四个!"); //num-=1; cbox.checked = false; } } </script>