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 瀏覽器。