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-2a/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-2a/hw05/hw05-1035445115/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 接續作業四完成自己最喜歡的只想告訴你
2.有無遇到的問題? 沒有
3.製作感想
覺得漸漸對網頁感到開心興趣
4.製作作業的時間 1小時


學號:1035445115

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:以紫色為主色創造可愛的感覺
2.有無遇到的問題? 沒有
3.製作感想
很有成就感
4.製作作業的時間 2小時


學號:1035445037

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑灰白
2.有無遇到的問題:因為期中作業也有用過繞圖排文,所以比較沒有問題
3.製作感想 製作出一個頁面的,也可以搭配整體配色
4.製作作業的時間 30分鐘

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 藍
2.有無遇到的問題 一開始圖片無法對齊,所以花很多時間在這裡
3.製作感想 無
4.製作作業的時間 30分鐘

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:與貓的毛色相同
2.有無遇到的問題? 版面出錯
3.製作感想 : 有成就感
4.製作作業的時間 1小時


學號:1035445178

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 接續作業四
2.有無遇到的問題? 沒有
3.製作感想
覺得漸漸了解網頁製作
4.製作作業的時間 1小時

代PO
學號:1035445046

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

(2).請回答以下問題:
1.網頁主題:配色與風格設定: 繽紛
2.有無遇到的問題? 沒有
3.製作感想
覺得有學到東西
4.製作作業的時間 1~2小時


學號:1035445211



Edited 1 time(s). Last edit at 12/14/2015 06:58PM by 1035445211.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:配色與風格設定: 清涼歡樂
2.有無遇到的問題? 沒有
3.製作感想
...(。_。)過程痛苦,成果歡樂
4.製作作業的時間 2~3小時


學號:1035445214

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

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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 配合圖片使用同色系設計
2.有無遇到的問題? :沒有
3.製作感想 :有更豐富的感覺
4.製作作業的時間:2小時

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


(2).請回答以下問題:
1.網頁主題: 配色與風格設定:用黑色當底和主角的妝容以及衣服上的顏色點綴
2.有無遇到的問題? 已經解決了
3.製作感想 這次做的網頁比較細緻,從小地方就一直改
4.製作作業的時間 2~3小時

(1).作業網址 :

http://mepopedia.com/~web104-2a/hw05/hw05-1035445097

(2).請回答以下問題:
1.網頁主題:

star wars 用黑與白和黃的配色表現星際的浩瀚與神秘感

2.有無遇到的問題?

3.製作感想
蠻簡單的
4.製作作業的時間
40分左右

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

(2).請回答以下問題:
1.網頁主題:配色與風格設定:可愛之無違和感
2.有無遇到的問題? 沒有
3.製作感想
...(。_。)過程痛苦,成果還是痛苦
4.製作作業的時間 2~3小時


學號:1035445079

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

(2).請回答以下問題:
1.網頁主題:配色與風格設定:柔柔淡淡風格
2.有無遇到的問題? 其實用心做沒什麼困難
3.製作感想
配色很喜歡
4.製作作業的時間 1~2小時


學號:1035445028 陳仲伶

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:跟上一次作業一樣 簡單時尚
2.有無遇到的問題? 沒有
3.製作感想
滿好玩的拉
4.製作作業的時間 1小時


學號:1035445208

http://mepopedia.com/~web104-2a/hw05/hw05-1035445067/


(2).請回答以下問題:
1.網頁主題: 配色與風格設定:莫綠色調
2.有無遇到的問題? 要管理好語法的排列
3.製作感想 能依序接著之前的作品延伸很棒
4.製作作業的時間 1小時

學號 1035445067

http://mepopedia.com/~web104-2a/hw05/hw05-1035445199


(2).請回答以下問題:
1.網頁主題: 配色與風格設定:紅白
2.有無遇到的問題? 要管理好語法的排列
3.製作感想 加了連結很好
4.製作作業的時間 1小時

學號 1035445199

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 暖色系
2.有無遇到的問題? 讓圖跳出另一個視窗這部分摸索比較久但看影片後很快就弄好了
3.製作感想 : 做完很開心
4.製作作業的時間 : 很長

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 優雅暖色
2.有無遇到的問題? 圖片跑不出來
3.製作感想 : 無
4.製作作業的時間 : 三小時

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

(2).請回答以下問題:
網頁主題: ARIELLE MANESH

配色與風格設定: 簡單

