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

Advanced

Re: [作業02 ] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

製作說明



1.請參考
[url=http://mepopedia.com/forum/read.php?804,16481][講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
的步驟製作,自行選擇一主題,設定網頁風格,依照所設定風格進行配色。

2.每個同學記得在[color=#990033]title的部分打上"視傳二A-學號-以色塊建構的網頁單欄排版"[/color]

3.在#wrapper寬度上打上 px的數值

4.#header、#content及#footer內,自行打入不同的內容文字,自行隨意設定

5.請每位同學依步驟完成本單元─網頁版面基本架構與背景色及字體設定後,上傳至FTP

6.本次作業的重點在於:

[color=#CC0000](1)DIV與CSS的設定
(2)利用單純色彩搭配與字體設定設計出具有質感的網頁[/color]


1. 繳交作業方式



1.製作完成後,檔案命名方式:

[color=#669900]第二個作業FTP上的資料夾為:hw02

每位同學請將自己的資料夾命名為:hw02-學號
這個作業的網址則為:http://mepopedia.com/~web103-c/hw02/hw02-102xxxxxxx

資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔

存放在 < hw02-學號 > 的資夾內[/color]


2.上傳至FTP

3.回覆本篇文章

(1).作業網址

(2).請回答以下問題:
1.製作主題
2.欲呈現之配色風格:
3..有無遇到的問題?
4.製作感想

===========================================
[color=#CC0066]請務必在下次上課前回覆,否則為遲交,扣十分[/color]
===========================================

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445015

(2).請回答以下問題:
1.製作主題 : Etudehouse 韓國美妝店
2.欲呈現之配色風格: 甜美系
3有無遇到的問題?  無法立刻找到想改的語法位置會搞混,因為不熟練的關係。
4.製作感想: 能為自己喜歡的東西製作屬於自己的網站很有趣很好玩。


1025445015陳曉琪



Edited 1 time(s). Last edit at 10/22/2014 12:30PM by CHEN CHICHI.
(編輯記錄)

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445036

1.製作主題 : 電影介紹
2.欲呈現之配色風格 : 我是用了比較鮮豔了顏色,想說明這部電影主角的一些個性
3.有無遇到的問題 ? 配色會花比較多時間
4.製作感想 : 現在盡量背一些語法

1025445036 李易達

(1).作業網址:

http://mepopedia.com/~web103-c/hw02/hw02-1025445051

1.製作主題 : The Temper Trap樂團介紹


2.欲呈現之配色風格 :背景使用紅色大色塊和前面的黑色做呼應,襯出黑色。
內文使用接近黑色的灰色不使用對比較強烈的白色是因為想要跟很濃烈的背景配色做內斂低調的對比。


3.有無遇到的問題 ? 配色會花比較多時間,考慮了幾個配色很久'


4.製作感想 : 熟悉架構但還是要多注意小細節


1025445051 林芳伃



Edited 1 time(s). Last edit at 10/28/2014 11:05PM by XuanSong.
(編輯記錄)

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445141

1.製作主題 : 人物介紹
2. 因為是街頭藝術家 所以想用比較亮的顏色來表達
3.有無遇到的問題 ? 選顏色會花比較多時間
4.製作感想 : 要背語法 這樣製作上會比較輕鬆

1025445141 王心仁

(1).作業網址 http://mepopedia.com/~web103-c/hw02/hw02-1025445069

(2).請回答以下問題:
1.製作主題 初戀潛水艇
2.欲呈現之配色風格: 藍色 青春憂鬱的感覺
3..有無遇到的問題:語法有點難記
4.製作感想 很有趣

1025445069 古珮儒

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445174

(2).請回答以下問題:
1.製作主題 : 電影-私刑教育
2.欲呈現之配色風格: 清新風格
3有無遇到的問題?  覺得滿複雜的
4.製作感想: 覺得學網頁設計也不錯,多了一項會的東西了。


1025445174 黃琪雅

http://mepopedia.com/~web103-c/hw02/hw02-1025445144

(2).請回答以下問題:
1.製作主題 :CK
2.欲呈現之配色風格:簡約
3有無遇到的問題? 問題蠻多的
4.製作感想:做有興趣的東西 比較有動力

1025445144李欣翰

(1).作業網址 http://mepopedia.com/~web103-c/hw02/hw02-1025445192

1.製作主題 踩天空步道 賞絕美日月潭
2.欲呈現之配色風格: 綠色 清新舒適風格
3..有無遇到的問題? : 配色 語法還有些陌生
4.製作感想 : 有些難


1025445192 黃婷萱

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445111

(2).請回答以下問題:
1.製作主題 :kodaline 愛爾蘭樂隊
2.欲呈現之配色風格:平靜,適合他們音樂的風格
3..有無遇到的問題? 沒有~~
4.製作感想:製作網頁蠻好玩的。


視傳2C 1025445111 莊于萱

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1005445188/

(2).請回答以下問題:
1.製作主題:短文
2.欲呈現之配色風格:符合角色
3.有無遇到的問題? 有時該出現的沒出現
4.製作感想:語法十分難記

視傳4A 1005445188 姜翊萱

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1005445191
(2).請回答以下問題:
1.製作主題:VOGUE 專欄
2.欲呈現之配色風格:無彩色為主
3.有無遇到的問題:語法不容易記
4.製作感想:除了語法,其他越來越上手

1005445191 陳佳雯

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445039

(2).請回答以下問題:
1.製作主題 :狗狗新聞
2.欲呈現之配色風格:溫馨溫暖
3..有無遇到的問題? 沒有
4.製作感想:很有成就感


視傳2C 1025445039 何佳霖

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445018

(2).請回答以下問題:
1.製作主題 :美容美妝變年輕新聞。
2.欲呈現之配色風格:暗到亮漸層,形容斑點會慢慢不見的感覺。
3.有無遇到的問題:目前還沒。
4.製作感想:從一開始到做完真的有網頁的樣子,覺得很棒學到很多。


視傳2C 1025445018 陳怡融

(1)作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445072/

(2)請回答以下問題:
1.製作主題 :神偷奶爸
2.欲呈現之配色風格: 鮮艷簡單
3..有無遇到的問題? 否
4.製作感想 :Dr很好玩~~~要多練習配色

1025445072 王人永

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445090/

(2).請回答以下問題:
1.製作主題:電影介紹
2.欲呈現之配色風格:秋天的味道
3..有無遇到的問題:目前沒問題
4.製作感想:很有趣也很好玩,語法很難背

1025445090 鍾婷玟



Edited 1 time(s). Last edit at 10/24/2014 02:55AM by 1025445090.
(編輯記錄)

http://mepopedia.com/~web103-c/hw02/hw02-1025443044
1.製作主題:
餿水油事件
2.欲呈現之配色風格:
深綠色陰暗逃避的感覺
3..有無遇到的問題?
英文指令有點難背,其他照著老師教的大致上沒什麼問題
4.製作感想 :
覺得又學到一樣東西,完成後有成就感

1025443044 王薏茹



Edited 1 time(s). Last edit at 10/24/2014 12:04AM by 1025443044.
(編輯記錄)

作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445153

(2).請回答以下問題:
1.製作主題 :憂傷馬戲團
2.欲呈現之配色風格:粉色加紫色,給人一種可愛的感覺
3有無遇到的問題? 語法很混亂但是弄懂又很簡單,多看書其實就會了
4.製作感想:對於我自己喜歡的商品、品牌、故事,做出來還蠻好玩的

1025445153 廖敏君

http://mepopedia.com/~web103-c/hw02/hw02-1025445060

1.製作主題:16個夏天

2.欲呈現之配色風格:綠色風格+一點藍色

3.有無遇到的問題? 過程中一直有語法跑掉要一直重新來

4.製作感想: 做了很久才完成,覺得非常難
雖然已經懂一些語法的概念,但全部要記起來真的好難!


視傳二C 1025445060 黃淯婷

作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445147

1.製作主題:癌的最新發現-早點睡覺
2.欲呈現之配色風格:我用絲帶的顏色-紫色,代表對癌症病人的關懷與治療,而背景則直接採用黑色,比較單純的說明主題
3有無遇到的問題:要找出相對應文章的顏色讓我傷了腦筋
4.製作感想:突然覺得覺自己在寫程式碼時有種成就感,感覺自己都看得懂


1025445147 張 郁

作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445102

1.製作主題 :韓國女子團體小分隊 TAETISEO

2.欲呈現之配色風格:把他們原先團體的應援色 粉紅色 應用進來再進行利用類似色調來作搭配。

3.有無遇到的問題:有一些語法都會忘了怎麼打,還有會忘記加上有一些符號。

4.製作感想:雖然語法有些難度,但網頁一作出來就特別有成就感,也很好玩。

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445123

1.製作主題:法國女人的魅力
2.欲呈現之配色風格:典雅
3..有無遇到的問題:有時會找不到錯誤的地方。
4.製作感想:蠻好玩的。

1025445123姚育慈

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445126

1.製作主題:海鮮背後的人倫悲劇
2.欲呈現之配色風格:暗沉
3..有無遇到的問題:配色
4.製作感想:有點複雜

1025445126宋映萱

:http://mepopedia.com/~web103-c/hw02/hw02-1025445129
1.製作主題:跨越生命中的障礙... 您還堅持原來的樣子嗎?
2.欲呈現之配色風格:暖色系
3..配色要思考一下
4.慢慢熟悉軟體,但還是覺得有點難

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445045

(2).請回答以下問題:
1.製作主題 : 王品23家店染黑心油 27號起憑發票退費
2.欲呈現之配色風格: 海洋系
3有無遇到的問題?  越做越熟練。
4.製作感想: very滾(good)。


1025445045 饒文欣



Edited 1 time(s). Last edit at 10/28/2014 09:08PM by XuanSong.
(編輯記錄)

http://mepopedia.com/~web103-c/hw02/hw02-1025445009

1.製作主題:電影..德古拉
2.欲呈現之配色風格:灰黑白色系
3..有無遇到的問題? 甚麼自該放哪裡,放在哪個中間常常搞混
4.製作感想 一步一步的做出來真的蠻好玩的

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445180

(2).請回答以下問題:
1.製作主題 : 喝碳酸飲料易老化?含糖分是關鍵
2. 欲呈現之配色風格 :呈現比較可愛活潑的顏色,背景而用比較暗沉的顏色來呈現老化
3..有無遇到的問題? 語法還很混亂
4.製作感想 做出來很有成就感

1025445180 謝芷寧

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445162

1.製作主題 : 哈利波特
2.欲呈現之配色風格 : 用了橘色暖色系當主色調在用粉紅色襯托橘色
3.有無遇到的問題:
4.製作感想 : 語法很難記不住


1025445162 陸怡潔

(1).作業網址: http://mepopedia.com/~web103-c/hw02/hw02-1025445054/

(2).請回答以下問題:
1.製作主題 :JOJO x GUCCI
2.欲呈現之配色風格: 因為有與名牌跟漫畫做結合,所以用鮮豔與穩重的顏色去搭配,讓它具有時尚感又有這部漫畫的風格。
3..有無遇到的問題? 有時候看得眼花撩亂,找不到要改的語法在哪。
4.製作感想: 做自己喜歡的主題很開心,需要仔細的檢查語法有無錯誤。

1025445054 許雅筑

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445003

1.製作主題 : 新聞(和藝術文化有關的)
2.欲呈現之配色風格 : 我用了鮮豔一點的三種顏色
3.有無遇到的問題 ? 配色會花比較多時間
4.製作感想 : 現在盡量背一些語法(覺得好好玩~)

1025445003 潘相逸

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445120

(2).請回答以下問題:
1.製作主題 : 冰雪奇緣
2.欲呈現之配色風格: 冰雪~~~~
3有無遇到的問題?  不熟有時候混亂~找不到地方改東西
4.製作感想: 多看幾次就比較好玩了


1025445120

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445198/Index.html

(2).請回答以下問題:
1.製作主題 :探險活寶
2.欲呈現之配色風格:快樂配色
3有無遇到的問題?  語法越變越多,可能會比較搞不清楚某些語法的用途。
4.製作感想: 很不錯學習了很多。

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445087

(2).請回答以下問題:
1.製作主題 :How to become a ghost
2.欲呈現之配色風格: 紫色
3有無遇到的問題?  不熟,配色不是很理想
4.製作感想: 希望能再做更好

(1).作業網址 :http://mepopedia.com/~web103-c/hw02/hw02-1025445048
(2).請回答以下問題:
1.製作主題:安東
2.欲呈現之配色風格:科技化
3.有無遇到的問題?我會打原始碼和css打到亂掉,會該出現ㄉ沒出現
4.製作感想:還不太熟悉
視傳2C 1025445048 林侑慶

激情看圖約妹:http://my.blog.qooza.hk/admin/blog_editor.php?action=post&e1076
看??妹:http://aaaass123.pixnet.net/blog
寂寞狂歡正在上演 :http://profile.qooza.hk/xia123456
激情看圖約妹:http://my.blog.qooza.hk/admin/blog_editor.php?action=post&e1076
性愛大款歡:http://mydearsweeti.pixnet.net/blog/post/161862177
性?部落:http://www.y5520123.com/forum.php
小妹在此送出優惠套餐噢~北部消費滿8k一節一次性買2節著可免費送一節噢意思就是買2送1的優待!
中部消費滿6k一節一次性買2節著可免費送一節噢!南部消費滿6k一節一次性買2節著可免費送一節噢!
【另外還有買3送1汗買1送1的優惠活動喔!詳情請加小妹聯絡方式諮詢喔】每日前三位約妹領取2K元促銷折扣優惠喔!
生客第一次約妹每人領取1000元折現 當月生日憑證件優惠1000 買三送一 買二送二 買二送一
現在敲小妹帳號馬上獲得優惠價一張跟絲襪一雙或免車資優待噢,趕快行動喲 各種優惠等著你 心動就快行動喲 加入小妹帳號 為你一一推薦各式各樣的優質正妹喔
小妹聯絡方式:賴:sty7788即時:z519309790 skype:z519309790
營業時間:早上10:00~淩晨03:30
全套服務→洗香香 LDS 愛撫 口交 按摩 S 愛愛(可無套 可多P唷)
PS:想要特殊服務的要提前跟小妹講喔
★可住家→伴遊→過夜→與妹妹互動良好可以Ns唷
★*年齡18~50歲〈正派經營、一律現金、絕.無.欺.騙〉
★*各類型的美女應有盡有,一律台灣美女、配合度及服務更是100%
★*依照您所需要的條件安排、現金消費、不加收任何費用、保證可換
★*新茶多、貨源足、素質優、安全隱密、絕不催趕《絕對是您最佳的選擇》
★趕緊加入小妹及時/LineID或是SKype帳號 加入帳號即可享受500-2000折扣不等唷
★小妹茶坊只有你想不到的沒有你要不到 你的需求小妹都能滿足你 邁開你的腳步跟著我出發

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1005448079

(2).請回答以下問題:
1.製作主題 : lativ
2.欲呈現之配色風格:藍色系
3有無遇到的問題?  還是不熟悉許多語法
4.製作感想:希望可以多練習 不然一下子就忘記了

1005448079 江芳瑜

(1).作業網址 http://mepopedia.com/~web103-c/hw02/hw02-1025445132

(2).請回答以下問題:
1.製作主題 超人回來了 (韓國綜藝節目)
2.欲呈現之配色風格: 藍色/黃色 超人感覺
3..有無遇到的問題:語法有點難記 容易忘記
4.製作感想 :可以介紹自己喜歡的節目覺得很有趣



1025445132 羅雅嫚

1.製作主題 餿水油事件
2.欲呈現之配色風格: 有點沉悶
3..有無遇到的問題? 有點複雜
4.製作感想 希望會更好\

C:\Users\User\Desktop\hw02 1025445075\index.html

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445030

(2).請回答以下問題:
1.製作主題 : DayZ
2.欲呈現之配色風格: 黯淡
3有無遇到的問題?  語法真的很困難
4.製作感想: 能自己做出網站很有成就感


1025445030王泰然

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445108

1.製作主題 : 感動!老婦人和愛貓分開 貓咪走千里尋主
2.欲呈現之配色風格 : 呈現即時新聞的風格
3.有無遇到的問題 : 配色要思考,語法還不太熟悉
4.製作感想 : 需要更了解語法

1025445108 張惟婷

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445006

1.製作主題 :三種人生
2.欲呈現之配色風格 : 黃色系方便閱讀
3.有無遇到的問題 : 有些語法還是不太懂
4.製作感想 : 需要多看多了解

1025445006鄭喬薰

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445165

(2).請回答以下問題:
1.製作主題 : [Alexandros] 樂團
2.欲呈現之配色風格:沉穩的感覺
3有無遇到的問題? 語法一直搞混,有時候改變了顏色的色碼,卻沒有變成那個顏色
4.製作感想:看語法看到眼花撩亂

1025445165 陳文晴

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445063

1.製作主題 : 超潮空氣傘
2.欲呈現之配色風格 : 顏色很跳感覺比較活潑
3.有無遇到的問題 : 很不熟悉 打語法感覺很亂
4.製作感想 : 不熟 要多練習 好難

1025445063 洪筠真

1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445075


1.製作主題 現今餿水油事件
2.欲呈現之配色風格: 藍色暗沉表示警惕
3..有無遇到的問題? 有點搞不清楚語法的小標點符號
4.製作感想 終於做完有點小小成就感><

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445117

(2).請回答以下問題:
1.製作主題 : I M A G E 服飾
2.欲呈現之配色風格: 簡單清新
3有無遇到的問題?  顏色 文字 大小 一堆英文 覺得有點亂 想改這個 變得卻是那個...
4.製作感想: 最後有做出來覺得是不錯 希望下次作業能做得好


很抱歉 我晚交了><


1025445117 黃振誠



Edited 1 time(s). Last edit at 11/12/2014 11:55AM by 綠辛.
(編輯記錄)

(1).作業網址 http://mepopedia.com/~web103-c/hw02/hw02-1025445138

(2).請回答以下問題:
1.製作主題─電影介紹:3 idiots

2.欲呈現之配色風格:顯色,絕對顯色系,背景鮮豔,文字清楚即可。

3..有無遇到的問題? ─語法和div一多,會搞不清楚用途

4.製作感想─語法得多看,製作網頁過程須熟練好幾遍,才能運用自如。

1025445138 梁奕堯

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445135


1.製作主題:Jeyoy甜蜜貓
2.欲呈現之配色風格:甜美系
3有無遇到的問題:無大礙
4.製作感想:簡簡單單的還不錯


1025445135 李品萱

(1).作業網址
http://mepopedia.com/~web103-c/hw02/hw02-1025445033

(2).請回答以下問題:
1.製作主題 :老師作業的完美重現
2.欲呈現之配色風格:綠色系
3有無遇到的問題?
4.製作感想:製作屬於自己的網站很有趣很好玩,可是也很累。


1025445033 林子軒