滁州職業(yè)技術(shù)學(xué)院信息工程系 2010 屆軟件技術(shù)專業(yè)畢業(yè)論文 姓 名 ： 班 級 ： 07 軟件（ 2）班 設(shè)計課題 ： 計協(xié)（社團） 靜態(tài)網(wǎng)站 指導(dǎo)教師 ： 2009 年 12 月 目 錄 目 錄 摘 要 . 1 一 、 設(shè)計 思想 及準(zhǔn)備工作 . 錯誤 !未定義書簽。 1.1 設(shè)計 思想 . 2 1.2 準(zhǔn)備工作 . 2 1.2.1 網(wǎng)站策劃 . 2 1.2.2 素材準(zhǔn)備 . 3 1.3 網(wǎng)頁設(shè)計考慮的問題 . 錯誤 !未定義書簽。 1.4 網(wǎng)頁制作的流程 . 4 1.5 網(wǎng) 站結(jié)果描述 . 5 二、 開發(fā) 工具 與開發(fā) 技術(shù) . 5 2.1 開發(fā)工具 . 5 2.1.1 網(wǎng)頁制作工具 Dreamweaver 簡介 . 5 2.1.2 圖形處理軟件 . 6 2.1.3 動畫制作軟件 . 6 2.2 開發(fā) 技術(shù) . 6 2.2.1 網(wǎng)頁和 html 語言 . 6 2.2.2 CSS 簡介 . 7 三 、 網(wǎng)站總體分析與設(shè)計 . 8 3.1 網(wǎng)站系統(tǒng)分析 . 8 3.2 主頁設(shè)計 . 9 3.3 背景分析 . 9 3.4 網(wǎng)頁設(shè)計的色彩 . 錯誤 !未定義書簽。 四、 為什么選擇 DREAMWEAVER . 9 五 、 詳細(xì)設(shè)計方案 . 10 5.1 設(shè)置站點 . 10 5.2 頁面制作 . 11 5.2.1 創(chuàng)建主頁頁面 . 11 5.2.2 其它頁面的制作 . 13 5.3 網(wǎng)站布局技術(shù) . 14 5.4 創(chuàng)建并連接到外部 CSS 樣式 . 15 5.4.1 創(chuàng)建新的 CSS 樣式 . 15 5.4.2 附加外部 CSS 樣式表 . 16 5.5 插入圖像和媒體 . 16 5.5.1 圖片的制作和插入圖片 . 16 5.5.2 制 作 FLASH . 17 5.6 超級鏈接 . 18 5.6.1 鏈接分類 . 18 5.6.2 創(chuàng)建超級鏈接的快速方法 . 18 5.7 網(wǎng)頁中特效的運用 . 19 5.8 整理站點 . 21 六 、 總結(jié)與體會 . 22 6.1 總 結(jié) . 22 目 錄 6.2 心得體會 . 22 致謝 . 23 參考文獻 . 23 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 1 摘 要 21世紀(jì)是信息 高速發(fā)達的時代 ，互聯(lián)網(wǎng)實現(xiàn)了世界范圍的網(wǎng)絡(luò)間的互聯(lián)和信息共享，并已全面介入人類生產(chǎn)生活的方方面面，帶動著人類社會的飛速發(fā)展 ，發(fā)揮著重要的作用 。 隨著我國 計算機技術(shù)的 發(fā)展與普及， 國民已經(jīng)離不開了網(wǎng)絡(luò)，網(wǎng)絡(luò)已經(jīng)成為人與人之間交流的一種形式，他能夠把事情的復(fù)雜化轉(zhuǎn)為簡單化。因此網(wǎng)站建設(shè)在互聯(lián)網(wǎng)的應(yīng)用上的地位顯而易見，它已成為信息社會的重要組成部分，從而倍受人們的重視。 網(wǎng)站的建設(shè)不僅能夠使我們的活動有所改變，也為我們的工作和學(xué)習(xí)提供了服務(wù)。同時也大大地提高了我院學(xué)生的交流效率，也增加了該社團的知明度，更重要的是為我院計算機愛好者提供了一個網(wǎng)絡(luò)生活空間，促進了我們對網(wǎng)絡(luò)知識的進一步地學(xué)習(xí)。為了今后更好的方便大家聯(lián)系、交流，特構(gòu)建職院計協(xié)之家網(wǎng)站。 通過該網(wǎng)站展示了計協(xié)信息、機 構(gòu)設(shè)置、協(xié)會新聞、學(xué)習(xí)園地、學(xué)習(xí)資料、問題集錦、休閑娛樂等系列內(nèi)容的介紹。 網(wǎng)站制作 工具是使用 Dreamweaver 8.0、 Flash 8.0、 Fireworks 8.0、 Adobe Photoshop 等 ， 網(wǎng)站 是基于 我院計算機協(xié)會成員及計算機愛好者為 背景開發(fā)的，可以有效的實現(xiàn)網(wǎng)上 資源共享和學(xué)習(xí)交流 。同時您也可以利用 QQ 群 和 電子信箱經(jīng)濟而又快捷地與外界進行各種信息溝通。 規(guī)劃并建設(shè)好一個學(xué)術(shù)性綜合網(wǎng)站，并不是一件容易的事。這要求我們 制作者 要 明確和熟悉設(shè)計的對象和構(gòu)成的要素 。另外，將要著手確定網(wǎng)站的風(fēng)格、布局、 色彩搭配等，這就鍛煉 提高 了我 的網(wǎng)頁制作 水平，美工、排版能力。 在論文中首先介紹了 網(wǎng)站建設(shè) 的相關(guān)知識，并根據(jù)以上知識制作網(wǎng)站。文中主要包括需求分析、網(wǎng)站的總體設(shè)計、詳細(xì)設(shè)計等，并通過流程圖和文字加以解釋說明。在論文中還包括了部分網(wǎng)站制作的主要程序代碼。 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 2 一、設(shè)計思想及準(zhǔn)備工作 1.1 設(shè)計思想 通過網(wǎng)站，全面宣傳，展示計算機協(xié)會活動風(fēng)采、技術(shù)氛圍、團體優(yōu)點與特色，發(fā)布協(xié)會的重大活動安排與日常工作特色，增強團體的知名度，使人們更多了解我們的團隊 ,在 Internet 上實現(xiàn)完成部分介紹及宣傳活動，提高計算機 愛好者對我們的關(guān)注，加大交流團體。 由于 我們的水平有限的，所以上面的有些 特效 都是從網(wǎng)上借鑒來的，例如 相冊、幻燈圖等 ?？傮w來說網(wǎng)站的布局，是統(tǒng)一的，這樣在瀏覽的時候不至于顯得太混亂。 1.2 準(zhǔn)備工作 1.2.1 網(wǎng)站籌劃 界面就是網(wǎng)站給瀏覽者的第一印象，往往決定著網(wǎng)站的可看性，在確定網(wǎng)站的界面時要注意以下三點： （ 1） 欄目與板塊編排 構(gòu)建一個網(wǎng)站就好比寫一篇論文，首先要列出提綱，才能主題明確、層次清晰。我們在動手制作網(wǎng)頁前，一定要考慮好欄目和板塊的編排問題。 網(wǎng)站的題材確定后，就要將收集到的資料內(nèi)容作一個合 理的編排。比如，將一些最吸引人的內(nèi)容放在最突出的位置或者在版面分布上占優(yōu)勢地位。欄目的實質(zhì)是一個網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細(xì)考慮，合理安排。在欄目編排時需要注意的是： 盡可能刪除那些與主題無關(guān)的欄目； 盡可能將網(wǎng)站內(nèi)最有價值的內(nèi)容列在欄目上； 盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽；輔助內(nèi)容，如站點簡介、版權(quán)信息等大可不必放在主欄目里，以免沖淡主題。 另外，板塊的編排設(shè)置也要合理安排與劃分。板塊比欄目的概念要大一些，每個板塊都有自己的欄目。 （ 2） 目錄結(jié) 構(gòu)與鏈接結(jié)構(gòu) 網(wǎng)站的目錄是指建立網(wǎng)站時創(chuàng)建的目錄。例如：在用 Dreamweaver 建立網(wǎng)站時都默認(rèn)建立了根目錄和Images 子目錄。目錄的結(jié)構(gòu)是一個容易忽略的問題，大多數(shù)制作者都是未經(jīng)規(guī)劃，隨意創(chuàng)建子目錄。目錄結(jié)構(gòu)的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的維護，以后內(nèi)容的擴充和移植有著重要的影響。所以建立目錄結(jié)構(gòu)時也要仔細(xì)安排，比如： 不要將所有文件都存放在根目錄下。有網(wǎng)站制作者為了方便，將所有文件都放在根目錄下。這樣就很容易造成：文件管理混亂，搞不清哪些文件需要編輯和更新，哪些無用的文件 可以刪除，哪些是相關(guān)聯(lián)的文件，影響工作效率。 按欄目內(nèi)容建立子目錄。子目錄的建立，首先按主欄目建立。新聞內(nèi)容較多，需要經(jīng)常更新的可以建立獨立的子目錄。而一些相關(guān)性強，不需要經(jīng)常更新的欄目，例如：協(xié)會簡介、協(xié)會章程等可以合并放在一個統(tǒng)一目錄下。 在每個主目錄下都建立獨立的 Images 目錄。一般來說，一個站點根目錄下都有一個默認(rèn)地 Images目錄。將所有圖片都存放在這個目錄里很是不方便，比如在欄目刪除時，圖片的管理相當(dāng)麻煩。所以為每個主欄目建立一個獨立的 Images 目錄是方便管理的。需要注意的還有：目錄的層次不 要太深，不要超過 3 層；不要使用中文目錄，可能對網(wǎng)址的正確顯示造成困難；不要使用過長的目錄，太長的目錄名不便于記憶；盡量使用意義明確的目錄，以便于記憶和管理。 （ 3） 網(wǎng)站的鏈接結(jié)構(gòu) 網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。 一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在于一個立體的空間中。一般的，建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式： 樹狀鏈接結(jié)構(gòu)（一對 一），這類似 DOS 的目錄結(jié)構(gòu)，首頁鏈接指向一級頁面，一級頁面鏈接指向二滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 3 級頁面。這樣的鏈接結(jié)構(gòu)瀏覽時，一級級進入，一級級退出，條理比較清晰，訪問者明確知道自己在什么位置，不會“不知身在何處”，但是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須回到首頁再進行。 星狀鏈接結(jié)構(gòu)（一對多），類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個頁面相互之間都建立有鏈接。這樣瀏覽比較方便，隨時可以到達自己喜歡的頁面。但是由于鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。 因此，在實際的網(wǎng)站設(shè)計中，總是將這兩種結(jié)構(gòu)混 合起來使用。網(wǎng)站希望瀏覽者既可以方便快速地達到自己需要的頁面，又可以清晰地知道自己的位置。所以，最好的辦法是：首頁和一級頁面之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。關(guān)于鏈接結(jié)構(gòu)的設(shè)計，在實際的網(wǎng)頁制作中是非常重要一環(huán)，采用什么樣的鏈接結(jié)構(gòu)直接影響到版面的布局。 1.2.2 素材準(zhǔn)備 （ 1） 搜索瀏覽， 制作 收集素材。 明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。為了收集素材，除了身邊現(xiàn)成的一些素材，還需要到網(wǎng)上多查找素材。 有的圖片 可以 自己用 Photoshop、 fireworks 制作設(shè)計 。 對于一些實物素材，我們利用拍攝、掃描等幫助，處理成電腦文件以便設(shè)計時使用。 網(wǎng)絡(luò)搜索找素材：利用網(wǎng)絡(luò)搜索引擎，輸入與主題相關(guān)的關(guān)鍵詞進行搜索 下載，然后加以修改 。 瀏覽網(wǎng)頁選素材：逐個瀏覽搜索到的相關(guān)網(wǎng)頁，尋找可以利用的材料。注意記錄下選中的網(wǎng)頁地址，以便隨時復(fù)制需要的資料。也可以及時下載保存看中的文字圖片資料 ，在加以修改在使用 。 （ 2） 整理素材，設(shè)計網(wǎng)頁。 對收集的素材進行分類整理，并由此設(shè)置子網(wǎng)頁欄目，一般不宜過多。將各類素材分別放入或鏈接到相應(yīng)網(wǎng)頁中。對于網(wǎng)上素材的使用，采取下面兩種做法： 對于重點素 材，一般用復(fù)制、下載的方法放入自己的網(wǎng)頁中，如自己各子網(wǎng)頁的文字、圖片等中心內(nèi)容。 對于相關(guān)的次要素材，尤其是內(nèi)容豐富而繁雜的，用超鏈接的方法將整個網(wǎng)頁鏈接到自己的網(wǎng)頁中，但不宜過多；還可以是整個網(wǎng)站的友情鏈接。這也是一些中小型網(wǎng)站常用的豐富自己、加強交流的好方法，給上網(wǎng)瀏覽者帶來不少方便。 1.3 網(wǎng)頁設(shè)計考慮的問題 當(dāng)你在 Internet 這個信息的海洋中盡情遨游時，會發(fā)現(xiàn)許許多多內(nèi)容豐富、創(chuàng)意新穎、設(shè)計獨特的網(wǎng)頁，見到這樣漂亮可人的網(wǎng)頁有點心動。 但是 網(wǎng)頁設(shè)計時應(yīng)考慮哪些方面的問題，包括網(wǎng)站功能和以及訪問 者需要什么。你的整個設(shè)計都應(yīng)該圍繞這些方面來進行。 （ 1） 頁面內(nèi)容要新穎 網(wǎng)頁內(nèi)容的選擇要不落俗套，要重點突出一個 “新 ”字，這個原則要求我們在設(shè)計網(wǎng)站內(nèi)容時不能照抄別人的內(nèi)容，要結(jié)合 設(shè)計主題 的實際情況創(chuàng)作出一個獨一無二的網(wǎng)站。放眼望去，網(wǎng)上從頭到尾找不出一絲 “鮮 ”意。所以，我們在設(shè)計網(wǎng)頁時，要把功夫下在選材上。選材要盡量做到 “少 ”而 “精 ”,又必須突出 “新 ”，這樣的網(wǎng)頁一定會受到大家的歡迎。 （ 2） 網(wǎng)頁命名要簡潔 由于一個網(wǎng)站不可能就是由一個網(wǎng)頁組成，它有許多子頁面，為了能使這些頁面有效地被連接起來，用戶最后 能給這些頁面起一些有代表性的而且簡潔易記的網(wǎng)頁名稱。這樣既會有助于你以后方便管理網(wǎng)頁。在給網(wǎng)頁命名時，最好使用自己常用的或符合頁面內(nèi)容的小寫英文字母，這直接關(guān)系到頁面上的連接。 （ 3） 網(wǎng)頁內(nèi)容要易讀 網(wǎng)站設(shè)計最重要的訣竅，恐怕就是你的網(wǎng)頁要易讀。這就意味著 ,你必須花點心思來規(guī)劃文字與背景顏色的搭配方案。注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起來你的網(wǎng)頁來很費勁。一般來說，淺色背景下的深色文字為佳。另外，最好讓文本左對齊，而不是居中。按當(dāng)代中文的閱讀習(xí)慣，文本大都居左的。當(dāng)然 ，標(biāo)題一般應(yīng)該居中，因為這符合讀者的閱讀習(xí)慣。 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 4 （ 4） 少用特殊字體 雖然你可以在你的 HTML 中使用特殊的字體，但是，你不可能預(yù)測你的訪問者在他們的計算機上將看到什么。在你的計算機里看起來相當(dāng)好的頁面，在另一個不同的平臺上看起來可能非常糟糕。一些網(wǎng)站設(shè)計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。級聯(lián)風(fēng)格表 CSS 有助于解決這些問題，但是只有最新版的瀏覽器才支持 CSS。 （ 5） 考慮瀏覽器的兼容性 當(dāng)然現(xiàn)在 IE 所占的市場份額越來越大，但 是我們?nèi)匀恍枰紤]到 Mozilla Firefox、 Netscape 以及 Opera這些瀏覽器用戶。設(shè)計風(fēng)格的考慮，如色彩的搭配，圖形、線條的使用等等。要時刻為用戶著想，必須最少在幾種不同類型的瀏覽器下測試網(wǎng)站，看看兼容性如何。 （ 6） 網(wǎng)頁風(fēng)格要統(tǒng)一 網(wǎng)頁上所有的圖像、文字，包括像背景顏色、區(qū)分線、字體、標(biāo)題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。這樣子 用戶 看起來舒服、順暢，會對你的網(wǎng)站留下一個 “很專業(yè) ”的印象。 （ 7） 動畫最多只用一個 大家都喜歡用 GIF 動畫來裝飾網(wǎng)頁，它的確很吸引人，但我們在選擇時，是否能確 定必須用 GIF 動畫，如果答否，那么就選擇靜止的圖片，因為它的容量要小得多。同樣的尺寸的 LOGO， GIF 動畫的容量有 5K，而靜止 LOGO 的只有 3K。雖然只有 2K 之差，但多起來，就會影響下載的速度，所以，如果有些不是必須的，就選擇最小的。 （ 8） 善用圖像 用戶在網(wǎng)上四處漫游，你必須設(shè)法吸引和維護他們對你的主頁的注意力。萬維網(wǎng)的其中一個最重大資源是其多媒體能力，所以我們無論如何要善加利用。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款，使其別具特色，令人過目不忘。注意圖畫可以彌補文字之不足，但并不能夠完全取代文字 。制作主頁時，必須注意將圖像所連接的重要信息或聯(lián)接其他頁面的指示用文字重復(fù)表達幾次，同時要注意避免使用過大的圖像。 （ 9） 使網(wǎng)站具有交互功能 一個靜態(tài)網(wǎng)頁始終給人一種呆板的感覺，缺少一種活力和生氣。最好在網(wǎng)站上提供一些回答問題的工具以及其他具有交互性能的設(shè)計，使得訪問者能從網(wǎng)站上獲得交互的信息，從而使訪問者有一種參與網(wǎng)絡(luò)建設(shè)的新鮮感和成就感。 1.4 網(wǎng)頁制作流程 （如 ： 圖 1-1） 確 定主 題需 求分 析總 體設(shè) 計搜 索 整合 資 料特 效 技術(shù) 制 作頁 面設(shè) 計效 果分 析制 作評 審整 合測 試修 改 評審 完 成圖 1-1 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 5 1.5 網(wǎng)站結(jié)構(gòu)描述 （如 ： 圖 1-2） 首 頁協(xié) 會 簡 介協(xié) 會 簡 述協(xié) 會 章 程管 理 制 度指 導(dǎo) 老 師協(xié) 會 概 況現(xiàn) 任 學(xué) 生 干 部技 術(shù) 交 流 科 目娛 樂 活 動 形 式協(xié) 會 品 牌 活 動機 構(gòu) 設(shè) 置軟 件 技 術(shù) 部網(wǎng) 絡(luò) 技 術(shù) 部設(shè) 計 制 作 部硬 件 技 術(shù) 部事 務(wù) 秘 書 處新 聞 動 態(tài)協(xié) 會 新 聞協(xié) 會 公 告軟 件 編 程 應(yīng) 用網(wǎng) 絡(luò) 網(wǎng) 頁 技 術(shù)圖 形 圖 像 技 術(shù)硬 件 維 護 技 術(shù)技 術(shù) 園 地I T 動 態(tài)活 動 風(fēng) 采生 活 娛 樂資 源 共 享協(xié) 會 視 頻計算機協(xié)會網(wǎng)站（計協(xié)之家）圖 1-2 二、開發(fā)工具與開發(fā)技術(shù) 本站主要使用 Dreamweaver 8.0 軟件及 Div+CSS、 html 進行網(wǎng)頁的排版布局、使用 fireworks 8.0和Photoshop CS處理圖片及制作一些特效文字、 Flash 8.0制作本站動畫。 2.1 開發(fā)工具 2.1.1 網(wǎng)頁制作工具 Dreamweaver 簡介 Dreamweaver 是美國 Macromedia 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別 發(fā)展 的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 6 越瀏覽器限制的充滿動感的網(wǎng)頁。 Dreamweaver 是當(dāng)前主流的站點和網(wǎng)頁編輯器，其代碼簡潔、兼容性和整體功能都很強。 Dreamweaver 的介入，使得網(wǎng)頁一些部分的實現(xiàn)變得更加直觀簡便。 2.2.2 圖形處理軟件 我們有 Fireworks 和 Photoshop 兩種選擇， Adobe Photoshop 在繪圖、色彩調(diào)整等諸多方面有著出色的功能，集成度高、適應(yīng)面廣和操作簡便。他不僅提 供強大的繪圖工具，可以直接繪制 藝術(shù) 圖形，還能直接從掃描儀，數(shù)碼相機等設(shè)備中采集圖像，并對他們進行編輯、修復(fù)、以及調(diào)整效果，同時可以改變圖像的顏色模式，并能在圖像中制作藝術(shù)文字等。 Photoshop 中的高級繪圖工具，可自動生成背景紋理、圖層效果，多種特殊效果濾鏡，可創(chuàng)建多種藝術(shù)效果和絢麗的 web 圖形并可直接在 Photoshop 中定義和編輯切片的工具透明控制，包括用于混合到任意背景中的邊緣的仿色透明度。強大的彩色校正工具 修復(fù) 畫筆，可在消除瑕疵的同時保留色調(diào)和紋理圖層。 Photoshop 的強大工具可以使操作者不管制作任何圖像都游刃有余。對于設(shè)計網(wǎng)頁， Photoshop 是不可或缺的工具，是強大的圖片處理工具 ， 可謂是平面設(shè)計方面的老大。 Fireworks 是一款非常優(yōu)秀的圖形處理軟件，它是 Macromedia 公司專門為了網(wǎng)絡(luò)圖形而設(shè)計的一款軟件，它可以非常方便地制作出下拉菜單、圖片熱區(qū)等效果，而且網(wǎng)頁圖形的優(yōu)化也非常專業(yè)。 Fireworks是用來設(shè)計和制作專業(yè)化網(wǎng)頁圖形的應(yīng)用軟件，它提供了一個制作環(huán)境，可以在一個專業(yè)化的環(huán)境中創(chuàng)建和 編輯網(wǎng)頁圖形，對其進行動畫處理，添加高級交互功能以及優(yōu)化圖像。它們使 Fireworks 從概念到集成上成為網(wǎng)頁設(shè)計和開發(fā)過程的一個重要組成部分。 2.2.3 動畫制作 軟件 動畫制作肯定是 Flash ，它是 Macromedia 公司出品的 Flash 是制作網(wǎng)頁動畫的利器。嚴(yán)格來說， F1ash是 網(wǎng)絡(luò) 多媒體制作工具而不是網(wǎng)頁編輯工具。 F1ash 是制作動感網(wǎng)頁的權(quán)威。對于使用者來說，只需很短時間的學(xué)習(xí)，就可以用它制作出美觀的網(wǎng)頁動 畫?？梢宰屩谱髡唠S心所欲地實現(xiàn)各種創(chuàng)意，并且可以和JavaScript 一起創(chuàng)作出具有強大交互性的網(wǎng)頁動畫。 Flash 是一種繪制矢量圖形和創(chuàng)作互動多媒體動畫的軟件。 用 flash 制作出來的動化是矢量的，不管怎樣放大、縮小，它還是清晰可見。 用 flash 制作的文件很小，這樣便于在互聯(lián)網(wǎng)上傳輸，而且它采用了數(shù)據(jù)流技術(shù)，只要下載一部分，就能欣賞動畫，而且能一邊播放一邊傳輸數(shù)據(jù)。 交互性更是 flash 動畫的迷人之處，可以通過點擊按鈕、選擇菜單來控制動畫的播放。 Flash 創(chuàng)建的動畫集可以插入到 html 文檔中，也可以 單獨制作網(wǎng)頁。使網(wǎng)頁的效果更加完美。 正是有了這些優(yōu)點，才使 flash日益成為網(wǎng)絡(luò)多媒體的主流。 2.2 開發(fā)技術(shù) 2.2.1 網(wǎng)頁和 Html 語言 我們的網(wǎng)頁是用 html 語言編寫的一個網(wǎng)站， html 中文翻譯為“超文本標(biāo)記語言”，所謂“超文本”就是指頁面內(nèi)可以包含圖片，鏈接，多媒體等非問字的元素，通過 html 語言將這些元素表示出來，就形成了html 代碼。瀏覽器的工作主要是將這些標(biāo)記語言進行“翻譯”，并按照定義的格式顯示出來，這就是我們所看到的網(wǎng)頁。 HTML 的結(jié)構(gòu)包括頭部（ Head）、主體（ Body）兩大部 分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。 另外， HTML 是網(wǎng)絡(luò)的通用語言 ,一種簡單、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。 其主要特點如下： （ 1） 簡易性， HTML 版本升級采用超集方式，從而更加靈活方便。 （ 2） 可擴展性， HTML 語言的廣泛應(yīng)用帶來了加強功能，增加標(biāo)識符等要求， HTML 采取子類元素的方式，為系統(tǒng)擴展帶來保證。 （ 3） 平臺無關(guān)性。雖然 PC 機大行其道，但使用 MAC 等其他 機器的大有人在， HTML 可以使用在廣泛的平臺上。 下面是一個層的 HTML 代碼示例： 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 7 計協(xié)之家 2.2.2 CSS 簡介 CSS (層疊樣式表 ) 是一系列格式設(shè)置規(guī)則，它們控制 Web 頁面內(nèi)容的外觀。使用 CSS 設(shè)置頁面格式時，請將內(nèi)容與表現(xiàn)形式分開。頁面內(nèi)容（即 HTML 代碼）駐留在 HTML 文件自身中，而用于定義代碼表現(xiàn)形式的 CSS 規(guī)則駐留在另一個文件（外部樣式表）或 HTML 文檔的另一 部分（通常為文件頭部分）中。使用 CSS 可以非常靈活并更好地控制具體的頁面外觀，從精確的布局定位到特定的字體和樣式。 CSS 允許控制 HTML 無法獨自控制的許多屬性。 除設(shè)置文本格式外，還可以使用 CSS 控制 Web 頁面中塊級別元素的格式和定位。 CSS 的主要優(yōu)點是 : 它提供了便利的更新功能；更新一處的 CSS 規(guī)則時，使用該已定義樣式的所有文檔的格式都會自動更新為新樣式。 外部 CSS 樣式表是一系列存儲在一個單獨的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 規(guī)則。利 用文檔文件頭部分中的鏈接，該文件被鏈接到 Web 站點中的一個或多個頁面。 內(nèi)部（或嵌入式） CSS 樣式表是一系列包含在 HTML 文檔文件頭部分的 style 標(biāo)簽內(nèi)的 CSS 規(guī)則 字體大小的 css 的代碼如下： Html 文檔部分代碼： 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 8 計協(xié)之家新聞 為豐富校園生活，提高學(xué)生的游戲體育競技水平，培養(yǎng)學(xué)生健康上網(wǎng)、文明上網(wǎng)的良好風(fēng)氣。同時通過本次比賽，向同學(xué)們展示網(wǎng)絡(luò)的優(yōu)勢，為活動增添懸殊般的色彩。我們協(xié)會在本次電 . 與上面 html 文檔匹 配的部分外部 CSS 代碼： body font-family: 宋體 ,Arial, Helvetica, sans-serif； font-size: 13px； color: #333333； background-color:#FFFFFF； width:1000px； line-height: 1.6em； background:url(./images/bg.gif)； padding:0； margin: 0； .zi font-size: 18px； font-weight: bold； .zi1color: #FF0000； .zi2font-size: 16px ； 三、網(wǎng)站總體分析與設(shè)計 3.1 網(wǎng)站系統(tǒng)分析 根據(jù)前面的設(shè)計思想進行分析，按照系統(tǒng)開發(fā)的基本觀點對網(wǎng)站進行分解，從內(nèi)容上可對網(wǎng)站作如下劃分： 協(xié)會簡介：主要介紹 協(xié)會簡述 、 協(xié)會章程 、 管理制度 、 指導(dǎo)老師 相關(guān)內(nèi)容。 協(xié)會概況：主要介紹 現(xiàn)任學(xué)生干部 、 技術(shù)交流科目 、 娛樂活動形式 、 協(xié)會品牌活動 等。 機構(gòu)設(shè)置：主要介紹協(xié)會各部門的職能和技術(shù)交流方向。 新聞動態(tài) ：報道協(xié)會近期活動或技術(shù)交流動態(tài)，現(xiàn)象的介紹協(xié)會日常工作。 技術(shù)園地：聚集各種計算機相關(guān)的技術(shù)知識，以便計算機愛好者學(xué)習(xí)。 I T 動態(tài)：跟蹤近期 IT 行業(yè)的最新技術(shù)和新聞等相關(guān)內(nèi)容。 活動風(fēng)采：直觀的展現(xiàn)協(xié)會豐富多彩的活動相關(guān)效果圖。 生活娛樂：相關(guān)笑話和美文以便大家在學(xué)習(xí)累時放松，調(diào)節(jié)情緒。 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 9 資源共享：協(xié)會成員收集的好資料，資源共享，以便大家一起學(xué)習(xí)。 協(xié)會視頻：協(xié)會相關(guān)活動或者技術(shù)視頻。 3.2 主頁設(shè)計 網(wǎng)站主頁采用靜、動相結(jié)合的方式，即靜態(tài)的主畫面和動態(tài)的圖片相結(jié)合，體現(xiàn)社團的勃勃生氣。 在主頁的最下 面我們還弄了許多的友情鏈接圖標(biāo)，這樣用戶可以有更多的選擇性。不會讓用戶感到本網(wǎng)站的單調(diào)。 我們還設(shè)計了視頻圖片和娛樂美文專區(qū)，用來增加網(wǎng)站的娛樂性，可以讓網(wǎng)友能輕松愉快地欣賞本網(wǎng)站，這樣也能讓網(wǎng)友們能更喜歡本網(wǎng)站。 在最下面我們還制作了一些友情連接的圖片，可以讓網(wǎng)站不單調(diào)，使得網(wǎng)站更具實用性。 3.3 背景分析 想要在視覺化環(huán)境下制作復(fù)雜網(wǎng)頁的專業(yè)網(wǎng)頁制作， Dreamweaver 已經(jīng)漸漸在網(wǎng)頁編輯工具中嶄露頭角，成為專業(yè)人士編寫網(wǎng)頁的最佳選擇。 可分成四個主題。分別是： 設(shè)計網(wǎng)頁頁面（ Dreamweaver 里 具有彈性的頁面設(shè)計功能）； 搭配 Macromedia 其它產(chǎn)品一起使用 Dreamweaver（制作動畫和圖片不求人）； 自定義使用界面（享受個性化的使用經(jīng)驗）； 最后的加入 Dreamweaver 擴充程序（在網(wǎng)頁中載入擴充高級功能）。 3.4 網(wǎng)頁設(shè)計的色彩 人們常常感受到色彩對自己心理的影響，這些影響總是在不知不覺中發(fā)揮作用，左右我們的情緒。色彩的心理效應(yīng)發(fā)生在不同層次中。有些屬直接的刺激，有些要通過間接的聯(lián)想，更高層次則涉及到人的觀念，信仰，對于藝術(shù)家和設(shè)計者來說，無論哪一層次的作用都是不可忽視的。對于網(wǎng)頁設(shè) 計者來說，色彩的心理作用尤其重要，因為用網(wǎng)絡(luò)是在一種特定的歷史與社會條件的環(huán)境下，即高效率，快節(jié)奏的現(xiàn)代生活方式的條件，這需要做網(wǎng)頁時把握人們在這種生活方式用網(wǎng)絡(luò)的一種心理需求。針對不同的主題來布置色彩，如健康類的網(wǎng)頁就不能采用較為刺激的大紅和黃，以及象征死亡和神秘的黑色和紫色，這樣會造成一種緊張和某種程度的恐慌，所以我們所選的顏色是 統(tǒng)一“青綠”色，給網(wǎng)民們清爽舒服地感覺。 四、為什么選擇 Dreamweaver Dreamweaver 是制作主頁的好工具 .Dreamweaver 是可視化的網(wǎng)頁制作工具，很容 易上手，可以讓你輕松地制作出自己的網(wǎng)頁。 Dreamweaver 在多媒體方面頗有建樹的 Macromedia 公司推出的可視化網(wǎng)頁制作工具，它與 Flash、 Fireworks 合在一起被稱為網(wǎng)頁制作三劍客，這三個軟件相輔相承，是制作網(wǎng)頁的最佳選擇。其中， Dreamweaver 主要用來制作網(wǎng)頁文件，制作出來的網(wǎng)頁兼容性比較好，制作效率也很高， Flash用來制作精美的網(wǎng)頁動畫，而 Fireworks 用來處理網(wǎng)頁中的圖形。 復(fù)雜的說： Dreamweaver 是美國 Macromedia 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見 即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。 Dreamweaver 特點： （ 1） 最佳的制作效率 Dreamweaver 可以用最快速的方式將 Fireworks，或 Photoshop 等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁色調(diào)。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。 Dreamweaver 能與您喜愛的設(shè)計工具，如 Flash 等搭配，不需離開 Dreamweaver 便 可完成，整體運用流程自然順暢。除此之外，只要單擊便可使 Dreamweaver 自動開啟 Firework 或 Photoshop 來進行編輯與設(shè)定圖檔的最佳化。 （ 2） 網(wǎng)站管理 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 10 使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計、更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱， Dreamweaver 會自動更新所有連結(jié)。使用支援文字、 HTML 碼、 HTML 屬性標(biāo)簽和一般語法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡單。 （ 3） 無可比擬的控制能力 Dreamweaver 是唯一提供 Roundtrip HTML、視覺化編輯與原始碼編輯同步 的設(shè)計工具。它包含 Home Site 和 BBEdit 等主流文字編輯器。幀 (frames)和表格的制作速度快的令您無法想象。對于 CSS 的動態(tài) HTML支援和鼠標(biāo)換圖效果，聲音和動畫的 DHTML 效果資料庫可在 Netscape 和 Microsoft 瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能， Dreamweaver 可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時，只要從 Dreamweaver 的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報告。 五、詳細(xì)設(shè)計方案 5.1 設(shè)置站點 Web 站點是一組具有如相關(guān)主題、類似的設(shè) 計、鏈接文檔和資源。 Dreamweaver8.0 是一個站點創(chuàng)建和管理工具，因此使用它不僅可以創(chuàng)建單獨的文檔，還可以創(chuàng)建完整的 Web 站點。創(chuàng)建 Web 站點的第一步是規(guī)劃。為了達到最佳效果，在創(chuàng)建任何 Web 站點頁面之前，應(yīng)對站點的結(jié)構(gòu)進行設(shè)計和規(guī)劃。決定要創(chuàng)建多少頁，每頁上顯示什么內(nèi)容，頁面布局的外觀以及頁是如何互相連接起來的。 執(zhí)行以下操作： （ 1）啟動 Dreamweaver 8.0： （ 2）選擇“站點” “新建站點”（即，從“站點”菜單選擇“管理站點”）。出現(xiàn)“站點定義”對話框。如圖 5-1： （ 3）如果對話框顯示的是“基本”選項卡，則單擊“高級”。 出現(xiàn)“站點定義向?qū)А钡牡谝粋€界面，要求您為站點輸入一個名稱。 圖 5-1 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 11 （ 4）在文本框中，輸入一個名稱以設(shè)計課題名稱英文縮寫“ CEH_Site”。該名稱可以是任何所需的名稱。 （ 5） 然后 在下面的 “ 本地根目錄文件夾 ” 和 “默認(rèn)圖像文件夾” 文本框中輸入本地網(wǎng)站預(yù)保存的路徑，單擊 “確認(rèn) ”按鈕。 （ 6） 隨即在組合面板中彈出 “站點 ”面板，現(xiàn)在可以在其中添加頁面了。 （ 7） 右鍵單擊 “站點 ”面板中的根目錄，在彈出菜單中選擇 “新建文件 ”命令，把新建文件的名稱改為“ index.html” 。 （ 8） 雙擊 index.html，進入頁面編輯狀態(tài)。 5.2 頁面制作 5.2.1 創(chuàng)建主頁頁面 在全面考慮好網(wǎng)站的欄目，鏈接結(jié)構(gòu)和整體風(fēng)格之后，就可以正式動手制作首頁了。有一句俗語： 良好的開端是成功的一半 。在網(wǎng)站設(shè)計上也是如此，首頁的設(shè)計是一個網(wǎng)站成功與否的關(guān)鍵。人們往往看到第一頁就已經(jīng)有一個整體的感覺。是不是能夠促使瀏覽者繼續(xù)點擊進入，是否能夠吸引瀏覽者留在站點上，全憑首頁的設(shè)計。所以，首頁的設(shè)計和制作是絕對要重視和花心思的。首頁設(shè)計大致如下： 整個網(wǎng)站 版面布局 都是用 div+css 布局的，有較好的靈活性； 色彩的搭配 主要統(tǒng)一用了“青綠”色調(diào)給人以清爽的感覺； div 布局的主要架構(gòu)： 計協(xié)之家首頁 /外部 CSS 鏈接路徑 /導(dǎo)航欄 /網(wǎng)頁中心部分（核心和內(nèi)容） /新聞動態(tài)和協(xié)會概要及機構(gòu)具體內(nèi)容 /新聞幻燈圖片 /協(xié)會概要及機構(gòu)具體內(nèi)容 /新聞動態(tài) /公告和資源共享 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 12 /公告版 /資源共享 /技術(shù)園地、娛樂和 IT 信息板塊 /流動圖片 /友情鏈接 /頁腳內(nèi)容 然后根據(jù)上文中 CSS 層疊樣式表的定義格式，結(jié)合 div 布局架構(gòu)經(jīng)行合理的編寫 CSS 樣式表 頁面中的相關(guān)特效可以結(jié)合下文經(jīng)行對位填充，字體和邊框都在 CSS 經(jīng)行 了詳細(xì)的編制。 最后首頁基本就形成了（如：圖 5-2） 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 13 圖 5-2 5.2.2 其它頁面的制作 其他頁面是在此主頁面設(shè)計好的框架上加以修改，訂好的 css 樣式，添加一些內(nèi)容和各頁面該有的內(nèi)容。 分頁導(dǎo)航頁（如： 圖 5-3， IT 動態(tài)頁面） 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 14 圖 5-3 具體內(nèi)容頁（如：圖 5-4） 圖 5-4 這樣計算機協(xié)會的網(wǎng)頁就制作完成。 5.3 網(wǎng)站布局技術(shù) 本站主要使用 div+css 布局。 DIV 本身就是容器性質(zhì)的 ,你不但可以內(nèi)嵌 table還可以內(nèi)嵌文本和其它的 HTML代碼； CSS是 Cascading 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 15 style Sheets的簡稱，中文譯作 “ 層疊樣式表單 ” ，在主頁制作時采用 CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者所有頁數(shù)的網(wǎng)頁的外觀和格式。 Div+CSS 標(biāo)準(zhǔn)具有以下優(yōu)點 : 因為采用 CSS布局， 不像 表格布局充滿各種各樣的屬性和數(shù)字，而且很多 CSS 文件通常是共用的，從而大大縮減頁面代碼，提高頁面瀏覽速度。 結(jié)構(gòu)清晰，對搜索引擎更加友好。更容易被搜索引擎收錄，具備搜索引擎 SEO的先天條件，配合優(yōu)秀的內(nèi)容和一些 SEO處 理，可以獲得更好的網(wǎng)站排名。 兼容性更好，符合 web標(biāo)準(zhǔn)規(guī)范的發(fā)展趨勢，可以在幾乎所有的瀏覽器上都可以使用，不會出現(xiàn)在不同的瀏覽器中效果差距很大的情況。 縮短改版時間，因為網(wǎng)站的布局都是通過外部的 CSS 文件來控制，只要簡單的修改幾個 CSS文件就可以將許多網(wǎng)頁的風(fēng)格格式同時更新，不用再一頁一頁地更新了。 強大的字體控制和排版能力， CSS控制字體的能力比糟糕的 FONT標(biāo)簽好多了， CSS不再需要用 FONT標(biāo)簽或者透明的 1px圖片來控制標(biāo)題、改變字體顏色、字體樣式等等。 提高易用性，使用 CSS可以結(jié)構(gòu)化 HTML，例 如： p標(biāo)簽只用來控制段落， h1-h6 標(biāo)簽只用來控制標(biāo)題，table標(biāo)簽只用來表現(xiàn)格式化的數(shù)據(jù)等等。 更好的擴展性。你的設(shè)計不僅僅用于 web瀏覽器，也可以發(fā)布在其他設(shè)備上，比如 PowerPoint等。 更靈活控制頁面布局，通常頁面的下載是按照代碼的排列順序，而表格布局代碼的排列代表從上向下，從左到右，無法改變。而通過 CSS控制，您可以任意改變代碼的排列順序，比如將重要的右邊內(nèi)容先加載出來。 表現(xiàn)和內(nèi)容相分離，干凈利落，將設(shè)計部分剝離出來放在一個獨立樣式文件中，而網(wǎng)頁主要來放置您的內(nèi)容，你可以減少未來網(wǎng)頁無效的 可能。 更方便搜索引擎收錄，并獲得更高的評價。用只包含結(jié)構(gòu)化內(nèi)容的 HTML代替嵌套的標(biāo)簽，主次分明，搜索引擎將更有效地搜索到你的內(nèi)容，并可能給你一個較高的評價 (ranking)。 Table表格布局靈活性不大，你只能遵循 table tr td 的格式。而 div你可以 div ul li 也可以 ol li 還可以 ul li. Table表格布局中，垃圾代碼會很多，一些修飾的樣式及布局的代碼混合一起，很不利于直觀。而 Div 更能體現(xiàn)樣式和結(jié)構(gòu)相分離，結(jié)構(gòu)的重構(gòu)性強。 以前一些必須通過圖片轉(zhuǎn)換實現(xiàn) 的功能，現(xiàn)在只要用 CSS就可以輕松實現(xiàn)，從而更快地下載頁面。 5.4 創(chuàng)建并連接到外部 CSS 樣式 5.4.1 創(chuàng)建新的 CSS 樣式 （ 1） 在 CSS樣式面板中單擊底部的“新建 CSS樣式”功能按鈕，或者右鍵單擊面板，在彈出的快捷菜單中選擇“新建 CSS樣式”命令，打開“新建 CSS樣式”對話框， 如： 圖 5-5 圖 5-5 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 16 （ 2）在“名稱”文本框中輸入樣式名稱。 （ 3）在“選擇器類型”域中選擇樣式的種類。 （ 4）設(shè)置完成后單擊“確定”按鈕。 5.4.2 附加外部 CSS 樣式表 （ 1）打開 CSS樣式面板。 （ 2）點擊 CSS樣式面 板底部的“附加樣式表”打開“鏈接外部樣式表”。圖 5-6 圖 5-6 （ 3）在“鏈接外部樣式表”對話框上的“文件 /URL”域中輸入所需要的文件。 （ 1） 在“添加為”域中選擇“鏈接”或“導(dǎo)入”指定和創(chuàng)建用于將外部 CSS樣式附加到文擋的標(biāo)簽。 （ 2） 完成后點擊“確定”即可將所選擇的 CSS樣式表附加到當(dāng)前文擋， （ 3） 在 CSS樣式面板中顯示該 CSS樣式表 。圖 5-7 圖 5-7 5.5 插入圖像和媒體 5.5.1 圖片的制作和插入圖片 （ 1） 圖片處理 Firework 在網(wǎng)站中，除了配合 Flash 處理動畫里的影片以外，主要是制作導(dǎo)航按 鈕和 Banner，因為導(dǎo)航按鈕采用的是懸停方式，所以每個按鈕要同時做出兩個版本。即原始狀態(tài)和懸停狀態(tài)。 Firework 在圖片處理上使用了高光和陰影的效果，以突出按鈕的立體感、變化感、和懸停感。 滁州職業(yè)技