[作業05 ] 繞圖排文與推文按鈕的應用 1. 一、製作步驟2. 二、繳交作業方式請參考 [color=#CC3300][講義05] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?804,17878,17878[/color] [color=#CC0066]本講義範例網址 http://mepopedia.com/~jinjin/web/hw05/story.html　[/color] 的步驟製作，並符合以下條件： 1. 一、製作步驟 1.下載附件的練習檔(或自行設計，必須是全新的內容的一頁) 2.蒐集文字及圖片資料，並設定#header的標題與副標題 3.重新設定#content及#footer的CSS，可參考圖示步驟，但不可為一樣的設定 (1) [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text004.jpg[/IMG] (2) [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text005.jpg[/IMG] (3) [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text006.jpg[/IMG] 4.設定內文的主標題h2，可參考圖示步驟，但不可為一樣的設定 (1) [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-10-2.jpg[/IMG] (2) [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-10.jpg[/IMG] 5.設定類別作者介紹的CSS，可參考圖示步驟，但不可為一樣的設定 (1) [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text001.jpg[/IMG] (2) [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text002.jpg[/IMG] (3) [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text003.jpg[/IMG] 6.設定繞圖排文 7.設定臉書、噗浪以及推特的按鈕及分享語法 8.製作圖片跳出視窗的設定 9.在[color=#990033]title的部分打上『自己作業的命名』[/color] 10.在#footer打上自己的版權聲明 11.請每位同學依步驟完成本單元後，上傳至FTP 12.本次作業的重點在於： [color=#CC0066]（1 ）善用CSS導覽列功能 （2 ）繞圖排文 （3 ）推文設定 （4 ）利用CSS，做更細緻的內文設定 （5 ）如何利用圖片與文字的編排搭配出有質感的網頁。[/color] [hr] 2. 二、繳交作業方式 1.製作完成後，檔案命名方式： [color=#669900]第五個平時作業FTP上的資料夾為：hw05 每位同學請將自己的資料夾命名為：hw05-學號 這個作業的網址則為:http://mepopedia.com/~cg104-1a/hw05/hw05-104xxxxxxx 資料夾內含： 1.首頁命名為index.html 2.一個命名為style.css的css樣式檔 3.images圖檔資料夾 存放在 < hw05-學號 > 的資夾內[/color] 2.上傳至FTP 3.回覆本篇文章 (1).作業網址 ： (2).請回答以下問題： 1.網頁主題： 配色與風格設定： 2.有無遇到的問題? 3.製作感想 4.製作作業的時間 http://mepopedia.com/forum/read.php?2563,81328,81328#msg-81328 Sat, 27 Jun 2026 09:29:13 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2563,81328,82118#msg-82118 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,82118#msg-82118

(2).請回答以下問題：
1.網頁主題：初音 配色與風格設定： 唯美
2.有無遇到的問題? :超多~~~~都不會
3.製作感想 :很累很殺腦細胞
4.製作作業的時間 拖到最後一刻]]> 1045440050 104-2《中國》竹影視一A-電腦繪圖實作(一) Sun, 19 Jun 2016 20:27:54 +0800 http://mepopedia.com/forum/read.php?2563,81328,82083#msg-82083 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,82083#msg-82083

(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 其實沒有多想....
2.有無遇到的問題? 繞圖排文有一些些小困難...
3.製作感想：沒感想...
4.製作作業的時間：對不起我是補交...]]> 1045440006 104-2《中國》竹影視一A-電腦繪圖實作(一) Fri, 17 Jun 2016 12:52:57 +0800 http://mepopedia.com/forum/read.php?2563,81328,82063#msg-82063 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,82063#msg-82063

(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 皮克斯
2.有無遇到的問題?沒有
3.製作感想 蠻好玩的
4.製作作業的時間 一小時

老師，繞圖排文是about，因為我一直沒辦法單獨放就全放在一起了。]]> 蘇美蓉 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 19:04:26 +0800 http://mepopedia.com/forum/read.php?2563,81328,82057#msg-82057 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,82057#msg-82057 (2).請回答以下問題：
1.網頁主題： 配色與風格設定：黑白簡約風
2.有無遇到的問題? 有,DW是英文版 對照中文對很久ＱＱ
3.製作感想 ：累累ㄉ希望不要被當拜託
4.製作作業的時間 ：大概兩小時]]> 1045440002 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 17:14:10 +0800 http://mepopedia.com/forum/read.php?2563,81328,82053#msg-82053 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,82053#msg-82053

