第1章 網(wǎng)頁(yè)制作基礎(chǔ)學(xué)習(xí)目標(biāo)? 了解網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)? 掌握網(wǎng)頁(yè)制作的一般步驟? 掌握網(wǎng)頁(yè)制作的原則和技巧目標(biāo)任務(wù)&項(xiàng)目案例天涯社區(qū)網(wǎng)站首頁(yè)

第1章 網(wǎng)頁(yè)制作基礎(chǔ)

學(xué)習(xí)目標(biāo)

? 了解網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)

? 掌握網(wǎng)頁(yè)制作的一般步驟

? 掌握網(wǎng)頁(yè)制作的原則和技巧

目標(biāo)任務(wù)&項(xiàng)目案例

天涯社區(qū)網(wǎng)站首頁(yè) 淘寶交易網(wǎng)站

郵箱登錄界面 郵箱注冊(cè)頁(yè)面

網(wǎng)絡(luò)以其獨(dú)特的優(yōu)勢(shì)滲入到人們的生活中，并已成為生活的一個(gè)重要組成部分，而網(wǎng)頁(yè)在整個(gè)網(wǎng)絡(luò)中占據(jù)了絕對(duì)的分量，幾乎所有的網(wǎng)絡(luò)活動(dòng)都與網(wǎng)頁(yè)有關(guān)。若想學(xué)習(xí)網(wǎng)頁(yè)制作，需先了解一些網(wǎng)頁(yè)的基本知識(shí)，如網(wǎng)頁(yè)的定義、分類以及網(wǎng)頁(yè)制作的基本步驟和規(guī)則等。本章將講解網(wǎng)頁(yè)制作的基礎(chǔ)知識(shí)，為以后學(xué)習(xí)網(wǎng)頁(yè)制作做好鋪墊。

Dreamweaver 網(wǎng)頁(yè)制作（第2版）

1.1 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)

學(xué)習(xí)網(wǎng)頁(yè)制作應(yīng)先了解網(wǎng)頁(yè)的基本概念，學(xué)好這些知識(shí)是制作出漂亮、美觀的網(wǎng)頁(yè)的前提，為以后的學(xué)習(xí)打好基礎(chǔ)。

1.1.1 網(wǎng)頁(yè)的定義和分類

上網(wǎng)時(shí)瀏覽的一個(gè)個(gè)頁(yè)面就是網(wǎng)頁(yè)，網(wǎng)頁(yè)又稱為Web 頁(yè)，其中的圖像、文

字、超級(jí)鏈接等是構(gòu)成網(wǎng)頁(yè)的基本元素，如圖1-1所示即為榕樹(shù)下網(wǎng)站的首頁(yè)。網(wǎng)頁(yè)可按其在網(wǎng)站中的位置分類，也可按其表現(xiàn)形式分類。下面將分別進(jìn)行講解。

圖1-1 榕樹(shù)下網(wǎng)站首頁(yè)

1．按位置分類

主頁(yè)和內(nèi)頁(yè)，主頁(yè)是指網(wǎng)站的主要導(dǎo)航

頁(yè)面，一般是進(jìn)入網(wǎng)站時(shí)打開(kāi)的第一個(gè)頁(yè)面，也稱為首頁(yè)；內(nèi)頁(yè)是指與主頁(yè)相鏈接的按網(wǎng)頁(yè)在網(wǎng)站中的位置可將其分為頁(yè)面，也就是網(wǎng)站的內(nèi)部頁(yè)面。

提示： 一些網(wǎng)站的首頁(yè)并非主頁(yè)，其作用只是為了歡迎訪問(wèn)者或者引導(dǎo)訪問(wèn)者進(jìn)入主頁(yè)，所以首頁(yè)并不一定就是主頁(yè)。

2

第1章 網(wǎng)頁(yè)制作基礎(chǔ)

2．按表現(xiàn)形式分類

按網(wǎng)頁(yè)的表現(xiàn)形式可將其分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)，具體含義如下。

→ 靜態(tài)網(wǎng)頁(yè)：指用HTML 語(yǔ)言編寫的網(wǎng)頁(yè)，其制作方法簡(jiǎn)單易學(xué)，但缺乏靈活性。

