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-2c/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/~web105-2c/hw01/hw01-1045445117-1
(2).作業網址:http://mepopedia.com/~web105-2c/hw01/hw01-1045445117-2

2.網頁主題:華嚴宗大本山-東大寺

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

網頁主題訂為日本古都奈良名勝-東大寺,以雲形紋作為背景,呈現寺廟古典風格,網頁
整體配色採用白、棕色,除了營造典雅、歷史感等,也呼應東大寺建築外觀色彩, 木造
建築的東大寺,配色自然純樸,引人身懷肅穆之心,一個寒假後, 第一個作業可以使自
己複習上學期的架構,並加入新的技巧,適當透明度的使用,使網頁質感提升等, 如同
老師所說,學習是不會停止的,知識及技巧隨著時代進步,時事變遷,不斷更新變化 ,
學習將掌握社會脈動,個人涵養,豐富知識,追求生活等。

4.何謂HTML、DIV及CSS:

●HTML:是組成網頁的程式語言,利用程式語法的組成結構,瀏覽器所呈現的網頁架構。

●DIV:為一個標籤的形式,可將內容組成獨立的、不同的部分, div標籤內的內容將視為
一個物件,如將文字、內容、圖片等包覆在標籤內,如同包裹,也便於標籤維護管理。

●CSS:美化網頁的程式語言,可說是將基礎的html架構包覆美麗的外觀,包含文字,版
面,色彩,效果,字體大小等呈現網頁的外貌。

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

東京晴空塔網址:http://www.tokyo-skytree.jp/cn_t/
シマバライフ網址:http://shimabalife.jp/
東京晴空塔 TOKYO SKYRE
網站採用 One-page Web Design一頁式網頁,瀏覽動線順暢,層次分明,利用晴空塔畫
面呈現背景,充分表達網頁主題,畫面會隨著白天夜晚有所變化, 畫面配置舒服和諧,
網頁中整體色調為藍色調, 營造藍天白雲,一望無際的景色,配色自然,與背景呼應,
加上動畫輔助, 使網頁增添趣味性。

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

能夠做好作業的練習和實際遇到案例能達成客戶需求還是有差的,網頁設計領域知識廣
闊,而且不斷隨著軟體更新、樣式流行等,而有了各具形態的網頁,這學期的進階網頁
設計較上學期不同的是多了動態效果,以及更完整的版面設計,造訪許多網頁時,會遇
到動畫結合網頁的效果,如 https://www.npm.edu.tw/故宮歡迎頁設計方式,將網頁的質
感與主題做了完美的詮釋,能夠讓我們加以學參考及學習,以及不同版面格式的網頁架
構,如One-page Web Design瀏覽方式,頗具質感的網頁的確會讓人想知道背後的網頁
架構是如何完成的,也很期待本學期的課程與練習,老師辛苦了。



Edited 12 time(s). Last edit at 03/04/2017 12:06PM by 松本.豪.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1055999320

2.設計概念與製作心得:
這個作業比期中作業簡單多了啦......但是因為是昨天補的時間快來不及了所以自己覺得做的挺丑的......

3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構
DIV:是特定區塊的標籤,可將文字、內容、圖片包起來
CSS:用來布置,美化網頁的外觀

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

http://www.ysl.com/wy 【聖羅蘭 官方網站】
額其實覺得這個網站很帥單純的因為想買它的唇釉然後就去官網看了看

5.期待這門課的學習成果與收穫為何?
恩......應該只要能大致了解這個軟件然後能做一些基本的頁面就滿意了。但是也希望在別人眼裡我做的網頁看起來很厲害的樣子!~

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445153

2.設計概念與製作心得:
因為是露營享受生活有相關,所以我的配色都是淡色系。陽光綠地也有溫暖

3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構
DIV:是特定區塊的標籤,可將文字、內容、圖片包起來
CSS:用來布置,美化網頁的外觀

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.calvinklein.com/tw/?gclid=CIeeja-UstMCFcWSvQodRzMOcQ
整體同色調,看起來很和諧。

5.期待這門課的學習成果與收穫為何?
這個作業已經是難得自己做完,真的很開心。

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445036

2.設計概念與製作心得:
幫喜歡做甜點的自己做一個網頁介紹自己做的甜點,跟寫一些心得~
顏色用甜甜的藍色跟橘紅色系列,有更可口的感覺~
下面有連結之類的複習上學期的東西~
但!我不會做透明度RRRRRR!!!! confused smiley

3.何謂HTML、DIV及CSS:
HTML:構成網頁的一個基礎,組成網頁的一種語言(程式語言)
DIV:在網頁設計,指定某一區域,將那個區域包起來,也是一種標籤~
CSS:讓自己的網頁變漂亮,可以改變字體顏色大小,背景顏色等等,可以幫網頁點綴,變美變有質感。

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

