我的家鄉(xiāng)網(wǎng)站設(shè)計(jì)論文_文琛

四川管理職業(yè)學(xué)院四川管理職業(yè)學(xué)院 畢畢 業(yè)業(yè) 論論 文文 學(xué) 號(hào)： 200962115 姓 名： 文 琛 所 屬 系： 計(jì)算機(jī)科學(xué)與工程教研系 專 業(yè)： 計(jì)算機(jī)信息管理 班 級(jí)： 2009 級(jí) 1 班 指 導(dǎo) 老 師： 朱麗雅 目錄 第一章第一章 前言前言.2 2 第二章第二章 開發(fā)工具和運(yùn)行環(huán)境開發(fā)工具和運(yùn)行環(huán)境.3 3 2.1 網(wǎng)站設(shè)計(jì)的基本知識(shí) .3 2.2 DREAMWEAVER 8 簡(jiǎn)介.4 2.3 HTML 簡(jiǎn)介 .5 2.4 HTML 技術(shù)簡(jiǎn)介 .5 2.5 FLASH簡(jiǎn)介 .6 第三章第三章 網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn).7 7 3.1 網(wǎng)站的總體設(shè)計(jì) .7 3.1.1 網(wǎng)站結(jié)構(gòu)圖.7 3.1.2 網(wǎng)站的風(fēng)格.8 3.2 網(wǎng)站的詳細(xì)設(shè)計(jì) .8 3.2.1 素材的準(zhǔn)備.8 3.2.2 網(wǎng)站首頁.8 第四章第四章 結(jié)論結(jié)論.1313 第五章第五章 參考文獻(xiàn)參考文獻(xiàn).1414 第一章 前言 我的家鄉(xiāng)-資陽，地處四川盆地中部，是四川唯一同時(shí)連接成渝“雙 核”的區(qū)域性中心城市。1998 年設(shè)立地區(qū)，2000 年建市，轄雁江區(qū)、 簡(jiǎn)陽市、安岳縣和樂至縣，幅員面積 7962 平方公里，總?cè)丝?500 萬。 資陽歷史文化悠久。35000 年前，古老的“資陽人”開啟了四川 人類文明史。公元前 135 年西漢時(shí)期置縣，后設(shè)州、郡，至今已有 2100 多年的建制史。古往今來，哺育了東周孔子之師萇弘、西漢辭 賦家王褒、東漢經(jīng)學(xué)家董鈞等歷史名人，以及無產(chǎn)階級(jí)革命家、軍 事家、外交家陳毅元帥，革命家曹狄秋著名作家邵子南、周克芹、 劉心伍等現(xiàn)代英杰。 資陽區(qū)位優(yōu)勢(shì)明顯。市區(qū)距成都中心城區(qū) 87 公里，現(xiàn)有成渝鐵路、 成渝高速公路和國(guó)道 321 線、319 線、318 線等骨干道路穿境而過。 隨著成安渝、內(nèi)資遂、遂資眉、成都第二繞城高速公路和成渝鐵路 客運(yùn)專線等綜合交通項(xiàng)目加快建設(shè)， “多線接成渝、內(nèi)外大暢通”綜合 交通格局即將形成，資陽正在成為成都交通中心樞紐重要組成部分 和成渝經(jīng)濟(jì)區(qū)內(nèi)重要交通次級(jí)樞紐。 設(shè)計(jì)思想 本網(wǎng)站設(shè)計(jì)目的就是日讓大家更多了解自己的家鄉(xiāng)資陽。本網(wǎng) 包含網(wǎng)站的資陽的地理，歷史，人文，名勝，經(jīng)濟(jì)，旅游，風(fēng)俗， 等方面。讓瀏覽這更好了解我的家鄉(xiāng)資陽。 第二章 開發(fā)工具和運(yùn)行環(huán)境 2.1 網(wǎng)站設(shè)計(jì)的基本知識(shí) 靜態(tài)編程最重要的特征就是由程序自動(dòng)生成網(wǎng)頁，最終形成 供瀏覽器解釋的 HTML。那么如何設(shè)計(jì)出精美的網(wǎng)頁以及動(dòng)態(tài)更新交 互的站點(diǎn)，這就需要網(wǎng)頁編程與網(wǎng)頁制作相結(jié)合。本章主要介紹網(wǎng) 站建設(shè)所必須掌握的基礎(chǔ)知識(shí)，如網(wǎng)頁文檔的結(jié)構(gòu)、超鏈接、表格 和表單等基本的 HTML 標(biāo)識(shí)的寫法要求，網(wǎng)頁編輯的常用工具，動(dòng)態(tài) 網(wǎng)站項(xiàng)目工程的設(shè)計(jì)步驟要求，以及網(wǎng)站的發(fā)布與維護(hù)、網(wǎng)站的主 機(jī)方案等相關(guān)知識(shí)。 2.2 Dreamweaver 8 簡(jiǎn)介 Dreamweaver 是在網(wǎng)頁設(shè)計(jì)與制作領(lǐng)域中用戶最多、應(yīng)用最 廣、功能最強(qiáng)大的軟件，隨著 Dreamweaver 8 的發(fā)布，更堅(jiān)定 Dreamweaver 在該領(lǐng)域的地位。它集網(wǎng)頁設(shè)計(jì)、網(wǎng)站開發(fā)和站點(diǎn)管 理功能于一身，具有可視化、支持多平臺(tái)和跨瀏覽器的特性，是目 前網(wǎng)站設(shè)計(jì)、開發(fā)、制作的首選工具。突出的特點(diǎn)主要有靈活的編 寫方式；可視化編輯界面；功能更多的 CSS 支持CSS 可視化設(shè) 計(jì)、CSS 檢查工具；動(dòng)態(tài)跨瀏覽器驗(yàn)證；強(qiáng)大的 WEB 站點(diǎn)管理功能； 內(nèi)建的圖形編輯引擎；豐富的媒體支持能力等。 它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合 在一起，其功能強(qiáng)大，使得各個(gè)層次的開發(fā)人員和設(shè)計(jì)人員都能夠 快速創(chuàng)建界面吸引人的基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。開發(fā)人員可以 使用 Dreamweaver 及所選擇的服務(wù)器技術(shù)來創(chuàng)建功能強(qiáng)大的 Internet 應(yīng)用程序，從而使用戶能連接到數(shù)據(jù)庫(kù)、Web 服務(wù)和舊式 系統(tǒng)。開發(fā)環(huán)境支持 HTML、ASP、ASP.NET、JSP 等，提供眾多功能 強(qiáng)大的可視化設(shè)計(jì)工具、應(yīng)用開發(fā)環(huán)境以及代碼編輯支持。主要用 于素材整理、排版以及后臺(tái)程序的交互。 2.3 HTML 簡(jiǎn)介 全稱：HyperText Mark-up Language 譯稱：超文本標(biāo)記語言。 簡(jiǎn)意：一種為普通文件中某些字句加上標(biāo)識(shí)的語言，其目的在于 運(yùn)用標(biāo)記（tag）合文件 達(dá)到預(yù)期的效果。 HTML 是在 SGML 定義下的一個(gè)描述性的語言，或可說 HTML 是 SGML 的一個(gè)應(yīng)用程式。HTML 不是程式語言，如 C+ 和 Java 之 類，它只是標(biāo)記語言，基本上你只要明白了各種 標(biāo)記的用法便算學(xué) 懂了 HTML，HTML 的格式非常簡(jiǎn)單，只是由文字及標(biāo)記組合而成， 于 編輯部方面，任何文字編輯器都市可以，只要能將檔案存為文本 格式即可， 用專門的網(wǎng)頁編輯工具當(dāng)然更好。 2.4 HTML 技術(shù)簡(jiǎn)介 HTML 文件而無需重新設(shè)置代Macromedia 公司的 Roundtrip HTML 技術(shù)讓用戶可以隨意導(dǎo)入碼格式，用戶還可以利用 Dreamweaver 清 除或重新格式化 HTML 代碼，實(shí)現(xiàn)代碼的優(yōu)化。 利用 Dreamweaver，可以方便地使用動(dòng)態(tài) HTML 功能，卻不需要寫一 行行的代碼；利用它還可以檢查作品在所有流行的平臺(tái)和瀏覽器中 可能發(fā)生的錯(cuò)誤。 當(dāng)然,如果不用 Dreamweaver 的話,同樣可以制作出非常好的網(wǎng)站 來,其實(shí)什么樣的程序或者 HTML 代碼都可以直接用記事本來寫,只不 過 Dreamweaver 實(shí)現(xiàn)起來更方便一些,還有一些其他的網(wǎng)頁編輯工具,比 如微軟的 Frontpage 等,做網(wǎng)站, Dreamweaver 很好用，但它并不是 唯一的選擇的! 網(wǎng)站運(yùn)行環(huán)境 服務(wù)器： 操作系統(tǒng)： windows 2003 Server； Web 服務(wù)器：IIS5.0 數(shù)據(jù)平臺(tái)：Access 客戶端： 任意操作系統(tǒng)下的瀏覽器均可。 配置要求： CPU Intel 或兼容機(jī) Pentium 166Mhz 或以上 企業(yè)版：至少 64M 建議 128M 或更多 內(nèi)存 標(biāo)準(zhǔn)版：至少 512M 開發(fā)版：至少 512M 硬盤 Service：至少 80G，一般為 160G English Query：80M 顯視器 VGA 或更高分辨率 2.5 Flash 簡(jiǎn)介 FLASH 簡(jiǎn)介 Flash 是一種交互式矢量多媒體技術(shù)，他的前身是 Futureplash，早期網(wǎng)上流行的矢量動(dòng)畫插件。后來由于 Macromedia 公司收購(gòu)了 Future Splash 以后便將其改名為 Flash2，到現(xiàn)在最新的 flash4。現(xiàn)在網(wǎng)上已經(jīng)有成千上萬個(gè) Flash 站點(diǎn)，著名的如 Macromedia 專門 ShockRave 站點(diǎn)，全部采用了 Shockwave Flash 和 Director。可以說 Flash 已經(jīng)漸漸成為交互式 知量的標(biāo)準(zhǔn)，未來網(wǎng)頁的一大主流。 第三章 網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 3.1 網(wǎng)站的總體設(shè)計(jì) 3.1.1 網(wǎng)站結(jié)構(gòu)圖 3.1.2 網(wǎng)站的風(fēng)格 主頁由標(biāo)準(zhǔn)模式構(gòu)建，其主色調(diào)為紫色，通過導(dǎo)航條的引導(dǎo)可以一步一步 了解網(wǎng)站的全部?jī)?nèi)容。用戶能通過導(dǎo)航獲取自己感興趣的信息以及圖文說明。 3.2 網(wǎng)站的詳細(xì)設(shè)計(jì) 3.2.1 素材的準(zhǔn)備 做網(wǎng)站，準(zhǔn)備素材是最重要的一環(huán)，不僅要收集許多內(nèi)容各異的文字圖片， 還要設(shè)計(jì)各種網(wǎng)站的排版格式與美工。 這個(gè)網(wǎng)站的排版格式是我自己用 Dreamweaver 表格畫出來的，其中的圖片有的 經(jīng) 濟(jì) 狀 況 歷 史 沿 革 旅 游 觀 光 首 頁 地 理 概 況 歷 史 文 化 地 名 故 事 未 來 規(guī) 劃 著 名 人 物 鄉(xiāng) 土 風(fēng) 情 風(fēng) 景 名 勝 是自己處理的，也有些是從網(wǎng)上下載后自己用 fireworks 處理的。具體的網(wǎng)站 有：我的家鄉(xiāng)、網(wǎng)站百度百科等 3.2.2 網(wǎng)站首頁 現(xiàn)在開始用 dreamweaver 8 制作網(wǎng)頁 先把素材整理成整齊的目錄，把圖片整理好放在 image 文件夾下，定義站 點(diǎn)是選擇這個(gè)目錄，這樣素材就位于站點(diǎn)以內(nèi)，處理起來比較方便。 1、定義站點(diǎn) （1）啟動(dòng) Dreamweaver。 （2）打開“站點(diǎn)”菜單，選擇“新建站點(diǎn)”命令，選擇“高級(jí)”編輯站點(diǎn) 并確定。如圖 3-2： 圖 3-2 建立站點(diǎn) （3） 選件“文件”新建 html 基本頁，在標(biāo)題欄輸入“annasui_心隨香動(dòng) 香伴一生” ， 并保存為“index.html”文件。 （4） 設(shè)置頁面屬性，如圖 3-3 所示 圖 3-3 設(shè)置頁面屬性 （5）先建立一個(gè)表格，設(shè)置它的“邊框”寬為“10” ，選擇表格高百分比，在文本框 中輸入“10” ，并將表格設(shè)置為居中。如圖 3-4 圖圖 圖 3-4 建立表格 表格居中的代碼是 （6）填寫內(nèi)容如圖 3-5 圖 3-5 填內(nèi)容 （7）表格嵌套完成后按照網(wǎng)頁進(jìn)度開始添加內(nèi)容：點(diǎn)擊插入圖片，在最上層 的表格中插入用 Photoshop 所裁剪制成的圖片（8）添加關(guān)于網(wǎng)站主題的文字內(nèi) 容、flash 內(nèi)容以及添加站內(nèi)索引等相關(guān)鏈接內(nèi)容，最左側(cè)表格內(nèi)插入圖像查 看器，然后編輯 flash 元素 如圖 3-6 圖 3-6 插入 Flash （9）設(shè)置頁尾。 （10）用 css 樣式為所有文字排版。 首頁效果如圖 3-7 所示 圖 3-7 首頁最終效果 第四章 結(jié)論 實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，當(dāng)然也是檢驗(yàn)學(xué)習(xí)成果的標(biāo)準(zhǔn)。通 過這次畢業(yè)設(shè)計(jì)讓我對(duì)前面學(xué)過的許多課程有了更為深刻的理解， 也是我對(duì)這三年所學(xué)的東西的一個(gè)綜合體現(xiàn)。然而這次設(shè)計(jì)讓我感 受頗深，它讓我體會(huì)到了理論知識(shí)結(jié)合實(shí)踐的重要性，光有理論知 識(shí)是遠(yuǎn)遠(yuǎn)不夠的。撰寫畢業(yè)論文時(shí)也遇到了一些困難。由于這是我 第一次寫畢業(yè)論文，沒有任何經(jīng)驗(yàn)，對(duì)于論文的格式、要求和內(nèi)容 都一無所知，在查詢了大量的網(wǎng)絡(luò)資料后才有了模糊概念。所以在 此篇畢業(yè)論文中不免會(huì)有很多缺點(diǎn)。 總的來說，這次的畢業(yè)設(shè)計(jì)為我即將踏入社會(huì)之前提供了一 次鍛煉的舞臺(tái)。它讓我對(duì)幾年來所學(xué)的專業(yè)課有了更為深刻的認(rèn)識(shí)， 使知識(shí)得到了融會(huì)貫通，得到了比以往學(xué)習(xí)任何一門課都更大的提 高和進(jìn)步。所謂活到老學(xué)到老，自己以后還要加強(qiáng)知識(shí)的學(xué)習(xí)，不 斷的完善自己。經(jīng)過開發(fā)這個(gè)系統(tǒng)，這不僅僅是一次畢業(yè)設(shè)計(jì)，不 僅僅是學(xué)會(huì)了一門開發(fā)語言，更重要的是在學(xué)習(xí)的過程中，腳踏實(shí) 地，認(rèn)真嚴(yán)謹(jǐn)，實(shí)事求是的學(xué)習(xí)態(tài)度，不怕困難、堅(jiān)持不懈、吃苦 耐勞的精神是我在這次設(shè)計(jì)中最大的收益。我想這是一次意志的磨 練，是對(duì)我實(shí)際能力的一次提升，也會(huì)對(duì)我未來的學(xué)習(xí)和工作有很 大的幫助。 這次畢