第一篇：網站界面設計心得

網站界面設計方法

網站界面設計方法

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

包括硬件界面和軟件界面，界面設計是人與機器之間傳送和交換信息的媒介。計算機科學與心理學、設計藝術學、認知科學和人機工程學的交叉研究領域。近年來，隨著信息技術與計算機技術的迅速發展，網絡技術的突飛猛進，人機界面設計和開發已成為國際計算機界和設計界最為活躍的研究方向。

研究包括：

硬件人機界面的設計風格、人文關懷等；軟件人機界面的形式與標準、軟件人機界面設計、Internet 網頁界面設計、圖標設計等；人機界面設計評價與可用性測試；新交互技術及展望，人機界面的定義、起源、發展、研究內容及發展趨勢；人機界面設計中認知心理學、人機工程學、人機界面的藝術設計、色彩設計等；人機界面設計。介紹了多通道用戶界面、下一代人機界面展望及附錄。

關于軟件界面設計 : 會看到很多軟件設計很樸素，軟件用戶界面（Softwar User Interfac 指軟件用于和用戶交流的外觀、部件和程序等等。如果你經常上網的話?？雌饋斫o人一種很舒服的感覺；有點軟件很有創意，能給人帶來意外的驚喜和視覺的沖擊；而相當多的軟件頁面上充斥著怪異的字體，花哨的色彩和圖片，給人網頁制作粗劣的感覺。軟件界面的設計，既要從外觀上進行創意以到達吸引眼球的目的還要結合圖形和版面設計的相關原理，從而使得軟件設計變成了一門獨特的藝術。通常的講，企業軟件用戶界面的設計應遵循以下幾個基本原則： ．用戶導向（User orient 原則

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

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

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

不能超過 9 個欄目。但如果你內容實在多，2 分組處置。上面提到對于信息的分類。超出了 9 個，需要進行分組處置。如果，網頁上提供幾十篇文章的鏈接，需要每隔 7 篇加一個空行或平行線做以分組。如果你軟件內容欄目超出 9 個，如微軟公司的軟件，共有 11 個欄目，超越了 9 個。為了不破壞 Miller 公式，設計時使用藍黑兩種顏色分開，具體可以訪問 www.tmdps.cn 4 ．視覺平衡

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

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

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

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

第二篇：網站界面設計應該注意的情況

網站界面設計應該注意的情況！

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

如果你經常上網，就會看到很多網站設計很樸素，看起來給人非常舒服的感覺；有的網站很有創意，常常給人帶來意外的驚喜和視覺的沖擊；但相當多的網站頁面上充斥著怪異的字體，花哨的色彩和圖片，給人網頁制作粗劣的感覺。

網站界面設計，既要從外觀上進行創意以到達吸引眼球的目的，還要結合圖形和版面設計的相關原理，從而使得網站界面設計變成了一門獨特的藝術。通常，企業網站用戶界面的設計一般應遵循以下幾個基本原則：

一．用戶導向原則（User oriented）

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

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

KISS原則就是“Keep It Sample And Stupid”的縮寫，簡潔和易于操作是網頁設計的最重要的原則。畢竟，網站建設出來是用于普通網民來查閱信息和使用網絡服務。沒必要在網頁上設置過多的操作，堆積很多復雜和花哨的圖片。此原則的一般要求：

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

2、網頁盡量使用文本鏈接，而減少大幅圖片和動畫的使用，從而加快網頁的打開時間；

3、操作設計盡量簡單，并且有明確的操作提示；

4、網站所有的內容和服務都盡量在顯眼處向用戶予以說明等。三．布局控制（Layout）

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

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

2、分組處理。

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

四．視覺平衡（Visual balance）

