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

Advanced

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

1. 網頁基礎複習


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

[hr]

2. 課堂範例


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

[hr]

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


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

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

[hr]

4. 作業說明


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

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

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


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

並回覆於此篇文章

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

[hr]
範例:
http://mepopedia.com/~web101-a/hw01/hw01-1006445002/
http://mepopedia.com/~web101-a/hw01/hw01-1006445010/
http://mepopedia.com/forum/read.php?1651,42170


[hr]

5. 上課影音



DIV-HTML-CSS概念說明
http://youtu.be/ob16LUs4SKs



[hr]
作業一說明<利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 >
http://youtu.be/Sg8MoJlEGhY



[hr]
CSS3初探
http://youtu.be/TnaMIVYyf4Y





Edited 5 time(s). Last edit at 03/05/2015 12:17PM by JinJin.
(編輯記錄)

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445062

http://mepopedia.com/~web103-2b/hw01/hw01-1025445062-2
2.設計概念與製作心得:
原本以為很難難難,還好老師教法很像數學加法,所以對這次的作業沒有很恐懼
用咖啡色色調來強調提拉米蘇的感覺
3.何謂HTML、DIV及CSS
html是基本網頁建構 DIV是一個標籤框框 CSS是美化網頁的程式碼
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.chocolate-academy.com/
雖然看不懂語言,卻讓人有想吃她的網頁

5.期待這門課的學習成果與收穫為何?
再度看到程式碼不會感到恐慌,能夠獨立完成簡單的網頁



Edited 1 time(s). Last edit at 03/13/2015 09:24PM by julie1025445062.
(編輯記錄)

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445140
2.設計概念與製作心得:
主題是櫻花的故事所以整體粉紅色來設計整個網站,呈現櫻花粉嫩的感覺
以簡單的色塊來設計網站也可以很有質感
3.何謂HTML、DIV及CSS
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁,自行設定自己的喜好
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://pictopro.com/
很喜歡這個網站首頁上可愛的小圖示 ,雖然圖案很多卻不顯雜亂
5.期待這門課的學習成果與收穫為何?
希望整個課程結束後我可以架設一個完整的網站,並持續學習更深入的網頁設計

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025435233
2.設計概念與製作心得:
剛接觸網頁編輯之前沒學過,對我來說有點困難,但看著老師上課的教學影片自己練習慢慢就熟悉了。
3.何謂HTML、DIV及CSS
html:基本網頁建構 DIV:一個標籤框框 CSS:美化網頁的程式碼
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.gourmettw.com/ 簡單明瞭一下子就找到自己想要搜尋的東西
5.期待這門課的學習成果與收穫為何?
知道怎麼做出屬於自己的網頁

1.網址:http://mepopedia.com/~web103-2b/midterm/midterm-1025445089/
2.設計概念與製作心得:
以服裝時尚品牌 因為我很喜觀她們設計的服裝
3.何謂HTML、DIV及CSS
HTML:網頁架構
DIV:一種以標籤的行式,提供網頁內容與結構等樣式的標籤
CSS :主要增加更多的樣式來輔助 HTML
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.heyshow.com/index.asp 黑秀網
版面很豐富很有設計感,圖片多卻不雜亂,
讓人很清楚想要點的東西在哪邊
5.期待這門課的學習成果與收穫為何?
學會如何做一個好與成功的網頁

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445020
2.設計概念與製作心得:
剛接觸只用語法來編輯網頁,還不是很熟,製作起來需要一些時間
3.何謂HTML、DIV及CSS
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁,自行設定自己的喜好
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.honeybee-cd.com/starrysky/limit/stargift/cafe/index.html
雖然點不進去,不過小小的設計我蠻喜歡的
5.期待這門課的學習成果與收穫為何?
希望可以做出很有質感的網頁~



Edited 1 time(s). Last edit at 03/11/2015 11:00AM by a175012000.
(編輯記錄)

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445083

2.設計概念與製作心得:
是使用綠色及黃色成為背景顏色,因為我很喜歡張懸所以用他的歌詞~~

3.何謂HTML、DIV及CSS
html是基本網頁建構 DIV是一個標籤框框 CSS是美化網頁的程式碼

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://tw-illustrators.blogspot.tw/
此網站簡潔有力而且很活潑,乾淨俐落!!

