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

Advanced

[作業05] 繞圖排文與推文按鈕的應用

[作業05] 繞圖排文與推文按鈕的應用

請參考

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


本講義範例網址
http://mepopedia.com/~jinjin/web/hw05/story.html 



的步驟製作,並符合以下條件:

1. 一、製作步驟


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

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

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

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

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

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


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

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


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

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

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

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


6.設定繞圖排文

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

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

9.在title的部分打上『自己作業的命名』

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

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

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

(1 )善用CSS導覽列功能
(2 )繞圖排文
(3 )推文設定
(4 )利用CSS,做更細緻的內文設定
(5 )如何利用圖片與文字的編排搭配出有質感的網頁。





2. 二、繳交作業方式



1.製作完成後,檔案命名方式:

第五個平時作業FTP上的資料夾為:hw05

每位同學請將自己的資料夾命名為:hw05-學號
這個作業的網址則為:http://mepopedia.com/~web104-2c/hw05/hw05-103xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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



(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445129

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

1.網頁主題:小鼠波波 配色與風格設定:以鮮豔的色彩吸引兒童觀看

2.有無遇到的問題:無

3.製作感想:漸漸的熟悉網頁如何設計,但是還是需要花點時間想想

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

學號:1035445129

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445153

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

1.網頁主題:薰衣草,以紫色調為主

2.有無遇到的問題:無

3.製作感想 : 很有趣

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

學號:1035445153

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445108

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

1.網頁主題:LOL

2.有無遇到的問題:無

3.製作感想 : 很難

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

學號:1035445108

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1015448006

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

1.網頁主題:怪獸電力公司

2.有無遇到的問題:語法用錯

3.製作感想:熟悉應用,覺得做網頁是一件很艱難的事

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

學號:1015448006

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445114

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

1.網頁主題:柴犬

2.有無遇到的問題:無

3.製作感想:心想事成

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

學號:1035445114

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445189

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

1.網頁主題::醜比頭

2.有無遇到的問題:無

3.製作感想:現在對網頁設計比以前熟悉了一點,在做作業的時候也沒有以前那麼累了

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

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445078

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

1.網頁主題::珍遊記

2.有無遇到的問題:   老師一次別講太多 記不住啊!

3.製作感想:  老師一次別講太多 記不住啊!

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

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445168

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

1.網頁主題:龍貓 配色與風格設定:以龍貓的配色 黃 灰 藍 綠

2.有無遇到的問題:無

3.製作感想:越來越了解望頁設計的格式

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

學號:1035445168

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445057

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

1.網頁主題:哆啦A夢
配色與風格設定:以哆啦A夢相關色來配色 ( 藍色 ) 、大雄 ( 黃色 )

2.有無遇到的問題:無

3.製作感想 : 課堂上做一次,作業再做一次就比較熟練了

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

學號:1035445057

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445006

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

1.網頁主題:粉紅豬小妹。
配色與風格設定:柔和、曖昧不搶眼的色調以舒服為主。

2.有無遇到的問題:無,非常順利。

3.製作感想:漸漸熟悉網頁設計這個詞了,但有些專業術語仍在用心記。

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

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445102

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

1.網頁主題:奈良美智。
配色與風格設定:舒服、淡淡的色調。

2.有無遇到的問題:有,不管字體怎麼改都改不了(怎麼改都是粗體)。

3.製作感想:越來越想把它設計好看一點。

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

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445060

(2).請回答以下問題:
1.網頁主題:我們這一家
配色與風格設定:以黃色為主 做其他配色
2.有無遇到的問題? 無
3.製作感想 頁面編版製作滿有趣
4.製作作業的時間 2.5小時



Edited 2 time(s). Last edit at 12/10/2015 12:49AM by 1035445060.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445087

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

1.網頁主題:不安與不自然

配色與風格設定:疲累所以單調的灰色

2.有無遇到的問題:還好,這次真的萬幸

3.製作感想: 還行,為了這個打了很多字而已

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

備註:我的圖真的就是那個長條狀的,所以文字繞圖...

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445033

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

1.網頁主題:探險活寶
配色與風格設定:採用主角阿寶的顏色

2.有無遇到的問題:有,繞圖排文有時候會跑掉。

3.製作感想:越來越熟悉網頁設計的架構了

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

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445219

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

1.網頁主題:櫻桃小丸子

2.有無遇到的問題:目前無

3.製作感想:還算順利,只是有些地方還不是很熟練

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

學號:1035445219

(1).作業網址 :
http://mepopedia.com/~web104-2c/hw05/hw05-1025445061
(2).
1.網頁主題:蠟筆小新 小白的屁屁炸彈
配色與風格設定:簡約風(橘,白色調)
2.有無遇到的問題? 無
3.製作感想 做得蠻順利
4.製作作業的時間 2小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445162

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

1.網頁主題:小熊學校
配色與風格設定:暖色調。

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

3.製作感想:越來越熟悉網頁設計了。

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

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445054

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

1.網頁主題:BIGBANG
配色與風格設定:黑白色調。

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

3.製作感想:做得很順,感覺很好。

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

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445105

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

1.網頁主題:神隱少女

2.有無遇到的問題:無

3.製作感想:我竟然會耶
4.製作作業的時間:2h

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445195

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

1.網頁主題:少女時代 配色與風格設定:以粉紅色彩為主題

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

3.製作感想:還是覺得很難 都是同學交我

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

學號:1035445195

(1).作業網址 : http://mepopedia.com/~web104-2c/hw05/hw05-1035445171/

(2).請回答以下問題:
1.網頁主題: 烏法魯
配色與風格設定:綠色,森林系
2.有無遇到的問題? 沒有
3.製作感想:文字常跳掉,很麻煩
4.製作作業的時間:1小時

(1).作業網址 : http://mepopedia.com/~web104-2c/hw05/hw05-1035445147/

(2).請回答以下問題:
1.網頁主題: 灌籃高手
配色與風格設定:黑灰
2.有無遇到的問題? 沒有
3.製作感想:好險
4.製作作業的時間:1小時

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445156

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

1.網頁主題:龍貓的暗色系

2.有無遇到的問題:無

3.製作感想:有慢慢上手了

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

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445009

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

1.網頁主題:熊本熊 粉色系

2.有無遇到的問題:無

3.製作感想:覺得很煩,但是還是做作業

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

學號:1035445009

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445018

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

1.網頁主題:小王子

2.有無遇到的問題:無

3.製作感想:慢慢地研究完成

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

(1).作業網址 :
http://mepopedia.com/~web104-2c/hw05/hw05-1035445183/
(2).
1.網頁主題: 張懸
配色與風格設定:黑灰白
2.有無遇到的問題? 無
3.製作感想 很快完成
4.製作作業的時間 30

(1).作業網址 :
http://mepopedia.com/~web104-2c/hw05/hw05-1035445027
(2).
1.網頁主題: 魯魯咪
配色與風格設定:溫暖清新可愛
2.有無遇到的問題? 無
3.製作感想:覺得好複雜
4.製作作業時間:30~1小時

(1).作業網址 :
http://mepopedia.com/~web104-2c/hw05/hw05-1035445207
(2).
1.網頁主題: Laduree馬卡龍
配色與風格設定:粉綠x淺灰x白
2.有無遇到的問題? 很難很難很難
3.製作感想 要瘋了怎麼可以做這麼久
4.製作作業的時間 2小時

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445063
(2).請回答以下問題:
1.網頁主題:植物VS殭屍花園戰爭 配色樣式:綠色代表植物,深藍色代表冰冷殭屍
2.有無遇到的問題:一切順利
3.製作感想:做完了很開心
4.製作作業的時間: 兩~三小時

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445096
(2).請回答以下問題:
1.網頁主題:魔鏡夢遊
2.有無遇到的問題:好難....為甚麼按鈕無法連結
3.製作感想:好難
4.製作作業的時間: 三小時

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445093

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

1.網頁主題:嚕嚕米,以可愛色系為主

2.有無遇到的問題:無

3.製作感想 : 有越來越熟練

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

學號:1035445093

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445024

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

1.網頁主題::史努比

2.有無遇到的問題:無

3.製作感想:累 身心靈重創

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

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445051

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

1.網頁主題:史蒂芬宇宙

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

3.製作感想:很累

4.製作作業的時間:很久很久

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445159

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

1.網頁主題:插畫家五十六號,橘綠色調

2.有無遇到的問題:無

3.製作感想 : ♥♥♥

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

學號:1035445159

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445042

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

1.網頁主題:月亮忘記了
配色與風格設定:以暖色調為主。

2.有無遇到的問題:蠻順利

3.製作感想:慢慢熟悉了,雖然沒有做得很好,但做得很開心。

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

1035445042

(1).作業網址 : http://mepopedia.com/~web104-2c/hw05/hw05-1035445035

(2).請回答以下問題:
1.導覽列配色與風格設定:冷色、黑色,營造美艷、冷酷、性感的風格。
2.有無遇到的問題?無太大的問題。
3.製作感想:我覺得老師很認真,但網頁這項科目真的需要花時間、耐心還有眼力哈哈。
4.製作作業的時間:大概花了1個多小時。



Edited 1 time(s). Last edit at 12/31/2015 11:53AM by 小小豪.
(編輯記錄)

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1025445115

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

1.網頁主題::義大利麵

2.有無遇到的問題:   文字部分

3.製作感想:  要好久時間!!

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

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445090

(2).請回答以下問題:
1.網頁主題: 史努比 配色與風格設定: 綠色草地風
2.有無遇到的問題? 遇到一些連結的問題
3.製作感想 整體做完覺得還行
4.製作作業的時間 30分鐘



Edited 3 time(s). Last edit at 12/31/2015 01:28PM by 林品秀.
(編輯記錄)

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445216

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

1.網頁主題:以咖啡色為主

2.有無遇到的問題:有,但是已經解決了

3.製作感想 : 滿酷的

4.製作作業的時間:之前就做好了,所以用10分鐘

學號:1035445216

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445072

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

1.網頁主題:湯姆貓與傑利鼠
配色與風格設定:以湯姆貓與傑利鼠的咖啡色系列來製作

2.有無遇到的問題:無

3.製作感想 : 雖然回家後有點忘記怎麼做,但經過一番摸索,有漸漸回想起來

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

學號:1035445072

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1025445189

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

1.網頁主題:南方四賤客

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

3.製作感想:要摸索才能知道更多樣式的形成

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

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445150

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

1.網頁主題:Lana Del Rey 配色與風格設定:粉色簡潔風

2.有無遇到的問題:圖片一直不見

3.製作感想:好累啊~

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

學號:1035445150

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445030

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

1.網頁主題:冰雪奇緣Frozen

2.有無遇到的問題:聯結有點不太會做

3.製作感想:雖然還是有點不太會 但有越來越上手了

4.製作作業的時間:2h

學號:1035445030

1005445160 - 王思博

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1005445160

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

1.網頁主題::Family Guy

2.有無遇到的問題:還好

3.製作感想:越來越進步了

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

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445126

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

1.網頁主題:星際大戰
配色與風格設定:漆黑的宇宙

2.有無遇到的問題:圖片尺寸搞不定
3.製作感想:想看起來更有質感
4.製作作業的時間:2小時

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445123

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

1.網頁主題:馬來貘

2.有無遇到的問題:

3.製作感想 : 很難

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

學號:1035445123

走錯班..



Edited 2 time(s). Last edit at 01/05/2016 11:25PM by sandman10th.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2c/hw05/hw05-1035445081

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 橘色 蠟筆小新配色
2.有無遇到的問題? 目前沒有
3.製作感想 老師的影片和文章幫助很大
4.製作作業的時間 慢慢做出來的沒算時間

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-1035445048

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

1.網頁主題:阿爾卑斯山的少女
配色與風格設定:森林綠

2.有無遇到的問題:大致沒有

3.製作感想:雖然要花很多時間,但是想把它做的更好

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

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445084

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

1.網頁主題:天涯明月刀

2.有無遇到的問題: 沒

3.製作感想 : 還可以

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

學號:1035445084

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445180

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

1.網頁主題::魔力紅

2.有無遇到的問題:超多問題

3.製作感想:覺得累

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

(1) 作業網址: http://mepopedia.com/~web104-2c/hw05/hw05-1035445120

 (2) 風格設定為以粉橘色調來搭配我可能不會愛你)

 (3) 有無遇到的問題? 無
 (4) 製作感想? 很想罵髒話一直誤刪檔案
