網頁

原圖鏈接來自紅動中國網

網頁(英語: Web page )，是構成網站的基本元素，是承載各種網站應用的平台。通俗地說，您的網站就是由網頁組成的，如果您只有域名和虛擬主機而沒有製作任何網頁的話，您的客戶仍舊無法訪問您的網站。

網頁是一個包含HTML標籤的純文本文件，它可以存放在世界某個角落的某一台計算機中，是萬維網中的一「頁」，是超文本標記語言格式（標準通用標記語言的一個應用，文件擴展名為.html或.htm）。網頁通常用圖像檔來提供圖畫。網頁要通過網頁瀏覽器來閱讀。

目錄

主流代碼布局

原來是以表格來定位，現在是 DIV（區）+CSS（0.0）。

構成

文字與圖片是構成一個網頁的兩個最基本的元素。你可以簡單地理解為：文字，就是網頁的內容。圖片，就是網頁的美觀。除此之外，網頁的元素還包括動畫、音樂、程序等等。

在網頁上點擊鼠標右鍵，選擇菜單中的 「查看源文件」 ，就可以通過記事本看到網頁的實際內容。可以看到網頁實際上只是一個純文本文件。它通過各式各樣的標記對頁面上的文字、圖片、表格、聲音等元素進行描述（例如字體、顏色、大小），而瀏覽器則對這些標記進行解釋並生成頁面，於是就得到你現在所看到的畫面。 為什麼在源文件看不到任何圖片？ 網頁文件中存放的只是圖片的鏈接位置，而圖片文件與網頁文件是互相獨立存放的，甚至可以不在同一台計算機上。

網頁通常有以下元素：
文字資料圖像檔案Applet（在頁面內執行的副程式）超鏈結網頁的合成體為網站，一個網站的開始點為首頁。

記錄功能

當你每次上網時，都會在歷史記錄里留下記錄，並且被保存在瀏覽器的緩存文件夾里，刪除時只要右鍵刪除就可以了。

網頁遊戲

從08年開始，國內網頁遊戲開始不斷興起，網頁遊戲（Webgame）又稱Web遊戲，無端網遊，簡稱頁游。網頁遊戲也是需要重視水平的，如音效的篩選、恰到好處的樂曲與音效搭配、以及良好的結構平台等等，有了這些元素，才能做出一個好的網頁遊戲，同時也會引來更多的瀏覽人數。網頁遊戲的出現讓中國進入了一個新的網絡遊戲平台，也進入了一個頁游發展的競爭時代。

元素

感知信息 文本：文本是網頁上最重要的信息載體和交流工具，網頁中的主要信息一般都以文本形式為主。

圖像：圖像元素在網頁中具有提供信息並展示直觀形象的作用。

靜態圖像：在頁面中可能是光柵圖形或矢量圖形。通常為GIF，JPEG或PNG；或矢量格式，如SVG或Flash。

動畫圖像：通常動畫為GIF和SVG。

三、Flash動畫：動畫在網頁中的作用是有效地吸引訪問者更多的注意。

四、聲音：聲音是多媒體和視頻網頁重要的組成部分。

五、視頻：視頻文件的採用是網頁效果更加精彩且富有動感。

六、表格：表格是在網頁中用來控制面業信息的布局方式。

七、導航欄：導航欄在網頁中是一組超鏈接，其連接的目的端是網頁中重要的頁面。

八、交互式表單：表單在網頁中通常用來聯繫數據庫並接受訪問用戶在瀏覽器端輸入的數據。利用服務器的數據庫為客戶端與服務器端提供更多的互動。

互動媒體

頁面上的：

交互式文本：DHTML。

互動插圖：例如「點擊此處玩耍該遊戲」。

超鏈接：超鏈接是從一個網頁指向另一個目的端的鏈接，超鏈界的目的端可以是網頁，也可以是圖片、電子郵件地址、文件和程序等。（標準的「換頁」反應。分為URL、URI、URN）。

內部信息

一、通過超鏈接鏈接到某文件（如DOC，習，SGML等）。

二、元數據與語義的元信息，字符集信息，文件類型描述（DTD），等等。

三、樣式信息：提供的項目的信息（如圖像大小屬性）和視覺規範，層疊樣式表（CSS）、文檔樣式的語義和規範語言（外語全稱：Document Style Semantics and Specification Language、外語縮寫：DSSSL）。

四、腳本，通常是爪哇腳本（JavaScript），提供交互性以及相關功能的補充（比如倒計時關閉窗口等）。

