建站百寶箱

目錄

常用素材&工具
　點陣圖類
　icon類
　字型類
　圖表類
　框架類
　平面設計與影像處理
　其他
簡易美化方法

常用素材&工具

起因是因為看到一些同儕設計網站時，
不知如何取用沒有版權爭議的素材，
在此提供一些我常用的素材網站，避免練習作品產生爭議。
（以下資源請詳閱授權範圍再取用，避免爭議）

點陣圖類

  • Pixabay：無論是做網站或寫網誌配圖，都很多人使用的素材網。
  • Unsplash：由於上者的圖片已經太過普及了，近期崛起的Unsplash中各式美麗圖片或許也是您的選擇，著名服務Notion、Trello甚至可以直接選Unsplash作為背景圖，可見品質受到肯定。

icon類

  • flaticon：海量icon素材，可下載PNG、SVG等格式。
  • Font Awesome：也是icon素材，需導入。
  • Bootstrap Icons：由Bootstrap提供，似於上上方的icon素材，需導入。

字型類

  • Google Fonts：Google提供的雲端字型，需導入。目前繁體中文似乎只有Noto思源黑體。

圖表類

  • Chart.js：美麗的JavaScript圖表，幫助您呈現數據。

框架類

  • Bootstrap 5：快速解決柵格與切板等問題，且提供許多現成組件，讓網站元件如按鈕、輸入框等能有基礎的美觀。
    • BootstrapVue：融合了前端框架Vue.js的版本，覺得有趣可以嘗試。

平面設計與影像處理

  • Canva：有時候經營自己粉絲專業可能需要一點行銷文宣設計，Canva這時可以成為你的好朋友。
  • Pixlr：有時候履歷表的照片可能拍太黃了，或做個人網站不擅長用CSS裁減圖片，家中又沒有Photoshop，那或許Pixlr是您的臨時好夥伴～

其他

  • cdnjs：這個網站提供了許多熱門服務、套件的快速導入方式。
  • diagrams.net：有時想跟別人描述你的程式是如何設計，只用口語或文字擔心對方不是那麼清楚，那麼可以用這個線上流程圖軟體畫出你的演算法～

簡易美化方法

另外部分後端工程師對CSS真的無法駕馭，
但做個人網站時，可能就會比較吃虧，
推薦以下幾個工具協助美化外觀的效率：

  • Figma：用此設計工具繪製好按鈕，點選按鈕元件，可以於右方轉換成CSS或Android xml等代碼，雖然產生的代碼很初步，往往還需要自行調整，但至少提供一個所見即所得的介面。
  • Fancy Button Builder CSS3：前陣子在網路上閒晃看到的按鈕代碼產生器，一樣可以調整屬性後產生HTML及CSS代碼，另外如果hover或按壓有做大小差異，還有漸變動畫屬性可以套用。