TShopping

 找回密碼
 註冊
搜索
查看: 553|回復: 2

[分享] 簡介文繞圖語法寫作

[複製鏈接]
發表於 2013-6-8 00:45:42 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
文繞圖就是用文字將圖片包起來的方法,在很多BLOG中也有相關的介紹,除了可以用 水平置左的方式外,最好的辦法就是使用原始碼了,有了文繞圖,可以把文字繞在圖形周圍,使BLOG的文章看起來,有點類似雜誌的寫法,甚至可以將文字與圖片之間做比較整齊的劃分,「margin」就是用在文字與圖形的水平間隔上,以「px」來表達距離單位;「float」表示著表格的對齊。如果想要將圖片與表格整合,則表格也可以用文繞圖的語法來寫作,在「超文件標註語言」(Hypertext Markup Language,即HTML語法)中,即定義了表格的語法寫作語言:<table border="0" cellpadding="0" cellspacing="0" align="center">,這表示表格的內距、間距及外框寬都是「0」,而且表格是水平置中的,那如果在語法中寫入:style="float:left;margin:7px",就表示要將css樣式寫在表格中,style即css樣式,所以style="float:left;margin:7px",表示表格會強制靠左對齊,文章內文則會在表格的右邊,並與表格呈現「7px」的間距,完整的語法為:<table style="float:left;margin:7px" border="0" cellpadding="0" cellspacing="0">,比較要 [/td][/tr]
[tr][td]THSR左營車站
注意的是位於「style」內的css樣式語法,每種樣式要用「;」隔開,而不是用「" "」或「< >」
。於是乎,文繞圖的架構就出現了,間距可以使文章的內文在排版時變得更加整齊。
  既然單一表格(即1×1)可以用文繞圖的方式呈現,那巢狀表格(即M×N;M,N≥1)也可以使用文繞圖,這樣在處理照片或圖片時,就可以不必在圖形下方加上文字,直接在表格裡面輸入即可,語法也和上列的單一表格一樣,只是表格較為複雜而已。
單表格的語法:<table style="float:left;margin:7px" border="0" cellpadding="0" cellspacing="0"><tr><td>內容</td></tr></table>
巢狀表格的語法:<table style="float:left;margin:7px border="0" cellpadding="0"  cellspacing="0"><tr><td>內容</td><td>內容</td></tr><tr><td>內容</td><td>內容</td></tr></table>
  如果把這個巢狀表格的語法套上文繞圖[1][2],效果就會如第二張照片所示,底下就可以加上照片的說明,就不用在圖片空白處加上說明,但個人簽名或浮水印仍然要打在圖片上。
註解:
[1] 表格可以在一般的BLOG編輯器中編輯,但與文字的對齊方式則要在「原始碼」中編輯HTML語法。
[2] 如果不用表格,圖片也可以在一般BLOG編輯器中編輯, 即在「進階編輯器中」的「插入/編輯影像」中的「影像資訊」進行修改,但說明就得自行用修圖軟體打在圖片下方了。

 

臉書網友討論
發表於 2013-11-13 01:09:28 | 顯示全部樓層
好阿,謝版主

版主招募中

發表於 2013-11-13 01:09:28 | 顯示全部樓層
天啊.  


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-4 11:53 , Processed in 0.060690 second(s), 23 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表