網頁還包含動態適應的信息元素，取決於某某渲染瀏覽器或最終用戶的位置。（通過使用IP地址跟蹤和/或「cookie」的信息）。從更一般/寬的角度來看，一些信息（分組）的元素，像一個導航欄，所有的網頁是統一的，像一個標準，比如「網頁模板系統」。

分類

靜態頁

靜態網頁，其內容是預先確定的，並存儲在Web服務器或者本地計算機/服務器之上。

特點：

製作速度快，成本低。

模板一旦確定下來，不容易修改，更新比較費時費事。

常用於製作一些固定板式的頁面。

通常用於文本和圖像組成，常用於子頁面的內容介紹。

對服務器性能要求較低，但對存儲壓力相對較大。

動態頁

動態網頁，是取決於由用戶提供的參數，並根據存儲在數據庫中的網站上的數據中創建的頁面。

通俗地講，靜態頁是照片，每個人看都是一樣的，而動態頁則是鏡子，不同的人（不同的參數）看都不相同。

設計要點

網頁設計的兩大要點是：整體風格和色彩搭配。

整體風格

網站的整體風格及其創意設計是最難以學習的，難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。

風格（style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI（標誌、色彩、字體、標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。舉個例子：我們覺得網易是平易近人的，迪斯尼是生動活潑的。IBM是專業嚴肅的，這些都是網站給人們留下的不同感受。

在這裡，一些參考經驗：
將你的標誌，儘可能的放在每個頁面上最突出的位置。

突出你的標準色彩。

總結一句能反映貴站精髓的宣傳標語！

相同類型的圖像採用相同效果，比如說標題字都採用陰影效果，那麼在網站中出現的所有標題字的陰影效果的設置應該是完全一致的！

色彩搭配

無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。

關於色彩的原理有許多，在此我們不可能一一闡述，大家可以看看相關設計書籍，有利於系統地理解。在此我們僅僅想告訴大家一些網頁配色時的小技巧。

用一種色彩。這裡是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。

用兩種色彩。先選定一種色彩，然後選擇它的對比色。

用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網頁配色中，還要切記一些誤區：

不要將所有顏色都用到，儘量控制在三至五種色彩以內。

背景和前文的對比儘量要大（絕對不要用花紋繁複的圖案作背景），以便突出主要文字內容。

排版問題

字間距太擠或太寬。

行距太小或太大。

段距太少或太多。

每行字數太多或太少。

設計工具

一、Amaya（單位：萬維網聯盟）用於編輯HTML、CSS、數學標記語言、可縮放矢量圖形的工具

二、Dreamweaver（單位：奧多比）用於編輯HTML、ASP、JSP、PHP的輔助工具

三、Frontpage（單位：微軟）跟Dreamweaver一樣。

四、FLASH（單位：奧多比）網頁需要畫面流動（動畫）時的首選擇。

五、PhotoShop（單位：奧多比）圖象處理軟件，一般網頁都需要有圖片的相搭配，PhotoShop是款很強大的工具。

六、FireWorks（單位：奧多比）跟PhotoShop一樣都是圖象處理軟件，但FireWorks偏向與對網頁的處理。Fireworks主要用於製做動態圖片格式。

七、StylePix（單位：Hornil）跟PhotoShop一樣都是圖象處理軟件，可以處理光柵及矢量圖形。

可用性提升

權威研究結果表明：人們在線的閱讀習慣和平時的閱讀習慣是完全不一樣的。訪問者通常是在非常隨意的狀態下快速瀏覽你的網頁的，他們急於獲取真實的、實用的，並且是有價值的信息。如果他們不能及時地獲取所需信息，那麼，他們將離開你的網頁。

下面的3點方法將會給你帶來幫助，它會讓你為你的訪問者提供所需信息，指出提升網頁可用性的方法。

一、精簡的文本描述

你所寫的文章必須圍繞一個主題，這可以方便訪問者快速獲取主旨信息和中心思想。好好想想如何把文章改得精簡得體以便於訪問者閱讀。這裡告訴你一個可行的辦法，儘量把一段文章在3-4行之內敘述完整，然後再另起一行寫下面一段。

二、便於快速瀏覽的文本

