利用Hbuilder设计网页

利用Hbuilder设计网页

一、实践目的素养提升

1.心智训练1计算机软件编程及分析能力2通过夏季短学期过程中对的学习和使用极大地提高了我对计算机软Hbuilder件编程的理解，以及在数据分析方面能力的提升在学习过程中，每天课堂上老师的悉心教导使我学会了使用方法，课后完成一份编程作业，使得我对Hbuilder的运用越来越熟练，每周的小组测验也使我加强了与人沟通的能力，并且通过交流弥补缺陷与不足，提高分析能力，对的运用也更加游刃有余Hbuilder培养实践能力和创新精神

2.理论联系实际，将课上所学与实践相结合，提高动手能力，并进一步培养创新精神，以此为未来更好地融入社会生活打下坚实的基础.联系大学知识，拓宽学习思路3将夏季短学期中学到的内容和大学中所学的知识有机结合起来，拓宽学习的思

二、实路，充实大脑，为以后校园学习生活中对专业课的理解起到铺垫的作用践内容.确定实习成果作业题目1设计能够滚动轮播的广告网页，主要是通过轮播图片来使浏览者了解网页中所设计的广告项目设计主题

2.主题内容要求简洁清晰，给人以眼前一亮的感觉，所以网页的主题采用简明的白色，使浏览者直观的、轻松愉悦的浏览页面，不会给视觉上造成困扰材料收集

3.主要在网站中收集所需要的资料，并辅以查阅书籍补充盲区，视频、图片、文字、相关新闻消息等都是需要收集的收集过后加以整理，取其精华、弃其糟粕，成为此后的页面设计的根本网页设计

4.网页由网页标题、广告图片，广告轮播滑动动画以及自选小方格组成其中包括了八个轮播的广告图片，供给浏览者自行选择#imgBox{position:absolute;width:720px;height:344px;top:Opx;left:Opx;#imgBox img{position:absolute;top:Opx;left:720px;#imgBox.first{top:Opx;left:Opx;#box ul.bg{background:blueviolet;网页制作工具

5.及其他图片处理软件Hbuilder实践过程

6.主界面设置1主界面是整个网页设计中极为重要的一部分，界面正中央通过插入轮播图img片，构成整个网页的主体部分，再通过设计，使得图片能够轮播，并为轮播方div便而插入了按键和小方格手动轮播设置2通过使用，进行轮播设置，以达到方便快捷的效果，并因此而简化了原jQue”本及其繁琐的代码内容，而且只需要调用内部的方法，就能轻松实现炫酷的效果运用设计轮播时所使用的手动按钮，为其加上手动轮播时所需要的小jQuery箭头以及方便快速选择广告图片的小方格，来满足消费者自行查看的需要轮3播区域设置轮播区域设置在主界面中上方的位置，为凸显轮播区域，在轮播广告图片的外围加上蓝色边框，使得浏览者更加清晰的看到广告代码见附录4

三、实践体会通过为期半个月的学校夏季短学期教育，我对有了充分的了解和认Hbuilder识，在课堂上完成随堂的小测试,课后完成的编程作业都使我学会了的应Hbuilder用方法，并将其融会贯通我知道了是一款本身主题由编写的Hbuilder JavaWeb开发软件同时我也知道了的用法，例如是超文本用语中Hbuilder divhtml的一个要素，是网页的布局要领，包含行内样式、内嵌式、链接div++css div+css式、导入式、选择器、标记选择器、类别选择、选择器、选择器声明、css idcss继承诸如此类的知识有很多，在这半个月的学习中将其融会贯通，有所收获这次实训项目是以网页维护和制作网页的形式开展的，通过课堂上老师的讲解和课下仔细的钻研，我们学会了的使用，收获颇多，并为日后的工作需Hbuilder要打下了基础首先，此次网页设计的主题内容大致为标题该网页的标题为滚动轮播

1.主题以销售广告的轮播为主题

