方格精選

教你用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
留言分享你的想法!
avatar-img
換日線的沙龍
19.1K會員
899內容數
自由工作者、上班族究竟要用什麼樣的心態去面對呢?來看線線怎麼說;業餘的時候,也來跟線線一起看劇看電影及看書;有空的話一起來學做出版、編輯和電子書吧!
換日線的沙龍的其他內容
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
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
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
以下就是真的非常基本功的東西。如果你有志進出版業或是自己做書,這些細節也許不是什麼太了不起的功力,但絕對能讓你事半功倍!把最基礎的東西搞定,你才不會在往前走的時候老是覺得被絆倒。
Thumbnail
專業這事從來不是「看起來」那麼一回事,每一個專業都有它們絕對專業的能力,既然要做書了,何不提升自己的專業上所需要的知識呢?
Thumbnail
專業這事從來不是「看起來」那麼一回事,每一個專業都有它們絕對專業的能力,既然要做書了,何不提升自己的專業上所需要的知識呢?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News