第1章 網頁制作基礎學習目標? 了解網頁制作基礎知識? 掌握網頁制作的一般步驟? 掌握網頁制作的原則和技巧目標任務&項目案例天涯社區(qū)網站首頁

第1章 網頁制作基礎

學習目標

? 了解網頁制作基礎知識

? 掌握網頁制作的一般步驟

? 掌握網頁制作的原則和技巧

目標任務&項目案例

天涯社區(qū)網站首頁 淘寶交易網站

郵箱登錄界面 郵箱注冊頁面

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

Dreamweaver 網頁制作（第2版）

1.1 網頁制作基礎知識

學習網頁制作應先了解網頁的基本概念，學好這些知識是制作出漂亮、美觀的網頁的前提，為以后的學習打好基礎。

1.1.1 網頁的定義和分類

上網時瀏覽的一個個頁面就是網頁，網頁又稱為Web 頁，其中的圖像、文

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

圖1-1 榕樹下網站首頁

1．按位置分類

主頁和內頁，主頁是指網站的主要導航

頁面，一般是進入網站時打開的第一個頁面，也稱為首頁；內頁是指與主頁相鏈接的按網頁在網站中的位置可將其分為頁面，也就是網站的內部頁面。

提示： 一些網站的首頁并非主頁，其作用只是為了歡迎訪問者或者引導訪問者進入主頁，所以首頁并不一定就是主頁。

2

第1章 網頁制作基礎

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

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

→ 靜態(tài)網頁：指用HTML 語言編寫的網頁，其制作方法簡單易學，但缺乏靈活性。

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

其制作方法較靜態(tài)網頁復雜。

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

1.1.2 網頁的基本概念

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

→ 站點：站點是一個管理網頁文檔的場所，簡單地講，一個個網頁文檔鏈接起來就

構成了站點。站點可以小到一個網頁，也可大到一個網站。

→ 發(fā)布：發(fā)布就是把制作好的網頁上傳到網絡中的過程。

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

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

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

所示為搜狗瀏覽器打開的網頁。

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

→ 導航條：導航條就如同一個網站的路標，有了它就不會在瀏覽網站時“迷

路”，如圖1-4所示。導航條鏈接著各個頁面，只要單擊導航條中的超級鏈

3

Dreamweaver 網頁制作（第2版）

接就能進入相應的頁面。

圖1-4 導航條

→

→

→

4 超級鏈接：超級鏈接在網頁中起著重要的作用，主要用于將不同頁面鏈接起來，鏈接的范圍可以是同一站點內的頁面，也可以是其他網站的頁面。超級鏈接主要有文字鏈接和圖像鏈接等，通常將鼠標指針移動到網頁對象上，如果該對象是一個超級鏈接，鼠標指針會變?yōu)橐粋€手形，如圖1-5所示。單擊超級鏈接就能打開其指定的目標網頁。

圖1-5 超級鏈接 表單：表單是具有交互性的動態(tài)網頁，常用于在注冊網站會員和申請郵箱等活動時提交用戶信息。如圖1-6所示為申請網易郵箱的表單。

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

第1章 網頁制作基礎

式。

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

Internet 上的每臺主機的IP 地址都是唯一的，就像生活中的門牌號，在網絡中就命名為IP 地址。IP 地址分為A 、B 、C 、D 、E 5類，常用的是B 和C 兩類，如192.168.1.1為一個C 類IP 地址。

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

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

5

Dreamweaver 網頁制作（第2版）

1.1.3 網頁的基本組成元素

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

圖1-7 網頁中的文本和圖像 1．文本

因文本體積小、在網絡上傳輸速度較快、用戶可以很方便地瀏覽和下載，故成為了網頁的主要信息載體。網頁中文本的樣式多變，風格不一，吸引人的網頁通常都具有美觀的文本樣式。文本的樣式可通過對網頁文本的屬性進行設置來調整，在后面的章節(jié)將詳細講解這方面的知識。

2．圖像

圖像比文本更具有生動性和直觀性，它可以傳遞一些文本不能傳載的信息，如網站標識、背景等一般都是圖像。

1.1.4 認識網站

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

→ 門戶網站：門戶網站是一種綜合性網站，涉及領域非常廣泛，包含文學、音樂、

影視、體育、新聞和娛樂等方面的內容，且具有論壇、搜索和短信等功能。國內較著名的門戶網站有新浪、搜狐和網易等。

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

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

→ 個人網站：個人網站具有較強的個性化，是以個人名義開發(fā)創(chuàng)建的網站，以個性

化為主。

→ 專業(yè)網站：專業(yè)網站具有很強的專業(yè)性，通常只涉及某一個領域，內容專業(yè)。如

榕樹下網站即是一個專業(yè)文學網站，太平洋電腦網是一個電子產品專業(yè)網站平臺。

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

商務網站也屬于這類網站，較有名的電子商務網站有淘寶網、卓越網和當當網等。

6