http://woodenspoon.co/ 【wooden spoon 早午餐官方網站】
配色很讓人覺得舒適,網頁的內容令人清楚明瞭他們在做什麼,
產品展示也很清楚跟明顯,一目了然。

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

我期待這學期可以做出一個網頁是可以拿出去比賽的,
或者跟得上現在流行的網頁設計方式,
繼續增進自己網頁設計的能力,也想改變一下自己的風格。
最重要希望吸收到更進階的知識,強化自己~
謝謝老師,辛苦了smileys with beer



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

1.作業網址: http://mepopedia.com/~web105-2c/hw01/hw01-1045445189-2
2.網頁主題:樂高蝙蝠俠電影
3.設計概念與製作心得:
設計概念-用電影的劇照作為底圖,利用這次教的圓角設計呈現出樂高有圓角的造型;
還有標題部分用陰影來強化它;裡面的框是使用白色及灰色,調整透明度使視覺上帶有藍色的效果。整體希望帶有與底圖一致性的感覺。
製作心得-感覺真的蠻簡單的,不過與之前的作業2比起來不同的是--多了圓角及陰影的變化我還使用了底圖的效果,使網頁會更加豐富,遇到了凸一角的困境,希望可以順利解決它。
4.何謂HTML、DIV及CSS: ●HTML:是網頁的架構●DIV:是裡面的標籤,可以獨立的把東西包起來。●CSS:是網頁的外皮。
5.附上至少一個覺得設計很有質感的網站,並說明原因: 聶永真的網站:http://aaronnieh.tumblr.com/網站的首頁是聶永真的作品,雖然都是圖但是運用編排設計過之後會發現就算是作品的展示也能夠形成連這個網站也是另一個作品的感覺;左上角是他所設計屬於自己的logo可以點選它連到首頁;在他個人資料的呈現是白底黑字,利用字的粗細、深淺做出簡單卻不枯燥的簡歷;最後是聯絡他的小窗口,也是非常簡單的設計。
6.期待這門課的學習成果與收穫為何:
希望這學期還是可以跟上進度,以後可以架設有水準的網頁。或是真的可以維護網頁thumbs up

1.網址:http://mepopedia.com/~web105-2c/hw01/hw01-1045445141-1

