Blogger 貼文 ( 3 of 6 ) 貼圖 1/3

所有 Blog 系統在貼圖上，都很難做到 userfriendly
這是因為 Blog 天生就受到很多限制：
‧自己寫網頁可以不受限，但是 maintain 很麻煩
‧Blog 沒啥 maintain 問題，也可以不用學 HTML，但是貼圖就會受限
不同的玩法就會有各種不同的限制，Blog 貼圖雖然有點不順暢，但習慣就好了
( 比起 Blog 提供的很多優點而言，縱貼圖有點小麻煩也還能忍受 )
( 若是 Blogger 不限制內文圖檔大小的話，那版型很容易被撐破 ← 這只是其一原因 )
　

::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
第一、Blogger 假設一篇文章只有一張圖，而且圖擺在最上方
　　　如果符合這個假設，在 Blogger 貼圖文就再簡單不過了
　　　但若是超出這個假設，就要有能力自己去修改 HTML !!
　
第二、Blogger 一方面設計成讓不懂 HTML 的網友也能順利貼圖文
　　　但另一方面 Blogger 又假設使用者很懂 HTML !!
　　　與其它的 Blog 系統比較，Blogger 的自訂性高出很多
　　　但縱然是一般的網頁設計師，可能也很難掌控 Blogger
　　　某個角度來看，Blogger 根本是為工程師而寫的
　　　可是工程師多半有不懂堆媒體的編製，很多細節並不會考慮進去
　　　所以只好等天下無敵火星人來操刀了 ^+++++++++++++++^
　
第三、Blogger 假設大家都喜歡傳統平面的排版方式，故圖的擺置也很「傳統」
　　　Google 所有的服務雖然都免費 ( Adword 等廣告例外 )，但也都一樣冷冰冰：
　　　在 Google 的觀念裡，機器與軟體來決定一切 ( 如 Google News )，沒有人治 ...
　　　短期來看，沒有人治似乎是很科學的，但長遠來看就很沒人味與人性了
　　　網頁的圖檔比較適合嵌入式的，而不是彈出另一視窗來看圖
　　　Blogger 的貼圖，原則上只能貼上縮圖，原圖預設是擺在彈出的視窗中
　　　( 不過遇到天下無的【火星人】一樣有解，且待後述分解之 )
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
來做個簡單的實驗：


當按紅框插入圖檔後，會在「修改 Html」編輯欄最上方塞入類似下面的語法：<a href="URL1.jpg">
<img src="http://URL2.jpg" border="0">
</a>
簡單來說：
‧URL1.jpg 就是縮圖
‧URL2.jpg 就是 Click 縮圖後所彈出的原圖
‧而且 Blogger 還會常常加上 <div> 的語法
這對不熟 HTML 的人來說，十分困擾 .....

以下就來討論一些最基本的 HTML
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
‧URL 的學名太長了，也不好懂，但講成「網址」就好懂多了
‧Link 原意是鏈結 ( Anchor )，但現在大家也稱為「連接」等等
‧HTML 最早期的用法就是 <語法開始>鏈結用的文字 or 鏈結用的圖檔</語法結束>
　
俺儘量不講得太術語，也儘量不要太嚴謹，反正懂基本的會用即可


上圖左，如果要一個字串 ( 如：我是 Link ) 能夠鏈結，就要用語法包住它：
包住的方法是<語法開始>我是 Link</語法結束>
您一定發現語法結束就是多了個斜線 /
　

語法有很多種，從甲網頁切換到乙網頁的語法是 Anchor ( 故語法就是 <a> )
在甲網頁的文字鏈結上按一下就會切換到乙網頁的語法就是：
<a>我是 Link</a>
　

但沒有網址 ( URL ) 就連不出去，所以再加上網址的語法：
<a href="URL">我是 Link</a>
( URL 可以是一個網址，也可以是一個有網址的圖檔 )如鏈結到俺常混的地方：( 黑秀網 )
<a href="http://forum.heytalk.com/">黑秀網</a>

如鏈結到一個圖檔：( 連到圖檔 )
<a href="http://mars.lookin4.com/PS.gif">連到圖檔</a>


