2013年3月15日 星期五

MLB官網「小虧」一下兄弟象

拉米瑞茲加盟義大犀牛的照片被MLB官方網站刊登,順便虧了一下「兄弟象」的隊名:
大聯盟官網說15個棒球隊名字很怪,其中第8個出現台灣的職棒「兄弟象」隊,而且還用Google搜尋得到以下圖片,我實際使用搜尋,發現是還蠻正常的,證明象隊的資料是很多的,可能是作者的「地理位置/系統語言」影響了他的搜尋結果。


Google搜尋網址在: 這裡
Google圖片搜尋網址:這裡
象隊網址在:  這裡
原文網址在:  這裡

當然了!大象是既聰明又可愛的動物,各位象迷您說是吧!

搜尋結果:
圖片搜尋結果:



CSS精靈(css sprites)實做練習


網站SEO過程中有個步驟要加快網站載入速度的方式,作用原理其實是讓細小檔案變成單一圖檔,就是目前應用相當廣的[css精靈]方式,許多大型網站也都有用到,實做方式相當簡單,我們用幾個步驟來簡單說明:
首先,要準備小圖的圖片堆疊,像是這樣:



 把這張圖轉出放置到資料夾內:

再來就是準備要用上哪張圖片的定位方式,以下我用ps說明:
1.先找到圖片的長寬
按住Ctrl鍵點下該圖片的圖層,圖片會被選取起來


在[資訊面板]裡可以看到圖片的大小是


2.選單:編輯/任意變形(Ctrl+T)
此時在[資訊面板]的控制列會出現這張小圖的位置資訊,這樣一來我們就可以在網站裡利用css取用這張圖了!


接下來就是運用css讓他呈現:
假設你要把這圖當成圖形用:
span.pic0001{
    background: url(../img/css-dot-1.png) 0px -65px; /*加上座標*/
    width: 70px;   /*寬*/
    height: 25px;  /*高*/
    display: inline-block;  /*把span更改成「行內區塊」模式*/
    vertical-align: middle;  /*垂直居中,依照實際排列方式使用*/
    text-ident: -9000px;  /*讓內部文字不見*/
}
取用的方式:
<span class="pic0001">圖片1</span>  <!--"圖片1"建議要加上去,比較好識別!-->

如果是要當成按鈕的:
a.bt001{
    background: url(../img/css-dot-1.png) 0px -65px; /*加上座標*/
    width: 70px;   /*寬*/
    height: 25px;  /*高*/
    display: inline-block;  /*把a更改成「行內區塊」模式*/
    vertical-align: middle;  /*垂直居中*/
    text-align: center;  /*按鈕內文字居中*/
    color: #fff;  /*文字顏色*/
    font-size: 0.8em;
    line-height: 25px;   /*讓文字垂直也居中*/
    text-shadow: 0px 0px 2px #333;  /*文字加上陰影*/
}
取用的方式:
<a href="http://www.....tw" class="bt001">送出</a>

按鈕加上浮起效果,可以加上這段:
a.bt001:hover{
    background-position: 0px -90px;  /*更改圖片位置*/
}