網絡用戶一般不會在線精讀文本內容，他們通常是快速瀏覽。因此，應該儘量使用簡短、醒目的文本。舉個例子來說，可以通過超鏈接的形式將重要的信息從頁面中分離出來，這樣做會使得這段重要信息顯得非常醒目。將一個段落以重點列表的形式表示也是一種非常可行的方法。學會在你的重點詞組前方加一個起強調作用的圓點。還有一點，學會在頁面中使用副標題 ，當你瀏覽網頁時，將重點挑選出來，並將它們寫在標題標籤內，「標題2」和「標題3」的效果最好，但是「標題1」標籤的效果也會相當不錯，這樣做會可以給整個頁面的信息分出層次，以幫助閱讀者在簡單地瀏覽頁面之後快速地獲取所需信息。

三、必須要客觀公正

這裡要提到的「客觀公正」指的是：在你的網頁上放上與你網頁內容相關的鏈接，讓訪問者做出自由的選擇：是繼續留在你的網頁上，還是去別的網頁上尋找信息。這對於你——網頁的所有者來說，並不是一件壞事。因為你可以為訪問者指明確切的方向。好好按照上面說的把你的網頁改進一下。我相信，網頁的可用性一定會大大提升；同時，你的訪問者也會非常感激你，並且會很願意與你進行往來。

設計師速成

循序漸進學知識

先學一學HTML，找本自己能看懂的教材。瀏覽為主，然後學CSS，進而再了解一下JavaScript。 然後就可以用記事本嘗試寫幾個網頁，記住這時千萬不要用那些可視化工具，比如Amaya、FrontPage、Dreamweaver（那些以後再學）。

有一個提高自己「寫網頁」的捷徑，就是上各大網站，模仿他們的寫法，不斷規範自己的代碼。 接下來學一下Fireworks。學Fireworks主要是學圖片處理，還有切圖。 元素 一、文本：文本是網頁上最重要的信息載體與交流工具，網頁中的主要信息一般都以文本形式為主。

二、圖像：圖像元素在網頁中具有提供信息並展示直觀形象的作用。

靜態圖像。在頁面中可能是光柵圖形或矢量圖形。通常為GIF，JPEG或PNG；或矢量格式，如SVG或Flash。

使用腳本

ASP全名Active Server Pages（活性服務器頁面），是一個WEB服務器端的開發環境。利用它可以產生和執行動態的、互動的、高性能的WEB服務應用程序。ASP採用腳本語言VBScript（Java script）作為自己的開發語言。

PHP是一種跨平台的服務器端的嵌入式腳本語言。它大量地借用C,Java和Perl語言的語法，並耦合PHP自己的特性，使WEB開發者能夠快速地寫出動態產生頁面。

JSP是Sun公司推出的新一代網站開發語言，Sun公司藉助自己在Java上的不凡造詣，將Java從Java應用程序和Java Applet（爪哇小程序）之外，又有新的碩果，就是JSP（爪哇服務器頁面）。JSP可以在Serverlet和JavaBean的支持下，完成功能強大的站點程序。

WebDNA是一個服務器端的腳本，解釋型的語言且帶一個嵌入式數據庫系統，專門設計用於萬維網發布的一個免費的（FastCGI的版本）。基於標籤與上下文。

.NET 是 Microsoft XML Web services 平台。XML Web services 允許應用程序通過 Internet 進行通訊和共享數據，而不管所採用的是哪種操作系統、設備或編程語言。Microsoft .NET 平台提供創建 XML Web services 並將這些服務集成在一起之所需。對個人用戶的好處是無縫的、吸引人的體驗。

設計原則

關於網站

所謂網站（Website），就是指在網際網路（因特網）上，根據一定的規則，使用HTML等工具製作的用於展示特定內容的相關網頁的集合。簡單地說，網站是一種通訊工具，就像布告欄一樣，人們可以通過網站來發布自己想要公開的資訊（信息），或者利用網站來提供相關的網路服務（網絡服務）。人們可以通過網頁瀏覽器來訪問網站，獲取自己需要的資訊（信息）或者享受網路服務。

在你眼前，出現在顯示器上的這個「東西」，就是一個網頁。網頁實際是一個文件，它存放在世界某個角落的的某一台計算機中，而這台計算機必須是與互聯網相連的。網頁經由網址（URL）來識別與存取，當我們在瀏覽器輸入網址後，經過一段複雜而又快速的程序。網頁文件會被傳送到你的計算機，然後再通過瀏覽器解釋網頁的內容，再展示到你的眼前。

站點主頁成分

Web站點主頁應具備的基本成分包括：

頁頭：準確無誤地標識你的站點和企業標誌；

Email地址：用來接收用戶垂詢；

聯繫信息：如普通郵件地址或電話；

版權信息：聲明版權所有者等。

充分利用已有信息，如客戶手冊、公共關係文檔、技術手冊和數據庫等。

要素

