Powered by Blogger.

Archive for July 2017

Weebly 更快速的網站架設 (中) - 善用 App Center

Weebly 的預設套件讓他相比 Wix 看似遜色很多,但其實在它的 App Center 裡收藏了上百種外加套件,其中有許多殺手級應用等著你去發掘。Weebly 這樣做是為了讓使用介面更輕便,反正一般使用者不需要到這麼多複雜的功能。( 點這了解更多 Weebly 和 Wix 的差別 )

在 2016 年以後的 Weebly 版本裡,App Center 位於 Drag & Drop 工具欄的最下方,如下圖。本文將為你解說 App Center 裡的殺手級應用。

圖 1

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 開發者>
Tag : , ,

Weebly 攻略 - 製作倒數計時器

本文參自於 <Webnots> <W3Schools>

前言:本文將假設你已經了解  <如何善用 App Center>

做網站時常遇到需要倒數計時器,像是促銷專案將到什麼時候結束,活動報名到什麼時候截止。有了倒數計時器就更能將訪客流量轉換成使用者行動,像是增加購買人數或是報名人數。小米之前的飢餓行銷某種程度上就是善用倒數計時器。

本文將要教你兩種方法如何在 Weebly 上安裝倒數計時器。

1. App Center 

首先,因為倒數計時器並不是 Weebly 的預設套件,我們得先去 App Center 下載倒數計時器。搜尋 Countdown,並選擇第一個的 Countdown (免費) 或是第三個的 Countdown Timer (免費),如下圖。

圖 1

這邊我選擇第一個的 Countdown,點擊後再點 Add,然後將他連到你的 Weebly 網站,如下圖。

圖 2

這個 Countdown 套件就會出現在你的 Weebly 網頁上了。
回到你的 Weebly Drag & Drop page,將 Countdown 套件拖曳到你想要的位置。接著,點擊 Countdown,他的編輯欄就會冒出來,就像其他的 Weebly 套件一樣,如下圖。

圖 3

你可以透過 Edit 進去來調整 Countdown Timer 上的文字,時間,大小,和設計,如下圖。

圖 4
使用第三方為 Weebly 寫的外加套件雖然方便但有個壞處。它們常常提供你兩個版本:免費版和付費版 ; 免費版功能常常有局限外,也常常有他們的 logo。如果你不介意他們的 logo,自然沒問題 ; 如果你介意,可能要自己來寫點 code,請繼續看第二個方法。


2. DIY

在使用第二個方法前,請先閱讀 <如何修改程式碼> 以及 <如何修改 JavaScript>。將以下提供的 HTML, CSS 和 JavaScript 個別貼在所屬的地方。你可以將 HTML code 用 Drag & Drop 的方式貼在網頁上任何地方 ; CSS 則是用 <style></style> 包裹起來後貼在   Page > 有用到 Countdown 的 page > SEO Settings > Header。



因為製作 Countdown Timer 將需要為數較多的 JavaScript,所以我們特地把 JavaScript 獨立出來成一個檔案。進入 Theme > Edit HTML/CSS > Assets,成立新的檔案叫 countdown.js,並將提供的 JavaScript code 貼上,如下圖。

圖 1
最後,到 Page > 有用到 Countdown 的 page > SEO Settings > Footer,並將下列的 code 貼上。這是用來呼叫獨立出來的 JavaScript 檔案。

<script type="text/javascript" src="/files/theme/countdown.js">
</script>

這樣就大功告成啦~。




延伸閱讀 <如何製作 Count 套件>
Tag : , ,

Weebly 攻略 - 3 種修改 HTML 的技巧

本文參考自 <Weebly Developer Center>

前言:本文假設你已經了解 <如何修改程式碼>

只要是稍微進階的 Weebly 使用者都會難免遇到要修改 HTML 的狀況。本文將要教你三種技巧來修改 HTML。

1. Drag & Drop 

將 HTML Embed 套件拖曳到你想要的位置,如下圖。通常會使用這樣的情況還蠻多的。像是 將 Mailchimp 的 Sign Up Form 嵌入進的你的網頁,或是向使用者討讚 XD。

