[作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型（新增CSS3練習）

經過了一個寒假，為了讓大家回復記憶，請先複習基礎的網頁設計概念
以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！

1. 網頁基礎複習

[url=http://mepopedia.com/forum/read.php?804,41760][講義] HTML & CSS網頁基礎複習整理[/url]

[hr]

2. 課堂範例

http://mepopedia.com/~jinjin/ex/hw01/

[hr]

3. 作業說明

參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]

自行選擇主題，製作以DIV架構搭配CSS的基本網頁，請注意字體大小、整體質感與配色

可參考http://www.css3maker.com/
適當加入CSS3效果

圓角：border-radius: 20px; （請自行放入適當位置並改變數值）
區塊陰影：box-shadow:5px 5px 5px #000000;（請自行放入適當位置並改變數值）
文字陰影：text-shadow: 1px 1px 1px #000000;（請自行放入適當位置並改變數值）
透明度： rgba(102,153,255,0.5)
RGBA是代表Red（红色） Green（綠色） Blue（藍色）和 Alpha，Alpha 0代表透明、1代表不透明，請自行改變數值）
透明度：opacity: 0.5;（設定的元素有50%的透明度，請自行放入適當位置並改變數值）
線性漸層：background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#866400), to(#FF4E28));（請自行放入適當位置並改變數值）
放射漸層：background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#866400), to(#FF4E28));（請自行放入適當位置並改變數值）
漸層語法:http://mepopedia.com/forum/read.php?844,17157

製作完畢請上傳FTP
下載：http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-105xxxxxxx
2.設計概念與製作心得：
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
作業參考
(1) http://mepopedia.com/~web103-2a/hw01/hw01-102/
(2) http://mepopedia.com/~css105-2b/hw01/hw01-1045445017/
(3) http://mepopedia.com/~web105-2c/hw01/hw01-1045445117-1/
(4) http://mepopedia.com/~web105-2c/hw01/hw01-1045445189-2/
(5) http://mepopedia.com/~css105-2c/hw01/hw01-1045445036/
(6) http://mepopedia.com/~css104-2b/hw01/hw01-1035445170/
(7) http://mepopedia.com/~css104-2c/hw01/hw01-1035445057/



[hr]

4. 上課影音

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc


作業一課堂講解
http://youtu.be/TnaMIVYyf4Y





(編輯記錄)

1.網址:http://mepopedia.com/~web106-2c/hw01/hw01-1055448122
2.設計概念與製作心得： 森林 大自然的感覺
3.何謂HTML、DIV及CSS: 文本 可以直接顯示於網頁上、給css使用的標籤?、讓html變得有規劃 不會雜亂無章
4.附上至少一個覺得設計很有質感的網站，並說明原因 http://www.cssdesignawards.com/woty2016/ 很有趣的互動
5.期待這門課的學習成果與收穫為何? 可以運用到專題上

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445097
2.設計概念與製作心得:可愛的日式甜點，甜蜜的感覺 / 越來越複雜阿阿阿阿
3.何謂HTML、DIV及CSS: 製作網頁的好工具
4.附上至少一個覺得設計很有質感的網站，並說明原因 :https://www.lebledor.com/ 給人視覺上感到非常舒適
5.期待這門課的學習成果與收穫為何?
對將來或是專題很有幫助

1055445076 李珮瑄

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445076
2.設計概念與製作心得: 最喜歡透明度 可以讓畫面多加層次感
3.何謂HTML、DIV及CSS: div 可以把他視為標籤 這個標籤給他名稱之後用CSS去做排版
網頁創建和其它可在網頁瀏覽器中看到的信息 設計的一種標記語言
4.附上至少一個覺得設計很有質感的網站，並說明原因 http://www.anonymoushamburger.com/ 我覺得他的動畫很有質感 畫面簡約易讀
5.期待這門課的學習成果與收穫為何? 可以學到更多有關網頁設計的相關知識跟技能



(編輯記錄)

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445148
2.設計概念與製作心得:最近期待的電影第二部
3.何謂HTML、DIV及CSS: 製作網頁的
4.附上至少一個覺得設計很有質感的網站，並說明原因 :https://www.squarespace.com/ 很乾淨舒服
5.期待這門課的學習成果與收穫為何?
對將來工作或很有幫助 也很有趣

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445007
2.設計概念與製作心得：想主題很累
3.何謂HTML、DIV及CSS: 讓製作網頁能更分的清楚
4.附上至少一個覺得設計很有質感的網站，並說明原因 ：http://simsim.fouroom.co/ 因為很可愛
5.期待這門課的學習成果與收穫為何? 希望學到更多精緻的網頁設計

1.網址: http://mepopedia.com/~web106-2b/hw01/hw01-1055445052
2.設計概念與製作心得：新的一學期不知道是太久沒碰網頁還是~一開始做的時候超卡整個腦袋斷線 後來慢慢找回手感~
3.何謂HTML、DIV及CSS: 更容易製作網頁?????
4.https://udesign.udnfunlife.com/mall/Cc1a00.do?gclid=Cj0KCQjw7Z3VBRC-ARIsAEQifZQdjY-IzrPoVs6c4t9kAnbJqA5cAkGgC5QUxDe-ubg2UJbm65mgV9saAvRsEALw_wcB&gclsrc=aw.ds 喜歡簡潔簡單的感覺~
5.期待這門課的學習成果與收穫為何? 希望可以學到更多製作網頁的技巧~這樣可以替自己的品牌設計一個專屬的網站!!



(編輯記錄)

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445082
2.設計概念與製作心得： 以橘色為主色調，讓人充滿著食慾感。在製作過程中有些差錯，但有自己嘗試著將網頁變得有質感些。
3.何謂HTML、DIV及CSS:
HTML， DIV 標籤用法，現在直接用來做網頁排版。
CSS為自訂網頁風格網頁設計者所表現出的整體風格，有不會因為其瀏覽者的瀏覽器設定不同而改變。
4.附上至少一個覺得設計很有質感的網站:https://www.design-hu.com/about-us 此網頁不會有視覺上的壓迫感。
5.期待這門課的學習成果與收穫為何? 期望自己能夠將學到的內容，在未來的職場上有幫助。



(編輯記錄)

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445185
2.設計概念與製作心得：柔美的感覺，還不錯。
3.何謂HTML、DIV及CSS: 網頁的架構及色彩的運用呈現出具有質感的網頁。
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何? 可以學到許多。



(編輯記錄)

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445146
2.設計概念與製作心得：主要是呈現偏遊戲網的風格 一開始還真的會忘記一些東西還要翻以前做過的網頁來看
3.何謂HTML、DIV及CSS: ((離線
4.附上至少一個覺得設計很有質感的網站，並說明原因 :
5.期待這門課的學習成果與收穫為何? 希望可以更熟悉所有操作和獨立製作自己的網站

網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445191
設計概念:以亮色和粉色為主
期待這門課的學習成果與收穫：對未來工作有幫助

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445137
2.設計概念與製作心得：比之前的簡單很多
3.何謂HTML、DIV及CSS: (HTML網站)(DIV標籤)(網站的呈現方式.設計)
4 https://www.feeling18c.com/index_no_animaiton.php
5.期待這門課的學習成果與收穫為何? 做出多樣性的網站

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445071
2.設計概念與製作心得：以日式風格營造出一個人走在京都的感覺
3.何謂HTML、DIV及CSS: 標籤?
4.附上至少一個覺得設計很有質感的網站，並說明原因
http://mugenmusou.com/
配色美 簡約但不失質感
5.期待這門課的學習成果與收穫為何? 能做出具有深度的網頁
有圖片ㄌ～～～～



(編輯記錄)

更改~~~~~~~~~~~~~~~~~~~~~~~

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445104
2.設計概念與製作心得： 初期回復記憶 666
3.何謂HTML、DIV及CSS: 很酷的架構 很酷的標籤 很酷的設計設定
4.附上至少一個覺得設計很有質感的網站，並說明原因

http://www.2121designsight.jp/

有親訪此處 並認為網站美感與地區相符
5.期待這門課的學習成果與收穫為何?
變猛猛噠



(編輯記錄)

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445095
2.設計概念與製作心得：新的課程充滿希望。
3.何謂HTML、DIV及CSS: 網頁製作及修飾的工具。
4.附上至少一個覺得設計很有質感的網站，並說明原因: http://www.cute.edu.tw/
支持學校--功能及特效許多。
5.期待這門課的學習成果與收穫為何?
能獨立完成有專業感的網站。

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445014
2.設計概念與製作心得：j2/4
3.何謂HTML、DIV及CSS: 網頁的架構及色彩的運用呈現出具有質感的網頁。
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何? 不錯。

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445008
2.設計概念與製作心得：厭。
3.何謂HTML、DIV及CSS: 網頁的架構及色彩的運用呈現出具有質感的網頁。
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何? 不錯。

1.網址 : http://mepopedia.com/~web106-2b/hw01/hw01-1055445056
2.設計概念與製作心得 : 覺得進階網頁課程會很有挑戰力~~
3.何謂HTML和DIV及CSS : 網頁製作不可或缺的重要工具
4.有質感的網站 : https://www.cadch.com/modules/news/
(說明原因) : 整體看起來非常時尚 ; 風格舒適
5.期待這門課的學習成果與收穫為何 ? 知識能更上一層樓的感覺 !!

1055445103林容渝

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445103
2.設計概念與製作心得： 調背景大小比較困難外，其他都沒問題
3.何謂HTML、DIV及CSS: HTML網頁 DIV標籤 CSS設計
4.附上至少一個覺得設計很有質感的網站，並說明原因 https://www.pinterest.com/ 簡潔明瞭
5.期待這門課的學習成果與收穫為何? 希望可以做出有質感的網頁

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445190
2.設計概念與製作心得：以拉拉熊的顏色代表來製作。
3.何謂HTML、DIV及CSS: DIV 可以把他視為標籤 這個標籤給他名稱之後用CSS去做排版
網頁創建和其它可在網頁瀏覽器中看到的信息 設計的一種標記語言 。
4.附上至少一個覺得設計很有質感的網站，並說明原因 :http://www.sanm-in.com/index.php?type=top&arem=108 因為整體感看起來很可愛很舒服
5.期待這門課的學習成果與收穫為何? 可以學到許多讓我網頁更進步。

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445178
2.設計概念與製作心得：感覺不錯
3.何謂HTML、DIV及CSS: 架構 標籤 設定
4.附上至少一個覺得設計很有質感的網站，並說明原因 https://vimeo.com/ 厲害!
5.期待這門課的學習成果與收穫為何? 網頁能做得很厲害

http://mepopedia.com/~web106-2b/hw01/hw01-1055445002

2.設計概念與製作心得:玩樂風格
3.何謂HTML、DIV及CSS: 製作網頁的好工具
4.期待這門課的學習成果與收穫為何?
對將來或是專題很有幫助

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445092
2.設計概念與製作心得：
是以宮崎駿的借物少女艾莉緹來做的
3.何謂HTML、DIV及CSS:
我卡住
4.附上至少一個覺得設計很有質感的網站，並說明原因
http://aeru-studio.com/
簡單美美的
5.期待這門課的學習成果與收穫為何?
我相信可以學到更多

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445197
2.設計概念與製作心得： 加入了動畫，網頁變得豐富了很多
3.何謂HTML、DIV及CSS: 做網頁用的工具，div為標簽，css美化文本
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://issuu.com/ （多圖與排版）
5.期待這門課的學習成果與收穫為何?
學到更多有關網頁的知識與流行的基本構架

1.網址 : http://mepopedia.com/~web106-2b/hw01/hw01-1055445068

2.設計概念與製作心得 : 一直忘記要回復這邊...sorry

3.何謂HTML和DIV及CSS : 解釋完太長了@w@...HTML是身體CSS是衣服跟裝飾品這樣吧

4.有質感的網站 : https://www.apple.com/tw/mac-pro/
這種動畫效果應該很難吧...沒什麼好挑惕的啊啊啊

5.期待這門課的學習成果與收穫為何 ? ：之後應該會去研究購物車之類的東西吧...好像常常被問到這東西，然而目前手上沒這技能

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445038

2.設計概念與製作心得：

設計概念是探討憂鬱症的人,不見得是你看到當下的那麼快樂,有可能下一秒會發生讓人痛心的是,所以要好好陪伴,因為其實每個人都會憂鬱,只是嚴不嚴重而已,多多關心周遭的人,珍惜當下,或許可能因為關懷或許能幫助一些人走出來!

3.何謂HTML、DIV及CSS:

HTML div 標籤是網頁中的重要基礎元素，DIV 可以創造各個不同的區塊，每個區塊內還可以增加更小的區塊，每組 HTML div 標籤都是一個區塊級元素，基本會占用掉一整行的空間~

一組標準的 HTML div 區塊是由一個開頭 標籤所組成，其間背包起來的部份就是區塊內容，文字、圖片、影片、框架 也就是 style 的部份。

CSS DIV 可以讓整體程式碼更為乾淨整潔，修改上非常便利，而且兩欄式網頁可以說是非常普遍的設計方式，主要原因是網頁配置比起單欄式設計有更多的區塊空間可以使用。

4.附上至少一個覺得設計很有質感的網站，並說明原因
https://linkinpark.com/news,很容易找到要找的東西~

5.期待這門課的學習成果與收穫為何?
學習到更多種類的網頁類型~感覺比之前做更有趣了~希望我不要再請假了....~

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445143
2.設計概念與製作心得： 圓角很可愛
3.何謂HTML、DIV及CSS: 網頁
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何? 有新東西就夠了