[Windows 10 NAS] 用五分鐘,快速設計一頁式網頁

我們在之前的文章有提到 Windows 10 NAS 的 PDM 管理介面可以幫助使用者快速建立一頁式網頁(行動網站) ,幫助使用者快速建立個人、企業、產品的形象網站,免去申請域名、建置伺服器、……等工作,本篇將教使用者如何在五分鐘內,快速設計一頁式網頁。

 

行動網頁功能設定說明:

[ Windows 10 NAS ] 行動網站 功能介面說明

[Windows 10 NAS] 行動 網站 後台管理說明

 

一頁式網頁: 基本設定

當我們登入至 PDM ,並連到【Powerbox / 行動網站 / 後台管理 】點擊進到頁面時,請點選右下角的編輯鈕開啟編輯模式。

一頁式網頁: 基本設定

 

接著就可以開始進行頁面的編輯。

頁面的編輯

 

首先要進行首頁的 LOGO 更換,點選 LOGO 旁的齒輪符號,並點選【選擇檔案】。

點選【選擇檔案】

 

選擇本機中的 LOGO 檔後,按下【開啟】再【儲存】,即可更換好 LOGO。

更換 LOGO

 

我們可以看到 LOGO 已經更新上去了
(建議: 通常 LOGO 的檔案大小可以抓在 5 KB 左右,太大的話會影響網頁讀取的效能)。

LOGO 的檔案大小可以抓在 5 KB 左右

 

接著點選畫面左邊的圖片 ICON ,以更換背景大圖。

更換背景大圖

 

選擇檔案後,按下【開啟】並【儲存】,即可將大圖更換完畢。

大圖更換完畢

 

接著我們就可以看到首頁的大圖已經更換成新圖片了!

首頁的大圖已經更換成新圖片

 

接著我們要修改網站的標題,也就是瀏覽器的頁籤上會顯示的名稱,請點選右上角的齒輪進行編輯。

修改網站標題

 

設定完網站標題後,按下【儲存】。

儲存網站標題

 

接著,就可以看到網站標題已完成更改。

網站標題已完成更改

 

再來可以開始編寫網站的主體文案,直接點擊文字框就可以編輯網站大圖中的標題和特色描述。

編寫網站的主體文案

 

接著,可以點選上方的【欄位按鈕】自由新增欄位區塊。

點擊即可新增。

【欄位按鈕】自由新增欄位區塊

 

我們也可以新增不同的欄位,並使用欄位內的編輯器調整文字樣式 或是 插入圖片。

編輯器調整文字樣式 或是 插入圖片

 

一頁式網頁: 功能嵌入

我們也可以將外部的功能嵌入至 一頁式網頁中,例如,我們可以將網路上的影片選擇用【嵌入程式碼】的方式,複製以取得影片的嵌入程式碼。

一頁式網頁: 功能嵌入

 

接著,在欄位編輯器中,選擇【原始碼】並將剛才取得的影片原始碼貼上。

選擇【原始碼】並將剛才取得的影片原始碼貼上

 

貼上後,您就可以看見影片已經嵌入至網站中了。

您就可以看見影片已經嵌入至網站中了

 

也可以將電子地圖的嵌入程式碼,加入至網頁中。

將電子地圖的嵌入程式碼,加入至網頁中

 

一樣選擇【原始碼】後,再貼上剛才複製的原始碼,按下【確定】即可完成。

剛才複製的原始碼,按下【確定】即可

 

網站上就可以有地圖的相關資訊了!地圖功能適合民宿、小型商店、餐廳的網站置入,讓客戶可以快速瞭解如何前往。

網站上就可以有地圖的相關資訊

 

最後,可以在網站底部加入其他超連結按鈕。

在網站底部加入其他超連結按鈕。

 

可以新增像電話、電子郵件或是其他的超連結,讓使用者在看完資訊後可以進行下一步行為(例如:看菜單、訂位、……等)。

新增像電話、電子郵件或是其他的超連結

 

最後,可以點擊預覽觀看編輯的結果。如果確認完成後,按下右下角的【儲存】即可。

點擊預覽觀看編輯的結果

 

使用者就可以在對應的 DDNS(網址) 下瀏覽頁面,而且 Windows 10 NAS 的行動網頁功能為「響應式網頁設計」,因此用手機觀看也不會有障礙哦!

Windows 10 NAS 的行動網頁功能為「響應式網頁設計」,因此用手機觀看也不會有障礙

 

更多操作說明,可參考以下連結:

詮力科技 行動網站功能介紹


發佈留言