→ 動(dòng)態(tài)網(wǎng)頁(yè)：這類網(wǎng)頁(yè)使用ASP 、PHP 、JSP 和CGI 等程序生成，具有動(dòng)態(tài)效果，

其制作方法較靜態(tài)網(wǎng)頁(yè)復(fù)雜。

注意： 靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)不是以網(wǎng)頁(yè)中是否包含動(dòng)態(tài)元素來(lái)區(qū)分的，而是針對(duì)客戶端與服務(wù)器端是否發(fā)生交互行為而言的。不發(fā)生交互的是靜態(tài)網(wǎng)頁(yè)，發(fā)生交互的是動(dòng)態(tài)網(wǎng)頁(yè)。

1.1.2 網(wǎng)頁(yè)的基本概念

在網(wǎng)頁(yè)制作過(guò)程中常常會(huì)遇到一些專業(yè)名詞，如站點(diǎn)、發(fā)布、瀏覽器、導(dǎo)航條、超級(jí)鏈接、表單、URL 、IP 地址以及域名，需掌握其具體含義才能在網(wǎng)頁(yè)制作過(guò)程中輕松操作。下面分別講解這些專業(yè)名詞。

→ 站點(diǎn)：站點(diǎn)是一個(gè)管理網(wǎng)頁(yè)文檔的場(chǎng)所，簡(jiǎn)單地講，一個(gè)個(gè)網(wǎng)頁(yè)文檔鏈接起來(lái)就

構(gòu)成了站點(diǎn)。站點(diǎn)可以小到一個(gè)網(wǎng)頁(yè)，也可大到一個(gè)網(wǎng)站。

→ 發(fā)布：發(fā)布就是把制作好的網(wǎng)頁(yè)上傳到網(wǎng)絡(luò)中的過(guò)程。

→ 瀏覽器：瀏覽器是一種把互聯(lián)網(wǎng)上的文本文檔和其他類型的文件翻譯成網(wǎng)頁(yè)的軟

件。通過(guò)瀏覽器，可以快捷地連接Internet 。目前使用人數(shù)最多的瀏覽器是Microsoft 公司的IE 瀏覽器，電腦中安裝了操作系統(tǒng)都會(huì)捆綁安裝IE 瀏覽器，如圖1-2所示為IE 瀏覽器打開(kāi)的網(wǎng)頁(yè)。另外，還有很多其他瀏覽器可供用戶安裝使用，如騰訊TT 瀏覽器、火狐瀏覽器、360安全瀏覽器以及

搜狗瀏覽器等。如圖1-3

所示為搜狗瀏覽器打開(kāi)的網(wǎng)頁(yè)。

圖1-2 IE 瀏覽器 圖1-3 搜狗瀏覽器

→ 導(dǎo)航條：導(dǎo)航條就如同一個(gè)網(wǎng)站的路標(biāo)，有了它就不會(huì)在瀏覽網(wǎng)站時(shí)“迷

路”，如圖1-4所示。導(dǎo)航條鏈接著各個(gè)頁(yè)面，只要單擊導(dǎo)航條中的超級(jí)鏈

3

Dreamweaver 網(wǎng)頁(yè)制作（第2版）

接就能進(jìn)入相應(yīng)的頁(yè)面。

圖1-4 導(dǎo)航條

→

→

→

4 超級(jí)鏈接：超級(jí)鏈接在網(wǎng)頁(yè)中起著重要的作用，主要用于將不同頁(yè)面鏈接起來(lái)，鏈接的范圍可以是同一站點(diǎn)內(nèi)的頁(yè)面，也可以是其他網(wǎng)站的頁(yè)面。超級(jí)鏈接主要有文字鏈接和圖像鏈接等，通常將鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)對(duì)象上，如果該對(duì)象是一個(gè)超級(jí)鏈接，鼠標(biāo)指針會(huì)變?yōu)橐粋€(gè)手形，如圖1-5所示。單擊超級(jí)鏈接就能打開(kāi)其指定的目標(biāo)網(wǎng)頁(yè)。

圖1-5 超級(jí)鏈接 表單：表單是具有交互性的動(dòng)態(tài)網(wǎng)頁(yè)，常用于在注冊(cè)網(wǎng)站會(huì)員和申請(qǐng)郵箱等活動(dòng)時(shí)提交用戶信息。如圖1-6所示為申請(qǐng)網(wǎng)易郵箱的表單。

