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

Advanced

Re: [作業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/~web100b/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]



http://mepopedia.com/~web100b/hw06/hw06-1001445026/

1.網頁主題: 配色與風格設定: 年底要發專輯了! 藍色是應援色!
2.有無遇到的問題?
不知道為甚麼header放了那張圖之後就沒辦法margin=0,都會有距離
caption的團員介紹用DW編輯時不會跑掉,可是在網頁上實際看就跑掉了sad smiley
3.製作感想 表格超方便!
4.製作作業的時間 2小時半+兩節課

我已經補交了!! 在你的筆電裡

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: cool smiley我的作品 黑白紅為主 鬼魅風格
2.有無遇到的問題? spinning smiley sticking its tongue out還好 越來越熟練 謝謝老師
3.製作感想 smileys with beer很有成就感 想把網頁學好
4.製作作業的時間 eye popping smiley 1H左右

http://mepopedia.com/~web100b/hw06/hw06-1001445010 (表格在TNR那頁)

1.網頁主題:我的貓貓樂園
配色與風格設定: 溫心粉紅
2.有無遇到的問題?
不知道有沒有一定要放影片??
3.製作感想: 影片還滿不賴的阿 比較方便
4.製作作業的時間: 大概3小時邊看邊做~~



Edited 1 time(s). Last edit at 11/25/2011 01:58AM by free236.
(編輯記錄)

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


1.網頁主題:我們家的餐廳 !! 配色與風格設定: 復古風
2.有無遇到的問題? 大致上沒有..
3.製作感想 太好玩了拉!! 每次上完課都迫不及待的想完成 !! 每次看到成果都好有成就感!! 期待下禮拜的雙欄網頁 !!
4.製作作業的時間 課堂上 + 兩小時

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

(2).請回答以下問題:
1.網頁主題:與期中考相同(我的個人網站) 配色與風格設定:與期中考相同(可愛童話風)

2.有無遇到的問題? 沒有太大困難

3.製作感想 很有趣,沒有想過用表格可以整理成那麼漂亮的樣子,因為一開始都想成WORD那種醜醜的樣子

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

http://mepopedia.com/~web100b/hw06/hw06-1001445004/
1.網頁主題:韓國明星-朴有天
配色與風格設定:黑灰白
2有無遇到的問題? 無
3.製作感想 :很開心
4.製作作業的時間 :2小時

http://mepopedia.com/~web100b/hw06/hw06-1001445075

1.網頁主題: 手工餅乾
2.有無遇到的問題? 沒有
3.製作感想 : 製作表格蠻快的,做完感覺頁面變整齊了 !!
4.製作作業的時間: 2小時多



Edited 1 time(s). Last edit at 11/26/2011 07:41PM by sintp23.
(編輯記錄)

http://mepopedia.com/~web100b/hw06/hw06-1001445051

1.網頁主題: 琪靈王 spinning smiley sticking its tongue out
2.有無遇到的問題? 還好 邊看老師影片邊做
3.製作感想 : 製作表格蠻快的,有些東西比較瑣碎 有點煩 drinking smiley
4.製作作業的時間: 2小時多

http://mepopedia.com/~web100b/hw06/hw06-1001445095/video.html

1.網頁主題:動畫王國
2.有無遇到的問題? 沒有
3.製作感想 :邊看老師講義有比較了解smiling smiley
4.製作作業的時間: 2小時

http://mepopedia.com/~web100b/hw06/hw06-1001445045/music.html
主題是五月天 以藍色調為主
有遇到小問題 老師說的連結滑鼠移過去可以變色但是我試了幾次都不行
其他的就都可以解決
加加減減做了大概4個小時



Edited 2 time(s). Last edit at 11/28/2011 11:39PM by quky.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格以粉紅色系為主 舒服柔軟的風格
2.有無遇到的問題? 其實也還好....... 邊看講義邊做還算簡單
3.製作感想 很有成就感
4.製作作業的時間 約3H

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

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

1.網頁主題: 配色與風格設定:用了最簡單的白跟灰黑 (這樣的顏色是我最常使用的,但希望自己能挑戰更多花俏又可以符合主題的配色)

2.有無遇到的問題? 我覺得一樣是位置的問題,而且整整一個禮拜都沒練習的話真的差很多。置中的地方,我照上次老師說的改BODY的地方,但是我改錯嗎?他完全沒有移動的樣子。

3.製作感想:其實這樣做起來真的很有成就感,我把期中作業某幾頁沒做的地方抓出來,用老師新交的方法做,整個版面又會不一樣了。很期待他真的一頁一頁完成的時候,如果有空應該會想想下一個想做成網站的主題。

