1、企業(yè)網(wǎng)站建站過(guò)程 網(wǎng)站的形象設(shè)計(jì) 1.網(wǎng)站的標(biāo)志 2.網(wǎng)站的風(fēng)格定義 3.網(wǎng)站的廣告詞 4.網(wǎng)站的標(biāo)準(zhǔn)色彩 5.網(wǎng)站的標(biāo)準(zhǔn)字體 規(guī)劃網(wǎng)站欄目 規(guī)劃網(wǎng)站欄目1.劃分主要欄目 2.首頁(yè)超級(jí)鏈接和搜索引擎 3.設(shè)定交互欄目 4.設(shè)置下載和咨詢(xún)服務(wù)欄目 5.方便的網(wǎng)站導(dǎo)航 6.網(wǎng)站的目錄結(jié)構(gòu) 7.網(wǎng)站的鏈接結(jié)構(gòu) 版面設(shè)計(jì) 1.版面設(shè)計(jì)的過(guò)程 2.常見(jiàn)的版面樣式3.首頁(yè)的設(shè)計(jì) 網(wǎng)頁(yè)的色彩搭配 1.色彩的基本知識(shí) 2.色彩搭配的原則 3.色彩搭配的技巧 網(wǎng)頁(yè)中的圖像處理 1.圖像的類(lèi)型 2.圖像的格式 3.圖像的處理技巧 網(wǎng)頁(yè)中的字體 1.字體與字號(hào) 2.特殊字體的處理網(wǎng)頁(yè)中的動(dòng)畫(huà)與廣告 1.動(dòng)畫(huà)制作的工

2、具 1. 收集信息 2周2. 設(shè)計(jì)草案 3天3. 制作設(shè)計(jì)手冊(cè) 網(wǎng)站結(jié)構(gòu) 頁(yè)面結(jié)構(gòu)色彩版式 預(yù)算報(bào)價(jià) 2周4. 制作頁(yè)面 1周5. 調(diào)試 2周6. 發(fā)布7. 跟蹤 半年1.具體的實(shí)用信息：主要是由文字?jǐn)?shù)據(jù)和圖形圖像組成，有些網(wǎng)站還可以使用動(dòng)畫(huà)聲音等多媒體技術(shù), 它們通過(guò)網(wǎng)站本身的欄目設(shè)置體現(xiàn)出來(lái)。（由業(yè)務(wù)部門(mén)提供）1.廣義的信息：包括網(wǎng)站的CI設(shè)計(jì)，網(wǎng)站主題定位和網(wǎng)民群體的定位以及網(wǎng)頁(yè)的制作策劃，形象包裝宣傳營(yíng)銷(xiāo)等等，它主要是通過(guò)視覺(jué)語(yǔ)言來(lái)樹(shù)立網(wǎng)站的社會(huì)形象從而達(dá)到廣告宣傳的效果。（由管理部門(mén)提供甚至需要借助廣告策劃的眼光進(jìn)行全面的CI 設(shè)計(jì)才可能有一個(gè)好的方案）設(shè)計(jì)網(wǎng)站的標(biāo)志標(biāo)志圖形的設(shè)計(jì)創(chuàng)

3、意來(lái)自網(wǎng)站的名稱(chēng)和內(nèi)容，標(biāo)志可以是中文英文字母，可以是符號(hào)圖案，可以是動(dòng)物或者人物等。網(wǎng)站標(biāo)志設(shè)計(jì)創(chuàng)意可以從以下幾種思路開(kāi)始: (1) 選用公司有代表性的人物，動(dòng)物,花草，可以用它們作為設(shè)計(jì)的藍(lán)本加以卡通化和藝術(shù)化。 (2) 網(wǎng)站有專(zhuān)業(yè)性的可以以本專(zhuān)業(yè)有代表性的物品作為標(biāo)志。網(wǎng)站的標(biāo)準(zhǔn)色彩 企業(yè)的標(biāo)準(zhǔn)色，就是該企業(yè)在自己標(biāo)志產(chǎn)品及宣傳品等方面統(tǒng)一使用的一個(gè)固定的顏色。 網(wǎng)站的標(biāo)準(zhǔn)色彩只能是一種，具體應(yīng)用時(shí)可以標(biāo)準(zhǔn)色為中心利用它的明度變化產(chǎn)生不同的色彩，標(biāo)準(zhǔn)色彩要廣泛運(yùn)用于網(wǎng)站的標(biāo)志,標(biāo)題，主菜單和背景色塊,給人以整體統(tǒng)一的感覺(jué)，其它色彩只是作為對(duì)比和襯托,絕不能喧賓奪主。網(wǎng)站的標(biāo)準(zhǔn)字體1. 標(biāo)