圖1-6 表單頁(yè)面 URL ：URL 是指全球資源定位器，即主要用于指明通信協(xié)議和地址的方式，如http://www.163.com就是一個(gè)完整的URL ?！癶ttp://”形式的URL 用于表示網(wǎng)頁(yè)的Internet 位置，而“ftp//”則用于表示文件傳輸?shù)囊环NURL 形

第1章 網(wǎng)頁(yè)制作基礎(chǔ)

式。

→ IP 地址：IP 地址就是為連接在Internet 上的每一個(gè)主機(jī)分配的一個(gè)32bit 地址，

Internet 上的每臺(tái)主機(jī)的IP 地址都是唯一的，就像生活中的門牌號(hào)，在網(wǎng)絡(luò)中就命名為IP 地址。IP 地址分為A 、B 、C 、D 、E 5類，常用的是B 和C 兩類，如192.168.1.1為一個(gè)C 類IP 地址。

→ 域名：域名就如同是網(wǎng)站的地址，Internet 中任何網(wǎng)站的域名都是全世界唯一的，

所以域名也就是網(wǎng)站的網(wǎng)址，如www.sohu.com 就是搜狐網(wǎng)站的域名。域名是由固定的網(wǎng)絡(luò)域名管理組織在全球進(jìn)行統(tǒng)一管理的，用戶需到各地的網(wǎng)絡(luò)管理機(jī)構(gòu)進(jìn)行申請(qǐng)，申請(qǐng)成功后才能獲取域名，然后將其與網(wǎng)站服務(wù)器的IP 地址綁定，訪問(wèn)者通過(guò)域名就可以訪問(wèn)服務(wù)器中的網(wǎng)頁(yè)了。

5

Dreamweaver 網(wǎng)頁(yè)制作（第2版）

1.1.3 網(wǎng)頁(yè)的基本組成元素

網(wǎng)頁(yè)是由多種元素組成的。文本和圖像是網(wǎng)頁(yè)中最基本的元素，更是網(wǎng)頁(yè)信息的主要載體，它們?cè)诰W(wǎng)頁(yè)中起著非常重要的作用。而其他的很多元素（如超級(jí)鏈接等）都是基于這兩種基本元素而創(chuàng)建的。如圖1-7所示為網(wǎng)頁(yè)中的文本和圖像。

圖1-7 網(wǎng)頁(yè)中的文本和圖像 1．文本

因文本體積小、在網(wǎng)絡(luò)上傳輸速度較快、用戶可以很方便地瀏覽和下載，故成為了網(wǎng)頁(yè)的主要信息載體。網(wǎng)頁(yè)中文本的樣式多變，風(fēng)格不一，吸引人的網(wǎng)頁(yè)通常都具有美觀的文本樣式。文本的樣式可通過(guò)對(duì)網(wǎng)頁(yè)文本的屬性進(jìn)行設(shè)置來(lái)調(diào)整，在后面的章節(jié)將詳細(xì)講解這方面的知識(shí)。

2．圖像

圖像比文本更具有生動(dòng)性和直觀性，它可以傳遞一些文本不能傳載的信息，如網(wǎng)站標(biāo)識(shí)、背景等一般都是圖像。

1.1.4 認(rèn)識(shí)網(wǎng)站

網(wǎng)站是多個(gè)網(wǎng)頁(yè)的集合，按網(wǎng)站內(nèi)容可將網(wǎng)站分為5種類型，即門戶網(wǎng)站、企業(yè)網(wǎng)站、個(gè)人網(wǎng)站、專業(yè)網(wǎng)站和職能網(wǎng)站，下面將分別對(duì)這幾種網(wǎng)站進(jìn)行講解。

→ 門戶網(wǎng)站：門戶網(wǎng)站是一種綜合性網(wǎng)站，涉及領(lǐng)域非常廣泛，包含文學(xué)、音樂(lè)、

影視、體育、新聞和娛樂(lè)等方面的內(nèi)容，且具有論壇、搜索和短信等功能。國(guó)內(nèi)較著名的門戶網(wǎng)站有新浪、搜狐和網(wǎng)易等。

