本文摘自 <Hank Chan's Blog>
Weebly 的預設套件讓他相比 Wix 看似遜色很多,但其實在它的 App Center 裡收藏了上百種外加套件,其中有許多殺手級應用等著你去發掘。Weebly 這樣做是為了讓使用介面更輕便,反正一般使用者不需要到這麼多複雜的功能。( 點這了解更多 Weebly 和 Wix 的差別 ) 在 2016 年以後的 Weebly 版本裡,App Center 位於 Drag & Drop 工具欄的最下方,如下圖。本文將為你解說 App Center 裡的殺手級應用。 App Center 將所有外加套件歸類成四種。如上圖所示,但我個人認為這樣的分類其實不清楚,反而找不到許多功能強大的套件。如果你已經有鎖定的第三方 App,建議直接輸入關鍵字搜尋。以下是我用過,且相當推薦的套件: - Counter - Countdown Timer - Powr Countdown - FAQ - PinPoll - Powr Hit Counter - Price Chart - Tab - Team Card 如果你有注意到,Powr 推出了許多非常方便的套件。Powr 是個在推出第三方網頁應用上非常有名氣的公司,他除了在 Weebly,也在 WordPress上推出許多應用。 App Center 裡除了有少數由 Weebly 自己開發的外掛套件之外,大部分都是第三方所寫的 App。使用第三方的外掛套件有個壞處是它們總是有 Logo,除非你打算付費來移除 Logo。不過,本專欄也設有教學讓你自己 Coding 就可以製作這些套件: <Weebly 攻略 - Hit Count 來訪人數> <Weebly 攻略 - 製作到數計時器> <Weebly 攻略 - 如何製作 Count 套件> <Weebly 攻略 - 你的產品收費表> <Weebly 攻略 - 應用 Accordion 套件> 延伸閱讀 <Weebly 攻略 - 如何成為 Weebly 開發者>
Comments
本文摘自 <Hank Chan's Blog>
相比 Wix 或是 Squarespace , Weebly 最大的優勢就是它允許你修改網站的程式碼 (了解 Wix, Weebly, 和 Squarespace 的差別)。這讓 Weebly 做出來的網站有無限的可能,只要你會一些基本的 Html, CSS, 和 JavaScript 的話。 Weebly 除了提供直接嵌入 HTML 的套件 (如下圖 1),更允許你直接進入後台修改程式碼。如下圖 2 所示, Theme > HTML,就可以在後台修改程式碼了。 本文將會專注探討如何善用 Weebly 後台程式修改的功能。這有兩種方式:一種是使用別人已經寫好的 code,另一種是自己來寫 code。讓我們先聊聊第一種方法。 第一種方法:Weebly in 3 Mins,Webnots 和 Weebly Tricks 有許多已經寫好的 Weebly 套件。只要照著這些網站的教學,你可以在不用自己寫 code 的情況下修改網站。這些網站提供很多連你也沒想過的網站設計和功能,像是固定按鈕,影片背景,非常適合訓練自己的前端設計思維。 第二種方法:自己來寫 code。自己架網站,總是會遇到只有自己網站才獨有的特色或功能,這時候得自己寫 code 了。如圖 3,我們先為你一一介紹 Weebly 程式後台的功能。
1. Tool Bar (功能列,從左至右)
2. Theme Name (主題名稱) 你可以在 Theme Name 上點擊兩下來更改你的主題名稱。每當你在你的 Weebly 網站上進行程式修改,Weebly 會將你的更新儲存在另一個主題。這樣你還是可以保有原生的主題。 3. Header Type (HTML 模板) 你的網站所使用的 html 模板全都放在 Header。所有 Weebly 網站使用的 html 模板基本就是這三種: header, no-header, 和 splash,如下圖。 4. Styles (CSS 模板) 所有你的網頁使用的 CSS (Style Sheets) 都會出現在 styles 中的 main.less 或是 main_style.css 檔案裡。要修改 CSS 也是從這邊修改。順帶一提, 2016 年以後出現的 Weebly 主題都是使用 Less,它是 CSS 的更高階語言。所謂高階,其實也就是簡化在 CSS 上重複的步驟。 延伸閱讀 <如何修改 CSS> < Less > 5. Partials (局部模板) Partials 裡集合了所有拆開的 html 組件,這些組件在許多 html 模板上被重複使用,像是 blog, ecommerce,navigation,membership,search box。 6. Assets (有使用的資源) Assets 集結了你的網站會使用的資源,像是圖片,scripts (也就是 javascript),如下圖。你可以將圖片儲存在 Assets 裡 ; 任何存在 Assets 的圖片都會被賦予一個 url,看延伸閱讀來了解如何製作圖片連結。另外,你可以將 javascripts 存在 Assets,再用連結從 html 提取,請看延伸閱讀。 延伸閱讀:<如何製作圖片連結> <如何嵌入 Javascript> 7. Export Theme (輸出主題) 另外,相比 Wix 或是 Squarespace,Wix 的另一個優勢就是它允許你將整個網站的程式碼輸出並下載下來。如果你想要將你的主題備份起來,以備不時之需,或是製作主題給客戶,這功能是相當重要 (注意備份主題和備份網站是不同的,如果你要備份整個網站,請看 <如何備份整個網站> )。看延伸閱讀來了解如何輸出主題。 延伸閱讀:<輸入和輸出主題> 8. Coding Area (程式介面) 這裡就是你瀏覽和修改程式碼的地方了。 9. Preview (預覽頁面) 在 Coding Area 更新的程式碼都會直接反應在 Preview。如果你在 tool bar 上點選 auto-preview,每一次的程式更改都會引起 Preview 自動更新。 10. Full Screen Mode (全螢幕) 點選 Full Screen Mode 可以全螢幕瀏覽 Preview。 11. Save (儲存) 這大概是本篇文章裡最重要的功能了。每次的程式更改後,絕對不能忘記按下儲存鍵。 全文摘自 <Hank Chan's Blog> 雖然會寫程式,會架網站的人數近幾年來已經越來越多,但對於大多數沒有接觸過寫程式的人來說,這仍然是一片深海領域,時常想著假日有空就會去學它,但很常裹足不前。 對於像我們 (non-coder) 這樣想學架個自己的特色網站,或是自己專業的部落格,或是自己的網路小舖,又或是幫中小商家架網站,以前通常不是去隨意窩(Xuite),就是去 pchome 用他們提供的網站,再加上一點點的個人化,就心滿意足了。 事實上,我們現在有比這個更好的選項 : Weebly Weebly 可以讓你在完全不需要寫任何 code 的情況下,做出你自己的網站。他們還提供三種類型的網站供你選擇,Site, Blog, Store,滿足網友們各種不同的需求。 除此之外, Weebly 非常重視網站設計,他甚至提供數十種 template 供大家選擇最適合你的網站風格 (當然你要還是不滿意他們提供的 template, 你們也可以親自寫 html and CSS code 上傳你自己的風格) 選擇好你的 template 就可以去編輯你人生第一個網站啰 在編輯上,Weebly 有相當強的工具列 (請看上圖左邊),基本上你想得到的東西上面都有,像是圖片嵌入,文字,地圖,聯絡欄。不過因為篇幅有限,只能請各位網友自己去體驗了。 最後就是令人興奮的 Publish 了。在 Publish 網頁之前, Weebly 會問你是否要用他們給你的域名,又或是你自己另外註冊的域名。免費版的允許你可以使用 Weebly 的 subdomain name ,(i.e. http://rigolettomendoza.weebly.com),或是直接在他們的網站上購買 國際域名;而付費版的才能允許你使用你自己另外在別地方註冊的域名 (i.e. http://abcdefg.com.cn)。升級版的費用有許多種,像是 Starter, Pro 還有 Business,你可以選擇最便宜的方案: 6 個月 50 美金。 選好你要的方案,無論是免費或付費,接著按 Publish 就大功告成啦 ~♫ 總結我的使用感想,我認為網站架設其實已經相當簡單,重點是要如何架出有內容,有設計,又有實際用處的網站。這才是真正考驗的開始。 所以我這邊也放上我用 Weebly 幫我家傳統產業架設的網站 Amherb ,當做一個實際案例給大家參考。 |
Details
Hank在原本想幫家裡 中藥店 架網站的想法下,誤打誤撞的進入了 Weebly 的世界,從此成為 Weebly 的愛好者. Categories |