網(wǎng)頁設計與制作cs8第13章.ppt

第13章 完整制作網(wǎng)站的流程,Web設計流程 階段1：站點定義和規(guī)則。該階段包括網(wǎng)站的整體概念、網(wǎng)站的觀眾定位、網(wǎng)站的內容和組織方式、網(wǎng)站的視覺風格、網(wǎng)站的技術要求、網(wǎng)站的預算、網(wǎng)站完成的時間期限等。 階段2：建立WEB站點的結構。該階段要完成站點的外觀草圖設計，完成所有的關鍵頁面的整體風格設計以及這頁面的相互關系的設置。 階段3：網(wǎng)頁外觀的設計制作。在WEB網(wǎng)站目標和導航要求都已確定的情況下，該階段是WEB頁面制作的開始。 階段4：推廣和宣傳網(wǎng)站。將站點推向市場非常重要，可以利用的宣傳途徑有公司印刷器、戶外媒體、電視節(jié)目廣告、口頭傳播和搜索引擎等。,第13章 完整制作網(wǎng)站的流程,13.1站點定義和規(guī)化 13.2建立Web站點的結構 13.3網(wǎng)頁外觀的設計制作,13.1站點定義和規(guī)化,13.1.1定位你的網(wǎng)站主題 13.1.2定位你的網(wǎng)站 CI 形象,13.1.1定位你的網(wǎng)站主題,網(wǎng)站的主題就是網(wǎng)站所要表達的主要內容，站點應該主題明確，在網(wǎng)站的主頁中一定要告訴瀏覽者，這個網(wǎng)站是關于哪個方面的網(wǎng)站。 主題定位是關系網(wǎng)站成敗的關鍵。在規(guī)劃網(wǎng)站的結構和內容時，始終要以主題為核心，加大主題內容的渲染，在頁面順序上應優(yōu)先考慮主題內容的排列。 網(wǎng)站的主題確定，與網(wǎng)站的定位密切相關，也就是在網(wǎng)站規(guī)劃時制訂的網(wǎng)站實現(xiàn)的目的。確定網(wǎng)站主題的原則主要有以下幾點。 1主題定位要準確、鮮明 2主題要有特色和個性 3主題要小而精。定位要小，內容要精。,13.1.2定位你的網(wǎng)站 CI 形象,所謂 CI (corporate identity 的縮寫 ) ，意思是通過視覺來統(tǒng)一企業(yè)的形象。現(xiàn)實生活中的 CI 策劃比比皆是，杰出的例子如：可口 可樂公司，全球統(tǒng)一的標志，色彩和產(chǎn)品包裝，給我們的印象極為深刻。 一個杰出的網(wǎng)站，和實體公司一樣，也需要整體的形象包裝和設計。準確的，有創(chuàng)意的 CI 設計，對網(wǎng)站的宣傳推廣有事半功倍的效果。在您的網(wǎng)站主題和名稱定下來之后，需要思考的就是網(wǎng)站的 CI 形象。 1.設計網(wǎng)站的標志 (logo) 2. 設計網(wǎng)站的標準色彩。 3. 設計網(wǎng)站的標準字體。 4. 設計網(wǎng)站的宣傳標語。,設計網(wǎng)站的標志 (logo),首先需要設計制作一個網(wǎng)站的標志，就如同商標一樣，logo是站點特色和內涵的集中體現(xiàn)，看見logo就讓大家聯(lián)想起你的站點。,設計網(wǎng)站的標準色彩,網(wǎng)站給人的第一印象來自視覺沖擊，確定網(wǎng)站的標準色彩是相當重要的一步，不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。 標準色彩是指能體現(xiàn)網(wǎng)站形象和延伸內涵的色彩。比如：IBM的深藍色、肯德基的紅色。 一般來說，一個網(wǎng)站的標準色彩不超過3種。,設計網(wǎng)站的標準字體,標準字體是指用于標志、標題、主菜單的特有字體，一般網(wǎng)頁默認的字體是宋體，為了體現(xiàn)站點的與眾不同和特有風格，也可以根據(jù)需要選擇一些特別的字體。,設計網(wǎng)站的宣傳標語,網(wǎng)站的宣傳標語也可以說是網(wǎng)站的精神、網(wǎng)站的目標。比如：雀巢的“味道好極了”，intel的“給你一顆奔騰的心” 以上四方面（標志、色彩、字體、標語）是一個網(wǎng)站樹立CI形象的關鍵，確切地說是網(wǎng)站的表面文章，設計并完成這幾步，網(wǎng)站的整體形象有一個提高。,13.2建立Web站點的結構,13.2.1確定網(wǎng)站的欄目和版塊 13.2.2網(wǎng)站的目錄結構 13.2.3網(wǎng)站的鏈接結構 13.2.4確定網(wǎng)站的整體風格,在動手制作網(wǎng)頁前，一定要考慮好以下三方面： 確定欄目和版塊 確定網(wǎng)站的目錄結構和鏈接結構 確定網(wǎng)站的整體風格創(chuàng)意設計,13.2.1確定網(wǎng)站的欄目和版塊,欄目的實質是一個網(wǎng)站的大綱索引，索引應該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。一般的網(wǎng)站欄目安排要注意以下幾方面： 一定記住要緊扣你的主題！ 2. 設一個最近更新或網(wǎng)站指南欄目 3. 設定一個可以雙向交流的欄目 4.設一個下載或常見問題回答欄目,劃分欄目需要注意如下幾點： 盡可能刪除與主題無關的欄目； 盡可能 將網(wǎng)站最有價值的內容列在欄目上； 盡可能方便訪問者瀏覽和查詢。,13.2.2網(wǎng)站的目錄結構,網(wǎng)站的目錄是指你建立網(wǎng)站時創(chuàng)建的目錄。目錄的結構是一個容易忽略的問題，大多數(shù)人都是未經(jīng)規(guī)劃，隨意創(chuàng)建子目錄。目錄結構的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的上傳維護，內容未來的擴充和移植有著重要的影響。下面是建立目錄結構的一些建議： 1.不要將所有文件都存放在根目錄下。 2.按欄目內容建立子目錄。 3.在每個主目錄下都建立獨立的 images 目錄。 4.目錄的層次不要太深。,13.2.3網(wǎng)站的鏈接結構,網(wǎng)站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在于一個立體的空間中。 關于鏈接結構的設計，在實際的網(wǎng)頁制作中是非常重要一環(huán)。采用什么樣的鏈接結構直接影響到版面的布局。例如你的主菜單放在什么位置，是否每頁都需要放置，是否需要用框架，是否需要加入返回首頁的鏈接。,建立網(wǎng)站的鏈接結構有兩種基本方式： 1、樹狀鏈接結構（一對一）。首頁鏈接指向一級頁面，一級頁面鏈接指向三級頁面 2、星狀鏈接結構（一對多）。,13.2.4確定網(wǎng)站的整體風格,風格(style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。 這個“整體形象”包括站點的CI（標志，色彩，字體，標語），版面布局，瀏覽方式，交互性，文字，語氣，內容價值，存在意義，站點榮譽等等諸多因素。 舉個例子：我們覺得“門戶網(wǎng)站”是平易近人的，“個人主頁”是生動活潑的，“學校主頁”是專業(yè)嚴肅的。這些都是網(wǎng)站給人們留下的不同感受。,如何樹立網(wǎng)站的風格，可以分以下步驟： 1、確信風格是建立在有價值的內容之上的。 2、需要徹底弄清楚自己希望站點給人的印象是什么 3、在明確自己的網(wǎng)站印象后，開始努力建立和加強這種印象。,13.3網(wǎng)頁外觀的設計制作,13.3.1首頁的設計 13.3.2版面布局的原理 13.3.3網(wǎng)頁色彩的搭配,13.3.1首頁的設計,首頁，從根本上說就是全站內容的目錄，是一個索引。 1.確定首頁的功能模塊。 2.設計首頁的版面 3.處理技術上的細節(jié),13.3.2版面布局的原理,經(jīng)常用到的版面布局形式： 1.“T”結構布局。 所謂“T”結構。就是指頁面頂部（或底部）為導航條，下方左面為主菜單，右面顯示內容的布局，因為菜單背景較深，整體效果類似英文字母“T”,所以我們稱之為“T”形布局。這是網(wǎng)頁設計中用的最廣泛的一種布局方式，這種布局的優(yōu)點是頁面結構清晰，主次分明。是初學者最容易上手的布局方法。缺點是規(guī)矩 呆板，如果細節(jié)色彩上不注意，很容易讓人“看之無味“。,2.“口”型布局。 這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內容。這種布局的優(yōu)點是充分利用版面，信息量大。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網(wǎng)易壁紙站。,3. “三”型布局。 這種布局多用于國外站點，國內用的不多，特點是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。,4.對稱對比布局。 顧名思義，采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設計型站點，優(yōu)點是視覺沖擊力強，缺點是將兩部分有機的結合比較困難。,5.POP布局。 POP引自廣告術語，就是指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心，常用于時尚類站點，優(yōu)點顯而易見：漂亮吸引人。缺點就是速度慢。,色彩的基本知識 顏色是因為光的折射而產(chǎn)生的。紅黃藍是三原色，其他的色彩都可以用這三種色彩調和而成 顏色分非彩色和彩色兩類。非彩色是指黑白灰系統(tǒng)色，彩色是指除了非彩色以外的所有色彩。 色環(huán)。按 紅 黃 綠 藍 紅 色彩的心理感覺。,13.3.3網(wǎng)頁色彩的搭配,網(wǎng)頁色彩搭配的原理 （1）色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。 （2）色彩的獨特性。要有與眾不同的色彩，使得大家對你的印象強烈。 （3）色彩的合適性。就是說色彩和你表達的內容氣氛相適合。如用粉色體現(xiàn)女性站點的柔性。 （4）色彩的聯(lián)想性。不同色彩會產(chǎn)生不同的聯(lián)想，藍色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁的內涵相關聯(lián)。,網(wǎng)頁色彩搭配的技巧 （1）用一種色彩。這里是指先選定一種色彩，然后調整透明度或者飽和度，(說得通俗些就是將 色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。 （2）用兩種色彩。先選定一種色彩，然后選擇它的對比