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

Advanced

[作業06] 表格的製作美化與資料整理

[作業06] 表格的製作美化與資料整理

請參考

[講義06] 表格的製作
http://mepopedia.com/forum/read.php?804,18062


本講義範例網址
http://mepopedia.com/~jinjin/web/hw06-ex/



的步驟製作,並符合以下條件:

1. 一、製作步驟


1.下載講義中附件的練習檔(或自行設計,必須是全新的內容的一頁)

2.找文字及圖片資料,並設定#header的標題與副標題

3.重新設定#content及#footer的CSS,可參考影音步驟,但不可為一樣的設定

Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko



4.製作並以美化表格,將資料以表格做整理


Dreamweaver表格製作-TABLE,TR TD TH caption的CSS設定

http://www.youtube.com/watch?v=3gPx_YYE1yI






Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定

http://www.youtube.com/watch?v=69CMaum2WPY






Dreamweaver中表格CSS設定以及影音嵌入

http://www.youtube.com/watch?v=lXMUKwYmBqQ






5.在title的部分打上『自己作業的命名』

6.在#footer打上自己的版權聲明

7.請每位同學依步驟完成本單元後,上傳至FTP

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

(1 )資料整理,表格製作與美化
(2 )利用CSS,做更細緻的網頁美化設定
(4 )如何利用表格,將圖片、影音與文字的編排搭配出有質感的網頁。





2. 二、繳交作業方式



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

第六個平時作業FTP上的資料夾為:hw06

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

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
2.有無遇到的問題?
3.製作感想
4.製作作業的時間


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



