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

Advanced

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


[hr]

2. 二、繳交作業方式



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

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

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

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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





Edited 3 time(s). Last edit at 11/19/2012 01:29AM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - hw05-ex.rar (834 KB)
(1).作業網址 : http://mepopedia.com/~web100a/hw05/hw05-1001445098/

(2).請回答以下問題:
1.網頁主題:安迪沃荷
配色與風格設定:普普風加上桃紅色系
2.有無遇到的問題? 沒有什麼太大問題spinning smiley sticking its tongue out
3.製作感想:覺得自己有更清楚Dreamweaver的功能了!
4.製作作業的時間:1到2小時(包含找圖和內容)

MEPOERs said:
JinJin: 做得不錯喔!很有風格!
(1).作業網址 : http://mepopedia.com/~web100a/hw05/hw05-1001445062/

(2).請回答以下問題:
1.網頁主題:lady gaga
配色與風格設定:個人喜好,個性上的風格
2.有無遇到的問題? 大致還行,背景是過了帶是依然顯是不了
3.製作感想:希望能在更加熟練了解,讓自己能做得更好
4.製作作業的時間:1到2小時增加了不少新東西

老師~上面那個lady gaga♥是可以按的喔!

MEPOERs said:
JinJin: 你的首頁放置位置有誤喔!
(1).作業網址 :http://mepopedia.com/~web100a/hw05/hw05-1001445088/links.html

(2).請回答以下問題:
1.網頁主題:女神
2.有無遇到的問題? 做了那麼九只能說老師的講義太神了
3.製作感想:越做越有心得喔 但開始覺得自己應該先規畫好圖檔資料夾才不會像現在亂亂的
4.製作作業的時間:半小時多

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

(2).請回答以下問題:
1.網頁主題:AYU
配色與風格設定:桃紅色系
2.有無遇到的問題? 沒有什麼太大問題
3.製作感想:按讚才看的到
4.製作作業的時間:1小時

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

(2).請回答以下問題 :
1.網頁主題 :The boys
配色與風格設定 :具質感的黑色系襯托女孩們的高貴氣息
2.有無遇到的問題 : 無
3.製作感想 :這次作業簡單明確並沒有什麼太大問題,只是在DW做的跟預覽後的東西會不同,該如何解決?
4.製作作業的時間 :1hr

(1).作業網址 :
http://mepopedia.com/~web100a/hw05/hw05-1001445096
(2).請回答以下問題:
1.網頁主題:貓的報恩語電影作者簡介
配色與風格設定:暖色調,運用對比反襯主題色
2.有無遇到的問題? 連接"呼叫Java Script"的時候原本點不出來,後來重做就OK了。
3.製作感想 :更精緻了,感覺製作網頁好像沒有想像中的難了,只是要分別清楚哪個是哪個才不會製作錯誤,雖然做得很普通,但是做出成果來很有成就也很開心。
4.製作作業的時間 :1天 ( 斷斷續續,遇到瓶頸就暫停...不過因為是修改,所以製作上還好。)

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

(2).
1.網頁主題: 星座
配色與風格設定: 活潑、可愛淘氣、暖色調
2.有無遇到的問題:無
3.製作感想 :很順手、講義清楚
4.製作作業的時間 :一小時

http://mepopedia.com/~web100a/hw05/hw05-1001445082

1.網頁主題:東方神起
配色與風格設定: 採用黑色低調簡約風
2.有無遇到的問題? 有比之前的網頁簡單一點了!!
3.製作感想 :還蠻順的!!!
4.製作作業的時間 一個晚上

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

(2)
1.網頁主題:史努比snoopy
配色與風格設定:黃色系
2.有無遇到的問題?無
3.製作感想:有時講解的速度有點快,跟不太上
4.製作感想:1~2小時

MEPOERs said:
JinJin: 我下次會注意,你也可以提醒我喔!
(1).作業網址:http://mepopedia.com/~web100a/hw05/hw05-1001445021

(2).請回答以下問題:
1.網頁主題:Ed Hardy
 配色與風格設定:低明度暖色+狂野的背景
