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

Advanced

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

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

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]
以及盒子與盒子(元素與元素)之間的關係



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

[hr]

4. 作業說明


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

[hr]
範例:
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/


[hr]

5. 上課影音



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





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

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445017

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

設計概念:是一家甜點蛋糕店的品牌,甜點的聯想通常是少女的喜好,所以用粉嫩的色調作為主
色,背景則是花圈,來製造甜蜜優雅的氛圍,其餘的留白則顯的簡單乾淨,不過度花俏,配合圓
角的框線,最後加入背景音樂,增添溫柔夢幻的意象。

製作心得:
過程中能很快的回想上學期所學過的網頁設計,而這次的作業又有學到新的知識,像是css3maker
的網站有許多特效可以使用等,都很有幫助,還發現有別班的同學能放入背景音樂,所以自己也試
試看,因而學到其他的知識。

3.何謂HTML、DIV及CSS:
HTML:是製作網頁時必須的排版語法,翻譯為中文就是超文件標記語言。
DIV:是一種標籤,可以包覆語法,將不同的語法有效的分為獨立的樣子。
CSS:可以讓網頁美化,也能編輯網頁的長寬、文字大小和顏色等。

4.附上至少一個覺得設計很有質感的網站,並說明原因:
World of SWISS:http://www.world-of-swiss.com/zh
這個網頁是唯一讓我讚嘆的,是一家航空公司,使用非常創新的設計,他是捲動滑鼠來瀏覽頁面,
畫面會隨著我們捲動的長度產生飛行的視覺效果,擺脫一般網頁是用按鈕點擊來瀏覽內容,就像真
的在天空飛行的感覺,也為這個網頁的主題加分。

5.期待這門課的學習成果與收穫為何?
看過老師給的進階網頁設計的範例後,讓我對這門課更有興趣,因為那是更現代、更有設計感的呈
現方式,所以我很希望趕快學到那些知識,而我也會和上學期一樣,對每個作業都認真對待,並加
入更新的想法,因為做網頁不僅要有技術,也要有美感和創意,最後期望自己在這學期結束後,能
得到更多關於網頁設計的知識。



Edited 2 time(s). Last edit at 03/09/2017 10:08AM by lemon2016.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445089
2.設計概念與製作心得:以品牌logo配色,簡約風格,多了圓角和陰影的配置讓畫面更不一樣,不會很單一呆板
3.何謂HTML、DIV及CSS:
HTML:寫網頁語法&架構DIV:包覆語法CSS:美化畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.yslbeauty.com.tw/index.php
屬於簡約風格配色,有質感,清楚明瞭要尋找的資訊
5.期待這門課的學習成果與收穫為何?
學到更多新語法spinning smiley sticking its tongue outspinning smiley sticking its tongue outspinning smiley sticking its tongue out



Edited 2 time(s). Last edit at 03/09/2017 11:08AM by 089.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445002
2.設計概念與製作心得:
概念:主題是一部戀愛喜劇"朝五晚九",配合劇情及這部戲充滿粉紅泡泡的感覺,使用了粉色系。

心得:慘了我快忘光了

3.何謂HTML、DIV及CSS:
HTML:網頁構成的基本語法
DIV:包覆區塊的標籤語法
CSS:美化外觀,網頁好不好看就靠它了

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

角色介紹部分一目了然,而且點選角色還會說出台詞,
畫風唯美,排版簡潔符合主題,音樂好聽

5.期待這門課的學習成果與收穫為何?
希望我可以先把忘記的東西回想起來
能學到更多語法技巧或是關於現代網路設計趨勢的相關知識



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

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445029
2.設計概念與製作心得:
概念:很喜歡小美人魚所以主題選這個
心得:這次複習蠻簡單好上手的

3.何謂HTML、DIV及CSS:
HTML:網頁構成的基本語法
DIV:包覆區塊的標籤語法
CSS:網頁的美觀上主要構成'方法
4.附上至少一個覺得設計很有質感的網站
http://www.mistypure-create.com/

