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

Advanced

[作業05] 網頁導覽列、繞圖排文與推文按鈕的應用

請參考

[講義04] 以CSS製作網頁導覽列
http://mepopedia.com/forum/read.php?804,17032


[講義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/~web101c/hw05/hw05-101xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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





Edited 4 time(s). Last edit at 11/19/2012 09:15AM by JinJin.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 金色+黑色時尚風
2.有無遇到的問題? 鋪浪改成GOOGLE+
3.製作感想 越做越像官網一樣
4.製作作業的時間 不到一天(拿作業4的貼上)

MEPOERs said:
JinJin: 動作很快,的確越來越像官網了,加油,期待後續囉,不過可以把手移過去會有手圖示的語法加上去
JinJin: 另外希望在內文有更細緻及層次的文字設定的設計
(1).作業網址 : http://mepopedia.com/~web101c/hw05/hw05-1015445213/

(2).請回答以下問題:
1.網頁主題:S.H.E 花又開好了
 配色與風格設定:黑白風格
2.有無遇到的問題? 段落、標題字
3.製作感想:可以為自己喜歡的天團製作網頁,感覺還不錯。
4.製作作業的時間:一天

(1).作業網址 : http://mepopedia.com/~web101c/hw05/hw05-1015445242
(2).請回答以下問題:
1.網頁主題:Hello Kitty 配色與風格設定:粉白簡約
2.有無遇到的問題? 無
3.製作感想:為自己喜歡的東西做網頁很特別
4.製作作業的時間:幾小時

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

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

1.網頁主題: 配色與風格設定:粉紅.粉紫
2.有無遇到的問題? 有
3.製作感想 黃凱敬同學辛苦了~smiling bouncing smiley
4.製作作業的時間 兩天

(1).作業網址 :http://mepopedia.com/~web101c/final/final-1015445224/

1.網頁主題:The Script

配色與風格設定:黑白,極簡風格
2.有無遇到的問題? 繞圖排文
3.製作感想 :繞圖排文弄了很久還有推文按鈕
4.製作作業的時間 :兩天

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

(2).請回答以下問題:
1.網頁主題:2NE1 To anyone
 配色與風格設定: 亮粉紅&黑色
2.有無遇到的問題?沒有
3.製作感想:剛看完2NE1的演唱會沒多久所以就想做她們的東西,做得很開心哈哈
4.製作作業的時間:半天

MEPOERs said:
JinJin: 不錯喔!越來越有設計感囉!
JinJin: 不過你的頂圖太寬,以至於整個版面太寬,必須設定在1000px以下
mepopedia.com/~web101c/hw05/hw05-1015445225/
網頁主題: 配色與風格設定:無
有無遇到的問題?沒
製作感想:我以為沒做的說
製作作業的時間:糧堂

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黃 紫 對比色
2.有無遇到的問題? nono
3.製作感想 辣妹:">
4.製作作業的時間 3hr

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

(2).請回答以下問題
1.網頁主題 配色與風格設定/俏皮活潑
2.有無遇到的問題/解決了^^
3.製作感想/ 跳出小視窗的小技巧很棒
4.製作作業的時間/ 兩小時 是經由作業四延續製做



Edited 1 time(s). Last edit at 12/01/2012 10:22PM by 1015445269.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 與期中作業相同
2.有無遇到的問題? 還在思考期末的主題,所以先用期中作業為主,製作推文按鈕
3.製作感想 雖然是簡單的推文按鈕,但其實要如何設計按鈕及按鈕位置的擺放還是很重要
4.製作作業的時間 30分鐘

MEPOERs said:
JinJin: 還可以再加入圖片跳窗畫面功能!
1).作業網址 :http://mepopedia.com/~web101c/hw05/hw05-1015445225/


1.網頁主題: 配色與風格設定:
貝果
色調以 橘色店為主
2.有無遇到的問題?
雖然有同學的相助!但!還是不會!
3.製作感想
....................
4.製作作業的時間
5天

MEPOERs said:
JinJin: 若真的還是不會,可以留下來詢問!加油!
(1)作業網址 : http://mepopedia.com/~web101c/hw05/hw05-1015445218

