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

Advanced

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

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

製作說明


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

2.每個同學記得在title的部分打上"視傳二A-學號-以色塊建構的網頁單欄排版",或其他適合的名稱

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

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

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

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

(1)DIV與CSS的設定
(2)利用單純色彩搭配與字體設定,針對內容設計出符合主題並具有質感的網頁



1. 繳交作業方式



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

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

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

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

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



2.上傳至FTP

3.回覆本篇文章

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


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




同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/

===========================================
請務必在下次上課前回覆,否則為遲交,扣十分
===========================================

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


(2).請回答以下問題:
1.製作主題:初體驗。
2.欲呈現之配色風格:孩童的時光配色
3..有無遇到的問題? 基本上很清楚明瞭。
4.製作感想
剛開始製作不知道這是在做甚麼,但熟悉框架的組成要素後不僅容易找到修改地方,也能夠運用自如。

學號:1035445115



Edited 1 time(s). Last edit at 10/20/2015 04:25PM by kelly270.
(編輯記錄)

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445166/


(2).請回答以下問題:
1.製作主題:必勝客。
2.欲呈現之配色風格:基本的紅白配色
3..有無遇到的問題? 其實一開始問題有點多 後來因同學教導 沒問題了
4.製作感想
一開始覺得很難 後來知道有個規律後就比較簡單了 把東西丟到應該的位置就可以了

學號:1035445166

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


(2).請回答以下問題:
1.主題;跟著課堂練習
2.欲呈現之配色風格:橘白現代風
3..有無遇到的問題? 因為跟著課堂做的沒有什麼問題
4.製作感想
覺得很神奇

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


(2).請回答以下問題:
1.英國歌手BIRDY
2.欲呈現之配色風格:因為BIRDY的歌聲是屬於滄桑的感覺所以我用灰白作為配色
3..有無遇到的問題?
file:///C:/Users/A/Desktop/1444716483821.jpg
4.製作感想
有些地方需要想一下

