html+js 简单静态网页设计
Posted gamedev˚
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="image/01.gif" style="height: 180px;">
<h1 style="margin: -5px;"></h1>
<!-- 中间的盒子 -->
<div class="center">
<img src="image/02.gif" class="img1">
<div id="left">
<img src="image/reg.gif"> <b>注册帮助</b>
<ul>
<li>会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。</li>
<li>密码：请设定在6-20位之间。</li>
<li>确认密码：确认密码必须与密码一致。</li>
<li>Email：请填写有效的Email地址，以便于与您联系。</li>
</ul>
</div>
<img src="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="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" />   注册地：<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前端设计教与学（32/48/60学时教学大纲+视频）