一般網站架構方案組長王瑤琴組員：葉瑤瑤傅云霞林盈2/5/20231大綱：1、網站的整體設計與CI策劃1.1整體設計1.2CI策劃2網站的欄目設置2.1劃分主要內容欄目2.2首頁設置超級鏈接和搜索引擎2.3設定雙向交流欄目2/5/202323網站的目次結構和鏈接結構3.1目次結構3.2鏈接結構4網站的風格5網站的版面布局與首頁設計5.1版面布局5.2首頁設計2/5/202336網站色彩的搭配7網站中的圖像和動畫2/5/20234一般網站的建設需要經歷這樣的步驟:首先要進行功能規劃、造型設計,在建造的過程中需要裝修裝飾,達到建站的目的。當一個瀏覽者經過一個網站時,會被網站新穎、獨特的樣式所吸引;網頁的構思、版式、色彩及圖形圖像處理都體現出所做網站的特質,能給瀏覽者留下深刻印象,這就是成功的網站設計。2/5/202351網站的整體設計與CI策劃如何面向客戶提供服務、發布信息、樹立良好的社會形象,都是網站要優先考慮的問題。1.1整體設計網站在設計制作中要達到內容與形式的統一。這里的內容指的是網站的信息數據及文字內容,形式指的是網頁設計的版式、構圖、布局、色彩以及它們所呈現出的風格特點。不同內容的網頁要求應用不同的設計形式。比如說,政府機構的網頁形式應簡潔、莊重;教育單位的網頁應明快、大方;商業類網頁則可鮮艷奪目、豐富多彩;文化藝術類的網頁應講求格調與品位等。下面是淘寶首頁的整體設計：2/5/202362/5/202371.2CI策劃CI,是廣告業的一個術語,是英文CorporateIdentity的縮寫。在我國CI策劃運作往往表現為通過視覺語言的運用來樹立形象、傳播信息,從而達到讓全社會認識、了解、接受的目的。一個成功的網站,和實體公司一樣,也需要整體的形象包裝和設計。準確的、有創意的CI設計,對網站的宣傳推廣有事半功倍的效果,它能使網站迅速地深入人心,起到語言文字所不能及的作用,因而,在網站主題和數據信息、圖文材料具備之后,需要思考的就是網站的CI策劃和形象設計。標志、色彩、字體和廣告語4個方面是一個網站樹立CI形象的關鍵。設計并完成這4項工作,網站的整體形象就有一個基本的輪廓,有了一個統一的面目,并且具有了一定的專業性。2/5/202382網站的欄目設置網站的欄目設置原則一是要重點突出,二是要方便用戶。網站欄目的實質是一個網站內容的大綱索引,就像是一本書的目次,可以引導瀏覽者尋找需要的東西。在設置欄目的時候,要仔細考慮內容的輕重緩急,合理安排,突出重點。2/5/202392.1劃分主要內容欄目將主要內容信息按一定的方法進行分類,并為它們設立專門的欄目。例如淘寶首頁有天貓，聚劃算，電器城，良無限，本地生活等。欄目的劃分要盡量清晰,不要給人一種模糊的概念。2/5/2023102.2首頁設置超級鏈接和搜索引擎網站的欄目分層設置,使網站的內容安排得有條理,結構清楚;用超級鏈接可以打破單一的線型結構,可以方便地從一個欄目切換到另一個欄目,使網站內容呈網型結構。解決問題的辦法是在保持網站欄目結構的前提下,把最重要的內容鏈接到首頁。如果網站的內容繁雜,層次較多,最好設置搜索引擎和“本站指南”欄目,可以幫助初訪者快速找到他們所需要的瀏覽內容。2/5/2023112.3設定雙向交流欄目交流欄目,是指論壇、評論等,可以讓瀏覽者有機會發表他們的意見,參與網站的活動。網絡的最大優勢之一是為人們提供相互溝通的手段,設立雙向交流欄目比簡單預留一個E-mail更具有親和力,更能發揮出網絡技術的優勢。2/5/2023123網站的目次結構和鏈接結構在對網站欄目設置有一個完整方案之后,可以進入到網絡技術實現的階段。網站的設計人員應與程序員共同商定網站的目次結構和鏈接結構。設計目次結構的原則是方便網站的管理與維護;設計鏈接結構的原則是方便瀏覽者的閱讀。2/5/2023133.1目次結構目次結構是一個容易忽略的問題。目次結構的好壞,對瀏覽者來說并沒有太大的影響,但是對于站點本身的上傳維護,內容信息未來的擴充和移植有著重要的影響。首先要合理安排文件的目次,不要將所有文件都存放在根目次下,這樣不容易造成文件管理的混亂,可提高工作效率。另外,所有文件都在同一個根目次下,在提交時會使上傳速度變慢。其次要按欄目內容建立子目次,按主菜單欄目建立,對每個欄目都相應建立一個文件夾,圖片統一放在一個專門存放圖片的文件夾中等,將需要經常更新的建立獨立的子目次。而一些相關性強,不需要經常更新的欄目則可以合并后放在一個統一目次下。需要注意的是:目次的層次不要太多,一般不超過5層。對于網站的工作人員來說,層次越少查找起來也就越容易,也就越便于維護管理;不要使用中文目次。網絡雖然是無國界的,但Internet上使用最廣泛的語言是英語,如果使用中文目次,有可能對網址的正確顯示造成困難,尤其是非漢語瀏覽者就不能正常使用了;使用意義明確的目次文件名,在給目次取名字時,應考慮取的名字盡量反映內容,以便于記憶管理。比如可以用欄目名字的拼音字母或英文名字建立目次。2/5/2023143.2鏈接結構網站的鏈接結構是指頁面之間相互鏈接關系。如果把這種關系畫成示意圖表,就好比一個拓撲結構圖。它建立在目次結構基礎之上,但可以跨越目次。形象地說,每個頁面都是一個固定點,鏈接是在2個固定點之間的連線。一個點可以和一個點連接,也可以和多個點連接。更重要的是,這些點并不是分布在一個平面上,而是存在于一個立體的空間中。要用最少的鏈接,使瀏覽最有效率。為幫助瀏覽者明確自己所處的位置,最好在頁面里顯示導航條。2/5/2023154網站的風格網站的風格是指站點的整體形象留給瀏覽者的綜合感受。第一,明確網站的服務對象。網站的風格在網站建立之前就已經被確定了,網站的設計師則應該加深對站點的了解,并借鑒其他設計領域的成功作品,才能使網站風格貼近內容,產生好的創意來。第二,明確網站性質之后,應考慮網站的個性化因素。如企業網站可以突出產品服務意識,顯示出周到服務的風格。2/5/2023165網站的版面布局與首頁設計當網站的總體設計基本確定之后,在實施階段,最具體的工作就是如何做一幅幅的網頁了。動手設計網頁的第一步是設計版面的布局。布局是一個設計的概念,指的是在一個限定的面積范圍內合理安排布置圖形圖像和文字的位置,在把文章信息按照輕重緩急的秩序陳列出來的同時,將頁面裝飾美化起來。2/5/2023175.1版面布局在輪廓草圖上,首先將需要放置的功能模塊安排到頁面上。主要包含網站標志、主菜單、欄目條、廣告位、搜索器、計數器等。必須突出重點,將網站標志、主菜單、欄目目次及廣告等最重要的模塊放在最顯眼、最突出的位置,然后再考慮次要模塊的排放。各個功能模塊的樣式、位置確定之后,需要認真研究文稿與圖形圖像的編排,按照平面設計的規律做出網頁的基本樣式,可以使用畫筆、尺子創作,也可以運用Photoshop,Illustrator,Pagemaker

