網(wǎng)頁設(shè)計基礎(chǔ)第1章網(wǎng)頁設(shè)計基礎(chǔ)隨著Internet的迅速發(fā)展與普及，人們通過瀏覽網(wǎng)頁可方便地獲取信息，并且越來越多的個人、公司、企業(yè)、政府和學(xué)校建立了自己的網(wǎng)站。一個完整的網(wǎng)站并不是由一個單獨的軟件制作而成的，它需要多方面的配合。所以在建立網(wǎng)站之前，首先要了解各種網(wǎng)絡(luò)的基礎(chǔ)知識、網(wǎng)頁制作的技術(shù)，網(wǎng)頁布局、網(wǎng)頁配色，以及涉及的軟件。1.1Internet的基礎(chǔ)知識Internet譯為“因特網(wǎng)”，也稱為國際互聯(lián)網(wǎng)或互聯(lián)網(wǎng)，它是指通過TCP/IP協(xié)議將世界各地的網(wǎng)絡(luò)連接起來實現(xiàn)資源共享，并提供各種應(yīng)用服務(wù)的全球性計算機(jī)網(wǎng)絡(luò)。它是當(dāng)今世界上最大、最流行的計算機(jī)網(wǎng)絡(luò)，是信息社會的基礎(chǔ)，在人類社會的各個領(lǐng)域中起著重大的作用。1.1.1Internet提供的服務(wù)類型Internet擁有不計其數(shù)的網(wǎng)絡(luò)資源，用戶可以在Internet上獲得所需的任何信息。人們最熟悉的常用功能有網(wǎng)絡(luò)信息瀏覽（WWW）、電子郵件（E-mail）、新聞組（NewsGroup）、文件傳輸（FTP）、遠(yuǎn)程登錄（Telnet）、電子公告板（BBS），以及Internet提供的其他豐富多彩的服務(wù)。提示：intranet與Internet是不同的兩個概念。intranet譯為“內(nèi)聯(lián)網(wǎng)”，通常稱為企業(yè)網(wǎng)，是指將Internet的概念與技術(shù)應(yīng)用到企業(yè)內(nèi)部信息管理和交換業(yè)務(wù)中，形成企業(yè)內(nèi)部網(wǎng)絡(luò)。1.1.2萬維網(wǎng)和瀏覽器萬維網(wǎng)（WorldWideWeb，WWW）也可以簡稱為Web、W3、3W等，它是基于“超文本”的信息查詢和信息發(fā)布的系統(tǒng)。Web就是以Internet上眾多的Web服務(wù)器所發(fā)布的相互鏈接的文檔為基礎(chǔ)，組成的一個龐大的信息網(wǎng)，它不僅可以提供文本信息，還可以包括聲音、圖形、圖像以及動畫等多媒體信息，它為用戶提供了圖形化的信息傳播界面——網(wǎng)頁。InternetExplorer（IE）是微軟公司開發(fā)的Web瀏覽器，可以搜索、查看和下載Internet上的各種信息?！俺谋尽笔褂昧艘环N被稱為HTML的文件格式，任由瀏覽者在Web上通過跳轉(zhuǎn)或者“超鏈接”從某一個頁面跳到其他頁面。除了IE瀏覽器外，其他常用的瀏覽器還有Firefox（火狐）瀏覽器、Opera瀏覽器、谷歌瀏覽器（GoogleChrome）等。1.2IP地址和Internet域名網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第1頁。與Internet相連的任何一臺計算機(jī)（稱為主機(jī)）都有唯一的一個網(wǎng)絡(luò)地址，簡稱為IP地址。在Internet中域名可以通過域名系統(tǒng)（DomainNameSystem，DNS）映射為IP地址，方便人們記憶站點。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第1頁。1.2.1IP地址該地址由32位二進(jìn)制數(shù)組成。，該地址就稱為這臺主機(jī)的IP地址。IP地址是在Internet網(wǎng)絡(luò)中為每一臺主機(jī)分配的由32位二進(jìn)制數(shù)組成的唯一標(biāo)識符，例如，某臺主機(jī)的IP地址是00001010010000010101011111011100。為了便于記憶，通常又把32位二進(jìn)制數(shù)分成四個字節(jié)段，每字節(jié)段8位，用小數(shù)點將它們隔開，然后把每一字節(jié)段數(shù)都轉(zhuǎn)換成相應(yīng)的十進(jìn)制數(shù)，稱為點分十進(jìn)制數(shù)。例如，這臺主機(jī)用點分十進(jìn)制數(shù)表示為20。因此，最小的IP地址值為，最大的地址值為55。IP地址又分為A類、B類、C類、D類和E類。常用的有A類（~55）、B類（55~55）、C類（55~55）和D類（55~55）。每一個IP地址包括兩部分：網(wǎng)絡(luò)地址和主機(jī)地址，如圖1-1所示。圖1-1四類IP地址例1-1根據(jù)IP地址判斷其網(wǎng)絡(luò)類別、網(wǎng)絡(luò)地址和主機(jī)地址。若已知主機(jī)的IP地址為33，請確定該主機(jī)所在網(wǎng)絡(luò)的類別、網(wǎng)絡(luò)號及它的主機(jī)號。分析：(1)把四組十進(jìn)制數(shù)轉(zhuǎn)變?yōu)樗淖止?jié)32位的二進(jìn)制數(shù)。四組十進(jìn)制數(shù)33對應(yīng)32位二進(jìn)制數(shù)11001010110001000000000010000101。(2)確定網(wǎng)絡(luò)類別。第一字節(jié)是11001010，則它的前三位進(jìn)制數(shù)為110，所以該主機(jī)所在網(wǎng)絡(luò)的類別是C類。(3)確定網(wǎng)絡(luò)地址。C類網(wǎng)的前三個字節(jié)是它的網(wǎng)絡(luò)地址，即202.196.0。(4)確定主機(jī)地址。C類網(wǎng)的主機(jī)地址是第四字節(jié)，所以它的主機(jī)地址是10000101。結(jié)論：該主機(jī)所在網(wǎng)絡(luò)的類別是C類，網(wǎng)絡(luò)號為201.196.0，主機(jī)號為133。1.2.2域名系統(tǒng)網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第2頁。由于IP地址是數(shù)字標(biāo)識，使用時難以記憶和書寫，因此在IP地址的基礎(chǔ)上又發(fā)展出一種符號化的地址方案，來代替數(shù)字型的IP地址。每一個符號化的地址都與特定的IP地址對應(yīng)，這樣網(wǎng)絡(luò)上的資源訪問起來就容易得多了。這個與網(wǎng)絡(luò)上的數(shù)字型IP地址相對應(yīng)的字符型地址，就被稱為域名。例如，清華大學(xué)的IP地址為00

