網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

2017-03-27

31446

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)隨著Internet 的迅速發(fā)展與普及，人們通過(guò)瀏覽網(wǎng)頁(yè)可方便地獲取信息，并且越來(lái)越多的個(gè)人、公司、企業(yè)、政府和學(xué)校建立了自己的網(wǎng)站。一個(gè)完整的網(wǎng)站并不是由一個(gè)單獨(dú)的

第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

隨著Internet 的迅速發(fā)展與普及，人們通過(guò)瀏覽網(wǎng)頁(yè)可方便地獲取信息，并且越來(lái)越多的個(gè)人、公司、企業(yè)、政府和學(xué)校建立了自己的網(wǎng)站。一個(gè)完整的網(wǎng)站并不是由一個(gè)單獨(dú)的軟件制作而成的，它需要多方面的配合。所以在建立網(wǎng)站之前，首先要了解各種網(wǎng)絡(luò)的基礎(chǔ)知識(shí)、網(wǎng)頁(yè)制作的技術(shù)，網(wǎng)頁(yè)布局、網(wǎng)頁(yè)配色，以及涉及的軟件。

1.1 Internet 的基礎(chǔ)知識(shí)

Internet 譯為“因特網(wǎng)”，也稱為國(guó)際互聯(lián)網(wǎng)或互聯(lián)網(wǎng)，它是指通過(guò)TCP/IP協(xié)議將世界各地的網(wǎng)絡(luò)連接起來(lái)實(shí)現(xiàn)資源共享，并提供各種應(yīng)用服務(wù)的全球性計(jì)算機(jī)網(wǎng)絡(luò)。它是當(dāng)今世界上最大、最流行的計(jì)算機(jī)網(wǎng)絡(luò)，是信息社會(huì)的基礎(chǔ)，在人類社會(huì)的各個(gè)領(lǐng)域中起著重大的作用。

1.1.1 Internet 提供的服務(wù)類型 Internet 人們最E-mail ）、新聞組（News Group ）、文件傳輸（FTP ）），以及Internet 提供的其他豐富intranet 譯為“內(nèi)聯(lián)網(wǎng)”，通常稱為企業(yè)網(wǎng)，是指將

1.1.2

，WWW ）也可以簡(jiǎn)稱為Web 、W3、3W 等，它是基于“超文本”的信息查詢和信息發(fā)布的系統(tǒng)。Web 就是以Internet 上眾多的Web 服務(wù)器所發(fā)布的相互鏈接的文檔為基礎(chǔ)，組成的一個(gè)龐大的信息網(wǎng)，它不僅可以提供文本信息，還可以包括聲音、圖形、圖像以及動(dòng)畫(huà)等多媒體信息，它為用戶提供了圖形化的信息傳播界面——網(wǎng)頁(yè)。

Internet Explorer（IE ）是微軟公司開(kāi)發(fā)的Web 瀏覽器，可以搜索、查看和下載Internet 上的各種信息?！俺谋尽笔褂昧艘环N被稱為HTML 的文件格式，任由瀏覽者在Web 上通過(guò)跳轉(zhuǎn)或者“超鏈接”從某一個(gè)頁(yè)面跳到其他頁(yè)面。除了IE 瀏覽器外，其他常用的瀏覽器還有Firefox （火狐）瀏覽器、Opera 瀏覽器、谷歌瀏覽器（Google Chrome）等。

1.2 IP 地址和Internet 域名

與Internet 相連的任何一臺(tái)計(jì)算機(jī)（稱為主機(jī)）都有唯一的一個(gè)網(wǎng)絡(luò)地址，簡(jiǎn)稱為IP 地址。在Internet 中域名可以通過(guò)域名系統(tǒng)（Domain Name System，DNS ）映射為IP 地址，本課程由揚(yáng)州seo 提供：http://www.seo-yz.com 第 1 頁(yè) 共 14 頁(yè)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

方便人們記憶站點(diǎn)。

1.2.1 IP地址

該地址由32位二進(jìn)制數(shù)組成。，該地址就稱為這臺(tái)主機(jī)的IP 地址。

