關於文章的配置 - 部落格

Skylar Davis avatar
By Skylar Davis
at 2009-08-10T11:56

Table of Contents

嗨,歡迎使用Blogger,這是一個自訂性相當高的部落格

在寫部落格時,會慢慢學會使用語法來排版,所以懂些HTML會很有用


*************************************************************

問題一與二都是相同的問題,都是如何在同一列插入兩張以上圖片


   文文文文文文文
   圖 圖
   文文文文文文文


使用Blogger上傳圖片時,系統會自動將圖片設成區塊(block)顯示

按下[修改HTML]看一下圖片程式碼,你會看到以下段落

<img style="margin: 0px auto 10px; display: block;
text-align: center; cursor: pointer; width: 320px; height: 240px;"
src="圖片網址" alt="" id="圖片ID" border="0" />


解答就是:將圖片語法中 display:block; 刪除就好

延伸註解:一行可以插入幾張圖片決定於圖片寬度總和,如果超過欄寬就會強迫分行



問題3.

: 我採用了blogger內建的上傳照片,它提供置中、左、右的服務
: 這樣我就可以在圖片的左右擺文字,例如:
: 文文文
: 文文文 圖
: 文文文
: 但是這樣會有兩個麻煩 - 1.文字很容易不對稱
: 2.圖片下方無法額外加文字註解


一樣是在HTML模式下解決,這次我們需要用到<DIV>這個標籤

<DIV>可以將裡頭包夾的內容形成一個區段,整個段落都是它的

Step 1/3 DIV標籤的功能

   <DIV>
    <IMG SRC="圖片網址">
   </DIV>


   文文文文文文文文
    ---------------
   | 圖 |
    ---------------
   文文文文文文文文


<DIV>像是隱形的表格一樣,將裡頭的內容用一整段來表示



Step 2/3 圖片加上註解

   我想你要的效果是像新聞網站一樣,照片搭配描述,所以你需要做的是

   <DIV>
    <IMG SRC="圖片網址">
    <P>敘述文字</P>
   </DIV>
   
   
   文文文文文文文
    ------------
   | 圖 |
   | 描述 |
    ------------
   文文文文文文文




Step 3/3 設定DIV成浮動格式,讓文字環繞在側

   圖片標籤之所以可以讓文字環繞在側,是因為你選擇了讓圖片置左、置右「漂浮」

   這等於向文字表示,「嘿,我一定會靠在這一邊,旁邊空下來,你可以排版過來」

   以上的內容以HTML表示的話就是

   
   
   <IMG SRC="圖片網址" ALIGN="*"> 註解:* 可為 LEFT(左)、RIGHT(右)
   

   在之前就提過DIV的功能是將整個段落佔據住,理論上沒有元素能夠排在同一段落內

   但我們可以設定DIV成浮動模式,讓它「飄浮」在欄位的一邊,這時文字就可以環繞


   <DIV STYLE="float:left;"> 註解:left是你想區塊浮動的位置
    <IMG SRC="圖片網址"> 註解:請將負責圖片飄浮位置的ALIGN給刪除
    <p>註解描述</p>
   </DIV>
  


   文文文文文文文文文文文文
    ---------- 文文文文文
   | 圖 | 文文文文文
   | 註解描述 | 文文文文文
    ---------- 文文文文文
   
   
=================================

如果你還有興趣,有兩件事情你可能會想知道


1. 為什麼要去除圖片的置放位置 align="*"

因為我們是用區塊(DIV)和文字排版,圖片僅需要包夾在DIV內

因此,請先將<IMG SRC="圖片網址" ALIGN="*">的 ALIGN="*"刪除

不然圖片會在<DIV>區段內繼續浮動在另一個方向

---------- 文文文文
| | 文文文文
| 圖 註解 | 文文文文
| | 文文文文
---------- 文文文文
文文文文文文文文文文


2.覺得環繞文字和圖片(含註解)區塊太近,想要留些空隙嗎

如果今天只有圖片和文字環繞(不含註解),那麼可以用

<img src="圖片位置" align="靠齊位置" vspace="水平距離" hspace="垂直距離">

但今天我們使用<DIV>排版,還是靠樣式來設定

<DIV STYLE="float:left;margin:△px ▲px ▽px ▼px;"> 註解:分別控制上右下左
<IMG SRC="圖片網址">
<p>註解描述</p>
</DIV>

文文文文文文文文文文文文文
△ 文文文文
---------- 文文文文
| | 文文文文
▼ | 圖 註解 |▲ 文文文文
| | 文文文文
---------- 文文文文
▽ 文文文文
文文文文文文文文文文文文文
文文文文文文文文文文文文文

--

All Comments

Erin avatar
By Erin
at 2009-08-11T19:20
專業
Daph Bay avatar
By Daph Bay
at 2009-08-16T06:46
+1
Charlotte avatar
By Charlotte
at 2009-08-19T10:54
Regina avatar
By Regina
at 2009-08-20T16:44
專業
Jacky avatar
By Jacky
at 2009-08-22T12:56
讚!學到了很多,謝謝!

微網誌歌劇徵歌詞 網友冷

Michael avatar
By Michael
at 2009-08-10T06:25
微網誌歌劇徵歌詞 網友冷 http://udn.com/NEWS/WORLD/WOR4/5067781.shtml 【聯合報╱編譯王麗娟/報導】 2009.08.10 02:26 am 為避免被貼上跟不上時代的標籤,英國「皇家歌劇院」決定與微網誌網站Twitter,合作 製作全球第一齣「微網誌歌劇」(Th ...

部落格有紅線

Skylar DavisLinda avatar
By Skylar DavisLinda
at 2009-08-10T02:03
用完小幫手之後,不知道為什麼,網誌上方出現紅線。 好醜哦,有辦法弄掉它嗎? http://blog.yam.com/deathwomen 我試了好久... - ...

關於文章的配置

Caitlin avatar
By Caitlin
at 2009-08-09T23:07
摸blog第二天中,還在努力地爬精華區。雖然資料很多, 但是現在面臨問題不知道該往哪一個方向去找答案的麻煩 ,有種謎底就在眼前卻找不到的困惑 囧。 我的問題核心: 不知如何讓文章中有效搭配[文字][圖片]彼此位置配置上的編排 問題一: 如果文章一直都是像這樣 文文文文文文文 圖 文文 ...

plurk裡發言「下一行」

Jacob avatar
By Jacob
at 2009-08-09T22:33
假設現在有兩段話想plurk: aaaaaa bbbbbb 因為打「aaaaaa」之後,按「Enter」就是直接發送plurk了~ 請問要怎麼讓「bbbbbb」能打在下一行呢? 謝謝 - ...

Re: PTT Blog板友簽到簿(PTTBlogRolling!)

Irma avatar
By Irma
at 2009-08-09T20:37
ID:rssai 網址:http://naturetaiwanese.blogspot.com/ 站名:台灣自然人頻道 架站環境:blogger 簡介:一個台灣青年的生活記事與心情,裡面有: 我看過的電影心得,我出差的照片,還有我水草缸的紀錄 ...