網(wǎng)頁(yè)設(shè)計(jì)的準(zhǔn)則

《網(wǎng)頁(yè)設(shè)計(jì)的準(zhǔn)則》由會(huì)員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁(yè)設(shè)計(jì)的準(zhǔn)則（40頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、 5.1 網(wǎng)頁(yè)的基本元素5.2 網(wǎng)頁(yè)布局5.3 配色原則 確定網(wǎng)站的題材，并且收集和組織了許多相關(guān)的資料內(nèi)容后，按照以下方面組織內(nèi)容來(lái)吸引瀏覽者瀏覽網(wǎng)站。 1站點(diǎn)結(jié)構(gòu)圖 2導(dǎo)航欄 3精美的圖片 4引人入勝的內(nèi)容 5反饋表 6聯(lián)系方式頁(yè)面 7搜索工具 8常見問題解答 5.1.1 網(wǎng)頁(yè)的基本元素 網(wǎng)頁(yè)是網(wǎng)站提供信息服務(wù)的主要形式，一般包含文字、圖像和表格等內(nèi)容，以及實(shí)現(xiàn)信息塊之間跳轉(zhuǎn)的超鏈接。網(wǎng)頁(yè)通常以網(wǎng)頁(yè)文件及其附屬文件形式存在。常見的網(wǎng)頁(yè)元素包括文本、圖片、超鏈接、表格、導(dǎo)航欄、動(dòng)畫和交互表單。 1文本 2圖片和動(dòng)畫 3聲音和視頻 4超鏈接 5導(dǎo)航欄 6表格 7表單 8其他常見元素 5. 2

2、網(wǎng)頁(yè)布局 網(wǎng)頁(yè)是網(wǎng)站構(gòu)成的基本元素。當(dāng)瀏覽者移動(dòng)鼠標(biāo)，在網(wǎng)海中遨游，一個(gè)個(gè)精彩的網(wǎng)頁(yè)會(huì)呈現(xiàn)在用戶面前。網(wǎng)頁(yè)是否精彩，能否吸引瀏覽者，除了色彩的搭配、文字的變化、圖片的處理等因素外，還有一個(gè)非常重要的因素網(wǎng)頁(yè)的布局。 1網(wǎng)頁(yè)布局的基本概念 對(duì)于初學(xué)者，最好應(yīng)先了解網(wǎng)頁(yè)布局的基本概念。 （1）頁(yè)面尺寸 一般在分辨率為1024*768像素的情況下，頁(yè)面的顯示尺寸為1007*600像素；在分辨率為800*600像素的情況下，頁(yè)面的顯示尺寸為780*428像素；而在分辨率為640*480像素的情況下，頁(yè)面的顯示尺寸為620*311像素。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)增加更多內(nèi)容（尺寸）的方法

3、。但應(yīng)當(dāng)注意的是，除非設(shè)計(jì)者肯定站點(diǎn)的內(nèi)容很有吸引力，否則不要讓瀏覽者拖動(dòng)頁(yè)面超過(guò)三個(gè)屏幕。 5.2 網(wǎng)頁(yè)布局 （2）整體造型 造型就是創(chuàng)造出來(lái)的物體形象。這里是指頁(yè)面的整體形象，這種形象應(yīng)該是一個(gè)整體，圖形與文本的結(jié)合應(yīng)該是層疊有序的。雖然顯示器和瀏覽器都是矩形的，但對(duì)于頁(yè)面的造型，設(shè)計(jì)者可以充分運(yùn)用自然界中的各種形狀及它們的組合，如矩形、圓形、三角形、菱形等。 雖然不同形狀代表不同意義，但目前的網(wǎng)頁(yè)制作大多結(jié)合多種圖形加以設(shè)計(jì)，只是其中某一種圖形的構(gòu)圖比例可能占得多一些。 5.2 網(wǎng)頁(yè)布局 2網(wǎng)頁(yè)布局的一般步驟 （1）構(gòu)思 根據(jù)網(wǎng)站內(nèi)容的整體風(fēng)格，設(shè)計(jì)版面布局。不要講究細(xì)節(jié)，只要有一個(gè)輪廓

