《網(wǎng)頁設(shè)計(jì)與制作》PPT課件.ppt

《《網(wǎng)頁設(shè)計(jì)與制作》PPT課件.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第六章網(wǎng)站的總體設(shè)計(jì)一、網(wǎng)站的形象設(shè)計(jì)與CI策劃二、網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)三、版面布局與首頁設(shè)計(jì)四、網(wǎng)頁的色彩搭配五、建站簡述所謂CI，是借用的廣告術(shù)語。(CI是英文corporateidentity的縮寫)，意思是通過視覺來統(tǒng)一企業(yè)的形象?，F(xiàn)實(shí)生活中的CI策劃比比皆是，杰出的例子如：可口可樂公司，全球統(tǒng)一的標(biāo)志，色彩和產(chǎn)品包裝，給我們的印象極為深刻。更多的例子如SONY,三菱，麥當(dāng)勞等等。一、網(wǎng)站的形象設(shè)計(jì)與CI策劃首先你需要設(shè)計(jì)制作一個(gè)網(wǎng)站的標(biāo)志(logo)。就如同商標(biāo)一樣，logo是你站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)，看見logo就讓大家聯(lián)想起你的站點(diǎn)。1.LOGO是

2、與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標(biāo)志和門戶。2.LOGO是網(wǎng)站形象的重要體現(xiàn)。3、LOGO的國際標(biāo)準(zhǔn)規(guī)范1、設(shè)計(jì)網(wǎng)站的標(biāo)志(logo)網(wǎng)站給人的第一印象來自視覺沖擊，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒?！皹?biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色彩。例如：IBM的深藍(lán)色，肯得基的紅色條型，windows視窗標(biāo)志上的紅藍(lán)黃綠色塊，都使我們覺得很貼切，很和諧。2、設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩。一般來說，一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種，太多則讓人眼花繚亂。標(biāo)準(zhǔn)色彩要用于網(wǎng)站的標(biāo)志，標(biāo)題，主菜單和主色塊。給人以整體統(tǒng)一的感覺。至于

3、其它色彩也可以使用，只是作為點(diǎn)綴和襯托，絕不能喧賓奪主。一般來說，適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有：藍(lán)色，黃/橙色，黑/灰/白色三大系列色。和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志，標(biāo)題，主菜單的特有字體。一般我們網(wǎng)頁默認(rèn)的字體是宋體。為了體現(xiàn)站點(diǎn)的“與眾不同”和特有風(fēng)格，我們可以根據(jù)需要選擇一些特別字體。例如，為了體現(xiàn)專業(yè)可以使用粗仿宋體，體現(xiàn)設(shè)計(jì)精美可以用廣告體，體現(xiàn)親切隨意可以用手寫體等等。目前常見的中文字體有二三十種，常見的英文字體有近百種，網(wǎng)絡(luò)上還有許多專用英文藝術(shù)字體下載。需要說明的是：使用非默認(rèn)字體只能用圖片的形式，因?yàn)楹芸赡転g覽者的PC里沒有安裝你的特別字體。3.

4、設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體。1.網(wǎng)站的目錄結(jié)構(gòu)二、網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)●不要將所有文件都存放在根目錄下?！癜礄谀績?nèi)容建立子目錄。●在每個(gè)主目錄下都建立獨(dú)立的images目錄。●目錄的層次不要太深。　　目錄的層次建議不要超過3層。原因很簡單，維護(hù)管理方便。我們研究網(wǎng)站的鏈接結(jié)構(gòu)的目的在于：用最少的鏈接，使得瀏覽最有效率。一般的，建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式：2.網(wǎng)站的鏈接結(jié)構(gòu)1)樹狀鏈接結(jié)構(gòu)（一對一）。類似DOS的目錄結(jié)構(gòu)，首頁鏈接指向一級(jí)頁面，一級(jí)頁面鏈接指向二級(jí)頁面。立體結(jié)構(gòu)看起來就象蒲公英。這樣的鏈接結(jié)構(gòu)瀏覽時(shí)，一級(jí)級(jí)進(jìn)入，一級(jí)級(jí)退出。優(yōu)點(diǎn)是條理清晰，訪問者明

5、確知道自己在什么位置，不會(huì)"迷"路。缺點(diǎn)是瀏覽效率低，一個(gè)欄目下的子頁面到另一個(gè)欄目下的子頁面，必須繞經(jīng)首頁。2.星狀鏈接結(jié)構(gòu)（一對多）。類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個(gè)頁面相互之間都建立有鏈接。立體結(jié)構(gòu)象東方明珠電視塔上的鋼球。這種鏈接結(jié)構(gòu)的優(yōu)點(diǎn)是瀏覽方便，隨時(shí)可以到達(dá)自己喜歡的頁面。缺點(diǎn)是鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。這兩種基本結(jié)構(gòu)都只是理想方式，在實(shí)際的網(wǎng)站設(shè)計(jì)中，總是將這兩種結(jié)構(gòu)混合起來使用。我們希望瀏覽者既可以方便快速的達(dá)到自己需要的頁面，又可以清晰的知道自己的位置。所以，最好的辦法是：首頁和一級(jí)頁面之間用星狀鏈接結(jié)構(gòu)，一級(jí)和二級(jí)

6、頁面之間用樹狀鏈接結(jié)構(gòu)舉個(gè)例子。一個(gè)新聞?wù)军c(diǎn)的頁面結(jié)構(gòu)如下：一級(jí)頁面二級(jí)頁面?財(cái)經(jīng)新聞頁--[財(cái)經(jīng)新聞1，財(cái)經(jīng)新聞2...]/

7、首頁--娛樂新聞頁--[娛樂新聞1，娛樂新聞2...]

8、IT新聞頁--[IT新聞1，IT新聞2...]有站點(diǎn)為了免去返回一級(jí)頁面的麻煩，將二級(jí)頁面直接用新開窗口(POPupwindows)打開，瀏覽結(jié)束后關(guān)閉即可。以上我們都是用的三級(jí)頁面舉例。如果您的站點(diǎn)內(nèi)容龐大，分類明細(xì)，需要超過三級(jí)頁面，那么建議你在頁面里顯示導(dǎo)航條，可以幫助瀏覽者明確自己所處的位置。就是您經(jīng)?？吹皆S多網(wǎng)站頁面頂部的，類似這樣：“您現(xiàn)在的位置是：首頁->財(cái)經(jīng)新聞->

9、股市信息->深圳股->深發(fā)展”三、版面布局與首頁設(shè)計(jì)草案建議您用一張白紙和一支鉛筆，當(dāng)然用作圖軟件photoshop等也可以。這屬于創(chuàng)造階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡你的可能多畫幾張，最后選定一個(gè)滿意的作為繼續(xù)創(chuàng)作的腳本。常用到的版面布局形式：T”結(jié)構(gòu)布局。所謂“T”結(jié)構(gòu)。就是指頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因?yàn)椴藛螚l背景教深，整體效果類似英文字母“T”,所以我們稱之為“T”形布局。這是網(wǎng)頁設(shè)計(jì)中用的最廣返的一種布局方式。這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次