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-c/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-c/hw05/hw05-1025445069

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

有無遇到的問題? 還好 推文設定剛開始有點弄不懂 但後來解決了
製作感想 有點快忘記
製作作業的時間 1小時

1025445069 古珮儒

1 作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445036

2 有無遇到的問題 : 大概就是重新配色問題和排版這類問題
3 製作感想 : 希望網頁能設計更好
4 製作作業的時間 : 兩小時

1025445036 李易達

作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445072

請回答以下問題:
1.網頁主題: 配色與風格設定: 憂鬱的神偷奶爸
2.有無遇到的問題? 有很多地方很混亂最後還是做完了
3.製作感想 謝謝室友
4.製作作業的時間 1個半小時

1025445072 王人永

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

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

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

(2).請回答以下問題:
1.網頁主題:以凱斯哈林 為主題
2.有無遇到的問題:恩 有一點
3.製作感想:恩 需要思考一下
4.製作作業的時間: 四小時


1025445141王心仁

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:巧克力系列的相關配色
2.有無遇到的問題? 還好
3.製作感想: 感覺有比之前較有質感一些
4.製作作業的時間: 四小時


1025445060黃淯婷

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:HBA品牌有關
2.有無遇到的問題? 還好
3.製作感想: 做的還普通普通
4.製作作業的時間: 六小時

作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445153

請回答以下問題:
1.網頁主題:使用老師的範本
2.有無遇到的問題? 還好
3.製作感想 自己帶電腦能跟老師同步真好
4.製作作業的時間 老師上課的時間

1025445153 廖敏君



Edited 1 time(s). Last edit at 12/16/2014 11:04PM by 小累.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:米奇世界
配色與風格設定: 紅黑白
2.有無遇到的問題: 設定一些東西有點複雜
3.製作感想: 好困難
4.製作作業的時間: 一天

1025443044 王薏茹



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