有無遇到的問題? 沒有

製作感想:有趣

製作作業的時間:1小時


學號:1035445121

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 使用紅色及灰色來凸顯史奴比
2.有無遇到的問題? 沒有
3.製作感想
越來越熟能生巧
4.製作作業的時間 1小時


學號:1035445076



Edited 1 time(s). Last edit at 12/22/2015 02:02PM by danbing.
(編輯記錄)

1



Edited 2 time(s). Last edit at 12/27/2015 12:04AM by Togenick.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:神奇寶貝-皮卡丘
配色與風格設定:簡單的灰色 藍色 黃色 乾淨舒服
2.有無遇到的問題?無
3.製作感想:地獄與天堂之間的來回
4.製作作業的時間:1-2小時

學號:1035445001



Edited 1 time(s). Last edit at 12/27/2015 11:20PM by Togenick.
(編輯記錄)

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

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



Edited 1 time(s). Last edit at 01/03/2016 07:49PM by 1035445148.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: gaga
2.有無遇到的問題? 沒有
3.製作感想
很開心
4.製作作業的時間 1小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 以小時候看過的動畫狐狸與獵狗為主題,利用相近色做設計
2.有無遇到的問題? 沒有
3.製作感想
覺得當下一定要加緊練習,才不會跟不上進度...
4.製作作業的時間 3小時


學號:1035445088

(1).作業網址 : http://mepopedia.com/~web104-2a/hw05/hw5-1035445151/

(2).請回答以下問題:
1.網頁主題:star wars
配色與風格設定: 星際
2.有無遇到的問題? 沒有
3.製作感想
覺得其實滿好玩
4.製作作業的時間 1小時



Edited 2 time(s). Last edit at 12/29/2015 02:39PM by Gochen.
(編輯記錄)

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


(2).請回答以下問題:
1.製作主題:參考作業
2.欲呈現之配色風格:橘籃現代風
3..有無遇到的問題? 目前到作業2都還好
4.製作感想
一開始的基礎慢慢學,覺得前面要好好的學是很重要。
學號:1025445227

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

(2).請回答以下問題:
1.網頁主題:草間彌生
配色與風格設定:以暖色系為主
2.有無遇到的問題?有
3.製作感想:看得霧煞煞
4.製作作業的時間:2小時

學號:1035445010

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 連著作業是一直做很有成就感
2.有無遇到的問題? 沒有
3.製作感想
覺得漸漸對網頁感到興趣
4.製作作業的時間 半小時

(1).作業網址 :

http://mepopedia.com/~web104-2a/hw05/hw05-1035445094/


(2).請回答以下問題:
1.網頁主題:

史奴比

2.有無遇到的問題?

3.製作感想
蠻簡單的
4.製作作業的時間
40分左右



Edited 1 time(s). Last edit at 12/29/2015 04:18PM by 1035445094.
(編輯記錄)

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

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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑與紅搭配 吸血鬼的聯想配色
2.有無遇到的問題? 按鈕沒有連結
3.製作感想
我覺得網頁設計好困難,從一開始自己都沒有時間可以好好研究他,但是作之後慢慢發現蠻好玩的。
4.製作作業的時間 2天吧


學號:1025445227

這個作業的網址則為:http://mepopedia.com/~web104-2a/hw05/hw05-1035445184


1.網頁主題:鬼燈的冷澈

配色與風格設定:華麗的日本浮世繪風格

2.有無遇到的問題

繞圖排文做到讓人覺得很崩潰
連結fb 按鈕的地方游標不會改變成手指的形狀,但是可以連結。

3.製作感想

製作上有些許困難。

4.製作作業的時間
3h以上

(1).作業網址 : http://mepopedia.com/~web104-2a/hw05/hw05-1035445127
(2).請回答以下問題:
1.網頁主題:配色與風格設定:黑白色
2.有無遇到的問題? 還好
3.製作感想
還不錯
4.製作作業的時間 1小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 簡易色
2.有無遇到的問題?同學幫助我一起解決了
3.製作感想
累累累
4.製作作業的時間 3小時

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

(2).請回答以下問題:
1.網頁主題:我的自由年代, 配色與風格設定: 以黑白灰及紅色為主,為一種追憶的風格
2.有無遇到的問題? 有
3.製作感想 製作沒有想樣的困難
4.製作作業的時間 1小時

1035445169簡郡誼

