模塊一 鑒賞網頁

【學習目標】

鑒賞各種不同的網頁，從中感受不同類別的網站的風格與特色。從而了解網站發展的歷史與現狀，并熟悉了解一些網站的相關基礎知識。

【任務分析】

鑒賞網頁。

【任務實施】

任務一 鑒賞網頁

1.網頁與網站

（1）網頁是Internet中最基本的信息單位，是構成網站的基本元素，是把文字、圖形、聲音及動畫等各種多媒體信息相互鏈接起來的一種信息表達方式，是承載各種網站應用的平臺。通常情況下，網頁中有文字和圖像等基本信息，有些網頁中還有聲音、視頻和動畫等多媒體內容。網頁一般由網站LOGO、廣告欄、導航欄和信息欄等部分組成，如圖1.1所示。

在訪問一個網站時，最先映入眼簾的網頁稱為網站的首頁。網站的首頁有的用于歡迎訪問者，有的用于體現網站的個性，還有的用于選擇網站語言等功能，如圖1.2所示。

首頁只是網頁的開場頁，單擊首頁上的文字或圖片，即可打開網站的主頁，如圖1.3所示首頁隨之關閉。

網站主頁與首頁的區別在于：主頁設有網站的導航欄，是所有網頁的鏈接中心。但多數網站的首頁與主頁通常合并為一個頁面，省略了首頁而直接顯示主頁，這種情況下，首頁與主頁指的是同一個頁面。

（2）網站就是在Internet上，根據一定的規則，使用HTML等工具制作的通過超級鏈接的形式構成的相關網頁的集合。簡單說，網站是一種通信工具，就像布告欄一樣，人們可以通過網站來發布自己想要公開的資訊，也可以通過網頁瀏覽器訪問網站，獲取自己需要的資源或享受網絡提供的服務。

根據內容形式與功能結構的不同，基本可以將網站分成九大類別：資訊門戶類網站、企業品牌類網站、交易類網站、社區網站、辦公及政府機構網站、互動游戲網站、有償資訊類網站、功能性網站和綜合類網站等。

● 資訊門戶類網站。

此類網站以提供信息資訊為主要目的，是目前最普遍的網站形式之一。這類網站雖然涵蓋的工作類型多，信息量大，訪問群體廣，但所包含的功能卻比較簡單。其基本功能通常包含檢索、論壇、留言，也有一些提供簡單的瀏覽權限控制，如許多企業網站中就有只對代理商開放的欄目或頻道。如新浪、搜狐、新華網等。

● 企業品牌類網站。

企業品牌網站建設要求展示企業綜合實力，體現企業CIS和品牌理念。企業品牌網站非常強調創意，對于美工設計要求較高，精美的Flash動畫是常用的表現形式。對網站內容組織策劃，產品展示體驗方面也有較高要求。網站利用多媒體交互技術和動態網頁技術對目標客戶進行內容建設，以達到品牌營銷傳播的目的。如聯想、IBM、NIKE等企業品牌的官方網站。

● 交易類網站。

這類網站是以實現交易為目的，以訂單為中心。交易的對象可以是企業（B2B），也可以是消費者（B2C）。這類網站有三項基本內容：①如何展示商品；②如何生成訂單；③如何執行訂單。因此，該類網站一般需要有產品管理、訂購管理、訂單管理、產品推薦、支付管理、收費管理、送發貨管理、會員管理等基本系統功能。功能復雜一點的可能還需要積分管理系統、VIP管理系統、CRM系統、MIS系統、ERP系統、商品銷售分析系統等。交易類網站成功與否的關鍵在于業務模型的優劣。企業為配合自己的營銷計劃搭建的電子商務平臺，也屬于這類網站。如淘寶、易趣、拍拍等。

● 社區網站。

社區網站指的是大型的擁有眾多分類內容的，并有很多注冊用戶的網站，和BBS類似。如貓撲、天涯等，此外一些大的門戶網站的論壇也屬于社區網站類型。

● 辦公及政府機構網站。

企業辦公事務類網站主要包括企業辦公事務管理系統、人力資源管理系統、辦公成本管理系統和網站管理系統。

政府機構類網站利用外部政務網與內部局域辦公網絡而運行。其基本功能有：提供多數據源接口，實現業務系統的數據整合；統一用戶管理，提供方便有效的訪問權限和管理權限體系；可以靈活設立下位子網站；實現復雜的信息發布管理流程。

網站面向社會公眾，既可提供辦事指南、政策法規、動態信息等，也可提供網上行政業務申報、辦理，相關數據查詢等。目前很多單位的內聯網網站還只能算簡單的資訊類網站，還需要為其加上一個多級的權限控制功能，采用B/S結構構建OA系統，即Web OA系統，才會變成辦公類網站。如首都之窗、北京稅務局網站。

● 互動游戲網站。

這是近年來國內逐漸風靡起來的一種網站。這類網站的投入根據所承載游戲的復雜程度來定，其發展趨勢是向超巨型方向發展，有的已經形成了獨立的網絡世界，讓玩家樂不思蜀，欲罷不能。

