第1章網(wǎng)站設計基礎

1、1 網(wǎng)頁設計 授課教師: 2 n主要學習內(nèi)容 網(wǎng)站設計基礎知識 Dreamweaver、Fireworks html語言 n如何學習這門課程 多實踐，多動手 多參考優(yōu)秀網(wǎng)站：如網(wǎng)易，sohu 3 1.1網(wǎng)頁設計相關知識 nwww n網(wǎng)頁的概念 n超文本(Hypertext) n網(wǎng)站的概念 n網(wǎng)頁瀏覽原理 n網(wǎng)頁組成要素 n網(wǎng)頁編輯工具 n網(wǎng)頁布局 n網(wǎng)頁的頁面與版面 4 WWW WWW (World Wide Web)并非某種 特殊的計算機網(wǎng)絡。萬維網(wǎng)是一個大規(guī)模 的、聯(lián)機式的信息儲藏所，英文簡稱為 Web。下圖說明了萬維網(wǎng)提供分布式服務 的特點。 5 WWW 6 WWW n萬維網(wǎng)是一個分布式

2、的(hypermedia)系統(tǒng)， 它是(hypertext)系統(tǒng)的擴充。 n萬維網(wǎng)以客戶服務器方式工作。 ， 。在一個客戶程序主窗口上 顯示出的萬維網(wǎng)文檔稱為(page)。 7 網(wǎng)頁的概念網(wǎng)頁的概念 n網(wǎng)頁網(wǎng)頁(Web Page)(Web Page)：是通過WWW發(fā)布的包含有文本、圖片、聲音、動畫 等多媒體信息的頁面，它是網(wǎng)站最基本的組成單位。眾多的網(wǎng)頁有機 地集合在一起就組成了網(wǎng)站。 n網(wǎng)頁的主要類型 HTML(HyperText Markup Language)全稱超文本標記語言，利用標記 （tag）來描述網(wǎng)頁的字體、大小、顏色及頁面布局的語言，使用任 何的文本編輯器都可以對它進行編輯，與

3、VB、C+等編程語言有著本 質(zhì)上的區(qū)別。 ASP (Active Server Pages )中文名為動態(tài)服務器主頁 ,它是一種 應用程序環(huán)境，可以利用 VBscript 或 Java Script 語言來設計， 主要用于網(wǎng)絡數(shù)據(jù)庫的查詢與管理。 JSP(Java Server Page)JSP 與 ASP 非常相似。不同之處之一在于 ASP 的編程語言是 VBScript 之類的腳本語言， 而 JSP 使用的 Java 。 8 靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁 n靜態(tài)網(wǎng)頁 純粹HTML格式的網(wǎng)頁 每個網(wǎng)頁都有一個固定的URL，網(wǎng)頁URL 以.htm、.html、.shtml等常見形式為后綴，且不含有 “?

4、” 也可以出現(xiàn)各種動態(tài)效果 n動態(tài)網(wǎng)頁 以數(shù)據(jù)庫技術為基礎，隨不同客戶、不同時間，返回 不同的網(wǎng)頁 后綴通常是asp、aspx、jsp、php等，并且通常在URL 中帶有”？” 9 靜態(tài)網(wǎng)頁 http:/ 10 動態(tài)網(wǎng)頁 http:/ 11 MSN中國網(wǎng)站的首頁 12 超文本超文本(Hypertext)(Hypertext) 超文本超文本(Hypertext)(Hypertext)：具有超級鏈接功能 的文本文件叫超文本。超文本文件中的某 些字、符號或短語起著“熱鏈路” （Hotlink）的作用，在顯示出來時其字體 或顏色發(fā)生變化或者標有下橫線、以區(qū)別 于一般的正文. 13 網(wǎng)站的概念網(wǎng)站的概念

