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

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

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

4、現各種動態(tài)效果 動態(tài)網頁 以數據庫技術為基礎，隨不同客戶、不同時間，返回不同的網頁 后綴通常是asp、aspx、jsp、php等，并且通常在URL中帶有”？”,8,靜態(tài)網頁,9,動態(tài)網頁,10,MSN中國網站的首頁,11,超文本(Hypertext),超文本(Hypertext)：具有超級鏈接功能的文本文件叫超文本。超文本文件中的某些字、符號或短語起著“熱鏈路”（Hotlink）的作用，在顯示出來時其字體或顏色發(fā)生變化或者標有下橫線、以區(qū)別于一般的正文.,12,網站的概念,網站：WWW服務器上相互鏈接的一系列網頁組成一個網站（Web Site）。網站是WWW上的一個結點。如果輸入地址時僅指定W

5、WW服務器域名或IP地址，而不加路徑信息，則將打開網站默認的首頁（Home Page），也稱為主頁。首頁是一個網站中最重要的網頁，通常包含最重要的信息以及指向各分欄目的超鏈接。,13,網頁瀏覽原理,其工作步驟如下： （1）用戶啟動客戶端瀏覽器，在瀏覽器地址欄輸入想要訪問網頁的URL，瀏覽器軟件通過http協議向URL地址所在的Web服務器發(fā)出服務請求。 （2）服務器根據瀏覽器軟件送來的請求，把URL地址轉化成頁面所在服務器上的文件路徑，找出相應的網頁文件。 （3）當網頁中僅包含html文檔，服務器直接使用http協議將該文檔發(fā)送到客戶端；如果html文檔中還包含有JavaScript或VbSc

6、ript腳本程序代碼，這些代碼也將隨同html文檔一起下載；如果網頁中還嵌套有CGI或ASP程序，這些程序將由服務器執(zhí)行，并將運行結果發(fā)送給客戶端。 （4）瀏覽器解釋html文檔，并將結果在客戶端瀏覽器上顯示。,14,網頁包含的元素,文本 圖像 動畫 音頻 視頻,15,文本,文本是非常重要的網頁元素之一，是網頁中信息的主要載體。文字、字母、數字和符號等都可以稱為文本。與漂亮的圖像、優(yōu)美的動畫、悅耳的聲音和有聲有色的視頻相比，文本在網頁中似乎是最普通不過了，但文本卻是用戶創(chuàng)建網頁應該考慮的關鍵因素，因為文本是表述信息的最完備的方式，絕大多數信息都是通過文本傳遞給瀏覽者的。,16,圖像,圖像是站點

7、中比較重要的元素，網頁的設計和創(chuàng)意都離不開圖像的使用和處理。一個欣賞性較好的站點應有清新悅目的畫面，能夠吸引讀者有興趣瀏覽下去。同時，圖像可以傳遞文字所無法表達的特定的信息，在Web上的大多數網頁都使用圖像來圖文并茂地對內容加以介紹。網頁中的圖像既有簡單的彩色背景，也有實物的真實照片?？傊?，根據不同的需要，配備不同的圖像加以說明，但從做網頁的角度來講，網頁上的圖像可以分為兩大類。,一類純粹是網頁本身的需要，起增添網頁色彩的作用，它并不傳給讀者特定的信息，如某些網頁背景圖像、表格背景圖像等。另一類是行文的需要，配合文本向讀者傳遞信息，這就是所說的圖文并茂，或者利用圖像單獨向讀者傳遞信息，如圖片新

8、聞。,17,動畫,動畫是現代網站的重要特色，是網頁制作技術的重要組成部分。在網頁中，常見的動畫類型有GIF動畫、Flash動畫等，使用編程的方法也可以制作動畫。目前，網頁中最流行的動畫是Flash動畫。Flash動畫一般具有文件容量小、傳輸速度快、不失真、邊下載邊播放的特點，還具有交互性優(yōu)勢。Flash動畫具有嶄新的視覺效果，已經成為一種流行的藝術表現形式。,18,音頻,MP3具有壓縮程度高、音質好的特點，是目前最為流行的一種音樂文件，在網上有很多可以在線收聽或下載MP3的站點。 ASF和WMA都是Microsoft公司針對Real公司開發(fā)的新一代網上流式數字音頻壓縮技術，同時兼顧了保真度和網

9、絡傳輸需求，所以具有一定的先進性。 WAV是Microsoft Windows系統(tǒng)提供的音頻格式，由于Windows本身的影響力，這個格式已經成為了事實上的通用音頻格式。 real格式是RealNetworks公司網絡音頻和視頻解決方案，具有很高的壓縮比，使用流式（streaming）播放媒體技術，從而使人們能夠在網上實時收聽音頻及收看視頻。,19,音頻,20,視頻,在網頁中添加視頻文件可以大大增加站點的可讀性，已成為站點多媒體特性的重要體現。現在，能夠在網絡上運行的視頻文件類型也日益豐富。 AVI（.AVI）是音頻視頻交錯（Audio Video Interleaved）的英文縮寫，它是Mi

