網頁課程設計

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

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

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

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

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

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

7、知識，一個很炫的網站就出來了，由于插入了特效，是網站具有了動態(tài)效果，很是逼真。2.5參考網站第三章總結3.1 遇到的問題(1) 切片放到單元格里 組合問題，中間會有縫隙，要把一塊塊的切片通過單元格組合在一起很是麻煩，而且我的網站大多都需要切片，所以在圖片的組合上花費了很大的功夫；(2)層的應用，因為我想用隱藏層的功能。所以在層上也花費了很長的時間，因為層的位置總是亂跑，在這次的作業(yè)中曾站了很長時間。(3)iframe的應用，在設置它的參數(shù)上也花了時間去查資料，因為我把它放在了背景框架里所以我不希望他再有邊框、滾動條等。而且還得把它放在框架里符合圖片大小。在布局上得費些心思。(4)特效的應用，在

8、制作網站中，有很多特效并不是用得很順利，需要自己再修改參數(shù)等。(5)素材的查找，因為我不是全部模仿一個網站，其中加入了自己的心思，這就得自己去找合適的素材，并不斷的改動。面對以上問題，剛開覺得很麻煩，可隨著問題的解決，或查資料或問老師，不知不覺自己的能力就提高了不少，雖然前期出現(xiàn)了很多問題，但正因為在處理前期的問題上使得做后面的網頁時得心應手，隨著不斷地改善，自己已能自己構思出一個頁面，后期很順利，只是整理一些小問題。3.2 心得體會 學了很多知識，感覺還是實戰(zhàn)一下比較好，這次的課程設計就是做一個網站，自己選的是幼兒園的網站，我的構思是既然是網站就要起到相應的作用，是網站成為別人了解幼兒園的橋梁，對學校起到宣傳作用，所以對各個頁面都是深思熟慮決定的，幼兒園的網站首先應該活潑的氣息，所以我盡量站在小朋友的角度上來布局，圖片等的素材都是從很多圖片里篩選出來的，圖片大多為下朋友喜歡的動畫人物或為可愛的小寶寶等這些圖片首先就為本網站尊定了活潑陽光的感覺。不光得做足表面功夫，真技術也是必不可少的，我在網站里用到了很多javascript特效，還有隱藏層、iframe等，整體用div布局，各種噢乖局勢相互配合使網站表面內涵都很到位。我特從中收獲了很多。包括額外知識的積累。3.3 期望 這次課程設計時間有限，所以有些地方并不是很完善，接下來的時間我會把它逐漸完善，是布局更為完美，在