並說明原因 :
瀏覽方便,以區塊為主,簡潔明瞭
清楚如何使用

5.期待這門課的學習成果與收穫為何?
希望這次能把所有專業學起來,未來好好運用~~~

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445086
2.設計概念與製作心得:
概念:很喜歡kakao所以主題選這個
心得:作業一算是複習前面滿簡單的

3.何謂HTML、DIV及CSS:
HTML:網頁構成的基本語法
DIV:包覆區塊的標籤語法
CSS:網頁的美觀上主要構成'方法
4.附上至少一個覺得設計很有質感的網站
http://www.tokyodisneyresort.jp/tc/

並說明原因 :
瀏覽方便 簡潔明瞭 造型可愛


5.期待這門課的學習成果與收穫為何?
希望進階網頁可以讓我更進一步!

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445014

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

主題:米老鼠

設計概念: 以簡單的黑、灰、白 作為主要色彩,不只讓畫面看起來簡潔,
且又符合米奇的形象,內文字則是以相似的深藍色,然後又因版型較為單調,
所以背景則是用滿版黃底的米奇去做整體搭配。


製作心得:這次的作業算是一個總複習,多虧之前的練習,
這次真的做得很快很順手,然後也多交了很多像圓角、透明度、
陰影等等不同的語法,使版型跟畫面排版上更加多變~


3.何謂HTML、DIV及CSS:
HTML:負責建構網頁基本架構 ( 網頁縮寫 )
DIV:包覆整個網頁的語法架構
CSS:專門負責美化網頁的任務

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

本身就很喜歡這種很簡潔、很乾淨的排版,
不會讓人感覺很凌亂,看起來很舒服也很有質感 ~

5.期待這門課的學習成果與收穫為何?
希望可以學到更多不同的語法~



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

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445188
2.設計概念:
我製作的主題是番茄,因為本身很喜歡吃番茄製作的料理,又加上它的顏色很討喜,所以就決
定來簡單介紹一下番茄。
番茄給人的印象就是紅通通的,又圓圓的,非常惹人喜歡,而番茄本身也有非常高的飲養價值
所以決定在簡單介紹完番茄後,來做個簡單的番茄料理教學。
在設計上主要以紅色為主色,背景則用番茄圖案的線條來呈現出食材的趣味感,讓人感覺是很
輕鬆的簡單番茄料理網站,用圓角設定來凸顯番茄的圓潤感。
製作心得:
在製作上本身是以複習的心態來做,再加上這次加入css3的效果,使網頁能多出更多的變化,
也期待之後的進階網頁課能讓整個網頁看起來更生動、更有美感。

3.何謂HTML:HTML為網頁的整體架構,負責編排網頁上的語法
DIV:為包覆網頁的語法,做出區隔
CSS: 專門負責美化網頁,做出網頁主視覺

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.am791.com/index.aspx
這個網頁感覺與之後教的進階網頁類似,本身設計是採水墨風,不管是背景還是圖片特效
的處理,風格都很一致,讓人看起來簡單舒服。希望之後也可以做出這麼有質感的網頁。

5.期待這門課的學習成果與收穫為何?
希望在之後的進階網頁中可以做出具有美感的作品,在製作的技術與畫面上都能上一層樓,
能夠應付將來工作上的任何問題,也能夠做出一個跟得上潮流的優質網站設計。



Edited 4 time(s). Last edit at 03/09/2017 07:32PM by 1045445188.
(編輯記錄)

1.網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445080-2
2.設計概念與製作心得:
以GAP的主色系藍色為主要的色彩,把衣服當作背景使網頁活潑點也使用透明度讓網頁比較有質感。經過一個寒假有些語法有點忘記但經過這次練習後漸漸熟悉了。

3.何謂HTML、DIV及CSS:

html是整個網站的架構
div是包覆整個語法
css是網頁的樣式

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

