【正文】 ............ 22 結(jié) ...................................................................... 22 目 錄 .................................................................... 22 致謝 ............................................................................... 23 參考文獻(xiàn) ........................................................................... 23 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 1 摘 要 21世紀(jì)是信息 高速發(fā)達(dá)的時(shí)代 ，互聯(lián)網(wǎng)實(shí)現(xiàn)了世界范圍的網(wǎng)絡(luò)間的互聯(lián)和信息共享，并已全面介入人類生產(chǎn)生活的方方面面，帶動(dòng)著人類社會(huì)的飛速發(fā)展 ，發(fā)揮著重要的作用 。因此網(wǎng)站建設(shè)在互聯(lián)網(wǎng)的應(yīng)用上的地位顯而易見，它已成為信息社會(huì)的重要組成部分，從而倍受人們的重視。同時(shí)也大大地提高了我院學(xué)生的交流效率，也增加了該社團(tuán)的知明度，更重要的是為我院計(jì)算機(jī)愛好者提供了一個(gè)網(wǎng)絡(luò)生活空間，促進(jìn)了我們對(duì)網(wǎng)絡(luò)知識(shí)的進(jìn)一步地學(xué)習(xí)。 通過該網(wǎng)站展示了計(jì)協(xié)信息、機(jī) 構(gòu)設(shè)置、協(xié)會(huì)新聞、學(xué)習(xí)園地、學(xué)習(xí)資料、問題集錦、休閑娛樂等系列內(nèi)容的介紹。同時(shí)您也可以利用 和 電子信箱經(jīng)濟(jì)而又快捷地與外界進(jìn)行各種信息溝通。這要求我們 制作者 要 明確和熟悉設(shè)計(jì)的對(duì)象和構(gòu)成的要素 。 在論文中首先介紹了 網(wǎng)站建設(shè) 的相關(guān)知識(shí)，并根據(jù)以上知識(shí)制作網(wǎng)站。在論文中還包括了部分網(wǎng)站制作的主要程序代碼。 由于 我們的水平有限的，所以上面的有些 特效 都是從網(wǎng)上借鑒來的，例如 相冊(cè)、幻燈圖等 。 準(zhǔn)備工作 網(wǎng)站籌劃 界面就是網(wǎng)站給瀏覽者的第一印象，往往決定著網(wǎng)站的可看性，在確定網(wǎng)站的界面時(shí)要注意以下三點(diǎn)： （ 1） 欄目與板塊編排 構(gòu)建一個(gè)網(wǎng)站就好比寫一篇論文，首先要列出提綱，才能主題明確、層次清晰。 網(wǎng)站的題材確定后，就要將收集到的資料內(nèi)容作一個(gè)合 理的編排。欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在欄目編排時(shí)需要注意的是： ? 盡可能刪除那些與主題無關(guān)的欄目； ? 盡可能將網(wǎng)站內(nèi)最有價(jià)值的內(nèi)容列在欄目上； ? 盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽；輔助內(nèi)容，如站點(diǎn)簡介、版權(quán)信息等大可不必放在主欄目里，以免沖淡主題。板塊比欄目的概念要大一些，每個(gè)板塊都有自己的欄目。例如：在用 Dreamweaver 建立網(wǎng)站時(shí)都默認(rèn)建立了根目錄和Images 子目錄。目錄結(jié)構(gòu)的好壞，對(duì)瀏覽者來說并沒有什么太大的感覺，但是對(duì)于站點(diǎn)本身的維護(hù)，以后內(nèi)容的擴(kuò)充和移植有著重要的影響。有網(wǎng)站制作者為了方便，將所有文件都放在根目錄下。 ? 按欄目內(nèi)容建立子目錄。新聞內(nèi)容較多，需要經(jīng)常更新的可以建立獨(dú)立的子目錄。 ? 在每個(gè)主目錄下都建立獨(dú)立的 Images 目錄。將所有圖片都存放在這個(gè)目錄里很是不方便，比如在欄目刪除時(shí)，圖片的管理相當(dāng)麻煩。需要注意的還有：目錄的層次不 要太深，不要超過 3 層；不要使用中文目錄，可能對(duì)網(wǎng)址的正確顯示造成困難；不要使用過長的目錄，太長的目錄名不便于記憶；盡量使用意義明確的目錄，以便于記憶和管理。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。 一個(gè)點(diǎn)可以和一個(gè)點(diǎn)連接，也可以和多個(gè)點(diǎn)連接。一般的，建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式： ●樹狀鏈接結(jié)構(gòu)（一對(duì) 一），這類似 DOS的目錄結(jié)構(gòu)，首頁鏈接指向一級(jí)頁面，一級(jí)頁面鏈接指向二滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 3 級(jí)頁面。 ●星狀鏈接結(jié)構(gòu)（一對(duì)多），類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個(gè)頁面相互之間都建立有鏈接。但是由于鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。網(wǎng)站希望瀏覽者既可以方便快速地達(dá)到自己需要的頁面，又可以清晰地知道自己的位置。關(guān)于鏈接結(jié)構(gòu)的設(shè)計(jì)，在實(shí)際的網(wǎng)頁制作中是非常重要一環(huán)，采用什么樣的鏈接結(jié)構(gòu)直接影響到版面的布局。 明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。 ? 有的圖片 可以 自己用 Photoshop、 fireworks 制作設(shè)計(jì) 。 ? 網(wǎng)絡(luò)搜索找素材：利用網(wǎng)絡(luò)搜索引擎，輸入與主題相關(guān)的關(guān)鍵詞進(jìn)行搜索 下載，然后加以修改 。注意記錄下選中的網(wǎng)頁地址，以便隨時(shí)復(fù)制需要的資料。 （ 2） 整理素材，設(shè)計(jì)網(wǎng)頁。將各類素材分別放入或鏈接到相應(yīng)網(wǎng)頁中。 ? 對(duì)于相關(guān)的次要素材，尤其是內(nèi)容豐富而繁雜的，用超鏈接的方法將整個(gè)網(wǎng)頁鏈接到自己的網(wǎng)頁中，但不宜過多；還可以是整個(gè)網(wǎng)站的友情鏈接。 網(wǎng)頁設(shè)計(jì)考慮的問題 當(dāng)你在 Inter 這個(gè)信息的海洋中盡情遨游時(shí)，會(huì)發(fā)現(xiàn)許許多多內(nèi)容豐富、創(chuàng)意新穎、設(shè)計(jì)獨(dú)特的網(wǎng)頁，見到這樣漂亮可人的網(wǎng)頁有點(diǎn)心動(dòng)。你的整個(gè)設(shè)計(jì)都應(yīng)該圍繞這些方面來進(jìn)行。放眼望去，網(wǎng)上從頭到尾找不出一絲 “鮮 ”意。選材要盡量做到 “少 ”而 “精 ”,又必須突出 “新 ”，這樣的網(wǎng)頁一定會(huì)受到大家的歡迎。這樣既會(huì)有助于你以后方便管理網(wǎng)頁。 （ 3） 網(wǎng)頁內(nèi)容要易讀 網(wǎng)站設(shè)計(jì)最重要的訣竅，恐怕就是你的網(wǎng)頁要易讀。注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起來你的網(wǎng)頁來很費(fèi)勁。另外，最好讓文本左對(duì)齊，而不是居中。當(dāng)然 ，標(biāo)題一般應(yīng)該居中，因?yàn)檫@符合讀者的閱讀習(xí)慣。在你的計(jì)算機(jī)里看起來相當(dāng)好的頁面，在另一個(gè)不同的平臺(tái)上看起來可能非常糟糕。級(jí)聯(lián)風(fēng)格表 CSS有助于解決這些問題，但是只有最新版的瀏覽器才支持 CSS。設(shè)計(jì)風(fēng)格的考慮，如色彩的搭配，圖形、線條的使用等等。 （ 6） 網(wǎng)頁風(fēng)格要統(tǒng)一 網(wǎng)頁上所有的圖像、文字，包括像背景顏色、區(qū)分線、字體、標(biāo)題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。 （ 7） 動(dòng)畫最多只用一個(gè) 大家都喜歡用 GIF動(dòng)畫來裝飾網(wǎng)頁，它的確很吸引人，但我們?cè)谶x擇時(shí)，是否能確 定必須用 GIF 動(dòng)畫，如果答否，那么就選擇靜止的圖片，因?yàn)樗娜萘恳〉枚?。雖然只有 2K 之差，但多起來，就會(huì)影響下載的速度，所以，如果有些不是必須的，就選擇最小的。萬維網(wǎng)的其中一個(gè)最重大資源是其多媒體能力，所以我們無論如何要善加利用。注意圖畫可以彌補(bǔ)文字之不足，但并不能夠完全取代文字 。 （ 9） 使網(wǎng)站具有交互功能 一個(gè)靜態(tài)網(wǎng)頁始終給人一種呆板的感覺，缺少一種活力和生氣。 網(wǎng)頁制作流程 （如 ： 圖 11） 確 定主 題需 求分 析總 體設(shè) 計(jì)搜 索 整合 資 料特 效 技術(shù) 制 作頁 面設(shè) 計(jì)效 果分 析制 作評(píng) 審整 合測(cè) 試修 改 評(píng)審 完 成 圖 11 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 5 網(wǎng)站結(jié)構(gòu)描述 （如 ： 圖 12） 首 頁協(xié) 會(huì) 簡 介協(xié) 會(huì) 簡 述協(xié) 會(huì) 章 程管 理 制 度指 導(dǎo) 老 師協(xié) 會(huì) 概 況現(xiàn) 任 學(xué) 生 干 部技 術(shù) 交 流 科 目娛 樂 活 動(dòng) 形 式協(xié) 會(huì) 品 牌 活 動(dòng)機(jī) 構(gòu) 設(shè) 置軟 件 技 術(shù) 部網(wǎng) 絡(luò) 技 術(shù) 部設(shè) 計(jì) 制 作 部硬 件 技 術(shù) 部事 務(wù) 秘 書 處新 聞 動(dòng) 態(tài)協(xié) 會(huì) 新 聞協(xié) 會(huì) 公 告軟 件 編 程 應(yīng) 用網(wǎng) 絡(luò) 網(wǎng) 頁 技 術(shù)圖 形 圖 像 技 術(shù)硬 件 維 護(hù) 技 術(shù)技 術(shù) 園 地I T 動(dòng) 態(tài)活 動(dòng) 風(fēng) 采生 活 娛 樂資 源 共 享協(xié) 會(huì) 視 頻計(jì)算機(jī)協(xié)會(huì)網(wǎng)站（計(jì)協(xié)之家） 圖 12 二、開發(fā)工具與開發(fā)技術(shù) 本站主要使用 Dreamweaver Div+CSS、 html進(jìn)行網(wǎng)頁的排版布局、使用 fireworks Photoshop CS處理圖片及制作一些特效文字、 Flash 。 Dreamweaver 是當(dāng)前主流的站點(diǎn)和網(wǎng)頁編輯器，其代碼簡潔、兼容性和整體功能都很強(qiáng)。 圖形處理軟件 我們有 Fireworks 和 Photoshop 兩種選擇， Adobe Photoshop 在繪圖、色彩調(diào)整等諸多方面有著出色的功能，集成度高、適應(yīng)面廣和操作簡便。 Photoshop 中的高級(jí)繪圖工具，可自動(dòng)生成背景紋理、圖層效果，多種特殊效果濾鏡，可創(chuàng)建多種藝術(shù)效果和絢麗的 web圖形并可直接在 Photoshop中定義和編輯切片的工具透明控制，包括用于混合到任意背景中的邊緣的仿色透明度。 Photoshop 的強(qiáng)大工具可以使操作者不管制作任何圖像都游刃有余。 Fireworks 是一款非常優(yōu)秀的圖形處理軟件，它是 Macromedia 公司專門為了網(wǎng)絡(luò)圖形而設(shè)計(jì)的一款軟件，它可以非常方便地制作出下拉菜單、圖片熱區(qū)等效果，而且網(wǎng)頁圖形的優(yōu)化也非常專業(yè)。它們使 Fireworks 從概念到集成上成為網(wǎng)頁設(shè)計(jì)和開發(fā)過程的一個(gè)重要組成部分。嚴(yán)格來說， F1ash是 網(wǎng)絡(luò) 多媒體制作工具而不是網(wǎng)頁編輯工具。對(duì)于使用者來說，只需很短時(shí)間的學(xué)習(xí)，就可以用它制作出美觀的網(wǎng)頁動(dòng) 畫。 Flash 是一種繪制矢量圖形和創(chuàng)作互動(dòng)多媒體動(dòng)畫的軟件。 用 flash 制作的文件很小，這樣便于在互聯(lián)網(wǎng)上傳輸，而且它采用了數(shù)據(jù)流技術(shù)，只要下載一部分，就能欣賞動(dòng)畫，而且能一邊播放一邊傳輸數(shù)據(jù)。 Flash 創(chuàng)建的動(dòng)畫集可以插入到 html 文檔中，也可以 單獨(dú)制作網(wǎng)頁。 正是有了這些優(yōu)點(diǎn)，才使 flash日益成為網(wǎng)絡(luò)多媒體的主流。瀏覽器的工作主要是將這些標(biāo)記語言進(jìn)行“翻譯”，并按照定義的格式顯示出來，這就是我們所看到的網(wǎng)頁。 另外， HTML 是網(wǎng)絡(luò)的通用語言 ,一種簡單、通用的全置標(biāo)記語言。 其主要特點(diǎn)如下： （ 1） 簡易性， HTML 版本升級(jí)采用超集方式，從而更加靈活方便。 （ 3） 平臺(tái)無關(guān)性。 下面是一個(gè)層的 HTML 代碼示例： 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 7 html head meta equiv=ContentType content=text/html。 left:62px。 width:421px。 zindex:1。使用 CSS 設(shè)置頁面格式時(shí)，請(qǐng)將內(nèi)容與表現(xiàn)形式分開。使用 CSS 可以非常靈活并更好地控制具體的頁面外觀，從精確的布局定位到特定的字體和樣式。 除設(shè)置文本格式外，還可以使用 CSS 控制 Web 頁面中塊級(jí)別元素的格式和定位。 外部 CSS 樣式表是一系列存儲(chǔ)在一個(gè)單獨(dú)的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 規(guī)則。 內(nèi)部（或嵌入式） CSS 樣式表是一系列包含在 HTML 文檔文件頭部分的 style 標(biāo)簽內(nèi)的 CSS 規(guī)則 字體大小的 css 的代碼如下： Html 文檔部分代碼： 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 8 html head meta equiv=ContentType content=text/html。同時(shí)通過本次比賽，向同學(xué)們展示網(wǎng)絡(luò)的優(yōu)勢(shì)，為活動(dòng)增添懸殊般的色彩。 fontsize: 13px。 backgroundcolor:FFFFFF。 lineheight: 。 padding:0。 } .zi{ fontsize: 18px。 } .zi1{color: FF0000。} 三、網(wǎng)站總體分析與設(shè)計(jì) 網(wǎng)站