，對應(yīng)的域名為。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第2頁。對于用戶來說，使用域名比直接使用IP地址方便多了，但對于Internet內(nèi)部數(shù)據(jù)傳輸來說，使用的還是IP地址。域名到IP地址的轉(zhuǎn)換就要通過域名系統(tǒng)來解決。每個組織都有一個域名服務(wù)器，域名服務(wù)器實際上就是裝有域名系統(tǒng)的主機(jī)，在其上面存有該組織所有上網(wǎng)計算機(jī)的域名及其對應(yīng)的IP地址。當(dāng)某個應(yīng)用程序需要將一個計算機(jī)域名翻譯成IP地址時，這個應(yīng)用程序就與域名服務(wù)器建立連接，將計算機(jī)域名發(fā)送給域名服務(wù)器，域名服務(wù)器檢索并把正確的IP地址送回給應(yīng)用程序。下面以清華大學(xué)的域名（）來分析一下域名的構(gòu)成：www是為用戶提供服務(wù)的主機(jī)類型；tsinghua代表清華大學(xué)；edu代表教育科研網(wǎng)；cn代表中國。域名的結(jié)構(gòu)是一種分層次結(jié)構(gòu)，根據(jù)域的大小，從小到大用“.”分隔。按照Internet的組織模式，域名有兩種分類方法：一種是按照機(jī)構(gòu)進(jìn)行分類，如表1-2所示。另一種是按國家和地區(qū)進(jìn)行分類，如cn（中國）、us（美國）、hk（香港）等。表1-1機(jī)構(gòu)域名表1.2.3統(tǒng)一資源定位器客戶機(jī)與Web服務(wù)器的交互是通過超文本傳輸協(xié)議（HTTP）來完成的，用戶要查詢的某一臺Web服務(wù)器是通過統(tǒng)一資源定位器(UniformResourceLocator，URL)來指定的。URL是一個指定因特網(wǎng)或內(nèi)聯(lián)網(wǎng)服務(wù)器中目標(biāo)定位位置的格式化字符串，與在計算機(jī)中根據(jù)指明的路徑查找文件類似，它是在WWW中瀏覽超文本文檔時保證準(zhǔn)確定位的一種機(jī)制。它既可指向本地計算機(jī)硬盤上的某個文件，也可指向Internet上的某一個網(wǎng)頁。也就是說，通過URL可訪問Internet上任何一臺主機(jī)或者主機(jī)上的文件和文件夾。它包含有被訪問資源的類型、服務(wù)器的地址、文件的位置等，也被稱為“網(wǎng)址”。URL一般格式如下：訪問協(xié)議：//主機(jī)域名或IP地址［：端口號］/路徑/文件名1.訪問協(xié)議訪問協(xié)議是指獲取信息的通信協(xié)議，由主機(jī)提供的服務(wù)類型而定。最常用服務(wù)類型如表1-2所示。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第3頁。表1-2常用的服務(wù)類型及特征網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第3頁。2.主機(jī)域名或IP地址主機(jī)域名是要訪問的服務(wù)器的名字服務(wù)器在網(wǎng)絡(luò)中的位置，也可是服務(wù)器的IP地址。3.端口號每種訪問協(xié)議都有默認(rèn)的端口號，通常省略，所有WWW服務(wù)器應(yīng)用程序的默認(rèn)端口號都內(nèi)定為80。4.路徑由零或多個“/”符號隔開的字符串，一般用來表示主機(jī)上的一個目錄或文件地址。注意：Windows系統(tǒng)的主機(jī)不區(qū)分URL大小寫，但是，Unix/Linux系統(tǒng)的主機(jī)區(qū)分大小寫。http：//可省略，有時候www也可省略。1.3網(wǎng)頁瀏覽原理Web技術(shù)經(jīng)歷了重大演變。最早的網(wǎng)頁僅僅是由靜態(tài)文檔構(gòu)成，用戶瀏覽時只能被動接受網(wǎng)頁內(nèi)容。這與傳統(tǒng)媒體相比沒有什么變化。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，不僅可以在網(wǎng)頁中嵌入程序，而且可以在運行過程中向網(wǎng)頁添加動態(tài)內(nèi)容，用戶可以與網(wǎng)頁進(jìn)行交互，實現(xiàn)了全新的媒體形式。

