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

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

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

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

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

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

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

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