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

Advanced

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

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

請參考

[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 )繞圖排文
(2 )推文設定
(3 )利用CSS,做更細緻的內文設定
(4 )如何利用圖片與文字的編排搭配出有質感的網頁。[/color]


[hr]

2. 二、繳交作業方式



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

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

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

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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


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



Attachments:
開啟 | 下載 - hw05-ex.rar (834 KB)
http://mepopedia.com/~web100b/hw05/hw05-1001445010/index.html
網頁主題:我的貓貓樂園
配色與風格設定:溫馨粉紅
有無遇到的問題:無
製作感想:
太無聊就把作業慢慢做完了
講義做得很棒很清楚 所以沒啥問題
請老師幫忙看一下有哪些地方要改@@
製作作業的時間:2.5h

MEPOERs said:
JinJin: 1.因為是繞圖排文的練習,所以要有文字才看得出效果喔 2.頂圖的文字被底吃掉不太清楚,可以在更清楚些 3.其他部分都有應用到很好,動作也很快,再繼續加油喔!
喔~

可能是文字太少了所以看不出來

我在tnr那邊放張圖片應該比較清楚

頂圖的部分加上淡黃色的圈圈這樣比較清楚了



Edited 3 time(s). Last edit at 11/20/2011 04:17PM by free236.
(編輯記錄)

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


(1) 紫色迷幻森林

(2) 我上傳了,但是卻無法顯示網頁=口="

(3) 開始做突然腦袋打結....後來努力研究講義,慢慢了解大概要怎麼製作,但是有些地方講義感覺斷掉了,有點看不懂,所以在製作方面就有點卡到,但後來是還好,因為用自己的想法去做他,而且還有"套用"大概可以看出來哪裡有問題。

(4) 2H,因為有點腦袋思緒不流通,卡到......

http://mepopedia.com/~web100b/hw05/hw05-1001445123/

1.網頁主題: Johnny 徵友網頁
配色與風格設定: 以黑白灰為主
2.有無遇到的問題? 大致上沒有 希望老師能幫我看看哪裡需要修改 !!
3.製作感想 好友成就感阿 !!!
4.製作作業的時間 大概三四小時

btw 老師,之前我的hw02被刪掉了 現在重傳可以捕分數嗎?

(1).作業網址 :
http://mepopedia.com/~web100b/hw05/hw05-1001445042/index.html
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 依期中作業
2.有無遇到的問題? 沒甚麼問題
3.製作感想 :好像一定要字數夠才能用文繞圖?字數不夠的話圖會超出footer
4.製作作業的時間 :1H

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

spinning smiley sticking its tongue out 老師我完成了

