实验一简单静态网页设计

一、实验目的

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="data:images/01.gif" style="height: 180px;"><h1 style="margin: -5px;"></h1><div class="center"><img src="data:images/02.gif" class="left"><img src="data:images/04.gif" class="right"><div id="left"><img src="data: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 οnsubmit="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="data: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" οnclick="checkCount(this);">产品开发</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">生产技术</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">技术引进</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">市场行情</td></tr><tr><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">竞争对手</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">政策法规</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">薪酬水平</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">人才信息</td></tr><tr><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">财务状况</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">投资融资</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">市场预测</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">员工关系</td></tr><tr><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">客户信息</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">供应商信息</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">产品价格</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">质量管理</td></tr><tr><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">社交活动</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">合作伙伴信息</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">企业绩效</td><td><input type="checkbox" name="dxcbox" οnclick="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>

html+jsp 简单静态网页设计相关推荐

TML5期末大作业：动漫网站设计——神偷奶爸(10页) HT简单个人网页设计作业静态动漫主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码
HTML5期末大作业:动漫网站设计--神偷奶爸(10页) HT简单个人网页设计作业静态动漫主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码常见网页设计作业题材有个人. 美食. 公司 ...
HTML5+CSS期末大作业：篮球明星个人网站设计——篮球明星介绍(6页) 简单的学生DW网页设计作业成品 web课程设计网页规划与设计简单个人网页设计作业静态HTML旅行主题网页作业 DW
HTML5+CSS期末大作业:篮球明星个人网站设计--篮球明星介绍(6页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码常见网页设计作业题材有 ...
HTML5期末大作业：商城网站设计——仿团购商城(1页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页Dreamwe
HTML5期末大作业:商城网站设计--仿团购商城(1页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页Dreamwe ...
HTML5期末大作业：花甲美食网站设计——精美花甲美食网页(8页) 海鲜网页制作作业生鲜水果蔬菜网页设计模板简单学生网页设计代做静态HTML CSS网站制作成品
HTML5期末大作业:花甲美食网站设计--精美花甲美食网页(8页) 海鲜网页制作作业生鲜水果蔬菜网页设计模板简单学生网页设计代做静态HTML CSS网站制作成品常见网页设计作业题材有个人. ...
网页设计作业花甲美食网站设计——精美花甲美食网页(8页) 海鲜网页制作作业生鲜水果蔬菜网页设计模板简单学生网页设计代做静态HTML CSS网站制作成品
HTML5期末大作业:花甲美食网站设计--精美花甲美食网页(8页) 海鲜网页制作作业生鲜水果蔬菜网页设计模板简单学生网页设计代做静态HTML CSS网站制作成品常见网页设计文章目录 HTML ...
学生汽车网页设计作品静态HTML网页模板源码大学生汽车网站制作简单汽车网页设计成品
学生奥迪汽车静态网页设计作品作品介绍作品截图网页代码作品地址作品介绍本网页设计期末大作业成品使用DIV CSS布局制作,题材为奥迪概念车.顶部LOGO区及首页的汽车区使用 CSS3动画属性 ...
div+css静态网页设计 web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. ...
静态HTML网页设计作品——斗破苍穹动漫(6页) HTML+CSS+JavaScript 学生动漫网页设计模板下载斗破大学生HTML网页制作作品简单漫画网页设计成品 dreamweav
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页) HTML+CSS+JavaScript 学生动漫网页设计模板下载斗破大学生HTML网页制作作品简单漫画网页设计成品 dreamweave ...
div+css静态网页设计游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...

html+jsp 简单静态网页设计

实验一简单静态网页设计

一、实验目的

二、实验内容

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

四、实验学时：4学时

六、实验代码

html+jsp 简单静态网页设计相关推荐

最新文章

热门文章

html+jsp 简单静态网页设计

实验一 简单静态网页设计

一、实验目的

二、实验内容

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

四、实验学时：4学时

六、实验代码

html+jsp 简单静态网页设计相关推荐

最新文章

热门文章

实验一简单静态网页设计