利用Hbuilder設(shè)計(jì)網(wǎng)頁

利用Hbuilder設(shè)計(jì)網(wǎng)頁一、實(shí)踐目的1.素養(yǎng)提升（1）心智訓(xùn)練（2）計(jì)算機(jī)軟件編程及分析能力通過夏季短學(xué)期過程中對(duì)Hbuilder的學(xué)習(xí)和使用極大地提高了我對(duì)計(jì)算機(jī)軟件編程的理解，以及在數(shù)據(jù)分析方面能力的提升。在學(xué)習(xí)過程中，每天課堂上老師的悉心教導(dǎo)使我學(xué)會(huì)了使用方法，課后完成一份編程作業(yè)，使得我對(duì)Hbuilder的運(yùn)用越來越熟練，每周的小組測驗(yàn)也使我加強(qiáng)了與人溝通的能力，并且通過交流彌補(bǔ)缺陷與不足，提高分析能力，對(duì)Hbuilder的運(yùn)用也更加游刃有余。2.培養(yǎng)實(shí)踐能力和創(chuàng)新精神理論聯(lián)系實(shí)際，將課上所學(xué)與實(shí)踐相結(jié)合，提高動(dòng)手能力，并進(jìn)一步培養(yǎng)創(chuàng)新精神，以此為未來更好地融入社會(huì)生活打下堅(jiān)實(shí)的基礎(chǔ)。3.聯(lián)系大學(xué)知識(shí)，拓寬學(xué)習(xí)思路將夏季短學(xué)期中學(xué)到的內(nèi)容和大學(xué)中所學(xué)的知識(shí)有機(jī)結(jié)合起來，拓寬學(xué)習(xí)的思路，充實(shí)大腦，為以后校園學(xué)習(xí)生活中對(duì)專業(yè)課的理解起到鋪墊的作用。二、實(shí)踐內(nèi)容1.確定實(shí)習(xí)成果作業(yè)題目：設(shè)計(jì)能夠滾動(dòng)輪播的廣告網(wǎng)頁，主要是通過輪播圖片來使瀏覽者了解網(wǎng)頁中所設(shè)計(jì)的廣告項(xiàng)目。2.設(shè)計(jì)主題：主題內(nèi)容要求簡潔清晰，給人以眼前一亮的感覺，所以網(wǎng)頁的主題采用簡明的白色，使瀏覽者直觀的、輕松愉悅的瀏覽頁面，不會(huì)給視覺上造成困擾。3.材料收集：主要在網(wǎng)站中收集所需要的資料，并輔以查閱書籍補(bǔ)充盲區(qū)，視頻、圖片、文字、相關(guān)新聞消息等都是需要收集的。收集過后加以整理，取其精華、棄其糟粕，成為此后的頁面設(shè)計(jì)的根本。網(wǎng)頁設(shè)計(jì)：網(wǎng)頁由網(wǎng)頁標(biāo)題、廣告圖片，廣告輪播滑動(dòng)動(dòng)畫以及自選小方格組成。其中包括了八個(gè)輪播的廣告圖片，供給瀏覽者自行選擇。5.網(wǎng)頁制作工具：Hbuilder及其他圖片處理軟件。6.實(shí)踐過程：(1)主界面設(shè)置：主界面是整個(gè)網(wǎng)頁設(shè)計(jì)中極為重要的一部分，界面正中央通過img插入輪播圖片，構(gòu)成整個(gè)網(wǎng)頁的主體部分，再通過div設(shè)計(jì)，使得圖片能夠輪播，并為輪播方便而插入了按鍵和小方格。(2)手動(dòng)輪播設(shè)置：通過使用jQuery，進(jìn)行輪播設(shè)置，以達(dá)到方便快捷的效果，并因此而簡化了原本及其繁瑣的代碼內(nèi)容，而且只需要調(diào)用內(nèi)部的方法,就能輕松實(shí)現(xiàn)炫酷的效果。運(yùn)用jQuery設(shè)計(jì)輪播時(shí)所使用的手動(dòng)按鈕，為其加上手動(dòng)輪播時(shí)所需要的小箭頭以及方便快速選擇廣告圖片的小方格，來滿足消費(fèi)者自行查看的需要。(3)輪播區(qū)域設(shè)置：輪播區(qū)域設(shè)置在主界面中上方的位置，為凸顯輪播區(qū)域，在輪播廣告圖片的外圍加上藍(lán)色邊框，使得瀏覽者更加清晰的看到廣告。(4)代碼：見附錄三、實(shí)踐體會(huì)通過為期半個(gè)月的學(xué)校夏季短學(xué)期教育，我對(duì)Hbuilder有了充分的了解和認(rèn)識(shí)，在課堂上完成隨堂的小測試，課后完成的編程作業(yè)都使我學(xué)會(huì)了Hbuilder的應(yīng)用方法，并將其融會(huì)貫通。我知道了Hbuilder是一款本身主題由Java編寫的Web開發(fā)軟件。同時(shí)我也知道了Hbuilder的用法，例如：div是html(超文本用語)中的一個(gè)要素，div++css是網(wǎng)頁的布局要領(lǐng)，div+css包含行內(nèi)樣式、內(nèi)嵌式、鏈接式、導(dǎo)入式、css選擇器、標(biāo)記選擇器、類別選擇、id選擇器、選擇器聲明、css繼承。諸如此類的知識(shí)有很多，在這半個(gè)月的學(xué)習(xí)中將其融會(huì)貫通，有所收獲。這次實(shí)訓(xùn)項(xiàng)目是以網(wǎng)頁維護(hù)和制作網(wǎng)頁的形式開展的，通過課堂上老師的講解和課下仔細(xì)的鉆研，我們學(xué)會(huì)了Hbuilder的使用，收獲頗多，并為日后的工作需要打下了基礎(chǔ)。首先，此次網(wǎng)頁設(shè)計(jì)的主題內(nèi)容大致為：標(biāo)題：該網(wǎng)頁的標(biāo)題為滾動(dòng)輪播。主題：以銷售廣告的輪播為主題。主界面部分：以整篇網(wǎng)頁中上部的廣告滾動(dòng)輪播為主體，背景設(shè)置為空白，是瀏覽者能夠清晰的看見廣告圖片。輪播區(qū)域部分：輪播區(qū)域中包括八張廣告圖片，每張圖片都有不同的內(nèi)容，且都對(duì)應(yīng)一個(gè)能夠供瀏覽者自行選擇的小方格，在輪播區(qū)域的左右兩端設(shè)有能供手動(dòng)左右滑動(dòng)廣告圖片的小箭頭，也是為方便瀏覽者使用而設(shè)計(jì)。在圖片外圍又設(shè)有藍(lán)色的外邊框，能夠是使用者的目光瞬間被吸引，使輪播廣告能夠被觀測到。其次，我們對(duì)jQuery和css有了一定的了解。jQuery：jQuery是一個(gè)集快速、簡潔于一身的JavaScript框架，是一個(gè)非常優(yōu)秀的JavaScript框架，雖然擁有同樣功能的也有早期的Prototype等，但是jQuery有著它們所不具備的特點(diǎn)。jQuery設(shè)計(jì)的宗旨是"writeLess，DoMore"，也就是提倡我們通過寫更少的代碼，做更多的事情，以此省去大量本沒有必要的時(shí)間，達(dá)到快速便捷的效果。對(duì)經(jīng)常加班加點(diǎn)工作的程序員們有著至關(guān)重要的作用。它的其中JavaScript框架常用的功能代碼，為我們提供一種極度簡便的設(shè)計(jì)模式，優(yōu)化了事件處理、HTML文檔操作、Ajax交互和動(dòng)畫設(shè)計(jì)等。jQuery的核心特性可以總結(jié)為:具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口;具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展;擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器，如FF1.5+、IE6.0+、Opera9.0+、Safari2.0+等。而我在制作網(wǎng)頁的過程中，由于需要編寫能夠使瀏覽者用手動(dòng)進(jìn)行廣告輪播，已達(dá)到主動(dòng)瀏覽的目的的程序，所以我選擇了使用jQuery進(jìn)行設(shè)計(jì)。它能夠使我在此處編寫的代碼進(jìn)行了極簡的處理，節(jié)省大量時(shí)間去做后續(xù)任務(wù)。它也還設(shè)計(jì)清晰的多功能接口，所以我用jQuery設(shè)計(jì)輪播，使得我的廣告能夠自動(dòng)左右滑動(dòng)輪播，達(dá)到制作輪播廣告動(dòng)畫網(wǎng)頁的目的，以極快的速度制作出整篇網(wǎng)頁的主體部分，為后續(xù)做網(wǎng)頁細(xì)節(jié)的處理提供了便利條件。2.css：css也就是層疊樣式表，其英文的全稱為：CascadingStyleSheets，它是一種用來表現(xiàn)標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用(也就是HTML)或標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集(也就是XML)等樣式的計(jì)算機(jī)語言。css可以靜態(tài)地修飾網(wǎng)頁，而且還可以通過配合腳本語言，從而實(shí)現(xiàn)對(duì)網(wǎng)頁元素動(dòng)態(tài)的進(jìn)行格式化。css能夠?qū)W(wǎng)頁中各個(gè)元素位置的排版進(jìn)行像素級(jí)的精確控制，它支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力。我在編寫網(wǎng)頁代碼的過程中，運(yùn)用css，將代碼格式設(shè)置為utf-8，避免在編譯時(shí)出現(xiàn)格式錯(cuò)誤，并在此基礎(chǔ)上，為了使得瀏覽者著重觀察正在輪播中的廣告，瞬間就吸引住他們的眼球，我在輪播的廣告外圍加上了藍(lán)色的邊框，并設(shè)置其為高344寬為720。由于之前沒有注意到過多的細(xì)節(jié)，使得邊框線與廣告圖片一起滾動(dòng)，而雖然圖片進(jìn)入了下一張，但是邊框線卻因此消失，所以在經(jīng)歷了失敗之后，我重新編寫此處代碼，將藍(lán)色邊框設(shè)置為相對(duì)位置，避免在圖片滾動(dòng)時(shí)由于位置問題導(dǎo)致邊框線與圖片一起滾動(dòng)，進(jìn)而導(dǎo)致外邊框消失。也是通過這次的問題，我明白了細(xì)節(jié)以及前瞻性的重要性，即使代碼編寫沒有任何錯(cuò)誤，但若不注意整體設(shè)置的把控，形成結(jié)果之后，是否像想象中的那種標(biāo)準(zhǔn)一目了然，不論是在網(wǎng)頁制作還是學(xué)習(xí)過程中都是如此。最后，Hbuilder的主要功能是web的開發(fā)軟件，也就是制作網(wǎng)頁的軟件，通過這次實(shí)訓(xùn)，我了解到，在制作網(wǎng)頁的過程中，細(xì)心是最基本的原則，尤其是在敲寫代碼的過程中，一個(gè)細(xì)微的錯(cuò)誤都會(huì)導(dǎo)致整篇代碼無法運(yùn)行，為此我也吃了不少苦頭，甚至有時(shí)為了找到問題而重新翻閱整篇代碼，不僅浪費(fèi)時(shí)間，而且更容易出錯(cuò)。為此我認(rèn)識(shí)到要想減少失誤的概率，首先就是要在編寫代碼前明確主題內(nèi)容，并全程圍繞此主題展開；其次，要設(shè)身處地的考慮用戶的感受，將自己化身成為作品的用戶，思考在使用的時(shí)候會(huì)有哪些不便和不足，以此作為之后首要攻克的目標(biāo)；最后，一定要注意優(yōu)化內(nèi)容，在版式，框架等的安排上不僅要注重用戶的體驗(yàn)，還要強(qiáng)調(diào)實(shí)用型，這樣才會(huì)吸引更多人的目光。實(shí)踐主要利用hbuilder軟件設(shè)計(jì)廣告輪播網(wǎng)頁，利用已經(jīng)學(xué)習(xí)到的div做為整個(gè)網(wǎng)頁最主要的框架部分，然后根據(jù)實(shí)際情況添加圖片的種類，為廣告輪播網(wǎng)頁添加更多的元素，以及裝飾，使得網(wǎng)頁可以更加美觀、便捷，能夠使使用者更好的了解廣告中所涉及的內(nèi)容?在學(xué)習(xí)設(shè)計(jì)過程中不斷提高網(wǎng)頁設(shè)計(jì)水平，通過看書，上網(wǎng)查詢，求教老師等方法，不停的鉆研、解決、提高，所設(shè)計(jì)的成果不論是外觀還是內(nèi)容，都在不停的進(jìn)步、改進(jìn)?？梢哉f在自己動(dòng)手，不斷實(shí)踐的過程中，網(wǎng)頁設(shè)計(jì)水平得到了很大的提高。雖然遇到了很多的問題，但在學(xué)習(xí)的過程中我們應(yīng)當(dāng)非常細(xì)心、耐心，改掉平時(shí)馬虎的壞習(xí)慣。在準(zhǔn)備階段，我們可以用到曾經(jīng)學(xué)習(xí)過的flash知識(shí)來制作動(dòng)畫和動(dòng)態(tài)圖，flash為我們提供了非常完善的圖片繪制和編輯工具?？梢灾苯永L畫，十分靈活，而且他的“交互性”非常強(qiáng)。最后對(duì)制作成功的網(wǎng)頁進(jìn)行反復(fù)檢查和思考，判斷該網(wǎng)頁到底能不能讓瀏覽的顧客們眼前一亮，能不能讓他們感受到網(wǎng)頁制作者的體貼。在此，我收獲甚多，不論是web的制作上還是理解和分析能力上都有了顯著的提高，我將會(huì)更深入的學(xué)習(xí)這方面的知識(shí)，使他成為我未來工作生活中的一項(xiàng)技能。通過這半個(gè)月對(duì)Hbuilder的學(xué)習(xí)以及使用，我感受到了很多之前未曾感受到的東西，雖然學(xué)習(xí)的時(shí)間極為短暫，但我學(xué)會(huì)了很多平時(shí)在校園課堂上學(xué)不到的知識(shí)，使得我的大學(xué)校園生活得到了升華。此時(shí)，我深感夏季短學(xué)期的重要性，讓我學(xué)會(huì)了如何去用Hbuilder去創(chuàng)建并編寫網(wǎng)頁，讓我學(xué)會(huì)了作為一名網(wǎng)頁制作這如何體會(huì)消費(fèi)者和閱讀者的思想，更讓我學(xué)會(huì)了如何通過自己的雙手來實(shí)現(xiàn)本不可能實(shí)現(xiàn)的事情，經(jīng)過這次的實(shí)踐活動(dòng)，我仿佛找到了新的方向，曾經(jīng)看到一本書上說：“不論是棲息于泥水，還是棲息于清水，只要不斷向前游，終會(huì)成長為美麗的魚”。學(xué)習(xí)既是如此，中國人自古講究“成大事者，必先得天時(shí)、地利、人和”。但天賦之才若不經(jīng)歷歲月的打磨，便與常人無異；而占盡地利之人早晚也會(huì)將自然饋贈(zèng)的資源消磨殆盡，唯有個(gè)人不斷地努力才能是自己一躍而起，羨煞天縱之才。同時(shí)，通過這次實(shí)訓(xùn)中遇到的種種挫折，我還明白了，我們?cè)谖磥淼娜松?，肯定?huì)被強(qiáng)大的洪流所阻撓，導(dǎo)致一些事無法如意，到了那時(shí)不要在外界找原因，不要否定身邊的一切，那樣直白來說簡直是浪費(fèi)時(shí)間，每當(dāng)這時(shí)請(qǐng)抱著“生活也就是這么回事”的心情來平復(fù)自己不甘心的情緒，冷靜之后再做考慮。一定要懷抱斗志，不急躁，不泄氣，不斷重復(fù)改正試錯(cuò)，這樣一定會(huì)得到好結(jié)果。此次實(shí)訓(xùn)短學(xué)期中，我學(xué)會(huì)了許多不曾了解的知識(shí)。曾看一部電影中說過：沒有第二把利刃的人，是沒有資格成為殺手的。學(xué)習(xí)更是如此，沒有人會(huì)真正的一條路走到最后，期間可能會(huì)是岔路口甚至死路，有些人奉行著“即使撞了南墻也不回頭”的信念，與生活拼的頭破血流，雖然最后也獲得了成功，但身上早已傷痕累累。“大丈夫能屈能伸”在這里并不是貶義詞，而是一種智慧的表現(xiàn)，唯有給自己留了后路和備用方案的人才是真正的智者。而對(duì)我來說，短學(xué)期內(nèi)學(xué)到的知識(shí)將會(huì)成為我未來生活道路上的第二把“利刃”，我會(huì)將其削尖、打磨，讓它在我未來的生活中發(fā)光發(fā)亮，無論成功還是失敗，都將成為我人生中不可或缺的一部分。附錄：主界面：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>滾動(dòng)輪播</title> <linkrel="stylesheet"href="css/lunbo.css"/> </head> <body> <divid="box"> <!--箭頭--><!--插入圖片--> <imgclass="leftBtn"src="img/left.png"/> <imgclass="rightBtn"src="img/right.png"/> <!--小方格--><!--創(chuàng)建八個(gè)小方格位于界面右下角，并作為輪播時(shí)的提示框--> <ul> <liclass="bg"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!--滾動(dòng)圖片--><!--插入八張圖片--> <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是一個(gè)js庫,他為我們封裝了許多繁瑣而常用的功能//只需要調(diào)用內(nèi)部的方法,就能輕松實(shí)現(xiàn)炫酷的效果//jQuery基本語法:$(select).action//1.美元符號(hào)定義jQuery//2.select是選擇器,完全兼容4種選擇器//3.action為調(diào)用的函數(shù)//計(jì)時(shí)器vartimer=null;//初始化當(dāng)前顯示的圖片下標(biāo)varindex=0;//初始化即將顯示的圖片下標(biāo)varnextIndex=0;autoPlay()//封裝函數(shù),開始輪播functionautoPlay(){ timer=setInterval(function(){ nextIndex++; if(nextIndex>7){ nextIndex=0; } scrollPlay(); index=nextIndex; },1000);}//封裝函數(shù)，滑動(dòng)動(dòng)畫functionscrollPlay(){ $("ulli").eq(nextIndex).addClass("bg").siblings().removeClass("bg")// 向左滑動(dòng) if(index<nextIndex){// eq():選擇器選取指定的下標(biāo)值元素// stop():關(guān)閉多余的動(dòng)畫效果// animate():修改某個(gè)值// 為圖片下標(biāo)設(shè)置初始位置 $("#imgBoximg").eq(index).stop(true,true).animate({left:"-720px"}); $("#imgBoximg").eq(nextIndex).css("left","720px").stop(true,true).animate({left:"0px"}); }// 為圖片框添加動(dòng)畫效果 elseif(index>nextIndex){ $("#imgBoximg").eq(index).stop(true,true).animate({left:"-720px"}); $("#imgBoximg").eq(nextIndex).css("left","720px").stop(true,true).animate({left:"0px"}); }}//當(dāng)鼠標(biāo)懸停在小方格上方時(shí)$("ulli").mouseover(function(){// 清除計(jì)時(shí)器 clearInterval(timer);// 獲取小方格下標(biāo)，并自動(dòng)播放 nextIndex=$(this).index(); scrollPlay(); index=nextIndex;}).mouseout(function(){ autoPlay();})//點(diǎn)擊右箭頭時(shí)為index賦值nextIndex并自動(dòng)播放，若nextIndex值大于7則歸零$("#box.rightBtn").click(function(){ clearInterval(timer); nextIndex++; if(nextIndex>7){ nextIndex=0; } scrollPlay(); index=nextIndex; autoPlay();});//點(diǎn)擊左箭頭時(shí)為index賦值nextIndex并自動(dòng)播放，若nextIndex值小于0則為其賦值為7$("#box.leftBtn").click(function(){ clearInterval(timer); nextIndex--; if(nextIndex<0){ nextIndex=7; } scrollPlay(); index=nextIndex; autoPlay();});lunbo.css/*將代碼格式設(shè)置為utf-8，避免在編譯時(shí)出現(xiàn)格式錯(cuò)誤*/@charset"utf-8";*{ m