第一篇：網(wǎng)站界面設(shè)計(jì)心得

網(wǎng)站界面設(shè)計(jì)方法

網(wǎng)站界面設(shè)計(jì)方法

軟件的整體風(fēng)格和整體氣氛表達(dá)要同企業(yè)形象相符合并應(yīng)該很好的體現(xiàn)企業(yè) CI 這方面比較經(jīng)典的案例有：可口可樂(lè)個(gè)性鮮明的前衛(wèi)軟件 “Life Tast Good” 工整、全面、細(xì)致的通用電氣公司軟件 “We bring good thing to life GE 帶來(lái)美好的生活）” 崇尚科技創(chuàng)新文化的 3M 公司軟件 “Creat solut for busi industri and home” 刻意扮演一個(gè)數(shù)字電子娛樂(lè)之集大成者的角色，另外。要成為新時(shí)代夢(mèng)想實(shí)現(xiàn)者的索尼軟件；平易近人、親情濃郁的通用汽車公司軟件體現(xiàn)了 “ 以人為本 ” 企業(yè)定位和營(yíng)銷策略；服務(wù)全面、細(xì)致、方便，處處體現(xiàn) “ 門庭若市 ” 服務(wù)理念的希爾頓大酒店軟件。

包括硬件界面和軟件界面，界面設(shè)計(jì)是人與機(jī)器之間傳送和交換信息的媒介。計(jì)算機(jī)科學(xué)與心理學(xué)、設(shè)計(jì)藝術(shù)學(xué)、認(rèn)知科學(xué)和人機(jī)工程學(xué)的交叉研究領(lǐng)域。近年來(lái)，隨著信息技術(shù)與計(jì)算機(jī)技術(shù)的迅速發(fā)展，網(wǎng)絡(luò)技術(shù)的突飛猛進(jìn)，人機(jī)界面設(shè)計(jì)和開發(fā)已成為國(guó)際計(jì)算機(jī)界和設(shè)計(jì)界最為活躍的研究方向。

研究包括：

硬件人機(jī)界面的設(shè)計(jì)風(fēng)格、人文關(guān)懷等；軟件人機(jī)界面的形式與標(biāo)準(zhǔn)、軟件人機(jī)界面設(shè)計(jì)、Internet 網(wǎng)頁(yè)界面設(shè)計(jì)、圖標(biāo)設(shè)計(jì)等；人機(jī)界面設(shè)計(jì)評(píng)價(jià)與可用性測(cè)試；新交互技術(shù)及展望，人機(jī)界面的定義、起源、發(fā)展、研究?jī)?nèi)容及發(fā)展趨勢(shì)；人機(jī)界面設(shè)計(jì)中認(rèn)知心理學(xué)、人機(jī)工程學(xué)、人機(jī)界面的藝術(shù)設(shè)計(jì)、色彩設(shè)計(jì)等；人機(jī)界面設(shè)計(jì)。介紹了多通道用戶界面、下一代人機(jī)界面展望及附錄。

關(guān)于軟件界面設(shè)計(jì) : 會(huì)看到很多軟件設(shè)計(jì)很樸素，軟件用戶界面（Softwar User Interfac 指軟件用于和用戶交流的外觀、部件和程序等等。如果你經(jīng)常上網(wǎng)的話。看起來(lái)給人一種很舒服的感覺(jué)；有點(diǎn)軟件很有創(chuàng)意，能給人帶來(lái)意外的驚喜和視覺(jué)的沖擊；而相當(dāng)多的軟件頁(yè)面上充斥著怪異的字體，花哨的色彩和圖片，給人網(wǎng)頁(yè)制作粗劣的感覺(jué)。軟件界面的設(shè)計(jì)，既要從外觀上進(jìn)行創(chuàng)意以到達(dá)吸引眼球的目的還要結(jié)合圖形和版面設(shè)計(jì)的相關(guān)原理，從而使得軟件設(shè)計(jì)變成了一門獨(dú)特的藝術(shù)。通常的講，企業(yè)軟件用戶界面的設(shè)計(jì)應(yīng)遵循以下幾個(gè)基本原則： ．用戶導(dǎo)向（User orient 原則

要站在用戶的觀點(diǎn)和立場(chǎng)上來(lái)考慮設(shè)計(jì)軟件。要作到這一點(diǎn)，設(shè)計(jì)網(wǎng)頁(yè)首先要明確到底誰(shuí)是使用者。必需要和用戶來(lái)溝通，解他需求、目標(biāo)、期望和偏好等。網(wǎng)頁(yè)的設(shè)計(jì)者要清楚，用戶之間差別很大，能力各有不同。比如有的用戶可能會(huì)在視覺(jué)方面有欠缺（如色盲）對(duì)很多的顏色分辨不清；有的用戶的聽覺(jué)也會(huì)有障礙，對(duì)于軟件的語(yǔ)音提示反映愚鈍；而且相當(dāng)一部分用戶的計(jì)算機(jī)使用經(jīng)驗(yàn)很初級(jí)，對(duì)于復(fù)雜一點(diǎn)的操作會(huì)感覺(jué)到很費(fèi)力。另外，用戶使用的計(jì)算機(jī)機(jī)器配置也是千差萬(wàn)別，包括顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會(huì)有不同。設(shè)計(jì)者如果忽視了這些差異，設(shè)計(jì)出的網(wǎng)頁(yè)在不同的機(jī)器上顯示就會(huì)造成混亂。． KISS Keep It Simpl And Stupid 原則 簡(jiǎn)潔和易于操作是網(wǎng)頁(yè)設(shè)計(jì)的最重要的原則。終究，KISS 原則就是 “Keep It Simpl And Stupid” 縮寫。軟件建設(shè)進(jìn)去是用于普通網(wǎng)民來(lái)查閱信息和使用網(wǎng)絡(luò)服務(wù)。沒(méi)有必要在網(wǎng)頁(yè)上設(shè)置過(guò)多的操作，堆集上很多復(fù)雜和花哨的圖片。該原則一般的要求，網(wǎng)頁(yè)的下載不要超越 10 秒鐘（普通的撥號(hào)用戶 56 Kbp 網(wǎng)速）盡量使用文本鏈接，而減少大幅圖片和動(dòng)畫的使用；操作設(shè)計(jì)盡量簡(jiǎn)單，并且有明確的操作提示；軟件所有的內(nèi)容和服務(wù)都在顯眼處向用戶予以說(shuō)明等。．布局控制

很多網(wǎng)頁(yè)設(shè)計(jì)者重視不夠，關(guān)于網(wǎng)頁(yè)排版布局方面。網(wǎng)頁(yè)排版設(shè)計(jì)的過(guò)于死板，甚至照抄他人。如果網(wǎng)頁(yè)的布局凌亂，僅僅把大量的信息堆集在頁(yè)面上，會(huì)干擾瀏覽者的閱讀。一般在網(wǎng)頁(yè)設(shè)計(jì)上所要遵循的原理有：

