【正文】 系統(tǒng)分析 根據(jù)前面的設(shè)計(jì)思想進(jìn)行分析，按照系統(tǒng)開發(fā)的基本觀點(diǎn)對網(wǎng)站進(jìn)行分解，從內(nèi)容上可對網(wǎng)站作如下劃分： ? 協(xié)會簡介：主要介紹 協(xié)會簡述 、 協(xié)會章程 、 管理制度 、 指導(dǎo)老師 相關(guān)內(nèi)容。 ? 機(jī)構(gòu)設(shè)置：主要介紹協(xié)會各部門的職能和技術(shù)交流方向。 ? 技術(shù)園地：聚集各種計(jì)算機(jī)相關(guān)的技術(shù)知識，以便計(jì)算機(jī)愛好者學(xué)習(xí)。 ? 活動風(fēng)采：直觀的展現(xiàn)協(xié)會豐富多彩的活動相關(guān)效果圖。 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 9 ? 資源共享：協(xié)會成員收集的好資料，資源共享，以便大家一起學(xué)習(xí)。 主頁設(shè)計(jì) 網(wǎng)站主頁采用靜、動相結(jié)合的方式，即靜態(tài)的主畫面和動態(tài)的圖片相結(jié)合，體現(xiàn)社團(tuán)的勃勃生氣。不會讓用戶感到本網(wǎng)站的單調(diào)。 在最下面我們還制作了一些友情連接的圖片，可以讓網(wǎng)站不單調(diào)，使得網(wǎng)站更具實(shí)用性。 可分成四個(gè)主題。 網(wǎng)頁設(shè)計(jì)的色彩 人們常常感受到色彩對自己心理的影響，這些影響總是在不知不覺中發(fā)揮作用，左右我們的情緒。有些屬直接的刺激，有些要通過間接的聯(lián)想，更高層次則涉及到人的觀念，信仰，對于藝術(shù)家和設(shè)計(jì)者來說，無論哪一層次的作用都是不可忽視的。針對不同的主題來布置色彩，如健康類的網(wǎng)頁就不能采用較為刺激的大紅和黃，以及象征死亡和神秘的黑色和紫色，這樣會造成一種緊張和某種程度的恐慌，所以我們所選的顏色是 —— 統(tǒng)一“青綠”色，給網(wǎng)民們清爽舒服地感覺。 Dreamweaver 在多媒體方面頗有建樹的 Macromedia 公司推出的可視化網(wǎng)頁制作工具，它與 Flash、 Fireworks 合在一起被稱為網(wǎng)頁制作三劍客，這三個(gè)軟件相輔相承，是制作網(wǎng)頁的最佳選擇。 復(fù)雜的說： Dreamweaver 是美國 Macromedia 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見 即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁色調(diào)。 Dreamweaver 能與您喜愛的設(shè)計(jì)工具，如 Flash 等搭配，不需離開 Dreamweaver 便 可完成，整體運(yùn)用流程自然順暢。 （ 2） 網(wǎng)站管理 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 10 使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁。使用支援文字、 HTML 碼、 HTML 屬性標(biāo)簽和一般語法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡單。它包含 Home Site 和 BBEdit 等主流文字編輯器。對于 CSS的動態(tài) HTML支援和鼠標(biāo)換圖效果，聲音和動畫的 DHTML 效果資料庫可在 Netscape 和 Microsoft 瀏覽器上執(zhí)行。當(dāng)有新的瀏覽器上市時(shí)，只要從 Dreamweaver 的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報(bào)告。 是一個(gè)站點(diǎn)創(chuàng)建和管理工具，因此使用它不僅可以創(chuàng)建單獨(dú)的文檔，還可以創(chuàng)建完整的 Web 站點(diǎn)。為了達(dá)到最佳效果，在創(chuàng)建任何 Web 站點(diǎn)頁面之前，應(yīng)對站點(diǎn)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)和規(guī)劃。 執(zhí)行以下操作： （ 1）啟動 Dreamweaver ： （ 2）選擇“站點(diǎn)” “新建站點(diǎn)”（即，從“站點(diǎn)”菜單選擇“管理站點(diǎn)”）。如圖 51： （ 3）如果對話框顯示的是“基本”選項(xiàng)卡，則單擊“高級”。 圖 51 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 11 （ 4）在文本框中，輸入一個(gè)名稱以設(shè)計(jì)課題名稱英文縮寫“ CEH_Site”。 （ 5） 然后 在下面的 “ 本地根目錄文件夾 ” 和 “默認(rèn)圖像文件夾” 文本框中輸入本地網(wǎng)站預(yù)保存的路徑，單擊 “確認(rèn) ”按鈕。 （ 7） 右鍵單擊 “站點(diǎn) ”面板中的根目錄，在彈出菜單中選擇 “新建文件 ”命令，把新建文件的名稱改為“ ” 。 頁面制作 創(chuàng)建主頁頁面 在全面考慮好網(wǎng)站的欄目，鏈接結(jié)構(gòu)和整體風(fēng)格之后，就可以正式動手制作首頁了。在網(wǎng)站設(shè)計(jì)上也是如此，首頁的設(shè)計(jì)是一個(gè)網(wǎng)站成功與否的關(guān)鍵。是不是能夠促使瀏覽者繼續(xù)點(diǎn)擊進(jìn)入，是否能夠吸引瀏覽者留在站點(diǎn)上，全憑首頁的設(shè)計(jì)。首頁設(shè)計(jì)大致如下： ? 整個(gè)網(wǎng)站 版面布局 都是用 div+css 布局的，有較好的靈活性； ? 色彩的搭配 主要統(tǒng)一用了“青綠”色調(diào)給人以清爽的感覺； ? div 布局的主要架構(gòu)： html head meta equiv=ContentType content=text/html。 ? 最后首頁基本就形成了（如：圖 52） 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 13 圖 52 其它頁面的制作 其他頁面是在此主頁面設(shè)計(jì)好的框架上加以修改，訂好的 css 樣式，添加一些內(nèi)容和各頁面該有的內(nèi)容。 網(wǎng)站布局技術(shù) 本站主要使用 div+css 布局。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者所有頁數(shù)的網(wǎng)頁的外觀和格式。 ? 結(jié)構(gòu)清晰，對搜索引擎更加友好。 ? 兼容性更好，符合 web標(biāo)準(zhǔn)規(guī)范的發(fā)展趨勢，可以在幾乎所有的瀏覽器上都可以使用，不會出現(xiàn)在不同的瀏覽器中效果差距很大的情況。 ? 強(qiáng)大的字體控制和排版能力， CSS控制字體的能力比糟糕的 FONT標(biāo)簽好多了， CSS不再需要用 FONT標(biāo)簽或者透明的 1px圖片來控制標(biāo)題、改變字體顏色、字體樣式等等。 ? 更好的擴(kuò)展性。 ? 更靈活控制頁面布局，通常頁面的下載是按照代碼的排列順序，而表格布局代碼的排列代表從上向下，從左到右，無法改變。 ? 表現(xiàn)和內(nèi)容相分離，干凈利落，將設(shè)計(jì)部分剝離出來放在一個(gè)獨(dú)立樣式文件中，而網(wǎng)頁主要來放置您的內(nèi)容，你可以減少未來網(wǎng)頁無效的 可能。用只包含結(jié)構(gòu)化內(nèi)容的 HTML代替嵌套的標(biāo)簽，主次分明，搜索引擎將更有效地搜索到你的內(nèi)容，并可能給你一個(gè)較高的評價(jià) (ranking)。而 div你可以 div ul li 也可以 ol li 還可以 ul li...... ? Table表格布局中，垃圾代碼會很多，一些修飾的樣式及布局的代碼混合一起，很不利于直觀。 ? 以前一些必須通過圖片轉(zhuǎn)換實(shí)現(xiàn) 的功能，現(xiàn)在只要用 CSS就可以輕松實(shí)現(xiàn)，從而更快地下載頁面。 （ 3）在“選擇器類型”域中選擇樣式的種類。 附加外部 CSS 樣式表 （ 1）打開 CSS樣式面板。圖 56 圖 56 （ 3）在“鏈接外部樣式表”對話框上的“文件 /URL”域中輸入所需要的文件。 （ 2） 完成后點(diǎn)擊“確定”即可將所選擇的 CSS樣式表附加到當(dāng)前文擋， （ 3） 在 CSS樣式面板中顯示該 CSS樣式表 。即原始狀態(tài)和懸停狀態(tài)。 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 17 ? Firework 在處理 Banner 的時(shí)候采用橫幅與網(wǎng)站圖標(biāo)一體的方式處理，將二者整體化，不僅方便排版，也方便瀏覽者瀏覽。這是目前網(wǎng)絡(luò)較為流行的圖片格式，文件小，傳輸速度快，圖片清晰。 （ 2） 插入圖片 點(diǎn)擊要插入圖片 的地方，然后點(diǎn)擊插入 圖像，然后就彈出“選擇圖像源文件”框（如：圖 58）。 圖 58 制作 FLASH 一個(gè)吸引人的網(wǎng)站一定有一個(gè)華麗的 FLAH 過場動畫，這樣不僅給瀏覽者深刻的印象，同時(shí)突出了網(wǎng)站的特點(diǎn)與風(fēng)格。下面是我這個(gè)FLASH制作過程的簡單介紹： （ 1） 雖然 FLASH采用了流控制技術(shù)，但考慮到基帶網(wǎng)的速度和本身 FLASH的文件大小，我還是采用目前流行的先下載后觀看的方式，以保證音效 和動畫的流暢性。只有當(dāng)進(jìn)度達(dá)到 100％時(shí)，動畫開始按鈕才出現(xiàn)，瀏覽者單擊按鈕，動畫隨即開始。 （ 2） FLASH動畫設(shè)計(jì)風(fēng)格為簡潔、動感、時(shí)尚。 （ 4） 影片導(dǎo)出時(shí)增加了保護(hù)功能，增加了影片的安全性，防止他人盜用修改影片。同時(shí)輸出的還有影片大小報(bào)告。為了建立起網(wǎng)頁之間的聯(lián)系我們必須使用超級鏈接。 鏈接分類 ? 按目標(biāo)端點(diǎn)的類型分類：內(nèi)部鏈接、外部鏈接、錨點(diǎn)鏈接、 Email鏈接。 ? 按原錨的對象類型分類：文本鏈接、非文本鏈接 創(chuàng)建超級鏈接的快速方法 （ 1）使用屬性面板創(chuàng)建。在屬性面板鏈接域中直接輸入要鏈接的文件名稱 。 ① 在網(wǎng)頁中選中要做超級鏈接的文字或者圖片。（如下圖） 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 19 圖 59 ③ 按 F12 預(yù)覽網(wǎng)頁。 網(wǎng)頁中特效的運(yùn)用 網(wǎng)頁特效的運(yùn)用在整個(gè)網(wǎng)站中并不是最重要的，但也是不可取少的，它在一定程度上起到了畫龍點(diǎn)睛的作用！也許你會說，有沒有特效無所謂，只要網(wǎng)頁構(gòu)思好，網(wǎng)頁頁面設(shè)計(jì)的得好就可以了！這種想法是不對的，過多的網(wǎng)頁特效會使得頁面顯得雜亂而且不整潔，但是適度的網(wǎng)頁特效卻能使網(wǎng)頁更具有靈動性，更能吸引人的眼球！ 在我們的網(wǎng)站的不同頁面中分別運(yùn)用了一些網(wǎng)頁特效，是從網(wǎng)上下載的網(wǎng)頁特效的代碼，具體如下： 走馬燈燈效果 效果：該特效 的效果和幻燈片播放效果類似，多個(gè)圖片循環(huán)出現(xiàn)，不?；Q。 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文 20 圖 510 新聞圖片切換 效果：自動有序、有時(shí)間段的進(jìn)行圖片切換，也可以點(diǎn)擊下面的圖片序列進(jìn)行切換。如果想讓 FLASH的背景透明，還有設(shè)置 FLASH的參數(shù)那么設(shè)置這個(gè)參數(shù)之后 FLASH的背景就是透明的了。） 網(wǎng)頁過渡效果的應(yīng)用 主要應(yīng)用于整個(gè)網(wǎng)頁，代碼如下： meta equiv=”Page Exit” content=”revealTrans( Duration=3,Transition=19)” （ 其中 ：“ Duration=3” 表示網(wǎng)頁動態(tài)過濾的時(shí)間為 3 秒 ，“ Transition=19” 表示網(wǎng)頁過渡的方式值為 19， 即為從左上角向右下角展開。 （ 1） 查看站點(diǎn)地圖 站點(diǎn)地圖用查看鏈接關(guān)系和導(dǎo)航關(guān)系，在小型站點(diǎn)和整齊有序的站點(diǎn)中一般不起太多的作用。 ② 單擊 “站點(diǎn) ”面板的展開 /折疊按鈕， Dreamweaver 會顯示出站點(diǎn)的結(jié)構(gòu)圖。 在 “站點(diǎn) ”面板中選擇 “站點(diǎn) ”菜單下的 “檢查站點(diǎn)范圍的鏈接 ”命令。檢查完畢后，可讓用戶查看不同類型的鏈接情況，還可以保存鏈接檢查結(jié)果。典型的方法是反復(fù)練習(xí)，并嘗試用不同的方法完成練習(xí)，并對所涉及的知識點(diǎn)進(jìn)一步探索，以求理解更多的功能、參數(shù)、選項(xiàng)和方法；其二，要有清醒的頭腦和明確的學(xué)習(xí)方向。 在畢業(yè)設(shè)計(jì)中搜集計(jì)算機(jī)各種技能知識和照片的時(shí)候 ,我花了很多時(shí) 間和精力 ,但我覺得都是值得的 .因?yàn)槲铱戳撕芏嘤?jì)算機(jī)的知識和很多網(wǎng)頁布局 ,覺得網(wǎng)頁設(shè)計(jì)不是一個(gè)簡單的事。其中計(jì)算機(jī)的發(fā)展可謂快中之快，而在計(jì)算機(jī)的發(fā)展中計(jì)算機(jī)網(wǎng)絡(luò)的發(fā)展又是首當(dāng)其沖的。不論是最新的新聞信息、新產(chǎn)品的出臺、新游戲的發(fā)布、最新的各種 IT 動態(tài)，包括等候就業(yè)人才的個(gè)人簡歷，我們都是可以通過網(wǎng)絡(luò)來獲得。我們又是通過什么來獲取這些消息的呢 —— 對就是網(wǎng)頁。在人類社會進(jìn)入信息時(shí)代的時(shí)候，在網(wǎng)絡(luò)成為通信的主要手段的時(shí)候，在計(jì)算機(jī)網(wǎng)絡(luò)普及的今天，網(wǎng)頁也在它自己的崗位上做出了突出的貢獻(xiàn)。我們將什么樣的信息傳達(dá)給瀏覽者，要講述什么要的事情，網(wǎng)頁在這里起著重用的作 用。網(wǎng)頁講究的是排版布局，其功能主要就是提供一種形式給每個(gè)上網(wǎng)者，讓他們能夠了解網(wǎng)站提供的信息。 在制作網(wǎng)頁的過程中 ,我有一些體會 : （ 1） 整體性好 : 一個(gè)網(wǎng)站強(qiáng)調(diào)的就是一個(gè)整體，只有圍繞一個(gè)統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的。 （ 3） 頁面用色協(xié)調(diào)，布局符合形式美的要求 : 布局有條理，充分利用美的形式，是網(wǎng)頁富有可欣賞性，提高檔次。感謝此次答辯的老師幫助，同時(shí)感謝我的所有專業(yè)老師的幫助