網(wǎng)頁(yè)課程設(shè)計(jì)

1、網(wǎng)頁(yè)及圖形設(shè)計(jì)課程設(shè)計(jì)報(bào)告姓名 學(xué)號(hào) 系別 信息管理與工程系專業(yè) 軟件技術(shù) 班級(jí) 10軟件技術(shù)課程設(shè)計(jì)題目 北侖幼兒園指導(dǎo)教師 小組成員 目 錄第一章 引言（2） 第二章 系統(tǒng)分析與設(shè)計(jì)（2） 2.1、功能分析（2） 2.2、模塊劃分（3） 2.3、詳細(xì)介紹及效果圖（4） 2.4、設(shè)計(jì)特色（12） 2.5、參考網(wǎng)站（12）第三章 總結(jié)（13） 3.1、遇到的問(wèn)題（13） 3.2、心得體會(huì)（14）3.3、期望（14）參考文獻(xiàn)（14） 第一章引言幼兒園網(wǎng)站是幼兒園的標(biāo)志，美喲所幼兒園都有自己的特色與個(gè)性，建立自己的網(wǎng)站是最直接的宣傳手段，網(wǎng)站的超時(shí)空特性，讓世界的人可以了解幼兒園，幼兒園就可以成為

2、教育百花園中最絢爛的一朵。幼兒園網(wǎng)站也是實(shí)現(xiàn)資源共享的的橋梁，也能提供教學(xué)互動(dòng)的教學(xué)方式，更重要的是，能為小朋友提供個(gè)性化的學(xué)習(xí)平臺(tái)。以上便是我選擇做幼兒園網(wǎng)站的原因。我做的網(wǎng)站，整體是用div布局，然后結(jié)合表格與層，實(shí)現(xiàn)的是學(xué)校網(wǎng)站的功能，瀏覽者在首頁(yè)可以點(diǎn)擊進(jìn)入學(xué)校的各個(gè)頁(yè)面來(lái)了解相關(guān)信息，除首頁(yè)外，還有論壇、特色課程、活動(dòng)、注冊(cè)、風(fēng)采等等好多界面，比較出彩的地方有：各界面的特效使網(wǎng)站更完美如圖片滾動(dòng)、文字滾動(dòng)、動(dòng)態(tài)flash、幻燈片切換；在風(fēng)采的界面中我用到了iframe，并實(shí)現(xiàn)點(diǎn)擊小圖片出現(xiàn)大圖片在iframe里；在特色課程里我用到了隱藏層，實(shí)現(xiàn)了很好的效果；在注冊(cè)里我用到里正則表達(dá)式

3、；在活動(dòng)里我插入了練習(xí)之自制圖形；第二章系統(tǒng)分析與介紹2.1 功能介紹本課程設(shè)計(jì)為幼兒園網(wǎng)站，此網(wǎng)站的作用乃是表現(xiàn)學(xué)校的特色與個(gè)性，使更多的人了解幼兒園，另外可為學(xué)生和老師供更好的交流平臺(tái)，我做的網(wǎng)站布局合理，功能齊全，以首頁(yè)的導(dǎo)航條為向?qū)В瑸g覽者可以快速的 進(jìn)入網(wǎng)頁(yè)，例如課程的網(wǎng)頁(yè)，還可進(jìn)入學(xué)校的相冊(cè)，查看幼兒園孩子的相片等等，全方位的了解幼兒園。2.2 模塊劃分本網(wǎng)站共分為10個(gè)模塊，分為首頁(yè)、幼兒園簡(jiǎn)介、黨員之家、特色學(xué)習(xí)、幼兒論壇、幼兒園總院、食譜、巾幗文明、注冊(cè)、教研科研。模塊之間既互相獨(dú)立，又互相配合，展示了學(xué)校的風(fēng)采。各模塊又有自己的子模塊，子模塊包括寶寶風(fēng)采、精品課程、寶寶活動(dòng)

4、。子模塊更豐富的介紹了學(xué)校的網(wǎng)站。2.3 詳細(xì)介紹及效果圖(1)首頁(yè)首頁(yè)比較復(fù)雜，大體使用div布局，分為top、left、right、bottom,left為左浮動(dòng)，right為右浮動(dòng)，bottom為清除兩者，然后在left、right中又有好多div,在這些div里大多是使用了表格，在首頁(yè)里面有圖片特效、文字特效，還有一個(gè)flash,各部分布局清晰，方便用戶。用戶可以導(dǎo)航條為向?qū)В私鈱W(xué)校的布局，進(jìn)入各個(gè)頁(yè)面。此網(wǎng)站乃為幼兒園網(wǎng)站，所以整個(gè)頁(yè)面鮮艷活潑，圖片的選擇符合幼兒園的特點(diǎn)，給人耳目一新的感覺(jué)。(2)親親幼兒園本頁(yè)面為學(xué)校的整體概況，布局也是div和表格，此頁(yè)面邊框是把切片放入表格里

5、，組成的，在bottom里查的是背景圖片，里面有一個(gè)友情鏈接，瀏覽者可以點(diǎn)擊友情鏈接，進(jìn)入其他頁(yè)面。(3)巨幼論壇本頁(yè)面使用div和隱藏層布局，其中院長(zhǎng)信箱、幼兒環(huán)境、院長(zhǎng)寄語(yǔ)，都用到了隱藏層，單擊哪個(gè)相應(yīng)就會(huì)出現(xiàn)哪個(gè)信息。這樣布局就會(huì)使整個(gè)頁(yè)面看起來(lái)合理些，合理的利用了層帶來(lái)的空間。另外這些照片也很合理的出現(xiàn)在這，很有特色。(4)巾幗文明本頁(yè)面風(fēng)采不失前面幾張，首先它的布局和前面一樣為div布局，此頁(yè)面用到了iframe，實(shí)現(xiàn)了單擊小圖片大圖片就會(huì)出現(xiàn)在iframe里，而我選的這個(gè)背景框架也很美，大圖片恰好出現(xiàn)在這，很完美。還有上面的圖片位置放得也很合理。很適合小朋友的特點(diǎn)。此外還有也很讓小

