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

《網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì)報(bào)告--網(wǎng)站設(shè)計(jì)報(bào)告》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫(kù)。

1、ZHEJIANGWATERCONSERVANCYANDHYDROPOWERCOLLEGE網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì)報(bào)告題　　目：計(jì)信系網(wǎng)站設(shè)計(jì)報(bào)告系（部）：計(jì)算機(jī)與信息工程系專業(yè)班級(jí)：信管11-1姓名：沈慧婷學(xué)號(hào)：101190107指導(dǎo)教師：張鐵英迄止時(shí)間：　2012年7月2日～2012年7月6日1．引言學(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è)的目的是促進(jìn)師生與學(xué)校共同發(fā)展，需要全校師

2、生共同參與，同心合力把學(xué)校網(wǎng)站建設(shè)好.那么，系部網(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è)出一份綿薄之力。經(jīng)過幾天的設(shè)計(jì)與修改，我們?cè)O(shè)計(jì)的網(wǎng)頁已初見成效，2．設(shè)計(jì)目的l培養(yǎng)了我們網(wǎng)頁設(shè)計(jì)的整體思想l培養(yǎng)了我們編寫技術(shù)文檔的能力l培養(yǎng)了我們獨(dú)立學(xué)習(xí)、吸取他人的經(jīng)驗(yàn)、探討技術(shù)的習(xí)慣l培養(yǎng)我們團(tuán)隊(duì)協(xié)作的能力l加強(qiáng)我們課余學(xué)習(xí)交流、溝通感情、促進(jìn)學(xué)生各方面知識(shí)全面發(fā)展3．設(shè)計(jì)思想總體設(shè)計(jì)：l網(wǎng)站規(guī)劃：把

3、“計(jì)信系”放在突出位置，并突出系部特色，把系部相關(guān)內(nèi)容放在頁面上，吸引注意力，展現(xiàn)計(jì)信系風(fēng)采。為師生互動(dòng)、學(xué)生之間交流提供一個(gè)平臺(tái)、方便“教”與“學(xué)”，在對(duì)外宣傳上發(fā)布更新信息、對(duì)內(nèi)管理上加強(qiáng)各部門協(xié)調(diào)溝通。l首頁結(jié)構(gòu)如圖圖1首頁l首頁風(fēng)格：1、首頁以表格構(gòu)成。1、首頁背景為用Photoshop處理制作的淡藍(lán)色壁紙，導(dǎo)航欄鏈接實(shí)現(xiàn)的背景為用Photoshop處理制作的淡黃色壁紙，首頁上三塊綠色內(nèi)容鏈接實(shí)現(xiàn)的背景都分別用Photoshop處理制作的壁紙。2、首頁頂部是Flash制作的動(dòng)畫，其中歡迎入住的字眼滾動(dòng)出現(xiàn)，右下角的“浙江水利水電?？茖W(xué)?！弊謽臃謩e從左至右逐個(gè)出場(chǎng)，導(dǎo)航欄背景

4、為Photoshop制作的圖片，然后在該表格上加了一個(gè)層，以便加上導(dǎo)航欄，導(dǎo)航欄各個(gè)菜單項(xiàng)均是經(jīng)過Firework處理制作的下拉菜單，也都實(shí)現(xiàn)了鏈接功能，并且運(yùn)用模板，采用共同的樣式。3、首頁中間分為三個(gè)部分，把表格拆分為三個(gè)部分，插入背景的圖片均是采用Photoshop制作的，插入表格、內(nèi)容，并且有一個(gè)實(shí)現(xiàn)了從下至上的滾動(dòng)效果，還有鼠標(biāo)事件，即鼠標(biāo)劃到滾動(dòng)字幕上時(shí)字幕停止?jié)L動(dòng)，當(dāng)鼠標(biāo)劃出字幕時(shí)，字幕重新開始滾動(dòng)。圖2首頁中間部分4、接下來的部分就是用Flash制作的動(dòng)畫，五張系部的獎(jiǎng)牌依次時(shí)隱時(shí)現(xiàn)地出現(xiàn)圖3FLASH1、頁腳和頁頭相呼應(yīng)。頁頭是放置站點(diǎn)主題的地方，而頁腳是放置制作

5、者或者公司信息的地方。我們?cè)O(shè)計(jì)的頁角如下：設(shè)為主頁-加入收藏-系部介紹-友情鏈接-版權(quán)申明-聯(lián)系方式-我要留言CopyRight@2004-2006JSJ.ZJWCHC>COMALLRightReserved地址：浙江杭州下沙學(xué)林街583號(hào)郵編：310018系辦電話：0571-86929086計(jì)算機(jī)與信息工程系毛輝呂彩虹l鏈接頁面風(fēng)格：1、導(dǎo)航欄鏈接：以表格構(gòu)成，頂部為FLASH制作的動(dòng)畫，背景是綠葉，右下角是“浙江水利水電?？茖W(xué)?！弊謽?，最上面是“jsj.zjwchc.com”字樣從右到左從淡到明、從明到淡劃過屏幕；還有“計(jì)信系”紅色字樣的動(dòng)畫。接下來就是導(dǎo)航欄，實(shí)現(xiàn)了鏈接。還有

6、，時(shí)間的顯示，這個(gè)是在代碼中假如了Javascript實(shí)現(xiàn)的。圖4導(dǎo)航欄2、中間內(nèi)容的鏈接：點(diǎn)擊標(biāo)題文字，出現(xiàn)新的頁面，頂部和頁角和首頁一樣，中間部分有有一個(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)容。鏈接后又是另一種顏色。1、使用了模板。中導(dǎo)航欄上的“新聞中心”和“行政科研”均使用了模板。圖5模板4．網(wǎng)站形象設(shè)計(jì)標(biāo)準(zhǔn)字體：正文字體為“宋體”9pt。主色調(diào)與色彩:本網(wǎng)站以綠色為主色調(diào)，顏色明了清新，正文部分為黑色，鏈接顏色為橘黃色。5．網(wǎng)站布局技術(shù)本站主要使用表格布局布局。

7、優(yōu)勢(shì)在于它可以對(duì)不同對(duì)象進(jìn)行處理，而不必?fù)?dān)心不同對(duì)象之間的互相影響，且在定位圖片和文本上比用CSS更方便，比框架布局更美觀。lCSS它能夠使你保持整個(gè)HTML的統(tǒng)一外觀。過去當(dāng)你在設(shè)置文本時(shí),為了保持整個(gè)段落都使用相同的外觀,不得不為每一段設(shè)置屬性,很麻煩。如果使用了CSS,那么可以在設(shè)置文本之前,就指定整個(gè)文本的屬性,比如顏色、字體大小等等,這樣,我們就能獲得統(tǒng)一的文本外觀了。本網(wǎng)站就對(duì)顏色、字體大小進(jìn)行了設(shè)置。6．網(wǎng)站特效說明l頁面轉(zhuǎn)換效果應(yīng)用主要應(yīng)用于整個(gè)頁面，