→ 企業(yè)網(wǎng)站：企業(yè)網(wǎng)站是為展現(xiàn)企業(yè)形象和公司產(chǎn)品，以公司名義開(kāi)發(fā)創(chuàng)建的網(wǎng)站，

其內(nèi)容、樣式和風(fēng)格等都為展示企業(yè)自身形象。

→ 個(gè)人網(wǎng)站：個(gè)人網(wǎng)站具有較強(qiáng)的個(gè)性化，是以個(gè)人名義開(kāi)發(fā)創(chuàng)建的網(wǎng)站，以個(gè)性

化為主。

→ 專業(yè)網(wǎng)站：專業(yè)網(wǎng)站具有很強(qiáng)的專業(yè)性，通常只涉及某一個(gè)領(lǐng)域，內(nèi)容專業(yè)。如

榕樹(shù)下網(wǎng)站即是一個(gè)專業(yè)文學(xué)網(wǎng)站，太平洋電腦網(wǎng)是一個(gè)電子產(chǎn)品專業(yè)網(wǎng)站平臺(tái)。

→ 職能網(wǎng)站：職能網(wǎng)站具有專門的功能，如政府職能網(wǎng)站等。目前逐漸興起的電子

商務(wù)網(wǎng)站也屬于這類網(wǎng)站，較有名的電子商務(wù)網(wǎng)站有淘寶網(wǎng)、卓越網(wǎng)和當(dāng)當(dāng)網(wǎng)等。

6

第1章 網(wǎng)頁(yè)制作基礎(chǔ)

1.2 網(wǎng)頁(yè)制作的一般步驟

制作網(wǎng)頁(yè)也是有一定順序和步驟的，在此之前還需要做一些準(zhǔn)備工作。

1.2.1 收集、整理資料

在確定了制作哪方面的網(wǎng)頁(yè)后，需要先收集和整理與網(wǎng)頁(yè)內(nèi)容相關(guān)的文字資料、圖像和動(dòng)畫(huà)素材等。如要制作影視網(wǎng)站，就需收集大量中外影片的信息以及演職人員資料等；要制作公司網(wǎng)站，就需收集公司信息、產(chǎn)品信息和企業(yè)文化等。

1.2.2 規(guī)劃、創(chuàng)建站點(diǎn)

收集好資料后還需對(duì)資料進(jìn)行有效管理，站點(diǎn)就是管理資料的場(chǎng)所。在創(chuàng)建站點(diǎn)之前需對(duì)站點(diǎn)進(jìn)行規(guī)劃，站點(diǎn)的形式有并列、層次和網(wǎng)狀等，用戶需根據(jù)實(shí)際情況選擇。規(guī)劃站點(diǎn)時(shí)，應(yīng)按素材的不同種類分為幾個(gè)站點(diǎn)，再將收集好的素材分類放置在相應(yīng)站點(diǎn)中，然后在不同站點(diǎn)中將不同的素材進(jìn)行細(xì)分。站點(diǎn)規(guī)劃好后即可對(duì)其進(jìn)行網(wǎng)頁(yè)制作了。

1.2.3 制作網(wǎng)頁(yè)

網(wǎng)站是由若干頁(yè)面鏈接而成的。在制作網(wǎng)頁(yè)時(shí)，為了方便瀏覽者輕松瀏覽網(wǎng)站，需注意以下幾個(gè)方面。

→ 頁(yè)面框架的構(gòu)建：頁(yè)面框架的構(gòu)建是指對(duì)網(wǎng)頁(yè)的整體布局，針對(duì)網(wǎng)頁(yè)中的內(nèi)容應(yīng)

將網(wǎng)頁(yè)有條理地劃分為幾部分。

→ 導(dǎo)航條：導(dǎo)航條通常放置在頁(yè)面的上部或左側(cè)并且應(yīng)出現(xiàn)在網(wǎng)站的各個(gè)頁(yè)面中，

提供各個(gè)站點(diǎn)的相關(guān)主題，引導(dǎo)瀏覽者有條理地瀏覽網(wǎng)站。