1.3.1靜態(tài)網(wǎng)頁純粹HTML格式的網(wǎng)頁通常被稱為靜態(tài)網(wǎng)頁，即以.htm、.html、.shtml、.xml等為后綴的文檔。在HTML格式的網(wǎng)頁上，也可以出現(xiàn)各種動態(tài)的效果，如.GIF動畫、Flash動畫、JavaScript或VBScript特效等，這些“動態(tài)效果”只是視覺上的，它仍然不具備與客戶端進(jìn)行交互的功能。靜態(tài)網(wǎng)頁的特點簡要歸納如下：靜態(tài)網(wǎng)頁每個頁面都有一個固定的URL，且網(wǎng)頁的URL以.htm、.html、.shtml等常見形式為后綴。網(wǎng)頁內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無論是否有用戶訪問，每個靜態(tài)網(wǎng)頁的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的，也就是說，靜態(tài)網(wǎng)頁是實實在在保存在服務(wù)器上的文件，每個網(wǎng)頁都是一個獨立的文件。靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索。靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息量很大時完全依靠靜態(tài)網(wǎng)頁制作方式比較困難。靜態(tài)網(wǎng)頁的交互性較差，在功能方面有較大的限制。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第4頁。靜態(tài)網(wǎng)頁的瀏覽過程如圖1-2所示。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第4頁。圖1-2靜態(tài)網(wǎng)頁瀏覽過程1.3.2在服務(wù)器端運行的程序、網(wǎng)頁和組件等屬于動態(tài)網(wǎng)頁，它們會隨不同客戶、不同時間返回不同內(nèi)容的網(wǎng)頁。動態(tài)網(wǎng)頁是以.asp、.aspx、.php、.jsp等為后綴的文檔。常用的動態(tài)網(wǎng)頁技術(shù)有ASP、ASP.NET、PHP、JSP等。動態(tài)網(wǎng)頁的特點簡要歸納如下：