只步過不知道為什摸 版型一直跑掉 sad smiley(

時間 大約一小時多



Edited 1 time(s). Last edit at 11/17/2011 10:56PM by 吳蓓蓓.
(編輯記錄)

http://mepopedia.com/~web100b/hw05/hw05-1001445004/

1.網頁主題:韓國歌手朴有天
配色與風格設定:以黑灰白為主調,簡單
2.有無遇到的問題? 無法做左邊的繞圖排文
3.製作感想 比上次簡單多了
4.製作作業的時間 2小時

MEPOERs said:
JinJin: 要記得在#content設padding,如:padding:30px;內文才會有內距喔
http://mepopedia.com/~web100b/hw05/hw05-1001445049/flower.html

北海道 HOKKAIDO。

以薰衣草為主發展出紫色系配色。

網頁網址如不加flower.html會無法顯示,但之前的作業給網址都是不用加就能顯示的,有點奇怪。

感覺有越來越像一般在網路上瀏覽看見的網頁了。

近3小時。

吼 我不知道啦
我怎麼試 全部視窗都是一開啟網站都跳出來
越做越生氣
為什麼會這樣啦?

http://mepopedia.com/~web100b/hw05/hw05-1001445045/music.html
主題以五月天 藍色調為主
作業大約花了2個多小時
沒有什麼太大的問題

完成了 !
http://mepopedia.com/~web100b/hw05/hw05-1001445075

1.網頁主題: 手工餅乾 smiling smiley
2.有無遇到的問題? 沒什麼大問題 !
3.製作感想 有比較進步的感覺~~
4.製作作業的時間 約2小時吧~~~

http://mepopedia.com/~web100b/hw05/hw05-1001445063/story.html

1.以期中作業改製
2.沒有
3.雖然是用期中作業修改,但在"流浪故事"&"認養動物"的頁面有特別針對圖的部分加強,其他也有趙老師的建議修改。麻煩老師再看一次
4.大約4個半小時

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


1.網頁主題: 配色與風格設定:約翰藍儂
2.有無遇到的問題? 我以為只要改老師的範本就好,沒想到大家都全改!WOW!
3.製作感想 酷斃了!
4.製作作業的時間 四小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:以期中作業修改
2.有無遇到的問題? 無
3.製作感想 可以推薦至社群網站 很酷
4.製作作業的時間 一小時



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

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

1.網頁主題:幸福的廷廷狗(依期中作業)
配色與風格設定:溫暖可愛的桃紅色系來凸顯我對我家的狗的愛
2.有無遇到的問題? 比較沒有,因為期中時以接觸過
3.製作感想:能知道大部分網頁的行程時在是太高興了
4.製作作業的時間:2小時

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

1.網頁主題: 配色與風格設定: 由期中作業改
2.有無遇到的問題? 無
3.製作感想 真的越來越高階,網頁其實很深奧 背後是很辛苦的
4.製作作業的時間 2.5hr

(1).作業網址 :
http://mepopedia.com/~web100b/hw05/hw05-1001445047
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 依期中作業
2.有無遇到的問題? 沒甚麼問題
3.製作感想 : 還在努力適應當中 :I
4.製作作業的時間 :2H

(1).作業網址 :
http://mepopedia.com/~web100b/hw05/hw05-1001445095/animation.html
(2).請回答以下問題:
1.網頁主題:皮克斯動畫王國
2.有無遇到的問題? 我要文繞排文時字數不夠,圖擺放的位子就很奇怪 ,會影響到下一段文字的排列
3.製作感想 :有比上次了解
4.製作作業的時間 :2hr



Edited 1 time(s). Last edit at 11/22/2011 10:13PM by Ping-yun.
(編輯記錄)

http://mepopedia.com/~web100b/hw05/hw05-1001445077/index.html

1.網頁主題: 配色與風格設定: 期中作業直接使用
2.有無遇到的問題? 沒問題
3.製作感想 繞圖排文之前就會了 有學到fb連結還滿實用的
4.製作作業的時間 因為原本的東西都用好了所以很快

*網址:家裡不能傳,到學校在交給老師。

1.網頁主題:以「文字」為主題,結合古代捲軸的媒材為基底。

配色與風格設定:以黑底、古老的紙張呈現。

2.有無遇到的問題:發現之前出現錯誤 = 口 =" 已經改好了。

3.製作感想:就好像可以一直學下去。

4.製作作業的時間:2~3H

http://mepopedia.com/~web100b/hw05/hw05-1001445129

與其中相同
大致上都沒有問題!OK!!
1小時半左右

-

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

(2). 請回答以下問題:
 1. 網頁主題:東方神起
  配色與風格設定:灰色簡約風
 2. 有無遇到的問題:沒有
 3. 製作感想:想學更多關於JavaScript的語法
 4. 製作作業的時間:二十分鐘(因更改期中作業首頁

-

http://mepopedia.com/~web100b/hw05/hw05-1001445032


(1) 燃燒的靈魂-梵谷

(2) 我上傳了,但除了FB外的按鈕似乎沒有功用?

(3) 好像不難

(4) 30分鐘

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


(2).請回答以下問題:
1.網頁主題: 配色與風格設定:>grinning smiley<跟期中作業類似 是以自己的歷年作品為主 配色黑白紅為主 風格是鬼魅黑暗
2.有無遇到的問題? thumbs up還好 越來越熟悉了thumbs up
3.製作感想 spinning smiley sticking its tongue out老師是個很厲害的網頁老師 我越來越懂了 winking smiley
4.製作作業的時間 一小時

http://mepopedia.com/~web100b/hw05/hw05-1001445006/about.html

1.網頁主題:黑色簡約
配色與風格設定:黑白灰
2.有無遇到的問題?
http://mepopedia.com/~web100b/hw05/hw05-1001445006不會連到about耶...
3.製作感想
感覺跟他(DW)熟了點
4.製作作業的時間
2小時

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

(2).請回答以下問題:
1.網頁主題:
改編自線上遊戲的小說。
配色與風格設定:跟上次的一樣,因為內容出自同一款遊戲。

2.有無遇到的問題?
沒有,老師的說文解字太棒了!

3.製作感想
開始慢慢了解了,最後一定要做個完整版!

4.製作作業的時間
大約4小時左右。

http://mepopedia.com/~web100b/hw05/hw05-1001445036/index.html
1.網頁主題-利用hw04作業作修改/ 配色與風格設定-插畫風格,圖片很顯眼
2.有無遇到的問題?按照講義做沒有什麼問題
3.製作感想-可以將自己的作品分享到臉書.推特.噗浪我覺得很棒!可以讓大家按讚!!
4.製作作業的時間-利用上課時間做繞圖排文.加上推文的按鈕

http://mepopedia.com/~web100b/hw05/hw05-1001445065/index.html

1.網頁主題: 外星人
2.有無遇到的問題? 為什麼圖另外跳出來的視窗圖不會一起便大?
3.製作感想 比我想像的還簡單
4.製作作業的時間 2小時吧?!

媽咪的部落格
http://mepopedia.com/~web100b/hw05/hw05-1001445055/album.html
花2小時多
有點小不懂 但是還是順利完成
但是我的好像視窗全部一起跳出來



Edited 1 time(s). Last edit at 11/30/2011 02:12PM by part2.
(編輯記錄)

(1).作業網址 :
http://mepopedia.com/~web100b/hw05/hw05-1001445079/
(2).請回答以下問題:
1.網頁主題:Deserts Xuan
配色與風格設定:舒服的淺色調
2.有無遇到的問題? 無
3.製作感想 :恩...其實不會很難
4.製作作業的時間:2hr

作業網址: http://mepopedia.com/~web100b/hw05/hw05-1001445083/
網頁主題:BINGBANG STORY
配色與風格設定:拼色
有無遇到的問題:目前沒有
製作感想: 我覺得做這個還蠻有趣,就利用時間把未完成的進度趕完
製作作業的時間:2hr



Edited 1 time(s). Last edit at 12/13/2011 11:49PM by wei_80628.
(編輯記錄)

作業網址:http://mepopedia.com/~web100b/hw05/hw05-1001445061/

網頁主題:Soda green 蘇打綠
配色與風格設定:綠色系
有無遇到的問題: 有同學指導我
製作感想: 延續之前期中作業的網頁!
製作作業的時間:2小時

http://mepopedia.com/~web100b/hw05/hw05-1001445053/index.html
網頁主題:我的啦啦熊
配色與風格設定:啦啦熊的棕色
有無遇到的問題:無
製作感想:第一次做的時候存檔全不見,預覽後全白,有點不爽,後來只好到網路上抓
遲交了很久 ,JINJIN抱歉~~

拉拉熊很可愛

http://mepopedia.com/~web100b/hw05/hw05-1001445113
網頁主題:延續其中的
配色與風格設定:藍紫藍紫~~
有無遇到的問題:無
製作感想:做好很久了但一直沒回復SORRY><

.



Edited 1 time(s). Last edit at 12/28/2011 09:26AM by blue1818.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:偶像介紹 配色與風格設定:黑色
2.有無遇到的問題? 無
3.製作感想:遲交...對不起...
4.製作作業的時間 30分鐘

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

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

我做到凌晨四點 因我三點半才開始做XDDD

Jin jin好棒 我喜歡你!!

(1).作業網址 : http://mepopedia.com/~web100b/hw05/hw05-1001445002
(2).請回答以下問題:
1.網頁主題: 文學少女-人物介紹
配色與風格設定: 老師的檔案
2.有無遇到的問題? 無
3.製作感想 還好 越來越習慣
4.製作作業的時間 1H

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

1.網頁主題:以其中的改
配色與風格設定: 以藍綠色為主
2.有無遇到的問題? 沒有
3.製作感想 很有成就感
4.製作作業的時間 大概2小時

http://mepopedia.com/~web100b/hw05/hw05-1001445040

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

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

1.蔡依林
2.繽紛亮麗
3.http://mepopedia.com/~web100b/hw05/hw05-1001445093/

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

1.網頁主題:幾米
配色與風格設定: 以淺藍綠色為主
2.有無遇到的問題? NO
3.製作感想:這滿簡單的smiling smiley
4.製作作業的時間 大概2小時

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

1.網頁主題:LADY GAGA
配色與風格設定:以黑灰白為主調,簡單
2.有無遇到的問題? 網頁配置有點搞混
3.製作感想 很有成就感
4.製作作業的時間 2天

http://mepopedia.com/~web100b/hw05/hw05-1001445065

網頁主題:外星人

配色與風格設定:以粉色系為主,這樣別人看了眼睛比較不會酸

有無遇到的問題: 無

製作感想: 原本有點看不懂講義,自己在研究研究後就看懂了,做好繞圖牌文的時候超開心的,感覺好像又進步了

製作作業的時間:2.5h