您可能也發現上兩例都是彈出另一個網頁
( Blogger 很奇怪地都預設是原地切換網頁，而不是彈出網頁 )
( 所以我們要自己加上彈出網頁的語法 )
只要在語法中再加上 target="_blank" 就會彈出網頁：<a href="URL" target="_blank">黑秀網</a>
(網址以URL替代，整段語法看起來才不會太長)
　　在<a>裡面增加的語法要空一格
　　如果要原地換頁而不是彈出另一個網頁，那就去掉 target="_blank" 這段語法
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
文字鏈結都完全瞭解了以後，才搞得懂圖檔的鏈結
在 Blogger 的世界裡，您不需懂太多 HTML 的語法，但至少得懂文字與圖檔的鏈結
( 當然啦，能懂 Flash 與 Video 的語法，才有助於 YouTube 等的貼檔 )
　
加了 <a> 語法後，瀏覽器就會自動加上一些動作：
‧游標移到文字鏈結上時，變成手指狀
‧文字鏈結會有顏色 ( 預設是藍色 )
‧點選過後，文字鏈結的顏色會改變 ( 預設是紫色 )
‧文字鏈結會有底線
‧……
　
上述的都是網際網路初期的辨識設定
當時能有網際網路可用就很偷笑了，所以也沒人計較這些功能
但隨著網際網路愈來愈發達，大家就開始討厭底線與預設的文字顏色了
　
本單元暫不討論上述這些細節的修改方案
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
圖檔的鏈結可以粗分兩種：
第一、在網頁中嵌入圖檔
第二、在圖檔上 Click 就可以 Link ( 原地切換頁 or 彈出網頁 )
　
　
第一、在網頁貼圖的語法為：<img src="URL" width="寬" height="高" alt="文字說明">
‧img：image，即貼圖
‧src="URL"：圖檔網址的語法
‧width：寬度，單位是畫素(pixel)，但只需填數字，不需填單位
‧height：高度，單位是畫素(pixel)
‧alt：滑鼠移到圖檔時，會彈出的文字說明
　　Blogger 的貼圖，與一般的不太一樣，但是原則卻沒變
　
先來看一般的貼圖：
圖檔不可能擺在自己的電腦裡，不然若是關機了，誰看得到 !!
所以圖檔要擺在個 24 小時不關機的機房 ( ISP or IDC ) 之電腦或是其硬碟中
租 ISP 的主機，叫做主機代管 ( Colocation )，整台電腦都可以自行 100% 控制
租 ISP 的硬碟，叫做虛擬主機 ( Hosting )，受限比主機代管多很多
不管是主機代管還是虛擬主機，所付的租金都是硬體費用，頻寬與流量都要另外計價
　
傳統的方法：
圖檔上傳 ( 利用 FTP 軟體 ) 到 Hosting，此時圖檔就有了固定的網址
↓
( 網頁檔 ( *.htm ) 也可以同時上傳，若是擺在同一個檔案夾，圖檔就可以不用路徑 )
↓
( Blog、Forum、…、等服務，不需要自己寫 HTML，故有圖檔的 URL 就夠了 )
↓
在 Blogger 貼圖 ( <img src="URL" …> ) ( 圖檔不需要 </img> 之結束語法 )

‧俺的 Hosting：http://mars.lookin4.com
‧俺在其下開了一個 _blog 的檔案夾：http://mars.lookin4.com/_blog
‧上傳一張圖檔 A001_11.jpg 到上述的檔案夾
　故圖檔的 URL 即為：http://mars.lookin4.com/_blog/A001_11.jpg
　
在 Blogger 要貼上圖的語法就是：
<img src="http://mars.lookin4.com/_blog/A001_11.jpg" width="130" height="130">

如下圖

( 通常自己寫 HTML，圖檔都要加上 width 與 height )
　

第二、前面已講過文字的鏈結：
　　　<a href="URL" target="_blank"> 我是 Link </a>
　
　　　‧若是要原地切換頁而不是彈出另一個網頁，就去掉 target="_blank"
　　　‧URL 可以是一個網頁的網址或是圖檔的網址
　
換成圖檔的鏈結也很簡單：( 把「我是 Link」這個字串換成是圖檔的語法即可 )
<a href="URL" target="_blank"><img src="URL" …></a>
　
‧若是要原地切換頁而不是彈出另一個網頁，就去掉 target="_blank"
‧<a> 裡面的 URL 可以是一個網頁的網址或是圖檔的網址
‧<img> 裡面的 URL 是圖檔的網址，別搞混了
　如果是連到一個大圖，那麼 <img> 裡的圖檔，通常就是縮圖