【正文】 當(dāng)然雅俗共賞是人人都追求的 致 謝 這次畢業(yè)設(shè)計(jì)的完成盡管只完成了一部分，但在過程中我花費(fèi)了很大的精力。 （ 2）網(wǎng)站形象突出 : 一個符合美的標(biāo)準(zhǔn)的網(wǎng)頁是能夠使網(wǎng)站的形象得到最大限度的提升的。網(wǎng)頁設(shè)計(jì)直接面對的是大量目 錄 26 用戶 ,隨時都會反饋回來對網(wǎng)頁的批評建議等，可以根據(jù)實(shí)際情況進(jìn)行修改，這樣做可以使使用者用起來更加的方便。 網(wǎng)頁設(shè)計(jì)是伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起 . 由于人們使用網(wǎng)絡(luò)的頻繁而網(wǎng)頁作為上網(wǎng)的主要依托就變得非常的重要。網(wǎng)頁是我們在網(wǎng)絡(luò)上的“帶言人”?，F(xiàn)如今，數(shù)以萬計(jì)的網(wǎng)站以網(wǎng)頁的方式提供了豐富、精彩的信息。但是什么為這所有的一切提供平臺的呢。計(jì)算機(jī)網(wǎng)絡(luò)從為我們所知，到現(xiàn)在才經(jīng)歷的短短的幾年時間，在這幾年中隨著計(jì)算機(jī)網(wǎng)絡(luò)的廣泛應(yīng)用，特別是 Inter 的普及和發(fā)展，網(wǎng)絡(luò)已經(jīng)成為了不可或缺的通信手段。首先它存在一種設(shè)計(jì)的思維和色彩搭配，再者就是根據(jù)不同的行業(yè)就要求不同的專業(yè)效果，最后就是布局必須做好強(qiáng)有力的構(gòu)思！ 設(shè)計(jì)體會 對于現(xiàn)在的社會，科技的飛速發(fā)展已經(jīng)成為社會發(fā)展的標(biāo)志。當(dāng)你學(xué)習(xí)掌握了足夠的練習(xí)制作后，應(yīng)該及時對所學(xué)的知識進(jìn)行總結(jié)和歸納，發(fā)現(xiàn)規(guī)律，進(jìn)一步推敲軟件的整體結(jié)構(gòu)和知識體系，這樣才會真正有所提高。 六、總結(jié)與體會 總結(jié) 課題設(shè)計(jì)學(xué)習(xí)法首先要求自己有足 夠的耐心，對于任何一個練習(xí)都要反復(fù)推敲，目的只有一個，就是理解實(shí)例所涉及的所有知識點(diǎn)，只有這樣你才算有所收獲。 Dreamweaver 會彈出 “鏈接檢查器 ”面板。 （ 2） 檢查超鏈接情況 鏈接檢查不僅僅在此外使用，當(dāng)在站點(diǎn)窗口中移動一個文件的時候， Dreamweaver 也會問我們是否需要掃描結(jié)果顯示出來，還會詢問是否要更新鏈接。 ① 在 Dreamweaver 窗口菜單下的 “站點(diǎn)地圖 ”命令，打開 “站點(diǎn) ”面板。） 整理站點(diǎn) 目 錄 25 網(wǎng)頁做完以后往往不能馬上發(fā)布，還需要檢驗(yàn)下網(wǎng)頁之間的鏈接是否準(zhǔn)確，文件是否冗等，有時還需要掌握整個站點(diǎn)的結(jié)構(gòu)以備日后的修改。 網(wǎng)頁中特效的運(yùn)用 網(wǎng)頁特效的運(yùn)用在整個網(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)上下載一下，再次就不做詳細(xì)介紹。（如下圖） 目 錄 24 圖 59 ③按 F12 預(yù)覽網(wǎng)頁。 ①在網(wǎng)頁中選中要做超級鏈接的文字或者圖片。在屬性面板鏈接域中直接輸入要鏈接的文件名稱 。 ? 按原錨的對象類型分類：文本鏈接、非文本鏈接 創(chuàng)建超級鏈接的快速方法 （ 1）使用屬性面板創(chuàng)建。 鏈接分類 ? 按目標(biāo)端點(diǎn)的類型分類：內(nèi)部鏈接、外部鏈接、錨點(diǎn)鏈接、 Email鏈接。為了建立起網(wǎng)頁之間的聯(lián)系我們必須使用超級鏈接。同時輸出的還有影片大小報(bào) 告。 （ 4）影片導(dǎo)出時增加了保護(hù)功能，增加了影片的安全性，防止他人盜用修改影片。 （ 2） FLASH動畫設(shè)計(jì)風(fēng)格為簡潔、動感、時尚。只有當(dāng)進(jìn)度達(dá)到 100％時，動畫開始按鈕才出現(xiàn)，瀏覽者單擊按鈕，動畫隨即 開始。下面是我這個FLASH制作過程的簡單介紹： （ 1）雖然 FLASH采用了流控制技術(shù)，但考慮到基帶網(wǎng)的速度和本身 FLASH的文件大小，我還是采用目前流行的先下載后觀看的方式，以保證音效和動畫的流暢性。 圖 58 制作 FLASH 一個吸引人的網(wǎng)站一定有一個華麗的 FLAH 過場動畫，這樣不僅給瀏覽者深刻的印象，同時突出了網(wǎng)站的特點(diǎn)與風(fēng)格。 （ 2）插入圖片 點(diǎn)擊要插入圖片的地方，然后點(diǎn)擊插入 圖像，然后就彈出“選擇圖像源文件”框（如：圖 58）。這是目前網(wǎng)絡(luò)較為流行的圖片格式，文件小，傳輸速度快，圖片清晰。 ? Firework 在處理 Banner 的時候采用橫幅與網(wǎng)站圖標(biāo)一體的方式處理，將二者整體化，不僅方便排版，也方便瀏覽者瀏覽。即原始狀態(tài)和懸停狀態(tài)。 （ 2） 完成后點(diǎn)擊“確定”即可將所選擇的 CSS樣式表附加到當(dāng)前文擋， （ 3） 在 CSS樣式面板中顯示該 CSS樣式表 。圖 56 圖 56 （ 3）在“鏈接外部樣式表”對話框上的“文件 /URL”域中輸入所需要的文件。 附加外部 CSS 樣式表 （ 1）打開 CSS樣式面板。 （ 3）在“選擇器類型”域中選擇樣式的種類。 ? 以前一些必須通過圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在只要用 CSS就可以輕松實(shí)現(xiàn)，從而更快地下載頁面。而 div你可以 div ul li 也可以 ol li 還可以 ul li...... ? Table表格布局中，垃圾代碼會很多，一些修飾的樣式及布局的代碼混合一起，很不利于直觀。用只包含結(jié)構(gòu)化內(nèi)容的 HTML代替嵌套的標(biāo)簽，主次分明，搜索引擎將更有效地搜索到你的內(nèi)容，并可能給你一個較高的 評價 (ranking)。 ? 表現(xiàn)和內(nèi)容相分離，干凈利落，將設(shè)計(jì)部分剝離出來放在一個獨(dú)立樣式文件中，而網(wǎng)頁主要來放置您的內(nèi)容，你可以減少未來網(wǎng)頁無效的可能。 ? 更靈活控制頁面布局，通常頁面的下載是按照代碼的排列順序，而表格布局代碼的排列代表從上向下，從左到右，無法改變。 ? 更好的擴(kuò)展性。 ? 強(qiáng)大的字體控制和排版能力， CSS控制字體的能力比糟糕的 FONT標(biāo)簽好多了， CSS不再需要用 FONT標(biāo)簽或者透明的 1px圖片來控制標(biāo)題、改變字體顏色、字體樣式等等。 ? 兼容性更好，符合 web標(biāo)準(zhǔn)規(guī)范的發(fā)展趨勢，可以在幾乎所有的瀏覽器上都可以使用，不會出現(xiàn)在不同的瀏覽器中效果差距很大的情況。 ? 結(jié)構(gòu)清晰，對搜索引擎更加友好。只要對相應(yīng)的代碼 做一些簡單的修改，就可以改變同一頁面的不同部分，或者所有頁數(shù)的網(wǎng)頁的外觀和格式。 網(wǎng)站布局技術(shù) 本站主要使用 div+css 布局。 ? 最后首頁基本就形成了（如：圖 2） 圖 2 其它頁面的制作 其他頁面是在此主頁面設(shè)計(jì)好的框架上加以修改，訂好的 css 樣式，添加一些內(nèi)容和各頁面 該有的內(nèi)容。首頁設(shè)計(jì)大致如下： ? 整個網(wǎng)站 版面布局 都是用 div+css 布局的，有較好的靈活性； ? 色彩的搭配 主要統(tǒng)一用了“淺綠”色調(diào)給人以清爽而接近大自然植物的感覺； ? div 布局的主要架構(gòu)： html head meta equiv=ContentType content=text/html。是不是能夠促使瀏覽者繼續(xù)點(diǎn)擊進(jìn)入，是否能夠吸引瀏覽者留在站點(diǎn)上，全憑首頁的設(shè)計(jì)。在網(wǎng)站設(shè)計(jì)上也是如此，首頁的設(shè)計(jì)是一個網(wǎng)站成功與否的關(guān)鍵。 頁面制作 創(chuàng)建主頁頁面 在全面考慮好網(wǎng)站的欄目，鏈接結(jié)構(gòu)和整體風(fēng)格之后，就可以正式動手制作首頁了。 （ 7） 右鍵單擊 “站點(diǎn) ”面板中的根目錄，在彈出菜單中選擇 “新建文件 ”命令，把新建文件的名稱改為“ ” 。 （ 5） 然后 在下面的 “ 本地 站點(diǎn)文件夾 ” 文本框中輸入本地網(wǎng)站預(yù)保存的路徑，單擊 “保存 ”按鈕。 圖 1 （ 4）在文本框中，輸入一個名稱以設(shè)計(jì)課題名稱英文縮寫“ zyet”。如圖 1： （ 3）如果對話框顯示的是“基本”選項(xiàng)卡，則單擊“高級設(shè)置”。 執(zhí)行以下操作： （ 1）啟動 Dreamweaver ： （ 2）選 擇“站點(diǎn)” “新建站點(diǎn)”（即，從“站點(diǎn)”菜單選擇“管理站點(diǎn)”）。為了達(dá)到最佳效果，在創(chuàng)建任何 Web 站點(diǎn)頁面之前，應(yīng)對站點(diǎn)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)和規(guī)劃。 管理工具，因此使用它不僅可以創(chuàng)建單獨(dú)的文檔，還可以創(chuàng)建完整的 Web 站點(diǎn)。當(dāng)有新的瀏覽器上市時，只要從 Dreamweaver 的網(wǎng)站在下載它的描述檔 ，便可得知詳盡的成效報(bào)告。對于 CSS的動態(tài) HTML支援和鼠標(biāo)換圖效果，聲音和動畫的 DHTML 效果資料庫可在 Netscape 和 Microsoft 瀏覽器上執(zhí)行。它包含 Home Site 和 BBEdit 等主流文字編輯器。使用支援文字、 HTML 碼、 HTML 屬性標(biāo)簽和一般語法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡單。 （ 2）網(wǎng)站管理 使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁。 Dreamweaver 能與您喜愛的設(shè)計(jì)工具，如 Flash 等搭配，不需離開 Dreamweaver 便可完成，整體運(yùn)用流程自然順暢。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁色調(diào)。 復(fù)雜的說： Dreamweaver 是美國 Macromedia 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。 Dreamweaver 在多媒體方面頗有建樹的 Macromedia 公司推出的可視化網(wǎng)頁制作工具，它與 Flash、 Fireworks 合在一起被稱為網(wǎng)頁制作三劍客，這三個軟件相輔相承，是制作網(wǎng)頁的最佳選擇。針對不同的主題來布置色彩，如健康類的網(wǎng)頁就不能采用較為刺激的大紅和黃，以及象征死亡和神秘的黑色和紫色，這樣會造成一種緊張和某種程度的恐慌，所以我們所選的顏色是 —— 統(tǒng)一“青綠”色，給網(wǎng)民們清爽舒服地感覺，同時體現(xiàn)了中藥材網(wǎng)址的自然色。有些屬直接的刺激，有些要通過間接的聯(lián)想，更高層次則涉及到人的觀目 錄 15 念， 信仰，對于藝術(shù)家和設(shè)計(jì)者來說，無論哪一層次的作用都是不可忽視的。 網(wǎng)頁設(shè)計(jì)的色彩 人們常常感受到色彩對自己心理的影響，這些影響總是在不知不覺中發(fā)揮作用，左右我們的情緒。 可分成四個主題。 在最下面我們還制作了一些友情連接的圖片，可以讓網(wǎng)站不單調(diào)，使得網(wǎng)站更具實(shí)用性。不會讓用戶感到本網(wǎng)站的單調(diào)。 主頁設(shè)計(jì) 網(wǎng)站主頁采用靜、動相結(jié)合的方式，即靜態(tài)的主畫面和動態(tài)的圖片相結(jié)合，體現(xiàn)網(wǎng)址的勃勃生氣。 ? 中藥保健：主要包括藥材保健、其他農(nóng)副等子欄目。 ? 藥材產(chǎn)業(yè)：主要包括急消急購、產(chǎn)地概括、市場關(guān)注、交易在線四個子欄目。} 三、網(wǎng)站總體分析與設(shè)計(jì) 網(wǎng)站系統(tǒng)分析 根據(jù)前面的設(shè)計(jì)思想進(jìn)行分析，按照系統(tǒng)開發(fā)的基本觀點(diǎn)對網(wǎng)站進(jìn)行分解，從內(nèi)容上可對網(wǎng)站作如下劃分： ? 首頁：主要展示信息資訊 、藥材產(chǎn)業(yè)、藥商聯(lián)盟、中藥保健、行業(yè)互動欄目的最新動態(tài)內(nèi)容。 width:900px。} .footer1 { margintop:0。 border:1px 1px solid 999。 width:900px。 bordertopwidth:1px 2px 。 bordertopstyle:double。 height:40px。 bordercolor:CCC。 borderstyle:solid。 目 錄 14 fontsize: 14px。 width:30%。 textindent:10px。 color:00F。 } .btb{ textalign:right。 height:30px。 fontweight:600。 lineheight:2em。 backgroundimage:url(../image/) } .bta{ float:left。 height:30px。 } .bt{ float:left。 float:left。 width:100%。 backgroundcolor:D8EEB3 } nr{ height:460px。 height:40px。 fontweight:600。 color:F90。 width:100%。 } cbt{ backgroundcolor:FFC。 bordercolor:CCC。 borderstyle:solid。 } middle4 { margin:0 275px !important。 height: 250px。 bordercolor:CCC。 } left4 { borderstyle:solid。 height: 250px。 bordercolor:CCC。 } right4 { borderstyle:solid。 width: 900px。 } main4 { float:left。 width: 900px。 } main3 { float:left。 } right3b { height: 250px。 } right3a { height: 250px。 目 錄 12 width:395px。 backgroundcolor:996。 borderwidth:1px。 height: 500px。 float:left。 borderwidth: