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/~web100a/hw06/hw06-100xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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


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



Attachments:
開啟 | 下載 - hw06-ex.rar (1007.1 KB)
(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445052

(2).請回答以下問題:
1.網頁主題 :永遠的印象-莫內 / 配色與風格設定 :優雅的淺藍綠色系
2.有無遇到的問題 :th tr td還有其他的名詞真的搞不太懂,是不是要去把他背下來呢?!
3.製作感想 :這次作業比之前複雜許多,頭都快昏了.
4.製作作業的時間 :2hr
教學影片有優點有缺點,之前的方式也是!!!如果可以兩者合一那一定很棒!!!

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445082

(2).請回答以下問題:
1.網頁主題 :還是東方神起黑灰色為主色 :滑鼠滑動表格之後會換色~
2.有無遇到的問題 :覺得用影音的方式!!學習比較有一點點困難!!還是重點最好!!
3.製作感想 :開始慢慢變複雜一些了~但還可以~這次作業算遲交~哎!!這次比較滿意就只有表格!!!哈哈
4.製作作業的時間 :2天左右

(1)作業網址:http://mepopedia.com/~web100a/hw06/hw06-1001445094
(2)請回答以下問題:
1.網頁主題 :還是幾米的畫為主 :滑鼠滑動表格之後會換色~
2.有無遇到的問題 :還是比較喜歡看圖解說不喜歡影音教學~
3.製作感想 :感覺有點開始變難了,很害怕會越來越聽不懂!!
4.製作作業的時間 :3天左右

http://mepopedia.com/~web100a/hw06/hw06-1001445068

1.網頁主題:攝影作品網站 配色與風格設定: 這頁搭配照片的黑白效果所以表格也是用灰階的色彩
2.有無遇到的問題 沒有smiling smiley
3.製作感想 這次比上次複雜一些 但是網頁更豐富了
4.製作作業的時間 2個多小時



Edited 2 time(s). Last edit at 11/25/2011 02:46AM by enjoyad920.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445098

(2).請回答以下問題:
1.網頁主題:安迪沃荷
配色與風格設定:普普風加上桃紅色系
2.有無遇到的問題? 沒有什麼太大問題thumbs up
3.製作感想:覺得自己有更清楚Dreamweaver的功能!也覺得自己更厲害囉!spinning smiley sticking its tongue out
4.製作作業的時間:1到2小時(包含找圖和內容)

(1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001445080

(2).請回答以下問題 :
1.網頁主題 :夏洛克˙福爾摩斯 / 配色與風格設定 :咖啡色系加上點紅色系以凸顯幾分懸疑感。
2.有無遇到的問題? :沒有大問題~
3.製作感想 :感覺還不錯,看到作品完成就很開心~
4.製作作業的時間 :2~3小時。

http://mepopedia.com/~web100a/hw06/hw06-1001445074/

1.網頁主題:梵谷
配色與風格設定:藍色調
2.有無遇到的問題? 無
3.製作感想 逐漸熟悉的感覺!!
4.製作作業的時間 2hr30min

*雖然影片很詳細的記錄了步驟,但是有時候影片跑時間會卡卡的,
跟圖片檔比起來也不能說哪個好或壞,希望有些重點部分能用圖片顯示會好些。

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445096


(2).請回答以下問題:
1.網頁主題:貓的報恩_角色介紹
配色與風格設定: 暖色溫馨對比
2.有無遇到的問題? 表格製作問題很多...弄了很久,一直弄不太好...現在做出來的只能說還可以...
3.製作感想 表格不好弄,不好弄它的CSS...一直搞不太清楚哪個是哪個...做出還了還鬆口氣。影片教學...不容易找到想看的部分,所以覺得不是很方便...雖然老師教學看起來很認真...不過習慣了圖文講解...
4.製作作業的時間:3天

(1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001445021

(2).請回答以下問題:
1.網頁主題:Ed Hardy
配色與風格設定:配合底圖作對比
2.有無遇到的問題?目前沒有
3.製作感想:個人覺得影音教學比較麻煩,尤其表格的語法部份,感覺還是圖片教學比較方便。
4.製作作業的時間:2~3小時

(1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001445019/

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

1.網頁主題 :苗栗 SANYI 介紹
2.有無遇到的問題 :覺得比上次複雜難懂,需要比較多時間去理解
3.製作感想 :頭暈腦脹
4.製作作業的時間 :2~3hr



Edited 3 time(s). Last edit at 11/28/2011 09:40PM by SAIN.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445039

(2).請回答以下問題:
1.網頁主題:AYU
配色與風格設定:桃紅色系
2.有無遇到的問題? 沒有什麼太大問題
3.製作感想:上課要認真一點不要打瞌睡,不然作業就會像這次一樣悲劇,請老師見諒。
4.製作作業的時間:5分鐘

1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445015

(2)
1.網頁主題:莫內
配色與風格設定: 藍綠色調
2.有無遇到的問題 :無
3.製作感想:這次的比上次複雜,程序比較多,需要特別注意細節,大致上還可以。
4.製作作業的時間 :2小時

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445050

(2).請回答以下問題:
1.網頁主題 :Gossip Girl/ 配色與風格設定 :黑色與黃色
2.有無遇到的問題 :表格的專業名詞不知道有什麼分別@@",
3.製作感想 :感覺上還不錯
4.製作作業的時間 :2.5hr
教學影片其實還不錯,有點像遠距教學... 個人偏好影片方式!

http://mepopedia.com/~web100a/hw06/hw06-1001445046
1.網頁主題:捉迷藏Hide and Seek
配色與風格設定:深色為主,風格簡單俐落,帶有陰森感
2.有無遇到的問題? : 還好,沒甚麼大礙
3.製作感想:有一點麻煩,不過還算應付得來
4.製作作業的時間:2hr



Edited 1 time(s). Last edit at 12/27/2011 11:58PM by DoNna.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445056

(2).請回答以下問題:
1.網頁主題 :永遠的印象-莫內 / 配色與風格設定 :淺藍綠色系,浪漫
2.有無遇到的問題 :看著影片做沒什麼問題但要我獨自不看步驟完成恐怕有困難,用影片教學真得很清楚但影片很容易跑不動要重複看好幾次
3.製作感想 :這次做的動作真的滿繁複的,幸好有影片不然我想真的滿難的!!
4.製作作業的時間 :2小時半

1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001445128

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

1.網頁主題 :攝影作品集
2.有無遇到的問題 :比較喜歡看講義,還是很感謝老師的用心
3.製作感想 :過程中有點小卡
4.製作作業的時間 :1~2小時(黑白那夜)

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445124

(2).請回答以下問題:
1.網頁主題 :個人介紹
2.有無遇到的問題 :影片還不錯,聲音有點小,有截圖更好啦!!thumbs up
3.製作感想 :崁入影片我喜歡。表格製作..我再多看幾次好了..
4.製作作業的時間 :約1小時多..

1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445058

(2).請回答以下問題:
1.網頁主題 :永遠的印象-莫內 / 配色與風格設定 :藍綠色系
2.有無遇到的問題 :無
3.製作感想 :放上影片感覺更像個網頁了
4.製作作業的時間 :三小時

(1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001445060

(2).請回答以下問題 :
1.網頁主題 :範例
2.有無遇到的問題? :大有問題~這次的作業令我煩躁......
3.製作感想 :所以最終還是沒有做出來....... 影片LAG+DW LAG 快瘋了!!!
4.製作作業的時間 :3HR

(1).作業網址 :
http://mepopedia.com/~web100a/hw06/hw06-1001445072
(2).請回答以下問題:
1.網頁主題:G-Dragon介紹
配色與風格設定: 黑白時尚簡約風
2.有無遇到的問題? 無
3.製作感想 用影片教學很麻煩,而且畫面太小看的很吃力(就算調到720p也一樣),用以前的方是我們還可以直接找到不會的地方,可是用影片的話還要往回找很麻煩,而且我覺得會增加我做作業的時間。
4.製作作業的時間 1小時(如果不用影片教學大概30分鐘內就可完成)

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445076/

(2).請回答以下問題:
1.網頁主題:永遠的印象-莫內 配色與風格設定: 淺藍綠色系
2.有無遇到的問題? 看著影片做沒什麼問題但如果沒有老師引導可能就有些難,我覺得有影片很棒,有講義也是都很清楚,不過感覺影片比較仔細,一步步都可以跟著做!也謝謝老師如此用心,辛苦了!
3.製作感想 很多動作,一定得看著影片做!
4.製作作業的時間 2小時多

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445037

(2).請回答以下問題:
1.網頁主題 :小貓咪 / 配色與風格設定 :小貓咪系
2.有無遇到的問題 :做得有點醜醜的?!
3.製作感想 :我覺得還是圖文解釋會比較好懂.
4.製作作業的時間 :2hr
教學影片和圖文說明如果可以兩者合一應該會更好~

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445005
(2).請回答以下問題:
1.網頁主題:皮克斯動畫工作室 配色與風格設定:我一樣是拿期中作業來做更改,所以顏色風格搭配上並沒有做甚麼修改
2.有無遇到的問題? 為甚麼我的網址點進去後不會直接跳出畫面而是要再去按works.html才看的到?但點進去後網頁內容是沒有問題的啊...
3.製作感想 對網頁設計越來越有點信心了
4.製作作業的時間 100/11/29



Edited 1 time(s). Last edit at 11/29/2011 11:42PM by 1001445005.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445011

(2).請回答以下問題:
1.網頁主題 :Burberry Body / 配色與風格設定 :灰
2.有無遇到的問題 :上傳問題,所以明天帶去給老師看
3.製作感想 :頭要炸開了
4.製作作業的時間 :4hr
教學影片:杰圖的那個也很好,隱片也很好,都有更好!!

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445033\ie-04.htm

(2).請回答以下問題:
1.網頁主題 :台北新城市教會 兒童牧區
2.有無遇到的問題 :沒有,但設定明顯增多,常一時無法反映。
3.製作感想 :教學方式建議透過影音與涂文解說會更容易理解。
4.製作作業的時間 :3hr

(1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001445118

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

1.網頁主題: 配色與風格設定:[color=#0033CC]莫內;藍色系[/color]

2.有無遇到的問題? [color=#0033CC]無[/color]

3.製作感想 [color=#0033CC]這次比上次還要難,希望可以維持圖文解說的方式來教學[/color]

4.製作作業的時間 [color=#0033CC]2.5hr[/color]

(1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001445009

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

1.網頁主題:太空戰士VII (FF7AC)
配色與風格設定:黑白灰
2.有無遇到的問題:沒有
3.製作感想:影片時常觀看到一半盪掉要重跑 整個讓人很崩潰 我比較喜歡以前的講義方式(ˊQˋ)"
4.製作作業的時間 :2小時

(1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001445048

(2).請回答以下問題:
1.網頁主題:奧黛麗赫本
配色與風格設定:配色是Tiffany Blue 風格則是俏麗復古風~~
2.有無遇到的問題? 有!! 我前面有一段的點點還是做不出來=3= 而且我一開始還不會改色塊顏色,後來才發現是要打th才對!!! 哈哈哈
3.製作感想 很累,但是看到自己做出來的成果真的很滿意 有一些些的成就感了呢 :-)
而且我很喜歡影片教學,雖然說要一直切換螢幕比較麻煩 但是呢影片焦的更為清楚詳細唷!!! 老是你真的很用心耶>grinning smiley<
4.製作作業的時間 3個小時~



Edited 2 time(s). Last edit at 11/30/2011 02:10AM by Tracy Liao.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445001/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:黑白簡單
2.有無遇到的問題? 阿...影片都要放到全螢幕才看得到 然後要邊做邊看就要先縮小影片 有點麻煩
3.製作感想 其實看影片做還蠻詳細的!不會有步驟錯掉 不過還是喜歡上課時的教學 (因為可以先做好 回家就不用再重頭自己開始做哈哈)
4.製作時間 快一小時

(1).作業網址:http://mepopedia.com/~web100a/hw06/hw06-1001445013
(2)
1.網頁主題:史努比Snoopy
2.配色與風格設定:黃色系
3.有無遇到的問題:目前沒有
4.製作感想:影片、圖文都很好,可以兩者合一會很好
5.製作作業的時間 3hr

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445078

(2).請回答以下問題:
1.網頁主題 :以2pm猛男肌肉照為主~~
2.有無遇到的問題 :用影音學習其實滿清楚的~~就好像有一個人在旁邊教你 但是要一直按暫停好麻煩~哈哈!!!
3.製作感想 :還ok~
4.製作作業的時間 :3天半

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445066

(2).請回答以下問題:
1.網頁主題 :yoga林宥嘉
2.有無遇到的問題 :表格在預覽的方面會覺得有點混亂
3.製作感想 : 很累人...感覺越來越困難了!這次是補教的,因為上次實在趕不及做!
4.製作作業的時間 :兩小時

ps表格在albums裡面
崁入的影片在picture裡面

(1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001445084

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:酷企鵝
2.有無遇到的問題?無
3.製作感想:影片插入還沒使用到,用影片的方式講解感覺更清楚了。
4.製作作業的時間:30分鐘

(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445130

(2).請回答以下問題:
1.網頁主題 :永遠的印象-莫內 / 配色與風格設定 :主要的圖示還是依照老師的 但背景我改為淺灰色
2.有無遇到的問題 :我從這個作業到現在之後的都還沒交齊 因為我的電腦一直無法破解cs5的程式 我非常困擾 才因此遲交作業的 (試很多遍了 現再為了趕作業才又刪除重新安裝 使用試用版)
3.製作感想 :常常搞不清楚那些h1還有很多的專有名詞應該設為類別或是標籤之類的 所以作出來的東西都看起來怪怪的
4.製作作業的時間 :分很多天作 所以不太記得 好幾小時有吧
教學影片有優點有缺點:我覺得有影片蠻不錯 有時候講義會有步驟跳過 我可以從影片中觀看

(1).作業網址 :
http://mepopedia.com/~web100a/hw06/hw06-1001445108
(2).請回答以下問題:
1.網頁主題:攝影 配色與風格設定:黑白、背景藍色
2.有無遇到的問題? 預覽於IE時跑出來是空白的 但是換一台電腦又可以打開
3.製作感想 希望可以越做越好
4.製作作業的時間 3小時

http://mepopedia.com/~web100a/hw06/hw06-1001445088/drawing.html
.請回答以下問題:
1.網頁主題 :延續期末作業
2.有無遇到的問題 :我的WRAPPER真的不知道怎麼改了
嘗試好多次在設計視窗裡面就好好的 到顯示就變成短短的 有請老師開示...
3.製作感想 :ㄜ阿這次真的複雜多了!我還是比較喜歡圖片講解,影片講解我都會一直卡帶然後一直重播><
4.製作作業的時間 :3hr
感覺還有好多進步空間 雖然完成的那一刻很爽^_^但還是有點混亂

MEPOERs said:
chingching: 打錯了是延續期中作業:我自己^_^
(1).作業網址 : http://mepopedia.com/~web100a/hw06/hw06-1001445017


(2).請回答以下問題:
1.網頁主題:五月天
配色與風格設定: 黑白簡單
2.有無遇到的問題? 表格很難用
3.製作感想 東西都調很久,有時候有的東西都怪怪的
4.製作作業的時間:5天

MEPOERs said:
JinJin: 沒有看到網頁喔!
(1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001446070

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

MEPOERs said:
JinJin: 沒有看到網頁喔!
(1).作業網址 :http://mepopedia.com/~web100a/hw06/hw06-1001445102

1.網頁主題: 配色與風格設定: 宮崎駿 蔚藍色調

2.有無遇到的問題 無

3.製作感想 因為是期末作業所以沒遇到什麼問題

4.製作作業的時間 30分鐘