html+js 简单静态网页设计

实验一简单静态网页设计
一、实验目的：
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）在表单中插入表单元素，用于在网页中显示步骤（4）中标示的问题及答案；
（8）为表单添加提交和重置按钮；
（9）保存网页为questionaire.htm。
提示：本实验没有标准答案，但是在将WORD文档中的调查问题及答案移植到网页中时，要尽可能多地使用到讲过的表单元素（如文本框、单选按钮、复选按钮、下拉菜单/列表、框架等）。另外，网页上调查问卷的答案的表现形式与并不一定要与WORD中的一致，而是应该选择使用更符合需要的表单元素，例如对于答案选项比较多的问题来说，应该优先选用下拉菜单/列表，单选使用下拉菜单，多选使用列表。
六、实验代码：
index.html

<!DOCTYPE html><html>
<head>
<title>实验一</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB18030"><!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
body {width: 694px;margin: auto;
}.top,.bottom,.center {height: auto;width: 100%;
}#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;
}.img1 {width: 35px;height: 300px;float: left;
}.img2 {width: 44px;height: 300px;float: right;
}
</style>
</head><script language="JavaScript">function submitOnclick(){var form1=document.getElementById('form1');//用户名格式验证if(form1.text1.value==""){alert("用户名不能为空");return false;}if(form1.text1.value.length<3 || form1.text1.value.length>20){alert("用户名不能少于3个字符，不能超过20个字符");return false;}//密码格式验证if(form1.pwd1.value==""){alert("密码不能为空");return false;}if(form1.pwd1.value.length<6 || form1.pwd1.value.length>20){alert("密码不能少于6个字符，不能超过20个字符");return false;}// 第二次输入密码一致性验证if(form1.pwd1.value != form1.pwd2.value){alert("两次输入密码不一样，请重新输入！")return false;}//性别判断if(form1.gender.value != "male" && form1.gender.value != "female"){alert("请选择性别！")return false;}if (email.indexOf("@") == -1 && email.indexOf(".") == -1) {alert("邮箱格式不正确！");return false;}return true;}
</script><body><!-- 顶部盒子 --><img class="top" src="data:image/01.gif" style="height: 180px;"><h1 style="margin: -5px;"></h1><!-- 中间的盒子 --><div class="center"><img src="data:image/02.gif" class="img1"><div id="left"><img src="data:image/reg.gif"> <b>注册帮助</b><ul><li>会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。</li><li>密码：请设定在6-20位之间。</li><li>确认密码：确认密码必须与密码一致。</li><li>Email：请填写有效的Email地址，以便于与您联系。</li></ul></div><img src="data:image/04.gif" class="img2"><div id="right"><form id="form1" action="questionnaire.html"><table><tr><td>用户名：</td><td><input name="text1" type="text"placeholder="长度控制在3-20个字符"></td></tr><tr><td>密码：</td><td><input type="password" name="pwd1"placeholder="请设定在6-20位之间"></td></tr><tr><td>确认密码：</td><td><input type="password" name="pwd2" size="20" /></td></tr><tr><td>性别：</td><td><input type="radio" name="gender" value="male" />男 <input
                            type="radio" name="gender" value="female" />女</td></tr><tr><td>E-mail：</td><td><input type="email" name="email" size="30" /></td></tr><tr><td><input name="text3" value="提交" type="submit"onclick="return submitOnclick()"></td><td><input type="reset" value="重置" /></td></tr></table></form></div><!-- 竖线的实现 --><table class="line"><tr><td valign="top"></td></tr></table></div><!-- 底部盒子 --><img class="bottom" src="data:image/03.jpg">
</body>
</html>

questionnaire.html


<html>
<head>
<title>这是实验一的调查界面</title>
<style type="text/css">
body {padding: 0px 15% 0px 15%;
}.p1 {text-align: center;font-size: 2em;
}.d p {font-size: 1em;font-family: STKaiti;
}.ibtn {border: 1px;border-bottom-style: solid;border-right-style: none;border-top-style: none;border-left-style: none;
}
</style><script language="javascript">function chkbox(elm) {var obj = document.getElementsByName("cbox");var num = 0;for (i = 0; i < obj.length; i++)if (obj[i].checked)num += 1;if (num > 4) {alert("最多可以选择四个！");elm.checked = false;}}
</script></head><!-- 调查问卷的说明事项 -->
<body><div><p class="p1">企业电子商务调查问卷</p><div class="d"><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><ul style="list-style-type:square;"><li><strong style="font-size:1.3em">一、企业基本简况</strong><br /><div style="font-size:1.1em"><p>1. 企业名称： <input type="text" class="ibtn" /> &nbsp 注册地：<input
                            type="text" class="ibtn" size="20" /><br /> 2. 您在所在企业的职务（职位）：<input
                            type="text" class="ibtn" size="20" /> <br /> 3. 企业成立时间：<input
                            type="text" class="ibtn" size="20" /> <br /> 4. 企业所在行业：<input
                            type="text" class="ibtn" size="20" /></p><p><u><b>以下选择题，若无特别声明，皆为多项选择题</b> </u></p><p>5.您所在企业的所有制形式为：（单选）</p><input type="radio" name="radio1" />国有 <input type="radio"name="radio1" />集体 <input type="radio" name="radio1" />民营 <input
                        type="radio" name="radio1" />外资 <input type="radio" name="radio1" />合资<input type="radio" name="radio1" />股份制 <input type="radio"name="radio1" />其他 <input type="text" class="ibtn" name="txt1"size="5" /><p>6. 您所在企业的类型为： （多选）</p><input type="checkbox" name="radio2" />流程型制造业 <input
                        type="checkbox" name="radio2" />离散型制造业 <input type="checkbox"name="radio2" />混合型企业 <input type="checkbox" name="radio2" />旅游服务业<br> <input type="checkbox" name="radio2" />餐饮服务业 <input
                        type="checkbox" name="radio2" />信息服务业 <input type="checkbox"name="radio2" />金融服务业 <input type="checkbox" name="radio2" />物流服务业<br><input type="checkbox" name="radio2" />其他 <input type="text"class="ibtn" name="txt2" size="5" /><table><tr><td><p>7. 您所在企业是否是上市公司： （下拉框）</p></td><td><select><option value="00">请选择</option><option value="01">是</option><option value="02">不是</option></select></td></tr></table></div></li><li><strong style="font-size:1.3em">二、企业信息化总体状况</strong><br /><p>8. 您所在企业最需要的信息包括（选择其中最重要的4项信息）：</p><table><tr><td><input type="checkbox" name="cbox"onclick="chkbox(this);">产品开发</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">生产技术</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">技术引进</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">市场行情</td></tr><tr><td><input type="checkbox" name="cbox"onclick="chkbox(this);">竞争对手</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">政策法规</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">薪酬水平</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">人才信息</td></tr><tr><td><input type="checkbox" name="cbox"onclick="chkbox(this);">财务状况</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">投资融资</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">市场预测</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">员工关系</td></tr><tr><td><input type="checkbox" name="cbox"onclick="chkbox(this);">客户信息</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">供应商信息</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">产品价格</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">质量管理</td></tr><tr><td><input type="checkbox" name="cbox"onclick="chkbox(this);">社交活动</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">合作伙伴信息</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">企业绩效</td><td><input type="checkbox" name="cbox"onclick="chkbox(this);">行业动态</td></tr><tr><td><input type="checkbox" name="cbox" />其他 <input
                            type="text" class="ibtn" name="txt3" size="5" /></td></tr></table></li></ul></div>
</body>
</html>

效果展示

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

html+jsp 简单静态网页设计
实验一简单静态网页设计一.实验目的 1. 复习使用记事本编辑网页的方法. 2. 熟悉不同表单控件类型的应用. 3. 练习使用记事本在网页中添加表单与表单元素. 二.实验内容根据提供 ...
网页设计作业花甲美食网站设计——精美花甲美食网页(8页) 海鲜网页制作作业生鲜水果蔬菜网页设计模板简单学生网页设计代做静态HTML CSS网站制作成品
HTML5期末大作业:花甲美食网站设计--精美花甲美食网页(8页) 海鲜网页制作作业生鲜水果蔬菜网页设计模板简单学生网页设计代做静态HTML CSS网站制作成品常见网页设计文章目录 HTML ...
div+css静态网页设计 web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. ...
TML5期末大作业：动漫网站设计——神偷奶爸(10页) HT简单个人网页设计作业静态动漫主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码
HTML5期末大作业:动漫网站设计--神偷奶爸(10页) HT简单个人网页设计作业静态动漫主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码常见网页设计作业题材有个人. 美食. 公司 ...
HTML5+CSS期末大作业：篮球明星个人网站设计——篮球明星介绍(6页) 简单的学生DW网页设计作业成品 web课程设计网页规划与设计简单个人网页设计作业静态HTML旅行主题网页作业 DW
HTML5+CSS期末大作业:篮球明星个人网站设计--篮球明星介绍(6页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码常见网页设计作业题材有 ...
HTML+CSS+JS——动漫风二次元论坛(2页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:动漫网站设计--动漫风二次元论坛(2页) HTML5网页设计成品_学生DW静态网页设计. 文章目录 HTML5期末大作业:动漫网站设计--动漫风二次元论坛(2页) HTML5网页 ...
HTML5期末大作业：商城网站设计——仿团购商城(1页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页Dreamwe
HTML5期末大作业:商城网站设计--仿团购商城(1页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页Dreamwe ...
静态HTML网页设计作品——斗破苍穹动漫(6页) HTML+CSS+JavaScript 学生动漫网页设计模板下载斗破大学生HTML网页制作作品简单漫画网页设计成品 dreamweav
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页) HTML+CSS+JavaScript 学生动漫网页设计模板下载斗破大学生HTML网页制作作品简单漫画网页设计成品 dreamweave ...
网页设计作业成品 HTML+CSS+JS大作业——汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
HTML+CSS+JS大作业--汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作文章目录 HTML+CSS+JS大作业--汽车保险销售综合商城(4 ...
HTML5期末大作业：花甲美食网站设计——精美花甲美食网页(8页) 海鲜网页制作作业生鲜水果蔬菜网页设计模板简单学生网页设计代做静态HTML CSS网站制作成品
HTML5期末大作业:花甲美食网站设计--精美花甲美食网页(8页) 海鲜网页制作作业生鲜水果蔬菜网页设计模板简单学生网页设计代做静态HTML CSS网站制作成品常见网页设计作业题材有个人. ...

html+js 简单静态网页设计

效果展示

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

最新文章

热门文章