4、準(zhǔn)字體是指網(wǎng)站用于標(biāo)志標(biāo)題,主菜單的特有字體。2. 特別字體只能用圖形圖像的形式出現(xiàn)在網(wǎng)頁(yè)中。網(wǎng)站的廣告詞1.用簡(jiǎn)潔精煉的句子傳達(dá)信息，網(wǎng)站設(shè)計(jì)者應(yīng)努力用一句話一個(gè)詞來(lái)高度概括網(wǎng)站的性質(zhì)特點(diǎn)和網(wǎng)站的目標(biāo)，創(chuàng)造出類(lèi)似實(shí)際生活中的廣告金語(yǔ)來(lái)，在最短的時(shí)間內(nèi)傳達(dá)出最豐富的內(nèi)涵。2.標(biāo)志，色彩，字體和廣告語(yǔ)四個(gè)方面是一個(gè)網(wǎng)站樹(shù)立CI 形象的關(guān)鍵，確切地說(shuō)是網(wǎng)站的表面工作，設(shè)計(jì)并完成這四項(xiàng)工作網(wǎng)站的整體形象就有一個(gè)基本的輪廓，有了一個(gè)統(tǒng)一的面目并且具有了一定的專(zhuān)業(yè)性。規(guī)劃網(wǎng)站欄目細(xì)致地劃分主要內(nèi)容欄目 將主要內(nèi)容信息按一定的方法分類(lèi)，并為它們?cè)O(shè)立專(zhuān)門(mén)的欄目。“開(kāi)門(mén)見(jiàn)山”地列出主要內(nèi)容 網(wǎng)頁(yè)的內(nèi)容一般分為

5、幾個(gè)層次，網(wǎng)站的主要內(nèi)容一定要放在首頁(yè)或一二級(jí)欄目中，如果因信息內(nèi)容結(jié)構(gòu)問(wèn)題不得不放在較深的位置上，一定設(shè)法將它在首頁(yè)安排超級(jí)連接，同時(shí)在其他網(wǎng)頁(yè)放置多個(gè)超級(jí)連接以便使瀏覽者很容易地找到它。規(guī)劃網(wǎng)站欄目首頁(yè)設(shè)置超級(jí)鏈接和搜索引擎設(shè)定交流的欄目 交流欄目是指論壇,留言本,郵件列表等，可以讓瀏覽者有機(jī)會(huì)發(fā)表他們的意見(jiàn)，參與網(wǎng)站的活動(dòng)。設(shè)置信息下載和咨詢(xún)服務(wù)欄目方便實(shí)用的網(wǎng)站指南網(wǎng)站的目錄結(jié)構(gòu) 設(shè)計(jì)目錄結(jié)構(gòu)的原則是方便網(wǎng)站的管理與維護(hù)，設(shè)計(jì)鏈接結(jié)構(gòu)的原則是方便瀏覽者的閱讀。網(wǎng)站的目錄結(jié)構(gòu)1.合理安排文件的目錄，不要將所有文件都存放在根目錄下。2.按欄目?jī)?nèi)容建立子目錄3.在每個(gè)一級(jí)目錄或二級(jí)目錄下都建

