[學習]網頁設計與制作教程第三版

1、網頁設計與 制作教程（第三版）,普通高等教育“十一五”國家級規(guī)劃教材趙祖蔭 主編,第1章 網頁設計與制作基礎,1.1 Internet基礎1.2 網頁圖像基礎1.3 網頁制作軟件的主要功能和特點1.4 本章小結,,本章重點： Internet基礎知識 網頁圖像基礎 網頁制作套件的主要功能和特點,第1章 網頁設計與制作基礎,1.1.1 Internet與WWW服務計算機網絡，簡單的說，就是用通信線

2、路把若干計算機連起來，再配以適當的軟件和硬件，以達到計算機之間的資源共享和信息交換。Internet的中文名稱是因特網或國際互聯(lián)網，是一個幾乎覆蓋了全世界的計算機網絡。,1.1 Internet基礎,Internet提供的服務主要有萬維網（WWW）服務、電子郵件（E- mail）服務、文件傳輸（FTP）服務、遠程登錄（Telnet）服務和新聞與公告類（Usenet）服務等。 網頁能存放在全球的任何一臺計算機上。所以一旦與WWW連接，

3、用戶就可以使用相同的方式輕松地接收全球任何地方的信息。Internet上鏈接在一起的網頁構成了一個龐大的信息網。,圖1-1 網頁的超文本結構,1.1.2 服務器與客戶機Internet連接著難以計數的計算機，按照功能它們大致可分為服務器和客戶機兩類。服務器是提供資源和服務的計算機。 客戶機是供用戶使用資源和享受服務的計算機。瀏覽者在訪問網頁時，使用的是客戶機。瀏覽器向存放網頁的WWW服務器（經常是在很遠的地方

4、）發(fā)出一個請求；收到請求后，WWW服務器將響應信號和網頁發(fā)送給客戶機。該流程如圖1-2所示。,圖 1-2 客戶機和服務器,客戶機也可以通過瀏覽器將數據信息上傳給WWW服務器的數據庫或者應用程序，還可以利用交互式網頁向服務器的數據庫查詢數據，然后服務器將處理結果以網頁的形式反饋給用戶。,1.1.3 IP地址和域名網絡上的每一臺計算機都必須有IP地址或域名作為其獨一無二的標識，就像我們每個人都有一個身份證號一樣，作為身份的確認。I

5、P地址是Internet上計算機的數字標識。兩臺計算機不能有相同的IP地址。它通常由四個0～255間的十進制整數和中分點構成，例如202.121.80.18、196.2.56.3都是合法的IP地址。,1.1.4 URL和超鏈接Internet是全球最大的信息庫，每個服務器上都有成千上萬的各種資源，那么如何來標識這些資源呢？用于解決這一問題的是統(tǒng)一資源定位器（uniform resource locator簡稱URL）。URL是

6、全球WWW網服務器資源的標準尋址定位編碼，它被用來確定資源的相應位置。URL采用統(tǒng)一的格式： 協(xié)議名://服務器的IP地址或域名/路徑/文件名,1.1.5 HTML語言和網頁制作工具網頁實際上就是一個用超文本標記語言HTML（hyper text markup language）編寫的文本文件，從而把文字、表格、圖像、動畫、聲音和視頻等各種媒體有機地組合在一起。HTML語言能夠運行于各種操作系統(tǒng)。,例如圖1-3所示的網頁

7、的HTML語言源文件為：網頁設計大家學網頁設計大家學,圖 1-3 網頁的例子,1.2 網頁圖像基礎,1.2.1 位圖和矢量圖1. 位圖位圖是由分配了特定位置和顏色值的點(象素)的排列組成。位圖的色彩和色調變化豐富，但占用空間較多。對位圖進行編輯時，處理的實際上是一個個象素。位圖的質量與分辨率有關。如果在屏幕上以較大的倍數放大顯示圖像，在圖像邊緣可能會產生鋸齒。如圖1-4所示，位圖格式的向日葵圖片