→ 返回首頁(yè)鏈接：在分頁(yè)頁(yè)面中放置返回首頁(yè)鏈接，以便瀏覽者在訪問(wèn)分頁(yè)面后快

速回到首頁(yè)，并重新選擇其他頁(yè)面進(jìn)行瀏覽。

→ 添加網(wǎng)頁(yè)元素：為網(wǎng)頁(yè)添加相應(yīng)的內(nèi)容，以傳遞網(wǎng)頁(yè)信息給瀏覽者。

1.2.4 站點(diǎn)測(cè)試

在制作好網(wǎng)頁(yè)后，還需對(duì)站點(diǎn)進(jìn)行測(cè)試后才能發(fā)布站點(diǎn)。站點(diǎn)測(cè)試可根據(jù)瀏覽器種類、客戶端要求以及網(wǎng)站大小要求等進(jìn)行，通常是將站點(diǎn)移到一個(gè)模擬調(diào)試服務(wù)器上對(duì)其進(jìn)行測(cè)試或編輯。測(cè)試站點(diǎn)的過(guò)程中應(yīng)注意以下幾方面：

→ 監(jiān)測(cè)頁(yè)面的文件大小以及下載速度。

→ 運(yùn)行鏈接檢查報(bào)告對(duì)鏈接進(jìn)行測(cè)試。由于在網(wǎng)頁(yè)制作中，各站點(diǎn)的重新設(shè)計(jì)、重

新調(diào)整可能會(huì)使某些鏈接所指向的頁(yè)面已被移動(dòng)或刪除，所以應(yīng)檢查站點(diǎn)是否有斷開(kāi)的鏈接，若有則會(huì)自動(dòng)重新修復(fù)斷開(kāi)的鏈接。

→ 為了使頁(yè)面不支持的樣式、層、插件等在瀏覽器中能兼容且功能正常，可進(jìn)行瀏

覽器兼容性的檢查。使用“檢查瀏覽器”行為，可自動(dòng)將訪問(wèn)者定向到另外的頁(yè)

7

Dreamweaver 網(wǎng)頁(yè)制作（第2版）

面，這樣可解決在較早版本的瀏覽器中無(wú)法運(yùn)行頁(yè)面的問(wèn)題。

→ 網(wǎng)頁(yè)布局、字體大小、顏色和默認(rèn)瀏覽器窗口大小等是在目標(biāo)瀏覽器檢查中無(wú)法

預(yù)見(jiàn)的，需在不同的瀏覽器和平臺(tái)上預(yù)覽頁(yè)面進(jìn)行查看。

提示： Dreamweaver 只對(duì)文件的最新保存執(zhí)行檢查，而不檢查未保存的更改，所以對(duì)當(dāng)前文檔運(yùn)行檢查前，應(yīng)先保存文件。通過(guò)站點(diǎn)報(bào)告測(cè)試可解決整個(gè)站點(diǎn)的問(wèn)題，如無(wú)標(biāo)題文檔、空標(biāo)簽以及冗余的嵌套標(biāo)簽等。

1.2.5 網(wǎng)頁(yè)發(fā)布

發(fā)布站點(diǎn)之前需在Internet 上申請(qǐng)一個(gè)主頁(yè)空間，用來(lái)指定網(wǎng)站或主頁(yè)在Internet 上的位置，在后面的章節(jié)中將詳細(xì)講解申請(qǐng)主頁(yè)空間的知識(shí)。

提示：

為提高上傳速度，網(wǎng)頁(yè)發(fā)布通常使用FTP （遠(yuǎn)程文件傳輸）軟件上傳網(wǎng)頁(yè)到服務(wù)器中，也可使用Dreamweaver 或FrontPage 中的發(fā)布站點(diǎn)命令進(jìn)行上傳。

1.2.6 站點(diǎn)的更新與維護(hù)

站點(diǎn)上傳到服務(wù)器后，還需對(duì)站點(diǎn)進(jìn)行定期或不定期的更新和維護(hù)，以保持站點(diǎn)內(nèi)容的最新和頁(yè)面元素的正常。

1.3 網(wǎng)頁(yè)制作的原則和技巧

在制作網(wǎng)站時(shí)還需要注意網(wǎng)頁(yè)制作的原則，并掌握一定的技巧，使網(wǎng)站做得更有水平，下面分別進(jìn)行介紹。

