阿嘎尔-12000346实验报告.doc

HTML5程序设计实验报告书 专业班级:12级计算机科学与技术（软件一班）班 姓 名: 阿嘎尔 学生学号: 12000346 指导教师: 于鹰 2015年11月20日一、实验目的1. 掌握HTML5文件的基本结构。2. 熟悉Dreamweaver CS5环境。3. 熟悉使用JavaScript、表单，CSS样式，画布以及HTML5新增的功能的基本用法。4. 验证和巩固理论知识，提高我们的学习兴趣和动手能力。5. 培养学生运用所学的理论知识和技能解决网页制作过程中所遇到的实际问题的能力。二、实验环境计算机及相关软件Adobe Dreamweaver CS5、Google浏览器。3、 实验内容1.确定网页主题，并搜集与主题相关的素材。 2.对所要制作的网页进行系统设计，规划网页基本结构。3.使用DIV+CSS、画布以及HTML5新增的功能进行网页布局。4.完成各页面的具体制作，并测试网页之间的链接。5.维护网页。四、实验步骤1. 确定网页主题。确定好自己将要做的网页的主题，有助于收集网页素材，以后工作的开展更方便顺利。2. 根据网页主题收集素材。3. 制作网页。(1) 规划网页布局制作表格，插入div层、表单等，将图片合理的插入到合适的位置。(2) 使用CSS样式设计页面1） 在主页面有下拉式菜单用CSS和div完成的。 以下是主要代码：*margin: 0px;padding:0px;.nav position: relative;width:800px;height:52px;background: #404144;margin:0 auto;.nav lilist-style: none;float: left;line-height: 50px;.nav li adisplay: block;text-decoration: none;color: #FFFFFF;padding: 0px 15px;font-family: 微软雅黑;.nav li a:hover .xsdisplay: block;.nav li a:hover background: #333333;.nav li a .xsborder:1px solid #cccccc;border-top:none;display: none;width:992px;background:#FFFFFF;position: absolute;top:50px;left:0px;.nav li a .xs .xiao position:absolute;top:-8px;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid #FFFFFF;width:0px;height:0px;z-index: 999;.nav li:nth-child(1) .xiao left:20px;.nav li:nth-child(2) .xiao left:98px;.nav li:nth-child(3) .xiao left:177px;.nav li:nth-child(4) .xiao left:255px;.nav li:nth-child(5) .xiao left:348px;.nav li:nth-child(6) .xiao left:427px;.nav li:nth-child(7) .xiao left:496px;.nav li:nth-child(8) .xiao left:576px;.nav li:nth-child(9) .xiao left:646px;.nav li:nth-child(10) .xiao left:706px;首页iPhoneiPad miniipodMacbook社区登陆此网页所有浏览器都支持2） 从主页面进入到的社区登录后会跳到一个登陆页面也是用css简单完成的。以下是主要代码：bodyfont:12pxLucida Sans Unicode,Trebuchet MS,Arial,Helvetice;margin:0;background:#3C3;font-size:15px;h1text-align:center;#loginbackground:#69F;height:300px;width:300px;padding:30px;position:absolute;top:20%;left:40%;z-index:0;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-webkit; font-size: 18px;text-align: center;color: #930;#inputs inputmargin: 0 0 10px 0;border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:500px;border-radius:5px;-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;-webkit-box-shadown: 0 1px 1px #ccc inset, 0 1px 0 #fff;box-shadow:0 1px 1px #ccc inset, 0 1px 0 #fff;#inputs input: focus outline:none;-moz-box-shadow:0 0 0 1px #e8c291 inset;-webkit-box-shadown:0 0 0 1px #e8c291 inset;box-shadow: 0 0 0 1px #e8c291 inset;#actionsmargin:15px 0 0 0;#submitbackground-color:#F00;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-shadow:0 1px 0 rgba(255,255,255,0.5);-moz-box-shadow:0 0 1px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.3)inset;-webkit-box-shadown:0 0 1px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.3)inset;box-shadow:0 0 1px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.3)inset;border-width:1px;border-style:solid;border-left:#F00;float:left;height:35px;padding:0;width:120px;cursor:pointer;font:bold 15px Arial, Helvetica;color:#F00;#actions acolor:#0F6;float:right;line-height:20px;margin-left:10px;font-size: 14px;3） 此后是一个用js编写的注册页面。主要代码有：function checkPSW()var psw1=document.getElementById(psw1).value;var psw2=document.getElementById(psw2).value;var pswInfo=document.getElementById(pswInfo);if(psw1!=psw2)pswInfo.innerHTML=两次输入的密码必须一致;function reg()var username=document.getElementById(username).value;var email=document.getElementById(email).value;var gender=document.getElementById(gender).value;var birth=document.getElementById(birth).value;var address=document.getElementById(address).value;if(document.getElementById(username).checkValidity()&document.getElementById(psw1).checkValidity()&document.getElementById(psw2).checkValidity()&document.getElementById(email).checkValidity()&document.getElementById(birth).checkValidity()&document.getElementById(address).checkValidity()alert(确认注册信息n+用户名：+username+n+邮箱：+email+n+性别：+gender+n+生日：+bir