學習情境一 網站的管理與創建

任務一 網頁制作的相關概念

【知識目標】

（1）了解并掌握網頁制作的相關概念。

（2）了解網頁元素的種類。

【能力目標】

培養學生自主學習理論知識的能力。

【任務實施】

1.1 網頁制作相關概念

1．WWW簡介

萬維網（World Wide Web，亦稱Web、WWW、W3）是一個由許多互相鏈接的超文本組成的系統，通過互聯網進行訪問。在這個系統中，每個有用的事物均稱為“資源”；并且由一個全局“統一資源標識符”（Uniform Resource Identifiers, URI）標識；這些資源通過超文本傳輸協議（Hyper Text Transfer Protocol, HTTP）傳送給用戶，而后者通過單擊鏈接來獲得資源。萬維網聯盟（World Wide Web Consortium），簡稱W3C，又稱W3C理事會，于1994年10月在麻省理工學院（MIT）計算機科學實驗室成立。萬維網聯盟的創建者是萬維網的發明人蒂姆·伯納斯·李。

萬維網的核心部分是由以下3個標準構成的。

（1）統一資源標識符，這是一個統一的為資源定位的系統。

（2）超文本傳輸協議，它負責規定客戶端和服務器怎樣互相交流。

（3）超文本標記語言，作用是定義超文本文檔的結構和格式。

2．網頁

網頁是構成網站的基本元素，是承載各種網站應用的平臺。通俗地說，你的網站就是由網頁組成的，如果你只有域名和虛擬主機而沒有制作任何網頁，你的客戶仍舊無法訪問你的網站。

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

3．網站

因特網起源于美國國防部高級研究計劃管理局建立的阿帕網。網站（Website）開始是指在因特網上根據一定的規則，使用HTML（標準通用標記語言下的一個應用）等工具制作的用于展示特定內容相關網頁的集合。簡單地說，網站是一種溝通工具，人們可以通過網站來發布自己想要公開的資訊，或者利用網站來提供相關的網絡服務。人們可以通過網頁瀏覽器來訪問網站，獲取自己需要的資訊或者享受網絡服務。衡量一個網站的性能通常是從網站空間大小、網站位置、網站連接速度（俗稱“網速”）、網站軟件配置、網站提供服務等幾方面考慮，最直接的衡量標準是網站的真實流量。

4．靜態網頁與動態網頁

1）靜態網頁

靜態網頁也稱為普通網頁，是相對動態網頁而言的。靜態網頁不是指網頁中的元素都是靜止不動的，而是指網頁文件中沒有程序代碼，只有HTML（HyperText Markup Language，超文本標記語言）標記，一般后綴為．htm、.html、.shtml或．xml等。在靜態網頁中，可以包括GIF動畫，鼠標經過Flash按鈕時，按鈕可能會發生變化。

對于靜態網頁，用戶可以直接雙擊打開，看到的效果與訪問服務器是相同的，即服務器參加與否對頁面的內容是不會有影響的。這是因為在用戶訪問該網頁之前，網頁的內容就已經確定了，無論用戶何時、以怎樣的方式訪問，網頁的內容都不會再改變。

靜態網頁的工作流程可以分為以下4個步驟。

（1）編寫一個靜態文件，并在Web服務器上發布。

（2）用戶在瀏覽器的地址欄中輸入該靜態網頁的URL（Uniform Resource Locator，統一資源定位符）并按Enter鍵，瀏覽器發送請求到Web服務器。

（3）Web服務器找到此靜態文件的位置，并將它轉換為HTML流傳送到用戶的瀏覽器。

（4）瀏覽器收到HTML流后顯示此網頁的內容。

在步驟（2）～（4）中，靜態網頁的內容不會發生任何變化。其工作原理如圖1-1所示。

2）動態網頁

動態網頁是指在網頁文件中除了HTML標記外，還包括一些實現特定功能的程序代碼，這些程序代碼使得瀏覽器與服務器之間可以進行交互，即服務器端可以根據客戶端的不同請求動態產生網頁內容。動態網頁的后綴名通常根據所用的程序設計語言的不同而不同，一般為．asp、.aspx、cgi、.php、.perl、.jsp等。動態網頁可以根據不同的時間、不同的瀏覽者顯示不同的信息。常見的留言板、論壇、聊天室都是用動態網頁實現的。

動態網頁相對復雜，不能直接雙擊打開。動態網頁的工作流程分為以下4個步驟。

（1）編寫動態網頁文件，其中包括程序代碼，并在Web服務器上發布。

（2）用戶在瀏覽器的地址欄中輸入該動態網頁的URL并按Enter鍵，瀏覽器發送訪問請求到Web服務器。

（3）Web服務器找到此動態網頁的位置，并根據其中的程序代碼動態建立HTML流傳送到用戶瀏覽器。

