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-2b/hw06/hw06-104xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

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

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




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

(2).請回答以下問題:
1.網頁主題:SHERIIDAN
配色與風格設定:因為是做國外有海邊的度假村,所以用藍色為主,有沉靜、自由的意象。

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

3.製作感想:製作網頁的過程中,越來越覺得好玩,可以按照自己的喜好來做色彩搭配和
設定,加上表格的運用,讓內容更加有條理,也清楚很多,之前雖然有自己試過表格,但
是沒有很好看,而聽了老師上課解說後,覺得自己有進步一些,也發現原來表格也是有很
多的設定,每一個細節都很重要,因為都會影響整體畫面的美感。

4.製作作業的時間:3~4小時。

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

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

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

簡潔的風格,來呈現兩個人的愛情故事

2.有無遇到的問題?

目前沒有

3.製作感想

想做出簡單的風格可是感覺又好白!!!omg會再想想再修改做出自己手繪出來的一個小網頁

4.製作作業的時間

2~3小時

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

(2).請回答以下問題:
1.網頁主題:Bravest Warriors
配色與風格設定:是個比較科技化的美國動畫,所以已比較鮮艷活潑的色彩設計。

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

3.製作感想:做網頁做到現在,覺得越來越熟練,任何細節都可以個性化的調整。像這次在角色清單中我有試試看不同效果,就是角色的照片點開會有不一樣的角色角度圖片。看到網頁製作完,超級有成就感,也終於可以睡覺了。smileys with beersmileys with beer

4.製作作業的時間:3小時。

作業網址 :http://mepopedia.com/~web105-2b/hw06/hw06-1045445161

網頁主題:LOUISA COFFEE

配色與風格設定:
配色上用路易莎咖啡的LOGO標準色來配色在使用輔助色來增加畫面的活潑感
風格是想利用顏色創造出溫暖幸福的感覺,因為路易莎是屬於早午餐系列的一家咖啡店,
通常這個時間吃東西,給人的感覺都是溫暖、幸福、輕鬆。

有無遇到的問題?
無大礙,看教學影片都能解決。

製作感想
想趕快做出完整的架構,每次都很期待有新的東西加入,這門課是這學期少數有感興趣的一堂課。
然後路易莎咖啡發展歷程這個部分重新利用表格方式整理,看起來比之前的還要整齊舒服,較有設計感一點。

製作作業的時間
2小時又30分鐘



Edited 1 time(s). Last edit at 12/22/2016 08:29AM by 1045445161.
(編輯記錄)

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


1.網頁主題:日本神道教
配色與風格設定: 神道教是純白乾淨的象徵,用紅白兩色來製作

2.有無遇到的問題? 無

3.製作感想:表格用起來還不上手,慢慢摸索終於用出來了~

4.製作作業的時間:四小時

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

(2).請回答以下問題:
1.網頁主題:黑執事
配色與風格設定:黑暗與華麗
(期末作業還沒想到新的,所以先拿原本的期中來做><)

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

3.製作感想
終於學會用表格了

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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
清新可愛甜美的風格WWW
2.有無遇到的問題?
弄表格的時候有炸掉哈哈,但是狂問朋友跟自己研究後就OK了
3.製作感想
熬夜做網設真的很累,可是每次做出來成功後就超開心的~
4.製作作業的時間
3小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
清新可愛甜美的風格WWW
2.有無遇到的問題?
弄表格的時候有炸掉哈哈,但是狂問朋友跟自己研究後就OK了
3.製作感想
熬夜做網設真的很累,可是每次做出來成功後就超開心的~
4.製作作業的時間
3小時
呵呵 謝謝老師教我ㄚㄚ~~~

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

1.網頁主題:小熊維尼
以簡單的咖啡、黃、澄三種色調去搭配整體畫面,讓人有溫馨舒適的感覺。

2.有無遇到的問題?
表格兩旁的虛線會凸出去,中間虛線用不出來,如果有設表格標題(caption),
不知道為何也會整個跑掉。

