[HTML5]運用網頁上的電話超連結語法(tel:),讓大家點一下就直接撥打電話

在行動時代,絕大部分的流量,都來自行動裝置,若是在手機的網頁上,看到一組電話號碼,比較合理的作法,應該是點擊一下,然後就直接透過手機撥號。  
那要怎麼寫,才能讓網頁上的電話號碼,變成可以點擊撥號的超連結呢?  
寫法很簡單,只是連結額外加上 TEL: 這個結構語法。  
我們看一下電話號碼超連結標準語法 ...full story ››

[CSS3]如何用 CSS 來改變 Placeholder 這個屬性的文字顏色

前一篇文章中,  
我們提到了在 HTML5 的規範裡,提供了一個新屬性 Placeholder。  
這個屬性很方便,不過也有一些陷阱和限制,其中比較明顯的一項,就是一般瀏覽器在顯示這個 Placeholder 文字時,預設的顏色對比普遍都太低了,不是很容易閱讀。  
所以接著我們就來跟大家分享一下,如何用 CSS 來改變 Placeholder 的文字顏色 ...full story ››

[HTML5]文字輸入欄 Input 的新屬性:Placeholder 是什麼?怎麼用?以及他的黑暗面

HTML 5 的規範裡,對於 Input 文字輸入欄位有很多新的屬性,其中有一個新屬性非常好用,但也同時有很多陷阱,一旦用不好,反而會產生更糟的使用者體驗,這個新屬性就是:Placeholder。  
為什麼說他非常好用,但又有很多陷阱呢?  
今天我們就來跟大家聊一聊這個新屬性的用法和應該留意的幾個小點 ...full story ››

[htaccess] 2種禁止網站圖片被別人外連盜圖的方法,同時又不會檔掉 Google 圖片的搜尋

當你的網站上圖片、影片越豐富,那麼就越有可能被別人盜連,辛辛苦苦的替別人做白工。

 

什麼是盜連呢?  
就是說,總是有那樣一小群人,為了增加自己網站的內容,就四處抄襲,看哪裡有好文章,可以增加他們的流量,那偷文也就算了,最可惡的就是連網頁上的圖片路徑都不改,原封不動的複製過去,這樣就等於把我們的網站當成她們的圖床,不進偷圖,還偷流量。 ...full story ››

[RWD]如何使用 Mac 上的 Safari 開發者工具,偵錯或微調 iPhone 行動版的網頁

設計 RWD 響應式行動網站,在完成第一階段的設計後,免不了的要直接在手機上測試,看看有沒有任何問題,可是如果要偵錯或是微調,改一個小東西,就得來來回回的在桌面上改寫存檔,再用手機 Refresh 瀏覽器一次重新查看,沒改好,再來一次....讓整個工作過程都充滿了火氣 XD  
難道在行動版的網頁,就不能像桌面版的頁面一樣,可以直接用瀏覽器提供的『開發者工具』,立即同步的來 Debug嗎? ...full story ››

[CSS3]如何重新定義 HTML 中換行標籤 BR 的樣式或是直接把BR的行距高度移除

如果開啟任何一篇網頁的原始碼,一定也會發現,原始碼中出現最多的標籤,絕對也是 <br />。  
一般來說,連續的換行標籤,在瀏覽器上是看不出差異,就跟打一個 BR 是一樣的,可是其他的情況,就會產生額外的行距、高度或空白區間,在樣式上就很難處理。  
有什麼方法可以去掉這樣的額外高度嗎?就是如何讓 BR 變成一個沒有實際作用的標籤呢? ...full story ››

如何在 Google Docs 文件中建立信封尺寸的範本或不同大小的紙張設定

Google 文件裡面,開啟頁面設定,Google 預設的紙張大小的選項,就只有11種尺寸,也就是常用的 A4, A5, B4, B5 這些。  
可是如果要打一個信封的話,那就得要用一些很古怪刁鑽的版面調整方法,才能順利的列印出標準信封的尺寸。  
難道沒有一個什麼好方法,可以建立一些常用信封大小的紙張尺寸呢?  
...full story ››

[Google Maps]奇怪,Google 地圖導航的藍色箭頭方向消失了,我又動到什麼啦?

朋友的 iPhone 不知道為什麼,Google Map 的箭頭方向消失了,雖然他拿著手機晃來晃去,Google 地圖上的藍點點也會象徵性的動一動,但是就是無法顯示方向性,只剩下一個淡藍色的大圈圈,包圍住那個小藍點。  
很奇怪耶,你看你看,是不是,導航用的那個藍色小點點不是應該有一個顯示方向的那個扇型一樣的箭頭嗎?怎麼又都沒有了...還是我又動到了什麼功能嗎...  
沒錯,  
的確是動到了一些設定,才導致這個 Google Map 藍點失去指向性的箭頭,我們接著來幫他修正一下吧 ...full story ››