- 網頁設計與網站建設完全實用手冊
- 孫東梅等編著
- 15字
- 2018-12-27 19:35:38
第1篇 網頁設計與網站建設入門篇
第1章 網頁設計與網站建設基礎
本章導讀
網頁對大多數網民來說并不陌生，但常見的網站類型、網站建設的基本流程、常用的網頁制作工具等并不是每個網民都知道。為了能夠使網頁制作初學者對網頁設計和網站建設有一個總體認識，從而為后面設計更復雜的網站打下良好的基礎。
內容要點
◎ 熟悉常見的網站類型
◎ 熟悉常用網頁設計軟件和技術
◎ 掌握網站建設的一般流程
學習流程
1.1 常見的網站類型
網站就是把一個個網頁系統地鏈接起來的集合，如新浪、搜狐、網易等。網站按其內容的不同可分為個人網站、企業類網站、機構類網站、娛樂休閑類網站、行業信息類網站、門戶網站和購物類網站等，下面分別進行介紹。
1.1.1 個人網站
個人網站是以個人名義開發創建的具有較強個性化的網站。一般是個人為了興趣愛好或展示個人等目的而創建的，具有較強的個性化特色，帶有很明顯的個人色彩，無論從內容、風格、樣式上都形色各異、包羅萬象。
這類網站一般不具有商業性質，通常規模不大，在互聯網中隨處可見，也有不少優秀的站點，圖1-1所示為個人網站。
1.1.2 企業類網站
所謂企業網站，就是企業在互聯網上進行網絡建設和形象宣傳的平臺。企業網站就相當于一個企業的網絡名片。企業網站不但對企業的形象是一個良好的宣傳，同時可以輔助企業的銷售，甚至可以通過網絡直接幫助企業實現產品的銷售。企業網站的作用為展現公司形象，加強客戶服務，完善網絡業務，圖1-2所示為企業類網站。
企業網站的作用類似于企業在報紙和電視上所做的宣傳公司本身及品牌的廣告。不同之處在于企業網站容量更大，企業幾乎可以把任何想讓客戶及公眾知道的內容放入網站。
圖1-1 個人網站
圖1-2 企業類網站
1.1.3 機構類網站
所謂機構類網站通常指政府機關、非營利性機構或相關社團組織建立的網站，網站的內容多以機構或社團的形象宣傳和政府服務為主，網站的設計通常風格一致、功能明確，受眾面也較為明確，內容上相對較為專一，圖1-3所示為機構類網站。
政府機構類網站作為政府提供為民服務的窗口，是有別于娛樂類網站的，作為機構網站，應該大方、莊重、美觀，切忌花哨和笨重，格調明朗。在頁面設計時要采用友好的網站界面，合理、清晰的網站導航，完善的幫助系統，完整的信息和完善的在線服務等，方便網站用戶。
圖1-3 機構類網站
1.1.4 娛樂休閑類網站
隨著互聯網的飛速發展，不僅涌現出了很多個人網站和商業網站，同時也產生了很多的娛樂休閑類網站，如電影網站、音樂網站、游戲網站、交友網站、社區論壇、手機短信網站等。這些網站為廣大網民提供了娛樂休閑的場所。
它們提供豐富多彩的娛樂內容。這類網站的特點也非常顯著，通常色彩鮮艷明快，內容綜合，多配以大量圖片，設計風格或輕松活潑，或時尚另類，圖1-4所示為在線視頻網站。
娛樂網站的設計要以內容為著手點，在網站設計規劃前，首先要對信息內容進行必要的分析，探討網站的定位和采用的設計方式，并且通過色彩、圖像和細節設計等多個方面共同營造符合網站信息內容的文化氣質。
圖1-4 在線視頻網站
1.1.5 行業信息類網站
隨著互聯網的發展、網民人數的增多及網上不同興趣群體的形成，門戶網站已經明顯不能滿足不同上網群體的需要。一批能夠滿足某一特定領域上網人群及其特定需要的網站應運而生。由于這些網站的內容服務更為專一和深入，因此人們將其稱為行業信息類網站，也稱為垂直網站。行業信息類網站只專注于某一特定領域，并通過提供特定的服務內容，有效地把對某一特定領域感興趣的用戶與其他網民區分開，并長期持久地吸引這些用戶，從而為其發展提供理想的平臺，圖1-5所示是行業信息類網站搜房網。
圖1-5 行業信息類網站搜房網
1.1.6 購物類網站
隨著網絡的普及和人們生活水平的提高，網上購物已成為一種時尚。豐富多彩的網上資源、價格實惠的打折商品、服務優良送貨上門的購物方式，已成為人們休閑、購物兩不誤的首選方式。網上購物也為商家有效地利用資金提供了幫助，而且通過互聯網來宣傳自己的產品覆蓋面較廣，因此現實生活中涌現出了越來越多的購物網站。
在線購物網站在技術上要求非常嚴格，其工作流程主要包括商品展示、商品瀏覽、添加購物車、結賬等，圖1-6所示為購物類網站。
圖1-6 購物類網站
1.1.7 門戶類網站
門戶類網站將無數信息整合、分類，為上網者打開方便之門，絕大多數網民通過門戶類網站來尋找自己感興趣的信息資源，巨大的訪問量給這類網站帶來了無限的商機。門戶類網站涉及的領域非常廣，是一種綜合性網站，如搜狐、網易、新浪等。此外這類網站還具有非常強大的服務功能，如搜索、論壇、聊天室、電子郵箱、虛擬社區、短信等。門戶類網站的外觀通常整潔大方，用戶所需的信息在上面基本都能找到。
目前國內較有影響力的門戶類網站有很多，如新浪（www.sina.com.cn）、搜狐（www.sohu. com）和網易（www.163.com）等，圖1-7所示為新浪首頁。
圖1-7 新浪首頁
1.2常用網頁設計軟件和技術
不論是制作大型網站還是一般的企業網站，無非都是做出一個又一個的網頁，再把它們鏈接起來。制作網頁可以直接使用HTML，也可以使用工具軟件。由于使用語言工作量很大，制作一個頁面往往要寫成百上千行代碼，非常麻煩，而且出錯率高，錯誤也不易檢測和排除。所以，對于大多數人來說，使用工具軟件制作網頁是最常用的。
用于設計網頁的工具軟件很多，如Adobe公司的Dreamweaver、Flash、Fireworks，以及微軟公司的FrontPage等，都是很受歡迎的網頁制作工具，擁有龐大的用戶群。
1.2.1 網頁編輯排版軟件
常用的網頁編輯排版軟件有Dreamweaver和FrontPage。Dreamweaver是大眾化的專業網頁編輯排版軟件，它的排版能力較強，功能全面，操作靈活，專業性強，因而受到廣大網站專業設計人員的青睞。FrontPage作為Microsoft公司的辦公軟件之一，與Office的其他軟件具有高度的兼容性，且有規范、簡潔的操作界面，但網頁制作方面的功能不如Dreamweaver強大。使用Dreamweaver CS5編輯網頁如圖1-8所示。
圖1-8 使用Dreamweaver CS5編輯網頁
1.2.2 網頁動畫制作軟件
隨著網絡技術的發展，網頁上出現了越來越多的Flash動畫。一個優秀的網站是離不開動畫的，無論是Banner、按鈕、網站宣傳動畫，還是整個網站的首頁等，都需要使用動畫制作軟件。Flash動畫已經成為當今網站必不可少的部分，美觀的動畫能夠為網頁增色不少，從而吸引更多的瀏覽者。使用Flash CS5制作的動畫如圖1-9所示。
圖1-9 Flash CS5制作的動畫
1.2.3 網頁圖像設計軟件
常用的圖像設計軟件有Photoshop和Fireworks。Photoshop是Adobe公司推出的圖像處理軟件。它具有界面友好、易學、易用等優點，目前已被廣泛應用于印刷、廣告設計、封面制作、網頁圖像制作和照片編輯等領域。在網頁制作過程中，首先要使用Photoshop設計網頁的整體效果圖、處理網頁中的圖像、背景圖處理、網頁圖標和按鈕的設計等。使用Photoshop CS5設計的網頁圖像效果如圖1-10所示。
圖1-10 Photoshop CS5設計的網頁圖像
Fireworks CS5是一款用來設計網頁圖形的應用程序，它所含的創新性解決方案解決了圖形設計人員和網站管理人員面臨的主要問題。Fireworks中的工具種類齊全，使用這些工具，可以在單個文件中創建和編輯位圖和矢量圖像，設計網頁效果、修剪和優化圖形以減小其文件大小。Fireworks CS5的工作界面如圖1-11所示。
圖1-11 Fireworks CS5的工作界面
1.2.4 網頁標記語言HTML
HTML（Hyper Text Markup Language，超文本標記語言）是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺。所謂超文本，就是它可以加入圖片、聲音、動畫、影視等內容。
HTML的任何標記都由“<”和“>”圍起來，如<HTML><I>。在起始標記的標記名前加上符號“/”便是其終止標記，如</I>，夾在起始標記和終止標記之間的內容受標記的控制，如<I>一路順風</I>，夾在標記I之間的“一路順風”將受標記I的控制。
超文本文檔分為頭和主體兩部分，在文檔頭中，對這個文檔進行了一些必要的定義，文檔主體中才是要顯示的各種文檔信息，代碼如下：
<HTML>
<HEAD>
網頁頭部信息
</HEAD>
<BODY>
網頁主體正文部分
</BODY>
</HTML>
● HTML標記
<HTML>標記用于HTML文檔的最前面，用來標識HTML文檔的開始。而</HTML>標記恰恰相反，它放在HTML文檔的最后面，用來標識HTML文檔的結束，兩個標記必須一起使用。
● Head標記
<Head>和</Head>構成HTML文檔的開頭部分，在此標記對之間可以使用<Title></Title>、<Script></Script>等標記對，它們都是用來描述HTML文檔相關信息的標記對，<Head></Head>標記對之間的內容不會在瀏覽器中顯示，兩個標記必須一塊使用。
● Body標記
<Body></Body>是HTML文檔的主體部分，在此標記對之間可包含<p> </p>、<h1> </h1>、<br> </br>等眾多的標記，它們所定義的文本、圖像等將在瀏覽器中顯示，兩個標記必須一起使用。
● Title標記
使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊藍色部分顯示的文本信息，那些信息一般是網頁的“標題”，要將網頁的標題顯示到瀏覽器的頂部其實很簡單，只要在<Title></Title>標記對之間加入要顯示的文本即可。
1.2.5 網頁腳本語言
使用VBScript、JavaScript等簡單易懂的腳本語言，結合HTML代碼，即可快速完成網站的應用程序。
腳本語言（如JavaScript，VBScript等）介于HTML和C、C++、Java、C#等編程語言之間。腳本是使用一種特定的描述性語言，依據一定的格式編寫的可執行文件，又稱為宏或批處理文件。腳本通?？梢杂蓱贸绦蚺R時調用并執行。各類腳本目前被廣泛地應用于網頁設計中，因為腳本不僅可以減小網頁的規模和提高網頁瀏覽速度，而且可以豐富網頁的表現，如動畫、聲音等。
腳本與VB、C語言的區別主要是：
● 腳本語法比較簡單，容易掌握。
● 腳本與應用程序密切相關，所以包括相對應用程序自身的功能。
● 腳本一般不具備通用性，所能處理的問題范圍有限。
● 腳本多為解釋執行。
圖1-12所示為使用腳本語言制作的特效漂浮廣告網頁。
圖1-12 使用腳本語言制作的漂浮廣告網頁
1.2.6 動態網頁編程語言ASP
所謂動態網頁是指網頁文件中包含了程序代碼，通過后臺數據庫與Web服務器的信息交互，由后臺數據庫提供實時數據更新和數據查詢服務。這種網頁的擴展名一般根據不同的程序設計語言而有所不同，如常見的以.asp、.jsp、.php、.perl、.cgi等形式為擴展名。
ASP（Active Server Pages）是微軟公司開發的服務器端腳本環境，內含IIS3.0及以上版本，通過ASP可以結合HTML網頁、ASP指令和ActiveX控件，建立動態、交互且高效的Web服務器應用程序。有了ASP就不必擔心客戶的瀏覽器是否能夠運行所有編寫代碼，因為所有的程序都將在服務器端執行，包括所有嵌在普通HTML中的腳本程序。當程序執行完畢后，服務器僅將執行的結果返回給客戶端瀏覽器，這樣就減輕了客戶端瀏覽器的負擔，大大提高了交互為速度。
圖1-13 所示為使用ASP開發的動態網頁，在“用戶名”和“密碼”文本框中輸入正確的內容，然后單擊“登錄”按鈕，即可進入后臺管理頁面。
圖1-13 使用ASP開發的動態網頁
1.3網站建設的一般流程
創建一個網站并不復雜，但要創建一個優秀的網站則并非易事。創建網站前了解一下網站建設的基本流程是十分必要的。因為網站建設流程可以明確網站的目標和方向，提高效率，使網站的結構更加清晰，起到事半功倍的效果。
1.3.1 網站的需求分析
不論是簡單的個人主頁，還是復雜的、幾千個頁面的大型網站，對網站的需求分析都要放到第一步，因為它直接關系到網站的功能是否完善、是否夠層次、是否達到預期的目的等。
需求分析是指通過分析單位的戰略目標和管理情況，確定網絡建設的必要性、目標、功能和主要工作等。因為網站對外樹立形象、發布重大信息、提供技術支持、客戶服務甚至進行電子商務等，所以只有詳細了解和分析需求才能設計出適合自己特點的網站，對于大型商業網站還要進行可行性研究。
網站的需求分析主要包括以下幾點。
● 了解相關行業的市場是怎樣的，市場有什么樣的特點，是否能夠在互聯網上開展公司業務。
● 市場主要競爭者分析，分析競爭對手上網情況及其網站規劃、功能作用。
● 確定網站建設的目的是為了宣傳產品，進行電子商務，還是建立行業性網站。
● 確定哪些人應該參與網站開發項目的需求分析活動。
● 在需求分析的工程中，往往有很多不明確的用戶需求，這時項目負責人需要調查用戶的實際情況，明確用戶需求。
● 通過市場調研活動，分析同類網站的功能，可以幫助項目負責人更加清楚地構想出自己開發的網站的大體架構和模樣，在總結同類網站優勢和缺點的同時，博采眾長，開發出更加優秀的網站。
1.3.2 規劃站點結構
網站規劃是網站開發必不可少的重要一環，直接關系到整個網站的整體風格、布局結構等，規劃內容包括顏色風格傾向、網站欄目設置、結構布局及功能實現等。如果是公司網站或商業網站還需要進行網站客戶分析、目標定位、營銷方案、網站品牌規劃、軟/硬件配置及數據庫開發方案，如果是電子商務網站，還需要進行電子商務方案分析與確定。圖1-14所示為規劃的站點結構。
圖1-14 規劃的站點結構
目前大多數網站缺乏靈魂，主旨松散、混亂，原因就在于缺乏策劃。在建立自己的企業站點時，網站策劃貫穿于網站建設的全過程，是網站建設最重要的環節，也是最容易被企業忽視的環節。
規劃一個網站，可以用樹狀結構先把每個頁面的內容大綱列出來，尤其當要制作一個很大的網站（有很多頁面）時，必須把這個架構規劃好，也要考慮到以后可能的擴充性，免得做好以后又要一改再改，這樣十分累人，也十分費錢。
大綱列出來后，還必須考慮每個頁面之間的鏈接關系，是星形、樹形還是網形鏈接，這也是判別一個網站優劣的重要標志。
1.3.3 收集素材
網頁制作之前要收集好相關的素材，對收集的素材進行分類管理。首先要創建一個新的總目錄（文件夾），比如D:\我的網站，來放置建立網站的所有文件，然后在這個目錄下建立兩個子目錄，即“文字資料”和“圖片資料”。放入目錄中的文件名最好全部用英文小寫，因為有些主機不支持大寫和中文，以后增加的內容可再創建子目錄。
1.文本內容素材的收集
具體的文本內容，可以讓訪問者清楚地知道作者的Web頁中想要說明的東西。我們可以從網絡、書本、報刊上找到需要的文字材料，也可以使用平時的試卷和復習資料，還可以自己編寫有關的文字材料，將這些素材制作成Word文檔保存在“文字資料”子目錄下。收集的文本素材既要豐富，又要便于有機地組織，這樣才能做出內容豐富、整體感強的網站。
2.藝術內容素材的收集
只有文本內容的網站對于訪問者來講，是枯燥乏味、缺乏生機的。如果加上藝術內容素材，如靜態圖片、動態圖像、音像等，將使網頁充滿動感與生機，也將吸引更多的訪問者。這些素材主要來自于以下4個方面。
● 從Internet上獲取?？梢猿浞掷镁W上的共享資源，如使用百度、Sohu等引擎收集圖片素材。圖1-15所示為從百度搜索素材。
圖1-15 從百度搜索素材
● 從CD-ROM中獲取。在市面上，有許多關于圖片素材庫的光盤，也有許多教學軟件，可以選取其中的圖片資料。
● 利用現成圖片或自己拍攝。既可以從各種圖書出版物（如科普讀物、教科書、雜志封面、攝影集、攝影雜志等）獲取圖片，也可以使用自己拍攝和積累的照片資料。將雜志的封面彩圖用彩色掃描儀掃描下來，經過加工后，整合制作到網頁中。
● 自己動手制作一些特殊效果的圖片，特別是動態圖像，自己動手制作往往效果更好?？刹捎?ds Max或Flash進行制作。
鑒于網上只能支持幾種圖片格式，所以可先將以上途徑收集的圖片用Photoshop等圖像處理工具轉換成JPG、GIF形式，再保存到“圖片資料”子目錄下。另外，圖片應盡量精美而小巧，不要盲目追求大而全，要以在網頁的美觀與網絡的速度兩者之間取得良好的平衡為宜。
提示
搜集素材是網站建設關鍵性一步，要學會搜集素材的方法與方式，并且能分類保存、整理需要的素材，切不可引用一些不健康或是過于花哨的動畫圖片素材。
1.3.4 設計網頁圖像
在確定好網站的風格和搜集完資料后就需要設計網頁圖像了，網頁圖像設計包括Logo、標準色彩、標準字、導航條和首頁布局等?？梢允褂肞hotoshop或Fireworks軟件來具體設計網站的圖像。有經驗的網頁設計者，通常會在使用網頁制作工具制作網頁前，設計好網頁的整體布局，這樣在具體設計過程中將會胸有成竹，大大節省工作時間。圖1-16所示為設計的網頁按鈕圖像。
圖1-16 設計的網頁按鈕圖像
1.3.5 制作網頁
網頁制作是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜的順序制作。所謂先大后小，就是說在制作網頁時，先把大的結構設計好，然后再逐步完善小的結構設計。所謂先簡單后復雜，就是先設計出簡單的內容，然后再設計復雜的內容，以便出現問題時好修改。在制作網頁時要靈活運用模板和庫，這樣可以大大提高制作效率。如果很多網頁都使用相同的版面設計，就應為這個版面設計一個模板，然后就可以以此模板為基礎創建網頁了。以后如果想要改變這些網頁的版面設計，只需簡單地改變模板即可。圖1-17所示為利用Dreamweaver CS5制作的網頁。
1.3.6 開發動態網站模塊
頁面設計制作完成后，如果還需要動態功能的話，就需要開發動態功能模塊。網站中常用的功能模塊有新聞發布系統、搜索功能、留言板、產品展示管理系統、在線調查系統、在線購物、會員注冊管理系統、招聘系統、統計系統、留言系統、論壇及聊天室等。圖1-18所示為開發的動態購物模塊。
圖1-17 利用Dreamweaver CS5制作的網頁
圖1-18 動態購物模塊
1.3.7 申請域名和服務器空間
要想擁有屬于自己的網站，首先要擁有域名。域名在互聯網上代表名字，只有靠這個名字，別人才可以在互聯網上與你接觸和溝通。域名是Internet上的服務器或網絡系統的名字，在全世界沒有重復的域名。域名是以若干個英文字母和數字組成，由“.”分隔成幾部分，如sina.com就是域名。
Internet域名如同商標，是互聯網上的標志之一。Internet上的域名是非常有限的，因為每個域名都只有一個。
注冊域名之后，下一步就是為網站申請空間，其實就是經常說的主機。這個主機必須是一臺功能相當的服務器級的電腦，并且要用專線或其他的形式24小時與互聯網相連。
這臺網絡服務器除存放公司的網頁為瀏覽者提供瀏覽服務之外，同時充當“電子郵局”的角色，負責收發公司的電子郵件。還可以在服務器上添加各種各樣的網絡服務功能，前提是有足夠的技術支持。
有以下兩種常見的主機類型。
● 主機托管：將購置的網絡服務器托管于網絡服務機構，每年支付一定數額的費用。要架設一臺最基本的服務器，在購置成本上，可能已需要數萬元，而在配套軟件的購置上，更要花上一筆相當高的費用。另外還需要聘請技術人員負責網站建設及維護。如果是中小企業網站，不必采用這種方式。
● 虛擬主機：使用虛擬主機，不僅節省了購買相關軟、硬件設施的費用，公司也無須招聘或培訓更多的專業人員，因而其成本也較主機托管低得多。不過，虛擬主機只適合于小型、結構較簡單的網站，對于大型網站來說還應該采用主機托管的形式，否則在網站管理上會十分麻煩。
1.3.8 網站的測試
在網站發布之前，通常都會檢查網頁在不同版本瀏覽器下的顯示情況。尤其是制作大型的或訪問量高的網站，這個步驟十分必要。由于各種版本的瀏覽器支持的HTML語言的版本不同，所以要讓網頁能夠在大多數瀏覽器中順利顯示，就不得不做盡可能仔細的檢查，必要時還得舍棄一些較新的效果。
1.3.9 網站的推廣
網站推廣的目的在于讓盡可能多的潛在用戶了解并訪問網站，通過網站獲得有關產品和服務等信息，為最終形成購買決策提供支持。網站推廣需要借助一定的網絡工具和資源，常用的網站推廣工具和資源包括搜索引擎、分類目錄、電子郵件、網站鏈接、在線黃頁和分類廣告、電子書、免費軟件、網絡廣告媒體、傳統推廣渠道等。所有的網站推廣方法實際上都是對某種網站推廣手段和工具的合理利用，因此制定和實施有效的網站推廣方法的基礎是對各種網站推廣工具和資源的充分認識和合理應用。
1.搜索引擎注冊
大多數網民采用搜索的方法是在各大搜索引擎站點進行搜索查找。網絡上的搜索引擎成千上萬，可以使用AddWeb或“登陸奇兵”之類專門軟件快速把網站注冊到各種搜索引擎，還可以自己手工登錄幾個知名的搜索引擎，如Yahoo、MSN、一搜、搜狐、網易、中華網和中搜等，只要將本地站點登錄到各大搜索引擎站點就能達到站點推廣的目的。目前，比較著名和通用的搜索引擎站點分別是www.google.com和www.baidu.com。
2.在網站上做廣告
網絡廣告是常用的網絡營銷策略之一，在網絡品牌、產品促銷、網站推廣等方面均有明顯作用。網絡廣告的常見形式包括Banner廣告、關鍵字廣告、分類廣告、贊助式廣告和E-mail廣告等。網絡廣告最常見的表現方式是圖形廣告，如各門戶站點主頁上部的橫幅廣告。
3.利用友情鏈接推廣
和眾多網站建立友情鏈接，無疑是網站推廣最有效、最經濟的辦法，除了互相從對方獲得流量外，它還可以使網站很快被大量搜索引擎收錄，能夠更好地促進網站的推廣。
4.利用論壇帖子推廣
Internet上各種各樣的論壇都有，如果有時間，可以找一些與公司產品相關并且訪問人數比較多的論壇，注冊登錄并在論壇中輸入公司的一些基本信息，如網址、產品等。
此外還有直接跟客戶宣傳、群發郵件、網絡廣告、報紙和戶外廣告等幾種推廣方式。