D-Link 駐站作家: 文/ 圖: 阿正老師
在前一篇文章中，阿正老師介紹了如何申請Weebly服務，以及Weebly的基本使用教學，這篇文章要介紹的是Weebly裡面的網頁元素，教你如何打造一個豐富又美觀的網頁！
一、Weebly的元素介紹
下面要介紹的是在Weebly免費版中就有提供的網頁元素功能，只要點選上方的「元素」分頁，就可從左上角切換四大類（基本、多媒體、收益、更多）的網頁設計元素，再將需要的元素拖曳到網頁編輯區中，就可以自行修改、設計了。
1.帶標題的段落、段落帶圖片
要在Weebly的網頁中加入文字，Weebly提供了「標題」及「段落」兩種預設的元件，兩者的差異主要在於字型的大小（當然你也可以自己去調整大小）。另外還有一種是「段落帶圖片」的元素，可以在一段文字旁加上一張圖片。
2.上傳圖片
想在Weebly中插入圖片相當方便，只要拖曳一個「圖片」元素進來，再按一下圖片即可。
插入圖片有四種選擇，「My Computer」能讓你從本機上傳圖片、「Search」可以搜尋網路上的免費圖片、「Favorites」可插入最愛的圖片，「Image URL」可插入其他網站中的圖片。
照片搜尋的功能相當方便，可以搜尋網路中有CC授權的照片，只要輸入關鍵字再按下〔Search〕按鈕即可找出你感興趣的照片，按一下照片下方的〔Add to Favorites〕即可加到最愛的照片，或是按下〔Select〕直接使用這張照片。
插入Weebly網頁中的照片，可以用Weebly內建的超方便圖片編輯器隨時來編輯，包括放大/縮小、裁切、旋轉、調整透明度、加入漸層色，或是加入圖片特效，讓你即使不用打開繪圖軟體，也能在Weebly中輕鬆來處理圖片！
3.兩列布局
如果你覺得網頁太寬了不方便編輯，那麼只要拖曳一個「兩列布局」(其實正確應該叫做「兩欄布局」才對)，即可將網頁切為左右兩半，讓你將其他的網頁元件塞進左右兩邊，並能拖曳中間的分隔線來調整欄寬。
如果想把網頁切成三欄怎麼辦？很簡單，再拖曳一個「兩列布局」元素到其中一欄中，就變成三欄啦～
4.照片庫
想在Weebly中製作一個網路相簿真的是超簡單，只要拖曳一個「相片庫」的元素進來，然後選擇多個想要上傳的照片檔就可以輕鬆搞定囉！
Weebly的相簿預設是以三欄來顯示(如下圖)，加入照片之後，除了可從上方的工具列設定列的數量(應該是「欄」才對)，還可另外增加照片，並可將每張照片做超連結，或是加入照片的註解。
5.幻燈片
「幻燈片」元素跟相簿的不同，是可以自動播放，並可在播放的照片旁邊加上其他照片的縮圖。Weebly的幻燈片元素提供了六種樣式可供選擇。
在選擇了要上傳的照片之後，你可以調整照片出現的順序(拖曳照片縮圖即可)，也可設定照片的超連結或註解。
完成幻燈片之後，你可以從上方的工具列來修改導航的類型、導航的位置、轉場的效果(只有滑動與淡入淡出兩種)，並可設定自動播放，讓訪客在開啟這個網頁之後，就能看到自動放映的幻燈片喔！
6.上傳文件
如果你想在網頁中放入文件給訪客下載，只要拖曳一個「文件」元素進來就可以了。拖曳進來後按下上方的「Upload new file」可以上傳文件（請注意要上傳的文件請用英文及數字命名，因為檔名裡面的中文字會自動被去除），然後在「文件名」的欄位中輸入檔名(可用中文)。Weebly免費版可以上傳最大5MB的檔案(但是不限制上傳數量)，Pro版則是100MB。
7.Google地圖
當我們想表示某個地點時，除了列出地址之外，最好的方式就是插入一張地圖了。Weebly可以讓你直接插入「Google地圖」元素，只要在工具列的「地址」處輸入地名或地址，並選擇地圖的大小、縮放比例，就可以在網頁中輕鬆顯示地圖了，真是方便啊！
8.YouTube影片
由於Weebly的Pro版才能直接上傳音樂或影片，因此如果想把影片加入Weebly網頁中，我們可以先將影片上傳到YouTube，然後插入一個「YouTube視頻」的元素進來，並在上方的URL欄位處貼上YouTube影片的網址，就可以在網頁裡面嵌入影片了。
9.購物車
在Weebly的「收益」類元素中，除了可以插入Google AdSense廣告碼，增加你的收益之外，還可以做簡單的線上購物車。只要選擇上方的產品元素(共四種)，並輸入你的Google Checkout或Paypal帳號，即可製作一個簡單的購物車網頁了，只不過目前只有兩種付款機制，而且在台灣還不是很流行，如果你真的要製作一個線上購物車網站，還是利用osCommerce之類的軟體來架設會比較適合。
10.RSS閱讀器
當你想將其他網站的好文章加入到自己的網頁中，只要先取得該網站的RSS網址，然後插入一個「源閱讀器」的元素，在工具列貼上RSS網址，就可以將RSS內容嵌入到Weebly網頁中。
11.插入HTML原始碼
由於Weebly提供的網頁設計元素不多(例如不能畫表格)，因此你可以利用插入HTML原始碼的方式，將一些JavaScript程式碼、或是用其他網頁設計軟體所設計的HTML程式碼給嵌入進來，讓網頁內容變得更加豐富。
12.設計問卷
在Weebly中提供了三種表單(form)：聯繫表單、回覆表單及調查。裡面的問題、文字都可以自己設計，方便你在不透漏個人Email的狀態下，就能蒐集到訪客的意見，或是設計一份問卷調查表。
插入表單之後，上方會顯示為表單設計元素，有短文本框(即單行欄位，可以輸入姓名、地址、電話…等資料)、長文本框(多行欄位，可輸入長篇的文字)、選項按鈕、下拉框、複選框(核取方塊)及上傳文件(Pro版才提供)等六種。免費版Weebly只能輸入五個問題，教育版則多了上傳作業的功能。
當你設計好表單並發布網頁之後，訪客要是填寫了內容，我們可以從Weebly後台的「表單輸入」來查看。
畫面中可看到填寫時間及內容，並紀錄了IP位址(可防止灌水)，還可按下右上角的「Export Data」將調查資料匯出成.CSV檔，方便你透過試算表軟體進行統計喔！
二、推薦朋友使用Weebly
如果你覺得Weebly相當好用，想推薦給親朋好友一塊兒來使用的話，那麼你可以點選Weebly後台上方的「我的推薦」，取得一個推薦連結，當其他人透過此連結來註冊Weebly，只要一個註冊就可以免費送你一個月的Pro版帳號喔！
在「我的推薦」下方會列出經由你推薦註冊的使用者，要取得一個月的Pro帳號，對方除了註冊Weebly之外，還必須發布一個網站才算是有效推薦，而且贈送最多6個月。你可能會問說：Pro帳號到期之後，Pro版才有的元素或是超過兩個網站會怎麼辦？我目前是還沒遇到這種情形，但是我知道的是Pro版元素只會在網頁中顯示不出來，並不會刪掉，至於超過免費版兩個網站，我猜應該是會凍結不讓你編輯吧～
※PS：如果你擔心贈送的Pro帳號過期，其實很簡單，只要你利用自己的推薦連結再註冊一個帳號(可利用其他Email信箱、郵件分身，甚至是亂填Email也沒關係)，並隨便發布一個網站，就可以又延長一個月的Pro帳號啦～
三、觀察你的網站流量
要如何得知我的Weebly網站流量有多少呢？其實很簡單，只要在Weebly後台，按下網站名稱右邊的〔統計〕按鈕，就可以進入流量統計頁面了。
裡面會顯示每天的訪客數量圖，下方還會統計熱門的頁面，以及訪客透過搜尋引擎的「搜尋詞彙」找到你的網站，還有訪客是透過哪些推薦網站連進來的數據。
當然你也可以申請「Google Analytics」(Google分析)，取得一段分析專用的JavaScript程式碼，嵌入到你的Weebly網站。
嵌入Google分析的程式碼，需填在Weebly的「設置」→「搜尋引擎優化(SEO)」，裡面的「頁腳編碼」欄位中。
看了以上的介紹，是不是對Weebly有了更完整的認識了呢？想要架設一個專屬網頁的讀者們，趕快去申請一個來試試看吧！相信Weebly一定不會讓你失望的！
*本文轉載自軟體玩家，不代表本公司立場 *
沒有留言:
張貼留言