● 有償資訊類網站。

這類網站與資訊類網站有點相似，也是以提供資訊為主。所不同者在于其提供的資訊要求直接有償回報。這類網站的業務模型一般要求訪問者按次、按時間或按量付費。

● 功能性網站。

這是近年來興起的一種新型網站，Google即為其典型代表。這類網站的主要特征是將一個具有廣泛需求的功能擴展開來，開發一套強大的支撐體系，將該功能的實現推向極致。看似簡單的頁面實現，卻往往投入驚人，效益可觀。如百度。

● 綜合類網站。

這類網站的共同特點是提供兩個以上典型的服務，如新浪、搜狐。這類網站可以看做一個網站服務的大賣場，不同的服務由不同的服務商去提供。其首頁在設計時盡可能地將所能提供的服務都包含進來。

2.網站的風格與布局

（1）在對網頁插入各種元素、修飾效果之前，要先確定網頁的風格。網頁的風格是指網站給瀏覽者的整體形象，包括站點的CI（標志、色彩和字體）、版面布局、瀏覽方式、交互性、文字、內容及網站榮譽等諸多因素。例如，網易網站給人的感覺是平易近人的，迪士尼網站給人的感覺是生動活潑的，IBM網站給人的感覺是專業嚴肅的。

根據不同的網頁風格，可以將網頁分成商業網頁和個人網頁。商業網頁內容豐富、信息量大，一般都有統一的布局設計；個人網頁風格多樣、內容專一、形式靈活，更容易創造出美感，如圖1.4所示。

確定網頁風格后，要對網頁的布局進行整體規劃，也就是網頁上的網站標志、導航欄及菜單等元素的位置。不同網頁的各種網頁元素所處的位置也不同，通常情況下，重要的元素應放在突出的位置。

（2）常見的網頁布局有“國”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、海報型布局、Flash布局、標題文本型布局、框架型布局和變化型布局等。

● “國”字形布局。

如圖1.5所示，也可以稱為“同”字形，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種結構是網上最常見的一種結構類型。

● “匡”字形布局。

如圖1.6所示，這種結構與“國”字形布局其實只是形式上的區別，它去掉了“國”字形布局的最右側部分，為主內容區釋放了更多空間。這種布局中最上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。

● “三”字形布局。

如圖1.7所示，這是一種簡潔明快的網頁布局，國外網站用得較多，國內比較少見。這種布局的特點是在頁面上由橫向兩條色塊將網頁整體分割為3部分，色塊中大多放置廣告條與更新和版權提示。

● “川”字形布局。

如圖1.8所示，整個頁面在垂直方向上分為三列，網站的內容按欄目分布在這三列中，最大限度地突出主頁的索引功能。

● 海報型布局。

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

● Flash布局。

如圖1.10所示，這種布局是指整個網頁就是一個Flash動畫，本身就是動態的，畫面一般比較絢麗有趣，是一種比較新潮的布局方式。其實這種布局與海報型布局類似，不同的是借助Flash強大的功能，頁面所能表達的信息更豐富。其視覺效果及聽覺效果如果處理得當，將會是一種非常有魅力的布局。

● 標題文本型布局。

如圖1.11所示，標題文本型布局是指頁面內容以文本為主，這種類型頁面最上面往往是標題或類似的東西，下面是正文，如一些文章頁面或注冊頁面等就是這一類。

● 框架型布局。

框架布局結構中常見的有左右框架型、上下框架型和綜合框架型。由于兼容性和美觀等因素，這種布局目前專業設計人員采用的已不多，不過在一些大型論壇上還是比較受歡迎的，有些企業網站也有應用。

● 變化型布局。

即上述幾種類型的結合與變化。

【知識鏈接】

1.網頁制作技術

近來，網頁已隨處可見，網頁的功能與用途也已發展到一定程度，與此同時網頁開發技術也在不斷發展著。

HTML語言是一種早期的用于Web頁制作的編程語言，用于描述超文本文件的部分內容，以編寫程序代碼為主，生成一些簡單的文本以及圖像鏈接點，該代碼可以直接在記事本中編寫。HTML語言有著簡單精煉的語法、極易掌握的通用性與易學性。

層疊樣式表（Cascading Style Sheets，CSS），可定義HTML元素如何被顯示，類似font標簽在HTML中所起到的作用。樣式通常被保存在HTML文檔之外的文件中。外部樣式表使用戶有能力僅僅通過編輯一個簡單的CSS文檔來改變網站內所有頁面的外觀和布局。如果用戶曾經嘗試過進行某些改變，如同時改變站內所有網頁標題的字體或顏色，就會明白CSS如何能夠達到事半功倍的效果。

XHTML——HTML的未來，XHTML指可擴展超文本標記語言（Extensible HyperText Markup Language）。XHTML源自W3C的最新的HTML標準。它于2000年1月26日成為正式的推薦標準（Recommendation）。W3C Recommendation意味著其規范的穩定性，同時其規范目前已成為一種Web標準。XHTML是一種使用XML進行重構的HTML 4.01，并可以通過遵循一些簡單的指導方針立即在現有的瀏覽器中投入使用。

