实验一简单静态网页设计

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

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

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

实验准备：

（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. （登录界面）

<html><head><title>用户注册</title><style>section {/*文档中的区段*/width: 694px;/*长度高度由顶部图片决定*/height: 300px;}#nav {line-height: 15px;height: 150px;width: 200px;float: left;/*左浮动*/}#center {width: 400px;height: 150px;float: left;}#right {float: right;/*右浮动*/}#yuandian {/*在center部分的列表去掉小圆圈*/list-style: none;}</style><script type="text/javascript">//验证邮箱function checkEmail(email, tip) {var checkEmail = document.getElementById(email);var checkTip = document.getElementById(tip);var Expression = /^(\w)+\@(\w)+\.(\w)+$/;var objExp = new RegExp(Expression);if (!objExp.test(checkEmail.value)) {checkTip.innerHTML = "<font color='red'>邮箱格式不正确</font>";//设置提示字体为红色document.getElementById("submit").disabled = true;//提交按钮被禁用} else {checkTip.innerHTML = "";document.getElementById("submit").disabled = false;}return objExp.test(checkEmail.value);}//检查用户名function checkUsername(name, tip) {var checkName = document.getElementById(name);var checkTip = document.getElementById(tip);var Expression = /^(\w){3,20}$/;var objExp = new RegExp(Expression);if (!objExp.test(checkName.value)) {checkTip.innerHTML = "<font color='red'>用户格式不正确</font>";//设置提示字体为红色document.getElementById("submit").disabled = true;} else {checkTip.innerHTML = "";document.getElementById("submit").disabled = false;}return objExp.test(checkName.value);}//检查密码function checkPwd(pwd, tip) {var checkPwd = document.getElementById(pwd);var checkTip = document.getElementById(tip);//至少包含一个字母var Expression = /^(?=.*[A-Za-z])[A-Za-z\d]{6,20}$/;var objExp = new RegExp(Expression);if (checkPwd.value.length < 6 || checkPwd.value.length > 20) {checkTip.innerHTML = "<font color='red'>长度请控制在6-20</font>";}else if (!objExp.test(checkPwd.value)) {checkTip.innerHTML = "<font color='red'>至少包括一个字母</font>";} else {checkTip.innerHTML = "";document.getElementById("submit").disabled = false;}return objExp.test(checkPwd.value);}//确认密码function checkRePwd(repwd, tip, pwd) {var checkRePwd = document.getElementById(repwd);var checkTip = document.getElementById(tip);var checkPwd = document.getElementById(pwd);if (checkRePwd.value != checkPwd.value) {checkTip.innerHTML = "<font color='red'>密码不匹配</font>";document.getElementById("submit").disabled = true;} else {checkTip.innerText = "";document.getElementById("submit").disabled = false;}}</script>
</head><body><form name="form1" method="POST" action="question.html" onsubmit="return validate_form(this)"><section><div id="header"><!--用div作布局工具，头部--><img src="/Library/jsptest/images/01.gif" /></div><div id="nav"><img src="/Library/jsptest/images/02.gif" /><img src="/Library/jsptest/images/reg.gif" /><b>注册帮助</b><ul><li> 会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。<br><br></li><li>密码：请设定在6-20位之间。<br><br></li><li>确认密码：确认密码必须与密码一致。<br><br></li><li>Email：请填写有效的Email地址，以便于与您联系。</li></ul></div><div style="width:2px;height: 300px;border-left: 1px solid #ccc;float:left;margin-left: 15px;"></div><!--画竖线--><div id="center"><!--<img src="/Library/jsptest/images/03.gif" />--><ul id="yuandian"><br><br><li>用&nbsp;&nbsp;户&nbsp;&nbsp;名:<input id="username" placeholder="长度控制在3-20个字符之间" name="username"type="test" oninput="checkUsername('username','usertip')" required><span id="usertip"></span></li><br><li>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<input placeholder="请设定在6-20位之间" name="pwd"id="pwd" type="password" oninput="checkPwd('pwd','pwdtip')" required><span id="pwdtip"></span></li><br><li>确认密码:<input id="repwd" name="repwd" type="password"oninput="checkRePwd('repwd','repwdtip','pwd')" required><span id="repwdtip"></span></li><br><li>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:<input type="radio" name="sex" value="男">Male<input type="radio" name="sex" value="女">Female</li><br><li>&nbsp;&nbsp;&nbsp;E-mail&nbsp;&nbsp;:<input type="test" name="email" id="email"oninput="checkEmail('email','emailtip')" required><span id="emailtip"></span></li><br><li><input id="submit" type=submit value="提交" onclick="myfuction()"><input type="reset" name="reset" id="reset" value="重置"></li></ul></form></div><div id="right"><img src="/Library/jsptest/images/04.gif" /></div></section><body></html>

question.html（调查问卷）

