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

Advanced

Re: [作業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.期待這門課的學習成果與收穫為何?
希望可以真的弄懂網頁的東西,不然真的對網頁感到恐懼跟不熟悉
不過這次的作業一步一步地教,讓網頁就不會那麼可怕,且知道怎麼操作.