(1).作業網址 : [url=http://mepopedia.com/~web103-c/hw05/hw05-1025445090/]http://mepopedia.com/~web103-c/hw05/hw05-1025445090/[/url]

(2).請回答以下問題:
1.網頁主題:日本旅遊 配色與風格設定: 藍色調
2.有無遇到的問題? 推文鈕和彈跳視窗
3.製作感想 稍微有難度
4.製作作業的時間 3-4小時

1025445090

作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445162

請回答以下問題:
1.網頁主題:使用老師的範本
2.有無遇到的問題:有遇到一點小問題 
3.製作感想: 有點忘了如何做  
4.製作作業的時間: 3小時

1025445162 陸怡潔

作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445054

請回答以下問題:
1.網頁主題:スーパーれいじくん人形
2.有無遇到的問題? 還好
3.製作感想 有些語法還是會忘記
4.製作作業的時間 5小時

1025445054 許雅筑

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:東野圭吾小說,用老師配色主題
2.有無遇到的問題? 還可以自行解決
3.製作感想:覺得自己要多加練習
4.製作作業的時間:二至三小時

1025445147 張 郁

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


(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 個性
2.有無遇到的問題? 無
3.製作感想 做久了覺得煩,可是成果出來很開心
4.製作作業的時間 每天的累積

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

(2)請回答以下問題:

網頁主題:探險活寶
有無遇到的問題:推文那裏原本不太懂,後來有解決
製作感想:希望網頁可以設計的更好更有質感
製作作業的時間:1小時

1025445018 陳怡融

作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445123

請回答以下問題:
1.網頁主題:蜷川實花 參考老師範本
2.有無遇到的問題:會有一些小麻煩
3.製作感想:會忘記步驟。  
4.製作作業的時間:1小時半

1025445123姚育慈

作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445102

請回答以下問題:
1.網頁主題:韓國女子團體少女時代子團TAETISEO
2.有無遇到的問題:還可以
3.製作感想:會忘記步驟  
4.製作作業的時間:1小時半

1025445102 邱筱惠

1 作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445132

2 有無遇到的問題 : 語法的設計
3 製作感想 :
4 製作作業的時間 : 兩小時

1025445132 羅雅嫚

1 作業網址 : http://mepopedia.com/~web103-c/final/final-1025445051/

2 有無遇到的問題 : 語法的設計
3 製作感想 : 充實
4 製作作業的時間 : 兩小時

1025445051 林芳伃

1 作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445111

2 有無遇到的問題 : 推文按鈕不知道要擺哪
3 製作感想 : 跟著步驟做還蠻清楚的
4 製作作業的時間 : 兩小時

1025445111 莊于萱

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

(2).請回答以下問題:
有無遇到的問題? 還好,慢慢越來越熟練了
製作感想 又學到新東西
製作作業的時間 1.5小時

1025445129 王嬿婷

作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445117

請回答以下問題:
1.網頁主題: THE LUV
2.有無遇到的問題? 問題有比較少了 有看老師的影片
3.製作感想 愈做愈有成就感
4.製作作業的時間 3~4小時

1025445117 黃振誠

作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445030

請回答以下問題:
1.網頁主題: 配色與風格設定: REDBULL
2.有無遇到的問題? 很雜很難用語法
3.製作感想 很難還是很難
4.製作作業的時間 一小時

1025445030 王泰然

1 作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445180

2 有無遇到的問題 : 圖片不知道為什麼都沒辦法跑出來所以就用老師給的圖片
3 製作感想 : 希望網頁都能每次順利完成
4 製作作業的時間 : 一小時

1025445180 謝芷寧

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

1.網頁主題: 配色與風格設定: 配色和老師一樣
2.有無遇到的問題? 一直反白,2秒內就全部不見了
3.製作感想 有夠難,真的快死掉了
4.製作作業的時間 一整晚

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

1.網頁主題: 林俊傑
2.有無遇到的問題? 再置入圖片時,文字和圖片會粘再一起
3.製作感想:跟老師的教學一步一步做出來ㄉ,花比較多時間
4.製作作業的時間:2個多小時

1025445048 林侑慶



Edited 1 time(s). Last edit at 01/07/2015 10:52PM by Natoby.
(編輯記錄)

作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445135/


網頁主題: Green Gate 碎花的風格
有無遇到的問題: 標題樣式套不上去
製作感想:天呀 研究很久
製作時間:兩天

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

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

有無遇到的問題? 有點難
製作感想 做完有點成就
製作作業的時間 1小時

1025445192 黃婷萱

http://mepopedia.com/~web103-c/hw05/hw05-1025445156

1.導覽列配色與風格設定:死魚眼 / 淺灰藍
2.有無遇到的問題:有
3.製作感想:非常花時間的作業
4.製作作業的時間:N小時

1025445156 蔡佳芬

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

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

有無遇到的問題? 邊框一直弄不好
製作感想 好困難
製作作業的時間 1小時

1025445165

1 作業網址 : http://mepopedia.com/~web103-c/hw05/hw05-1025445108
2 有無遇到的問題 : 無
3 製作感想 :覺得學到新方法
4 製作作業的時間 : 兩小時


1025445108 張惟婷

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:藍青白色調 best!
2.有無遇到的問題─須多做幾個瞭解狀況
3.製作感想─需要再學更好
4.製作作業的時間─ 一小時

1025445138 梁奕堯

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

1.網頁主題:佐藤のパン
2.有無遇到的問題:沒有
3.製作感想:有成就感
4.製作作業的時間:2小時


1025445039 何佳霖

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

(2).請回答以下問題:
1.網頁主題:Audrey Kawasaki 配色與風格設定: 木頭質感 灰 咖啡
2.有無遇到的問題? : 在做時圖片一直跑來跑去 不知為何
3.製作感想 :很難
4.製作作業的時間 :很久

洪筠真 1025445063



Edited 1 time(s). Last edit at 01/15/2015 01:33PM by Annie真.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1025445195/creation.html


1.製作作業的時間:斷續幾天吧
2.有無遇到的問題: 有 因為有很多重複的語法 我會搞錯
3.製作心得與感想: 當看到做好的網頁時 會很有成就感
4.本學期於網頁設計課程上的收穫: 對網頁設計有了新的認知 也略懂 希望未來可以更加深入


(1)網站主題:1顆心裡面的第3個世界
(2)主要瀏覽族群:喜歡插畫的同好們
(3)風格設定: 粉色
(4)主色調,輔助色調: 也是粉色色調的淺灰 淺藍
(5)製作動機:希望能夠推廣我的插畫作品

1025445195古馥瑜

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:藍色系
2.有無遇到的問題? 不太熟
3.製作感想: 感覺有比之前較有質感一些
4.製作作業的時間: 很多天


1025445174黃琪雅

(1).作業網址 :http://mepopedia.com/~web103-c/final/final-1025445012

1.網頁主題:玩命關頭
2.有無遇到的問題:語法 煩
3.製作感想:有成就感
4.製作作業的時間:2小時

戴嫻淳



Edited 1 time(s). Last edit at 01/14/2015 12:00PM by 戴嫻淳.
(編輯記錄)

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

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

有無遇到的問題? 還可以,幸好有老師的 超詳細影片^^
製作感想 因為內容是自己有興趣的,所以做得很快樂
製作作業的時間 一天

1025445096 徐琬凌

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

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

有無遇到的問題? 有老師的詳細影片,所以目前沒有大礙
製作感想:在這學道德東西一生受用
製作作業的時間 :一下午

1025445033 林子軒

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

(2)
1.製作作業的時間:很多天
2.有無遇到的問題:語法太多太複雜會搞混
3.製作心得與感想:雖然遇到很多瓶頸可是當作玩的時候還是很有成就感
4.本學期於網頁設計課程上的收穫:是一堂令人壓力很大可是卻充實的課程

1025445010 謝佳蓁