人一次性接受的信息量在 7 個(gè)比特左右為宜?？偨Y(jié)一個(gè)公式為：一個(gè)人一次所接受的信息量為 7 ± 2 比特。這一原理被廣泛應(yīng)用于軟件建設(shè)中，1 Miller 公式。根據(jù)心理學(xué)家 Georg A.Miller 研究標(biāo)明。一般網(wǎng)頁(yè)上面的欄目選擇最佳在 5 9 個(gè)之間，如果軟件所提供給瀏覽者選擇的內(nèi)容鏈接超過(guò)這個(gè)區(qū)間，人在心理上就會(huì)煩躁，壓抑，會(huì)讓人感覺(jué)到信息太密集，看不過(guò)來(lái)，很累。例如 Aol.com 欄目設(shè)置： Main MyA ol Mail Peopl Search Shop Channel 和 Devic 共八個(gè)分類。Msn.com 欄目設(shè)置： MSN Home My MSN Hotmail Search Shop Monei 和 Peopl & Chat 共七項(xiàng)。然而很多國(guó)內(nèi)的軟件在欄目的設(shè)置遠(yuǎn)遠(yuǎn)超出這個(gè)區(qū)間。

不能超過(guò) 9 個(gè)欄目。但如果你內(nèi)容實(shí)在多，2 分組處置。上面提到對(duì)于信息的分類。超出了 9 個(gè)，需要進(jìn)行分組處置。如果，網(wǎng)頁(yè)上提供幾十篇文章的鏈接，需要每隔 7 篇加一個(gè)空行或平行線做以分組。如果你軟件內(nèi)容欄目超出 9 個(gè)，如微軟公司的軟件，共有 11 個(gè)欄目，超越了 9 個(gè)。為了不破壞 Miller 公式，設(shè)計(jì)時(shí)使用藍(lán)黑兩種顏色分開，具體可以訪問(wèn) 004km.cn 4 ．視覺(jué)平衡

也要各種元素（如圖形、文字、空白）都會(huì)有視覺(jué)作用。根據(jù)視覺(jué)原理，網(wǎng)頁(yè)設(shè)計(jì)時(shí)。圖形與一塊文字相比較，圖形的視覺(jué)作用要大一些。所以，為了達(dá)到視覺(jué)平衡，設(shè)計(jì)網(wǎng)頁(yè)時(shí)需要以更多的文字來(lái)平衡一幅圖片。另外，依照中國(guó)人的閱讀習(xí)慣是從左到右，從上到下，因此視覺(jué)平衡也要遵循這個(gè)這個(gè)道理。例如，很多的文字是采用左對(duì)齊〈 Align=left 需要在網(wǎng)頁(yè)的右面加一些圖片或一些較明亮、較醒目的顏色。一般情況下，每張網(wǎng)頁(yè)都會(huì)設(shè)置一個(gè)頁(yè)眉部分和一個(gè)頁(yè)腳部分，頁(yè)眉部分常放置一些 Banner 廣告或?qū)Ш綏l，而頁(yè)腳局部通常放置聯(lián)系方式和版權(quán)信息等，頁(yè)眉和頁(yè)腳在設(shè)計(jì)上也要注重視覺(jué)平衡。同時(shí)，也決不能低估空白的價(jià)值。如果你網(wǎng)頁(yè)上所顯示的信息非常密集，這樣不但有利于讀者閱讀，甚至?xí)鹱x者反感，破壞該軟件的形象。網(wǎng)頁(yè)設(shè)計(jì)上，適當(dāng)增加一些空白，精煉你網(wǎng)頁(yè)，使得頁(yè)面變的簡(jiǎn)潔。5 ．色彩的搭配和文字的可閱讀性

不同的顏色對(duì)人的感覺(jué)有不同的影響，顏色是影響網(wǎng)頁(yè)的重要因素。例如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到陽(yáng)光，一種快活的顏色；黑顏色顯得比較莊重，考慮到希望對(duì)瀏覽者產(chǎn)生什么影響，為網(wǎng)頁(yè)設(shè)計(jì)選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈節(jié)顏色等）可以參考報(bào)紙的編排方式將網(wǎng)頁(yè)的內(nèi)容分欄設(shè)計(jì)，為方便閱讀軟件上的信息。甚至兩欄也要比一滿頁(yè)的視覺(jué)效果要好。另一種能夠提高文字可讀性的因素是所選擇的字體，通用的字體（Arial Courier New Garamond Time New Roman 中文宋體）最易閱讀，特殊字體用于標(biāo)題效果較好，但是不適合正文。如果在整個(gè)頁(yè)面使用一些特殊字體（如 Cloister Gothic Script Westminst 華文彩云，華文行楷）這樣讀者閱讀起來(lái)感覺(jué)一定很糟糕。該類特殊字體如果在頁(yè)面上大量使用，會(huì)使得閱讀頗為費(fèi)力，瀏覽者的眼睛很快就會(huì)疲勞，不得不轉(zhuǎn)移到其他頁(yè)面。6 ．和諧與一致性

使得設(shè)計(jì)良好的網(wǎng)頁(yè)看起來(lái)應(yīng)該是和諧的或者說(shuō)，通過(guò)對(duì)軟件的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格。軟件的眾多單獨(dú)網(wǎng)頁(yè)應(yīng)該看起來(lái)像一個(gè)整體。軟件設(shè)計(jì)上要保持一致性，這又是很重要的一點(diǎn)。一致的結(jié)構(gòu)設(shè)計(jì)，可以讓瀏覽者對(duì)軟件的形象有深刻的記憶；一致的導(dǎo)航設(shè)計(jì)，可以讓瀏覽者迅速而又有效的進(jìn)入在軟件中自己所需要的局部；一致的操作設(shè)計(jì)，可以讓瀏覽者快速學(xué)會(huì)在整個(gè)軟件的各種功能操作。破壞這一原則，會(huì)誤導(dǎo)瀏覽者，并且讓整個(gè)軟件顯的雜亂無(wú)章，給人留下不良的印象。當(dāng)然，軟件設(shè)計(jì)的一致性并不意味著刻板和一成不變，有的軟件在不同欄目使用不同的風(fēng)格，或者隨著時(shí)間的推移不斷的改版軟件，會(huì)給瀏覽者帶來(lái)新鮮的感覺(jué)。7 ．個(gè)性化 1 符合網(wǎng)絡(luò)文化