圖 1

2. Theme > Edit HTML/CSS > Header Type

進入後台程式編輯後,在 Header Type 中找到你想要編輯的頁面,如下圖。這通常是當你想要對頁面設計做大幅度的更改,像是遮蔽掉 Weebly 免費版中強制嵌入的廣告,或是增加另外一個 section

圖 2

在編輯完後,回到 Page > 你的 Page > Header Type,來確認你使用的 Header Type 是一致的。

圖 3

3. 使用 tpl

這是相當進階的做法,只有在為數相當多的 HTML code 的情況下推薦使用。 Weebly 使用 Mustache 技術將同個 block 的 HTML 脫離出去成立另一個檔案。在原本的 Header Type file 中就只剩下如以下的 code。第二段中用 curly braces 包夾的名稱就取代了原本佔了幾十行的 HTML code,在日後維護程式碼也簡潔多了。


<div id="footer-alternative">
   {{>alternative-footer}}
</div>


接著將脫離出去的 HTML block 存在獨立的 tpl file 中。先在 Partials 中成立一個新的 file,並將副檔名命名為 tpl,檔名則必須要和之前在 HTML 模板中留下的 curly braces 一樣。如果 curly braces 是長這樣 {{>alternative-footer}},那麼檔名則必須是 alternative-footer.tpl,如下圖一樣。

圖 4

以上三種方法針對使用者的不同需求而設立。




Tag : , ,

Weebly 攻略 - 5 種嵌入 JavaScript 的方法

本文大部分參考自 <Webnots>

前言:本文假設你已經知道如何在 Weebly 上修改程式

除了 HTML,CSS 之外,前端網頁設計的最重要元素就是 JavaScript 了。它提供更複雜的使用者互動介面,並讓你的靜態網頁開始具備運算能力。本文章將會教你如何在 Weebly 上嵌入 JavaScript,進行 Google Analytics 追蹤,嵌入簡單的 JQuery 套件,或者是呼叫其他網站服務的 API。

1.  Settings > SEO > Footer Code

範例 1

當 JavaScript 放在 Setting 時,他的應用範圍是全網站的。舉個例子,當你想要用 Google Analytics 功能來追蹤你的網站訪客來源和數量時,Google 會要求你將一段他們提供的 JavaScript code 複製在每個頁面上。JavaScript 一般而言最適合放在 footer,因為這樣可以讓 瀏覽器優先顯示 <Body> 中的 HTML 物件才去 compile JavaScript,才不會拖累到在 <Body> 中 HTML 物件的顯示速度。以下 2. ~ 4. 的方法也都建議將 JavaScript 放在 footer。

應用:Google Analytics,Facebook Like 按鈕


2. Pages > 你要的 Page > SEO > Footer Code

範例 2
放在各別 Page 的 JavaScript 的應用範圍只限於該頁面。這通常是當你想要用 JavaScript 給該頁面做一些微調,像是隱藏或是修改某些在整個網站上通行的預設套件,並且呼叫 CDN。

應用:呼叫 JQuery 的 CDN,並且用 JQuery 對網站套件進行修改


3. Theme > HTML Editings > 直接嵌入在 HTML 模板

範例 3
和修改 HTML 模板的途徑一樣,你可以直接在原始碼上直接添加 JavaScript。這樣的應用範圍限於 HTML 模板,像是 Header Page 和 Landing Page。

應用:用 JavaScript 為 Landing Page 添加一些特殊功能,像是小遊戲。


4. Theme > HTML Editings > Assets > Upload or Create JavaScript

範例 4
當 JavaScript Code 的數量越來越多時,最好就是將 JavaScript 獨立出來打包成一個檔案。所有 JavaScript 的檔案名就是 .js,而你可以將這些檔案存在 Assets  (沒錯,就是那個也能存圖片,CSS files 的地方)。接著,你可以在 HTML 模板或是各別頁面上用 Script 的方式呼叫這些 js 檔案,如下列的 code。

<script src="/files/theme/yourjavascriptfile.js"
 type="text/javascript"></script>

