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-2b/hw05/hw05-103xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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



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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 遵循hw04的角落生物配色
2.有無遇到的問題? 無
3.製作感想 : 此主題的文字資料很少,有點困擾。
4.製作作業的時間 :課外1-2小時

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

(2).請回答以下問題:
1.網頁主題:莫內
配色與風格設定: 寒色預設
2.有無遇到的問題? 無
3.製作感想 : 語法有點亂了><。
4.製作作業的時間 :2小時

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

(2).請回答以下問題:
1.網頁主題: 畫家 梵谷
配色與風格設定:選擇跟星空很相近的顏色,讓整體看起來有整體感
2.有無遇到的問題? 目前沒有
3.製作感想 這次學了很不一樣的技巧 製作上花了一點時間才搞懂
4.製作作業的時間 約3個小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 胖吉貓 (Pusheen)介紹。柔和繽紛的色彩表現溫馨可愛的風格,大面積使用原作者設定的背景色。
2.有無遇到的問題? 無
3.製作感想 :作業越來越豐富,也更具挑戰性了。
4.製作作業的時間:2個多小時

(1).作業網址 :
http://mepopedia.com/~web104-2b/hw05/hw05-1035445002
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:莫內
2.有無遇到的問題? 無
3.製作感想 :越來越有做一個網站的感覺了
4.製作作業的時間 :3小時



Edited 1 time(s). Last edit at 12/09/2015 07:26PM by 1034445002.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: LINE
配色與風格設定: 大家熟悉的LINE的綠色配色
2.有無遇到的問題? 無
3.製作感想 : 要思考一下版面怎麼牌才會漂亮
4.製作作業的時間 :3小時 左右

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
  使用老師給的素材檔主題繼續製作,不過有些地方有修改沒有完全一樣,且內文的圖片有另外找
2.有無遇到的問題?  無
3.製作感想:版面只不過加了一些小東西,需要用到的語法卻一大堆,雖然有點複雜,但很有趣
4.製作作業的時間 :課外1小時多

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
  用上次的作業做延伸,一樣以俄羅斯為主題,配色為棗紅、深藍、淺黃色。
2.有無遇到的問題?  無
3.製作感想:作業越來越豐富,也越來越有挑戰性了
4.製作作業的時間 :1小時多

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
  利用之前作的主題在多加這次的東西,配色風格偏紫藍色系再戴一些黃色做點綴。
2.有無遇到的問題?  沒有太大問題
3.製作感想:感覺自己作的網頁東西越來越豐富!有成就感~~且這次還做到可以分享到FB的按鈕!覺得很不可思議~spinning smiley sticking its tongue outspinning smiley sticking its tongue outspinning smiley sticking its tongue outspinning smiley sticking its tongue out
4.製作作業的時間 :1小時多

1035445170

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 遵循hw04的配色
2.有無遇到的問題? 無
3.製作感想 : 此主題的文字資料很少,有點困擾。
4.製作作業的時間 :30分鐘

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
  用上一次的主題去發展,以黃色跟橘色去配色
2.有無遇到的問題?  中間的文字沒辦法內縮
3.製作感想:這次做的過程遇到蠻多問題的,但是之後做出來發現原來網頁的圖片跟分享至fb那些是這樣用的。
4.製作作業的時間 :1小時多

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

(2).請回答以下問題:
1.網頁主題:VANS
配色與風格設定: 延續04的作業,繼續進行內文的部分。
2.有無遇到的問題? 無
3.製作感想 : 介紹關於VANS的品牌,由圖和文結合來呈現。
4.製作作業的時間 :1-2小時



Edited 2 time(s). Last edit at 12/09/2015 09:59PM by 1035445149.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:CD專輯介紹
配色與風格設定:
  以整張CD的基本風格為主
2.有無遇到的問題?  無
3.製作感想:製作這麼多次的網頁設計後,對語法的運用越來越熟練
4.製作作業的時間 :1-1.5小時多

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

(2).請回答以下問題:
1.網頁主題:魔物獵人
配色與風格設定:跟隨魔物獵人這個遊戲中常用的顏色來作配色,雖然建議不要放音樂,可是由於我想做一個有點官網感覺的網站,所以還是放上了魔物獵人的背景音樂。
2.有無遇到的問題?: 我想做固定的菜單,可是只固定菜單的話,當滾動內容時它就會從上面的空隙露出來,不知道有什麼方法可以解決。
3.製作感想:仍然是很高興能做自己喜歡的主題,雖然期間都遇上不少問題,不過大多都能解決,我自己是很喜歡做網頁的,看著喜歡的網頁一步一步形成,感覺非常愉快。
4.製作作業的時間 :兩個多小時

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