要符合 Internet 網(wǎng)絡(luò)文化的要求。首先，企業(yè)軟件不同于傳統(tǒng)的企業(yè)商務(wù)活動(dòng)。網(wǎng)絡(luò)最早是非正式性、非商業(yè)化的只是科研人員用來(lái)交流信息。其次，網(wǎng)絡(luò)信息是只在計(jì)算機(jī)屏幕上顯示而沒(méi)有打印出來(lái)閱讀，網(wǎng)絡(luò)上的交流具有隱蔽性，誰(shuí)也不知道對(duì)方的真實(shí)身份。另外，許多人在上網(wǎng)的時(shí)候是家中或網(wǎng)吧等一些比較休閑，比較隨意的環(huán)境下。此時(shí)網(wǎng)絡(luò)用戶的使用環(huán)境所蘊(yùn)涵的思維模式與坐在辦公室里西裝革履的時(shí)候大相徑庭。因此，整個(gè)互聯(lián)網(wǎng)的文化是一種休閑的非正式性的輕松活潑的文化。軟件上使用幽默的網(wǎng)絡(luò)語(yǔ)言，發(fā)明一種休閑的輕松愉快、非正式的氛圍會(huì)使軟件的訪問(wèn)量大增。2 塑造軟件個(gè)性

第二篇：網(wǎng)站界面設(shè)計(jì)應(yīng)該注意的情況

網(wǎng)站界面設(shè)計(jì)應(yīng)該注意的情況！

網(wǎng)站用戶界面（Website User Interface）指網(wǎng)站用于和用戶交互的外觀、元素和程序等等。

如果你經(jīng)常上網(wǎng)，就會(huì)看到很多網(wǎng)站設(shè)計(jì)很樸素，看起來(lái)給人非常舒服的感覺(jué)；有的網(wǎng)站很有創(chuàng)意，常常給人帶來(lái)意外的驚喜和視覺(jué)的沖擊；但相當(dāng)多的網(wǎng)站頁(yè)面上充斥著怪異的字體，花哨的色彩和圖片，給人網(wǎng)頁(yè)制作粗劣的感覺(jué)。

網(wǎng)站界面設(shè)計(jì)，既要從外觀上進(jìn)行創(chuàng)意以到達(dá)吸引眼球的目的，還要結(jié)合圖形和版面設(shè)計(jì)的相關(guān)原理，從而使得網(wǎng)站界面設(shè)計(jì)變成了一門獨(dú)特的藝術(shù)。通常，企業(yè)網(wǎng)站用戶界面的設(shè)計(jì)一般應(yīng)遵循以下幾個(gè)基本原則：

一．用戶導(dǎo)向原則（User oriented）

設(shè)計(jì)網(wǎng)頁(yè)首先要明確到底誰(shuí)是這個(gè)網(wǎng)頁(yè)的使用者，要站在用戶的觀點(diǎn)和立場(chǎng)上來(lái)考慮和設(shè)計(jì)網(wǎng)站。要做到這一點(diǎn)，就必須要和用戶來(lái)溝通，了解他們的需求、目標(biāo)、期望以及偏好等。網(wǎng)頁(yè)的設(shè)計(jì)者要清楚，用戶之間的差別是很大的，他們的能力也各有不同。比如有的用戶可能會(huì)在視覺(jué)方面有所欠缺（如色盲），對(duì)很多的顏色分辨不清；有的用戶的聽覺(jué)也可能會(huì)有些障礙，對(duì)于網(wǎng)站的語(yǔ)音提示反應(yīng)比較遲鈍；而且相當(dāng)一部分用戶的計(jì)算機(jī)使用經(jīng)驗(yàn)還很初級(jí)，對(duì)于復(fù)雜一點(diǎn)的操作就會(huì)感覺(jué)到很費(fèi)力。另外，用戶使用的計(jì)算機(jī)機(jī)器配置是千差萬(wàn)別的，如顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會(huì)有所不同。設(shè)計(jì)者如果忽視了這些差別，設(shè)計(jì)出的網(wǎng)頁(yè)在不同的機(jī)器上顯示就會(huì)造成錯(cuò)亂。

二．簡(jiǎn)潔和易于操作原則（Keep It Simple And Stupid-KISS）

KISS原則就是“Keep It Sample And Stupid”的縮寫，簡(jiǎn)潔和易于操作是網(wǎng)頁(yè)設(shè)計(jì)的最重要的原則。畢竟，網(wǎng)站建設(shè)出來(lái)是用于普通網(wǎng)民來(lái)查閱信息和使用網(wǎng)絡(luò)服務(wù)。沒(méi)必要在網(wǎng)頁(yè)上設(shè)置過(guò)多的操作，堆積很多復(fù)雜和花哨的圖片。此原則的一般要求：

1、網(wǎng)頁(yè)的下載不要超過(guò)6秒鐘（普通的家庭寬帶為2M的，速度一般在220kb/s）；

2、網(wǎng)頁(yè)盡量使用文本鏈接，而減少大幅圖片和動(dòng)畫的使用，從而加快網(wǎng)頁(yè)的打開時(shí)間；

3、操作設(shè)計(jì)盡量簡(jiǎn)單，并且有明確的操作提示；

4、網(wǎng)站所有的內(nèi)容和服務(wù)都盡量在顯眼處向用戶予以說(shuō)明等。三．布局控制（Layout）

在網(wǎng)頁(yè)排版布局方面，很多網(wǎng)頁(yè)設(shè)計(jì)者還不夠重視，網(wǎng)頁(yè)界面設(shè)計(jì)排版過(guò)于死板，甚至照抄他人。如果網(wǎng)頁(yè)的布局凌亂，僅把大量的信息堆集在頁(yè)面上，就會(huì)干擾瀏覽者的閱讀。一般在網(wǎng)頁(yè)界面的版式設(shè)計(jì)上所要遵循的原則有： 1、7±2的Miller公式。

根據(jù)心理學(xué)家George A.Miller的研究表明，人一次性接受的信息量在7個(gè)比特左右為宜?？偨Y(jié)一個(gè)公式為：一個(gè)人一次所接受的信息量為 7±2 比特。這一原理被廣泛應(yīng)用于網(wǎng)站建設(shè)中，一般網(wǎng)頁(yè)上面的欄目選擇最佳在5～9個(gè)之間，如果網(wǎng)站所提供給瀏覽者選擇的內(nèi)容鏈接超過(guò)這個(gè)區(qū)間，人在心理上就會(huì)煩躁，壓抑，會(huì)讓人感覺(jué)到信息太密集，看不過(guò)來(lái)，很累。然而很多國(guó)內(nèi)的網(wǎng)站在欄目的設(shè)置遠(yuǎn)遠(yuǎn)超出這個(gè)區(qū)間。

2、分組處理。

上面提到，對(duì)于信息或欄目的分類，不能超過(guò)9個(gè)。但如果你的內(nèi)容實(shí)在是太多，超出9個(gè)，就需要進(jìn)行分組處理。如果，你的網(wǎng)頁(yè)上有幾十篇文章的鏈接，需要每隔7篇加一個(gè)空行或平行線做以分組。如果你的網(wǎng)站內(nèi)容欄目超出9個(gè)，如騰訊公司的網(wǎng)站或其它幾個(gè)比較知名的門戶，有很多個(gè)欄目，超過(guò)了9個(gè)。為了不破壞7±2的Miller公式，在設(shè)計(jì)時(shí)把比較有代表性的分類加粗，然后再按性質(zhì)分組。

