網(wǎng)頁設(shè)計課程設(shè)計報告--網(wǎng)站設(shè)計報告

1、<p>　　網(wǎng)頁設(shè)計課程設(shè)計報告</p><p><b>　　1．引言</b></p><p>　　學(xué)校網(wǎng)站建設(shè)是學(xué)校教育信息化建設(shè)的重要方面，是適應(yīng)現(xiàn)代教育技術(shù)和信息技術(shù)的發(fā)展，加大學(xué)校對外交流與宣傳力度，提高教學(xué)、科研、管理效率的重要途徑；學(xué)校網(wǎng)站是學(xué)校對外宣傳的窗口，也是展示全校師生才能，加強(qiáng)對校外聯(lián)系，互相學(xué)習(xí)，共同發(fā)展的陣地，學(xué)校網(wǎng)站建設(shè)的目的是促

2、進(jìn)師生與學(xué)校共同發(fā)展，需要全校師生共同參與，同心合力把學(xué)校網(wǎng)站建設(shè)好.</p><p>　　那么，系部網(wǎng)站建設(shè)也是一塊重要的內(nèi)容，系部網(wǎng)站建設(shè)要突顯系部的特色與風(fēng)格，展現(xiàn)系部各個方面的實力與優(yōu)勢，樹立一個良好形象，增加一個公眾了解學(xué)校的窗口，也能提高學(xué)校知名度、及學(xué)校內(nèi)各部門效率，因此，身為計信系的學(xué)生，有責(zé)任有義務(wù)為系部網(wǎng)站的建設(shè)出一份綿薄之力。</p><p>　　經(jīng)過幾天的設(shè)計與修改

3、，我們設(shè)計的網(wǎng)頁已初見成效，</p><p><b>　　2．設(shè)計目的</b></p><p>　　培養(yǎng)了我們網(wǎng)頁設(shè)計的整體思想</p><p>　　培養(yǎng)了我們編寫技術(shù)文檔的能力</p><p>　　培養(yǎng)了我們獨(dú)立學(xué)習(xí)、吸取他人的經(jīng)驗、探討技術(shù)的習(xí)慣</p><p>　　培養(yǎng)我們團(tuán)隊協(xié)作的能力&l

4、t;/p><p>　　加強(qiáng)我們課余學(xué)習(xí)交流、溝通感情、促進(jìn)學(xué)生各方面知識全面發(fā)展</p><p><b>　　3．設(shè)計思想</b></p><p><b>　　總體設(shè)計：</b></p><p>　　網(wǎng)站規(guī)劃：把“計信系”放在突出位置，并突出系部特色，把系部相關(guān)內(nèi)容放在頁面上，吸引注意力，展現(xiàn)計信系風(fēng)采

5、。為師生互動、學(xué)生之間交流提供一個平臺、方便“教”與“學(xué)”，在對外宣傳上發(fā)布更新信息、對內(nèi)管理上加強(qiáng)各部門協(xié)調(diào)溝通。</p><p><b>　　首頁結(jié)構(gòu)如圖</b></p><p><b>　　圖1 首頁</b></p><p><b>　　首頁風(fēng)格：</b></p><p>

6、;<b>　　首頁以表格構(gòu)成。</b></p><p>　　首頁背景為用Photoshop處理制作的淡藍(lán)色壁紙，導(dǎo)航欄鏈接實現(xiàn)的背景為用Photoshop處理制作的淡黃色壁紙，首頁上三塊綠色內(nèi)容鏈接實現(xiàn)的背景都分別用Photoshop處理制作的壁紙。</p><p>　　首頁頂部是Flash制作的動畫，其中歡迎入住的字眼滾動出現(xiàn)，右下角的“浙江水利水電?？茖W(xué)校”字樣分

7、別從左至右逐個出場，導(dǎo)航欄背景為Photoshop制作的圖片，然后在該表格上加了一個層，以便加上導(dǎo)航欄，導(dǎo)航欄各個菜單項均是經(jīng)過Firework處理制作的下拉菜單，也都實現(xiàn)了鏈接功能，并且運(yùn)用模板，采用共同的樣式。</p><p>　　首頁中間分為三個部分，把表格拆分為三個部分，插入背景的圖片均是采用Photoshop制作的，插入表格、內(nèi)容，并且有一個實現(xiàn)了從下至上的滾動效果，還有鼠標(biāo)事件，即鼠標(biāo)劃到滾動字幕上時

8、字幕停止?jié)L動，當(dāng)鼠標(biāo)劃出字幕時，字幕重新開始滾動。</p><p>　　圖2 首頁中間部分 </p><p>　　接下來的部分就是用Flash制作的動畫，五張系部的獎牌依次時隱時現(xiàn)地出現(xiàn)</p><p><b>　　圖3 FLASH</b></p><p>　　頁腳和頁頭相呼應(yīng)。頁頭是放置站點(diǎn)主題的地方，而頁腳是放置制作

9、者或者公司信息的地方。我們設(shè)計的頁角如下：</p><p>　　設(shè)為主頁-加入收藏-系部介紹-友情鏈接-版權(quán)申明-聯(lián)系方式-我要留言</p><p>　　CopyRight @2004-2006 JSJ.ZJWCHC>COM ALL Right Reserved</p><p>　　地址：浙江杭州下沙學(xué)林街583號 郵編：310018 系辦電話：0571-86

10、929086</p><p><b>　　計算機(jī)與信息工程系</b></p><p><b>　　毛輝 呂彩虹</b></p><p><b>　　鏈接頁面風(fēng)格：</b></p><p>　　導(dǎo)航欄鏈接：以表格構(gòu)成，頂部為FLASH制作的動畫，背景是綠葉，右下角是“浙江水利