（4）瀏覽器接收到HTML流后顯示此網頁的內容。

從整個工作流可以看出，用戶瀏覽動態網頁時，需要在服務器上動態執行該網頁文件，將含有程序代碼的動態網頁轉化為標準的靜態網頁，最后把靜態網頁發送給用戶。其工作原理如圖1-2所示。

5．HTML語言

HTML是WWW的描述語言。制作的網頁以．html或．htm為擴展名，它支持豐富的樣式表、腳本、框架、表格和表單等多種網頁元素，可以嵌入JavaScript語言等。

6．URL

在WWW上，每一信息資源都有統一的且在網上唯一的地址，該地址就叫URL，它是WWW的統一資源定位標志，就是指網絡地址。URL由三部分組成，即資源類型、存放資源的主機域名、資源文件名。在瀏覽器的地址欄里輸入網頁的URL，就可以訪問這個網頁了。例如，輸入網址http://www.sina.com.cn/index.html時，就是采用HTTP（協議）訪問新浪網的首頁。

7．IP地址

IP（Internet Protocol，網絡之間互聯的協議）也就是為計算機網絡相互連接進行通信而設計的協議。在因特網中，它是能使連接到網上的所有計算機網絡實現相互通信的一套規則，規定了計算機在因特網上進行通信時應當遵守的規則。任何廠家生產的計算機系統，只要遵守IP協議就可以與因特網互聯互通。正是因為有了IP協議，因特網才得以迅速發展成為世界上最大的、開放的計算機通信網絡。因此，IP協議也可以叫作“因特網協議”。

IP地址被用來給Internet上的計算機一個編號。大家日常見到的情況是每臺聯網的PC上都需要有IP地址，才能正常通信。可以把PC比作“一臺電話機”，那么“IP地址”就相當于“電話號碼”，而Internet中的路由器，就相當于電信局的“程控式交換機”。

IP地址是一個32位的二進制數，通常被分割為4個“8位二進制數”（也就是4個字節）。IP地址通常用“點分十進制”表示成（a.b.c.d）的形式，其中a、b、c、d是0～255之間的十進制整數。例如，點分十進制IP地址（100.4.5.6），實際上是32位二進制數（01100100.00000100.00000101.00000110）。

8．域名

域名（Domain Name），也簡稱網域，是由一串用點分隔的名字組成的Internet上某臺計算機或計算機組的名稱，用于在數據傳輸時標識計算機的電子方位（有時也指地理位置）。

網域名稱系統（Domain Name System, DNS，有時也簡稱為域名）是因特網的一項核心服務，它作為可以將域名和IP地址相互映射的一個分布式數據庫，能夠使人更方便地訪問互聯網，而不用去記住能夠被機器直接讀取的IP地址數串。

例如，www.wikipedia.org是一個域名，和IP地址208.80.152.2相對應。DNS就像一個自動的電話號碼簿，可以直接撥打wikipedia的名字來代替電話號碼（IP地址）。直接調用網站的名字后，DNS就會將便于人類使用的名字（如www.wikipedia.org）轉化成便于機器識別的IP地址（如208.80.152.2）。

1.2 網頁構成的基本元素

網頁由文本、圖像、動畫、超級鏈接等基本元素構成，本節將對這些基本元素進行簡單介紹，為后面各章中運用這些元素制作網頁奠定基礎。

1．文本

一般情況下，網頁中最多的內容是文本，可以根據需要對其字體、大小、顏色、底紋、邊框等屬性進行設置。建議用于網頁正文的文字一般不要太大，也不要使用過多的字體，中文文字一般可使用宋體，大小為9磅或12像素左右即可。

2．圖像

豐富多彩的圖像是美化網頁必不可少的元素，用于網頁上的圖像一般為JPG格式和GIF格式。網頁中的圖像主要用于點綴標題的小圖片、介紹性的圖片以及代表企業形象或欄目內容的標志性圖片，用于宣傳廣告等多種形式。

3．超級鏈接

超級鏈接是Web網頁的主要特色，是指從一個網頁指向另一個目的端的鏈接。這個“目的端”通常是另一個網頁，也可以是下列情況之一：相同網頁上的不同位置、一個下載的文件、一幅圖片、一個E-mail地址等。超級鏈接可以是文本、按鈕或圖片，鼠標指針指向超級鏈接位置時會變成小手形狀。

4．導航欄

導航欄是一組超級鏈接，用來方便地瀏覽站點。導航欄一般由多個按鈕或者多個文本超級鏈接組成。

5．動畫

動畫是網頁中最活躍的元素，創意出眾、制作精致的動畫是吸引瀏覽者眼球的最有效方法之一。但是如果網頁動畫太多，也會物極必反，使人眼花繚亂，進而產生視覺疲勞。

