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

Advanced

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

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

1. 網頁基礎複習


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

[hr]

2. 盒子模型/區塊模型(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]

3. 作業說明


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

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

直接將語法撰寫於http://codepen.io/pen
並將之儲存

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

並回覆於此篇文章

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

[hr]
範例:
http://mepopedia.com/~web101-a/hw01/hw01-1006445002/
http://mepopedia.com/~web101-a/hw01/hw01-1006445010/



Edited 6 time(s). Last edit at 02/25/2014 01:44PM by JinJin.
(編輯記錄)

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445006/
2.設計概念與製作心得:我很喜歡繽紛的感覺,所以,我把整個網站都設計成好繽紛,讓大家會很想進去的感覺
第一次用語法寫程式,真的特別有趣,雖然一開始覺得好多語法好難喔~~~~都要被起來~~
但是 自己沒想到也可以用語法做自己的網頁,真的是好開心~~~~
而且還是做Bii 真是太開心了~~~~
3.何謂HTML、DIV及CSS
上了這門課才懂得甚麼是HTML DIV CSS
HTML就是在處理整個網頁的架構
DIV就是在是一個大盒子把裡面的東西所包起來
CSS就是在補足HTML所無法用的美感 CSS可以創造出網頁非常美的感覺
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.put-in.com.tw/web/design.html
蒲公英網站
我覺得這個網站超有那種full的感覺,他的下拉選單是跟別人都不一樣的那種感覺耶~~~~
點進去都有不同的編排方式
下拉選單還會有聲音 哈哈哈哈
就覺得好特別喔
而且一點進去 logo還會動耶 相信別的網頁一定沒有這功能 超酷的
5.期待這門課的學習成果與收穫為何?
希望我學期可以學到好多網頁設計的基本知識,讓我學到非常多
也希望老師可以交多點網頁設計的東西 可以讓我學到更多喔 ~~~~



Edited 1 time(s). Last edit at 02/26/2014 08:56PM by 蘭雅涵.
(編輯記錄)