(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1015448146 (進入後請點works)

(2).請回答以下問題:
1.網頁主題:梵谷 配色與風格設定:主要以藍色為主 (畫作_星空 的配色)
2.有無遇到的問題? 目前沒有
3.製作感想: 多了表格 網頁看起來乾淨多了
4.製作作業的時間 :2小時

(1).作業網址 :http://mepopedia.com/~web104-2b/hw06/hw06-1035445140

(2).請回答以下問題:
1.網頁主題:哆啦a夢
配色與風格設定:可愛
2.有無遇到的問題? 無
3.製作感想 :雖然做起來很麻煩,不過瀏覽起來方便許多了!
4.製作作業的時間 :2.5小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445002


(2).請回答以下問題:
1.網頁主題: 配色與風格設定:莫內
2.有無遇到的問題? 無
3.製作感想 :沒想到表格做起來那麼累,但東西整齊多了!
4.製作作業的時間 :2小時



Edited 1 time(s). Last edit at 12/16/2015 05:37PM by 1034445002.
(編輯記錄)

1035445218 柯惠文

作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445218

請回答以下問題:
1.網頁主題: 配色與風格設定: 依舊角落生物
2.有無遇到的問題? 無
3.製作感想 :角落生物的資料真的很少,很懷疑可不可以完整製作到期末。
4.製作作業的時間 :1.5小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445152

(2).請回答以下問題:
1.網頁主題:LINE 配色與風格設定:亮綠色
2.有無遇到的問題? 無
3.製作感想: LINE的資料很多,很難抉擇要放什麼
4.製作作業的時間 :2小時

(1).作業網址 :http://mepopedia.com/~web104-2b/hw06/hw06-1035445176/video.html
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:Vespa 黑白
2.有無遇到的問題? 無
3.製作感想 :有表格看起來很整齊
4.製作作業的時間 :1小時



Edited 1 time(s). Last edit at 12/16/2015 07:27PM by star0106w.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445131 (進入後請點story)

(2).請回答以下問題:
1.網頁主題:星座
配色與風格設定:以深蓝色为主,代表星座的风格
2.有無遇到的問題? 沒有
3.製作感想: 按钮很有趣,很多变化。
4.製作作業的時間 :2小時



Edited 2 time(s). Last edit at 12/16/2015 07:50PM by 吳寶蓉.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445086/video.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:燒烤
2.有無遇到的問題? 無
3.製作感想 :整個做完了,上傳之後,整個又都會跑到左邊不是置中的。
4.製作作業的時間 :3個小時



Edited 1 time(s). Last edit at 12/16/2015 07:42PM by 1035445086.
(編輯記錄)

1035445113 黃士釗

作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445113

請回答以下問題:
1.網頁主題: 台灣毒蛇 配色與風格設定: 綠色
2.有無遇到的問題? 無
3.製作感想 :一堆css快亂了
4.製作作業的時間 :4小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445041

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:黑白
2.有無遇到的問題? 無
3.製作感想 :不錯
4.製作作業的時間 :半小時

1035445059 翁健瑋
作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445059

請回答以下問題:
1.網頁主題: 配色與風格設定: 使用番茄的配色來做
2.有無遇到的問題? 無
3.製作感想 :覺得很有成就感,因為在自己的店裡打工所以做起來特別好玩。
4.製作作業的時間 :10分鐘

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445134 (Article)


(2).請回答以下問題:
1.網頁主題:Woods on fires專輯介紹
配色與風格設定:從整張專輯的風格配色做發想
2.有無遇到的問題: 表格的一些細節設定較為繁瑣, 要耐心
3.製作感想:其實製作表格並不難,只要肯花時間和耐心
4.製作作業的時間 :2小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445194

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 胖吉貓介紹。柔和繽紛的色彩表現溫馨可愛的風格。
2.有無遇到的問題? 無
3.製作感想 :表格很方便整理
4.製作作業的時間 :1~2小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445053 (進入後請點works)

(2).請回答以下問題:
1.網頁主題:辛普森家庭
配色與風格設定:以黃色調為主,符合主題
2.有無遇到的問題? 沒有
3.製作感想: 因為表格的整理讓人物介紹更整齊,也讓人一目了然
4.製作作業的時間 :2小時

1035445056陳冠霖

作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445056

請回答以下問題:
1.網頁主題: 綠色系列
2.有無遇到的問題? 無
3.製作感想 : 設想配色花了許多時間,因為這個主題可以使用的顏色其實都為淡色系列、但最終決定使用綠色來做搭配。
使用表格這方面我很喜歡、讓資料更整齊覺得很好。
4.製作作業的時間 :2小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445200 (進入後請點story)

(2).請回答以下問題:
1.網頁主題:插畫家#南瓜子
配色與風格設定:以背景的顏色搭配方式為主,
2.有無遇到的問題? 沒有
3.製作感想:表格看起來很整齊。
4.製作作業的時間 :2小時

(1).作業網址 http://mepopedia.com/~web104-2b/hw06/hw06-1035445026

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 顏色取自加菲貓的深淺橘色
2.有無遇到的問題? 表格的邊框的消除
3.製作感想 加入表格後語法更複雜了
4.製作作業的時間 零散幾小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445158 (進入網頁後,點works是這次的作業內容)

(2).請回答以下問題:
1.網頁主題:設計師介紹。
配色與風格設定:依設計師的專業服裝編織與圖片顏色的主色調褐色,定出網頁的風格。
2.有無遇到的問題:目前無遇到問題。
3.製作感想 :這次的表格作業學到了新內容,讓網頁做的更精緻,更有成就感。
4.製作作業的時間 :1~2小時。

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445068 (進入網頁後,點story是這次的作業內容)

(2).請回答以下問題:
1.網頁主題:小熊維尼歷險記。
配色與風格設定:以圖片的大多色為配色風格。
2.有無遇到的問題:目前無遇到問題。
3.製作感想 :還不錯。
4.製作作業的時間 :1~2小時。

1).作業網址 :http://mepopedia.com/~web104-2b/hw06/hw06-1035445155

(2).請回答以下問題:
1.網頁主題:阿達一族 配色與風格設定:綠色為基本顏色
2.有無遇到的問題? 目前沒有
3.製作感想: 越來越難的感覺
4.製作作業的時間 :2-3小時



Edited 1 time(s). Last edit at 12/16/2015 11:02PM by 1035445155.
(編輯記錄)

1).作業網址 :http://mepopedia.com/~web104-2b/hw06/hw06-1035445098

(2).請回答以下問題:
1.網頁主題:jordan的輝煌歷史
2.有無遇到的問題? 還好
3.製作感想: 要做的東西越來越多,網頁也越來越豐富
4.製作作業的時間 :4小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445170