6．表格

表格是HTML語言中的一種元素，主要用于網頁內容的布局，組織整個網頁的外觀，通過表格可以精確地控制各網頁元素在網頁中的位置。

7．框架

框架是網頁的一種組織形式，將相互關聯的多個網頁內容組織在一個瀏覽器窗口中顯示。例如，在一個框架內放置導航欄，另一個框架中的內容可以隨單擊導航欄中的鏈接而改變。

8．表單

表單是用來收集訪問者信息或實現一些交互作用的網頁，瀏覽者填寫表單的方式是輸入文本、選中單選按鈕或復選框、從下拉菜單中選擇選項等。

網頁中除了上述這些最基本的構成元素外，還包括橫幅廣告、字幕、懸停按鈕、日戳、計算器、音頻、視頻、Java Applet等元素。

1.3 網頁的布局類型

網頁布局是網頁設計中最重要的一環，主要指網站主頁的版面布局，其他網頁應該與主頁風格基本一致。為了達到更好的視覺效果，應考慮布局的合理性，版面布局是整個頁面制作的關鍵。

常見的網頁布局形式有“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型。

（1）“國”字型。也可以稱為“同”字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右兩列可顯示內容簡短的欄目，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種結構是網上出現最多的一種結構類型。

（2）拐角型（“廠”字型）。這種結構與“國”字型只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是鏈接等內容，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的形式為：最上面是標題及廣告，左側是導航鏈接。

（3）標題正文型。這種類型最上面是標題或類似的一些東西，下面是正文，如一些文章頁面或注冊頁面等就是這種類型。

（4）左右框架型。這是一種左右分為兩頁的框架結構，一般左面是導航鏈接，有時最上面會有一個小的標題或標志，右面是正文。經常見到的大型論壇都是這種結構類型，有一些企業網站也喜歡采用。這種類型結構非常清晰，一目了然。

（5）上下框架型。與左右框架型類似，區別僅僅在于上下框架型是一種上、下分為兩頁的框架。

（6）綜合框架型。這是左右框架型與上下框架型兩種結構的結合，是相對復雜的一種框架結構，較為常見的是類似于“拐角型”結構的，只是采用了框架結構。

（7）封面型。這種類型經常出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大都出現在企業網站和個人主頁，如果處理得好，會給人帶來賞心悅目的感覺。

（8）Flash型。這與封面型結構是類似的，只是這種類型采用了目前非常流行的Flash，與封面型不同的是，由于Flash強大的功能，其頁面所表達的信息更豐富，如果視覺效果及聽覺效果處理得當，絕不亞于傳統的多媒體。

（9）變化型。即上面幾種類型的結合與變化，比如網站在視覺上是很接近拐角型的，但所實現的功能的實質是上、下、左、右結構的綜合框架型。

1.4 網站風格定位

網站整體風格指的是網站上的所有元素（頁面布局、標志、色彩搭配、字體、交互性等）組合后給人的視覺印象。風格是抽象的，企業網站的平易近人、迪士尼網站的生動活潑、門戶網站的嚴謹莊重都給人留下了深刻的印象。

一般網站的主題決定了內容的建設和結構的規劃，同時對網站風格的體現也有較大的影響。在網站風格展現中，需要注意以下3個方面。

（1）網站整體風格要保持一致。眾所周知，網站的首頁設計是網站設計的重點，但不能忽略了內容頁的建設。風格的統一要從網站的結構、色彩搭配、導航欄設計方面進行全面考慮。

（2）頁面的色彩搭配。色彩影響著人們對網站的第一印象，網站建設中使用同一組色彩搭配，會使網站的感覺更加和諧統一，能更清晰地體現網站的結構層次，使網站主題更加突出。

（3）網站版面的布局設計。可以把各種各樣的線條和形狀與網頁元素合理地搭配到一起，將網頁分割成很多區塊。合理設置網站LOGO、導航條、廣告，將重要的信息放置在網站的顯著位置，可使網站的內容井然有序、重點突出。

網站風格是對設計師藝術修養和感受力的一種檢驗。在提煉出網站的特色后，將其展現出來，就成了網站的風格。

1.5 網站的開發流程

一個網站的建設需要把很多細節結合在一起，只有把各步驟有序地完成，才能建成一個完整的網站。網站開發主要流程如圖1-3所示。

從業務員與客戶溝通、簽訂網站制作協議后，網站建設大體需要4個階段。

1．網站需求分析及策劃階段

這個階段是設計網站的重要階段，主要完成以下工作。

1）確定網站的主題、功能

主要與客戶積極溝通，明確網站建設的目的、功能、主題。設計是為主題服務的，既要“美”又要實現“功能”。只有主題確定了，才能設計網站的實現風格。然后選擇站點的色調、標志、字體、版面元素等的設計。

