網(wǎng)站的結構與編排

1、第二節(jié)第二節(jié) 網(wǎng)站的結構與編排網(wǎng)站的結構與編排第二節(jié) 網(wǎng)站的結構與編排 1 網(wǎng)站的結構網(wǎng)站的結構2 網(wǎng)站的創(chuàng)意設計網(wǎng)站的創(chuàng)意設計3 網(wǎng)頁的編排設計網(wǎng)頁的編排設計 _學習目標第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian知識目標：知識目標：了解建立網(wǎng)站結構的原則，掌握網(wǎng)站的幾種常見結構方式；了解網(wǎng)站的創(chuàng)意設計的基本原則和創(chuàng)意設計中的相關要素；了解網(wǎng)頁編排設計的基本原則。 能力目標：能力目標：能夠根據(jù)網(wǎng)站定位的實際需要，運用網(wǎng)站結構、網(wǎng)站的創(chuàng)意設計和網(wǎng)頁編排設計的知識與技能，創(chuàng)造性地分析與解決網(wǎng)站創(chuàng)意和網(wǎng)頁編排設計中的實際問題。 _ 網(wǎng)站的結構與編排網(wǎng)站的結構與編排2006.12.1.xia

2、n網(wǎng)站美化工程網(wǎng)站作為一種視覺媒體，現(xiàn)代設計理念中的有關內容同樣適用于網(wǎng)站設計。 人性化界面設計 人機互動設計本章學習的主要內容就是這兩個方面在網(wǎng)站中具體應用。第二節(jié) 網(wǎng)站的結構與編排_ 網(wǎng)站的結構網(wǎng)站的結構2006.12.1.xian一、網(wǎng)站結構的設計1、常見的幾種結構模型： 網(wǎng)頁1 網(wǎng)頁2 網(wǎng)頁3 網(wǎng)頁4 線狀結構 主頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁 樹狀結構第二節(jié) 網(wǎng)站的結構與編排_ 網(wǎng)站的結構網(wǎng)站的結構2006.12.1.xian網(wǎng)站的結構網(wǎng)站的結構指某一網(wǎng)站的信息組合的基本框架，它顯示該網(wǎng)站中各個網(wǎng)頁之間的邏輯關系。在網(wǎng)站的發(fā)展過程中，為了容納海量信息，網(wǎng)站的結構越來越復雜，有時為了使網(wǎng)站

3、的內容更加條理，在形式上常常采用幾種結構混合的模式。 網(wǎng)頁網(wǎng)頁主頁網(wǎng)頁網(wǎng)頁 網(wǎng)狀結構第二節(jié) 網(wǎng)站的結構與編排_ 網(wǎng)站的結構網(wǎng)站的結構2006.12.1.xian網(wǎng)站結構設計的人性化體現(xiàn)： 網(wǎng)站結構如果不合理，網(wǎng)站就變成了迷宮，使訪問者迷失在大堆的信息中；對于網(wǎng)站工作人員來說，日常的更新或對網(wǎng)站結構的調整也比較麻煩。因此，要建立一個簡單、有序、合理的網(wǎng)站結構需要遵循一些基本的原則。 (1)網(wǎng)站結構層次適當 (2) 網(wǎng)站結構拓展性廣第二節(jié) 網(wǎng)站的結構與編排_ 網(wǎng)站的結構網(wǎng)站的結構2006.12.1.xian2、網(wǎng)頁間的鏈接方式 大量的信息通過各種鏈接聯(lián)系到一起，構成網(wǎng)絡世界的高速通道。目前主要的鏈

4、接方式有以下幾種： 導航條 超鏈接 超文本第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)站的結構網(wǎng)站的結構導航條超鏈接超文本網(wǎng)站地圖第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)站的創(chuàng)意設計網(wǎng)站的創(chuàng)意設計 網(wǎng)站創(chuàng)意設計 網(wǎng)站創(chuàng)意設計，重在“創(chuàng)意”二字。通過人性化的創(chuàng)意設計，使網(wǎng)站定位的核心理念能夠在網(wǎng)站的各個視覺點上充分體現(xiàn)?；驹瓌t： （1）、統(tǒng)一性原則 （2）、互動性原則 （3）、適用性原則第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)站的創(chuàng)意設計網(wǎng)站的創(chuàng)意設計網(wǎng)站創(chuàng)意設計的具體要素 VI設計 內容模塊設計 按照網(wǎng)站的定位，將信息有序的組合在一起，既體現(xiàn)