<html><head><title>企业电子商务调查问卷</title>
</head>
<script>var limit = 3, num = 0;function check(obj) {obj.checked ? num++ : num--;if (num > limit) {obj.checked = false;alert("最多选择3项");num--;}};function test() {var s1 = document.getElementById("qiyemingchen");location.href = "success.html?" + "qiyemingchen=" + encodeURI(s1.value);var s2 = document.getElementById("zhucedi");location.href = "success.html?" + "zhucedi=" + encodeURI(s2.value);}
</script><body bgcolor="AliceBlue"><!--设置背景颜色--><form action="success.html" method="POST"><h1>企业电子商务调查问卷</h1><!--设置标题--><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><hr /><div class="content"><div class="vote"><div class="votechoice"><h2>企业基本情况</h2><form>1.企业名称：<input type="text" name="qiyemingchen" id="qiyemingchen" style="border: none" required>注册地:<input type="text" name="zhucedi" id="zhucedi" style="border: none" required><br>2.您在所在企业的职务（职位）：<input type="text" name="zhiwei" style="border: none" required><br>3.企业成立时间:<input type="text" name="shijian" style="border: none" required><br>4.企业所在行业:<input type="text" name="hangye" style="border: none" required><br></form><br><ul class="vote1" required><p>1.您所在企业的所有制形式为：（单选）</p><li><input type="radio" name="xingshi" value="国有" /><!--radio为单选框--><span class="votechoicename">国有</span></li><li><input type="radio" name="xingshi" value="集体" /><span class="votechoicename">集体</span></li><li><input type="radio" name="xingshi" value="民企" /><span class="votechoicename">民企</span></li><li><input type="radio" name="xingshi" value="外资" /><span class="votechoicename">外资</span></li><li><input type="radio" name="xingshi" value="合资" /><span class="votechoicename">合资</span></li><li><span class="votechoicename">其他</span><input type="test" value="" /></li></li></ul></div><div class="votechoice"><ul class="vote2"><p>2.您所在企业是否是上市公司：（单选）</p><li><input type="radio" name="shangshi" value="是"><span class="votechoicename">是</span></li><li><input type="radio" name="shangshi" value="不是" /><span class="votechoicename">不是</span></li></li></ul></div><div class="votechoice"><ul class="vote3"><p>3.您认为贵企业所在行业是否非常有必要开展电子商务? （单选）</p><li><input type="radio" name="taidu" value="非常有必要" /><span class="votechoicename">非常有必要</span></li><li><input type="radio" name="taidu" value="不知道" /><span class="votechoicename">不知道</span></li><li><input type="radio" name="taidu" value="没有必要" /><span class="votechoicename">没有必要</span></li></li></ul></div><div class="votechoice"><ul class="vote4"><p>4.您所在的企业现在是否开展了电子商务？(多选) </p><li><input type="checkbox" name="liucheng" value="已经开展电子商务" /><!--checkbox为复选框--><span class="votechoicename">已经开展电子商务</span></li><li><input type="checkbox" name="liucheng" value="计划开展电子商务" /><span class="votechoicename">计划开展电子商务</span></li><li><input type="checkbox" name="liucheng" value="没有开展电子商务" /><span class="votechoicename">没有开展电子商务</span></li></li></ul></div><div class="votechoice"><ul class="vote5"><p>5.企业对市面上“电子商务师”之类的资格认证的看法：（最多只能选3个）</p><li><input type="checkbox" name="zige" value="含金量很高，能够反映出专业的能力" onclick="check(this)" /><span class="votechoicename">含金量很高，能够反映出专业的能力</span></li><li><input type="checkbox" name="zige" value="能够帮助我们培养和选择相关层次的人才" onclick="check(this)" /><span class="votechoicename">能够帮助我们培养和选择相关层次的人才</span></li><li><input type="checkbox" name="zige" value="没有针对性，难以确定能够胜任特定的工作" onclick="check(this)" /><span class="votechoicename">没有针对性，难以确定能够胜任特定的工作</span></li><li><input type="checkbox" name="zige" value="名不副实，没有反映出相应的专业能力" onclick="check(this)" /><span class="votechoicename">名不副实，没有反映出相应的专业能力</span></li></li></ul></div><div class="votechoice"><ul class="vote6"><p>6.企业对高校电子商务专业毕业生的基本看法：</p><select name="kanfa" size=1><!--select为下拉列表 size=2为下滚列表--><option value="能够胜任较高级的工作，表现出专业的水平">能够胜任较高级的工作，表现出专业的水平</option><option value="仅有书本知识，不能解决实际问题">仅有书本知识，不能解决实际问题</option><option value="知识结构不合理，没有反映出业界的发展现实">知识结构不合理，没有反映出业界的发展现实</option><option value="高职高专的毕业生工作能力比本科的毕业生实际能力更强">高职高专的毕业生工作能力比本科的毕业生实际能力更强</option><option value="职业定位不清晰，能力知识宽而不精">职业定位不清晰，能力知识宽而不精</option></select><p>7.请列出贵企业所在行业的主要企业情况</p><table border="1" required><tr><td>企业名称</td><td>该企业的竞争优势</td><td>是否已开展电子商务</td></tr><tr><td><input type="text"></td><td><input type="text"></td><td><input type="radio" name="a">是<input type="radio" name="a">否</td></tr><tr><td><input type="text"></td><td><input type="text"></td><td><input type="radio" name="b">是<input type="radio" name="b">否</td></tr><tr><td><input type="text"></td><td><input type="text"></td><td><input type="radio" name="c">是<input type="radio" name="c">否</td></tr></table><p> 请提宝贵意见：</p><textarea name="suggest" cols="50" rows="3"></textarea><!--textarea为多行输入文本框--></ul><li><input type="submit" value="提交" onclick="test()"/></li></div></div></div></form>
</body></html>

实验一简单静态网页设计相关推荐

html+jsp 简单静态网页设计
实验一简单静态网页设计一.实验目的 1. 复习使用记事本编辑网页的方法. 2. 熟悉不同表单控件类型的应用. 3. 练习使用记事本在网页中添加表单与表单元素. 二.实验内容根据提供 ...
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学生网站模板常见网页 ...

实验一简单静态网页设计

实验一简单静态网页设计相关推荐

最新文章

热门文章

实验一 简单静态网页设计

实验一 简单静态网页设计相关推荐

最新文章

热门文章

实验一简单静态网页设计

实验一简单静态网页设计相关推荐