11、水電專科學(xué)?！弊謽?，最上面是“jsj.zjwchc.com”字樣從右到左從淡到明、從明到淡劃過屏幕；還有“計信系”紅色字樣的動畫。接下來就是導(dǎo)航欄，實現(xiàn)了鏈接。還有，時間的顯示，這個是在代碼中假如了Javascript實現(xiàn)的。</p><p><b>　　圖4 導(dǎo)航欄</b></p><p>　　中間內(nèi)容的鏈接：點(diǎn)擊標(biāo)題文字，出現(xiàn)新的頁面，頂部和頁角和首頁一樣，中間部

12、分有有一個實現(xiàn)了從下至上的滾動效果，還有鼠標(biāo)事件，即鼠標(biāo)劃到滾動字幕上時字幕停止?jié)L動，當(dāng)鼠標(biāo)劃出字幕時，字幕重新開始滾動。點(diǎn)擊滾動的任意內(nèi)容，均出現(xiàn)相應(yīng)的文章內(nèi)容。鏈接后又是另一種顏色。</p><p>　　使用了模板。中導(dǎo)航欄上的“新聞中心”和“行政科研”均使用了模板。</p><p><b>　　圖5模板</b></p><p><b

13、>　　4．網(wǎng)站形象設(shè)計</b></p><p>　　標(biāo)準(zhǔn)字體：正文字體為“宋體”9pt。</p><p>　　主色調(diào)與色彩:本網(wǎng)站以綠色為主色調(diào)，顏色明了清新，正文部分為黑色，鏈接顏色為橘黃色。</p><p><b>　　5．網(wǎng)站布局技術(shù)</b></p><p>　　本站主要使用表格布局布局。優(yōu)勢在于

14、它可以對不同對象進(jìn)行處理，而不必?fù)?dān)心不同對象之間的互相影響，且在定位圖片和文本上比用CSS更方便，比框架布局更美觀。</p><p><b>　　CSS </b></p><p>　　它能夠使你保持整個HTML的統(tǒng)一外觀。過去當(dāng)你在設(shè)置文本時,為了保持整個段落都使用相同的外觀,不得不為每一段設(shè)置屬性,很麻煩。如果使用了CSS,那么可以在設(shè)置文本之前,就指定整個文本的

15、屬性,比如顏色、字體大小等等,這樣,我們就能獲得統(tǒng)一的文本外觀了。</p><p>　　本網(wǎng)站就對顏色、字體大小進(jìn)行了設(shè)置。</p><p>　　6． 網(wǎng)站特效說明 </p><p><b>　　頁面轉(zhuǎn)換效果應(yīng)用 </b></p><p>　　主要應(yīng)用于整個頁面，代碼如下：</p><p>　　&

16、lt;meta TTP-EQUIV=”Page-Enter” ONTENT=”revealtrans(duration=6.0,transition=23)”></p><p>　　<meta TTP-EQUIV=”Page-Exit” CONTENT=”revealtrans(duration=6.0,transition=23)”></p><p>　　第一個標(biāo)簽

17、是進(jìn)入頁面效果控制,告訴瀏覽器進(jìn)入時創(chuàng)建一個隨機(jī)的頁面轉(zhuǎn)換效果.</p><p>　　第一個標(biāo)簽是離開頁面效果控制,告訴瀏覽器進(jìn)入時創(chuàng)建一個隨機(jī)的頁面轉(zhuǎn)換效果.</p><p>　?。ㄆ渲校骸癉uration=3”表示網(wǎng)頁動態(tài)過濾的時間為6秒，“Transition=19”表示網(wǎng)頁過渡的方式值為23，即為從左上角向右下角展開。）</p><p><b>　

18、　圖6 頁面轉(zhuǎn)換效果</b></p><p>　　插入多個FLASH動畫，使整個網(wǎng)頁看起來更有立體感，效果十分不錯，也突顯了系部的特色。</p><p><b>　　圖7 FLASH</b></p><p>　　使用了JavaScript的對象事件處理程序，例如鼠標(biāo)事件。

19、 </p><p><b>　　7. 網(wǎng)頁設(shè)計分工</b></p><p>　　表1 小組人員分工表</p><p><b>　　8．個人體會</b></p><p>　　以前我一直在做網(wǎng)頁，不過是在博客上，那里提供了摸板，只需要自己在里面添舔改改就行了，對一些代碼

20、我更本就看不懂，現(xiàn)在好了，雖然我不是很會，但是可以看懂一些了，也能改一些代碼了。通過這幾天的學(xué)習(xí)和制作，在老師的精心教導(dǎo)下和搭檔的幫助下，以及通過自己在平時的學(xué)習(xí)和實踐，網(wǎng)頁知識有了初步認(rèn)識。通過學(xué)習(xí)，不但增加了我的知識面，還使我學(xué)會了很多以前不會使用的工具，例如FLASH當(dāng)然這樣還不夠，因為我還有很多需要學(xué)習(xí)的地方，，但是在以后的時間里我一定會繼續(xù)努力，爭取做更多的精美的網(wǎng)頁出來。 </p><p>　　通過此

21、次制作還讓我明白了做網(wǎng)頁時頁面不一定要很復(fù)雜，但留白的地方不能很多，這樣看起來就不會覺得呆板，反面顯得有層次，比較高檔，而且百看不厭。網(wǎng)頁的特點(diǎn)就是要有一副漂亮的背景圖，整個頁面看起來就比較舒服。網(wǎng)頁的文字要排得整齊緊湊，這樣才能給人一種舒服的感覺。在網(wǎng)頁適當(dāng)?shù)牡胤娇梢约右恍﹫D片，每張畫面再加一些不同的文字說明和加一些不同的文字效果，再加一些小動畫，這樣網(wǎng)頁會顯得更加的精美。 </p><p>　　這次做的網(wǎng)頁雖