2）設計生成網頁效果圖

由網站美工生成網頁效果圖，與客戶溝通，不斷調整，達成共識，最終確定網站的設計效果，為下一階段的建設奠定基礎。

2．網站設計與制作階段

完成網站需求分析及策劃后，就可以開始建設網站了。建設網站主要分前臺和后臺兩大模塊。前臺網站設計以網頁效果圖為樣本，完成頁面版面的建立。后臺要應用恰當的語言做程序處理，從而完成特定的功能。這一階段主要完成以下工作。

1）規劃站點文件的目錄結構

將站點用到的各類素材及文件分門別類地組織起來，并放到相應的文件夾下，這就構成了站點的目錄結構，如圖1-4所示。

2）規劃各級頁面布局

根據需求分析設計的網頁效果圖，進行各級頁面的框架布局。重點采用DIV+CSS的布局方式實現。

3）制作前臺頁面

將收集整理的網頁各種元素、素材添加到布局框架中，實現前臺頁面。

4）添加后臺程序

為實現頁面的數據交互，還需編寫相應的程序實現網頁的動態功能。本書不涉及這部分內容。

3．測試發布階段

完成網站設計與制作后，就形成了網站的雛形，但不一定完善，所以需要對網站從用戶的角度做功能測試，發現問題后逐漸完善，就可以把網站上傳到虛擬主機空間里，這時通過域名就可以正式訪問網站了。

4．維護推廣階段

一個好的網站不是一次性就可以制作完成的，在運行過程中要對發現的問題不斷地修改，這就是網站維護的目的。維護主要針對網站的服務器、網站安全、網站內容等。當網站功能基本穩定后，就要做站外推廣工作，可以通過百度搜索引擎對網站進行推廣，還可以在其他網絡平臺進行互聯網推廣。

加油站

網頁創意設計思維

一個網站如果想在瀏覽者中確定自己的形象，就必須具有突出的個性，必須依靠網站自身獨特的創意，因此創意是網站存在的關鍵。好的創意能夠巧妙、恰當地表現主題、渲染氣氛、增添網頁的感染力，讓人過目不忘。

1．創意思維的原則

1）審美原則

好的創意必須具有審美性。一種創意如果不能給瀏覽者以好的審美感受，就不會產生好的效果。創意的審美原則要求所設計的內容健康、生動、符合人們審美觀念。

2）目標原則

創意自身必須與創意目標相吻合，創意必須能夠反映主題、表現主題。網頁設計必須具有明確的目標性。網頁設計的目的是為了更好地體現網站內容。

3）系列原則

系列原則符合“寓多樣于統一之中”這一形式美的基本法則，是在具有同一設計要素或同一造型、同一風格或同一色彩、同一格局等的基礎上進行連續的發展變化，既有重復的變遷，又有漸變的規律。這種系列變化，給人一種連續、統一的形式感，同時又具有一定的變化，體現了網站的整體運作能力和水平，增強了網站的固定印象和信任度。

4）簡潔原則

要做到簡潔原則：一是要明確主題，抓住重點，不能本末倒置、喧賓奪主；二是注意修飾得當，要做到含而不露、蓄而不發，以凝練、樸素、自然為美。

2．創意設計方法

在進行創意的工程中，需要設計人員新穎的思維方式。好的創意是在借鑒的基礎上利用已經獲得的設計形式，來豐富自己的知識，從而啟發創造性的設計思路。

1）富于聯想

聯想是藝術形式中最常用的表現手法。在設計過程中通過豐富的聯想，可擴大藝術形象的容量，加深畫面的意境。

2）巧用對比

對比是一種趨向于對立沖突的藝術表現手法。在網頁設計中加入不和諧的元素，把網頁作品中的特點元素放在鮮明的對照和直接對比中來表現，通過這種方法更鮮明地強調或提示網頁的特征，給瀏覽者留下深刻的視覺感受。

3）大膽夸張

夸張是把對象的特點和個性中美的方面進行夸大，賦予人們一種新奇的視覺感受，通過這種表現手法，為網頁的藝術美注入濃郁的感情色彩，使得網頁的特征更鮮明、更突出。

4）以人為本

藝術的感染力最直接左右的是感情因素，以人為本是使藝術加強傳達情感的表現手法，它以美好的感情來烘托主題，這是網頁設計中的文學側重和美的意境與情趣追求。

5）流行時尚

流行時尚的創意手法是通過鮮明的色彩、單純的形象以及編排上的節奏感來體現出流行的形式特點。

6）合理綜合

綜合是設計中廣泛應用的方法，它在分析各個構成要素的基礎上加以綜合，使綜合后的界面整體形式表現出創造性的新成果，追求和諧的美感。