http://www.sirius-design.com.tw/
這網頁的背景是以影片的方式呈現覺得很酷,還有一些按鍵做得很好玩

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

希望透過這門課自己可以做出一個更有質感的網頁



Edited 1 time(s). Last edit at 03/02/2017 11:35PM by 1045445080.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445125
2.設計概念:
我製作的主題是一款日式NDS遊戲的介紹,所以是以比較和風的畫面呈現,還有加上遊戲內的音樂襯托,希望在觀看網頁的同時也能體會到遊戲的氛圍。
製作心得:
感覺像在複習上學期的作業,經過一個寒假都快忘光了,時不時都要想一下語法。
因為很熟悉dw的操作了,所以製作上更得心應手。

3.何謂HTML:
HTML為整體架構 編排語法
DIV:為包覆網頁的語法
CSS: 為美化網頁

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.motelstudios.co.uk/#venue-hire-home
這網頁看起來很簡潔,而他將列表設計過後放置於右側,我覺得很有新意。
滑鼠移動至選項時的滑動效果讓人覺得很舒暢,讓人在選取時有種流暢感。

5.期待這門課的學習成果與收穫為何?
這堂課其實學得很有興趣,一步一步了解之後越來越有學習的欲望及動力,希望看見自己能做出更精美的作品。
希望未來能學習的很扎實,熟練之後作為自己的專業技能,以後應用於職場上。



Edited 2 time(s). Last edit at 03/09/2017 02:10PM by OuO1045445125.
(編輯記錄)

1.網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445161-2

2.設計概念與製作心得
設計概念:
1 / 因為最近mister donut 活動做的很大,吸引我的注意,然而網頁設計若想做的開心,
要以自己喜歡的當作主題才可以比較做的下去,因而想以misterdonut為素材來製作網頁設計。
2 / 橘色黃色色系在色彩學裡有刺激胃口的效果,甜甜圈也很適合走粉黃粉橘色色系,
所以顏色上採黃橘兩色配色。

製作心得:
因為覺得第一個作業畫面呈現出來有點空,所以想把上學期學會的應用在這次作業上,
但發現原本我以為我記得的都忘記了,花了很多時間回去找講義複習,這是我覺得自己比較不足的地方。

3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構,沒有任何的裝飾,負責編排語法
DIV:包覆語法,區隔效果
CSS:裝飾效果,讓畫面更有質感

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://onedesigncompany.com
1 / 這個網站進去滑鼠左鍵可以互動,每點一下就會出現一隻手,還有HELLO字樣很活潑可愛。
2 / APPROACH這一個頁面點下去,滑鼠滾輪滾動,會有動畫出現,增加閱讀的趣味性,很棒。
3 / 喜歡這種一頁式的網頁,而且在ABOUT這一頁,滑鼠滾到人物介紹那邊,
有個+字號,人會往上浮動,左鍵按下去會延伸出介紹,同時也會出現 - 字號,
看完按左鍵可以使畫面變回來,創造出版面上的智慧空間。
4 / 色調走藍白黑,版面簡潔,符合現代年輕人喜歡的趨勢。

5.期待這門課的學習成果與收穫為何?
希望我上下學期學的任何東西都可以變成自己的,不要因為久沒碰就忘記,
也希望能培養出可以在業界生存下去的基本功( 例如 : 修改網頁,微調等... )
以及擁有對現代趨勢的瞭解,做出更有質感不失流行的網頁



Edited 1 time(s). Last edit at 03/06/2017 09:53PM by 1045445161.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445095


2.設計概念:
想到三月是油桐花開的季節,加上新竹苗栗一帶都為客家人居多。
製作心得:
過了一個寒假真的有些語法都忘了啦~但還號有筆記跟老師的網站~~
發現有時候要拿捏好整個畫面,不多特效不一定好看。

3.何謂HTML:HTML為網頁的整體架構,負責編排網頁上的語法
HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://hakka.mmhot.tw/
有做很多連結,在文字圖片的分配是很舒服的。

