首頁 部落格 前端工程師、專業站長 的懶人工具包 Web Code Tools
Free Resource
Jun 27, 2018
網路上有很多創新、免費的網頁設計資源,有些可以用於網站的草稿與線稿設計,也有繪圖軟體可以強化網站的視覺設計表現,還有很多奇特的網站提供意想不到的服務,我們樂於收集與分享這些資源給各位。

前端工程師、專業站長 的懶人工具包 Web Code Tools

不論是網站設計的前端工程師,或是網站經營到了一個階段後,菜鳥站長也會搖身一變成為老鳥站長,老鳥站長的特色就是具有一定的技術力,能夠使用更多的工具,協助網站的經營更上一層樓。像是使用更多的媒體/圖片/影片、使用站外的網頁工具、或是使用編輯器不提供的語法讓網站更強大。

如果你覺得自己是菜鳥站長,HTML的基本指令都不太熟悉,那麼先不用急著看這一篇文章,因為這個工具主要是給看得懂語法的老鳥站長所使用的。這個工具網站的名稱叫做WebCode Tools,簡單來說就是網頁編輯的原始碼,這裡大多都可以找到參考的語法。

常用網頁設計語法

這裡可以查詢到的CSS3、HTML5、Microdata、Meta Tags、Open Graph...這幾類的語法,點入之後可以看到語法的分類,點擊進入之後就可以看到語法的控制項目、預覽以及原始碼等。簡單來說,你可以找到想要套用的語法,輸入數值之後,看看是否是你要的選擇,最後複製到你的網頁上就可以了。

如果你是正在摸索編輯器的功能,建議你先從HTML5開始接觸,這裡的語法非常的實用也最為常用,例如讀取影像、連結設定、字體變化與色彩的改變等...其實這裡的功能在'網站的後台編輯器上應該都找得到。

延伸網頁設計語法

CSS3與HTML5或許資深的站長比較熟悉,但是Microdata與Open Graph是什麼呢? 其實這是輔助網頁優化的項目,不僅有助於搜尋引擎正確的找到你的網站,許多社群媒體也支援這類與法,只要你貼上了網址,就能根據標籤的內容,先行擷取正確的資訊到社群網站上,對於網站的推廣幫助很大。


每個WebCode Tools語法頁面都有一個很重要的訊息,就是瀏覽器的支援度。因為CSS3與HTML5仍有極少數的瀏覽器沒有完整支援,因此會出現這樣的提示站長。但如果你使用的是主流的Chrome、Safari、Firefox等,基本上不會有相容性問題。


使用這一些編碼必須要先注意,你的網站是否有支援,基本的HTML或許沒什麼大問題,不過CSS3的部分就會比較影響網站的版型原始設定,有些網站是不允許變動的,至於其餘的OpenGraph與JSON等設定,就算是沒有發揮作用也不會影響網站運作的。

 

更多前端工程師必學

常見背景屬性(一)

常見背景屬性(二)

JavaScript 宣告: var、let、const
JavaScript 宣告: var、let、const
Trista
Trista
Dec 19, 2017
FB 分享引文功能
FB 分享引文功能
Austin
Austin
Nov 20, 2017
後端工程師的三個階段
後端工程師的三個階段
Joe
Joe
Nov 16, 2017