1.3.1 網(wǎng)頁(yè)制作的基本原則

在網(wǎng)頁(yè)制作過(guò)程中需遵循其制作原則，下面將詳細(xì)講解。

→ 整體規(guī)劃網(wǎng)站結(jié)構(gòu)：為能合理安排站點(diǎn)中的各項(xiàng)內(nèi)容，制作網(wǎng)頁(yè)之前需對(duì)整個(gè)站

點(diǎn)進(jìn)行有條理的規(guī)劃。

→ 新穎的站點(diǎn)名稱：名稱對(duì)于網(wǎng)站來(lái)說(shuō)非常重要，有創(chuàng)意的站名能給瀏覽者留下較

深的印象，也有利于網(wǎng)站的宣傳和推廣。給站點(diǎn)取名時(shí)應(yīng)基于簡(jiǎn)潔、好記并且要與站點(diǎn)內(nèi)容相適應(yīng)，此外最好還能給人耳目一新的感覺(jué)。

→ 鮮明的主題：標(biāo)題內(nèi)容不能太長(zhǎng)太復(fù)雜，需簡(jiǎn)單明了。主題內(nèi)容需要醒目搶眼，

具有較強(qiáng)的針對(duì)性。

→ 網(wǎng)頁(yè)的尺寸：為了讓大多數(shù)瀏覽者可正常地瀏覽網(wǎng)頁(yè)，在制作網(wǎng)頁(yè)時(shí)通常需考慮

8

第1章 網(wǎng)頁(yè)制作基礎(chǔ)

→

→

→

→ 滿足800×600像素的顯示屏。使用漂亮的網(wǎng)頁(yè)背景可填充左右兩側(cè)多余的空白空間，可使800×600像素的網(wǎng)頁(yè)在分辨率高的顯示器中也顯得較為美觀。 動(dòng)畫(huà)不能過(guò)多：動(dòng)畫(huà)元素雖能使網(wǎng)頁(yè)更加生動(dòng)，但動(dòng)畫(huà)文件通常較大，若網(wǎng)頁(yè)中動(dòng)畫(huà)過(guò)多則會(huì)降低網(wǎng)頁(yè)的下載速度，造成網(wǎng)頁(yè)打開(kāi)速度變慢甚至不能打開(kāi)的情況，因此網(wǎng)頁(yè)中的動(dòng)畫(huà)不宜過(guò)多。 導(dǎo)航要明朗：網(wǎng)頁(yè)的導(dǎo)航需明確，主頁(yè)導(dǎo)航條中的鏈接項(xiàng)目不宜太多，最好只限于幾個(gè)主要頁(yè)面，通常用6～8個(gè)鏈接比較合適，大型網(wǎng)站可適當(dāng)增加導(dǎo)航鏈接 數(shù)量。 優(yōu)化圖像：網(wǎng)頁(yè)中的圖片太多也會(huì)影響網(wǎng)頁(yè)下載的速度。可以對(duì)網(wǎng)頁(yè)中的圖片進(jìn)行優(yōu)化，在圖片大小和顯示質(zhì)量?jī)蓚€(gè)方面取得一個(gè)平衡，網(wǎng)頁(yè)中的圖像最好保持在10KB 以下。 定期更新網(wǎng)站：定期更新頁(yè)面內(nèi)容或更改主頁(yè)的樣式，讓瀏覽者對(duì)網(wǎng)站保持一種

新鮮感，以保持較高的瀏覽率。

1.3.2 網(wǎng)頁(yè)基本元素的標(biāo)準(zhǔn)及使用技巧

一個(gè)完整的網(wǎng)站都有Logo 、Banner 、文本、圖像、導(dǎo)航欄和按鈕等網(wǎng)頁(yè)元素，這些元素被稱為網(wǎng)頁(yè)的基本元素。下面分別進(jìn)行講解。

1．Logo

Logo 即網(wǎng)站的標(biāo)志，其制作要點(diǎn)如下：

→ Logo 的位置通常位于網(wǎng)頁(yè)的左上角，也可根據(jù)需要將其置于其他任何位置，一般

需保證Logo 醒目，讓瀏覽者能很快看到。

