vocus logo

方格子 vocus

方格精選

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

更新 發佈閱讀 6 分鐘

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

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

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

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

若你需要幫助或發案子給我,請寫信給我:sunline.liu@gmail.com/若你有書籍資訊我覺得有趣,我可以幫你做,也請來信:sunlinebook@gmail.com,附上立體書封「PNG」檔,如果有pdf給我,能做更美,以及書籍資訊和各通路的連結縮址。

接著就開始教學吧!

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

raw-image


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

raw-image


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

raw-image


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

raw-image


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

raw-image


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

*文字不要太多的原因是,當等比縮到手機頁面時,字太多、太小會幾乎無法讀。書封和文字,最好都不要有底色,存為PNG檔。以利於配色。

raw-image


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

raw-image


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

raw-image
raw-image


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

raw-image


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

raw-image


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

raw-image


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

raw-image


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

raw-image
raw-image


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

raw-image
raw-image
raw-image


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

*文字若過多,段落與段落可以多空一行。才不會太擠。

raw-image


16.在文字下插入分格線

raw-image


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

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

raw-image
raw-image

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

raw-image


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

raw-image
raw-image


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

raw-image
raw-image
raw-image
raw-image

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

raw-image
raw-image
raw-image


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

raw-image
raw-image


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

raw-image


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

raw-image


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

raw-image

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

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