應用:需要較多 JavaScript code 的時候


5. Drag & Drop > HTML Embed

範例 5
最後一個方法,也是大家最熟悉的方法: Drag & Drop。透過 Drag & Drop 你可以輕鬆地將第三方套件直接嵌入你的網頁上,像是 Disqus 的留言套件,和 Mailchimp 套件。但是由於從 Drag & Drop 放入的 JavaScript 和頁面上的其他物件都會被放在 <body> 中,瀏覽器有時候得優先處理 JavaScript 才能繼續跑其他的 HTML 物件,所以會拖累到 <body> 裡 HTML 物件的顯示速度。只有在少量 JavaScript code 的情況下才會推薦使用。


應用:嵌入 Disqus 留言套件,嵌入 Mailchimp Signup 套件


=======================================================================
懂得 JavaScript 將會開啟創作 Weebly 套件的大門。透過 JavaScript 你將可以了解如何運用我們提供的 <如何嵌入影片背景> <如何顯示年份> <製作倒數計時器> <如何自動導向到英文網頁>等進階文章。





延伸閱讀: <3 種修改 HTML 的方法> <4 種修改 CSS 的方法>
Tag : , ,

Weebly 攻略 - 如何用 Line 來分享你的網站

本文參考自 <Line Developers>

前言:本文假設你有一些基本的 HTML CSS and JavaScript 概念,以及如何在 Weebly 上進行程式更改的動作。你可以閱讀這篇 <如何在 Weebly 上修改程式>。

用 Facebook 和 Line 來分享是台灣目前的主流。相較 Facebook 提供了很多的分享套件,和許多網站提供的分享按鈕,Line 的分享按鈕反而相當少見。本文章將要教你如何善用 Line 官網所提供的按鈕,方便你的用戶直接將你的網頁分享到 Line 的群組,如下圖。

Weebly in 3 Min 的 Footer

首先,到 Line 的 social plugin 開發網頁。他有三個分享的按鈕給你選擇:"Line it", "Add friend", "Like"。你依照你的需求選擇相應的 social plugin。這邊將用 "Like" 來當作範例教你如何嵌入到你的 Weebly 網頁,如下圖 1 和 下圖 2。

圖 1
1. 在 Set URL 上加入你想要用 Line 分享的網頁網址。

2. 在 Select a share option 的兩個選項中選一個你想要的按鈕。這邊是選擇左邊的按鈕。

圖 2

3. 再往下滑,如圖 2,它會問你要不要加上 "Add friend"。如果沒有 Line 的官方粉絲帳號,就選擇左邊的 off。

4. 經過這一系列的設定後,Line 就會幫你產生出 code。它通常長得像下面這一段 code。

<div class="line-it-button" data-lang="en" data-type="like"
 data-url="http://yourwebsite.com/" data-share="true"
 style="display: none;"></div>  /* HTML */
 <script src="https://d.line-scdn.net/r/web/social-plugin/js/
thirdparty/loader.min.js" async="async" defer="defer"></script>
   /* JavaScript */


5. 你可以將第一段的 HTML code 嵌入在你的 Weebly 網頁上任何一個地方,透過 embed code 這個套件。你也可以透過 Theme > Edit HTML 直接嵌入這段 HTML code 到原始碼中。

6. 將第二段的 JavaScript 嵌入在 Settings > SEO > Footer Code。這樣你的 Line sharing button 就大功告成了。


Line 是 Facebook 之外台灣人目前最喜歡用的聊天 app,尤其是中老年人特別喜歡用 Line 群組來分享一些圖文並茂的文章。如果你網頁針對是這樣年齡層的使用族群,那麼在你的網頁上加上 Line 分享功能就非常重要了。
Tag : , ,

Weebly 攻略 - 4 種修改 CSS 的方法

本文部分參考自 <Webnots>

前言:本文假設讀者已經具有 CSS 的基本知識。

