2013-11-04

笨方法貼圖排版

(2016-8-13 補加Google Photos全面取代Picasa Photo Albums後,幾處需要修改的部分)


網友問,曾堯角落的照片是如何排版的?

答:用笨方法。

我上網歷史很長,且一開始就有自己的網站。那時候,寫網頁沒什麼軟件或排版工具幫助,做網頁,只能自己寫html。但我一不是專業,二沒耐性,只學了最基本的html寫法,就自己製作粗糙網頁。

到如今,一切自動化簡易化,我還是活在過去,沿用舊法。缺點是慢,優點是比較能隨心所欲“排版”。以blogspot部落格為例,一篇文章,不時加一張照片,不難。但若想平排放兩張三張照片,難度就大了。

在此試試解釋我的html排版法。先不要被html這名詞嚇怕,那不過是一大堆互聯網排版指令而已。在我的排版法中,無須懂得寫html,只要弄明白最常用的一條關於貼圖的html碼就可。

--------------------

關於貼圖,你只需明白一條html碼:


這條html碼,可切成三段看:

- 第一段(即第一個<>內的東西),是連結,即點擊照片後跳到那裡
- 第二段(即第二個<>內的東西),是顯示那張圖片,及如何顯示。這是三段中最重要的一段
- 第三段(即第三個<>內的東西),html碼結尾,不會修改

用最簡單的例子說明,譬如你在某篇文看到一張圖片,希望轉貼在自己的部落格裡。除了取得許可外,技術上,就只是寫這條三段貼圖html碼:

- pic.jpg是圖片網址(後面可加上各種數值項,指定顯示圖片的大小和位置。下文詳談)

- file.html是附有該圖片的文章網址。

完成後,圖片會依指令顯示在你的部落格,讀者點擊圖片會跳到原文網頁。(假如原文只是一張圖片,別無其他,又或你只想讀者點擊後跳到原圖,而不是原文,那file.html處只須填上相同的pic.jpg即可)

--------------------

貼自己的照片呢?以往無論你是用Picasa或Flickr網存照片,都不難辦。譬如我慣用的Picasa Web Albums,每張照片,都有“Link to this Photo”功能,提供html碼。下再細分“Link”和“Embed image”。所謂Link,就是點擊以後,會離開原地跳到Picasa看圖。Embed image就是既在原地顯示照片,點擊以後也可跳到Picasa看圖。部落格貼圖,需要的是Embed image。

- Frickr的相應選項,是“More way to share”,下再細分“Grab the link”和“Grab the HTML/BBCode”

- 相較Flickr,Picasa在“Embed image”下多了兩個選項,就是“Hide album link”和“Image only (no link)”。不剔選“Hide album link”的話,每個貼圖下方會出現另一個連結,點擊後跳到Picasa看整個相簿。我一定剔選Hide。至於Image only,剔選後只能在部落格顯示圖,不能點擊跳到Picasa看大圖。我一定不剔選。

- 剔選第一項不剔選第二項,其結果跟Flickr的一樣,亦即一條三段貼圖html碼

*** Google很可恨,已於2016年8月,以Google Photos完全取代Picasa Web Albums(曾堯角落:從Picasa無痛過渡到Google Photos的願望落空)。Google Photos是手機社交產品,注重一按分享,背後是不可知的黑盒運作,對部落格貼圖障礙很大。到目前(2016-8-13)為止,Google Photos還未提供embed圖片功能。所以,過往慣用Picasa如我者,只能轉而使用Blogger的內置貼圖功能。若選取“From Photo Album Archive”,其實就是從Picasa僅餘的Archive區選取照片。假設你選取一張圖片,但Image alignment和Image size跟隨提示("None"和"Medium"),不作更改,那麼,Blogger提供的html碼跟下面以Picasa為例的html碼大致相同。 ***


選了相片大小(暫時以400 pixel作例子),Picasa提供給你“copy & paste”的html碼就是:



這條html碼,看似繁複,其實還是那三段:

- 第一段(即第一個<>內的東西),是連結,即點擊照片後跳到Picasa那個地方看圖。這部分不會更改,可以不理
- 第二段(即第二個<>內的東西),是如何在部落格顯示照片。排版時,一切改動,都在此部分進行
- 第三段(即第三個<>內的東西),html碼結尾,這部分亦不會更改,可以不理

第二段要注意的是,後面是一些排版的數值,例如你看到的height="267" width="400"。數值可更改,數值項可增加減少,都以空格分開。

若什麼都不更改的話,效果就是這樣(寬=400px,高=267px,自動左對齊):



想在同一行放兩張照片的話,那就把第二個html碼放在後面,不分行。難處就在,兩張照片的寬度可能已超過部落格正文區的寬度,那時第二張照片會自動被放在下一行。要達到所需效果,就要調較html的寬/高數值。

首先,如果你準確知道自己部落格正文區寬度的話,那會幫助很大。不大清楚的話,也不要緊,反正排版要達到滿意效果,必須經常用Preview功能(即模擬發表,看看實際效果)。工多藝熟,慢慢你就會掌握最長許可寬度。

假設,Preview兩張400px照片並排,已超出寬度的話,那就縮小照片的寬度。若你的正文區像我的一樣只有600px多點,那就把兩張照片的寬度改為300(即width="300"),將height刪去(因為Picasa會自動依300px寬顯示原比例缩圖)

- 注意:原圖可縮小,不應放大(會變得不清楚)。所以,應先在Picasa選略過大的尺寸,然後縮圖顯示。當然,缩得太小的話(譬如200px),那不如先在Picasa那邊選較小尺寸(288px)

- 捷徑:小心看看第二個<>內,會看到“s400”,那是你在Picasa選擇照片的大小。要改變大小,不一定要返回Picasa重貼html碼,只要將400改為144,288,640,或800(Picasa只提供5個尺寸選擇)即可。

把兩張照片的html碼放在同一行,刪去height,width改為250,效果會是這樣:



你會發覺,兩張照片緊貼。由於照片已有外框,緊貼未嘗不可。若堅持分開的話,只要在width後面,加hspace="x"數值項即可。hspace就是horizontal space,數值隨個人喜好,我通常選3或5,但10或更高未嘗不可。加入hspace="3"後效果會是這樣:



喜歡貼圖置中,而不是左對齊的話,就在整段html碼前加一對<>中間寫center,後加一對<>中間寫/center即可




基本功上手後,一行三圖,寬度不同的兩張橫圖,或一橫圖一直圖不難處理。

--------------------

最後一招,是一邊文字,一邊照片。也不難。

重溫一次,貼上從Picasa取得的html碼後,調整寬度width(記得刪去height),加hspace。由於這是文字與圖片的分隔,我一般用比較大的數值,但最終還是個人喜好決定。

另加兩個選項。一個是vspace,即vertical space,用來分隔照片與上下文字的行距。我通常選10。

然後就是照片放在左邊還是右邊。照片放右邊的話,加align="right",放左邊用align="left"。

html碼弄好後,緊接不分行打文字。


(補充幾句:一邊文字一邊照片的排版法雖說不難,要在所有瀏覽器-電腦/平板/手機-同樣得到理想效果可不容易。建議若文章在“一邊文字一邊照片”後還有內容的話,不使用這排版法。另,vspace="10" hspace="5" 指令以 style="margin:10px 5px" 替代較易為所有瀏覽器接受)

--------------------

html四分一世紀以來一直發展,從我學會一點點的簡單html碼,到css,到近年我完全沒跟進的html5。必須重申,我的排版法,屬“土法煉鋼”,可行,但落後且有點笨。