動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大減少網(wǎng)站維護(hù)的工作量。采用動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、訂單管理等。

動態(tài)網(wǎng)頁實際上并不是獨立存在于服務(wù)器上的網(wǎng)頁文件，只有當(dāng)用戶請求時，服務(wù)器才會返回一個完整的網(wǎng)頁。

采用動態(tài)網(wǎng)頁的網(wǎng)站在進(jìn)行搜索引擎推廣時需要做一定的技術(shù)處理才能適應(yīng)搜索引擎的要求

網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第5頁。動態(tài)網(wǎng)頁的瀏覽過程如圖1-3所示。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第5頁。圖1-2靜態(tài)網(wǎng)頁瀏覽過程提示：動態(tài)網(wǎng)站也可以采用靜動結(jié)合的原則，適合采用動態(tài)網(wǎng)頁的地方用動態(tài)網(wǎng)頁，如果必要使用靜態(tài)網(wǎng)頁，則可以考慮用靜態(tài)網(wǎng)頁的方法來實現(xiàn)，在同一個網(wǎng)站上，動態(tài)網(wǎng)頁內(nèi)容和靜態(tài)網(wǎng)頁內(nèi)容同時存在也是很常見的事情。

1.3.3網(wǎng)頁制作語言網(wǎng)頁制作語言主要有以下幾種：HTML：是一種利用標(biāo)記（tag）來描述字體、大小、顏色及頁面布局的語言。XML：是一種定義語言，任何人、任何行業(yè)都可以遵循這些法則，定義各種標(biāo)識來描述信息中的所有元素，然后通過一種被稱為分析程序的小型程序進(jìn)行處理，使信息能“自我描述”。ASP：由微軟公司提供的開發(fā)動態(tài)網(wǎng)頁的技術(shù)，提供了VBScript或JavaScript兩種腳本引擎，主要用于網(wǎng)絡(luò)數(shù)據(jù)庫的查詢和管理。ASP.NET：也是微軟公司提供的開發(fā)動態(tài)網(wǎng)頁的技術(shù)，是一種已經(jīng)編譯的、基于.NET環(huán)境，可以使用任何與.NET兼容的語言（如C#、VB.NET）構(gòu)造Web應(yīng)用程序。PHP：是一種在服務(wù)器端運行，在HTML文檔中嵌入的腳本語言。JSP：是一項基于Java語言的動態(tài)網(wǎng)頁技術(shù)標(biāo)準(zhǔn)，為創(chuàng)建可支持跨平臺和Web服務(wù)器的動態(tài)頁面提供了簡潔而有效的工具，并逐漸成為動態(tài)網(wǎng)頁的主流開發(fā)工具。。（6）VRML：用于描述三維的物體及其連接的網(wǎng)頁格式。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第6頁。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第6頁。1.3.4網(wǎng)頁制作軟件一個網(wǎng)頁實際就是一個普通的文本文件，使用最簡單的純文本編輯軟件（如記事本、EditPlus），或者專業(yè)的網(wǎng)頁制作軟件（如Dreamweaver、FrontPage）都可以進(jìn)行編輯制作。表1-3列出了一些常用的網(wǎng)頁編輯軟件、素材制作軟件和常用工具軟件等。表1-3網(wǎng)頁制作常用的軟件用途編輯網(wǎng)頁Dreamweaver、ForntPage圖像編輯制作Fireworks、Photoshop、CorelDraw音樂編輯錄音軟件AudioEditor、GoldWave、CoolEditPro動畫編輯軟件Flash、GIFAnimator、COOL3D屏幕抓圖軟件HySnapDXDeamweaver：Deamweaver是針對專業(yè)網(wǎng)頁設(shè)計師開發(fā)的網(wǎng)頁制作軟件，利用它可以輕松制作出跨平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。由于Deamweaver具有所見所得的優(yōu)點，也非常適合網(wǎng)頁設(shè)計的初學(xué)者。FrontPage：FrontPage是由微軟公司推出的網(wǎng)頁制作工具。它使網(wǎng)頁制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁，具有直觀的網(wǎng)頁制作和管理方法，簡化了大量的工作。Flash：

