Change History

這次要跟大家詳細的介紹繞圖排文和推文的按鈕設定。
希望大家能夠更徹底的了解Float:浮動，以及Padding:內距的意義，並善用Padding:內距，將文字的排版得更舒適更有設計感。

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


並請下載練習檔練習
作業說明：

一、繞圖排文

網頁設計中編排包含圖片、文字的版面時，由於圖片通常比文字高很多，若將它們排在同一行，則圖片旁邊容易出現過多的留白，使版面看起來很空洞， 如圖所示：

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-01.jpg[/IMG]




為了讓版面看起來更緊實更有設計感，通常會以「繞圖排文」的方式來排版，也就是將文字排到圖片旁邊的空白處。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-02.jpg[/IMG]

這種做法需透過 CSS 來設定，以下則為「繞圖排文」的步驟：

1.在準備好的文字中插入圖片

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-03.jpg[/IMG]

2.新增類別CSS，命名為floatleft

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-04.jpg[/IMG]
�來更緊實更有設計感，通常會以「繞圖排文」的方式來排版，也就是將文字排到圖片旁邊的空白處。

[IM[IMG]http://i1136.photobucket.com/albums/n481/parkparkyangttp:-mepopedia.com~jinjin/web/img/502.jpg[/IMG]

這種做法需透過 CS[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang 來設定-�以下則為「繞圖排文」的步驟：

1.在準備好的文字中插入圖片

[IMG]http://mepopedia.com/~jinjin/web/img/503.jpg[/IMG]

2.新增類別CSS，命名為floatleft

[[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-07.jpg[/IMG]

IMG]http://mepopedia.com/~jinjin/web/img/504.jp[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-0g[/IMG]
��來更��實更有設計感，通常會以「繞圖排文」的方式來排版，也就是將文字排到圖片旁邊的空白處。

[IM[IMG]ht[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang//me-pedia.com/~jijin/G]http://mepjpe padding-bottom: 20px;
dia.com/~jinjin/web/img/502.png[/IMG]

這種做法需透過 CS[IMG]http://mepopedia.com/~jinjin/weS 來設定，以下則為jp�繞圖排文」的步驟：

1.在準備好的

4.分享到臉書、噗浪及推特的JavaScript語法

//推到 facebook 臉書//<br /> void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href))));<br /> <br /> //推到 plurk 噗浪//<br /> void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));<br /> <br /> //推到 twitter 推特//<br /> void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat (encodeURIComponent(location.href))));<br />

5.點選按鈕，進入行為面板

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-06.jpg[/IMG]

6.點選→行為→呼叫JavaScript

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-07.jpg[/IMG]

7.分別複製語法後貼上

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-08.jpg[/IMG]

8.可以試試看成效囉，不過要上傳到網路後，才能真正分享喔!

[hr]

三、圖片的彈跳視窗設定

1.點選圖片，進入行為面板

yle {
cursor: pointer;
}

4.分享到臉書、噗浪及推特的JavaScript語法

//推到 facebook 臉書//<br /> void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href))));<br /> <br /> //推到 plurk 噗浪//<br /> void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));<br /> <br /> //推到 twitter 推特//<br /> void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat (encodeURIComponent(location.href))));<br />

5.點選按鈕，進入行為面板

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-06.jpg[/IMG]

6.點選→行為→呼叫JavaScript

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-07.jpg[/IMG]

7.分別複製語法後貼上

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-08.jpg[/IMG]

8.可以試試看成效囉，不過要上傳到網路後，才能真正分享喔!

[hr]

三、圖片的彈跳視窗設定

1.點選圖片，進入行為面板

{
cursor: pointer;
}

4.分享到臉書、噗浪及推特的JavaScript語法

//推到 facebook 臉書//<br /> void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href))));<br /> <br /> //推到 plurk 噗浪//<br /> void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));<br /> <br /> //推到 twitter 推特//<br /> void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat (encodeURIComponent(location.href))));<br />

5.點選按鈕，進入行為面板

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-06.jpg[/IMG]

6.點選→行為→呼叫JavaScript

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-07.jpg[/IMG]

7.分別複製語法後貼上

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-08.jpg[/IMG]

8.可以試試看成效囉，不過要上傳到網路後，才能真正分享喔!

[hr]

三、圖片的彈跳視窗設定

1.點選圖片，進入行為面板

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/ja-001.jpg[/IMG]
�增類別CSS，命名為floatleft
[[IMG]http://mepopedia.com/~jinjin/web/img/507.jpg[/IMG]


IMG]http://mepopedia.com/~jinjin/web/img/504.pn[IMG]http://mepopedia.com/~jinjin/web/img/508.jpMG]

3.Float浮動設定Left靠左對齊，Padding內距上右下設定為20px

[IMG][IMG]http://mepopedia.com/~jinjin/http://mepopjpia.com/~jinjin/web/img/505.png[/IMG]
02.png" border="0">

這種做法需透過 CSS 來設定，以下則為[IMG]http://mepope「繞圖排文」的步驟：

1.在準備好的文字中插入圖片<[/IMG]
="100%" src="http://mepopedia.com/~jinjin/web/img/503.png" border="0">

2.新增類[IMG]http://mepopedia.com/~jinjin/web/im別CSS，命名為f[/IMG]
img width="100%" src="http[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-01.jpg[/IMG]

2.替代文字中寫入：將本篇文章推薦到臉書

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-02.jpg[/IMG]

3.為圖像設定類別CSS命名為iconstyle

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-03.jpg[/IMG]
://mepopedia.com/~jinji[IMG]http://mepopedia.com/n/web/img/504.png" bord[/IMG]
>3.Float浮動設定Left靠左對齊，Padding內距上右下設定為20px

4.將圖片設定為靠左的浮動，選取類別中的floatleft

推文按鈕的應用-類別設定

http://youtu.be/Uw6WALziK-k




[hr]
繞圖排文與圖片彈跳視窗設定

http://youtu.be/r4NFzwVOCfA

5.圖片靠左浮動，並與內文產生20px的內距，與文字產生一段舒服的距離

[hr]
繞圖排文與圖片彈跳視窗設定

http://youtu.be/r4NFzwVOCfA

mg/507.png" border="0">

6.以類似的方法，設定置右圖片，新增類別CSS，命名為floatleft

2.替代文字中寫入：將本篇文章推薦到臉書

[IMG]http://mepopedia.com/~jinjin/web/img/511.jpg[/IMG]

3.為圖像設定類別CSS命名為iconstyle

[IMG]http://mepopedia.com/~jinjin/web/img/512.jpg[/IMG]
3>

7.Float浮動設定Right靠右對齊，Padding內[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-06.jpg[/IMG]

6.點選→行為→呼叫JavaScript

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/fb-07.jpg[/IMG]
"http://mep[IMG]http://mepopedia.com/[IMG]http://i1136.photobucketnjin/albums/n481/parkparkyang/fb-08G]

2.替代文字中寫入：將本篇文章推薦到臉書

[IMG]http://mepopedia.com/~jinjin/web/img/511.png[/IMG]

3.為圖像設定類別CSS命名為iconstyl[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/ja-001.jpg[/IMG]

2.點選→行為→開啟瀏覽器視窗，並設定，填入圖片的寬高

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/ja-002.jpg[/IMG]
g[/IMG]

��法如下

.f[IMG]http://i1136.photobucketeft{<br /> albums/n481/parkparkyang/ja-003ing-top: 20px;<br /> padding-right: 20px;<br /> padding-bottom: 20px;<br /> }<br /> <br /> .floatright{<br /> float: right;<br /> padding-top: 20px;<br /> padding-bottom: 20px;<br /> padding-left: 20px;<br /> }<br />

[hr]

二、推文按鈕的應用

現在幾乎人人臉書的時代，大家都習慣順手按推或分享，若希望自己設計的網站有更多人參訪，可以加入臉書、噗浪或推特的按鈕，並加入分享的語法，動作很簡單，請跟著以下的步驟來做：

1.插入準備好的臉書、噗浪及推特的按鈕圖片

2.替代文字中寫入：將本篇文章推薦到臉書

6.點選→行為→呼叫JavaScript

[IMG]http://mepopedia.com/~jinjin/web/img/514.jpg[/IMG]
web/img/511.png" border[IMG]http://mepope="0">

3.為圖像設定類別CSS命名為jponstyle

於CSS中加入以下語法

.icon[IMG]http://mepopedia.com/~jinjin/web/img/516.jpg[/IMG]<br /> <br /> <br /> <h3>2.點選→行為→開啟瀏覽器視窗，並設定，填入圖片的寬高</h3><br /> [IMG]http://mepopedia.com/~jinjin/web/img/517.jpg[/IMG]<br /> 、噗浪及推特的JavaScript語法</h3><br /> <xmp>//推[IMG]http://mepo到 facebook 臉書//<br /> void(window.opjp('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href))));<br /> <br /> //推到 [IMG]http://mepopedia.com/~jinjin/web/img/513.png[/IMG]<br /> <br /> <br /> <h3>6.點選→行為→呼叫JavaScript</h3><br /> [IMG]http://mepopedia.com/~jinjin/web/img/514.png[/IMG]<br /> ef)) .concat([IMG].concat('(') .concat(encodeURIComponent(docu[/IMG]<br /> oncat(')')));<br /> <br /> //推到 twitter 推特//<br /> void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent[IMG]http://mepopedia.com/~jinjin/web/img/516.png[/IMG]<br /> <br /> <br /> <h3>2.點選→行為→開啟瀏覽器視窗，並設定，填入圖片的寬高</h3><br /> [IMG]http://mepopedia.com/~jinjin/web/img/517.png[/IMG]<br /> <br /> 00%" s[IMG]p://mepopedia.com/~jinjin/web/img/513.png" b[/IMG]<br /> 3>6.點選→行為→呼叫JavaScript</h3><br /> <img width="100%" src="http://mepopedia.com/~jinjin/web/img/514.png" border="0"> <br /> <br /> <br /> <h3>7.分別複製語法後貼上</h3><br /> <img width="100%" src="http://mepopedia.com/~jinjin/web/img/515.png" border="0"> <br /> <br /> <br /> <h3>8.可以試試看成效囉，不過要上傳到網路後，才能真正分享喔!</h3><br /> <br /> [hr]<br /> <br /> <h2>三、圖片的彈跳視窗設定</h2><br /> <h3>1.點選圖片，進入行為面板</h3><br /> <img width="100%" src="http://mepopedia.com/~jinjin/web/img/516.png" border="0"> <br /> <br /> <br /> <h3>2.點選→行為→開啟瀏覽器視窗，並設定，填入圖片的寬高</h3><br /> <img width="100%" src="http://mepopedia.com/~jinjin/web/img/517.png" border="0"> <br /> <br /> <h3>3.點擊圖片後的效果<</h3><br /> <img width="100%" src="http://mepopedia.com/~jinjin/web/img/518.png" border="0"> <br /> <br /> <br /> [hr]<br /> <h2>上課影音</h2><br /> <br /> 推文按鈕的應用-類別設定 <br /> <br /> http://youtu.be/Uw6WALziK-k<br /> <br /> <iframe width="853" height="480" src="//www.youtube.com/embed/Uw6WALziK-k?rel=0" frameborder="0" allowfullscreen></iframe><br /> <br /> <br /> [hr]<br /> 繞圖排文與圖片彈跳視窗設定 <br /> <br /> http://youtu.be/r4NFzwVOCfA<br /> <br /> <iframe width="853" height="480" src="//www.youtube.com/embed/r4NFzwVOCfA?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> <!-- END TEMPLATE changes.tpl --> <!-- BEGIN TEMPLATE footer.tpl --> <div id="footer-plug"> <a href="http://mepopedia.com/forum">MEPO forum</a> is powered by <a href="http://www.phorum.org/">Phorum</a>. </div> </div> <!-- end of div id="footer-plug" --> </body> </html> <!-- END TEMPLATE footer.tpl -->