Weebly 雖然不像 Wix 一樣有許多的主題和套件模板供你選擇,但他們開放程式碼讓你修改 HTML, CSS, 和 JavaScript,讓你可以自己打造和客製化自己的套件 (點這了解如何修改程式碼)。本文章將要教你四種在 Weebly 修改 CSS 的方法。

1. 為單一頁面增添 CSS
有時候為了在特定頁面上添加一些額外套件,尤其是 Weebly 沒有的套件,像是 背景影片 或是 banner,就必須添加額外為套件所寫的 CSS。首先,進入 Pages > 選擇你要的 Pages > SEO settings > Header Code,並照以下指示添加程式碼。

<style>
  // Add your CSS code here
</style>
這樣的 CSS code 只能應用在單一頁面上,好處是它不會增加其他頁面 loading 的負擔。


2. 在網站的 SEO Setting 修改 CSS
如果想要針對整個網站的設計進行簡單的修改, 像是改變整體文字的預設大小或顏色,可以到 Settings > SEO > Header Code 添加以下的 code。

<style>
  // Add your CSS code here
</style>


3. 在 main style sheet 或是 main.less 上修改 CSS
如果是要從事更複雜的 CSS 修改,像是 navigation bar, footer,就必須要修改你的 main style sheet。這邊,我假設你已經閱讀了 <如何修改程式碼>。進入 HTML Edit,然後找到 main-style.css,或是 main.css,或是 main.less,如下圖。
( p.s. 不同的 Weebly 主題模板使用不同的 CSS file,2016 以前的 Weebly 主題使用純 css,之後使用 less。Less 是 CSS 的 pre-processor,它簡化了一些 CSS 的步驟,不過同樣是可以接受 CSS code。)


這邊你可以找到所有網站套件會使用到的 CSS。你可以直接編輯這些 CSS,或是透過 !important 的手段另外寫 CSS 來 override 本來的設定。要記得的是,只要是有添加或是更改 CSS 都要用 comments 來標注本來的設定,如以下。每次修改 CSS 加上 comments 是個好習慣,尤其是之後要再回復成原本設定就方便了。

  .copyright {
  font-size: 16px; /* Original size is 14px */
  text-align: center; /* Orignial text is left-aligned */
  color: white;  /* Original text color is black */
}
因為 main style sheet 上的 CSS 會應用到整個網站,所以不建議隨意修改。而且在 main style sheet 上添加太多的 CSS 會造成後續維護的負擔。


4. 上傳額外的 CSS 檔案
最後一個也是最少人知道的手段,就是上傳額外的 CSS 檔案。進入 Theme > HTML Edit > Assets 後,你可以將 CSS 檔案上傳到這邊,如下圖。


之後在 Page > Header Code 中添加下列的 code 呼叫 CSS file 就好了。

<link href="http://yourwebsite.com/files/theme/your-css-file.css"
 rel="stylesheet" type="text/css"/>


對某些人來說 - 當需要寫為數較多的 CSS 時,在單一頁面上的 header code 既不適合,而 main style sheet 也已經負載過多,這時候有個獨立的 CSS 檔案就有好處。另外,如果你還沒有意識到的話,其實你也可以在你的 Weebly 網站上存放 CSS 檔案和其他圖片資源來供你的其他網站使用。



延伸閱讀:<如何修改 HTML> <如何修改 JavaScript>
Tag : , ,

Weebly 攻略 - 善用 "301" 頁面

本文部分參自於 <Weebly Help Center>

經營網站或是部落格久了,就會常遇到要將網站搬家搬到另外一個主機或是另一個部落格或是架站服務,這時候網址轉換就很頭大了。舉個例子,之前的網站可能要求你所有網頁的網址後面加上 php 檔名,但是你搬家後的新網站則是要求換成 html 檔名。可是,大部分的人只知道你的舊網址,而不知道你的新網址。這時候," 301 (Redirect)" 就很重要了。它是 HTTP 一個可以將網址導向另外一個網址的方法。當伺服器接到 301 的訊息,知道本來輸入的網址現在已經是另外一個網址,它會立即連到另外一個網址。


Weebly 上也提供了 "301 Redirect" 的服務。首先,進入 Settings > SEO > 301 Redirects > Add Redirect,如下圖。


