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

Advanced

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

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

製作說明



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

2.每個同學記得在title的部分打上"視傳二B-學號-以色塊建構的網頁單欄排版"

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

4.#header、#content及#footer內,自行打入有意義文章標題與內容文字,footer請設定個人的專屬版權聲明,並按照文章內容設定風格與色彩。

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

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

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



1. 繳交作業方式



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

第二個作業FTP上的資料夾為:hw02

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

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

存放在 < hw02-學號 > 的資夾內



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-105xxxxxxx

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

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445004

(2).請回答以下問題:
1.製作主題 南條愛乃生日演唱會狀況整理
2.欲呈現之配色風格: 清新藍
3..有無遇到的問題? 無
4.製作感想 變得比較複雜 但還無大礙

作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445181
製作主題 :民宿
欲呈現之配色風格:咖啡色

有無遇到的問題?: 沒有
製作感想 :配色的時候很開心

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445034

1.製作主題:熊貓
2.欲呈現之配色風格:黑白
3..有無遇到的問題:預覽時有些東西未顯示出來
4.製作感想:相對於第一個作業,第二個作業比較花時間去做研究和看講義,但後來遇到的問題都解決了。

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445097/

1.製作主題:如何安排一天的作息?
2.欲呈現之配色風格:灰黑白/給人穩重的感覺
3..有無遇到的問題:顏色有點難配
4.製作感想:還不錯

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055440074

(2).請回答以下問題:
1.製作主題:休傑克曼
2.欲呈現之配色風格:簡約
3..有無遇到的問題:沒有
4.製作感想:大致上問題不大

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445106

(2).請回答以下問題:
1.製作主題 :認識攝影三要素
2.欲呈現之配色風格:科技感
3..有無遇到的問題? 無
4.製作感想 :對網頁設計目前都沒什麼大問題,會更用心的學習

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445037

(2).請回答以下問題:
1.製作主題 克里斯漢斯沃
2.欲呈現之配色風格: 色塊拼貼風
3..有無遇到的問題? 目前都很好
4.製作感想
我絕我自己比上次更加進步了這堂課真的很好玩我很喜歡

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445082

(2).請回答以下問題:
1.製作主題: 一個人吃飯容易憂鬱、也容易早死eye popping smiley
2.欲呈現之配色風格:讓人有多人一起吃飯的溫馨感 smiling bouncing smiley
3..有無遇到的問題:沒有什麼大問題confused smiley
4.製作感想:剛開始覺得複雜,現在開始慢慢上手了,要多注意小細節。hot smiley

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445010

(2).請回答以下問題:
1.製作主題 : 復古時尚
2.欲呈現之配色風格: 單色調為主
3..有無遇到的問題 : 無
4.製作感想 只要跟著老師的步驟就能順利完成作業

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445052

(2).請回答以下問題:
1.唐綺陽:市場可以淘汰我,但我不能淘汰自己
2. 用藍色來代表星座的神祕感
3.還可以沒什麼大問題smileys with beer
4.雖然剛開始比較難,但是後來越來越上手!希望期中作業我可以做得很順利!!spinning smiley sticking its tongue out

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445160

(2).請回答以下問題:
1.製作主題 :激勵
2.欲呈現之配色風格:自然中性
3..有無遇到的問題? :雖然便難了.可是做出來還是很有成就感
4.製作感想:學到更多了

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445190

(2).請回答以下問題:
1.製作主題 : 拉拉熊
2.欲呈現之配色風格: 拉拉熊身上的顏色
3..有無遇到的問題 : 無
4.製作感想 只要跟著老師的步驟就能順利完成作業

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445139

(2).請回答以下問題:
1.法式料理餐飲文化
2.紅酒&白香檳
3..無
4.很有趣

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445204

(2).請回答以下問題:
1.製作主題:六福村
2.欲呈現之配色風格:繽紛
3..有無遇到的問題? 變得有點難度,但大致上還是做得出來
4.製作感想:學會更多東西了

.作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445013

(2).請回答以下問題:
1.製作主題 亞利安納
2.欲呈現之配色風格: 迷幻
3..有無遇到的問題? 無
4.製作感想 變得比較複雜 但還是可以做完

作業網址 : http://mepopedia.com/~css106-2a/hw02/hw02-1055445091

1.主題 : 台灣黑熊
2.配色風格 : 熊和蜂蜜
3.有無遇到問題 : 容易打錯
4.感想 : 學到更多東西了

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445169

(2).請回答以下問題:
1.製作主題 小提琴
2.欲呈現之配色風格: 類似色搭配風格
3..有無遇到的問題? 比第一次少,只有一些小部分不小心打錯
4.製作感想 :感覺有慢慢熟悉這個軟體中