網頁設計時，各種元素（如圖形、文字、空白）都要有視覺平衡作用。根據視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達到視覺平衡，設計網頁時需要以更多的文字來平衡一張圖片。另外，按照中國人的閱讀習慣是從左到右，從上到下，因此視覺平衡也要遵循這個這個原則。例如，你的很多的文字是采用左對齊，需要在網頁的右面加一些圖片或一些較明亮、較醒目的顏色。通常情況下，每張網頁都會設置一個頁眉部分和一個頁腳部分，頁眉部分通常放置一些Banner廣告或導航條及網站LOGO，而頁腳部分通常放置聯系方式和版權信息等，頁眉和頁腳在設計上也要注重視覺平衡。同時，也決不能低估空白的價值；網頁上所顯示的信息非常密集，這樣不但不利于讀者閱讀，甚至會引起讀者反感，破壞該網站的形象。在網頁設計上，適當的地方增加一些留白，精煉和升華你的網頁的形象及美感，使得頁面變得簡潔。

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

顏色是影響網頁的重要因素之一，不同的顏色對人的感覺有不同的影響，比如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯想到陽光，是一種快活的顏色；黑色顯得比較莊重，考慮到你希望對瀏覽者產生什么影響，為網頁設計選擇最恰當的顏色（包括背景色、元素顏色、文字顏色、鏈節顏色等）。

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

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

通過對網站的各種元素（顏色、字體、圖形、空白等）使用一定的規格，使得設計良好的網頁看起來應該是和諧的。或者說，網站的眾多獨立網頁看起來更像一個整體。網站界面設計上要保持一致性，這是很重要的一點。一致的網站結構設計，可以讓瀏覽者對網站的形象有深刻的記憶與印象；一致的導航設計，可以讓瀏覽者迅速而又有效的進入在網站中自己所需要的部分；一致的操作設計，可以讓瀏覽者快速學會在整個網站的各種功能操作。如果破壞這一原則，就會誤導瀏覽者，并且讓整個網站顯得雜亂無章，給人留下不良的印象。

當然，網站設計的一致性并不意味著刻板和一成不變，有的網站在不同欄目使用不同的風格，或者隨著時間的推移不斷的改版網站，會給瀏覽者帶來新鮮的感覺。

七．個性化（Individualization）

1、符合網絡文化

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

2、塑造網站個性

另外，網站的整體風格和整體氣氛表達要同企業形象相符合并且應該很好的體現企業CI。

八．網頁的均衡規劃與選擇（Planning and selection）

1、尺寸

·800*600能照顧到所有網友的電腦，但相當是張“小報”。

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

·正文頁采用自適應設計，能在正文頁做更多相關內容。首頁也可以嘗試自適應的設計。自適應設計的核心是要留出寬度伸縮自如的欄。

·在1024*76模式下，頁面的長度不易超過10屏。

·隨著電腦升級換代，分辨率提高，電腦屏幕能夠提供的面積越來越大，這是一種難得的資源，要充分利用?！靶蟆备摹按髨蟆币黾右槐兜募垙埑杀?，網站改“寬版”，成本的增加卻要小得多。

2、字體字號

·目錄頁用小字號，為的是放更多的標題?！ふ捻撚么笞痔?。為的是讓讀者讀得舒坦。

·慎用不容易看清楚的楷體?？w的作用等于圖片，主要起美化版面的作用?！ざ嘤脤λ阉饕嬗押玫臉舜?，來表示重點。

3、顏色

·同一個頁面的顏色不要超過4種。眼花繚亂，容易產生視覺疲勞。

·顏色對比不要反差太大。網頁版面不是美術作品，要避免形式對內容的喧賓奪主。

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

4、靜態化

·訪問量大的頁都應該靜態化，以便減少服務器壓力，增強網站穩定性。訪問不到的網頁是最差的網頁。

·動態化和靜態化在一個頁面中結合使用，能同時得到輕負荷和即時交互性的好處。

·哪些頁面的哪些地方需要靜態化要在一開始就考慮，訪問量大了之后，再高考慮，就遲了，由動態化轉為靜態化，會有很多歷史問題。