2.有無遇到的問題?我在IE和GOOGLE瀏覽時沒什麼問題,但是用火狐瀏覽的時候問題很大,為什麼只有文字會一直閃呢?找語法也找不出個所以然,請求老師協助~
3.製作感想:因為上次的期中作業滿完整的了,所以又做了新的,感覺版面配置和配色比上次好。
4.製作作業的時間:4~5小時左右

MEPOERs said:
JinJin: 做得不錯喔,只要把CSS裡 body以及h1 中 text-decoration: blink; 拿掉就可以了,那是閃爍字,不過只有火狐支援這個語法
Liou: 謝謝老師的指點:) 閃爍字有點嚇到我了...
(1).作業網址 : http://mepopedia.com/~web100a/hw05/hw05-1001445118

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

1.網頁主題:林俊傑介紹

配色與風格設定:灰色調中帶點藍色去襯托主題

2.有無遇到的問題? 無

3.製作感想 :講義很完整 , 做起來很輕鬆 , 希望上課步調可以平均一點 , 不要忽快忽慢XD

4.製作作業的時間 :1.5 hr

http://mepopedia.com/~web100a/hw05/hw05-1001445074/

1.網頁主題:梵谷
配色與風格設定:傍晚的感覺

2.有無遇到的問題?
這次操作並沒有問題 想問老師一個問題 當我改掉標題時網頁卻無法顯示一片空白
但我看了兩三次css跟語法沒什麼出錯 卻不知道為什麼會發生這種事情 有什麼樣的狀況會變得空白呢??

3.製作感想 類別很好用設定好套用進去即可使用真的很方便!!
4.製作作業的時間 2hrs

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 林宥嘉個人網頁
2.有無遇到的問題? 因為我是直接從期中作業改的,不知道是否能直接覆蓋至作業05,上傳之後圖片就看不見了@@
3.製作感想 更改小細節比較簡單,講義很好懂,對功能的興趣大增^^
4.製作作業的時間 三十分鐘~一小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 明亮色系
2.有無遇到的問題? 在DW上看的排版結果跟網頁顯示出來的不一樣.....很詭異= =....
3.製作感想 :終於不讓圖片討厭的跑來跑去了= =
4.製作作業的時間 :課堂上+2小時左右

1).作業網址 : http://mepopedia.com/~web100a/hw05/hw05-1001445019

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

1.網頁主題:Miaoli Sanyi

配色與風格設定:黑白色調

2.有無遇到的問題? 無

3.製作感想 :與上次差不多(但省略按鈕的動作),大致上都會。

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

(1) 作業網址 : http://mepopedia.com/~web100a/hw05/hw05-1001445080
(2)

1. 網頁主題 : 夏洛克-福爾摩斯
配色與風格設定 : 咖啡色系
2. 有無遇到的問題? 無
3. 製作感想 : 感覺還OK , 因相同動作一直重複 , 也感到更容易記憶~
4. 製作感想 : 1~2小時

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

(2).請回答以下問題:
1.網頁主題:攝影作品集 配色與風格設定:間單的木紋風格加上一些繽紛色彩
2.有無遇到的問題? 沒有 很順利smiling smiley
3.製作感想 學會分享到FB感覺超酷的!!!
4.製作作業的時間 1小時

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

(2).請回答以下問題:
1.網頁主題:灰色為底,綠色為輔,有點隨興插畫的感覺
2.有無遇到的問題? 無
3.製作感想 彈出視窗超開心!這樣我的圖片就可以大瘦身了!! winking smiley
4.製作作業的時間 25分鐘

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

(2).
1.網頁主題: gossip girl
配色與風格設定: 黑與黃 來表示gossip girl神秘但卻又精采
2.有無遇到的問題:暫無
3.製作感想 :講義越來越清楚 比較容易懂
4.製作作業的時間 :1.5hr

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 簡單以幾米的風格
2.有無遇到的問題? 無
3.製作感想 讓版面更整齊,而且可以連到fb分享很方便
4.製作作業的時間 30分鐘~40分鐘

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

