方格精選

Weebly快速上手指南:教你五步驟從零開始使用Weebly成立第一個個人網站

更新於 發佈於 閱讀時間約 7 分鐘

此份筆記整理於去年向同學教學時使用的簡報,因為剛好最近也花些時間整理自己的個人網站,索性就將教學內容拿出,當作一份記錄放上部落格。嚴格來講我使用Weebly的時間,並沒有很長,因為他的操作雖然對於一般人來說相當方便,只需要拖曳方快就可以快速製作網站,毋須花時間記憶HTML及CSS,但相對在使用上也有諸多不便,譬如:後臺設計使他並不適合被當作部落格;手機閱覽容易版面位移、裁切等,因為問題相對多,所以在使用上我更傾向將它視為一個純粹的個人展示空間使用,譬如用於「線上履歷」或「作品集」、「線上藝廊」使用。

儘管上述的問題看似很致命,但我認為Weebly作為一個初入網站建置的人來說,仍然是一個很適合入門的網站建置工具,你可以透過熟悉它,讓它成為你未來製作網站時的模板及練習。以下請跟著我的腳步,一起來認識這個工具吧!

關於Weebly

raw-image

Weeby是一款線上的網站建置工具,透過套用模板、拖曳方塊,你可以快速的建置一個個人網站或者網路商店,雖然設計相對簡單,免除需要花時間摸索HTML或CSS的時間,但友善的、直覺地設計很適合初期只是想要單純做一個「線上履歷」、「作品集」的人使用,透過熟悉Weebly的操作及練習,你也可以奠定未來網站設計、切版的基礎和概念。

  • 優點中文操作介面。
    透過拖曳方塊即可輕鬆完成網站的建立,由於操作方式直覺、簡單,相當適合網站建置初心者。
    網站本身即含有大量的免費模板,提供給毫無想法的人使用。
    免費版本即提供有無廣告空間網站容量及流量都沒有任何限制的服務。
  • 缺點不易被瀏覽器搜尋到,需要靠個人分享,累積多人使用後才容易在搜尋引擎上曝光。
    拖曳方格建置網站的方式,限縮了網站建置的自由度,未來若要搬運網站也相對不容易。
    不適合作為部落格使用,僅適合將目的及用途單純化。
    可能會有一夜網站消失的疑慮。(※曾經不只一次聽過Weebly爆站災情,譬如約莫2016年,囧星人建置的網站消失等。)

個人網站建置入門

raw-image

對Weebly的特性有基本的瞭解以後,接下來就跟隨我的腳步一步、一步完成自己的個人網站吧。

第一步驟:註冊帳號

raw-image

Weebly現行的註冊方式包含2種:第一是連結Facebook、Google帳戶的快速註冊。另外一種則是傳統註冊,需要依序輸入「姓名」、「電子郵件」、「密碼」及「國家」。

raw-image



第二步驟:選擇你的網站類型

raw-image

Weebly的網站分為兩種類型:普通的網站及附設線上商店功能的網站。因本次文章係以介紹建置普通網站為主軸,爰請直接點點選右邊即可。

第三步驟:選擇網站模板

raw-image


在基礎上,Weebly提供了相當多類型的模板,包含個人網站、商店、部落客等,但正如我開頭所說的,他並不適合作為部落格使用,甚至沒有相對優秀、方便操作的文字編輯器,所以在這邊我會建議以個人作品集、公式網站的方向去選擇自己喜歡、適合的模板。

第四步驟:設置網域

raw-image


Weebly在建置時亦提供了網域服務,其中包含了免費及付費版本。前者網域名稱綁定「名稱.weebly.com」,後者則可以透過不同方案購買合適的網域名稱,包含「.com」、「.org」等,或者透過購買轉移、連結方案將已有的網域名稱使用在該網站上。

※提供一個網站命名小訣竅:網站名稱以最簡單、方便記憶為主,譬如以「個人名稱」或「個人名稱+目的(譬如個人作品集可以英文名字搭配porfile)。