四．視覺(jué)平衡（Visual balance）

網(wǎng)頁(yè)設(shè)計(jì)時(shí)，各種元素（如圖形、文字、空白）都要有視覺(jué)平衡作用。根據(jù)視覺(jué)原理，圖形與一塊文字相比較，圖形的視覺(jué)作用要大一些。所以，為了達(dá)到視覺(jué)平衡，設(shè)計(jì)網(wǎng)頁(yè)時(shí)需要以更多的文字來(lái)平衡一張圖片。另外，按照中國(guó)人的閱讀習(xí)慣是從左到右，從上到下，因此視覺(jué)平衡也要遵循這個(gè)這個(gè)原則。例如，你的很多的文字是采用左對(duì)齊，需要在網(wǎng)頁(yè)的右面加一些圖片或一些較明亮、較醒目的顏色。通常情況下，每張網(wǎng)頁(yè)都會(huì)設(shè)置一個(gè)頁(yè)眉部分和一個(gè)頁(yè)腳部分，頁(yè)眉部分通常放置一些Banner廣告或?qū)Ш綏l及網(wǎng)站LOGO，而頁(yè)腳部分通常放置聯(lián)系方式和版權(quán)信息等，頁(yè)眉和頁(yè)腳在設(shè)計(jì)上也要注重視覺(jué)平衡。同時(shí)，也決不能低估空白的價(jià)值；網(wǎng)頁(yè)上所顯示的信息非常密集，這樣不但不利于讀者閱讀，甚至?xí)鹱x者反感，破壞該網(wǎng)站的形象。在網(wǎng)頁(yè)設(shè)計(jì)上，適當(dāng)?shù)牡胤皆黾右恍┝舭?，精煉和升華你的網(wǎng)頁(yè)的形象及美感，使得頁(yè)面變得簡(jiǎn)潔。

五．色彩的搭配及文字的可閱讀性（Colors and text can be read）

顏色是影響網(wǎng)頁(yè)的重要因素之一，不同的顏色對(duì)人的感覺(jué)有不同的影響，比如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到陽(yáng)光，是一種快活的顏色；黑色顯得比較莊重，考慮到你希望對(duì)瀏覽者產(chǎn)生什么影響，為網(wǎng)頁(yè)設(shè)計(jì)選擇最恰當(dāng)?shù)念伾òū尘吧⒃仡伾?、文字顏色、鏈?jié)顏色等）。

為了方便閱讀網(wǎng)站上的信息資訊，可以借鑒參考報(bào)紙及雜志的編排方式將網(wǎng)頁(yè)的內(nèi)容分欄設(shè)計(jì)，甚至兩欄也要比一滿頁(yè)的視覺(jué)效果要好。另外一種能夠提高文字可讀性的因素是字體的選擇，通用的字體（Arial，Courier New，Garamond，Times New Roman，中文宋體）最易閱讀，特殊字體用于標(biāo)題效果較好，但是不適合正文。如果在整個(gè)頁(yè)面使用一些特殊字體（如Cloister，Gothic，Script，Westminster，華文彩云，華文行楷），這樣讀者閱讀起來(lái)感覺(jué)一定很糟糕。這類特殊字體如果在頁(yè)面上大量使用，會(huì)使得閱讀頗為費(fèi)力，瀏覽者的眼睛很快就會(huì)疲勞，不得不轉(zhuǎn)移到其他頁(yè)面。

六．和諧與一致性（Harmony and consistency）

通過(guò)對(duì)網(wǎng)站的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格，使得設(shè)計(jì)良好的網(wǎng)頁(yè)看起來(lái)應(yīng)該是和諧的?；蛘哒f(shuō)，網(wǎng)站的眾多獨(dú)立網(wǎng)頁(yè)看起來(lái)更像一個(gè)整體。網(wǎng)站界面設(shè)計(jì)上要保持一致性，這是很重要的一點(diǎn)。一致的網(wǎng)站結(jié)構(gòu)設(shè)計(jì)，可以讓瀏覽者對(duì)網(wǎng)站的形象有深刻的記憶與印象；一致的導(dǎo)航設(shè)計(jì)，可以讓瀏覽者迅速而又有效的進(jìn)入在網(wǎng)站中自己所需要的部分；一致的操作設(shè)計(jì)，可以讓瀏覽者快速學(xué)會(huì)在整個(gè)網(wǎng)站的各種功能操作。如果破壞這一原則，就會(huì)誤導(dǎo)瀏覽者，并且讓整個(gè)網(wǎng)站顯得雜亂無(wú)章，給人留下不良的印象。

當(dāng)然，網(wǎng)站設(shè)計(jì)的一致性并不意味著刻板和一成不變，有的網(wǎng)站在不同欄目使用不同的風(fēng)格，或者隨著時(shí)間的推移不斷的改版網(wǎng)站，會(huì)給瀏覽者帶來(lái)新鮮的感覺(jué)。

七．個(gè)性化（Individualization）

1、符合網(wǎng)絡(luò)文化

企業(yè)網(wǎng)站不同于傳統(tǒng)的企業(yè)商務(wù)活動(dòng)，要符合Internet網(wǎng)絡(luò)文化的要求。首先，網(wǎng)絡(luò)最早為非正式性、非商業(yè)化的，只是科研人員用來(lái)交流信息的。其次，網(wǎng)絡(luò)信息是只在計(jì)算機(jī)屏幕上顯示而沒(méi)有打印出來(lái)閱讀，網(wǎng)絡(luò)上的交流具備隱蔽性，誰(shuí)都不知道對(duì)方的真實(shí)身份和信息。此外，許多人在上網(wǎng)的時(shí)候是在家中或網(wǎng)吧等一些比較休閑，比較隨意的環(huán)境下。此時(shí)訪客的使用環(huán)境所蘊(yùn)涵的思維模式與坐在辦公室里西裝革履的時(shí)候是截然不同的。因此，整個(gè)互聯(lián)網(wǎng)的文化是一種休閑的、非正式性的、輕松活潑的文化。在網(wǎng)站上使用幽默的網(wǎng)絡(luò)語(yǔ)言，創(chuàng)造一種休閑的、輕松愉快、非正式的氛圍就會(huì)使網(wǎng)站的訪問(wèn)量大增。

2、塑造網(wǎng)站個(gè)性

另外，網(wǎng)站的整體風(fēng)格和整體氣氛表達(dá)要同企業(yè)形象相符合并且應(yīng)該很好的體現(xiàn)企業(yè)CI。

八．網(wǎng)頁(yè)的均衡規(guī)劃與選擇（Planning and selection）

1、尺寸

·800*600能照顧到所有網(wǎng)友的電腦，但相當(dāng)是張“小報(bào)”。