5.期待這門課的學習成果與收穫為何?
希望能在css這塊能更熟練,而在學習不同版型的語法。



Edited 3 time(s). Last edit at 04/04/2017 01:49PM by 1045445095.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445062

2.設計概念:
沖繩是環海島嶼, 海洋乾淨清澈是它的一大賣點

製作心得:
增加了一點點外觀上的變化,讓整個更加的豐富。

3.何謂HTML:
HTML:主要架構、內容。
DIV: 包覆網頁版面區塊 。
CSS: 外觀。

4.附上至少一個覺得設計很有質感的網站,並說明原因:
清水寺英文官方網站:http://www.kiyomizudera.or.jp/en/tours/

網頁一打開撥放著誦經的影片,影片色調與網頁顏色相當的搭,簡單的黑白色調,感受到清水寺端莊嚴肅的氣氛。


5.期待這門課的學習成果與收穫為何?
往後在製作網頁上可以一眼看出這些亂碼在寫什麼。



Edited 3 time(s). Last edit at 03/15/2017 11:07AM by 1045445062.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445092

2.設計概念:
我的主題是CHOCOLATE的介紹,我想以典雅的風格來呈現巧克力的經典故事,所以我用了黑色、金色、咖啡色來表呈現以巧克力為主題的網頁,再加上古典音樂的輕快旋律。

製作心得:
經過一個寒假後,有點忘記語法的應用,但幸好有這次的複習,才能夠稍稍地回想起語法的應用。

3.何謂HTML:
HTML:為整體架構,編排語法,用於建立網頁的標準標示語言。
DIV: 是一種包覆語法,可於頁面中區隔出段落、標題、表格。
CSS:為網頁做裝飾與美化的效果。

4.附上至少一個覺得設計很有質感的網站,並說明原因:
http://www.brooklynfare.com/index.php
網頁給人有簡潔的感覺,在主頁的背景顏色上做點擊還可以變換顏色,這個網頁就像是網路上的超市一樣,可上網購買食材。
食品的分類則用了小插圖來呈現,裡面有著許多的資訊,還有網頁的操作說明,是個很完整而容易了解操作的網頁。

5.期待這門課的學習成果與收穫為何?
希望可以用這些所學的東西,應用在未來所需要的方面上。



Edited 1 time(s). Last edit at 03/09/2017 10:08AM by 1045445092.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1025445231

2.設計概念與製作心得:
主題:太宰治

設計概念:
太宰人生一貫色系,以及背景有太宰經典的思考表情,據說是學芥川龍之介的。

製作心得:
受益良多。

3.何謂HTML、DIV及CSS:
HTML:是製作網頁時必須的排版語法,翻譯為中文就是超文件標記語言。
DIV:是一種標籤,可以包覆語法,將不同的語法有效的分為獨立的樣子。
CSS:可以讓網頁美化,也能編輯網頁的長寬、文字大小和顏色等。

4.附上至少一個覺得設計很有質感的網站,並說明原因:
https://www.youtube.com/?gl=TW&hl=zh-TW
有相當簡潔的質感,方便的操作空間,簡單明瞭的介面,是網路流量數一數二的網站。
5.期待這門課的學習成果與收穫為何?
期待能了解網頁製作的操作技能。



Edited 1 time(s). Last edit at 03/09/2017 10:09AM by 1025445231.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445074

2.設計概念:最近Mister Donut做廣告做得很大,還推出卡娜赫拉甜甜圈,熱愛甜甜圈跟卡娜赫拉,
決定做一個網頁,也有放上影片,背景音樂也有放。
製作心得:過個寒假有些忘記了,還好有老師這個複習作業,加上有補充一些補法,
在製作時,熟悉很多。

3.何謂HTML:構成網頁的基礎,以及整體架構跟編排語法版面的主要地方。
DIV:是包覆網頁的整個語法。
CSS:美化網頁。