(2).請回答以下問題：
1.網頁主題： 配色與風格設定：小小兵
2.有無遇到的問題? 沒有
3.製作感想 開心
4.製作作業的時間 有時間就做]]> afd78949 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 15:16:40 +0800 http://mepopedia.com/forum/read.php?2563,81328,82052#msg-82052 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,82052#msg-82052

(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 不知道
2.有無遇到的問題? 沒有
3.製作感想 開心
4.製作作業的時間 有時間就做]]> afd78949 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 15:15:51 +0800 http://mepopedia.com/forum/read.php?2563,81328,82041#msg-82041 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,82041#msg-82041

(2).請回答以下問題：
1.網頁主題： 美國隊長3：英雄內戰
2.有無遇到的問題? 無
3.製作感想 累
4.製作作業的時間 有時間就做]]> 1045440028 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 14:24:27 +0800 http://mepopedia.com/forum/read.php?2563,81328,82035#msg-82035 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,82035#msg-82035 http://mepopedia.com/~cg104-1a/hw05/hw05-1045440020
(2).請回答以下問題：
1.網頁主題： 配色與風格設定：
配色是以海底及角色風格去配
2.有無遇到的問題?
沒有
3.製作感想
東西開始變難了...
4.製作作業的時間
2hr]]> 1045440020 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 13:52:45 +0800 http://mepopedia.com/forum/read.php?2563,81328,82018#msg-82018 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,82018#msg-82018 (2).請回答以下問題：
1.網頁主題： 配色與風格設定： 繽紛的顏色
3.製作感想 ：愈來愈難難難難難
4.製作作業的時間 ：100天]]> 小花蛀牙 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 11:47:42 +0800 http://mepopedia.com/forum/read.php?2563,81328,81971#msg-81971 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81971#msg-81971
1.網頁主題： 配色與風格設定： 看起來就柔柔的色調
2.有無遇到的問題? 沒有
3.製作感想 摁...對不起我在期末前一個禮拜才做，好趕呀
4.製作作業的時間 1天]]> 1045440019 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 01:23:54 +0800 http://mepopedia.com/forum/read.php?2563,81328,81944#msg-81944 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81944#msg-81944 http://mepopedia.com/~cg104-1a/hw05/hw05-1045440031

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

1.網頁主題： 配色與風格設定：
藍藍綠綠 照片與相機

2.有無遇到的問題?
掰內文好累

3.製作感想
終於做完了
4.製作作業的時間
100年]]> 1045440031 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 15 Jun 2016 23:04:10 +0800 http://mepopedia.com/forum/read.php?2563,81328,81894#msg-81894 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81894#msg-81894 http://mepopedia.com/~cg104-1a/hw05/hw05-1025435233

(2).請回答以下問題：
1.網頁主題：鸚鵡人
2. 配色與風格設定： 簡單亮色系搭配
3.製作感想 ：想趕快全部做完
4.製作作業的時間 ：1小時]]> 1025435233 104-2《中國》竹影視一A-電腦繪圖實作(一) Tue, 14 Jun 2016 23:29:41 +0800 http://mepopedia.com/forum/read.php?2563,81328,81823#msg-81823 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81823#msg-81823
1.一拳超人 搞笑
2.很多說不完哈哈
3.超難的啊
4.超~~~~久~~~]]> king4221029 104-2《中國》竹影視一A-電腦繪圖實作(一) Tue, 14 Jun 2016 00:35:34 +0800 http://mepopedia.com/forum/read.php?2563,81328,81666#msg-81666 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81666#msg-81666 http://mepopedia.com/~cg104-1a/hw05/hw05-1045440044

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

1.網頁主題： 配色與風格設定：
粉紅色的 卡莉很怪奇所以我也做得很怪奇
2.有無遇到的問題?
我到底按鈕有沒有做好呀？
3.製作感想
應該是我開始變笨了 我不會做網頁了QQQQ
4.製作作業的時間
10000年]]> 1045440044 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 09 Jun 2016 21:59:16 +0800 http://mepopedia.com/forum/read.php?2563,81328,81433#msg-81433 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81433#msg-81433
(2).請回答以下問題：
1.網頁主題： 配色與風格設定：
粉紅色調、少女時代
2.有無遇到的問題?
花費的時間越來越多
3.製作感想
越來越難了
4.製作作業的時間
用之前做的改]]> 1045440014 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 19 May 2016 08:57:49 +0800 http://mepopedia.com/forum/read.php?2563,81328,81432#msg-81432 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81432#msg-81432
http://mepopedia.com/~cg104-1a/hw05/hw05-1045440029

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

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

配色是以白色突顯主題，風格是鮮豔。

2.有無遇到的問題?

還可以 跟著影片做。

