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

Blog 的興起有幾大原因：
　
‧不需要花錢去租 Hosting、頻寬、流量
‧不需要花錢請人寫程式，就可以擁有還不賴的各種功能
‧不需要學 HTML ( 大半是正確的，但有時這有點騙鬼 )
‧貼圖文很省工 ( 大半是正確的，但有時這也有點騙鬼 )
　
只要是程式，就一定會有一堆的功能，同時也有一堆的限制
Blogger 是程式，故有一些功能，也一些有限制
Blogger 同時是免費的 Hosting，故更有限制
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
先來看看 Blogger 如何省工：

‧假設您有自己的 Hosting ( 虛擬主機 )、自己會編製網頁、自己上傳檔案、…
‧假設您以 HTML + 圖檔來寫日記，每天一篇
　
　
好了，問題來了：
　
‧第一天寫的最沒問題，就只有一篇
‧第二天寫的擺在第一天的上方，但是寫好後，連同第一天的所有檔案都要重新上傳
　( 中間只要打錯一個字，就要：改正 > 存 HTML 檔 > 上傳 )
‧第 N 天 .... ( 同上，所有檔案都要重新上傳，還不能打錯字 )
‧第 N+1 天必需分頁 ( 譬如每個月一大頁 )，可能又要大改與上傳所有檔案
‧……
　
靜態網頁的缺點就是檔案愈多就愈難 maintain ( 如分頁與分類會整死人 )
所以有程式與資料庫的配合 ( 如 Blogger )，就可以不用花時間去理會這些細節
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
再來看看 Blogger 如何貼圖：
　
要上傳圖檔與貼圖，就要按紅框的圖示

↓　↓　↓　↓　↓　↓　↓　↓

　
1) 上傳圖檔 ( 按了以後，只要指定到您硬碟中的圖檔即可 )
2) 可以上傳一個以上的圖檔
3) 選擇圖片大小 ( 俺一般只選大 )
4) 版面配置 ( 俺不喜歡「左」、「置中」、「右」，故選擇「無」 )

設定好了以後，就完成了上傳圖檔
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
上傳圖檔後，會在 張貼 > 修改文章 >「修改 Html」文章欄位的第一行塞入：
( 如果是 張貼 > 修改文章 > 「撰寫」，就會在第一行看到圖檔，且不易再編輯)<a href="縮圖URL"><img id="一堆字" style="CURSOR: hand" alt="" src="大圖URL" border="0" /></a>
‧id="一堆字"　一般都用不到，故暫表不提
‧style="cursor: hand"　游標會變成手指狀
‧alt=""　說明文字，可填可不填
‧border="0"　去掉圖檔的藍框
‧<img />　img ( 圖檔 ) 與 br ( 換行 ) 的語法，常常也會在後面加上個斜線
　
請務必看懂上述的示意 ( 已簡化以利於敘述 ) 語法，因為當您貼圖時，語法會更長 ....
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
來，看看 Blogger 貼圖與如何地整人 ( 限制 )：【上傳一張 1000×1085 pixel 的圖檔】
　

　
Blogger 上傳圖檔後所產生的語法為：( 即 <a><img></a> )
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK17WTg_wDuKW7XhalzAgt7ohfYkecGEzNfmspjop_3D6XLpoY9BAwOZT8Ls7TOrIHC3geAYkq7eMDvaWC7Y7RYXjSkWAW1hdJR3O-mLdZpYg11tKjCPVzRN0KNRS2Nd4Okb0rOL_xjPw/s1600-h/007.jpg"><img id="BLOGGER_PHOTO_ID_5035770019242873890" style="CURSOR: hand" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK17WTg_wDuKW7XhalzAgt7ohfYkecGEzNfmspjop_3D6XLpoY9BAwOZT8Ls7TOrIHC3geAYkq7eMDvaWC7Y7RYXjSkWAW1hdJR3O-mLdZpYg11tKjCPVzRN0KNRS2Nd4Okb0rOL_xjPw/s400/007.jpg" border="0" /></a>
　
第一、在縮圖 ( 也就是年在頁面上看到的這張圖 ) 上 Click，會原地切換頁到大圖
　　　若是要彈出另一個視窗，則需在 <a …> 中加上 target="_blank"
　
第二、游標移進縮圖，並沒有文字說明
　　　若是要文字說明，則需在 <img … alt=""> 中的雙引號裡加上文字
　
第三、其中大圖的 URL 為：
　　　http://4.bp.blogspot.com/_1MeHkgeO1Ug/ReQ6hd-IlHI/AAAAAAAAAOU/
　　　emwVnJarI64/s1600-h/007.jpg
　　　若是想把大圖嵌入到 Blogger 的頁面中，套用 <img src="URL"> 是無效的：
　　　這就是 Blogger 的限制 !!
　
　　　因為若不限制， 大圖會超出 Blogger 的文章區：
　　　‧輕則大圖超出文章區的部份會看不到
　　　‧重則大圖會撐破文章區，導致整個版型亂七八糟
　
　　　所以 Blogger 都預設文章區內的圖檔，寬度最多只能是 400 pixel
　　　這一限制的好意也導致了所有 user 即令自行修改 範本 > 修改 HTML：
　　　加寬文章區的寬度，也一樣無法直接嵌入大於 400 pixel 的圖檔
　　　
　　　那麼天下無敵的【火星人】是否有解 ?!
　　　Of Course ! Certainly !! Very Sure !!!
　　　^++++++++++++++++++++++++^