·1024*768漸成主流。1024*768能比800*600多出一欄的信息。

·正文頁(yè)采用自適應(yīng)設(shè)計(jì)，能在正文頁(yè)做更多相關(guān)內(nèi)容。首頁(yè)也可以嘗試自適應(yīng)的設(shè)計(jì)。自適應(yīng)設(shè)計(jì)的核心是要留出寬度伸縮自如的欄。

·在1024*76模式下，頁(yè)面的長(zhǎng)度不易超過(guò)10屏。

·隨著電腦升級(jí)換代，分辨率提高，電腦屏幕能夠提供的面積越來(lái)越大，這是一種難得的資源，要充分利用?！靶?bào)”改“大報(bào)”要增加一倍的紙張成本，網(wǎng)站改“寬版”，成本的增加卻要小得多。

2、字體字號(hào)

·目錄頁(yè)用小字號(hào)，為的是放更多的標(biāo)題?！ふ捻?yè)用大字號(hào)。為的是讓讀者讀得舒坦。

·慎用不容易看清楚的楷體?？w的作用等于圖片，主要起美化版面的作用?！ざ嘤脤?duì)搜索引擎友好的標(biāo)粗，來(lái)表示重點(diǎn)。

3、顏色

·同一個(gè)頁(yè)面的顏色不要超過(guò)4種。眼花繚亂，容易產(chǎn)生視覺(jué)疲勞。

·顏色對(duì)比不要反差太大。網(wǎng)頁(yè)版面不是美術(shù)作品，要避免形式對(duì)內(nèi)容的喧賓奪主。

·文字+底色能夠起到很好的突出作用，在視覺(jué)變化上相當(dāng)于圖片的作用。

4、靜態(tài)化

·訪問(wèn)量大的頁(yè)都應(yīng)該靜態(tài)化，以便減少服務(wù)器壓力，增強(qiáng)網(wǎng)站穩(wěn)定性。訪問(wèn)不到的網(wǎng)頁(yè)是最差的網(wǎng)頁(yè)。

·動(dòng)態(tài)化和靜態(tài)化在一個(gè)頁(yè)面中結(jié)合使用，能同時(shí)得到輕負(fù)荷和即時(shí)交互性的好處。

·哪些頁(yè)面的哪些地方需要靜態(tài)化要在一開始就考慮，訪問(wèn)量大了之后，再高考慮，就遲了，由動(dòng)態(tài)化轉(zhuǎn)為靜態(tài)化，會(huì)有很多歷史問(wèn)題。

5、分欄

·首頁(yè)選4欄？還是3欄？

·正文頁(yè)多用2欄。

·“縱向邏輯”是指將相近的內(nèi)容從上至下排列，而不是從左向右排列。如果讀者對(duì)這方面內(nèi)容感興趣，他會(huì)從上至下，逐行閱讀。這樣可充分力利用首屏，讓首頁(yè)增多從上至下閱讀的可能。

·避免一欄太強(qiáng)，一欄太弱。通過(guò)圖片、套紅等手段進(jìn)行調(diào)控。平均使用讀者主意力。使讀者不敢放過(guò)左中右任何一欄。

6、圖片

·有圖有真相，一圖勝千言。十分必要時(shí)才用。因?yàn)閳D片的編輯成本和帶寬成本都比較文字高很多。

·在目錄頁(yè)的圖，小點(diǎn)，再小點(diǎn)，多用特寫；小分辨率，能看就行。在正文頁(yè)的圖，保證清晰，美觀。正文頁(yè)有的是版面。

·正文頁(yè)在5屏之內(nèi)，盡量不要分頁(yè)。讓讀者一次讀完。

7、導(dǎo)航條與網(wǎng)站地圖

·導(dǎo)航條是網(wǎng)站的門牌號(hào)碼，不能隨意更改。否則，讀者會(huì)迷路，找不到他原來(lái)看的內(nèi)容。

·導(dǎo)航條上的分類名的前后次序要兼顧重點(diǎn)和讀者閱讀邏輯，即歸類擺放。

·導(dǎo)航條最多三行。最好二行。太多行顯重。

·導(dǎo)航的更多，就是網(wǎng)站地圖。網(wǎng)站地圖的摘要版可以放在網(wǎng)站底部，成為底部導(dǎo)航。網(wǎng)站的底部導(dǎo)航，很有必要。其好處是：

一、可放多行；

二、可形成網(wǎng)站底部的閱讀重點(diǎn)。將讀者從首屏帶到最后一屏，期間會(huì)增加很多點(diǎn)擊。

·主導(dǎo)航和頻道導(dǎo)航：主導(dǎo)航每頁(yè)都有，頻道導(dǎo)航只在本頻道頁(yè)面出現(xiàn)。

8、首頁(yè)更新成本

·首頁(yè)設(shè)計(jì)不能只考慮美觀、協(xié)調(diào)，要考慮24小時(shí)更新一遍之要求。更新是網(wǎng)站的生命，一定要最大限度地降低首頁(yè)更新成本。

·交叉自動(dòng)同步更新的設(shè)計(jì)，可有效降低各種首頁(yè)更新成本，給讀者內(nèi)容豐富即時(shí)的感覺(jué)。

·更新即時(shí)的首頁(yè)是網(wǎng)站的資源，因?yàn)槭琴Y源，更多的標(biāo)題會(huì)擁上這個(gè)首頁(yè)。如此，正循環(huán)，這個(gè)首頁(yè)也就火了。更新不即時(shí)的首頁(yè)是網(wǎng)站的雞肋，會(huì)越來(lái)越寂寞，最終會(huì)被荒廢。

·每個(gè)首頁(yè)的設(shè)計(jì)成至少要有一個(gè)讀者點(diǎn)擊進(jìn)去的理由。即時(shí)更新比獨(dú)家內(nèi)容成本低。

第三篇：畢業(yè)論文(基于div+css的Tasty美食網(wǎng)站的界面設(shè)計(jì))

畢 業(yè) 論 文（設(shè)計(jì)）

題

目 基于DIV+CSS的

美食網(wǎng)站界面設(shè)計(jì)

指導(dǎo)老師 ***** 專業(yè)班級(jí) ******* 姓

名 *** 學(xué)

號(hào) *********

2014 年 05 月 30 日

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

摘 要：美食，貴的有山珍海味，便宜的有街邊小吃。美食是不分貴賤的，只要是自己喜歡的，就可以稱之為美食。吃前有期待、吃后有回味的東西。美食遭遇心情的時(shí)候，美食已不僅僅是簡(jiǎn)單的味覺(jué)感受，更是一種精神享受。美食還體現(xiàn)人類的文明與進(jìn)步。本網(wǎng)站以美食作為窗口，讓海內(nèi)外觀眾領(lǐng)略中華飲食之美，進(jìn)而感知中國(guó)的文化傳統(tǒng)和社會(huì)變遷。本文的主要內(nèi)容集中在：對(duì)網(wǎng)站界面制作過(guò)程的詳細(xì)描述，對(duì)div+css布局進(jìn)行討論，并對(duì)網(wǎng)站開發(fā)過(guò)程中使用的開發(fā)工具和技術(shù)做了簡(jiǎn)要的介紹。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；div+css；Dreamweaver；美食網(wǎng)站 頁(yè) 第浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

