静态网页的制作实验报告

1、 软件学院 实验报告专 业：_软件工程_ 方 向：_云计算与大数据_课程名称：_ JavaWeb _班 级：_学 号：_1_姓 名：_辅导教师：_ 2016年3月制 成绩： 实验时间2016年3月19日 8时至12时学时数4H1. 实验名称 静态网页的制作2. 实验目的1、掌握HTML标签元素的使用2、会使用div+css布局网站首页3、会使用JavaScript进行客户端数据校验3. 实验内容 1、根据前期作业中的项目概述，设计并完成一个网站首页2、设计一个登陆页面（可以包含在首页中）3、根据你的项目概述，设计一个表单页面采集数据，可以是报名页面或注册页面或其它的信息录入页面。4. 实验原理

2、或流程图用div+css创建3个页面，网站首页，登录页面，注册页面，用超链接把他们连接起来。用JavaScript进行一些常用的数据校验。5. 实验过程或源代码网站首页：Insert title here #headermargin: 0 auto;height:400px;width:1002px;background=image/falali.jpg;clear:both; #xialamargin: 0 auto;height:25px;width:1002px;background-color:#; #mainmargin: 0 auto;height:600px;width:1002

3、px;background-color:red;clear:both; #lsideheight:600px;width:700px;background-color:pink;float:left; #topaheight:300px;width:350px;background-color:#;float:left; #topbheight:300px;width:350px;background-color:#;float:left; #bottomaheight:300px;width:350px;background-color:#;float:left; #bottombheigh

4、t:300px;width:350px;background-color:#;float:left; #rsideheight:600px;width:302px;background-color:#;float:right; #footermargin: 0 auto;height:80px;width:1002px;background-color:gray;clear:both;line-height：24px； 跑车： 个性化定制 GT大赛 历史名车 法拉利 California T 客户专区： 我的法拉利 法拉利服务 车主俱乐部 驾驶课程 优良传承： 马拉内罗 媒

5、体中心 历史 合作伙伴 体验： 法拉利杂志 法拉利之家博物馆 法拉利博物馆             企业公司         登录丨注册最新新闻：1.法拉利488 GTB荣获最佳超级跑车的奖项2.法拉利亚太挑战赛3.法拉利GTC4Lusso眩目亮相日内瓦4.Manifesto展示 未来法拉利客户赛车部门:欧洲挑战赛北美挑战赛亚太挑战赛F1客户部门XX 计划赛季最新文章:法拉利California T HS运动操控套件也

6、亮相车展日内瓦，3月1日 从一大早开始，在刚刚揭幕的日内瓦车展上，法拉利GTC4Lusso是众人镜头中的焦点。红色帷幕覆盖下的法拉利GTC4Lusso就已经万众瞩目。展示介绍于11：15开始，跃马展台前人潮汹涌，当帷幕揭开之时，镁光灯此起彼伏地闪烁着。在日内瓦车展上，帷幕下的四座四轮驱动转向的车型有两台：一台是Bianco Italia白色车身搭配Blu Sterling蓝色内饰，采用Low-e低辐射节能材料的车顶天窗，在阳光灿烂时，也能保持座舱内恒定舒适的温度，同时配有钻石抛光的锻造轮毂；第二台则是Grigio Ferro Met灰色车身搭配Cognac干邑色半苯染皮革内饰。 &nb

7、sp               0Ferrari S.p.A. - 注册地址 via Emilia Est 1163, Modena (Italy) - 股权资金 Euro 20.260.000 - VAT no.                           &

8、nbsp                                                      - Copyright 2016 - 版权所有 注册

9、页面：Insert title herefunction checkuserName(username)var str1=username;var Expression1=/u4E00-u9FA5/; /3-10个 字母 数字 下划线 组成var objExp1=new RegExp(Expression1);if(objExp1.test(str1)=true)return true;elsereturn false;function checkPWD(PWD)var str4=PWD;var Expression4=/A-Za-z1(A-Za-z0-9|._)5,19$/;/6-20位 字

10、母 数字 下划线 和点“.”组成var objExp4=new RegExp(Expression4);if(objExp4.test(str4)=true)return ture;elsereturn false;function checktel(tel)var str3=tel;var Expression3=/(d3-)?d8|(d4-)(d7)/; var objExp3=new RegExp(Expression3); if(objExp3.test(str3)=true)return ture; elsereturn false; function checkemail(str2

11、)var str2=email;var Expression2=/w+(-+.w+)*w+(-.w+)*.w+(-.w+)*/; var objExp2=new RegExp(Expression2);if(objExp2.test(str2)=true)return true;elsereturn false;function check1(myform)if(myform.username.value=)alert(请输入用户名！);myform.username.focus();return;if(!checkuserName(myform.username.value)alert(您输

12、入的用户名不正确！);myform.username.focus();return;if(myform.PWD1.value=)alert(请输入密码！);myform.PWD.focus();return;if(myform.PWD1.value!=myform.PWD2.value)alert(您两次输入的密码不一致,请重新输入！);myform.PWD.focus();return; if(myform.familytel.value=)alert(请输入电话！);myform.familytel.focus();return; if(!checktel(myform.familytel

13、.value)alert(您输入的电话格式不正确！);myform.familytel.focus();return; if(myform.email.value=)alert(请输入email！);myform.email.focus();return; if(!checkemail(myform.email.value)alert(您输入的email格式不正确！);myform.eamil.focus();return; form1.submit();注册 用户名： 密码： 确认密码： 性别： 男  女 电话： E-mail： 登陆页面：Insert title herefunc

14、tion checkusername(username)var str1=username;var Expression1=/u4E00-u9FA5/; /3-10个 字母 数字 下划线 组成var objExp1=new RegExp(Expression1);if(objExp1.test(str1)=true)return true;elsereturn false;function checkPWD(PWD)var str4=PWD;var Expression4=/A-Za-z1(A-Za-z0-9|._)5,19$/; /6-20位 字母 数字 下划线 和点“.”组成var objExp4=new RegExp(Expression4);if(objExp4.test(str4)=true)return ture;elsereturn false;function check(myform)if(myform.username.value=)alert(请输入用户名！);myform.username.focus();return;if(!checkusername(myform.username.value)alert(您输入的用户名不正确！);myform.us