6、立獨(dú)立的Images 目錄，管理素材。網(wǎng)站的目錄結(jié)構(gòu)1.目錄的層次不要太多，一般目錄的層次不超過(guò)5 層，對(duì)于網(wǎng)站的工作人員來(lái)說(shuō)層次越少查找起來(lái)也就越容易，也就越便于維護(hù)管理2.不要使用中文目錄，網(wǎng)絡(luò)是無(wú)國(guó)界的Internet 上使用最廣泛的語(yǔ)言是英語(yǔ)，如果使用中文目錄有可能對(duì)網(wǎng)址的正確顯示造成困難, 尤其會(huì)給非漢語(yǔ)的瀏覽者帶來(lái)不便3.使用意義明確的目錄文件名，在給目錄取名字時(shí)應(yīng)考慮取的名字，盡量反映內(nèi)容以便于記憶管理。網(wǎng)站的鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁(yè)面之間相互鏈接關(guān)系。安排鏈接結(jié)構(gòu)的原則： 1.一是要符合瀏覽者的思維習(xí)慣和瀏覽習(xí)慣。 2.一是要將網(wǎng)站中最重要的信息有最多的機(jī)會(huì)與瀏覽者見(jiàn)面。設(shè)

7、計(jì)選項(xiàng)1. 線性方法主頁(yè)P(yáng)age one Page two Page three 2 分層模式主頁(yè)主題A主題B主題C子主題A2子主題B2子主題C1子主題B1子主題C23 網(wǎng)絡(luò)中心模式主頁(yè)主題A主題B主題C主題D主題E主題F主題G主題H主題I4 全Web設(shè)計(jì)網(wǎng)站的鏈接結(jié)構(gòu)關(guān)于鏈接結(jié)構(gòu)的設(shè)計(jì),在實(shí)際的網(wǎng)站建設(shè)中是非常重要的問(wèn)題,采用什么樣的鏈接結(jié)構(gòu)直接影響到版面的布局.網(wǎng)站的風(fēng)格與創(chuàng)意設(shè)計(jì)網(wǎng)站的風(fēng)格: 指站點(diǎn)的整體形象給瀏覽者的綜合感受,這個(gè)整體形象包括站點(diǎn)的C I ,標(biāo)志,色彩,字體,標(biāo)語(yǔ),版面布局顯示方式,交互方式,文字風(fēng)格等等諸多因素.網(wǎng)站的風(fēng)格與創(chuàng)意設(shè)計(jì)網(wǎng)站具有獨(dú)特的風(fēng)格可以從以下幾方面考

8、慮:1.明確網(wǎng)站的服務(wù)對(duì)象2.網(wǎng)站美術(shù)設(shè)計(jì)師應(yīng)該明確自己的想法,明確自己要追求的藝術(shù)效果,明確了自己的行業(yè)定位之后,應(yīng)考慮網(wǎng)站的個(gè)性化因素.3.在明確自己的網(wǎng)站印象后,努力加強(qiáng)這種印象,如果經(jīng)過(guò)反思發(fā)現(xiàn)其中最有特色的東西,就是最能體現(xiàn)網(wǎng)站風(fēng)格的東西,并以它作為網(wǎng)站的特色加以重點(diǎn),強(qiáng)化,制訂一套基本的規(guī)格和技術(shù)指標(biāo)(類(lèi)似標(biāo)準(zhǔn)化),將它們運(yùn)用到所有的頁(yè)面中去.網(wǎng)站的風(fēng)格與創(chuàng)意設(shè)計(jì)1.將網(wǎng)站的標(biāo)志,特有的花邊,線條,圖案出現(xiàn)在每個(gè)頁(yè)面上,應(yīng)該創(chuàng)作一些網(wǎng)站特有的符號(hào)或圖標(biāo).2.使用標(biāo)準(zhǔn)色彩和相近的底色背景色,文字的鏈接色彩,圖片的色調(diào),頁(yè)面的底色邊框色等盡量采用與標(biāo)準(zhǔn)色彩一致或相近的色彩.3.突出標(biāo)準(zhǔn)

