2018年8月12日 星期日

「Goolge 協作平台」如何利用協作平台建置學校網站(3) - 常用連結


接下來就要進入協作平台的重頭戲,
如何規劃網站「公告內容」和「常用連結」 區塊,
這次將著重在「常用連結」的規劃與設計部分,
公告內容則將在下一篇來分享。


首先,點選協作平台網頁右上角的「筆」來編輯首頁



在這裡我會運用網頁編輯的「配置」來將單欄式的首頁,
更改為「右側欄」式的網頁架構,讓首頁看起來更有變化。


設定後,原本的單欄式的網頁,就會多出右側欄了


前置作業到這邊應該差不多就緒了,
就好像蓋房子一樣,目前隔間泥作都處理好了,
接下來就是要請裝潢設計師父來做設計了。

一個網站要好看基本的美工設計是必須的,
如果整個網站都只有文字堆疊而成,那將無法留住眾人的目光。

所以接下來要來設計右側欄的框架讓網站多一些變化


不知你是否有注意到文字周圍的外框,
你會好奇這個是怎麼加上的呢?
我這邊只是利用網頁編輯中的「表格」
外加「Google 繪圖」來設計想要的邊框而已。

準備好了嗎!開始來囉!一起來製作邊框吧!

1、先點「右側欄」讓滑鼠停留在右側欄位
2、點選「表格 」- 「插入表格 」- 輸入 「1欄三列」 的表格



有了表格接下來就要來設計外框了,
請開啟 Google 雲端硬碟 - 新增檔案 - Google 繪圖,



點選 Google 繪圖 左上角 - 檔案 - 頁面設定


頁面設定 選擇 自訂   200 * 40 單位改成  像素
會設成 200*40 像素的原因是:
1、協作平台的側邊欄的寬度大約是 250 像素,所以不要超過 250 即可
2、高度設為 40 像素,因協作平台表格最小高度為 19 像素,所以只要高於 19 像素即可


接下來請在 Google 繪圖中繪製想要的圖案框線,以便發佈到網路供協作平台使用。

以我這邊為例:
1、檔案名稱取名為「協作平台框線 上」
2、放大鏡顯示比例設為 100% 得到比較好的視角
3、在檔案中畫一個 「圓角矩形」圓角的大小可自行調整
4、幫圓角矩形加上陰影
5、把上半部移至底圖範圍內


完成後就可以將檔案「發佈到網路」取得並複製「檔案連結」



接下來,利用「協作平台框線 上」的 Google 繪圖檔案,
分別建立「協作平台框線 中」、「協作平台框線 下」二個副本,


重要:記得先建立副本再移動框線位置!



依據上述的步驟製作 上、中、下 三個框線檔案,
並分別取得三個「發佈到網路」的網址


 製作好之後,就可以回到協作平台的表格來使用了!
但比較特別的是這次會利用到 html 語法來改變原本表格樣式


以下就是前面建立「一欄三列」表格的 HTML 原始碼
請將紅色的部分新增到原始碼中

<center>
<table border="0" cellpadding="0" cellspacing="0" style="text-align:center">
<tbody>
<tr>
<td background="Google繪圖發佈到網路的網址" style="width: 192px; height: 33px;"></td>
</tr>
<tr>
<td background="Google繪圖發佈到網路的網址" style="width: 192px; height: 40px;">可在這裡新增圖片文字</td>
</tr>
<tr>
<td background="Google繪圖發佈到網路的網址" style="width: 192px; height: 36px;"></td>
</tr>
</tbody>
</table>
</center>



有了外框,你就可以在框框中增加你要的圖片、文字、或是連結


如果想要多個邊框也可自行複製、貼上即可


schooldemo 樣本網站:https://sites.google.com/a/ms.csps.chc.edu.tw/schooldemo/

測試學校網站:http://school.csps.chc.edu.tw/

沒有留言:

張貼留言

歡迎大家一起留言討論!