8、被放大后與原圖對比有很明顯的馬賽克紋樣。,圖1-4 將位圖格式的局部圖像放大前后的效果對比,2. 矢量圖矢量圖用一組繪圖指令來描述圖像的內容，這些指令根據圖形的幾何特性定義圖形的輪廓，并用顏色進行描邊和填充。矢量圖主要用于表示線框型的圖畫、工程制圖、藝術字等。矢量圖文件的容量較小。矢量圖形和分辨率無關，它們在不同分辨率的輸出設備上顯示效果都相同。圖1-5顯示了將矢量格式的向日葵局部圖像放大前后的實際效果。,圖1-5 將矢

9、量格式的局部圖像放大前后的實際效果。,1.2.2常用圖像格式及其特點圖像格式是指計算機中存儲圖像文件的方法，它們代表不同的圖像信息、色彩數和壓縮程度。圖形圖像處理軟件通常可以處理多種圖像文件格式，每一種圖像格式都有它的特點和用途。在選擇輸出的圖像文件格式時，應考慮圖像的應用目的以及圖像文件格式的特點。,1．BMP圖像文件格式BMP圖像是Microsoft Windows所定義的圖像文件格式，在Windows中運行的圖形圖像軟件都

10、支持BMP圖像格式。BMP圖像文件只能存放一幅圖像，圖像數據有壓縮或不壓縮兩種處理方式。,2．GIF圖像文件格式GIF圖像是一種包含有幀、調色板、優(yōu)化方案等工作信息的位圖格式。最多只支持256種顏色，支持透明色。采用無損壓縮的方法，產生的文件很小。GIF圖像在網絡上使用廣泛。網絡圖像中色彩簡單、內容不很復雜、動畫以及包含透明區(qū)域的圖像比較適合使用該圖像格式。,3. JPEG圖像文件格式JPEG圖像支持多達224種顏色，可以描

11、繪真實場景圖像或顏色豐富、內容細膩的圖像。JPEG圖像采用有損壓縮的方法，圖像質量與采用的壓縮比相關，經過高倍壓縮的JPEG圖像文件比較小，是目前網絡中使用最廣泛的圖像格式之一。,4．PNG圖像文件格式PNG圖像是一種專門針對網絡發(fā)布而開發(fā)的無損壓縮圖像文件格式，可以保存灰度模式、索引顏色模式、圖層、幀等圖像信息，并提供從28到232種顏色的支持，同時支持透明背景和動態(tài)效果。256色的PNG圖像格式具有GIF圖像格式的全部功能，

12、文件大小比GIF圖像格式小。支持224或232種顏色的PNG圖像格式提供高壓縮比的無損圖像壓縮。PNG圖像使用的是高速交替顯示方案，顯示速度很快，只需要下載1/64的圖像信息就可以顯示出低分辨率的預覽圖像。,5．PSD圖像文件格式PSD圖像是著名圖像處理軟件PhotoShop中使用的一種標準圖像文件格式，能夠保存圖像處理的每一個細節(jié)部分，便于圖像的編輯和再處理。,1.2.3 色彩的屬性網頁中的色彩是網頁內容的一種表現(xiàn)，能夠突

13、出地顯示整個網站的風格，給人以視覺沖擊。不同的色彩搭配產生不同的效果，并可能影響到訪問者的情緒。好的色彩搭配具有感染力，同時也具有象征性，所以確定網頁的基準色彩就顯得尤為重要。,1.2.3 色彩的屬性色彩可以分為無彩色和有彩色兩大類。無彩色包括黑、白、灰三種顏色；有彩色包括紅、黃、綠、青、藍、紫等多種顏色。各種色彩都具有明度、色相和純度三種屬性。,1．明度明度是指色彩的明暗程度，任何色彩都有自己的明暗特征。從光譜上可以看到最明亮

14、的顏色是黃色，處于光譜的中心位置。最暗的是紫色，處于光譜的邊緣。一個物體表面的光反射率越大，對視覺的刺激的程度越大，看上去就越亮，這一顏色的明度就越高。因此明度表示顏色的明暗特征，也就是說明度較高的色彩較亮、明度較低的色彩較暗。明度在色彩三要素中可以不依賴于其他性質而單獨存在，任何色彩都可以還原成明度關系來考慮，明度適于表現(xiàn)物體的立體感和空間感。黑白之間可以形成許多明度臺階，人的最大明度層次辨別能力可達200個臺階左右，普通使用

