【正文】 網(wǎng)頁制作與實用技術(shù) 21世紀(jì)高等院校規(guī)劃教材 網(wǎng)頁設(shè)計與制作實用技術(shù) 齊建玲 主編 郭鐵柱 劉博濤 何麗娟 副主編 中國水利水電出版社 通過本章學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容： 1. 認(rèn)識網(wǎng)頁 2. 構(gòu)成網(wǎng)頁的基本要素 3. 制作網(wǎng)頁的基本工具 4. 美化網(wǎng)頁的基本工具 5. 網(wǎng)頁制作的基本步驟 第 1章 網(wǎng)頁制作初識 一個校園網(wǎng)的制作示例 主要網(wǎng)頁畫面 網(wǎng)頁的基本功能 網(wǎng)頁的基本要素 文字 文字是網(wǎng)頁發(fā)布信息所用的主要形式 ， 由文字制作出的網(wǎng)頁占用空間小 ， 當(dāng)用戶瀏覽時 ， 可以很快的展現(xiàn)在用戶面前 。 另外 ， 文字性網(wǎng)頁還可以利用瀏覽器中 “ 文件 ” 菜單下的 “ 另存為 ” 功能將其下載 。 但是沒有編排點綴的純文字網(wǎng)頁 ， 又會給人帶來死板不活潑的感覺 ， 使得人們不愿意再往下瀏覽 。 文字性網(wǎng)頁一定要注意編排 ， 包括標(biāo)題得字型字號 ， 內(nèi)容的層次樣式 ， 是否需要變換顏色進行點綴等 。 1． 標(biāo)題 一個網(wǎng)頁通常都有一個標(biāo)題 ， 表明本網(wǎng)頁的主要內(nèi)容 。 標(biāo)題是否醒目 ， 是吸引瀏覽者能否注意的一個關(guān)鍵 ， 因此對標(biāo)題的設(shè)計是很重要的 。 網(wǎng)頁中的文字不能太大或太小 。 太大會使得一個網(wǎng)頁信息量變小 ， 太小又使人們?yōu)g覽時感到費勁 。 一個優(yōu)秀網(wǎng)頁中的文字 ， 應(yīng)統(tǒng)籌規(guī)劃 ， 大小搭配適當(dāng) ， 給人以生動活潑之感覺 。 2． 字號 在網(wǎng)頁適當(dāng)?shù)奈恢貌捎貌煌淖煮w字型 ， 也能使網(wǎng)頁產(chǎn)生吸引人的效果 。 應(yīng)該注意的是在報刊上變換字體字型非常普遍 ， 它可以在不同的地方使用不同的字型 。 但在網(wǎng)頁制作上卻要慎重 。 因為有些美麗的字型在制作網(wǎng)頁的計算機上有 ， 但將來別人瀏覽你的網(wǎng)頁時 ， 瀏覽者的計算機上未必裝有這種字體 。 這樣瀏覽者就無法得到你預(yù)想的瀏覽效果 ， 甚至適得相反 。 如果只是標(biāo)題或少量的文字 ， 可以將采用的特殊字體制作成圖形方式 ， 就可避免其他瀏覽者看不到的尷尬局面了 。 3． 字型 表格 當(dāng)文本內(nèi)容較多時 ， 可以利用表格形式來實現(xiàn) 。 表格是在網(wǎng)頁上的一行或多行單元格 ， 用來組織網(wǎng)頁的布局或系統(tǒng)地布置數(shù)據(jù) ， 用戶可以放置任何東西在表格的單元格中 ， 包括文字 、 圖形和表單等 。 表格具有容量大 、 結(jié)構(gòu)嚴(yán)謹(jǐn)和效果直觀等多個優(yōu)點 ， 是網(wǎng)頁中不可缺少的記錄或總結(jié)工具 。 表格還可以用來控制網(wǎng)頁中信息的布局方式 。許多大型的網(wǎng)站都是使用表格來進行頁面布局的 , 使頁面看起來更加直觀和有條理 。 圖形 這里的圖形概念是廣義的 ， 它可以是普通的繪制圖形 ， 可以是各種圖像 ， 還可以是動畫 。 一幅優(yōu)秀的網(wǎng)頁除了有能吸引瀏覽者的文字形式和內(nèi)容外 ， 圖形的表現(xiàn)功能是不能低估的 。 網(wǎng)頁上的圖形格式一般使用JPEG和 GIF， 這兩種格式具有跨平臺的特性 ， 可以在不同操作系統(tǒng)支持的瀏覽器上顯示 。 圖形在網(wǎng)頁中通常有如下應(yīng)用： 1． 菜單按鈕 網(wǎng)頁上的菜單按鈕有一些是由圖形制作 ， 通常有橫排和豎排兩種形式 ， 由此可以轉(zhuǎn)入不同的頁面 。 2． 背景圖形 為了加強視覺效果 ， 有些網(wǎng)頁在整個網(wǎng)頁的底層放置了圖形 ， 稱作背景圖 。 背景圖可以使網(wǎng)頁更加華麗 ， 使人感到界面友好 。 但由于這是一個比較大的圖形 ， 需要占據(jù)較大的空間 ， 致使網(wǎng)頁的顯示速度明顯變慢 ， 所以 ， 近期的網(wǎng)頁以及比較著名的訪問量比較大網(wǎng)站一般都不設(shè)置背景圖形 。 鏈接標(biāo)志 網(wǎng)頁上的菜單按鈕有一些是由圖形制作 ， 通常有橫排和豎排兩種形式 ， 由此可以轉(zhuǎn)入不同的頁面 。 鏈接是網(wǎng)頁中一種非常重要的功能 ， 是網(wǎng)頁中最重要 、 最根本的元素之一 。 通過鏈接可以從一個網(wǎng)頁轉(zhuǎn)到另一個網(wǎng)頁 ， 也可以從一個網(wǎng)站轉(zhuǎn)到另一個網(wǎng)站 。 鏈接的標(biāo)志有文字和圖形兩種 。制作一些精美的圖形作為鏈接按鈕 ， 使它和整個網(wǎng)頁融為一體 。 交互功能 Inter區(qū)別其他媒體的一個重要標(biāo)志就是它的交互功能 。 網(wǎng)頁的交互功能其他媒體是無法比擬的 。 通常網(wǎng)頁的交互功能都是利用表單來實現(xiàn)的 。表單是網(wǎng)頁中站點服務(wù)器處理的一組數(shù)據(jù)輸入域 ，當(dāng)訪問者單擊按鈕或圖形來提交表單后 ， 數(shù)據(jù)就會傳送到服務(wù)器上 。 網(wǎng)頁制作和美化工具 HTML（ Hypertext Markup Language） 是一種專門用于 Web頁制作的編程語言 ， 用來描述超文本各個部分的內(nèi)容 ， 告訴瀏覽器如何顯示文本 ， 怎樣生成與別的文本或圖像的鏈接點 。 HTML文檔由文本 、 格式化代碼和導(dǎo)向其他文檔的超鏈接組成 。 網(wǎng)頁制作工具 1． 超文本標(biāo)識語言 （ HTML） Dreamweaver是由 Macromedia公司推出的一款在網(wǎng)頁制作方面大眾化的軟件 ， 它具有可視化編輯界面 ， 用戶不必編寫復(fù)雜的 HTML源代碼就可以生成跨平臺 、 跨瀏覽器的網(wǎng)頁 ， 不僅適合于專業(yè)網(wǎng)頁編輯人員的需要 ， 同時也容易被業(yè)余網(wǎng)友們所掌握 。 Dreamweaver支持動態(tài) HTML， 并采用了Roundtrip HTML技術(shù) ， Dreamweaver是一種可以滿足多層次需求 、 功能強大的可視化專業(yè)級網(wǎng)頁設(shè)計及制作工具 。 2． Dreamweaver FrontPage是由 Microsoft公司推出的新一代Web網(wǎng)頁制作工具 。 FrontPage使網(wǎng)頁制作者能夠更加方便 、 快捷地創(chuàng)建和發(fā)布網(wǎng)頁 ， 具有直觀的網(wǎng)頁制作和管理方法 ， 簡化了大量工作 。 FrontPage界面與 Word、 PowerPoint等軟件的界面極為相似 ， 為使用者帶來了極大的方便 ，Microsoft公司將 FrontPage封裝入 Office之中 ， 成為 Office家族的一員 ， 使之功能更為強大 。 3． FrontPage Photoshop是由 Adobe公司開發(fā)的圖形處理軟件 ，它是目前公認(rèn)的 PC機上最好的通用平面美術(shù)設(shè)計軟件 ， 它功能完善 、 性能穩(wěn)定 、 使用方便 ， 所以在幾乎所有的廣告 、 出版 、 軟件公司 ， Photoshop都是首選的平面制作工具 。 網(wǎng)頁美化工具 1． Photoshop Fireworks是由 Macromedia公司開發(fā)的圖形處理工具 ， 它的出現(xiàn)使 Web作圖發(fā)生了革命性的變化 。 因為 Fireworks是第一套專門為制作網(wǎng)頁圖形而設(shè)計的軟件 ， 同時也是專業(yè)的網(wǎng)頁圖形設(shè)計及制作的解決方案 。 作為一個圖像處理軟件 ， Fireworks能夠自由地導(dǎo)入多種格式的圖像進行處理 。 Fireworks還能夠自動切割圖像 、 生成光標(biāo)動態(tài)感應(yīng)的 JavaScript程序等等 ， 而且 Fireworks具有強大的動畫功能和一個相當(dāng)完美的網(wǎng)絡(luò)圖像生成器 。 2． Fireworks Flash是美國 Macromedia公司開發(fā)的矢量圖形編輯和動畫創(chuàng)作的專業(yè)軟件 ， 它是一種交互式動畫設(shè)計工具 ， 用它可以將音樂 、 聲效 、 動畫以及富有新意的界面融合在一起 ， 以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果 。它主要應(yīng)用于網(wǎng)頁設(shè)計和多媒體創(chuàng)作等領(lǐng)域 ， 功能十分強大和獨特 ， 已成為交互式矢量動畫的標(biāo)準(zhǔn) ， 在網(wǎng)上非常流行 。 Flash廣泛應(yīng)用于網(wǎng)頁動畫制作 、 教學(xué)動畫演示 、 網(wǎng)上購物 、 在線游戲等的制作中 。 3． Flash 網(wǎng)頁制作的基本步驟 網(wǎng)站 定位要小 ， 內(nèi)容要精 。 如果要制作一個包羅萬象的站點 ， 把所有精彩的東西都放在上面 ， 結(jié)果往往會事與愿違 ， 給人的感覺是沒有主題 ， 沒有特色 ， 樣樣有 ， 卻樣樣都很膚淺 。 網(wǎng)站的題材最好選自己擅長或者喜愛的內(nèi)容 。興趣是制作網(wǎng)站的動力 ， 沒有熱情 ， 很難設(shè)計制作出優(yōu)秀的網(wǎng)站 。 網(wǎng)站定位 進行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設(shè)計其結(jié)構(gòu) 。 組織網(wǎng)站的內(nèi)容可以從兩個角度來考慮 。 從設(shè)計者的角度來考慮 ， 可以依據(jù)被描述對象的組織機構(gòu) 、類別劃分等來組織內(nèi)容；從瀏覽者的角度來考慮 ，就應(yīng)該將各種素材依據(jù)瀏覽者的需要進行內(nèi)容分類 ，以便瀏覽者可以快捷地獲取所需要的信息及其相關(guān)內(nèi)容 。 整體規(guī)劃 合理的結(jié)構(gòu)設(shè)計對于網(wǎng)站的規(guī)劃也是至關(guān)重要的 。以下是三種常用的結(jié)構(gòu)類型 。 ① 層狀結(jié)構(gòu) 層狀結(jié)構(gòu)類似于目錄系統(tǒng)的樹型結(jié)構(gòu) ， 主 頁 頁面 1 頁面 2 頁面 3 頁面 4 頁面 5 頁面 6 頁面 7 一級標(biāo)題 二級標(biāo)題 主 頁 頁 面 1 頁 面 2 頁 面 3 ② 線性結(jié)構(gòu) 線性結(jié)構(gòu)類似于數(shù)據(jù)結(jié)構(gòu)中的線性表 ， 用于組織本身的線性順序形式存在的信息 ， 可以引導(dǎo)瀏覽者按部就班地瀏覽整個網(wǎng)站文件 。 主 頁 頁面 1 頁面 2 頁面 3 頁面 4 頁面 5 頁面 7 頁面 8 一級標(biāo)題 二級標(biāo)題 頁面 6 ③ Web結(jié)構(gòu) Web結(jié)構(gòu)類似于 Inter的組成結(jié)構(gòu) ， 各網(wǎng)頁之間形成網(wǎng)狀連接 ， 允許用戶隨意瀏覽 。 通常在進行網(wǎng)頁開發(fā)時 ， 首先都進行靜態(tài)網(wǎng)頁的制作 ， 然后再在其中加入腳本程序 、 表單等動態(tài)內(nèi)容 。 靜態(tài)網(wǎng)頁僅僅用來被動地發(fā)布信息 ， 而不具有任何交互功能 ， 它是 Web網(wǎng)頁的重要組成部分 。 一個好的網(wǎng)站首先是內(nèi)容豐富 ， 其次就是網(wǎng)頁設(shè)計美觀 。 對于網(wǎng)頁的外觀設(shè)計 ， 提供以下建議： （ 1） 不要先決定網(wǎng)頁的外觀 ， 然后迫使自己去適應(yīng)它 ， 應(yīng)該根據(jù)網(wǎng)站的訪問者對象 、 要提供的信息以及制作目標(biāo)得出一個最適合的網(wǎng)頁架構(gòu) 。 網(wǎng)頁設(shè)計與制作 1． 靜態(tài)網(wǎng)頁的設(shè)計與制作 （ 2） 每頁排版不要太松散或用太大的字 ， 盡量避免訪問者瀏覽網(wǎng)頁時要作大幅度的滾動 ， 對于篇幅太長的一頁可以使用內(nèi)部鏈接解決 。 （ 3） 切勿以 800 600以上的分辨率設(shè)計網(wǎng)頁 ，常用的分辨率是 640 480及 800 600。 現(xiàn)在國內(nèi)的站點基本上都是 800 600， 但是如果主要是面向國外訪問者的站點 ， 建議使用 640 480。 （ 4） 不應(yīng)在每頁中插入太多的廣告 。 相信任何訪問者都不會喜歡瀏覽盡是些廣告的網(wǎng)頁 ， 要考慮該頁內(nèi)容與廣告的比例 ， 廣告太多 ， 只會令人煩厭 。 （ 5） 不要每頁都采用不同的墻紙 ， 以免每次轉(zhuǎn)頁時都要花費過多的時間去下載 。 （ 6） 底色或墻紙必須與文字對比強烈 ， 以易于閱讀 。 如果網(wǎng)頁是文章式或是包含大量文字 ， 不妨在底色與文字的搭配上下些工夫 ， 力求讓訪問者能夠舒適地閱讀網(wǎng)頁 。 （ 7） 不要把圖片白色當(dāng)作透明 ， 要知道別人的系統(tǒng)不一定把內(nèi)定底色設(shè)為白色 ， 解決的辦法除了真的把該網(wǎng)頁的底色設(shè)為白色之外 ， 最好還是用圖片編輯工具將圖片設(shè)為透明顏色 。 靜態(tài)網(wǎng)頁制作完成后 ， 接下來的工作就是為網(wǎng)頁添加動態(tài)效果 ， 包括一些腳本語言程序和數(shù)據(jù)庫程序的設(shè)計 ， 以及加入動畫效果等 。 一個真正的網(wǎng)站 ， 不僅應(yīng)該實現(xiàn)傳統(tǒng)媒體的電子化 ， 給用戶提供需要的內(nèi)容 ， 而且還應(yīng)該做更多的事情 ， 完成比頁面瀏覽更高層次的需求 ， 例如收集信息 、 數(shù)據(jù)傳遞 、 數(shù)據(jù)存儲以及系統(tǒng)維護等 。 2． 為網(wǎng)頁的添加動態(tài)效果 當(dāng)網(wǎng)頁設(shè)計人員制作完所有網(wǎng)站頁面之后 ， 需要對所設(shè)計的網(wǎng)頁進行審查和測試 ， 測試內(nèi)容包括功能性測試和完整性測試兩個方面 。 所謂功能性測試就是要保證網(wǎng)頁的可用性 ， 達到最初的內(nèi)容組織設(shè)計目標(biāo) ， 實現(xiàn)所規(guī)定的功能 ， 讀者可方便快速地尋找到所需的內(nèi)容 。 完整性測試就是保證頁面內(nèi)容顯示正確 ， 鏈接準(zhǔn)確 ， 無差錯無遺漏 。 測試網(wǎng)頁 網(wǎng)頁設(shè)計好 ， 必須把它發(fā)布到互連網(wǎng)上 ， 否則網(wǎng)站形象仍然不能展現(xiàn)出去 。 發(fā)布的服務(wù)器可以是遠程 ， 也可以是本地 ， 但必須支持 ASP， 因為動態(tài)程序是建立在 ASP基礎(chǔ)上的 。 網(wǎng)頁上傳發(fā)布 網(wǎng)站的宣傳和推廣一般有兩種途徑和方法 。 一是通過傳統(tǒng)媒體進行廣告宣傳；另一是利用Inter自身的特點向外宣傳 。 可用來宣傳的傳統(tǒng)媒體包括：電視 、 廣播 、 報紙 、廣告牌