4、就行。當(dāng)然也可能有多種想法，盡量都把它們畫出來(lái)，然后再比較，采用一種比較滿意的方案。 （2）初步填充內(nèi)容 這一步就要把一些主要的內(nèi)容放到網(wǎng)頁(yè)中，例如，網(wǎng)站的標(biāo)志、廣告條、菜單、導(dǎo)航條、計(jì)數(shù)器等。要注意重點(diǎn)突出，把網(wǎng)站的標(biāo)志、廣告條、菜單放在最突出、最醒目的位置，然后再考慮其他元素的放置。 （3）細(xì)化 在這一步，設(shè)計(jì)者可以利用網(wǎng)頁(yè)編輯工具把草案做成一個(gè)簡(jiǎn)略的網(wǎng)頁(yè)，當(dāng)然，對(duì)每一種元素所占的比例也要有一個(gè)詳細(xì)的數(shù)字，以便以后修改。 5.2 網(wǎng)頁(yè)布局 3網(wǎng)頁(yè)排版布局的原則 上面簡(jiǎn)要介紹了設(shè)計(jì)網(wǎng)頁(yè)布局的步驟，而事實(shí)上，在構(gòu)思和設(shè)計(jì)的過(guò)程中，設(shè)計(jì)者還必須要掌握以下5項(xiàng)原則。 （1）平衡性 （2）對(duì)稱性 （

5、3）對(duì)比性 （4）疏密度 （5）比例 5.2 網(wǎng)頁(yè)布局 4網(wǎng)頁(yè)布局類型 網(wǎng)頁(yè)布局大致可分為“國(guó)”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等。 （1）“國(guó)”字型布局 “國(guó)”字型也可以稱為“同”字型，是一些大型網(wǎng)站經(jīng)常使用的類型。這種布局最上面是網(wǎng)站的標(biāo)題及橫幅廣告條，接下來(lái)就是網(wǎng)站的主要內(nèi)容，左右分列一些小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種布局是網(wǎng)上最常見的一種布局類型。 5.2 網(wǎng)頁(yè)布局 （2）拐角型布局 拐角型布局與上一種布局只是形式上的區(qū)別，其實(shí)是很相似的。該布局上面是標(biāo)題及廣

6、告橫幅，接下來(lái)的左側(cè)是一窄列鏈接等內(nèi)容，右面是很寬的正文，最下面也有一些網(wǎng)站的輔助信息。在這種布局中，左側(cè)一般是導(dǎo)航鏈接。 （3）標(biāo)題正文型布局 標(biāo)題正文型布局的最上面是標(biāo)題或類似的一些東西，下面一般是正文，例如，一些文章頁(yè)面或注冊(cè)頁(yè)面等就屬于這種類型。 l（4）左右框架型布局l 采用左右框架型布局的網(wǎng)頁(yè)分為左、右兩部分，一般左面是導(dǎo)航鏈接，有時(shí)最上面會(huì)有一個(gè)小的標(biāo)題或標(biāo)志，右面是正文。大部分大型論壇和網(wǎng)頁(yè)教程都使用這種布局，有一些個(gè)人網(wǎng)站和企業(yè)網(wǎng)站也喜歡采用這種布局。 （5）上下框架型布局 上下框架型布局與左右框架型布局類似，區(qū)別僅僅在于這種布局分為上、下兩部分。 5.2 網(wǎng)頁(yè)布局 5網(wǎng)頁(yè)布