留言
avatar-img
換日線的沙龍
24.6K會員
951內容數
自由工作者、上班族究竟要用什麼樣的心態去面對呢?來看線線怎麼說;業餘的時候,也來跟線線一起看劇看電影及看書;有空的話一起來學做出版、編輯和電子書吧!
換日線的沙龍的其他內容
2025/02/24
看到一個推理故事用一本書來講這種關於版面與閱讀之間的關係,雖然故事我沒有特別喜歡,我也會力薦所有做書的人都應該讀這本書!
Thumbnail
2025/02/24
看到一個推理故事用一本書來講這種關於版面與閱讀之間的關係,雖然故事我沒有特別喜歡,我也會力薦所有做書的人都應該讀這本書!
Thumbnail
2025/01/06
自出版,是一件非常有意思的事!做書也是。但完全的先決條件就是「你想做,你去找方法做,你去學習怎麼做,你要非常的積極!」自己做不來,找人做,找人做之前,把「你該做的部分做好!」積極的!沒有人應該為了你想做的事替你積極,如果你都意興闌珊了,誰在意你呢!
Thumbnail
2025/01/06
自出版,是一件非常有意思的事!做書也是。但完全的先決條件就是「你想做,你去找方法做,你去學習怎麼做,你要非常的積極!」自己做不來,找人做,找人做之前,把「你該做的部分做好!」積極的!沒有人應該為了你想做的事替你積極,如果你都意興闌珊了,誰在意你呢!
Thumbnail
2024/09/28
不要邊抱怨自己工作要死要活、加班加得昏天暗地,老闆還在那邊靠北自己的產值不夠,又邊用蠢方法工作,然後覺得自己社畜得要死,好像全天下只有自己忙得要死要活還沒人感謝。嗯,有時候只得說:用錯的方法工作,加班,真的是,自找的!
Thumbnail
2024/09/28
不要邊抱怨自己工作要死要活、加班加得昏天暗地,老闆還在那邊靠北自己的產值不夠,又邊用蠢方法工作,然後覺得自己社畜得要死,好像全天下只有自己忙得要死要活還沒人感謝。嗯,有時候只得說:用錯的方法工作,加班,真的是,自找的!
Thumbnail
看更多
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
這個時代確實是一個「人人想做什麼」就有機會完成什麼的時代,但前提是,總是要花一點時間主動去了解吧!不要被動的等人教(還不爽別人給自己意見)這就枉費活在這個時代,也浪費了自己相信自己做得到的意念了!
Thumbnail
這個時代確實是一個「人人想做什麼」就有機會完成什麼的時代,但前提是,總是要花一點時間主動去了解吧!不要被動的等人教(還不爽別人給自己意見)這就枉費活在這個時代,也浪費了自己相信自己做得到的意念了!
Thumbnail
做電子書從文字到圖片,其實就要花非常多的時間去處理文字的細節、圖片的尺寸規格,對於「沒有資料整理與分類」概念的人來說,也許「先學會分類和把弄成書的內容整理得有條有理」才是最先決的條件了!
Thumbnail
做電子書從文字到圖片,其實就要花非常多的時間去處理文字的細節、圖片的尺寸規格,對於「沒有資料整理與分類」概念的人來說,也許「先學會分類和把弄成書的內容整理得有條有理」才是最先決的條件了!
Thumbnail
去除文字格式 當你在製作稿子時需要一段文字時,通常是自己用打字的方法,再套用粗體、斜體之類的特效。 但當你在網路看到一段話時,有時懶得打時你會拷貝下來時,也把當時作者設定的格式也帶到了Word上。這時還得需要重新設定為內文(多一道工),就可以使用記事本這個工具(如下圖) 後再貼入排版工具裡,即可使
Thumbnail
去除文字格式 當你在製作稿子時需要一段文字時,通常是自己用打字的方法,再套用粗體、斜體之類的特效。 但當你在網路看到一段話時,有時懶得打時你會拷貝下來時,也把當時作者設定的格式也帶到了Word上。這時還得需要重新設定為內文(多一道工),就可以使用記事本這個工具(如下圖) 後再貼入排版工具裡,即可使
Thumbnail
不論你是要做紙本書、電子書,你只要擁有「做好上面幾點的資料處理整合」的能力,那麼,你應該就能好好的做出一本書了;不論是之後你要自己排版/製作電子書或是請別人排版/製作電子書,都能幫助自己有更好的邏輯,不會東漏西漏的總是遇到問題需要再花時間去解決。
Thumbnail
不論你是要做紙本書、電子書,你只要擁有「做好上面幾點的資料處理整合」的能力,那麼,你應該就能好好的做出一本書了;不論是之後你要自己排版/製作電子書或是請別人排版/製作電子書,都能幫助自己有更好的邏輯,不會東漏西漏的總是遇到問題需要再花時間去解決。
Thumbnail
寫作的第一步:制定清晰的目標 出書?這聽起來好像有點難!不用擔心,因為學習如何出書只是一個步驟一步驟的過程。對於初學者來說,寫作的第一步就是制定清晰的目標- 這可以協助你從弱勢前進。先想想你要怎麼表達所有你想要傳遞的資訊和概念,然後找出你想要產生的影響力。通過明確地定義你的目標,你可以大幅度地
Thumbnail
寫作的第一步:制定清晰的目標 出書?這聽起來好像有點難!不用擔心,因為學習如何出書只是一個步驟一步驟的過程。對於初學者來說,寫作的第一步就是制定清晰的目標- 這可以協助你從弱勢前進。先想想你要怎麼表達所有你想要傳遞的資訊和概念,然後找出你想要產生的影響力。通過明確地定義你的目標,你可以大幅度地
Thumbnail
我從 2019 年開始在網路上發表文章,到現在已經累積超過 800 篇的文章。多數的文章都是有共同主題的,只需要將文章進行排序與編修,就可以發表成一本「現實生活中特定問題」的小書。但問題來了:整理書籍的文章很簡單,但後續的編輯與排版非常困難。經過大量嘗試錯誤後,我找到自己最有效率的電子書出版工作流。
Thumbnail
我從 2019 年開始在網路上發表文章,到現在已經累積超過 800 篇的文章。多數的文章都是有共同主題的,只需要將文章進行排序與編修,就可以發表成一本「現實生活中特定問題」的小書。但問題來了:整理書籍的文章很簡單,但後續的編輯與排版非常困難。經過大量嘗試錯誤後,我找到自己最有效率的電子書出版工作流。
Thumbnail
一個好 Banner ,如何令人留下深刻的印象並且心動點擊呢?如果不會設計,也能做出吸引人的 Banner 嗎?為了幫助創作者們能為自己的好內容做出簡單的視覺設計,格編與設計師合作,推出這篇基礎的教學文。
Thumbnail
一個好 Banner ,如何令人留下深刻的印象並且心動點擊呢?如果不會設計,也能做出吸引人的 Banner 嗎?為了幫助創作者們能為自己的好內容做出簡單的視覺設計,格編與設計師合作,推出這篇基礎的教學文。
Thumbnail
以下就是真的非常基本功的東西。如果你有志進出版業或是自己做書,這些細節也許不是什麼太了不起的功力,但絕對能讓你事半功倍!把最基礎的東西搞定,你才不會在往前走的時候老是覺得被絆倒。
Thumbnail
以下就是真的非常基本功的東西。如果你有志進出版業或是自己做書,這些細節也許不是什麼太了不起的功力,但絕對能讓你事半功倍!把最基礎的東西搞定,你才不會在往前走的時候老是覺得被絆倒。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News