[講義05] 繞圖排文與推文按鈕的應用 1. 一、繞圖排文1.1 1.在準備好的文字中插入圖片1.2 2.新增類別CSS，命名為floatleft1.3 3.Float浮動設定Left靠左對齊，Padding內距上右下設定為20px1.4 4.將圖片設定為靠左的浮動，選取類別中的floatleft1.5 5.圖片靠左浮動，並與內文產生20px的內距，與文字產生一段舒服的距離1.6 6.以類似的方法，設定置右圖片，新增類別CSS，命名為floatleft1.7 7.Float浮動設定Right靠右對齊，Padding內距上左下設定為20px2. 二、推文按鈕的應用2.1 1.插入準備好的臉書、噗浪及推特的按鈕圖片2.2 2.替代文字中寫入：將本篇文章推薦到臉書2.3 3.為圖像設定類別CSS命名為iconstyle2.4 4.分享到臉書、噗浪及推特的JavaScript語法2.5 5.點選按鈕，進入行為面板2.6 6.點選→行為→呼叫JavaScript2.7 7.分別複製語法後貼上2.8 8.可以試試看成效囉，不過要上傳到網路後，才能真正分享喔!3. 三、圖片的彈跳視窗設定3.1 1.點選圖片，進入行為面板3.2 2.點選→行為→開啟瀏覽器視窗，並設定，填入圖片的寬高3.3 3.點擊圖片後的效果 http://mepopedia.com/forum/read.php?804,17878,17878#msg-17878 Wed, 26 Aug 2026 19:47:57 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?804,17878,17878#msg-17878 [講義05] 繞圖排文與推文按鈕的應用 http://mepopedia.com/forum/read.php?804,17878,17878#msg-17878
  1. 1. 一、繞圖排文
  2. 1.1 1.在準備好的文字中插入圖片
  3. 1.2 2.新增類別CSS，命名為floatleft
  4. 1.3 3.Float浮動設定Left靠左對齊，Padding內距?上右下設定為20px
  5. 1.4 4.將圖片設定為靠左的浮動，選取類別中的floatleft
  6. 1.5 5.圖片靠左浮動，並與內文產生20px的內距，與文字產生一段舒服的距離
  7. 1.6 6.以類似的方法，設定置右圖片，新增類別CSS，命名為floatleft
  8. 1.7 7.Float浮動設定Right靠右對齊，Padding內距?上左下設定為20px
  9. 2. 二、推文按鈕的應用
  10. 2.1 1.插入準備好的臉書、噗浪及推特的按鈕圖片
  11. 2.2 2.替代文字中寫入：將本篇文章推薦到臉書
  12. 2.3 3.為圖像設定類別CSS命名為iconstyle
  13. 2.4 4.分享到臉書、噗浪及推特的JavaScript語法
  14. 2.5 5.點選按鈕，進入行為面板
  15. 2.6 6.點選→行為→呼叫JavaScript
  16. 2.7 7.分別複製語法後貼上
  17. 2.8 8.可以試試看成效囉，不過要上傳到網路後，才能真正分享喔!
  18. 3. 三、圖片的彈跳視窗設定
  19. 3.1 1.點選圖片，進入行為面板
  20. 3.2 2.點選→行為→開啟瀏覽器視窗，並設定，填入圖片的寬高
  21. 3.3 3.點擊圖片後的效果<
  22. 4. 上課影音
這次要跟大家詳細的介紹繞圖排文和推文的按鈕設定。
希望大家能夠更徹底的了解Float:浮動，以及Padding:內距的意義，並善用Padding:內距，將文字的排版得更舒適更有設計感。

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




1. 一、繞圖排文


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




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



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

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






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






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






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






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






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






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






[hr]
繞圖排文的語法如下

.floatleft{ float: left; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; } .floatright{ float: right; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; }
[hr]

2. 二、推文按鈕的應用



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

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






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





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



於CSS中加入以下語法

.iconstyle { cursor: pointer; }

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


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

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




6. 6.點選→行為→呼叫JavaScript





7. 7.分別複製語法後貼上





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



[hr]

3. 三、圖片的彈跳視窗設定


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





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




3. 3.點擊圖片後的效果<





[hr]

4. 上課影音



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

http://youtu.be/Uw6WALziK-k




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

http://youtu.be/r4NFzwVOCfA

]]> JinJin 網頁設計與語法（HTML/CSS） Wed, 16 Nov 2011 01:16:38 +0800