接下來,把你的舊網址列在 "Old URL" 下方,然後再把對應的 Weebly 頁面列在對應的 Destination Page,如下圖。


儲存之後,你可以以此類推繼續接下去,如下圖。另外,多個舊網址可以同時連到一個新網址。



" 301 "的應用非常廣。許多時候,當你要將兩個網頁合併成一個網頁,需要把其中一個網址導向至另外一個網址,都可以使用 "301 Redirect"。




延伸閱讀 < 如何客製化 "404 找不到" 頁面 >

Tag : , ,

Weebly 攻略 - 客製化 "404 找不到" 頁面

本文部份摘自於 <Weebly Blog>

"404 找不到" 是 HTTP 裡的預設反應。當伺服器沒辦法提供網頁給使用者輸入的連結時, 404 頁面就會回傳給使用者。通常是因為使用者輸入的連結已經損壞或是更新,導致他現在輸入的網址沒有對應的網頁。想必大家一定有經歷過 Google 上的 404 頁面。

Google's 404 Page

雖然 "404 找不到" 乍看之下不是很重要,但是專業的網站總是會賦予它一些令人驚喜的設計,像是 Imgur 的 404 頁面,如下圖。英國的 Metro News 特地為 404 頁面做了報導,因為越來越多網路公司認知到 - 有好的 404 頁面設計會給找不到網址的使用者一點安慰和一點驚喜。

Imgur 404 Page

Weebly 有為使用者預設一些簡單的 "404 找不到",但是他的設計既無聊又沒變化,都是使用千篇一律的 “404 找不到" 風格,如下圖。

404 on Weebly

不過 Weebly 的平台上有個小竅門讓你可以客製化你自己的 "404" 頁面。首先,在你的網站上成立一個頁面,命名為 "404",並點選 Hide in Navigation 將它隱藏起來,如下圖。你也可以更進一步到 SEO settings 將 404 頁面隱藏起來,不被搜尋引擎找到。


成立 404 頁面後,Weebly 會將你網站上搜尋不到的網址自動導向至這個頁面。接下來,你就可以針對這個 404 頁面重新設計啦~。你可以將一些有趣的 imgur GIF 連結附在你的 404 頁面上,像是 Weebly in 3 Min 的 404 頁面 ; 你也可以參考國外這個部落格統整了 <36 樣有趣的 404 頁面設計>。

好的 404 頁面設計具備以下三大特徵:

1. 引導使用者到正確的網址或者是首頁。

2. 提供使用者直接聯絡你的方法。通常會被引導到 404 頁面是因為網址出現問題,或者是舊的網址已經故障。

3. 發揮你的創意~

Weebly in 3 Min's 404 Page
最後,404 頁面可以想成是網站上的最後一道防線,因為輸入的網址已經損壞或是更新了。如果要防止網址損壞或是更新的問題,讓使用者可以順利找到他想要的連結,建議參考我的 <善用 301 頁面>




Tag : , ,

Weebly 更快速的網站架設 (中) - 如何修改 Weebly 網站的程式碼

本文大部份摘自於 <Webnots>

相比 Wix 或是 Squarespace , Weebly 最大的優勢就是它允許你修改網站的程式碼 (了解 Wix, Weebly, 和 Squarespace 的差別)。這讓 Weebly 做出來的網站有無限的可能,只要你會一些基本的 Html, CSS, 和 JavaScript 的話。

Weebly 除了提供直接嵌入 HTML 的套件 (如下圖 1),更允許你直接進入後台修改程式碼。如下圖 2 所示, Theme > HTML,就可以在後台修改程式碼了。

圖 1

圖 2


本文將會專注探討如何善用 Weebly 後台程式修改的功能。這有兩種方式:一種是使用別人已經寫好的 code,另一種是自己來寫 code。讓我們先聊聊第一種方法。

第一種方法:Weebly in 3 MinsWebnotsWeebly Tricks 有許多已經寫好的 Weebly 套件。只要照著這些網站的教學,你可以在不用自己寫 code 的情況下修改網站。這些網站提供很多連你也沒想過的網站設計和功能,像是固定按鈕,影片背景,非常適合訓練自己的前端設計思維。

