網(wǎng)頁藝術(shù)設(shè)計(jì)課程設(shè)計(jì)報(bào)告書

1、 計(jì)算機(jī)科學(xué)系課程設(shè)計(jì)報(bào)告書課 程 名 稱： 網(wǎng)頁藝術(shù)設(shè)計(jì) 課程設(shè)計(jì)題目： 愛心希望小學(xué)網(wǎng)站1、 課程設(shè)計(jì)目的：網(wǎng)頁設(shè)計(jì)與制作課程設(shè)計(jì)是在我們學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作課程后，結(jié)合HTML語言、Photoshop圖像處理、Flash動(dòng)畫制作以及Dreamwaver網(wǎng)頁制作等進(jìn)行的實(shí)踐性教學(xué)，通過課程設(shè)計(jì)，可以幫助我們鞏固所學(xué)的知識(shí)，加強(qiáng)HTML語言的基本概念和網(wǎng)頁的設(shè)計(jì)與實(shí)現(xiàn)，還可以讓我們對(duì)布局、表格、以及AP DIV的使用。從而進(jìn)一步提高我們的網(wǎng)頁設(shè)計(jì)與制作能力，熟悉圖像的處理、動(dòng)畫制作的設(shè)計(jì)和實(shí)現(xiàn)，為以后的課設(shè)的學(xué)習(xí)和實(shí)踐打下了基礎(chǔ)。2、 課程設(shè)計(jì)內(nèi)容 此網(wǎng)站主要體現(xiàn)希望網(wǎng)站的特色，網(wǎng)站的網(wǎng)名為：

2、“愛心希望小學(xué)”主要體現(xiàn)小學(xué)的特色，顏色以綠色為背景，象征著朝氣蓬勃，健康快樂的孩子，網(wǎng)站的設(shè)計(jì)主要以有文字，圖片。以及Flash動(dòng)畫相結(jié)合，使網(wǎng)站更加的大方、協(xié)調(diào)。整個(gè)網(wǎng)站的模塊分為：“學(xué)校首頁”、“學(xué)校概況”“校園動(dòng)態(tài)”、“師生互動(dòng)”、“教學(xué)教研”、“后勤情況”、“教學(xué)課程”、“學(xué)生報(bào)刊”、“學(xué)生園地”從而是整個(gè)網(wǎng)站更加的合理和美觀！更能體現(xiàn)出希望小學(xué)的特色。3、 網(wǎng)站的藝術(shù)設(shè)計(jì)及特色 1.該網(wǎng)站主要以兩大板塊構(gòu)成，上部分為校園動(dòng)態(tài)和校園活動(dòng)相結(jié)合，體現(xiàn)出校園的特色。第二個(gè)板塊主要以教務(wù)公開和經(jīng)驗(yàn)交流為主題。在兩個(gè)板塊之間插入一個(gè)flash動(dòng)畫使其不矢單調(diào)，能為整體的網(wǎng)站增加大方美觀的效果

3、。2.學(xué)校的logo設(shè)計(jì)以愛心為主，兩個(gè)人用手圍成一個(gè)愛心，顏色為主要以白和黃色為主，象征著孩子們的純真的笑臉和純潔的心靈。更能為主題增添色彩力和感染力。3.網(wǎng)站主要采用綠色布局，更能體現(xiàn)出孩子們朝氣蓬勃向上的一面，并用常用的宋體字，使網(wǎng)站看起來比較正規(guī)。4.網(wǎng)站插入的flash動(dòng)畫中跳動(dòng)的字分別以紅色和綠色為其校訓(xùn)，目的是讓孩子們善于思考，善于動(dòng)腦，開發(fā)他們的想象力，讓他們更加的優(yōu)秀，堅(jiān)持不懈的精神。更加的努力和做一個(gè)誠(chéng)實(shí)的孩子，讓他們不僅在學(xué)習(xí)上優(yōu)秀，在做人這方面更加的優(yōu)秀！四、網(wǎng)站結(jié)構(gòu)和整體布局1、網(wǎng)站結(jié)構(gòu)圖BannerFlash動(dòng)畫Logo學(xué)校首頁瀏覽者學(xué)校概況校園動(dòng)態(tài)教學(xué)教研頁面排版

4、后勤情況教學(xué)課程學(xué)校報(bào)刊學(xué)生園地2、頁面布局圖 Logo Banner 導(dǎo)航條 網(wǎng)頁內(nèi)容 （各子頁內(nèi)容）頁面布局圖3、網(wǎng)站文件夾目錄網(wǎng)站的文件夾目錄五、主頁制作步驟1.新建HTML網(wǎng)頁，命名為“index”并打開2. 打開常用工具欄，選擇“表格”對(duì)話框，在表格大小中選擇行數(shù)為15，列數(shù)為1，表格寬度為800Px,邊框粗細(xì)為0像素，單元格邊距為0，單元格間距為0。3.選擇表格對(duì)話框，繪制寬和高分別為：800x100的像素，選擇插入flash，在flash文件夾中找到“Banner”文件，如圖:4.在在表格中，輸入“學(xué)校首頁”、“學(xué)校概況”、“校園動(dòng)態(tài)”、“師生互動(dòng)”“教學(xué)教研”、“后勤情況”、“