5.期待這門課的學習成果與收穫為何?
這門課其實沒有想像中的那麼困難,還蠻有趣的,但有時候有點快和複雜要慢慢吸收spinning smiley sticking its tongue outspinning smiley sticking its tongue out
hot smiley

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445170
2.設計概念與製作心得:
以偶像五月天做為發想,簡單介紹它們團體的成員與辛苦歷程,
製作的時候大概沒什麼問題,目前覺得還算還跟得上
3.何謂HTML、DIV及CSS
HTML:網頁架構
DIV:一種以標籤的行式,提供網頁內容與結構等樣式的標籤
CSS :主要增加更多的樣式來輔助 HTML
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.heyshow.com/index.asp 黑秀網
版面很豐富很有設計感,圖片多卻不雜亂,
讓人很清楚想要點的東西在哪邊
5.期待這門課的學習成果與收穫為何?
學會如何做一個好與成功的網頁



Edited 1 time(s). Last edit at 03/11/2015 02:52PM by christy123.
(編輯記錄)

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445029
2.設計概念與製作心得:
目前跟著老師的步調走,因為之前對語法不是很了解,所以希望可以學到更多東西、能善用。
畢竟網頁對我們很重要!!!!

3.何謂HTML、DIV及CSS:
HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務
DIV標籤來建立網頁區塊

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.mydesy.com/
覺得很美。

5.期待這門課的學習成果與收穫為何?
能善用網頁設計在工作上。 spinning smiley sticking its tongue outhot smiley

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445065

2.設計概念與製作心得:
了解到網頁設計的基本概念了!但是還是覺得網頁設計很難!

3.何謂HTML、DIV及CSS:
HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務
DIV標籤來建立網頁區塊

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://princeink.com/
簡單俐落!

5.期待這門課的學習成果與收穫為何?
可以做出一個完整的網頁!!smileys with beer

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445044

2.設計概念與製作心得:
從0開始的網頁,雖然成品很粗糙,但是期待以後學到更進階的功能smiling smiley


3.何謂HTML、DIV及CSS

1.HTML是網頁建立跟網址(或瀏覽器中能看到的資訊)
2.DIV 是區塊,用 DIV 標籤包起來的東西,瀏覽器會視為一個物件,可以用 div 將網頁內容的各區塊包起來,再去做 CSS 排板。
3.CSS

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

設計誌 pinkoi http://www.pinkoi.com/magz
很喜歡有質感的設計小物,在此網站上有許許多多的設計師設計出來的商品販售,也有設計相關的文章,對於學生而言是一個非常好的網站smiling smiley


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

希望可以現在較新的網頁編排方式和看懂語法.....

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445167

2.設計概念與製作心得:
慢慢開始比較懂要怎麼去調網頁顏色

3.何謂HTML、DIV及CSS
html 是一個網站架構
div 是標籤的一種,可以把你做的東西包覆起來
CSS 是美化外觀的版面配置

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://boco.com.tw/
簡單卻又設計感

5.期待這門課的學習成果與收穫為何?
比之前更了解網頁要怎麼去做

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1021025445197
2.設計概念與製作心得: 覺得很難,但必須學習使自己進步,加油。
3.何謂HTML、DIV及CSS
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.kingstone.com.tw/
使用起來輕鬆、方便。
5.期待這門課的學習成果與收穫為何?
網頁設計更加進步

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445080/
2.設計概念與製作心得:
學習到更多關於網頁的知識,也比較了解了簡單的架構,自己操作時慢慢摸索,大概了解了!
3.何謂HTML、DIV及CSS
HTML被用來結構化信息——例如標題、段落和列表
DIV網頁內容與結構等樣式的標籤框樣
CSS是用來輔助html跟div的美化的程式碼

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://taeyeon-union.com/
排版很好看!
5.期待這門課的學習成果與收穫為何?
希望可以學習到更多關於網頁設計的知識,製作出有質感的網站!



Edited 1 time(s). Last edit at 03/11/2015 11:08AM by wenhui06.
(編輯記錄)

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445008

2.設計概念與製作心得:
以老師給的範例為大綱,換上自己喜歡的顏色。

