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-2c/hw05/hw05-104xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web104-2c/hw05/hw05-104xxxxxxx

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



1.作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445117

2.網頁主題:

● 配色與風格設定:

網頁配色重點為效仿於金魚身上標準色系,分別是白色、橘色、黑色等色系,運用
重點色系均勻分布於網頁中,以亮色系橘色作為標題色系,內文則以灰黑色表現,
與背景黑白分明,呈現潑墨色彩,並帶有現代感,整體網頁欲呈現風格為灑脫、自
在,如同金魚自在悠遊的樣貌,心境自然而然的平靜,水面如鏡,清澈見底之意。

3.有無遇到的問題:老師講義詳細描述,並無遇到問題

4.製作感想 :

本次作業重點為繞圖排文,推文按鈕,以及點圖放大,雖然說是小功能,但小功能
總能讓網頁更加生動,善用不同的小功能,舉一反三,網頁自然變化豐富,再次強
調,導覽列以及表格真的很方便,能將內文行列分明,瀏覽快速,本次的作業功能
輕鬆愉快,網頁也更為生動。

5.製作作業的時間:大約30分鐘到一小時(指本次作業的重點)



Edited 4 time(s). Last edit at 12/08/2016 11:08AM by 松本.豪.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445153
(2).請回答以下問題:
1.網頁主題:宮崎駿
配色與風格設定:簡約素色
2.有無遇到的問題? 有同學幫助,沒什麼大問題。
3.製作感想 :這次也算簡單,但很花時間
4.製作作業的時間:2小時左右

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445212/
(2).請回答以下問題:
1.網頁主題:三峽老街
配色與風格設定:以灰色來呈現復古的風格
2.有無遇到的問題? FB點不出來
3.製作感想 :這次也算簡單
4.製作作業的時間:3小時以內



Edited 1 time(s). Last edit at 12/08/2016 02:08PM by 1045445212.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445135

(2).請回答以下問題:
1.網頁主題: 1.5配色與風格設定:1.hyukoh 혁오 1.5土黃色與咖啡色 溫暖 簡單的感覺
2.有無遇到的問題? 一點點 但後來有找到解決方法
3.製作感想: 很有趣
4.製作作業的時間 :三小時



Edited 3 time(s). Last edit at 12/08/2016 07:17PM by 廖芳如.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445189

(2).請回答以下問題:
1.網頁主題:閱讀實驗室
配色與風格設定: 因為閱讀給人帶來寧靜的感覺,所以我用藍、白、灰為主題設計。這次的主題跟先前的不同,因為我想要做一個屬於自己的網頁,裡面將會介紹許多文章噢!
2.有無遇到的問題? 看影片就沒什麼大問題了
3.製作感想:這次教的也是小功能,有這些小功能我們的網頁感覺層次很豐富
4.製作作業的時間 :這次做超 級 久 因為我重新做了一個新的網頁,還有想把版面排好也去看了表格的影片smiling bouncing smiley



Edited 1 time(s). Last edit at 12/11/2016 02:24PM by 1045445189.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445180

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 阿里山小火車的外觀顏色設定
2.有無遇到的問題? 有問題看講義解決了
3.製作感想 : 講義真的幫助很多
4.製作作業的時間 : 3小時或更多



Edited 1 time(s). Last edit at 12/13/2016 12:41AM by 時尚時尚最時尚.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw04/hw05-1045445042

(2).請回答以下問題:
1.導覽列配色與風格設定:這次是以宇宙作為主題,所以配色上都略為暗
2.有無遇到的問題? 因為連續兩週都請公假進度大落後......都沒有上到課,然後自己看著講義還是有點障礙......但還好問一下同學即可解決。
3.製作感想(你認為導覽列的意義為何?) 因為這次是做自己喜歡的樂團,所以做起來會特別開心,就好像把追星的所有心力都花在這上面哈哈
4.製作作業的時間 兩個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445045
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:與樂團的宣傳照搭配
2.有無遇到的問題?繞圖排文的字跟圖片跑掉
3.製作感想 : 繞圖排文遇到瓶頸
4.製作作業的時間 : 1小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445036/sanrio.html
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 依舊以蛋黃哥的顏色下去配色哦~可愛的蛋黃色~風格就是可愛慵懶
2.有無遇到的問題:DW上看到FOOTER都亂跑或者CONTENT的文字會亂跑~~但到瀏覽器上就不會了~
3.製作感想:做了第二頁來介紹蛋黃哥的公司~
本身我不太喜歡繞圖排文,因為找的資料並沒有太多太多的文字~
繞圖排文讓我覺得整體會便不好看,所以一直沒有用老師教得繞圖排文~
但,arttext的功能很好用~利用在介紹三麗鷗與他的人物們很實用~smiling smiley
然後可以自己製作適合網頁的推文按鈕真的超好玩der~
4.製作作業的時間
2~3小時