7、局的常用技術(shù) （1）CSS（層疊樣式表）布局 CSS對(duì)于初學(xué)者來(lái)說(shuō)顯得有點(diǎn)復(fù)雜，但它的確是一種好的布局方法。目前，CSS運(yùn)用的好壞是判斷一個(gè)網(wǎng)站優(yōu)秀與否的關(guān)鍵。 （2）表格布局 表格布局的優(yōu)勢(shì)在于它能對(duì)不同對(duì)象加以處理，而又不用擔(dān)心不同對(duì)象之間的影響，而且表格在定位圖片和文本上比用CSS更加方便。表格布局惟一的缺點(diǎn)是，當(dāng)設(shè)計(jì)者使用了過(guò)多的表格時(shí)，會(huì)影響頁(yè)面的下載速度。 （3）框架布局 由于框架技術(shù)的兼容性問題，框架結(jié)構(gòu)的頁(yè)面不太受歡迎。但從布局上考慮，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。 5.3 配色原則 網(wǎng)站給人的第一印象來(lái)自于視覺，因此，確定網(wǎng)站的色彩相當(dāng)重要。不同的色彩搭配產(chǎn)生不同的效果，從

8、而使網(wǎng)站給人以不同的視覺效果，吸引訪問者的注意力。對(duì)于網(wǎng)站的色彩處理原則應(yīng)該是“總體協(xié)調(diào)，局部對(duì)比”；也就是說(shuō)，主頁(yè)的整體色彩效果應(yīng)該是和諧的，而局部應(yīng)該有一些強(qiáng)烈色彩的對(duì)比。 1色彩的形成 簡(jiǎn)單地說(shuō)，色彩是一種視覺，是光作用于眼睛的結(jié)果。紅、綠、藍(lán)色的光被稱為三原色光。 2色彩的特征 色彩的基本特征主要有色調(diào)、亮度和飽和度三個(gè)。色調(diào)表現(xiàn)色彩的種類，亮度表現(xiàn)色彩的明亮程度，飽和度表現(xiàn)色彩的鮮艷程度。 5.3 配色原則 3色彩的心理感覺 在長(zhǎng)期的生活實(shí)踐中，自然界的各種色彩會(huì)在人的心中留下不同的印象，產(chǎn)生不同的心理感覺，例如： 紅色是一種激奮的色彩，具有刺激效果，能使人產(chǎn)生沖動(dòng)、憤怒、熱情、活力

9、的感覺； 綠色介于冷暖兩類色彩的中間，給人以和睦、寧?kù)o、健康、安全的感覺，它和金黃、淡白色搭配，可以產(chǎn)生優(yōu)雅、舒適的氣氛； 橙色也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨、時(shí)尚的效果； 黃色表現(xiàn)快樂、希望、智慧和輕快的個(gè)性，它的透明度最高； 藍(lán)色是最具涼爽、清新、專業(yè)感的色彩，它和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛； 白色具有潔白、明快、純真、清潔的感覺； 黑色具有深沉、神秘、寂靜、悲哀、壓抑的感覺； 灰色具有中庸、平凡、溫和、謙讓、中立和高雅的感覺。 5.3 配色原則 4色彩的分類 按照色彩對(duì)人們心理的影響可以進(jìn)行以下分類。 暖色系：紅、橙、橙黃、黃等色彩讓人覺得溫馨、和煦、熱情。

10、中性系：黃綠、綠等色彩讓人覺得舒適、和諧。 冷色系：青綠、藍(lán)綠、藍(lán)等色彩讓人覺得寧?kù)o、清涼、高雅。 色彩具有聯(lián)想與象征的特質(zhì)，例如，紅色象征火、血、太陽(yáng)，藍(lán)色象征大海、天空和水面等。因此設(shè)計(jì)出售冷食的虛擬店面，應(yīng)使用消極而沉靜的顏色，使人從心理上感覺涼爽一些。如果要制作一個(gè)休閑主題的個(gè)人站點(diǎn)，不妨將網(wǎng)站色彩設(shè)計(jì)為天藍(lán)色，如以海水為背景，再搭配一些魚兒的效果會(huì)更好。 5.3 配色原則 5色彩的選擇和搭配 在制作網(wǎng)站的時(shí)候，色彩的選擇和搭配非常重要。一個(gè)網(wǎng)站格調(diào)的確定，往往取決于色彩的選擇與搭配是否適當(dāng)。在一般情況下，可以從以下4個(gè)方面考慮色彩的選擇與搭配。 （1）色彩的鮮明性 （2）色彩的獨(dú)特性 （3）色彩的適合性 （4）色彩的聯(lián)想性