IP 地址是在Internet 網(wǎng)絡(luò)中為每一臺(tái)主機(jī)分配的由32位二進(jìn)制數(shù)組成的唯一標(biāo)識(shí)符，例如，某臺(tái)主機(jī)的IP 地址是00001010 01000001 01010111 11011100。為了便于記憶，通常又把32位二進(jìn)制數(shù)分成四個(gè)字節(jié)段，每字節(jié)段8位，用小數(shù)點(diǎn)將它們隔開(kāi)，然后把每一字節(jié)段數(shù)都轉(zhuǎn)換成相應(yīng)的十進(jìn)制數(shù)，稱為點(diǎn)分十進(jìn)制數(shù)。例如，這臺(tái)主機(jī)用點(diǎn)分十進(jìn)制數(shù)表示為10.65.87.220。

因此，最小的IP 地址值為0.0.0.0，最大的地址值為255.255.255.255。IP 地址又分為A 類、B 類、C 類、D 類和E 類。常用的有A 類（0.0.0.0~127.255.255.255）、B 類（128.255.255.255~191.255.255.255）、C 類（192.255.255.255~223.255.255.255）和D 類（224.255.255.255~239.255.255.255）。每一個(gè)IP 地址包括兩部分：網(wǎng)絡(luò)地址和主機(jī)地址，如圖1-1所示。

IP 地址

例

202.196.0.133，請(qǐng)確定該主機(jī)所在網(wǎng)絡(luò)的類別、網(wǎng)絡(luò)號(hào)及它的分析：

(1) 把四組十進(jìn)制數(shù)轉(zhuǎn)變?yōu)樗淖止?jié)32位的二進(jìn)制數(shù)。四組十進(jìn)制數(shù)202.196.0.133對(duì)應(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)的前三個(gè)字節(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ò)號(hào)為201.196.0，主機(jī)號(hào)為133。

本課程由揚(yáng)州seo 提供：http://www.seo-yz.com 第 2 頁(yè) 共 14 頁(yè)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

1.2.2 域名系統(tǒng)

由于IP 地址是數(shù)字標(biāo)識(shí)，使用時(shí)難以記憶和書(shū)寫(xiě)，因此在IP 地址的基礎(chǔ)上又發(fā)展出一種符號(hào)化的地址方案，來(lái)代替數(shù)字型的IP 地址。每一個(gè)符號(hào)化的地址都與特定的IP 地址對(duì)應(yīng)，這樣網(wǎng)絡(luò)上的資源訪問(wèn)起來(lái)就容易得多了。這個(gè)與網(wǎng)絡(luò)上的數(shù)字型IP 地址相對(duì)應(yīng)的字符型地址，就被稱為域名。例如，清華大學(xué)的IP 地址為166.111.4.100 ，對(duì)應(yīng)的域名為www.tsinghua.edu.cn 。

對(duì)于用戶來(lái)說(shuō)，使用域名比直接使用IP 地址方便多了，但對(duì)于Internet 內(nèi)部數(shù)據(jù)傳輸來(lái)說(shuō)，使用的還是IP 地址。域名到IP 地址的轉(zhuǎn)換就要通過(guò)域名系統(tǒng)來(lái)解決。每個(gè)組織都有一個(gè)域名服務(wù)器，域名服務(wù)器實(shí)際上就是裝有域名系統(tǒng)的主機(jī)，在其上面存有該組織所有上網(wǎng)計(jì)算機(jī)的域名及其對(duì)應(yīng)的IP 地址。當(dāng)某個(gè)應(yīng)用程序需要將一個(gè)計(jì)算機(jī)域名翻譯成IP 地址時(shí)，這個(gè)應(yīng)用程序就與域名服務(wù)器建立連接，將計(jì)算機(jī)域名發(fā)送給域名服務(wù)器，域名服務(wù)器檢索并把正確的IP 地址送回給應(yīng)用程序。

下面以清華大學(xué)的域名（www.tup.tsinghua.edu.cn ）來(lái)分析一下域名的構(gòu)成：

www 是為用戶提供服務(wù)的主機(jī)類型；tsinghua 代表清華大學(xué)；edu 代表教育科研網(wǎng)；cn 代表中國(guó)。域名的結(jié)構(gòu)是一種分層次結(jié)構(gòu)，根據(jù)域的大小，從小到大用“. ”分隔。

按照Internet 1-2所示。另一種是按國(guó)家和地區(qū)進(jìn)行分類，如cn （中國(guó)）

