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

一般網(wǎng)站架構(gòu)方案 組長王瑤琴組員 葉瑤瑤傅云霞林盈 2020 4 20 2 大綱 1 網(wǎng)站的整體設(shè)計(jì)與CI策劃1 1整體設(shè)計(jì)1 2CI策劃2網(wǎng)站的欄目設(shè)置2 1劃分主要內(nèi)容欄目2 2首頁設(shè)置超級(jí)鏈接和搜索引擎2 3設(shè)定雙向交流欄目 2020 4 20 3 3網(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)站的版面布局與首頁設(shè)計(jì)5 1版面布局5 2首頁設(shè)計(jì) 2020 4 20 4 6網(wǎng)站色彩的搭配7網(wǎng)站中的圖像和動(dòng)畫 2020 4 20 5 一般網(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)頁的構(gòu)思 版式 色彩及圖形圖像處理都體現(xiàn)出所做網(wǎng)站的特質(zhì) 能給瀏覽者留下深刻印象 這就是成功的網(wǎng)站設(shè)計(jì) 2020 4 20 6 1網(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)頁設(shè)計(jì)的版式 構(gòu)圖 布局 色彩以及它們所呈現(xiàn)出的風(fēng)格特點(diǎn) 不同內(nèi)容的網(wǎng)頁要求應(yīng)用不同的設(shè)計(jì)形式 比如說 政府機(jī)構(gòu)的網(wǎng)頁形式應(yīng)簡潔 莊重 教育單位的網(wǎng)頁應(yīng)明快 大方 商業(yè)類網(wǎng)頁則可鮮艷奪目 豐富多彩 文化藝術(shù)類的網(wǎng)頁應(yīng)講求格調(diào)與品位等 下面是淘寶首頁的整體設(shè)計(jì) 2020 4 20 7 2020 4 20 8 1 2CI策劃CI 是廣告業(yè)的一個(gè)術(shù)語 是英文CorporateIdentity的縮寫 在我國CI策劃運(yùn)作往往表現(xiàn)為通過視覺語言的運(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)站迅速地深入人心 起到語言文字所不能及的作用 因而 在網(wǎng)站主題和數(shù)據(jù)信息 圖文材料具備之后 需要思考的就是網(wǎng)站的CI策劃和形象設(shè)計(jì) 標(biāo)志 色彩 字體和廣告語4個(gè)方面是一個(gè)網(wǎng)站樹立CI形象的關(guān)鍵 設(shè)計(jì)并完成這4項(xiàng)工作 網(wǎng)站的整體形象就有一個(gè)基本的輪廓 有了一個(gè)統(tǒng)一的面目 并且具有了一定的專業(yè)性 2020 4 20 9 2網(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) 2020 4 20 10 2 1劃分主要內(nèi)容欄目將主要內(nèi)容信息按一定的方法進(jìn)行分類 并為它們?cè)O(shè)立專門的欄目 例如淘寶首頁有天貓 聚劃算 電器城 良無限 本地生活等 欄目的劃分要盡量清晰 不要給人一種模糊的概念 2020 4 20 11 2 2首頁設(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)容鏈接到首頁 如果網(wǎng)站的內(nèi)容繁雜 層次較多 最好設(shè)置搜索引擎和 本站指南 欄目 可以幫助初訪者快速找到他們所需要的瀏覽內(nèi)容 2020 4 20 12 2 3設(shè)定雙向交流欄目交流欄目 是指論壇 評(píng)論等 可以讓瀏覽者有機(jī)會(huì)發(fā)表他們的意見 參與網(wǎng)站的活動(dòng) 網(wǎng)絡(luò)的最大優(yōu)勢(shì)之一是為人們提供相互溝通的手段 設(shè)立雙向交流欄目比簡單預(yù)留一個(gè)E mail更具有親和力 更能發(fā)揮出網(wǎng)絡(luò)技術(shù)的優(yōu)勢(shì) 2020 4 20 13 3網(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)的原則是方便瀏覽者的閱讀 2020 4 20 14 3 1目次結(jié)構(gòu)目次結(jié)構(gòu)是一個(gè)容易忽略的問題 目次結(jié)構(gòu)的好壞 對(duì)瀏覽者來說并沒有太大的影響 但是對(duì)于站點(diǎn)本身的上傳維護(hù) 內(nèi)容信息未來的擴(kuò)充和移植有著重要的影響 首先要合理安排文件的目次 不要將所有文件都存放在根目次下 這樣不容易造成文件管理的混亂 可提高工作效率 另外 所有文件都在同一個(gè)根目次下 在提交時(shí)會(huì)使上傳速度變慢 其次要按欄目內(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ò)雖然是無國界的 但I(xiàn)nternet上使用最廣泛的語言是英語 如果使用中文目次 有可能對(duì)網(wǎng)址的正確顯示造成困難 尤其是非漢語瀏覽者就不能正常使用了 使用意義明確的目次文件名 在給目次取名字時(shí) 應(yīng)考慮取的名字盡量反映內(nèi)容 以便于記憶管理 比如可以用欄目名字的拼音字母或英文名字建立目次 2020 4 20 15 3 2鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接關(guān)系 如果把這種關(guān)系畫成示意圖表 就好比一個(gè)拓?fù)浣Y(jié)構(gòu)圖 它建立在目次結(jié)構(gòu)基礎(chǔ)之上 但可以跨越目次 形象地說 每個(gè)頁面都是一個(gè)固定點(diǎn) 鏈接是在2個(gè)固定點(diǎn)之間的連線 一個(gè)點(diǎn)可以和一個(gè)點(diǎn)連接 也可以和多個(gè)點(diǎn)連接 更重要的是 這些點(diǎn)并不是分布在一個(gè)平面上 而是存在于一個(gè)立體的空間中 要用最少的鏈接 使瀏覽最有效率 為幫助瀏覽者明確自己所處的位置 最好在頁面里顯示導(dǎo)航條 2020 4 20 16 4網(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)格 2020 4 20 17 5網(wǎng)站的版面布局與首頁設(shè)計(jì)當(dāng)網(wǎng)站的總體設(shè)計(jì)基本確定之后 在實(shí)施階段 最具體的工作就是如何做一幅幅的網(wǎng)頁了 動(dòng)手設(shè)計(jì)網(wǎng)頁的第一步是設(shè)計(jì)版面的布局 布局是一個(gè)設(shè)計(jì)的概念 指的是在一個(gè)限定的面積范圍內(nèi)合理安排布置圖形圖像和文字的位置 在把文章信息按照輕重緩急的秩序陳列出來的同時(shí) 將頁面裝飾美化起來 2020 4 20 18 5 1版面布局在輪廓草圖上 首先將需要放置的功能模塊安排到頁面上 主要包含網(wǎng)站標(biāo)志 主菜單 欄目條 廣告位 搜索器 計(jì)數(shù)器等 必須突出重點(diǎn) 將網(wǎng)站標(biāo)志 主菜單 欄目目次及廣告等最重要的模塊放在最顯眼 最突出的位置 然后再考慮次要模塊的排放 各個(gè)功能模塊的樣式 位置確定之后 需要認(rèn)真研究文稿與圖形圖像的編排 按照平面設(shè)計(jì)的規(guī)律做出網(wǎng)頁的基本樣式 可以使用畫筆 尺子創(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)頁設(shè)計(jì)中就是空白的處理運(yùn)用 太滿 太密 太平均是任何版式設(shè)計(jì)的大忌 適當(dāng)?shù)氖杳艽钆淇梢允巩嬅娈a(chǎn)生節(jié)奏感 體現(xiàn)出網(wǎng)站的格調(diào)與品位 網(wǎng)站的各個(gè)欄目 各級(jí)頁面都應(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) 2020 4 20 19 2020 4 20 20 5 2首頁設(shè)計(jì)首頁是瀏覽者訪問一個(gè)網(wǎng)站時(shí)看到的第1頁 通過鏈接進(jìn)入網(wǎng)站的欄目中 找到需要了解的內(nèi)容 首頁好比是書的封面 首頁設(shè)計(jì)是一個(gè)網(wǎng)站能不能吸引人的關(guān)鍵 為網(wǎng)站設(shè)計(jì)什么樣的首頁 要依具體情況而定 2020 4 20 21 6網(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)站就采用冷色系 而淘寶則采用暖色系 2020 4 20 22 2020 4 20 2