3.製作感想

東西增加了，變得複雜，但是有學到有趣的 期待後續。

4.製作作業的時間
有空就坐。]]> 1045440029-yu 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 19 May 2016 02:43:22 +0800 http://mepopedia.com/forum/read.php?2563,81328,81426#msg-81426 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81426#msg-81426 http://mepopedia.com/~cg104-1a/hw05/hw05-1045440024
(2).請回答以下問題：
1.網頁主題： 配色與風格設定：
配色是以無色彩(淡色)強調
2.有無遇到的問題?
不會置入圖片，分享按鈕設定，標題列設置(h1部分)
3.製作感想
東西開始變難了...
4.製作作業的時間
沒去數...]]> 翕洗喜翕西 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 18 May 2016 20:44:20 +0800 http://mepopedia.com/forum/read.php?2563,81328,81417#msg-81417 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81417#msg-81417 http://mepopedia.com/~cg104-1a/hw05/hw05-1045440011

(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 暖暖的顏色。
3.製作感想 ：越來越上手
4.製作作業的時間 ：一整天。]]> GEE 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 18 May 2016 16:44:36 +0800 http://mepopedia.com/forum/read.php?2563,81328,81362#msg-81362 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81362#msg-81362 http://mepopedia.com/~cg104-1a/hw05/hw05-1045440013

(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 簡約。以黑、白、紅代表屬於熊本熊之特色。
2.有無遇到的問題? 想要知道導覽列的設定怎麼變寬後完全變色（問題已解決~）。
3.製作感想 ：很好玩，能知道新語法讓網頁越來越漂亮很感動。
4.製作作業的時間 ：一整天。]]> 1045440013 104-2《中國》竹影視一A-電腦繪圖實作(一) Sat, 14 May 2016 12:51:53 +0800 http://mepopedia.com/forum/read.php?2563,81328,81361#msg-81361 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81361#msg-81361
http://mepopedia.com/~cg104-1a/hw05/hw05-1045440010

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

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

配色是以深色突顯淺色(亮色)為主，風格是沉穩.穩重。

2.有無遇到的問題?

都還好。

3.製作感想

東西雖然增加了，但是有學到更多東西。

4.製作作業的時間

回家放學後就開始做。]]> 1045440010 104-2《中國》竹影視一A-電腦繪圖實作(一) Fri, 13 May 2016 22:32:36 +0800 http://mepopedia.com/forum/read.php?2563,81328,81355#msg-81355 Re: [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81355#msg-81355

(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 唯美
2.有無遇到的問題? icon要怎麼放到左邊
3.製作感想 開心
4.製作作業的時間 有時間就做]]> 1045440046 104-2《中國》竹影視一A-電腦繪圖實作(一) Fri, 13 May 2016 15:33:49 +0800 http://mepopedia.com/forum/read.php?2563,81328,81328#msg-81328 [作業05 ] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?2563,81328,81328#msg-81328
  1. 1. 一、製作步驟
  2. 2. 二、繳交作業方式
請參考

[color=#CC3300][講義05] 繞圖排文與推文按鈕的應用
http://mepopedia.com/forum/read.php?804,17878,17878[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw05/story.html　[/color]


的步驟製作，並符合以下條件：

1. 一、製作步驟


1.下載附件的練習檔(或自行設計，必須是全新的內容的一頁)

2.蒐集文字及圖片資料，並設定#header的標題與副標題

3.重新設定#content及#footer的CSS，可參考圖示步驟，但不可為一樣的設定

(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text004.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text005.jpg[/IMG]

(3)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text006.jpg[/IMG]


4.設定內文的主標題h2，可參考圖示步驟，但不可為一樣的設定
(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-10-2.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-10.jpg[/IMG]


5.設定類別作者介紹的CSS，可參考圖示步驟，但不可為一樣的設定

(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text001.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text002.jpg[/IMG]

(3)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text003.jpg[/IMG]


6.設定繞圖排文

7.設定臉書、噗浪以及推特的按鈕及分享語法

8.製作圖片跳出視窗的設定

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

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

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

12.本次作業的重點在於：

[color=#CC0066]（1 ）善用CSS導覽列功能
（2 ）繞圖排文
（3 ）推文設定
（4 ）利用CSS，做更細緻的內文設定
（5 ）如何利用圖片與文字的編排搭配出有質感的網頁。[/color]

[hr]

2. 二、繳交作業方式



1.製作完成後，檔案命名方式：

[color=#669900]第五個平時作業FTP上的資料夾為：hw05

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

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 ：

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

]]> JinJin 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 11 May 2016 12:27:47 +0800