Edited 1 time(s). Last edit at 12/13/2016 09:07PM by Peiwei.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445102/
(2).請回答以下問題:
1.網頁主題:MOOMIN
配色與風格設定:以灰色來呈現MOOMIN的風格
2.有無遇到的問題 還好有看講義
3.製作感想 :這次還可以
4.製作作業的時間:3小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445141/
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 依然,黑白,簡潔
2.有無遇到的問題:nope
3.製作感想:有點睏
4.製作作業的時間
2小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445084/
(2).請回答以下問題:
1.網頁主題:larva 逗逗蟲
配色與風格設定:橘色活潑的風格
2.有無遇到的問題? FB連結怪怪的 整個都怪怪的
3.製作感想 :這樣就好難了 崩潰
4.製作作業的時間:數不清了

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445015
(2).請回答以下問題
1.網頁主題:新瓦屋客家文化園區市集
配色與風格設定:以粉色系為主來做主要配色
2.有無遇到的問題? FB點不出來 ,但其他可以點
3.製作感想 :這次做的還算順利
4.製作作業的時間:3小時左右

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445009

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:神秘復古
2.有無遇到的問題? 無
3.製作感想 好玩超有成就感
4.製作作業的時間 1.5小時



Edited 1 time(s). Last edit at 12/14/2016 12:58AM by 1045445009.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445003

