html+js 简单静态网页设计
来源:互联网 发布:济南js复合保温模板 编辑:程序博客网 时间:2024/06/06 01:19
实验一 简单静态网页设计
一、 实验目的:
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 简单静态网页设计
- tomcat部署简单的html静态网页
- tomcat部署简单的html静态网页
- 简单的html静态网页使用libevent
- html网页设计简单登陆界面
- 静态网页,JS代码 统计网站访问量<也支持html>
- HTML 静态网页
- HTML静态网页教程
- 静态网页 photo.html
- 网页设计作业成品下载Dreamweaver网页FrontPage网页html静态
- 视频专辑:轻松搞定网页设计(html+css+js)
- 制作一张简单的网页(HTML+CSS+JS)【1】
- 制作一张简单的网页(HTML+CSS+JS) 【2】
- 制作一张简单的网页(HTML+CSS+JS) 【3】
- 练习HTML——简单的网页设计
- CSS/HTML网页设计
- HTML网页设计
- html网页设计
- 第八天2017/04/17(3、C++的几个语法)
- 多态实现线性表(队列、串、堆栈)
- ASCII对照表
- 06-软件测试计划及测试说明
- 精通Jquery,Jquery入门准备(0)
- html+js 简单静态网页设计
- C++ STL基本容器的使用
- 【腾讯TMQ】静态测试技术之Lint冗余资源清理
- CoordinationLayout解析
- createCriteria用法
- 爬虫:将廖雪峰网上资源保存为本地PDF文件
- Android实用视图动画及工具系列之十:漂亮的发布动画,仿新浪首页加号发布微博动画框
- 07-软件配置项管理报告
- 正则表达式归纳总结