製作 TAB 頁籤選單最簡單的架構﹍純 CSS 實現技巧整理
最近有個需求是製作 TAB 頁籤選單，這功能很常見，理應沒什麼難度。然而客戶希望將來能自行編修、調整選單內容，並製作大量相關頁面，這對於不是熟悉前端程式碼、架構的人來說，要無腦編修 TAB 頁籤的 HTML/CSS 內容實在不太可能(因為這案子的選單內容區塊架構很複雜)，而且我也...
繼續閱讀全文如何製作無圓點單選、多選按鈕(Input radio+checkbox)﹍純 CSS 技巧免 JS
HTML 表單提供了基本款 input 單選功能(圓點效果 type="radio")，以及多選功能(核取方塊 type="checkbox")。如果不求版面質感的話，瀏覽器預設效果已經算實用了。 但網頁設計如果不想跟別人家撞衫，那麼預...
繼續閱讀全文免外掛實現各種複雜 HTML5 表單驗證功能﹍實作範例(電話+生日+郵件+密碼確認)
前幾年介紹過一個不錯的表單驗證外掛「 Validator 」，最近為了想增進網頁效能，研究一下能否不靠外掛就實現這些複雜功能。 由於 HTML5 已經內建基本的表單驗證功能，效果、質感都滿有水準的，那麼剩下的就是一一想辦法解決實作上容易遇到的情境。 本篇會舉例各種常見的...
繼續閱讀全文如何讓新版 Blogger 按 Enter 能建立換行符號
Blogger 推出新版後台介面後，原本我一直是手動切回舊版來操作，以規避新版介面產生的各種問題。但是前幾天官方已消滅了舊版後台，也就是強制一律只能使用新版介面，這下真的沒輒只能硬著頭皮使用。 其實這段期間以來，新版很多問題都已反應給官方，有些是有改進，但官方沒有動作的部分想必...
繼續閱讀全文Blogger 使用錨點的操作方式(新版文章編輯器)
如果不熟悉 HTML 語法的話，要製作出錨點效果不太容易。Blogger 新版文章編輯器增加了不少功能，其中「錨點」算是非常實用的一個，就算不懂語法也能實現這個效果。 本篇會說明錨點的原理，以及如何在新版文章編輯器做出錨點。 (圖片出處: hippopx.com )
繼續閱讀全文Google Apps Script 網頁爬蟲麻煩事交給 Cheerio 解決，輕鬆解析 HTML 與 XML
之前用 Google Apps Script(簡稱 GAS)製作網頁爬蟲程式，為了解析 HTML 與 XML 分別寫了兩篇心得： Google Apps Script 爬網頁資料，解析 HTML 及操作 DOM 的技巧 Google Apps Script 使用 XmlSe...
繼續閱讀全文Iframe 跨域傳值在 iOS 失效的解法﹍利用網址 + localStorage + cookie 並用
上一篇「 利用隱藏的 Iframe 跨域傳送訊息實作 」，很可惜在前端開發人員的大魔王(iOS)面前又失效了，在 iPhone 鬼打牆了很久才瞭解： iOS 禁止 localStorage 跨域傳值 iOS 的 Safari 設定中，預設關閉 cookie iOS 的 C...
繼續閱讀全文利用隱藏的 Iframe 跨域傳送訊息實作﹍postMessage
最近處理的案子需要在 A 網域登入後，同時在 B 網域一樣能保持登入的狀態。這就像登入 Google 一次後，旗下的各種服務例如 Gmail、Google Drive 等等，就算不同網域也不需要再重新登入。 實作的方式可以將登入資訊儲存在 HTML5 的 localStora...
繼續閱讀全文自訂 Input File 檔案上傳按鈕 CSS 最佳解法﹍實作範例
之前製作「 本站開放留言上傳圖片功能 」時，才發現 Input 上傳檔案按鈕還真不是普通地難搞。查了一下發現 Google 這些字串 "input type file css not working" 時會有不少案例，很是離奇。 好在最後還是找到完美的解決...
繼續閱讀全文前端開發神器 Emmet 快速上手教學整理，減少 HTML / CSS 輸入的麻煩﹍Sublime Text
網頁製作久了就會發現，手刻 HTML/CSS 挺累贅的。就像 jQuery 可以讓 Javascript 寫起來更快、不必糾結瀏覽器相容性問題，「 Bootstrap 」可以縮短網頁版面設計的時間，那麼 HTML/CSS 的輸入，有沒有快速便利的工具呢？ 「 Emmet 」(...
繼續閱讀全文H1 標籤使用圖片代替文字時, 該如何處理？
前陣子處理一個案子時，被詢問到「網站標題使用圖片的話，會不會比較不容易被搜尋到？」顯然這位讀者是具備 SEO 概念的，一般來說，網站標題會放在最重要的 H1 標籤，而且使用文字敘述。 由於 SEO 非我的專長，還是看看專家怎麼說比較保險。然而在尋找資料的過程中，發現用 ...
繼續閱讀全文讓行動版網頁能用手指縮放螢幕大小
這個「 Blogger 論壇貼文 」表示，"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站，發現的確連 WFU BLOG 也不能做到這件事。 其實在使用平板的時候，由於某些網頁字不夠大，常常需要用兩隻手指將螢幕放大。...
繼續閱讀全文線上檢查 HTML/Javascript/CSS 語法工具, 自動偵測錯誤
前陣子也許 Blogger 在測試新功能，出現了這個「 Blogger 論壇 」貼文提到的異狀，在後台編輯文章的畫面，出現 "您的 HTML 不被接受，結尾標記沒有對應的開頭標記" 這樣的提示訊息。 其實 Blogger 編輯文章時，如果切換到 HTML ...
繼續閱讀全文Blogger 多層下拉選單實作
前陣子處理一個案子，需要在 Blogger 安裝多層下拉選單，說真的這不是一個輕鬆的任務，因此值得記錄一下過程，減少日後重新摸索的時間。 一般而言，如果像本站屬於主題集中、文章數幾百篇的規模，應該使用單層的下拉選單就足夠，太多層的下拉選單對於讀者而言，其實在尋找資訊時不是那麼...
繼續閱讀全文簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除
上一篇「 CSS 提示框懶人包實作 」說明了 CSS tooltip 原理，不過懶人包畢竟無法處理各種變數，留言提出了各種異常狀況，因此本篇仔細說明不同狀態下的解決方式。 << 請注意！本篇文章含會員限定內容 >>
繼續閱讀全文CSS3 漸層語法產生器﹍計數器背景實作(1)
使用 CSS 產生的漸層效果很棒，不過這些複雜的語法參數對一般使用者而言，跟看到天書是差不多的。在這個「 Blogger 中文社群討論串 」 +綜合口味 推薦了這個線上 CSS 漸層語法產生器「 Ultimate CSS Gradient Generator 」，且 +Mark...
繼續閱讀全文[教學]將範本中的 HTML/Javascript/CSS 最佳化處理﹍優化網站效能(2)
![[教學]將範本中的 HTML/Javascript/CSS 最佳化處理﹍優化網站效能(2)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YeX4Eeairatgevp-unCp1yz3LCZogfXhswqSndqyOYk13A484GtSgeTL6h7CQOs9GyOL05atYstsniitA1SE7beLoQFeKAG-SKKM_X8jvHVfH4k_ZCchmvloZuX2VeJWJJm5STEWupli/s1600/htm-css-js.jpg)
過去寫了不少篇屬於優化網站效能的基礎知識，如果都曾讀過、打好基礎後，那麼現在可以開始挑戰實作演練了。本篇以 Blogger 範本為例，說明如何整理程式碼、讓範本最佳化，也就是能夠減少體積、執行有效率，同時又易於維護。 不過動手之前，最好先確認對 html/js/css 有基本...
繼續閱讀全文活用 HTML/Javascript/CSS 格式化及壓縮工具﹍修改 Blogger 範本的觀念 (3)
隨著範本修改次數增加、範本檔越來越肥大，從最乾淨的狀態不到 100k 直到 2、300k 的情況都在所多有(如果備份時有注意檔案容量的話)，是不是會覺得開啟範本的等待時間越來越久？也難怪網頁開啟時間越來越慢。 進入主題前先回顧一下系列文前兩篇，站長要如何不盲目地修改範本、脫離...
繼續閱讀全文[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作
![[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz7aQbHYgX9xEYlS3qL34N7c_1rCHDAwkwUcceZsJhtz6ZFHFUQ1vWMEUIwIiHRjj7VNQOq0eTMV9o-UQ7xW9_3RLqbZ0WGW8dD9oQ8YF5y1HuUv0Fc_hppPygKzNA9ZYoN5zWrXXABXRJ/s1600/go-top-on-floating-nav-bar.jpg)
上一篇「 快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計 」留言 #18 Jean Hsiung 詢問：「我對您的"↑TOP"鈕比較有興趣，這個有沒有教學?」。 為何 WFU 要將 "回到網頁上方" 的這顆 Go Top ...
繼續閱讀全文超連結 A 標籤及錨點, 你不知道的操作技巧(HTML語法)
(Pic from: elated.com ) 在所有 HTML 標籤之中，相信很多人第一個學會的就是超連結(A 標籤)語法吧！雖然超連結語法很簡單，不過其實也可以很複雜。若能了解 A 標籤的詳細操作方式與原理，可以在 SEO 上加分不少。 如果想更進一步精進網頁技巧，利用...
繼續閱讀全文
