Endless TACOJOHN

這篇其實應該在外木山這篇先發才對~~應該也算是上上篇：大直橋夕景的續集!!
這天(20070528)，偏離預定的行程，本來要到三峽老街夜拍的
不過因為這天下午的一場大雨，使得天空非常的乾淨，
跟MAX兄在MSN上討論了一下，覺得今天出大景的機率相當的大
我們就改了一下行程，鐵人三缺一：章魚約翰我跟狗狗頭，又衝了一次大直橋!!
結果，應該算碰到龜兒子吧，哈哈
天空的雲是還好，雙色溫不甚明顯，不過也許是下過雨吧，能見度很高，去拍101車軌應該很好
MAX兄也到了，還碰到老羊老師帶學生去拍，真是熱鬧呢!!

就一張而已，加減看看囉!!

首字放大，在出版業，無論是雜誌、文案或是海報都很常見。

基本上，首字放大可區分為兩種，一種是"Drop Caps"，就是首字放大，其他的文字會類似文繞圖的方式呈現。另一種稱之為"First Letter Big"，首字一樣放大，但是跟我們平常單獨調整文字的大小一樣，不會有文繞圖的效果。各有各的美，只有使用的時機不同而已。

上面指的是呈現的方式，再來依編寫(coding)的方式，我會介紹CSS Inline Style、CSS Style Sheet以及CSS First-Letter Pseudo等三種方式。依常用程度來區分Inline Style的話，如果你的文章不常用這種首字放大的效果的話，Inline Style就蠻方便的；如果你還蠻常用的，但不是每篇文章都用的話，那利用Style Sheet比較適合；如果你是重度的使用者，每篇文章都要用的話，那First-Letter Pseudo會讓你寫起文章變得更EASY囉!!

下面的範例，我會先介紹Drop Caps，把三種不同的編寫方式做個簡單的介紹；再介紹的三種不同編寫方式。

• 這是第一種呈現方式，即Drop Caps。
  我們希望首字放大約五行的話，就大約算一下，把字型大小(font-size)設定為100px，行高(line-height)設為80px。
  行高的設定會影響到該段落其他文字落在首字右方的斷行數。
  下面我們會就三種的編寫方式做分別的說明。
  
  
  
  
  1. 使用Inline Style，語法如下：
     <span style="float:left;color:chocolate;font-size:100px;line-height:80px;padding-top:2px;font-family: 標楷體, Georgia;">這</span>是第一種，直接在本文使用inline style。……

  
  
  2. 使用Style Sheet，語法如下：
     先加入下面這一段CSS
     .dropcap {
  .float:left;
  color:chocolate;
  font-size:100px;
  line-height:80px;
  padding-top:2px;
  font-family: 標楷體, Georgia;
}
     再來，當要使用時，只要在首字部份加上span、class等tag即可，如下：
     <span class="dropcap">這</span>就是利用Style Sheet實現Drop Caps
  
  
  3. 使用First-Letter Pseudo的語法如下：
     一樣，先加入下面這一段CSS
     <style type="text/css">
firstletter:first-letter {
  font-family: 標楷體, Georgia;
  color:chocolate;
  font-size:100px;
  line-height:80px;
  padding-top:2px;
  float:left;
}
</style>
     使用時，直接將整個文章內容用段落tag包起來即可，不用針對首字做tagging，如下
     <p class="firstletter">這一段利用First-Letter Pseudo來實現，不需要針對首字做個別的處理即可達成。</p>


• 再來是First Letter Big，看出跟上面的Drop Caps的差異了嗎??這種單純只會對首字做放大的效果，而不會有文繞圖，也就是首字跟其他文字的水平對齊是bottom。
  
  
  
  
  1. 使用Inline Style，語法如下：
     <span style="font-family:標楷體, Georgia,;color:chocolate;font-size:100px;font-weight:normal;line-height:80%;letter-spacing:-6px;">這</span>是第一種，直接在本文使用inline style。……

  
  
  2. 使用Style Sheet，語法如下：
     先加入一段CSS如下：
     .firstbigletter {
  font-family: 標楷體, Georgia,;
  color:chocolate;
  font-size:100px;
  font-weight:normal;
  line-height:80%;
  letter-spacing:-6px;
}
     再來，當要使用時，只要在首字部份加上span、class等tag即可，如下：
     <span class="dropcap">這</span>就是利用Style Sheet實現First Letter Big效果。
  
  
  3. 使用First-Letter Pseudo的語法如下：
     一樣，加入下面這一段CSS
     <style type="text/css">
firstletter:first-letter {
  font-family: 標楷體, Georgia,;
  color:chocolate;
  font-size:100px;
  font-weight:normal;
  line-height:80%;
  letter-spacing:-6px;
}
</style>
     使用時，直接將整個文章內容用段落tag包起來即可，不用針對首字做tagging，如下
     <p class="firstletter">這一段利用First-Letter Pseudo來實現，不需要針對首字做個別的處理即可達成。</p>

