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-2c/hw02/hw02-105xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

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

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



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

http://mepopedia.com/~css106-2c/hw02/hw02-1055445192
(2).請回答以下問題:
1.製作主題 頑童mj116
2.欲呈現之配色風格:粉嫩馬卡龍
3..有無遇到的問題? 無
4.製作感想 比起前幾次製作比之前順利太多了



Edited 4 time(s). Last edit at 11/07/2017 11:43PM by 邱翊淇.
(編輯記錄)

http://mepopedia.com/~css106-2c/hw02/hw02-1055445105
(2).請回答以下問題:
1.製作主題 小熊維尼
2.欲呈現之配色風格:維尼配色
3..有無遇到的問題? 無
4.製作感想 學到很多

http://mepopedia.com/~css106-2c/hw02/hw02-1055445057
(2).請回答以下問題:
1.製作主題 玩具總動員
2.欲呈現之配色風格:胡迪配色
3..有無遇到的問題? 無
4.製作感想 雖然還是很難但是還是學到很多

http://mepopedia.com/~css106-2c/hw02/hw02-1055445141
(2).請回答以下問題:
1.製作主題 小賈斯汀
2.欲呈現之配色風格:灰色酷炫風
3..有無遇到的問題? 無
4.製作感想 很順利

http://mepopedia.com/~css106-2c/hw02/hw02-1055445206
1.製作主題 田馥甄-Hebe
2.欲呈現之配色風格:酒紅色
3.有無遇到的問題? 無
4.製作感想

1.天天保養皮膚還是差 保養步驟做對了嗎?

2.粉黃根粉紅的少女風格 因為通常會看這種網站的女生 幾乎都是剛開始學保養的少女

3 我的作業一直傳不上FileZilla 因為一直找不到網頁設計的軟體載點 所以都要在圖書館 做作業常常都做得很趕

4.覺得自己做了一個簡單的網頁 很有成就感

作業網址J:\hw02-1055445205\Untitled-1.html



Edited 1 time(s). Last edit at 11/15/2017 05:33PM by 1055445205.
(編輯記錄)

http://mepopedia.com/~css106-2c/hw02/hw02-1055445030

1.製作主題 忍者哈特利
2.欲呈現之配色風格:忍者日式淡雅風格
3..有無遇到的問題? 顏色一直無法連結
4.製作感想 體悟到很多 天啊



Edited 1 time(s). Last edit at 11/15/2017 11:58PM by yojune214.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題 :ikea對中國客服道歉新聞
2.欲呈現之配色風格: 使用IKEA配色來表達新聞主題
3..有無遇到的問題? 沒有問題
4.製作感想 能加點圖上去就更好了

http://mepopedia.com/~css106-2c/hw02/HW02-1055445156



1.製作主題 : 熊熊遇見你卡通動畫介紹
2.欲呈現之配色風格: 電玩童趣粉嫩風
3..有無遇到的問題? 遇到一些小物件少打導致整個 網頁有問題
4.製作感想 跟著老師步驟做學到頗多,但是還是要細心的找出東西



Edited 4 time(s). Last edit at 11/01/2017 12:03PM by 高慎妤.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題 :劉以豪 韓系靦腆男孩
2.欲呈現之配色風格: 用深藍色系列
3..有無遇到的問題? 傳作業時,遇到檔案有問題
4.製作感想:希望以後可以跟得上老師的步驟 一步一步的練習

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

(2).請回答以下問題:
1.製作主題 :小魔女DO RE MI
2.欲呈現之配色風格: 粉色風格
3..有無遇到的問題? 無
4.製作感想:我覺得有點慢慢上手了!!希望之後的作業可以更順利

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

(2).請回答以下問題:
1.製作主題:I phone8手機亮相
2.欲呈現之配色風格:藍色
3..有無遇到的問題?暫時沒有,只怕之後跟不上
4.製作感想:有學到東西

http://mepopedia.com/~css106-2c/hw02/Hw02-1055445078


(2).請回答以下問題:
1.製作主題 兩性文章
2.欲呈現之配色風格: 粉色系
3..有無遇到的問題? 沒有
4.製作感想 不錯學到很多



Edited 1 time(s). Last edit at 11/01/2017 11:26AM by 林笠瑄1055445078.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題: IKEA推出寵物傢俬!
2.欲呈現之配色風格: 以IKEA的標準色作為整個網頁的底色
3..有無遇到的問題? 無
4.製作感想:跟上老師的步驟,越來越上手了

(1).作業網址 :http://mepopedia.com/~css106-2c/hw02/hw02-1055445054
(2)
1.製作主題: 偶像劇
2.欲呈現之配色風格:冷色系的風格~搭配劇情顏色
3..有無遇到的問題? 忘記了在 header設padding 每次預覽上面都有空隙~
4.製作感想學這個網頁設計 需要非常專注的檢查 要不然會漏掉很多東西~~

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