第二種方法:自己來寫 code。自己架網站,總是會遇到只有自己網站才獨有的特色或功能,這時候得自己寫 code 了。如圖 3,我們先為你一一介紹 Weebly 程式後台的功能。

圖 3
1. Tool Bar (功能列,從左至右)
  • 提供黑色和白色的 coding 背景
  • 搜尋
  • Docs - Weebly coding 的使用說明書
  • Auto Preview (自動更新預覽)
Weebly 的後台最大的特色之一就是自動更新預覽。當你一寫出一段 code,系統就會自動更新下方的預覽頁面 (Preview)。這樣可以即時檢查你寫的 code,不過如果你寫的是較長的 code,自動更新預覽功能反而會變得非常擾人,建議是關閉比較好。


2. Theme Name (主題名稱)
你可以在 Theme Name 上點擊兩下來更改你的主題名稱。每當你在你的 Weebly 網站上進行程式修改,Weebly 會將你的更新儲存在另一個主題。這樣你還是可以保有原生的主題。


3. Header Type (HTML 模板)
你的網站所使用的 html 模板全都放在 Header。所有 Weebly 網站使用的 html 模板基本就是這三種: header, no-header, 和 splash,如下圖。



延伸閱讀 <如何修改 HTML>

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 (儲存)
這大概是本篇文章裡最重要的功能了。每次的程式更改後,絕對不能忘記按下儲存鍵。




Tag : , ,

如何在你的網站上顯示年份

前言:此篇文章屬於 Weebly 進階攻略,建議需具備基本的 html, CSS, 和 Javascript 技術來進行操作。此外,建議先閱讀我之前寫的兩篇文章 <如何製作自己的 footer>,<Weebly 更快速的網站架設 (下) - 如何修改 Weebly 網站的程式碼>。

在你的網站 footer 上常常會遇到需要顯示正確的時間,如下圖。在 Copyright © 後面需要接上你的起始年份到最新年份。

See Demo Page

許多人通常是選擇自己手動打上最新年份,但這必須每年再手動更改一次,相當麻煩。這邊提供給大家一個用 JavaScript 來自動化時間顯示的教學。我們將要用 Javascipt 來找出現在當下的年份。在網路上 Javascript 的起點時間設定為 1970 年,而之後的時間都是以毫秒來顯示。因此,我們必須將找出來的毫秒除以秒,分鐘,小時,天,年,捨去小數點之後的尾數,再加上 1970 年,就是當今的年份了。

1. 如果你是 Weebly 付費用戶的話,步驟較為簡單。首先,將下列的 html code (只要 html 而已) 複製並嵌入在你網頁的 footer 上,如下圖 1。



圖 1

接下來再將 CSS code 放入 html CSS 編輯的地方,如圖 2。

圖 2

最後,到 Setting > SEO > Footer Code,把我提供的 Javascript code 貼上,如圖 3。儲存後就大功告成啦。

圖 3

2. 如果你是 Weebly 免費版用戶的話,因為沒有 footer 功能,所以得自己來做 footer。請先閱讀這篇文章來了解如何製作自己的 footer。

好,我先假設你已經瞭解如何在 Weebly 免費版上製作自己的 footer。我也假設你已經懂得如何在 Weebly 上編輯程式碼 (瞭解如何在 Weebly 編輯程式碼)。這個方法與第一個方法大同小異,差別在這個方法的前提是你自己已經用 html 做好了 footer,之後的步驟與第一個方法相同。首先,找到你的 footer code,並在你想要的位置嵌入我提供的 html code,如下圖。


剩下要嵌入 CSS 和 Javascript code 的部分都和第一個方法相同。




延伸閱讀 : <如何修改 JavaScript>
Tag : ,

Weebly 攻略 - 使用 Parallax 功能

本文大部分摘自於  <Webnots>