5、 網(wǎng)站網(wǎng)站：WWW服務器上相互鏈接的一系列 網(wǎng)頁組成一個網(wǎng)站（Web Site）。網(wǎng)站是 WWW上的一個結(jié)點。如果輸入地址時僅指定 WWW服務器域名或IP地址，而不加路徑信息， 則將打開網(wǎng)站默認的首頁首頁（Home Page）， 也稱為主頁。首頁是一個網(wǎng)站中最重要的 網(wǎng)頁，通常包含最重要的信息以及指向各 分欄目的超鏈接。 14 網(wǎng)頁瀏覽原理網(wǎng)頁瀏覽原理 其工作步驟如下：其工作步驟如下： （1）用戶啟動客戶端瀏覽器，在瀏覽器地址欄輸入想要訪問網(wǎng)頁 的URL，瀏覽器軟件通過http協(xié)議向URL地址所在的Web服務器發(fā)出服 務請求。 （2）服務器根據(jù)瀏覽器軟件送來的請求，把URL地址轉(zhuǎn)化成頁面 所在

6、服務器上的文件路徑，找出相應的網(wǎng)頁文件。 （3）當網(wǎng)頁中僅包含html文檔，服務器直接使用http協(xié)議將該文 檔發(fā)送到客戶端；如果html文檔中還包含有JavaScript或VbScript腳 本程序代碼，這些代碼也將隨同html文檔一起下載；如果網(wǎng)頁中還嵌 套有CGI或ASP程序，這些程序?qū)⒂煞掌鲌?zhí)行，并將運行結(jié)果發(fā)送給 客戶端。 （4）瀏覽器解釋html文檔，并將結(jié)果在客戶端瀏覽器上顯示。 15 網(wǎng)頁包含的元素 n文本文本 n圖像圖像 n動畫動畫 n音頻音頻 n視頻視頻 16 文本 文本是非常重要的網(wǎng)頁元素之一，是網(wǎng)頁中信息的主要載體。文本是非常重要的網(wǎng)頁元素之一，是網(wǎng)頁中信息的主要載體

7、。 文字、字母、數(shù)字和符號等都可以稱為文本。與漂亮的圖像、優(yōu)文字、字母、數(shù)字和符號等都可以稱為文本。與漂亮的圖像、優(yōu) 美的動畫、悅耳的聲音和有聲有色的視頻相比，文本在網(wǎng)頁中似美的動畫、悅耳的聲音和有聲有色的視頻相比，文本在網(wǎng)頁中似 乎是最普通不過了，但文本卻是用戶創(chuàng)建網(wǎng)頁應該考慮的關鍵因乎是最普通不過了，但文本卻是用戶創(chuàng)建網(wǎng)頁應該考慮的關鍵因 素，因為文本是表述信息的最完備的方式，絕大多數(shù)信息都是通素，因為文本是表述信息的最完備的方式，絕大多數(shù)信息都是通 過文本傳遞給瀏覽者的過文本傳遞給瀏覽者的。 17 圖像 圖像是站點中比較圖像是站點中比較重要重要的元素，網(wǎng)頁的設計和創(chuàng)意都離不開圖像的元素，

8、網(wǎng)頁的設計和創(chuàng)意都離不開圖像 的使用和處理。一個欣賞性較好的站點應有的使用和處理。一個欣賞性較好的站點應有清新悅目清新悅目的畫面，能夠的畫面，能夠吸吸 引引讀者有興趣瀏覽下去。同時，圖像可以傳遞文字所無法表達的特定讀者有興趣瀏覽下去。同時，圖像可以傳遞文字所無法表達的特定 的信息，在的信息，在Web上的大多數(shù)網(wǎng)頁都使用圖像來圖文并茂地對內(nèi)容加以上的大多數(shù)網(wǎng)頁都使用圖像來圖文并茂地對內(nèi)容加以 介紹。網(wǎng)頁中的圖像既有簡單的彩色背景，也有實物的真實照片?？偨榻B。網(wǎng)頁中的圖像既有簡單的彩色背景，也有實物的真實照片?？?之，根據(jù)不同的需要，配備不同的圖像加以說明，但從做網(wǎng)頁的角度之，根據(jù)不同的需要，配備

