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/~web105-2c/hw06/hw06-104xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-104xxxxxxx

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




(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445189
(2).請回答以下問題:
1.網頁主題:閱讀實驗室
配色與風格設定: 因為閱讀給人帶來寧靜的感覺,所以我用藍、白、灰為主題設計。
2.有無遇到的問題? 我忘記要怎麼讓連結變成開啟新分頁了 還有在晴耕雨讀的標題居然跑 掉 了angry smiley
3.製作感想:我好像跟網頁越來越熟悉了希望快點把期末作業完成
4.製作作業的時間:3個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445045/album.html
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 樂團主視覺整體顏色來配色
2.有無遇到的問題? caption在DW裡面看都很正常但是在網頁上看就跑掉
3.製作感想 最近狂遇到小瓶頸
4.製作作業的時間 3小時



Edited 1 time(s). Last edit at 12/19/2016 11:01PM by 1045445045.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445153
(2).請回答以下問題:
1.網頁主題:宮崎駿
配色與風格設定:素色簡約
2.有無遇到的問題? 有同學幫忙,沒什麼大問題
3.製作感想 :算簡單,但很花時間
4.製作作業的時間:2小時左右

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445141
(2).請回答以下問題:
1.網頁主題:沒事啦。
配色與風格設定: 黑白、簡潔
2.有無遇到的問題? 還沒
3.製作感想:又餓又睏
4.製作作業的時間:3個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445180
(2).請回答以下問題: 阿里山森林小火車
1.網頁主題: 配色與風格設定: 火車外觀紅色
2.有無遇到的問題? 有阿 上課再問你
3.製作感想 : 有累到
4.製作作業的時間 : 三小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445212
(2).請回答以下問題:
1.網頁主題:三峽老街
配色與風格設定: 灰色、簡潔
2.有無遇到的問題? 表格不知道為甚麼會有紅色的
3.製作感想: 還好沒什麼問題
4.製作作業的時間:3個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445135

(2).請回答以下問題:
1.網頁主題: hyukoh혁오
配色與風格設定: 咖啡色與土黃色 溫暖的簡約風格
2.有無遇到的問題? 無
3.製作感想 : 很有趣
4.製作作業的時間 : 2小時



Edited 1 time(s). Last edit at 12/20/2016 05:05PM by 廖芳如.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445036/res.html
(2).請回答以下問題:
1.網頁主題:Gudetama 蛋黃哥
配色與風格設定: 配色與風格設定: 依舊以蛋黃哥的顏色下去配色哦~可愛的蛋黃色~風格就是可愛慵懶
2.有無遇到的問題:在設定a 和 a hover 的時候又再次出現導覽列也跟著變色的問題RRR!!!!!!!!
但後來直接把它改成文字變色"好像"就沒這個問題了.......... 至於表格沒什麼問題~
3.製作感想:表格可以讓整理資料更簡單了~也更加簡潔~老師教了表格後我也把hw05的角色人物介紹修改成表格,
這樣子就不會亂七八糟擠成一團的~真的不錯~實用spinning smiley sticking its tongue out
4.製作時間:4~5小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445015
(2).請回答以下問題:
1.網頁主題:藏物市集
配色與風格設定: 以粉色系為主
2.有無遇到的問題? 目前沒有~~
3.製作感想:有再慢慢熟悉每一個步驟,跨頁做法也越來越熟悉
4.製作作業的時間:2~3個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445003

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

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445105

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:配色是以豆豆先生的主色調綠色再做搭配 風格是卡通風
2.有無遇到的問題? 目前還沒有甚麼問題
3.製作感想 一開始覺得有點複雜,但後來越做越順手
4.製作作業的時間 3~5小時

1.作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445117

2.網頁主題:Summer story-金魚

● 配色與風格設定:依然採用金魚主體色系,紅、橘、白並且在局部變換不
同的橘色系,擺脫單一橘色的配置,使網頁配色有豐富的變化。

3.有無遇到的問題: 老師講義詳細,並無遇到的問題

4.製作感想: 再次強調,表格的運用的確方便,之前在嘗試做雙欄網頁時,
沒有想到,網頁中也可以使用表格,圖片與文字排版分明,也能利用表格,
舉一反三,使網頁內容豐富,排版條列規劃,很適合做作品介紹或者影片內
容等。

5.製作作業的時間: 1~2小時



Edited 4 time(s). Last edit at 12/21/2016 11:58AM by 松本.豪.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445019/
(2).請回答以下問題:
1.網頁主題:大家好!我們是CRAFTHOLIC~
配色與風格設定: 想利用可愛的圖樣還有配色帶給CRAFTHOLIC歡樂有趣可愛的感覺~~。
2.有無遇到的問題? 表格卡關卡超久~後來直接刪掉再怒看講義一遍~就好像聽懂了哈哈哈
3.製作感想:每一次新作一個主題,又是一個新的挑戰~~從0到有~很有成就感~期末加油啊啊啊啊
4.製作作業的時間:前後又加修改....4~5吧~~一步一步看講義XD

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445102

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

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445033
(2).請回答以下問題:

1.網頁主題:
Mr.Pickles
2.有無遇到的問題?
暫時沒有
3.製作感想:
有同學真好
4.製作作業的時間:
1小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445042
(2).請回答以下問題:
網頁主題:蘇打綠
配色與風格設定:宇宙
有無遇到的問題:英文版的沒辦法製作照片連結......不知為啥
製作感想:雖然聽課時都霧煞煞,但回去跟著影片做發現滿簡單的,而且又是做自己喜歡的主題所以做完時會很有一番成就哈哈
製作作業的時間 :3小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445174
(2).請回答以下問題:
網頁主題:一風堂拉麵
配色與風格設定:可口
有無遇到的問題:表格顏色不會改
製作感想:表格好用
製作作業的時間 :3小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445084/about.html
(2).請回答以下問題:
1.網頁主題:larva逗逗蟲
配色與風格設定:活潑
2.有無遇到的問題? 沒有
3.製作感想:開始上手了!
4.製作作業的時間:2~3個小時



Edited 1 time(s). Last edit at 12/28/2016 11:17AM by 1045445084.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445009

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 神秘復古
2.有無遇到的問題? 沒有
3.製作感想 想一次做完他
4.製作作業的時間 1.5小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445027
(2).請回答以下問題:
1.網頁主題:Running man 配色與風格設定:黃色明亮色系
2.有無遇到的問題:額 表格怎麼放置中來著..
3.製作感想 : 找資料好累r
4.製作作業的時間 : 到半夜2點

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445075
(2).請回答以下問題:
1.網頁主題:偶像明星
配色與風格設定: 黑紫色
2.有無遇到的問題? 很有成就感
4.製作作業的時間:3個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445051

(2).請回答以下問題:
1.網頁主題:多啦A夢
配色與風格設定: 可愛和活潑感的卡通人物
2.有無遇到的問題? 表格應用還不熟~~~~~~
3.製作感想?雖然挺有趣的,但找個錯誤都要花好久的時間。眼睛好痛啊~~~
4.製作作業的時間 ?2~3小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445099

(2).請回答以下問題:
1.網頁主題: 烤焦麵包
配色與風格設定: 可愛的味道多一點和活潑感
2.有無遇到的問題? 表格比較複雜,用比較久
3.製作感想?還滿有趣的,只是每次都看的眼睛好花啊~~~
4.製作作業的時間 ?2~3小時



Edited 1 time(s). Last edit at 12/29/2016 11:46PM by 簡瑜萱.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445150

(2).請回答以下問題
1.網頁主題: HURTS
配色與風格設定: 黑灰白居多較有神祕感

2.有無遇到的問題? CSS設定很多 有時會設定錯誤

3.製作感想?覺得做完眼睛都要花了

4.製作作業的時間 ?4小時



Edited 2 time(s). Last edit at 01/01/2017 07:25PM by 1045445150.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445162

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
簡單黑白兩色(有加進一些不同於黑白的顏色,讓她不會太死),因為niconico網站本身就是以黑白兩色為主調,所以這次期末也會朝著簡潔單色去做//
2.有無遇到的問題? 搞懂欄與列花了一點時間><
3.製作感想
覺得........以後還是好好按部就班的照課程進度走比較好,資料上要提早搜尋提早整理,才不會搞到現在要一次全部會然後改TTTTT
4.製作作業的時間
3~4小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445069/wonderland.html
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:藍色調
2.有無遇到的問題? 表格設定比較麻煩~
3.製作感想 每次完成真的很有成就感~
4.製作作業的時間 2~3小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445201

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

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445198

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

1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445120
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:藍
2.有無遇到的問題? 沒
3.製作感想 完成以後很開心
4.製作作業的時間 2~3小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445030

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:一樣是以黑色和酒紅色的配色來營造他們神祕的男子魅力
2.有無遇到的問題? 無
3.製作感想 做得好開心阿,雖然遲交了,但還是喜歡做這作業
4.製作作業的時間 1小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445054

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:運用黑色調帶整體風格表現
2.有無遇到的問題? 無
3.製作感想 累
4.製作作業的時間 一小時

1025445200-4B 連怡婷
(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1025445200/video.html

(2).請回答以下問題:
1.網頁主題:史努比
配色與風格設定:以藍色作為底色給人清爽的感覺
2.有無遇到的問題:無
3.製作感想 :還可以,細節比較難調
4.製作作業的時間:1小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445018
(2).請回答以下問題:
1.網頁主題:蘑菇人方吉
配色與風格設定:配合菇菇的大地色系
2.有無遇到的問題? 推特跟臉書的連結怪怪的
3.製作感想:跟著老師的影片製作順利很多
4.製作作業的時間:3個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445147

(2).請回答以下問題:
1.網頁主題: 新海誠
配色與風格設定: 黑色
2.有無遇到的問題? 無
3.製作感想 :表格製作非常有趣 讓一篇文章非常整齊。
4.製作作業的時間 :3小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445057

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:王詩安的個人介紹網站、清新簡單、看了讓人舒服 天空的味道~
2.有無遇到的問題:表格做太多變化會變得不適合我的主題..
3.製作感想:發現表格真的是超棒超好整理網頁的東西,尤其是需要有圖又有文字的時候
4.製作作業的時間 :1-2小時

(1).作業網址 :file:///C:/Users/tr558/Desktop/midterm-1025445108/3.html
(2).請回答以下問題:
1.網頁主題:灌籃高手
配色與風格設定:灌籃高手
2.有無遇到的問題? 灌籃高手
3.製作感想:跟著老師的影片製作
4.製作作業的時間:3個小時

(1).作業網址 :file:///C:/Users/tr558/Desktop/midterm-1025445108/2.html
(2).請回答以下問題:
1.網頁主題:灌籃高手
配色與風格設定:灌籃高手
2.有無遇到的問題? 灌籃高手
3.製作感想:跟著老師的影片製作
4.製作作業的時間:3個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445144/draw.html

(2).請回答以下問題:
1.網頁主題:嚕嚕米
配色與風格設定: 繽紛的顏色豐富版面
2.有無遇到的問題? 還可以
比之前做的順利了一點
ˇ但複製推紐時一直失敗,臉書跑不出來
3.製作感想 : 做自己喜歡的角色很有趣很開心
4.製作作業的時間 : 4小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445123

(2).請回答以下問題:
1.網頁主題:RWBY
配色與風格設定: 灰階+紅(藍、黃、黑、紅)
2.有無遇到的問題? 無
3.製作感想 :成就感UP
4.製作作業的時間 : 1~2小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1045445177

(2).請回答以下問題:
1.網頁主題:荳荳
配色與風格設定: 粉粉的的少女風
2.有無遇到的問題? 沒有 但有些部分還是會卡卡的
3.製作感想 : 還好我是做我最愛的荳荳不然可能會崩潰
4.製作作業的時間 : 一天一點點

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445129
(2).請回答以下問題:
1.網頁主題:My Melody
配色與風格設定: 以粉色系為主色,呈現粉嫩嫩的感覺
2.有無遇到的問題? 這次沒有
3.製作感想:製作過程越來越順利!
4.製作作業的時間:2~3個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445186
(2).請回答以下問題:
1.網頁主題:潮流藝術
配色與風格設定: 黑白、簡潔
2.有無遇到的問題? 還沒
3.製作感想:累
4.製作作業的時間:3個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445072

(2).請回答以下問題:
1.網頁主題:豔漢
配色與風格設定: 應該是簡約風?靠圖片襯托美感
2.有無遇到的問題 : 有,明明網頁感覺就設定好好的,但是實際瀏覽卻跑掉東西很煩躁
3.製作感想 :傲嬌的程式碼
4.製作作業的時間 :7小時

作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445081

1.網頁主題: 配色與風格設定:日系清新風格 主色為粉紅輔色為淺藍
2.有無遇到的問題? :表格的細部調整比較不會。
3.製作感想 : 我想這應該是我覺得最困難的作業,像是表格跑位的問題不知如何處理,我可能還要再摸熟些。
4.製作作業的時間 :3小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445138


1.網頁主題: 配色與風格設定:黑色跟藍色
2.有無遇到的問題:沒有,講義很清楚
3.製作感想:有點複雜
4.製作作業的時間:一個小時