(2).請回答以下問題:
1.網頁主題: 配色與風格設定:一樣的魔髮奇緣
2.有無遇到的問題? 一開始表格好像被我亂設定 搞得顏色設定的時候很怪,不過整個再重新做一遍就好了
3.製作感想 :想說表格很簡單可是我搞好久喔喔喔~~
4.製作作業的時間 :4小時
eye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smileyeye rolling smiley

1035445170

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445185/role.html


(2).請回答以下問題:
1.網頁主題:櫻桃小丸子
配色與風格設定:使用柔和可愛的顏色搭配櫻桃小丸子這個主題
2.有無遇到的問題? 無
3.製作感想 :使用表格之後,整體看起來比較整齊
4.製作作業的時間 :2個小時多



Edited 1 time(s). Last edit at 12/17/2015 12:12AM by 1035445185 徐于庭.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445137 (進入網頁後,點works是這次的作業內容)

(2).請回答以下問題:
1.網頁主題:gosha
配色與風格設定:因為是俄羅斯的先鋒品牌,充滿著很濃重的痞味和社會主義的影響,
所以用很低沉的大地色系配合主題的設定,表達gosha哥特般濃重的個人氣息。
2.有無遇到的問題:目前無遇到問題。
3.製作感想 :可以更熟練的運用了
4.製作作業的時間 :1小時。

1035445137

1).作業網址 :http://mepopedia.com/~web104-2b/hw06/hw06-1035445149
(2).請回答以下問題:
1.網頁主題:VANS 配色與風格設定:紅色為基本顏色
2.有無遇到的問題? 目前沒有
3.製作感想: 有越做越起勁的感覺
4.製作作業的時間 :2-3小時



Edited 4 time(s). Last edit at 12/17/2015 12:55AM by 1035445149.
(編輯記錄)

1).作業網址 :http://mepopedia.com/~web104-2b/hw06/hw06-1045245002

(2).請回答以下問題:
1.
網頁主題:魔物獵人
配色與風格設定:跟上一次一樣的配色,主要為暖色系
2.有無遇到的問題? :沒有
3.製作感想:因為是喜歡的主題,所以每一次都做得很開心
4.製作作業的時間 :2-3小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445209

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 用類似主題風格的風格配色
2.有無遇到的問題? 無
3.製作感想 :資料比較難收集,其餘還好。大概先做完了。老師有教新的會再補進去。
4.製作作業的時間: 6hr

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445107

(2).請回答以下問題:
1.網頁主題:恐龍 配色與風格設定:主要以橙色為主
2.有無遇到的問題? 多了表格,突然一時混亂
3.製作感想: 多了表格,變好難ㄏㄏ
4.製作作業的時間 :2小時

1).作業網址 :http://mepopedia.com/~web104-2b/hw06/hw06-1035445104/cruises.html

(2).請回答以下問題:
1.網頁主題:See Russia
配色與風格設定:棗紅色、深藍
2.有無遇到的問題? 做到後面有時候語法有點亂
3.製作感想: 越來越難的感覺
4.製作作業的時間 :2-3小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445071

(2).請回答以下問題:
1.網頁主題:膽小狗英雄
 配色與風格設定:配合主題色彩
2.有無遇到的問題? 用的影片不是youtube,在網頁縮小時畫面跑掉了...
3.製作感想:加入表格畫面更有秩序了。
4.製作作業的時間:2小時

(1).作業網址 :http://mepopedia.com/~web104-2b/hw06/hw06-1035445065