第五步驟:填寫你的網站資訊

raw-image


創建好網站,別忘了先點選上面的選單跳到設定,這邊會顯示你的網域名稱,並會預設網站標題及類別,為了讓未來搜尋引擎更容易搜尋到你的網站,建議取一個方便記憶的網站名稱,讓人更容易在搜尋引擎搜索。

raw-image

結語

raw-image

恭喜你跟著我走到這一步,嘗試成立了第一個Weebly網站。雖然還沒有正式進入功能介紹,但你可以先試著自己玩玩看裡面的功能,並嘗試規劃出第一個個人網站。如果不知道該怎麼起步,這邊我也提供了過去我所製作的兩個網站供你參考,你可以先根據這兩個範本規劃看看。

MO,TZ-CHING PHOTOGRAPHY

raw-image

「MO,TZ-CHING PHOTOGRAPHY」是我個人的攝影網站,設計方向係希望透過網站向別人分享我的攝影作品,是一個以放置「照片」為目的的網站,所以不會有過多的文字撰寫。

點選「MENU」會開啟選單,進入「PHOTOGRAPHY」分頁,可以看到我以線上策展為概念,搭配照片及簡短文字,讓網頁成為故事及照片的展示空間。進入個別展廳,你可以看到一些文字敘述,包含策展理念及故事,最後文末則囊括了這個主題的作品以「方格」形式展示。

「PHOTOGRAPHY」分頁以博物館及展廳的形式規劃。

「PHOTOGRAPHY」分頁以博物館及展廳的形式規劃。

「人造動物」展間設計及文字。

「人造動物」展間設計及文字。

展間最後的作品展示,以「方格」形式呈現,每張照片點進去後,均可以看見「投影片」式的影像撥放器。

展間最後的作品展示,以「方格」形式呈現,每張照片點進去後,均可以看見「投影片」式的影像撥放器。

MO,TZ-CHING

raw-image

「MO,TZ-CHING」這個網站是我當初為了接案設計的個人作品網站,網站整體架構包含首頁、作品、資源及介紹,規劃邏輯如下:

  • 首頁:介紹我自己、展示代表性作品,並敘明我的創業理念及保留聯繫方式。
  • 作品:展示過去設計過的專案,點選每個專案後,可以看到個別的介紹。
  • 資源:分享網路資源,創造連結、展示專業,讓這個網站的功能不只是單純的個人履歷,也是資源分享網站。
  • 介紹:除了介紹自己以外,亦放上聯繫方式、承接項目、服務過的客戶以及回饋,以爭取顧客的信任感。
展示過去的作品及專案。

展示過去的作品及專案。

個別專案的介紹、服務及設計構想,透過文字引發情感共鳴,並加深顧客信任感。

個別專案的介紹、服務及設計構想,透過文字引發情感共鳴,並加深顧客信任感。

資源分享、創造連結,讓網站不只有展示自己的專案,同時可以作為資源、資料庫,提供顧客而外的服務,並增加網站被留存的機會。

資源分享、創造連結,讓網站不只有展示自己的專案,同時可以作為資源、資料庫,提供顧客而外的服務,並增加網站被留存的機會。

標示服務項目,並分享過去客戶及回饋,增加顧客信任感。

標示服務項目,並分享過去客戶及回饋,增加顧客信任感。

簡單的分享了製作網站的構想及方向,未來還會陸續和你分享有關Weebly網站功能架設技巧及網站規劃設計等資訊,敬請期待。若你已經開始動手製作了自己的網站,不妨也在文章留言,和我分享你的網站內容吧!

如果你喜歡本篇文章,歡迎分享、按讚、留言,讓我們一起幫助更多人!也歡迎你追蹤、訂閱我網站twitterFB粉專,讓我和你分享熱騰騰的好文章!