9、字體在關(guān)鍵性的標(biāo)題,菜單,圖片里使用統(tǒng)一的標(biāo)準(zhǔn)字體.4.用統(tǒng)一的圖片處理效果比如陰影效果的方向厚度模糊度都必須統(tǒng)一.采取上述具體措施后,雖不能完全保證網(wǎng)站的藝術(shù)效果和品位,但卻使網(wǎng)站具有統(tǒng)一性完整性.版面布局與首頁(yè)的設(shè)計(jì)布局： 是一個(gè)設(shè)計(jì)的概念,指的是在一個(gè)限定的面積范圍內(nèi)合理安排布置圖形，圖像和文字的位置，在把文章信息按照輕重緩急的秩序陳列出來(lái)的同時(shí)將頁(yè)面裝飾美化起來(lái)。版面標(biāo)準(zhǔn)： 設(shè)定為800*600 像素版面布局與首頁(yè)的設(shè)計(jì)過(guò)程版面布局的過(guò)程 最初的設(shè)計(jì)還是需要?jiǎng)庸P勾畫(huà)草圖的，草圖的目的是將腦海里朦朧的想法具體化變成可視可見(jiàn)的輪廓。 在輪廓草圖上首先將需要放置的功能模塊安排到頁(yè)面上，主要包

10、含網(wǎng)站標(biāo)志，主菜單，欄目條，廣告位，搜索器，計(jì)數(shù)器等，這時(shí)我們必須突出重點(diǎn)，將網(wǎng)站標(biāo)志，主菜單，商品目錄，及廣告等最重要的模塊放在最顯眼最突出的位置，然后再考慮次要模塊的排放。版面布局與首頁(yè)的設(shè)計(jì)在布局過(guò)程中我們遵循的原則：w平衡：指畫(huà)面的圖像文字的視覺(jué)分量在左右，上下幾個(gè)方位基本相等，分布勻稱(chēng), 能達(dá)到安定平穩(wěn)的效果。過(guò)于平衡的畫(huà)面難免有呆板的感覺(jué)。有時(shí)需要在局部打破平衡或?qū)ΨQ(chēng)。w呼應(yīng)：在不平衡的布局中的補(bǔ)救措施，使一種元素同時(shí)出現(xiàn)在不同的地方形成視覺(jué)上的相互聯(lián)系。版面布局與首頁(yè)的設(shè)計(jì)對(duì)比:所謂對(duì)比就是利用不同的色彩，形態(tài)，線條等視覺(jué)元素相互并置對(duì)比,造成畫(huà)面的多種變化, 達(dá)到豐富視覺(jué)的效果

11、。疏密:疏密關(guān)系本是繪畫(huà)的概念,疏是指畫(huà)面中形式元素稀少,甚至空白的部分.密是指畫(huà)面中形式元素繁多的部分,在網(wǎng)頁(yè)設(shè)計(jì)中,就是空白的處理,運(yùn)用太滿(mǎn)太密,太平均是任何版式設(shè)計(jì)的大忌,適當(dāng)?shù)氖杳艽钆淇梢允巩?huà)面產(chǎn)生節(jié)奏感,體現(xiàn)出網(wǎng)站的格調(diào)與品位圖.版面布局與首頁(yè)的設(shè)計(jì)各個(gè)字體字號(hào)的描述,及其所在頁(yè)面位置的參數(shù),有些作為標(biāo)題的文字其實(shí)已作為圖形圖像對(duì)待了,這里的文字僅僅指文本的字體和由計(jì)算機(jī)程序產(chǎn)生的標(biāo)題字時(shí)，應(yīng)說(shuō)明字體的HTML的色彩數(shù)值.各種色彩的數(shù)值的確定，除圖形圖像以外，設(shè)計(jì)方案中的標(biāo)準(zhǔn)色，底色，文字的顏色，都應(yīng)該以RGB 模式數(shù)值或HTML語(yǔ)言數(shù)值表示出來(lái)，最后必須估算一下頁(yè)面的大小，根據(jù)經(jīng)驗(yàn)