15、的明度標準大都為9級左右。,,圖1-6 色彩明度值由高到低的明度變化過程,2．色相色相是指色彩的相貌，用來區(qū)別色彩種類。紅、黃、藍等色族便就是色相，它們之間的差別屬于色相差別。在應用色彩理論中，通常用色環(huán)來表示色彩系列。最初的基本色相為紅、橙、黃、綠、藍、紫；在各色中間加插中間色后，可制出紅、橙紅、黃橙、黃、黃綠、綠、綠藍、藍綠、藍、藍紫、紫、紅紫十二個基本色相。如果進一步再找出中間色，還可以得到二十四個色相。,3．純度

16、純度是指色彩的鮮艷度、飽和度。比如，紅色中有鮮艷沒有雜質的紅、干澀灰暗的紅以及淡薄的粉紅等，它們的色相都是紅，但卻強弱不一，這說明它們的純度不同。通常色彩純度越高的顏色越鮮艷，純度越低的越灰暗。任何一種色相只要和黑、白、灰中的任意一種混合純度就會降低。比如，和白色相混明度增加純度減弱；和黑色相混明度減弱色相變暗。,1.2.4 RGB色彩模式和Web安全色3物體的顏色，實際上是由物體表面發(fā)出的特定波長的光作用于人的視覺器官而產生的

17、。自然界中的顏色千變萬化、數不勝數，但每種顏色都可以用紅(R)、綠(G)、藍(B)三種色光按一定的比例混合而成，這三種色光被稱為光的三原色。網頁制作中使用最廣泛的是RGB色彩模式的十六進制顯示模式。即用3個00~FF的十六進制數來表示組成顏色的紅、綠、藍色的數值。例如：000000表示黑色， FFFFFF表示白色，00FF00表示紅色，0000FF表示藍色，總共有224種顏色。,1.2.4 RGB色彩模式和Web安全色3在圖像

18、處理軟件中一般都有調色板，用戶可以通過調整RGB的數值選擇所需的顏色。圖1-7是Fireworks 8中的調色板。,圖1-7 Fireworks 8中的調色板,不同的操作系統(tǒng)和瀏覽器可能采用不同的調色板。圖像在網絡發(fā)布后，色彩的顯示可能會受到瀏覽端的操作系統(tǒng)和瀏覽器的影響，同一種顏色也許會在不同的瀏覽端顯示出不同的明度或者色相。我們把在不同的操作系統(tǒng)和瀏覽器中顯示效果一致的216種顏色稱為網絡安全色。辨別一種顏色是否是網絡安全色的

19、方法是看其顏色值，任何由00、33、66、99、CC或者FF組合而成的顏色值都是Web安全色。例如：003366、0066FF、33CC99等。通常在軟件中如圖1-8所示的顏色拾取框中可以直接選取的顏色都是Web安全色,圖1-8 Fireworks 8中的顏色拾取框,1.2.5 圖像元素在網頁中的應用網頁傳達的信息由視覺和聽覺兩種形式組成，目前主要通過視覺進行傳播。網頁的視覺設計過程和其他傳統(tǒng)媒體的視覺設計過程一樣，通過合理的組織

20、文字、圖像和視頻等視覺元素來實現(xiàn)設計效果。圖像是十分重要的網頁組成元素，沒有圖像的網頁往往會顯得單調枯燥。,1.LOGO(標志)LOGO是文字、符號、圖案按照特定的設計理念有機結合的產物。網站的標志(LOGO)和產品的商標—樣，是網站主題和風格的集中體現(xiàn)。2.標題在網頁中可以使用圖像標題或文本標題。文本標題在設計時采用的字體，如果瀏覽端沒有安裝就會被其他字體代替，影響網頁的質量。圖像標題表現(xiàn)形式豐富，可以使用各種圖案，也可以使

