1、網(wǎng)頁制作實用教程,新世紀計算機基礎教育叢書 主編 譚浩強,總 目 錄,第1篇 基礎知識 第1章 概述 第2章 HTML簡介 第2篇 網(wǎng)頁制作 第3章 Dreamweaver使用基礎 第4章 建立基本的網(wǎng)頁 第5章 超 鏈 接 第6章 圖 像,第7章 表 格 第8章 框 架 第9章 表 單 第10章 層、行為和時間線 第11章 管理站點 第3篇 圖像處理 第12章 Fireworks的基本操作 第13章 編輯圖像 第14章 設置圖像的綜合效果 第15章 Web圖像處理,第4篇 動畫制作 第16章 Flash的工作環(huán)境 第17章 繪制圖像 第18章 制作動畫 第19章 動畫的交互與聲音 第20章

2、動畫的導出和發(fā)布,第1篇 基礎知識,第1章 概 述,1.1 網(wǎng)頁的基本概念 1.2 網(wǎng)頁制作的一般過程 1.3 網(wǎng)頁制作工具,1.1 網(wǎng)頁的基本概念,因特網(wǎng)（Internet）是一個世界范圍的計算機互聯(lián)網(wǎng)絡，由各種不同類型和規(guī)模的獨立運行和管理的計算機網(wǎng)絡組成。 網(wǎng)頁是能夠被瀏覽器軟件識別的文件，有時也把用瀏覽器看到的網(wǎng)頁文件的內(nèi)容叫做網(wǎng)頁或頁面。網(wǎng)頁制作就是編寫網(wǎng)頁文件。網(wǎng)頁文件的編輯需要使用一種稱為HTML（hypertext markup language，超文本標記語言）的語言。 瀏覽器是專門用于瀏覽網(wǎng)頁的軟件，如Microsoft的IE、Netscape的Navigator等。當連通

3、Internet，啟動計算機中的瀏覽器后，瀏覽器就會按照地址欄中的地址找到網(wǎng)頁文件并顯示在屏幕上。,瀏覽網(wǎng)頁時，移動鼠標，光標會在某些文字或圖像上顯示為手的形狀，這就是超鏈接，也叫熱點或熱區(qū)，表示單擊該處，可以鏈接到該提示所指的網(wǎng)頁。要在Internet上查找信息，可以通過用鼠標單擊網(wǎng)頁中的超鏈接鏈接到存放在世界各地計算機中的一個個頁面。 一個網(wǎng)頁上不僅包含文字信息，如字、詞等，還包含有圖像、音頻、視頻等多媒體信息，以及可鏈接到其他地方的超鏈接，允許用戶在讀文檔時，從文檔的一個地方跳到另一個地方而不必按部就班地一行行進行。這種形式的文本就稱為超文本。 網(wǎng)頁就是用HTML語言編寫的超文本。,1.

4、2 網(wǎng)頁制作的一般過程,制作網(wǎng)頁如同潑墨作畫，首先要進行構(gòu)思，然后再加以實現(xiàn)。構(gòu)思階段需要考慮以下內(nèi)容。 頁面主題： 本頁面中心問題是什么。 頁面內(nèi)容： 用什么內(nèi)容反映主題，如文字、圖片、聲音、動畫等。 結(jié)構(gòu)布局： 將什么內(nèi)容放在什么地方。 色彩搭配： 彩色頁面如同五彩繽紛的大自然，能給人美的享受，然而色彩搭配必須得當。 概括起來只有兩個原則：一是為讀者提供有用的信息，二是要美觀。如何把反映主題的內(nèi)容按照設計的形式表現(xiàn)給讀者呢？這要借助于一種稱為超文本標記語言的規(guī)則加以實現(xiàn)。,超文本標記語言是一種簡單的代碼系統(tǒng)，利用特定的標記來產(chǎn)生各種特定的效果，比如控制超文本顯示的字體、字號、顏色、位置，加

5、入表格，插入圖像、聲音、超鏈接等。然而由于直接使用HTML制作網(wǎng)頁比較繁瑣，故許多公司開發(fā)出許多軟件來幫助用戶快速編制HTML文檔，如微軟的Frontpage、Macromedia的Dreamweaver等。這些軟件和HTML統(tǒng)稱為網(wǎng)頁制作工具。,1.3 網(wǎng)頁制作工具,HTML作為最基本的網(wǎng)頁編輯語言，能制作出網(wǎng)頁的各種效果。然而只有用瀏覽器打開含有HTML標記的網(wǎng)頁文件時，才能看到設計的效果，而且，它畢竟是一種代碼，網(wǎng)頁制作人員必須記住一些標記。因此，為了使設計網(wǎng)頁更加簡單方便，產(chǎn)生了許多專用的網(wǎng)頁編輯工具，主要分為三大類。,1. HTML代碼編輯工具 這種軟件把各種HTML的標記以按鈕或菜