表1-1

1.2.3 統(tǒng)一資源定位器

客戶機(jī)與Web 服務(wù)器的交互是通過(guò)超文本傳輸協(xié)議（HTTP ）來(lái)完成的，用戶要查詢的某一臺(tái)Web 服務(wù)器是通過(guò)統(tǒng)一資源定位器(Uniform Resource Locator，URL) 來(lái)指定的。URL 是一個(gè)指定因特網(wǎng)或內(nèi)聯(lián)網(wǎng)服務(wù)器中目標(biāo)定位位置的格式化字符串，與在計(jì)算機(jī)中根據(jù)指明的路徑查找文件類似，它是在WWW 中瀏覽超文本文檔時(shí)保證準(zhǔn)確定位的一種機(jī)制。它既可指向本地計(jì)算機(jī)硬盤(pán)上的某個(gè)文件，也可指向Internet 上的某一個(gè)網(wǎng)頁(yè)。也就是說(shuō)，通過(guò)URL 可訪問(wèn)Internet 上任何一臺(tái)主機(jī)或者主機(jī)上的文件和文件夾。它包含有被訪問(wèn)資源的類型、服務(wù)器的地址、文件的位置等，也被稱為“網(wǎng)址”。URL 一般格式如下：

訪問(wèn)協(xié)議：//主機(jī)域名或IP 地址［：端口號(hào)］/路徑/文件名

1. 訪問(wèn)協(xié)議

本課程由揚(yáng)州seo 提供：http://www.seo-yz.com 第 3 頁(yè) 共 14 頁(yè)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

訪問(wèn)協(xié)議是指獲取信息的通信協(xié)議，由主機(jī)提供的服務(wù)類型而定。最常用服務(wù)類型如表1-2所示。

表1-2 常用的服務(wù)類型及特征

2. 主機(jī)域名或IP 地址

主機(jī)域名是要訪問(wèn)的服務(wù)器的名字服務(wù)器在網(wǎng)絡(luò)中的位置，也可是服務(wù)器的IP 地址。

3. 端口號(hào)

每種訪問(wèn)協(xié)議都有默認(rèn)的端口號(hào)，通常省略，所有WWW 服務(wù)器應(yīng)用程序的默認(rèn)端口號(hào)都內(nèi)定為80。

4. 路徑

由零或多個(gè)“/ 注意： Windows 系統(tǒng)的主機(jī)不區(qū)分 URL 系統(tǒng)的主機(jī)區(qū)分大小寫(xiě)。http ：//1.3 Web 用戶瀏覽時(shí)只能被動(dòng)接隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，不僅可以在網(wǎng)頁(yè)中嵌用戶可以與網(wǎng)頁(yè)進(jìn)行交互，實(shí)現(xiàn)了全1.3.1 靜態(tài)網(wǎng)頁(yè)

純粹HTML 格式的網(wǎng)頁(yè)通常被稱為靜態(tài)網(wǎng)頁(yè)，即以.htm 、.html 、.shtml 、.xml 等為后綴的文檔。在HTML 格式的網(wǎng)頁(yè)上，也可以出現(xiàn)各種動(dòng)態(tài)的效果，如.GIF 動(dòng)畫(huà)、Flash 動(dòng)畫(huà)、JavaScript 或VBScript 特效等，這些“動(dòng)態(tài)效果”只是視覺(jué)上的，它仍然不具備與客戶端進(jìn)行交互的功能。

靜態(tài)網(wǎng)頁(yè)的特點(diǎn)簡(jiǎn)要?dú)w納如下：

● 靜態(tài)網(wǎng)頁(yè)每個(gè)頁(yè)面都有一個(gè)固定的URL ，且網(wǎng)頁(yè)的URL 以.htm 、.html 、.shtml 等

常見(jiàn)形式為后綴。

● 網(wǎng)頁(yè)內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無(wú)論是否有用戶訪問(wèn)，每個(gè)靜態(tài)網(wǎng)頁(yè)的內(nèi)容都

是保存在網(wǎng)站服務(wù)器上的，也就是說(shuō)，靜態(tài)網(wǎng)頁(yè)是實(shí)實(shí)在在保存在服務(wù)器上的文件，每個(gè)網(wǎng)頁(yè)都是一個(gè)獨(dú)立的文件。