Flash是一種二維動畫設(shè)計軟件，被大量應(yīng)用于網(wǎng)頁矢量動畫的設(shè)計。由于Flash可以包含動畫、視頻、演示文稿和應(yīng)用程序，并且它的文件非常小，因此Flash目前已經(jīng)成為了Web動畫的標(biāo)準(zhǔn)。Firworks：Firworks是一種創(chuàng)建與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web界面原型的理想工具。Firworks可以用最少的步驟生成最小但是質(zhì)量很高的JPEG和GIF圖像，這些圖像可以直接用于網(wǎng)頁。作為一種為網(wǎng)頁設(shè)計而開發(fā)的圖像處理軟件，F(xiàn)ireworks能夠制作切圖和生成鼠標(biāo)動態(tài)感應(yīng)的JavaScript按鈕，并且具有矢量圖和位圖圖像編輯功能等，這些都是其他網(wǎng)頁圖像處理軟件所不具備的。Photoshop：Photoshop是由Adobe公司開發(fā)的圖形處理軟件，它是目前公認(rèn)的最好的通用平面設(shè)計軟件。Photoshop除了具有圖像處理功能外，還含有許多能讓用戶把圖像有效地保存為Web格式的功能。AudioEditor：AudioEditor是Ulead公司MediaStudioPro6.5中的一個專門進(jìn)行波形文件編輯的軟件。它操作簡單，并允許可視化編輯聲音，并且可以進(jìn)行混音、淡入、淡出、反向、縮減和轉(zhuǎn)換等功能。1.4網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計在設(shè)計網(wǎng)頁之前，應(yīng)該對自己的網(wǎng)站有一個總體的策劃和設(shè)計，明確網(wǎng)站的主題。根據(jù)網(wǎng)站的主題進(jìn)一步設(shè)計網(wǎng)頁的整體風(fēng)格、網(wǎng)頁的色彩搭配、網(wǎng)頁的布局和層次結(jié)構(gòu)等內(nèi)容。1.4.1網(wǎng)站定位網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第7頁。只有確定了網(wǎng)站的主題和瀏覽網(wǎng)頁的對象，才能在網(wǎng)頁內(nèi)容選取、美工設(shè)計、劃分欄目各方面盡力做到合理，并吸引祝更多的眼球。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第7頁。確定了網(wǎng)站的主題和瀏覽群，就可以來創(chuàng)意網(wǎng)站的風(fēng)格了。一個好的創(chuàng)意加上一定基礎(chǔ)的美工，會使網(wǎng)站收到意想不到的效果，大大增加網(wǎng)站的回頭率。風(fēng)格（style）是非常抽象的概念，往往要結(jié)合整個站點來看，而且不同的人的審美觀都不同，對于風(fēng)格的喜好也不同。不管用什么風(fēng)格，風(fēng)格永遠(yuǎn)是為主題服務(wù)的，也就是要讓它做好襯托氣氛的任務(wù)。整體網(wǎng)站應(yīng)該使用統(tǒng)一的風(fēng)格，包括背景顏色、字體顏色大小、導(dǎo)航欄、版權(quán)信息、標(biāo)題、注腳、版面布局，甚至文字說明使用的語氣這些方面都要注意前后一致，或者說前后協(xié)調(diào)。1.4.2網(wǎng)站結(jié)構(gòu)一個網(wǎng)站是由許許多多的網(wǎng)頁組成的，這些網(wǎng)頁的組織方式就是網(wǎng)站的結(jié)構(gòu)。網(wǎng)站的結(jié)構(gòu)可以大致分為三種基本類型：層次結(jié)構(gòu)、線性結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)。層次結(jié)構(gòu)：我們平時看到的一些軟件的在線幫助或者教學(xué)文檔都屬于層次型結(jié)構(gòu)站點，這種網(wǎng)站結(jié)構(gòu)的優(yōu)點是層次分明、結(jié)構(gòu)清晰，訪問者很清楚自己需要尋找的內(nèi)容在什么位置。線性結(jié)構(gòu)：線形結(jié)構(gòu)的站點一般只能確定某個鏈接和下一個鏈接之間的必然聯(lián)系，它們之間是有序的線形排列關(guān)系，就好像一個工廠生產(chǎn)線的工藝流程一樣。這種結(jié)構(gòu)的站點適合用來組織某種流程式的網(wǎng)頁結(jié)構(gòu)。網(wǎng)狀結(jié)構(gòu)：網(wǎng)狀結(jié)構(gòu)也是現(xiàn)在使用最多的一種網(wǎng)站結(jié)構(gòu)，尤其是在大型的門戶站點中，該結(jié)構(gòu)幾乎是無處不在，只要是一個頁面中的內(nèi)容和其他頁面有某種聯(lián)系，就將它們之間制作成超鏈接，訪問者可以在網(wǎng)站中隨意跳轉(zhuǎn)瀏覽。1.4.3網(wǎng)頁布局和網(wǎng)頁1．網(wǎng)頁結(jié)構(gòu)布局網(wǎng)頁結(jié)構(gòu)布局是根據(jù)網(wǎng)頁內(nèi)容結(jié)構(gòu)的劃分來設(shè)計的，最常見的結(jié)構(gòu)布局方式包括國字型，拐角型和左右框架型。（1）國字型網(wǎng)頁布局網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第8頁。國資型也稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等、這種結(jié)構(gòu)是網(wǎng)上最常見的一種結(jié)構(gòu)類型，如圖1-3所示。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第8頁。圖1-3國字型網(wǎng)頁（2）拐角型網(wǎng)頁布局網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第9頁。拐角型結(jié)構(gòu)與國字型結(jié)構(gòu)只是形式上的區(qū)別，其實是很相近的，上面是標(biāo)題和廣告橫幅，接下來的左側(cè)是一窄列鏈接，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息，如圖1-4所示。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第9頁。圖1-4拐角型網(wǎng)頁（3）左右框架型網(wǎng)頁布局網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第10頁。這是一種左右分為兩頁的框架結(jié)構(gòu)，一般左側(cè)是導(dǎo)航鏈接，有時最上面會有一個小的標(biāo)題或標(biāo)志，右側(cè)是正文。很多大型的論壇都是這種結(jié)構(gòu)的，有一些企業(yè)的網(wǎng)站也喜好采用這種結(jié)構(gòu)。這種類型結(jié)構(gòu)清晰，一目了然，如圖1-5所示。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第10頁。圖1-5左右框架網(wǎng)頁2．網(wǎng)頁配色網(wǎng)頁設(shè)計是一種特殊的視覺設(shè)計，它對色彩的依賴性很高，色彩設(shè)計同時還是網(wǎng)站風(fēng)格設(shè)計的決定因素之一。色彩在網(wǎng)頁上是“看得見”的視覺元素。網(wǎng)頁色彩總的應(yīng)用原則應(yīng)用是“總體協(xié)調(diào)，局部對比”，即網(wǎng)頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對比。在色彩的運用上，可以根據(jù)網(wǎng)頁內(nèi)容的需要，分別采用不同的主色調(diào)。因為色彩具有象征性，例如，嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如，軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如，冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對色彩的喜好也存在著較大的差異。充分運用色彩的這些特性，可以使網(wǎng)頁具有深刻的藝術(shù)內(nèi)涵，從而提升網(wǎng)頁的文化品位。下面介紹幾種色彩選配方案：暖色調(diào)：即紅色、橙色、黃色、褐色等色彩的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。冷色調(diào)：即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第11頁。對比色調(diào)，即把色性完全相反的色彩搭配在同一個空間里。例如，紅和綠，黃和紫、橙和藍(lán)等。這種色彩的搭配，可以產(chǎn)生強(qiáng)烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。當(dāng)然，對比色調(diào)如果用得不好，會適得其反，產(chǎn)生俗氣、刺眼的不良效果。這就要把握“大調(diào)和，小對比”的重要原則，即總體的色調(diào)應(yīng)該是統(tǒng)一和諧的，局部的地方可以有一些小的強(qiáng)烈對比。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第11頁。提示：如果是針對特殊人群的網(wǎng)站（如個人網(wǎng)站、兒童網(wǎng)站等），網(wǎng)頁結(jié)構(gòu)布局不一定要完全按照前面介紹的三種形式設(shè)計，可以設(shè)計得更活潑些，能夠突出個性化的特色，網(wǎng)頁的配色也可以更大膽一些，如圖1-6所示。（a）個人網(wǎng)站（b）兒童網(wǎng)站1.4.4網(wǎng)頁圖形和圖像是人們非常樂于接受的信息載體，是網(wǎng)頁中除了文字外最重要的組成部分。一副圖畫可以形象生動地表示大量的信息，具有其他媒體無法比擬的優(yōu)點。圖像在網(wǎng)頁中具有提供信息、展示作品、裝飾網(wǎng)頁、表達(dá)個人情調(diào)和風(fēng)格的作用。因此了解圖形圖像的相關(guān)知識對于網(wǎng)頁設(shè)計是非常必要的。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第12頁。圖形圖像的基本概念網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第12頁。像素記錄圖像的基本單位，也是組成“位圖”的最小單位，像素數(shù)量越多越能夠表現(xiàn)圖像極細(xì)微的部分。例如，800×600=48萬像素。分辨率分辨率指圖像中存儲的信息量。這種分辨率有多種衡量方法，典型的是以每英寸的像素數(shù)（PPI）來衡量。圖像分辨率和圖像尺寸（高寬）的值一起決定文件的大小及輸出的質(zhì)量，該值越大圖像文件所占用的磁盤空間也就越多。圖像分辨率以比例關(guān)系影響著文件的大小，即文件大小與其圖像分辨率的平方成正比。如果保持圖像尺寸不變，將圖像分辨率提高一倍，則其文件大小增大為原來的四倍。（3）圖像圖像是由掃描儀、攝像機(jī)等輸入設(shè)備捕捉實際的畫面產(chǎn)生的數(shù)字圖像，即由像素點陣構(gòu)成的位圖。圖像用數(shù)字任意描述像素點、強(qiáng)度和顏色。描述信息文件存儲量較大，所描述對象在縮放過程中會損失細(xì)節(jié)或產(chǎn)生鋸齒。分辨率和灰度是影響顯示的主要參數(shù)。圖像適用于表現(xiàn)含有大量細(xì)節(jié)（如明暗變化、場景復(fù)雜、輪廓色彩豐富）的對象，如照片、繪圖等，通過圖像軟件可進(jìn)行復(fù)雜圖像的處理以得到更清晰的圖像或產(chǎn)生特殊效果。圖形圖形是指由外部輪廓線條構(gòu)成的矢量圖，即由計算機(jī)繪制的直線、圓、矩形、曲線、圖表等。圖形用一組指令集合來描述圖形的內(nèi)容，如描述構(gòu)成該圖的各種圖元位置維數(shù)、形狀等。描述對象可任意縮放不會失真。適用于描述輪廓不很復(fù)雜，色彩不是很豐富的對象。矢量圖形與分辨率無關(guān)，可對其獨立進(jìn)行移動、縮放、旋轉(zhuǎn)和扭曲等變換，而不會改變其外觀品質(zhì)。提示：圖形和圖像這兩個概念是有區(qū)別的。與圖像不同，在圖形文件中只記錄生成圖的算法和圖上的某些特點，也稱矢量圖。在計算機(jī)還原時，相鄰的特點之間用特定的很多段小直線連接就形成曲線，若曲線是一條封閉的圖形，也可靠著色算法來填充顏色。它最大的優(yōu)點就是容易進(jìn)行移動、壓縮、旋轉(zhuǎn)和扭曲等變換，主要用于表示線框型的圖畫、工程制圖、美術(shù)字等。圖形只保存算法和特征點，所以相對于位圖（圖像）的大量數(shù)據(jù)來說，它占用的存儲空間也較小。但由于每次屏幕顯示時都需要重新計算，故顯示速度沒有圖像快。另外，在打印輸出和放大時，圖形的質(zhì)量較高而點陣圖（圖像）常會發(fā)生失真。顏色模式RGB顏色：RGB顏色模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過對紅(red)、綠(green)、藍(lán)(blue)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的。

RGB色彩模式使用RGB模型為圖像中每一個像素的RGB分量分配一個0~255范圍內(nèi)的強(qiáng)度值。例如，純紅色R值為255，G值為0，B值為0；灰色的R、G、B三個值相等（除了0和255）；白色的R、G、B都為255；黑色的R、G、B都為0。RGB圖像只使用三種顏色，就可以使它們按照不同的比例混合，在屏幕上重現(xiàn)16777216種顏色。網(wǎng)頁設(shè)計基礎(chǔ)全文共14頁，當(dāng)前為第13頁。CMYK顏色：CMYK是一種基于