4.附上至少一個覺得設計很有質感的網站,並說明原因? http://cpeople.ru/
這個網頁以一個大圖片占整個網站上的主視覺,右邊有設定好幾張小圖,每個小圖按進去
,都會有不同的主題有不同的設計,甚至圖片下還會附上小音樂。

5.期待這門課的學習成果與收穫為何? 能學到更多的語法更深入的研究。

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445008

2.設計概念與製作心得
設計概念:
1 因為看了這齣電影讓我印象很深刻,本身很喜歡大自然跟動物,所以就決定做一下這齣電影的心得小分享!\
2 以綠色為主去設計,因為能呈現大自然的感覺

製作心得:
很喜歡以自己的興趣跟喜好去作出一個網站

3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構,沒有任何的裝飾,負責編排語法
DIV:包覆語法,區隔效果
CSS:裝飾效果,讓畫面更有質感

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.kassandrabay.com/
1 / 這個網站讓人感覺一點進去就很想度假,很想學這種語法設計,因為個人很喜歡這種風格
2 /色調走藍白放鬆的感覺,版面簡潔,符合現代年輕人喜歡的趨勢。

5.期待這門課的學習成果與收穫為何?
希望我之後能學到更多語法,雖然美誤用頭都很痛,不過腦力激盪讓我更喜歡這堂課,感覺成就感滿滿smiling bouncing smiley



Edited 2 time(s). Last edit at 03/12/2017 09:00PM by 1045445008.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445110

2.設計概念與製作心得:
以美女與野獸為主,帶有神祕感的暗紫暗藍色系風格,
發現以淡色系,無法凸顯整體,所以使用暗色系來帶出整體效果

3.何謂HTML、DIV及CSS:
HTML:構成網頁的基礎,負責編排語法
DIV:包覆語法-標籤包起來的文字、圖片等...
CSS:裝飾畫面更有質感,表現出的整體風格

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.spaceneedle.com/home/
感覺這個設計很有空間感,能帶來不同的視覺感官

5.期待這門課的學習成果與收穫為何?
希望能得心應手,能適當的學習到更多,並有效的運用

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445119
2.設計概念與製作心得:
有運用到透明度跟漸層,多學會了一些新的東西,讓網頁越來越厲害了所以很開心。
3.
HTML - 網站的基本架構,編排語法
DIV - 包覆語法
CSS - 美化設計
4.http://www.aerosmith.com/
帥啊!剛好也有老師說的ONE PAGE
5.期待這門課的學習成果與收穫為何?
慢慢的收穫會越來越多,感謝老師的指導,我會繼續努力。

1.網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445071-2
2.設計概念與製作心得:
Nike 簡單的色彩表現時尚
剛開始做比較能跟得上進度

3.何謂HTML、DIV及CSS:
HTML:網頁語法架構DIV:包覆語法CSS:美化畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.adidas.com.tw/stellasport
喜歡簡單極簡風格
5.期待這門課的學習成果與收穫為何?
學到更多新語法



Edited 2 time(s). Last edit at 03/14/2017 02:25PM by 徐夢蔆1045445071.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445182

2.設計概念與製作心得:
設計概念:飛機在天空飛翔 用天空當背景 愛阿聯酋航空
3.何謂HTML、DIV及CSS:
HTML:建構網頁基本架構
DIV:建立網頁區塊
CSS:美化網頁

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

5.期待這門課的學習成果與收穫為何?
希望可以做出更有變化的網頁



Edited 1 time(s). Last edit at 03/16/2017 12:36AM by vera1028.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445044
2.設計概念與製作心得:
跟著老師的步驟做覺得沒有像之前那樣殺死腦細胞的感覺
3.期待這門課的學習成果與收穫為何?
希望之後可以學習到更多

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445146

