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

一般網(wǎng)站架構(gòu)方案 組長(zhǎng)王瑤琴組員 葉瑤瑤傅云霞林盈 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首頁(yè)設(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)站的版面布局與首頁(yè)設(shè)計(jì)5 1版面布局5 2首頁(yè)設(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ì) 在建造的過(guò)程中需要裝修裝飾 達(dá)到建站的目的 當(dāng)一個(gè)瀏覽者經(jīng)過(guò)一個(gè)網(wǎng)站時(shí) 會(huì)被網(wǎng)站新穎 獨(dú)特的樣式所吸引 網(wǎng)頁(yè)的構(gòu)思 版式 色彩及圖形圖像處理都體現(xiàn)出所做網(wǎng)站的特質(zhì) 能給瀏覽者留下深刻印象 這就是成功的網(wǎng)站設(shè)計(jì) 2020 4 20 6 1網(wǎng)站的整體設(shè)計(jì)與CI策劃如何面向客戶提供服務(wù) 發(fā)布信息 樹(shù)立良好的社會(huì)形象 都是網(wǎng)站要優(yōu)先考慮的問(wèn)題 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ì)形式 比如說(shuō) 政府機(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ì) 2020 4 20 7 2020 4 20 8 1 2CI策劃CI 是廣告業(yè)的一個(gè)術(shù)語(yǔ) 是英文CorporateIdentity的縮寫 在我國(guó)CI策劃運(yùn)作往往表現(xiàn)為通過(guò)視覺(jué)語(yǔ)言的運(yùn)用來(lái)樹(shù)立形象 傳播信息 從而達(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)站樹(shù)立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è)立專門的欄目 例如淘寶首頁(yè)有天貓 聚劃算 電器城 良無(wú)限 本地生活等 欄目的劃分要盡量清晰 不要給人一種模糊的概念 2020 4 20 11 2 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èn)題的辦法是在保持網(wǎng)站欄目結(jié)構(gòu)的前提下 把最重要的內(nèi)容鏈接到首頁(yè) 如果網(wǎng)站的內(nèi)容繁雜 層次較多 最好設(shè)置搜索引擎和 本站指南 欄目 可以幫助初訪者快速找到他們所需要的瀏覽內(nèi)容 2020 4 20 12 2 3設(shè)定雙向交流欄目交流欄目 是指論壇 評(píng)論等 可以讓瀏覽者有機(jī)會(huì)發(fā)表他們的意見(jiàn) 參與網(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ì) 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è)容易忽略的問(wèn)題 目次結(jié)構(gòu)的好壞 對(duì)瀏覽者來(lái)說(shuō)并沒(méi)有太大的影響 但是對(duì)于站點(diǎn)本身的上傳維護(hù) 內(nèi)容信息未來(lá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)一目次下 需要注意的是 目次的層次不要太多 一般不超過(guò)5層 對(duì)于網(wǎng)站的工作人員來(lái)說(shuō) 層次越少查找起來(lái)也就越容易 也就越便于維護(hù)管理 不要使用中文目次 網(wǎng)絡(luò)雖然是無(wú)國(guó)界的 但I(xiàn)nternet上使用最廣泛的語(yǔ)言是英語(yǔ) 如果使用中文目次 有可能對(duì)網(wǎng)址的正確顯示造成困難 尤其是非漢語(yǔ)瀏覽者就不能正常使用了 使用意義明確的目次文件名 在給目次取名字時(shí) 應(yīng)考慮取的名字盡量反映內(nèi)容 以便于記憶管理 比如可以用欄目名字的拼音字母或英文名字建立目次 2020 4 20 15 3 2鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁(yè)面之間相互鏈接關(guān)系 如果把這種關(guān)系畫成示意圖表 就好比一個(gè)拓?fù)浣Y(jié)構(gòu)圖 它建立在目次結(jié)構(gòu)基礎(chǔ)之上 但可以跨越目次 形象地說(shuō) 每個(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)航條 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)意來(lái) 第二 明確網(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)站的版面布局與首頁(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)合理安排布置圖形圖像和文字的位置 在把文章信息按照輕重緩急的秩序陳列出來(lái)的同時(shí) 將頁(yè)面裝飾美化起來(lái) 2020 4 20 18 5 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等軟件制作 在布局過(guò)程中 可以遵循的原則是 1 平衡 指畫面的圖像 文字的視覺(jué)分量在左右上下幾個(gè)方位基本相等 分布勻稱 能達(dá)到安定 平穩(wěn)的效果 過(guò)于平衡的畫面難免有呆板的感覺(jué) 有時(shí)需要在局部打破平衡或?qū)ΨQ 2 呼應(yīng) 在不平衡的布局中的補(bǔ)救措施 使一種元素同時(shí)出現(xiàn)在不同的地方 形成視覺(jué)上的相互聯(lián)系 3 對(duì)比 利用不同的色彩 形態(tài) 線條等視覺(jué)元素相互并置對(duì)比 造成畫面的多種變化 達(dá)到豐富視覺(jué)的效果 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ì)出草圖來(lái) 當(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首頁(yè)設(shè)計(jì)首頁(yè)是瀏覽者訪問(wèn)一個(gè)網(wǎng)站時(shí)看到的第1頁(yè) 通過(guò)鏈接進(jìn)入網(wǎng)站的欄目中 找到需要了解的內(nèi)容 首頁(yè)好比是書的封面 首頁(yè)設(shè)計(jì)是一個(gè)網(wǎng)站能不能吸引人的關(guān)鍵 為網(wǎng)站設(shè)計(jì)什么樣的首頁(yè) 要依具體情況而定 2020 4 20 21 6網(wǎng)站色彩的搭配色彩選擇和搭配是網(wǎng)站設(shè)計(jì)重點(diǎn)之一 包括網(wǎng)站的色調(diào) 背景 文字 圖標(biāo) 邊框 鏈接等都是網(wǎng)站設(shè)計(jì)者一開(kāi)始就必須要考慮的問(wèn)題 生活中看到的顏色是光的吸收與反射而產(chǎn)生的 紅 黃 藍(lán)是三原色 自然界中的顏色都可以用這3種顏色調(diào)和而成 而計(jì)算機(jī)中的顏色則是由紅 綠 藍(lán)3種顏色搭配而成的 比如海爾的網(wǎng)站就采用冷色系 而淘寶則采用暖色系 2020 4 20 22 2020 4 20 2