(2).請回答以下問題:
1.網頁主題:G-Dragon簡介
配色與風格設定: 黑白時尚簡約風
2.有無遇到的問題? 無
3.製作感想 有繞圖排文更實用
4.製作作業的時間 10~20分鐘

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

(2).請回答以下問題:
1.網頁主題:馬卡龍
配色與風格設定:藍色
2.有無遇到的問題? 無
3.製作感想有:有點成就感
4.製作作業的時間 40分鐘~50分鐘

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

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

1.網頁主題:台北新城市教會 兒童事工
 配色與風格設定:採用象徵活潑、健康、親切 《自然綠》

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

3.製作感想:更加的豐富了欸!

4.製作作業的時間:約60分鐘

http://mepopedia.com/~web100a/hw05/hw05-1001445126



1.網頁主題: 配色與風格設定:同期中
2.有無遇到的問題? 大圖出不來...
3.製作感想 ...佔無
4.製作作業的時間 2時



Edited 1 time(s). Last edit at 11/22/2011 08:35PM by 1001445126.
(編輯記錄)

http://mepopedia.com/~web100a/hw05/hw05-1001445058/

1.網頁主題:莫內
配色與風格設定:憂鬱

2.有無遇到的問題? 無
3.製作感想 加上推文的功能連接了熟悉的fb感覺很酷
4.製作作業的時間 一小時

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

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

1.網頁主題:皮克斯
配色與風格設定:優雅的粉色系


2.有無遇到的問題? 沒有,很順利的完成,慢慢的有增加自信

3.製作感想:成就感倍增

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

(1).作業網址 : http://mepopedia.com/~web100a/hw05/hw05-1001445132/
(2).請回答以下問題:
1.網頁主題:唐老鴨
配色與風格設定:糖果色配色
2.有無遇到的問題? 沒有什麼太大問題
3.製作感想:跟著講義上的解說製作的速度就越來越快
4.製作作業的時間:1半小時

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

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

1.網頁主題: 酷企鵝。

配色與風格設定:黑色系。

2.有無遇到的問題 :無

3.製作感想:感覺越來越熟練了,原本想改滑鼠碰臉書連結會換指標的,可是忘記怎麼用了。

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



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

http://mepopedia.com/~web100a/hw05/hw05-1001445092


1.網頁主題: 配色與風格設定:藍色系
2.有無遇到的問題? 繞圖排文怪怪低
3.製作感想 :還挺有趣的
4.製作作業的時間:1hr

http://mepopedia.com/~web100a/hw05/hw05-1001445005



(2).請回答以下問題:
1.網頁主題: 皮克斯
配色與風格設定: 我是用其中作業來改的~還是保持皮克斯藍色的風格
2.有無遇到的問題? 無
3.製作感想 這次花的時間比以往的還短~真的很開心~有種越來越進步的感覺
4.製作作業的時間 100/11/22

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

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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 期中作業 加菲貓
2.有無遇到的問題? 看著講義做沒有問題
3.製作感想 還ok 看講義很清楚
4.製作作業的時間 30~40分鐘

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


(2).請回答以下問題:
1.網頁主題:攝影作品集
配色與風格設定:簡潔
2.有無遇到的問題? 靜物的連結我在在用IE無法連 但GOOGLE可以
3.製作感想: 講義萬能,謝謝老師的用心
4.製作作業的時間:30分鐘至一小時

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

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

1.網頁主題:陳綺貞

配色與風格設定:黑白灰間單的風格

2.有無遇到的問題? 一開始有後來解決了

3.製作感想 :講義解說得更仔細了!!製作起來有比較輕鬆
4.製作作業的時間 :1個小時

http://mepopedia.com/~web100a/hw05/hw05-1001445094

1.網頁主題:幾米 ,配色與風格設定: 大部分都是以幾米的畫為主!
2.有無遇到的問題? 有比之前的網頁還簡單一些!!
3.製作感想 :比上次簡單好操做!!!
4.製作作業的時間 一個多小時

作業網址 http://mepopedia.com/~web100a/hw05/hw05-1001445046