4.製作作業的時間:斷斷續續花了五六個小時吧 (但其實花在找資料上的時間還蠻多的)

http://mepopedia.com/~web100b/hw06/hw06-1001445107

1. 網頁主題: 迪士尼

配色與風格設定:舒服的粉色系

2. 有無遇到的問題? 沒有

3. 製作感想:看老師的講義做,很清楚 >grinning smiley<

4. 製作作業的時間:2小時 找影片花了一些時間 spinning smiley sticking its tongue out

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



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

1.網頁主題: 配色與風格設定:我熱衷於蘇聯的風格,所以有點共產味道ˊˋ,不過我只是喜歡它的風格,我恨死共產了,蘇聯的話應該配色是紅、黃、黑吧,很多遊戲都把蘇聯配色成這樣cool smiley

2.有無遇到的問題? 問題沒有很困難,看完老師的影音真的做很快grinning smiley

3.製作感想:老樣子不知道從何下手,但先試著做就不知覺的順手起來了winking smiley

4.製作作業的時間:還滿久的,有5個小時以上吧thumbs up

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:沿用期中作業
2.有無遇到的問題? 我的表格有點怪怪的,它沒辦法連在一起,不知道是不是用cs3增加css沒有複合的選項,所以我就是標籤的原因。
3.製作感想 表格讓視覺很有整體,老師的影音超讚的smiling smiley
4.製作作業的時間 兩小時



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

*作業上課交給老師

1.網頁主題:(配色與風格設定)
以文字為主題,偏褐色調想呈現古代文書的感覺

2.有無遇到的問題?
DW一直當掉 = =

3.製作感想
就跟婚前婚後的差別一樣

4.製作作業的時間
3H

http://mepopedia.com/~web100b/hw06/hw06-1001445008/

1.網頁主題.配色與風格設定: 由期中作業改
2.有無遇到的問題? 無
3.製作感想: 越來越複雜了 ......ˊ口ˋ
4.製作作業的時間 3 .5 hr

1. 網址:
 http://mepopedia.com/~web100b/hw06/hw06-1001445049/flower.html

 網頁主題、配色與風格設定:
 同期中作業
 
2. 有無遇到的問題?
 許多表格要注意的小細節忘了

3. 製作感想:
 上完課隔太久才製作會忘記好多重要的小細節,都要看老師製作的講義重新找回印象。
 還是貼圖的講義感覺比較詳細。

4. 製作作業的時間:
 5小時多。

http://mepopedia.com/~web100b/hw06/hw06-1001445030

1.網頁主題: 配色與風格設定:藍綠色

2.有無遇到的問題? 沒神摸問題˙ˇ˙

3.製作感想 基本上都還OK,只是有時候會忘記自己設定的名稱,因為都是英文ˊ口ˋ

4.製作作業的時間 大約2H

http://mepopedia.com/~web100b/hw06/hw06-1001445063/keep.html


1.以期中作業加強
2.目前沒有
3.加了表格更清楚的知道不同的資訊,很棒
4.四小時

http://mepopedia.com/~web100b/hw06/hw06-1001445006/photo.html