10、crosoft公司開發(fā)的一種符合RIFF文件規(guī)范的數字音頻與視頻文件格式。 MPEG文件（.MPEG/.MPG/.DAT）是運動圖像壓縮算法的國際標準，它采用有損壓縮方法減少運動圖像中的冗余信息，同時保證每秒30幀的圖像動態(tài)刷新率，已被幾乎所有的計算機平臺共同支持。,21,了解網頁制作工具,常用的網頁編輯軟件有FrontPage和Dreamweaver等。Dreamweaver因其功能全面、操作靈活、專業(yè)性強，而受到網頁制作人員的青睞。 在制作網頁時，經常使用的圖像處理軟件有Fireworks和Photoshop。 Flash是目前最常用的網頁動畫制作軟件。用Flash制作的動畫文件小，利于網

11、上發(fā)布，而且還能制作出具有交互功能的動畫，并能很方便地與網頁建立鏈接。,22,網頁布局類型,國字型 匡字型 三字型 川字型 其他類型,23,國字型,國字型也稱同字型，即最上面是網站的標題以及橫幅廣告條，接下來是網站的主要內容，最左側和最右側分列一些小條目內容，中間是主要部分，最下面是網站的一些基本信息、聯系方式、版權聲明等。這是使用最多的一種結構類型。,24,匡字型,匡字型也稱拐角形，這種結構與國字型結構很相近，上面是標題及廣告橫幅，下面左側是一窄列的鏈接等，右側是很寬的正文，下面也是一些網站的輔助信息。,25,三字型,這是一種比較簡潔的布局類型，其頁面在橫向上被分隔為3部分，上部和下部放置一

12、些標志、導航條、廣告條和版權信息等，中間是正文內容。,26,川字型,整個頁面在垂直方向上被分為3列，內容按欄目分布在這3列中，最大限度地突出欄目的索引功能。,27,其他類型,常見的網頁布局類型還包括標題文本型、框架型、封面型、Flash型等。 標題文本型即頁面內容以文本為主，最上面一般是標題，下面是正文的格式。 框架型布局通常分為左右框架型、上下框架型和綜合框架型。由于兼容性和美觀等原因，專業(yè)設計人員很少采用這種結構。 封面型基本出現在一些網站的首頁，大部分由一些精美的平面設計和動畫組合而成，在頁面中放幾個簡單的鏈接或者僅是一個“進入”的鏈接，甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類

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

14、版塊構成的。Internet中的網頁內容各異。然而多數網頁都是由一些基本的板塊組成的，包括Logo、導航條、Banner、內容版塊、版尾等。,31,31,網頁版面布局技術分析,表格布局：簡單但是下載速度慢 框架布局：兼容性不好 CSS技術：可以精準定位元素但有些復雜,32,網頁版面布局原則,主次分明，中心突出 大小搭配，相互呼應 圖文并茂，相得意彰,33,版面布局的步驟,草案：在白紙上將景象畫上去 粗略布局：將功能模塊安置到頁面上 定案：將粗略布局精確化，具體化,34,Logo,Logo是企業(yè)或網站的標志，其作用是標識網站的名稱，并為用戶提供 識別的標記。絕大多數網站都有一個獨特的Logo。L

15、ogo對于網站而言是唯一的。,35,35,Logo的大小,一、120120，這種廣告規(guī)格適用于產品或新聞照片展示。 二、12060，這種廣告規(guī)格主要用于做LOGO使用。 三、12090，主要應用于產品演示或大型LOGO。 四、125125，這種規(guī)格適于表現照片效果的圖像廣告。 五、23460，這種規(guī)格適用于框架或左右形式主頁的廣告鏈接。 六、39272，主要用于有較多圖片展示的廣告條，用于頁眉或頁腳。 七、46860，應用最為廣泛的廣告條尺寸，用于頁眉或頁腳。 八、8831，主要用于網頁鏈接，或網站小型LOGO。,36,1.2.2 導航條,導航條是網站的重要組成元素。其可以索引網站內容，幫助用

16、戶快速訪問網站功能。 導航條內包含的是網站功能的按鈕或鏈接，其項目的數量不宜過多。通常同級別的項目數量以3到7個為宜。一個網站往往可包含多個級別的導航條，例如主導航條、登錄導航條、友情鏈接導航條等。有時導航條也會與banner結合使用，通過圖像增強導航條的表現力。,37,37,Banner,Banner為網頁中的廣告條，又被稱作旗幟、網幅或橫幅，是一種可以由文本、圖像和動畫相結合而成的網頁欄目。 國際廣告聯盟的“標準與管理委員會”聯合廣告支持信息和娛樂聯合會等國際組織，推出了一系列網絡廣告宣傳物的標準尺寸，被稱作“IAC/CASIE”標準，共包括7種標準的Banner尺寸。 在設計Banner