(2).請回答以下問題:
1.萬聖節星冰樂
2.萬聖節風smileys with beer
3.有時候會打錯英文就會跑不出來 文字 還有字的距離我都還要在多深入了解一下hot smiley
4.做完都超有成就感derspinning smiley sticking its tongue out

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

(2).請回答以下問題:
1.製作主題
拉拉熊京都風主廳餐廳開幕囉!

2.欲呈現之配色風格:
配合可愛拉拉熊的甜美粉嫩配色

3..有無遇到的問題?
配色比想像中的難搭配,需要每個顏色都嘗試過後,才能選到最理想的配色

4.製作感想
一步一步跟著老師的進度,期望自己的期中作業能夠做的達到自己的理想.

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

(2).請回答以下問題:
1.製作主題:7家藥妝店之推銷手法
2.欲呈現之配色風格: 以屈成式的顏色為風格
3..有無遇到的問題? 目前還沒
4.製作感想:調整成自己喜歡的樣式覺得心滿意足

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

(2).請回答以下問題:
1.製作主題 :卡娜赫拉與他的小動物們
2.欲呈現之配色風格:可愛的風格就跟卡娜赫拉他畫的圖一樣可愛,用粉紅色藍色及淡淡的馬卡龍黃呈現甜甜的感覺
3..有無遇到的問題? 目前沒有
4.製作感想:其實大部分我都是看學長姐的作品跟看老師的影片,然後自己摸索弄一弄的...

http://mepopedia.com/~css106-2c/hw02/hw02-1055445021

主題:新藝術運動

呈現配色風格:帶著輕鬆明亮有點小藝術的色調

遇到的困難沒又打到 div 差蠻多的

感想:做完後覺得很有成就感,謝謝老師!



Edited 2 time(s). Last edit at 11/07/2017 04:34PM by mepoadm.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題 麻醉風暴2 血淋淋過2個月 李國毅急診室裡磨演技
2.欲呈現之配色風格:藍黑黃風格很像電線桿的配色
3..有無遇到的問題? 無
4.製作感想:謝謝老師每次上課都很認真教我們網頁,雖然很多網頁的術語記不太住,但我覺得應該還是可以記得住。

http://mepopedia.com/~css106-2c/hw02/hw02-1055445150

1.製作主題
我以旅遊參考網頁為發想,所以做了最近去過的台南景點網站。
2.欲呈現之配色風格
配色以褐色為主,想呈現古物的濁色系。
3..有無遇到的問題?
有點不知道要怎麼樣把自置中。
4.製作感想
既第一次作業後,覺得第二作業已經可以很上手了,但還是不太有自己的想法,還是需要看參考。

作業網址:http://mepopedia.com/~css106-2c/hw02/hw02-1055440122/

1.製作主題: 飛虹國際整合行銷- 借錢創業 翻身年營收逾2億老闆
2.欲呈現之配色風格: 冷色系
3.有無遇到的問題? 常常忘記要加「;」這個符號,沒有加「;」語法就不會跑出來,
         當時就會很慌張覺得自己做錯了。
4.製作感想:這次的作業花的時間不多,有種漸入佳境的感覺~
      謝謝老師細心教導!

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

1.介紹南投國姓景點
2.舒服.森林與山的感覺
3.沒有
4.真的超級有趣尤其是看到網頁的那一刻

http://mepopedia.com/~css106-2c/hw02/hw02-1055445183

1.製作主題:日本旅遊
2.欲呈現之配色風格: 卡哇伊的粉紅色
3..有無遇到的問題? :語法好難懂
4.製作感想:網頁設計好難

http://mepopedia.com/~css106-2c/hw02/hw02-1055445168

(2).請回答以下問題:
1.製作主題 : 包浩斯
2.欲呈現之配色風格:藍色系
3..有無遇到的問題? 沒有
4.很容易打錯或是漏掉東西,需要在細心一點,

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

(2).請回答以下問題:
1.製作主題: 食安
2.欲呈現之配色風格: 想要讓人有注意的感覺,所以選擇黃色家橘色在配上偏紅的點點
3..有無遇到的問題? 不知道點點如何用出,但後來知道了
4.製作感想:覺得學到的東西更多了,希望不要忘記,看到完成了覺得開心

(1).作業網址 :http://mepopedia.com/~css106-2c/hw02/hw2-1055445003
1.製作主題 : 甜點工作室
2.欲呈現之配色風格: 暖色 有氣氛 好吃
3..有無遇到的問題? 無
4.製作感想 對網頁設計越來越有興趣



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

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

(2).請回答以下問題:
1.製作主題
秋風起柿子甜 嘉義柿紅妝點番路鄉
2.欲呈現之配色風格
秋天的感覺
3..有無遇到的問題?
在DW裡做的跟在預覽成網頁時不一樣
就是我在軟體做時旁邊顯示的是正常的,但用成網站看時邊框和footer是分開的
4.製作感想
有越來越上手的感覺

