2010年9月30日 星期四

【css】文字陰影應用

在逛別人網站時應該常常會看到在文章標語加上"文字陰影",適當的陰影位置及陰影暈開程度能使文字有效的提升讀者注意力,也為網站增添幾分美感。


若以css來表示文字陰影的方式也十分簡單,僅需短短一行字就能製造出漂亮的文字陰影效果,且不受超連結影響,照樣能做出美觀的陰影字。


 


語法:


text-shadow:1px  1px  1px  #000000;


解釋:


 


text-shadow


照字面翻譯的意思就是"文字影子",也就只需這短短一行以及後面的參數即可塑造出陰影效果。


 


1px  1px  1px


px這個單位就是指"像素",為長度單位。


其中三個1px分別是定義"陰影距離文字最左方多少px陰影距離文字最上方多少px陰影的暈開程度"。


 


#000000;


此則是定義該文字陰影的顏色建議若文字為黑色,陰影則選用灰色系(#999999)會較為美觀。


(色碼表參考:http://rhinejo.myweb.hinet.net/home/color/color-cord.html)


 


都將語法改換成自己所要的規格後即可將它放置於欲增加文字陰影的文字css內。


(放置於body{}內會使網站所有區域的文字皆改變。)





EX:


text-shadow:6px  6px  3px  #999999;








text-shadow:6px  6px  20px  #999999;






***IE可能無法顯示文字陰影效果***


 




2010年9月23日 星期四

Blog優化三要素

第一印象往往是一個讀者會不會再來第二次的重要關鍵,假若對該Blog的第一印象不好,想必也就成了拒絕往來戶了,第一印象一般則取決於"網站速度、內容與版面設計"


 


網站速度


前言:


一般會受到Blog平台(如:Xuite、Blogger、無名小站、樂多日誌與痞客邦...等,不勝枚舉)網路的速度快慢而決定,所以較難掌控速度,,而有些則是自己架站,當然速度也是取決於FTP空間的速度了。


 


分析:


那既然速度都受到Blog平台與FTP空間速度的牽制,當然就得從"網站內部"來做優化,建議能到Pingdom Tools測試出拖慢網站速度的元凶,以利處理。


 


優化:


圖片優化


Blog內盡量以"靜態"為版面設計會較為理想,"Flash與GIF動畫圖檔"會小拖慢站速度,若以"JPG圖檔""GIF動畫圖檔"作為比較,JPG圖檔是指"單張""壓縮"過的圖片格式,則GIF動畫圖檔"多張"做成動畫類型的圖片檔案,雖說GIF動畫圖檔也只是一個檔案,但你可有想過,它之所以會變換圖片即是因為它內涵"多張"圖片檔案才有辦法做成動畫模式,也就是說一個GIF動畫圖檔的大小可能是JPG圖檔的幾倍大。

以及圖片(包括Flash)也是能省就省,每一張圖片都會使得電腦得去讀取更多物件將它們下載到網際網路暫存區,也就會耗費更多的時間,Flash及圖片即是指"時鐘、計數器、網站Banner(Logo)與友站連結(圖片類型)...等。


 


語法優化


網頁設計時也應將各個物件放置於不同的Table(表格)內,假若把很多物件都放置於同一Table則會造成"感覺上"速度減慢,為何稱"感覺上"呢? 由於單一Table內設置就是要"全部物件皆讀取完畢"才會顯示出來,如果在單一Table內放太多物件,就需等較長的時間才能看到顯示出來的結果,所以在"感覺上"也就會比較慢了。


也能以語法構成的物件來取代大量的圖片類型物件,能微幅使網站速度加快,如:圖片超連結能改以按鈕方式呈現,網站Banner(Logo)也能以文字呈現。




內容


前言:


基本上內容會大幅的影響讀者對該Blog的感受,其所指的內容為文章的內文。而內文若都以小的跟螞蟻一樣的字體呈現的話,相信會使讀者感到極大的不便,以及內文也能以改換顏色、加畫底線...等方式來做重點的突出,以便讓讀者更容易理解其內容。


 


優化:


文字優化


文字部分就使以"大小、顏色、下畫線...等"較為重要文字大小(語法:<font size="10">文字</font>)當然是得適中,不得太大也不得太小,且必須考量到周圍字體與內文字體大小的差距,若一下使用30pt的字體,一下又使用5pt的字體,也是會使文字有些突兀,以及字體過大有時會造成黏在一起的情況,建議是在"重要段落"的部分使字體加大,亦能改換顏色使其更為明顯,則"重要文字"部分亦可增加下畫線(語法:<u>文字</u>)改換成紅字(語法:<font color:"red">文字</font>)等鮮豔顏色使其更為顯著。


 


圖片優化


相信許多讀者在看文章時都是先注意圖片再看內文的,筆者也是有這麼一個習慣,但往往此種閱讀習慣會使讀者錯失了重要的內文,當然圖片也是不可或缺的。建議能在圖片中加入文字附註使讀者能邊看圖邊看內文,達到一舉兩得的效用,且此種閱讀方式更容易使讀者理解其圖片與內文所要訴求及表達的。


圖片與文字也相同,大小都需要適中,避免使得圖片就占滿了整個版面,甚至蓋掉內文。而且也建議能將圖片先壓縮並縮小再上傳至速度較快的圖片存放空間,以利讀者觀看。




版面設計


前言:


版面設計的人性化與否將會造成讀者對第一印象的重大改變,實際上"版面設計"是非常籠統的,泛指Blog的排版,游標樣式、文字樣式、圖片放置以及各個物件的設置...等。那若講到便利性就得從最基本的"排版"開始說起,由於許多Blog平台的預設樣版都是格友自己投稿的,設計得也都別具特色,但在設計時想必會參考參考別人的樣板,也就形成了一種"慣性",譬如說網站Banner(Logo)就會擺在網站上方的顯眼處,文章就習慣放在中央位置,假若排版與大家較不相同則會造成讀者的無法適應,所以也是相當重要的。


 


排版:


在大家的習慣下Blog的排版逐漸發展出具有"慣性"樣式的風格,也就是說要將網站的排版與多數人盡量相同,當然也要從中走出自己的風格但又兼具便利性,這也是其中的難度。非常典型的Blog排版基本上就是將"網站Banner(Logo)置於上方顯眼處、文章置於中央方便閱讀、有左/右側欄位放置各個物件",當然這並不是定律,些微的改動並不會影響整體便利,但重要的就是"讓讀者能方便閱讀"。則"美化"部分又容易與"網站速度"互相衝突,往往一些酷炫的元件都是會拖慢網站速度的,那若要在其中取得平衡,建議能將多數美化以語法來做取代與更改,這樣能小幅減少網站的資源耗量。


***建議省下多餘的設計,營造"簡單舒適"的網站版面給讀者。***


 


游標:


雖然游標的準確度、速度皆取決於滑鼠,但許多Blog為了追求設計感而改換游標,當然些微的更改並不會造成不便,但若將滑鼠的手勢都更改掉則很難辨識出該文字是否為超連結,以及改換游標也將讓網站速度些微的減慢,建議還是以電腦本身預設的游標即可,不要多做更改。


 


小結


總歸以上所提出的要點,其實就是希望能將網站盡量朝向"簡潔"的方向做優化,一方面能使讀者一目瞭然,又能加快網站速度,可說是一舉兩得。


2010年9月17日 星期五

【遊戲】小綿羊回家記-Home Sheep Home

最近幾天凡那比颱風侵台,相信許多人為了安全都是守在家裡,而"遊戲"就是一個殺時間的選擇。


Home Sheep Home是一款考驗你運用小綿羊能力的益智遊戲,其畫面是由泛黃的羊皮紙做底並以淡淡的水彩風格繪製出三支小綿羊與各種不同的地圖情境,就連配樂都很講究,整體感覺很有風格。


故事主軸是三隻小綿羊為了要回到自己家中而展開了一連串的冒險,主角一共有Shirley、Shaun、Timmy三隻小綿羊,以Shirley體型最大,Shaun次中,Timmy最小,意義就是要你善用牠們的體型與靈活度來突破各個關卡


 





 


Home Sheep Home:http://www.shaunthesheep.com/games/homesheephome/




How to play?


操作介面十分簡單,左上角有RETRY(R)能讓此關卡重來,右上角能切換三隻不同的小綿羊,以及可以運用各個關卡內所有的道具,有時也需要讓小綿羊堆疊才能幫助牠們返家。


一共有十五個關卡,大家就自行去體會其中樂趣吧!


***皆以方向鍵控制小綿羊***






 


2010年9月16日 星期四

【遊戲】測心術與剖析

在網路上遊蕩時意外發現一個名為"測心術"的網站,就是一個自稱可以得知你心中在想什麼的有趣玩意。



測心術:http://www.vigor.idv.tw/test/%E6%B8%AC%E5%BF%83%E8%A1%93/%E6%B8%AC%E5%BF%83%E8%A1%93.htm




How to play?




進入網站後那詭祕的藍色背景與邪惡的粉紅色字體令人毛骨悚然,廢話不多說,按((開始測心))來看看它的厲害吧!





 


測心術全程皆是以視窗方式給予提示,只需點選確定繼續體驗那被測心的感受即可...







剖析-它是怎麼辦到的?




當然,今天就要來解析(其實我研究了好一陣子才解出來...)這個測心術,是怎麼辦到的。


首先把題目都列出來。












再將它很簡單的以算式呈現就會更清楚了。


χ+16+24-23+3-17-χ


發現了嗎? 關鍵就在"現在再減掉你第一次【默念】的號碼(-χ)"這句話,你一開始加上了這個號碼(+χ),但又減去了這個號碼(-χ),那就等於根本沒加上它,那所以答案是多少也都由題目控制了!


 


2010年9月15日 星期三

【廣告短片】最感人的承諾

此支為櫻花系統廚具的廣告短片,PO在YouTube上僅僅兩天就累積了190,000人次觀看。


雖然全長僅一分半,其內容詼諧逗趣,能讓觀看者留下極深的印象,充分達到廣告效益!




最感人的承諾(他瞭解意思後肯定很後悔...)









 


 


兩個步驟,輕鬆下載YouTube影片-LinkYouTube

由於YouTube有全球各地的使用者上傳的影片及音樂,其資源可說是非常豐富,也因此有許多下載YouTube影片的服務,其中筆者認為最方便快速的莫過於LinkYouTube


為何最方便快速呢? 假若我要下載一段影片,當你在LinkYouTube裡找到下載該影片的頁面,該網址就只是在其中加一個"link",舉例來說:


若該YouTube影片的網址是:


http://www.youtube.com/watch?v=4NgvRc3irvc


則LinkYouTube下載頁面的網址則是:


http://www.linkyoutube.com/watch?v=4NgvRc3irvc


就只是在youtube前面加上link而已,這也就大幅的增加了下載YouTube影片的方便性。






LinkYouTube:http://www.linkyoutube.com/




第一步驟


先到欲下載的影片頁面,並將該網址的"youtube"前面加上"link",即"linkyoutube",並按下Enter切換到下載頁面。







 


第二步驟


選擇欲下載的檔案格式。


一共有FLV、MP4、HD、3GP四種格式,可能有人會感到疑惑,"這好像是我根本沒聽過的格式呀?!",沒錯! 這些影片格式是偏冷門了些,不過能參考之前所介紹過的多媒體播放器來做播放。


(建議下載MP4格式。)


多媒體播放器:


多媒體播放器-KMPlayer


千千靜聽TTPlayer 繁體中文版





2010年9月14日 星期二

國字會看會寫不會打? 微軟輸入法幫你用"手寫辨識"

慘! 常常用微軟注音輸入法時,字又會看會寫卻不知道注音而打不出來?


不過在微軟輸入法裡頭有一個"輸入法整合器"能幫你解決這個問題,筆者前陣子就是要打一個"曯光"的"曯",一般我們若用唸的,不是唸ㄓㄨˇ就是ㄕㄨˇ,不過我找了半天就是不見這個日部的"曯"字。


最後就用輸入法整合器中的"手寫辨識"才辨識出它是"ㄓㄨˊ"啊!




首先將語言列顯示出來




若你的語言列不幸被使用中的圖示給蓋住了(如下圖),








請在語言列上點擊"右鍵-還原語言列(R)"





 


使用輸入法整合器-手寫辨識


 


點擊開啟"工具選單-輸入法整合器(I)"。






 



  1. 切換到"手寫辨識"(紅色框框處)。

  2. 中央可拖曳游標寫出中文字、阿拉伯數字、英文字及特殊符號...等(黑色框框處)。

  3. 辨識結果(綠色框框處)。

  4. 功能鍵區(咖啡色框框處)。





 




由於辨識效果有限,要找的字可能不是第一個,能看看後面幾個字是否為要找的字。


(將游標移至該字上方即會顯示該字注音。)





 


 




如何用微軟輸入法以"注音"打簡體字?

幾乎每個Windows的使用者都知道"微軟新注音輸入法",其廣泛應於打字,但它還能以"注音"打出簡體字相信是比較少人知道的。




首先將語言列顯示出來


 


若你的語言列不幸被使用中的圖示給蓋住了(如下圖),






 


請在語言列上點擊"右鍵-還原語言列(R)"






 


切換為輸出簡體字


 


首先開啟語言列的"工具選單-內容(P)"




 


 


 


之後切換在視窗下方有選擇輸出語言的選單列表,即選擇"簡體中文(S)



之後即可用你以注音打出來的簡體字唬唬人了,不過有些平台還是沒有簡體編碼器會產生亂碼


 


2010年9月11日 星期六

28種樣式條碼線上產生器-Online Barcode Generator

其實條碼不過就是在黑條與空白中以間距、長短、粗細.....等,來做為文字與數字的辨識。




因條碼原理簡單,它的的應用就也十分普及,在便利商店結帳時店員只要拿著刷條碼的機器"嗶"一聲就能讓收銀機顯示出貨品的價格,那若沒有"條碼"這個東西呢?


那一個店員可能需要記得數百種商品的價格才能為你結帳。


現在SmartPhone也日益普及,也因在手機上寫字較為不便,所以也有不少條碼能在手機見到,其中Android系統就有數十種提供刷條碼的軟體,由此可見條碼也在SmartPhone上普及應用了!


Online Barcode Generator就是能在線上幫你製作條碼,將文字或數字藏在條碼內。




Online Barcode Generator:http://www.morovia.com/free-online-barcode-generator/






設定條碼



  1. Barcode Format:條碼樣式,一共有28種可供選擇。

  2. Data:該條碼包含的文字/數字(刷取的文字/數字)。

  3. X-Dimension:條碼線條的粗細(橫向)。

  4. Bar Height (in mils):條碼線條的長短(縱向)。

  5. Rotation:條碼方向。

  6. Show Human Readable Text:是否顯示條碼所包含的文字/數字,若不顯示則需刷取過後才能得知。

  7. 設定完畢後點選"submit"提交,即會於上方顯示完成的條碼。








下載條碼


於條碼上點擊右鍵-圖片另存新檔(V)即可下載。




 


2010年9月8日 星期三

簡單三步驟,訂閱【無中生有】

訂閱【無中生有】


 


第一步驟


先至http://blog.xuite.net/jason_kuso/kuso/rss.xml此RSS網址選擇以"即時書籤"方式訂閱,並點選立刻訂閱。




 


 


第二步驟


之後即會出現即時書籤訂閱,並可自行更改即時書籤名稱,之後點選訂閱。




 


 


第三步驟


最後會在上方工具列出現【無中生有】的字樣,展開後即可看到最新的文章列表。




2010年9月7日 星期二

解決被不肖網站綁架問題-金山急救箱 v3.2

先前所提到的【Firefox附加元件】封殺肆無忌憚的網頁廣告-Adblock Plus


是解決Firefox"廣告問題"


防止的廣告類型多半是對岸的彈出式廣告,而這次要解決的則是"電腦綁架"問題。


大部分人碰到的問題都頗簡單,可能只是"首頁"被綁架,而且多數針對的都是IE瀏覽器。


不過筆者最近被一個名為"淘寶網"的不肖網站"綁架電腦",當然沒有嚴重到真的接管監視你的電腦,它只會在你的桌面與下方工具列丟一個icon,有些人可能認為那沒什麼,刪掉就好,不過問題來了,它既然稱之為"綁架"就肯定有幾分本事,即使你現在刪了,重開機後,沒錯! 它又在你面前了。


且還會綁架瀏覽器首頁,針對的是IE與Firefox,Google Chrome就沒有遭殃,不過它綁架首頁的方式不是強制性改變你的首頁,而是製作一個"假icon",意思是長得一模一樣的IE icon卻有"兩個",正牌icon連結到的就是你本來所設定的首頁,假冒icon就會連結到被綁架的首頁,即使你把假icon換回來,但每次重新開機都會再次取代掉它。


網路上多半介紹的是從Windows內去解除綁架,不過個人覺得太繁雜了,且未必有用,所以個人推薦一個名叫金山急救箱的對岸安全性軟體,對岸手法還是對岸人比較懂的破解,此軟體可確認無毒,只要你是從它"官網"下載即可安心使用。





金山急救箱:http://www.duba.net/jijiu/index.shtml




安裝


(註:部分電腦安裝時會呈現亂碼狀態皆屬正常,安裝過後一般就會正常了)




點選"下一步(N)"繼續安裝。





 


 


接受授權協議書,並點選"下一步(N)"繼續安裝。





 


 


選擇是否安裝另外兩個安全性工具,並點選"下一步(N)"。





 


 


選擇欲安裝到何處,並點選"下一步(N)"。







選擇是否開啟金山急救箱,並點選"完成(F)"。





使用


 


掃描電腦


金山急救箱的掃描有分"一般掃描"與"擴展掃描"。


擴展掃描是指深度掃描,能更精細的抓出木馬,但耗時較久。


不過使用一般掃描的抓毒其實已經很強了,個人建議不需要開啟擴展掃描。




 


 


 


掃描中途會在介面內顯示進度、發現威脅數及每個掃描重點的進行度。



 


 


 


清除威脅


掃描完成後即會列出威脅清單,點選"立即處理"將威脅清除。


最後重新開機即可脫離綁架。





 


 


一般金山急救箱都能很有效的清除掉木馬、修復系統及IE,除有些情況是"電腦病毒"所造成的,可能就得安裝防毒軟體來清理,必要時建議重灌。



防毒軟體:免費中文版防毒軟體-AVG v9.0.851


2010年9月4日 星期六

何謂高級廣告?! 請看【獵人X熊】!

YouTube上有個獨具趣味的廣告-獵人X熊


為何叫"獵人X熊"呢?


其實它是一個互動式的廣告


片頭設計的就十分有趣,但...片頭有趣有什麼意義?!


真正精彩的是獵人能與熊互動,而且是由""來決定他們的互動!




獵人X熊:http://www.youtube.com/user/tippexperience




How to play?


獵人會拿在一旁的"立可帶"把 A hunter shoots a bear


改成 A hunter ______ a bear






那意思就是要你"填上"那空格!


你能使出生平所學的任何一個英文單字都來測試看看!




當然,如果你輸入了一些不妥的詞彙,它是無法給你看的!






也或者你輸了太過深奧的詞彙,它無法辨識,即顯示Error #404





它所收錄的詞彙對應短片是非常非常多,有興趣的人可以拿出英文字典慢慢試....


 


 


 


 


 


提供多到數不清種的免費字體下載-ShowFont.net

ShowFont.net這個網站提供了上萬種免費字型下載




且能在網路上瀏覽,也有照A~Z排列和TOP 100,讓你不會找得眼花撩亂


無論是中規中矩的字體還是歪七扭八的字體都能找得到


甚至連我根本看不出來那是字體的字體都有- -"




下載


 


ShowFont.net網站介面








可由上面的A~Z排序處和TOP 100觀看字體








找尋到要的字體後即點選該圖片,並輸入驗證碼下載


個人覺得ShowFont.net的敗筆就在於此,要輸入驗證碼實在太不人性化了!







安裝




先將下載回來的字體解壓縮


再把.TTF的字型檔複製






貼上到C:\WINDOWS\Fonts資料夾裡


如此一來字型就能使用了!