17、時，既可遵循以上標準，以方便網站的廣告用戶設計廣告。同時，也可靈活根據網頁的版式對其尺寸進行調節(jié)，以符合網頁整體的風格和布局。,38,38,內容版塊,網頁的內容版塊通常是網頁的主體部分。這一版塊可以包含各種文本、圖像、動畫、超鏈接等。 在設計內容欄時，用戶可以先獨立地設計多個子欄，然后再將這些子欄拼接在一起，形成整體的效果。同時，還可以對子欄進行優(yōu)化排列，提高用戶的體驗。如網頁的內容較少，則還可以使用單獨的內容欄，通過大量的圖像使網頁更加美觀。,39,39,版尾版塊,版尾，顧名思義是網頁頁面最底端版塊，通常放置網站的版權信息。 版權信息的書寫需要遵循國際通行的規(guī)范，其格式如下所示。 Copyr

18、ight dates by author/owner Copyright 可以由copyright符號“”代替 dates可以是具體的年份，也可以是由年份表現的的時間段 author/owner為作者或所有者，可為個人名，也可為企業(yè)名。 在作者/所有者之后，可以添加“All Rights Reserved.”表示版權所有。但“All Rights Reserved.”的大小寫和最后英文句號”.” 不可省略。如需要添加中文的“版權所有”，應寫在英文版權所有之后。 例如，清華大學網站的版尾信息為“2010 Tsinghua University. All Rights Reserved.”,40,

19、1.2網站的規(guī)劃:實例,確定建立網站的目標 確定網站的類型 確定網站主體內容 確定網站風格 確定網頁系統(tǒng)樹 確定網頁內容 定制數據庫 考慮網絡的技術問題,41,你建網站的目的是什么？,產品、服務的銷售 建立一種公益性服務 為一種思想、觀念、事業(yè)作宣傳 使自己的業(yè)務走向世界,42,網站的類型是什么,信息：全國性媒體，地方性媒體，商業(yè)信息，地方信息 商務：公司站點，銷售站點 組織：法律法規(guī)，教育站點 專題：旅游，財經，體育，科學，食品 個人：個人展臺,43,網站用戶的確定,網站的用戶是誰？ 用戶的興趣是什么？他們需要從網站中得到什么信息？,44,你的主要用戶是誰？,女性 男性 青少年 兒童 學生

20、所有人 其它,45,網站主題是什么,主題選材應該小而精。 選題不要太濫，目標定位不要太高。,46,網站的風格是什么？,是活潑的如迪斯尼 平易近人的如網易 嚴肅的如IBM,47,樹立網站風格,風格是建立在有價值內容之上 需要徹底清楚希望網站給人的印象是什么 努力加強印象,48,有關風格設計的建議,使網站的LOGO盡可能出現在每個頁面上 突出網站的標準色彩 使用同一的語氣和人稱 使用同一的圖片處理效果,49,網頁系統(tǒng)樹,確定網站的欄目以后，需要繪制出網站的結構圖。 通過系統(tǒng)樹可以方便對網頁進行維護，規(guī)劃和設計。,50,網頁內容,進一步的細化，明確網頁中包含的文字，圖片，網頁的鏈接,51,網絡的技術

21、問題,帶寬： 瀏覽器與分辨率：,52,1.3網站的設計,網站設計的基本原則 網站設計技巧 設計主頁應避免的問題,53,1.3.1網站設計的基本原則,內容明確：圍繞網站功能 快速下載：網頁不大于60kB 點擊規(guī)則:瀏覽信息的點擊次數不超過三次 網站介紹：告訴瀏覽者網站提供什么信息 慎用特殊字體和顏色：不同系統(tǒng)平臺產生不同效果 少用閃爍：喧賓奪主 少用框架：,54,圖像的應用：不要使用跨幅整個屏幕的圖像 慎用聲音：影響下載速度 空白萬歲：吸引訪問者的注意力,55,1.3.2 網站設計技巧,1.定位網站的CI形象 LOGO標志：不宜過大 標準色彩：能體現網站形象的色彩（不超過3種） 2.確定網站的整

22、體風格（標志，色彩，版面布局，瀏覽方式，交互性，文字，語氣，價值） 3.確定網站的目錄結構和命名規(guī)則（*） 4.確定網站的鏈接結構 5.首頁的設計,56,網站首頁的設計,確定網站首頁上實現的主要內容和功能 設計網頁的版面：先繪制出，再實現,57,1.3.3 設計主頁應避免的問題,沒有聯系地址 缺乏導航功能 大量使用表格 大量使用動態(tài)圖像 站內內容不及時更新,58,網站發(fā)布,發(fā)布站點前，必須確定網頁的存儲空間。如果自己有服務器，配置好后，直接發(fā)布到上面即可。如果自己沒有服務器，則最好在網上申請一個空間來存放網頁，并申請一個域名來指定站點在網上的位置。發(fā)布網頁可直接使用Dreamweaver CS3中的“發(fā)布站點”功能進行上傳。對于大型站點的上傳一般都使用FTP軟件，如LeapFTP、CuteFTP等，使用這種方法上傳下載速度都很快。,59,網站推廣,網站推廣活動一般發(fā)生在網站發(fā)布之后，當然有一些網站在籌備期間就開始進行宣傳。網站推廣是網絡營銷的主要