XML——用于描述數據的工具，擴展標記語言（XML）并不是HTML的替代品。在未來的Web開發中，XML會被用來描述和存儲數據，而HTML會被用來顯示數據。對XML最合適的描述是，一個跨平臺的、獨立與軟硬件的，信息存儲和傳輸工具。對Wed來說， XML的重要性不亞于HTML，并且將會成為最重要的數據處理和傳輸工具。

客戶端腳本是一種有關因特網瀏覽器行為的編程。應先學習JavaScript后才能有能力傳遞更多的動態網站內容：JavaScript是為HTML設計者提供的一種的編程工具，JavaScript是一種語法非常簡單的腳本語言，幾乎任何人都能夠把某些JavaScript的代碼片斷放入HTML頁面中，JavaScript可以在HTML頁面中放入動態的文本。

結構化查詢語言（SQL）是對下列數據庫進行訪問的通用標準：SQL Server、Oracle、Sybase以及Access。任何Web管理員都應當明白，對于Web上的數據庫來說，SQL是一種真正的引擎。

2.網頁制作工具

● Microsoft FrontPage。

如果對Word很熟悉，那么用FrontPage進行網頁設計將會非常順手。使用FrontPage制作網頁，將能真正體會到“功能強大，簡單易用”的含義。頁面制作由FrontPage中的Editor完成，其工作窗口由三個標簽頁組成，分別是“所見即所得”的編輯頁，HTML代碼編輯頁和預覽頁。FrontPage帶有圖形和GIF動畫編輯器，支持CGI和CSS。向導和模板都能使初學者在編輯網頁時感到更加方便。FrontPage最強大之處是其站點管理功能。在更新服務器上的站點時，不需要創建更改文件的目錄。FrontPage將跟蹤文件并復制新版本的文件。FrontPage是現有網頁制作軟件中唯一既能在本地計算機上工作，又能通過Internet直接對遠程服務器上的文件進行工作的軟件。

● Netscape編輯器。

Netscape Communicator和Netscape Navigator Gold3.0版本都帶有網頁編輯器。如果用Netscape瀏覽器上網，那么使用Netscape編輯器將非常簡單方便！當用Netscape瀏覽器顯示網頁時，單擊“編輯”按鈕，Netscape就會將網頁存儲在硬盤中，然后就可以開始編輯了。也可以像使用Word那樣進行編輯文字、字體、顏色，改變主頁作者、標題、背景顏色或圖像，定義描點，插入鏈接，定義文檔編碼，插入圖像，創建表格等操作。但是，Netscape編輯器對復雜的網頁設計就顯得功能有限，甚至連表單創建、多框架創建都不支持。Netscape編輯器是網頁制作初學者很好的入門工具。如果網頁主要是由文本和圖片組成的，Netscape編輯器將是一個輕松的選擇。如果對HTML語言有所了解的話，能夠使用Notepad或Ultra Edit等文本編輯器來編寫少量的HTML語句，也可以彌補Netscape編輯器的一些不足。

● Dreamweaver CS3。

Dreamweaver CS3是一個很酷的網頁設計軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，支持動態HTML （Dynamic HTML）的設計，使得頁面沒有plug-in也能夠在Netscape和IE瀏覽器中正確地顯示頁面的動畫。同時它還提供了自動更新頁面信息的功能。Dreamweaver CS3還采用了Roundtrip HTML技術。這項技術使得網頁在Dreamweaver和HTML代碼編輯器之間進行自由轉換，HTML句法及結構不變。這樣，專業設計者可以在不改變原有編輯習慣的同時，充分享受到可視化編輯帶來的益處。Dreamweaver CS3最具挑戰性和生命力的是它的開放式設計，這項設計使任何人都可以輕易擴展它的功能。

● Fireworks。

Fireworks的出現使Web作圖發生了革命性的變化。Fireworks是專為網絡圖像設計而開發，內建豐富的支持網絡出版功能，如Fireworks能夠自動切圖、生成鼠標動態感應的javascript。而且Fireworks具有十分強大的動畫功能和一個幾乎完美的網絡圖像生成器（Export功能）。它增強了與Dreamweaver的聯系，可以直接生成Dreamweaver的Libaray甚至能夠導出為配合CSS式樣的網頁及圖片。

● Flash。

Flash是用在互聯網上動態的、可互動的shockwave。它的優點是體積小，可邊下載邊播放，這樣就避免了用戶長時間的等待。Flash可以用其生成動畫，還可在網頁中加入聲音。這樣就能生成多媒體的圖形和界面，而文件的體積卻很小。Flash雖然不能進行直接編程，但用其內置的語句并結合JavaScript，也可做出互動性很強的主頁來。

【教學評價】

【模塊作業】

瀏覽Internet網，感受網頁的強大功能，并注冊一個E-mail信箱，深切體會網頁的強大動態交互功能。

【問題探究】

如果由自己來制作一個“個人網站”，該如何制訂網站的風格和布局。