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

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

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

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

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

4、設計網(wǎng)站的標準字體。1.網(wǎng)站的目錄結構二、網(wǎng)站的目錄結構和鏈接結構●不要將所有文件都存放在根目錄下?！癜礄谀績热萁⒆幽夸?。●在每個主目錄下都建立獨立的images目錄?！衲夸浀膶哟尾灰睢?　　目錄的層次建議不要超過3層。原因很簡單，維護管理方便。我們研究網(wǎng)站的鏈接結構的目的在于：用最少的鏈接，使得瀏覽最有效率。一般的，建立網(wǎng)站的鏈接結構有兩種基本方式：2.網(wǎng)站的鏈接結構1)樹狀鏈接結構（一對一）。類似DOS的目錄結構，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。立體結構看起來就象蒲公英。這樣的鏈接結構瀏覽時，一級級進入，一級級退出。優(yōu)點是條理清晰，訪問者明

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

6、頁面之間用樹狀鏈接結構舉個例子。一個新聞站點的頁面結構如下：一級頁面二級頁面?財經新聞頁--[財經新聞1，財經新聞2...]/

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

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

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