本課程由揚(yáng)州seo 提供：http://www.seo-yz.com 第 4 頁(yè) 共 14 頁(yè)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

● 靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，因此容易被搜索引擎檢索。

● 靜態(tài)網(wǎng)頁(yè)沒(méi)有數(shù)據(jù)庫(kù)的支持，在網(wǎng)站制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息

量很大時(shí)完全依靠靜態(tài)網(wǎng)頁(yè)制作方式比較困難。

● 靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制。

靜態(tài)網(wǎng)頁(yè)的瀏覽過(guò)程如圖1-2所示。

圖1-2 1.3.2 動(dòng)態(tài)網(wǎng)頁(yè)

它們會(huì)隨不同客戶、不同時(shí)間返.php 、.jsp 等為后綴的文檔。常用的動(dòng)態(tài)網(wǎng) ●

● 如用戶注冊(cè)、用戶登錄、在線調(diào)查、

用戶管理、訂單管理等。

● 動(dòng)態(tài)網(wǎng)頁(yè)實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁(yè)文件，只有當(dāng)用戶請(qǐng)求時(shí)，服務(wù)

器才會(huì)返回一個(gè)完整的網(wǎng)頁(yè)。

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

引擎的要求

動(dòng)態(tài)網(wǎng)頁(yè)的瀏覽過(guò)程如圖1-3所示。

本課程由揚(yáng)州seo 提供：http://www.seo-yz.com 第 5 頁(yè) 共 14 頁(yè)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

圖1-2 靜態(tài)網(wǎng)頁(yè)瀏覽過(guò)程

提示：動(dòng)態(tài)網(wǎng)站也可以采用靜動(dòng)結(jié)合的原則，如果必要使用靜態(tài)網(wǎng)頁(yè)，動(dòng)態(tài)網(wǎng)頁(yè)內(nèi)

1.3.3

（1tag ）來(lái)描述字體、大小、顏色及頁(yè)面布局的語(yǔ)言。

（2標(biāo)識(shí)來(lái)描述信息中的所有元素，然后通過(guò)一種被稱為分析程序的小型程序進(jìn)行處理，使信息能“自我描述”。

（3） ASP ：由微軟公司提供的開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，提供了VBScript 或JavaScript

兩種腳本引擎，主要用于網(wǎng)絡(luò)數(shù)據(jù)庫(kù)的查詢和管理。

（4） ASP .NET ：也是微軟公司提供的開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，是一種已經(jīng)編譯的、

基于.NET 環(huán)境，可以使用任何與.NET 兼容的語(yǔ)言（如C#、VB.NET ）構(gòu)造Web 應(yīng)用程序。

（5） PHP ：是一種在服務(wù)器端運(yùn)行，在HTML 文檔中嵌入的腳本語(yǔ)言。

（6） JSP ：是一項(xiàng)基于Java 語(yǔ)言的動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)標(biāo)準(zhǔn)，為創(chuàng)建可支持跨平臺(tái)和

Web 服務(wù)器的動(dòng)態(tài)頁(yè)面提供了簡(jiǎn)潔而有效的工具，并逐漸成為動(dòng)態(tài)網(wǎng)頁(yè)的主流開(kāi)發(fā)工具。。

（6）VRML ：用于描述三維的物體及其連接的網(wǎng)頁(yè)格式。

本課程由揚(yáng)州seo 提供：http://www.seo-yz.com 第 6 頁(yè) 共 14 頁(yè)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

1.3.4 網(wǎng)頁(yè)制作軟件

一個(gè)網(wǎng)頁(yè)實(shí)際就是一個(gè)普通的文本文件，使用最簡(jiǎn)單的純文本編輯軟件（如記事本、EditPlus ），或者專業(yè)的網(wǎng)頁(yè)制作軟件（如Dreamweaver 、FrontPage ）都可以進(jìn)行編輯制作。表1-3列出了一些常用的網(wǎng)頁(yè)編輯軟件、素材制作軟件和常用工具軟件等。

表1-3 網(wǎng)頁(yè)制作常用的軟件

（1） Deamweaver ：Deamweaver 是針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師開(kāi)發(fā)的網(wǎng)頁(yè)制作軟件，利用它可

Deamweaver （2） FrontPage ：FrontPage 作。

