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

Advanced

[作業05 ] 繞圖排文與推文按鈕的應用

請參考

[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/~cg104-1a/hw05/hw05-104xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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



作業網址 ::http://mepopedia.com/~cg104-1a/hw05/hw05-1045440046


(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 唯美
2.有無遇到的問題? icon要怎麼放到左邊
3.製作感想 開心
4.製作作業的時間 有時間就做



Edited 1 time(s). Last edit at 05/19/2016 09:15AM by 1045440046.
(編輯記錄)

(1).作業網址 :

http://mepopedia.com/~cg104-1a/hw05/hw05-1045440010

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

1.網頁主題: 配色與風格設定:

配色是以深色突顯淺色(亮色)為主,風格是沉穩.穩重。

2.有無遇到的問題?

都還好。

3.製作感想

東西雖然增加了,但是有學到更多東西。

4.製作作業的時間

回家放學後就開始做。

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 簡約。以黑、白、紅代表屬於熊本熊之特色。
2.有無遇到的問題? 想要知道導覽列的設定怎麼變寬後完全變色(問題已解決~)。
3.製作感想 :很好玩,能知道新語法讓網頁越來越漂亮很感動。
4.製作作業的時間 :一整天。



Edited 1 time(s). Last edit at 05/19/2016 09:22AM by 1045440013.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 暖暖的顏色。
3.製作感想 :越來越上手
4.製作作業的時間 :一整天。



Edited 1 time(s). Last edit at 05/18/2016 04:45PM by GEE.
(編輯記錄)

(1).作業網址 :
http://mepopedia.com/~cg104-1a/hw05/hw05-1045440024
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
配色是以無色彩(淡色)強調
2.有無遇到的問題?
不會置入圖片,分享按鈕設定,標題列設置(h1部分)
3.製作感想
東西開始變難了...
4.製作作業的時間
沒去數...

(1).作業網址 :

http://mepopedia.com/~cg104-1a/hw05/hw05-1045440029

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

1.網頁主題: 配色與風格設定:

配色是以白色突顯主題,風格是鮮豔。

2.有無遇到的問題?

還可以 跟著影片做。

3.製作感想

東西增加了,變得複雜,但是有學到有趣的 期待後續。

4.製作作業的時間
有空就坐。

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
粉紅色調、少女時代
2.有無遇到的問題?
花費的時間越來越多
3.製作感想
越來越難了
4.製作作業的時間
用之前做的改

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

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

1.網頁主題: 配色與風格設定:
粉紅色的 卡莉很怪奇所以我也做得很怪奇
2.有無遇到的問題?
我到底按鈕有沒有做好呀?
3.製作感想
應該是我開始變笨了 我不會做網頁了QQQQ
4.製作作業的時間
10000年

作業網址:http://mepopedia.com/~cg104-1a/hw05/hw05-1045440003/

1.一拳超人 搞笑
2.很多說不完哈哈
3.超難的啊
4.超~~~~久~~~

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

(2).請回答以下問題:
1.網頁主題:鸚鵡人
2. 配色與風格設定: 簡單亮色系搭配
3.製作感想 :想趕快全部做完
4.製作作業的時間 :1小時

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

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

1.網頁主題: 配色與風格設定:
藍藍綠綠 照片與相機

2.有無遇到的問題?
掰內文好累

3.製作感想
終於做完了
4.製作作業的時間
100年



Edited 1 time(s). Last edit at 06/15/2016 11:05PM by 1045440031.
(編輯記錄)

http://mepopedia.com/~cg104-1a/hw05/hw05-1045440019

1.網頁主題: 配色與風格設定: 看起來就柔柔的色調
2.有無遇到的問題? 沒有
3.製作感想 摁...對不起我在期末前一個禮拜才做,好趕呀
4.製作作業的時間 1天

(1).作業網址 : http://mepopedia.com/~cg104-1a/final/final-1045440012/
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 繽紛的顏色
3.製作感想 :愈來愈難難難難難
4.製作作業的時間 :100天

(1).作業網址 :
http://mepopedia.com/~cg104-1a/hw05/hw05-1045440020
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
配色是以海底及角色風格去配
2.有無遇到的問題?
沒有
3.製作感想
東西開始變難了...
4.製作作業的時間
2hr

作業網址 ::http://mepopedia.com/~cg104-1a/hw05/hw05-1045440028


(2).請回答以下問題:
1.網頁主題: 美國隊長3:英雄內戰
2.有無遇到的問題? 無
3.製作感想 累
4.製作作業的時間 有時間就做

作業網址 ::http://mepopedia.com/~cg104-1a/hw05/hw05-1045440033


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

作業網址 ::http://mepopedia.com/~cg104-1a/hw05/hw05-1045440022


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

(1).作業網址 ::http://mepopedia.com/~cg104-1a/hw05/hw05-1045440002
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:黑白簡約風
2.有無遇到的問題? 有,DW是英文版 對照中文對很久QQ
3.製作感想 :累累ㄉ希望不要被當拜託
4.製作作業的時間 :大概兩小時

作業網址 ::http://mepopedia.com/~cg104-1a/hw05/hw05-1045440045


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

老師,繞圖排文是about,因為我一直沒辦法單獨放就全放在一起了。

作業網址 ::http://mepopedia.com/~cg104-1a/hw05/hw05-1045440006


(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 其實沒有多想....
2.有無遇到的問題? 繞圖排文有一些些小困難...
3.製作感想:沒感想...
4.製作作業的時間:對不起我是補交...

作業網址 ::http://mepopedia.com/~cg104-1a/hw05/hw05-1045440050


(2).請回答以下問題:
1.網頁主題:初音 配色與風格設定: 唯美
2.有無遇到的問題? :超多~~~~都不會
3.製作感想 :很累很殺腦細胞
4.製作作業的時間 拖到最後一刻