6、朋友喜歡。(5)特色學(xué)習(xí)此頁(yè)面布局為div和表格，其中插入了floatimage和鼠標(biāo)移動(dòng)到圖片圖片就變大的特效，很可愛(ài)。然后點(diǎn)擊精品課程就可進(jìn)入下一個(gè)頁(yè)面。(7)教研科研此網(wǎng)頁(yè)布局用到了div和隱藏層。布局看著也很舒服，合適的素材更使得頁(yè)面完美。8注冊(cè)這是一個(gè)表單，里面用到了正則表達(dá)式，但其在失去焦點(diǎn)時(shí)判斷，下面用到了文字移動(dòng)的特效，很符合網(wǎng)站的特點(diǎn)。2.4設(shè)計(jì)特色該網(wǎng)站首頁(yè)為模仿其他的網(wǎng)站，但另外一些頁(yè)面改動(dòng)很大，因?yàn)槟７碌哪莻€(gè)網(wǎng)站布局很簡(jiǎn)單，所以后面很多網(wǎng)頁(yè)都是我自己綜合其它一些網(wǎng)站做的，像圖片素材啊都是自己找的，很多布局是自己改了好多次才弄好的，絕對(duì)是獨(dú)一無(wú)二的，把自己想得結(jié)合老師講的

7、知識(shí)，一個(gè)很炫的網(wǎng)站就出來(lái)了，由于插入了特效，是網(wǎng)站具有了動(dòng)態(tài)效果，很是逼真。2.5參考網(wǎng)站/北侖幼兒園第三章總結(jié)3.1 遇到的問(wèn)題(1) 切片放到單元格里 組合問(wèn)題，中間會(huì)有縫隙，要把一塊塊的切片通過(guò)單元格組合在一起很是麻煩，而且我的網(wǎng)站大多都需要切片，所以在圖片的組合上花費(fèi)了很大的功夫；(2)層的應(yīng)用，因?yàn)槲蚁胗秒[藏層的功能。所以在層上也花費(fèi)了很長(zhǎng)的時(shí)間，因?yàn)閷拥奈恢每偸莵y跑，在這次的作業(yè)中曾站了很長(zhǎng)時(shí)間。(3)iframe的應(yīng)用，在設(shè)置它的參數(shù)上也花了時(shí)間去查資料，因?yàn)槲野阉旁诹吮尘翱蚣芾锼晕也幌Ｍ儆羞吙?、滾動(dòng)條等。而且還得把它放在框架里符合圖

8、片大小。在布局上得費(fèi)些心思。(4)特效的應(yīng)用，在制作網(wǎng)站中，有很多特效并不是用得很順利，需要自己再修改參數(shù)等。(5)素材的查找，因?yàn)槲也皇侨磕７乱粋€(gè)網(wǎng)站，其中加入了自己的心思，這就得自己去找合適的素材，并不斷的改動(dòng)。面對(duì)以上問(wèn)題，剛開(kāi)覺(jué)得很麻煩，可隨著問(wèn)題的解決，或查資料或問(wèn)老師，不知不覺(jué)自己的能力就提高了不少，雖然前期出現(xiàn)了很多問(wèn)題，但正因?yàn)樵谔幚砬捌诘膯?wèn)題上使得做后面的網(wǎng)頁(yè)時(shí)得心應(yīng)手，隨著不斷地改善，自己已能自己構(gòu)思出一個(gè)頁(yè)面，后期很順利，只是整理一些小問(wèn)題。3.2 心得體會(huì) 學(xué)了很多知識(shí)，感覺(jué)還是實(shí)戰(zhàn)一下比較好，這次的課程設(shè)計(jì)就是做一個(gè)網(wǎng)站，自己選的是幼兒園的網(wǎng)站，我的構(gòu)思是既然是網(wǎng)站

9、就要起到相應(yīng)的作用，是網(wǎng)站成為別人了解幼兒園的橋梁，對(duì)學(xué)校起到宣傳作用，所以對(duì)各個(gè)頁(yè)面都是深思熟慮決定的，幼兒園的網(wǎng)站首先應(yīng)該活潑的氣息，所以我盡量站在小朋友的角度上來(lái)布局，圖片等的素材都是從很多圖片里篩選出來(lái)的，圖片大多為下朋友喜歡的動(dòng)畫(huà)人物或?yàn)榭蓯?ài)的小寶寶等這些圖片首先就為本網(wǎng)站尊定了活潑陽(yáng)光的感覺(jué)。不光得做足表面功夫，真技術(shù)也是必不可少的，我在網(wǎng)站里用到了很多javascript特效，還有隱藏層、iframe等，整體用div布局，各種噢乖局勢(shì)相互配合使網(wǎng)站表面內(nèi)涵都很到位。我特從中收獲了很多。包括額外知識(shí)的積累。3.3 期望 這次課程設(shè)計(jì)時(shí)間有限，所以有些地方并不是很完善，接下來(lái)的時(shí)間我會(huì)把它逐漸完善，是布局更為完美，