網頁是壹個包含HTML標簽的純文本文件，它可以存放在世界某個角落的某壹臺計算機中，是萬維網中的壹“頁”，是超文本標記語言格式（標準通用標記語言的壹個應用，文件擴展名為.html或.htm）。網頁通常用圖像檔來提供圖畫。網頁要通過網頁瀏覽器來閱讀。
構成
編輯
文字與圖片是構成壹個網頁的兩個最基本的
國外網頁欣賞(15張)
元素。妳可以簡單地理解為：文字，就是網頁的內容。圖片，就是網頁的美觀。除此之外，網頁的元素還包括動畫、音樂、程序等等。
在網頁上點擊鼠標右鍵，選擇菜單中的 “查看源文件” ，就可以通過記事本看到網頁的實際內容。可以看到網頁實際上只是壹個純文本文件。它通過各式各樣的標記對頁面上的文字、圖片、表格、聲音等元素進行描述（例如字體、顏色、大小），而瀏覽器則對這些標記進行解釋並生成頁面，於是就得到妳現在所看到的畫面。 為什麽在源文件看不到任何圖片？ 網頁文件中存放的只是圖片的鏈接位置，而圖片文件與網頁文件是互相獨立存放的，甚至可以不在同壹臺計算機上。
網頁通常有以下元素：
文字資料圖像檔案Applet（在頁面內執行的副程式）超鏈結網頁的合成體為網站，壹個網站的開始點為首頁。
記錄功能
編輯
當妳每次上網時，都會在歷史記錄裏留下記錄，並且被保存在瀏覽器的緩存文件夾裏，刪除時只要右鍵刪除就可以了 [1] 。
網頁遊戲
編輯
從08年開始，國內網頁遊戲開始不斷興起，網頁遊戲（Webgame）又稱Web遊戲，無端網遊，簡稱頁遊。網頁遊戲也是需要重視水平的，如音效的篩選、恰到好處的樂曲與音效搭配、以及良好的結構平臺等等，有了這些元素，才能做出壹個好的網頁遊戲，同時也會引來更多的瀏覽人數。網頁遊戲的出現讓中國進入了壹個新的網絡遊戲平臺，也進入了壹個頁遊發展的競爭時代。
元素
編輯
感知信息
文本：文本是網頁上最重要的信息載體和交流工具，網頁中的主要信息壹般都以文本形式為主。
圖像：圖像元素在網頁中具有提供信息並展示直觀形象的作用。
靜態圖像：在頁面中可能是光柵圖形或矢量圖形。通常為GIF，JPEG或PNG；或矢量格式，如SVG或Flash。
動畫圖像：通常動畫為GIF和SVG。
三、Flash動畫：動畫在網頁中的作用是有效地吸引訪問者更多的註意。
四、聲音：聲音是多媒體和視頻網頁重要的組成部分。
五、視頻：視頻文件的采用是網頁效果更加精彩且富有動感。
六、表格：表格是在網頁中用來控制面業信息的布局方式。
七、導航欄：導航欄在網頁中是壹組超鏈接，其連接的目的端是網頁中重要的頁面。
八、交互式表單：表單在網頁中通常用來聯系數據庫並接受訪問用戶在瀏覽器端輸入的數據。利用服務器的數據庫為客戶端與服務器端提供更多的互動 [2] 。
互動媒體
頁面上的：
交互式文本：DHTML。
互動插圖：例如“點擊此處玩耍該遊戲”。
按鈕：例如“百度壹下”。
超鏈接：超鏈接是從壹個網頁指向另壹個目的端的鏈接，超鏈界的目的端可以是網頁，也可以是圖片、電子郵件地址、文件和程序等。（標準的“換頁”反應。分為URL、URI、URN）。
內部信息
註釋。如：
1
<!--百度百科詞條中的參數實體。-->
二、通過超鏈接鏈接到某文件（如DOC，習，SGML等）。
三、元數據與語義的元信息，字符集信息，文件類型描述（DTD），等等。
四、樣式信息：提供的項目的信息（如圖像大小屬性）和視覺規範，層疊樣式表（CSS）、文檔樣式的語義和規範語言（外語全稱：Document Style Semantics and Specification Language、外語縮寫：DSSSL）。
五、腳本，通常是爪哇腳本（JavaScript），提供交互性以及相關功能的補充（比如倒計時關閉窗口等）。
網頁還包含動態適應的信息元素，取決於某某渲染瀏覽器或最終用戶的位置。（通過使用IP地址跟蹤和/或“cookie”的信息）。從更壹般/寬的角度來看，壹些信息（分組）的元素，像壹個導航欄，所有的網頁是統壹的，像壹個標準，比如“網頁模板系統”。
分類
編輯
靜態頁
靜態網頁，其內容是預先確定的，並存儲在Web服務器或者本地計算機/服務器之上。
特點：
制作速度快，成本低。
模板壹旦確定下來，不容易修改，更新比較費時費事。
常用於制作壹些固定板式的頁面。
通常用於文本和圖像組成，常用於子頁面的內容介紹。
對服務器性能要求較低，但對存儲壓力相對較大。
動態頁
動態網頁，是取決於由用戶提供的參數，並根據存儲在數據庫中的網站上的數據中創建的頁面。
通俗地講，靜態頁是照片，每個人看都是壹樣的，而動態頁則是鏡子，不同的人（不同的參數）看都不相同。
設計要點
編輯
網頁設計的兩大要點是：整體風格和色彩搭配。
整體風格
網站的整體風格及其創意設計是最難以學習的，難就難在沒有壹個固定的模式可以參照和模仿。給妳壹個主題，任何兩人都不可能設計出完全壹樣的網站。
家庭網
風格（style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標誌、色彩、字體、標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。舉個例子：我們覺得網易是平易近人的，迪斯尼是生動活潑的。IBM是專業嚴肅的，這些都是網站給人們留下的不同感受。
在這裏，壹些參考經驗：
將妳的標誌，盡可能的放在每個頁面上最突出的位置。
突出妳的標準色彩。
總結壹句能反映貴站精髓的宣傳標語！
相同類型的圖像采用相同效果，比如說標題字都采用陰影效果，那麽在網站中出現的所有標題字的陰影效果的設置應該是完全壹致的！
色彩搭配
無論是平面設計，還是網頁設計，色彩永遠是最重要的壹環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。
關於色彩的原理有許多，在此我們不可能壹壹闡述，大家可以看看相關設計書籍，有利於系統地理解。在此我們僅僅想告訴大家壹些網頁配色時的小技巧。
用壹種色彩。這裏是指先選定壹種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統壹，有層次感。
用兩種色彩。先選定壹種色彩，然後選擇它的對比色。
用壹個色系。簡單的說就是用壹個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。
在網頁配色中，還要切記壹些誤區：
不要將所有顏色都用到，盡量控制在三至五種色彩以內。
背景和前文的對比盡量要大（絕對不要用花紋繁復的圖案作背景），以便突出主要文字內容 [3] 。
排版問題
編輯
字間距太擠或太寬。
行距太小或太大。
段距太少或太多。
每行字數太多或太少。
設計工具
編輯
壹、Amaya（單位：萬維網聯盟）用於編輯HTML、CSS、數學標記語言、可縮放矢量圖形的工具
二、Dreamweaver（單位：奧多比）用於編輯HTML、ASP、JSP、PHP的輔助工具
設計的網頁
三、Frontpage（單位：微軟）跟Dreamweaver壹樣。
四、FLASH（單位：奧多比）網頁需要畫面流動（動畫）時的首選擇。
五、PhotoShop（單位：奧多比）圖象處理軟件，壹般網頁都需要有圖片的相搭配，PhotoShop是款很強大的工具。
六、FireWorks（單位：奧多比）跟PhotoShop壹樣都是圖象處理軟件，但FireWorks偏向與對網頁的處理。Fireworks主要用於制做動態圖片格式。
七、StylePix（單位：Hornil）跟PhotoShop壹樣都是圖象處理軟件，可以處理光柵及矢量圖形 [4] 。
可用性提升
權威研究結果表明：人們在線的閱讀習慣和平時的閱讀習慣是完全不壹樣的。訪問者通常是在非常隨意的狀態下快速瀏覽妳的網頁的，他們急於獲取真實的、實用的，並且是有價值的信息。如果他們不能及時地獲取所需信息，那麽，他們將離開妳的網頁。
下面的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）來識別與存取，當我們在瀏覽器輸入網址後，經過壹段復雜而又快速的程序。網頁文件會被傳送到妳的計算機，然後再通過瀏覽器解釋網頁的內容，再展示到妳的眼前 [5] 。
站點主頁成分
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. 詞語
壹個網站如果只有漂亮的外觀而詞語錯誤連篇、語法混亂，同樣是失敗的，對於網站所有者和負責人將產生很壞的影響，人們會用許多貶義詞來評價妳：粗心大意、懶惰、外行、沒水平等等。
妳願意把自己辛苦掙來的錢花在壹個連自己的網站都馬馬虎虎的人嗎？
妳可以按照上述步驟改進妳的網站制作技巧；
妳可以請人對妳的工作進行校對、編輯；
妳也可以請人為妳制作網頁；
總之，上述步驟在很多方面對妳會有所幫助，不要因為對某些步驟的疏忽而影響妳的網站的整體效果。