(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 莫內
2.有無遇到的問題? 小細節有點忘了
3.製作感想 繁複的步驟但成品出來還不錯
4.製作作業的時間

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445206
(2).請回答以下問題:
1.網頁主題:少女時代 配色與風格設定:黑色 粉紅色
2.有無遇到的問題? 目前沒有
3.製作感想: 加了表格 網頁看起來很整齊
4.製作作業的時間 :1小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445074


(2).請回答以下問題:
1.網頁主題: 配色與風格設定:莫內
2.有無遇到的問題?

表格好難!!!!!!!!!!!!!!!!!!!!!
3.製作感想 :
表格超難 弄得我快瘋了
一直撥放影片觀看
終於用出來了
但是腦細胞死好幾個
4.製作作業的時間 :5小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445191

(2).請回答以下問題:
1.網頁主題:kanahei 插畫家
 配色與風格設定:配合她的插畫風格,選用粉色系色彩
2.有無遇到的問題? 沒有什麼大問題,小問題的部分多試幾次調整就好
3.製作感想:之前不知道原來表格那個好用,還自己拉線,有了這個整理起來方便多了
4.製作作業的時間:2小時

1035445014

作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445014

請回答以下問題:
1.網頁主題: 啊!設計
2.有無遇到的問題? 無
3.製作感想 :製作完,覺得期末會很累。
4.製作作業的時間 :3小時



Edited 1 time(s). Last edit at 12/28/2015 04:39AM by 藍道.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445032

(2).請回答以下問題:
1.網頁主題:LEGO 配色與風格設定:紅黃藍綠
2.有無遇到的問題? 無
3.製作感想:LEGO的資料很多有點不好放
4.製作作業的時間 :2小時

1035445032

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445011 (進入後請點ROLE)

(2).請回答以下問題:
1.網頁主題:小王子
配色與風格設定:以大地 土黃色為主
2.有無遇到的問題? 沒有
3.製作感想:用了表格之後,主題變得更加簡單明瞭
4.製作作業的時間 :2小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445080

(2).請回答以下問題:
1.網頁主題:沿用上次的主題 。
配色與風格設定: 以藍色為主。
2.有無遇到的問題? 沒有吧!
3.製作感想:做完真爽,蠻有成就感的。
4.製作作業的時間:2個半小時左右。

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035461133

1.網頁主題: 配色與風格設定:
主題: The Beauty Inside
配色與風格: 使用淡粉紅 淺紫帶出優雅的感覺
2.有無遇到的問題 無
3.製作感想 製作出表格使畫面變得統整
4.製作作業的時間 1.5小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1025445077/works.html

(2).請回答以下問題:
1.網頁主題:艾薇兒·拉維尼
配色與風格設定:以灰白色為主調
2.有無遇到的問題? 沒有
3.製作感想: 因為表格的整理讓專輯介紹一目了然
4.製作作業的時間 :2小時

陳悅綾
(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445029

(2).請回答以下問題:
1.網頁主題:LADYBABY
 配色與風格設定:以可愛的粉色系為主
2.有無遇到的問題? 有,東西一直不見
3.製作感想:覺得很酷,終於做出來那個格子跟影片的地方了
4.製作作業的時間:3小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445119

(2).請回答以下問題:
1.網頁主題:amazarashi(日本搖滾樂團) 配色與風格設定:主要以黑色、灰色、白色為主
2.有無遇到的問題? 目前沒有
3.製作感想:本來以為表格很難,學會了之後發現其實很簡單。
4.製作作業的時間 :2小時

(1).作業網址:http://mepopedia.com/~web104-2b/hw06/hw06-1035445050/
(2).請回答以下問題:
1.網頁主題:LIFE OF PI
配色與風格設定:老虎、少年pi、奇幻
2.有無遇到的問題? 目前沒有
3.製作感想: 亂碼搞了我好久 還好有網友大大提供亂碼修正的語法
4.製作作業的時間 :2小時

(1).作業網址:http://mepopedia.com/~web104-2b/hw06/hw06-1035445179
(2).請回答以下問題:
1.網頁主題:大天團英雄
配色與風格設定:黑白灰三色
2.有無遇到的問題?無
3.製作感想:表格意外的錶較容易做。
4.製作作業的時間 :3小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1025445086


(2).請回答以下問題:
1.網頁主題:about time 配色與風格設定:質感,咖啡色、墨綠色
2.有無遇到的問題? 無
3.製作感想 :表格讓網頁看起來整齊多了
4.製作作業的時間 :3小時

1035445222

(1).作業網址:http://mepopedia.com/~web104-2b/hw06/hw06-1035445222

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

1.網頁主題:Minions小小兵

配色與風格設定:藍黃白,搭配出和小小兵一樣活潑的感覺。

2.有無遇到的問題?無

3.製作感想:表格沒有想像中的難還蠻好上手的。

4.製作作業的時間 :2個小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw06/hw06-1035445023
(2).請回答以下問題:
1.網頁主題:摺紙
配色與風格設定:咖啡色、橘色為主
2.有無遇到的問題? 無
3.製作感想 : 表格的語法真長,不過好像能看懂了
4.製作作業的時間 :2小時左右