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/~web105-2b/hw05/hw05-104xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

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

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





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

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

1.網頁主題: 配色與風格設定:因小熊維尼為主角,
所以網頁整體搭配主要以簡單的黃,澄,咖啡三種顏色,
使畫面有溫馨舒適的感覺,也符合主題。

2.有無遇到的問題?
目前沒有問題

3.製作感想
一次又一次的練習,對網頁也更加了解許多

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



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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 別相信任何人(一部電影) 神秘感
2.有無遇到的問題? 按鈕的底色設定不出來,只跑出一小塊色塊
3.製作感想:一次又一次的練習,讓我對網頁更佳的了解
網頁也呈現的越來越完整,有種小成就感
4.製作作業的時間 :3~3.5小時

作業網址 :http://mepopedia.com/~web105-2b/hw05/hw05-1045445056

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 粉色系
2.有無遇到的問題:無
3.製作感想 :目前還算順利
4.製作作業的時間 :2小時

作業網址 :http://mepopedia.com/~web105-2b/hw05/hw05-1045445161


網頁主題:
LOUISA咖啡介紹

配色與風格設定:
配色採LOGO標準色搭配
主要偏向溫暖路線
希望給瀏覽的人感受到吃是一件很幸福的事情

有無遇到的問題?
無大礙

製作感想:
呈現出來的感覺越來越多元,越來越有成就感,會一直覺得做得還不夠
希望之後能做出更完整,更專業,目標是像一般網路上看到那樣的網頁

製作作業的時間:
3~4小時



Edited 1 time(s). Last edit at 12/14/2016 07:41PM by 1045445161.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:幾米,粉色配色
2.有無遇到的問題?
3.製作感想 :多了許多新的語法,愈來愈熟悉網頁
4.製作作業的時間 :1~2小時



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

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

(2).請回答以下問題:
1.網頁主題:SHERIIDAN
配色與風格設定: 因為是做國外有海邊的度假村,所以用藍色為主,有沉靜、自由的意象。

2.有無遇到的問題? 無。

3.製作感想:每一次練習都讓我更加進步,也了解更多做網頁的知識,希望之後能做的更好,
不過一直搜尋渡假村的相關資料,讓我現在超想去渡假的。

4.製作作業的時間:3~4小時。

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

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

1.導覽列配色與風格設定:營造神道教純潔、純白

2.有無遇到的問題? 在Dw看有css的效果,開網頁就沒有效果了sad smiley


3.製作感想 :網頁教的東西越來越多,有時候會用到搞混confused smiley

4.製作時間 :3小時



Edited 1 time(s). Last edit at 12/14/2016 10:48PM by 1045445062.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:MAMAMOO
配色與風格設定: 暗紅,復古風
2.有無遇到的問題? 暫無
3.製作感想:hw05的新東西基本上是在課堂跟著老師一起做就能夠完成,而且也很簡單,所以大致上並沒有花太多時間
4.製作作業的時間:一天內

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

(2).請回答以下問題:
1.網頁主題:魔鏡夢遊
配色與風格設定:以背景的紫色來呈現出神秘而奇幻的感覺,則黃色是想呈現華麗的感覺,這兩種顏色都是去吸header圖片裡的顏色。
2.有無遇到的問題? 目前還可以
3.製作感想
在這次的作業裡又學到了不一樣的東西,感覺很好玩,雖然在做的方面有點花時間,也會遇到一些問題,但完成後也會小有成就感。
4.製作作業的時間
2~4小時



Edited 1 time(s). Last edit at 12/15/2016 01:30AM by 1045445092.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
因lagy gaga給人的感覺是比較狂放型的所以在header的部分我做了比較狂放感覺的圖,但在內文裡走比較簡潔的風格這樣整體看起來比較舒服

2.有無遇到的問題?


3.製作感想
現在學了很多語法網頁也比較豐富了

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



Edited 1 time(s). Last edit at 12/15/2016 01:39AM by 1045445080.
(編輯記錄)

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