5、出網(wǎng)站的內容特色，又能方便訪問者迅速找到所需要的信息。 即視覺識別，是CIS企業(yè)形象識別系統(tǒng)中最具傳播力和感染力的層面。第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)站的創(chuàng)意設計網(wǎng)站的創(chuàng)意設計 網(wǎng)站作為一個以視覺為主的媒介，其視覺識別系統(tǒng)的建立可以將網(wǎng)站的定位、內容在更廣泛的層面上，進行更形象直接的傳播。 對于網(wǎng)站來說，表現(xiàn)在版面上能給訪問者以強烈視覺印象的主要是網(wǎng)站的Logo和標準色。 第二節(jié) 網(wǎng)站的結構與編排_ 網(wǎng)站的創(chuàng)意設計網(wǎng)站的創(chuàng)意設計2006.12.1.xianLogo的表現(xiàn)形式及特點第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)站的創(chuàng)意設計網(wǎng)站的創(chuàng)意設計色調

6、 虛擬世界是個色彩繽紛的天地，許多現(xiàn)實中沒有的色彩都可以通過計算機合成，給人以不同的美感。 基于人的視覺享受，和保證網(wǎng)站整體整體風格的統(tǒng)一，網(wǎng)站通常會確定一至三種主色調。第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)站的創(chuàng)意設計網(wǎng)站的創(chuàng)意設計影響內容模塊設計的因素： 網(wǎng)站的定位 訪問者的閱讀習慣和興趣 通過網(wǎng)站的具體內容設計體現(xiàn)網(wǎng)站定位中的核心內容，從而實現(xiàn)網(wǎng)站經(jīng)營主體創(chuàng)辦網(wǎng)站的最終目的。通過喜聞樂見的內容方式滿足訪問者的各種需求，是網(wǎng)站吸引和留住訪問者的主要方法。第二節(jié) 網(wǎng)站的結構與編排_ 網(wǎng)站的創(chuàng)意設計網(wǎng)站的創(chuàng)意設計2006.12.1.xian三、首頁的編排設計 真正承載網(wǎng)站內

7、容的是網(wǎng)頁，而網(wǎng)頁中又以首頁為重要。幾乎所有的網(wǎng)站都會把最重要、最吸引人的內容放在首頁，而首頁也會是展現(xiàn)網(wǎng)站特色的重地。 基本原則： （1）邏輯性原則 （2）平衡性原則 （3）對比性原則 第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)頁的編排設計網(wǎng)頁的編排設計政府網(wǎng)站個人網(wǎng)站第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)頁的編排設計網(wǎng)頁的編排設計商業(yè)網(wǎng)站企業(yè)網(wǎng)站第二節(jié) 網(wǎng)站的結構與編排_ 網(wǎng)頁的編排設計網(wǎng)頁的編排設計2006.12.1.xian首頁構成要素文字圖片表格音視頻超連接線條色彩空白第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)頁的編排設計網(wǎng)頁的編排

8、設計 文字的美第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)頁的編排設計網(wǎng)頁的編排設計首頁的框架 首頁框架樣式眾多，沒有固定的標準或模式 ，一般集中為橫向劃分、豎向劃分和橫豎結合劃分三大形式粗框架。 第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)頁的編排設計網(wǎng)頁的編排設計 橫版結構第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)頁的編排設計網(wǎng)頁的編排設計 豎版結構第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)頁的編排設計網(wǎng)頁的編排設計 橫豎結合式結構第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_ 網(wǎng)頁的編排設計網(wǎng)頁的編排設計首頁的內容組織特點：（1）突出網(wǎng)站特色 （2）突出網(wǎng)絡信息的新 （3）內容編排忌凌亂 （4）重視首頁的網(wǎng)民戶動渠道 第二節(jié) 網(wǎng)站的結構與編排2006.12.1.xian_本節(jié)小結本節(jié)主要是從整體上對網(wǎng)站的框架結構、色調、內容等方面的設計進行學習。網(wǎng)站主要是視覺媒體，要通過人性化的設計、通過內在邏輯性將各種信息組合在一起，將其裝入科學設計的網(wǎng)站框架內，通過友好的界面和各種交互性的功能與用戶之間溝通交流，方便用