(2).請回答以下問題:
1.網頁主題:太陽番茄拉麵 使用紅色的配色去配,顯得有番茄的風格。
2.有無遇到的問題?:無
3.製作感想:因為自己在這間店上班所以做起來特別有成就感。
4.製作作業的時間 :30分鐘

(1).作業網址 :
http://mepopedia.com/~web104-2b/hw05/hw05-1035445011
(2).請回答以下問題:
1.網頁主題:延續之前的小王子
配色與風格設定:以簡單的白背景搭配著大地色
2.有無遇到的問題? 無
3.製作感想 :越來越得心應手了!! 有種成就感
4.製作作業的時間 :1小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
  上次的作業做延伸,以vespa為主題,配色黑白
2.有無遇到的問題?  無
3.製作感想:有趣~
4.製作作業的時間 :1小時多

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

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

上次的作業做延伸,日式燒烤的風格
2.有無遇到的問題?  無
3.製作感想:很有挑戰性
4.製作作業的時間 :半小時

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

(2).請回答以下問題:
1.網頁主題:哈利波特

配色與風格設定: 灰,白,深紅
  
2.有無遇到的問題? 無
3.製作感想:還好,很有成功感,想再豐富其中內容
4.製作作業的時間 :2小時多

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

(2).請回答以下問題:
1.網頁主題:設計師的故事

配色與風格設定:配色與風格的搭配是依據設計師的行業與照片的顏色呈現。

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

3.製作感想:製作這麼多次的網頁設計後,越來越了解什麼地方要用什麼語法來改。

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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
  以之前的配色 用綠色為基本配色
2.有無遇到的問題?  照片編輯的問題
3.製作感想:這次做的過程遇到很多問題的,例如相片的問題等等但最後還是有搞懂做法
4.製作作業的時間 :1-1.5小時多

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 延用上一次的主題
2.有無遇到的問題 : 沒有
3.製作感想 : 排版讓我思考了很久
4.製作作業的時間 : 1小時

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

(2).請回答以下問題:
1.網頁主題:插畫家#南瓜子

配色與風格設定: 以背景的顏色搭配方式為主,
2.有無遇到的問題? 無
3.製作感想 :越做越順手了
4.製作作業的時間:3個多小時

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

(2).請回答以下問題:
1.網頁主題:小熊維尼歷險記

配色與風格設定:以圖片的主色調配色,風格簡單
2.有無遇到的問題? 無
3.製作感想 :覺得很煩 很多小問題但都有解決
4.製作作業的時間:4個多小時

(1).作業網址 : file:///C:/Users/Admin/Desktop/hw05-1035445107/index.html

(2).請回答以下問題:
1.網頁主題: 延續上一個作業的風格:慕夏。
2.有無遇到的問題? 解決了
3.製作感想 :真的很辛苦,一時搞不清楚,後來才發現我放錯地方。
4.製作作業的時間:2個多小時



Edited 1 time(s). Last edit at 12/10/2015 09:27AM by ttn0910.
(編輯記錄)

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

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

1.網頁主題: 櫻桃小丸子
配色與風格設定: 使用柔和可愛的顏色搭配櫻桃小丸子這個主題

2.有無遇到的問題? 無

3.製作感想 遇到了一點小瓶頸,但是都解決了!!! smiling smiley

4.製作作業的時間 2小時左右

(1).作業網址 : http://mepopedia.com/~web104-2b/hw05/hw05-1035445026
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:配色取自加菲貓身上的相近色, 淡橘以及淺黃。
2.有無遇到的問題? 無
3.製作感想:有些細節調整很久
4.製作作業的時間:零散的三小時



Edited 2 time(s). Last edit at 12/10/2015 12:24AM by 1035445026.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:莫內 (用老師給的主題)
配色與風格設定: 寒色系列
2.有無遇到的問題? 圖片繞圖 搞很久 看了 教學影片 終於懂了
3.製作感想 : 越來越複雜了............
4.製作作業的時間 :3小時

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

(2).請回答以下問題:
1.網頁主題: 籃球之神JORDAN
2.有無遇到的問題? 無
3.製作感想 :可以治做自己喜歡的主題的網頁感覺很興奮。
4.製作作業的時間 :課外2小時

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

(2).請回答以下問題:
1.網頁主題:膽小狗英雄
配色與風格設定:以此卡通配色為主
2.有無遇到的問題: 圖片之間互相卡到排版會變得很醜,因為不知道怎麼解決,最後只好用段落打上"."才免強正常一點。
3.製作感想:覺得越來越有樣子了。
4.製作作業的時間 1~2小時

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

