[期中作業] OnePage-個人網頁製作

1. 製作OnePage網頁

---

2. 參照期中前講義製作

---

3. 作業說明

1.請以個人網站、作品集等主題製作，作品須原創，不可使用他人作品。

2.參照免費版型，挑選一適合期中作業主題的版型，結合選擇之版型製作。
DreamTemplate
http://www.dreamtemplate.com
tooplate 
http://www.tooplate.com/free-templates
templatemo 
http://www.templatemo.com/page/1
Free CSS Free CSS Templates, CSS Layouts & More! 
http://www.free-css.com/free-css-templates
HTMLl5UP 
https://html5up.net
W3.CSS Templates 
https://www.w3schools.com/w3css/w3css_templates.asp
Free Responsive HTML5 CSS3 Website Templates 
https://medium.com/web-development-zone/free-responsive-html5-css3-website-templates-bcbe3f8a20b9
https://onepagelove.com/templates
https://startbootstrap.com/template-categories/one-page/
https://colorlib.com/wp/best-one-page-wordpress-themes/

3.需完成之製作項目：
(1)製作個人favicon
(2)使用圖示字體(icon font) Font Awesome，並使用最新版本作更替。
(3)製作輪播圖
(4)了解網頁格線概念，並進行修改。
(5)製作作品分類，並進行修改。

4.製作完畢請上傳FTP，midterm資料夾。

請回覆於作業文章

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-105ooooo
(2) 參考之版型網址：
(3) 設計主題 / 風格
(4) 導覽列項目：
(5) 遇到之問題:
(6) 製作時間:
(7) 製作心得:

4. 課程影片

https://youtu.be/aGO1GQxbwTI





