Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

如果在開發網站、應用程式或軟體專案時需要讀取中的動態圖示,UI Ball 有個名為「Loaders」網站收錄 24 種類型獨特、可自訂且輕量化的載入動態圖,Loaders 也是一個 React.js 套件資料庫,打開網站就能在線上直接預覽這些很眼熟的動畫圖,對於要取用拿去開發專案來說非常有用,也不用上網到處尋找動態圖,Loaders 所有動態圖示都有提供對應的 React、HTML 和 CSS 原始碼。

SingleFile 將完整網頁保存為單一 HTML 格式下載(Chrome 擴充功能)

SingleFile 將網頁保存為單一 HTML 格式下載(Chrome 擴充功能)

大部分的常見瀏覽器都有內建另存頁面、另存新檔功能,可以將看到的網頁保存到電腦,不過如果選擇完整網頁會發現瀏覽器其實是將所有檔案保存在另一個資料夾,像是 CSS、圖片和字型檔案等等,為了要讓網頁正常顯示,需要將 HTML 和這個資料夾放在一起才行,可能很多人覺得非常困擾吧!如果你有另存網頁的需求,可試試看接下來介紹的瀏覽器外掛。

HTML.cafe 線上即時 HTML 編輯器,修改原始碼立即查看效果變化

HTML.cafe 線上即時 HTML 編輯器,修改原始碼立即查看效果變化
Copyright : vasilyrosca / 123RF Stock Photos

現在比較少有機會從頭到尾、以原始碼編寫一個網頁,記得十幾年前剛開始製作免費資源網路社群時還沒有使用 WordPress 架站,最早的網頁就是直接用 HTML 文字編輯器寫出來,後來有了所見即所得編輯器,很多事情變得很方便,也少有機會去編寫原始碼。若你偶爾需要測試一些 HTML 內容,看看呈現出來的結果是否正確,可試試接下來的免費工具。

Brizy Cloud 免費架站工具輕鬆打造高轉換率網站,支援自訂網域名稱

Brizy Cloud 免費架站工具輕鬆打造高轉換率網站,支援自訂網域名稱

可能對很多人來說,建立網站是一件很困難的工作,如果沒有技術就必須要花錢請專業團隊幫忙設計,但後續維護管理又會是個難題,也因此有些商家或品牌就直接選擇經營社群網站平台,雖然這麼做看起來很省錢,也沒太大的技術性問題,但缺點是容易被平台綁住,對於搜尋曝光來說不如網站來得這麼有用。我會建議選擇較多人使用的架站服務,利用容易上手的所見即所得編輯器自行設計一個網頁,通常也會提供網站託管,價格不會太高。

tiiny.host 超簡單免費靜態網站空間,打包上傳 HTML 網頁檔輕鬆架站

tiiny.host 超簡單免費靜態網站空間,打包上傳 HTML 網頁檔輕鬆架站

現在時下主流的虛擬主機型態多以支援 PHP 加上 MySQL 資料庫為主,也因為很多架站程式都必須使用這兩項技術,像是知名的 WordPress,如果你要單純建立個人網站,大家會推薦你直接使用 WordPress 更易於更新或管理內容。若沒有技術基礎但又很想要弄個網站,還有像是 Weebly、Wix.com 和 Squarespace 所見即所得建站服務,可以利用拖曳方式快速將內容組合起來,變成一個看起來專業的網頁。

HEAD 網頁開發參考手冊,收錄 HTML5 在 head 可用標籤及範例說明

HEAD 網頁開發參考手冊,收錄 HTML5 在 head 可用標籤及範例說明

如果你是自行架站的網站管理者,對網頁原始碼結構應該不陌生,若以 WordPress 架設網站通常會有完整 <head> 段落,取決於你使用的佈景主題,這部份是用來描述一個頁面的相關資訊,例如網頁標題、語言、樣式表、說明、關鍵字和略縮圖等等,很多時候會透過 SEO 外掛工具產生各種常用的 Meta Tags 以擴充佈景主題不足的部分,如果你要從頭開始寫一個網頁或佈景主題,就必須知道 <head> 有那些可用的標籤。

Freebies.ByPeople 各種免費素材集散地,設計師開發人員必須收藏

Freebies.ByPeople 各種免費素材集散地,設計師開發人員必須收藏

免費資源網路社群本身已經是一個收錄超過六千篇文章的免費資源網站,因此我就比較少介紹同類型的服務,不過網路上確實有不少類似網站,例如 Evernote Design 設計師必備懶人包就在單一網站上整合各種設計相關素材資源;或是 The Stocks 精選免費圖庫,一站收錄更方便搜尋等等,這些集合式免費資源都非常值得加入書籤以備不時之需。

Tables Generator 線上製作產生表格 HTML、LaTeX、Markdown 原始碼

Tables Generator 線上製作產生表格 HTML、LaTeX、Markdown 原始碼

如果有接觸過網頁設計或曾經嘗試在網站、部落格放入表格,應該會覺得表格(Tables)是一個非常難搞的東西,不但原始碼複雜,沒有所見即所得編輯器似乎也很難直接寫出來,而在瀏覽器上使用的網頁編輯器又很難修改表格內容,有時候從其他文書處理工具直接複製貼上就會自帶很多用不到的程式碼,程式碼看起來很髒又無法符合當前的頁面風格,總之表格一直是很多人的痛,我也很少在網頁中用到表格,不過表格還是呈現一些數據相當好的方式。

Neocities 免費 HTML 網站空間,每月 200 GB 流量托管靜態網頁超簡單

Neocities

二十幾年前有個相當知名的網頁空間服務「GeoCities」,可以說是早期網路服務的始祖,當年有非常多類似的網頁托管服務,讓使用者將製作後的 HTML 網頁和圖片上傳,使其他人透過網址看到網站內容,這對早期網路發展來說扮演著相當重要的角色。後來 GeoCities 被 Yahoo 收購後發展並不如預期,直到 2009 年宣布關閉 GeoCities 服務,也算是結束一個時代。這幾年已經很少看到 HTML 網頁空間,不過有些專案確實只要單純的靜態頁面就能搞定。

免費建立分享僅限 1MB 網頁,可製作個人網頁、專案頁面或靜態部落格

免費建立分享小於 1MB 網頁,可製作個人網頁、專案頁面或靜態部落格

如果對於網頁大小有點概念,應該會知道在選擇虛擬主機往往不需要過大空間,因為更重要的可能是頻寬流量或頁面載入速度,依照我的經驗,只要數十 MB 就能應付一個基本的網頁,大多數會消耗容量的都是圖片或影音檔案,只是有時候要找一個小容量又兼具價格和穩定性的網站空間並不容易,取而代之的是在用不到的規格上多花了錢。