9、不同的圖像加以說明，但從做網(wǎng)頁的角度 來講，網(wǎng)頁上的圖像可以分為兩大類來講，網(wǎng)頁上的圖像可以分為兩大類。 一類純粹是網(wǎng)頁本身的需要，起一類純粹是網(wǎng)頁本身的需要，起 增添網(wǎng)頁色彩的作用，它并不傳增添網(wǎng)頁色彩的作用，它并不傳 給讀者特定的信息，如某些網(wǎng)頁給讀者特定的信息，如某些網(wǎng)頁 背景圖像、表格背景圖像等。另背景圖像、表格背景圖像等。另 一類是行文的需要，配合文本向一類是行文的需要，配合文本向 讀者傳遞信息，這就是所說的圖讀者傳遞信息，這就是所說的圖 文并茂，或者利用圖像單獨向讀文并茂，或者利用圖像單獨向讀 者傳遞信息，如圖片新聞者傳遞信息，如圖片新聞。 18 動畫 動畫是現(xiàn)代網(wǎng)站的重要特色，是

10、網(wǎng)頁制作技術的重要組成部動畫是現(xiàn)代網(wǎng)站的重要特色，是網(wǎng)頁制作技術的重要組成部 分。在網(wǎng)頁中，常見的動畫類型有分。在網(wǎng)頁中，常見的動畫類型有GIF動畫動畫、Flash動畫動畫等，使等，使 用用編程編程的方法也可以制作動畫。目前，網(wǎng)頁中最流行的動畫是的方法也可以制作動畫。目前，網(wǎng)頁中最流行的動畫是 Flash動畫。動畫。Flash動畫一般具有動畫一般具有文件容量小文件容量小、傳輸速度快傳輸速度快、不失不失 真真、邊下載邊播放邊下載邊播放的特點，還具有交互性優(yōu)勢。的特點，還具有交互性優(yōu)勢。Flash動畫具有嶄動畫具有嶄 新的視覺效果，已經(jīng)成為一種流行的藝術表現(xiàn)形式新的視覺效果，已經(jīng)成為一種流行的藝術

11、表現(xiàn)形式。 19 音頻 MP3具有壓縮程度高、音質(zhì)好的特點，是目前最為流行的一種音樂具有壓縮程度高、音質(zhì)好的特點，是目前最為流行的一種音樂 文件，在網(wǎng)上有很多可以在線收聽或下載文件，在網(wǎng)上有很多可以在線收聽或下載MP3的站點。的站點。 ASF和和WMA都是都是Microsoft公司針對公司針對Real公司開發(fā)的新一代網(wǎng)上流式公司開發(fā)的新一代網(wǎng)上流式 數(shù)字音頻壓縮技術，同時兼顧了保真度和網(wǎng)絡傳輸需求，所以具有數(shù)字音頻壓縮技術，同時兼顧了保真度和網(wǎng)絡傳輸需求，所以具有 一定的先進性。一定的先進性。 WAV是是Microsoft Windows系統(tǒng)提供的音頻格式，由于系統(tǒng)提供的音頻格式，由于Wind

12、ows本身本身 的影響力，這個格式已經(jīng)成為了事實上的通用音頻格的影響力，這個格式已經(jīng)成為了事實上的通用音頻格式。式。 real格式是格式是RealNetworks公司網(wǎng)絡音頻和視頻解決方案，具有很高的公司網(wǎng)絡音頻和視頻解決方案，具有很高的 壓縮比，使用流式（壓縮比，使用流式（streaming）播放媒體技術，從而使人們能夠在）播放媒體技術，從而使人們能夠在 網(wǎng)上實時收聽音頻及收看視頻網(wǎng)上實時收聽音頻及收看視頻。 20 音頻 21 視頻 在在網(wǎng)頁中添加視頻文件可以大大網(wǎng)頁中添加視頻文件可以大大增加站點的可讀性增加站點的可讀性，已成為站點多媒，已成為站點多媒 體特性的重要體現(xiàn)?，F(xiàn)在，能夠在網(wǎng)絡上運

