Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

經過了一個寒假,為了讓大家回復記憶,請先複習基礎的網頁設計概念

1. 網頁基礎複習


[講義] HTML & CSS網頁基礎複習整理



2. 課堂範例


http://mepopedia.com/~web103-2a/hw01/hw01-102



3. 盒子模型/區塊模型(Box Model)


參考以下網址,並牢記下圖 盒子模型/區塊模型(Box Model)
http://mepopedia.com/forum/read.php?844,15917

http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif



以及盒子與盒子(元素與元素)之間的關係



<<重要!熟記元素與元素之間的關係>>



4. 作業說明


參照講義
利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

自行選擇主題,製作以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/~css105-2a/hw01/hw01-104xxxxxxx
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?



範例:
http://mepopedia.com/~web103-2a/hw01/hw01-102/
(1) http://mepopedia.com/~web102-c/hw01/hw01-1015445243/
(2) http://mepopedia.com/~css104-2a/hw01/hw01-1035445130/
(3) http://mepopedia.com/~css104-2b/hw01/hw01-1035445170/
(4) http://mepopedia.com/~css104-2b/hw01/hw01-1035445209/
(5) http://mepopedia.com/~css104-2c/hw01/hw01-1035445057/
(6) http://mepopedia.com/~css104-2c/hw01/hw01-1035443128/




5. 上課影音



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





Edited 3 time(s). Last edit at 03/08/2017 08:27PM by JinJin.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445022
2.設計概念與製作心得:
可以做出自己喜歡的題目與風格,做完第一項作業就有小小的成就感thumbs upspinning smiley sticking its tongue out
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01_1045445154
2.設計概念與製作心得:我認為能學到這個很高興,簡單又容易上手就可以做出還不錯的網頁~謝老師!grinning smiley
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?



Edited 1 time(s). Last edit at 03/22/2017 11:03AM by A_MA0109.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445073
2.設計概念與製作心得:
直接在背景放上男女主角的畫面點出網站的主題
並且以綠色作為主色的運用,更接近大自然,用
透明度是為了看見背景圖。
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445094
2.設計概念與製作心得:
學習到網頁設計的基礎操作,讓我們知道麻煩的網頁設計也是可以輕鬆地完成smiling bouncing smiley
3.何謂HTML、DIV及CSS:

4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445016
2.設計概念與製作心得:這次做網頁軟體又更加的了解和知道怎麼去運用spinning smiley sticking its tongue out
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445013
2.設計概念與製作心得:
主要以泰迪熊由來來設計網頁架構,來自各國的泰迪熊介紹,製作心得方面, 雖然覺得dw做網頁有趣,但是還是需要摸索一陣子。
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445034
2.設計概念與製作心得:
雖然大二上的時候上過網頁設計 但是比較基礎簡單的 後來二下上了進階網頁 學到更多了
一聽到進階網頁其實很害怕都聽不懂 但是做完功課看老師的網站教材 理解更快了
也都有提前上網看了一下老師 下周要上的課程內容 所以理解的也比較快 真的比想像中簡單很多
也覺得蠻有興趣的 做出來很成功很有成就感 也很喜歡



3.何謂HTML、DIV及CSS:
HTML就是原始碼也就是架構網站的主要架構
DIV 就像是標籤一樣 包覆著區塊
CSS就是樣式 美化網站的語法

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.world-d.tw/
自己喜歡看圖片不看字
所以特別喜歡這種網站
看上去很舒服自在,也很有層次
很乾淨不會很亂。

5.期待這門課的學習成果與收穫為何?
期待很高的一堂課,學到的遠遠超過自己想像的,很有趣也很有興趣
收穫很多,真的學會的是自己從來沒碰過的東西,也希望以後可以朝網頁設計發展。



Edited 3 time(s). Last edit at 04/02/2017 01:23AM by 1045445034.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445007
2.設計概念與製作心得:
製作過程中雖然有遇到困難,但都如期解決,很高興可以完成這個作業,也讓我學習不少東西,獲得許多成就感。
3.何謂HTML、DIV及CSS:
HTML:
HTML的全名是HyperText Markup Language,是編寫網頁的基本語言,而它並不是一個程式, 只是一些插在普通文件內的碼( code ),這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來,你現在所看到的頁面就是用HTML來控制的,它可控制字體的大小,也可以插入連結或圖像。
DIV:
DIV 可以解釋為區塊,用 DIV 標籤包起來的東西,瀏覽器會視為一個物件,你可以用 div 將網頁內容的各區塊包起來,再去做 CSS 排板,目前所有的主流瀏覽器都支援 DIV 標籤。
CSS:
SS是「Cascading Style Sheets」的縮寫,Cascading是串接、連接之意;Style則是風格、款式之意;Sheets則是一頁紙、表的意思。所以呢,要以中文來解釋CSS的話呢,您可以稱之為「串接樣式表」。很奇怪的一串名詞對不對,其實,當您CSS用習慣後,您會發現它會這樣被稱呼還蠻貼切的。