目錄

引 言..................................................................1 1市場(chǎng)調(diào)研..............................................................1

1.1 網(wǎng)站開發(fā)背景和需求...........................................1 1.2 同類型網(wǎng)站的分析.............................................2 2 文獻(xiàn)檢索..............................................................3

2.1 css樣式編寫規(guī)則..............................................3 2.2 div+css布局方式..............................................4 2.3 JavaScript編寫規(guī)則...........................................5 2.4 網(wǎng)站配色方案.................................................5 3 設(shè)計(jì)實(shí)踐..............................................................5

3.1 設(shè)計(jì)立意.....................................................5 3.2 創(chuàng)作過(guò)程.....................................................6 3.2.1美食網(wǎng)站類主題與版面的分析..............................7 3.2.2美食網(wǎng)站效果圖的設(shè)計(jì)與制作..............................8 3.2.3界面元素的制作過(guò)程......................................9 3.2.4首頁(yè)界面的制作過(guò)程.....................................10 3.2.5簡(jiǎn)介界面的制作過(guò)程.....................................14 3.2.6中式美食界面的制作過(guò)程.................................14 3.2.7相冊(cè)界面的制作過(guò)程.....................................15 3.2.8西式美食界面的制作過(guò)程.................................17 3.2.9聯(lián)系我們界面的制作過(guò)程.................................18 3.3 制作中遇到的問(wèn)題和解決方法..................................20 4 網(wǎng)站的測(cè)試..........................................................20 結(jié) 論.................................................................22 致謝...................................................................23 參考文獻(xiàn)...............................................................24

1頁(yè) 第浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

引 言

隨著信息時(shí)代的來(lái)臨，IT行業(yè)已經(jīng)成為現(xiàn)今最受關(guān)注的行業(yè)之一，它發(fā)展飛速且在全球范圍內(nèi)廣泛、普及應(yīng)用，人類的生活因此有了革命性的變化。同時(shí)，網(wǎng)絡(luò)技術(shù)的發(fā)展也取得了卓越的成就，為網(wǎng)站開發(fā)、界面設(shè)計(jì)等奠定了堅(jiān)實(shí)的基礎(chǔ)。

論文詳細(xì)論述了關(guān)于一個(gè)美食網(wǎng)站的開發(fā)的設(shè)計(jì)過(guò)程。在技術(shù)上，采用了 Dreamweaver網(wǎng)站開發(fā)工具，以 HTML的超大功能結(jié)合JavaScript的客戶端語(yǔ)言。

本文實(shí)現(xiàn)了首頁(yè)、簡(jiǎn)介、中式美食、西式美食、聯(lián)系我們等功能，全面化個(gè)人網(wǎng)站的需求。

論文組織如下：首先闡述了該網(wǎng)站的開發(fā)背景、意義，詳細(xì)介紹了div+css理論知識(shí)；其次介紹了相關(guān)的開發(fā)工具及技術(shù)基礎(chǔ)；接著對(duì)網(wǎng)站進(jìn)行了需求分析，提出了具體的設(shè)計(jì)方案；然后展現(xiàn)了整個(gè)網(wǎng)站的具體實(shí)現(xiàn)，包括網(wǎng)頁(yè)的設(shè)計(jì)和鏈接，各功能模塊的實(shí)現(xiàn)；最后對(duì)該網(wǎng)站進(jìn)行了嚴(yán)格的測(cè)試。

1市場(chǎng)調(diào)研

1.1 網(wǎng)站開發(fā)背景和需求

“忽如一夜春風(fēng)來(lái)，千樹萬(wàn)樹梨花開”，迅猛發(fā)展并日益成熟的互聯(lián)網(wǎng)已經(jīng)影響到我們生活的方方面面。人們真真切切的體會(huì)到了網(wǎng)絡(luò)帶給大家的便捷，互聯(lián)網(wǎng)也以其獨(dú)有的優(yōu)勢(shì)快速地滲透到越來(lái)越多的傳統(tǒng)領(lǐng)域。俗話說(shuō)“民以食為天”，在解決了溫飽問(wèn)題的現(xiàn)代，人們對(duì)食物的要求越來(lái)越高，已不僅僅局限于能吃飽就好，更多是希望能吃好，追求更多的美食。

近年來(lái)，已出現(xiàn)不少網(wǎng)站對(duì)美食進(jìn)行普及宣傳，提供大量美食信息，介紹各菜系和小吃的飲食文化、飲食習(xí)俗、飲食習(xí)慣等，具有一定的可讀性和趣味性。在網(wǎng)上推廣美食，詳述各種美食做法必定可以受到全國(guó)乃至全世界的美食愛好者的追捧。

設(shè)計(jì)開發(fā)此美食網(wǎng)站最基本的意義，就是能夠盡可能詳細(xì)地展示、介紹各種 第 頁(yè)

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

美食信息，同時(shí)提供美食愛好者一個(gè)交流的平臺(tái)，使得更多的美食傳統(tǒng)做法得到推廣，也可激發(fā)更多美食創(chuàng)意的產(chǎn)生。1.2 同類型網(wǎng)站的分析

美食網(wǎng)站越來(lái)越多，這說(shuō)明了人們對(duì)美食的需求也越來(lái)越多。本人在設(shè)計(jì)之前對(duì)同類型網(wǎng)站進(jìn)行了調(diào)研。首先對(duì)中華美食網(wǎng)進(jìn)行分析，中華美食網(wǎng)首頁(yè)如圖1.1所示。

圖1.1 中華美食網(wǎng)首頁(yè)

中華美食網(wǎng)首頁(yè)事個(gè)頁(yè)面采用黃色為背景，導(dǎo)航圖片簡(jiǎn)潔明了，色彩簡(jiǎn)單，網(wǎng)站多以文字加以圖片展示，多采用a鏈接，內(nèi)容包涵廣，加了滾動(dòng)圖片，動(dòng)感十足。頭部的logo簡(jiǎn)潔大方，在中規(guī)中矩的美食網(wǎng)站中，中華美食網(wǎng)的首頁(yè)布局緊湊且信息量大，圖文并茂又不顯雜亂。

接著又分析了美食天下網(wǎng)站，該網(wǎng)站首頁(yè)截圖如圖1.2所示。

第 頁(yè)

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

圖1.2美食天下網(wǎng)站首頁(yè)