1.網頁主題: 配色與風格設定:畢卡索
利用他途內有的顏色來配置

2.有無遇到的問題?
body的背景色不知怎搞得用不出來拉

3.製作感想
很熟悉的感覺 要再多練習

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

1、作業網址 :http://mepopedia.com/~web105-2b/hw05/hw05-1045445170

2、

1.網頁主題:星座
配色與風格設定:背景和封面搭配,讓色彩看起來和諧也不會太low。

2.有無遇到的問題?喜望記憶力好一點。

3.製作感想:做了後面忘了前面,還得回去一直翻講義來看XD

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

http://mepopedia.com/~web105-2b/hw05/hw05-1045445002

(2).請回答以下問題:
1.網頁主題:黑執事
配色與風格設定:黑暗與華麗
(期末作業還沒想到新的,所以先拿原本的期中來做><)

2.有無遇到的問題?
目前沒有OwO

3.製作感想
嗯 做完很棒

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

(1).作業網址 :http://mepopedia.com/~web105-2b/hw05/hw05-1045445195
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 藍色比較溫暖
2.有無遇到的問題? 開始的時候不知道如何設定css,看了講義和同學的作業以後知道了。
3.製作感想
4.製作作業的時間 2個小時

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


(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 以藍色為主,風格比較穩重,因為主角是個很穩重的人,他超帥的

2.有無遇到的問題? 沒有甚麼問題

3.製作感想 每次做網頁都快淚繃了,但想得越多反而想做的多就會亂掉!!!不過做完還是很開心~因為主題是自己喜歡做的~

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



Edited 1 time(s). Last edit at 12/20/2016 01:00AM by 1045445008.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 櫻桃小丸子 可愛粉紅
2.有無遇到的問題? 繞圖排文用有點久
3.製作感想 很好玩可是程式碼也很複雜
4.製作作業的時間 5小時

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

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

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

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

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

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

(2).請回答以下問題:
1.網頁主題:哈士奇
配色與風格設定: 因為哈士奇是屬於寒帶犬所以在配色及風格上用於較冷色調,搭配寒帶溫暖的陽光讓畫面看起來更舒服。
2.有無遇到的問題?
目前已解決
3.製作感想
終於比較跟得上進度了,不然我之前覺得進度落後,原本不懂的地方也差不多搞懂了,
覺得開心,希望可以越做越順利。
4.製作作業的時間
5小時



Edited 2 time(s). Last edit at 12/22/2016 12:48AM by 1045445188.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:Bravest Warriors
配色與風格設定: 角色相關色系
2.有無遇到的問題?
有找方法解決了thumbs up
3.製作感想
這次想要做更的精細 所以嘗試不同的效果 希望整體畫面看起來繽紛又和諧smileys with beer
4.製作作業的時間
4~5小時

作業網址 :http://mepopedia.com/~web105-2b/hw05/hw05-1045445095

1.網頁主題:美國歌手selena gomaz
配色與風格設定: 暖色調
2.有無遇到的問題? 有時候會搞不清楚類型 其他有越來越了解
3.製作感想 照片訪大效果很酷 做完很有成就感
4.製作作業的時間 2-3小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
可愛甜美風格
2.有無遇到的問題?
推文按鈕在做的時候有障礙哈哈 ,但是看過老師的影片後就沒事了
3.製作感想
覺得能做出來真的很高興
4.製作作業的時間
2小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
可愛甜美風格
2.有無遇到的問題?
推文按鈕在做的時候有障礙哈哈 ,但是看過老師的影片後就沒事了
3.製作感想
覺得能做出來真的很高興
4.製作作業的時間
2小時
呵呵 謝謝老師教我~~

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑白...時尚吧
2.有無遇到的問題: 格子裡的直線XD...
3.製作感想 :還可以~~~
4.製作作業的時間 :1~2小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 監獄兔的配色
2.有無遇到的問題? footer的配圖很不符合,最後仍然使用單色做搭配
3.製作感想 很好玩 希望是版面清爽的感覺,然後很喜歡這個卡通所以做起來很開心
4.製作作業的時間 2~3小時

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

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

1.導覽列配色與風格設定:暗色系

2.有無遇到的問題? 還好 看老師的講義都可以解決

3.製作感想 : 好有成就感~

4.製作時間 :2小時

(1).作業網址 :http://mepopedia.com/~web105-2b/hw05/hw05-1045445152
(2).請回答以下問題:
1.網頁主題:主題以步步系列為主
配色與風格設定: 以偏紫色神秘的風格為主
2.有無遇到的問題? 無
3.製作感想 覺得越來越熟悉了 smiling smiley
4.製作作業的時間 2~3小時


作業網址 :http://mepopedia.com/~web105-2b/hw05/hw05-1045445068

1.網頁主題:Ariana Grande
配色與風格設定: 淡紫色
2.有無遇到的問題? 無
3.製作感想 做完整體看起來很有成就感 感覺多多少少學到了一些技巧
4.製作作業的時間 3~4小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: ARASHI日本南子偶像團體
2.有無遇到的問題? 表格一直改不了
3.製作感想:有比較了解網頁,但還是覺得很難
4.製作作業的時間 :2~3小時

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

1.網頁主題: MAZDA 2
配色與風格設定:工業風


2.有無遇到的問題? 無


3.製作感想 輕鬆


4.製作作業的時間 30分

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

1.網頁主題: 慢慢說樂團
配色與風格設定:簡潔文青


2.有無遇到的問題? 有


3.製作感想 雖然很困難很麻煩但很有趣


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

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

1.網頁主題: 草間彌生
配色與風格設定:圓點點


2.有無遇到的問題? 有 繞圖排文一開始不會 請教同學以後就會了


3.製作感想 雖困難很麻煩但很有趣


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

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

1.網頁主題: ONE PIECE 航海王
配色與風格設定:神秘


2.有無遇到的問題? 有


3.製作感想 製作過程很多困難


4.製作作業的時間 1.5小時

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

1.網頁主題: 配色與風格設定:紅白,可樂風格
2.有無遇到的問題?


3.製作感想
繞圖排文比較簡單(比起雙欄&表格)

4.製作作業的時間
0.5hr

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑灰白 酷酷的感覺 暗黑系列
2.有無遇到的問題? 無
3.製作感想? 理解之後 做起來就很順利
4.製作作業的時間 1個小時

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

(2).請回答以下問題:
1.網頁主題:七號房的禮物 配色與風格設定:顏色是以暖色為主,要帶給視覺有溫馨的感覺
2.有無遇到的問題? 稍為容易頓住,但老師的影片很詳細,所以也都能解決
3.製作感想 :慢慢的去理解每個語法,再花一點時間捉摸,希望能弄得更完整
4.製作作業的時間 :3~4小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 紅 黃 酷酷的感覺
2.有無遇到的問題? 無
3.製作感想? 理解之後 原來是這樣
4.製作作業的時間 :不要問

作業網址 :http://mepopedia.com/~web105-2b/hw05/hw05-1045445104


網頁主題:
名偵探柯南

配色與風格設定:
主要偏向穩重路線


有無遇到的問題?
無大礙

製作感想:
希望之後能做出更完整,更專業,目標是像一般網路上看到那樣的網頁

製作作業的時間:
3~4小時

作業網址 :http://mepopedia.com/~web105-2b/hw05/hw05-1025445119

網頁主題:鄭秀晶
配色與風格設定:清新
有無遇到的問題:不知道為什麼繞圖排文好像被吃掉了?
製作感想:很好玩
製作作業的時間:一兩小時

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

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

(1).作業網址 :http://mepopedia.com/~web105-2b/hw05/hw05-1045445122/cast

(2).請回答以下問題:
1.導覽列配色與風格設定:低調,簡約
2.有無遇到的問題? 無
3.製作感想 美感很重要
4.製作作業的時間 很久...



Edited 1 time(s). Last edit at 01/12/2017 10:13PM by 1045445122.
(編輯記錄)

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

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