1.網頁主題:期中作業
配色與風格設定:改了背景顏色!!!!走中國風(有漸層喔ㄎㄎㄎ

2.有無遇到的問題?
老問題,http://mepopedia.com/~web100b/hw06/hw06-1001445006/總是沒出現我要的網頁

3.製作感想
好玩摟~表格沒想像中難,然後上次教的忘記了還跑回去看講義,最後就是影音版還不錯用!!!!!
雖然等他跑有點麻煩,下載的檔案也是失敗的(我是用KeepVid)

4.製作作業的時間
5小時,其中有一半的時間在整理照片&縮圖

艾薇兒酷到骨子裡風
http://mepopedia.com/~web100b/hw06/hw06-1001445055/index.htm
以粉紅色搭配黑色創出搖滾風
花費3個多小時



Edited 1 time(s). Last edit at 12/05/2011 10:22PM by part2.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 與期中作業一樣
2.有無遇到的問題? 還好
3.製作感想 眼睛痠
4.製作作業的時間 約3H



Edited 1 time(s). Last edit at 12/04/2011 02:42AM by s930335w.
(編輯記錄)

http://mepopedia.com/~web100b/hw06/hw06-1001445057/

1.網頁主題.配色與風格設定: 由期中作業改
2.有無遇到的問題? 我沒辦法把項目清單用上去...
3.製作感想: 不好意思現在才交,因為之前都開不了.....覺得變得比較複雜了
4.製作作業的時間 3 小時

http://mepopedia.com/~web100b/hw06/hw06-1001445083/music.html

1.網頁主題: 韓星的介紹 配色與風格設定:拼色

2.有無遇到的問題? 目前還OKsmiling smiley        

3.製作感想 做自己喜歡的團體真的會比較有動力也比較好下手,把喜歡的影片放上網站讓人有很成就感^__^

4.製作作業的時間 2.5H

(1).作業網址 :http://mepopedia.com/~web100b/hw06/hw06-1001445036/links.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:其中作業的延續,塗鴉風格還有鮮豔色彩
2.有無遇到的問題? 沒
3.製作感想 覺得圖片教學比影音教學好
4.製作作業的時間 上課時間2小時

(1).作業網址 :http://mepopedia.com/~web100b/hw06/hw06-1001445113/works.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:期中作業的延續
2.有無遇到的問題? 沒
3.製作感想 影音很清楚
4.製作作業的時間 兩小時

1.網頁主題:
畢卡索
2.有無遇到的問題:
沒有
3.製作感想 :
過程有點複雜
4.製作作業的時間:
3小時

http://mepopedia.com/~web100b/hw06/hw06-1001445020

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



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

1.網頁主題:偶像介紹 配色與風格設定:黑色

2.有無遇到的問題? 換成影片介紹時間大大減慢,雖然之後會比較記得住,因為會一直重複拉回去看。

3.製作感想 這次的內容都很實用,感覺之後要幫別人做網頁可以嚇嚇不知道的人。還有...遲交...對不起...

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

依樣畫葫蘆!
http://mepopedia.com/~web100b/hw06/hw06-9711443098

http://mepopedia.com/~web100b/hw06/hw06-1001445099

兩個小時 一個人做很孤單 我會打電話找人陪我聊天
有人說我好可愛 好咖心
jin jin 也好可愛!!

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

(2).請回答以下問題:
1.網頁主題: 星空
配色與風格設定: 幾米憂鬱藍
2.有無遇到的問題? 還好
3.製作感想 很累但完成很有成就感
4.製作作業的時間 3.4天

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:張懸介紹網站
2.有無遇到的問題?無
3.製作感想 老師講解很清楚~
4.製作作業的時間 兩小時

-

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

(2) . 請回答以下問題:
 1. 網頁主題:東方神起☆唯一信仰
  配色與風格設定: 黑灰白
 2. 有無遇到的問題:無
 3. 製作感想:第一次知道表格的設定方法,很特別:)
 4. 製作作業的時間:兩個小時

-

http://mepopedia.com/~web100b/hw06/hw06-1001445109/

1.網頁主題: 配色與風格設定:依老師範例練習 綠色調加紫色
2.有無遇到的問題? 沒有
3.製作感想:有表格很好用
4.製作作業的時間:3小時

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

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

1.網頁主題: 可愛大方的鞋貓 我用大大眼睛的無辜表情當作主圖 希望大家會一看到就喜歡歐歐

2.有無遇到的問題 有歐 我檔案一開始打不開 到之前留言的網址也沒= = 不過後來發現沒事就從做了

3.製作感想 我其中似乎檔案怪怪的所以回家決定重用 結果才發現是學校圖書館電腦的問題= = 我的檔案沒錯 所以我又從新找了主題重做嘞
阿阿 我做好久我做到早上六點科科 天都亮了! 不過值得啦

4.製作作業的時間 6小時 找資料QQ

http://mepopedia.com/~web100b/hw06/hw06-1001445077/


1.網頁主題: 配色與風格設定: 以韓國團體為主軸利用黑白灰當作主色調
2.有無遇到的問題? 表格的框架剛開始不太會使用 之後就沒問題了 Vedio那頁的影片插入本來就已經會了!
3.製作感想 製作著自己偶像的專屬網頁 感覺比較有精神!
4.製作作業的時間 1hr

http://mepopedia.com/~web100b/hw06/hw06-1001445093/

http://mepopedia.com/~web100b/hw06/hw06-1001445081

1.網頁主題: LADY GAGA我的女神
2.有無遇到的問題?
目前沒有
3.製作感想 表格很棒耶!
4.製作作業的時間 2天

http://mepopedia.com/~web100b/hw06/hw06-1001445091/

1.網頁主題:幾米 配色與風格設定:淺藍綠色
2.有無遇到的問題? 沒有
3.製作感想:有表格很好用歐smiling smiley
4.製作作業的時間:3小時