網(wǎng)頁設計課程報告

1、武漢華夏理工學院課 程 報 告課程名稱：網(wǎng)頁設計題 目：旅游景點鎮(zhèn)江網(wǎng)站制作 專 業(yè) 軟件工程 班 級 軟件1152 學 號 _10212815227_姓 名 _ _成 績 _指導教師 蘇永紅 2017年3月1日至2017年6月10日 目錄1 設計目的12 開發(fā)環(huán)境13 需求分析14 概要設計15 詳細設計與實現(xiàn)25.1在DW中的效果圖35.2 網(wǎng)站運行效果圖106 總結131 設計目的 介紹旅游景點鎮(zhèn)江，讓更多的人認識到鎮(zhèn)江的美好之處，并在設計過程中提升自己在這方面的能力。2 開發(fā)環(huán)境 Adobe Dreamweaver CS63 需求分析 選定主題，確定題目之后，在做整個網(wǎng)站之前對網(wǎng)站進行

2、需求分析。首先，做好需求調研。調研方式主要是上網(wǎng)查閱資料，在圖書館里翻閱相關書籍。調研內(nèi)容如下：1、網(wǎng)站當前以及日后可能出現(xiàn)的功能需求。2、客戶對網(wǎng)站的性能的要求和可靠性的要求。3、網(wǎng)站的實際運行環(huán)境。4、網(wǎng)站頁面總體風格以及美工效果。5、 主頁面和次級頁面數(shù)量等。6、內(nèi)容管理及錄入任務的分配。7、各種頁面特殊效果及其數(shù)量。此次制作網(wǎng)站選定的主題是有關介紹旅游地點的，網(wǎng)站簡單介紹了旅游地鎮(zhèn)江，該網(wǎng)站整體站功能結構圖(如圖1所示)：首頁景點地圖景點介紹數(shù)碼剪影分享交流圖1 網(wǎng)站整體站功能結構圖 4 概要設計整個網(wǎng)站分為：主頁面，景點地圖，景點介紹，焦山，茅山，數(shù)碼剪影，分享交流共七個頁面，每個頁

3、面都配有文字和圖片，可以讓瀏覽此網(wǎng)站的人對鎮(zhèn)江有一定的了解。系統(tǒng)功能結構圖（如圖2所示）：首頁景點地圖景點介紹數(shù)碼剪影分享交流進入返回首頁茅山焦山返回首頁進入返回首頁進入返回首頁填寫留言圖2 系統(tǒng)功能結構圖 5 詳細設計與實現(xiàn)1. 確定主題，在網(wǎng)上搜集所需要的信息。2. 打開DW，新建一個HTLM，打開工具欄，選用表格布局，根據(jù)網(wǎng)站顯示的需要，更改表格布局的屬性值。3. 建立網(wǎng)頁模板，建立站點，并在模板里建立多個子網(wǎng)頁。4. 在模板中插入下載的圖片，并編輯大量文字來介紹圖片上所描述的地方，建立多個超鏈接，實現(xiàn)從當前頁面切換到另一個頁面的功能。 5.1在DW中的效果圖鎮(zhèn)江首頁DW效果圖（如圖3所

4、示）圖3 鎮(zhèn)江首頁效果圖 景點地圖DW效果圖（如圖4所示）圖4 景點地圖DW效果圖 部分代碼：ms=茅山，是著名的道教圣地。茅山道教淵源流長，相傳早在距今5000多年前，就有高辛氏時代人展上公修煉，后有葛洪、楊羲、許謐、陶弘景等名道修煉、隱居茅山。茅山道教，在中國道教史上享有很高的聲望和地位，曾贏得了“秦漢神仙府，梁唐宰相家”、“第一福地，第八洞天”等美譽。茅山道院上世紀七十年代末開始修復，1982年被國務院批準為首批對外開放的重點宮觀。;jsjs=焦山，系“京口三山”名勝之一，向以山水天成、古樸幽雅聞名于世。它位于鎮(zhèn)江市區(qū)東北，由象山景區(qū)、焦山景區(qū)、松寥山景區(qū)及焦東灘、桂花園景區(qū)等組成，總面

5、積約1500畝左右。其中焦山景區(qū)為主體，是風區(qū)的核心。;歡迎訪問景點地圖！    快速導航：返回首頁景點介紹DW效果圖（如圖5所示）圖5 景點介紹DW效果圖 部分代碼：歡迎訪問景點介紹！    快速導航：返回首頁焦山茅山焦山：數(shù)碼剪影DW效果圖（如圖6所示）圖6 數(shù)碼剪影DW效果圖 部分代碼：歡迎訪問數(shù)碼剪影！    快速導航：返回首頁 歡迎訪問數(shù)碼剪影！    快速導航：返回首頁分享交流DW效果圖（如圖7所示）圖7 分享交流DW效果圖

6、 部分代碼：歡迎訪問分享交流！    快速導航：返回首頁 請您留言     聯(lián)系人姓名： 聯(lián)系人地址： 聯(lián)系人電話： 聯(lián)系人E-mail： 留言： 5.2 網(wǎng)站運行效果圖鎮(zhèn)江首頁網(wǎng)頁效果圖（如圖8所示）圖8 鎮(zhèn)江首頁網(wǎng)頁效果圖 景點地圖網(wǎng)頁效果圖（如圖9所示）圖9 景點地圖網(wǎng)頁效果圖 景點介紹之焦山網(wǎng)頁效果圖（如圖10所示） 圖10 景點介紹之焦山網(wǎng)頁效果圖 景點介紹之茅山網(wǎng)頁效果圖（如圖11所示）圖11 景點介紹之茅山網(wǎng)頁效果圖 數(shù)碼剪影網(wǎng)頁效果圖（如圖12所示）圖12 數(shù)碼剪影網(wǎng)頁效果圖 分享交流網(wǎng)頁效果圖（如圖13所示）圖13 分享交流網(wǎng)頁效果圖6 總結通過這次制作網(wǎng)頁的過程，加深了我對網(wǎng)頁設計的了解，并讓我學習到了許多平時不知道的知識，讓我更好的學會了應用dreamweaver，fireworksflash等軟件 并讓我知道了怎樣更好的結合著使用這些軟件。也讓我知道了自己在網(wǎng)站建設這方面還存在的不足之處并且認識到了自己需要改進的地方和以后要努力的的方向以便于以后更好的進行學習。我主做了景點地圖，