不同于中華美食網(wǎng)的內(nèi)容繁多，美食天下網(wǎng)站事個(gè)首頁(yè)內(nèi)容較少，事個(gè)版面更顯清晰整潔，背景采用裸粉色，看過(guò)去更為清爽。導(dǎo)航利用div+css在大導(dǎo)航下加了子導(dǎo)航，鼠標(biāo)移上去時(shí)會(huì)顯示不同的文字信息。不過(guò)與中華美食網(wǎng)設(shè)計(jì)相同的是，該網(wǎng)站也是以黃色為導(dǎo)航背景，內(nèi)容種類多，版面緊湊。文獻(xiàn)檢索

本次設(shè)計(jì)是遵循web標(biāo)準(zhǔn)規(guī)范，在dreamweaver中利用div+css，并在文本文檔中編寫JavaScript代碼的形式完成事個(gè)網(wǎng)站界面的設(shè)計(jì)。此外網(wǎng)站的色彩搭配方面也需要格外注意，因此分別對(duì)css樣式編寫的規(guī)則、div+css布局方式、JavaScript的編寫規(guī)則和網(wǎng)頁(yè)色彩搭配方案做了相關(guān)檢索。2.1 css樣式編寫規(guī)則

css類型中，內(nèi)聯(lián)式是指直接在html標(biāo)簽后寫樣式代碼。而嵌入式就是對(duì)本文件內(nèi)所有的該類型的標(biāo)簽名運(yùn)用這樣的樣式，但該樣式的標(biāo)簽要放在head中。

嵌入式樣式表解決了同一個(gè)文件內(nèi)使用同樣樣式的多個(gè)標(biāo)簽的代碼重用，當(dāng)接觸到有很多個(gè)文件組成的網(wǎng)站，如果這些獨(dú)立的網(wǎng)頁(yè)文件要使用統(tǒng)一的風(fēng)格，就需要使用外部樣式表。建立后綴名.css的文本文件。在使用時(shí)，在引用該樣式

第3 頁(yè)

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

表的網(wǎng)頁(yè)文件內(nèi)的head標(biāo)簽中使用link標(biāo)簽來(lái)引入。

css規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個(gè)屬性和一個(gè)值組成。屬性（property）是希望設(shè)置的樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開。

有三種方法可以在站點(diǎn)網(wǎng)頁(yè)上使用樣式表： ① 外部樣式：將網(wǎng)頁(yè)鏈接到外部樣式表。② 內(nèi)頁(yè)樣式：在網(wǎng)頁(yè)上創(chuàng)建嵌入的樣式表。③ 行內(nèi)樣式：應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁(yè)元素。2.2 div+css布局方式

對(duì)于網(wǎng)站div+css設(shè)計(jì)越來(lái)越受到業(yè)界的關(guān)注，從個(gè)人網(wǎng)站到企業(yè)及門戶網(wǎng)站，頁(yè)面設(shè)計(jì)人員已經(jīng)將div+css作為了業(yè)界標(biāo)準(zhǔn)。

如果用div+css來(lái)構(gòu)建和美化網(wǎng)站，那么div就是整個(gè)網(wǎng)站的骨架，css樣式就是網(wǎng)站的衣服。其中的內(nèi)容，就是血肉。要入手設(shè)計(jì)一個(gè)網(wǎng)站。那么，就要從div的布局開始。

本網(wǎng)站的骨架架構(gòu)如下圖2.1所示：

圖2.1 設(shè)計(jì)中網(wǎng)站的骨架圖

第 頁(yè)

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

2.3 JavaScript編寫規(guī)則

JavaScript程序應(yīng)獨(dú)立保存在后綴名為.js的文件中。

JavaScript代碼不應(yīng)該被包含在HTML文件中，除非這是段特定只屬于此部分的代碼。在HTML中的JavaScript代碼會(huì)明顯增加文件大小，而且也不能對(duì)其進(jìn)行緩存和壓縮。應(yīng)盡量放到body的后面。這樣可以減少因?yàn)檩d入script而造成其他頁(yè)面內(nèi)容載入也被延遲的問(wèn)題?？s進(jìn)的單位為四個(gè)空格。避免每行超過(guò)80個(gè)字符。在運(yùn)算符號(hào)，最好是逗號(hào)后換行。下一行應(yīng)該縮進(jìn)8個(gè)空格。及時(shí)地更新注釋也很重要。錯(cuò)誤的注釋會(huì)讓程序更加難以閱讀和理解。單行注釋的符號(hào)是“//”，多行注釋以“/*”開始，以“*/”結(jié)束。所有的變量必須在使用前進(jìn)行聲明。將var語(yǔ)句放在函數(shù)的首部。2.4 網(wǎng)站配色方案

同色系方案是選擇彼此相鄰的幾種顏色構(gòu)成的配色方案。例如橙色、橙紅色以及橙黃色就可以組成一個(gè)同色系方案。使用同色系配色方案可以給人非常協(xié)調(diào)的感覺(jué)，因此在網(wǎng)站設(shè)計(jì)中非常常用。典型的運(yùn)用方法就是，用一種顏色作為頁(yè)面背景，而另外一種在顏色環(huán)中與其相鄰的顏色作為前景色。

互補(bǔ)色方案則是互補(bǔ)色方案的配置。雖然略顯繁瑣，但是在現(xiàn)在的網(wǎng)站設(shè)計(jì)中非常流行，因?yàn)榛パa(bǔ)色適合于制作活潑時(shí)尚的效果，可以讓網(wǎng)站魅力四射。

另外，在photoshop中，要想構(gòu)造一個(gè)三色方案也是非常容易。首先選中一種顏色，記下他的H（Hue）值，然后為這個(gè)值加120以此類推得到第三種顏色，構(gòu)成一個(gè)三色方案。三色方案中使用了三種彼此之間差別明顯的顏色，因此頁(yè)面顯得相當(dāng)不穩(wěn)定，是一種可以帶來(lái)比較另類的感覺(jué)的配色方案，將給予瀏覽者某種緊張感，這是因?yàn)檫@三種顏色均對(duì)比強(qiáng)烈。設(shè)計(jì)實(shí)踐

3.1 設(shè)計(jì)立意

在中國(guó)傳統(tǒng)文化教育中的陰陽(yáng)五行哲學(xué)思想、儒家倫理道德觀念、中醫(yī)營(yíng)養(yǎng) 第 頁(yè)

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

養(yǎng)生學(xué)說(shuō)，還有文化藝術(shù)成就、飲食審美風(fēng)尚、民族性格特征諸多因素的影響下，創(chuàng)造出彪炳史冊(cè)的中國(guó)烹飪技藝，形成博大精深的中國(guó)飲食文化。越來(lái)越多的人喜歡使用互聯(lián)網(wǎng)查詢信息、交流互動(dòng)。美食需要傳承，也需要交流，美食網(wǎng)站是一個(gè)交流美食的平臺(tái)。