5、分欄

·首頁選4欄？還是3欄？

·正文頁多用2欄。

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

·避免一欄太強，一欄太弱。通過圖片、套紅等手段進行調控。平均使用讀者主意力。使讀者不敢放過左中右任何一欄。

6、圖片

·有圖有真相，一圖勝千言。十分必要時才用。因為圖片的編輯成本和帶寬成本都比較文字高很多。

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

·正文頁在5屏之內，盡量不要分頁。讓讀者一次讀完。

7、導航條與網站地圖

·導航條是網站的門牌號碼，不能隨意更改。否則，讀者會迷路，找不到他原來看的內容。

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

·導航條最多三行。最好二行。太多行顯重。

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

一、可放多行；

二、可形成網站底部的閱讀重點。將讀者從首屏帶到最后一屏，期間會增加很多點擊。

·主導航和頻道導航：主導航每頁都有，頻道導航只在本頻道頁面出現。

8、首頁更新成本

·首頁設計不能只考慮美觀、協調，要考慮24小時更新一遍之要求。更新是網站的生命，一定要最大限度地降低首頁更新成本。

·交叉自動同步更新的設計，可有效降低各種首頁更新成本，給讀者內容豐富即時的感覺。

·更新即時的首頁是網站的資源，因為是資源，更多的標題會擁上這個首頁。如此，正循環，這個首頁也就火了。更新不即時的首頁是網站的雞肋，會越來越寂寞，最終會被荒廢。

·每個首頁的設計成至少要有一個讀者點擊進去的理由。即時更新比獨家內容成本低。

第三篇：畢業論文(基于div+css的Tasty美食網站的界面設計)

畢 業 論 文（設計）

題

目 基于DIV+CSS的

美食網站界面設計

指導老師 ***** 專業班級 ******* 姓

名 *** 學

號 *********

2014 年 05 月 30 日

浙江經貿職業技術學院畢業論文(設計)

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

關鍵詞：網頁設計；div+css；Dreamweaver；美食網站 頁 第浙江經貿職業技術學院畢業論文(設計)

目錄

引 言..................................................................1 1市場調研..............................................................1

1.1 網站開發背景和需求...........................................1 1.2 同類型網站的分析.............................................2 2 文獻檢索..............................................................3

2.1 css樣式編寫規則..............................................3 2.2 div+css布局方式..............................................4 2.3 JavaScript編寫規則...........................................5 2.4 網站配色方案.................................................5 3 設計實踐..............................................................5

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

1頁 第浙江經貿職業技術學院畢業論文(設計)

引 言

隨著信息時代的來臨，IT行業已經成為現今最受關注的行業之一，它發展飛速且在全球范圍內廣泛、普及應用，人類的生活因此有了革命性的變化。同時，網絡技術的發展也取得了卓越的成就，為網站開發、界面設計等奠定了堅實的基礎。

論文詳細論述了關于一個美食網站的開發的設計過程。在技術上，采用了 Dreamweaver網站開發工具，以 HTML的超大功能結合JavaScript的客戶端語言。

本文實現了首頁、簡介、中式美食、西式美食、聯系我們等功能，全面化個人網站的需求。

論文組織如下：首先闡述了該網站的開發背景、意義，詳細介紹了div+css理論知識；其次介紹了相關的開發工具及技術基礎；接著對網站進行了需求分析，提出了具體的設計方案；然后展現了整個網站的具體實現，包括網頁的設計和鏈接，各功能模塊的實現；最后對該網站進行了嚴格的測試。

1市場調研

1.1 網站開發背景和需求

“忽如一夜春風來，千樹萬樹梨花開”，迅猛發展并日益成熟的互聯網已經影響到我們生活的方方面面。人們真真切切的體會到了網絡帶給大家的便捷，互聯網也以其獨有的優勢快速地滲透到越來越多的傳統領域。俗話說“民以食為天”，在解決了溫飽問題的現代，人們對食物的要求越來越高，已不僅僅局限于能吃飽就好，更多是希望能吃好，追求更多的美食。

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

