​贊助廣告

    WiX免費自助建網站-第五篇-架設官方網站實作與網頁設計規劃


    申請新的免費帳號並啟用空白範本,請先點選以下教學連結設定好後,即可進入架設官方網站實作與架構規劃部分

    WiX免費架站申請/建立範本教學

    首先我們先來談官方網站的架構該如何佈局,以下我們畫了三個區域分別為Logo、Menu選單、網頁,這是絕大部分網站都這樣規劃。WiX自助DIY架站適合中小型外銷公司/新創公司/個人自架的官方網站或部落格

    *下圖左上方Logo的部分大多使用PNG或JPEG的檔案,記得檔案和圖片尺寸不要太大 *Logo下方Menu選單的部分,一般的公司會規劃首頁、產品/服務、問與答或自己Blog、聯絡我們

    *最下方才是規劃出每一頁要顯示的頁面

    *圖片小技巧: 我們在準備圖片的時候要注意每張圖片的檔案大小、所有圖片加起來的大小,當然檔案越大使用者開網頁的速度就會越慢瞜! 一般來說圖片檔案都是使用PNG和JPEG較多

    1. 我們先把所有網頁要用到的圖片/影片/文件都上傳到主機上面

    2. Logo設置,到左側的工具列點選 "Add">>"Image" 並把圖片拉到左上角

    3. Menu選單設置,到左側的工具列點選 "Add">>"Menu" 並選你要的拉到出來

    拉出來後,我們點選箭頭處的地方來新增Menu選單的內容

    在這裡可以編輯網址名稱/SEO/選單名稱,至於SEO搜尋引擎的優化設定可以參考SEO篇教學

    完成後可以看到選單設定,切記要注意Menu選單的圖要在箭頭的線上面,這樣所有的頁面才能看到

    如何在主Menu選單下加上子Menu選單呢?

    A. 新增一個頁面後,將該頁面設定為Subpage即可

    B. 我們看一下這個範例,產品/服務下面有兩個頁面,分別為產品一和產品二,即可以變成第二張圖的樣子,並確定你的產品一和產品二頁面有在產品/服務頁面下方,這樣才會正常運作歐

    4. 文字框設置,到左側的工具列點選 "Add">>"Text" 並選你要的拉到出來,可以讓你在網頁上做出文字來

    5. 圖畫框設置,到左側的工具列點選 "Add">>"Gallery" 並選你要的拉到出來,這功能可以讓你用圖片/文字/影片像是在一塊畫布上。

    6. 相片影片輪播設置,到左側的工具列點選 "Add">>"Slideshow" 並選你要的拉到出來,這功能可以讓你用影片/圖片/文字像是在一個框上輪播。

    7. 按鈕設置,到左側的工具列點選 "Add">>"Button" 並選你要的拉到出來,這功能可以讓你做出按鈕並設定連結。

    8. Box設置,到左側的工具列點選 "Add">>"Box" 並選你要的拉到出來,這功能可以讓你做出底圖並可將文字框放到上面增加設計感。

    9. Strip框設置,到左側的工具列點選 "Add">>"Strip" 並選你要的拉到出來,這功能可以讓你做出一個框,這個框可以放圖片/文字/影片,建議可以選擇它的素材直接來改,漂亮又可以讓手機版容易瀏覽。

    10. Shape設置,到左側的工具列點選 "Add">>"Shape" 並選你要的拉到出來,這功能可以讓你給你一些基本的圖示/icon像是箭頭.......之類的。

    11-A. 影片設置,到左側的工具列點選 "Add">>"Video" 並選你要的拉到出來,這功能可以讓你給你做線上播影片類似Youtube的東西,當然它也可以連結Youtube網址。

    11-B. 音樂設置,到左側的工具列點選 "Add">>"Music" 並選你要的拉到出來,這功能可以讓你給你做線上音樂播放似Youtube播放器的東西,每個檔案限制為格式MP3不超過50MB。

    12. 社群網站連結設置,到左側的工具列點選 "Add">>"Social" 並選你要的拉到出來,這功能可以讓你FB.....等社群的物件放入網站裡面。

    13. 聯絡我們設置,到左側的工具列點選 "Add">>"Contact" 並選你要的拉到出來,這功能可以提供聯絡我們表單或是公司的地圖讓客戶看。

    14. List設置,到左側的工具列點選 "Add">>"List" 並選你要的拉到出來,這功能可以讓你做出產品或者是服務的一覽表,類似很好用的條列式整齊表格。

    15. Lightbox設置,到左側的工具列點選 "Add">>"Lightbox" 並選你要的拉到出來,這功能可以讓你做出一個廣告的彈跳視窗,有時候我們去逛網站一進去的時候就跳出廣告頁面,這就是Lightbox的功能。

    16. 部落格(Blog)設置,到左側的工具列點選 "Add">>"Blog" 並選你要的拉到出來,這功能可以讓你做出部落格(Blog)的頁面,它可以做到文章管理、最新文章顯示、網誌存檔(可排序或和月歸檔、熱門標籤),如同Google Blogger一樣的功能。

    17. 常見問與答設置,到左側的工具列點選 "Add">>"More">>"Wix FAQ" 並選你要的拉到出來,這功能可以讓你做出常見問與答的頁面。

    以上網頁的功能大概介紹完畢,我們要繼續介紹如何挑整手機版的位置,我們回到上方的工具列,點下去候選擇"Mobile Editor" 進入手機排版頁面

    *手機版規劃的小技巧: 文字不要太擠太多太小、圖片上下長度不要過長、按鈕大小適中、每個頁面的資訊盡量不要非常非常長到看不完。

    在手機排版頁面只能更改各元件的顯示位置

    最後我們已經可以做出一個完美的電腦版和手機版官方網站了,別忘記要Save(存檔)和Publish(發送)