13、行的視頻文件類型也日益體特性的重要體現(xiàn)?，F(xiàn)在，能夠在網(wǎng)絡上運行的視頻文件類型也日益 豐豐富。富。 AVI（.AVI）是音頻視頻交錯（）是音頻視頻交錯（Audio Video Interleaved）的英文縮寫，）的英文縮寫， 它是它是Microsoft公司開發(fā)的一種符合公司開發(fā)的一種符合RIFF文件規(guī)范的數(shù)字音頻與視頻文件規(guī)范的數(shù)字音頻與視頻 文件格式。文件格式。 MPEG文件（文件（.MPEG/.MPG/.DAT）是運動圖像壓縮算法的國際標準，）是運動圖像壓縮算法的國際標準， 它采用有損壓縮方法減少運動圖像中的冗余信息，同時保證每秒它采用有損壓縮方法減少運動圖像中的冗余信息，同時保證每秒30

14、幀幀 的圖像動態(tài)刷新率，已被幾乎所有的計算機平臺共同支持。的圖像動態(tài)刷新率，已被幾乎所有的計算機平臺共同支持。 22 了解網(wǎng)頁制作工具 常用的網(wǎng)頁編輯軟件有常用的網(wǎng)頁編輯軟件有FrontPage和和Dreamweaver等。等。 Dreamweaver因其功能全面、操作靈活、專業(yè)性強，而因其功能全面、操作靈活、專業(yè)性強，而 受到網(wǎng)頁制作人員的青睞。受到網(wǎng)頁制作人員的青睞。 在制作網(wǎng)頁時，經(jīng)常使用的圖像處理軟件有在制作網(wǎng)頁時，經(jīng)常使用的圖像處理軟件有Fireworks 和和Photoshop。 Flash是目前最常用的網(wǎng)頁動畫制作軟件。用是目前最常用的網(wǎng)頁動畫制作軟件。用Flash制制 作的動畫

15、文件小，利于網(wǎng)上發(fā)布，而且還能制作出具有交作的動畫文件小，利于網(wǎng)上發(fā)布，而且還能制作出具有交 互功能的動畫，并能很方便地與網(wǎng)頁建立鏈接?；スδ艿膭赢?，并能很方便地與網(wǎng)頁建立鏈接。 23 網(wǎng)頁布局類型 國字型國字型 匡字型匡字型 三字型三字型 川字型川字型 其他類型其他類型 24 國字型 國字型也稱同字型，即最上面是網(wǎng)站的標題以及橫幅廣告條，接下國字型也稱同字型，即最上面是網(wǎng)站的標題以及橫幅廣告條，接下 來是網(wǎng)站的主要內(nèi)容，最左側(cè)和最右側(cè)分列一些小條目內(nèi)容，中間是來是網(wǎng)站的主要內(nèi)容，最左側(cè)和最右側(cè)分列一些小條目內(nèi)容，中間是 主要部分，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權聲明等。主要部分，最

16、下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權聲明等。 這是使用最多的一種結(jié)構類型。這是使用最多的一種結(jié)構類型。 25 匡字型 匡字型也稱拐角形，這種結(jié)構與國字型結(jié)構很相近，上面是標題及匡字型也稱拐角形，這種結(jié)構與國字型結(jié)構很相近，上面是標題及 廣告橫幅，下面左側(cè)是一窄列的鏈接等，右側(cè)是很寬的正文，下面也廣告橫幅，下面左側(cè)是一窄列的鏈接等，右側(cè)是很寬的正文，下面也 是一些網(wǎng)站的輔助信息。是一些網(wǎng)站的輔助信息。 26 三字型 這是一種比較簡潔的布局類型，其頁面在橫向上被分隔為這是一種比較簡潔的布局類型，其頁面在橫向上被分隔為3部分，部分， 上部和下部放置一些標志、導航條、廣告條和版權信息等，中間是正上

