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

Advanced

Change History

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

討論區清單 文章列表
Changed By: JinJin
Change Date: December 14, 2016 08:33PM

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

<b>[color=#CC3300][講義05] 繞圖排文與推文按鈕的應用
http://mepopedia.com/forum/read.php?804,17878,17878[/color]</b>

<b>[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw05/story.html　[/color]
</b>

的步驟製作，並符合以下條件：

<h2>一、製作步驟</h2>
<b>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.本次作業的重點在於：

<b>[color=#CC0066]（1 ）善用CSS導覽列功能
（2 ）繞圖排文
（3 ）推文設定
（4 ）利用CSS，做更細緻的內文設定
（5 ）如何利用圖片與文字的編排搭配出有質感的網頁。[/color]</b>

[hr]

<h2>二、繳交作業方式</h2>

1.製作完成後，檔案命名方式：

[color=#669900]第五個平時作業FTP上的資料夾為：hw05

每位同學請將自己的資料夾命名為：hw05-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw05/hw05-104xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

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

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

</b>這個作業的網址則為:http://mepopedia.com/~web105-2b/hw05/hw05-104xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

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

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

</b>

Original Message

作者: JinJin
Date: December 04, 2016 04:40PM

[作業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.下載附件的練習檔修改製作 （或以期末作業主題繼續設計新的一頁），必須是全新的內容的一頁。

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]

二、繳交作業方式



1.製作完成後，檔案命名方式：

[color=#669900]第五個平時作業FTP上的資料夾為：hw05

每位同學請將自己的資料夾命名為：hw05-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw05/hw05-104xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

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

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

這個作業的網址則為:http://mepopedia.com/~web105-2b/hw05/hw05-104xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

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

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