Edited 1 time(s). Last edit at 11/09/2017 12:35AM by 1055445169.
(編輯記錄)

作業網址:http://mepopedia.com/~css106-2a/hw02/hw02-1055445175/

1.主題:撒旦的情與慾
2配色風格:詭譎
3.無
4.感想:還行

作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445064

1.製作主題 :一起來科普:《冰與火之歌-權力的遊戲》中都有哪幾大家族?
2.欲呈現之配色風格: 以冷色調為主
3..有無遇到的問題?:目前沒有遇到什麼問題
4.製作感想 :感覺學到的東西越來越多了

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1035443128

1.製作主題:蒙德里安
2.欲呈現之配色風格:紅黃藍白黑
3..有無遇到的問題:無
4.製作感想:還可以會做

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445073

(2).請回答以下問題:
1.製作主題 : Madilyn Bailey
2.欲呈現之配色風格:神秘
3..有無遇到的問題?
4.製作感想 : 選顏色很難,有預視功能就好了.....
希望可以越來越進步...spinning smiley sticking its tongue out

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445178
(2).請回答以下問題:
1.製作主題 ED sheeran
2.欲呈現之配色風格:紅/白/黑來配色
3..有無遇到的問題? 還好無大礙
4.製作感想 製作過程挺好玩的我也挺享受的

1.作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445100

1.製作主題:咖啡廳
2.欲呈現之配色風格:藍灰色,想要有穩重的感覺
3..有無遇到的問題:
4.製作感想:雖然還是不太熟悉,但比較看得懂了

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445016

(2).請回答以下問題:
1.製作主題 GAI
2.欲呈現之配色風格: 輕鬆
3..有無遇到的問題? 沒太大問題
4.製作感想 其實很輕鬆

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445076

(2).請回答以下問題:
1.製作主題 INFINITE (韓國團體介紹)
2.欲呈現之配色風格: 珍珠金屬金色(Pearl Metal Gold)
3..有無遇到的問題? 沒有遇到甚麼太大問題
4.製作感想 覺得沒有太難 上課認真聽就會了~



Edited 2 time(s). Last edit at 11/16/2017 09:00AM by ukiss52007.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445103

(2).請回答以下問題:
1.製作主題 bts
2.欲呈現之配色風格: 炸彈風
3..有無遇到的問題? 沒有問題
4.製作感想 現在做越來越順手了



Edited 1 time(s). Last edit at 11/17/2017 07:34PM by LRU.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445148

(2).請回答以下問題:
1.製作主題 :明星大偵探 推理行綜藝節目
2.欲呈現之配色風格: 神秘
3..有無遇到的問題? 無
4.製作感想 色調不好抓

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-105445085

1.製作主題 飛輪海解散後各自做什麼?

2.欲呈現之配色風格:藍灰

3..有無遇到的問題? 一直卡住,排版置中的問題。

4.製作感想 這次的作業光配色就搞了我很久的時間,希望能有預視的功能,這樣就能先看到顏色比較好搭配,然後排版的時候很難把網頁致中在畫面上,文字都會整個滿版在畫面上讓我苦惱了很久。

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-105445112

(2).請回答以下問題:
1.製作主題 :尾田榮一郎
2.欲呈現之配色風格:沉穩
3..有無遇到的問題? 容易打錯
4.製作感想 應該還行

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445157/

1.製作主題:部落衝突
2.欲呈現之配色風格:簡簡單單 名寮清楚
3..有無遇到的問題: 顏色難配
4.製作感想:學到很多

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445055

(2).請回答以下問題:
1.製作主題:健康早餐
2.欲呈現之配色風格:早餐活力配色
3..有無遇到的問題:太多程式還不不太瞭繳
4.製作感想:蠻多程式看起來有點亂,不過還可以,希望上課能多點時間練習

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445088

1.製作主題: 那年花開月正圓
2.欲呈現之配色風格:黑白
3..有無遇到的問題:用的版本是創用cc版,跟上課比較不一 樣要用更多時間研究
4.製作感想:第二個作業比較花時間去看講義,然後細節地方比較多

(1).作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445043/


(2).請回答以下問題:
1、製作主題:為什麼無人夾娃娃機店越來越多?
2、欲呈現之配色風格:可愛、童趣的配色
3、有無遇到的問題:一開始wrapper怎麼調都是虛線,研究一番才發現改回實線這麼簡單。
4、製作感想:有了第一次作業為基礎,這次作業顯得熟悉許多。

作業網址 :http://mepopedia.com/~css106-2a/hw02/hw02-1055445007
製作主題 :田園風
欲呈現之配色風格: 暖色
有無遇到的問題?: 沒有
製作感想 :配色的時候很開心