由于本人偏愛美食，時(shí)常關(guān)注美食信息，也因?yàn)樗幍能浖I(yè)，平時(shí)對(duì)網(wǎng)站設(shè)計(jì)和HTML編寫等方面有一定的熟悉度，借著此次制作畢業(yè)作品的機(jī)會(huì)，為美食設(shè)計(jì)一個(gè)版式新穎的網(wǎng)站，作為此論文的依據(jù)。

本次網(wǎng)站的制作主題確定為簡(jiǎn)潔型。整個(gè)網(wǎng)站以圖片為主，減少文字。網(wǎng)頁(yè)主要以黑色為背景，灰色為輔，以達(dá)到清新整潔的頁(yè)面效果。

各頁(yè)面之間布局力求工整合理，內(nèi)容表達(dá)清晰。

本美食網(wǎng)站的建設(shè)，主要針對(duì)美食愛好者及各界需要搜集美食信息的網(wǎng)絡(luò)用戶的需求進(jìn)行設(shè)計(jì)開發(fā)的，因此，將打造一個(gè)界面美觀友好，布局合理，欄目功能強(qiáng)大，信息詳盡的網(wǎng)站。主要實(shí)現(xiàn)如下目標(biāo)：

① 向外界宣傳美食文化和菜肴傳統(tǒng)做法； ② 信息盡可能齊全，滿足不同用戶需求。

3.2 創(chuàng)作過(guò)程

利用Photoshop制作出網(wǎng)頁(yè)效果圖，再參考另外的一些美食網(wǎng)站，如中華美食網(wǎng)、美食天下等網(wǎng)站定下框架布局，考慮美食網(wǎng)站的logo設(shè)計(jì)。

網(wǎng)上搜集素材并下載，圖片素材分類取名統(tǒng)一保存在images文件夾下，下載搜集圖片如圖3.1所示。

第 頁(yè)

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

圖3.1 圖片搜集截圖

有關(guān)介紹美食網(wǎng)站的文字素材復(fù)制并保存在meishi.txt中，文字資料如圖3.2所示。

圖3.2 文字資料截圖

創(chuàng)建頁(yè)面，做好首頁(yè)及子頁(yè)的命名，為樣式、腳本分類創(chuàng)建文件夾。結(jié)合photoshop軟件制作效果圖，利用photoshop軟件實(shí)現(xiàn)某些元素的裁剪及取材。

3.2.1美食網(wǎng)站類主題與版面的分析

在美食網(wǎng)站整體版面布局中，需要更多運(yùn)用css樣式、HTML代碼和div+css布局使網(wǎng)站清爽簡(jiǎn)潔。需要達(dá)到的要求：

（1）色彩輕快，版面清爽，搭配合理

由于是美食類網(wǎng)站，所以版面不宜生硬死板，不宜過(guò)于花哨繚亂，但也要注

第7 頁(yè)

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

意整體格局。采用明亮清晰色彩、板塊布局工整。主題風(fēng)格偏向清爽整潔，網(wǎng)頁(yè)主要以黑色為背景，灰色為輔。文字顏色以白色為主。采用12像素的正文宋體。

（2）版面合理，頁(yè)面鏈接無(wú)誤。

為避免布局過(guò)于混亂，各個(gè)div之間的位置間距要控制得當(dāng)，代碼的正確應(yīng)用，HTML與css的簡(jiǎn)潔書寫，使之有更豐富的動(dòng)畫效果，此外也要保證頁(yè)面間的鏈接完整。

3.2.2美食網(wǎng)站效果圖的設(shè)計(jì)與制作

美食網(wǎng)站效果圖由網(wǎng)上模板下載所得，在photoshop軟件中打開，首頁(yè)模板效果如圖3.3所示。

圖3.3首頁(yè)效果圖

banner部分不做修整，導(dǎo)航部分主要是后面在dreamweaver中修改文字，只把內(nèi)容信息的右邊部分全部改為圖片模式，如圖3.4所示。

第 頁(yè)

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

圖3.4首頁(yè)效果圖

子頁(yè)整體布局繼承首頁(yè)布局，只在內(nèi)容信息部分異于首頁(yè)。子頁(yè)模版效果圖如圖3.5所示。

圖3.5子頁(yè)效果圖

子頁(yè)布局不做修改。3.2.3界面元素的制作過(guò)程

界面元素的制作包括網(wǎng)站中用到的所有圖片，如導(dǎo)航圖、logo圖等。把所有圖片依次使用photoshop進(jìn)行修整、取材。背景需要透明的圖片保存為*.png格

第9 頁(yè)

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

式，其他圖片勻保存為*.jpg。

由于本網(wǎng)站導(dǎo)航欄除了幾個(gè)數(shù)字圖片外沒(méi)再放其他圖片，所以只需在dreamweaver中布局后加入文字即可。3.2.4首頁(yè)界面的制作過(guò)程

首先建立站點(diǎn)，站點(diǎn)下新建images、css、js、data四個(gè)文件夾，文字搜集的素材歸于meishi.txt中，圖片素材的搜集與自己設(shè)計(jì)處理過(guò)的圖片都統(tǒng)一放在images文件夾內(nèi)。另外控制樣式的style和slimbox兩個(gè)文件放入css文件夾內(nèi)，init、jquery.localscroll-min、jquery.min、jquery.scrollTo-min和slimbox2五個(gè)js文件放入js文件夾內(nèi)，數(shù)據(jù)庫(kù)文件放入data文件夾中。

創(chuàng)建首頁(yè)，初建header、main_wrapper、footer上中下三大版塊，其中在header中再插入site_title，輸入網(wǎng)站標(biāo)題，如圖3.6所示。

圖3.6 site_title效果圖

中間區(qū)塊分為左右兩個(gè)版塊，依次命名為home_box left、home_box right。左邊為導(dǎo)航區(qū)塊，右邊為網(wǎng)站展示圖區(qū)塊。導(dǎo)航區(qū)塊利用div+css平均布局為四塊，每塊中都使用a鏈接加入相應(yīng)圖片，輸入導(dǎo)航文字，導(dǎo)航文字大小設(shè)置為h2，顏色為白色并給導(dǎo)航文字設(shè)置鏈接，去下劃線，點(diǎn)擊導(dǎo)航文字進(jìn)入相應(yīng)界面；右邊部分利用div+css平均分為六個(gè)區(qū)塊，每個(gè)區(qū)塊都使用a鏈接加入展示圖，點(diǎn)擊任何一張展示圖都可進(jìn)行放大顯示。首頁(yè)界面中內(nèi)容信息部分的效果如圖3.7所示。

頁(yè) 第

浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院畢業(yè)論文(設(shè)計(jì))

圖3.7首頁(yè)內(nèi)容效果圖

導(dǎo)航區(qū)塊中的效果為鼠標(biāo)移到導(dǎo)航上時(shí)，當(dāng)前鼠標(biāo)所在的導(dǎo)航項(xiàng)目欄的背景色加深，移開后又恢復(fù)。導(dǎo)航區(qū)塊的代碼如下：