網頁布局

如果不熟悉 HTML 與 CSS ，卻想要將自己所拍攝或蒐集來的圖片，放到網頁上，該如何做呢？Cyotek Spriter 這套免費的應用程式應該可以幫到你，從網頁布局、圖片挑選、CSS 套用、特效等，都可以透過圖形化的介面來操作，完成後，可預覽，並自動產生 HTML 及 CSS 程式碼，省去學習門檻，專注在攝影領域。

網路上有很多免費的網頁模板可供下載，套用的方式也不複雜，但如要修改其中的版型結構，可能就有點門檻，而我們比較常見的網頁布局有表頭、內容可能區分三、二及單欄式再加上表尾，但不論利用何種版型，如要套用模板，就需要找到相類似的模板，不然就是自己改，太麻煩了。Grid-Generator 這個網站可以讓我們用所見及所得的方式，視覺化的操作網站結構分割、合併、增加、減少、調整區塊大小等，到最後產生該網頁版型的 CSS 樣式表，讓你不論用何種的網頁開發工具，都能輕鬆靈活的套用該 CSS，加快生產力。

Tailwindgen 這個網站則是提供 Columns、Rows 及 Gaps 三個參數快速產生基礎網格後，再讓使用者依據需求使用滑鼠拖曳出想要的網頁布局，而每次調整都能即時產出預覽網格，最後可以產生 JSX 或 HTML Code，直接複製就可以貼到應用 Tailwind CSS 框架的網頁，相當方便。