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

Advanced

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

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

請參考

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


[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw06-ex/[/color]


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

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



[hr]

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

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



[hr]

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

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



[hr]

5.在[color=#990033]title的部分打上『自己作業的命名』[/color]

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

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

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

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


[hr]

2. 二、繳交作業方式



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

[color=#669900]第六個平時作業FTP上的資料夾為:hw06

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

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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


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



[size=small]
http://mepopedia.com/~web103-a/hw06/hw06-1025445001/

網頁主題、配色與風格設定: 同期中作業
有無遇到的問題:
我把captionu擺錯位置結果跑框,還好後來找到錯誤的地方。
製作感想 :
之前期中有用過,但是當時還不知道怎麼改邊框,
所以這次把表格調整,加了標題,並以邊框製作成每張專輯的分隔線。
製作作業的時間 :一小時[/size]



Edited 1 time(s). Last edit at 12/23/2014 03:05PM by royu.
(編輯記錄)

http://mepopedia.com/~web103-a/hw06/hw06-1025445178/

[size=small]這連期末考一起補交
因為當時做表格跟不上,後來才慢慢補的
做完覺得很有成就感但是要改的地方還有很多
還有待加強,希望這學期上完網頁可以再多多練習

1.網頁主題: 配色與風格設定: 簡約
2.有無遇到的問題? 連結會連錯XD,
3.製作感想 :做完頭要炸掉了QQ消化不完
4.製作作業的時間: 好幾天(做單頁表格:4小時多)[/size]

From 1025445178-張祐寧



Edited 1 time(s). Last edit at 01/12/2015 10:23PM by yo.nin.
(編輯記錄)

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445070/


1.網頁主題&配色與風格設定:期中作業延伸
2.有無遇到的問題:表格的一些詳細設定有點不熟悉,一直跑掉。
3.製作感想:雖然期中就使用過表格了,但還是有些不熟悉,還得繼續加油,希望期末能做出更完整的表格。
4.製作作業的時間:1小時左右

1025445070

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445040/


1.網頁主題&配色與風格設定:與上次相同
2.有無遇到的問題:不知道為什麼,網頁跑有點久。
3.製作感想:表格很方便的就可以將資料整理出來,但在調整細節的部分我覺得有點麻煩,可能是我本身太懶了...
4.製作作業的時間:1.5小時

1025445040

(1).作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445124/shop.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 插畫風格 簡單黑白
2.有無遇到的問題? :想版型怎麼配置
3.製作感想 : 目前很順利 希望雙攔不要太複雜
4.製作作業的時間 1.5hr

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445058/


1.網頁主題&配色與風格設定:黃米色~溫暖的顏色!
2.有無遇到的問題:沒有
3.製作感想:影片還沒不會用
4.製作作業的時間:1小時

1025445058

作業網址 : [url=http://mepopedia.com/~web103-a/hw06/hw06-1025445133]http://mepopedia.com/~web103-a/hw06/hw06-1025445133[/url]


1.網頁主題&配色與風格設定:藍色系為主,淺黃色為輔
2.有無遇到的問題:置中一度找不到,後來看一下影片就找到了
3.製作感想:表格能清楚區別出每一份資料,只要多下一點工夫就能蠻漂亮的!
4.製作作業的時間:1.5小時

1025445133 林哲立



Edited 1 time(s). Last edit at 12/23/2014 08:31PM by 1025445133.
(編輯記錄)

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445091/


1.網頁主題&配色與風格設定:Vincent van Gogh ,藍綠色和灰色
2.有無遇到的問題:應該沒有
3.製作感想:老師的講義寫得很清楚 表格作很快
4.製作作業的時間:1.5小時

1025445091

http://mepopedia.com/~web103-a/hw06/hw06-1005445195/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 延續期中作業 以德國國旗配色為主色
2.有無遇到的問題? : 要花很多心思去仔細調整
3.製作感想 : 因為有點麻煩的關係所以有些偷懶只做了兩個人物介紹XD 之後會在全數補上
4.製作作業的時間 1.5hr

1005445195黃沛容

1.作業網址:http://mepopedia.com/~web103-a/hw06/hw06-1005445193/
2.網頁主題:簡約風
3.配色與風格設定:每個主題不同的顏色,都以粉嫩的顏色為主
4.有無遇到的問題?:想讓作品可以是動態圖片
5.製作感想:想排出好看的樣子真的很困難,排了很多種、很久才排出現在的樣子
6.製作作業的時間:2天

1005445193/徐芯儀

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445043/


1.網頁主題&配色與風格設定:電癮人DAN YA LUNG / 黑白灰黃 簡約風格
2.有無遇到的問題:表格的間格設定不熟悉。
3.製作感想: 間格跟內容文字還要再調整,讓期末做的完整一點
4.製作作業的時間:5小時左右(表格部份)

1025445043



Edited 2 time(s). Last edit at 12/24/2014 09:20AM by 1025445043.
(編輯記錄)

http://mepopedia.com/~web103-a/hw06/hw06-1025445136
1.網頁主題: 配色與風格設定:滾滾黃沙疊疊樂
2.有無遇到的問題:我想變美.........算了
3.製作感想:最近沒空找話說,只願科科都能過
4.製作作業的時間:約5hr
1025445136 劉志彥

(1).作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445064/menu.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 主角的配色~
2.有無遇到的問題:表格 tr .th內部設定不小心搞混,搞了很久才ok
3.製作感想 :簡單的表格其實不好弄......不過影片重複幾遍終於會了
4.製作作業的時間 :3小時

1025445064 葉芷妤

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445223/


1.網頁主題&配色與風格設定:期中作業延伸
2.有無遇到的問題: 表格的美化部分
3.製作感想:想快點結束網頁【躺
4.製作作業的時間:2小時

(1).作業網址 :http://mepopedia.com/~web103-a/hw06/hw06-1025445046/about.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:延續期中作業
2.有無遇到的問題? 設定太過於多,導致一直在跟換顏色時,不停按錯選項,容易搞混,
在儲存時,明明自己開起都沒問題,但是上傳到FileZilla就出問題,所以花了超多時間,
除了頁面跑掉,背景顏色沒顯示外,圖檔還是可以點開,所以我有多交一張命名
"完整的樣子"圖檔給老師看,目前還沒找到解決方法。
3.製作感想:這次多學會了表格製作,可以讓頁面變得更加豐富,不過不知道是我圖片稍大,
內容較少?感覺我做出來很普通,倒是別人做出來得看起來很有feel。
4.製作作業的時間:6小時

製作作業的時間



Edited 1 time(s). Last edit at 05/12/2022 03:11PM by 衛生綿.
(編輯記錄)

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445073/


1.網頁主題&配色與風格設定:老師的範例
2.有無遇到的問題:不會用影片悲劇
3.製作感想:影片還沒不會用
4.製作作業的時間:2小時

1025445073

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445079/


1.網頁主題&配色與風格設定:奈良美智
2.有無遇到的問題:不知道為什麼網址跑出奇怪的東西= = 檢查超多次一整天都在搞這個,才好不容易找到小細節出錯= =
3.製作感想:快炸了
4.製作作業的時間:整天

表格是頁面PHOTO



Edited 1 time(s). Last edit at 12/31/2014 01:25AM by iamve.
(編輯記錄)

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445199/


1.網頁主題&配色與風格設定:期中作業延伸
2.有無遇到的問題:新增CSS總是不是我要的東西,表格容易跑框。
3.製作感想:我又學到了新的知識,有表格好像挺好看的,字也不會跟著跑,希望期末作業能做出全部學到的東西。
4.製作作業的時間:3小時

1025445199

(1).作業網址 :http://mepopedia.com/~web103-a/hw06/hw06-1025445025/
1.網頁主題&配色與風格設定:龍貓 舒服
2.有無遇到的問題:表格容易跑框
3.製作感想:腦袋快打結了
4.製作作業的時間:3小時



Edited 2 time(s). Last edit at 12/31/2014 01:05AM by 許函郁.
(編輯記錄)

作業網址 :http://mepopedia.com/~web103-a/hw06/hw06-1025445169/people1.html

1.網頁主題&配色與風格設定:期中作業延伸
2.有無遇到的問題:還是很不會弄。
3.製作感想:覺得困難,待加強
4.製作作業的時間:3小時左右

1025445169/視傳2A/古佳綺

(1).作業網址 :http://mepopedia.com/~web103-a/hw06/hw06-1025445175/
1.網頁主題&配色與風格設定:kobits
2.有無遇到的問題:表格的線一直弄不出來
3.製作感想:覺得很難很累很想哭 真的超級難..
4.製作作業的時間:5小時

(1).作業網址 :http://mepopedia.com/~web103-a/hw06/hw06-1025445139/enemy.html

(2).請回答以下問題:
1.網頁主題:排球少年-烏野高中
配色與風格設定:代表烏野的配色是黑橘白,整個網站的顏色都不會偏離這三種色。
2.有無遇到的問題? 表格上色!
3.製作感想 表格挺好玩,然後我上次上課忘記回復了靠
4.製作作業的時間:3個小時以下…吧

(1).作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445037


(2).請回答以下問題:
1.網頁主題: 莫內
2.有無遇到的問題? 設定很容易設定錯
3.製作感想:做完很累
4.製作作業的時間 4小時



Edited 1 time(s). Last edit at 12/31/2014 04:33AM by 1025445037.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1005445196

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 糖果色系 和以甜蜜的感覺來呈現
2.有無遇到的問題? 就是字的間距跟忘記怎麼繞圖排文
3.製作感想 發現語法真的很微妙 只要稍微打錯 或是設定錯誤就應該要瞪大眼睛 反覆檢查
4.製作作業的時間 5小時

視傳4B 1005445196 張靜怡

作業網址:http://mepopedia.com/~web103-a/hw06/hw06-1025445067

網頁主題:食。客Diners
配色與風格設定: 走日本清新淡色彩
有無遇到的問題:同樣明明步驟是一樣的,結果他都沒動靜,讓人很生氣
製作感想:覺得網頁真的是需要超長~~~~~~時間來做的....
製作作業的時間 :3h30

作業網址 :http://mepopedia.com/~web103-a/hw06/hw06-1025445202/

1.網頁主題&配色與風格設定:期中作業延伸
2.有無遇到的問題:還是很不會弄
3.製作感想:影片很難用
4.製作作業的時間:半天左右

視傳二A 1025445202 林彥希

http://mepopedia.com/~web103-a/hw06/hw06-1025445031


(2).請回答以下問題:
1.網頁主題:無印良品。配色與風格設定:簡約風

2.製作作業的時間 1小時。

http://mepopedia.com/~web103-a/hw06/hw06-1025445106/


網頁主題、配色與風格設定: 同期末作業
有無遇到的問題: 連結很常跑不出來
製作感想 :
用之前期中的做做到快瘋掉,直接做一個新的跟期末一起,還比較快一些。
製作作業的時間 :三天

(1).作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445076/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 跟前面一樣
2.有無遇到的問題? 很多圖片跑掉
3.製作感想 慢慢學習有成就感
4.製作作業的時間 2小時

http://mepopedia.com/~web103-a/hw06/hw06-1025445103/

網頁主題、配色與風格設定: 同期中作業
有無遇到的問題: 放影片時弄了許久
製作感想 : 比之前熟悉軟體許多了但還是有困難
製作作業的時間 :一小時

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445097/


1.網頁主題&配色與風格設定:星巴克咖啡
2.有無遇到的問題:語法複雜難懂
3.製作感想:好難好累
4.製作作業的時間:半天

1025445097陳慶芳

(1).作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445082/

(2).請回答以下問題:
1.網頁主題:UNLIGHT遊戲 配色與風格設定:桃、紅、紫、黑等,哥德風
2.有無遇到的問題? 無...吧
3.製作感想 覺得還好有教學影片回家可以看著做
4.製作作業的時間 2小時

(1).作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445130 表格在第二頁

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 使用大圖的顏色去配色
2.有無遇到的問題 表格大小 因為使用CC版本所以回家都看不懂
3.製作感想 複雜其實還是不太了解
4.製作作業的時間 3小時

楊淯婷



Edited 2 time(s). Last edit at 01/10/2015 05:49AM by lele831230.
(編輯記錄)

請回答以下問題:
1.網頁主題:東京蚤之市 配色與風格設定:懷舊風
2.有無遇到的問題? 試很多次,可是還是弄不出分隔線
3.製作感想:都套用先前製作好的再放到表格裡其實不會太難,可是下方的分隔線一直弄不出來很挫敗,等問同學會做修改
4.製作作業的時間:3小時

作業網址:http://mepopedia.com/~web103-a/hw06/hw06-1025445100

1025445100 葉芳羽

作業網址:http://mepopedia.com/~web103-a/hw06/hw06-1025445148
1.網頁主題: 延續期中作業 以mt紙膠為主
2.有無遇到的問題? : 要花一些心思有耐心完成
3.製作感想 : 希望自己可以有效率一點
4.製作作業的時間 2hr

1025445148



Edited 4 time(s). Last edit at 01/11/2015 11:58PM by 盧姿穎.
(編輯記錄)

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445085


1.網頁主題&配色與風格設定:與上次相同
2.有無遇到的問題:我是認真努力的網頁蠢蛋
3.製作感想:表格很方便,而會提升網頁的精緻度,奪學一招覺得開心
4.製作作業的時間:2小時

1025445085

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445187


1.網頁主題&配色與風格設定:灰白黑色系為主
2.有無遇到的問題:表格做好就覺還可以
3.製作感想:表格能清楚區別
4.製作作業的時間:1小時

1025445187 戴靖庭

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445181/


1.網頁主題&配色與風格設定:期中作業延伸
2.有無遇到的問題:設定有點不熟悉
3.製作感想:雖然之前作過但還是不熟西需要加強
4.製作作業的時間:3小時左右

1025445181 徐鄀凡

作業網址:http://mepopedia.com/~web103-a/hw06/hw06-1025445160/vegetables.html
1.網頁主題: delicious food
2.有無遇到的問題? : 第一個滑鼠變換影像一直不成功,不知道是哪裡有問題
3.製作感想 : 希望自己可以再進步
4.製作作業的時間 30分鐘

1025445160吳羽筑

作業網址:http://mepopedia.com/~web103-a/hw06/hw06-1025445055

網頁主題:YinCang個人網頁
配色與風格設定: 白色簡約
有無遇到的問題:圖片尺寸需要一直調整,調到畫面OK要調過很多次...
製作感想:製作網頁真的需要花很多很多時間跟精力。
製作作業的時間 :三小時

1025445055 許淑雯

http://mepopedia.com/~web103-a/final/final-1025445217
期末作業中的第三頁

網頁主題、配色與風格設定: 同期末作業
有無遇到的問題:
似乎沒有遇到什麼問題
製作作業的時間 :一小時

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw06-1025445184
2.網頁主題:superdry
3.配色與風格設定:黑橘色為主,白為輔
4.有無遇到的問題? 只要可以command+c+v都不是問題了
5.製作感想:終於完成了。
6.製作作業的時間:3~4day

作業網址 :http://mepopedia.com/~web103-a/hw06/hw06-1025445052/works.html

1.網頁主題&配色與風格設定:簡約 黑白配色
2.有無遇到的問題:上網找解答 很快。
3.製作感想:表格很方便的就可以將資料整理出來,但在調整細節的部分我覺得有點麻煩
4.製作作業的時間:1小時

1025445052

作業網址 : http://mepopedia.com/~web103-a/hw06/hw06-1025445163


1.網頁主題&配色與風格設定:期中作業延伸
2.有無遇到的問題:難上加難
3.製作感想:雖然期中就使用過表格了,但還是不熟
4.製作作業的時間:一個小時

1025445163 曾國鼎

http://mepopedia.com/~web103-a/hw06/hw06-1025445217
網頁主題、配色與風格設定: 同期末作業
有無遇到的問題:
似乎沒有遇到什麼問題
製作作業的時間 :一小時

C:\Users\usercoert\Desktop\hw07-1035445142\index.html

網頁主題、配色與風格設定: 同期中作業
有無遇到的問題: 有些步驟很複雜很難
製作感想 : 之前期中有用過,但是還是覺得很難
製作作業的時間 :2.3小時