留言
avatar-img
留言分享你的想法!
avatar-img
故事茶館
13會員
90內容數
以復卦為名,取名復齋,象徵週而復始的文字。 如果你也喜歡聽故事,且聽我娓娓道來。
你可能也想看
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
不懂寫程式該如何架設網站?在上一篇文章介紹了多款 No Code 架設網站的工具,我想你已對架站的 No Code 工具有一定了解。如果你還未曾試過建立網站,今天就試試由零開始利用 Notion 架設一個簡單的個人網站。 Notion 網站架設準備工作 將 Notion Page 轉為一頁式網頁
Thumbnail
不懂寫程式該如何架設網站?在上一篇文章介紹了多款 No Code 架設網站的工具,我想你已對架站的 No Code 工具有一定了解。如果你還未曾試過建立網站,今天就試試由零開始利用 Notion 架設一個簡單的個人網站。 Notion 網站架設準備工作 將 Notion Page 轉為一頁式網頁
Thumbnail
無論是個人或企業層面,學習使用 No Code 工具和技術都有助提升工作效率。對於個人職涯來說,能夠掌握 No Code 的開發技能,懂得利用相關工具改善流程和解決問題,必能助你在職場上脫穎而出。這篇文章會為大家介紹 7 個 No Code 網站開發工具,並逐一詳細說明它們的特式和架站方法。
Thumbnail
無論是個人或企業層面,學習使用 No Code 工具和技術都有助提升工作效率。對於個人職涯來說,能夠掌握 No Code 的開發技能,懂得利用相關工具改善流程和解決問題,必能助你在職場上脫穎而出。這篇文章會為大家介紹 7 個 No Code 網站開發工具,並逐一詳細說明它們的特式和架站方法。
Thumbnail
承接上篇文章 架設好環境後我們要來安裝 WordPress 了 其實安裝 WordPress 非常簡單,但是其中要注意的小細節太多了,若是沒有設定好,接下來在做各種激烈操作的時候就會有一堆問題。 文章目錄: 首先,建立一個專門給 WordPress 的資料庫,開啟 phpmyadmin 解壓縮
Thumbnail
承接上篇文章 架設好環境後我們要來安裝 WordPress 了 其實安裝 WordPress 非常簡單,但是其中要注意的小細節太多了,若是沒有設定好,接下來在做各種激烈操作的時候就會有一堆問題。 文章目錄: 首先,建立一個專門給 WordPress 的資料庫,開啟 phpmyadmin 解壓縮
Thumbnail
因為最近需要建立自我品牌,所以決定來架個人網站。 架個人網站的方式非常多,最簡單的是直接找台伺服器拿現有模板套上去。 但是我喜歡自由,而且也已經有方格子部落格網站,所以打算做個簡單的名片網站。
Thumbnail
因為最近需要建立自我品牌,所以決定來架個人網站。 架個人網站的方式非常多,最簡單的是直接找台伺服器拿現有模板套上去。 但是我喜歡自由,而且也已經有方格子部落格網站,所以打算做個簡單的名片網站。
Thumbnail
這是一篇全面,適合新手學習的Woocommerce教學。  你可以低成本(只需要Server + Domain費用), 就可以透過Wordpress + Woocommerce,去建立網店。  你將會學習:前期Server設置、使用Wordpress、安裝Woocommerce、設立outgoin
Thumbnail
這是一篇全面,適合新手學習的Woocommerce教學。  你可以低成本(只需要Server + Domain費用), 就可以透過Wordpress + Woocommerce,去建立網店。  你將會學習:前期Server設置、使用Wordpress、安裝Woocommerce、設立outgoin
Thumbnail
兩年多前,開始有了重新架構網站的想法,所以把 Blogger 架設的網站,移轉至到了新的平台,當年我也做過了一些優缺點評析,剛好最近又再重新整理網站的所有架構,順便也重新啟動了一次 Hugo 架設網站的循環。
Thumbnail
兩年多前,開始有了重新架構網站的想法,所以把 Blogger 架設的網站,移轉至到了新的平台,當年我也做過了一些優缺點評析,剛好最近又再重新整理網站的所有架構,順便也重新啟動了一次 Hugo 架設網站的循環。
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News