(2).請回答以下問題:
1.網頁主題:跳跳馬Rody
 配色與風格設定:大膽的亮色系
2.有無遇到的問題? 無噢
3.製作感想:越做越好玩囉!
4.製作作業的時間:30分鐘

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

(2).請回答以下問題:
1.網頁主題: 史努比snoopy
配色與風格設定: 簡色
2.有無遇到的問題? 還好
3.製作感想 新的東西還需要更熟悉
4.製作作業的時間 約1.5小時



Edited 1 time(s). Last edit at 12/03/2012 12:51AM by 1015445270.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 綠色簡約
2.有無遇到的問題? 沒有~
3.製作感想:繞圖排文弄得很累、東西常常跑掉,然後推文在最下面(?
4.製作作業的時間:5小時



Edited 2 time(s). Last edit at 12/03/2012 01:46AM by sp39678910.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:粉色系
2.有無遇到的問題? 解決瞜~~
3.製作感想 巧達好可愛,網頁好好玩
4.製作作業的時間 1節課ㄛ

(1).作業網址 : http://mepopedia.com/~web101c/hw05/hw05-1015445210
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 奇幻探險風,延續期中作業製作
2.有無遇到的問題? 推文按鈕位置的擺放想了很久
3.製作感想:以後可以把自己做的網頁推薦到臉書還蠻好玩的!!
4.製作作業的時間 2節課

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

(2).請回答以下問題:
1.網頁主題:日劇 配色與風格設定:延續作業四改成藍橘風
2.有無遇到的問題? 第二頁沒有繞圖 圖在邊邊
3.製作感想 有時東西跑掉會很氣,但很有趣的做了第二個主題
4.製作作業的時間 幾小時

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

(2).請回答以下問題:
1.網頁主題:One Direction一世代
 配色與風格設定:青春活力
2.有無遇到的問題? 沒有~講義說明很清楚
3.製作感想:按下分享按鈕好驚奇喔~
4.製作作業的時間:快一節課



Edited 1 time(s). Last edit at 12/03/2012 06:07PM by Chian Chian.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:One Direction一世代
配色與風格設定:青春活潑
2.有無遇到的問題? 無,講義很清楚喔
3.製作感想 :按下連結按鈕好驚奇
4.製作作業的時間 :一節課

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 粉色系
2.有無遇到的問題? icon連結~以解決
3.製作感想 :增加一些小東西讓網頁更有質感
4.製作作業的時間 :留下來的時間

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

(2).請回答以下問題:
1.網頁主題:無
 配色與風格設定: 亂配
2.有無遇到的問題?沒有
3.製作感想:我很混對不起
4.製作作業的時間:5分鐘

.回覆本篇文章

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


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

1.網頁主題:配色與風格設定: 藍色 灰色

2.有無遇到的問題? 無 講義清楚

3.製作感想:越來越順手,蠻有趣的

4.製作作業的時間:一天

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

(2).請回答以下問題:
1.網頁主題:梅林 配色與風格設定:黑灰色系
2.有無遇到的問題? 無
3.製作感想 學到很多語法,越來越有興趣。
4.製作作業的時間 半天



Edited 2 time(s). Last edit at 12/03/2012 08:18PM by 1015445240.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:夏目友人帳
配色與風格設定:黑色系
2.有無遇到的問題?:無
3.製作感想:網頁坐起來很複雜麻煩,但是完成後自己就很有成就感,很開心
4.製作作業的時間:一天

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

(2).請回答以下問題:
1.網頁主題:Vivienne Westwood薇薇安·魏斯伍德
 配色與風格設定:簡單的白色和紫色
2.有無遇到的問題:不知為啥我Picture和Product這兩頁都無法顯示 可是在資料夾中又可以看
3.製作感想:其實還蠻有趣的而且看見成品很有成就感
4.製作作業的時間:4小時

作業網址 : http://mepopedia.com/~web101c/hw05/hw05-1015445236/


1.網頁主題: 配色與風格設定:簡潔
2.有無遇到的問題? 有 無法連結
3.製作感想 一直發生錯誤
4.製作作業的時間 1天

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

(2).請回答以下問題:
1.網頁主題:THE BEATLES
 配色與風格設定:復古
2.有無遇到的問題?不會連結
3.製作感想:上課沒認真聽就GG
4.製作作業的時間:2天

(1).作業網址 :

http://mepopedia.com/~web101c/hw05/hw05-1015445245

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

1.網頁主題: 小熊維尼

配色與風格設定: 可愛的鮮艷顏色( 紅+黃+咖啡 )

2.遇到的問題: 很容易混淆(語法)

3.製作感想: 學到更多不同的語法,終於都搞清楚是什麼了

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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 綠色為主要
2.有無遇到的問題? 沒~老師講意寫的很清楚~
3.製作感想:很有成就感
4.製作作業的時間: 2~3小時

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

(2).請回答以下問題:
1.網頁主題:GreenDay
配色與風格設定: 紅、黑,復古風。
2.有無遇到的問題? 無
3.製作感想:越學越多感覺很棒 !
4.製作作業的時間:不到一天



Edited 1 time(s). Last edit at 12/10/2012 01:18AM by 1015445215.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web101c/hw05/hw05-1015445222/
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 搖滾,以紅.黑.白.灰為主
2.有無遇到的問題? 還行,自己照著講義做就還好
3.製作感想:熬夜肝不好,但很想完成它就撐一下
4.製作作業的時間: 5小時



Edited 2 time(s). Last edit at 12/10/2012 03:49PM by 1015445222.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑、灰、白、墨綠
2.有無遇到的問題? 無
3.製作感想 學習到更多技巧,希望能越做越熟悉
4.製作作業的時間 一天

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

(2).請回答以下問題:
1.網頁主題:Elmo
 配色與風格設定:以Elmo為主要配色
2.有無遇到的問題:圖片不會併排
3.製作感想:之後自己都看不懂自己在座神麼好亂><
4.製作作業的時間:一天

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

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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 白色簡約
2.有無遇到的問題? 背景顏色一直搞不定
3.製作感想 做完了放鬆好大一口氣
4.製作作業的時間 一小時

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

(2).請回答以下問題:
1.網頁主題:愛麗絲+甜點
配色與風格設定: 咖啡色系.極簡
2.有無遇到的問題? 把圖案出來另一個視窗那有點不懂
3.製作感想 :終於做完拉!!!
4.製作作業的時間 :2節課



Edited 1 time(s). Last edit at 12/27/2012 10:52AM by FF.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:96貓
配色與風格設定:黃色系
2.有無遇到的問題? 無
3.製作感想 :有趣(?
4.製作作業的時間 不到一天...拿期中的改....

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 喜歡綠色 加點低調 就用了
2.有無遇到的問題? 沒有
3.製作感想:非常的耗時間 不知道是不是不熟的關係
4.製作作業的時間:1天

(1).作業網址 : http://mepopedia.com/~web101c/hw05/hw05-1015445241/Home1

1.網頁主題: 配色與風格設定:水草造景,底圖 青灰綠色塊
2.有無遇到的問題? 上傳後發現圖檔案太大 有點跑不動
3.製作感想 很有成就感
4.製作作業的時間 很多天



Edited 1 time(s). Last edit at 01/05/2013 03:00AM by 羅時富.
(編輯記錄)

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

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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 蘭灰黑
2.有無遇到的問題? 無
3.製作感想 碰到小問題 但很快解決
4.製作作業的時間 不到一天

(1).作業網址 : http://mepopedia.com/~web101c/hw07/hw07-1015445257/

(2).請回答以下問題:
1.網頁主題:棉花糖 配色與風格設定:粉紅 黃 綠
2.有無遇到的問題? 無
3.製作感想 :終於能夠像個網頁的樣子了
4.製作作業的時間 :幾小時

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

(2).請回答以下問題:
1.網頁主題:Hogwarts School of Witchcraft and Wizardry
配色與風格設定:深色系 霍格華茲風格
2.有無遇到的問題? 一開始不太懂繞圖排文
3.製作感想 :做完了 耶比 thumbs up thumbs up thumbs up
4.製作作業的時間 :兩天