第1章 網頁制作基礎

1.2 網頁制作的一般步驟

制作網頁也是有一定順序和步驟的，在此之前還需要做一些準備工作。

1.2.1 收集、整理資料

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

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

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

1.2.3 制作網頁

網站是由若干頁面鏈接而成的。在制作網頁時，為了方便瀏覽者輕松瀏覽網站，需注意以下幾個方面。

→ 頁面框架的構建：頁面框架的構建是指對網頁的整體布局，針對網頁中的內容應

將網頁有條理地劃分為幾部分。

→ 導航條：導航條通常放置在頁面的上部或左側并且應出現(xiàn)在網站的各個頁面中，

提供各個站點的相關主題，引導瀏覽者有條理地瀏覽網站。

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

速回到首頁，并重新選擇其他頁面進行瀏覽。

→ 添加網頁元素：為網頁添加相應的內容，以傳遞網頁信息給瀏覽者。

1.2.4 站點測試

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

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

→ 運行鏈接檢查報告對鏈接進行測試。由于在網頁制作中，各站點的重新設計、重

新調整可能會使某些鏈接所指向的頁面已被移動或刪除，所以應檢查站點是否有斷開的鏈接，若有則會自動重新修復斷開的鏈接。

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

覽器兼容性的檢查。使用“檢查瀏覽器”行為，可自動將訪問者定向到另外的頁

7

Dreamweaver 網頁制作（第2版）

面，這樣可解決在較早版本的瀏覽器中無法運行頁面的問題。

→ 網頁布局、字體大小、顏色和默認瀏覽器窗口大小等是在目標瀏覽器檢查中無法

預見的，需在不同的瀏覽器和平臺上預覽頁面進行查看。

提示： Dreamweaver 只對文件的最新保存執(zhí)行檢查，而不檢查未保存的更改，所以對當前文檔運行檢查前，應先保存文件。通過站點報告測試可解決整個站點的問題，如無標題文檔、空標簽以及冗余的嵌套標簽等。

1.2.5 網頁發(fā)布

發(fā)布站點之前需在Internet 上申請一個主頁空間，用來指定網站或主頁在Internet 上的位置，在后面的章節(jié)中將詳細講解申請主頁空間的知識。

提示：

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

1.2.6 站點的更新與維護

站點上傳到服務器后，還需對站點進行定期或不定期的更新和維護，以保持站點內容的最新和頁面元素的正常。

1.3 網頁制作的原則和技巧

在制作網站時還需要注意網頁制作的原則，并掌握一定的技巧，使網站做得更有水平，下面分別進行介紹。

1.3.1 網頁制作的基本原則

在網頁制作過程中需遵循其制作原則，下面將詳細講解。

→ 整體規(guī)劃網站結構：為能合理安排站點中的各項內容，制作網頁之前需對整個站

點進行有條理的規(guī)劃。

→ 新穎的站點名稱：名稱對于網站來說非常重要，有創(chuàng)意的站名能給瀏覽者留下較

深的印象，也有利于網站的宣傳和推廣。給站點取名時應基于簡潔、好記并且要與站點內容相適應，此外最好還能給人耳目一新的感覺。

→ 鮮明的主題：標題內容不能太長太復雜，需簡單明了。主題內容需要醒目搶眼，

具有較強的針對性。

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

8

第1章 網頁制作基礎

→

→

→

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

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

1.3.2 網頁基本元素的標準及使用技巧

一個完整的網站都有Logo 、Banner 、文本、圖像、導航欄和按鈕等網頁元素，這些元素被稱為網頁的基本元素。下面分別進行講解。

1．Logo

Logo 即網站的標志，其制作要點如下：

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

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

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

的動作頻率也不能太大，否則可能會適得其反。

2．Banner

Banner 即網站中的橫幅廣告，60像素、392×60像素、234×60像素、其標準尺寸有468×

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

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

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

一些非標準尺寸的Banner ，如圖1-8所示。

圖1-8 非標準尺寸的Banner

9

Dreamweaver 網頁制作（第2版）

3．文本

網頁中最主要的元素就是文本，文本編輯操作對網頁的整體起著決定作用。編輯文本時需注意以下幾點：

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

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

4．圖像

圖像是網頁中不可或缺的元素，使用圖像時除了美觀外，還應考慮它對網頁下載速度的影響。在選擇圖片時應注意以下幾點：

→ 圖像應采用淡色系列的背景，能與主題分離的則用淺色標志或文字背景。 → 圖像的主題要清晰可見，所表達的含義要簡單明了。

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

5．導航欄

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

→ 最好不用圖片導航，如必須使用應減小圖片大小。

→ 內容豐富的網站可以使用框架導航，這樣可以快速地在網站內的各欄目之間跳轉，

且只需下載一次導航頁面。

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

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

圖1-9 多排導航欄

6．按鈕

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

圖1-10 各式按鈕

1.3.3 網頁用色技巧

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

10