21、用各種藝術字，在瀏覽端也不存在字體被替換的問題。,3.照片和插圖照片和插圖是給網頁增強視覺效果的基本工具。它們不僅能夠美化頁面，而且能夠簡潔準確地傳達信息。照片和插圖的選擇取決于站點的內容和風格，還要注意圖片文件不能過大以免用戶下載時間過長。選用JPEG圖像文件有必要的話應進行壓縮，在文件大小和圖片質量間取得平衡。,4.廣告橫幅（Banner）網絡廣告是推廣產品的重要途徑。在網站上做廣告通常有兩種形式，一種是文字鏈接廣告，一種是

22、Banner圖像廣告。圖像廣告能快速醒目地吸引瀏覽者的注意。廣告（Banner）可以有任意大小和形狀。圖像格式也常選擇GIF動畫或Flash動畫。,5.背景網頁的背景是網站整體設計風格的重要體現(xiàn)方法之一。背景可以是單色，也可以是圖像。背景圖像可以是GIF格式，也可以是JPEG格式。這些都取決于整體風格的要求。制作背景時要注意避免喧賓奪主，不能妨礙瀏覽者瀏覽頁面內容。背景圖像一般平鋪在網頁上，圖像尺寸和文件大小都不必也不宜太大

23、。,6.導航欄整個網站會有很多網頁，各網頁之間存在著較為復雜的鏈接關系。導航欄指向網站的關鍵部分，能幫助瀏覽者熟悉網站結構，快速找到想瀏覽的網頁。導航欄有兩種形式：文字式導航和圖像化導航，兩種方法各有所長。文字式導航清楚易懂，下載迅速，適用于信息量大的網站。圖像化導航欄大方美觀，表現(xiàn)力強，適用于一般的商業(yè)網站。也有很多網站把這兩種方法結合使用，同時設立文字式導航和圖像化導航。一個站點中，導航欄的設計應盡可能保持一致，達到站點

24、風格的統(tǒng)一。,1.3 網頁制作軟件的主要功能和特點Macromedia公司的Dreamweaver 8、Fireworks 8、Flash 8三個軟件是優(yōu)秀的網頁制作套件，被許多用戶稱之為網頁制作的夢幻組合，又稱為網頁設計 “三劍客”。Macromedia公司對這三款軟件的功能進行了合理的劃分。如Dreamweaver 8用于對網頁進行整體的布局和設計，以及對網站的創(chuàng)建和管理；Fireworks 8用來繪制和優(yōu)化網頁中所用到的

25、圖像，并可以制作按鈕、導航條和簡單的動畫；Flash 8則主要用于制作網頁中的矢量動畫。綜合使用這套軟件便能夠制作出理想的網頁。下面就來介紹這三款軟件的主要功能和特點。,1.3.1 Fireworks 8 的主要功能和特點Fireworks 8是網絡圖形的處理軟件，它集網頁圖形的創(chuàng)建、編輯、管理于一體，簡化了制作網頁圖形的流程，能生成大小合適而且質量較好的網頁圖形。Fireworks 8具有易學易用、方便快捷、輕巧高效等眾多優(yōu)點，可

26、以快速創(chuàng)建所需的各種網頁圖形。,Fireworks 8 的主要功能和特點（1）Fireworks 8工作環(huán)境與Dreamweaver 8、Flash 8和諧統(tǒng)一，具有相同風格的面板、菜單欄、工具箱等。（2）提供了強大的矢量圖形和位圖圖像的編輯功能，可以直接在位圖圖像和矢量圖像兩者之間進行切換，可以避免圖像在多個應用程序之間轉移。（3）可以快速創(chuàng)建Web導航，由向導程序自動生成圖形和JavaScript代碼，并可以在Dreamwea

27、ver 8 中方便地編輯所生成的圖形文件。,（4）可以進行圖形的熱區(qū)與切片制作，創(chuàng)建復雜的交互動作和GIF動畫文件。（5）輸入輸出功能強大，完全支持HTML、JavaScript和圖像的輸出；允許導入、導出Photoshop文件，支持層的遮罩控制和保持對象各種效果的可編輯性；允許對同一圖形中的不同區(qū)域采用不同級別的壓縮，在保證圖像質量的同時減小文件的體積，有利于圖像在網絡上的傳輸。（6）提供了一個批處理命令環(huán)境，允許設計者快速地創(chuàng)建