4.附上至少一個覺得設計很有質感的網站,並說明原因
網頁: https://unsplash.com/collections
原因:他是一個讓大家傳自己拍的作品的一個平台,並且上面的照片都可以下載運用,整體網頁看起來很乾淨明瞭,背景以白色為組不會干擾到每張作品的欣賞,並且放大只要立即點擊相片就可以放大,推薦大家可以去逛逛。

5.期待這門課的學習成果與收穫為何?
得到學分



Edited 2 time(s). Last edit at 03/24/2017 03:15PM by 1045445007.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445043
2.設計概念與製作心得:
理念 :因為我很喜歡韓國團體所以這次的作業是利用他們的照片以及應援色(藍色系)來製作,
內容就是大概的介紹他們。
心得 :覺得這學期的網頁課比上學期學的多,可能是因為上學期常常因為公務所以沒辦法上
到網頁課的關係所以一整學期下來幾乎沒學到甚麼只能勉強過關,這次的作業都可以知道哪
裡該怎麼做覺得做出來後很有成就感,希望往後也能這麼得心應手smiling bouncing smiley
3.何謂HTML、DIV及CSS:
HTML是負責建構網頁的基本架構
CSS是專門負責美化網頁的任務
DIV標籤
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.wooplanet.com/
覺得他們網站的風格跟本身賣的東西風格幾乎是一樣的,都非常的可愛但又不會太花俏,
在字體上或是配色的處理得很好照片的調色也跟網站有搭配,會讓人一點進去網站裡就覺得好可愛喔~~
5.期待這門課的學習成果與收穫為何?
希望能學習到比上學期更多設計一個網頁的方法,也希望可以做出自己理想中的網站drinking smiley



Edited 1 time(s). Last edit at 04/26/2017 01:23AM by 1045445043.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445088
2.設計概念與製作心得:
日本傳統點心和菓子 介紹日本漂亮細膩的傳統點心
目前上課進度聽得懂跟得上 還蠻上手的
3.何謂HTML、DIV及CSS: HTML相當於房屋骨架 DIV網頁區塊類似房子的格局 CSS就是房屋的外觀設計
4.附上至少一個覺得設計很有質感的網站,並說明原因 http://www.cecetshop.com/Shop/
很喜歡首頁圖片的播放效果 下方連結用閃爍的背景配上文字一邊底是閃爍的另一邊自是閃爍的排在一起做對比很有趣
網站設計簡單明瞭
5.期待這門課的學習成果與收穫為何?做出一個像網頁的網頁



Edited 4 time(s). Last edit at 03/29/2017 08:19PM by 1045445088.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445004
2.設計概念與製作心得:
這次的網頁設計跟上學期的比起來較困難 但只要找到老師說的重點一步一步完成 就能學習的比較順也比較能夠搞懂
3.何謂HTML、DIV及CSS:
HTML 是設計網頁的原始碼也就是架構網頁的重要一步
DIV 類似標籤 可以包覆一部分區塊來做編輯
CSS 就是設定樣式 美觀
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://eatboutique.com/
乾淨、簡單 是喜歡的類型
5.期待這門課的學習成果與收穫為何?
希望可以比上學期學到更多不一樣的,上了這堂課學的真的很多
希望可以跟上老師的速度去完成



Edited 1 time(s). Last edit at 04/02/2017 01:22AM by 1045445004.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445109

2.設計概念與製作心得: 這次的學習覺得對網頁設計增加了不少知識,也覺得滿有趣的~不過覺得老師的速度有點快~講完許多才換我們做...讓我有些記不太起來QAQ所以落後又落後了......希望老師可以講一小段接著讓我們先做.雖然會慢一點~但我覺得學習效果比較跟得上smiling smiley謝謝。

3.何謂HTML、DIV及CSS:
HTML的全名是HyperText Markup Language,是編寫網頁的基本語言,而它並不是一個程式, 只是一些插在普通文件內的碼( code ),這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來,你現在所看到的頁面就是用HTML來控制的,它可控制字體的大小,也可以插入連結或圖像。

CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的色彩、文字設定、背景、排版等網頁外觀及美化...
(2)它能只修正一個 CSS 文件,便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡,縮小檔案下載的速度。
(4)適用於各種作業平台。
(5)由於允許同時控制多重頁面的樣式和佈局,CSS 可以稱得上WEB 設計領域的一個突破。

在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為風格設定,一個建築網頁架構,一個塑造網頁美感。



4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?



Edited 2 time(s). Last edit at 03/22/2017 11:24AM by 1045445109.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445106
2.設計概念與製作心得: 一次講解過多可能無法吸收
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
Pinterest:可以在這裡找到很多靈感

5.期待這門課的學習成果與收穫為何?
穩穩地拿到學分



Edited 2 time(s). Last edit at 03/29/2017 11:06AM by 1045445106.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445145

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

以我喜歡的Marvel影液為主題,介紹MarvelComic及相關影業相關產業。
製作網頁我覺得很有趣,雖然會的語法還不夠多,所以做出來的網站看起來很兩光,不過希望以後可以把它補的越來越精緻。
還有就是,希望老師講話速度可以慢一點,有時候太快了跟不上confused smiley

3.何謂HTML、DIV及CSS:


4.附上至少一個覺得設計很有質感的網站,並說明原因


5.期待這門課的學習成果與收穫為何?



Edited 1 time(s). Last edit at 03/22/2017 12:04PM by 1045445145.
(編輯記錄)

1.網址:">http://mepopedia.com/~css105-2a/hw01/hw01-1045445067(tongue sticking out smiley)
2.設計概念與製作心得:
主體畫面帶概是以綠色為底,紫色為輔thumbs up
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445187
2.設計概念與製作心得:
真的難炸天 但真的滿有用的 我盡量PASShot smileyhot smileyhot smiley
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445100
2.設計概念與製作心得:可以學到許多HTML和CSS的知識,看到自己做的網頁也十分有成就感。
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445031
2.設計概念與製作心得: 一開始配色問題困擾很久,需要慢慢地調整花了不少時間,最後製作完成看到自己的網頁還蠻滿意的。
3.何謂HTML、DIV及CSS:
HTML,等於是編寫網頁程式碼的架構,可讓標題、圖片、內容呈現出來。
DIV,是網頁內容以及樣式的標籤。
CSS,可將編寫出來的網頁做美編。
4.附上至少一個覺得設計很有質感的網站,並說明原因 https://www.dcard.tw/f
我喜歡比較簡單的網站,既不複雜又容易找到自己想要的版,分類得很清楚~
5.期待這門課的學習成果與收穫為何?
想做出一個完整的網頁,對以後會有幫助,做完網頁也會有很大的成就感thumbs up



Edited 3 time(s). Last edit at 03/26/2017 01:44AM by 1045445031.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445157
2.設計概念與製作心得:以黃藍的鮮明配色引出鬥陣特攻特色
3.何謂HTML、DIV及CSS:HTML負責建構網頁的基本架構、CSS專門負責美化網頁的任務、DIV標籤
4.附上至少一個覺得設計很有質感的網站,並說明原因:https://www.pinterest.com/
因為找圖片很方便,而且版面又乾淨整齊
5.期待這門課的學習成果與收穫為何:不要被當什麼都好ˊ:3

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445130
2.設計概念與製作心得:簡單易懂又實用感覺好像能艘為做出點東西了
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445175
2.設計概念與製作心得:
在做的過程中可以學習到技巧,還可以做自己喜歡的主題,覺得很棒thumbs up
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445178
2.設計概念與製作心得:
因為很喜歡LOL這個遊戲,所以藉由此作業介紹它
喜歡老師的上課方式,講解的也很清楚不會很快,其實反而覺得進度可以再快一點
有作筆記的話都可以跟得上,而且moodle上都有講義看一看都可以理解confused smiley
3.何謂HTML、DIV及CSS:
HTML負責建構網頁的基本架構
DIV特定區塊的標籤,包含段落、標題、表格等
CSS專門負責美化網頁的任務
4.附上至少一個覺得設計很有質感的網站,並說明原因:
http://artbook.na.leagueoflegends.com/en_US/volume-one (LOL設定集網站)
可能是因為放的圖多,所以做的比較簡潔清晰,讓網站看起來不至於太複雜而有質感
喜歡最下面橫條顯示列!
5.期待這門課的學習成果與收穫為何?
自己動手完成一個有水準&超超超讚ㄉ網站smiling bouncing smiley



