個別頁面建立
個別頁面建立
左圖是圖書與資訊處的頁面樣式,如果你想用 Google Sites 做出一個類似的網頁,那麼你要先把想像畫面,轉化為實際每一個區塊所用的模組。
例如左圖中粉紅色區塊,就可以直接用 圖片輪播界面 來使用。
其他很多區塊也只需要使用文字方塊再搭配對齊方向或按鈕就可以編排完成。
設計網頁時,常會在頁面的最上方給予一張切合主題的照片來豐富頁面樣式,在內建的主題裡每一頁頭部都有照片,那如果自訂樣式沒頭部的照片怎麼辦?
只需要兩步驟
新增文字方塊並給予標題名稱
修改文字方塊的區段顏色 -> 點圖片 -> 使用內建或者上傳自己的圖片
這樣新增完之後,他會當作此文字方塊的底圖,上面仍可以讓你安插其他物件。
點選 Google Sites 插入頁籤下的 圖片輪轉模組
選取你要輪播的照片
插入並調整顯示大小
Google Sites 內建了六種版面樣式,如果你的目的是做圖文條列說明,您可以從中選取適合的版面插入。
例如:插入多個照片與說明,或者近期焦點新聞
系統用自動在你於 google sites 編輯畫面的焦點物件下方插入你要新增的元件,如果沒焦點物件會自動插入到最下方。
選取物件後,他會出現一些小藍點,你可以藉由這些元件的藍點調整該元件區塊的大小
如果該區塊是圖片,請注意長寬比例,比例不對可能會導致部分圖片被遮罩掉
使用 點、拖拉 的方式可以調整 元件在版面上的位置,google sites 會出現很多條 直線,供您對齊元件所使用
因為RWD 顯示的緣故,位置都是採相對位置,而不是絕對的在哪個 pixel 位置上
有些元件如果不好拖拉變更位置,可以找 6個小點 的提示符號,以拖拉他的方式進行調整。
只要你在網頁頁面中有使用 標題 文字,就可以利用 目錄的功能自動的幫你整理出類似 wiki 的目次。
標題文字 在 HTML 語法就是 <h2>...</h2> 的語法
簡單的說就是網頁內容,要有區分出 標題 與 一般文字。
要新增一個文字區塊,只需要點擊右邊的文字方塊按鈕即可。
另外可以使用的方式就是套用顏色底圖,作為大區塊的分隔,以本頁為例就是用紫色的文字方塊來做為段落的標記
另外什麼都不寫的 文字區塊可以用來做版面留白 使其清晰版面之用。
使用 圖片 按鈕來新增網頁上的圖片、圖示
重點:每張圖片的長寬比可能跟顯示在版面上的不同,會造成圖片部分區域可能被遮罩
建議:調整大小時,拖拉右下角的圓點,並且搭配鍵盤的 shift 鍵,這樣就能配合圖片的比例做等比的縮放
插入影片的方式有:使用內嵌、使用右邊 youtube 功能,也可以使用版面配置再將類型改為 youtube
建議直接使用插入 youtube ,因為用內嵌的方式,可能會有長寬比與RWD的問題
嵌入 Google Maps 方式
插入地圖
搜尋您想要呈現的地點
搭配 Ctrl 鍵做適當縮放
可收合的群組,常運用再說明區塊或特殊操作指引區塊,對於一般人不一定要看的部分,例如訂票系統的操作說明。
訂票操作步驟說明
步驟一:請輸入身分證字號。 身分證字號共11碼,前兩碼代表英文字母。 ...
步驟二:請輸入乘車日期。 ...
步驟三:請輸入車種代碼或車次代碼。 ...
步驟四:請輸入起站代碼。 ...
步驟五:請輸入迄站代碼。 ...
步驟六:請輸入訂票張數,每人每天最多可訂6張。
步驟七:請輸入系統所播報之驗證碼。
步驟八:系統將播報訂票是否成功。
註:上面文字來源 https://www.railway.gov.tw/tra-tip-web/tip/tip00C/tipC12/view52
點擊右邊 可收合群組按鈕,就會自動挑出 標題區塊 與 內容區塊,使用者可以透過點擊 標題區塊來打開。
某些元件、模組,也具有收合功能,一樣會提示 可收合,只是預設是關閉的。
Google Sites 的網頁內容製作完成後會存在 Google Docs 中,再以網頁的方式讓使用者可以瀏覽。Sites 整合了 Google 的相關資源,讓你的網頁可以更容易的運用到 Google Docs 與 Drive 的內容。
所以當你想要以 Google Sites 作為大量資料的展示,或者演講的時候用,就可以直接插入 Google 的內容,把 Sites 當成框來去展示個別檔案的內容。
每一頁是由上而下的許多區塊組成,每一個區塊裡面還可以放其他元件,區塊與元件都可以調整大小與改變位置,可以點選元件後找到左圖這標示點,就可以進行位置拖拉的移動
版面除了可以使用空白的文字方塊來做為留白,在元件裡還有分隔線可作為區分之用