Parallax 自 2014 年起開始風行於國外各網站首頁。它是一個讓你在滑動網頁時,可以將背景圖片定格在固定位置的功能。使用 Parallax 功能可以增加你的網站層次 (layer),讓你的網站設計看起來更豐富,如下圖。

Parallax 功能 。 範例頁面
Weebly 在 2016 年推出的 Weebly 4 也新增了 Parallax 功能。本篇文章將會教你要如何在 Weebly 上使用 Parallax 功能。Weebly 2016 年後推出的主題 (Theme) 都能夠讓你使用 section 功能,而透過 section 你就可以使用 Parallax。
p.s. 如果你使用的 Weebly 主題是在 2016 年以前推出的,可能就沒有辦法使用 section 功能,也就沒有辦法使用 Parallax。

有兩種方法可以在 Weebly 上使用 Parallax:

1. 在有使用 header 的頁面上,點擊 header 兩下來設定 header 的背景,接著會跳出兩個選項,選擇 Edit Background,然後選擇 Image,如下圖 1。


圖 1

接著選擇 Scrolling Effect >> Parallax,如下圖 2。

圖 2
更新後,你將發現網頁的 header 就有 Parallax 的功能了。

2. 其實在 header 以外的地方也可以使用 Parallax。在 Drag and Drop 的 section 套件也可以讓你section 上的 background image 做 Parallax 的功能,如下圖 1 和 圖 2。 

圖 1
圖 2。 Edit Background >> Image >> Add Image >> 選 Image >> Select

當然在 section 上添加 Parallax 的過程中,你會發現 section 其實有非常多的功能。我們在另外一篇文章會討論更多關於 Weebly 新推出的 section 功能


Tag : ,

Weebly 攻略 - 新推出的 section 功能

2016 年推出的 Weebly 4 有許多新功能,其中最矚目的功能就是 section 套件。section 是目前許多網頁首頁 (landing page) 設計的特色,它把網頁分成一層一層的,所以可以在一個頁面上敘述更多資訊,如下圖。

Landing Page Demo
網頁首頁有了 section 功能,就能完整得敘述一個故事,也更能說服為什麼顧客需要購買你的產品。要知道,通常新到訪的顧客只會花幾秒的時間來瀏覽你的首頁,決定要不要繼續看下去。如果你的首頁不吸引人,就算你的服務再好使用者也不會再繼續看下去。本文章將教你使用三種方法來使用 section。


1. 直接在 Weebly 上使用 section 套件

首先,在 drag and drop 上找到 section,然後拖曳到你想要的位置,如下圖。


如上圖, section 另有提供你幾種不同的 layout 選擇,有 Gallery, Team, Featured, Menu, 和 contact。你可以依據你頁面上的內容來選擇想要的 layout。在給大家一個使用 section 的案例來參考。 



2. 使用 <section>

如果你使用的 Weebly 主題 (Theme) 是 2016 年前的,可能會沒有支援 Section 功能。這樣你得親自寫 code 了。

本文將教你如何使用 HTML 5 的最新功能 <section>,來輕鬆寫出自己的第一個 Landing Page。先閱讀 <如何修改程式碼> 和 <三種修改 HTML 的技巧>,並找到下列的位置 
Theme > Edit HTML/CSS > Header Type > 你想要的 HTML 模版上。在你想要的位置上貼上以下的 code。

<section>
  // Code anything you want here
</section>

你可以使用 CSS Style 來為這個 section 製作背景顏色和圖片。


3. 使用 <div>

此方法相當類似於第二個方法,不同處在於是使用 <div>。<div> 在 <section> 推出前是用來製作 section 的主要方法,其方法也是大同小異。將下列的 code 貼在你想要的位置上。

<div>
  // Code anything you want here
</div>

========================================================================

<section> 作為專門用來製作 section 非常合適,因為它在後續維護程式上不容易和其他一堆 <div> 混淆,而且所有瀏覽器在 2014 年前後都開始支援 <section> 了。看看下一篇關於如何透過 section 套件來使用 parallax 特色




Tag : , ,

- Copyright © Hank Chan 的所思所想 - Skyblue - Powered by Blogger -