作業網址 :http://mepopedia.com/~css106-2c/hw02/hw02-1055445060

1.製作主題:台灣小吃
2.欲呈現之配色風格:炸雞珍奶的顏色(好啦~就暖色調拉~
3..有無遇到的問題? 好像沒有呢~
4.製作感想:不是我在講...我真的很棒,老師妳也很棒!

作業網址 :http://mepopedia.com/~css106-2c/hw02/hw02-1035445036

1.製作主題:靈魂學說

2.欲呈現之配色風格:紅色、粉紅色系,溫暖的感覺。

3.有無遇到的問題?:在圖書館使用圖書館的電腦,除了碰到電腦當機以及身旁的使用者一邊打LOL一邊吃東西且大聲喧嘩罵三字經國話等或霸佔電腦座位睡覺之外,目前製作方面安好。

4.製作感想:這是色彩學老師和其他設計師看到後會跳出來給我一拳的設計風格,雖然改過很多次,但還是醜不拉機的,且越改越醜,索性每個邊都給他加外框效果好了(擺爛中),顏色別再調,越改越奇怪,因該除了每做一個階段要記得存檔外還要另存新檔,才不會想改回之前的樣式時才發現一些部份改不回去,只好繼續往下製作,遇到不會製作的部分還可以看教學影片,謝謝老師執導~。

作業網址 :http://mepopedia.com/~css106-2c/hw02/hw02-1055445120

1.製作主題 :養貓新手上路
2.欲呈現之配色風格: 黃橘色
3..有無遇到的問題? 無
4.製作感想:會做網頁了很棒

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

(2).請回答以下問題:
1.製作主題 :介紹九份
2.欲呈現之配色風格: 溫暖的風格
3..有無遇到的問題?我覺得配色非常的花時間
4.製作感想:做出來很有成就感

http://mepopedia.com/~css106-2c/hw02/hw02-1055445063
謝謝老師

1.製作主題 :小小兵
2.欲呈現之配色風格: 以小小兵的對比色為主
3..有無遇到的問題? 無
4.製作感想:沒有想像中難,其實還蠻有趣的。



Edited 1 time(s). Last edit at 11/13/2017 09:50AM by 1055445063.
(編輯記錄)

作業網址 :http://mepopedia.com/~css106-2c/hw02/hw02-1055445042
1.製作主題 : 登革熱
2.欲呈現之配色風格: 清晰健康風
3..有無遇到的問題? : 目前應該沒有
4.製作感想 : 超級複雜,努力學習中

http://mepopedia.com/~css106-2c/hw02/hw02-1055445135


(2).請回答以下問題:
1.製作主題 怪奇物語
2.欲呈現之配色風格:深紅粉為主
3..有無遇到的問題? 無
4.製作感想 學到很多



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

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

(2).請回答以下問題:
1.製作主題 :明星的介紹
2.欲呈現之配色風格:藍色系列
3..有無遇到的問題? 無
4.製作感想 謝謝老師

http://mepopedia.com/~css106-2c/hw02/hw02-1055445045

謝謝老師

1.製作主題:你的名字。
2.欲呈現之配色風格:以你的名字。裡面的欸彗星顏色配色
3..有無遇到的問題? 無
4.製作感想:非常棒



Edited 1 time(s). Last edit at 11/13/2017 09:46AM by 1055445045.
(編輯記錄)

作業網址 :http://mepopedia.com/~css106-2c/hw02/hw02-1055445207

請回答以下問題:
1.製作主題 火影忍者
2.欲呈現之配色風格: 暖色
3..有無遇到的問題? 沒有
4.製作感想 謝謝老師

http://mepopedia.com/~css106-2c/hw02/hw02-1055445135
1.製作主題 怪奇物語
2.欲呈現之配色風格: 紅血色
3..有無遇到的問題? 無
4.製作感想 一開始覺得很困難但跟著一步一步做之後覺得還可以 蠻好玩



Edited 1 time(s). Last edit at 11/13/2017 09:28PM by stelas0309.
(編輯記錄)

http://mepopedia.com/~css106-2c/hw02/hw02-1055443120
主题 iphone X 卡顿问题
风格 沉稳
问题 无
感想 感觉难度比作业1低



Edited 1 time(s). Last edit at 11/14/2017 03:45AM by 1055443120.
(編輯記錄)

http://mepopedia.com/~css106-2c/hw02/hw02-1055443126
主题 宫崎骏新作《你们想活出怎样的人生》(君たちはどう生きるか)
风格可爱
问题 没有
感想 稍微熟悉dw制作简单网页 收益颇多



Edited 2 time(s). Last edit at 11/14/2017 10:52PM by 1055443126.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:Shawn Mendes "Imagination"
2.欲呈現之配色風格:簡約風
3.有無遇到的問題:無
4.製作感想:十分有趣,成果不錯