(1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445142/
1.製作主題: 麥可·喬丹
2.欲呈現之配色風格: 黃黑對比.強烈視覺
3..有無遇到的問題? 有些語法名詞英文看不是很懂
4.製作感想
有些地方還是不太會...須加強.....sad smiley



Edited 3 time(s). Last edit at 10/22/2015 04:22PM by 1035445142.
(編輯記錄)

1.作業網址: http://mepopedia.com/~web104-2a/hw02/hw02-1-1035445094/
2.製作主題:bibi之家-關懷流浪犬
3.欲呈現之配色風格: 底色為黃色,就像向日葵能溫暖我們一樣,
希望bibi流浪之家的官網能讓更多的貓咪.狗狗,
也能有屬於他們溫暖的家
4..有無遇到的問題:有時候語法會搞不清楚,尺寸會記錯
5.製作時間: 12hr
6.製作感想: 有點困難,每次都花好多時間在製作網頁

1035445094 陳欣函



Edited 2 time(s). Last edit at 10/19/2015 11:05PM by 1035445094.
(編輯記錄)

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


(2).請回答以下問題:
1.製作主題:歌手介紹Skylar Grey
2.欲呈現之配色風格:憂傷配色
3..有無遇到的問題? 基本上很清楚明瞭。
4.製作感想
剛初步製作時,會不太了解,但經過一段時間就可以比較上手的製作了。

(1)作業網址:http://mepopedia.com/~web104-2a/1035445181

(2)請回答以下問題:
1.製作主題:團體介紹KAT-TUN
2.欲呈現之配色風格:搖滾 黑色系
3..有無遇到的問題? 語法方面有些不了解的地方
4.製作感想:分成好多個部分,做了好幾次才成功。

1.作業網址: http://mepopedia.com/~web104-2a/hw02/hw02-1035445037
3.欲呈現之配色風格:使用亮色系,想呈現活潑的感覺!
4..有無遇到的問題:有失敗一次,第二次做才成功!
5.製作時間: 4hr
6.製作感想: 覺得很有趣
1035445037



Edited 1 time(s). Last edit at 10/20/2015 04:53PM by 1035445037.
(編輯記錄)

(1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445076/
(2).請回答以下問題:
1.製作主題:史奴比
2.欲呈現之配色風格:灰白紅 按照史奴比感覺去配色
3..有無遇到的問題? 換頁的部分不是很熟悉
4.製作感想
知道裡面的訣竅之後就慢慢可以自由創作~
學號:1035445076 曾艾茹



Edited 1 time(s). Last edit at 10/27/2015 04:21PM by danbing.
(編輯記錄)

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


(2).請回答以下問題:
1.製作主題:充滿死亡的氣息
2.欲呈現之配色風格:哀傷
3..有無遇到的問題? 基本上很清晰明白,跟著老師的步驟一步一步的製作。
4.製作感想
剛開始要開起很多檔案覺得複雜,上手之後覺得很簡易。

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445025


(2).請回答以下問題:
1.製作主題:菲利普·斯塔克
2.欲呈現之配色風格:簡約
3..有無遇到的問題?
4.製作感想
有些東西都是重複的蠻容易上手

學號:1035445025

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


(2).請回答以下問題:
1.製作主題 :
文藝復興大師提香Titian
2.欲呈現之配色風格:
堤香的畫作大多主要以橄欖綠等低彩度配色,背景中帶點橘紅色,因此想配合堤香的畫作,做出秋天配色和低調的感覺。
3..有無遇到的問題?
找自己打錯的語法找很久......
4.製作感想 :
以前沒學過網頁設計,之前還以為只是一職無聊的打語法,但現在還覺得挺有趣的,希望課堂上能學到更多。

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


(2).請回答以下問題:

1.製作主題

泰勒斯

2.欲呈現之配色風格

為高貴的優雅紫 搭配柔軟的粉色 呈現泰勒斯給人小清新和高雅的感覺。


3..有無遇到的問題?

會忘記要怎麼連結css 把自己困擾死。

4.製作感想

做完會很有成就感~~

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


(2).請回答以下問題:

1.製作主題:弦外之音吉他社
2.欲呈現之配色風格: 低調的灰然後加一點淺黃才不會讓整個畫面太暗
3..有無遇到的問題? :一開始存檔案忘記選擇css
4.製作感想 :終於做完看到成品覺得有成就感

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


(2).請回答以下問題:
1.製作主題:格林童話
2.欲呈現之配色風格:神秘的氣氛
3..有無遇到的問題? 目前沒有
4.製作感想 :
因為老師上課有教在wapper裡的加外框的設計,可是我試了很多種都不太喜歡,所以就沒加入了,應該可以吧?

學號:1035445154

>grinning smiley<



Edited 2 time(s). Last edit at 10/25/2015 12:19PM by 1035445142.
(編輯記錄)

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


(2).請回答以下問題:
1.製作主題:
第一次做很新奇
2.欲呈現之配色風格:
情歌夢幻的感覺
3..有無遇到的問題?
大概能理解
4.製作感想
剛開始製作不知道這是在做甚麼...後來看教材就懂ㄌspinning smiley sticking its tongue out

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


(2).請回答以下問題:
1.製作主題 :貓的報恩
2.欲呈現之配色風格: 配色採用貓的報恩有一幕主角從高塔掉下來,藍色背景代表天空,橘色代表貓咪
3..有無遇到的問題? 沒有太大的問題
4.製作感想
比上次做得好看有點小開心,希望以後更好看~


學號:1035445214

(1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445157/
1.製作主題: 五月天
2.欲呈現之配色風格: 因為五月天的演唱會都是使用藍色螢光棒,所以用藍色表現。
3..有無遇到的問題? 有些英文看不太懂
4.製作感想:有些地方還是有點困難哈哈

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


(2).請回答以下問題:
1.製作主題:
蘋果之神 賈伯斯
2.欲呈現之配色風格:
黑 橘黃 紅 強烈時尚的視覺效果
3..有無遇到的問題?
有些地方還是很生疏 需要多次一點的操作
4.製作感想
一開始真的是一個頭兩個大 都搞不太清楚該怎麼做 可是經過來回的操作 終於有點知道在幹嘛了 總之 看到一堆英文就想睡了

學號:1035445001

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

(2).請回答以下問題:
1.製作主題:google
2.欲呈現之配色風格:google科技感
3..有無遇到的問題? 沒有
4.製作感想 :
對於語法有比較熟悉操作上也更熟了

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


(2).請回答以下問題:
1.製作主題:黃麗玲 A-lin
2.欲呈現之配色風格:暗色調,較有神祕感。
3..有無遇到的問題? 無。
4.製作感想 :一開始,有些混亂,但後面就上手了。


1035445178



Edited 4 time(s). Last edit at 10/26/2015 10:12PM by 1035445178.
(編輯記錄)

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


(2).請回答以下問題:
1.製作主題:蘇打綠
2.欲呈現之配色風格:黑暗色系優雅的風格。
3.有無遇到的問題? 缺乏對語法的熟悉度。
4.製作感想
每次製作網頁,需要好好研究語法,才能越來越熟悉。

學號:1035445088

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


(2).請回答以下問題:
1.製作主題 :全球暖化
2.欲呈現之配色風格: 採用暖色調
3..有無遇到的問題? 基本上沒有問題
4.製作感想
網頁架構做得越來越完整了

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


(2).請回答以下問題:
1.製作主題:地球
2.欲呈現之配色風格:地球顏色
3..有無遇到的問題? 顏色方面,怎麼配都覺得很奇怪。
4.製作感想
顏色好難配,還有語法方面我需要再加強。

學號:1035445211

(1).作業網址::http://mepopedia.com/~web104-2a/hw02/hw02-1035445172
(2).請回答以下問題:
1.製作主題:怪獸大學
2.欲呈現之配色風格:毛怪配色
3..有無遇到的問題? 沒有
4.製作感想:有點複雜,但經過練習了解後,還算可以。



Edited 1 time(s). Last edit at 10/27/2015 03:15AM by 邱薏娟.
(編輯記錄)

1).作業網址::http://mepopedia.com/~web104-2a/hw02/hw02-1035445145
(2).請回答以下問題:
1.製作主題:Kitty貓主題餐廳
2.欲呈現之配色風格:粉紅系配色
3..有無遇到的問題? 無
4.製作感想:一開始還是覺得很複雜又困難,也覺得架設網站很困難,但是經過這幾次的練習,
對架設網站更了解,也覺得越來越簡單跟上手。



Edited 1 time(s). Last edit at 10/27/2015 03:15AM by 張子芸.
(編輯記錄)

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


(2).請回答以下問題:
1.製作主題:聶永貞設計師介紹
2.欲呈現之配色風格:配色屬於較清寒冷酷的顏色
3..有無遇到的問題? :對於CSS的語法使用還是有點陌生
4.製作感想 :慢慢開始對網頁設計有些興趣\

1035445163傅泰誠



Edited 1 time(s). Last edit at 10/27/2015 09:24AM by 1035445163.
(編輯記錄)

(1).作業網址sad smiley1).作業網址: http://mepopedia.com/~web104-2a/hw02/hw02-1035445169

(2).請回答以下問題:
1.製作主題 : 認識古典音樂
2.欲呈現之配色風格:運用咖啡色與鵝黃色來呈現古典高雅之氣息
3..有無遇到的問題? 過程仍有點生疏
4.製作感想 :一步步的做與檢查才不易出錯,心急會使自己耐不住性子。慢慢的會發現其實步驟都一樣~

學號:1035445169



Edited 1 time(s). Last edit at 10/27/2015 02:51PM by jian1110.
(編輯記錄)

http://mepopedia.com/~web104-2a/hw02/hw02-1035445034/
(1).作業網址:http://life.tw/?app=view&no=12681


(2).請回答以下問題:
1. 雙魚座終極完美分析
2.欲呈現之配色風格:因為雙魚座是水象的 所以藍色調
3..有無遇到的問題?
沒有
4.製作感想
配色很難

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


(2).請回答以下問題:
1.音樂製作人
2.葡萄
3..無
4.好玩

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


(2).請回答以下問題:
1.製作主題: 植田正治
2.欲呈現之配色風格:以黃橘作配色,繽紛亮麗的感覺
3..有無遇到的問題? 常會把文字放置處忘記放哪
4.製作感想
有很多程式碼看到我眼花,一直放錯

學號:1035445010

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445208


(2).請回答以下問題:
1.製作主題: 巧克力
2.欲呈現之配色風格:咖啡色粉粉的感覺
3..有無遇到的問題? 沒有吧
4.製作感想
我喜歡吃巧克力

1035445208

(1).作業網址: http://mepopedia.com/~web104-2a/hw02/hw02-1035445130/
(2).請回答以下問題:
1.製作主題:
你是什麼人,便會吸引到什麼人
2.欲呈現之配色風格:
桃粉色系搭配黑色;表現華麗又具有個性之風格
3..有無遇到的問題?
很清楚
4.製作感想
經過一次一次不斷重複使用語法,觀念更加清楚

學號:1035445130

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

(2).請回答以下問題:
1.製作主題 小熊維尼
2.欲呈現之配色風格: 暖色系
3..有無遇到的問題? 有些地方還是要了解多次
4.製作感想 : 一開始有點混亂 要多做幾次的操作才知道在做什麼

學號:1035445199

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


(2).請回答以下問題:
1.製作主題:致 第三者
2.欲呈現之配色風格:溫暖色系
3..有無遇到的問題? 語法分辨較難了解 需要時間
4.製作感想
能製作一個屬於自己的網頁,這門課的學習很實用。

學號:1035445067

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


(2).請回答以下問題:
1.製作主題:糖果
2.欲呈現之配色風格:溫暖色系
3..有無遇到的問題? 需要時間看步驟
4.製作感想
能到學到實用技能

學號:1035445187

作業網址:
http://mepopedia.com/~web104-2a/hw02/hw02-1035445121/

1.製作主題:
網站
2.欲呈現之配色風格:
背景-白 上下框-粉 ,簡單的風格
3.有無遇到的問題?
無問題
4.製作感想
非常有趣

學號:1035445121

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445196/


(2).請回答以下問題:
1.製作主題:少女時代。
2.欲呈現之配色風格:基本的粉紅配色
3..有無遇到的問題? 問題有點多 然後又因為忙活動的事 所以有些都沒有學到 還在摸索當中
4.製作感想
一開始覺得很難 也正在摸索當中 希望完成之後能夠有些上手

學號:1035445196

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
這次是單純以改變色塊的顏色為主,然後還要改變裡面的內容,覺得目前都還在可消化的範圍內...

1035445070 視傳2A 戰安榮

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445079/


(2).請回答以下問題:
1.製作主題:閃爍的二次愛戀。
2.欲呈現之配色風格:基本的粉紅配色
3..有無遇到的問題? 問題有點多 然後又因為忙活動的事 所以有些都沒有學到 還在摸索當中 ,老師上課都跟不上進度
4.製作感想
希望老師數度在慢一點, 一開始覺得很難 也正在摸索當中 希望完成之後能夠有些上手

學號:1035445079

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445124/

(2).請回答以下問題:
1.製作主題: m.studios。
2.欲呈現之配色風格:基本的粉紅配色
3..有無遇到的問題? 問題有點多 進度跟不上
4.製作感想
希望老師數度在慢一點

學號:1035445124 謝采軒



Edited 1 time(s). Last edit at 11/13/2015 10:12PM by zoey.
(編輯記錄)

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


(2).請回答以下問題:
1.製作主題:史努比
2.欲呈現之配色風格:充滿夢幻的黃色
3..有無遇到的問題? 基本上很清楚明瞭。
4.製作感想
有比較熟悉了,做完以後覺得挺有趣的!

學號:1035445031

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

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


視傳二A 10354445103

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

(2).請回答以下問題:
1.製作主題 :螢火蟲之墓
2.欲呈現之配色風格: 和平的綠、希望的黃,在戰爭中最渴望的就是這兩個要素,讓觀者看到後不會過於沉悶,而是反思
3..有無遇到的問題? 製作上還行
4.製作感想 要多次檢查有無錯誤

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

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

1.主題是:乙一的其中一本小說ZOO。
2.配色是以黑色和紅色、黃白搭配。
3.感覺有點小問題,但和同學一起討論後就沒問題了。
4.感覺還蠻有成就感的,因為稍微有些網頁的樣子了。

學號:1035445055



Edited 1 time(s). Last edit at 01/05/2016 08:43PM by happy02.
(編輯記錄)

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


(2).請回答以下問題:
1.製作主題:川島小鳥
2.欲呈現之配色風格:藝術感
3..有無遇到的問題? 剛學覺得累。
4.製作感想


學號:1035445049