網友問，曾堯角落的照片是如何排版的？
答：用笨方法。
我上網歷史很長，且一開始就有自己的網站。那時候，寫網頁沒什麼軟件或排版工具幫助，做網頁，只能自己寫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。必須重申，我的排版法，屬“土法煉鋼”，可行，但落後且有點笨。
沒有留言:
發佈留言