12、或參照類(lèi)似的在線網(wǎng)頁(yè)，概算一下將來(lái)的網(wǎng)頁(yè)大約有多少個(gè)KB， 一般每頁(yè)上的圖文KB 數(shù)加起來(lái)不要超出50KB 否則就會(huì)影響顯示速度。版面布局與首頁(yè)的設(shè)計(jì)范例幾種常見(jiàn)的版面布局樣式w“同”字型結(jié)構(gòu)布局：所謂同字型結(jié)構(gòu)就是指頁(yè)面頂部為主菜單，下方左側(cè)為二級(jí)欄目條，右側(cè)為鏈接欄目條，屏幕中間顯示具體內(nèi)容的布局。這種布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰，左右對(duì)稱(chēng)，主次分明，因而同字型布局的網(wǎng)頁(yè)得到非常普遍的運(yùn)用，不過(guò)同字型布局的缺點(diǎn)：是太規(guī)矩呆板如果細(xì)節(jié)色彩上缺少變化調(diào)劑，很容易讓人感到單調(diào)乏味。版面布局與首頁(yè)的設(shè)計(jì)范例“國(guó)”字型布局 國(guó)字型布局是在同字型布局基礎(chǔ)上演化而來(lái)的，在保留同字型的同時(shí)，在頁(yè)面的下方增加一

13、橫條狀的菜單或廣告。這種布局的優(yōu)點(diǎn)是充分利用版面信息量大與其它頁(yè)面的鏈接多切換方便，缺點(diǎn)是頁(yè)面擁擠四面封閉，令人感到憋氣。自由式布局自由式布局打破了同字型，國(guó)字型布局的菜單框架結(jié)構(gòu)頁(yè)面，布局像一張宣傳海報(bào)以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心菜單欄目自由地?cái)[放在頁(yè)面上常用于時(shí)尚類(lèi)站點(diǎn)網(wǎng)頁(yè)優(yōu)點(diǎn)是漂亮吸引人，缺點(diǎn)就是顯示速度慢文字信息量少，這種布局適合于以圖像為主要內(nèi)容的站點(diǎn).版面布局與首頁(yè)的設(shè)計(jì)范例左右對(duì)稱(chēng)布局顧名思義采取左右分割屏幕的辦法形成的對(duì)稱(chēng)布局，在左右部分內(nèi)自由安排文字圖像和鏈接，點(diǎn)擊左邊的鏈接時(shí)，在右邊顯示鏈接的內(nèi)容，它的優(yōu)點(diǎn)是既活潑自由，又可顯示較多的文字圖像。缺點(diǎn)是將兩部分有機(jī)的結(jié)合比

14、較困難不適于信息數(shù)據(jù)量巨大的網(wǎng)站。版面布局與首頁(yè)的設(shè)計(jì)范例版面布局與首頁(yè)的設(shè)計(jì)形式網(wǎng)站的首頁(yè)大致分為三種類(lèi)型w書(shū)籍封面式首頁(yè)有些大型網(wǎng)站往往有一個(gè)書(shū)籍封面式的，首頁(yè)上面只有一個(gè)進(jìn)入的鏈接點(diǎn)擊之后，才進(jìn)入到網(wǎng)站。這種首頁(yè)設(shè)計(jì)精美非常考究給人以雍容大度的氣派。 版面布局與首頁(yè)的設(shè)計(jì)形式期刊雜志式的首頁(yè) 與書(shū)籍封面式首頁(yè)相似，但在首頁(yè)上有站點(diǎn)全部?jī)?nèi)容的目錄索引，圖文并茂看上去就像是期刊雜志的封面，既漂亮又使網(wǎng)站的主要內(nèi)容一目了然，是一種值得推薦的形式。版面布局與首頁(yè)的設(shè)計(jì)形式報(bào)紙式的首頁(yè)許多電子商務(wù)網(wǎng)站，搜索引擎網(wǎng)站和新聞信息網(wǎng)站更加務(wù)實(shí)，為了速度和操作的簡(jiǎn)便，往往采用報(bào)紙式的首頁(yè)設(shè)計(jì)，將欄目索引，