17、部和下部放置一些標志、導航條、廣告條和版權信息等，中間是正 文內(nèi)容。文內(nèi)容。 27 川字型 整個頁面在垂直方向上被分為整個頁面在垂直方向上被分為3列，內(nèi)容按欄目分布在這列，內(nèi)容按欄目分布在這3列中，最列中，最 大限度地突出欄目的索引功能。大限度地突出欄目的索引功能。 28 其他類型 常見的網(wǎng)頁布局類型還包括標題文本型、框架型、封面型、常見的網(wǎng)頁布局類型還包括標題文本型、框架型、封面型、Flash型等。型等。 標題文本型即頁面內(nèi)容以標題文本型即頁面內(nèi)容以文本文本為主，最上面一般是標題，下面是正文的為主，最上面一般是標題，下面是正文的 格式。格式。 框架型布局通常分為框架型布局通常分為左右框架型左

18、右框架型、上下框架型和綜合框架型。由于兼容、上下框架型和綜合框架型。由于兼容 性和美觀等原因，專業(yè)設計人員很少采用這種結(jié)構。性和美觀等原因，專業(yè)設計人員很少采用這種結(jié)構。 封面型基本出現(xiàn)在一些網(wǎng)站的首頁，大部分由一些封面型基本出現(xiàn)在一些網(wǎng)站的首頁，大部分由一些精美的平面設計和動精美的平面設計和動 畫畫組合而成，在頁面中放幾個簡單的鏈接或者僅是一個組合而成，在頁面中放幾個簡單的鏈接或者僅是一個“進入進入”的鏈接，的鏈接， 甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型的網(wǎng)頁布局大甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型的網(wǎng)頁布局大 多用于企業(yè)網(wǎng)站或個人網(wǎng)站。多用于企業(yè)網(wǎng)站或個人

19、網(wǎng)站。 Flash型是指整個網(wǎng)頁就是一個型是指整個網(wǎng)頁就是一個Flash動畫動畫，這是一種比較新潮的布局方，這是一種比較新潮的布局方 式。其實，這種布局與封面型在結(jié)構上是類似的，無非使用了式。其實，這種布局與封面型在結(jié)構上是類似的，無非使用了Flash技術。技術。 29 30 網(wǎng)頁頁面與版塊 布局的設計通常需要注意網(wǎng)站的頁面大小以及各種版塊的安排 1網(wǎng)頁頁面大小網(wǎng)頁頁面大小 n 合理地設置頁面尺寸，可以避免用戶頻繁地拖動滾動條。 目前國內(nèi)的上網(wǎng)者習慣使用是微軟公司的Internet Explorer瀏 覽器（簡稱IE瀏覽器）。 n 在屏幕分辨率為1024768時，不同版本的IE瀏覽器的屏 幕大

20、小是不相同的。以下是各版本IE瀏覽器頁面尺寸表。 30 IE瀏覽器版本瀏覽器版本屏幕寬度屏幕寬度屏幕高度屏幕高度 IE6.01003px600px IE7.0（菜單欄顯示狀態(tài)）（菜單欄顯示狀態(tài)）1003px594px IE7.0（菜單欄隱藏狀態(tài)）（菜單欄隱藏狀態(tài)）1003px620px IE8.0（菜單欄隱藏狀態(tài)）（菜單欄隱藏狀態(tài)）1003px626px IE8.0（菜單欄顯示狀態(tài)）（菜單欄顯示狀態(tài)）1003px598px 31 網(wǎng)頁頁面與版塊 2網(wǎng)頁版塊構成網(wǎng)頁版塊構成 網(wǎng)頁是由各種版塊構成的。Internet中的網(wǎng)頁內(nèi)容各異。 然而多數(shù)網(wǎng)頁都是由一些基本的板塊組成的，包括Logo、 導航條

