網頁設計基礎知識
1.1 網站
網站（Web Site）是一個存放網絡服務器上的完整信息的集合體。它包含一個或是多個網頁，這(zhè)些網頁以此一定的方式鏈接于一起(qǐ)，成(chéng)爲一個整體，用來描述一組完整的信息或是達到某種(zhǒng)期望的宣傳效果。有的網站内容衆多，如新浪、搜狐等門戶網站；有的網站僅有幾個頁面(miàn)，如個人網站。
1.2 網頁
網頁（Web Page）事(shì)實上是一個文件，網頁裡(lǐ)面(miàn)可以有文字、圖像、聲音以及視頻信息等。網頁可以看成(chéng)是一個單一體，是網站的一個元素。
平常我們所聽說(shuō)的“新浪”、“搜狐”、“網易”等，乃是俗稱的“網站”。因而如果我們訪問這(zhè)些網站的時(shí)候，最爲直接訪問的便是“網頁”了。這(zhè)許許多多的網頁亦組成(chéng)了整個站點，亦便是網站。
1.3 首頁
首頁（Home page），它是一個單獨的網頁，與一般網頁一樣，可以存放各種(zhǒng)信息，除此之外亦是一個特殊的網頁，作爲整個網站的起(qǐ)始點與彙總點。例如，如果浏覽者輸入搜狐網站地址“www.sohu.com”之後(hòu)出現于第一個頁面(miàn)，即sohu網站的首頁。
問題：首頁與主頁有區别嗎？
一般網站作爲方便浏覽者查找與分類浏覽網站的信息，會(huì)把信息分類，并且建立一個網頁以此放置網站信息的目錄，即網站的主頁。
并非所有的網站均把主頁設置作爲首頁，有的網站喜歡于首頁放置一段進(jìn)入動畫，并且把主頁的鏈接放置于首頁之上，浏覽者需要單擊首頁的鏈接進(jìn)入主頁。
1.4網頁的表現形式
1.靜态網頁：客戶端和服務器端絕不發(fā)生相互作用
訪問者隻能(néng)被動地浏覽網站建設者提供的網頁内容。其特點：
網頁内容絕不會(huì)發(fā)生變化，如果網頁設計者修改了網頁的内容。絕不能(néng)實現與浏覽網頁的用戶間的交互。信息流向(xiàng)是單向(xiàng)的。
2.動态網頁：客戶端和服務器端要發(fā)生相互作用
動态網頁是指浏覽器可以與服務器數據庫進(jìn)行實時(shí)數據交流的交互網頁，因而絕不是加上了動畫等效果的動感網頁。動态網頁技術的網站可以實現越來越多的功能(néng)，如用戶注冊、用戶登錄、搜索查詢、用戶管理、訂單管理等。信息流向(xiàng)是雙向(xiàng)的。
2.1 網站LOGO
1.通常網站爲體現其特色和内涵，涉及并且制作一個LOGO圖如同放置于網站的左上角或是其他醒目的位置。
2.企業網站經(jīng)常使用企業的标志或是注冊商标。
3.一個設計優秀的LOGO可以予浏覽者留下深刻的印象，作爲網站與企業形象宣傳起(qǐ)到十分重要的作用。
2.2 導航條
導航條是網頁的重要組成(chéng)元素。設計的目的是把站點之内的信息分類處理，接著(zhe)放在網頁之中以此幫助浏覽者快速查找站之内信息。
導航條的形式多種(zhǒng)多樣，包括文本導航條、圖像導航條及動畫導航條等。
有些使用特殊技術（例如Flash、JavaScript、CSS）制作的導航條也可以具有下拉菜單的功能(néng)。
2.3 Banner
Banner的中文意思是橫幅。Banner的内容一般作爲網頁之中的廣告。
于網頁布局之中，大部分網頁把Banner放置于和導航條相鄰處，或是其他醒目的位置以此吸引浏覽者浏覽。
2.4 内容版塊
網頁的内容版塊是整個頁面(miàn)的組成(chéng)部分。
設計人員可以透過(guò)該頁面(miàn)的欄目要求來設計不同版塊，每個版塊可以有一個标題内容，并每個内容版塊重要來顯示不同文本信息。
2.5 版尾或是版權版塊
版尾，即頁面(miàn)最低端的版塊。
這(zhè)部分位置一般放置網頁的版權信息，及網頁所有者、設計者的聯系方式等。
有的網站亦把網站的友情鏈接及一些附屬的導航條放置于這(zhè)裡(lǐ)。
3.1 文本
網頁之中的信息以此文本爲主。和圖片相比，文字盡管絕不如圖片那樣能(néng)夠不久引起(qǐ)浏覽者的注意，但是反而能(néng)準确地表達信息的内容與含義。
3.2 圖片
用戶于網頁之中使用的圖片格式重要包括GIF、JPEG與PNG等，其中使用最爲廣泛的是GIF與JPEG兩(liǎng)種(zhǒng)格式。
3.3 超鏈接
超鏈接于本質之上屬于一個網頁的一部分，是一種(zhǒng)允許用戶同一其他網頁或是站點間進(jìn)行連接的元素。
超鏈接是指自一個網頁指向(xiàng)一個目标的連接關系，這(zhè)個目标可以是另一個網頁，亦可以是相同網頁之上的不同位置，也可以是一個圖片、一個電子郵件地址、一個文件，而且是一個應用程序。
3.4 動畫
于網頁之中借以越來越有效地吸引浏覽者的注意，許多網站的廣告均做成(chéng)了動畫形式。
網頁之中的動畫重要有兩(liǎng)種(zhǒng)：GIF動畫與Flash動畫。其中GIF動畫隻能(néng)有256種(zhǒng)顔色，重要用于簡單動畫與圖标。
3.5 聲音與視頻
聲音是多媒體網頁的一個重要組成(chéng)部分。用于網絡的聲音文件的格式十分多，常用的有MIDI、WAV、MP3與AIF等。
很多浏覽器你們插件亦可以支持MIDI、WAV與AIF格式的文件，因而MP3與RM格式的聲音文件亦需要專門的浏覽器播放。
3.6 表格
于網頁之中表格用來控制網頁之中信息的布局方式。
包括兩(liǎng)個方面(miàn)：一是使用行與列的形式來布局文本與圖像及其他的列表化數據；二是可以使用表格來精确控制各種(zhǒng)網頁元素于網頁之中出現的位置。
3.7 表單
網頁之中的表單一般用來接受用戶于浏覽器端的輸入，接著(zhe)把這(zhè)些信息發(fā)送到網頁設計者設置的目标端。這(zhè)個目标可以是文本文件、Web頁、電子郵件，亦可以是服務器端的應用程序。
表單一般用來收集聯系信息、接受用戶要求、獲得反饋意見、設置來賓簽名簿、讓浏覽者注冊爲會(huì)員并且以此會(huì)員的身份登錄站點等。
3.8 其他常見元素
包括懸停按鈕、Java特效、ActiveX等各種(zhǒng)特效。它們不但能(néng)點綴網頁，使網頁越來越活潑有趣，所以于網上娛樂、電子商務等方面(miàn)亦有著(zhe)不可忽視的作用。
4.1 文本編輯器
不但于記事(shì)本之中可以編寫HTML代碼，任何文本編輯器均可以編寫HTML。比如寫字闆、word等，但是保存的時(shí)候必需保存爲。html或是。htm格式。
有一些文本編輯器專門提供網頁制作以及程序設計等許多有用的功能(néng)，支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript、VBScript等多種(zhǒng)語法的著(zhe)色顯示。
例如：Sublime text3、EmEditor、EditPlus、UltraEdit
4.2 Dreamweaver網頁設計軟件
這(zhè)是現在使用最爲廣泛的網頁編輯工具之一。
Dreamweaver是Macromedia公司推出的網頁編輯工具。
它是一個所見即所得網頁編輯器，支持最新的DHTML（Dynamic HTML，動态HTML）與CSS标準。采用了多種(zhǒng)先進(jìn)技術，能(néng)夠迅速高效地創建較具表現力與動感效果的網頁，使網頁創作過(guò)程變得非常簡單。
另外還(hái)有Microsoft公司開(kāi)發(fā)的FrontPage亦是設計網頁與管理網站的軟件。除所見即所得的編輯功能(néng)以外，亦可以直接編輯HTML标記，讓設計者可以輕松的編輯網頁。
4.3 Photoshop圖像處理軟件
Photoshop是Adobe公司推出的功能(néng)強大的平面(miàn)圖像處理軟件，Photoshop于圖像編輯、視窗出版、網頁圖像編輯、廣告設計、婚紗攝影等各行各業的廣泛應用，它已經(jīng)成(chéng)爲許多涉及圖像處理的行業的事(shì)實标準。
4.4 Flash動畫設計軟件
Flash是Macromedia公司開(kāi)發(fā)的一款優秀的網頁動畫開(kāi)發(fā)軟件，自簡單的動畫到複雜的交互式Web應用程序，它使用戶可以創建任何作品。透過(guò)添加圖片、聲音與視頻，可以使Flash應用程序媒體豐富多彩。
Flash遭稱爲“最爲靈活的前台”，其獨特的編譯方式與跨平台的能(néng)力，廣泛的應用（軟件、遊戲、Web應用程序、多媒體娛樂等多方面(miàn)），使之愈來愈成(chéng)爲一種(zhǒng)重要的工具。
4.5 Fireworks網頁圖像處理軟件
Fireworks是Macromedia公司發(fā)布的一款專門作爲網絡圖形設計的圖形編輯軟件，使用Fireworks均不但可以輕松地制作出尺寸比較小的圖形、GIF動畫。
假如把Photoshop比作全能(néng)的圖像處理大師的話，Fireworks便是精于網頁圖像處理的專家。它于矢量圖形的處理方面(miàn)有其獨特之處。
于Web應用方面(miàn)，Fireworks是最爲早提供切片功能(néng)的圖像處理軟件。Fireworks支持于圖像中繪制熱區并且直接生成(chéng)網頁文檔，并具備簡單的GIF動畫制作能(néng)力，除此之外支持把動畫轉換爲Flash文件并且嵌入到網絡中播放。
5.1 CSS
CSS即層疊樣式表（CascadingStyle Sheet）。于主頁制作時(shí)采用CSS技術，可以有效地對(duì)于頁面(miàn)的布局、字體、顔色、背景與其它效果實現更爲精确的控制。
HTML=内容
CSS=表現
CSS帶來的好(hǎo)處：
CSS使頁面(miàn)載入越來越快；
CSS可以降低網站的流量費用；
CSS使設計師于修改設計時(shí)越來越有效率，因而代價越來越低；
CSS使整個站點保持視覺的一緻性；
5.2 JavaScript
JavaScript是改由 Netscape公司開(kāi)發(fā)的一種(zhǒng)腳本語言，可以遭嵌入HTML文件之中，它是一種(zhǒng)基于對(duì)象與事(shì)件驅動，并且具有安全性能(néng)的腳本語言。
于HTML基礎之上，使用JavaScript可以開(kāi)發(fā)交互式Web網頁，可以回應使用者的需求事(shì)件因而絕不需要透過(guò)網絡來回傳輸資料。
簡單地說(shuō)，如果用戶輸入一項信息時(shí)，絕不需要先行把信息傳給服務器處理，再次傳回來，或者可以直接遭客戶端的程序處理。
6.1 網頁布局
網頁布局是網頁設計的基礎，目前網頁的布局重要可歸爲三大類型：
1.分欄式結構
2.區域分布式結構
3.無框架局限式結構
分欄式布局
區域分布式布局
無框架局限式布局
6.2 導航設計
1.導航是網頁設計之中不可或缺的基礎元素之一。導航便如同一個網站的路标，有了它便絕不會(huì)于浏覽網站時(shí)“迷路”。導航鏈接著(zhe)各個頁面(miàn)，如果單擊導航之中的超級鏈接便能(néng)進(jìn)入相應的頁面(miàn)。
2.導航設計的好(hǎo)壞，決定著(zhe)用戶是否能(néng)非常方便地使用網站。導航設計應直觀明确，最爲大限度地作爲用戶使用考慮，盡量使網頁切換越來越便捷。導航的設計要符合整個網站的風格與要求，不同的網站會(huì)采用不同的導航方式。
3.一般來說(shuō)，于網頁的上端或是右側設置導航欄是較普遍的方式。網站采用上端文字當作一級導航，右側樹狀結構菜單作爲二級導航。
讓用戶了解當前所處的位置；
4.讓用戶能(néng)依據走過(guò)的路徑，确定之下一步的前進(jìn)方向(xiàng)與路徑；
5.絕不需要浏覽甚多的頁面(miàn)便能(néng)找到需要的信息，讓用戶能(néng)迅速因而簡捷地找到所需的信息，并且以此最佳的路徑到達這(zhè)些信息；
6.讓用戶使用網站遇到困難時(shí)，能(néng)尋求到解決困難的方法，找到最佳路徑；
7.讓用戶清楚地了解整個網站的結構概況，産生整體性感知；
8.對(duì)于使用頻率不同的信息作有序處理。
7.1 頁面(miàn)配色
設計精美的網站均有其色調構成(chéng)的總體傾向(xiàng)。以此一種(zhǒng)或是幾種(zhǒng)臨近顔色爲主導，使網頁全局呈現某種(zhǒng)和諧、統一的色彩傾向(xiàng)。
運用色系。先行依據網頁主題，選定一種(zhǒng)主色，接著(zhe)調整透明度或是飽和度，亦便是把色彩變淺或是加深，調配出新的色彩。這(zhè)樣的頁面(miàn)看起(qǐ)來色彩一緻，有層次感；一般來說(shuō)，适合在網頁标準色的顔色有3大系：藍色、黃/橙色與黑/灰/白色。
使用對(duì)比色。可以充分利用對(duì)于比色進(jìn)行設計，除此之外注意使用灰色調進(jìn)行調和。這(zhè)樣的作品頁面(miàn)色彩豐富。
7.2 文字藝術
文字于版面(miàn)之中一般占有絕大部分空間，是網頁信息的主要載體。處理好(hǎo)文字關系到網頁設計的成(chéng)敗。字體的選擇、字号的大小、文字的顔色、行和行的距離、段落和段落的安排，均需要認真考慮。好(hǎo)的文字設計會(huì)予網頁增色不少。
7.3 實例分析
1.網站描述
這(zhè)是一家航空公司的網站首頁。界面(miàn)設計給人現代、驿動的感覺，這(zhè)和公司的風格相互一緻。導航設計簡潔利落，非常值得學(xué)習借鑒。
2.布局
網頁布局采用的是較常見的分欄式結構。A作爲網站的Logo所在的區域；B作爲網站主菜雙所在的區域；C作爲搜索和其他公共功能(néng)所在的區域；D作爲網站的内容區域，重要改由文字與圖片組成(chéng)；E爲版權信息所在的區域。
3.配色
網頁選用藍色系，象征天空，和網站主題一緻。網頁重要運用了兩(liǎng)種(zhǒng)藍色，依次是“#14397D”與“1E95BD”。除此之外，網頁文字的配色重要以此白色與藍色爲主。