(2).請回答以下問題:
1.網頁主題:莫內
配色與風格設定: 藍色調
2.有無遇到的問題? :語法太多有點混亂
3.製作感想 :學到新的還不錯
4.製作作業的時間 :1小時多

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

(2).請回答以下問題:
1.網頁主題: gosha
2.有無遇到的問題? 無
3.製作感想 :剛開始做的時候一下子會有的困難,然後看看老師的教材就還好
4.製作作業的時間 :2小時

1035445137

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 用老師的範本製作。
2.有無遇到的問題?  無
3.製作感想:繼續嘗試不同種製作方法,學到了許多。
4.製作作業的時間 :1小時多

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

(2).請回答以下問題:
1.網頁主題:星座
配色與風格設定: 以深蓝色为主,代表星座的风格
2.有無遇到的問題? 有点不明白
3.製作感想 : 有点不是很明白,程式码全部都一样,可是出来的感觉不一样。
4.製作作業的時間 :3小時

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

(2).請回答以下問題:
1.網頁主題:LEGO
配色與風格設定:以樂高主要的配色去搭配融合
2.有無遇到的問題?
有。跟作業4的設定混到, 很多東西放在網路都出不來
3.製作感想 : 原本以為一下就用好了,結果一直有問題,語法變多變複雜了很容易出錯
4.製作作業的時間 :2hr ↑

1035445032



Edited 1 time(s). Last edit at 12/10/2015 09:42AM by yii_.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 以此遊戲風格的走向。
2.有無遇到的問題? 無
3.製作感想 : 增加可以分享的功能,希望可以學到怎分享到其他網頁的功能。
4.製作作業的時間 :2小時

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

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

(1).作業網址 :http://mepopedia.com/~web104-2b/hw05/hw05-1035445050/
(2).請回答以下問題:
1.網頁主題:少年PI的奇幻漂流
2.有無遇到的問題? 無
3.製作感想 :文章字數太少了,繞圖排文不好看-3-
4.製作作業的時間 :2小時

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

(2).請回答以下問題:
1.網頁主題:shinee。

配色與風格設定:以藍色為主。


2.有無遇到的問題? 其實是有~但是好像OK了~


3.製作感想:沒想到我竟然能做的出來~(的感覺)


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

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

(2).請回答以下問題:
1.網頁主題:about time
配色與風格設定: 輕鬆
2.有無遇到的問題? 無
3.製作感想 : 語法需要花點時間操作
4.製作作業的時間 :2小時

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

(2).請回答以下問題:
1.網頁主題:迪士尼
配色與風格設定: 藍色系列
2.有無遇到的問題? 亂了
3.製作感想 : 這個作業真的很難 遇到的問題很多
4.製作作業的時間 :2小時

1015445276 - 王星宇

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

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

1.網頁主題:DCH公司網站

2.有無遇到的問題:無

3.製作感想:很具有挑戰性

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

陳悅綾
(1).作業網址 : http://mepopedia.com/~web104-2b/hw05/hw05-1035445029

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 以可愛的粉色系為主
2.有無遇到的問題? 無
3.製作感想 : 終於知道臉書分享還有推特分享的按鈕製作
4.製作作業的時間 :3小時

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

(2).請回答以下問題:
1.網頁主題:莫內
配色與風格設定: 黑色、白色、灰色為主
2.有無遇到的問題? :繞圖排文用超久,一直繞不出來,找出錯的問題找了快兩小時,最後發現float放錯位置。
3.製作感想 : 恍然大悟之後發現一切都還滿順暢的。
4.製作作業的時間 :2小時

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

(2).請回答以下問題:
1.網頁主題:大英雄天團
配色與風格設定: 黑、白、灰色為主
2.有無遇到的問題? :繞圖排文好難做。
3.製作感想 : 了解了如何製作臉書的按鈕製作。
4.製作作業的時間 :差不多6、7小時

1035445222

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

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

1.網頁主題: 配色與風格設定:Minions小小兵,以黃色藍色來搭配。

2.有無遇到的問題:有,可是看講義後就了解了。

3.製作感想:和期中的網頁做法不同,所以一開始覺得有點複雜。

4.製作作業的時間:一個多小時



Edited 1 time(s). Last edit at 01/07/2016 05:09PM by yung yi.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw05/hw05-1035445023
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:咖啡色、橘色為主
2.有無遇到的問題? 無
3.製作感想 : 原本還以為很難,實際做起來比想像中簡單
4.製作作業的時間 :2小時左右