21、、Banner、內(nèi)容版塊、版尾等。 31 32 網(wǎng)頁版面布局技術分析 n表格布局：簡單但是下載速度慢 n框架布局：兼容性不好 nCSS技術：可以精準定位元素但有些復雜 33 網(wǎng)頁版面布局原則 n主次分明，中心突出 n大小搭配，相互呼應 n圖文并茂，相得意彰 34 版面布局的步驟 n草案：在白紙上將景象畫上去 n粗略布局：將功能模塊安置到頁面上 n定案：將粗略布局精確化，具體化 35 Logo Logo是企業(yè)或網(wǎng)站的標志，其作用是標識網(wǎng)站的名稱， 并為用戶提供 識別的標記。絕大多數(shù)網(wǎng)站都有一個獨特的Logo。Logo對于網(wǎng)站而 言是唯一的。 35 36 Logo的大小 一、120120，這種廣告

22、規(guī)格適用于產(chǎn)品或新聞照片展示。 二、12060，這種廣告規(guī)格主要用于做LOGO使用。 三、12090，主要應用于產(chǎn)品演示或大型LOGO。 四、125125，這種規(guī)格適于表現(xiàn)照片效果的圖像廣告。 五、23460，這種規(guī)格適用于框架或左右形式主頁的廣告鏈接。 六、39272，主要用于有較多圖片展示的廣告條，用于頁眉或頁腳。 七、46860，應用最為廣泛的廣告條尺寸，用于頁眉或頁腳。 八、8831，主要用于網(wǎng)頁鏈接，或網(wǎng)站小型LOGO。 37 1.2.2 導航條 導航條是網(wǎng)站的重要組成元素。其可以索引網(wǎng)站內(nèi)容，幫助用戶快 速訪問網(wǎng)站功能。 導航條內(nèi)包含的是網(wǎng)站功能的按鈕或鏈接，其項目的數(shù)量不宜過多。

23、 通常同級別的項目數(shù)量以3到7個為宜。一個網(wǎng)站往往可包含多個級別的 導航條，例如主導航條、登錄導航條、友情鏈接導航條等。有時導航條 也會與banner結(jié)合使用，通過圖像增強導航條的表現(xiàn)力。 37 38 Banner nBanner為網(wǎng)頁中的廣告條，又被稱作旗幟、網(wǎng)幅或橫幅， 是一種可以由文本文本、圖像圖像和動畫動畫相結(jié)合而成的網(wǎng)頁欄目。 n國際廣告聯(lián)盟的“標準與管理委員會”聯(lián)合廣告支持信 息和娛樂聯(lián)合會等國際組織，推出了一系列網(wǎng)絡廣告宣傳物 的標準尺寸，被稱作“IAC/CASIE”標準，共包括7種標準 的Banner尺寸。 n在設計Banner時，既可遵循以上標準，以方便網(wǎng)站的 廣告用戶設計廣

24、告。同時，也可靈活根據(jù)網(wǎng)頁的版式對其尺 寸進行調(diào)節(jié)，以符合網(wǎng)頁整體的風格和布局。 38 名稱名稱Banner面積面積 摩天大樓形摩天大樓形120px600px 中級長方形中級長方形300px250px 正方形彈出正方形彈出250px250px 寬摩天大樓寬摩天大樓160px600px 大長方形大長方形336px280px 長方形長方形180px150px 豎長方形豎長方形240px400px 39 內(nèi)容版塊 n網(wǎng)頁的內(nèi)容版塊通常是網(wǎng)頁的主體部分。這一版 塊可以包含各種文本、圖像、動畫、超鏈接等。 n在設計內(nèi)容欄時，用戶可以先獨立地設計設計多個子子 欄欄，然后再將這些子欄拼接拼接在一起，形成整體