Edited 5 time(s). Last edit at 03/22/2017 05:53PM by 1045445178.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445181
2.設計概念與製作心得: 比上學期學到更多東西
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445169

2.設計概念與製作心得:
因為很喜歡IMAGE的服飾,
他們的風格都很簡約,
所以用無彩色來做搭配,
製作成黑白簡約風格的網站頁面。
之前覺得網頁很難製作,
總是做得不是很好,
但可能因為操作方式不一樣,
所以這一次做的得心應手很有成就感,
希望之後可以學到更多製作網頁的方法與設計。

3.何謂HTML、DIV及CSS:
HTML:網頁程式碼的架構,讓內容展示出來。
DIV:網頁內容以及樣式的標籤。
CSS:可以為網站做美編。

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.youtube.com/?gl=TW&hl=zh-tw YOUTUBE
這是我最常逛的網站了 無聊時上去總是可以打發很多時間
而且從國中開始一直看著這個網站的進步
雖然有些功能改得不太好用
但一直都管理的很有秩序。

5.期待這門課的學習成果與收穫為何?
希望可以學到關於設計網頁的方法與美編
讓自己可以多一項能力。



Edited 5 time(s). Last edit at 03/29/2017 02:44AM by 1045445169.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445124
2.設計概念與製作心得:學習到更多網頁的應用,做出自己想要的網頁很棒,我這次做的網頁是關於一部感人的動畫節目,真的超好看
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445061

2.設計概念與製作心得:
以迪士尼為主題為設計,然後之後還會多去看看更多的網頁,讓自己做的網頁能更像一個專業的設計smiling smiley

3.何謂HTML、DIV及CSS:
HTML-負責建構網頁基本架構
CSS-專門負責美化網頁
DIV-區塊的意思

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.pinterest.com/我覺得這個網站很有質感的原因是他的整體看起來非常很整齊舒服,而且操作起來也很容易。

5.期待這門課的學習成果與收穫為何?
在這學期的課裡有學到更多關於網頁製作的語法、製作方式。希望自己能熟悉操作運用smiling smiley



Edited 2 time(s). Last edit at 04/19/2017 01:21AM by 1045445061.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445148
2.設計概念與製作心得:
做出自己喜歡事物的網頁
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445196
2.設計概念與製作心得:
設計概念:介紹關於ReLIFE這部日漫
製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?



Edited 1 time(s). Last edit at 03/22/2017 12:05PM by 1045445196.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445136
2.設計概念:這是我自己很喜歡的一個日本搖滾樂團,ONE OK ROCK,歌詞內容不僅有日文還有英文穿插,目前進軍到歐美音樂市場。
製作心得:上學期也學過網頁設計,但這學期除了學習到程式碼的用意變得更加了解其作用,也新學到css讓網頁變得不單只是頁面,具有美感,像是一格真正的網站。謝謝老師smiling smiley
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?



Edited 2 time(s). Last edit at 03/22/2017 12:23PM by 1045445136.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445166

2.設計概念與製作心得:
我是以我最喜歡的線上遊戲為主設計的,包括配色與設計也是採取類似的風格為主。
網頁的設計一開始有點不太難理解,不過懂了代碼的運作以後其實不會太難。只要背起來以後就很簡單

3.何謂HTML、DIV及CSS:
HTML是網頁的基本架構,基礎語法
DIV是針對小型的地方設計使用
CSS是風格設計用的語法

4.附上至少一個覺得設計很有質感的網站,並說明原因 http://www.pixiv.net/
Pixiv是一個提供繪圖創作者自由分享作品的平台。
其中的編排讓我覺得相當簡潔美觀。
使用也相當人性化,能簡單就能找到喜歡的作品


5.期待這門課的學習成果與收穫為何?
能理解各式各樣的網頁是如何做設計與編排的
能做出符合自己美感跟創意的網站



