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

Advanced

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

請參考

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


[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/~web103-a/hw05/hw05-102xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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



(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445199

(2).請回答以下問題:
1.網頁主題:SHINee 。配色與風格設定:SHINee的代表色是湖水綠,所以我幾乎都用湖水綠的顏色。
2.有無遇到的問題? 一切都很順利。
3.製作感想 越來越像網頁,覺得很有成就感。
4.製作作業的時間 30分鐘。

1025445199 萬欣穎

請回答以下問題:
1.網頁主題:東京蚤之市 配色與風格設定:懷舊風
2.有無遇到的問題? 講義的圖片都看不到
3.製作感想:沒有講義邊看邊做真的很難,只能頻著之前幾個作業的經驗拼湊,或是看著文字敘述自己測試,最後還是完成了覺得很有成就感。
4.製作作業的時間:2h

作業網址:http://mepopedia.com/~web103-a/hw05/hw05-1025445100

1025445100 葉芳羽

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw05-1025445184
2.網頁主題:superdry
3.配色與風格設定:黑橘色為主,白為輔
4.有無遇到的問題? 只要可以command+c+v都不是問題了
5.製作感想:終於完成了。
6.製作作業的時間:3~4day

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445106

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: one ok rock 灰白黑
2.有無遇到的問題? 剛開始做導覽列時一直弄不出來,後來把其中的語法改掉後才可用。
3.製作感想 雖然這次是用上次期中作業的做不過因為導覽列還是花了蠻長的時間。
4.製作作業的時間 一小時半

老師要看的話要點選「音樂大人物」才會看到hw05的作業唷

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445049/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: hello kitty風格,粉紅色的配色
2.有無遇到的問題:還好,照著講義一步一步做
3.製作感想 :比較擔心雙欄式會不會很難~ 感覺很複雜~
4.製作作業的時間 :2hrs

1025445049

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445124

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 插畫風格 簡單黑白
2.有無遇到的問題: 看著步驟還ok
3.製作感想 : 越做越順~
4.製作作業的時間 :1.5hrs

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445097

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 星巴克咖啡廳簡約風格
2.有無遇到的問題: 看著影片步驟做,幾乎都有順利完成
3.製作感想 : 速度比之前熟練了,但很容易忘了之前學的
4.製作作業的時間 :5小時



Edited 1 time(s). Last edit at 12/10/2014 08:42PM by 1025445097.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445202

(2).請回答以下問題:
1.網頁主題:金色三麥
2.有無遇到的問題? 不知道怎麼說
3.製作感想 做到後來有漸漸熟悉的感覺
4.製作作業的時間 不詳

1025445202 林彥希

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445091

(2).請回答以下問題:
1.網頁主題、 配色與風格設定:網頁的主題是介紹梵谷,顏色配色主要有藍綠色、灰色、白色、黃綠色 ,簡約的風格。
2.有無遇到的問題: 網頁下方的圖片沒辦法置中
3.製作感想 : 網頁邊排設計有比之前進步
4.製作作業的時間 :3小時

1025445091

(1).作業網址 :
http://mepopedia.com/~web103-a/hw05/hw05-1025445130/index.html
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:EXO / 用上面的圖片來搭配顏色
2.有無遇到的問題? 沒有
3.製作感想 做過其中後覺得這次作業還應付得來
4.製作作業的時間 1小時

推文按鈕的應用 : ABOUT EXO 最下面
圖片的彈跳視窗設定 : EXOK EXOM 每個人介紹的第一個圖片

1025445130 楊淯婷

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445037

1.網頁主題: 配色與風格設定: 一樣
2.有無遇到的問題? 有時候設定錯誤很麻煩
3.製作感想: 做很久
4.製作作業的時間 3.5小時

(1)作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1005445193
(2)網頁主題:講義範例
(3)有無遇到的問題? 第二張圖片另開視窗時視窗會比圖片大,但是調整的數字和選的圖片是對的...
(4)製作感想:越來越有網頁的感覺。
(5)製作作業的時間:2天

1005445193/徐芯儀

*12/22更新內容

(1)作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1005445193
(2)網頁主題:簡約風
(3)有無遇到的問題? 無
(4)製作感想:希望可以做得更好
(5)製作作業的時間:2天

1005445193/徐芯儀

(1).作業網址 :[url=http://mepopedia.com/~web103-a/hw05/hw05-1025445133]http://mepopedia.com/~web103-a/hw05/hw05-1025445133[/url]
1.網頁主題: 配色與風格設定: 以藍色系為主,黃色系為輔
2.有無遇到的問題? 一度推薦按鈕設不好,不過已經解決了
3.製作感想 會的越來越多了,以後就能作出比之前作的更好的網站
4.製作作業的時間 3小時

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445046

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:與期中作業一樣
2.有無遇到的問題?:唯一的問題就是arttext部分的bottom,剛開始都跟個行數再跑,
花了不少時間做檢查,原來是語法錯誤,更正之後一切順利完成!
3.製作感想:能讓網頁變得更加豐富,內容多變,覺得很開心。
4.製作作業的時間 :2小時

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445070

(2).請回答以下問題:
1.網頁主題: 期中網頁延伸。配色與風格設定:因為專輯主打黑白,於是也使用了跟專輯相符的黑白兩色。
2.有無遇到的問題? 中途有因為Style沒有連到所以網頁樣式跑不出來。
3.製作感想:這次做完後有感覺到自己導覽列還有些不熟悉,還要在多加強!
4.製作作業的時間:1~2小時。

1025445070

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445043

(2).請回答以下問題:
1.網頁主題:漂浮空間 配色與風格設定:與期中作業一樣
2.有無遇到的問題:圖示分享網頁時另跳分頁的功能沒反應,檢查後發現是JavaScript語法輸入錯誤,後來更正排除問題。
3.製作感想:增加了分享網頁到Facebook跟Twitter和Plurk的功能,讓網頁傳播的更方便好用,是很小但是重要的功能。
4.製作作業的時間 :1小時

[size=small]作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445001

網頁主題:YU ( 內容暫定)
配色與風格設定: 一望無際的藍色
製作感想:邊做邊想著期末作業到底要做什麼。
製作作業的時間:3小時[/size]

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445073

(2).請回答以下問題:
1.網頁主題:法國 。
配色與風格設定:綠色與咖啡色。
2.有無遇到的問題? 忘記之前的步驟。
3.製作感想 越來越像網頁,覺得很有成就感。
4.製作作業的時間 4小時。

1025445073 陳冠穎

(1)作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445178

[size=small](2)網頁主題:COLDPLAY酷玩樂團
(3)有無遇到的問題?:
一個禮拜沒上課,少練習有些都還給老師了
昨晚在惡補所以花了比較久的時間把感覺抓回來
導覽列的設定常常會跳掉,後來發現是自己的設定沒打好
基本上沒有太大的問題,問完同學們就會了
thumbs up thumbs up

(4)製作感想:常練習很重要。期末作業還是做COLDPLAYsmileys with beer
(5)製作作業的時間:6小時[/size]

[size=x-small]學號: 1025445178 - 祐寧[/size]

作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445067

網頁主題: 食。客Diners
配色與風格設定: 走日本清新淡色彩
有無遇到的問題:同樣明明步驟是一樣的,結果他都沒動靜
製作感想 :覺得網頁真的是需要長~時間來做的....
製作作業的時間 :3h

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1005445196

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 巧克力的色系不外乎就是咖啡色、黑色、白色三大主要顏色。
2.有無遇到的問題? 問題其實一直都一樣就是重複做很多遍花費很多時間。
3.製作感想 如果一直失敗跟挫折就會使人煩躁,甚至很討厭跟害怕去碰觸,所以要一直重複及努力。
4.製作作業的時間 差不多快4小時

1、作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445040

2、請回答以下問題:
1、網頁主題、 配色與風格設定:鬍子魅力,黑白,簡潔有力。
2、有無遇到的問題:大致上是沒有,老師的講義做得很棒!!
3、製作感想:在思考的時間比實際做的時間久,明明不是很難的地方,卻困惱了很久。
覺得自己有那麼一點點的進步。[color=#F0F8FF]我好棒[/color]
4、製作作業的時間:2-3小時

1025445040



Edited 2 time(s). Last edit at 12/16/2014 09:58PM by MoMi.
(編輯記錄)

http://mepopedia.com/~web103-a/hw05/hw05-1025445136
1.網頁主題: 配色與風格設定:滾滾黃沙古代風

2.有無遇到的問題:
正所謂期末交響曲,是一場由一堆大小考試作業為主體,學生和老師一起合力與其對抗的血淚史詩,而現在正演奏到最為關鍵的部分.........................................好啦!hot smiley目前勉強跟得上,反正能解決的問題根本不是問題,之後難解的才是!包括其他的!!

3.製作感想:老師加油!希望期末交響曲的最終章會是個happy ending,不然我想保重修pass險winking smiley

4.製作作業的時間 :一個下午

http://mepopedia.com/~web103-a/hw05/hw05-1025445025

2、請回答以下問題:
1、網頁主題、 配色與風格設定:灰 綠
2、有無遇到的問題:還可以
3、製作感想:語法好多
4、製作作業的時間:4小時

1025445025



Edited 4 time(s). Last edit at 12/16/2014 11:04PM by 許函郁.
(編輯記錄)

1、作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445058

2、請回答以下問題:
1、網頁主題、 配色與風格設定:柴犬~溫暖的黃色為主。
2、有無遇到的問題:換色常常不小心換錯地方~
3、製作感想:語法好多~~
4、製作作業的時間:2小時

1025445058

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445148/

(2).請回答以下問題:
1.網頁主題:mt紙膠帶展
配色與風格設定:簡約
2.有無遇到的問題:文繞圖弄很多次才成功
3.製作感想 : 可以再熟練一點
4.製作作業的時間 :2.5hrs

1025445148



Edited 2 time(s). Last edit at 12/17/2014 12:53AM by 盧姿穎.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445064/


1.網頁主題: 布丁狗咖啡廳
配色與風格設定: 主角的QQ模樣還有 基本配色式咖啡和黃色
2.有無遇到的問題? 重作了一個 以前的又忘記了
3.製作感想 雖然忘記了很多但回去看講義又複習了一遍QQ~~感覺不賴
4.製作作業的時間 3小時

1025445064 葉芷妤

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445079/

1.網頁主題: 配色與風格設定: 一樣
2.有無遇到的問題? 在裡面預覽時沒有問題,一打開網頁就有東西漏掉
3.製作感想: 雖然這次作業不難 但還是會有其他小問題...
4.製作作業的時間 1小時



Edited 1 time(s). Last edit at 12/17/2014 01:35AM by iamve.
(編輯記錄)

作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445160/

1.網頁主題: 配色與風格設定: 簡潔與舒適的配色
2.有無遇到的問題? 還好
3.製作感想 : 跟著老師影片製作蠻簡單的
4.製作作業的時間 : 20分鐘

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445223

(2).請回答以下問題:
1.網頁主題:JOJO的奇妙冒險
配色與風格設定:綠色 jump系【X
2.有無遇到的問題?想重新做但是一直各種出問題就【。 ㄏㄏ
3.製作感想 ㄏㄏ
4.製作作業的時間 兩個小時



Edited 1 time(s). Last edit at 12/17/2014 02:56AM by 荆轲君.
(編輯記錄)

(1)作業網址 ::http://mepopedia.com/~web103-a/hw04/hw05-1025445055

1.導覽列配色與風格設定:個人網頁 / 主色 艷紅 暖色
2.有無遇到的問題? 導覽列....用不習慣
3.製作感想: 好想睡
4.製作作業的時間:三小時



Edited 2 time(s). Last edit at 12/17/2014 03:05AM by nightsky18.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445169
(2).請回答以下問題:
1.網頁主題:莫內。配色與風格設定:仿古,暗色調。
2.有無遇到的問題? 無。
3.製作感想 : 比以前學到更多。
4.製作作業的時間 : 1小時。
1025445169/視傳2A/古佳綺



Edited 1 time(s). Last edit at 12/17/2014 03:10AM by chia chi.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445139

(2).請回答以下問題:
1.網頁主題:排球少年-烏野高中
配色與風格設定:代表烏野的配色是黑橘白,整個網站的顏色都不會偏離這三種色。
2.有無遇到的問題? 發現可以上背景色的格子在詭異的地方,無法正常上色。
3.製作感想 乾脆重作算了…背景顏色一直上不去很焦躁啊啊啊啊啊啊啊啊啊啊
4.製作作業的時間 2小時左右吧,沒記很清楚。

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445205

(2).請回答以下問題:
1.網頁主題: 當個創世神
2.有無遇到的問題?圖跑掉gg
3.製作感想 圖一直給我跑掉- -
4.製作作業的時間 4小時



Edited 1 time(s). Last edit at 12/17/2014 09:19AM by 衛生綿.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445181/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 迪士尼藍色
2.有無遇到的問題: 不熟練
3.製作感想 :多練習
4.製作作業的時間 :1hr

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445187

(2).請回答以下問題:
1.網頁主題:e.t介紹
2.有無遇到的問題? 還可以。
3.製作感想 有成就感。
4.製作作業的時間 30分鐘。

1025445187 戴靖庭

1、作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445175

2、請回答以下問題:
1、網頁主題、 配色與風格設定:醜比頭
2、有無遇到的問題:用即時檢視跟IE檢視都看的到,但是到網路上就看不到.....
3、製作感想:不知道怎麼辦...
4、製作作業的時間:4小時 重作3次還是一樣

MEPOERs said:
JinJin: 你的檔名要改成index.html 和style.css
(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445052

(2).請回答以下問題:
1.網頁主題:CK 。配色與風格設定:CK的代表色是黑白色,所以我幾乎都用黑白的風格。
2.有無遇到的問題? 一切都很順利。
3.製作感想 越來越像網頁,覺得很有成就感。
4.製作作業的時間 30分鐘。

1025445052 鄭博宇

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1005445195/

(2).請回答以下問題:
1.網頁主題:德國國家足球隊。配色與風格設定:德國國旗配色
2.有無遇到的問題? 沒有
3.製作感想 有點麻煩 文字部分幾乎沒啥整理
4.製作作業的時間 30分鐘

1005445195 黃沛容

1.作業網址:http://mepopedia.com/~web103-a/hw05/hw05-1025445031

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

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445076/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 清楚明瞭看起來舒服
2.有無遇到的問題? 很多設定都會怪怪的
3.製作感想 很難不太會
4.製作作業的時間 3小時以上

1025445076 葉珈妤

(1).作業網址 :http://mepopedia.com/~web103-a/hw05/hw05-1025445103/

1.網頁主題: 85度C
2.有無遇到的問題:也是一樣不太會使用軟體
3.製作感想: 做了很久才做完
4.製作作業的時間 3小時


1025445103張秀安

(1).作業網址 : http://mepopedia.com/~web103-a/hw05/hw05-1025445082/

(2).請回答以下問題:
1.網頁主題:UNLIGHT遊戲 配色與風格設定:桃、紅、紫、黑等,哥德風
2.有無遇到的問題?照教學影片就做出來了 所以覺得還好沒有問題
3.製作感想 這次做得蠻順利的
4.製作作業的時間 1.5小時

1025445082

1.網頁主題:阿爾卑斯山的少女:懷舊卡通風
2.有無遇到的問題? 很多問題,要一直問朋友,還有看老師的影片
3.製作感想:沒有講義邊看邊做真的很難,不過最後完成了覺得很有成就感。
4.製作作業的時間:2h

作業網址:http://mepopedia.com/~web103-a/hw05/hw05-1025445085

1025445085 楊婷淵

http://mepopedia.com/~web103-a/hw05/hw05-1025445163
2、請回答以下問題:
1、網頁主題、 黑 粉紅
2、有無遇到的問題:語法很多
3、製作感想:我會努力
4、製作作業的時間:三小時

1025445163 曾國鼎

http://mepopedia.com/~web103-a/hw05/hw05-1025445190/
1、網頁主題、 黑 紅
2、有無遇到的問題:好麻煩
3、製作感想:第一次完整做好 感覺還不錯
4、製作作業的時間:兩小時

1025445190 林育賢

(1).作業網址 :C:\Users\usercoert\Desktop\hw07-1035445142\index.html

(2).請回答以下問題:
1.網頁主題:多啦a夢簡單的顏色感覺很清淡
2.有無遇到的問題? 一切都很順利。
3.製作感想 越來越像網頁,覺得很有成就感。
4.製作作業的時間 1小時