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

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

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