2.設計概念與製作心得:
設計概念:介紹泡泡先生全家福,以粉嫩色系為主要色彩,加入圓角效果讓整個網頁活潑可愛一些。
我把底圖置中才不會因為過多的色彩並且一直repeat而顯得花俏。調整透明度之後,稍微透出底圖,簡單卻不單調。
製作心得:太久沒碰網頁,連最基本的語法架構都忘得差不多,真是心累…

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

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://pedromeca.com/index-en.html
使用出色的圖片和插畫來講述一個故事

5.期待這門課的學習成果與收穫為何?
培養美感,往後能夠設計出更具現代有質感的網頁

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445149

2.設計概念與製作心得:
設計概念:用洋芋片當主題製作,大自然田園風格
3.何謂HTML、DIV及CSS:
HTML:建構網頁基本架構
DIV:建立網頁區塊
CSS:美化網頁

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.coke.com.tw/zh/home/
我喜歡他的配色,風格,讓人很快樂

5.期待這門課的學習成果與收穫為何?
更加熟練網頁的製作,能夠快速更有效率的製作出有質感好看的網站。

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445131

2.設計概念與製作心得
設計概念:
(1)最近電視在重播這個電影,我覺得這部電影背後有很多蠻有意義的隱喻,所以我選這個當主題
(2)我使用背景的藍色作為主要的顏色

製作心得:
覺得做網頁很有趣

3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構
DIV:包覆語法
CSS:美化效果

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.secondfloorcafe.com/index.jsp
版面看起來整齊

5.期待這門課的學習成果與收穫為何?
希望我可以學到更多網頁語法

1、網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445170
2、設計概念與製作心得:以藍灰調,帶出他們的沉默害羞的一面
3、何謂HTML、DIV及CSS:
HTML:整個網頁的架構
DIV:被其包覆會自成一塊,變成區塊物件
CSS:美化網頁
4、附上至少一個覺得設計很有質感的網站,並說明原因
:http://www.lamo3.com.tw/index.php#1
配色風格清新,有質感,介面簡單清楚,讓人一目了然。
5、期待這門課的學習成果與收穫為何?
希望能學到更多語法,讓網頁愈做愈美。

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445053
2.設計概念與製作心得:
以藍色調為主,配合背景的插圖。心得:過程中有些忘記上學期的教學,翻了翻筆記。但做得很開心,很喜歡宮崎駿的作品^^
3.何謂HTML、DIV及CSS:
HTML:整體架構,編排語法
DIV:包覆網頁的語法
CSS: 美化網頁

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.lemonadela.com/
一頁形式的網站,黃色調且簡單明瞭,
畫面很可愛,很舒適~按鈕也設計成水果的樣子。
5.期待這門課的學習成果與收穫為何?
可以學到更多不一樣的地方~吸收更多的知識~

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445152
2.設計概念與製作心得:
概念:從以前就很喜歡史迪奇,所以這次就決定做他
心得:多了一些新的要學,以前的有些都忘了,所以我想應該要複習一下了grinning smiley

3.何謂HTML、DIV及CSS:
HTML:網頁構成的基本語法
DIV:包覆區塊的標籤語法
CSS:網頁的美觀上主要構成'方法
4.附上至少一個覺得設計很有質感的網站
https://www.mydesy.com/

並說明原因 :
瀏覽方便,以區塊為主,簡潔明瞭
清楚如何使用

5.期待這門課的學習成果與收穫為何?
希望我能夠記住所有學過的,然後又能好好吸收新的...

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445035

2.設計概念與製作心得:
主題:藝術與文藝的工作室網站

設計概念:是以一個以藝術和文藝為者的工作室,要做一個網站平台

製作心得:
要製作元素、圖片花了不少時間

3.何謂HTML、DIV及CSS:
HTML:是製作網頁時必須的排版語法,翻譯為中文就是超文件標記語言。
DIV:是一種標籤,可以包覆語法,將不同的語法有效的分為獨立的樣子。
CSS:可以讓網頁美化,也能編輯網頁的長寬、文字大小和顏色等。

4.附上至少一個覺得設計很有質感的網站,並說明原因:
World of SWISS:http://www.ogilvy.com.tw/zh/index.aspx