設計一個網站，應該考慮下列九條基本因素，這些因素對網站的成功與否有着重要影響。

1. 整體布局

網站主頁就好像是宣傳欄或者店面——對訪問者產生第一印象，都希望儘量給人留下好的印象，不是嗎？

一般來說，好的網站應該給人有這樣的感覺：

乾淨整潔

條理清楚

專業水準

引人入勝

網頁應該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、下拉菜單框、圖片等會讓訪問者無所適從——離開是最好的選擇。就像一些商店，播放震耳欲聾的發燒音樂，你要做的唯一決定就是離開那裡，越快越好。

2. 信息
無論商業站點還是個人主頁，你必須給人們提供有一定價值的內容才能留住訪問者。因為我們人類總是惟利是圖，第一個問題總是：「對我有什麼用處？」 所以你必須提供某些有價值的東西，當然並不是說必須提供某些免費的物品——免費書籍、免費入場券、免費度假等，這些「有價值的東西」可以是： 信息；

娛樂；

勸告；

對一些問題的幫助；

提供志趣相投者聯絡的機會；

鏈接到有用的網頁，等等。

如果你經營的是企業網站，需要提供關於產品或服務的信息：

容易理解；

容易查詢；

容易訂貨。

3. 速度
我們都知道，頁面下載速度是網站留住訪問者的關鍵因素。如果20—30秒還不能打開一個網頁，一般人就會沒有耐心。至少應該確保主頁速度儘可能快，最好不要用大的圖片。 應該時時提醒自己，網站首頁就像一個廣告牌。當開車經過一個廣告牌時，沒有時間閱讀上面的詳細說明，也不可能讚賞其複雜的圖案，廣告標誌從眼前一閃而過，必須在一瞬間給人留下印象。 網上訪問者也是「一閃而過」，保證你的首頁簡單而快速。網上有許多關於如何增加速度的文章——檢查下載速度，放棄一切顯著減慢主頁速度的資料。

4. 圖形和版面設計
圖形和版面設計關係到對主頁的第一印象，圖象應集中反映主頁所期望傳達的主要信息。

如果有系列商業站點，你不必讓過分顯眼的動畫出現在首頁——但如果你的網站是遊戲站點，動畫將是必不可少的一部分內容。

圖片是影響網頁下載速度的重要原因，根據經驗。把每頁全部內容控制在30K左右可以保證比較理想的下載時間，圖象在6—8K之間為宜，每增加2K會延長1秒鐘的下載時間。

顏色也是影響網頁的重要因素，不同的顏色對人的感覺有不同的影響，例如：

紅色和橙色使人興奮並使得心跳加速；

黃色使人聯想到陽光，是一種快活的顏色；

考慮到你希望對瀏覽者產生什麼影響，請為網頁選擇合適的顏色。

閱讀西方格式文本時，眼睛從左上方開始。逐行瀏覽到達右下方，插入圖象時不要忘記這種特性。任何具有方向性的圖片應該放置在網頁中對眼睛最重要的地方，如果在左上角放置一幅小鳥的圖片，鳥嘴應該放在把瀏覽者目光引向頁面中部的地方，而不是把視線引走。

這種思路可以用於所有圖片：

面部應該「看」網頁的中部；

汽車的「停靠」面向網頁中部；

道路、領帶等等圖片的放置都應該在有助於吸引目光從左向右、從上向下移動。

一般總是把網站導航條放置在頁面左邊，也是出於這種考慮——不斷地出現在瀏覽者的視野之中。

5. 文字的可讀性
我們仍然用廣告牌的比喻來說明，文字要在廣告牌上突出，周圍應該留有足夠的空間。也許你曾到過一些網站，要麼擁擠不堪的文字覺得好像只有把腦袋鑽進去才能閱讀，要麼深色的背景給人的感覺好象處於非常狹窄的空間裡，而且讓人的心情感覺很壓抑。某些背景色的令人閱讀困難；紫色、橙色和紅色讓人眼花繚亂。

文字的顏色也很重要，不同的瀏覽器有不同的顯示效果，有些在你的瀏覽器上很漂亮的顏色在其他瀏覽器上可能無法顯示。

參考報紙的編排方式，為方便或快速閱讀將你的內容分欄設計，甚至兩欄也要比一滿頁的視覺效果要好。

另一種能夠提高文字可讀性的因素是你所選擇的字體，通用的字體（Arial, Times New Roman, Garamond and Courier）最易閱讀，特殊字體用於標題效果較好，但是不適合正文（試想瀏覽整頁的 Gothic, Script, Westminster, or Cloister會是怎樣的感受）。因為閱讀費力，你的眼睛很快就會疲勞，不得不轉移到其他頁面。