設計開發此美食網站最基本的意義，就是能夠盡可能詳細地展示、介紹各種 第 頁

浙江經貿職業技術學院畢業論文(設計)

美食信息，同時提供美食愛好者一個交流的平臺，使得更多的美食傳統做法得到推廣，也可激發更多美食創意的產生。1.2 同類型網站的分析

美食網站越來越多，這說明了人們對美食的需求也越來越多。本人在設計之前對同類型網站進行了調研。首先對中華美食網進行分析，中華美食網首頁如圖1.1所示。

圖1.1 中華美食網首頁

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

接著又分析了美食天下網站，該網站首頁截圖如圖1.2所示。

第 頁

浙江經貿職業技術學院畢業論文(設計)

圖1.2美食天下網站首頁

不同于中華美食網的內容繁多，美食天下網站事個首頁內容較少，事個版面更顯清晰整潔，背景采用裸粉色，看過去更為清爽。導航利用div+css在大導航下加了子導航，鼠標移上去時會顯示不同的文字信息。不過與中華美食網設計相同的是，該網站也是以黃色為導航背景，內容種類多，版面緊湊。文獻檢索

本次設計是遵循web標準規范，在dreamweaver中利用div+css，并在文本文檔中編寫JavaScript代碼的形式完成事個網站界面的設計。此外網站的色彩搭配方面也需要格外注意，因此分別對css樣式編寫的規則、div+css布局方式、JavaScript的編寫規則和網頁色彩搭配方案做了相關檢索。2.1 css樣式編寫規則

css類型中，內聯式是指直接在html標簽后寫樣式代碼。而嵌入式就是對本文件內所有的該類型的標簽名運用這樣的樣式，但該樣式的標簽要放在head中。

嵌入式樣式表解決了同一個文件內使用同樣樣式的多個標簽的代碼重用，當接觸到有很多個文件組成的網站，如果這些獨立的網頁文件要使用統一的風格，就需要使用外部樣式表。建立后綴名.css的文本文件。在使用時，在引用該樣式

第3 頁

浙江經貿職業技術學院畢業論文(設計)

表的網頁文件內的head標簽中使用link標簽來引入。

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

有三種方法可以在站點網頁上使用樣式表： ① 外部樣式：將網頁鏈接到外部樣式表。② 內頁樣式：在網頁上創建嵌入的樣式表。③ 行內樣式：應用內嵌樣式到各個網頁元素。2.2 div+css布局方式

對于網站div+css設計越來越受到業界的關注，從個人網站到企業及門戶網站，頁面設計人員已經將div+css作為了業界標準。

如果用div+css來構建和美化網站，那么div就是整個網站的骨架，css樣式就是網站的衣服。其中的內容，就是血肉。要入手設計一個網站。那么，就要從div的布局開始。

本網站的骨架架構如下圖2.1所示：

圖2.1 設計中網站的骨架圖

第 頁

浙江經貿職業技術學院畢業論文(設計)

2.3 JavaScript編寫規則

JavaScript程序應獨立保存在后綴名為.js的文件中。

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

同色系方案是選擇彼此相鄰的幾種顏色構成的配色方案。例如橙色、橙紅色以及橙黃色就可以組成一個同色系方案。使用同色系配色方案可以給人非常協調的感覺，因此在網站設計中非常常用。典型的運用方法就是，用一種顏色作為頁面背景，而另外一種在顏色環中與其相鄰的顏色作為前景色。

互補色方案則是互補色方案的配置。雖然略顯繁瑣，但是在現在的網站設計中非常流行，因為互補色適合于制作活潑時尚的效果，可以讓網站魅力四射。

