2014年2月1日 星期六

LoNote 的圖片插入

前陣子 LoNote 3.1.0 推出時,有位朋友對我說,他覺得 LoNote 很炫,卻覺得自己不太會用。就我聽起來的感覺,他似乎認為這是因為他不會 CSSHTML 的緣故。

噢不,我想這絕對有什麼誤會。因為 LoNote 本來就不指望使用者會 HTML 與 CSS




LoNote 中的確有一些可以操作原始碼的地方,不過那都是些非必要的功能。比方說,絕大多數使用者不會想去安裝外掛、不會用到包裹器、沒必要自行定義時間戳格式、無需動用進階搜尋的欄位功能……您完全不去理會這些比較難搞的地方,LoNote 也可以運作得很不錯。

不過,話又說回來了,在以上的大原則下,LoNote 之中還是有一個必要性使用難度平衡得比較微妙的部份——那就是「插入資源」這件事。

我覺得這可以稍微講講。

插入資源

這是 LoNote 中的插入資源視窗。那行密碼般的文字就是「表現格式」

插入資源,其用處在於讓使用者在筆記中插入任何類型的檔案

為了讓千奇百怪不同類型的檔案(包括文字檔、圖檔、聲音檔、影片檔、電玩存檔等),都能以最適合的方式在頁面上被展現出來(呈現為超連結、圖片、播放器等),使用者能夠而且也必須去手動指定「資源被插入時採用的 HTML 表現格式」。即使只是套用預設提供的格式,使用者也該大略明白自己選了怎樣的格式才好。

考慮到大多數人都只會用它來插入圖片,故我今天打算特別為插入圖片該用的格式,做點非常淺顯易懂的說明,作為沒有 HTML 技術背景之人的參考。

插入圖片時的基本格式


LoNote 預設的資源插入格式,其實就是為插入圖片而設計的,如下:

<img src="{THIS}" /><br/>

這條格式,可以幫您在插入圖檔時,讓圖檔正確地顯示出來。



為了讓這格式可被理解,我先把它分成兩個部份解說,也就是 <img src="{THIS}" /><br/>

其中後面的 <br/> 是換行的意思,與圖片本身無關所以不管它,我們只看前面的 <img src="{THIS}" /> 就好。



在網頁上要顯示圖片,不管是 jpg、png 或 gif,全都必須透過 <img/> 元素才能顯示[0]。不過只寫 <img/> 這六個字母顯然並不足夠,因為我們並沒有指定到底該將哪個檔案作為顯示時的資料來源

想指定資料來源,必須要在元素裏面加上 src 屬性。[1]



也就是變成像下面這樣:

<img src="1.jpg" />

上面這行,就是將「要顯示的圖檔」指定為 1.jpg 的意思。



在 LoNote 中,可用 {THIS} 取代 1.jpg,因為 LoNote 會自動將 {THIS} 替換為實際檔案的檔名,這樣一來就不用每次插入時都手動調整格式。

最基本的圖片插入就是這麼簡單。

進階的圖片格式


<img src="{THIS}" /> 是為最基本的圖片插入格式,但……或許您還想要控制一下圖片插入時的大小?



以下這行預設就有錄入,使用者可透過「插入資源視窗」中的下拉式選單來選用:

<img style="width: 500px;" src="{THIS}" />

比起一開始的基本格式,上面這行多了一個叫作 style 的新屬性,長相為 style="width: 500px;"

style 屬性中所擺放的內容正是大名鼎鼎的 CSS。這可以用來幫助我們控制「內容」的呈現方式。很明顯地,此處的內容 width: 500px; 表示將圖片的寬度強制指定為 500px 寬[2],而不是像之前那樣使用原生解析度。

其實並不難對吧?知道原理後,您還可以自由將其調整為 600px 或 256px 之類的,隨便怎樣都行。

圖片都以相同寬度插入的話,排版也會變得整齊。我覺得這在記筆記時還蠻有用的。



對於圖片插入來說,瞭解到這種程度就已經非常夠用了。如果需要更深入的語法知識,就請各位上網搜一下囉。



[0] img 是 image 的縮寫。
[1] src 就是 source 的縮寫。
[2] px 是 pixel 的縮寫。

3 則留言:

  1. 想要調整圖片,
    感覺還是要有一點HTML知識,
    不然會用得很彆扭,
    只能說還不夠親使用者吧。
    by 很努力想跳過來LoNote,卻還是止步的使用者

    回覆刪除
    回覆
    1. 可以問是哪方面的調整嗎?
      如果是大小調整的話,只要用 Shift + 滑鼠滾輪就能輕鬆調整囉。

      該不會是想旋轉色相環吧 XD

      刪除
    2. 原來滑鼠滾輪可以...
      有點尷尬,筆電用了太久,忘記滾輪的存在|||Orz
      by那個使用者

      刪除

☆每日吐嘈,有益身心☆
…不過還是請手下留情別太狠啊。