計(jì)算機(jī)工程系網(wǎng)站建設(shè)論文.doc

畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 1 摘要摘要 本文詳細(xì)介紹了通過(guò)運(yùn)用 Internet Intranet 的相關(guān)技術(shù) 建設(shè) 江蘇大學(xué)計(jì)算機(jī)學(xué)院工 程系網(wǎng)站 的過(guò)程 該網(wǎng)站利用了先進(jìn)的 asp 網(wǎng)頁(yè)動(dòng)態(tài)技術(shù)以及數(shù)據(jù)庫(kù)技術(shù) 為教師和學(xué) 生提供一個(gè)網(wǎng)上交流信息的平臺(tái) 并為維護(hù)者提供了方便的操作后臺(tái) 在網(wǎng)頁(yè)設(shè)計(jì)方面 利用了著名的 Macromedia 公司出品的網(wǎng)頁(yè)制作利器 Dremweaver MX2004 等工具 力求網(wǎng)站的實(shí)用 美觀與效率 該網(wǎng)站的核心部分使用了 asp 技術(shù) 并與數(shù)據(jù)庫(kù)技術(shù) 網(wǎng)絡(luò)安全技術(shù)相結(jié)合 使教師 可以很好地管理自己的資料 學(xué)生能夠方便地查詢教師及課程等信息 管理人員也可以方 便地管理網(wǎng)站并進(jìn)行維護(hù)工作 關(guān)鍵詞 關(guān)鍵詞 asp 數(shù)據(jù)庫(kù)技術(shù) 后臺(tái) 網(wǎng)絡(luò)安全技術(shù) 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 2 ABSTRACT This thesis present the course that was used the technology relevant to Internet Intranet to build the website of Computer Engineering Department of Jiangsu University in detail This website applied the advanced technic of dynamic website and Database It offered a platform for communication between students and teachers moreover it could also provide a convenient manipulation Background for the administrator As far as the web designing was concerned it was used the web facture edge tool Dreamweaver which manufactured by the famous Macromedia corporation So as to make the net more practical efficient and pleasing to the eye The website contained the asp combined with Database and Network Safety Technique in the hardcore of the website in order to make the teacher manage their datum efficiently Of course the students also could inquire about the information of teachers and curriculum easily and the manager administrated and safeguarded the website conveniently KeyKey words words Asp Database Background Network Safety Technique 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 3 目錄目錄 第一章第一章 引言引言 1 1 1 信息技術(shù)發(fā)展概況 1 1 2 網(wǎng)站的發(fā)展 1 1 3 本課題的意義 2 第二章第二章 平臺(tái)工具介紹平臺(tái)工具介紹 3 2 1DREAMWEAVER MX2004 3 2 1 1簡(jiǎn)介 3 2 1 2特點(diǎn) 4 2 1 3功能 5 2 2ASP 6 2 2 1ASP簡(jiǎn)介 6 2 2 2ASP的特點(diǎn) 7 2 2 3ASP的功能 7 2 3ACCESS 8 2 3 1Access簡(jiǎn)介 8 2 3 2Access的功能及特點(diǎn) 8 第三章第三章 網(wǎng)站的整體規(guī)劃與設(shè)計(jì)網(wǎng)站的整體規(guī)劃與設(shè)計(jì) 9 3 1 網(wǎng)站設(shè)計(jì)前提思路 9 3 1 1網(wǎng)站設(shè)計(jì)目的 9 3 1 2網(wǎng)站所需實(shí)現(xiàn)的功能 9 3 1 3網(wǎng)站的特點(diǎn) 10 3 2 網(wǎng)站總體設(shè)計(jì) 11 3 2 1網(wǎng)站的欄目板塊和目錄結(jié)構(gòu) 11 3 2 2網(wǎng)站的排版及布局 11 3 2 2網(wǎng)站內(nèi)容的安排 11 3 2 3網(wǎng)站鏈接關(guān)系 12 3 3 網(wǎng)站結(jié)構(gòu) 12 第四章第四章 網(wǎng)站的實(shí)現(xiàn)網(wǎng)站的實(shí)現(xiàn) 14 4 1 首頁(yè)設(shè)計(jì)過(guò)程 14 4 1 1首頁(yè)框架設(shè)計(jì) 14 4 1 2首頁(yè)頁(yè)面設(shè)計(jì) 15 4 1 3首頁(yè)ASP程序設(shè)計(jì) 16 4 2 其他頁(yè)面設(shè)計(jì)過(guò)程 17 4 2 1分頁(yè)頁(yè)面設(shè)計(jì) 18 4 2 2分頁(yè)ASP程序設(shè)計(jì) fenye asp 18 4 2 3欄目?jī)?nèi)容顯示ASP設(shè)計(jì) midclass asp 19 4 2 4文章內(nèi)容顯示ASP設(shè)計(jì) show asp 21 4 3 下載系統(tǒng)設(shè)計(jì) 22 4 3 1下載系統(tǒng)設(shè)計(jì)思路 22 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 4 4 3 2下載系統(tǒng)設(shè)計(jì)過(guò)程 22 4 4 后臺(tái)設(shè)計(jì) 24 4 4 1后臺(tái)基本操作框架 24 4 4 2后臺(tái)界面框架 24 4 5 網(wǎng)站演示及功能 25 4 5 1網(wǎng)站首頁(yè)展示 25 4 5 2其他頁(yè)面展示 26 4 5 3后臺(tái)管理登陸 27 4 6 后臺(tái)管理操作 28 4 6 1消息管理 28 4 6 2留言管理 30 4 6 3文章管理 31 4 6 4鏈接管理 33 4 6 5用戶設(shè)置 34 4 7 下載系統(tǒng)操作管理 35 4 7 1下載系統(tǒng)界面 35 4 7 2下載系統(tǒng)管理界面 37 4 7 3添加下載軟件 38 4 7 4下載軟件分類管理 39 4 8 本章小結(jié) 40 第五章第五章 課題總結(jié)課題總結(jié) 41 參考資料參考資料 42 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 1 第一章第一章 引言引言 信息技術(shù)日新月異 也逐漸融合到當(dāng)代的教育系統(tǒng)中 我們的想法便是設(shè)計(jì)一個(gè)計(jì)算 機(jī)工程系的網(wǎng)站 使廣大師生能夠在網(wǎng)上方便的交流并查詢信息和資料 1 1 信息技術(shù)發(fā)展概況信息技術(shù)發(fā)展概況 隨著融合了計(jì)算機(jī) 通信和信息處理技術(shù)的電子信息技術(shù)的飛速發(fā)展 人類在經(jīng)歷了 農(nóng)業(yè)社會(huì) 工業(yè)社會(huì)后 已步入信息化社會(huì) 物質(zhì) 能源與信息已成為社會(huì)發(fā)展的三大資 源 信息技術(shù)是當(dāng)代人類最活躍的生產(chǎn)力 正在對(duì)經(jīng)濟(jì)和社會(huì)的發(fā)展產(chǎn)生巨大而深遠(yuǎn)的影 響 信息化水平的高低已成為衡量一個(gè)國(guó)家 一個(gè)地區(qū)現(xiàn)代化水平和綜合國(guó)力的重要標(biāo)志 進(jìn)入 90 年代以來(lái) 信息化浪潮一浪高過(guò)一浪 世界各國(guó)更加關(guān)注和重視未來(lái)的信息社會(huì) 發(fā)達(dá)國(guó)家借助掌握信息技術(shù)的優(yōu)勢(shì) 大力推進(jìn)國(guó)家信息基礎(chǔ)設(shè)施的建設(shè) 促進(jìn)本國(guó)產(chǎn)業(yè)結(jié) 構(gòu)重組 從而增強(qiáng)了自身的國(guó)際競(jìng)爭(zhēng)力 1993 年 9 月美國(guó)政府率先提出了國(guó)家信息基礎(chǔ)設(shè)施計(jì)劃 NII National Information Infrastructure 通常稱為信息高速公路 實(shí)質(zhì)是高速信息網(wǎng)絡(luò) 它是美國(guó)政府針對(duì)美國(guó)社 會(huì)信息化發(fā)展而提出來(lái)的 具有 21 世紀(jì)的戰(zhàn)略眼光 是重振美國(guó)經(jīng)濟(jì) 增強(qiáng)美國(guó)國(guó)際競(jìng)爭(zhēng) 力的重大舉措 之后 全球掀起了建設(shè) 信息高速公路 的高潮 日 英 法 德 加等國(guó) 也紛紛提出各自的類似計(jì)劃 發(fā)展中國(guó)家如韓國(guó) 新加坡 巴西 烏拉圭 也都加緊制訂 本國(guó)的信息化計(jì)劃 INTERNET INTRANET 技術(shù)的興起 給企業(yè)業(yè)務(wù)流程 管理模式 組織機(jī)構(gòu)的重組乃 至整體的發(fā)展帶來(lái)新的機(jī)會(huì) 并將導(dǎo)致產(chǎn)業(yè)結(jié)構(gòu)及企業(yè)經(jīng)營(yíng)方式的變革 加速信息化進(jìn)程是社會(huì) 經(jīng)濟(jì)發(fā)展到一定程度時(shí)的必然要求 已成為促進(jìn)各國(guó)經(jīng)濟(jì)和 社會(huì)發(fā)展的大趨勢(shì) 是時(shí)代賦予我們的歷史性機(jī)遇和挑戰(zhàn) 黨中央 國(guó)務(wù)院十分重視我國(guó) 信息化的建設(shè)和發(fā)展 黨的十四屆正中全會(huì)上 提出了加快國(guó)民經(jīng)濟(jì)信息化進(jìn)程 逐步實(shí) 現(xiàn)整個(gè)經(jīng)濟(jì)由粗放型經(jīng)營(yíng)向集約型經(jīng)營(yíng)轉(zhuǎn)變 人大八屆四次會(huì)議審議通過(guò)了 中華人民共 和國(guó)國(guó)民經(jīng)濟(jì)和社會(huì)發(fā)展 九五 計(jì)劃和 2010 年遠(yuǎn)景目標(biāo)綱要 指出 國(guó)民經(jīng)濟(jì)和社會(huì)各領(lǐng) 域應(yīng)用現(xiàn)代電子信息取得很大進(jìn)展 計(jì)算機(jī)應(yīng)用在生產(chǎn) 工作和生活中的普及程度有很大 提高 1993 年 12 月 10 日國(guó)務(wù)院批復(fù)成立國(guó)家經(jīng)濟(jì)信息化聯(lián)席會(huì)議 其主要任務(wù)和職責(zé)是 統(tǒng)籌協(xié)調(diào)關(guān)系到國(guó)計(jì)民生的全國(guó)性經(jīng)濟(jì)信息化系統(tǒng)工程項(xiàng)目 提出有關(guān)政策 法規(guī)和標(biāo)準(zhǔn) 等 1994 年 3 月有關(guān)專家研討了 國(guó)民經(jīng)濟(jì)信息化 和建立 中國(guó)信息高速公路 的問(wèn)題 之 后 國(guó)家經(jīng)濟(jì)信息化聯(lián)席會(huì)議召開(kāi)了國(guó)民經(jīng)濟(jì)信息化發(fā)展戰(zhàn)略高層次研討會(huì) 1996 年 5 月 國(guó)務(wù)院成立了 國(guó)務(wù)院信息化工作領(lǐng)導(dǎo)小組 以加強(qiáng)對(duì)全國(guó)信息化工作的組織和領(lǐng)導(dǎo) 它 的主要任務(wù)是制定國(guó)家信息化的方針 政策 組織制定國(guó)家信息化的發(fā)展戰(zhàn)略 總體規(guī)劃 以及協(xié)調(diào)跨部門(mén) 跨地區(qū) 關(guān)系國(guó)民經(jīng)濟(jì)和社會(huì)發(fā)展的國(guó)家重大信息工程項(xiàng)目 1 2 網(wǎng)站的發(fā)展網(wǎng)站的發(fā)展 在當(dāng)今全球信息化大潮中 互聯(lián)網(wǎng) 即因特網(wǎng) Internet 異軍突起 給 20 世紀(jì)末 的人類社會(huì)增添了無(wú)限的活力 成為現(xiàn)代社會(huì)生活中一道亮麗的風(fēng)景線 互聯(lián)網(wǎng)帶給人們 的不僅僅是技術(shù) 而是一種以信息為標(biāo)志的嶄新的生活方式 它正在改變著人們的工作和 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 2 生活方式 一個(gè)網(wǎng)站的整體規(guī)劃和設(shè)計(jì)的好壞是它發(fā)展的重要之處 也是它吸引人們?yōu)g覽的所 在之處 Internet Intranet 技術(shù)的日益發(fā)展 使人們認(rèn)識(shí)到了 Internet Intranet 的優(yōu)勢(shì) 更使 得數(shù)據(jù)庫(kù)與 web 的連接成為數(shù)據(jù)庫(kù)開(kāi)發(fā)方面的熱門(mén)技術(shù)之一 在選擇網(wǎng)站設(shè)計(jì)技術(shù)時(shí) 我們選擇了動(dòng)態(tài)網(wǎng)頁(yè)技術(shù) 盡管這樣技術(shù)性增強(qiáng)而且任務(wù)量 增加了 但我們是出于一下的考慮的 通常情況下 通過(guò)瀏覽器看到的網(wǎng)頁(yè)大多是靜態(tài)的 所謂 靜態(tài) 是指網(wǎng)站的網(wǎng)頁(yè)內(nèi) 容 固定不變 當(dāng)瀏覽器通過(guò)互聯(lián)網(wǎng)的 HTTP Hypertext Transport Protocol 協(xié)議向 Web 服務(wù)器請(qǐng)求提供網(wǎng)頁(yè)時(shí) 服務(wù)器僅僅是將原來(lái)設(shè)計(jì)好的靜態(tài) HTML 文檔傳給瀏覽器 其頁(yè)面內(nèi)容使用的僅僅是標(biāo)準(zhǔn)的 HTML 代碼 最多再加上流行的 GIF 格式的動(dòng)態(tài)圖片 比如產(chǎn)生幾只小貓小狗跑來(lái)跑去的動(dòng)畫(huà)效果 若網(wǎng)站維護(hù)者要更新網(wǎng)頁(yè)的內(nèi)容 就必須手 動(dòng)更新所有的 HTML 文檔 靜態(tài)網(wǎng)站的致命弱點(diǎn)就是不易維護(hù) 為了更新網(wǎng)頁(yè)的內(nèi)容 網(wǎng)站維護(hù)者必須重復(fù)制作 HTML 文檔 隨著網(wǎng)站內(nèi)容和信息量的日益擴(kuò)增 可以想象這是多么復(fù)雜繁瑣的工作 那 么 什么是動(dòng)態(tài)網(wǎng)站呢 所謂 動(dòng)態(tài) 并不是指放在網(wǎng)頁(yè)上的圖片會(huì)動(dòng) 動(dòng)態(tài)頁(yè)面應(yīng)具有 以下幾個(gè)特點(diǎn) 一 交互性 即網(wǎng)頁(yè)能根據(jù)客戶的要求和選擇而動(dòng)態(tài)改變和響應(yīng) 瀏覽器即作為客 戶端界面 這是今后 Web 發(fā)展的大勢(shì)所趨 二 自動(dòng)更新 即無(wú)需手動(dòng)更新 HTML 文檔 就能自動(dòng)生成新的頁(yè)面 從而大大 減少工作量 三 因時(shí)因人而變 即當(dāng)不同的時(shí)間 不同的人訪問(wèn)同一網(wǎng)址時(shí)能產(chǎn)生不同的頁(yè)面 這一點(diǎn)對(duì)于需要對(duì)使用者授權(quán)的網(wǎng)站尤其適用 隨著的 Internet 迅速發(fā)展 不管是專業(yè)的 ISP Internet 服務(wù)提供者 和 ICP Internet 內(nèi)容 提供者 還是一般的政府機(jī)關(guān) 銀行 交通部門(mén) 學(xué)校 醫(yī)院 服務(wù)者 甚至是每個(gè)人 都在積極尋求在 Internet 上發(fā)布信息 提供新型的網(wǎng)上管理和服務(wù) 可以說(shuō) 網(wǎng)站設(shè)計(jì)和 網(wǎng)站的編輯正成為新興的熱門(mén)行業(yè) 1 3 本課題的意義本課題的意義 目前 各院系利用網(wǎng)絡(luò)資源向教師和學(xué)生提供交流的平臺(tái) 體現(xiàn)了現(xiàn)代教學(xué)信息化的 特點(diǎn) 計(jì)算機(jī)學(xué)院工程系也不例外 而現(xiàn)行的網(wǎng)站不能夠很好的發(fā)揮教師與學(xué)生交流的作 用 另外維護(hù)起來(lái)也比較麻煩 因此需要設(shè)計(jì)一個(gè)動(dòng)態(tài)的網(wǎng)站來(lái)彌補(bǔ)這些缺陷 而本課題 即 江蘇大學(xué)計(jì)算機(jī)學(xué)院工程系網(wǎng)站 就是基于這一目的設(shè)計(jì)完成的 本網(wǎng)站作為一個(gè)大學(xué)院系的網(wǎng)站 考慮到系里的教師和學(xué)生以及課程安排情況 將豐 富的資料有序地發(fā)布在網(wǎng)上 網(wǎng)站不但為教師和學(xué)生提供了一個(gè)良好的交流平臺(tái) 也為其 他人員了解計(jì)算機(jī)學(xué)院工程系打開(kāi)了一扇窗口 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 3 第二章第二章 平臺(tái)工具介紹平臺(tái)工具介紹 本章將介紹設(shè)計(jì)本網(wǎng)站所用到的工具 Dreamweaver MX2004 Access 及核心技術(shù) ASP 的相關(guān)資料 俗話說(shuō) 工欲善其事 必先利其器 要構(gòu)造出一個(gè)優(yōu)秀的網(wǎng)站 首先選 取得力的工具是必要的 在此 我們選用了 Macromedia 公司的網(wǎng)頁(yè)三劍客作為網(wǎng)站設(shè)計(jì) 工具 數(shù)據(jù)庫(kù)部分我們采用了 Office 系列的 Access 簡(jiǎn)單方便 而 ASP 作為最流行的動(dòng)態(tài) 網(wǎng)頁(yè)設(shè)計(jì)技術(shù) 受到很多網(wǎng)頁(yè)制作人員的青睞 我們也不例外 2 1Dreamweaver MX2004 Dreamweaver 是由 Macromedia 公司推出的 用于網(wǎng)頁(yè)開(kāi)發(fā)和網(wǎng)站管理的專業(yè)化設(shè)計(jì)工 具 它采用了多種新技術(shù) 具有設(shè)計(jì)和開(kāi)發(fā)網(wǎng)站過(guò)程中需要的網(wǎng)站管理 網(wǎng)站設(shè)計(jì) 頁(yè)面 制作 多媒體制作和動(dòng)畫(huà)制作等豐富實(shí)用的功能 它具有友好的操作界面 在文檔窗口中 可以打開(kāi)各種浮動(dòng)面板 同時(shí)還可以使用系統(tǒng)內(nèi)置的多種對(duì)象進(jìn)行操作 2 1 1 簡(jiǎn)介簡(jiǎn)介 Dreamweaver MX2004 啟動(dòng)后 會(huì)出現(xiàn)一個(gè)選擇操作窗口 如圖表 1 所示 如果選擇 新建 HTML 頁(yè)面 則創(chuàng)建一個(gè)新的窗口 如圖表 2 所示 該窗口包含如下的幾個(gè)部分 標(biāo) 題欄 菜單欄 工作區(qū) 浮動(dòng)面板和狀態(tài)欄 標(biāo)題欄中主要顯示該文檔 9 的標(biāo)題信息 文 件名及該文件所在的文件夾等 菜單欄中包含了各種操作命令 應(yīng)用特性和訪問(wèn)浮動(dòng)面板 的簡(jiǎn)單方法 Dreamweaver MX2004 啟動(dòng)后 工作區(qū)是白色的空白區(qū)域 可以在工作區(qū)中 輸入文字 插入圖象 添加背景以及其它頁(yè)面元素 浮動(dòng)面板提供了訪問(wèn)程序特性的簡(jiǎn)單 方法 可以對(duì)浮動(dòng)面板進(jìn)行選擇 拖放 重新定位 移動(dòng)等操作 當(dāng)我們不需要使用某個(gè) 移動(dòng)面板時(shí) 還可以用鼠標(biāo)單擊該面板右上角的關(guān)閉按鈕將其關(guān)閉 需要時(shí)再打開(kāi) 狀態(tài) 欄位于窗口的最下端 用于顯示文檔的 HTML 標(biāo)記 文檔窗口大小 下載速度等信息 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 4 圖表 1 Dreamweaver MX2004 啟動(dòng)界面 圖表 2 Dreamweaver MX2004 新建工作界面 2 1 2 特點(diǎn)特點(diǎn) 1 最佳的制作效率 最佳的制作效率 Dreamweaver 可以用最快速的方式將 Fireworks FreeHand 或 Photoshop 等檔案移至 網(wǎng)頁(yè)上 使用檢色吸管工具選擇銀屏上的顏色可設(shè)定最接近的網(wǎng)頁(yè)安全色 對(duì)于選單 快 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 5 捷鍵與格式控制 都只要一個(gè)簡(jiǎn)單步驟便可完成 Dremweaver 能與您喜愛(ài)的設(shè)計(jì)工具 如 Playback Flash Shockwave 和外掛模組等搭配 不需離開(kāi) Dremweaver 便可完成 整體運(yùn) 用流程自然順暢 除此之外 只要單擊便可使 Dreamweaver 自動(dòng)開(kāi)啟 Firework 或 Photoshop 來(lái)進(jìn)行編輯與設(shè)定圖檔的最佳化 2 網(wǎng)站管理 網(wǎng)站管理 使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形 設(shè)計(jì) 更新和重組網(wǎng)頁(yè) 改變網(wǎng)頁(yè)位置或檔案 名稱 Dreamweaver 會(huì)自動(dòng)更新所有連結(jié) 使用支援文字 HTML 碼 HTML 屬性標(biāo)簽和 一般語(yǔ)法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡(jiǎn)單 3 無(wú)可比擬的控制能力無(wú)可比擬的控制能力 Dreamweaver 是唯一提供 Roundtrip HTML 視覺(jué)化編輯與原始碼編輯同步的設(shè)計(jì)工具 它包含 HomeSite 和 BBEdit 等主流文字編輯器 幀 frames 和表格的制作速度快的令您無(wú)法 想像 進(jìn)階表格編輯功能使您簡(jiǎn)單的選擇單格 行 欄或作未連續(xù)之選取 甚至可以排序 或格式化表格群組 Dreamweaver 支援精準(zhǔn)定位 利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置 放的方式進(jìn)行版面配置 所見(jiàn)即所得 Dreamweaver 成功整合動(dòng)態(tài)式出版視覺(jué)編輯及電子 商務(wù)功能 提供超強(qiáng)的支援能力給 Third party 廠商 包含 ASP Apache BroadVision Cold Fusion iCAT Tango 與自行發(fā)展的應(yīng)用軟體 當(dāng)您正使用 Dreamweaver 在設(shè)計(jì)動(dòng) 態(tài)網(wǎng)頁(yè)時(shí) 所見(jiàn)即所得的功能 讓您不需要透過(guò)瀏覽器就能預(yù)覽網(wǎng)頁(yè) 夢(mèng)幻樣版和 XML Dreamweaver 將內(nèi)容與設(shè)計(jì)分開(kāi) 應(yīng)用于快速網(wǎng)頁(yè)更新和團(tuán)隊(duì)合作網(wǎng)頁(yè)編輯 建立網(wǎng)頁(yè)外 觀的樣版 指定可編輯或不可編輯的部份 內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不 會(huì)不小心改變既定之樣式 您也可以使用樣版正確地輸入或輸出 XML 內(nèi)容 全方位的呈 現(xiàn)利用 Dreamweaver 設(shè)計(jì)的網(wǎng)頁(yè) 可以全方位的呈現(xiàn)在任何平臺(tái)的熱門(mén)瀏覽器上 對(duì)于 cascading style sheets 的動(dòng)態(tài) HTML 支援和鼠標(biāo)換圖效果 聲音和動(dòng)畫(huà)的 DHTML 效果資料 庫(kù)可在 Netscape 和 Microsoft 瀏覽器上執(zhí)行 使用不同瀏覽器檢示功能 Dreamweaver 可以 告知您在不同瀏覽器上執(zhí)行的成效如何 當(dāng)有新的瀏覽器上市時(shí) 只要從 Dreamweaver 的 網(wǎng)站在下載它的描述檔 便可得知詳盡的成效報(bào)告 2 1 3 功能功能 1 頁(yè)面編輯 頁(yè)面編輯 簡(jiǎn)潔高效的設(shè)計(jì)和開(kāi)發(fā)界面簡(jiǎn)潔高效的設(shè)計(jì)和開(kāi)發(fā)界面 Dreamweaver 的界面更易于使用 可使您的工作效率和工作質(zhì)量均得到提高 插入 欄的改進(jìn)使其具有一個(gè)簡(jiǎn)潔高效的新外觀 并占用更少的工作區(qū)空間 Microsoft Word 和 Microsoft Excel 復(fù)制和粘貼命令使您可以將Microsoft Word 和Excel 文檔直接復(fù)制并粘 貼到Dreamweaver 中 當(dāng)您粘貼Word 或Excel 文檔時(shí) Dreamweaver 會(huì)保留文檔格式并生 成高質(zhì)量的HTML 內(nèi)容 表格編輯可視化反饋使您能夠看到在表格中進(jìn)行列調(diào)整操作時(shí)的實(shí) 際效果 可視化反饋還可以使您更方便地選擇表格元素 用戶界面改進(jìn)可得到最大的可用 工作區(qū) 更清晰地顯示上下文和焦點(diǎn) 并使用戶更易于使用和更具邏輯性 起始頁(yè)使您能 夠訪問(wèn)最近使用過(guò)的文件 創(chuàng)建新文件和訪問(wèn)Dreamweaver 資源 起始頁(yè)會(huì)在您啟動(dòng) Dreamweaver 或尚未打開(kāi)文檔時(shí)顯示 保存桌面選項(xiàng)使您可以選擇當(dāng)您重新啟動(dòng) Dreamweaver 時(shí)讓Dreamweaver 重新打開(kāi)您上一次使用的文檔 完全支持Unicode 意味著 在Windows 下 Dreamweaver 支持Internet Explorer 所支持的所有文本編碼方式 您可 以在Dreamweaver 中使用幾乎所有您的系統(tǒng)中安裝的語(yǔ)言字體 Dreamweaver 會(huì)正確地呈 現(xiàn)和保存這些字體 安全FTP 使您能夠完全加密所有文件傳輸 并阻止對(duì)您的數(shù)據(jù) 文件 用戶名和密碼的未授權(quán)訪問(wèn) 2 頁(yè)面整體布局 頁(yè)面整體布局 新式的頁(yè)面布局和設(shè)計(jì)環(huán)境新式的頁(yè)面布局和設(shè)計(jì)環(huán)境 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 6 Dreamweaver 包含以下增強(qiáng)的CSS 功能 這些功能提供了一個(gè)更為精巧的方法來(lái)進(jìn)行 樣式設(shè)計(jì)及提高設(shè)計(jì)交互性 此外 還包含了用于改進(jìn)可視化編輯的反饋 動(dòng)態(tài)跨瀏覽器 驗(yàn)證在您保存文檔時(shí)自動(dòng)檢查當(dāng)前文檔的跨瀏覽器兼容性問(wèn)題 在您指定一些目標(biāo)瀏覽器 后 Dreamweaver 將執(zhí)行檢查 以確保頁(yè)中沒(méi)有使用指定瀏覽器不支持的標(biāo)簽或CSS結(jié)構(gòu) 相關(guān)CSS 選項(xiàng)卡顯示應(yīng)用于當(dāng)前 代碼 視圖或 設(shè)計(jì) 視圖選擇的CSS 規(guī)則 單擊任意 規(guī)則可查看它指定了哪些屬性 邊框樣式 邊距 填充 文本大小等 特殊的標(biāo)記使您 可以知道特定屬性是否被覆蓋 就地編輯功能允許您對(duì)可立即反映在 設(shè)計(jì) 視圖中的內(nèi) 容進(jìn)行快速編輯 CSS 布局可視化使得使用CSS 對(duì)頁(yè)進(jìn)行布局大為簡(jiǎn)化 您可以在 設(shè)計(jì) 視圖中方便地選擇div 或其它內(nèi)容塊 然后使用 CSS 屬性 選項(xiàng)卡來(lái)修改屬性 基于CSS 的文本屬性檢查器列出了可用于文本的所有可用樣式 并且包含一個(gè)預(yù)覽 其中顯示出了 應(yīng)用該樣式后文本所呈現(xiàn)的外觀 基于CSS 的頁(yè)面屬性使您能夠使用新型CSS 代碼結(jié)構(gòu)對(duì) 頁(yè)面屬性進(jìn)行更多的控制 例如標(biāo)題和鏈接的外觀 集成的圖像編輯工具欄使您能夠使用 Macromedia Fireworks 技術(shù)從Dreamweaver 中進(jìn)行基本的圖像操作和編輯 您可以執(zhí)行裁 剪 調(diào)整大小和重新取樣等操作而無(wú)需離開(kāi)Dreamweaver 3 代碼編輯 代碼編輯 強(qiáng)大和開(kāi)放的編碼環(huán)境強(qiáng)大和開(kāi)放的編碼環(huán)境 Dreamweaver 為編碼人員提供了以下新增功能 包括對(duì) 代碼 視圖的改進(jìn)和無(wú)需創(chuàng) 建Dreamweaver 站點(diǎn)即可編輯文件的功能 Dreamweaver 還包括當(dāng)前對(duì)服務(wù)器技術(shù)的支持 改進(jìn)的標(biāo)簽檢查器顯示了對(duì)當(dāng)前選項(xiàng)可用的屬性列表并使您能夠進(jìn)行快捷全面的編輯 改 進(jìn)對(duì)ASP NET 表單控件的支持提供了在 設(shè)計(jì) 視圖中生成和操作ASP NET Web 表單的經(jīng) 改進(jìn)的新方法 包括新的屬性檢查器 代碼 視圖上下文菜單使您能夠快速更改所選 代碼的格式設(shè)置 2 2ASP Active Server Pages ASP 是服務(wù)器端腳本編寫(xiě)環(huán)境 使用它可以創(chuàng)建和運(yùn)行動(dòng)態(tài) 交互的 Web 服務(wù)器應(yīng)用程序 使用 ASP 可以組合 HTML 頁(yè) 腳本命令和 ActiveX 組件以 創(chuàng)建交互的 Web 頁(yè)和基于 Web 的功能強(qiáng)大的應(yīng)用程序 ASP 應(yīng)用程序很容易開(kāi)發(fā)和修改 2 2 1ASP 簡(jiǎn)介簡(jiǎn)介 從字面上說(shuō) ASP 包含三方面含義 1 1 Active ASP 使用了 Microsoft 的 ActiveX 技術(shù) ActiveX COM 技術(shù)是現(xiàn)在 Microsoft 軟件的重要基礎(chǔ) 它采用封裝對(duì)象 程序調(diào)用對(duì)象的技術(shù) 簡(jiǎn)化編程 加強(qiáng)程 序間合作 ASP 本身封裝了一些基本組件和常用組件 有很多公司也開(kāi)發(fā)了很多實(shí)用組件 只要你可以在服務(wù)器上安裝這些組件 通過(guò)訪問(wèn)組件 你就可以快速 簡(jiǎn)易地建立自己的 WEB 應(yīng)用 2 2 Server ASP 運(yùn)行在服務(wù)器端 這樣就不必?fù)?dān)心瀏覽器是否支持 ASP 所使用的編程 語(yǔ)言 ASP 的編程語(yǔ)言可以是 VBSCRIPT 和 JSCRIPT VBSCRIPT 是 VB 的一個(gè)簡(jiǎn)集 會(huì) VB 的 人可以很方便的快速上手 然而 Netscape 瀏覽器不支持客戶端的 VBSCRIPT 所以最好不 要在客戶端使用 VBSCRIPT 而在服務(wù)器端 則無(wú)需考慮瀏覽器的支持問(wèn)題 Netscape 瀏覽 器也可以正常顯示 ASP 頁(yè)面 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 7 3 3 Pages ASP 返回標(biāo)準(zhǔn)的 HTML 頁(yè)面 可以正常地在常用的瀏覽器中顯示 瀏覽者查 看頁(yè)面源文件時(shí) 看到的是 ASP 生成的 HTML 代碼 而不是 ASP 程序代碼 這樣就可以防止 別人抄襲程序 由此我們可以看出 ASP 是在 IIS 下開(kāi)發(fā) WEB 應(yīng)用的一種簡(jiǎn)單 方便的編程工具 在 了解了 VBSCRIPT 的基本語(yǔ)法后 只需要清楚各個(gè)組件的用途 屬性 方法 就可以輕松編 寫(xiě)出自己的 ASP 系統(tǒng) 2 2 2ASP 的特點(diǎn)的特點(diǎn) 1 使用 VBScript JScript 等簡(jiǎn)單易懂的腳本語(yǔ)言 結(jié)合 HTML 代碼 即可快速地完 成網(wǎng)站的應(yīng)用程序 2 ASP 無(wú)須編譯 容易編寫(xiě) 由服務(wù)器的軟件解釋后直接執(zhí)行 當(dāng)執(zhí)行 ASP 程序時(shí) 腳本程序?qū)⒁徽酌畎l(fā)送給腳本解釋器 即腳本引擎 由腳本解釋器進(jìn)行翻譯并將其轉(zhuǎn) 換成服務(wù)器所能執(zhí)行的命令 3 可使用普通的文本編輯器 如 Windows 的記事本 即可進(jìn)行編輯設(shè)計(jì) 4 與瀏覽器無(wú)關(guān) 用戶端只要使用可執(zhí)行 HTML 碼的瀏覽器 即可瀏覽 Active Server Pages 所設(shè)計(jì)的網(wǎng)頁(yè)內(nèi)容 ASP 所使用的腳本語(yǔ)言 VBScript Jscript 均在 WEB 服務(wù)器 端執(zhí)行 用戶端的瀏覽器不需要能夠執(zhí)行這些腳本語(yǔ)言 5 ASP 能與任何 ActiveX scripting 語(yǔ)言相容 除了可使用 VBScript 或 JScript 語(yǔ)言來(lái) 設(shè)計(jì)外 還通過(guò) plug in 的方式 使用由第三方所提供的其他腳本語(yǔ)言 譬如 REXX Perl 等 腳本引擎是處理腳本程序的 COM Component Object Model 物件 6 ASP 的源程序 不會(huì)被傳到客戶瀏覽器 因而可以避免所寫(xiě)的源程序被他人剽竊或 篡改 提高了程序的安全性 7 可使用服務(wù)器端的腳本來(lái)產(chǎn)生客戶端的腳本 8 對(duì)象導(dǎo)向 Object oriented 9 ActiveX Server Components ActiveX 服務(wù)器組件 具有無(wú)限可擴(kuò)充性 可以使用 Visual Basic Java Visual C 等各種編程語(yǔ)言來(lái)編寫(xiě)你所需要的 ActiveX Server Component 2 2 3ASP 的功能的功能 1 Active Server Page 內(nèi)建對(duì)象內(nèi)建對(duì)象 request 對(duì)象 Session 對(duì)象 response 對(duì)象 server 對(duì)象 application 對(duì)象 Active Server Pages 提供內(nèi)建對(duì)象 這些對(duì)象使用戶更容易收集通過(guò)瀏覽器請(qǐng)求發(fā)送 的信息 響應(yīng)瀏覽器以及存儲(chǔ)用戶信息 如用戶首選項(xiàng) 2 腳本語(yǔ)言 腳本語(yǔ)言 選用 VBScript 腳本語(yǔ)言 讀取表單 打開(kāi)數(shù)據(jù)源 執(zhí)行 SQL 語(yǔ)言 等等 略 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 8 2 3Access 作為本網(wǎng)站數(shù)據(jù)庫(kù)系統(tǒng)的設(shè)計(jì)軟件 下面簡(jiǎn)要介紹一下 2 3 1Access 簡(jiǎn)介簡(jiǎn)介 作為 Microsoft 的 office 套件產(chǎn)品之一的桌面數(shù)據(jù)庫(kù)系統(tǒng) Access 與許多優(yōu)秀的關(guān)系數(shù) 據(jù)庫(kù)一樣 可以讓你很容易地連接相關(guān)的信息而且還對(duì)其他的數(shù)據(jù)庫(kù)系統(tǒng)有所補(bǔ)充 它能 操作其它來(lái)源的資料 包括許多流行的 PC 數(shù)據(jù)庫(kù)程序 如 dBASE Paradox Microsoft FoxPro 和服務(wù)器 小型積極大型機(jī)上的許多 SQL 數(shù)據(jù)庫(kù) Access 還完全支持 Microsoft 的 OLE 技術(shù) 界面如圖表 3 所示 圖表 3 Access 界面 2 3 2Access 的功能及特點(diǎn)的功能及特點(diǎn) 1 1 數(shù)據(jù)庫(kù)中包含多個(gè)表 每個(gè)表可以分別表示和存儲(chǔ)不同類型的信息 2 2 通過(guò)建立各個(gè)表之間的關(guān)聯(lián) 從而將存儲(chǔ)在不同表中的相關(guān)數(shù)據(jù)有機(jī)地結(jié)合起來(lái) 3 3 用戶可以通過(guò)創(chuàng)建查詢?cè)谝粋€(gè)表或多個(gè)數(shù)據(jù)表中檢索 更新和刪除記錄 并且可以 對(duì)數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行各種計(jì)算 4 4 通過(guò)創(chuàng)建聯(lián)機(jī)窗體 用戶可以直接對(duì)數(shù)據(jù)庫(kù)中的記錄執(zhí)行查看和編輯操作 5 5 通過(guò)創(chuàng)建報(bào)表 用戶可以將數(shù)據(jù)以特定的方式加以組織 從而達(dá)到分析可打印的目 的 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 9 第三章第三章 網(wǎng)站的整體規(guī)劃與設(shè)計(jì)網(wǎng)站的整體規(guī)劃與設(shè)計(jì) 這一章將從設(shè)計(jì)網(wǎng)站的目的出發(fā) 簡(jiǎn)要提出了網(wǎng)站的整體設(shè)計(jì)思路 對(duì)網(wǎng)站的風(fēng)格 格局 結(jié)構(gòu)以及主要內(nèi)容作出了概括 這一步驟屬于整個(gè)過(guò)程的準(zhǔn)備階段 3 1 網(wǎng)站設(shè)計(jì)前提思路網(wǎng)站設(shè)計(jì)前提思路 首先我們要明確這個(gè)網(wǎng)站設(shè)計(jì)的目的 以及它所要達(dá)到的功能 能夠體現(xiàn)什么特點(diǎn) 3 1 1 網(wǎng)站設(shè)計(jì)目的網(wǎng)站設(shè)計(jì)目的 網(wǎng)站設(shè)計(jì)的前提是先弄清楚服務(wù)的對(duì)象 否則將是事倍功半的 在引言部分已經(jīng)分析 過(guò) 本網(wǎng)站的主要服務(wù)對(duì)象是江蘇大學(xué)計(jì)算機(jī)學(xué)院的師生 其設(shè)計(jì)目的是提供給對(duì)象一個(gè) 網(wǎng)上交流信息 查詢資料的平臺(tái) 另外 本站點(diǎn)也將作為在因特網(wǎng) 這個(gè)新媒體上展示 計(jì)算機(jī)工程系形象的信息空間 明確設(shè)計(jì)站點(diǎn)的目的和用戶需求 從而作出切實(shí)可行的計(jì)劃 挑選與錘煉工程系的關(guān) 鍵信息 利用一個(gè)邏輯結(jié)構(gòu)有序地組織起來(lái) 開(kāi)發(fā)一個(gè)頁(yè)面設(shè)計(jì)原型 選擇用戶代表來(lái)進(jìn) 行測(cè)試 并逐步精煉這個(gè)原型 形成創(chuàng)意 分析有些網(wǎng)站的效果不如預(yù)想的好 主要原因 是對(duì)用戶的需求理解有偏差 缺少用戶的檢驗(yàn)造成的 3 1 2 網(wǎng)站所需實(shí)現(xiàn)的功能網(wǎng)站所需實(shí)現(xiàn)的功能 我們要設(shè)計(jì)的便是這樣一個(gè)網(wǎng)站 它不是那種綜合性 藝術(shù)性的網(wǎng)站 而是一個(gè)大學(xué) 院系的網(wǎng)站 那么這種定義便將網(wǎng)站所要實(shí)現(xiàn)的功能包含了 1 介紹計(jì)算機(jī)工程系 介紹計(jì)算機(jī)工程系 這并不是本網(wǎng)站的主要功能 但必不可少 我們將把首頁(yè)的一部分作為介紹工程系的 窗口 當(dāng)人們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候可以對(duì)計(jì)算機(jī)工程系有一個(gè)了解 這部分功能的實(shí)現(xiàn)只需 一塊區(qū)域 放在首頁(yè)更加直觀 2 教學(xué)安排 課程建設(shè)及科研情況 教學(xué)安排 課程建設(shè)及科研情況 這里包括各學(xué)期的教學(xué)安排 每一學(xué)科的課程建設(shè)以及工程系科研情況 比如教學(xué)任 務(wù)表 畢業(yè)設(shè)計(jì) 任課教師 課程資源 科研項(xiàng)目 論文專著 等等 3 師資力量及通訊錄 師資力量及通訊錄 有關(guān)工程系各位教師的介紹以及他們的個(gè)人網(wǎng)站的網(wǎng)址 另外有各位老師的詳細(xì)通訊 資料 4 文檔及軟件下載 文檔及軟件下載 教學(xué)文檔 課件以及常用軟件的下載 5 其它功能 其它功能 ftp 地址以及一些友情鏈接 等等 6 管理功能 管理功能 這里屬于后臺(tái)管理 通過(guò)分配不同的權(quán)限使得網(wǎng)站管理有序而安全 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 10 3 1 3 網(wǎng)站的特點(diǎn)網(wǎng)站的特點(diǎn) 1 實(shí)用性 實(shí)用性 這一點(diǎn)應(yīng)該是每一個(gè)網(wǎng)站的必需 特別是這種院系網(wǎng)站 所以我們將重點(diǎn)突出 簡(jiǎn)潔 二字 理論上講 設(shè)計(jì)并不再現(xiàn)具體的物象和特征 它要表達(dá)的是一定的意圖和要求 在 適當(dāng)?shù)沫h(huán)境里為人們所理解和接受 它與繪圖有內(nèi)在聯(lián)系 但又不同于繪畫(huà) 它以滿足人 們的實(shí)用和需求為目標(biāo) 因而它比繪畫(huà)更單純 清晰和精確 頁(yè)面設(shè)計(jì)屬于設(shè)計(jì)的一種 同樣要求簡(jiǎn)練 準(zhǔn)確 保持簡(jiǎn)潔的常用的一個(gè)做法是限制所用的字體和顏色的數(shù)目 一般 每頁(yè)使用的字體不超過(guò)三種 一個(gè)頁(yè)面中使用的顏色少于 256 種 頁(yè)面上所有的元素都應(yīng) 當(dāng)有明確的含義和用途 而不要試圖用無(wú)關(guān)的圖片把頁(yè)面裝點(diǎn)起來(lái) 我們要讓別人明白本 網(wǎng)站突出表達(dá)的內(nèi)容 主題 2 方便性 方便性 一個(gè)好的網(wǎng)站不僅要求能夠提供實(shí)用的信息 還要有方便的瀏覽方式 也就是說(shuō) 要 讓登陸網(wǎng)站的人能夠方便的查詢資料 鮮明的格調(diào) 整潔的頁(yè)面以及詳細(xì)的鏈接就顯得格 外重要 這樣 我們需要著重考慮以下幾個(gè)因素 精心組織的內(nèi)容 格式美觀的正文 較 好的對(duì)比度 使得文字具有較強(qiáng)的可讀性 頁(yè)面元素大小適中 布局勻稱 不同元素之間 留有足夠空白 給人視覺(jué)上休息的機(jī)會(huì) 文字準(zhǔn)確無(wú)誤 無(wú)錯(cuò)別字 無(wú)拼寫(xiě)錯(cuò)誤 等等 在設(shè)計(jì)網(wǎng)站頁(yè)面時(shí) 我們精心組織所要發(fā)布的材料 按邏輯或時(shí)間順序進(jìn)行組織 為 了使網(wǎng)站的內(nèi)容變得有條理 材料組織好后 便開(kāi)始在網(wǎng)站頁(yè)面上布置文本 圖片等內(nèi)容 目的是引導(dǎo)瀏覽者在頁(yè)內(nèi)瀏覽 我們控制頁(yè)面上的元素的放置順序和它們相互之間的空隙 并把相關(guān)的內(nèi)容放在一起 而不相關(guān)的內(nèi)容用空白 水平線或其他圖形分隔開(kāi) 給用戶一 個(gè)有規(guī)律的瀏覽途徑 由于人們閱讀材料習(xí)慣于從左到右 從上到下進(jìn)行 因此他們眼睛首先看到的是頁(yè)面 的左上角 然后逐漸往下看 根據(jù)這一習(xí)慣 我們?cè)诮M織內(nèi)容時(shí)便把希望瀏覽者最先看到 的內(nèi)容放在頁(yè)面的左上角和頁(yè)面頂部 如最新消息以及其他一些重要內(nèi)容等等 重要的內(nèi) 容應(yīng)當(dāng)是瀏覽者最容易發(fā)現(xiàn) 而不是放在很深的鏈接之后的 在處理鏈接問(wèn)題時(shí)我們也比 較謹(jǐn)慎 為的是不使因?yàn)殒溄拥幕靵y而導(dǎo)致整個(gè)網(wǎng)站的方便性 3 美觀性 美觀性 首先是一致性 一致性是表現(xiàn)一個(gè)站點(diǎn)的獨(dú)特風(fēng)格的重要手段之一 我們?cè)谠O(shè)計(jì)網(wǎng)站 時(shí)使用了一致的框架以及一致的字體和顏色 為了達(dá)到網(wǎng)站視覺(jué)上的整體感及和諧感 色彩可以使頁(yè)面更加生動(dòng) 色彩產(chǎn)生的強(qiáng)烈視覺(jué)效果可以使頁(yè)面在瀏覽者心中留下很 深的印象 但是必注意慎重的使用色彩 否則很可能弄巧成拙 濫用色彩容易造成視覺(jué)上的 混亂 在選擇背景和正文顏色時(shí) 我們鐵別注意的一點(diǎn)是易讀性 實(shí)現(xiàn)易讀性的關(guān)鍵在于 提供足夠的明暗對(duì)比 我們選擇了淺藍(lán)色的背景和黑色的字 4 安全性 安全性 由于網(wǎng)站提供給各位老師私人的空間儲(chǔ)存自己的資料 用戶的權(quán)限以及網(wǎng)絡(luò)安全必須 著重考慮 5 穩(wěn)定性 穩(wěn)定性 這一點(diǎn)也是至關(guān)重要的 因?yàn)榫W(wǎng)站并不是建立后就完事了 更多的還是后期的維護(hù)工 作 而穩(wěn)定性這一點(diǎn)正是使以后的維護(hù)能夠有條不紊 方便 順利的進(jìn)行 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 11 3 2 網(wǎng)站總體設(shè)計(jì)網(wǎng)站總體設(shè)計(jì) 在分析完網(wǎng)站設(shè)計(jì)的目的 特點(diǎn)以及所要實(shí)現(xiàn)的功能后 我們并不是直接開(kāi)始制作 而是需要對(duì)網(wǎng)站進(jìn)行總體設(shè)計(jì) 包括 網(wǎng)站的欄目板塊和結(jié)構(gòu) 網(wǎng)站內(nèi)容的安排 相互鏈 接關(guān)系 等等 3 2 1 網(wǎng)站的欄目板塊和目錄結(jié)構(gòu)網(wǎng)站的欄目板塊和目錄結(jié)構(gòu) 1 確定網(wǎng)站的欄目 確定網(wǎng)站的欄目 建立一個(gè)網(wǎng)站好比寫(xiě)一篇文章 首先要擬好提綱 文章才能主題明確 層次清晰 如 果網(wǎng)站結(jié)構(gòu)不清晰 目錄龐雜 內(nèi)容東一塊西一塊 結(jié)果不但瀏覽者看得糊涂 自己擴(kuò)充 和維護(hù)網(wǎng)站也相當(dāng)困難 網(wǎng)站的題材確定后 并且收集和組織了許多相關(guān)的資料內(nèi)容 但 如何組織內(nèi)容才能吸引網(wǎng)友們來(lái)瀏覽網(wǎng)站呢 欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引 索引應(yīng) 該將網(wǎng) 站的主體明確顯示出來(lái) 我們?cè)O(shè)立網(wǎng)站以下幾個(gè)欄目 教學(xué)安排 課程建設(shè) 科研 情況 文檔下載 通訊錄 2 確定網(wǎng)站的目錄結(jié)構(gòu) 確定網(wǎng)站的目錄結(jié)構(gòu) 目錄結(jié)構(gòu)的好壞 對(duì)瀏覽者來(lái)說(shuō)并沒(méi)有什么太大的感覺(jué) 但是對(duì)于站點(diǎn)本身的上傳維護(hù) 內(nèi)容未來(lái)的擴(kuò)充和移植有著重要的影響 所以在創(chuàng)建網(wǎng)站目錄時(shí)我們嚴(yán)格注意一下規(guī)范 1 不把所有文件都存放在根目錄下 否則會(huì)造成文件管理混亂 搞不清哪些文件需要編輯和 更新 哪些無(wú)用的文件可以刪除 哪些是相關(guān)聯(lián)的文件 影響工作效率 2 目錄的層 次不要太深 目錄的層次建議不要超過(guò) 3 層 維護(hù)管理方便 3 不要使用中文目錄 4 不要使用過(guò)長(zhǎng)的目錄 3 2 2 網(wǎng)站的排版及布局網(wǎng)站的排版及布局 1 排版設(shè)計(jì) 排版設(shè)計(jì) 有限的視覺(jué)符號(hào) 文字 少量的插圖 有時(shí)沒(méi)有 這些素材有時(shí)不具備描述清楚事件 或呈現(xiàn)情緒的能力 即使能自由的使用線條和色彩輔助 仍然拘束 所以通過(guò) 形象思維 直接捕獲內(nèi)心的原點(diǎn) 是排版設(shè)計(jì)的唯一途徑 排版設(shè)計(jì)最重要的是 設(shè)計(jì)者如何把那些 涵養(yǎng)和觀點(diǎn)傳達(dá)給觀者 以便使版面上的思想能進(jìn)入觀者的心靈 2 網(wǎng)頁(yè)的布局 網(wǎng)頁(yè)的布局 按照平面設(shè)計(jì)的形式來(lái)看 整個(gè)頁(yè)面可以分為幾個(gè)部分 每個(gè)部分有不同的功能 也 能體現(xiàn)不同的形式 具體看來(lái)就是上邊 左邊 下邊 右邊 中間 看似無(wú)奇 自身卻有 許多獨(dú)特的地方 中間的部分一般是最大的 因?yàn)樗休d著主要的信息 用戶主要就是看 中間這個(gè)部分的內(nèi)容 我們所設(shè)計(jì)的便是上邊和右邊相結(jié)合的拐角型 上面是頁(yè)面的提頭 和欄目導(dǎo)航 右邊是留言板和其它的鏈接 而左邊則是網(wǎng)頁(yè)的主體內(nèi)容部分 3 2 2 網(wǎng)站內(nèi)容的安排網(wǎng)站內(nèi)容的安排 在設(shè)計(jì)完網(wǎng)站的結(jié)構(gòu)和布局后 接下來(lái)就要考慮內(nèi)容的填充了 內(nèi)容和形式 即具體 的網(wǎng)頁(yè)的排版布局 要能夠達(dá)到一種協(xié)調(diào)的狀態(tài)下才能真正的成功的網(wǎng)頁(yè)設(shè)計(jì) 所以 不 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 12 能單獨(dú)考慮網(wǎng)頁(yè)的內(nèi)容 以為只要能夠把具體內(nèi)容清晰流暢的放到網(wǎng)站上就行了 造成整 個(gè)頁(yè)面的形式感很差 這樣嚴(yán)重影響用戶的心情 同樣假如不顧網(wǎng)頁(yè)的內(nèi)容 只顧頁(yè)面的 形式 盡管頁(yè)面再漂亮 用戶也不會(huì)歡迎 因?yàn)檫@樣是他們根本沒(méi)有得到什么東西 或者 獲得的信息很少 要知道 我們所設(shè)計(jì)的是計(jì)算機(jī)工程系得網(wǎng)站 是為師生提供網(wǎng)上交流 空間與學(xué)習(xí)資料查詢的地方 沒(méi)有詳盡的內(nèi)容根本不是我們的目的 那只能是買(mǎi)櫝還珠 舍本逐末 當(dāng)然 網(wǎng)站的資料已經(jīng)提供 我們所要做的就是將這些資料合理有序的放置在網(wǎng)站上 網(wǎng)站的框架和布局既然已經(jīng)設(shè)計(jì)完成 那么網(wǎng)站的內(nèi)容的安排也相對(duì)簡(jiǎn)單了 我們?cè)诎才?內(nèi)容時(shí)以內(nèi)容本身為主 兼顧美觀性 每個(gè)板塊都事先設(shè)計(jì)好方案 然后加入內(nèi)容 3 2 3 網(wǎng)站鏈接關(guān)系網(wǎng)站鏈接關(guān)系 1 網(wǎng)站的鏈接結(jié)構(gòu) 網(wǎng)站的鏈接結(jié)構(gòu) 網(wǎng)站的鏈接結(jié)構(gòu)是指頁(yè)面之間相互鏈接的拓?fù)浣Y(jié)構(gòu) 它建立在目錄結(jié)構(gòu)基礎(chǔ)之上 但 可以跨越目錄 建立網(wǎng)站的鏈接結(jié)構(gòu)有樹(shù)狀和星狀兩種基本方式 樹(shù)狀鏈接結(jié)構(gòu)類似 DOS 的目錄結(jié)構(gòu) 首頁(yè)鏈接指向一級(jí)頁(yè)面 一級(jí)頁(yè)面鏈接指向二級(jí)頁(yè)面 這樣的鏈接結(jié)構(gòu) 瀏覽時(shí) 一級(jí)級(jí)進(jìn)入 一級(jí)級(jí)退出 優(yōu)點(diǎn)是條理清晰 訪問(wèn)者明確知道自己在什么位置 不會(huì) 迷 路 缺點(diǎn)是瀏覽效率低 一個(gè)欄目下的子頁(yè)面到另一個(gè)欄目下的子頁(yè)面 必須繞 經(jīng)首頁(yè) 而星狀鏈接結(jié)構(gòu)類似網(wǎng)絡(luò)服務(wù)器的鏈接 每個(gè)頁(yè)面相互之間都建立有鏈接 這種 鏈接結(jié)構(gòu)的優(yōu)點(diǎn)是瀏覽方便 隨時(shí)可以到達(dá)自己喜歡的頁(yè)面 缺點(diǎn)是鏈接太多 容易使瀏 覽者迷路 搞不清自己在什么位置 看了多少內(nèi)容 所以我們采用了兩種結(jié)合的方式 整 體是樹(shù)狀結(jié)構(gòu) 但細(xì)節(jié)部分又插入星狀結(jié)構(gòu) 這樣既條理清晰 有層次感 也方便用戶瀏 覽 2 各部分的鏈接 各部分的鏈接 首先是首頁(yè)鏈接出幾個(gè)主要版塊 如教學(xué)安排 課程建設(shè) 文檔下載等等 這是樹(shù)型 結(jié)構(gòu) 各版塊之間要通過(guò)首頁(yè)的鏈接來(lái)訪問(wèn) 然后是其他內(nèi)容的鏈接 如留言板 新聞等 鏈接 這些涉及到了數(shù)據(jù)庫(kù)的管理 一般是通過(guò)鏈接訪問(wèn)數(shù)據(jù)庫(kù)來(lái)讀取資料 3 3 網(wǎng)站結(jié)構(gòu)網(wǎng)站結(jié)構(gòu) 網(wǎng)站的基本結(jié)構(gòu)是樹(shù)形框架 首頁(yè)作為樹(shù)根引申出各版塊頁(yè)面 各版塊通過(guò)首頁(yè)互相 聯(lián)系 后臺(tái)負(fù)責(zé)管理整個(gè)網(wǎng)站 由首頁(yè)登陸 為了便于分析 特用框架圖來(lái)解釋 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 13 首頁(yè) 教 學(xué) 安 排 課 程 建 設(shè) 科 研 情 況 文 檔 下 載 通 訊 錄 最 新 消 息 師 資 力 量 留 言 板 后臺(tái) 管理 下 載 系 統(tǒng) 圖表 4 網(wǎng)站結(jié)構(gòu)圖 網(wǎng)站的首頁(yè)作為根目錄 其他頁(yè)面和資料作為枝葉 網(wǎng)站從首頁(yè)鏈接出幾個(gè)分頁(yè) 教 學(xué)安排 課程建設(shè) 科研情況 文檔下載以及通訊錄等等 首頁(yè)上還應(yīng)當(dāng)有一些最新的公 告 消息 以及計(jì)算機(jī)工程系師資力量的介紹 而后臺(tái)管理作為網(wǎng)站的數(shù)據(jù)庫(kù)及管理系統(tǒng) 分別管理著每一個(gè)枝葉 這當(dāng)然只是粗略的構(gòu)造框架 詳細(xì)部分將在下一章重點(diǎn)實(shí)現(xiàn) 構(gòu)造這一框架的目的是 為了更深刻的明確網(wǎng)站的組成及內(nèi)容 從而讓網(wǎng)站的建設(shè)工作能夠有條不紊的進(jìn)行 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 14 第四章第四章 網(wǎng)站的實(shí)現(xiàn)網(wǎng)站的實(shí)現(xiàn) 這一部分是整個(gè)設(shè)計(jì)階段的主體 當(dāng)然 只要已經(jīng)做出了充分的準(zhǔn)備工作 那么接下 來(lái)的事情也不算太難 建設(shè)網(wǎng)站就像是在建造一座房子 先是設(shè)計(jì)方案和圖紙以及準(zhǔn)備材料和工具 然后便 開(kāi)始緊鑼密鼓的施工了 而在建造的過(guò)程中 建筑工人也是從基礎(chǔ)到建樓一步一步來(lái)的 正如我們?cè)谠O(shè)計(jì)網(wǎng)站的時(shí)候也是從首頁(yè)到分頁(yè) 從前臺(tái)到后臺(tái) 逐步完成的 4 1 首頁(yè)設(shè)計(jì)過(guò)程首頁(yè)設(shè)計(jì)過(guò)程 網(wǎng)站的整體形象的體現(xiàn)在于首頁(yè) 一個(gè)網(wǎng)站給人的第一印象就是主頁(yè) 但是也絕不是 說(shuō) 只要主頁(yè)做好了 網(wǎng)站的整體形象就好 因?yàn)樵谟脩魧?duì)整個(gè)網(wǎng)站的瀏覽的過(guò)程中 會(huì) 自然而然的形成一種對(duì)網(wǎng)站的看法 這種看法是附帶有感情色彩的 比如喜歡 不喜歡 沒(méi)有什么感覺(jué)等 這就是整體形象的體現(xiàn) 這是靠主頁(yè)和其它的頁(yè)面相配合來(lái)完成的 所 以在制作網(wǎng)頁(yè)的時(shí)候要考慮怎么將自己網(wǎng)站好的一面體現(xiàn)給自己的用戶 又要考慮體現(xiàn)的 方式 側(cè)重點(diǎn) 不能一鍋端 都放在主頁(yè)上 造成雜亂的形象 而要給人以好的可以信賴 的形象就必須從許多細(xì)節(jié)上入手 同時(shí)規(guī)范整個(gè)網(wǎng)站的外在表現(xiàn) 具體在于標(biāo)志的設(shè)計(jì) 標(biāo)準(zhǔn)色彩的表達(dá)以及標(biāo)準(zhǔn)字體的設(shè)計(jì) 這些都是很重要的 有一個(gè)統(tǒng)一的 標(biāo)準(zhǔn)的形象是 贏得自己用戶信賴的條件 4 1 1 首頁(yè)框架設(shè)計(jì)首頁(yè)框架設(shè)計(jì) 設(shè)計(jì)首頁(yè) 要表現(xiàn)其首頁(yè)的特點(diǎn)和作用 首先 首頁(yè)是一個(gè)網(wǎng)站給人的第一印象 這 也正是瀏覽者對(duì)網(wǎng)站評(píng)價(jià)優(yōu)劣的最主要因素 那么我們所要表現(xiàn)的不是花哨 不是冗雜 而是簡(jiǎn)潔明了 能夠體現(xiàn)我們計(jì)算機(jī)人的特色的風(fēng)格 要明確的是 我們不是藝術(shù)家 不 是附庸風(fēng)雅的浪漫主義者 而是扎扎實(shí)實(shí)的工作者 我們所設(shè)計(jì)的簡(jiǎn)潔樸素的首頁(yè)風(fēng)格正 體現(xiàn)了這種思想 使人們?cè)跒g覽的時(shí)候感到的不是眼花繚亂 而是清楚方便 這些從后面 展示的界面便可看出 不再多說(shuō) 其次 首頁(yè)是整個(gè)網(wǎng)站的索引 可以這么比喻 整個(gè)網(wǎng)站是一個(gè)線路網(wǎng) 那么首頁(yè)便 是這個(gè)線路的主干道 其他分頁(yè)則是分支 于是首頁(yè)框架設(shè)計(jì)所要體現(xiàn)的另一個(gè)重要點(diǎn)在 于它的索引功能 也就是方便的鏈接 然后 首頁(yè)所要體現(xiàn)的另一個(gè)重要功能就是提供醒目的新聞及介紹 當(dāng)然 這些內(nèi)容 可以在相應(yīng)的副業(yè)里介紹 但首頁(yè)位置可以給作為重要的最新的新聞內(nèi)容一個(gè)給人最直接 的映像 綜上所述 可以得到這樣的結(jié)論 首頁(yè) 簡(jiǎn)潔的風(fēng)格 健全方便的鏈接 最新的新聞重 要的介紹 這只是一個(gè)簡(jiǎn)單的公式 但設(shè)計(jì)起來(lái)卻不是那么簡(jiǎn)單 下面就討論一下首頁(yè)頁(yè) 面的設(shè)計(jì)吧 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 15 4 1 2 首頁(yè)頁(yè)面設(shè)計(jì)首頁(yè)頁(yè)面設(shè)計(jì) 由于上一節(jié)介紹的首頁(yè)框架 接下來(lái)便只剩下給這個(gè)框架實(shí)施了 首頁(yè)最醒目的位置 是最新的新聞通告和最新動(dòng)態(tài) 用 ASP 動(dòng)態(tài)添加 這為新聞的更新提供了很大的方便 在 此的下面是工程系的幾位老師的介紹以及個(gè)人網(wǎng)址鏈接 在首頁(yè)的右上方 當(dāng)然也是醒目 的位置 是滾動(dòng)的留言板 這也是動(dòng)態(tài)更新的 在留言板的下面是工程系的介紹和網(wǎng)站鏈 接 首頁(yè)的最下面和其他一些網(wǎng)站一樣 放著聯(lián)系方法和申明 所有的動(dòng)態(tài)資料都交給后 臺(tái)管理吧 那也是非常方便簡(jiǎn)潔的 后面將有敘述 在設(shè)計(jì)網(wǎng)站首頁(yè)時(shí) 我們遵從了以下規(guī)范 1 盡量精簡(jiǎn) 盡量精簡(jiǎn) 首頁(yè)的作用好比一本書(shū)的封面 是為了吸引用戶瀏覽你的網(wǎng)址內(nèi)容 因此 首頁(yè)的設(shè) 汁應(yīng)以醒目為上 令人一目了然 切勿堆砌太多不必要的細(xì)節(jié) 或使畫(huà)面過(guò)于復(fù)雜 在首 頁(yè)上清楚列出幾項(xiàng)要點(diǎn)以及主頁(yè)內(nèi)容即可 頁(yè)面給人的第一觀感最為重要 盡管這是一個(gè) 學(xué)院的網(wǎng)站 首頁(yè)的好壞直接影響師生們對(duì)整個(gè)網(wǎng)站的感受 2 盡量簡(jiǎn)樸 盡量簡(jiǎn)樸 首頁(yè)上的圖形應(yīng)力求簡(jiǎn)樸 避免耽擱用戶的時(shí)間 不要忘了 這個(gè)網(wǎng)站設(shè)計(jì)出的目的 是為了師生的網(wǎng)上交流和學(xué)習(xí) 而不是娛樂(lè)或其它一些目的 圖像愈大 顏色愈深 傳送 頁(yè)面的時(shí)間愈長(zhǎng) 這也并不是說(shuō)要完全略去圖像不用 只是要注意使用圖像所引起的效果 首頁(yè)上的顏色最好不超過(guò)六十四種 頁(yè)頂圖像最好保持在大約 10KB 千字節(jié) 以下 切勿禁 不住誘惑 覺(jué)得非要放入大幅的圖畫(huà)不可 應(yīng)考慮只用三兩幅短小精悍的圖像 首頁(yè)整體上 要能夠迅速傳送 如果載入的時(shí)間超過(guò)五至十秒 很多用戶就會(huì)等得不耐煩 3 使首頁(yè)易于漫游 使首頁(yè)易于漫游 首頁(yè)的其中一個(gè)主要功能是作為漫游工具 指引用戶查閱你存儲(chǔ)在網(wǎng)址或其他地點(diǎn)的 信息 盡量使漫游過(guò)程不費(fèi)吹灰之力 基于清晰明確和速度的考慮 首頁(yè)上的鏈接項(xiàng)目應(yīng) 只限于幾個(gè)高級(jí)的類別 另外 所提供的信息不應(yīng)埋藏在重重疊疊的頁(yè)面之下 穿越五個(gè) 以上的聯(lián)接項(xiàng)目已足以令人厭煩 因此 必須在廣度和深度之間求取平衡 4 提綱挈領(lǐng) 提綱挈領(lǐng) 首頁(yè)作為用戶瀏覽網(wǎng)站的入口 除了包含重要的新聞信息之外 還應(yīng)該起著提綱挈領(lǐng) 的作用 因此 般須載有以下事項(xiàng) 標(biāo)題 新聞 鏈接 電子郵件地址 版權(quán)資料 聯(lián)絡(luò)信息 等等 說(shuō)了這些 不如直接看的明了 圖表 5 就是用 Dreamweaver MX2004 設(shè)計(jì)的首頁(yè) 畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè)畢業(yè)論文 計(jì)算機(jī)工程系網(wǎng)站建設(shè) 16 圖表 5 首頁(yè)頁(yè)面設(shè)計(jì) 4 1 3 首頁(yè)首頁(yè) ASP 程序設(shè)計(jì)程序設(shè)計(jì)