1.網頁主題:捉迷藏Hide and Seek
配色與風格設定:深色為主,風格簡單俐落,帶有陰森感
2.有無遇到的問題? 還好,沒甚麼大礙
3.製作感想:還算簡單好吸收
4.製作作業的時間:一小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑白色
2.有無遇到的問題? 無
3.製作感想 這次是在上課時做一半 回家在做一半 所以沒遇到什麼問題 但發現也忘記了一些當初做好的東西要怎麼在做一次像是放fb或鋪浪的按鈕 所以還要再回來看講義
4.製作作業的時間 十五分鐘

http://mepopedia.com/~web100a/hw05/hw05-1001445048(2).
1.網頁主題:Audery Hepburn
配色與風格設定:Tiffany Blue 和復古黑白色系
2.有無遇到的問題? 一開始我的圖片還是沒辦法繞文= = 但是我後來解決囉!!
3.製作感想:覺得自己開始對網頁設計漸漸的產生好感,而且老師您真的很用心唷 >u<
4.製作作業的時間:1小時左右

老師我的網址是http://mepopedia.com/~web100a/hw05/hw05-1001445048 才對
spinning smiley sticking its tongue out

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

(2).請回答以下問題:
1.網頁主題:JANSPORT品牌
配色與風格設定:範例
2.有無遇到的問題? 沒有什麼問題
3.製作感想:感覺有點小麻煩! 不過想了解JAVA的其他功能
4.製作作業的時間:1半小時左右

1).作業網址 :http://mepopedia.com/~web100a/hw05/hw05-1001445009/

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

1.網頁主題:夏目友人帳
配色與風格設定:黃色與綠色 帶有一點暖洋洋的味道
2.有無遇到的問題:沒有
3.製作感想:講義內容很好懂 學會了圖文環繞和推薦連結 真的很棒tongue sticking out smiley
4.製作作業的時間 :一小時

作業網址:http://mepopedia.com/~web100a/hw05/hw05-1001445078

1.網頁主題: 配色與風格設定: 簡潔有力的風格

2.有無遇到的問題? 還好~

3.製作感想 好有成就感喔~原來平常我看到的網頁是這樣做的spinning smiley sticking its tongue out

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

(1).作業網址 :http://mepopedia.com/~web100a/hw05/hw05-1001445037/
(2).請回答以下問題:
1.網頁主題:還是小貓咪
2.有無遇到的問題? OK拉
3.製作感想:感覺有一點像樣了
4.製作作業的時間:半小時多

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

(2).請回答以下問題:
1.網頁主題:鑽石
配色與風格設定:個人喜好,個性上的風格
2.有無遇到的問題? 大致ok
3.製作感想:希望能在更加熟練了解
4.製作作業的時間:1小

(1).作業網址 : http://mepopedia.com/~web100a/hw05/hw05-1001445088/links.html
(2).請回答以下問題:
1.網頁主題:女神
2.有無遇到的問題? 做到最後才醒悟圖片真的該整理在資料夾裡面不然看起來好亂
3.製作感想:老師的講義真的太強大了^_<
4.製作作業的時間:半小時多

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

(2)
1.網頁主題:喬治四世的一生
配色與風格設定:我設定了黃色系 但是不知道為什麼瀏覽於瀏覽器時卻又變回範例的樣子= =
2.有無遇到的問題? 就是上述那樣= =
3.製作感想:有時講太多會跟不上,看講義時覺得有很多步驟跳過就作不出來
4.製作感想:3~4小時

1.我用#36C的藍
沒有風格可言
2.這份作業並不難,我太不用心了
3.希望以後能準時交
4.約兩小時左右

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

1.網頁主題: 配色與風格設定: hollow kitty粉色系

2.有無遇到的問題 無

3.製作感想 因為是期末作業所以沒啥問題

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

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

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

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

(2).請回答以下問題:
1.網頁主題:延續其中
配色與風格設定:黑灰紅
2.有無遇到的問題? 要一直問別人
3.製作感想:好難!
4.製作作業的時間:2小時(包含找圖和內容)

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

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

1.網頁主題: 配色與風格設定: 宮崎駿 蔚藍色調

2.有無遇到的問題 無

3.製作感想 因為是期末作業所以沒遇到什麼問題

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