6、單的形式提供給用戶，當需要加入某種標記時，只需單擊相應的按鈕或菜單，標記就會自動加入到文件中，設計人員只需在標記中間加入自己的文字、圖像、聲音等內(nèi)容。典型的有HomeSite、HotDogProfessional、HTMLedPro、WebEditPRO等，使用這種工具雖然省去了輸入標記的時間，但設計人員仍然必須對各種標記的格式和功能非常熟悉，即使這樣，編輯復雜頁面仍然會顯得繁雜。,2. 所見即所得工具 所謂所見即所得，就是在編輯網(wǎng)頁時看到的效果與使用瀏覽器時看到的效果基本一致，最終保存為HTML型文件，這可給網(wǎng)頁設計人員帶來極大的方便。如果希望建立一個美觀而又不復雜的站點，這種工具比較合適，

7、可以很輕松地制作想要的效果，典型的軟件是Drumbeat和NetObjectFusion。但這種軟件有時并不能完全控制設計效果，也就是說在設計階段看到的與最終在瀏覽器中看到的效果可能不完全一樣，有時即使經(jīng)過多次調(diào)試也不理想，這時還需要對它生成的HTML文件進行編輯。,3. 混合型工具 混合型工具能在所見即所得的工作環(huán)境下完成主要的工作，同時也能切換到一個文本編輯器，對HTML源代碼進行直接的調(diào)整。典型的混合型工具有Macromedia 的Dreamweaver和Microsoft的FrontPage等。 除編輯HTML文件外，制作網(wǎng)頁還需要處理大量的圖像、動畫、聲音文件，因此必須掌握一種圖像處

8、理軟件。典型的圖像處理軟件有Adobe公司的Photoshop、Macromedia公司的Fireworks，典型的動畫軟件有Macromedia公司的Flash，Ulead公司的Cool3D，GIF Animator等。,Dreamweaver是一個所見即所得的網(wǎng)頁編輯器，支持最新的DHTML和CSS標準。使用它的時間線和分層功能，能夠快速創(chuàng)建極具表現(xiàn)力和動感效果的網(wǎng)頁；利用目標瀏覽器檢查特性，可以創(chuàng)建兼容各種平臺和瀏覽器的網(wǎng)頁；利用巡查（roundtrip）技術(shù)，在可視編輯器中進行編輯時，還可以在HTML檢視器中同時看到源代碼的改變情況。Dreamweaver可以生成盡可能少的代碼量，并且

9、不會任意修改其他工具所生成的源代碼，它不僅提供了強大的網(wǎng)頁編輯功能，而且提供了完善的站點管理機制。,Fireworks是一個專業(yè)化的Web圖像設計程序，將位圖圖像和矢量圖形的處理合二為一，可以快速在位圖圖像和矢量圖像兩種編輯狀態(tài)之間切換，避免了啟動多個應用程序的麻煩，可以對矢量圖形應用那些只有在位圖圖像上才能應用的各種技術(shù)。Fireworks不僅可以生成各種格式的靜態(tài)圖像，還可以生成包含HTML和JavaScript（交互網(wǎng)頁編程語言）代碼的動態(tài)圖像和GIF動畫，甚至可以編輯整幅的網(wǎng)頁，因此可以直接生成在網(wǎng)頁制作中常用的各種風格的動態(tài)按鈕和翻轉(zhuǎn)（rollover）圖像，或生成圖像映像熱區(qū)（ho

10、tspot）和切片（slice）。在將圖像導出到網(wǎng)頁中時，F(xiàn)ireworks 會自動將相應的HTML和JavaScript代碼放置到網(wǎng)頁中的正確位置上，從而實現(xiàn)豐富多彩的網(wǎng)頁動態(tài)效果，而用戶不必學習HTML和JavaScript。,Flash是一個精巧的網(wǎng)頁動畫設計軟件，它是一種交互式動畫設計工具，可以將音樂、聲效、動畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果。 Flash提供了許多用于圖形的工具，從而可以創(chuàng)建出具有專業(yè)水準的圖形，也可以借助于導入功能將其他在繪圖或照片編輯程序中創(chuàng)建的美術(shù)作品應用在當前動畫中。關(guān)鍵幀和漸變動畫功能，使得制作動畫非常容易，只需隨意畫兩個圖形（文字、方形或橢圓），也許不會超過一分鐘就可以快速制作出超出想象的動畫。Flash的矢量圖形編輯以及關(guān)鍵幀、符號和漸變動畫的使用，使得所生成的動畫文件非常小，網(wǎng)絡用戶不必等待就可以欣賞到精彩的動畫；即使較大的動畫文件，也可通過流式播放技術(shù)邊播放邊下載動畫，從而緩解了網(wǎng)頁瀏覽者焦急等待的情