教你用google協作平台做網頁／給出版社的單書頁範例

前陣子看到電影導演協會的一個活動網頁，發現google協作平台的新功能，可以用來做簡單的活動頁面、簡易的個人網站，以及非常適合出版社的單書頁。

早期出版界用edm／單書頁來做行銷宣傳，因為書市越來越不好，做了單書頁也沒什麼效應，還有許許多多、各式各樣、各個不同的瀏覽器的相容問題，到後來平板、手機的出現，edm／單書頁幾乎再也沒有人做，再者是因為網路瀏覽的習慣不同，原先固定寬度的網頁，已經「不適合時代」，無法依著瀏覽工具的螢幕大小縮放的頁面，要做一個RWD（Responsive web design）的網頁耗時費工，當然也非常花錢，再加上大多數人都黏著在社群網站上，真的會想替一本書做一個edm／單書頁的出版社就少了！

我經手過的edm／單書頁（連同書展活動的網頁）應該超過一百個。一直覺得出版社沒有將自己的書籍獨立成一個網站而覺得可惜，尤其是當年每一本花錢製作的edm／單書頁，隨著書籍上市幾週後就消失在網路上，的確是會覺得做這些頁面浪費錢，並且在回找資料時，只能大量依賴網路書店、社群網站！

發現google協作平台提供新的、簡單的網頁製作功能，便拿手邊正在進行的案子元素來做一個單書頁，也隨手拿來做成教學。（感謝麥田出版提供圖文資料）如果有興趣的人想研究，這功能幾乎也能做成一個陽春但還算功能齊全的「網站」或者個人的基本文字連載之類的，這就容後再談了。

若你需要幫助或發案子給我，請寫信給我：[email protected]／若你有書籍資訊我覺得有趣，我可以幫你做，也請來信：[email protected]，附上立體書封「PNG」檔，如果有pdf給我，能做更美，以及書籍資訊和各通路的連結縮址。

接著就開始教學吧！

1.首先打開這個網址：https://sites.google.com/new 登入你的google帳號。按下「開始建立新網站」（當然你也可以玩玩範本。）

2.把「你的頁面標題」按下左邊的刪除。（這個部分要精準計算頁面的距離，太複雜故不用！）

3.輸入你的網站名稱。（若是書我會書名加作者名）

4.選擇右邊的「主題」可選主題配色和字體。可選擇系統給你的配色，或最右邊可以選自己想要的顏色，它會自訂其他深淺色。（這裡因為書封就是黑的，我就自選了黑色。）

5.回到「插入」選項，開始編排頁面。

6.在插入圖片之前，先來說明這個頁面。這個刊頭是由兩張圖片組合而成的，左邊文字、右邊書封。如果縮到手機頁面，畫面會左邊先顯示再出現右邊。這兩張圖片的比例最好計算的方式是以「書封」的圖片大小尺寸，去做一張一模一樣的文字圖檔。文字依然「不要太多」，盡可能的橫向等比例放大靠近邊界。

7.選擇右邊「插入」「圖片」「上傳」

8.按著圖片可以挪移圖片的位置。挪移時會有隔線讓你看看它在版面的位置。選取圖片上的「取消裁剪」

9.按住圖片的四個角其中一個點，以及鍵盤shift可以等比例放大縮小。

10.繼續插入另一張圖片、調整圖片大小比例。

11.調整版面背景色，選擇調色盤。這裡因為書本來就以黑色系為背景，我選擇了強調2

12.接著插入「文字方塊」，放入購書連結。選取文字後可以在下拉式選單選擇字體大小。調整文字框的大小後挪動位置。

13.再插入一段文字可以挪移至原先的文字框旁並調整大小。

14.挪動時都會有版面的格線出現，也可以再把原先購書連結拆成兩塊，此刻的版面就有三塊元素。也可互換位置，再如步驟11換背景色。

15.接著插入內容簡介的文字，將「內容簡介」換為標題字，及調整內文的粗體。

16.在文字下插入分格線

17.繼續插入「媒體評論」及「作者簡介」，中間都可以分隔線為區隔或是用背景色的替換分隔兩個區塊

18.內嵌影片輸入youtube的連結及調整底色。（影片也是我做的，下次教你用keynote做簡單的影片，也可以找我做。哈哈哈

19.接著移到最下方加入頁尾：版權宣告之類的

20.挪到上方預覽，右下有三個選項：電腦、平板、手機，稍微瀏覽發現平板的連結會掉行，再回編輯修改。

21.將連結設定成按扭，按扭全部一次設定好，可用複製成另一個區塊。再挪到上方

22.再把原來的文字連結刪除調整文字框，再回預覽看平板的版面。

23.至「頁面」選項改屬性名稱設為home（預設為「首頁」，也是可以不用改，但改成英文好一點。）

24.按下「發布」填入希望網址（書籍資料就用ISBN比較不會重複）

25.選取「複製已發佈協作平台的連結」就可以給別人看囉～

26.如果你需要修改，可以按下頁面下方的鉛筆圖樣，改完後再點選發布，會有修改前後的比較再按一次發布即可。

感謝麥田出版／張戎新作：宋氏三姊妹與她們的丈夫

寶瓶文化／沈信宏短篇小說：歡迎來我家