利用Hbuilder设计网页

利用Hbuilder设计网页一、实践目的1.素养提升（1）心智训练（2）计算机软件编程及分析能力通过夏季短学期过程中对Hbuilder的学习和使用极大地提高了我对计算机软件编程的理解，以及在数据分析方面能力的提升。在学习过程中，每天课堂上老师的悉心教导使我学会了使用方法，课后完成一份编程作业，使得我对Hbuilder的运用越来越熟练，每周的小组测验也使我加强了与人沟通的能力，并且通过交流弥补缺陷与不足，提高分析能力，对Hbuilder的运用也更加游刃有余。2.培养实践能力和创新精神理论联系实际，将课上所学与实践相结合，提高动手能力，并进一步培养创新精神，以此为未来更好地融入社会生活打下坚实的基础。3.联系大学知识，拓宽学习思路将夏季短学期中学到的内容和大学中所学的知识有机结合起来，拓宽学习的思路，充实大脑，为以后校园学习生活中对专业课的理解起到铺垫的作用。二、实践内容1.确定实习成果作业题目：设计能够滚动轮播的广告网页，主要是通过轮播图片来使浏览者了解网页中所设计的广告项目。2.设计主题：主题内容要求简洁清晰，给人以眼前一亮的感觉，所以网页的主题采用简明的白色，使浏览者直观的、轻松愉悦的浏览页面，不会给视觉上造成困扰。3.材料收集：主要在网站中收集所需要的资料，并辅以查阅书籍补充盲区，视频、图片、文字、相关新闻消息等都是需要收集的。收集过后加以整理，取其精华、弃其糟粕，成为此后的页面设计的根本。网页设计：网页由网页标题、广告图片，广告轮播滑动动画以及自选小方格组成。其中包括了八个轮播的广告图片，供给浏览者自行选择。5.网页制作工具：Hbuilder及其他图片处理软件。6.实践过程：(1)主界面设置：主界面是整个网页设计中极为重要的一部分，界面正中央通过img插入轮播图片，构成整个网页的主体部分，再通过div设计，使得图片能够轮播，并为轮播方便而插入了按键和小方格。(2)手动轮播设置：通过使用jQuery，进行轮播设置，以达到方便快捷的效果，并因此而简化了原本及其繁琐的代码内容，而且只需要调用内部的方法,就能轻松实现炫酷的效果。运用jQuery设计轮播时所使用的手动按钮，为其加上手动轮播时所需要的小箭头以及方便快速选择广告图片的小方格，来满足消费者自行查看的需要。(3)轮播区域设置：轮播区域设置在主界面中上方的位置，为凸显轮播区域，在轮播广告图片的外围加上蓝色边框，使得浏览者更加清晰的看到广告。(4)代码：见附录三、实践体会通过为期半个月的学校夏季短学期教育，我对Hbuilder有了充分的了解和认识，在课堂上完成随堂的小测试，课后完成的编程作业都使我学会了Hbuilder的应用方法，并将其融会贯通。我知道了Hbuilder是一款本身主题由Java编写的Web开发软件。同时我也知道了Hbuilder的用法，例如：div是html(超文本用语)中的一个要素，div++css是网页的布局要领，div+css包含行内样式、内嵌式、链接式、导入式、css选择器、标记选择器、类别选择、id选择器、选择器声明、css继承。诸如此类的知识有很多，在这半个月的学习中将其融会贯通，有所收获。这次实训项目是以网页维护和制作网页的形式开展的，通过课堂上老师的讲解和课下仔细的钻研，我们学会了Hbuilder的使用，收获颇多，并为日后的工作需要打下了基础。首先，此次网页设计的主题内容大致为：标题：该网页的标题为滚动轮播。主题：以销售广告的轮播为主题。主界面部分：以整篇网页中上部的广告滚动轮播为主体，背景设置为空白，是浏览者能够清晰的看见广告图片。轮播区域部分：轮播区域中包括八张广告图片，每张图片都有不同的内容，且都对应一个能够供浏览者自行选择的小方格，在轮播区域的左右两端设有能供手动左右滑动广告图片的小箭头，也是为方便浏览者使用而设计。在图片外围又设有蓝色的外边框，能够是使用者的目光瞬间被吸引，使轮播广告能够被观测到。其次，我们对jQuery和css有了一定的了解。jQuery：jQuery是一个集快速、简洁于一身的JavaScript框架，是一个非常优秀的JavaScript框架，虽然拥有同样功能的也有早期的Prototype等，但是jQuery有着它们所不具备的特点。jQuery设计的宗旨是"writeLess，DoMore"，也就是提倡我们通过写更少的代码，做更多的事情，以此省去大量本没有必要的时间，达到快速便捷的效果。对经常加班加点工作的程序员们有着至关重要的作用。它的其中JavaScript框架常用的功能代码，为我们提供一种极度简便的设计模式，优化了事件处理、HTML文档操作、Ajax交互和动画设计等。jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如FF1.5+、IE6.0+、Opera9.0+、Safari2.0+等。而我在制作网页的过程中，由于需要编写能够使浏览者用手动进行广告轮播，已达到主动浏览的目的的程序，所以我选择了使用jQuery进行设计。它能够使我在此处编写的代码进行了极简的处理，节省大量时间去做后续任务。它也还设计清晰的多功能接口，所以我用jQuery设计轮播，使得我的广告能够自动左右滑动轮播，达到制作轮播广告动画网页的目的，以极快的速度制作出整篇网页的主体部分，为后续做网页细节的处理提供了便利条件。2.css：css也就是层叠样式表，其英文的全称为：CascadingStyleSheets，它是一种用来表现标准通用标记语言的一个应用(也就是HTML)或标准通用标记语言的一个子集(也就是XML)等样式的计算机语言。css可以静态地修饰网页，而且还可以通过配合脚本语言，从而实现对网页元素动态的进行格式化。css能够对网页中各个元素位置的排版进行像素级的精确控制，它支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。我在编写网页代码的过程中，运用css，将代码格式设置为utf-8，避免在编译时出现格式错误，并在此基础上，为了使得浏览者着重观察正在轮播中的广告，瞬间就吸引住他们的眼球，我在轮播的广告外围加上了蓝色的边框，并设置其为高344宽为720。由于之前没有注意到过多的细节，使得边框线与广告图片一起滚动，而虽然图片进入了下一张，但是边框线却因此消失，所以在经历了失败之后，我重新编写此处代码，将蓝色边框设置为相对位置，避免在图片滚动时由于位置问题导致边框线与图片一起滚动，进而导致外边框消失。也是通过这次的问题，我明白了细节以及前瞻性的重要性，即使代码编写没有任何错误，但若不注意整体设置的把控，形成结果之后，是否像想象中的那种标准一目了然，不论是在网页制作还是学习过程中都是如此。最后，Hbuilder的主要功能是web的开发软件，也就是制作网页的软件，通过这次实训，我了解到，在制作网页的过程中，细心是最基本的原则，尤其是在敲写代码的过程中，一个细微的错误都会导致整篇代码无法运行，为此我也吃了不少苦头，甚至有时为了找到问题而重新翻阅整篇代码，不仅浪费时间，而且更容易出错。为此我认识到要想减少失误的概率，首先就是要在编写代码前明确主题内容，并全程围绕此主题展开；其次，要设身处地的考虑用户的感受，将自己化身成为作品的用户，思考在使用的时候会有哪些不便和不足，以此作为之后首要攻克的目标；最后，一定要注意优化内容，在版式，框架等的安排上不仅要注重用户的体验，还要强调实用型，这样才会吸引更多人的目光。实践主要利用hbuilder软件设计广告轮播网页，利用已经学习到的div做为整个网页最主要的框架部分，然后根据实际情况添加图片的种类，为广告轮播网页添加更多的元素，以及装饰，使得网页可以更加美观、便捷，能够使使用者更好的了解广告中所涉及的内容｡在学习设计过程中不断提高网页设计水平，通过看书，上网查询，求教老师等方法，不停的钻研、解决、提高，所设计的成果不论是外观还是内容，都在不停的进步、改进。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。虽然遇到了很多的问题，但在学习的过程中我们应当非常细心、耐心，改掉平时马虎的坏习惯。在准备阶段，我们可以用到曾经学习过的flash知识来制作动画和动态图，flash为我们提供了非常完善的图片绘制和编辑工具。可以直接绘画，十分灵活，而且他的“交互性”非常强。最后对制作成功的网页进行反复检查和思考，判断该网页到底能不能让浏览的顾客们眼前一亮，能不能让他们感受到网页制作者的体贴。在此，我收获甚多，不论是web的制作上还是理解和分析能力上都有了显著的提高，我将会更深入的学习这方面的知识，使他成为我未来工作生活中的一项技能。通过这半个月对Hbuilder的学习以及使用，我感受到了很多之前未曾感受到的东西，虽然学习的时间极为短暂，但我学会了很多平时在校园课堂上学不到的知识，使得我的大学校园生活得到了升华。此时，我深感夏季短学期的重要性，让我学会了如何去用Hbuilder去创建并编写网页，让我学会了作为一名网页制作这如何体会消费者和阅读者的思想，更让我学会了如何通过自己的双手来实现本不可能实现的事情，经过这次的实践活动，我仿佛找到了新的方向，曾经看到一本书上说：“不论是栖息于泥水，还是栖息于清水，只要不断向前游，终会成长为美丽的鱼”。学习既是如此，中国人自古讲究“成大事者，必先得天时、地利、人和”。但天赋之才若不经历岁月的打磨，便与常人无异；而占尽地利之人早晚也会将自然馈赠的资源消磨殆尽，唯有个人不断地努力才能是自己一跃而起，羡煞天纵之才。同时，通过这次实训中遇到的种种挫折，我还明白了，我们在未来的人生中，肯定会被强大的洪流所阻挠，导致一些事无法如意，到了那时不要在外界找原因，不要否定身边的一切，那样直白来说简直是浪费时间，每当这时请抱着“生活也就是这么回事”的心情来平复自己不甘心的情绪，冷静之后再做考虑。一定要怀抱斗志，不急躁，不泄气，不断重复改正试错，这样一定会得到好结果。此次实训短学期中，我学会了许多不曾了解的知识。曾看一部电影中说过：没有第二把利刃的人，是没有资格成为杀手的。学习更是如此，没有人会真正的一条路走到最后，期间可能会是岔路口甚至死路，有些人奉行着“即使撞了南墙也不回头”的信念，与生活拼的头破血流，虽然最后也获得了成功，但身上早已伤痕累累。“大丈夫能屈能伸”在这里并不是贬义词，而是一种智慧的表现，唯有给自己留了后路和备用方案的人才是真正的智者。而对我来说，短学期内学到的知识将会成为我未来生活道路上的第二把“利刃”，我会将其削尖、打磨，让它在我未来的生活中发光发亮，无论成功还是失败，都将成为我人生中不可或缺的一部分。附录：主界面：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>滚动轮播</title> <linkrel="stylesheet"href="css/lunbo.css"/> </head> <body> <divid="box"> <!--箭头--><!--插入图片--> <imgclass="leftBtn"src="img/left.png"/> <imgclass="rightBtn"src="img/right.png"/> <!--小方格--><!--创建八个小方格位于界面右下角，并作为轮播时的提示框--> <ul> <liclass="bg"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!--滚动图片--><!--插入八张图片--> <divid="imgBox"> <imgclass="first"src="img/ban1.jpg"/> <imgsrc="img/ban2.jpg"/> <imgsrc="img/ban3.jpg"/> <imgsrc="img/ban4.jpg"/> <imgsrc="img/ban5.jpg"/> <imgsrc="img/ban6.jpg"/> <imgsrc="img/ban7.jpg"/> <imgsrc="img/ban8.jpg"/> </div> </div> <scripttype="text/javascript"src="js/jquery-2.1.0.js"></script> <scripttype="text/javascript"src="js/lunbo.js"></script> </body></html>lunbo.js//jQuery是一个js库,他为我们封装了许多繁琐而常用的功能//只需要调用内部的方法,就能轻松实现炫酷的效果//jQuery基本语法:$(select).action//1.美元符号定义jQuery//2.select是选择器,完全兼容4种选择器//3.action为调用的函数//计时器vartimer=null;//初始化当前显示的图片下标varindex=0;//初始化即将显示的图片下标varnextIndex=0;autoPlay()//封装函数,开始轮播functionautoPlay(){ timer=setInterval(function(){ nextIndex++; if(nextIndex>7){ nextIndex=0; } scrollPlay(); index=nextIndex; },1000);}//封装函数，滑动动画functionscrollPlay(){ $("ulli").eq(nextIndex).addClass("bg").siblings().removeClass("bg")// 向左滑动 if(index<nextIndex){// eq():选择器选取指定的下标值元素// stop():关闭多余的动画效果// animate():修改某个值// 为图片下标设置初始位置 $("#imgBoximg").eq(index).stop(true,true).animate({left:"-720px"}); $("#imgBoximg").eq(nextIndex).css("left","720px").stop(true,true).animate({left:"0px"}); }// 为图片框添加动画效果 elseif(index>nextIndex){ $("#imgBoximg").eq(index).stop(true,true).animate({left:"-720px"}); $("#imgBoximg").eq(nextIndex).css("left","720px").stop(true,true).animate({left:"0px"}); }}//当鼠标悬停在小方格上方时$("ulli").mouseover(function(){// 清除计时器 clearInterval(timer);// 获取小方格下标，并自动播放 nextIndex=$(this).index(); scrollPlay(); index=nextIndex;}).mouseout(function(){ autoPlay();})//点击右箭头时为index赋值nextIndex并自动播放，若nextIndex值大于7则归零$("#box.rightBtn").click(function(){ clearInterval(timer); nextIndex++; if(nextIndex>7){ nextIndex=0; } scrollPlay(); index=nextIndex; autoPlay();});//点击左箭头时为index赋值nextIndex并自动播放，若nextIndex值小于0则为其赋值为7$("#box.leftBtn").click(function(){ clearInterval(timer); nextIndex--; if(nextIndex<0){ nextIndex=7; } scrollPlay(); index=nextIndex; autoPlay();});lunbo.css/*将代码格式设置为utf-8，避免在编译时出现格式错误*/@charset"utf-8";*{ m