4.製作作業的時間:
3~4小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:童話風格
2.有無遇到的問題? 沒有吧
3.製作感想 :有時候語法還是會不清楚會搞混,要偷看老師的語法才會恢復記憶spinning smiley sticking its tongue outspinning smiley sticking its tongue out
4.製作作業的時間 2~3小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 監獄兔的配色是用監獄的顏色及他們皮膚的顏色
2.有無遇到的問題? 表格的設定因為有兩種表格,所以會互相影響,有時候設定不到自己最想要的樣子
3.製作感想:很好玩,感覺又學習到新東西了
4.製作作業的時間:差不多兩到三個小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 藍色比較溫暖
2.有無遇到的問題? 開始的時候不知道如何寫代碼,看了講義和同學的作業以後知道了。
3.製作感想
4.製作作業的時間 1個半小時

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

1.網頁主題:哈士奇
配色與風格設定: 因為哈士奇是屬於寒帶犬所以在配色及風格上用於較冷色調,搭配寒帶
溫暖的陽光讓畫面看起來更舒服。
2.有無遇到的問題?

3.製作感想
從開始作後我就很想把不同顏色的哈士奇放上去做一個整理,這次教到的
表格剛好可以把它做一個統整,覺得開心。
4.製作作業的時間
5小時



Edited 1 time(s). Last edit at 12/28/2016 07:48PM by 1045445188.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:美國小天后
配色與風格設定:暖色調 陽光


2.有無遇到的問題?
無 表格做在muisc那

3.製作感想
表格整理起來蠻整齊的

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

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

(2).請回答以下問題:
1.網頁主題: MAMAMOO
配色與風格設定:暗紅,復古風
2.有無遇到的問題?暫無
3.製作感想:表格讓頁面看起來比較乾淨,但是html語法反而就變得比較多
4.製作作業的時間:2~3小時

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

(2).請回答以下問題:
1.網頁主題: 畢卡索
配色與風格設定:粉藍
2.有無遇到的問題?沒有
3.製作感想:學習到新東西 不難
4.製作作業的時間:2~3小時

(1).作業網址 :http://mepopedia.com/~web105-2b/hw07/hw07-1045445053
1.網頁主題: 配色與風格設定: 黑白,依團體形象去做
2.有無遇到的問題? 格子設定,間隔之類的。但是知道怎麼做了
3.製作感想: 新鮮~~
4.製作作業的時間 :1~2小時!



Edited 1 time(s). Last edit at 01/05/2017 02:52AM by 1045445053.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2b/hw06/hw06-1045445080
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 簡介的地方用比較簡單的色彩歷程的地方用比較活潑的顏色
2.有無遇到的問題? 無
3.製作感想 :表格製作雖然有點麻煩但用完之後就比較好看一點了
4.製作作業的時間: 2~3小時

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

(2).請回答以下問題:
1.網頁主題: 步步系列
配色與風格設定: 偏紫神秘
2.有無遇到的問題? 無
3.製作感想 覺得更加的好看 而且更加快速地吸收到
4.製作作業的時間 2~3小時


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

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

3.製作感想
表格做起來不難,現在表格做起來很順手。
4.製作作業的時間
2~3小時

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


1.網頁主題:侏儸紀世界
配色與風格設定: 風格用暗色系

2.有無遇到的問題? 無

3.製作感想:表格還蠻好用的~
4.製作作業的時間:1小時

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

(2).請回答以下問題:
1.網頁主題:ARASHI日本偶像男子團體
配色與風格設定:因為我用他們有一次比較活潑的專輯主題,所以畫面也較為亮色系
2.有無遇到的問題? 無。
3.製作感想:還是不怎麼喜歡網頁哈哈哈哈,每次都讓我苦惱很久。
4.製作作業的時間:3小時。



Edited 1 time(s). Last edit at 01/10/2017 06:17PM by 1045445077.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:MAZDA 2
配色與風格設定:簡單風

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

3.製作感想:有點難度

4.製作作業的時間:50分

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

(2).請回答以下問題:
1.網頁主題:慢慢說樂團
配色與風格設定:文青

2.有無遇到的問題? 有表格亂跑

3.製作感想:雖然很困難但覺得很有趣

4.製作作業的時間:3~4小時。

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

(2).請回答以下問題:
1.網頁主題:草間彌生
配色與風格設定:圓點點

2.有無遇到的問題? 無

3.製作感想:雖然很困難但覺得很有趣 還去同學家憶起做作業很快樂

4.製作作業的時間:3~4小時。

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

