首頁電腦軟體開發工具

Cyotek Spriter 自動產出圖片型網頁的 CSS 及 HTML程式碼

Cyotek Spriter 自動產出圖片型網頁的 CSS 及 HTML程式碼

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

§相關文章，還可以參閱：

如何使用Cyotek Spriter？

1.完成安裝，開啟 Cyotek Spriter，便會開啟範例以供學習；左側圖片的下方有 image、CSS、Preview，可隨時切換，右側則提供 Layout、Files、CSS、Effects 等的視覺操作。

Cyotek Spriter 自動產出圖片型網頁的 CSS 及 HTML程式碼

2.在預覽時，也隨時可改變布局，讓你所見及所得。

Cyotek Spriter 自動產出圖片型網頁的 CSS 及 HTML程式碼

3.如果有特殊的需求需要修改 CSS 或 HTML ，可在上方功能表[ Project ] >[ Html templates ] 或 [ CSS templates ] 來修改。

Cyotek Spriter 自動產出圖片型網頁的 CSS 及 HTML程式碼

4.完成後，可透過[ Project ] >[ Export ] 功能表來自動產生 CSS與 HTML 程式碼來做後續的應用。

Cyotek Spriter 自動產出圖片型網頁的 CSS 及 HTML程式碼

Google 為推動 Https 協定不遺餘力，只要是使用 Https 協定的網頁，均會在自家 Chrome 瀏覽器網址列開頭處標示成綠色「安全」🔒 鎖頭，如果是非 Https 的網頁則會標示成 ⓘ，兩種符號，均可點擊進去看詳細資訊，而現在 Chrome 68版會將非 Https 的網頁，直接在網址列被標示「不安全」字樣，為求有提示效果，或是你想更改這個提示，可以經由 chrome://flags/ 來設定 Chrome 瀏覽器。