2.設計概念與製作心得:
一貫的風格,黑白灰,多了漸層多了圓角多了陰影,心得嘛,還過得去啦(笑
3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構
DIV:網頁結構中,特定區塊的標籤,包裝的概念
CSS:控制網頁美醜的關鍵

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

http://ishothim.com/
一部分是私心喜歡的風格,為一頁式網頁,整體操作,連結都很流暢清楚。

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

最終目的是架設個自己的網頁,推銷自己吧(?
回來現實面,希望拿了這堂課的學分之後,遇到相關問題能得心應手。

1.網址: http://mepopedia.com/~web105-2c/hw01/hw01-1045445201/index.html

2.設計概念與製作心得:
這次選用綠巨人為主題
3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構
DIV:網頁結構中,特定區塊的標籤,包裝的概念
CSS:控制網頁美醜的關鍵

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

https://www.plain-me.com/shop.asp?conditiontype=2&poids=468&page=1&SortingType=0&pageSize=60
我會選擇這個的原因是因為東西黑簡單卻又精緻

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

學到很多東西



Edited 2 time(s). Last edit at 04/19/2017 07:29PM by 113039.
(編輯記錄)

1.網址 : http://mepopedia.com/~web105-2c/hw01/hw01-1045445212-2

2.設計概念與製作心得:馬卡龍好看又好吃,所以想用它來做個主題。
透明度我用了 中間的字和圖都會不見,所以我就沒用透明度了。

3.何謂HTML、DIV及CSS: HTML是組成網頁架構的程式語言。
DIV是可以將文字、內容、圖片包起來的標籤。
CSS是布置網頁的外觀。

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.chochoco.com/
它整個配色乾淨,讓人看了很舒服,簡潔又不失重點。

5.期待這門課的學習成果與收穫為何?
希望能了解更多網頁製作的細節,設計出讓人喜歡且印象深刻的網站。

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445042-2
2.設計概念與製作心得:覺得很酷,還可以這樣設定
3.何謂HTML、DIV及CSS:
html為基本架構
div為指定某一區域將那區域包起來,也是種標籤
css為修飾美化網頁用
4.附上至少一個覺得設計很有質感的網站,並說明原因 :
http://www.sodagreen.com.tw/
從他們的編排到文字上設定以及網頁轉換都很用心、很美,一看就會讓人想多滑一下看看有什麼文字。
5.期待這門課的學習成果與收穫為何?
嗯~沒有耶哈哈

1.網址:http://mepopedia.com/~web105-2c/hw01/hw01-1045445135-2

2.設計概念與製作心得:
簡單和透明感的樣子,製作過程很有趣

3.何謂HTML、DIV及CSS:
HTML是一種基礎技術, 一種用於建立網頁的標準標示語言。
DIV就像一個段落,在視覺上於頁面隔離出了文檔的一部分,它可以包含段落、標題、表格等。
CSS是一種用來為結構化文件(如 HTML 文件或 XML 應用)添加樣式(字型、間距和顏色等)的電腦語言。

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://tw.innisfree.com/main/index.do
簡單,活潑的感覺,帶點大自然的味道。

5.期待這門課的學習成果與收穫為何?
學習豐富的網頁設計知識。



Edited 4 time(s). Last edit at 03/06/2017 04:42PM by 廖芳如.
(編輯記錄)

1.網址:http://mepopedia.com/~web105-2c/hw01/hw01-1045445102-2

2.設計概念與製作心得:
簡單大方,黑白趣味漫畫背景很有趣

3.何謂HTML、DIV及CSS:
HTML是一種網頁的基本架構
DIV特定區塊的標籤,它可以包含段落、標題、表格等。
CSS是一種用來美化

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.elle.com.tw/
簡單乾淨,清楚明瞭

5.期待這門課的學習成果與收穫為何?
網頁設計的樂趣與應用。

1.作業網址:http://mepopedia.com/~web105-2c/hw01/hw01-1045445015-2


2.網頁主題:Flower fairies

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

這次多了一些透明度以及漸層的變化,融入網頁之中更顯現出網頁的特色與設計手法。

4.何謂HTML、DIV及CSS:

●HTML:是構成網頁的基礎,瀏覽器所呈現出的網頁架構。

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

●CSS:布置網頁的外觀,為修飾美化網頁用 。

5.附上至少一個覺得設計很有質感的網站,並說明原因:
https://www.debbywooo.com/
這是一個插畫設計的網站
風格簡單明瞭,附有特色的設計感
排版一致,讓人看了且顯易懂。
並且依依說明了各式的特點與象徵
畫面相當舒適。


6.期待這門課的學習成果與收穫為何:
網頁設計的架構的領域較為廣泛,所學習的知識也相當的多,
雖然過程中有時候會花比較多的時間去設計整個的架構,
但很容易就上手,而且也會發現其中的樂趣與技巧,
是一門值得細心學習的課程,如何設計出~~~~~~
具有質感與設計的網頁架構,也是日後我們學習網頁設計
需要增進自己的地方。



Edited 1 time(s). Last edit at 03/06/2017 09:12PM by 王宜雯.
(編輯記錄)

1.網址 : http://mepopedia.com/~web105-2c/hw01/hw01-1045445069-2

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

用電影中的場景作為背景,顏色用藍色調,摁...就是喜歡冰雪奇緣

3.何謂HTML、DIV及CSS:

HTML 網頁架構
DIV 文字、圖片、任何東西包起來作為標籤,就會被瀏覽器視為物件
CSS 網頁美化

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

http://www.pixar.com/features_films

簡單的呈現,清楚明瞭,但也是因為私心

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

每次的開始都覺得設定複雜,但做完都會有種我好棒的感覺,
希望之後成果做完也會讓自己覺得自己很棒的感覺~

1.網址:http://mepopedia.com/~web105-2c/hw01/hw01-1045445084

2.設計概念與製作心得:
這次想做關於手作藍染的網頁
3.何謂HTML、DIV及CSS:
HTML:網頁的架構與內容
DIV:網頁中每個特定區塊的標籤
CSS:美化網頁

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

http://www.mings.hk/life/攝影男生走進大嶼山,用手感受藍染%E3%80%80max:「從未。
一個關於手作溫度的網站,自己覺得很棒!

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

希望自己多一個長處,對未來有幫助!

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445195
2.設計概念與製作心得:
这个作业虽然和上学期第二个作业类似,但又不一样,这次的多了阴影和圆角。
3.何謂HTML、DIV及CSS:
HTML:基本网页构架 DIV:一种以标签的行式,提供网页内容与结构等样式的卷标 CSS:布置网页的外观
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://by-tiny.com/
这是一个宝艺网页设计的网页,清楚明了的说明了用途。
5.期待這門課的學習成果與收穫為何?
上学期每次设计网页都有很多不会,需要借鉴同学的老师的讲义才行,
希望经过这学期的学习我至少会最基本的一些网页设计。



Edited 1 time(s). Last edit at 03/09/2017 07:57PM by 1045445195.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445105
2.設計概念與製作心得:學到的東西更多且更豐富了雖然操作難度也變難了,但我覺得這是一個挑戰,可以做一個非常多元的網站讓我非常有成就感
3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構
DIV:是特定區塊的標籤,可將文字、內容、圖片包起來
CSS:用來布置,美化網頁的外觀
4.附上至少一個覺得設計很有質感的網站,並說明原因 :
http://www.earth1999.jp/他是一家日本衣服的品牌官網,覺得他圖片和網頁的配色與編排看起來舒適,乾淨又不會太單調。
5.期待這門課的學習成果與收穫為何?
希望能自己架構一個網購網站,感覺很酷。



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

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445003
2.製作心得:
太久沒碰網頁設計一開始的時候雖然知道怎麼用,但就是會一直卡住,時常腦子已經構思好如何下手卻找不到可以下手的地方。:゚(。ノω\。)゚・。
還好最後還是漸漸的熟悉各項設定。
設計概念:是以瑞典耳機品牌"Clould"去做發揮,底圖是直接使用此品牌的LOGO,加上一點內陰影,讓背景圖有點立體感,整體使用深灰色與桃紅色去做搭配,讓畫面雖然有都會感但又帶了點活潑,頂圖也是從音樂的頻率去發想而產生的設計。
3.何謂HTML、DIV及CSS:
HTML是一個網頁要顯現出來的基礎程式碼,DIV則是HTML裡會用到劃分區塊的代碼,可以為其一一命明(id),使用CSS設計網頁時更為方便、易懂。CSS建立在HTML下的設定,必須要有HTML做主要架構的設定,再從CSS開始著手網頁美觀的表現。
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.twistmepretty.com/
很簡單易懂又具有濃厚的女子氣息,內容跟網站設計相呼應(*´∀`*)
5.期待這門課的學習成果與收穫為何?
期望也能知道一些相關的網頁設定,像是jQuery之類的...((真的很想弄出美美的滑動效果啦啊啊阿阿
未來還要麻煩老師了~先在此謝謝老師(*´∀`*人*´∀`*)

1.網址 : http://mepopedia.com/~css105-2c/hw01/hw01-1045445033

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

LEGO樂高,應該沒有人不認識樂高吧~對於許多兒童,成年人都是一段回憶吧~

3.何謂HTML、DIV及CSS:

HTML 網頁架構
DIV 文字、圖片、任何東西包起來作為標籤,就會被瀏覽器視為物件
CSS 網頁美化

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

https://x.company/

非常的簡單,並且讓人理解又乾淨,使人非常喜愛

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

又是一個新的開始,期許自己能夠跟得上進度以及盡快的了解,又要請老師多多指教了



Edited 1 time(s). Last edit at 03/09/2017 11:09AM by Hus,Ching-Chiech.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445198
2.設計概念與製作心得:
德國國歌 德國三色旗配色
3.何謂HTML、DIV及CSS:
HTML:是組成網頁的程式語言,利用程式語法的組成結構,瀏覽器所呈現的網頁架構。

DIV:為一個標籤的形式,可將內容組成獨立的、不同的部分, div標籤內的內容將視為
一個物件,如將文字、內容、圖片等包覆在標籤內,如同包裹,也便於標籤維護管理。

CSS:美化網頁的程式語言,可說是將基礎的html架構包覆美麗的外觀,包含文字,版
面,色彩,效果,字體大小等呈現網頁的外貌。

4.附上至少一個覺得設計很有質感的網站,並說明原因
GOOGLE https://www.google.com.tw/?gws_rd=ssl
5.期待這門課的學習成果與收穫為何?
可以做個看起來很猛的東東

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445045
2.設計概念與製作心得: 走一個小夢幻風,
3.何謂HTML、DIV及CSS:
HTML:是構成網頁的基礎,各式各樣的標籤,讓使用者建置網頁中各段落文字或圖案。
DIV:一種以標籤的行式,提供網頁內容與結構等樣式的標籤。
CSS:加以美化網頁
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://the1975.com/ 畫面乾淨整潔
5.期待這門課的學習成果與收穫為何?
希望能學到更多網頁的東西

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445162
2.製作心得:
放了一個寒假雖然沒有全忘但要花些時間找回當初做網頁設計的感覺(哭,之後要好好收心繼續精進網頁設計這一塊TT
這次加進了背景圖還有透明度、圓角.......等等。的CSS,覺得比上學期的稜稜角角好看和顏色也順眼了許多,雖然不是自己畫的圖,但希望未來多累積一點自己的作品也能做出一個好看的網站
配色上有刻意搭配背景圖的主色和做了一些調整,整體網頁給人粉粉又有些沉穩的感覺~!

3.何謂HTML、DIV及CSS:
HTML-網頁的骨幹,基本架構的基礎
DIV-每一區塊的分門別類,類似給予每個區塊獨特的ID
CSS-負責美化網頁的設計,如果只單純設定了HTML那這個網頁一點美感都沒有

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

網址1:http://tsukiuta.com/
網址2:http://tsukiuta.com/event/tsukinoparty/08/
網址3:http://bito.tv/

前面兩個都是tsukiuta的官方公式網站,我喜歡第一個網頁原因是他每一次點進網頁都會隨機出現不同的人物,很好奇是怎麼寫出來的><雖然下面的排版稍嫌擁擠,但上半部分我很喜歡。第二個網站喜歡他的圖滑鼠碰到會動起來!!!!很可愛的感覺,和為每個月份做了不同的內容覺得很用心很有手繪午茶的質感
第三個網站是某個設計團隊的網站,整個很簡潔扼要和有設計感,文字和配圖排版方面也都很好看,是我喜歡的風格ww

5.期待這門課的學習成果與收穫為何?
達到能把每次上課教的語法活用和牢記,想做出跟其他套公式的網站不一樣的介紹放作品歸檔的網站><><有那個能力也想去參加網頁的設計比賽。

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445180

2.設計概念與製作心得: 蜜豆奶主題

3.何謂HTML、DIV及CSS: html基本架構
div為指定某一區域將那區域包起來,也是種標籤
css修飾美化網頁用

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

5.期待這門課的學習成果與收穫為何?
照著老師的步驟做~~最好~~



Edited 1 time(s). Last edit at 03/16/2017 12:06PM by 時尚時尚最時尚.
(編輯記錄)

1).作業網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445051/

2.網頁主題:JoJo的奇妙冒險

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

JoJo的奇妙冒險是以讚頌人類為主題的一部漫畫,個人非常喜歡這部作品,
而作者在裡面設計的角色都具有強烈的特色與設計感,所以在顏色配置我用了
和人物之間產生反差的紫色,想更進一步的表現原作的氛圍。

4.何謂HTML、DIV及CSS:

●HTML:是組成網頁的程式語言,利用程式語法的組成結構,瀏覽器所呈現的網頁架構。

●DIV:為一個標籤的形式,可將內容組成獨立的、不同的部分, div標籤內的內容將視為
一個物件,如將文字、內容、圖片等包覆在標籤內,如同包裹,也便於標籤維護管理。

●CSS:美化網頁的程式語言,可說是將基礎的html架構包覆美麗的外觀,包含文字,版
面,色彩,效果,字體大小等呈現網頁的外貌。

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

pinterest網址:https://www.pinterest.com/

Pinterest是可收集及整理視覺設計靈感的網路剪貼簿,有使用過 Tumblr 的人可能會更喜歡 Pinterest,
因為它有類似相簿分類的功能,而且同樣的也有網頁底端的自動加載功能,就是不用按下一頁就可以
一直加載內容,除了可以在 Pinterest 裡搜尋照片,也可以用別人網站的照片或自己上傳照片,是一個
非常方便的網站。

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

期待可以越來越熟練網頁設計。

1.網址:
http://mepopedia.com/~css105-2c/hw01/hw01-1045445018

2.設計概念與製作心得:
這次是做一家我覺得很可愛的服飾店,我有參考她可愛的特性做配色
運用透明度及圓角的效果很符合可愛的特性drinking smiley

3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構,一個網站的基礎,跟骨架差不多
DIV:是特定區塊的標籤,可將裡面的東西包起來
CSS:是可以設計網頁美觀度的地方

4.附上至少一個覺得設計很有質感的網站,並說明原因 :
http://www.chimeimuseum.org/非常多的小設計,其中有一個讓我覺得很有趣的是,一開始跳出來的小展覽推廣頁面
是配合這次展覽的主題「摺紙」來做設計的變化,關掉的時候廣告頁面會像紙般摺起來!

5.期待這門課的學習成果與收穫為何?
希望能把自己能力提升到專業等級,學過這堂課才知道一個看似漂亮的頁面其中包含了多少的技術與辛苦

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445099

2.設計概念與製作心得:
多了些透明度的變化,融入網頁更顯現出網頁的特色與設計。

3.何謂HTML、DIV及CSS:
HTML 它所包括的程式碼集(稱為標籤)是用於控制 Web 瀏覽器顯示文件的方式
DIV 一種以標籤的行式,提供網頁內容與結構等樣式的標籤
CSS 修飾美化網頁

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.bukwild.com/
它整個配色乾淨,使用了大量的空白。

5.期待這門課的學習成果與收穫為何?
把每次上課教的語法活用和牢記,希望能學到更多網頁的東西

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1015445216

2.設計概念與製作心得:
當作複習以前學過的東西了...感覺有一點忘光。
對烏鴉的行為感到有趣,所以找了一張烏鴉背景圖做了藍色的調色。
3.何謂HTML、DIV及CSS:

HTML:構成網頁的基礎,組合網頁的程式語言
DIV:區塊的標籤
CSS:美化的語法,佈置網業外觀所用

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.gnosh.co.uk/
手繪文字加上實體照的搭配,有種在做筆記的感覺

5.期待這門課的學習成果與收穫為何?
把之前沒學好的學好,有點想做跟自己興趣有關的網站~

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445081
2.設計概念與製作心得:
很喜歡無間雙龍這部日劇,故使用這個主題,主色調為深灰色,在製作過程中發現過了一陣子沒碰,很多東西都有點不太清楚,還要繼續找回記憶。
3.何謂HTML:網頁的基本構造,骨架、
DIV:網頁裡的標籤與分段用途
CSS:網頁細部調整與美化,皮膚
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://tw.battle.net/hearthstone/zh/
這是遊戲的官方網站,我覺得畫面配得很好,而且互動性娛樂性都很高,還滿吸引眼球的。
5.期待這門課的學習成果與收穫為何?
學習更深入的網頁語法應用

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445147
2.設計概念與製作心得:
因為我本身是個動漫迷,而這一部是充滿快樂又給人啟發的一個故事,因此而創作之。
3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構。 DIV:網頁結構中,特定區塊的標籤,包裝的概念 。CSS:控制網頁美醜的關鍵 。
4.附上至少一個覺得設計很有質感的網站,並說明原因
idti太陽能電池網站:http://www.idti.com.tw/
原因:有股簡單明瞭的風格 給人舒適之感。
5.期待這門課的學習成果與收穫為何?
希望對往後設計的網站有很大的幫助。

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445174

2.設計概念與製作心得:
以深色作為底,螢光色系作為配色,覺得過程不算太難
3.何謂HTML、DIV及CSS:
HTML:網頁基本架構
DIV:標籤
CSS:網頁的造型

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.puma-nightrun.com.tw/
設計完整、表達精確的網站

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

希望能設計出漂亮的網頁



Edited 3 time(s). Last edit at 03/16/2017 11:31AM by 1045445174.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445150

2.設計概念與製作心得:
以電音狂野的感覺作為整體設計
這次作業做得比較順手且花費的時間比以往還要少

3.何謂HTML、DIV及CSS:
HTML是網頁的基本架構,就像是房子的鋼筋骨架
DIV是指網頁架構中某個區域,像是房子裡的房間或者客廳等
CSS是美化整體網頁的視覺設計,等同於房子的外觀和內部的整體設計

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.chiaraferragnicollection.com/tw_en
以簡單的粉藍色和白色作為搭配,和品牌的藍眼睛相呼應
,整體給人簡單又有趣的感覺

5.期待這門課的學習成果與收穫為何?
希望能學習到更多的技能增加自己的實力

1.作業網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445177
2.網頁主題:好好聚落簡介
3.設計概念與製作心得: 第一個作業還算簡單 喜歡少女的顏色來凸顯這個貨櫃屋的粉色系
4.何謂HTML、DIV及CSS:
HTML:是構成網頁的基礎,瀏覽器所呈現出的網頁架構。
DIV:為一種以標籤的行式,提供網頁內容與結構等樣式的標籤.
CSS:布置網頁的外觀,為修飾美化網頁用 。

5.附上至少一個覺得設計很有質感的網站,並說明原因:
https://tenten.co/
他是一個簡單明瞭的網站也有設計的美感在內,是一個相當讓人喜歡的設計網站

6.期待這門課的學習成果與收穫為何:
對網頁世紀更上一層樓阿~~~~~不要只是很淺薄的知識 希望是能出去工作的那一種能力



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

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445217

2.設計概念與製作心得:
簡約風 看起來悶悶ㄉ
3.何謂HTML、DIV及CSS:
HTML:網頁架構
DIV:標籤
CSS: 樣式

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://joefangstudio.com/
簡單有質感 讚讚棒棒喔


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

老師讚讚老師棒棒

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445027

2.設計概念與製作心得:
喜歡B.A.P 喜歡到一個癡迷的程度(喂
做完還滿開心的,透明度弄好久R

3.何謂HTML、DIV及CSS:
HTML:簡單來說就是網頁原始碼(?
DIV:包起來
CSS:設計一個網頁要穿的衣服這樣。

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

http://www.somethingsweet.com.tw/ 【找到自己的獨特風格】
簡單,純白,讓人在挑選東西跟衣服的時候一目了然。

5.期待這門課的學習成果與收穫為何?
希望以後可以自己設計一個喜歡的網頁。

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445019

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

慢慢有抓回一些感覺了,比較不熟的部分還是有看講義和之前的作業,希望網頁設計的記憶快恢復哈哈

3.何謂
HTML:骨架
DIV:分段
CSS:有沒有化妝



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

https://www.elephantpie.com.tw/shop 披薩店網站

整體很有質感,底色白色,整體瀏覽起來,也很流暢~

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

在學習跟精進一些技能~



Edited 1 time(s). Last edit at 04/20/2017 12:46AM by sharon111688.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445009
2.設計概念與製作心得:
覺得這次的作業做得很開心,雖然透明度讓我搞到很惱火,但是這一次是做鍾碩OPPA所以就沒關西拉~~~
3.何謂HTML、DIV及CSS:
HTML:構成網頁的一個基礎
DIV:他是將網頁分塊 指某一區塊 將那個區塊包起來
CSS:美編裝飾用 他是網頁的化妝品
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.stunden.org/category/portfolios/
他很簡單 直接就可以看到各種不一樣的插畫家的圖
5.期待這門課的學習成果與收穫為何?
學些不一樣的~

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445138
2.設計概念與製作心得:
因為是做跟酒有關的主題,所以顏色跟版面還有圖片的選擇都偏繽紛跟強烈。

3.何謂
HTML:網頁的基本架構
DIV:區塊
CSS:美化版面

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.louvre.fr/
沒有過多撩亂的顏色,整體配置乾淨整齊

5.期待這門課的學習成果與收穫為何?
希望可以了解更多業界的流行趨勢

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1025445061
2.設計概念與製作心得:
色調以橘和咖啡為主,希望給人溫馨又可愛的感覺。這是我最喜歡的皮克斯動畫短片,做完覺得很開心!
3.何謂
HTML:網頁的基本架構
DIV:可把他視為標籤,一個區塊包起來的概念
CSS:一個網頁的外觀、風格
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.luckystarwine.com.tw/index.php?action=about
整體一目了然、不雜亂。配色適當,看起來很舒服,圖片也很精美,增加質感。
5.期待這門課的學習成果與收穫為何?
希望能做出一個漂亮有質感的網頁。

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445057
2.設計概念與製作心得
很想用粉紅色去襯托出熊貓幼崽可愛的樣子,可是是因為太久沒碰網頁了吧...想做什麼都做不出來thumbs down
3.何謂HTML、DIV及CSS:
HTML是網頁的基礎語言
DIV是區塊的標籤可以將文字圖片包成物件
CSS是網頁的風格設計
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://mitsugashi.com/
因為我覺得他把網頁做到讓人看了超級舒服 雖然不是說特別華麗 但是喜歡小清新風格的一定會很喜歡
5.期待這門課的學習成果與收穫為何?
希望我可以抓回上學期的感覺 在接下來的作業更有進步^^

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445030
2.設計概念與製作心得: 因為之前很喜歡《孤單又燦爛的神-鬼怪》這部韓劇,所以替它做了網頁,但我還是不會調透明度
3.何謂HTML、DIV及CSS:
HTML是一種用於建立網頁的標準標示語言,HTML是一種基礎技術,常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及行動應用程式的使用者介面。HTML描述了一個網站的結構語意隨著線索的呈現,使之成為一種標示語言而非程式語言。HTML元素是構建網站的基石。HTML允許嵌入圖像與物件,並且可以用於建立互動式表單,它被用來結構化資訊——例如標題、段落和列表等等。
DIV是個區域範圍,像是網頁頂端 (Head)、中段 (Body)、側區 (side) 與底端 (footer) 等區塊。
CSS是定義區域內的樣貌,如:顏色、效果、大小….
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.fabrica.it/?lang=it_it
因為覺得它的區塊配置的背景特別有趣,而且一頁就簡單明瞭。
5.期待這門課的學習成果與收穫為何?
希望這學期能跟上進度,架設一個屬於自己風格的網頁。

1.作業網址: http://mepopedia.com/~css105-2c/hw01/hw01-1045445144
2.網頁主題:飛天小女警

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

設計概念-用卡通主角作為底圖,這次教的圓角設計我很喜歡,可以讓死板的方框變成有點可愛圓角造型。標題用陰影來強化它;裡面的框是使用白色,調整透明度可以看到背景遮住的地方。整體可愛色彩豐富。

製作心得-不會很難也有很多東西可以玩玩看,與之前的作業2比起來不同的是--多了圓角及陰影及透明度,背景還放了底圖,使網頁會更加豐富。

4.何謂HTML、DIV及CSS:
●HTML:是網頁的架構
●DIV:是區塊的標籤可以將文字圖片包成物件
●CSS:可以美化網頁的程式語言,創造文字樣式,版
面,色彩,各種效果,字體大小等。

5.附上至少一個覺得設計很有質感的網站,並說明原因:
http://www.species-in-pieces.com/#
這個叫 In Pieces 的美麗網站為你介绍了地球上 30 種美麗濒危動物,有一次不小心看到了這個網站,非常驚艷!他用網站做出的動畫效果真的好美~ 裡面有30 種動物组成的輪盤,還可以看到這些動物在自然界的生存状况,它所受到的威協,快點進去看就知道了!!


6.期待這門課的學習成果與收穫為何:
希望這學期盡量可以跟上進度,我網頁做得不很好也做很慢,但是希望以後可以架設很美的網頁!



Edited 1 time(s). Last edit at 04/17/2017 10:00AM by 1045445144.
(編輯記錄)

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445120
2.設計概念與製作心得:
誰是住在深海大鳳梨裡
HTML:構成網頁的一個基礎
CSS:色塊
3.期待這門課的學習成果與收穫為何?
開心

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445006

2.設計概念與製作心得:
簡單也感受到其中的有趣,我很喜歡這次的作業

3.何謂HTML、DIV及CSS:
HTML是一種基礎技術, 一種用於建立網頁的標準標示語言。
DIV就像一個段落,在視覺上於頁面隔離出了文檔的一部分,它可以包含段落、標題、表格等。
CSS是一種用來為結構化文件(如 HTML 文件或 XML 應用)添加樣式(字型、間距和顏色等)的電腦語言。

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://moba.garena.tw/game/heroes
設計感十足,有很棒的視覺效果

5.期待這門課的學習成果與收穫為何?
會讓人想學習更多的相關課程

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1025445159
2.設計概念與製作心得:我喜歡那位歌手 製作時間有點久
3.何謂HTML、DIV及CSS: 我都不知道
4.附上至少一個覺得設計很有質感的網站,並說明原因 https://www.worbz.com/page/2/
5.期待這門課的學習成果與收穫為何?
學習如何架設一個網站

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445186
2.設計概念與製作心得: onerepublic 替這個樂團做一個網站架設
3.何謂HTML、DIV及CSS: 我忘記了
4.附上至少一個覺得設計很有質感的網站,並說明原因 http://pamphletmagazine.blogspot.tw/
它裡面收集了許多類似像雜誌的照片 我很喜歡攝影 所以我覺得滿棒的
5.期待這門課的學習成果與收穫為何?
希望能把自己累積的作品架設一個網站 讓大家看到

1.網址:
http://mepopedia.com/~css105-2c/hw01/hw01-1045445129

2.設計概念與製作心得:
這次是做我最喜歡的狗:巴哥犬

3.何謂HTML、DIV及CSS:
HTML:網頁基本架構,一個網站骨架
DIV:特定區塊的標籤
CSS:設計網頁美觀度

4.附上至少一個覺得設計很有質感的網站,並說明原因 :
http://www.ginahello.com/
這是一位部落客的網站,裡面很多都是我喜歡的元素!整體配色簡潔讓人看了很舒服。

5.期待這門課的學習成果與收穫為何?
希望將來遇到需製作網頁的工作時能得心應手。

1.網址:http://mepopedia.com/~css105-2c/hw01/hw01-1045445075

2.設計概念與製作心得:
以螢光綠跟深綠襯托她的各性以及喜好
3.何謂HTML、DIV及CSS:
HTML:網頁基本架構
DIV:標籤
CSS:網頁的造型

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.nike.com/tw/zh_tw/?cp=ahns_kw_bra!tw!goo!core!c!e!nike!154331665562
設計簡潔有力

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

可以學到如何架構 設計出好的網站

1.網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445114/midterm-1045445114/

2.設計概念與製作心得:
我想用影片的地方但卻只能傳網址

3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構
DIV:是特定區塊的標籤,可將文字、內容、圖片包起來
CSS:用來布置,美化網頁的外觀

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://twitter.com/zara
簡單讓人有舒服明瞭的感覺~

5.期待這門課的學習成果與收穫為何?
能做完我就很感動了~覺得真的要看影片才會搞懂~