15、功能模塊，具體內(nèi)容一并顯示在首頁(yè)看上去就像一張報(bào)紙的頭版一樣。版面布局與首頁(yè)的設(shè)計(jì)欄目電子商務(wù)站點(diǎn)的首頁(yè)需要設(shè)置這樣一些功能模塊和欄目：網(wǎng)站名稱(chēng)及標(biāo)志(logo) 會(huì)員注冊(cè)(enroll) 產(chǎn)品目錄(manufacture) 服務(wù)項(xiàng)目與條款(sever) 關(guān)于本站announcement 搜索器(search) 廣告條(banner) 有些網(wǎng)站還開(kāi)設(shè)新聞欄目( w h a t snews),信息咨詢(xún)(consult) 免費(fèi)電子郵箱(free E-mail)等等，至于各個(gè)首頁(yè)選擇哪些模塊與網(wǎng)站想要實(shí)現(xiàn)的功能有關(guān)。網(wǎng)頁(yè)色彩的搭配 w 色彩的基本知識(shí)（參照網(wǎng)頁(yè)色彩構(gòu)成概論）w 網(wǎng)頁(yè)色彩搭配的原則1.

16、 色彩的合理性，網(wǎng)頁(yè)的色彩要漂亮引人注目，同時(shí)還要照顧到人的眼睛的生理特點(diǎn)不要用大面積的高純度色相，它容易使人的眼睛疲勞。2. 色彩的獨(dú)特性，要有與眾不同的色彩搭配襯托出網(wǎng)站的個(gè)性，使得大家對(duì)你的印象深刻。3. 色彩的藝術(shù)性，色彩設(shè)計(jì)屬于藝術(shù)形式的范疇，按照內(nèi)容決定形式的原則，色彩應(yīng)服務(wù)于網(wǎng)站的內(nèi)容，和網(wǎng)站的氣氛相適應(yīng)。對(duì)比色與網(wǎng)頁(yè)色彩的搭配對(duì)比色的應(yīng)用,原色飽和度較高的色彩搭配使用，即為對(duì)比色。各種色彩均可作為對(duì)比色使用，但應(yīng)以一種顏色為主調(diào)，使它占有較大的面積，同時(shí)輔以對(duì)比色，起到點(diǎn)綴豐富的作用。例如以粉紅色為主的色調(diào)，配以小面積的淡藍(lán)，淡黃，淡綠，或者土黃，土灰，土藍(lán)。商業(yè)零售站點(diǎn)，新聞

17、站點(diǎn)，常常運(yùn)用對(duì)比色造成豐富充實(shí)的效果。網(wǎng)頁(yè)中的插圖處理插圖是指除系統(tǒng)產(chǎn)生的字符和色彩以外的圖形圖像，包括廣告，圖畫(huà)，照片，文字等,插圖可以起到文字說(shuō)明不了的內(nèi)容，同時(shí)插圖也是網(wǎng)頁(yè)裝飾的主要手段。插圖的類(lèi)型一是照片(位圖）類(lèi)，二是繪畫(huà)（矢量圖）類(lèi)。圖像的格式JPG GIF PNG 網(wǎng)頁(yè)中的插圖處理w虛實(shí)的變化圖像的虛實(shí)處理可以襯托網(wǎng)頁(yè)的風(fēng)格，豐富圖像和網(wǎng)頁(yè)的樣式，對(duì)網(wǎng)頁(yè)設(shè)計(jì)很有用處。插圖的外輪廓與網(wǎng)頁(yè)的背景色自然銜接過(guò)渡給人以十分柔和含蓄的感覺(jué)，比較自然地與網(wǎng)頁(yè)結(jié)合為一體，還有一種虛的圖像，整個(gè)色調(diào)被極大地淡化處理，作為背景色的圖案出現(xiàn)，襯托前景的文字。網(wǎng)頁(yè)中的插圖處理實(shí)的圖像有兩種樣式：1.一種是有規(guī)范的四邊，像未經(jīng)處理的照片類(lèi)，圖像一般都帶有裁切后自然留下的邊框，是四條清晰的線條，由于圖像的色調(diào)線條與背景色形成強(qiáng)烈的對(duì)比，給人以堅(jiān)硬實(shí)在的感覺(jué)，假如網(wǎng)頁(yè)上的圖像都是這種樣式，就顯得整齊規(guī)范，同時(shí)也顯得死板生硬，2.另一種是不規(guī)范外輪廓，即輪廓清晰，其圖像背景色與網(wǎng)頁(yè)背景色一致，將圖像背景色處理成透明色，許多卡通畫(huà)插圖都采用這種樣式。網(wǎng)頁(yè)中的字體文字是網(wǎng)頁(yè)的