(2).請回答以下問題:
1.網頁主題:ONE PIECE 航海王
配色與風格設定:神秘

2.有無遇到的問題 網頁有時候都會跑不出來

3.製作感想:製作過程很多困難

4.製作作業的時間:2.5小時。

作業網址 :http://mepopedia.com/~web105-2b/hw06/hw06-1045445149

請回答以下問題:
1.網頁主題: 配色與風格設定:
紅白可樂風
2.有無遇到的問題?

3.製作感想
表格很複雜,因為年代我做了46個表格,超多
4.製作作業的時間
1.5hr

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:暗黑系列 酷酷風格
2.有無遇到的問題? 表格製作很麻煩
3.製作感想 覺得表格很複雜有點混亂
4.製作作業的時間 2個小時

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

(2).請回答以下問題:
1.網頁主題: MARVEL
2.有無遇到的問題? 麻煩
3.製作感想 真的要用心
4.製作作業的時間 2個小時



Edited 1 time(s). Last edit at 01/11/2017 01:48PM by 陳柏叡1045445137.
(編輯記錄)

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

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

1.網頁主題: 魔鏡夢遊

配色與風格設定:

配色與風格設定:以背景的紫色來呈現出神秘而奇幻的感覺,則黃色是想呈現華麗的感覺,這兩種顏色都是去吸header圖片裡的顏色。

2.有無遇到的問題?

目前沒有

3.製作感想

在這次的作業裡又學到了不一樣的東西,感覺很好玩,雖然在做的方面有點花時間,也會遇到一些問題,但完成後也會小有成就感。

4.製作作業的時間

2~4小時

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

(2).請回答以下問題:
1.網頁主題:super junior
配色與風格設定:粉色系
2.有無遇到的問題?暫無
3.製作感想:表格讓頁面看起來較乾淨。
4.製作作業的時間:1小時

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

(2).請回答以下問題:
1.導覽列配色與風格設定:神秘感
2.有無遇到的問題?仔細研究後,問題有解決了
3.製作感想; 表格比較清楚
4.製作作業的時間:5~6小時

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

1.網頁主題:心靈畫家- 曾日昇
為了融入畫家的畫,以多色彩和畫面乾淨為主
2.有無遇到的問題?
方格裡的字少,使得格子旁太空,但之後有再把圖放大些
之後的問題都看老師的教學影片解決問題,還是會學著自己解決
3.製作感想
很難跳脫框框,使自己的風格束縛,導致畫面有點死板,不過還是盡量呈現

4.製作作業的時間:
3~4小時

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

(2).請回答以下問題:
1.導覽列配色與風格設定:穩重感
2.有無遇到的問題?仔細研究後,問題有解決了
3.製作感想; 表格比較清楚
4.製作作業的時間:5~6小時

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

(2).請回答以下問題:
1.網頁主題:名偵探柯南
配色與風格設定:沉穩簡單

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

3.製作感想:製作網頁的過程中,覺得越來越得心應手

4.製作作業的時間:3~4小時。

作業網址 :http://mepopedia.com/~web105-2b/hw06/hw06-1045445065

1.網頁主題: 配色與風格設定: 宇宙黑風格
2.有無遇到的問題 : N
3.製作感想: N
4.製作作業的時間 : 2days

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


1.網頁主題:KAKAO
配色與風格設定: 活潑的撞色

2.有無遇到的問題? 表格跑掉

3.製作感想:表格用起來還不上手
4.製作作業的時間:四小時

(1).作業網址 :http://mepopedia.com/~web105-2b/hw06/hw06-1045445122/cast

(2).請回答以下問題:
1.導覽列配色與風格設定:低調,簡約
2.有無遇到的問題? 無
3.製作感想 ......
4.製作作業的時間 很久... 



Edited 1 time(s). Last edit at 01/12/2017 10:15PM by 1045445122.
(編輯記錄)

作業網址 http://mepopedia.com/~web105-2b/hw06/hw06-1045445170

網頁主題: 星座
配色與風格設定: 根據header用藍綠來配色
有無遇到的問題? 無
製作感想:做到最後頭腦昏昏的。
製作作業的時間:1~2小時



Edited 1 time(s). Last edit at 01/13/2017 06:43PM by 1045445170.
(編輯記錄)

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

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