(1).作業網址 :http://mepopedia.com/~web104-2a/hw05/hw05-1035445187
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:以白黑為主色創造簡約華麗的感覺
2.有無遇到的問題? 沒有
3.製作感想
覺得累
4.製作作業的時間 1.5小時



Edited 2 time(s). Last edit at 01/04/2016 05:37PM by 沅蓁.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 泡泡先生
2.有無遇到的問題? 圖片有時候跑不出來 心煩哪~
3.製作感想
很有成就感
4.製作作業的時間 2小時


學號:1035445034

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:暖暖的黃橙色系
2.有無遇到的問題? 沒有 有,圖片跑偏,內文不夠長等等
3.製作感想
悲喜交加,我終於完成了
4.製作作業的時間 2.5小時

(1).作業網址 :http://mepopedia.com/~web104-2a/final/final-1035445166

(2).請回答以下問題:
1.網頁主題:NICK
2.有無遇到的問題? 無
3.製作感想:覺得很有成就
4.製作作業的時間 2~3 小時

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

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


學號:1035445058

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

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

1035445061

(1).作業網址 : http://mepopedia.com/~web104-2a/final/final-1035445130/story.html
(2).請回答以下問題:
1.網頁主題:Jack and the Beanstalk
配色與風格設定: 藍綠色,大自然風格
2.有無遇到的問題: 解決了
3.製作感想: 研究很久
4.製作作業的時間: 3小時

1035445130

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 接續作業四完成謊言留聲機
2.有無遇到的問題? 有 推文按鈕不能照常推文
3.製作感想
覺得網頁設計越來越複雜,但蠻有趣的。
4.製作作業的時間 2小時


學號:1035445070

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 陳粒 灰 深綠 淺綠
2.有無遇到的問題? 有 要去按呼叫java才會出來
3.製作感想
做一做蠻有成就感的
4.製作作業的時間 2小時


學號:1035445202

(1).作業網址 :
http://mepopedia.com/~web104-2a/hw05/hw05-1035445205/
(2).請回答以下問題:
1.網頁主題:勇敢傳說
配色與風格設定: 蓮藕色.粉色
2.有無遇到的問題?
3.製作感想 很累
4.製作作業的時間 2個小時

(1).作業網址 :http://mepopedia.com/~web104-2a/hw05/hw05-1035445196/Intro.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 粉色系
2.有無遇到的問題? 要做按鈕花了一點時間
3.製作感想 : 做完很開心
4.製作作業的時間 : 很長

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:黑白 德古拉
3.製作感想
4.製作作業的時間 1小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:藍色 黃色 寧靜風格
2.有無遇到的問題? 無
3.製作感想 過程很複雜 但是做出來很開心
4.製作作業的時間 2小時


視傳二A 10354445103



Edited 1 time(s). Last edit at 01/05/2016 07:29PM by 林于珊.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:哈利波特
配色與風格設定: 黑綠白配,魔法的感覺
2.有無遇到的問題? 有 圖片
3.製作感想 跟同學一起研究了很久
4.製作作業的時間 3小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 以黑底來凸顯主題 大致以簡潔的風格來呈現整個網頁的畫面
2.有無遇到的問題? 網頁的圖片出不來
3.製作感想 圖片出不來感覺有點問題
4.製作作業的時間 2.5小時


1035445055

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

(2).請回答以下問題:
1.網頁主題:美國恐怖故事
2.有無遇到的問題? 沒有
3.製作感想:好好玩
4.製作作業的時間 1小時

(1).作業網址 :file:///C:/Users/gina/Desktop/hw05-1035445114/index.html

(2).請回答以下問題:
1.導覽列配色與風格設定:柴犬
2.有無遇到的問題? 無
3.製作感想 : 心想事成
4.製作作業的時間 30分鐘

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

(2).請回答以下問題:
1.網頁主題: Shinkai makoto
配色與風格設定:Green
2.有無遇到的問題? 靠右邊沒事靠左邊就天下大亂啊! (╯‵□′)╯︵┴─┴
3.製作感想 : 推文按鈕就連結啊?
4.製作作業的時間 1小時


學號:1035445025

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

(2).請回答以下問題:
1.網頁主題: 神奇寶貝
配色與風格設定:藍 綠 黃
2.有無遇到的問題? 左邊上面的連結凸出一塊....
3.製作感想 : 很累
4.製作作業的時間 2-3小時