6. 網頁標題的可讀性
必須儘量使你的網頁易於閱讀，除了分欄之外（將頁面縱向分割），也需要利用標題和副標題將文檔分段。

為所有標題和副標題設置同一字體，並將標題字體加大一號，所有標題和副標題都採用粗體，這樣便於識別標題（字體加大加粗）和副標題（粗體，與正文字體大小相同），使瀏覽者一眼就可以看到要點，以便找出並繼續閱讀有興趣的內容。標題的重要性可見一斑，要認真寫好每個標題！ 也可以將整句採用粗體或用不同的顏色突出某些內容，不過不要用難以閱讀的顏色。

7. 導航
由於人們習慣於從左到右、從上到下閱讀，所以主要的導航條應放置在頁面左邊，對於較長頁面來說，在最底部設置一個簡單導航也很有必要（只要兩項就夠了：主頁|頁面頂部）。 確定一種你滿意的模式之後，最好將這種模式應用到同一網站的每個頁面，這樣，瀏覽者就知道如何尋找信息。

8. 保護個人信息聲明和客戶推薦信
對於商業網站來講，最重要的事情之一是確保潛在客戶的信心，你應該明確地告訴人們，如何對其興趣、愛好，尤其個人隱私保密，很有必要專門用一個頁面詳細陳述你的保護個人信息聲明，包括對訪問者的email地址保密、如何接受定單、如何匯總信息、匯總這些信息的目的、誰可以看到這些信息等基本內容。

訪問者也想知道你的產品或服務現有客戶的反映，所以如果能引用與你關係融洽的客戶對你的積極評價，對你的可信度將很有幫助。

不要害怕向顧客索取推薦信——人們都願意自己的意見有價值。

你可以把客戶的推薦信另設計為一個網頁，作為對客戶提供推薦信的回報，在這裡鏈接到客戶的網站——這也是一種「雙贏」。

9. 詞語
一個網站如果只有漂亮的外觀而詞語錯誤連篇、語法混亂，同樣是失敗的，對於網站所有者和負責人將產生很壞的影響，人們會用許多貶義詞來評價你：粗心大意、懶惰、外行、沒水平等等。

你願意把自己辛苦掙來的錢花在一個連自己的網站都馬馬虎虎的人嗎？

你可以按照上述步驟改進你的網站製作技巧；

你可以請人對你的工作進行校對、編輯；

你也可以請人為你製作網頁；

總之，上述步驟在很多方面對你會有所幫助，不要因為對某些步驟的疏忽而影響你的網站的整體效果。

類型

1、電子商務類網站

電子商務類網站分為B2B(商家對商家)和B2C(商家對個人)兩種，這種是以網上銷售為主要盈利手段的網站。

2、主題性網站

這種主題性網站是主要提供有共同的興趣愛好的人一起去分享和觀看的網站。

3、個人性網站

這種網站主要是突出自己鮮明的個性的網站，比如個人微博、博客、論壇等等。 布局=== 1. 圖片與文字的協調性
一個完美的網頁布局會給人一種和平舒暢的心情，它不僅僅是表現在文字的表達程度，更多的表現在圖片與文字的協調性。

2. 視覺上的對比性
通過不同的色彩、不同的圖形進行對比，在視覺上形成視覺的衝擊，同時在圖形也要形成對比，只有這樣才能讓人們過目不忘。

3. 有松有馳
網頁製作上也要講究有松有馳，不要整個網頁都是一種樣式，要適當進行留白，運用空格或是改變字體之間的間距，從而達到不一樣的變化效果。

網頁儲存

當要將網頁存入自己的電腦內，網頁瀏覽器通常提供以下的選擇：

只儲存網頁的文字部分完裝封裝，即連同該網頁（HTML）所要用到的圖像、Applet和JavaScript等文件也一併封裝儲存只有HTML，不作任何改動；若果網頁內的連結是相對連結，可能會令圖片消失只有HTML，但將網頁內連結到的文件改成絕對定義有些網頁瀏覽器容許在打印網頁前預覽，並可選擇印底色與否，甚至放大、縮小。

網頁尺寸

從2003年到2008年，網頁的平均尺寸從93.7K增至312K；網頁中的平均對象數量從25.7個增長到49.9個。而隨着寬帶的普及，頁面響應速度從2006年2月的2.8秒降低到了2008年2月的2.33秒。