奧美的網站讓我覺得非常有設計感覺,動畫效果也是很厲害

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


期望上完這堂課後,是能夠接有關於網頁設計的工作。

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445155
2.設計概念與製作心得:
概念:近期電影上映
心得:簡單好上手的

3.何謂HTML、DIV及CSS:
HTML:網頁構成的基本語法
DIV:包覆區塊的標籤語法
CSS:網頁的美觀上主要構成'方法


4.期待這門課的學習成果與收穫為何?
希望這次能把所有專業學起來,

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445059
2.設計概念與製作心得:
概念:我最愛汽車了
心得:容易

3.何謂HTML、DIV及CSS:
HTML:網頁構成的基本語法
DIV:包覆區塊的標籤語法
CSS:網頁的美觀上主要構成'方法


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

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445026

2.設計概念與製作心得:
主題:菲力貓(Felix the Cat)

設計概念:
菲力貓色系。

製作心得:
老師解析非常清楚,讓我製作過程非常順暢。

3.何謂HTML、DIV及CSS:
HTML:是製作網頁時必須的排版語法,翻譯為中文就是超文件標記語言。
DIV:一種標籤,可以包覆語法,將不同的語法有效的分為獨立的樣子。
CSS:讓網頁美化,也能編輯網頁的長寬、文字大小和顏色等。

4.附上至少一個覺得設計很有質感的網站,並說明原因:
https://paperandlight.co/
簡潔又不失質感。
5.期待這門課的學習成果與收穫為何?
更了解網頁製作的操作技能。

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445068

2.設計概念與製作心得:
設計概念:介紹最新韓劇 歡迎大家一起追劇。

製作心得:太久沒碰網頁,CSS那邊最讓我頭痛...

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

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.klasse14.com/
一頁式的手法

5.期待這門課的學習成果與收穫為何?
可以記得更深 以後可以做得更順手

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445077-01
2.設計概念與製作心得:
概念:很喜歡看日劇,外加因為男主角是我喜歡的偶像
心得:這次複習蠻簡單好上手的

3.何謂HTML、DIV及CSS:
HTML:網頁構成的基本語法
DIV:包覆區塊的標籤語法
CSS:網頁的美觀上主要構成'方法
4.附上至少一個覺得設計很有質感的網站
https://shimatorie.jp/

並說明原因 :
瀏覽方便,清晰自然 純樸可愛

5.期待這門課的學習成果與收穫為何?
能運用在工作上吧



Edited 1 time(s). Last edit at 04/19/2017 10:20PM by 1045445077.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445056
2.設計概念與製作心得:以韓國濟州島為主題,利用主色藍色營造旅遊的感覺。
3.何謂HTML、DIV及CSS:
HTML:寫網頁語法&架構DIV:包覆語法CSS:美化畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://webfieldmanual.com/
是設計網站,很有質感,網站的配置很新穎,很喜歡。
5.期待這門課的學習成果與收穫為何?
讓自己的網頁越做越好,並且學到更多語法。

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445086
2.設計概念與製作心得:
概念:喜歡kako所以做他們

心得:這次複習起來滿好上手的

3.何謂HTML、DIV及CSS:
HTML:網頁構成的基本語法
DIV:包覆區塊的標籤語法
CSS:美化外觀,網頁好不好看就靠它了

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

風格簡單 可愛

5.期待這門課的學習成果與收穫為何?
希望進階網頁可以讓我更上一層樓!

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445065
2.很開心
3.HTML是網頁架構 CSS美觀設計
4https://www.pinterest.com/search/pins/?q=web%20design
5.更多東西

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445107
2.設計概念 :因為三隻小豬的緣故 所以以簡單與綠色為主題
3.製作心得:因為上學期的緣故因此這次做得果然比上學期快很多
4.何謂HTML、DIV及CSS:
HTML:寫網頁語法&架構DIV:包覆語法CSS:美化畫面
5.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.bmthofficial.com/
屬於簡單風格配色,有質感,又是自己喜歡的樂團
6.期待這門課的學習成果與收穫為何?
學到更多有關網頁的知識