2.主界面部分以整篇网页中上部的广告滚动轮播为主体，背景设置为空白，是

3.浏览者能够清晰的看见广告图片轮播区域部分轮播区域中包括八张广告图片，每张图片都有不同的内容，且

4.都对应一个能够供浏览者自行选择的小方格，在轮播区域的左右两端设有能供手动左右滑动广告图片的小箭头，也是为方便浏览者使用而设计在图片外围又设有蓝色的外边框，能够是使用者的目光瞬间被吸引，使轮播广告能够被观测到其次，我们对和有了一定的了解jQueiy css

1.jQuery是一个集快速、简洁于一身的框架，是一个非常优秀的jQuery JavaScript框架，虽然拥有同样功能的也有早期的等，但是有着它JavaScript PrototypejQuery们所不具备的特点设计的宗旨是也就是提倡我们通过写更少的代码，jQuery writeLess,Do More”,做更多的事情，以此省去大量本没有必要的时间，达到快速便捷的效果对经常加班加点工作的程序员们有着至关重要的作用它的其中框架常用的功JavaScript能代码，为我们提供一种极度简便的设计模式，优化了事件处理、文档操作、HTML交互和动画设计等Ajax的核心特性可以总结为具有独特的链式语法和短小清晰的多功能接jQuery口；具有高效灵活的选择器，并且可对选择器进行扩展;拥有便捷的插件css CSS扩展机制和丰富的插件兼容各种主流浏览器，如、、jQuery FF

1.5+IE

6.0+Opera、等

9.0+Safari

2.0+而我在制作网页的过程中，由于需要编写能够使浏览者用手动进行广告轮播，已达到主动浏览的目的的程序，所以我选择了使用进行设计它能够使我jQuery在此处编写的代码进行了极简的处理，节省大量时间去做后续任务它也还设计清晰的多功能接口，所以我用设计轮播，使得我的广告能够自动左右滑动轮jQueu播，达到制作轮播广告动画网页的目的，以极快的速度制作出整篇网页的主体部分，为后续做网页细节的处理提供了便利条件

