主题四季食堂.pdfVIP

主 題 ： 四 季 食 堂 姓 名 ： 雷 侑 諠 學 號 ： 100941660 連 結 網 址 ： (桌上型電腦版) /computer/index.html (變流格線版面) /phone/index.html 壹、設計理念與風格 這是一個美食與健康並行的網站。而我的設計理念是以春、 夏、秋、冬 四個季節 為主題劃分 ，將店中的美食分為四個階段， 在不同的時節推出符合當季的飲食。告知大家每個不同的季節 該如何保養身體 ，以及推出各種健康的商品。希望運用簡單易 懂的方式，將健康理念的 介紹給閱讀者。並且不定時推出新的 折價卷及小遊戲來增加瀏覽者的新鮮感，頁面中插入一些小動 畫增加豐富感。 我的風格則是以大地色系及暖色調為主要色調，營造出復 古 且給人溫暖安全的感覺， 並搭配四季不同的美食，讓人們一 目了然知道每個季節不同的產品。簡約溫暖是我的此次設計的 主要風格。 以下是傳統電腦版網頁 、最新以變流格線版做出來的手機 版、平板電腦版以及電腦版的內容頁面介紹 。 貳、傳統桌上型電腦版面 傳統電腦版網頁，由首頁關於四季( ) 、四季菜單、四季折價、四季好物、聯 絡我們、折價卷小遊戲等頁面所構成。 一、首頁關於四季( ) ： 首頁以 上、左、右、下的方式來表現，於首頁的地方以簡單明瞭的方式介紹 關於四季食堂的理念與想法做法。並於左方做了一個與瀏覽者的互動圖示，點 小圖就能將它放大顯示。 二、四季菜單 菜單以四季分為 四個階段，在不同的階 段放入當季的菜色。並 介紹當季知識及保健 事項 。 三、四季折價 以折價卷來刺激消費者的消費意願，並於頁面告知如何使用折價卷的方法， 以及最新消息的公佈。 還有小遊戲的連結 ，提供小遊戲增加瀏覽者的好奇度。 ※折價卷小遊戲 折價卷小遊戲，除了讓瀏覽者增加好奇度外，也可使一些沒有智慧型手機或 平板的民眾，於店內消費結帳時完成遊戲，同樣可享有折價優惠。 向成功邁進! 加油!加油!gogogo! 四、四季好物 不定期增加 推出健康好吃的 商品。讓大家在 家中就可天天享 用營養好物。 五、聯絡我們 於頁面加入小動畫增加整體 生動感，並以簡單的方式及地圖告知實體商店的 位置。 参、變流格線版面 變流格線版 則是由首頁， 包含最新消息、關於我們、四季美食、四季好物、( 四季折價、聯絡我們) ，及副頁面 詳細菜單頁、( 好物內容所構成。) 於每一副頁面的最下方都有一個回首頁的按鈕，方便 瀏覽者使用 。 一、智慧手機版面 手機版的首頁 手機版本的頁面，是屬於一條龍的設計方式 ，可將最新消息、關於我們、折 價卷、聯絡我們 …等等所有內容一次就看完。 除 特別頁面，例如菜單及商品。詳細介紹就需另開頁面( ) 菜單頁面(春夏秋冬共四頁 ) 將四季餐點分不同頁做詳細解說(共四頁) 。 商品頁面 不同的商品，就開起不同的頁面。將不同種類的商品一一做介紹。 二、平板電腦版面 平板電腦的首頁，也是屬於一目了然 的一條龍形式。但菜單及商品介紹，一 樣是要開不同頁面來個別介紹。 讚 喔 ! 平板電腦的四季菜單(春天 ) 平板電腦的四季菜單(夏天 ) 平板電腦的四季菜單(秋天 ) 平板電腦的四季菜單(冬天) 商品介紹 三、桌上電腦版面 雖然使用變 流格線版 面能快速設計出桌 上型版 面，但還是比 一頁一頁個別 設計 來的單調。不過變流格 線還是一個很不錯的功 能。 菜單介紹 商品介紹 伸個懶腰~ 繼續努力~ 肆、學習心得 此次的認證作業，對於不是科班出身 ，且必須從頭至尾開始 學習修圖、排版、 架站做網頁的 我