5、教學(xué)課程”、“學(xué)校報(bào)刊 ”、“學(xué)生園地 ”。分別設(shè)置鏈接顏色，變換圖像鏈接、已訪問后的鏈接。如圖所示：5. 在公告欄的右邊設(shè)置一個(gè)寬和高分別為：320x350px，選擇插入-媒體圖像查看器，在對(duì)話框中保存該文件，在右面flash元素中進(jìn)行相關(guān)設(shè)置，插入圖片。 6. 緊接著在后面繪制一個(gè)校園新聞，寬和高分別為：248x350px，如圖：7. 再在下面插入一個(gè)Flash動(dòng)畫，繪制寬和高分別為：800x100px，在插入Flash，打開Flash文件夾下所在的位置，然后選擇“flash1”（選擇導(dǎo)出的文件，后綴名為：Swf的類型的），如圖：8. 下一步在下面繪制三個(gè)分別為“政務(wù)公開”、“經(jīng)

6、驗(yàn)交流”、“平安校園”三個(gè)框架。9. 下一步就是繪制一個(gè)用戶名注冊(cè)登陸界面，然后再在后面繪制一個(gè)滾動(dòng)的圖片，緊接著就是友情鏈接及版權(quán)商標(biāo)等，對(duì)它們進(jìn)行鏈接即可！ 六、子頁制作步驟一、學(xué)校首頁 1.新建xxgk頁面，利用表格分別插入Banner和導(dǎo)航條，在繪制一個(gè)寬和高分別為：800x400px，插入背景，然后把對(duì)應(yīng)的文字輸入進(jìn)去，然后選中學(xué)校首頁，將其鏈接到新建的xxgk的頁面中即可，并對(duì)其保存運(yùn)行，運(yùn)行后的界面如圖：二、校園動(dòng)態(tài)1. 新建一個(gè)xydt的頁面，利用表格分別插入導(dǎo)航條和Banner，在繪制一個(gè)寬和高：800x400px，插入背景，然后把對(duì)應(yīng)的文字輸入進(jìn)去，再選中校園動(dòng)態(tài)，將其鏈接

7、到新建的xydt的頁面中，對(duì)其保存bong運(yùn)行，其結(jié)果如圖所示：3、 師生互動(dòng)2. 同理依次重復(fù)上面的步驟，新建一個(gè)新的頁面為ssdt，然后插入相應(yīng)的背景圖，并將其相應(yīng)的文字輸入進(jìn)去，然后選中師生互動(dòng)，將其鏈接到新的ssdtd的頁面，保存并運(yùn)行，其結(jié)果為：4、 教學(xué)教研3. 同理分別重復(fù)上述步驟，分別新建hqqk、jxkc、xxbk、xsyd分別在表格中插入800x400的背景圖，并將其相應(yīng)的文字輸入進(jìn)去，保存并運(yùn)行，（都要保存在主頁中index.html）其運(yùn)行的結(jié)果如圖：后勤情況教學(xué)課程學(xué)校報(bào)刊學(xué)生園地5、 注冊(cè)表4. 在表單內(nèi)插入表格為14行一列，利用表格在左上方繪制單元格，輸入文字，在

8、表格內(nèi)輸入標(biāo)題，另外利用表單菜單選項(xiàng)分別插入按鈕，文本域等元件，選中表格，插入背景為“zc”，具體設(shè)置如圖所示：2.完成作品。最終，整個(gè)網(wǎng)頁設(shè)計(jì)頁面制作成功，運(yùn)行結(jié)果如圖所示：最終效果圖七、網(wǎng)站推廣與心得現(xiàn)在，計(jì)算機(jī)網(wǎng)絡(luò)已經(jīng)滲入到我們生活的個(gè)個(gè)方面，也已經(jīng)成為我們生活中不可缺少的一部分，網(wǎng)絡(luò)成為我們獲取知識(shí)和信息的便捷工具和重要的渠道！隨著計(jì)算機(jī)的普及，現(xiàn)在的網(wǎng)民也不斷地增多，因此講，了解和學(xué)習(xí)網(wǎng)頁的制作是我們當(dāng)代大學(xué)生的必修課，同時(shí)也讓我們更好的掌握Dreamweaverde的應(yīng)用！說實(shí)話，當(dāng)老師把這個(gè)課程設(shè)計(jì)布置下來的時(shí)候，我真的是不知該如何制作，大腦完全處于停滯狀態(tài)，后來，通過上網(wǎng)查詢有關(guān)此網(wǎng)站的設(shè)計(jì)模板，就照此制作，又經(jīng)過反復(fù)的思考及修改，不斷地學(xué)習(xí)，借鑒，查閱等，才把主頁面給做好了，同時(shí)，又讓我對(duì)網(wǎng)頁設(shè)計(jì)以及用到的Flash和Ps有了更深一步的了解，并能很好的運(yùn)用此軟件?？梢哉f是又是一個(gè)新的提高吧！我覺得做網(wǎng)頁首先給瀏覽人一種整體很舒服的感覺，無論是從視覺上還是色彩搭配上，都要合理，布局更要合理，要能準(zhǔn)確明朗的突顯出你設(shè)計(jì)的主頁面。切記鏈接時(shí)不會(huì)出現(xiàn)亂碼或是圖片不能正常顯示，這在網(wǎng)頁中都是不能出現(xiàn)的錯(cuò)誤，不管你的布局及色彩搭配是多么的完美，如果出現(xiàn)這樣的錯(cuò)誤，都會(huì)影響你整個(gè)網(wǎng)頁的!總體來說，通過這段時(shí)間對(duì)網(wǎng)頁設(shè)計(jì)的設(shè)計(jì)及學(xué)習(xí)，有收獲也有遺憾，雖然我