1.網址: http://mepopedia.com/~css105-2b/hw01/hw01-1045445113
2.設計概念與製作心得:以巧克力布朗尼的製作ˋ為主題,用簡單的咖啡色色塊來呈現濃郁的巧克力蛋糕
3.何謂HTML、DIV及CSS:HTML是網頁結構DIV是包覆網頁語法CSS是美化網頁
4.附上至少一個覺得設計很有質感的網站,並說明原因 http://www.devildessert.com/配色表達出蛋糕的美味
5.期待這門課的學習成果與收穫為何? 可以學到更多不一樣的地方~吸收更多的知識~



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

1045445104

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445104
2.設計概念與製作心得:
概念:主題是美國街頭品牌Vans,版面配色則是跟品牌配色一樣使用黑紅的配色

心得:慘了我快忘光了

3.何謂HTML、DIV及CSS:
HTML:網頁構成的基本語法
DIV:包覆區塊的標籤語法
CSS:美化外觀

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

排版大方乾淨俐落,給人小清新的感覺,簡單但隨便,看起來很有質感。
5.期待這門課的學習成果與收穫為何?
希望我可以真的好好的靈活運用,並且讓網頁設計成為拿手的項目

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045448015
2.設計概念與製作心得:
我以粉後色為主題, 所以用色幾乎都是粉色系的。
我製作時語法都看不懂,所以我是看老師的教學影片
作的,不過有老師的教學影片真的是太好了,讓我在
家就學會了。
3.何謂HTML、DIV及CSS:
CSS,全名為 Cascading Style Sheets 的縮寫,中譯名稱為『串接樣式表』(眾多翻譯中,這個聽起來最好聽)。這一個〝樣式表〞並不是隨著 HTML 4.0 誕生而誕生的。它早在 1994 年就以起草並由 W3C 進行審核。到了 1996 年年底,發表了第一版的 CSS 規格,也就是目前較常見的 CSS1(目前 CSS2 已經釋出)。
(Hyper Text Markup Language 超文件標籤語言)是構成網頁的基礎,HTML提供了各式各樣的標籤(Tag),讓使用者建置網頁中各段落文字或圖案。
C S S 教學-DIV標籤 被
標籤包起來的文字、圖片... 任何東西,瀏覽器都會將之視作一個物件。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.rubys.com.tw/index.php
因為畫面感覺上粉粉的,優雅的感覺,畫面不會太擠太多,畫面舒適,閱讀容易。
5.期待這門課的學習成果與收穫為何?
希望老師的教學影片可以再講得更細,然後看了老師的教學影片學了很多,上課時漏掉的地方都還可以再聽一次,
上課老師也交了很多關於網頁的美感和排版要怎麼做,真的學了好多喔。

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445071
2.設計概念與製作心得:簡約.黑灰白
3.何謂HTML、DIV及CSS:
HTML:寫網頁語法&架構DIV:包覆語法CSS:美化畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.nike.com/tw/zh_tw/
簡約風格配色
5.期待這門課的學習成果與收穫為何?
學到新語法

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445137
2.設計概念與製作心得:簡約.黑灰白
3.何謂HTML、DIV及CSS:
HTML:寫網頁語法&架構DIV:包覆語法CSS:美化畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://zh.wikipedia.org/wiki/%E5%91%A8%E6%9D%B0%E5%80%AB
簡約風格配色
5.期待這門課的學習成果與收穫為何?
學到新語法

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1025445158
2.設計概念與製作心得:簡約.黑灰白
3.何謂HTML、DIV及CSS:
HTML:寫網頁語法&架構DIV:包覆語法CSS:美化畫面
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.theoldengland.com/memory.php?cat=2
簡約風格配色
5.期待這門課的學習成果與收穫為何?
學到新語法