[作業04] OnePage網頁實作/slider /Grid system

1. 參照 
[講義] OnePage網頁實作解析(一）

[講義] OnePage網頁實作解析(一）
http://mepopedia.com/forum/read.php?804,87859

[hr]

2. 參考範例

1.畢業專題

http://mepopedia.com/~css105-2a/lion_candy/

2. 活動網站
http://ccnt1.cute.edu.tw/cpland/4e/
http://ccnt1.cute.edu.tw/cpland/future/

http://www.cute.edu.tw/dvcd/master/

3. 品牌與導覽網站設計

http://ccnt1.cute.edu.tw/cpland/4e/
http://www.cute.edu.tw/dvcd/lieyu/

[hr]

3. 作業說明

1.可從免費版型中挑選適合的版型修改。
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


OnePage免費版型資源

https://onepagelove.com/templates
https://startbootstrap.com/template-categories/one-page/
https://colorlib.com/wp/best-one-page-wordpress-themes/

2.設定好主題及網站風格。主題須為原創，不可使用他人作品。

3.本週進度：

(1)修改前置設定，包含語系、網站描述等

(2)導覽列文字修改

(3)輪播圖片及文字修改

(4)格線系統版式修改

(5)Font Awesome修改

4.上傳至hw04資料夾，並回覆於作業文章

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-105ooooo

(2).版型網址：

(3).主題、風格：

(4).設計概念與製作心得：

---

1. 講義影音

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445075
(2).版型網址：
http://www.tooplate.com/live/2098-health
(3).主題、風格：
主題是自己拍的攝影照片/風格是簡單明瞭 乾淨
(4).設計概念與製作心得：在製作的過程中，我遇到不知道要從那裡修改輪播圖片，所以我做了很久才找到修改輪播圖片的地方。



(編輯記錄)

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445177
(2).版型網址：sftp://web106-2c@mepopedia.com/home/web106-2c/public_html/hw04/vuilton-onepage-html-responsive/index.html
(3).主題、風格：
 主要是自己拍的照片，簡潔的風格
(4).設計概念與製作心得： 再改輪播圖的時候一開始看不懂，不過後來看懂了時候才知道改一下就可以了



(編輯記錄)

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445021

(2).版型網址： https://onepagelove.com/grand


(3).主題、風格：風格是簡單不複雜然ˊ後用黑白灰的顏色為主，主題的第四種顏色代表作品的顏色。


(4).設計概念與製作心得：

感覺看完語法都可以當偵探了。
老師，如果你說這不難的話把我X了吧。

4.上傳至hw04資料夾，並回覆於作業文章

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445003
(2).版型網址：
 老師的版型
(3).主題、風格：
 簡單，一目了然
(4).設計概念與製作心得： 想要作成作品集，會在陸陸續續變得豐富。

4.上傳至hw04資料夾，並回覆於作業文章

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445156
(2).版型網址：
 http://www.tooplate.com/live/2082-pure-mix
(3).主題、風格：
 極簡
(4).設計概念與製作心得： 做成一本實習作品集，有些問題正在處理



(編輯記錄)

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445087
(2).版型網址：
 http://www.(忘記儲存了......
(3).主題、風格：
 極簡
(4).設計概念與製作心得： 很複雜的期中作業大概花了一天吧
因為很多設定

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445054
(2).版型網址：
 https://demos.onepagelove.com/html/resto/index.html
(3).主題、風格：
 像作品集~配色白黑灰 乾乾淨淨
(4).設計概念與製作心得： 我覺得.............找個東西找很久QAQ然後內文之後再打(突然想不太到)



(編輯記錄)

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055448122
(2).版型網址：
 https://onepagelove.com/namari
(3).主題、風格：
 靜靜的感覺
(4).設計概念與製作心得： 旅遊公司的幕後團隊介紹

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445024
(2).版型網址：
http://www.templatewire.com/preview/verum/
(3).主題、風格：
 主題:個人作品網站/ 風格:簡單、清楚明瞭
(4).設計概念與製作心得：設計概念: 利用網站整理自己的作品；製作心得: 需要許多時間摸索，有一點點困難

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445144

(2).版型網址： http://www.tooplate.com/view/2078-adventure


(3).主題、風格：以自己的作品來編排，想呈現簡單明瞭的感覺
(4).設計概念與製作心得：
很容易亂掉

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445186

(2).版型網址： http://www.tooplate.com/live/2096-individual


(3).主題、風格：繩介紹/海洋天空藍藍的,清爽的!!!
(4).設計概念與製作心得：
非常無敵霹靂難,眼睛很容易花掉

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445033

(2).版型網址： http://designstub.com/demos/avana/index.html


(3).主題、風格：以自己的美食照片來編排，用簡單的排版格式有視覺觀感
(4).設計概念與製作心得：
搞不懂輪播圖怎麼用 所以沒加上 加上要尋找改的語法要找了好久 希望老師在教一次錄影 😀😀😀😀

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055443135
(2).版型網址：
老师的版型
(3).主題、風格：
 简单
(4).設計概念與製作心得：因为老师上这节课的时候我请假了，也没有看到影片教学，自己研究很久，还是不会还是看了同学作业发现有一个是用老师版型的就学习那个做的，可能会很像，不过我自己的改的都努力再改了

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445004
(2).版型網址：
 http://www.tooplate.com/live/2090-kinetic
(3).主題、風格：
 自己的作品集
(4).設計概念與製作心得： 圖片轉換分類的功能圖片會有空格

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445017
(2).版型網址：
 https://demos.onepagelove.com/html/touche/
(3).主題、風格：
 個人網站，簡約，以圖為主
(4).設計概念與製作心得： 一開始做的時候很困難，到後面越做越上手

(1).網址: ：http://mepopedia.com/~web106-2b/hw04/hw04-1055445085

(2).版型網址：
 mepopedia.com
(3).主題、風格：
 以前的專題繪本介紹和大學自己畫的繪本介紹/簡潔的風格
(4).設計概念與製作心得： 雖然圖片居多可是整理起來很麻煩，製作的過程中眼花撩亂。

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445102
(2).版型網址：
 http://www.tooplate.com/live/2098-health
(3).主題、風格：
簡易 清新
(4).設計概念與製作心得：我做到快瘋了而且為了教人我算是用趕出來的...很爛,版型我直接用第一個交作業的人找的版型

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445042
(2).版型網址：http://www.free-css.com/free-css-templates/page225/logic
(3).主題、風格：
關於自記
(4).設計概念與製作心得：找版型找好久，而且做久了，超沒耐性的

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445120
(2).版型網址：http://www.templatemo.com/page/4
(3).主題、風格：
 貓的自介
(4).設計概念與製作心得:以貓的介紹為主題

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445183
(2).版型網址：
 http://www.templatemo.com/tm-458-lavish
(3).主題、風格：
 作品集 乾淨簡潔
(4).設計概念與製作心得：網頁設計蒸蚌

(1).網址: http://mepopedia.com/~web106-2c/hw04/hw04-1055445111
(2).版型網址：

(3).主題、風格：
主題是自己的作品集，同ㄧ種色系的概念
(4).設計概念與製作心得：沒有輪播只能自己找資料qq



(編輯記錄)

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445168
(2).版型網址：老師的版型
(3).主題、風格：簡約,
(4).設計概念與製作心得：眼睛很酸~語法很多,有時候會錯亂刪錯東西 .

網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445182
主題、風格：
自己的作品，小清新風格
設計概念與製作心得：挺有成就感的

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445015
(2).版型網址：https://startbootstrap.com/template-overviews/creative/

(3).主題、風格：
 簡約文青風
(4).設計概念與製作心得：介紹自己跟作品，還有記錄自己的生活，作業四跟期中只有些微的不一樣，因為直接一口氣做完 研究了好久好久～



(編輯記錄)

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445036
(2).版型網址：
(3).主題、風格：
黑色的很有FU
(4).設計概念與製作心得：結果還沒做完，用到ㄎ一笑了 現在要去洗澡了掰掰，其中用完整版

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445059
(2).版型網址：http://www.tooplate.com/live/2089-meteor
(3).主題、風格： 作品集
(4).設計概念與製作心得：少為會看，但還沒做完，研究好久好久有一點點成果

4.上傳至hw04資料夾，並回覆於作業文章

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445205
(2).版型網址：
 老師的版型
(3).主題、風格：
 簡單
(4).設計概念與製作心得：想做個寵物專頁

(1).網址: http://mepopedia.com/~web106-2c/hw04/hw04-1055445096
(2).版型網址：
老師的版型
(3).主題、風格：
主題是自己的作品集，以極簡風格呈現。
(4).設計概念與製作心得：真的會做到爆炸，語法難到炸天。

(1).網址: http://mepopedia.com/~web106-2c/hw04/hw04-1055445132
(2).版型網址：

(3).主題、風格：
主題是自己的攝影作品,裡面也參雜了一些搞怪元素
(4).設計概念與製作心得：這個真的很有難度

網址：http://mepopedia.com/~web106-2c/hw04/hw04-1055445110
版型網址：https://demos.onepagelove.com/html/dimension/

主題、風格：
 簡潔灰黑色系
設計概念與製作心得： 下載完別人的版型打看來看到哭，太多奇怪看不懂的原始碼...
感覺自己要在更努力一點了...

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445119
(2).版型網址：http://www.templatemo.com/live/templatemo_506_tinker
(3).主題、風格： 作品集 /清爽風
(4).設計概念與製作心得：對應圖片對到頭昏眼花.....

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445060
(2).版型網址：http://www.tooplate.com/view/2078-adventure
(3).主題、風格：
我的攝影/自介/簡潔
(4).設計概念與製作心得：我...快看到耶穌了

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445064
(2).版型網址：
(3).主題、風格：簡潔，一目了然
(4).設計概念與製作心得： 瘋了

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-1055445086
(2).版型網址：http://www.tooplate.com/live/2090-kinetic ；http://www.tooplate.com/live/2089-meteor
(3).主題、風格：作品集 簡單活潑的風格 
(4).設計概念與製作心得：製作一個適合自己創作風格的網頁 真不錯

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04--1055445096
(2).版型網址：http://mepopedia.com/forum/read.php?804,87785
(3).主題、風格：黑白色調 簡潔有力
(4).設計概念與製作心得： 慢慢有學到東西的步調