5 製作時間 三小時



Edited 1 time(s). Last edit at 01/07/2016 02:42AM by 1035445120.
(編輯記錄)

(1).作業網址:http://mepopedia.com/~web104-2c/hw05/hw05-1035445111

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

1.網頁主題:Line

2.有無遇到的問題:無

3.製作感想 : 很難

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

學號:1035445111

(1).作業網址 :http://mepopedia.com/~web104-2c/hw02/hw02-1035445147/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:一樣使用包大山的個人風格
2.有無遇到的問題? 文繞圖一直做不出來
3.製作感想 學習越來越多
4.製作作業的時間 一天

(1).作業網址 :

(2).請回答以下問題:http://mepopedia.com/~web104-2c/hw05/hw05-1035445141
1.網頁主題:宮崎駿電影介紹 配色與風格設定: 黃褐色,暖色系
2.有無遇到的問題? 按鈕很麻煩,用很久,看老師影片教學。
3.製作感想 會按鍵按鈕黑有成就感哈哈哈
4.製作作業的時間 3小時



Edited 1 time(s). Last edit at 01/10/2016 08:13PM by 1035445141.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2c/hw05/hw05-1035445192


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

1.導覽列配色與風格設定:MILI
2.有無遇到的問題: 沒有
3.製作感想:利用以前的作業,稍作修改
4.製作作業的時間:60分鐘