3.何謂HTML、DIV及CSS :
HTML是一種描述文件結構的語法。
DIV為區塊。
CSS 是一種樣式表語言,目的是為了對像 XHTML 及 HTML 之類的標記語提供一個顯示層。

4.附上至少一個覺得設計很有質感的網站,並說明原因 :
http://www.tattooest.com/
以黑白為主色調,簡潔明瞭,看了很舒服。

5.期待這門課的學習成果與收穫為何?
能學會架設好網站。

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1021025445041

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

我做的是元宵節的概念,也剛好元宵節到了,所以就想做這樣的設計


3.何謂HTML、DIV及CSS


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

http://www.glamous.net.tw/
我覺得有種星空的感覺,而且不會太複雜,反而清楚明瞭

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

學習完這門課之後,我可以幫自己和其他公司
設計出好的網頁設計

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445005

2.設計概念與製作心得:
(1)以現代網頁設計趨勢走向參考,滾動式長頁面版型,用單純、較少的配色或頁面開頭使用大文字編排,就能順利的讓畫面乾淨
卻又不失獨自的風格。
(2)偷偷先用了其他CSS設計,雖然花了點時間,但還是作出來了有點開心。

3.何謂HTML、DIV及CSS
HTML / 網頁建立和其它可在網頁瀏覽器中看到的資訊,是設計的一種標示語言。
DIV / 區塊,用 DIV 標籤包起來的東西,瀏覽器會視為一個物件,可用 DIV 將網頁內容的各區塊包起來,再去做 CSS 排板,目前所有的主流瀏覽器都支援 DIV 標籤。
CSS / 為網站添加樣式:字型、間距和顏色等
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://wearetheswan.com/
當下拉時第一個感覺讓我感到很驚艷,會吸引人,這個網站很成功,在第一時間說服觀者,有想要進一步了解他們在做甚麼的動機。

5.期待這門課的學習成果與收穫為何?
想解決在每台電腦上顯示時,字形、版型會跑掉的問題,沒辦法展現自己原始的設計,有點失望。
還有在使用連結字的顏色設計時,想要把兩個連結使用中字的顏色分開,但是多數嘗試都還是連貫在一起的狀況。



Edited 1 time(s). Last edit at 03/11/2015 11:13AM by rosezheng.
(編輯記錄)

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445023

2.設計概念與製作心得: 覺得老師教的方法很簡單容易明白

3.何謂HTML、DIV及CSS
html是基本網頁建構 DIV是一個標籤框框 CSS是美化網頁的程式碼

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://tw.streetvoice.com/
很有質感又很清楚明瞭的網站部會讓你找不到東西

5.期待這門課的學習成果與收穫為何?
能自己做出一個簡單的網頁

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445002

2.設計概念與製作心得:
想說乾脆以自己的心情寫進去,讓網站變成心情日記
顏色喜歡粉嫩亮麗所以就把網站弄成這種配色

