【正文】 ? 縮短改版時間，因為網(wǎng)站的布局都是通過外部的 CSS文件來控制，只要簡單的修改幾個 CSS文件就可以將許多網(wǎng)頁的風(fēng)格格式同時更新，不用再一頁一頁地更新了。 ? 強大的字體控制和排版能力， CSS控制字體的能力比糟糕的 FONT標簽好多了， CSS不再需要用 FONT標簽或者透明的 1px圖片來控制標題、改變字體顏色、字體樣式等等。 ? 提高易用性，使用 CSS可以結(jié)構(gòu)化 HTML，例如： p標簽只用來控制段落， h1h6標簽只用來控制標題，table標簽只用來表現(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代替嵌套的標簽，主次分明，搜索引擎將更有效地搜索到你的內(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)，從而更快地下載頁面。 創(chuàng)建并連接到外部 CSS樣式 創(chuàng)建新的 CSS 樣式 （ 1） 在 CSS樣式面板中單擊底 部的“新建 CSS樣式”功能按鈕，或者右鍵單擊面板，在彈出的快捷菜單中選擇“新建 CSS樣式”命令，打開“新建 CSS樣式”對話框，如： 圖 55 目 錄 21 圖 55 （ 2）在“名稱”文本框中輸入樣式名稱。 （ 3）在“選擇器類型”域中選擇樣式的種類。 （ 4）設(shè)置完成后單擊“確定”按鈕。 附加外部 CSS 樣式表 （ 1）打開 CSS樣式面板。 （ 2）點擊 CSS樣式面板底部的“附加樣式表”打開“鏈接外部樣式表”。圖 56 圖 56 （ 3）在“鏈接外部樣式表”對話框上的“文件 /URL”域中輸入所需要的文件。 （ 1） 在“添加 為”域中選擇“鏈接”或“導(dǎo)入”指定和創(chuàng)建用于將外部 CSS樣式附加到文擋的標簽。 （ 2） 完成后點擊“確定”即可將所選擇的 CSS樣式表附加到當前文擋， （ 3） 在 CSS樣式面板中顯示該 CSS樣式表 。圖 57 目 錄 22 圖 57 插入圖像和媒體 圖片的制作和插入圖片 （ 1）圖片處理 Firework 在網(wǎng)站中，除了配合 Flash 處理動畫里的影片以外，主要是制作導(dǎo)航按鈕和 Banner，因為導(dǎo)航按鈕采用的是懸停方式，所以每個按鈕要同時做出兩個版本。即原始狀態(tài)和懸停狀態(tài)。 ? Firework 在圖片處理上使用了高光和陰影的效果 ，以突出按鈕的立體感、變化感、和懸停感。 ? Firework 在處理 Banner 的時候采用橫幅與網(wǎng)站圖標一體的方式處理，將二者整體化，不僅方便排版，也方便瀏覽者瀏覽。 ? Firework 在圖片輸出的時候采用 JPEG（ ISO 國際標準圖像壓縮）格式。這是目前網(wǎng)絡(luò)較為流行的圖片格式，文件小，傳輸速度快，圖片清晰。輸出品質(zhì)為 80，無平滑。 （ 2）插入圖片 點擊要插入圖片的地方，然后點擊插入 圖像，然后就彈出“選擇圖像源文件”框（如：圖 58）。在圖片文件夾中選擇要插入的圖片就可以了。 圖 58 制作 FLASH 一個吸引人的網(wǎng)站一定有一個華麗的 FLAH 過場動畫，這樣不僅給瀏覽者深刻的印象，同時突出了網(wǎng)站的特點與風(fēng)格。但 FLASH 相對 DW 制作較復(fù)雜，設(shè)計到幀、時間軸、剪輯、按鈕等方面。下面是我這個FLASH制作過程的簡單介紹： （ 1）雖然 FLASH采用了流控制技術(shù)，但考慮到基帶網(wǎng)的速度和本身 FLASH的文件大小，我還是采用目前流行的先下載后觀看的方式，以保證音效和動畫的流暢性。并且加裝了一個進度條，隨時檢測下載速目 錄 23 度和時間，讓瀏覽者做到心中有數(shù)。只有當進度達到 100％時，動畫開始按鈕才出現(xiàn)，瀏覽者單擊按鈕，動畫隨即 開始。整個下載部分的動畫放在一個剪輯中，不僅節(jié)省內(nèi)存，而且方便庫的管理。 （ 2） FLASH動畫設(shè)計風(fēng)格為簡潔、動感、時尚。 （ 3） FLASH影片所有素材、按鈕、剪輯、聲音全部導(dǎo)入庫中，時間軸上只有各個剪輯的層，從而節(jié)約了內(nèi)存，方便管理。 （ 4）影片導(dǎo)出時增加了保護功能，增加了影片的安全性，防止他人盜用修改影片。矢量圖的品質(zhì)為100，保證了影片圖像的質(zhì)量，并且聲音的輸出格式為 mp3 采樣標準為 128Kbps 雙聲道立體聲，該標準接近 CD標準，這樣雖然增加了影片的大小，但是保證了聲音的效果。同時輸出的還有影片大小報 告。 超級鏈接 作為網(wǎng)站肯定有很多的頁面，如果頁面之間彼此是獨立的，那么網(wǎng)頁就好比是孤島，這樣的網(wǎng)站是無法運行的。為了建立起網(wǎng)頁之間的聯(lián)系我們必須使用超級鏈接。稱“超級鏈接”，是因為它什么都能鏈接，如：網(wǎng)頁、下載文件、網(wǎng)站地址、郵件地址??等等。 鏈接分類 ? 按目標端點的類型分類：內(nèi)部鏈接、外部鏈接、錨點鏈接、 Email鏈接。 ? 按文擋路徑分類：絕對路徑鏈接、相對路徑鏈接、根相對路徑鏈接。 ? 按原錨的對象類型分類：文本鏈接、非文本鏈接 創(chuàng)建超級鏈接的快速方法 （ 1）使用屬性面板創(chuàng)建。 在文擋窗口中選中要創(chuàng)建鏈接的文本或圖象等。在屬性面板鏈接域中直接輸入要鏈接的文件名稱 。圖 59 圖 59 （ 2）直接創(chuàng)建 在網(wǎng)頁中，單擊了某些圖片、有下劃線或有明示鏈接的文字就會跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁中去。 ①在網(wǎng)頁中選中要做超級鏈接的文字或者圖片。 ② 在屬性面板中單擊住指向文件按鈕不放，在直接將其拖出，拖到右側(cè)文件導(dǎo)航中選中要鏈接的頁面。（如下圖） 目 錄 24 圖 59 ③按 F12 預(yù)覽網(wǎng)頁。在瀏覽器里光標移到超級鏈接的地方就會變成手型。 網(wǎng)頁中特效的運用 網(wǎng)頁特效的運用在整個網(wǎng)站中并不是最重要的，但也是不可 取少的，它在一定程度上起到了畫龍點睛的作用！也許你會說，有沒有特效無所謂，只要網(wǎng)頁構(gòu)思好，網(wǎng)頁頁面設(shè)計的得好就可以了！這種想法是不對的，過多的網(wǎng)頁特效會使得頁面顯得雜亂而且不整潔，但是適度的網(wǎng)頁特效卻能使網(wǎng)頁更具有靈動性，更能吸引人的眼球！ 在我們的網(wǎng)站的不同頁面中分別運用了一些網(wǎng)頁特效， 這個知識面本人并不太懂，所以只能在網(wǎng)上下載一下，再次就不做詳細介紹。 網(wǎng)頁過渡效果的應(yīng)用 主要應(yīng)用于整個網(wǎng)頁，代碼如下： meta equiv=”Page Exit” content=”revealTrans( Duration=3,Transition=19)” （ 其中 ：“ Duration=3” 表示網(wǎng)頁動態(tài)過濾的時間為 3 秒 ，“ Transition=19” 表示網(wǎng)頁過渡的方式值為 19， 即為從左上角向右下角展開。） 整理站點 目 錄 25 網(wǎng)頁做完以后往往不能馬上發(fā)布，還需要檢驗下網(wǎng)頁之間的鏈接是否準確，文件是否冗等，有時還需要掌握整個站點的結(jié)構(gòu)以備日后的修改。 （ 1） 查看站點地圖 站點地圖用查看鏈接關(guān)系和導(dǎo)航關(guān)系，在小型站點和整齊有序的站點中一般不起太多的作用。 ① 在 Dreamweaver 窗口菜單下的 “站點地圖 ”命令，打開 “站點 ”面板。 ② 單擊 “站點 ”面板的展開 /折疊按鈕， Dreamweaver 會顯示出站點的結(jié)構(gòu)圖。 （ 2） 檢查超鏈接情況 鏈接檢查不僅僅在此外使用，當在站點窗口中移動一個文件的時候， Dreamweaver 也會問我們是否需要掃描結(jié)果顯示出來，還會詢問是否要更新鏈接。 在 “站點 ”面板中選擇 “站點 ”菜單下的 “檢查站點范圍的鏈接 ”命令。 Dreamweaver 會彈出 “鏈接檢查器 ”面板。檢查完畢后，可讓用戶查看不同類型的鏈接情況，還可以保存鏈接檢查結(jié)果。 六、總結(jié)與體會 總結(jié) 課題設(shè)計學(xué)習(xí)法首先要求自己有足 夠的耐心，對于任何一個練習(xí)都要反復(fù)推敲，目的只有一個，就是理解實例所涉及的所有知識點，只有這樣你才算有所收獲。典型的方法是反復(fù)練習(xí)，并嘗試用不同的方法完成練習(xí)，并對所涉及的知識點進一步探索，以求理解更多的功能、參數(shù)、選項和方法；其二，要有清醒的頭腦和明確的學(xué)習(xí)方向。當你學(xué)習(xí)掌握了足夠的練習(xí)制作后，應(yīng)該及時對所學(xué)的知識進行總結(jié)和歸納，發(fā)現(xiàn)規(guī)律，進一步推敲軟件的整體結(jié)構(gòu)和知識體系，這樣才會真正有所提高。 在畢業(yè)設(shè)計中搜集計算機各種技能知識和照片的時候 ,我花了很多時間和精力 ,但我覺得都是值得的 .因為我看了很多計算 機的知識和很多網(wǎng)頁布局 ,覺得網(wǎng)頁設(shè)計不是一個簡單的事。首先它存在一種設(shè)計的思維和色彩搭配，再者就是根據(jù)不同的行業(yè)就要求不同的專業(yè)效果，最后就是布局必須做好強有力的構(gòu)思！ 設(shè)計體會 對于現(xiàn)在的社會，科技的飛速發(fā)展已經(jīng)成為社會發(fā)展的標志。其中計算機的發(fā)展可謂快中之快，而在計算機的發(fā)展中計算機網(wǎng)絡(luò)的發(fā)展又是首當其沖的。計算機網(wǎng)絡(luò)從為我們所知，到現(xiàn)在才經(jīng)歷的短短的幾年時間，在這幾年中隨著計算機網(wǎng)絡(luò)的廣泛應(yīng)用，特別是 Inter 的普及和發(fā)展，網(wǎng)絡(luò)已經(jīng)成為了不可或缺的通信手段。不論是最新的新聞信息、新產(chǎn)品的出臺、新 游戲的發(fā)布、最新的各種 IT 動態(tài)，包括等候就業(yè)人才的個人簡歷，我們都是可以通過網(wǎng)絡(luò)來獲得。但是什么為這所有的一切提供平臺的呢。我們又是通過什么來獲取這些消息的呢 —— 對就是網(wǎng)頁。現(xiàn)如今，數(shù)以萬計的網(wǎng)站以網(wǎng)頁的方式提供了豐富、精彩的信息。在人類社會進入信息時代的時候，在網(wǎng)絡(luò)成為通信的主要手段的時候，在計算機網(wǎng)絡(luò)普及的今天，網(wǎng)頁也在它自己的崗位上做出了突出的貢獻。網(wǎng)頁是我們在網(wǎng)絡(luò)上的“帶言人”。我們將什么樣的信息傳達給瀏覽者，要講述什么要的事情，網(wǎng)頁在這里起著重用的作用。 網(wǎng)頁設(shè)計是伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起 . 由于人們使用網(wǎng)絡(luò)的頻繁而網(wǎng)頁作為上網(wǎng)的主要依托就變得非常的重要。網(wǎng)頁講究的是排版布局，其功能主要就是提供一種形式給每個上網(wǎng)者，讓他們能夠了解網(wǎng)站提供的信息。網(wǎng)頁設(shè)計直接面對的是大量目 錄 26 用戶 ,隨時都會反饋回來對網(wǎng)頁的批評建議等，可以根據(jù)實際情況進行修改，這樣做可以使使用者用起來更加的方便。 在制作網(wǎng)頁的過程中 ,我有一些體會 : （ 1）整體性好 : 一個網(wǎng)站強調(diào)的就是一個整體，只有圍繞一個統(tǒng)一的目標所做的設(shè)計才是成功的。 （ 2）網(wǎng)站形象突出 : 一個符合美的標準的網(wǎng)頁是能夠使網(wǎng)站的形象得到最大限度的提升的。 （ 3）頁 面用色協(xié)調(diào)，布局符合形式美的要求 : 布局有條理，充分利用美的形式，是網(wǎng)頁富有可欣賞性，提高檔次。當然雅俗共賞是人人都追求的 致 謝 這次畢業(yè)設(shè)計的完成盡管只完成了一部分，但在過程中我花費了很大的精力。首先，我要感謝我的所有專業(yè)老師三年對我的教育和輔導(dǎo)；其次感謝陳小龍，智奎宇等同學(xué)給我在制作過程中遇到的問題做了簡單的幫助；最后感謝此次答辯老師的幫助；在此感謝所有的人：忠心謝謝，謝謝你們！至此，將離校之際，我向大學(xué)三年傳授給我知識的每位老師表示衷心的感謝！感謝陜西電子信息職業(yè)技術(shù)學(xué)院三年來對我 的培養(yǎng)！ 參考文獻 [1] 胡燕潔 中國青年出版社 《 HTML 標準教程》 [2] 王愉 人民郵電出版社 《 DHTML 動態(tài)網(wǎng)頁設(shè)計》 [3] 沈大林 中國 鐵道出版社 《 Photoshop CS2 圖像處理案例教程》 [4] 王國平 涂巧霞 電子工業(yè)出版社 《 Macromedia Studio 8 網(wǎng)頁三劍客基礎(chǔ)與實踐教程》 目 錄 27 評語： 說明書質(zhì)量、圖紙繪制質(zhì)量及計算準確度： 參考資料及已知技術(shù)參數(shù)運用情況： 數(shù)據(jù)可靠度： 論點充分度： 創(chuàng)新情況： 綜合評語 ： 成績評定： 指導(dǎo)教師簽字 ___________________ 年 月 日 教研室主任意見： 教研室主任簽字 ___________________