2.css也就是层叠样式表，其英文的全称为它是一种用css CascadingStyle Sheets,来表现标准通用标记语言的一个应用（也就是）或标准通用标记语言的一HTML个子集（也就是）等样式的计算机语言可以静态地修饰网页，而且还可XML css以通过配合脚本语言，从而实现对网页元素动态的进行格式化能够对网页中各个元素位置的排版进行像素级的精确控制，它支持几乎所css有的字体字号样式，拥有对网页对象和模型样式编辑的能力我在编写网页代码的过程中，运用将代码格式设置为避免在编译时css,utf-8,出现格式错误，并在此基础上，为了使得浏览者着重观察正在轮播中的广告，瞬间就吸引住他们的眼球，我在轮播的广告外围加上了蓝色的边框，并设置其为高宽为344720o由于之前没有注意到过多的细节，使得边框线与广告图片一起滚动，而虽然图片进入了下一张，但是边框线却因此消失，所以在经历了失败之后，我重新编写此处代码，将蓝色边框设置为相对位置，避免在图片滚动时由于位置问题导致边框线与图片一起滚动，进而导致外边框消失也是通过这次的问题，我明白了细节以及前瞻性的重要性，即使代码编写没有任何错误，但若不注意整体设置的把控，形成结果之后，是否像想象中的那种标准一目了然，不论是在网页制作还是学习过程中都是如此最后，的主要功能是的开发软件，也就是制作网页的软件，通Hbuilder web过这次实训，我了解到，在制作网页的过程中，细心是最基本的原则，尤其是在敲写代码的过程中，一个细微的错误都会导致整篇代码无法运行，为此我也吃了不少苦头，甚至有时为了找到问题而重新翻阅整篇代码，不仅浪费时间，而且更容易出错为此我认识到要想减少失误的概率，首先就是要在编写代码前明确主题内容，并全程围绕此主题展开；其次，要设身处地的考虑用户的感受，将自己化身成为作品的用户，思考在使用的时候会有哪些不便和不足，以此作为之后首要攻克的目标；最后，一定要注意优化内容，在版式，框架等的安排上不仅要注重用户的体验，还要强调实用型，这样才会吸引更多人的目光实践主要利用软件设计广告轮播网页，利用已经学习到的做为整hbuilder div个网页最主要的框架部分，然后根据实际情况添加图片的种类，为广告轮播网页添加更多的元素，以及装饰，使得网页可以更加美观、便捷，能够使使用者更好的了解广告中所涉及的内容在学习设计过程中不断提高网页设计水平，通过看书，上网查询，求教老师等方法，不停的钻研、解决、提高，所设计的成果不论是外观还是内容，都在不停的进步、改进可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高虽然遇到了很多的问题，但在学习的过程中我们应当非常细心、耐心，改掉平时马虎的坏习惯在准备阶段，我们可以用到曾经学习过的知识来制作动画和动态图，flash flash为我们提供了非常完善的图片绘制和编辑工具可以直接绘画，十分灵活,而且他的“交互性”非常强最后对制作成功的网页进行反复检查和思考，判断该网页到底能不能让浏览的顾客们眼前一亮，能不能让他们感受到网页制作者的体贴在此，我收获甚多，不论是的制作上还是理解和分析能力上都有了显著web的提高，我将会更深入的学习这方面的知识，使他成为我未来工作生活中的一项技能通过这半个月对的学习以及使用，我感受到了很多之前未曾感受到Hbuilder的东西，虽然学习的时间极为短暂，但我学会了很多平时在校园课堂上学不到的知识，使得我的大学校园生活得到了升华此时，我深感夏季短学期的重要性,让我学会了如何去用去创建并编写网页，让我学会了作为一名网页制作这Hbuilder如何体会消费者和阅读者的思想，更让我学会了如何通过自己的双手来实现本不可能实现的事情，经过这次的实践活动，我仿佛找到了新的方向，曾经看到一本书上说“不论是栖息于泥水，还是栖息于清水，只要不断向前游，终会成长为美丽的鱼”学习既是如此，中国人自古讲究“成大事者，必先得天时、地利、人和”但天赋之才若不经历岁月的打磨，便与常人无异；而占尽地利之人早晚也会将自然馈赠的资源消磨殆尽，唯有个人不断地努力才能是自己一跃而起，羡煞天纵之才同时，通过这次实训中遇到的种种挫折，我还明白了，我们在未来的人生中,肯定会被强大的洪流所阻挠，导致一些事无法如意，到了那时不要在外界找原因,不要否定身边的一切，那样直白来说简直是浪费时间，每当这时请抱着“生活也就是这么回事”的心情来平复自己不甘心的情绪，冷静之后再做考虑一定要怀抱斗志，不急躁，不泄气，不断重复改正试错，这样一定会得到好结果此次实训短学期中，我学会了许多不曾了解的知识曾看一部电影中说过没有第二把利刃的人，是没有资格成为杀手的学习更是如此，没有人会真正的一条路走到最后，期间可能会是岔路口甚至死路，有些人奉行着“即使撞了南墙也不回头”的信念，与生活拼的头破血流，虽然最后也获得了成功，但身上早已伤痕累累“大丈夫能屈能伸”在这里并不是贬义词，而是一种智慧的表现，唯有给自己留了后路和备用方案的人才是真正的智者而对我来说，短学期内学到的知识将会成为我未来生活道路上的第二把“利刃”，我会将其削尖、打磨，让它在我未来的生活中发光发亮，无论成功还是失败，都将成为我人生中不可或缺的一部分附录.主界面!DOCTYPE htmlhtmlheadmetacharset=utf-8”/滚动轮播v/titlelink rel=nstylesheetn href=ncss/lunbo.cssn//headbody二〉div idbox!--箭头!--插入图片img class=nleftBtnn src=nimg/left.pngn/img class=nrightBtnn src=Himg/right.pngH/!--小方格!--创建八个小方格位于界面右下角，并作为轮播时的提示框ulli class=nbgnx/lilix/lilix/lilix/lilix/lilix/lilix/lilix/li/ul!--滚动图片!--插入八张图片div id=nimgBoxnimg class=first src=Himg/banl.jpg*7img src=nimg/ban

