阿嘎尔-12000346实验报告

《阿嘎尔-12000346实验报告》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、HTML5程序设计实验报告书专业班级:12级计算机科学与技术（软件一班）班姓名:阿嘎尔学生学号:12000346指导教师:于鹰2015年11月20日一、实验目的1.掌握HTML5文件的基本结构。2.熟悉DreamweaverCS5环境。3.熟悉使用JavaScript、表单，CSS样式，画布以及HTML5新增的功能的基本用法。4.验证和巩固理论知识，提高我们的学习兴趣和动手能力。5.培养学生运用所学的理论知识和技能解决网页制作过程中所遇到的实际问题的能力。二、实验环境计算机及相关软件AdobeDreamweaverCS5、

2、Google浏览器。三、实验内容1.确定网页主题，并搜集与主题相关的素材。2.对所要制作的网页进行系统设计，规划网页基本结构。3.使用DIV+CSS、画布以及HTML5新增的功能进行网页布局。4.完成各页面的具体制作，并测试网页之间的链接。5.维护网页。四、实验步骤1.确定网页主题。确定好自己将要做的网页的主题，有助于收集网页素材，以后工作的开展更方便顺利。2.根据网页主题收集素材。3.制作网页。(1)规划网页布局制作表格，插入div层、表单等，将图片合理的插入到合适的位置。(2)使用CSS样式设计页面1）在主页面有下拉式

3、菜单用CSS和div完成的。以下是主要代码：*{margin:0px;padding:0px;}.nav{position:relative;width:800px;height:52px;background:#404144;margin:0auto;}.navli{list-style:none;float:left;line-height:50px;}.navlia{display:block;text-decoration:none;color:#FFFFFF;paddi

4、ng:0px15px;font-family:"微软雅黑";}.navlia:hover.xs{display:block;}.navlia:hover{background:#333333;}.navlia.xs{border:1pxsolid#cccccc;border-top:none;display:none;width:992px;background:#FFFFFF;position:absolute;top:50px;left:0px;}.navlia.xs.xiao{position:absolute;to

5、p:-8px;border-left:8pxsolidtransparent;border-right:8pxsolidtransparent;border-bottom:8pxsolid#FFFFFF;width:0px;height:0px;z-index:999;}.navli:nth-child(1).xiao{left:20px;}.navli:nth-child(2).xiao{left:98px;}.navli:nth-child(3).xiao{left:177px;}.navli:nth-child(4)

6、.xiao{left:255px;}.navli:nth-child(5).xiao{left:348px;}.navli:nth-child(6).xiao{left:427px;}.navli:nth-child(7).xiao{left:496px;}.navli:nth-child(8).xiao{left:576px;}.navli:nth-child(9).xiao{left:646px;}.navli:nth-child(10).xiao{left:706px;}

7、r>

• 首页
• iPhone