網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì)報(bào)告--網(wǎng)站設(shè)計(jì)報(bào)告

1、<p>　　網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì)報(bào)告</p><p><b>　　1．引言</b></p><p>　　學(xué)校網(wǎng)站建設(shè)是學(xué)校教育信息化建設(shè)的重要方面，是適應(yīng)現(xiàn)代教育技術(shù)和信息技術(shù)的發(fā)展，加大學(xué)校對(duì)外交流與宣傳力度，提高教學(xué)、科研、管理效率的重要途徑；學(xué)校網(wǎng)站是學(xué)校對(duì)外宣傳的窗口，也是展示全校師生才能，加強(qiáng)對(duì)校外聯(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)系部各個(gè)方面的實(shí)力與優(yōu)勢(shì)，樹立一個(gè)良好形象，增加一個(gè)公眾了解學(xué)校的窗口，也能提高學(xué)校知名度、及學(xué)校內(nèi)各部門效率，因此，身為計(jì)信系的學(xué)生，有責(zé)任有義務(wù)為系部網(wǎng)站的建設(shè)出一份綿薄之力。</p><p>　　經(jīng)過(guò)幾天的設(shè)計(jì)與修改

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

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

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

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

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

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

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

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

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

12、分有有一個(gè)實(shí)現(xiàn)了從下至上的滾動(dòng)效果，還有鼠標(biāo)事件，即鼠標(biāo)劃到滾動(dòng)字幕上時(shí)字幕停止?jié)L動(dòng)，當(dāng)鼠標(biāo)劃出字幕時(shí)，字幕重新開始滾動(dòng)。點(diǎn)擊滾動(dòng)的任意內(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è)計(jì)</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)勢(shì)在于

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

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

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

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

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

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

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