（3） Flash ： FlashFlash 并且它的文件非常小，因此Flash （4） Web 圖像和快速構(gòu)建網(wǎng)站與Web 界面原型

JPEG 和GIF 圖JavaScript 按鈕，并且具有矢量圖

（5）是由Adobe 公司開(kāi)發(fā)的圖形處理軟件，它是目前公認(rèn)的最

好的通用平面設(shè)計(jì)軟件。Photoshop 除了具有圖像處理功能外，還含有許多能讓用戶把圖像有效地保存為Web 格式的功能。

（6） Audio Editor：Audio Editor是Ulead 公司Media Studio Pro 6.5中的一個(gè)專門(mén)進(jìn)行波

形文件編輯的軟件。它操作簡(jiǎn)單，并允許可視化編輯聲音，并且可以進(jìn)行混音、淡入、淡出、反向、縮減和轉(zhuǎn)換等功能。

1.4 網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)

在設(shè)計(jì)網(wǎng)頁(yè)之前，應(yīng)該對(duì)自己的網(wǎng)站有一個(gè)總體的策劃和設(shè)計(jì)，明確網(wǎng)站的主題。根據(jù)網(wǎng)站的主題進(jìn)一步設(shè)計(jì)網(wǎng)頁(yè)的整體風(fēng)格、網(wǎng)頁(yè)的色彩搭配、網(wǎng)頁(yè)的布局和層次結(jié)構(gòu)等內(nèi)容。本課程由揚(yáng)州seo 提供：http://www.seo-yz.com 第 7 頁(yè) 共 14 頁(yè)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

1.4.1 網(wǎng)站定位

只有確定了網(wǎng)站的主題和瀏覽網(wǎng)頁(yè)的對(duì)象，才能在網(wǎng)頁(yè)內(nèi)容選取、美工設(shè)計(jì)、劃分欄目各方面盡力做到合理，并吸引祝更多的眼球。

確定了網(wǎng)站的主題和瀏覽群，就可以來(lái)創(chuàng)意網(wǎng)站的風(fēng)格了。一個(gè)好的創(chuàng)意加上一定基礎(chǔ)的美工，會(huì)使網(wǎng)站收到意想不到的效果，大大增加網(wǎng)站的回頭率。風(fēng)格（style ）是非常抽象的概念，往往要結(jié)合整個(gè)站點(diǎn)來(lái)看，而且不同的人的審美觀都不同，對(duì)于風(fēng)格的喜好也不同。不管用什么風(fēng)格，風(fēng)格永遠(yuǎn)是為主題服務(wù)的，也就是要讓它做好襯托氣氛的任務(wù)。

整體網(wǎng)站應(yīng)該使用統(tǒng)一的風(fēng)格，包括背景顏色、字體顏色大小、導(dǎo)航欄、版權(quán)信息、標(biāo)題、注腳、版面布局，甚至文字說(shuō)明使用的語(yǔ)氣這些方面都要注意前后一致，或者說(shuō)前后協(xié)調(diào)。

1.4.2 網(wǎng)站結(jié)構(gòu)

一個(gè)網(wǎng)站是由許許多多的網(wǎng)頁(yè)組成的，這些網(wǎng)頁(yè)的組織方式就是網(wǎng)站的結(jié)構(gòu)。網(wǎng)站的結(jié)● 這種網(wǎng)站結(jié)構(gòu)的優(yōu)點(diǎn)是層次分明、結(jié)構(gòu)清晰，位置。

● 線性結(jié)構(gòu)：它們

這種結(jié)構(gòu)的站點(diǎn)● 就將它們之

1.4.3 1網(wǎng)頁(yè)結(jié)構(gòu)布局是根據(jù)網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)的劃分來(lái)設(shè)計(jì)的，最常見(jiàn)的結(jié)構(gòu)布局方式包括國(guó)字型，拐角型和左右框架型。

（1）國(guó)字型網(wǎng)頁(yè)布局

國(guó)資型也稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來(lái)就是網(wǎng)站的主要內(nèi)容，左右分列兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等、這種結(jié)構(gòu)是網(wǎng)上最常見(jiàn)的一種結(jié)構(gòu)類型，如圖1-3所示。

本課程由揚(yáng)州seo 提供：http://www.seo-yz.com 第 8 頁(yè) 共 14 頁(yè)