[作業03] HTML與CSS練習--首頁實作篇

1. HTML與CSS練習--首頁實作篇作業說明

請參考
[講義] HTML與CSS練習--首頁實作篇：http://mepopedia.com/forum/read.php?804,43670

1. 作業目的

1.進一步熟悉HTML與CSS
2.練習將視覺與語法結合
3.學習如何修改HTML與CSS語法

[hr]

2. 作業說明

1.請以範例網站為基模，使用其排版概念，重新改編為一新的網站設計，除了架構一樣，其他資訊皆要更新。
2.製作：(1)完成首頁，(2)設定滑鼠移過的效果，其他頁面將陸續完成。

[hr]

3. 作業步驟

1.參考http://mepopedia.com/~web102-c/hw03/hw03/
並以講義中的語法為參考http://mepopedia.com/forum/read.php?804,43670。
2.重新設定一全新網站的主題，蒐集相關主題及內容資料
3.重新設定網站主題、使用對象、色彩計畫、圖片元素等。
4.製作背景圖片、整體色彩設定，標題及文字內容。
5.將ＨＴＭＬ與ＣＳＳ語法分別貼上後，修改ＨＴＭＬ與ＣＳＳ語法。
6.將資料夾命名為 hw03-學號，以ＦＴＰ上傳至hw03資料夾
作業網址為http://mepopedia.com/~web102-a/hw03/hw03-1015445XXX 。

並請回覆：

(1)作業網址：
(2)網站主題：
(2)對象：
(3)色彩計畫：
(4)風格設定、網頁看點、預期成效：
(5)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]

卡。

(1)作業網址：http://mepopedia.com/~web102-a/hw03/hw03-1015445006/ 〈原本的〉
http://mepopedia.com/~web102-a/hw03/hw03-1%201015445006/〈更改過的〉
(2)網站主題：YA-HAN Designer Website
(2)對象：幼稚園以上的人包誇小朋友
(3)色彩計畫：整個色調以粉紅色為主，讓人一看就有很浪漫的感覺~~~
(4)風格設定、網頁看點、預期成效：
風格設定：以粉紅色為主，想表達出可愛、親切的風格
網頁看點：以我的主畫面圖片為主─繪本，每一個標籤滑鼠移過去都會有顏色的變化，這是值得看的
(5)請整理以下數值：
字體設定(font-family)： 微軟正黑體 12px
標題級數：YA-HAN Designer Website 24px
文章標題級數： 微軟正黑體 20px 、
內文級數(font-size)：微軟正黑體 12px
區塊內與區塊間的距離padding：0
(margin)：0
網站寬度(width)(單位px) 1024#768px
(6)製作心得：終於可以用dreamweaver寫一篇網站了，又以自己最喜歡的主題去做，雖然語法每個html都要看對哪一個的css ，但是，這的確學到非常多，以前看不懂的語法，沒想到現在看懂了一些，相信只要越來越多這種自己架設的網頁，就可以讓我學到更多東西。
學號 1015445006



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web102-a/hw03/hw03-1015445001/
(2)網站主題：大自然
(2)對象： 25以上的吧
(3)色彩計畫： 自然色調為主，不高的彩度給人舒服的感覺
(4)風格設定、網頁看點、預期成效： 風格呈現是輕鬆舒服的，圖片變化是特點，預期成效為讓觀看者能知道多
(5)請整理以下數值：
字體設定(font-family) 微軟正黑體
標題級數：24px 文章標題級數：20px 內文級數： 12px
區塊內與區塊間的距離l：22px
網站寬度： 1351px
(6)製作心得：簡單的區塊，和基本架構就能做出很有質感的網站，我覺得非常棒!一開始用語法做摸索很久，但也因為有去自己暸解因此有明白一些東西。


1015445001



(編輯記錄)

1)作業網址：

(2)網站主題：卡通網站

(2)對象： 10~40歲左右

(3)色彩計畫：使用綠色系

(4)風格設定、網頁看點、預期成效： 簡約的風格設定黃黑配色是看點，預期做成閱讀方便的感覺

(5)請整理以下數值：

字體設定(font-family) 微軟正黑體

標題級數：24px 文章標題級數：20px 內文級數： 12px

區塊內與區塊間的距離l：22px

網站寬度： 800px

(6)製作心得：能製作喜愛的卡通網頁還滿有趣的。


1015445020