28、并執(zhí)行批處理任務。,1.3.2 Flash 8的主要功能和特點Flash 8是制作適合網絡傳輸的流媒體動畫的專用軟件。Flash動畫文件具有體積小、可邊下載邊播放、多媒體交互性等特點，已成為當前制作高壓縮網絡動畫的專業(yè)工具軟件。,Flash 8的主要功能和特點（1）Flash 8與Dreamweaver 8、Fireworks 8有相同風格的快速啟動欄、浮動面板、菜單欄、工具箱等。（2）提供了與Fireworks 8基本相同的繪

29、圖工具，因此對于掌握Fireworks 8的設計者來講，在使用Flash 8的繪圖工具時，基本上不需要再進行重復學習。（3）利用關鍵幀和元件等技術，可以輕而易舉地制作出各類動畫。許多動畫僅需制作開頭和結尾的關鍵幀，就可以由Flash 8自動生成中間的部分，大大減少了設計者的工作量。,（4）提供了層技術，使動畫的各組成部分既分又合，方便了動畫的制作和修改。（5）支持許多圖像、聲音、視頻格式，這些多媒體文件均可以直接導入動畫中，從而使F

30、lash動畫聲像并茂。（6）提供了功能比較完善的ActionScript腳本語言，可以為動畫加入交互效果。在Flash 8中處理的文檔可以保存為Flash 5.0文檔的格式、HTML格式、EXE可執(zhí)行文件格式等多種文件格式。,1.3.3 Dreamweaver 8的主要功能和特點Dreamweaver 8是集網頁制作和網站管理于一身的網頁編輯軟件，是一套針對專業(yè)網頁設計者和開發(fā)者的可視化網頁開發(fā)工具。它具有功能強大、代碼簡潔和操

31、作方便等特點，利用它可以非常輕松地制作出跨越平臺和瀏覽器限制的充滿動感的網頁。,1.網頁制作方面的功能和特點（1）在設計網頁時，浮動面板和選項卡式的文檔窗口在編輯窗口中可隨意移動，這些面板可以組合在一起，也可以折疊或者擴展，并且可以根據需要讓其縮到屏幕一邊，給工作區(qū)增加更大的空間。利用各種浮動面板來調整網頁元素的參數，在不關閉浮動面板的情況下可以直接看到修改的結果，真正實現(xiàn)了所見即所得的功能。（2）可使用HTML標記、HTML樣式、

32、CSS樣式來格式化文本。（3）支持使用表格、布局表格和布局單元格、層、框架來規(guī)劃網頁的布局。（4）支持用時間軸和行為來制作與控制動感網頁。,（5）可使用單選鈕、復選框、列表和文字編輯框制作各種交互式表單，用于信息交流。（6）可以創(chuàng)建批量制作網頁的模板，利用模板來建立風格一致的網頁，將網頁的內容與頁面的設計分開，使得網頁制作更規(guī)范、網站更新更迅速。（7）可以很方便地將Flash、Fireworks、Shockwave、Java和A

33、ctiveX等軟件生成的文件插入到網頁上。（8）Dreamweaver 8可與Macromedia公司出品的其它軟件如Fireworks 8、Flash 8等密切配合，從而更高效地完成網頁制作工作。（9）支持多種瀏覽器，并且可以選擇主要的瀏覽器。（10）支持第三方插件，任何人可以根據自己的需要擴展Dreamweaver 8的功能，并且可以發(fā)布這些插件。,2.網站管理方面的功能和特點（1）在【站點】面板中，可以快速創(chuàng)建、設計、更新

34、和重組網頁，也可以快速瀏覽桌面和網絡上的資源和文件。（2）利用網站管理器能建立、復制和修改網站。（3）使用【站點地圖】可以有效地管理各網頁之間的鏈接關系，改變網頁文件的位置和名稱。可上傳或下載網站的文件，并同步更新站點內容。,1.4本章小結Internet是一個覆蓋幾乎全球的計算機網絡，WWW服務是互聯(lián)網上最為先進、應用最廣、交互性能最好的信息檢索工具，它向人類提供了一個無比豐富的資源庫，網頁是其上主要的資源組織形式。圖像是網