或者Dreamweaver等軟件制作。在布局過程中,可以遵循的原則是:(1)平衡。指畫面的圖像、文字的視覺分量在左右上下幾個方位基本相等,分布勻稱,能達到安定、平穩的效果。過于平衡的畫面難免有呆板的感覺,有時需要在局部打破平衡或對稱。(2)呼應。在不平衡的布局中的補救措施,使一種元素同時出現在不同的地方,形成視覺上的相互聯系。(3)對比。利用不同的色彩、形態、線條等視覺元素相互并置對比,造成畫面的多種變化,達到豐富視覺的效果。(4)疏密。疏是指畫面中形式元素稀少(甚至空白)的部分,密是指畫面中形式元素繁多的部分。在網頁設計中就是空白的處理運用,太滿、太密、太平均是任何版式設計的大忌,適當的疏密搭配可以使畫面產生節奏感,體現出網站的格調與品位。網站的各個欄目,各級頁面都應該按照上述原則設計出草圖來,當然,各個欄目的內容不同,設計方案也應該有所變化。只要統一在網站基本風格之中就可以了。比如當當網，將一些熱門限時的促銷打折活動放在正中最突出顯眼的部分，文字置于四周，各部分疏密程度搭配適當。2/5/2023182/5/2023195.2首頁設計首頁是瀏覽者訪問一個網站時看到的第1頁,通過鏈接進入網站的欄目中,找到需要了解的內容。首頁好比是書的封面,首頁設計是一個網站能不能吸引人的關鍵。為網站設計什么樣的首頁,要依具體情況而定。2/5/2023206網站色彩的搭配色彩選擇和搭配是網站設計重點之一。包括網站的色調、背景、文字、圖標、邊框、鏈接等都是網站設計者一開始就必須要考慮的問題。生活中看到的顏色是光的吸收與反射而產生的。紅、黃、藍是三原色。自然界中的顏色都可以用這3種顏色調和而成,而計算機中的顏色則是由紅、綠、藍3種顏色搭配而成的。比如海爾的網站就采用冷色系，而淘寶則采用暖色系；2/5/2023212/5/2023227網站中的圖像和動畫