→ 站點(diǎn)的Logo 雖然有動(dòng)態(tài)的，但不是所有的站點(diǎn)都適宜用動(dòng)態(tài)Logo ，且動(dòng)態(tài)Logo

的動(dòng)作頻率也不能太大，否則可能會(huì)適得其反。

2．Banner

Banner 即網(wǎng)站中的橫幅廣告，60像素、392×60像素、234×60像素、其標(biāo)準(zhǔn)尺寸有468×

125×125像素、120×90像素、120×60像素、88×31像素及120×240像素等。其中，468×60

31像素的Banner 使用最多，468×60像素的Banner 文件大小應(yīng)在15KB 左右，像素和88×

31像素的Banner 文件大小最好在5KB 左右。除此之外，在一些特殊場(chǎng)合也可使用而88×

一些非標(biāo)準(zhǔn)尺寸的Banner ，如圖1-8所示。

圖1-8 非標(biāo)準(zhǔn)尺寸的Banner

9

Dreamweaver 網(wǎng)頁(yè)制作（第2版）

3．文本

網(wǎng)頁(yè)中最主要的元素就是文本，文本編輯操作對(duì)網(wǎng)頁(yè)的整體起著決定作用。編輯文本時(shí)需注意以下幾點(diǎn)：

→ 文本的顏色需要能夠明顯地與背景區(qū)別開(kāi)來(lái)，讓瀏覽者能清楚地看到文本。

→ 每行文字最好為20～30個(gè)漢字的長(zhǎng)度，并注意段落的區(qū)分和縮進(jìn)，以便于閱讀。 → 同版面文本樣式不宜過(guò)多，最好在3種以內(nèi)。

4．圖像

圖像是網(wǎng)頁(yè)中不可或缺的元素，使用圖像時(shí)除了美觀外，還應(yīng)考慮它對(duì)網(wǎng)頁(yè)下載速度的影響。在選擇圖片時(shí)應(yīng)注意以下幾點(diǎn)：

→ 圖像應(yīng)采用淡色系列的背景，能與主題分離的則用淺色標(biāo)志或文字背景。 → 圖像的主題要清晰可見(jiàn)，所表達(dá)的含義要簡(jiǎn)單明了。

→ 圖像中的文字要求清晰可辨，不可出現(xiàn)朦朧、辨識(shí)不清的情況。

5．導(dǎo)航欄

導(dǎo)航欄按照放置的位置可分為橫排和豎排兩種；按照表現(xiàn)形式則有圖像導(dǎo)航、文本導(dǎo)航和框架導(dǎo)航等。導(dǎo)航欄的制作需注意以下幾點(diǎn)：

→ 最好不用圖片導(dǎo)航，如必須使用應(yīng)減小圖片大小。

→ 內(nèi)容豐富的網(wǎng)站可以使用框架導(dǎo)航，這樣可以快速地在網(wǎng)站內(nèi)的各欄目之間跳轉(zhuǎn)，

且只需下載一次導(dǎo)航頁(yè)面。

→ 在欄目不多的情況下，通常使用一排，如一般的個(gè)人網(wǎng)站或企業(yè)網(wǎng)站；如果導(dǎo)航

欄目太多，可分兩排或多排進(jìn)行排列，如圖1-9所示。

圖1-9 多排導(dǎo)航欄

6．按鈕

按鈕的大小沒(méi)有具體的規(guī)定，如圖1-10所示。需注意的是，按鈕要和網(wǎng)頁(yè)的整體效果協(xié)調(diào)，不要太搶眼。一般采用背景較淡、字體較深的方式，也可采用具有較強(qiáng)對(duì)比度的 顏色。

圖1-10 各式按鈕

1.3.3 網(wǎng)頁(yè)用色技巧

網(wǎng)頁(yè)中合適的色彩搭配可以給瀏覽者留下美好的印象。色彩應(yīng)用的總體原則是“總體協(xié)調(diào)，局部對(duì)比”，就是網(wǎng)頁(yè)的整體色彩效果應(yīng)該保證和諧，可以在局部的、小范圍的地方使用一些對(duì)比較強(qiáng)烈的色彩。下面將講解幾點(diǎn)用色的技巧。

10