[阿嘎尔-12000346实验报告.docVIP

HTML5程序设计实验报告书 专业班级:12级计算机科学与技术（软件一班）班 姓 名: 阿嘎尔 学生学号: 指导教师: 于鹰 2015年11月20日 一、实验目的 1. 掌握HTML5文件的基本结构。 2. 熟悉Dreamweaver CS5环境。 3. 熟悉使用JavaScript、表单，CSS样式，画布以及HTML5新增的功能的基本用法。 4. 验证和巩固理论知识，提高我们的学习兴趣和动手能力。 5. 培养学生运用所学的理论知识和技能解决网页制作过程中所遇到的实际问题的能力。 二、实验环境 计算机及相关软件Adobe Dreamweaver CS5、Google浏览器。 实验内容 1.确定网页主题，并搜集与主题相关的素材。 2.对所要制作的网页进行系统设计，规划网页基本结构。 3.使用DIV+CSS、画布以及HTML5新增的功能进行网页布局。 4.完成各页面的具体制作，并测试网页之间的链接。 5.维护网页。 四、实验步骤 1. 确定网页主题。 确定好自己将要做的网页的主题，有助于收集网页素材，以后工作的开展更方便顺利。 2. 根据网页主题收集素材。 3. 制作网页。 (1) 规划网页布局 制作表格，插入div层、表单等，将图片合理的插入到合适的位置。 使用CSS样式设计页面 在主页面有下拉式菜单用CSS和div完成的。 以下是主要代码： style type=text/css *{margin: 0px;padding:0px;} .nav {position: relative;width:800px;height:52px;background: #404144;margin:0 auto;} .nav li{list-style: none;float: left;line-height: 50px;} .nav li a{display: block;text-decoration: none;color: #FFFFFF;padding: 0px 15px;font-family: 微软雅黑;} .nav li a:hover .xs{display: block;} .nav li a:hover {background: #333333;} .nav li a .xs{border: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;} /style /head body br div class=nav ul lia href=#首页/a/li lia href=#iPhone div class=xs div class=xiao/di