25、的效 果。同時，還可以對子欄進行優(yōu)化排列，提高用戶 的體驗。如網(wǎng)頁的內(nèi)容較少，則還可以使用單獨的 內(nèi)容欄，通過大量的圖像使網(wǎng)頁更加美觀。 39 40 版尾版塊 版尾，顧名思義是網(wǎng)頁頁面最底端版塊最底端版塊，通常放置網(wǎng)站的版權信息版權信息。 版權信息的書寫需要遵循國際通行的規(guī)范國際通行的規(guī)范，其格式如下所示。 Copyright dates by author/owner nCopyright 可以由copyright符號“”代替 ndates可以是具體的年份，也可以是由年份表現(xiàn)的的時間段 nauthor/owner為作者或所有者，可為個人名，也可為企業(yè)名。 n在作者/所有者之后，可以添加“Al

26、l Rights Reserved.”表示版權所 有。但“All Rights Reserved.”的大小寫和最后英文句號”.” 不可省略。 如需要添加中文的“版權所有”，應寫在英文版權所有之后。 n例如，清華大學網(wǎng)站的版尾信息為“2010 Tsinghua University. All Rights Reserved.” 41 1.2網(wǎng)站的規(guī)劃:實例 n確定建立網(wǎng)站的目標 n確定網(wǎng)站的類型 n確定網(wǎng)站主體內(nèi)容 n確定網(wǎng)站風格 n確定網(wǎng)頁系統(tǒng)樹 n確定網(wǎng)頁內(nèi)容 n定制數(shù)據(jù)庫 n考慮網(wǎng)絡的技術問題 42 你建網(wǎng)站的目的是什么？ n產(chǎn)品、服務的銷售 n建立一種公益性服務 n為一種思想、觀念、事業(yè)

27、作宣傳 n使自己的業(yè)務走向世界 43 網(wǎng)站的類型是什么 n信息：全國性媒體，地方性媒體，商業(yè)信 息，地方信息 n商務：公司站點，銷售站點 n組織：法律法規(guī)，教育站點 n專題：旅游，財經(jīng)，體育，科學，食品 n個人：個人展臺 44 網(wǎng)站用戶的確定 n網(wǎng)站的用戶是誰？ n用戶的興趣是什么？他們需要從網(wǎng)站中得 到什么信息？ 45 你的主要用戶是誰？ n女性 n男性 n青少年 n兒童 n學生 n所有人 n其它 46 網(wǎng)站主題是什么 n主題選材應該小而精。 n選題不要太濫，目標定位不要太高。 47 網(wǎng)站的風格是什么？ n是活潑的如迪斯尼 n平易近人的如網(wǎng)易 n嚴肅的如IBM 48 樹立網(wǎng)站風格 n風格是建

28、立在有價值內(nèi)容之上 n需要徹底清楚希望網(wǎng)站給人的印象是什么 n努力加強印象 49 有關風格設計的建議 n使網(wǎng)站的LOGO盡可能出現(xiàn)在每個頁面上 n突出網(wǎng)站的標準色彩 n使用同一的語氣和人稱 n使用同一的圖片處理效果 50 網(wǎng)頁系統(tǒng)樹 n確定網(wǎng)站的欄目以后，需要繪制出網(wǎng)站的 結(jié)構圖。 n通過系統(tǒng)樹可以方便對網(wǎng)頁進行維護，規(guī) 劃和設計。 51 網(wǎng)頁內(nèi)容 n進一步的細化，明確網(wǎng)頁中包含的文字， 圖片，網(wǎng)頁的鏈接 52 網(wǎng)絡的技術問題 n帶寬： n瀏覽器與分辨率： 53 1.3網(wǎng)站的設計 n網(wǎng)站設計的基本原則 n網(wǎng)站設計技巧 n設計主頁應避免的問題 54 1.3.1網(wǎng)站設計的基本原則 n內(nèi)容明確：圍繞

