一般網(wǎng)站架構(gòu)

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

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