垃圾分類網(wǎng)頁(yè)制作的實(shí)踐報(bào)告

成果形式：實(shí)踐報(bào)告成果名稱：垃圾分類網(wǎng)頁(yè)制作的實(shí)踐報(bào)告垃圾分類網(wǎng)頁(yè)制作一、實(shí)踐目的在創(chuàng)建環(huán)境友好型社會(huì)的今天，全世界對(duì)資源的可持續(xù)發(fā)展和再利用已經(jīng)相當(dāng)?shù)闹匾?，垃圾分類早已成為其中必定不可少的一部分。人們大量地消耗資源，且大量地產(chǎn)生著廢棄物。從2002年開(kāi)始我國(guó)政府提倡垃圾分類收集，但是效果卻不怎么理想。對(duì)于以上情況，我們組建了垃圾分類調(diào)查小組，了解人們對(duì)生活垃圾分類了解及實(shí)施情況，向人們宣傳垃圾分類的相關(guān)知識(shí)，為創(chuàng)建資源節(jié)約環(huán)境友好型社會(huì)做出一份努力。二、實(shí)踐內(nèi)容從小，我接受的教育就告訴我，垃圾是放錯(cuò)了地方的資源。我還是一個(gè)小孩子的時(shí)候，就知道電池是要分開(kāi)回收的。這就說(shuō)明，我們國(guó)家在教育這一點(diǎn)上做的是很好的。但我長(zhǎng)大后，卻看到很多人并沒(méi)有把電池放到專門回收的地方，甚至，我乃至很多人都不知道我們應(yīng)該把電池送到哪里回收。所以我覺(jué)得，以前雖然總有呼吁，我們街面上的垃圾桶也明顯的分為可回收和不可回收，但是我們監(jiān)管的力度還是遠(yuǎn)遠(yuǎn)不夠的。甚至可以說(shuō)是零監(jiān)管，無(wú)監(jiān)管。同時(shí)，很多時(shí)候我們并不知道自己手上所拿的是什垃圾，到底可回收，還是不可回收。作為一個(gè)普通的大學(xué)生，我一直來(lái)是很想為我國(guó)的環(huán)保事業(yè)做一點(diǎn)貢獻(xiàn)的，但是很多時(shí)候，各方面的因素都阻礙了我。當(dāng)不知道從哪天起，我的身邊突然刮起了一股垃圾分類風(fēng)，微博上，微信上，各種社交媒體上，到處都在討論著關(guān)于垃圾分類的事。我才知道，上海已經(jīng)率先開(kāi)始了實(shí)行垃圾分類的政策，當(dāng)時(shí)網(wǎng)上還有段子說(shuō)：“因?yàn)闆](méi)喝完的奶茶要倒進(jìn)下水道，奶茶里剩余的物料是濕垃圾，裝奶茶的杯子和吸管是干垃圾，而奶茶的杯蓋是可回收垃圾，這下上海人民都不敢喝珍珠奶茶了，生怕自己喝剩下不知道該怎么扔掉?！备阈Φ亩巫勇?tīng)一聽(tīng)就一笑而過(guò)，但上海市民應(yīng)該是真的會(huì)努力的好好垃圾分類。上海的政策是將垃圾分為四類，分別是可回收物、有害垃圾、濕垃圾和干垃圾。同時(shí)對(duì)投放也做了要求，要輕投輕放，清潔干燥而且避免污染，廢紙呢，要盡量平整一些，對(duì)于立體包裝的東西，要清空內(nèi)容物，清潔之后壓扁一點(diǎn)投放，那些邊角很尖銳的，也要包裹后在投放。上海的舉措很快引起了全國(guó)的共鳴，每個(gè)人都意識(shí)到垃圾分類已經(jīng)是一件刻不容緩的事情了。在我生活的城市西安，也已經(jīng)開(kāi)始了垃圾分類。我們的分類方式和上海略有一些不同。我們也將垃圾分為四類，但是是廚余垃圾、有害垃圾、可回收物和其他垃圾。當(dāng)我們組開(kāi)始事件的實(shí)踐的時(shí)候，西安的垃圾分類并沒(méi)有正式開(kāi)始實(shí)施。我和我們組里的其他成員就想著以垃圾分類為主題，同時(shí)那段時(shí)間我們學(xué)習(xí)了用Hbuilder來(lái)做網(wǎng)頁(yè)，于是我們決定，就用Hbuilder軟件來(lái)做一個(gè)有關(guān)于垃圾分類的網(wǎng)頁(yè)，幫助市民們更好地進(jìn)行垃圾分類，讓他們不至于拿著垃圾站在四個(gè)垃圾桶前面，不知該打開(kāi)哪一個(gè)蓋子。同時(shí)可以提高垃圾的資源利用價(jià)值和經(jīng)濟(jì)價(jià)值，力保做到物盡其用。三、實(shí)踐過(guò)程 在期末的時(shí)候，我有幸接觸到了Hbuilder這個(gè)軟件，同時(shí)了解到了這個(gè)軟件的使用方法以及特點(diǎn)，HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開(kāi)發(fā)IDE。它的編寫(xiě)用到了Java、C、Web和Ruby等語(yǔ)言。HBuilder本身主體是由Java編寫(xiě)，它基于Eclipse，所以順其自然地兼容了Eclipse的插件。這個(gè)軟件的軟件特點(diǎn)就是快，快是HBuilder的最大優(yōu)勢(shì)，通過(guò)一連串完整的語(yǔ)法提示和代碼輸入法、代碼塊等，非常大幅度的提高HTML、js、css的開(kāi)發(fā)效率。給碼農(nóng)們帶來(lái)了春天。同時(shí)我也發(fā)現(xiàn)了這個(gè)軟件的其他幾個(gè)優(yōu)點(diǎn)，首先，它的編碼比其他的工具快5倍；同時(shí)代碼輸入法可以按下數(shù)字快速選擇候選項(xiàng)；對(duì)于可編程代碼塊來(lái)說(shuō)一個(gè)代碼塊可以少敲50個(gè)按鍵；同時(shí)還有無(wú)死角提示：除了語(yǔ)法，還能提示ID、Class、圖片、鏈接、字體等；實(shí)在是非常好用。在經(jīng)過(guò)了兩個(gè)周地學(xué)習(xí)之后，我基本可以對(duì)這個(gè)軟件上手了，我興高采烈地讓老師教的每一個(gè)語(yǔ)句在腦海中跳躍，同時(shí)一邊和小組里的其他成員思考我們所要制作的網(wǎng)頁(yè)的界面設(shè)計(jì)啊，內(nèi)容啊等等。等到所有事情都商量完畢，這時(shí)候，真正的考驗(yàn)才剛剛開(kāi)始。我們需要做大量的調(diào)查，分清楚各個(gè)種類的垃圾有些什么，力保不錯(cuò)一個(gè)，如果我們作為指引都產(chǎn)生了錯(cuò)誤，市民更將如何正確的垃圾分類，我們的地球更將如何被保護(hù)。在調(diào)查之前我們?cè)诰W(wǎng)上查到了垃圾的危害以及垃圾分類的資料。資料顯示：垃圾中的有害物質(zhì)會(huì)污染土壤、大氣以及水體，不但浪費(fèi)了資源，還嚴(yán)重破壞了生態(tài)環(huán)境。垃圾大量堆放后，垃圾堆中會(huì)產(chǎn)生生物分解，在分解過(guò)程中生成甲烷氣，甲烷氣匯聚到一定程度就很非?？赡軙?huì)發(fā)生爆炸；垃圾中有豐富蛋白質(zhì)、脂類和糖類化合物，在常溫情況下，微生物分解有機(jī)物過(guò)程中產(chǎn)生NH3、H2S及有害的碳?xì)浠衔餁怏w，具有明顯的惡臭和毒性，直接危害人體；廢舊的電子電器產(chǎn)品，如果隨意丟棄，散落到環(huán)境中，會(huì)給人體健康造成危害，并對(duì)生態(tài)環(huán)境造成破壞。如電子垃圾中含有的有害重金屬元素，一旦進(jìn)入水體，會(huì)長(zhǎng)期危害水環(huán)境和周圍居民的人體健康。此外，電冰箱和空調(diào)的制冷劑、絕熱發(fā)泡劑中含有的氟里昂，一旦泄漏會(huì)破壞大氣環(huán)境，從而給人體健康帶來(lái)危害！如果我人類不采取措施妥善處理垃圾，最終我們會(huì)遭到報(bào)復(fù)，所以我們只能自救。我們調(diào)查到，主要的廚余垃圾有剩菜剩飯、骨頭、菜根菜葉等等食品類廢物，有害垃圾有廢電池、廢日光燈管、廢水銀溫度計(jì)、過(guò)期藥品等等，而可回收物有紙類、金屬、塑料、玻璃等等，最后，其他垃圾是除上述幾類垃圾之外的磚塊陶瓷、渣土、衛(wèi)生間廢紙等很難回收的廢棄物。同時(shí)我們還查到了一些垃圾的降解時(shí)間，令我十分震驚，原來(lái)我們生活中許多東西要自然降解，都需要很久很久，比如紙類是三到四個(gè)月，煙頭是一到五年，就連簡(jiǎn)簡(jiǎn)單單那一塊橘子皮，也要兩年才能自然降解。鐵罐則需要十年，皮革需要50年，易拉罐80到100年，塑料制品100到200年，最恐怖的則是玻璃瓶，需要4000年才能自然降解。這個(gè)數(shù)字太嚇人了。更讓我真真切切體會(huì)到，垃圾分類刻不容緩。如果做好垃圾分類，那這些難以降解的東西也許就可以被用在其他地方，繼續(xù)發(fā)光發(fā)熱。接下來(lái)我簡(jiǎn)單談一下我們制作垃圾分類網(wǎng)頁(yè)的過(guò)程。首先，我們把調(diào)查到的各類垃圾整理出來(lái)。其中可回收物有：塑料瓶、玻璃瓶、易拉罐、報(bào)紙、舊書(shū)包、牛奶盒、牙刷、舊鏡子、垃圾桶、舊帽子、塑料梳子、舊紙袋、玻璃壺、舊玩具、食品罐頭、舊夾子。廚余垃圾有：菜葉、橙皮、蔥、餅干、番茄醬、蛋殼、西瓜、馬鈴薯、魚(yú)骨、甘蔗、玉米、骨頭、蛋糕、面包、草莓、西紅柿。有害垃圾有：電池、打火機(jī)、創(chuàng)可貼、酒精、調(diào)色板、過(guò)期的膠囊藥物、熒光劑、殺蟲(chóng)劑、水彩筆、農(nóng)藥瓶、醫(yī)用紗布、口服液瓶、香水瓶、過(guò)期化妝品、發(fā)膠、廢棄燈泡。而其他垃圾有：舊浴缸、盆子、舊水槽、壞馬桶、化妝刷、貝殼、壇子、海綿、磚塊、衛(wèi)生紙、花生殼、籃球、桃核、杯子、煙蒂、渣土。這個(gè)調(diào)查的完成，讓我深深體會(huì)到前期的調(diào)查對(duì)于一次活動(dòng)的重要性，這個(gè)調(diào)查使我得到了很大的提升。前期的準(zhǔn)備工作順利完成，接下來(lái)我們就要正式開(kāi)始這次網(wǎng)頁(yè)的制作了，說(shuō)實(shí)話還是很有一點(diǎn)激動(dòng)的，因?yàn)槲覐膩?lái)沒(méi)有想象過(guò)自己竟然可以制作網(wǎng)頁(yè)。我一直都覺(jué)得，網(wǎng)頁(yè)的制作是一件非常困難的事，但是學(xué)校給了我們這樣一次學(xué)習(xí)編程的機(jī)會(huì)，我感到十分的榮幸以及開(kāi)心。話不多說(shuō)，讓我們開(kāi)始制作網(wǎng)頁(yè)吧。一個(gè)好的網(wǎng)頁(yè)離不開(kāi)一個(gè)簡(jiǎn)潔大方的首頁(yè)，只有首頁(yè)讓人感到舒服，輕松，才會(huì)使人有繼續(xù)瀏覽的想法。否則你們首頁(yè)一團(tuán)糟，頁(yè)面一塌糊涂，真的會(huì)有人瀏覽嗎？如果沒(méi)有人看，那就無(wú)法實(shí)現(xiàn)我們幫助人們垃圾分類的目的了。我們挑選了很多顏色，藍(lán)色、綠色、紅色，但最后敲定了米黃色與橘色的搭配。我不禁再一次感嘆，這一次的網(wǎng)頁(yè)制作活動(dòng)真的帶給我了太多太多的收獲，在首頁(yè)制作方面，我又學(xué)會(huì)了顏色的搭配，這在今后的工作和生活中也是有很大的用處的。接下來(lái)，我將給大家展示一下我們做好的頁(yè)面，如下圖：其中，我們運(yùn)用了“div”語(yǔ)句，這也讓我在Hbuilder的使用上更加熟練，下面展示一下我的代碼：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <linkrel="stylesheet"href="css/tubiao.css"/> </head> <style> .div1{ width:1000px; height:600px; background-color:lightgoldenrodyellow; margin:auto; } .div2{ width:550px; height:70px; background-color:orange; margin-left:200px; margin-top:300px; font-size:25px; text-align:center; float:left; } </style> <body> <divclass="div1"> <divclass="div2">歡迎進(jìn)入垃圾分類首頁(yè)！ <ahref="lajit.html"><inputtype="submit"value="入口"</td></a> </div> </div> </body></html>學(xué)東西是要邊學(xué)邊用，才能得到鞏固，才能記在心中而不只是表面上的學(xué)會(huì)了。接下來(lái)，進(jìn)入首頁(yè)之后，就要開(kāi)始真正的內(nèi)容了。我們利用“class”語(yǔ)句為大家?guī)?lái)指引“歡迎進(jìn)入垃圾分類”，運(yùn)用“href”語(yǔ)句將按鈕插入，使得用戶再點(diǎn)擊了“入口”按鈕后可以跳轉(zhuǎn)到這樣一個(gè)頁(yè)面，如下圖：這樣就清晰明了，讓人們一眼就可以看出垃圾的分類，與我們西安垃圾分類的顏色一致。綠色的是廚余垃圾，藍(lán)色的是可回收物，紅色給人一種警示的感覺(jué)，是有害垃圾，而灰色的則是其他垃圾。這里我們選用了粉色的底色，一是看起來(lái)更加簡(jiǎn)明，二一個(gè)，淺色的底色也不至于喧賓奪主。這里再一次體現(xiàn)了色彩搭配在一次網(wǎng)頁(yè)制作過(guò)程中的重要性。接下來(lái)給大家展示一下代碼，如下：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <linkrel="stylesheet"href="css/tubiao.css"/> </head> <style> .divbig{ width:1000px; height:600px; background-color:blanchedalmond; margin:auto; } .div3{ width:150px; height:200px; background-color:green; margin:50px; margin-top:180px; float:left; margin-right:50px; text-align:center; line-height:100px; } .div4{ width:150px; height:200px; background-color:cornflowerblue; margin:50px; margin-top:180px; float:left; margin-right:50px; text-align:center; line-height:100px; } .div5{ width:150px; height:200px; background-color:brown; margin:50px; margin-top:180px; float:left; margin-right:50px; text-align:center; line-height:100px; } .div6{ width:150px; height:200px; background-color:gray; margin:50px; margin-top:180px; float:left; margin-right:50px; text-align:center; line-height:100px; } .divone{ font-size:25px; } </style> <body> <divclass="divbig"> <divclass="div3"><spanclass="iconfont"> <divclass="divone"><ahref="chuyu.html">廚余垃圾</a></div> </div> <divclass="div4"><spanclass="iconfont"> <divclass="divone"><ahref="huishou.html">回收垃圾</a></div> </div> <divclass="div5"><spanclass="iconfont"> <divclass="divone"><ahref="youhai.html">有害垃圾</a></div> </div> <divclass="div6"><spanclass="iconfont"> <divclass="divone"><ahref="qita.html">其他垃圾</a></div> </div> <div> <ahref="index.html">返回</a><p> </div> </div> </body></html>寫(xiě)到這里，我才真正體會(huì)到一個(gè)程序員有多么的辛苦和不易，即使只有一點(diǎn)點(diǎn)小小的錯(cuò)誤出現(xiàn)，他們也要來(lái)來(lái)回回不停的找這些錯(cuò)誤，尤其是在這么多密密麻麻的代碼面前，程序員們的眼睛一定也非常的疲勞。但他們依然要仔細(xì)認(rèn)真努力的工作，不能出一點(diǎn)差錯(cuò)。我們也是一樣，無(wú)論在生活還是學(xué)習(xí)中，始終要保持百分百的熱情，認(rèn)真對(duì)待每一件事情。即使事情再小，微弱塵埃，我們也要以最大的熱情去對(duì)待。作為一個(gè)大四的學(xué)生，我們更要為那些年紀(jì)小點(diǎn)的學(xué)弟學(xué)妹們做好榜樣，不僅在學(xué)習(xí)上，對(duì)待事物上，同時(shí)也要在垃圾分類上。榜樣的力量是無(wú)窮的，今天，我們做到了，明天，學(xué)弟學(xué)妹們做到了，長(zhǎng)此以往，終有一天，每個(gè)人都可以做到。每個(gè)人都可以保持一個(gè)良好的狀態(tài)，認(rèn)真迎接每件事情，無(wú)論好事，壞事。好事自然不用說(shuō)，壞事也要多看到它正面的地方，正如成語(yǔ)“塞翁失馬焉知非?！彼f(shuō)。這時(shí)候我也懂得了每一行每一業(yè)都是非常辛苦的，沒(méi)有誰(shuí)比誰(shuí)容易，同時(shí)我們也要積極上進(jìn)，不然在時(shí)代的浪潮中，被洪水猛獸吞沒(méi)的就是我們。最后，向大家展示一下最終的頁(yè)面，也就是真正可以幫助到市民們的垃圾分類頁(yè)面。當(dāng)你點(diǎn)擊了“廚余垃圾”的選項(xiàng)后，就會(huì)出現(xiàn)如下界面：代碼的的展示如下：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title> </title> </head> <style> .divchuyu{ width:200px; height:500px; background-color:#008000; margin:autoauto; } </style> <body> <divclass="divchuyu"> <table><tr> <td>菜葉</td> </tr> <tr> <td>橙皮</td> </tr> <tr> <td>蔥</td> </tr> <tr> <td>餅干</td> </tr> <tr> <td>番茄醬</td> </tr> <tr> <td>蛋殼</td> </tr> <tr> <td>西瓜</td> </tr> <tr> <td>馬鈴薯</td> </tr> <tr> <td>魚(yú)骨</td> </tr> <tr> <td>甘蔗</td> </tr> <tr> <td>玉米</td> </tr> <tr> <td>骨頭</td> </tr> <tr> <td>蛋糕</td> </tr> <tr> <td>面包</td> </tr> <tr> <td>草莓</td> </tr> <tr> <td>西紅柿</td> </tr> <tr> <td><ahref="index.html">退出