29、網(wǎng)站功能 n快速下載：網(wǎng)頁不大于60kB n點擊規(guī)則:瀏覽信息的點擊次數(shù)不超過三次 n網(wǎng)站介紹：告訴瀏覽者網(wǎng)站提供什么信息 n慎用特殊字體和顏色：不同系統(tǒng)平臺產(chǎn)生不同效 果 n少用閃爍：喧賓奪主 n少用框架： 55 n圖像的應用：不要使用跨幅整個屏幕的圖 像 n慎用聲音：影響下載速度 n空白萬歲：吸引訪問者的注意力 56 1.3.2 網(wǎng)站設計技巧 1.定位網(wǎng)站的CI形象 LOGO標志：不宜過大 標準色彩：能體現(xiàn)網(wǎng)站形象的色彩（不超過3種） 2.確定網(wǎng)站的整體風格（標志，色彩，版面布局， 瀏覽方式，交互性，文字，語氣，價值） 3.確定網(wǎng)站的目錄結(jié)構和命名規(guī)則（*） 4.確定網(wǎng)站的鏈接結(jié)構 5.首

30、頁的設計 57 網(wǎng)站首頁的設計 n確定網(wǎng)站首頁上實現(xiàn)的主要內(nèi)容和功能 n設計網(wǎng)頁的版面：先繪制出，再實現(xiàn) 58 1.3.3 設計主頁應避免的問題 沒有聯(lián)系地址 缺乏導航功能 大量使用表格 大量使用動態(tài)圖像 站內(nèi)內(nèi)容不及時更新 59 網(wǎng)站發(fā)布 發(fā)布站點前，必須確定網(wǎng)頁的存儲空間。如果自發(fā)布站點前，必須確定網(wǎng)頁的存儲空間。如果自 己有服務器，配置好后，直接發(fā)布到上面即可。己有服務器，配置好后，直接發(fā)布到上面即可。 如果自己沒有服務器，則最好在網(wǎng)上申請一個空如果自己沒有服務器，則最好在網(wǎng)上申請一個空 間來存放網(wǎng)頁，并申請一個域名來指定站點在網(wǎng)間來存放網(wǎng)頁，并申請一個域名來指定站點在網(wǎng) 上的位置。發(fā)布

31、網(wǎng)頁可直接使用上的位置。發(fā)布網(wǎng)頁可直接使用Dreamweaver CS3中的中的“發(fā)布站點發(fā)布站點”功能進行上傳。對于大型站功能進行上傳。對于大型站 點的上傳一般都使用點的上傳一般都使用FTP軟件，如軟件，如LeapFTP、 CuteFTP等，使用這種方法上傳下載速度都很快。等，使用這種方法上傳下載速度都很快。 60 網(wǎng)站推廣 網(wǎng)站推廣活動一般發(fā)生在網(wǎng)站發(fā)布之后，當然有網(wǎng)站推廣活動一般發(fā)生在網(wǎng)站發(fā)布之后，當然有 一些網(wǎng)站在籌備期間就開始進行宣傳。網(wǎng)站推廣一些網(wǎng)站在籌備期間就開始進行宣傳。網(wǎng)站推廣 是網(wǎng)絡營銷的主要內(nèi)容，可以說，大部分的網(wǎng)絡是網(wǎng)絡營銷的主要內(nèi)容，可以說，大部分的網(wǎng)絡 營銷活動都是為了網(wǎng)站推廣的需要，如發(fā)布新聞、營銷活動都是為了網(wǎng)站推廣的需要，如發(fā)布新聞、 搜索引擎登記、交換鏈接以及網(wǎng)絡廣告等。搜索引擎登記、交換鏈接以及網(wǎng)絡廣告等。 61 后期維護 站點上傳到服務器后，首先要檢查運行是否正常，站點上傳到服務器后，首先要檢查運行是否正常， 如果有錯誤要及時更正。另外，每隔一段時間，如果有錯誤要及時更正。另外，每隔一段時間， 還應對站點中的內(nèi)容進行更新，以便提供最新消