20070511，是我進公司經歷的第一次所上運動會
雖說是運動會啦，但是其實項目只有四項，分別是：籃球(basketball)、網球(tennis)、桌球(table tennis)、羽球(Badminton)
其實四項我都會一滴滴~~就一滴滴哦
籃球…高中膝蓋受傷後，廢了五成功力；專科開完刀剩三成；大學再斷腳後…剩一張嘴…
網球…國中畢業前都是打網球，跟老爸打、跟甲組的打，上高中後，老爸身體不行了，就沒再打了
桌球…史上最短命的校隊…國小被選進校隊，練了兩次球…校隊解散
羽球…我會亂打，反正…網球跟桌球都套進來，哈哈

這次…我TMD竟然報了三項比賽
籃球，一開始就跟勝宏講好要一隊比賽…加上狗頭、威儒，只練一次球…沒默契，竟然還笑想拿牌?!
網球…信聰說我報他就報…哇咧…I 挺 You，報了!!
桌球…正雄說要找我搭擋…哇咧…報了!!
就這樣…我就鬼打牆的報了三項…真是不要命了

比賽當天…
先打一場網球…跟強者我學長昀慶搭擋，他可是公司總統盃的代表呢!!強!!!
可是…第一場就碰到威儒…威儒是誰?!他就是…嘿嘿…國內排名第一…ATP世界排名前100的盧彥勳…的哥哥…兼教練
所以…熬戰到搶七…以7:5被我敗掉了
再來…恐佈的來了
連打三場籃球…而且是在打完網球沒休息，再連打三場中間不休息的籃球哦
所以…我從頭到尾都在…喘氣…沒錯…就是在喘氣
我果然老了…體力大不如前，原來…靠嘴巴不用體力，但是沒體力…會被人家電
就這樣…籃球…又被我搞砸了
再來…還沒結束呢
又沒休息…再接一場網球…
我真的不行了，腳開始抽筋了，右腳小腿先開始，接下來是右小腿前側，再接來是左大腿…只好找人頂替我出賽了
還好…桌球還算爭氣的拿了個銅牌…

其實…前面的過程都不重要啦，重要的是…這次我有幾個感想：

1. 我老了，真的老了，不像以前高中時體力那麼充沛
2. 我的膝蓋真的不行了，醫生沒騙我…我的運動生涯果然早就結束了
3. 也因為上一點，加上我平常打球時真的很怕再次受傷，我決定我要退休了，以後再也不比籃球了；就靠嘴打歡樂籃球就夠了!!
4. 任何運動都是需要長時間的練習的，我的網球中斷太久了，很多球感都消失光光了

第一次看到Lightbox的特效是在強者我同事狗頭的布洛格上看到的，當時就對它的呈現方式感到相當的驚艷、滿意!!這兩天稍微研究一下，在不更動原始碼的情況下，其實安裝根本就是無痛，三分鐘就安裝完成了!!

介紹如何無痛安裝之前，先介紹一下什麼是Lightbox好了!!
Lightbox基本上是一種在網頁上展示影像的JavaScript程式。一般我們在網頁上秀圖的方式，通常是利用該圖的縮圖當連結，當使用者點選該圖時，再連結到原始大圖的頁面做完整的顯示。而Lightbox則是利用JavaScript運用CSS的Overlay，在同一頁面展示大圖，並且淡化原有的背景內容進而突顯照片內容。

如同原作者Lokesh Dhakar在其網站所說的一樣：

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
簡單說，就是Lightbox是一個可以在所有的瀏覽器上安裝、執行的一個很簡單、低調的一種Script!!好個低調啊!!!!

利用Bookmark來做文章的共享是很多人悠遊於布洛格海的方式之一
如果讓讀者方便的能將文章加入書籤便相對的重要了，不啻也是提高讀者數量的方法之一囉!!

加入這些小圖示的方法如下：

1. 首先進入管理頁面 -> "範本"頁籤 > 修改 HTML > 並將"展開小裝置範本"選項打勾


2. 找到下面程式碼
   <span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
<!-- 書籤圖示代碼插入處 -->
</span>

   


3. 在上面的"<!-- 書籤圖示代碼插入處 -->"插入下面的共享書籤代碼
   <!-- MyShare -->
<a expr:href='"http://myshare.url.com.tw/index.php?func=newurl&url=" + data:post.url + "&desc=" + data:post.title' target='_blank' title='收進你的MyShare個人書籤'><img alt='MyShare個人書籤' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- Technorati -->
<a expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='Add to Technorati'><img alt='Technorati' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- Del.icio.us -->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add to Del.icio.us'><img alt='Del.icio.us' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- Furl -->
<a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Add to Furl'><img alt='Furl' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- HEMiDEMi -->
<a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Add to HEMiDEMi'><img alt='HEMiDEMi' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- Yahoo書籤 -->
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?ei=UTF-8&u=" + data:post.url + "&t=" + data:post.title' target='_blank' title='加入 Yahoo 分享書籤'><img alt='Yahoo分享書籤' border='0' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- Google Bookmarks -->
<a href="javascript:void window.open('http://www.google.com/bookmarks/mark?op=add&bkmk='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title))"><img src="圖示來源位址" title="Google Bookmarks" alt="Google Bookmarks" style='border:0; padding:0; padding-right: 3px;' /></a>

   


4. 儲存，打完收工，回文章頁面確認看看有無錯誤囉!!


5. 如果儲存時出現錯誤的話，請試著將上面的代碼中所有的"&"改為"&amp;"。