1.網址:[url=http://mepopedia.com/~web102-a/hw01/HW01-1015445001/]http://mepopedia.com/~web102-a/hw01/HW01-1015445001/[/url]
2.設計概念與製作心得:還不錯,親自用鍵盤打和直接在DW上排版做出來很不一樣,有了最基本的認知

3.何謂HTML、DIV及CSS :
HTML是架構設定,將最基本的東西架好
Div標籤來建立網頁區塊,區別頭中腳的排板架構吧~
CSS是風格設定,可以讓網頁變美變有設計感的東西~

4.附上至少一個覺得設計很有質感的網站,並說明原因
(1)[url=http://tympanus.net/codrops/collective/]http://tympanus.net/codrops/collective/[/url]
進去後可以隨便找個圖點進去就有了
這是一個可以下載網站上圖示、小工具及小功能教學的地方,我覺得很棒,設計的也還不錯可以參考~
[url=https://www.facebook.com/DownloadPSD?ref=profile]https://www.facebook.com/DownloadPSD?ref=profile[/url]
這是它的fb,裡面也有介紹一些設計不錯的網站,可以去看看~
(2)[url=https://www.facebook.com/DownloadPSD?ref=profile]http://www.cssdesignawards.com/website-gallery.php?gallery=n[/url]
全都英文...但是還是可以看網站的喔

5.期待這門課的學習成果與收穫為何?
能學到更多不同功能讓網站更豐富的資訊

1015445001

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445008

2.設計概念與製作心得
自己動手做還蠻好玩的

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


4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.life8.com.tw/Shop/
簡潔有力的排版,看了很舒服

5.期待這門課的學習成果與收穫為何?
希望可以熟記語法並能靈活運用

1015445008

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445044/
2.設計概念與製作心得:想介紹或推廣一些網路的最新資訊,貼近我們生活且息息相關的問題或議題,製作剛開始有點頭昏眼花,畢竟跟一年級學得不太一樣!
3.何謂HTML、DIV及CSS
講義上有寫~
Div標籤來建立網頁區塊
HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://flipermag.com/category/art/
簡單俐落的線條,主題內文都在正中間,易讀且明顯,整體就是簡單卻又不會太單調!
5.期待這門課的學習成果與收穫為何?
希望可以學到更多的東西,並能自己架設一個屬於自己的網站!



Edited 1 time(s). Last edit at 03/04/2014 02:51PM by 1015445044.
(編輯記錄)

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445266/ 
2.設計概念與製作心得:使用最近陳柏霖在雜誌上分享的工作及愛情經驗,應用在老師所教的網頁程式上,顏色使用較明亮、陽光。再次的複習網頁程式,使印象更深刻,而親自寫程式做出的網頁,更別有一番風味!
3.何謂HTML、DIV及CSS
HTML架構設定,基本物件的排列
DIV建構網頁基本架構,區分上中下區塊
CSS風格設定,美畫整體網頁畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因 
http://www.stony-image.com/
古代風格搭配山水感音樂,以及隱藏連結網址,滑鼠滑過有不同驚喜。
5.期待這門課的學習成果與收穫為何? 
學習更多網頁技能 能完整做出網站

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445050/
2.設計概念與製作心得:
直接打程式真的有些不習慣,很多名詞也都忘了,但多點經驗和學習也是好的。
3.何謂HTML、DIV及CSS
HTML是負責建構網頁的基本架構,框架要架好才能接下去的動作。
DIV是標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構。
CSS是美化網頁,讓網頁看起來更精緻。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.agencyten.com/#/milestones
覺得很有質感不管是照片還是設計的東西都很出色,下面的解說是利用類似收音機調頻道這種模式很特別也沒看過。
5.期待這門課的學習成果與收穫為何?
以簡單的框架就可以設計出方便瀏覽的網頁,讓人點進去不會馬上按關閉反而有興趣的網站。

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445031

2.設計概念與製作心得:感覺學會了這方面的技能對未來就業會很有幫助

3.何謂HTML、DIV及CSS :HTML負責建構網頁的基本架構 CSS專門負責美化網頁的任務 DIV建構網頁基本架構,區分上中下區塊 .

4.附上至少一個覺得設計很有質感的網站,並說明原因 :http://www.pazzo.com.tw/Shop/ 網站的配色及圖片很有質感,連結雖多但不會感覺凌亂且非常方便.

5.期待這門課的學習成果與收穫為何? 能活用並充分了解網頁設計相關知識

1015445031

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445045/

2.設計概念與製作心得:
概念:是一個憂鬱路線
心得:比大一更清楚DIV的意思和用法

3.何謂HTML、DIV及CSS
就是網站架構和美觀的程式,DIV是標籤

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

5.期待這門課的學習成果與收穫為何?
至少學會基本的架構,希望有朝一日能做出有質感的網站

1.網址: http://mepopedia.com/~web102-a/hw01/HW01-1015445023/
2.設計概念與製作心得:
又碰到css跟html這種方式做網站,實在很頭痛,但是發現這是以後的趨勢所以不得不去學。
3.何謂HTML、DIV及CSS
HTML是整個網站的骨架
Div是區別網站的個個架構跟區域。
CSS就像一個網站的衣服一樣,美化它。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.mydesy.com/
其實原本這個網站就時常在逛了,從最初的網站模樣並不是這樣的,反而是非常亂的
但是自從去年過年開始翻修,慢慢的修整成平面化,在添加了css的效果上去之後,區別的就非常的乾淨了
分類也十分清楚,網站更新速度很快。
5.期待這門課的學習成果與收穫為何?
我只期待自己可以把基本功跟網站的基本架構學起來。

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445009/
2.設計概念與製作心得:
一開始覺得要記一堆語法好麻煩哈哈~在仔細讀過講義之後,在製作網頁上也更能得心應手。
3.何謂HTML、DIV及CSS
HTML是負責建構網頁的基本架構,框架要架好才能接下去的動作。
DIV是標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構。
CSS是美化網頁,讓網頁看起來更精緻。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://mepopedia.com/group/vd/
美寶論壇這個網站我覺得真的太棒了!在編排上也讓人一目瞭然,讓我受益良多
5.期待這門課的學習成果與收穫為何?
以簡單的方式去製作原本覺得複雜的網站。

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445051
2.設計概念與製作心得:
慢慢開始對css有概念了,也覺得很有趣。
3.何謂HTML、DIV及CSS
HTML是負責建構網頁的基本架構,框架要架好才能接下去的動作。
DIV是標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構。
CSS是美化網頁,讓網頁看起來更精緻。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://oliverrussell.com/
極簡風格加上順眼的配色。
5.期待這門課的學習成果與收穫為何?
希望能夠對網頁設計得心應手

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445024/

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

設計凝摹lenovo官方網站的配色,以純色調做大概的表現
製作心得部份主要在於編寫語法上全部都用手寫

3.何謂HTML、DIV及CSS
HTML為網站的架構
Div是區分網站與個架構段落區域
CSS具備美化、特效、動態等效果,裝飾性與修邊

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

http://codepen.io/

說明:有什麼能夠比認同自己做的東西還要重要

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

希望能夠學以致用,多方運用



Edited 2 time(s). Last edit at 03/04/2014 12:06AM by lin yi.
(編輯記錄)

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445018/
2.設計概念與製作心得:
dreamweaver是使用圖像製作網站慢慢的把轉為語法
而codepen是反向用語法配合css把網站一列列的排出來
3.何謂HTML、DIV及CSS
HTML架構基本物件的排列
DIV建構網頁基本架構,區分上中下
CSS美化網頁畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.muji.net/
無印良品的色調一直是大地色與白色調和,而網站的簡潔的使用了同款配色
網站中除了必要的色塊,其他全都留白,只用線段區分,加強了注目度
每個功能都清楚明瞭,黑體字有注目度但不搶主題
5.期待這門課的學習成果與收穫為何?
學習使用語法架構網站

1.網址: http://mepopedia.com/~web102-a/hw01/HW01-1015445012/
2.設計概念與製作心得:
一開始有點似懂非懂,很多時候自己粗線條弄錯了還找很久才發現錯誤,果然要親手做做看才能明白。
3.何謂HTML、DIV及CSS
HTML=網頁的骨頭
DIV=標籤內容與結構樣式
CSS=網頁的衣服
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.colingrist.com/
整齊的版面不帶壓力的感覺
5.期待這門課的學習成果與收穫為何?
希望自己學到的能牢牢記住不要忘了。

1015445012

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445053
2.設計概念與製作心得:
以前覺得用語法寫網頁是一件很困難而且討人厭的事,不過做了 後發
現似乎也沒有想像中的那麼討人厭,覺得還挺有趣的。
3.何謂HTML、DIV及CSS
HTML = 網頁的基本架構。
CSS = 美化網頁的語法,可以讓網頁看起來更賞心悅目。
DIV = 區分網頁架構的區塊
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.y-3.com/tw/#/
簡單明瞭的設計,讓人可以迅速地找到自己想要的商品
5.期待這門課的學習成果與收穫為何?
能夠獨自架設出一個基本能看的網頁。

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445027/
2.設計概念與製作心得: 很喜歡這種簡單色塊的東西,所以也用了自己喜歡的配色,去搭配出整個網頁的樣式
雖然第一次接觸這個作業,也感覺未來好像很難,但還是很開心能夠學到新的東西,
3.何謂HTML、DIV及CS
HTML架構和基本物件的排列
DIV建構網頁基本架構區分頭中間下面區塊
CSS風格設定顏色與美觀設計整體網頁畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://shop.mango.com/TW/mango
喜歡這些國際品牌網站架構的簡單感
簡單但卻有設計感
5.期待這門課的學習成果與收穫為何?
希望能夠更熟悉寫語法這些東西,雖然現在還非常不熟悉,
但希望能夠有所學習到新東西

1.網址:[url=http://mepopedia.com/~web102-a/hw01/HW01-1015445030/]http://mepopedia.com/~web102-a/hw01/HW01-1015445030/[/url]
2.設計概念與製作心得:
了解過程中使用的HTML和CSS語言的意思,並改變數值
做完後更了解HTML和CSS
3.何謂HTML、DIV及CSS
HTML是告訴網頁如何顯示內容的語言;DIV是HTML的標籤,被標記的內容會被視為區塊物件;CSS是告訴網頁如何顯示外觀的語言
4.附上至少一個覺得設計很有質感的網站,並說明原因
[url=http://mobyfrancke.com/]http://mobyfrancke.com/[/url]
簡潔的設計很有質感
5.期待這門課的學習成果與收穫為何?
了解網頁設計的基本知識



Edited 1 time(s). Last edit at 03/04/2014 01:45AM by 1015445030陳族維.
(編輯記錄)

1.網址:[url=http://mepopedia.com/~web102-a/hw01/hw01-1015445020/]http://mepopedia.com/~web102-a/hw01/hw01-1015445020/[/url]
2.設計概念與製作心得:
我很喜歡樂高所以製作了相關主題的網頁,還滿有趣的。
3.何謂HTML、DIV及CSS
HTML是網站的架構。
Div是區分網站與個架構段落區域 。
CSS是美化裝飾性等效果。
4.附上至少一個覺得設計很有質感的網站,並說明原因
[url=http://www.lego.com/en-us/]http://www.lego.com/en-us/[/url]
喜歡它豐富有趣的設計 。
5.期待這門課的學習成果與收穫為何?
希望能夠學習到更多專業知是使自己的能力有所提升。

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445039/

2.設計概念與製作心得:
因為下面歌詞句子都比較短,怕看起來太空,所以版面寬度設成700左右,比較有狹長集中的感覺。
自己寫比起DW麻煩了一點,但是在排語法的時候自己寫反而比DW好控制,而且知道現在要改的地方是哪裡。

3.何謂HTML、DIV及CSS
HTML 資料
DIV 架構
CSS 美化

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://fixedagency.com/
色彩繽紛還會搭配一些小動畫,讓人感到有興趣,
不會還不知道這個網站在做什麼就直接就關掉他。
http://weather.json.tw/#hsinchu_country
簡單 清楚 明瞭

5.期待這門課的學習成果與收穫為何?
至少能學到配合動畫的網頁程度



Edited 2 time(s). Last edit at 03/08/2014 09:12PM by 金桔.
(編輯記錄)

[color=#FF9900][size=medium]1.網址:[/size][/color][size=small]
http://mepopedia.com/~web102-a/hw01/HW01-1015445046/[/size]

[color=#FF9900][size=medium]2.設計概念與製作心得:[/size][/color]
[size=small]利用偏向卡通化的配色,切合主題,利用粗黑線使視覺更集中
製作過程中對於HTML與CSS之間的關係和語法上的邏輯更加清楚
雖然簡單的規格,卻也可以更容易瞭解基本架構 [/size]

[color=#FF9900][size=medium]3.何謂HTML、DIV及CSS [/size][/color]
[size=small]HTML 就像一件衣服的板模(骨架)
DIV 就像衣服的標籤(S M L XL..) 也像建構衣服的區塊(規劃加工位置)
CSS 就像衣服上的裝飾與布料[/size]

[color=#FF9900][size=medium]4.附上至少一個覺得設計很有質感的網站,並說明原因 [/size][/color][size=small]
http://rallyinteractive.com/contact/
http://www.black-meridian.com/
有別於較規格化的排版,用很特別的方式呈現網頁,
令人印象深刻[/size]

[color=#FF9900][size=medium]5.期待這門課的學習成果與收穫為何? [/size][/color]
[size=small]希望自己比一年級更了解網頁整體架構,並可以融會運用[/size]

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445004/

2.設計概念與製作心得:
概念:我走的比較亮色系
心得:比大一更清楚DIV的意思和用法,操作上也略懂略懂。

3.何謂HTML、DIV及CSS
就是網站架構和美觀的程式,DIV是標籤

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

5.期待這門課的學習成果與收穫為何?
發現了語法的重要性,還有希望能設計出有質感的網站,或者能與使用者互動的網站。

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445054/

2.設計概念與製作心得:
我終於比較知道語法這種東西,而且還比較會背了,好開心喔~~

希望以簡單又大方的方式呈現


3.何謂HTML、DIV及CSS
HTML為網站的架構
Div是區分網站與個架構段落區域
CSS具備美化、特效、動態等效果,裝飾性與修邊

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

http://www.redalien.com.tw/webc/html/animation/index.php
很可愛又有設計感~~~



說明:

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

以後可以真正的接案子

1.網址:
http://mepopedia.com/~web102-a/hw01/hw01-1015445043/

2.設計概念與製作心得:
利用粉紅色做配色

3.何謂HTML、DIV及CSS
HTML是網頁
DIV 是標籤
CSS 是裝飾

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.gseven.com.tw/19event/
有質感又可愛還有QQ小動作

5.期待這門課的學習成果與收穫為何?
.可以對網頁不在是陌生的感覺

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1005445225
2.設計概念與製作心得:
第一次接觸語法 很新鮮 還不賴
3.何謂HTML、DIV及CSS
HTML就是在處理整個網頁的架構
DIV就是在是一個大盒子把裡面的東西所包起來
CSS就是在補足HTML所無法用的美感 CSS可以創造出網頁非常美的感覺
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://store.apple.com/tw?afid=p219%7COVTW&cid=AOS-TW-KWY
APPLE的網頁就是讓人 簡約 附有質感的一個網站
5.期待這門課的學習成果與收穫為何?
盡量把老師所教的都吸收起來

1.網址: http://mepopedia.com/~web102-a/hw01/HW01-1015445056/
2.設計概念與製作心得:
此次我們面臨到了一直聞風喪膽的CSS語法,但真正接觸後其實只要熟悉了,應就可以得心應手。
3.何謂HTML、DIV及CSS
HTML是建構整體網架的骨幹,也是主要的順序編排。
Div標籤出區塊,讓整體骨架是有層次之分。
CSS則是運用字體大小以及色彩運用以及各項行距以及視覺上的編排。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.gamer.com.tw/
一直以來,都是提供於台灣最新遊戲娛樂資訊的網站,版面雖不是最好卻是一覽全目。
對於提供資訊以及新聞的網頁使人可以在第一時間得知所有資訊,來講是值得學習的。
5.期待這門課的學習成果與收穫為何?
期望能將基礎打穩,可以盡可能懂得更多知識以及相關訊息。

1.網址:http://mepopedia.com/~web102-a/hw01/wh01-1015445038/

2.設計概念與製作心得
喜歡用簡單的色塊與線條來搭配整個網站的畫面
第一次使用寫語法的方式而不是像以前使用DW的方式去架設網頁
兩者都很複雜但現在寫語法的方式很方便
就難在那些語法有些複雜
但似乎了解了就比較容易上手

3.何謂HTML、DIV及CS
HTML:基本物件的排列與架構
DIV:建構網頁基本的架構區分
CSS:顏色與美觀設計和整體網頁畫面的風格

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://idnworld.com/
國外的設計雜誌網站 架構配色都很簡單閱讀清爽

5.期待這門課的學習成果與收穫為何?
期待自己可以更熟悉這些語法,雖然很複雜但希望學習到更多有用的語法
來架構屬於自己風格的設計網站

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445059/

2.設計概念與製作心得:
版面色調我是以酒紅為主色,營造神秘的效果,其餘色塊則是以類似色作區別,產生不同的漸層變化。
自己將語法一一打出和複製貼上這動作相比之下,第一種讓我學到的東西比較多,實際操作下也很有成就感。

3.何謂HTML、DIV及CSS:
HTML:被用來結構化信息。例如標題、段落和列表等等,也可用來在一定程度上描述文檔的外觀和語義。
DIV:一種以標籤的行式,提供網頁內容與結構等樣式的標籤。
CSS:是美化網頁,讓網頁看起來更精緻。

4.附上至少一個覺得設計很有質感的網站,並說明原因:
(1)http://www.goods-design.com.tw/
背景雖然為黑色,卻能明顯襯托出主要的商品,色彩配色很和諧,不會有衝突感。
(2)http://www.gas-caliente.com/
一點進去有小小的動畫,給人舒服、安心的感覺,版面簡潔,但卻能達到很好的效果。

5.期待這門課的學習成果與收穫為何?
希望能學到如何去設計出一個有質感的網頁及其他網頁技能、語法。

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445035/

2.設計概念與製作心得:
概念以藍色系為配色~
製作心得~指令什麼的很難搞...打錯就不行...還是用DW比較方便,只是基本的還是要懂。
所以花了一點時間研究。

3.何謂HTML、DIV及CSS
HTML10是一種靜態網頁,主要是架構網站。

Div是區分網站與個架構段落區域

CSS具備美化、特效、動態等效果,裝飾性與修邊

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

http://www.mixd.co.uk/about/ ↓
沒有很多酷炫的效果,可是整體很吸引人注目。

http://pocarisweat.jp/ ↓
寶礦力的日本官網,顏色很舒服,水的動畫效果讓人覺得很動感(?)

http://www.ajinomoto.co.jp/aji/egg/generator2/ ↓
超酷的麵網站...可用滑鼠和鍵盤上下左右移動,點進去就會像吸進去那樣~


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

學習到可以在未來工作上,成為賺錢的工具~~





老師我有交~~~



Edited 1 time(s). Last edit at 03/04/2014 06:26PM by 1015445035.
(編輯記錄)

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445055

2.設計概念與製作心得:
好久沒做網頁了,總覺得老師教的明明很清楚可是對於一些標籤、程式碼、div、順序之類的啦里啦雜的我還是有點懵懵懂懂的,
不過我覺得學到的比以前更深入一些,而且有了codepen這個網站,今後都可以自己練習很棒又很方便,可以讓我更熟悉打網頁程式碼,希望做的比現在這個更好,配色更漂亮做出更有質感的網站。

3.何謂HTML、DIV及CSS
html是網頁的本體吧其中就包含了div跟css,而div應該是構成一個網頁的架構...零件的感覺,css是網頁的美術設計的部分唄,讓你的網站更吸引人的。

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.minervaproject.com/
顏色很清爽乾淨,喜歡這種分割很俐落的感覺,裡面的攝影照片都很美很有情境。

5.期待這門課的學習成果與收穫為何?
希望我能做出一個完整的網站出來。

1015445055

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445022/
2.設計概念與製作心得:
真的很排斥網頁,語法都像咒語,不過實際作業到完成,成就感很大,也很欣慰,感覺對網頁有一分信心了。
3.何謂HTML、DIV及CSS
HTML是負責建構網頁的基本架構,框架要架好才能接下去的動作。
DIV是標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構。
CSS是美化網頁,讓網頁看起來更精緻。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.justeleanor.com/
喜歡色塊,也喜歡簡潔有力的排版,一目了然,不複雜不囉嗦。
5.期待這門課的學習成果與收穫為何?
能真正喜歡上網頁,並活用它,成為生命中的一部分。

1.網址: http://mepopedia.com/~web102-a/hw01/HW01-1015445014/
2.設計概念與製作心得:
和Dreamweav比起來用語法做網頁比較麻煩,而且語法很複雜有點難記
不過現在能夠看懂一些了
3.何謂HTML、DIV及CSS
HTML是網頁的基本架構
Div是區分網頁架構
CSS是美化網頁
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.pazzo.com.tw/Shop/
簡單乾淨,很有質感
5.期待這門課的學習成果與收穫為何?
能夠熟悉網頁語法以及運用

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445048/

2.設計概念與製作心得
想要做出有質感的網頁真的很不容易,要會配色、排版,每一個步驟都是門學問。

3.何謂HTML、DIV及CS
HTML物件的排列、架構
DIV使用標籤來建立網頁區塊
CSS設計和整體網頁畫面

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.philbrown.bc.ca/
雖然網頁要開比較久,進去後發現是手繪的風格,但背景卻又是真實的攝影,跟很多網站都不太一樣很特別。

5.期待這門課的學習成果與收穫為何?
能多方面學習,不單單只是電繪,排版設計風格都很重要。

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445034
2.設計概念與製作心得:
目前學這些網頁的語法,一開始學真的還蠻複雜的,
英文要好 不然要去記那些東西真的蠻累得
3.何謂HTML、DIV及CSS
HTML就是所謂的架構就
DIV就是容器一層一層的包覆著
CSS就是美化及特效相關語法
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.eggshell.com.tw/
http://www.nikon.com/
簡單明瞭 乾乾淨淨
5.期待這門課的學習成果與收穫為何?
成為可以在網路上接網頁設計的案子

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445002/

2.設計概念與製作心得:重拾了網頁設計的印象,但是有很多不懂的地方,希望能學到更多。

3.何謂HTML、DIV及CSS:
HTML-編寫網路的基本語言
DIV-標籤
CSS-美化網頁


4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.colingrist.com/
版面簡單清晰。

5.期待這門課的學習成果與收穫為何?
能自己架設出自己風格的完整網頁

1.網址:
http://mepopedia.com/~web102-a/hw01/HW01-1015445060/

2.設計概念與製作心得:
利用同色系來表現統一感,在這門課程前就已對網頁設計不陌生,
學程上一直都有安排網也設計業師演講、教學,讓我製作起來比
其他同學略懂一點,網頁設計真的是要深入學習的課程。

3.何謂HTML、DIV及CSS

HTML-基本的網頁架構
DIV-分類網頁的主題、頭、中、尾,甚至其他細部分類
CSS-美化網頁的各種樣式

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.yale.edu/
用色乾淨、簡單明瞭。

5.期待這門課的學習成果與收穫為何?
期待這門課能讓我更深入的學習網頁設計,
至少可以設計出基本架構的網頁。
希望老師可以利用更淺顯易懂的方式教學。

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445010/
2.設計概念與製作心得:
雖然這堂課在一年級已經教過 但是老師教的卻很不一樣 所以做起來也有不同的感受
3.何謂HTML、DIV及CSS
HTML架構基本物件的排列
DIV建構網頁基本架構,區分上中下
CSS美化網頁畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.lativ.com.tw/
簡單明瞭乾淨 又可以很快速找到自己想要的商品
5.期待這門課的學習成果與收穫為何?
希望可以更加熟悉瞭解網頁架構

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445267/
2.設計概念與製作心得:
用肉醬麵的顏色,營造出輕鬆愉悅的感覺.網頁其實比想像中的簡單,只是要背一些東西
3.何謂HTML、DIV及CSS :
HTML-架構,DIV-分類,CSS-美化
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://happy-photo-studio.jp/ 樸實的顏色,讓重要的主題可以凸顯出來,手繪風格增添質感
5.期待這門課的學習成果與收穫為何?
訓練排版跟顏色美感,不用翻書也能做出理想的網頁

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445015/
2.設計概念與製作心得:
主要用黃橘色來做整體,因為宮崎駿很多作品都帶給人們歡樂的氣氛,語法要好好練
3.何謂HTML、DIV及CSS :
HTML是基本架構,DIV用來區分分類,CSS是美化效果的
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://explore.calvinklein.com/en_US/explore 看起來就很有質感,編排很特別,強烈的雜誌風
5.期待這門課的學習成果與收穫為何?
加強語法和編排因為實在有點難,做出成品後覺得很有成就感

1015445015姜佳妤

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445007/01.html
2.設計概念與製作心得:這次作品都是用咖啡色系來製作,讓全部都有一種整體感,實際做起來也很簡單
3.何謂HTML、DIV及CSS
HTML就是平常大家開啟的網頁
DIV用來建立網頁的塊面
CSS是讓網頁更有架構、跟改顏色、文字等等的
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?
讓我重新複習了許多東西,也讓我了解到其實只要知道一些語法,就可以寫出一個完整的網站

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445025/
2.設計概念與製作心得: 剛出沒多久的samsung產品s5,介紹給大家認識
3.何謂HTML、DIV及CSS
HTML是架構設定
Div標籤來建立網頁區塊
CSS是風格設定
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.colingrist.com/
簡單明瞭,配色也很單純不複雜
5.期待這門課的學習成果與收穫為何?
太久沒有碰都會忘記,希望能好好加油

老師~我的作業1有交~~在上面~
我重貼一次~
-------------------------------------------------------------------------------------------
1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445035/

2.設計概念與製作心得:
概念以藍色系為配色~
製作心得~指令什麼的很難搞...打錯就不行...還是用DW比較方便,只是基本的還是要懂。
所以花了一點時間研究。

3.何謂HTML、DIV及CSS
HTML10是一種靜態網頁,主要是架構網站。

Div是區分網站與個架構段落區域

CSS具備美化、特效、動態等效果,裝飾性與修邊

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

http://www.mixd.co.uk/about/ ↓
沒有很多酷炫的效果,可是整體很吸引人注目。

http://pocarisweat.jp/ ↓
寶礦力的日本官網,顏色很舒服,水的動畫效果讓人覺得很動感(?)

http://www.ajinomoto.co.jp/aji/egg/generator2/ ↓
超酷的麵網站...可用滑鼠和鍵盤上下左右移動,點進去就會像吸進去那樣~


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

學習到可以在未來工作上,成為賺錢的工具~~

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445019

2.設計概念與製作心得
很有趣

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


4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.mettaskincare.com/
簡潔的排版

5.期待這門課的學習成果與收穫為何?
希望可以熟記語法

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445016/
2.設計概念與製作心得:介紹葡萄牙足球員C羅,搭配紅黃色彩表現足球熱血沸騰的感覺
3.何謂HTML、DIV及CSS
HTML是整個網站的支架
DIV標籤來建立網頁架構區塊
CSS是可以增加美編功能或是一些效果
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.addiction.com.tw/
這是知名日式料理上引水產的官方網站,將圖片作為底部讓人可以拉下瀏覽,讓人看了一目了然,文字編排也十分有質感。知名餐廳不但菜色好吃,網頁設計的也相當有質感非常加分!
5.期待這門課的學習成果與收穫為何?
這學期學到很多關於網頁的製作,雖然有些還是有聽沒有懂,但是會盡量摸透,不懂的地方也要麻煩老師指導,希望我們的網頁設計能夠越來越進步,一次比一次做得還成功。

1015445016楊佩軒

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445063
2.設計概念與製作心得:
雖然這堂課在一年級已經教過 但是老師教的卻很不一樣 所以做起來也有不同的感受
3.何謂HTML、DIV及CSS
HTML架構基本物件的排列
DIV建構網頁基本架構,區分上中下
CSS美化網頁畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.lativ.com.tw/
簡單明瞭乾淨 又可以很快速找到自己想要的商品
5.期待這門課的學習成果與收穫為何?
希望可以更加熟悉瞭解網頁架構

1.網址:http://mepopedia.com/~web102-a/hw01/hw01-1015445033

2.設計概念與製作心得
很神奇又很難

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


4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.etudehouse.com/gate.html
舒適的顏色,擁有夢幻的感覺

5.期待這門課的學習成果與收穫為何?
希望可以自己做出一個很完整的網站

1.網址:http://mepopedia.com/~web102-a/hw01/HW01-1015445063
2.設計概念與製作心得:
雖然這堂課在一年級已經教過 但是老師教的卻很不一樣 所以做起來也有不同的感受
3.何謂HTML、DIV及CSS
HTML架構基本物件的排列
DIV建構網頁基本架構,區分上中下
CSS美化網頁畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.lativ.com.tw/
簡單明瞭乾淨 又可以很快速找到自己想要的商品
5.期待這門課的學習成果與收穫為何?
希望可以更加熟悉瞭解網頁架構

1015445063

(之前用到簡正帳號傳 現在重傳)