1)作業網址： [url=http://mepopedia.com/~web102-a/hw03/hw03-1015445030/]http://mepopedia.com/~web102-a/hw03/hw03-1015445030/[/url]

(2)網站主題：進階網頁設計課程的作業

(2)對象： 老師

(3)色彩計畫：使用綠色系

(4)風格設定、網頁看點、預期成效： 簡約的風格是設定也是看點，預期做成容易閱覽一目了然的感覺

(5)請整理以下數值：

字體設定(font-family) 微軟正黑體

標題級數：24px 文章標題級數：20px 內文級數： 12px

區塊內與區塊間的距離l：22px

網站寬度： 800px

(6)製作心得：好高深難懂


1015445030



(編輯記錄)

1)作業網址：http://mepopedia.com/~web102-a/hw03/hw03-1015445017/

(2)網站主題：JORDAN球鞋

(2)對象： 球鞋迷

(3)色彩計畫：紅色背景中帶點復古黑白

(4)風格設定、網頁看點、預期成效：90年代JORDAN叱吒NBA美國職籃，也推出了很多個人鞋款，想用簡單的方式介紹給大家。

(5)請整理以下數值：

字體設定(font-family) 微軟正黑體

標題級數：24px 文章標題級數：20px 內文級數： 12px

區塊內與區塊間的距離l：22px

網站寬度： 800px

(6)製作心得：自從第一次碰到網頁就覺得他是我的剋星，還有很多很難的都不會，只能盡力去完成他!


1015445017

1)作業網址： http://mepopedia.com/~web102-a/hw03/hw03-1015445051/

(2)網站主題：伍佰&China Blue

(2)對象： 一般大眾

(3)色彩計畫：使用暗灰色系

(4)風格設定、網頁看點、預期成效： 簡約

(5)請整理以下數值：

字體設定(font-family) 微軟正黑體

標題級數：24px 文章標題級數：20px 內文級數： 12px

區塊內與區塊間的距離l：22px

網站寬度： 800px

(6)製作心得：

MEPOERs said:

(1)作業網址： http://mepopedia.com/~web102-a/hw03/hw03_1015445024/

(2)網站主題：個人網站

(2)對象： 一般大眾

(3)色彩計畫：使用暗色黑橘

(4)風格設定、網頁看點、預期成效： 簡約

(5)請整理以下數值：

字體設定(font-family) 微軟正黑體

標題級數：24px 文章標題級數：20px 內文級數： 12px

區塊內與區塊間的距離l：22px

網站寬度： 800px