(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445075
(2) 參考之版型網址： http://www.tooplate.com/live/2090-kinetic 或 http://www.tooplate.com/live/2098-health
(3) 設計主題 / 風格 : 主題是自己拍的攝影照片 風格是簡單 乾淨
(4) 導覽列項目：首頁 home 關於about 人物攝影People photography 風景攝影 Landscape photography 聯繫contact
(5) 遇到之問題: 在製作的過程中，我遇到不知道要從那裡修改輪播圖片，所以我做了很久才找到修改輪播圖片的地方。以及最後的個人favicon做了好久才發現是打錯語法。
(6) 製作時間: 三到五天左右
(7) 製作心得:做完的感覺就是眼睛會眼花瞭亂 而且很難，但做完很有成就感!!



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445111
(2) 參考之版型網址：https://www.theeddynyc.com/
有點像這樣的感覺 但是會在活潑一點（結果找的跟做的完全不一樣xdddd）
(3) 設計主題 / 風格 : 自己的作品集 設計作品整理成網站的樣子
(4) 導覽列項目： 關於我About Me 企業識別系統CIS 海報編排＆立體包裝設計 繪畫與攝影 聯繫我Contact

(5) 遇到之問題: 因為我當初沒有找輪播的網頁，所以自己又去找了一次輪播圖的語法，沒有下面那個圈圈好可惜xddd
(6) 製作時間: 兩天吧～～因為我作品已經整理好了所以做很快？雖然找圖片找很久＃＃
(7) 製作心得:我覺得最麻煩的部分是輪播圖跟找css語法的部分，css裡面的語法很多所以找很久，但是知道規則之後後面找的時候找很快，雖然還是不知道他前面在打什麼東東就是了.......
輪播的部分前面說過因為當初沒有找輪播的網頁，所以自己又去找了一次輪播圖的語法，找了好幾個版本都不行，最後終於找到這個蠻不錯的輪播語法（html跟css一起的）然後網友也很貼心地寫了要怎麼改這個我覺得很不錯xdd 中途還有看到一個js的東西好像是網頁設計也會用到的？？（雖然不知道是什麼）
總之做起來蠻開心的（雖然仔細看會有小瑕疵xdddd）希望還有機會做不一樣的網站w



(編輯記錄)

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055445186
(2) 參考之版型網址：http://www.tooplate.com/live/2096-individual
(3) 設計主題 / 風格 : 沖繩介紹/海洋天空藍藍的,清爽的!!!
(4) 導覽列項目： 首頁(ホーム), 食物(食べ物),照片(写真),空港(空港)
(5) 遇到之問題: 剛開始看到這麼多的設定看到眼花撩亂，不知道該如何下手，但是仔細慢慢看就能看出端倪，就比較知道從哪裡下手了
(6) 製作時間: 2~3天
(7) 製作心得:第一次做ONEPAGE的網頁覺得天啊!這到底是什麼妖魔鬼怪的東西，一開始覺得有點想放棄，但是好好冷靜的看一下內容就覺得好像也沒有這麼崩潰，順利的把第一張圖放進去之後就覺得已經抓到訣竅，之後的圖片也越來越順利的設定完成!希望未來的我可以繼續得有耐心地做好網頁!!!



(編輯記錄)

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055445086
(2) 參考之版型網址： http://www.tooplate.com/live/2090-kinetic ；http://www.tooplate.com/live/2089-meteor
(3) 設計主題 / 風格 : 作品集(插畫設計) 簡單活潑的風格
(4) 導覽列項目：PORTFOLIO作品/ ABOUT關於/ CONTACT ME聯繫我
(5) 遇到之問題: 我忘了網頁標題的小圖示怎麼設定了...
(6) 製作時間: 3天左右
(7) 製作心得:修改時真的眼睛好花 不過終於完成一個屬於自己的獨特網頁了~



(編輯記錄)

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055445087
(2) 參考之版型網址：真的忘記儲存了....所以沒辦法附上網址
(3) 設計主題 / 風格 : 簡約自己的作品集
(4) 導覽列項目： About me 平面設計 繪畫
(5) 遇到之問題: 一開始問題超多但後來一步一步慢慢改
(6) 製作時間: 大概1~2天
(7) 製作心得:剛開始真的很抗拒,完全不想面對!!程式碼真的好複雜看了眼花撩亂,超想放棄的!!
但之後因為要交期中作業了,所以開始慢慢研究,一步一步改終於有點樣子,雖然沒有做得很好,但真的盡力了

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445039
(2) 參考之版型網址：
(3) 設計主題 / 風格 :貌似簡約風吧
(4) 導覽列項目： home\about painting\collection\favorite\more
(5) 遇到之問題: 太多個CSS要找到我想改的東西要點時間
(6) 製作時間: 4小時
(7) 製作心得: 用完還蠻有成就感的 雖然我現在還不算完成~差小不分~

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1045445134
(2) 參考之版型網址： 急著做作業忘記複製了
(3) 設計主題 / 風格 : 作品集、簡約風
(4) 導覽列項目：關於我/畢展/專題/麥克筆/素描
(5) 遇到之問題: 電腦的版本是英文版，在找翻譯的時間上耽擱了很久
(6) 製作時間: 將近一個禮拜
(7) 製作心得:以前的作品沒留多少，為了找作品花了一些時間

(1) 作業網址 ：
(2) 參考之版型網址：
http://www.tooplate.com/live/2089-meteor或http://www.templatemo.com/live/templatemo_512_moonlight
(3) 設計主題 / 風格 ： 作品集／作品集中／介紹自己／以圖為主
(4) 導覽列項目： HOME／ABOUT ME／GALLERY／ CONTACT
(5) 遇到之問題:
(6) 製作時間:
(7) 製作心得:



(編輯記錄)

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055445033
(2) 參考之版型網址：http://designstub.com/demos/avana/index.html
(3) 設計主題 / 風格 : 美食 食記 是由自己所吃過來 分享 和吃的心得 之紀錄 風格:以簡單畫面 加上文青感
(4) 導覽列項目：首頁 food 關於 about
(5) 遇到之問題: 搞不懂輪播圖怎麼用 所以沒加上 加上要尋找改的語法要找了好久 ,弄太多分頁 所以少一個等於重弄全部
(6) 製作時間: 2小
(7) 製作心得:一個一個修改很麻煩但越來越上手所以做比較快 但要找尋語法就要找很久



(編輯記錄)

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055445036
(2) 參考之版型網址：
(3) 設計主題 / 風格 :
(4) 導覽列項目：home works about me video
(5) 遇到之問題:右上角viedo橘色框框怎用都用不掉我快死了QWQ
(6) 製作時間: 3小
(7) 製作心得:還沒用完QQ，還需要放很多圖就完成了嗚嗚，這禮拜一定用完老師期待ㄅXD

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445021
(2) 參考之版型網址： http://www.templatemo.com/tm-496-pipeline

(3) 設計主題 / 風格 ：主要內容是自己的作品 風格配色是簡潔 顏色用黑白灰這樣來搭配 (作品除外)

(4) 導覽列項目：

1.Fourth Color
2.About Me
3.Works

(5) 遇到之問題:
老師真的非常抱歉，我下次絕對不要這麼晚交，還做這麼差，非常抱歉，也謝謝老師寬容
讓我可以補教，謝謝，雖然我還是遲交了......。

(6) 製作時間:

花了4天左右研究，做了3天

(7) 製作心得:

我覺得我比較會從零開始做，如果是用別人的來做會找不到語法位置，變得不知道該怎麼修。
途中DW存一次當一次，下次時間一定要抓準，我覺得我做的很糟糕，侷限在一個框框內，
不知道該怎麼做，原本會的東西也變得不知道怎麼做了......。
其實原本有做首頁，但放不了。
謝謝朋友的幫助讓我有輪播圖，謝謝老師的寬容。



(編輯記錄)

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055448122/
(2) 參考之版型網址： https://demos.onepagelove.com/html/namari/
(3) 設計主題 / 風格 : 旅遊公司幕後團隊 風格是簡單 乾淨
(4) 導覽列項目：首頁 起點 海報 服務
(5) 遇到之問題: 要改的好多，看得眼花撩亂的
(6) 製作時間: 好久QQ
(7) 製作心得:最後呈現的首頁很好看，海報那邊沒有想像的好看 感覺有點可惜



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445003
(2) 參考之版型網址： 老師的
(3) 設計主題 / 風格 : 目的明瞭，簡單
(4) 導覽列項目：home/About/works
(5) 遇到之問題: 問題也都是小問題 好好檢查一下就會解決


(6) 製作時間: 一個禮拜
(7) 製作心得: 在作品那裡 海報大小都改了可以照片總是掉下去 試很多次了TT 需要老師指點



(編輯記錄)

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055445156
(2) 參考之版型網址： http://www.tooplate.com/live/2082-pure-mix
(3) 設計主題 / 風格 : 作品集 ，簡約設計
(4) 導覽列項目：HOME / photography / graphic design / CONTACT
(5) 遇到之問題:
(6) 製作時間:
(7) 製作心得:



(編輯記錄)

(1) 作業網址 ：：http://mepopedia.com/~web106-2c/midterm/midterm-1055445024
(2) 參考之版型網址：http://www.templatewire.com/preview/verum/
(3) 設計主題 / 風格 :主題:個人作品網站/ 風格:簡單、清楚明瞭
(4) 導覽列項目： About / Works / Skills / Contact
(5) 遇到之問題: Icon改過之後，網頁一直無法變換新的，不過之後解決了
(6) 製作時間: 3-5天
(7) 製作心得:需要多花時間摸索，做完非常有成就感!



(編輯記錄)

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055445059
(2) 參考之版型網址：http://www.tooplate.com/live/2089-meteor
(3) 設計主題 / 風格 ： 作品集
(4) 導覽列項目： 首頁/關於/作品
(5) 遇到之問題: 用cs5開電腦超級盪，有一塊改不了顏色，研究很久
(6) 製作時間: 很久(夜貓子不知作多久)
(7) 製作心得:少為會看，但還沒做完



(編輯記錄)

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055445144
(2) 參考之版型網址：http://www.tooplate.com/view/2078-adventure
(3) 設計主題 / 風格 : 以自己的作品來編排，想呈現簡單明瞭的感覺
(4) 導覽列項目：技能skill 關於about 海報poster 攝影photography 聯繫contact
(5) 遇到之問題: 燈箱出餔來，不知道問題出在哪裡
(6) 製作時間: 一、兩週
(7) 製作心得:我不太會，所以做的和原本樣本沒什麼太大的不同，盡量把我會的都做了，謝謝同學在我遇到困難時出手相救






(編輯記錄)

(1)作業網址： http://mepopedia.com/~web106-2c/midterm/midterm-1055445119
(2)參考之版型網址：http://www.templatemo.com/live/templatemo_506_tinker
(3)設計主題/風格:以自己的作品來編排，想呈現簡單明瞭的感覺
(4)導覽列項目：技能skill關於about作品works聯繫contact
(5)遇到之問題: 不是自己的東西不大會看@@CSS常常會找不到...........
(6)製作時間: 3天(?
(7)製作心得:CSS超亂的...........



(編輯記錄)

(1).網址: ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445017
(2).版型網址：
 https://demos.onepagelove.com/html/touche/
(3).主題、風格：
 個人網站，簡約，以圖為主
(4) 導覽列項目： ABOUT / MY WORKS / CERTIFICATION / CONTACT
(5) 遇到之問題: 自己解決了
(6) 製作時間: 兩天
(7) 製作心得:一開始做的時候很困難，到後面越做越上手

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445177
(2) 參考之版型網址：sftp://web106-2c@mepopedia.com/home/web106-2c/public_html/hw04/vuilton-onepage-html-responsive/index.html
(3) 設計主題 / 風格 :以自己介紹和照片/簡單，簡潔
(4) 導覽列項目：關於我，攝影，照片，旅遊，聯絡我
(5) 遇到之問題: 就是圖片不見，不知道是原本就這樣還是我做錯了
(6) 製作時間: 三天
(7) 製作心得:雖然是用版型去改，覺得東西好多



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445102
(3) 設計主題 / 風格 我自己 簡易 清新
(4) 導覽列項目： 首頁 自我介紹 人物設計 怪物設計 地圖
(5) 遇到之問題: 我找怎麼改背景圖片大小
(6) 製作時間: 很久
(7) 製作心得: 我瘋了

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445183
(2) 參考之版型網址：http://www.templatemo.com/tm-458-lavish
(3) 設計主題 / 風格 : 自己得插圖
(5) 遇到之問題: 不會做
(6) 製作時間: 1到5天
(7) 製作心得:做完很有成就感

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445042
(4) 導覽列項目： 關於我自己
(5) 遇到之問題: 嗯?????問題，好像.......................沒有
(6) 製作時間: 3小時
(7) 製作心得: 差點爆肝

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445120

(2) 參考之版型網址： http://www.templatemo.com/page/4

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445150
(2) 參考之版型網址：
(3) 設計主題 / 風格 :粉嫩清新簡潔的感覺
(4) 導覽列項目： ABOUT YU CHING /WORKS/OUR EVENT GALLERY
(5) 遇到之問題: 有數不盡的問題，最大的就是試著讓各個頁面連結但都不成功
(6) 製作時間: 似乎很久
(7) 製作心得: 覺得可以做一個有質感的網頁用在作品集上是對我們很有幫助的，但就是不會的東西還太多了，創意很多但卻一直被很多知識綁手,我覺得我需要去深研了

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445004
(2) 參考之版型網址： http://www.tooplate.com/live/2090-kinetic
(3) 設計主題 / 風格 ：自己的作品集/簡單，能以作品為主
(4) 導覽列項目： HOME/ABOUT ME/GALLERY/VIDEOS
(5) 遇到之問題: 圖片分類的部分會出現空格
(6) 製作時間: 跟著老師的進度做 約兩個禮拜
(7) 製作心得: 接觸到了完全不一樣的領域 從完全看不懂到慢慢摸索出東西的過程很有成就感 還順便完成了自己的作品集

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1045445101
(3) 設計主題 / 風格 :超極極極極極簡 我的陶藝作品
(4) 導覽列項目： nose
(5) 遇到之問題: 因為太混 所以沒遇到問題:<
(6) 製作時間: 30分鐘
(7) 製作心得: 老師對不起 我好混



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445085

(2) 參考之版型網址：老師給的版型

(3) 設計主題 / 風格：簡單/繪本風格

(4) 導覽列項目：首頁/我的介紹/繪本介紹/作品介紹/角色介紹

(5) 遇到之問題: 刪減版型的時候有點卡住QAQ

(6) 製作時間:3天

(7) 製作心得: 這次用CC版本來製作網頁，讓我一開始很不習慣，不過慢慢摸索後還是有抓到訣竅，雖然互動式的網站讓我製作時有點眼花撩亂，不過能做出成品讓我覺得很有成就感。

作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055445182
設計主題 / 風格 : 大學做的作品、拍的美食還有出遊的風景照片，簡單清爽的風格
導覽列項目：ABOUT / PORTFOLIO / CONTACT
製作時間: 3-5天左右



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445015
(2) 參考之版型網址：https://startbootstrap.com/template-overviews/creative/
(3) 設計主題 / 風格 :介紹自己、生活照片、作品 / 簡約清新風
(4) 導覽列項目：關於我、作品、生活點滴照片、小小貼圖
(5) 遇到之問題: 真的研究了好久好久，不知道是版型不支援還是腦袋不爭氣，「輪播圖」不管怎麼用都用不出來，語法感覺都不支援（πーπ）
(6) 製作時間: 分了好幾天一天一天做一些些
(7) 製作心得: 有些語法真的要看清楚，雖然一直在修改，但最後還是做出了一個One page網頁的模樣，雖然沒有達到理想，下次會更加努力的

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445054
(2) 參考之版型網址：https://demos.onepagelove.com/html/resto/
(3) 設計主題 / 風格 :我自己的作品/方方正正
(4) 導覽列項目： HOME / ABUT US / PHOTOGRAPHY / GRAPHIC DESIGN / PAINTING
(5) 遇到之問題: 我覺得我好像一直一錯東西，就重覆用好多次，
(6) 製作時間: 大概2天.............吧QㄇQ
(7) 製作心得: 大喊"做網頁的人辛苦了!!!!!!!!!!!!!!!"
天啊我們才做這樣就累到爆炸，而且沒用好脾氣就湧上來了(我自己)



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445096

(2) 參考之版型網址：老師給的版型

(3) 設計主題 / 風格：作品集取向/簡單白色調

(4) 導覽列項目：首頁/擅長的/作品分類/計畫/關於我

(5) 遇到之問題: 只覺得改版型的時候遇到非常無敵多困難，太多東西沒看過的，尤其是換照片的問題還有icon的問題

(6) 製作時間: 2.5天

(7) 製作心得: 這次的網頁設計真的讓我的信心受挫非常大，無極限的難，真的是沒有難只有最難哈哈哈，做到爆肝，而且還是弄不懂許許多多東西，到底圖片為甚麼可以放成這樣，跪求教學，心好累。

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445168
(2) 參考之版型網址：老師的版型
(3) 設計主題 / 風格 :簡約設計
(4) 導覽列項目：Home/About/Service/Portfolio/Contact
(5) 遇到之問題 :
(6) 製作時間 :3天
(7) 製作心得 :覺得眼睛很疲憊,花了蠻多時間在找要改的語法,可能要再多做幾次才會熟練!

打錯了



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445132

(2) 參考之版型網址：

(3) 設計主題 / 風格：極簡

(4) 導覽列項目：首頁/關於我/作品/信箱

(5) 遇到之問題: 換照片有難度,icon也很困難

(6) 製作時間: 3天

(7) 製作心得: 這進階網頁真的好困難

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055443135
(2) 參考之版型網址： 老师给的我选了一个，具体是哪个，时间太久我忘了
(3) 設計主題 / 風格 简单，自己的作品，和关于我自己的介绍
(4) 導覽列項目： 作品，个人介绍，我的故乡，我的联系方式
(5) 遇到之問題: 这次又版型问题就还好，自己稍微想一下也就弄明白了
(6) 製作時間: 一个星期
(7) 製作心得: 就这次还挺顺利的

作業網址：http://mepopedia.com/~web106-2c/midterm/midterm-1055445110
參考之版型網址：https://demos.onepagelove.com/html/dimension/
設計主題 / 風格：簡潔灰黑色系。
導覽列項目： ABOUT／SKILL／WORKS／CONTACT
遇到之問題: 東西太多看不懂...還有一些沒看過的原始碼，還有輪播圖
製作時間：三天以上吧/// （家裡DW中途不能用只能起一大早到圖書館做...
製作心得：明明看起來很簡單的網頁原始碼竟然那麼複雜，雖然很有挑戰性...但看得心好累QQ

作業網址：http://mepopedia.com/~web106-2c/midterm/midterm-1055445119
參考之版型網址：http://www.templatemo.com/live/templatemo_506_tinker
設計主題/風格：我的簡易作品集/藍色的簡約風
導覽列項目： Top This／About MUYU／Works／Blog / Contact To MUYU
遇到之問題:用別人的東西結果便常不會用，而且CSS寫得很亂
製作時間：差不多3~4天吧?..
製作心得：別人的東西我果然看不懂@@

(1) 作業網址 ： http://mepopedia.com/~web106-2c/midterm/midterm-1055445060
(2) 參考之版型網址：http://www.tooplate.com/view/2078-adventure
(3) 設計主題 / 風格 : 簡潔/介紹我/我攝影的照片
(4) 導覽列項目：About me/expect/Photographer/Photos/Price/Connection
(5) 遇到之問題: 電腦太爛一直瘋狂當機...好想哭
(6) 製作時間:5~6小時
(7) 製作心得:讓我見到我的渺小

4.製作完畢請上傳FTP，midterm資料夾。

請回覆於作業文章

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445205
(2) 參考之版型網址：
(3) 設計主題 / 風格 簡單
(4) 導覽列項目： 生活寫真 養育心得 寵物個性
(5) 遇到之問題: 一開始挑的版型太難不會用。
(6) 製作時間: 3天
(7) 製作心得: 覺得有趣

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-1055445064
(2) 參考之版型網址：
(3) 設計主題 / 風格 ：簡潔，一目了然
(4) 導覽列項目： Home Introduce Expertise works
(5) 遇到之問題: emmmmmm....................
(6) 製作時間: 好多
(7) 製作心得: 我還活著