　　　而「範本 > 修改 HTML 」大改 Blogger 版型之技巧，之後會有一系列的文章
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
當俺上傳 1000 pixel 寬的圖檔後，啥都沒就是有錢的 Blogger ( Google )，就....：
　
URL：<img src="…/s200/007.jpg">

　
URL：<img src="…/s400/007.jpg">

　
URL：<img src="…/s800/007.jpg">

　
URL：<img src="…/s1600/007.jpg">

　
　
看懂沒 ?!
發現俺天下無敵沒 ?!
　
在圖檔那一長串的 URL 中，有著 s200 / s400 / s800 / s1600 不同檔案夾之別
也就是說，當俺上傳了一張 1000 px 寬的圖檔之後
Blogger 把這張圖存成 4 種不同大小不同的圖檔：
‧200 px 以內一張 ( 放在 s200 的檔案夾中 )
‧200～400 px 一張 ( 放在 s400 的檔案夾中 )
‧400～800 px 一張 ( 放在 s800 的檔案夾中 )
‧800～1600 px 一張 ( 放在 s1600 的檔案夾中 )

因為 Blogger 文章區的寬度多半都預設為 400 px 或再多一點
所以 s400 就是縮圖 ( 只要是大於 200 px 的，一律都以 s400 當縮圖 )
按了 s400 的縮圖後，彈出網頁的圖檔則為 s1600-h
這 s1600-h，限制為只能在彈出時觀看，不能嵌入到文章區
但是 s1600 則可嵌入到文章區 !!
( 1000 px 的圖，屬於 800～1600 px，放在 s1600 的檔案夾中 )
　
故俺上傳那張 1000 px 寬的圖檔後，Blogger 至少存成 5 種大小:
‧200 px 以內一張 ( 放在 s200 的檔案夾中，可內嵌到文章區 )
‧200～400 px 一張 ( 放在 s400 的檔案夾中，可內嵌到文章區 )
‧400～800 px 一張 ( 放在 s800 的檔案夾中，可內嵌到文章區 )
‧800～1600 px 一張 ( 放在 s1600 的檔案夾中，可內嵌到文章區 )
‧彈出網頁 ( 放在 s1600-h 的檔案夾中，不能 內嵌到文章區 )
　
　
Blogger 雖然很大方一次就把一張圖存成各種不同的大小
而且在開一個空白的網頁後，把圖檔的 URL 貼入網址欄也都能看圖
但若是要在自己的論壇嵌入上傳的圖檔：
‧s200 ～ 1600 的圖可以嵌入
　但是很奇怪：refresh ( 重新整理 ) 後就不能看圖了
　不過在圖上按右鍵 > 顯示圖片，就又能看了
‧s1600-h 的圖，則完全無法嵌入
　
搞懂 <a>、<img> 與 Blogger 對於圖檔的一檔多存與限制
日後在 Blogger 的文字鏈結、圖檔鏈結與內嵌圖檔，就再也難不倒您了
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::: 這是分段線 :::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
當您嵌入 Blogger 的圖檔不是很清楚 ( 清晰 ) 時
可藉由把 s400 改成 s800，馬上就會獲得改善：

s400

　
s800