5分鐘打造你的專業免費專屬網站—Weebly線上網頁服務(下)

0
31,073 人次

上次阿正老師介紹了免費的線上網頁服務—Weebly,能讓你在短短不到5分鐘之內,就申請並架設一個自己的專屬網站,今天要繼續更詳細的介紹Weebly裡面的網頁設計元素,例如相簿、幻燈片、YouTube、商品列表、聯繫表單…等,讓你能設計出內容更豐富的網頁,還沒使用過Weebly的玩家們,一定要申請一個來玩玩看喔!

(本文與D-Link 享樂數位生活合作並同步刊載)

前一篇文章中,阿正老師介紹了如何申請Weebly服務,以及Weebly的基本使用教學,這篇文章要介紹的是Weebly裡面的網頁元素,教你打造自己的網頁喔!

Weebly

※沒看過本篇上集的讀者們,請先閱讀《5分鐘打造你的專業免費專屬網站—Weebly線上網頁服務(上)》,裡面有介紹如何申請Weebly,及Weebly的重要功能

一、Weebly的元素介紹

下面要介紹的是在Weebly免費版中就有提供的網頁元素功能,只要點選上方的「元素」分頁,就可從左上角切換四大類(基本、多媒體、收益、更多)的網頁設計元素,再將需要的元素拖曳到網頁編輯區中,就可以自行修改、設計了。

1.帶標題的段落、段落帶圖片

要在Weebly的網頁中加入文字,Weebly提供了「標題」及「段落」兩種預設的元件,兩者的差異主要在於字型的大小(當然你也可以自己去調整大小)。另外還有一種是「段落帶圖片」的元素,可以在一段文字旁加上一張圖片。

image

2.上傳圖片

想在Weebly中插入圖片相當方便,只要拖曳一個「圖片」元素進來,再按一下圖片即可。

image

插入圖片有四種選擇,「My Computer」能讓你從本機上傳圖片、「Search」可以搜尋網路上的免費圖片、「Favorites」可插入最愛的圖片,「Image URL」可插入其他網站中的圖片。

image

照片搜尋的功能相當方便,可以搜尋網路中有CC授權的照片,只要輸入關鍵字再按下〔Search〕按鈕即可找出你感興趣的照片,按一下照片下方的〔Add to Favorites〕即可加到最愛的照片,或是按下〔Select〕直接使用這張照片。

image

插入Weebly網頁中的照片,可以用Weebly內建的超方便圖片編輯器隨時來編輯,包括放大/縮小、裁切、旋轉、調整透明度、加入漸層色,或是加入圖片特效,讓你即使不用打開繪圖軟體,也能在Weebly中輕鬆來處理圖片!

image

3.兩列布局

如果你覺得網頁太寬了不方便編輯,那麼只要拖曳一個「兩列布局」(其實正確應該叫做「兩欄布局」才對),即可將網頁切為左右兩半,並可拖曳中間的分隔線來調整欄寬。

image

如果想把網頁切成三欄怎麼辦?很簡單,再拖曳一個「兩列布局」元素到其中一欄中,就變成三欄啦~

image

4.照片庫

想在Weebly中製作一個網路相簿真的是超簡單,只要拖曳一個「相片庫」的元素進來,然後選擇多個想要上傳的照片檔就可以輕鬆搞定囉!

image

Weebly的相簿預設是以三欄來顯示(如下圖),加入照片之後,除了可從上方的工具列設定列的數量(應該是「欄」才對),還可另外增加照片,並可將每張照片做超連結,或是加入照片的註解。

image

5.幻燈片

「幻燈片」元素跟相簿的不同,是可以自動播放,並可在播放的照片旁邊加上其他照片的縮圖。Weebly的幻燈片元素提供了六種樣式可供選擇。

image

在選擇了要上傳的照片之後,你可以調整照片出現的順序(拖曳照片縮圖即可),也可設定照片的超連結或註解。

image

完成幻燈片之後,你可以從上方的工具列來修改導航的類型、導航的位置、轉場的效果(只有滑動與淡入淡出兩種),並可設定自動播放,讓訪客在開啟這個網頁之後,就能看到自動放映的幻燈片喔!

image

 

6.上傳文件

如果你想在網頁中放入文件給訪客下載,只要拖曳一個「文件」元素進來就可以了。拖曳進來後按下上方的「Upload new file」可以上傳文件(請注意要上傳的文件請用英文及數字命名,因為檔名裡面的中文字會自動被去除),然後在「文件名」的欄位中輸入檔名(可用中文)。Weebly免費版可以上傳最大5MB的檔案(但是不限制上傳數量),Pro版則是100MB。

image

>>請翻到下一頁:還有6個Weebly元素