另外，在photoshop中，要想構造一個三色方案也是非常容易。首先選中一種顏色，記下他的H（Hue）值，然后為這個值加120以此類推得到第三種顏色，構成一個三色方案。三色方案中使用了三種彼此之間差別明顯的顏色，因此頁面顯得相當不穩定，是一種可以帶來比較另類的感覺的配色方案，將給予瀏覽者某種緊張感，這是因為這三種顏色均對比強烈。設計實踐

3.1 設計立意

在中國傳統文化教育中的陰陽五行哲學思想、儒家倫理道德觀念、中醫營養 第 頁

浙江經貿職業技術學院畢業論文(設計)

養生學說，還有文化藝術成就、飲食審美風尚、民族性格特征諸多因素的影響下，創造出彪炳史冊的中國烹飪技藝，形成博大精深的中國飲食文化。越來越多的人喜歡使用互聯網查詢信息、交流互動。美食需要傳承，也需要交流，美食網站是一個交流美食的平臺。

由于本人偏愛美食，時常關注美食信息，也因為所處的軟件專業，平時對網站設計和HTML編寫等方面有一定的熟悉度，借著此次制作畢業作品的機會，為美食設計一個版式新穎的網站，作為此論文的依據。

本次網站的制作主題確定為簡潔型。整個網站以圖片為主，減少文字。網頁主要以黑色為背景，灰色為輔，以達到清新整潔的頁面效果。

各頁面之間布局力求工整合理，內容表達清晰。

本美食網站的建設，主要針對美食愛好者及各界需要搜集美食信息的網絡用戶的需求進行設計開發的，因此，將打造一個界面美觀友好，布局合理，欄目功能強大，信息詳盡的網站。主要實現如下目標：

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

3.2 創作過程

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

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

第 頁

浙江經貿職業技術學院畢業論文(設計)

圖3.1 圖片搜集截圖

有關介紹美食網站的文字素材復制并保存在meishi.txt中，文字資料如圖3.2所示。

圖3.2 文字資料截圖

創建頁面，做好首頁及子頁的命名，為樣式、腳本分類創建文件夾。結合photoshop軟件制作效果圖，利用photoshop軟件實現某些元素的裁剪及取材。

3.2.1美食網站類主題與版面的分析

在美食網站整體版面布局中，需要更多運用css樣式、HTML代碼和div+css布局使網站清爽簡潔。需要達到的要求：

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

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

第7 頁

浙江經貿職業技術學院畢業論文(設計)

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

（2）版面合理，頁面鏈接無誤。

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

3.2.2美食網站效果圖的設計與制作

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

圖3.3首頁效果圖

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

第 頁

浙江經貿職業技術學院畢業論文(設計)

圖3.4首頁效果圖

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

圖3.5子頁效果圖

子頁布局不做修改。3.2.3界面元素的制作過程

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

第9 頁

浙江經貿職業技術學院畢業論文(設計)

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

由于本網站導航欄除了幾個數字圖片外沒再放其他圖片，所以只需在dreamweaver中布局后加入文字即可。3.2.4首頁界面的制作過程

首先建立站點，站點下新建images、css、js、data四個文件夾，文字搜集的素材歸于meishi.txt中，圖片素材的搜集與自己設計處理過的圖片都統一放在images文件夾內。另外控制樣式的style和slimbox兩個文件放入css文件夾內，init、jquery.localscroll-min、jquery.min、jquery.scrollTo-min和slimbox2五個js文件放入js文件夾內，數據庫文件放入data文件夾中。

創建首頁，初建header、main_wrapper、footer上中下三大版塊，其中在header中再插入site_title，輸入網站標題，如圖3.6所示。

圖3.6 site_title效果圖

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

頁 第

浙江經貿職業技術學院畢業論文(設計)

圖3.7首頁內容效果圖

導航區塊中的效果為鼠標移到導航上時，當前鼠標所在的導航項目欄的背景色加深，移開后又恢復。導航區塊的代碼如下：