2016年12月16日 星期五

2016/12/15 網站建置、嵌入互動圖表

本周重點在於教導如何用WIX做出屬於自己的網站,在網站裡能夠放置自己的作品、宣傳理念,WIX幾乎是一鑑架站的好軟體!



先連上www.wix.com



  • 進去WIX頁面後,點擊中間的Start Now進行註冊:



  • 一開始先選擇你想建置的網頁類型(任選都可哦,跑出的模板不一樣)

  • 點選右邊的 Start with WIX Editor 



  • 挑選一個自己喜歡的網頁模版



  • ■ WIX網頁的編輯界面

  • 「右上角」:
  • Save(儲存目前修訂)、Preview(預覽目前編輯好的網頁)、Publish(發佈至網路)

  • 網站範例:

點選右上角的「Publish」即可發佈網頁內容,中間那條就是我們免費取得的網址。



在WIX編輯頁面中,下方這個「+」可以針對選用的模板任意修改背景、文字(可輸入中文)、新增圖片、相片集、多頁の幻燈片、連結按鈕、一般色塊、線條、形狀塊、影片、音樂、社交軟體按鈕、聯絡表格、列表清單、部落格、WIX付費商店、HTML程式碼

其實「WIX編輯頁面中最重要的功能都在這邊了」。





  • ■ 怎麼將 Piktochart 的圖表放入網頁,還能互動?

  • 要互動就是鑲嵌圖表程式碼就對了先點選編輯頁面中左邊的「+」,最下面的 More 有個「HTML Code」的選項,點擊它!

接著會出現一個灰灰的 HTML Code 的盒子


開啟我們在 Piktochart 的圖表編輯頁面


點選右上角的「Share」,下方有一個 Embed Code,點它!!!!


於是乎,這張圖表程式碼就跑出來了,我們就是需要下面這段程式碼(如果覺得圖太大/太小,可以調整Width寬度與Height高度的數字)



  • 接著把這段程式碼複製,貼到剛剛從 WIX 中開啟的 灰灰 Code 盒子裡,按下Update按鈕。

具有互動性の圖表就跑出來了!(記得要把圖表四周範圍拉到最大最滿,圖表右方才不會出現捲軸)


  • 點選右上角的「Preview」後就可以預覽互動式圖表,完成。



  • ■ 怎麼把 Piktochart 的一串圖表分開?
  • 因為 Piktochart 軟體中的一個專案(或一塊畫布)通常會分成很多塊,圖表生成程式碼並嵌入WIX網頁時,會把一整塊大畫布都輸進去,如果一次只想輸入一張圖,就要把它分成多個專案(或多塊畫布)


實例來了!
  • (下面左側有個綠色數字1,代表畫布的第一個區塊)

  • (下面左側有個綠色數字2,代表畫布的第二個區塊)

  • (下面左側有個綠色數字3,代表畫布的第三個區塊)

現在上面的三張圖表都還是在同一塊畫布上,
如果想要把圖表分開,就要開新畫布,一個畫布放一張圖!

記得!在開新畫布前,要先複製你要移轉的圖,所以如下圖先Copy那張圖表


接著在左上角的File中,點選Create New裡面的New Blank 
Canvas,開一個新專案(新畫布)


為它命名一下


新開畫布後,按下右鍵貼上你剛剛複製的圖表


確認只有一張圖表在這塊畫布上,再從右上角Share中生成程式碼,再丟進WIX裡HTML  CODE的灰色格子中!





  • ■ WIX 要如何新增網頁編輯者?

  • 先點選上面功能列表中的Site,再選 Site Manager


  • 選擇最下面的「Roles & Permissions」


  • 填入對方的Email,點選Send Invite,即可新增 Contributor (貢獻者)



這是本周所帶給大家的WIX軟體的大平台!一定要好好回家練習耶!

沒有留言:

張貼留言