Edited 1 time(s). Last edit at 04/04/2017 06:50PM by 1045445166.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445058
2.設計概念與製作心得:我是以喜歡的團體為主,用他們的專輯的配色配我的網頁。以經過這次的練習真的學到好多,原來做網頁設計並沒有我想像中的困難,以前我很排斥學習網頁,可是沒想到其實滿簡單的,讓我有繼續學下去的動力。
3.何謂HTML、DIV及CSS: HTML:是一種用於建立網頁的標準標示語言,常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面。DIV:可以解釋為區塊,用 DIV 標籤包起來的東西,瀏覽器會視為一個物件,你可以用 div 將網頁內容的各區塊包起來,再去做 CSS 排板,目前所有的主流瀏覽器都支援 DIV 標籤。CSS:是一種樣式表。 它的目的是為了對像XHTML 及HTML 之類的標記語言提供一個顯示層。
4.附上至少一個覺得設計很有質感的網站,並說明原因:http://by-tiny.com/#core-features 它裡面不但乾淨簡單,又很有流動感,把滑鼠放在上面還會有很多特效,看得很賞心悅目。
5.期待這門課的學習成果與收穫為何?因為我對於網頁方面滿弱的,所以希望至少可以做得出來一個看起來還算有質感的網站就好了。



Edited 1 time(s). Last edit at 03/28/2017 11:33PM by 1045445058.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445085
2.設計概念與製作心得:利用鮮豔的配色創作卡通網頁
3.何謂HTML、DIV及CSS: 是一種用於建立網頁的標準標示語言,常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面。DIV:可以解釋為區塊,用 DIV 標籤包起來的東西,瀏覽器會視為一個物件,你可以用 div 將網頁內容的各區塊包起來,再去做 CSS 排板,目前所有的主流瀏覽器都支援 DIV 標籤。CSS:是一種樣式表。 它的目的是為了對像XHTML 及HTML 之類的標記語言提供一個顯示層。
4.附上至少一個覺得設計很有質感的網站,並說明原因:http://www.disney.com.tw/
設計簡潔有力,簡單明瞭,能傳達觀看者想直接看到的
5.期待這門課的學習成果與收穫為何? 能做自己製作一個精美的網頁

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

1.網址: http://mepopedia.com/~css105-2a/hw01/hw01-1045445142/
2.設計概念與製作心得:做出來感到十分滿意,雖然十分單調,但相信能越做越好!!!!自己也越來越愛網頁設計
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?



Edited 1 time(s). Last edit at 04/23/2017 08:25PM by 張志源.
(編輯記錄)

1.網址: http://mepopedia.com/~css105-2a/hw01/hw01-1045445082/
2.設計概念與製作心得:簡單好上手的,做起來十分有成就感,色彩的搭配能改變一個網站的質感。
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?



Edited 1 time(s). Last edit at 04/23/2017 09:14PM by 1045445082.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445218/
2.設計概念與製作心得: 以住宿做此設計概念 做出來還不錯 努力學習
3.何謂HTML、DIV及CSS:
HTML是網頁的基本架構
DIV是針對小型的地方設計使用
CSS是風格設計用的語法
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

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

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

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445199
2.設計概念與製作心得:
以法式檸檬塔食譜來設計網頁架構,來介紹檸檬塔的製作方法與食材。
心得方面: 覺得做網頁是一件有趣的事情。
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何

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

1.網址: http://mepopedia.com/~css105-2a/hw01/hw01-1045445103
2.設計概念與製作心得:
覺得到這個階段都跟得上,感覺目前都不會太難
學會了怎麼換網業的背景顏色及圖片。

3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.ikea.is/
喜歡這種強調現代簡潔設計的網站,但又不失去對顏色飽和度、鮮豔度 。給人一種熱情活潑又潔白沉靜的感覺。

5.期待這門課的學習成果與收穫為何?
聽很多人說網頁設計很重要是未來的趨勢,覺得自己要好好加油。雖然真的覺得蠻有程度的。

1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-1045445028
2.設計概念與製作心得:
設計概念:因為是我喜歡的品牌,剛好我新買的口紅因為電視劇爆紅,所以想介紹它!
製作心得:其實我重做了2次!!第1次快完成結果手殘不知道按到甚麼鍵甚麼都沒了變成
一堆字 我又不知道怎麼辦 只好重做angry smiley~~不過做2次下次會更熟練啦~做完超開心也很有成就感!!!
3.何謂HTML、DIV及CSS:
HTML是編寫網頁程式碼的架構,可讓標題、圖片、內容呈現出來。
DIV是網頁內容以及樣式的標籤。
CSS則是將編寫出來的網頁做美編。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.hotheart.com.tw/
原因:簡單又明瞭!!分類很清楚~設計內容 樣式都跟這個品牌很搭~~~
5.期待這門課的學習成果與收穫為何?
我上學期網頁幾乎都有聽沒有懂,這學期終於比較了解了~謝謝老師
希望我可以設計出更棒的網頁 還有能PASS囉smiling smiley