從零開始:用 ITE2 NAS 架網站 (中) – 設定網頁

我們在 從零開始:用 ITE2 NAS 架網站 (上)  中,將我們的行動網站架設完畢了,接下來我們就要開始設定網頁的內容了! 設定網頁 會在中篇及下篇為各位進行介紹。首先,就從網站的第一個門面,也就是首頁開始介紹如何操作吧!我們的範例網站會以「攝影工作室」進行製作哦!

基本網站、網頁資訊設定

我們登入至 PDM 中,進到 「設定 → Power Box → 行動網站」,選擇「後台管理」,接著點選畫面右下角的 「開啟編輯模式」。

設定網頁 - 後台管理

 

我們先從頁籤 「網站設定」開始編輯,設定您的網站標題 (例如:HOTO 攝影工作室),接著如果您有申請 Google GA 追蹤碼,可以將追蹤碼加入後再點選「儲存」。

加入 GA 追蹤碼

 

什麼是 GA 追蹤碼? 該怎麼使用?

GA 追蹤碼是 Google 所提供的工具,可以檢視網站的流量等資訊,您可以在 Google Analytics 的網站中,為自己的網站申請一組 GA 資源,並從左下角的齒輪找到「追蹤資訊 → 追蹤程式碼」,接著複製「全網站代碼」並貼到剛才提到的 Google GA 追蹤碼欄位 即可。詳細的使用方式可參考 Google Analytics 網站說明。

取的 GA 追蹤代碼

 

接著回到頁籤「頁面管理」,並選擇「編輯資訊」,輸入頁面名稱(也就是網址上會出現的名稱)以及頁面標題 (此處我們將第一頁設為 首頁 index),接著按下「確認修改」。

編輯頁面資訊

 

設定網頁

接著我們要開始設定網頁內容,請點選「編輯頁面」。

設定網頁

 

首先要上傳工作室的形象 Logo,點選內建範例 Logo 左側的齒輪,接著點選「選擇檔案」,選擇好您要上傳的 Logo 檔後,按下 「儲存」。

上傳網站 LOGO

 

接著修改首頁大圖,選擇大圖左側的圖片鈕,接著點選「選擇檔案」,選擇好您要上傳的大圖後,按下 「儲存」。接著雙擊標題以修改標題及副標題文字。

編輯大圖

 

接著往下滑開始新增網站的內容,首先要新增一些 「關於我們」的文字訊息,讓瀏覽者可以快速瞭解工作室主旨。
首先我們把預設頁面的內容刪除,接著點選 淺灰色欄位的 圖片 icon 以上傳圖片,點選「選擇檔案」以選擇您要上傳的工作室形象圖後,按下 「儲存」。
接著把右側的預設文字刪除,輸入一組具有品牌形象的文案吧!

編輯網站內文及圖片

 

接著我們可以陸續新增其他圖片及文案,如果覺得預設頁面的欄位太多的話,可以按 深灰色欄位的 垃圾桶 icon 刪除欄位哦!

刪除欄位

 

接著若要放上一些工作室的服務項目,但發現範例區塊的寬度比例不符合您的需求該怎麼辦呢?
這時可以透過淺灰色欄位的 減號 icon 縮短區塊寬,或是用加號 icon 增加區塊寬。

設定區塊寬度

 

調整完欄寬後,我們再依工作室的服務項目加上對應的字及圖片就可以完成。

編輯圖片及項目符號

 

想要放更多工作室形象圖片,我們可以繼續修改下方的範例,若遇到多餘的區塊,也可以點選淺灰色欄位的 垃圾桶 icon ,將區塊刪除。

刪除區塊

 

接著重新調整區塊寬度並放上工作室形象圖片,就可以完成。

上傳圖片

 

接著可以把公司的地圖資訊放到網站中,讓客戶方便找到工作室位置,請到 GOOGLE 地圖 點擊工作室地標後,按下「分享」,並在「嵌入地圖」的頁籤中,複製該 HTML。
再回到網頁的編輯頁面中,點擊區塊中的原始碼按鈕 <> ,並貼上剛才複製的 HTML 並按下「確定」。

在網站上嵌入 Google 地圖

 

接著我們可以加入一些詳細的工作室資訊(例如電話、營業時間等),如果發現區塊不足,可以使用深灰色欄位的 加號 icon 新增區塊,並填入相關資訊。

在網站上新增公司住址、營業時間、電話等資訊。

在編輯頁面時,若遇到要調整欄位順序時,可以長壓 深灰色欄位的 十字 icon ,接著就可以拖曳移動順序。

拖曳欄位順序

編輯完後,別忘了按一下右下角的「發佈」,以儲存製作成果哦!

以上是網頁內容的製作方式,在後續的下篇中,我們將介紹網頁下方的按鈕應用方式,以及其他頁面的建置方式。


發佈留言