(2).請回答以下問題:
1.網頁主題:HUMANS
配色與風格設定: 原本預想是要加點藍色,但加了之後就覺得整個畫面顏色超跳,所以就直接整體都用藍綠色去做小變化 spinning smiley sticking its tongue out
2.有無遇到的問題? 無
3.製作感想:(ヾ(´・ω・`) 還想學更多會讓網頁美美的效果
4.製作作業的時間:3個多小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445027

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

1.網頁主題、配色與風格設定:Running Man 主黃色明亮色調,給人歡樂的感覺。
2.有無遇到的問題:設定繞圖排文有時候會搞混。
3.製作感想:圖片不好找啊...
4.製作作業的時間:1個小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 主題是豆豆先生 配色是以綠色或黃色去搭配
2.有無遇到的問題? 目前還好沒有甚麼問題
3.製作感想 製作完成很有成就感
4.製作作業的時間 3~4小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445033

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

1.網頁主題: 配色與風格設定: 跟上一個作業相同歐~!

2.有無遇到的問題? 忘了老師說過fb必須都上網才開得起來,花了一下時間,除此之外都順順的~

3.製作感想 還滿有趣的,只是每次都看的眼睛好花啊~~~

4.製作作業的時間 20分鐘左右~



Edited 1 time(s). Last edit at 12/14/2016 11:17AM by Hus,Ching-Chiech.
(編輯記錄)

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

1.網頁主題: 配色與風格設定:
以灰色色調、並且與RWBY代表色作為風格。

2.有無遇到的問題?
版權頁離家出走

3.製作感想
這個是只要用心就可以立即看到成就感的課程~

4.製作作業的時間
1~2小時



Edited 1 time(s). Last edit at 01/11/2017 11:04AM by dj520136.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
簡單黑白兩色(有加進一些不同於黑白的顏色,讓她不會太死),因為niconico網站本身就是以黑白兩色為主調,所以這次期末也會朝著簡潔單色去做//
2.有無遇到的問題?
推文按鈕想嘗試除了老師貼的按鈕以外的JavaScript語法,但是最後沒有成功就刪除了><
3.製作感想
推文按鈕弄了比較多時間,而且真的不多碰網頁設計會生疏TTTTTT很多筆記沒記到
4.製作作業的時間
3小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445099

(2).請回答以下問題:
1.網頁主題:烤焦麵包
配色與風格設定: 可愛的味道多一點和活潑感

2.有無遇到的問題? FB連結怪怪的

3.製作感想? 想把網頁編排的更好看,製作完成很有成就感

4.製作作業的時間?1~2小時



Edited 2 time(s). Last edit at 01/03/2017 04:20PM by 簡瑜萱.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445069

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 藍色系 可愛

2.有無遇到的問題? 一開始header設定錯,就連button也跟著設定錯,還好後來發現!

3.製作感想? 做完看著自己的網頁有種成就感,覺得好可愛spinning smiley sticking its tongue out

4.製作作業的時間?1~2小時

1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445075
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:黑紫色的配色風格
2.有無遇到的問題?無
3.製作感想 : 做出來感覺很不錯
4.製作作業的時間 : 1小時

1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445150

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

1.網頁主題:HURTS

配色與風格設定: 黑灰白為主要配色較有神祕感

2.有無遇到的問題? FB連結會跳掉

3.製作感想? 雖然花了很多的時間 但可以從中學習到很多 覺得還不錯

4.製作作業的時間?3-4小時



Edited 1 time(s). Last edit at 01/01/2017 06:17PM by 1045445150.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445177/
(2).請回答以下問題:
1.網頁主題:sherlock
配色與風格設定:以灰色來呈現
2.有無遇到的問題? 聯結有困難
3.製作感想 :好難~~~
4.製作作業的時間:5小時以up

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

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

1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445198
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:粉
2.有無遇到的問題? NO
3.製作感想 : NO
4.製作作業的時間 : 1HR

1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445120
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:藍
2.有無遇到的問題? 室友教我
3.製作感想 : NO
4.製作作業的時間 : 2HR

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:以黑色和紅色呈現他們的男性魅力
2.有無遇到的問題? 無
3.製作感想 因為製作自己的偶像的網頁作業,所以非常開心
4.製作作業的時間 2小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445018/
(2).請回答以下問題:
1.網頁主題:蘑菇人方吉
配色與風格設定:以淡黃粉色系為主要色調
2.有無遇到的問題? 不會做標題的美化
3.製作感想 :很難
4.製作作業的時間:一個晚上

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:整體利用黑色強調風格展現
2.有無遇到的問題? 無
3.製作感想 非常有心得
4.製作作業的時間 一小時

1025445200-4B-連怡婷

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1025445200/about.html
(2).請回答以下問題:
1.網頁主題:史努比
配色與風格設定:以藍色作為底色給人清爽的感覺
2.有無遇到的問題:無
3.製作感想 :還可以,細節比較難調
4.製作作業的時間:1小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445144/who.html

(2).請回答以下問題
1.網頁主題:嚕嚕米moomin
配色與風格設定:以繽紛色系為主,彩色系列

2.有無遇到的問題? 推紐一開始不太會用,最後研究出來了哈哈
然後我的FB點不出來

3.製作感想 :每次作業我都做好久而且都會有一些障礙,但做我喜歡的腳色我很喜歡
4.製作作業的時間:4小時左右

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445147

(2).請回答以下問題
1.網頁主題:新海誠
配色與風格設定:黑色

2.有無遇到的問題? 無
3.製作感想 :繞圖排文意外簡單。
4.製作作業的時間:1小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445057

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

1.網頁主題、配色與風格設定:王詩安的個人介紹網站、清新簡單、看了讓人舒服 天空的味道~
2.有無遇到的問題:繞圖排文有時候會看起來卡卡的 條滿久
3.製作感想:比較喜歡期中作業的方法 哈哈
4.製作作業的時間:40分~1個小時

1).作業網址 :file:///C:/Users/tr558/Desktop/midterm-1025445108/index.html
(2).請回答以下問題:
1.網頁主題:灌籃高手
配色與風格設定:灌籃高手
2.有無遇到的問題? 灌籃高手
3.製作感想:跟著老師的影片製作
4.製作作業的時間:3個小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445177

(2).請回答以下問題
1.網頁主題:荳荳
配色與風格設定:粉粉嫩的少女風

2.有無遇到的問題? 還好
3.製作感想 : 比之前簡單
4.製作作業的時間:一天一點點

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445129
(2).請回答以下問題
1.網頁主題:My Melody
配色與風格設定:以粉色系為主色,呈現出粉嫩嫩的感覺。
2.有無遇到的問題? FB連結有問題 ,其他2個很正常
3.製作感想 :遇到問題看講義就解決了~
4.製作作業的時間:大概2個晚上

(1).作業網址 :http://mepopedia.com/~web105-2c/hw04/hw04-1045445217/story.html
(2).請回答以下問題
1.網頁主題:頑童
配色與風格設定:灰白黑做搭配
2.有無遇到的問題? 太困難了 問題超多
3.製作感想 :ㄚ阿阿阿好累
4.製作作業的時間:大概好幾個晚上

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445174/
(2).請回答以下問題:
1.網頁主題:一風堂
配色與風格設定:美味可口
2.有無遇到的問題? 無
3.製作感想 :有點難
4.製作作業的時間:3小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445153
(2).請回答以下問題:
1.網頁主題:宮崎駿
配色與風格設定:素色簡約
2.有無遇到的問題? 有同學幫忙,沒什麼大問題
3.製作感想 :算簡單,但很花時間
4.製作作業的時間:2小時左右

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

(2).請回答以下問題:
1.網頁主題: 豔漢
配色與風格設定: 應該會越簡單越好
2.有無遇到的問題 : 換一個題目做,因為感覺之前做的題目好像會跟別人重複....
3.製作感想 :全部重來一次好累
4.製作作業的時間 :1天

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445081

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:日系清新,主色粉紅 輔色淺藍
2.有無遇到的問題? 無
3.製作感想 這個作業我才知道怎麼使用推文的語法,發現平時常點的按鈕原來是這樣做出來的!!
4.製作作業的時間 一小時