2.jpgn/img src=nimg/ban

3.jpgn/img src=nimg/ban

4.jpgn/img src=nimg/ban

5.jpgn/img src=nimg/ban

6.jpgn/img src=nimg/ban

7.jpgH/img src=nimg/ban

8.jpgn//div/divscript type=11text/j avascript11src=njs/jquery-

2.

1.

0.jsnx/scriptscript type=Htext/javascriptn src=njs/lunbojsn/script/body/htmllunbo.js是一个库，他为我们封装了许多繁琐而常用的功能//jQuery js〃只需要调用内部的方法，就能轻松实现炫酷的效果基本语法://jQuery$select.action美元符号定义//I.jQuery是选择器，完全兼容种选择器//

2.select4为调用的函数//

3.action//计时器var timer=null;//初始化当前显示的图片下标var index=0;//初始化即将显示的图片下标var nextIndex=O;autoPlay〃封装函数，开始轮播function autoPlay{timer=setlntervalfunction{nextlndex++;ifnextlndex7{next!ndex=O;scrollPlayO;index=nextlndex;}J000;//封装函数，滑动动画function scrollPlay{$nul lin.eqnextIndex.addClassnbgn.siblings.removeClassnbgn//向左滑动ifindexnextlndex{选择器选取指定的下标值元素//eq::关闭多余的动画效果//stop修改某个值//animate://为图片下标设置初始位置$H#imgBox imgn.eqindex.stoptrue,true.animate{left:n-720pxn}；$H#imgBoximgn.eqnextIndex.cssnleft，V，720pxn.stoptrue,true.animate{left:n0pxn}；//为图片框添加动画效果else ifindexnextlndex{$H#imgBox imgn.eqindex.stoptrue,true,animate{left:H-720pxn}；$H#imgBoximgH.eqnextIndex.cssHleftn,n720pxn.stoptrue,true.animate{left:n0pxH}；〃当鼠标悬停在小方格上方时$nul lin.mouseoverfunction{//清除计时器clearlntervaltimer;//获取小方格下标，并自动播放nextlndex=$this.index;scrollPlayO;index=nextlndex;}.mouseoutfunction{autoPlay;〃点击右箭头时为赋值并自动播放，若值大于则归零index nextindex nextindex7$n#box.rightBtnH.clickfunction{clearlntervaltimer;nextlndex++;ifnextlndex7{nextIndex=0;scrollPlayO;index=nextlndex;autoPlay;〃点击左箭头时为赋值并自动播放，若值小于则为其index nextindexnextindex0赋值为7$n#box.leftBtnn.clickfunction{clearlntervaltimer;nextindex—;ifnextIndex0{nextlndex=7;scrollPlayO;二indexnextindex;autoPlayO;lunbo.css/*将代码格式设置为避免在编译时出现格式错误*/utf-8,@charset nutf-8n;margin:Opx;padding:Opx;/*最外层的盒子*//*设置其为高宽为将其设置为相对位置，避免在图片滚动时由于位置问题344720,导致边框线与图片一起滚动，进而导致外边框消失*/#box{position:relative;width:720px;height:344px;border:Ipx solidblueviolet;margin:50px auto;overflow:hidden;ul{position:absolute;right:50px;bottom:20px;z-index:9;ul li{width:20px;height:20px;border:Ipx solidblueviolet;float:left;margin-right:Opx5px;/*去掉小黑点*/list-style:none;border-radius:50%;.leftBtn{position:absolute;left:Opx;top:130px;z-index:9;.rightBtn{position:absolute;right:Opx;top:130px;z-index:9;。