3.何謂HTML、DIV及CSS
HTML(HyperText Markup Language)超文件標籤語言是構成網頁的基礎,HTML並不是一個程式,它只是一些插在普通文件內的碼,HTML裡的這些碼可以控制瀏覽器如何將文件顯示出來,HTML提供了各式各樣的標籤(TAcool smiley,網頁中個段落文字或圖案配合著標籤即可構成一份標準的HTML文件。而標籤又為何呢?HTML的標籤必須是成對的,有開始標籤(<>,是由一個小於符號(<)和一個大於符號(>)所構成)及結束標籤(,在開始標籤裡加一個斜線/即可構成結束標籤)。

DIV:一種以標籤的行式,提供網頁內容與結構等樣式的標籤.

CSS:HTML是把用來構成網頁內文的各資料以文字編排的方式標示與構成,而CSS則是負責將編排好的HTML內容以不同形式、外貌透過網頁的格式呈現出來。
網頁的設計者可以使用CSS來決定網頁的顏色、字體、排版等。CSS最主要的目的是將網頁的結構(HTML)與網頁的顯示(CSS)分隔開來。

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://parkinc.jp/
我很喜歡這個網站的配色跟版面,非常大膽也深深吸引人


5.期待這門課的學習成果與收穫為何?
希望自己可以熟悉那有夠複雜的html及css語法
能弄好一個網站

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445131

2.設計概念與製作心得:
製作過程中比之前來做更容易了,可能是之前上課方式不同
所以了解的不夠清楚,這次做真的會做得有成就感

3.何謂HTML、DIV及CSS
HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務
Div標籤來建立網頁區塊

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.wooplanet.com/allgoods.php
其實我比較喜歡插畫風格的網站

5.期待這門課的學習成果與收穫為何?
因為能學會做網頁,對以後得幫助真的很大
多給自己學點不一樣的東西,以後也可以得心應手
在事業上就多一分技能

1.網址:
http://mepopedia.com/~web103-2b/hw01/hw01-1025445017
2.設計概念與製作心得:
自己本身就蠻喜歡NBA的,加上自己的打球方式很像休士頓火箭的詹姆士 哈登
所以想介紹一下他。
3.何謂HTML、DIV及CSS
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁,自行設定自己的喜好
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.mydesy.com/
這網頁還不錯 很多設計都是從裡面衍生更多靈感
5.期待這門課的學習成果與收穫為何?
一開始以為很難 但真正去做就覺得其實蠻簡單的
也對未來幫助有很大的影響。



Edited 3 time(s). Last edit at 03/11/2015 11:40AM by 1025445017.
(編輯記錄)

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445128
2.設計概念與製作心得:
就簡單介紹自己欣賞的藝人
3.何謂HTML、DIV及CSS
HTML:網頁基本架構的語法
DIV:建立網頁區塊
CSS :美化網站的語法
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.illy.com.tw/ illy咖啡
一目了然的咖啡網站,簡潔有互動的設計,且不會太過於複雜,有簡單的動畫讓人覺得會心一笑
5.期待這門課的學習成果與收穫為何?
希望可以真的弄懂網頁的東西,不然真的對網頁感到恐懼跟不熟悉
不過這次的作業一步一步地教,讓網頁就不會那麼可怕,且知道怎麼操作.

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445119

2.設計概念與製作心得:主要色系為綠色,但不是用很重的綠色,主要讓看的人有畫面乾淨的感覺。覺得很有趣,但是網頁還沒辦法完全呈現出自己想表達的感覺,希望能更精進自己做網頁的能力。

3.何謂HTML、DIV及CSS :HTML為架構設定,Div為建立網頁區塊的標籤,CSS為風格設定,

4.附上至少一個覺得設計很有質感的網站,並說明原因:http://www.sodagreen.com/。沒有過多的裝飾在上面,整體一目了然,架構我很喜歡,給人一種很舒服的感覺。

5.期待這門課的學習成果與收穫為何? 覺得做網頁真的很不簡單,希望可以把網頁設計學好。

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445226/

2.設計概念與製作心得:
虽然很简单可是却能了解基本的网页设计~

3.何謂HTML、DIV及CSS
html 是網站架構
div 是標籤的一種,能把你做的東西包覆起來
CSS 是美化外觀的版面配置

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.thesearethings.com/
虽然是可爱和简单的风格~可是却很多的程序

5.期待這門課的學習成果與收穫為何?
希望能学习到更多关于网页设计

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445050

2.設計概念與製作心得:
介紹韓團防彈少年團 因為是嘻哈黑暗風格所以用了很多黑色
雖然剛開始很混亂,但老師教的蠻容易懂的!

3.何謂HTML、DIV及CSS
html是基本網頁建構
DIV是一個網頁區塊
CSS是美化網頁

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.block-b.jp/

5.期待這門課的學習成果與收穫為何?
希望可以建設一個專屬的網頁

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445101
2.設計概念與製作心得:
是以一個活動的傳達做的,想要幫忙宣導。對這個作業一開始接觸真的很模糊,但一直調來調去後有發現大概可以知道他的方向是如何了。
3.何謂HTML、DIV及CSS
HTML:負責建構網頁的基本架構
DIV :用標籤來建立網頁內的區塊
CSS:專門負責美化網頁的任務
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://aikohno.com/
他很有互動性
5.期待這門課的學習成果與收穫為何?
我希望可以學習到做出很有趣的網站

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445014
2.設計概念與製作心得:
我對網頁設定完全不熟悉對它也很陌生,但有附上教學影片可以提醒我上次教學忘記的地方,覺得這樣很好可以在學習一次。
3.何謂HTML、DIV及CSS:
HTML是為「網頁建立和其它可在網頁瀏覽器中看到的資訊」設計的一種標示語言,被用來結構化資訊——例如標題、段落和清單等等,也可用來在一 定程度上描述文件的外觀和語意。
DIV是用來為HTML文檔內大塊的內容提供結構和背景的元素。
CSS是「Cascading Style Sheets」的縮寫,Cascading是串接、連接之意;Style則是風格、款式之意;Sheets則是一頁紙、表的意思。
4.附上至少一個覺得設計很有質感的網站,並說明原因:
http://www.d-grip.com/
我喜歡它乾淨簡單的風格
5.期待這門課的學習成果與收穫為何?
希望以後可以自己做一個自己喜歡的網站

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445134


2.設計概念與製作心得:
可能因為教法不同所以在製作的途中出現很多一頭霧水的狀況發生
不過因為老師的教法有配合影片,所以會讓我想再重複看不會的地方,不斷的學習直到會為止

3.何謂HTML、DIV及CSS
HTML:是「網頁建立和其它可在網頁瀏覽器中看到的資訊」設計的一種標示語言,為架構設定。
DIV:Div標籤是用來建立網頁區塊,區分各個主要頁面做為主要的排版架構。
CSS:CSS為風格設定。

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://d-6th.com/
這是我有在追蹤的漫畫作家的個人網站,作者本身網頁的風格跟作者所繪製的漫畫風格有搭配,個人也很喜歡作者的配色及風格,所以我覺得是個很棒的網站。

5.期待這門課的學習成果與收穫為何?
可以讓我愛上網頁設計,可以自己製作網頁。

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445035
2.設計概念與製作心得:
Trignal是個活潑的團體,所以用藍跟黃的對比色效果來凸顯活潑清晰感。
3.何謂HTML、DIV及CSS
HTML為架構設定,CSS為風格設定,一個建築網頁架構,一個塑造網頁美感。Div標籤可將網頁分欄,讓觀者比較好閱讀。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://psycho-pass.com/ 雖然是用flash設計的但是會動來動去很酷
5.期待這門課的學習成果與收穫為何?
很開心還想多學點語法!!

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445068

2.設計概念與製作心得:
覺得很清楚又很簡單,有真的學到東西,期待之後更進一步的製作

3.何謂HTML、DIV及CSS
HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務
Div標籤來建立網頁區塊

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.wooplanet.com/allgoods.php
以前逛網拍就很喜歡她設計的風格,每個禮拜更新都很期待

5.期待這門課的學習成果與收穫為何?
以前就一直很想學網頁,終於有學到東西了好開心,希望能好好發揮運用在工作上

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445224
2.設計概念與製作心得:有點兒難
3.何謂HTML、DIV及CSS
HTML:網頁基本架構
DIV:建立網頁區塊
CSS:美化網站語法
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.lativ.com.tw/
很簡單乾淨的感覺,看了很舒服。
5.期待這門課的學習成果與收穫為何?
希望能真正學會製作網頁!!!

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445071
2.設計概念與製作心得: 我很喜歡韓劇皮諾丘,因此將這部劇用網站做個簡單的介紹,整體是較簡約的風格,只使用紅色黑色及白色,來表示記者的真實-白色及謊言-黑色。
3.何謂HTML、DIV及CSS
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.mdn.co.jp/di/
雖然不是很看的懂內容,但喜歡配色及編排手法,看起來很順眼。
5.期待這門課的學習成果與收穫為何?
能夠看得懂語法,並且會運用,不要人家再問我會不會做網頁,結果一問三不知。

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445182

2.設計概念與製作心得:
因為剛好在吃軟糖就做了糖果,想表示糖果的多種口味所以用了繽紛的顏色

3.何謂HTML、DIV及CSS
HTML是為「網頁建立和其它可在網頁瀏覽器中看到的資訊」設計的一種標示語言。
DIV是網頁中的框架
CSS是用來美化、設定網頁中的一些細節、特效部分

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://miraipj.benesse.co.jp/future_jobs/
繽紛的用色、會動的小插件,很像玩具屋般頗有童趣
會讓人想每個都點點開,很能吸引目光,非常有特色

5.期待這門課的學習成果與收穫為何?
可以靠自己的力量建構一個具有設計感的網站,
補足有關網頁設計的知識

1025445182

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445092/
2.設計概念與製作心得:主題以RODY商品的歷史為主軸,配色則是使用類似馬卡龍的配色顯現出這樣產品的可愛性質。
我認為網頁設計真的只要了解他們是什麼就能簡單去做出來,然後慢慢再去多做變化,讓畫面更加有趣。
3.何謂HTML、DIV及CSS
HTML:基本網頁的架構
DIV :用一個標籤來製作網頁的區塊
CSS:美化網頁跟自定自己的喜好
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.takeopapershow.com/ 這是今年五月份的展覽,它的網站一開始比較不一樣,往下滑或者按MENU,還蠻想學習這樣的網頁手法,希望以後能學習到,很有原研哉thumbs up的設計味道。
http://www.crmsociety.com/default.aspx這是英國建築師Charles Rennie Mackintosh的一個專門架設他的作品的網站,分隔的區別非常細膩,東西很多,卻不會有複雜感,裡面還有一本店子書非常的有趣。
5.期待這門課的學習成果與收穫為何?
我希望除能學習基本的也能學習到真正做出一個非常有水準的網頁,除了顏色搭配上外對於網頁的技巧,因為我認為網頁不只是單單一門科目而已,而是未來如果走向設計業,必定會再碰到的一項功課。thumbs upsmiling smiley

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445125

2.設計概念與製作心得: 我很喜歡這個樂團,因此將他們用網站做個簡單介紹並且用撞色效果呈現

3.何謂HTML、DIV及CSS
HTML 網頁架構
Div 用標籤來建立網頁內的區塊
CSS 美化並塑造網頁的風格

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.takeopapershow.com/
喜歡他乾淨又很簡約

5.期待這門課的學習成果與收穫為何?
希望靠自己的能力做出比現在更好的網頁

1025445125

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445200

2.設計概念與製作心得:用巧克力色呈現這個牌子的巧克力,覺得語法複雜希望能記熟語法

3.何謂HTML、DIV及CSS
HTML 網頁架構 Div 用標籤來建立網頁內的區塊 CSS 美化並塑造網頁的風格

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.goods-design.com.tw/about/
風格簡單明瞭

5.期待這門課的學習成果與收穫為何?
希望自己能做出完整的網頁設計

1025445200 連怡婷



Edited 2 time(s). Last edit at 03/12/2015 10:08AM by 1025445200.
(編輯記錄)

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445077

2.設計概念與製作心得:用對比色呈現卡通的活潑感,覺得語法複雜

3.何謂HTML、DIV及CSS
HTML 網頁架構 Div 用標籤來建立網頁內的區塊 CSS 美化並塑造網頁的風格

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.nu-pasta.com.tw/main/index.aspx
一進去的首頁很吸引我,也很喜歡裡面的設計

5.期待這門課的學習成果與收穫為何?
希望能學起來老師所教的,能熟悉老師所教的語法

1025445077 儲德君



Edited 2 time(s). Last edit at 03/12/2015 10:11AM by 儲.
(編輯記錄)

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025448040
2.設計概念與製作心得:我是做韓劇-對我而言可愛的她這部連續劇的介紹,
 以粉紅色為整體設計,利用不同的深淺創造層次感。
3.何謂HTML、DIV及CSS
HTML:網頁架構
DIV:一種以標籤的行式,提供網頁內容與結構等樣式的標籤
CSS :主要增加更多的樣式來輔助 HTML
4.附上至少一個覺得設計很有質感的網站,並說明原因
pinkoi  http://www.pinkoi.com/magz
我很喜歡他的排版很舒服乾淨,也有很多很好的設計。
5.期待這門課的學習成果與收穫為何?
學習到如何製作網頁,並且更了解網頁的構造是怎樣的。

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445116/
2.設計概念與製作心得:以藍綠色做配色 是皮革品牌
3.何謂HTML、DIV及CSS
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁,自行設定自己的喜好
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.facebook.com/
是個厲害的網站 創辦人因為他賺很多錢
5.期待這門課的學習成果與收穫為何?
學習到程式碼

1025445056 楊長霖

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445056
2.設計概念與製作心得:
以湛盧咖啡這家咖啡館做網頁練習,整體以棕色調為主,在家製作時還是會有少許不懂地方及困難,但額外請教老師之後就好很多。
3.何謂HTML、DIV及CSS
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁,自行設定自己的喜好
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.mydesy.com/category/creation
很喜歡這個網站首頁的設計作品,網站簡潔時尚又容易欣賞各個設計師的作品
5.期待這門課的學習成果與收穫為何?
希望整個課程結束後能夠將網頁設計運用自如

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445225
2.設計概念與製作心得:
設計概念我先以環保局為主題和內容,顏色運用藍綠色為主,因為想到環保第一個想到的顏色就是綠色,但我覺得只使用綠色的話看上去會有點太亮或太暗,所以我用藍綠色來呈現。
第一次接觸到網頁設計的課程,從剛開始認識一點點基本的程式碼,再慢慢操作製作網頁的軟體當中,光看螢幕中一堆的英文程式碼還真的會看到眼花撩亂,不過在完成一個自己練習的網頁之後,有一種小小的成就感,即使看似很簡單的頁面,卻要花上比預期中還要長的時間才製作完成。
3.何謂HTML、DIV及CSS
HTML 的全名是「超文字連結標示語言」(Hypertext Markup Language)。它所包括的程式碼集(稱為標籤)是用於控制 Web 瀏覽器顯示文件的方式,通常的 Web 瀏覽器有 Netscape Navigator、Communicator 或 Microsoft Internet Explorer。
div的全名和意思是設定文件中的一個需要特別對齊的區段 (division) 。
Cascading Style Sheets(層疊樣式表/串樣式列表),簡寫為CSS,由W3C定義和維護的標準,一種用來為結構化文檔(如HTML文檔或XML應用)添加樣式(字型、間距和顏色等)的電腦語言。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.brandneusense.com/
我很喜歡這個網頁的風格,給人一種很有活力的感覺,比較特別的是旁邊的框框不是直直的感覺很呆版而是用圓組合的概念
5.期待這門課的學習成果與收穫為何?
可以獨立完成製作個人網站以及學到製作網頁的技巧。

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445155/
2.設計概念與製作心得:因為上學期都沒有好好學,所以一開始覺得很難
3.何謂HTML、DIV及CSS
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.chanel.com/#
一進去就看得出質感 流暢度 配色 都很美讓人想學習
5.期待這門課的學習成果與收穫為何?
希望可以自己創造出一個很有質感厲害零缺點的網站!

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445164
2.設計概念與製作心得:
是以法國品牌SAINT LAURENT為概念架設的網站,覺得很多地方都很不熟,真的很想學會,只是用語法學真的要消化還蠻難的,只能趕快背起來
3.何謂HTML、DIV及CSS
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁,自行設定自己的喜好
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://secure.ysl.com/chooseYourCountry.asp?mm=
這是我很喜歡的時尚品牌,覺得很有質感,所以我很喜歡.
5.期待這門課的學習成果與收穫為何?
希望我可以學會至少70%的網站設計,覺得網頁設計對未來很有幫助

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025435227
2.設計概念與製作心得: 簡單的框架就能作出小巧的網頁

3.何謂HTML、DIV及CSS
HTML是網頁基本架構
DIV是利用標籤建立網頁區塊
CSS為美化網頁風格

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.ps-vd.com/web/brand/brand.php
打開的時候內容飛出來超酷的

5.期待這門課的學習成果與收穫為何?
希望能學會更多關於網頁和語法內容

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445143
2.設計概念與製作心得: 讓人有可愛溫暖的感覺,對於製作上有更進一步的了解
3.何謂HTML、DIV及CSS :HTML為基本網頁架構、DIV標籤來建立網頁區塊、CSS美化網頁版面外觀
4.附上至少一個覺得設計很有質感的網站,並說明原因 http://www.square-enix.co.jp/fabula/FF13_Portal/ff13/
我認為這個網頁的配置很特別,有很多特別的小動畫。
5.期待這門課的學習成果與收穫為何? 製作漂亮的網頁

1.網址: http://mepopedia.com/~web103-2b/hw01/hw01-1025445026/
2.設計概念與製作心得:
其實做好一陣子但是還沒傳
以前沒有甚麼概念,現在開始要好好努力了
3.何謂HTML網頁架構、DIV標籤及CSS美化網頁的碼
4.附上至少一個覺得設計很有質感的網站,並說明原因?
GOOGLE首頁
時常更新有不一樣的遊戲或互動式網站
除此之外其他的設計都常簡單看了視覺上舒服也不無聊
5.期待這門課的學習成果與收穫為何?
希望自己腦筋可以更靈活
1025445026 譚思苹

1.網址: http://mepopedia.com/~web103-2b/hw01/hw01-1025445113/
2.設計概念與製作心得:
剛開始覺得很難,但經過老師反覆的講解似乎有點能夠理解 。
而我的設計主題是披頭四,以黑白灰的風格呈現 。
3.何謂HTML、DIV及CSS :
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁,自行設定自己的喜好
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://holoshirts.com/
喜歡簡單、乾淨的的感覺
5.期待這門課的學習成果與收穫為何?
希望可以將學習的東西建設出專屬自己的網站

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445086

2.設計概念與製作心得:
以記錄你的每一天封面為底,主要以活潑的色彩作表現

3.何謂HTML、DIV及CSS
html是基本網頁建構 DIV是一個標籤框框 CSS是美化網頁的程式碼

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.grandpas-photos.com/
這個網站的色調很吸引我

5.期待這門課的學習成果與收穫為何?
我很開心自已也可以架設出一個業面,覺得是好的開始

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445107
2.設計概念與製作心得:
以前覺得做網頁設計是件很難的事,
後來上過課後比較能理解也能做出成品,
不過還是有些障礙,但能做出自己想要的
網站還是一件很開心的事。
3.何謂HTML、DIV及CSS :
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁,自行設定自己的喜好
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.nike.com/tw/zh_tw/
簡單,乾淨,俐落。
5.期待這門課的學習成果與收穫為何?
期望在這門課中能夠大有收穫,將來哪一天也能
成為這項領域的強手。

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1025445176
2.設計概念與製作心得:
主題是提拉米蘇 所以整體咖啡色來做設計,呈現提拉米蘇的感覺
以簡單的色塊來設計網站質感
3.何謂HTML、DIV及CSS
HTML: 網頁架構
DIV :用標籤來建立網頁內的區塊
CSS:美化網頁,自行設定自己的喜好
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.uniqlo.com/tw/zh
分類的很有規劃 常逛也不覺得眼花撩亂
5.期待這門課的學習成果與收穫為何?
學習以前不同的領域的東西

(1)作業網址:http://mepopedia.com/~web103-2b/midterm/midterm-1025445089/
2.設計概念與製作心得:
因為我很喜歡這個服飾品牌
3.何謂HTML、DIV及CSS
HTML:網頁架構
DIV:一種以標籤的行式,提供網頁內容與結構等樣式的標籤
CSS :主要增加更多的樣式來輔助 HTML
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.heyshow.com/index.asp 黑秀網
版面很豐富很有設計感,圖片多卻不雜亂,
讓人很清楚想要點的東西在哪邊
5.期待這門課的學習成果與收穫為何?
學會如何做一個好與成功的網頁

1.網址:http://mepopedia.com/~web103-2b/hw01/hw01-1015445250

2.設計概念與製作心得:
沒太大問題


3.何謂HTML、DIV及CSS

1.HTML是網頁建立跟網址(或瀏覽器中能看到的資訊)
2.DIV 是區塊,用 DIV 標籤包起來的東西,瀏覽器會視為一個物件,可以用 div 將網頁內容的各區塊包起來,再去做 CSS 排板。
3.CSS


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

希望可以現在較新的網頁編排方式和看懂語法.....



Edited 2 time(s). Last edit at 07/05/2015 04:57PM by sena5555.
(編輯記錄)

Attachments:
開啟 | 下載 - Untitled-1.html (3.2 KB)
開啟 | 下載 - style.css (1.7 KB)