(6)製作心得：[color=#FF0000]陳全福大哥有指導[/color]



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web102-a/hw03/hw03-1015445018/
(2)網站主題：辛普森家庭
(2)對象：收看的大眾
(3)色彩計畫：以節目的logo擷取色彩，以黃色與紅色為主。
(4)風格設定、網頁看點、預期成效：
風格設定：以黃色為主，表達出幽默、無理頭的逗趣風格。
網頁看點：詳細的介紹人物及節目的內容。
(5)請整理以下數值：
字體設定(font-family)： 微軟正黑體 12px
標題級數： 24px
文章標題級數： 微軟正黑體 20px 、
內文級數(font-size)：微軟正黑體 12px
區塊內與區塊間的距離padding：0
(margin)：0
網站寬度(width)(單位px) 1024#768px
(6)製作心得：更了解製作網站的方法。



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web102-a/hw03/hw03-1015445023/
(2)網站主題： 攝影平台
(2)對象： 喜愛攝影族群，一般大眾，初入門攝影者。
(3)色彩計畫： 以深藍色調為主，輔以黑色，些許的漸層色點綴網站的質感。
(4)風格設定、網頁看點、預期成效： 風格用深藍色的沉穩感帶出攝影所能表達出的質感，和深色比較能夠突顯出影像，讓影像成為重點。
(5)請整理以下數值：
字體設定(font-family) 微軟正黑體
標題級數：24px文章標題級數：20px內文級數：12px
區塊內與區塊間的距離
(padding 20px)
(margin 20px)

網站寬度(width) 800px

(6)製作心得：
起初上課操作的時候其實有點不清楚，但是回家慢慢操作理解區塊的差別，改內容參數，就能夠慢慢的理解出哪一個部分影響哪一個部分，
我覺得這樣才能夠真正理解網站的結構，所以還是要實際的操作才能夠真正了解網站。

(1)作業網址：http://mepopedia.com/~web102-a/hw03/hw03-1015445012/
(2)網站主題：角落生物介紹
(2)對象：對此生物有興趣的人
(3)色彩計畫：黃色、綠色系
(4)風格設定、網頁看點、預期成效：希望能有清新的風格
(5)請整理以下數值：
字體設定:微軟正黑體
標題級數:24px
文章標題級數:15px
內文級數:12px
(6)製作心得：手忙腳亂好像有喚起一點之前用DW的記憶


1015445012

(1)作業網址：http://mepopedia.com/~web102-a/hw03/hw03-1015445027/
(2)網站主題：怪獸電力公司
(2)對象：喜好DISNEY的各位觀眾
(3)色彩計畫：以怪獸電力公司的LOGO顏色做連結
(4)風格設定、網頁看點、預期成效：
風格設定：用簡單的藍色色塊呈現怪獸電力公司的特色
網頁看點：詳細的介紹人物及電影上大家不知道的小事
(5)請整理以下數值：
字體設定(font-family)： 微軟正黑體 12px
標題級數：怪獸電力公司 24px
文章標題級數： 微軟正黑體 20px 、
內文級數(font-size)：微軟正黑體 12px
區塊內與區塊間的距離padding：0
(margin)：0
網站寬度(width)(單位px) 1024#768px
(6)製作心得：網頁真的好煩啊!!!!

(1)作業網址：[url=http://mepopedia.com/~web102-a/hw03/hw03-1015445020/]http://mepopedia.com/~web102-a/hw03/hw03-1015445020/[/url]

(2)網站主題：卡通網站

(2)對象：10~40歲

(3)色彩計畫：使用黃黑配色

(4)風格設定、網頁看點、預期成效： 簡約的風格設定黃黑配色是看點，預期做成閱覽方便的感覺

(5)請整理以下數值：

字體設定(font-family) 微軟正黑體

標題級數：24px 文章標題級數：20px 內文級數： 12px

區塊內與區塊間的距離l：22px

網站寬度： 800px

(6)製作心得：能製作喜愛卡通的網頁還滿有趣的


1015445020



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web102-a/hw03/hw03-1015445038/
(2)網站主題：Super Mario Bro
(2)對象：喜歡玩這項遊戲的玩家
(3)色彩計畫：以遊戲角色Mario身上的色彩，紅色黃色為主。
(4)風格設定、網頁看點、預期成效：
風格設定：以紅黃色系,表現這個角色活潑的樣子。
網頁看點：介紹人物及遊戲玩法的內容。
(5)請整理以下數值：
字體設定(font-family)： 微軟正黑體 12px
標題級數： 24px
文章標題級數： 微軟正黑體 20px 、
內文級數(font-size)：微軟正黑體 12px
區塊內與區塊間的距離padding：0
(margin)：0
網站寬度(width)(單位px) 1024#768px
(6)製作心得：對於語法還是有些困難 無法一下子就了解
但慢慢一個一個看就大致可以知道 還是要再努力...

(1)作業網址：http://mepopedia.com/~web102-a/hw03/hw03-1015445043/
(2)網站主題：Hello Kitty
(2)對象：1~50歲女性
(3)色彩計畫：淡粉色系
(4)風格設定、網頁看點、預期成效：
風格設定：淡淡粉粉舒舒服服
網頁看點：Hello Kitty房間
(5)請整理以下數值：
字體設定(font-family)： 微軟正黑體 12px
標題級數：YA-HAN Designer Website 24px
文章標題級數： 微軟正黑體 20px 、
內文級數(font-size)：微軟正黑體 12px
區塊內與區塊間的距離padding：0
(margin)：0
網站寬度(width)(單位px) 1024#768px
(6)製作心得：真好玩~
學號 1015445043



(編輯記錄)

1)作業網址：http://mepopedia.com/~web102-a/hw03/hw03-1015445054/
(2)網站主題：喜喜巧克力
(2)對象：愛吃甜甜的女性
(3)色彩計畫：整個色調以咖啡色為主
(4)風格設定、網頁看點、預期成效：
風格設定：以咖啡色為主，想表達出可愛、親切的風格
網頁看點：每一個標籤滑鼠移過去都會有顏色的變化
(5)請整理以下數值：
字體設定(font-family)： 微軟正黑體 12px
標題級數： 24px
文章標題級數： 微軟正黑體 20px 、
內文級數(font-size)：微軟正黑體 12px
區塊內與區塊間的距離padding：0
(margin)：0
網站寬度(width)(單位px) 1024#768px
(6)製作心得一直玩配色，超有趣的，而且一直變色還可以知道語法在哪裡更改，很喜歡這次的網頁設計
學號 1015445054

1)作業網址：http://mepopedia.com/~web102-a/hw03/hw03-1015445004/

(2)網站主題：Warframe

(2)對象： 學生

(3)色彩計畫：使用暗色系提升質感

(4)風格設定、網頁看點、預期成效： 簡約風格，並以灰階為主讓網頁看起來很乾淨。

(5)請整理以下數值：

字體設定(font-family) 微軟正黑體

標題級數：24px 文章標題級數：20px 內文級數： 12px

區塊內與區塊間的距離l：22px

網站寬度： 800px

(6)製作心得：製作過程有點困難，但是做出來很有成就感。