關於部落格
新版介面測試中
  • 639147

    累積人氣

  • 115

    今日人氣

    1

    追蹤人氣

熱門標籤
夏日冰紛祭
這夏玩哪裡
夏午茶時光
天空部落
露營
台北美食
溫泉
輕旅行
六合夜市
彰化
高雄
士林夜市
日本
火鍋
宜蘭
台中
台南
苗栗
多多綠孟CI
小祿

Google Page Creator之使用報告

多網誌都有關於Google Page Creator的介紹,其實Google Page Creator就是Google最新推出的個人網頁服務,奇怪的是,現在Blog及Vlog大行其道,很多的入口網站如Yahoo及PCHome都停止了個人網頁的服務,Google卻仍在這時推出個人網頁服務,實讓人匪夷所思。原本的Google個人網頁服務需要加入Google Apps基本版才能使用,現在已經開放給所有人使用了,就像以前的Yahoo及PChome般,申請加入會員,才能開一個網頁,但是Google的個人網頁卻有容易被Google搜尋到而成為關鍵字的優點,而且更重要的是,沒有擾人的彈出式廣告或廣告橫幅,且100MB的空間也比上述的個人網頁還要大。
  本篇文章乃針對整個Google Page Creator,作統整性地分析,從使用者介面開始提起,並於後面介紹寫網站比較常用到且能在Google Page Creator上使用的HTML語法。本文共可以分為五章,整體篇章規劃如下:
第一章
  概略,說明整個Google Page Creator之情形,以及和先前Yahoo及PChome常見的個人網站相比較。
第二章
  工具列,說明Google Page Creator的介面及功用,以方便了解Google Page Creator之使用方式。
第三章
  編輯網頁,從所見即所得的編輯介面及常用的HTML語法作描述,其中也包含了影像、表格及連結方面的描述。
第四章
  其他管理,包含了網頁設定及其他管理方面。
第五章
  限制,說明了Google Page Creator的一些限制及缺點。


目錄

摘要
目錄
第一章 概略
第二章 工具列
第三章 編輯網頁
  3.1 創建網頁
  3.2 管理中心
  3.3 圖片(Image)
    3.3.1 上傳圖片
    3.3.2 網路上插入圖片
  3.4 超連結(Hyperlink)
  3.5 HTML語法編輯
    3.5.1 文字編輯
    3.5.2 圖片之設定
    3.5.3 影像地圖之設定
    3.5.4 嵌入影音檔
    3.5.5 在Google Page Creator中插入部落格首頁
    3.5.6 表格屬性
第四章 其他管理
  4.1 新增網頁
  4.2 網頁設定
    4.2.1 概述
    4.2.2 「Site name」網站名稱
    4.2.3 「Homepage」設定首頁
    4.2.4 「Image Upload」影像上傳
    4.2.5 「Adult Content」限制級內容
    4.2.6 「Hide this site」隱藏網站
第五章 限制
  5.1 檔案限制
  5.2 框架頁之限制
  5.3 不支援FTP
  5.4 模板上之限制
  5.5 頻寬之限制
寫在後面
參考資料


表目錄

表1-1 Yahoo、Google、Pchome之個人網頁比較
表3.5-1 文字字體標籤語法
表3.5-2 影像相關之標註語法
表3.5-3 標記語法說明
表3.5-4 <embed>標籤指令說明
表3.5-5 <table...>之常用標記語法
表3.5-6 <tr...>指令碼之介紹
表3.5-7 <td...>指令碼之介紹
表4.2-1 網站設定介紹


圖目錄

圖1-1 Google Page Creator之登入畫面
圖1-2 Google Page Creator登入後之說明畫面
圖2-1 尚未縮排前之文章
圖2-2 向左減少縮排後之文章
圖2-3 向右增加縮排後之文章
圖2-4 Google Page Creator工具列
圖3.1-1 創建一個新網頁
圖3.1-2 命名標題及創建網頁
圖3.1-3 編輯畫面
圖3.1-4 改變版面排編方式
圖3.1-5 視覺效果
圖3.1-6 以中文輸入製作網頁
圖3.1-7 全選畫面
圖3.1-8 預覽編輯中的網頁
圖3.1-9 存檔中之情形
圖3.2-1 管理中心下拉式選單
圖3.2-2 Grid圖形控制介面
圖3.2-3 管理中心右邊還有上傳附件的功能
圖3.3-1 從工具列中之「Image(影像)」點擊,以增加影像
圖3.3-2 增加影像之對話視窗
圖3.3-3 於Adobe Photoshop中之「影像/影像尺寸」調整影像大小
圖3.3-4 點選電腦中想要上傳的圖片
圖3.3-5 圖片上傳中的畫面,右邊「cancel upload」為取消上傳
圖3.3-6 上傳成功並點擊想要插入的圖像
圖3.3-7 拖曳圖片至想要的位置
圖3.3-8 影像編輯畫面
圖3.3-9 影像大小下拉式選單
圖3.3-10 用控制點控制裁切框之縮放
圖3.3-11 圖片後製下拉式選單
圖3.3-12 選一張圖片,並和自己上傳的影像結合
圖3.3-13 ImageShake的首頁
圖3.3-14 點選要上傳的圖片
圖3.3-15 圖片上傳成功的頁面
圖3.3-16 點擊進入查看圖片之URL
圖3.3-17 複製Direct中的網址
圖3.3-18 用網址來新增圖片
圖3.3-19 將網址貼進Google Page Creator中
圖3.3-20 成功將圖片新增至網頁中
圖3.3-21 網外連進Google Page Creator的圖片只能移除或調整大小
圖3.4-1 四種連結型式
圖3.4-2 首頁的畫面,左邊含四種不同的連結
圖3.4-3 Email的連結
圖3.4-4 連結設定(連結Google Page Creator內的網頁)
圖3.4-5 製作一個檔案,以壓縮檔為例
圖3.4-6 上傳已處理好的檔案,大小不得超過10MB
圖3.4-7 將剛上傳成功的檔案加入網頁連結中
圖3.4-8 連結設定完成
圖3.4-9 如果直接連結檔案,會出現下載檔案的視窗
圖3.4-10 網外連結之設定畫面
圖3.4-11 所有的連結完成設定
圖3.5-1 edit html按鈕
圖3.5-2 HTML語法編輯
圖3.5-3 字體顏色之HTML語法標註
圖3.5-4 從色票中選擇文字顏色
圖3.5-5 影像地圖範例,高雄捷運車站介紹網頁
圖3.5-6 準備一張可以供首頁連結之圖片
圖3.5-7 利用Adobe ImageReady製作影像地圖
圖3.5-8 影像地圖的工具
圖3.5-9 選擇ImageReady這個分頁
圖3.5-10 將圖片傳到Google Page Creator
圖3.5-11 將想要框選的地方框起,右邊並有四個數值,為連結座標
圖3.5-12 很複雜的HTML語法
圖3.5-13 要刪除的自連檔案語法
圖3.5-14 檢查編輯版面是否正常
圖3.5-15 使用「target="_blank"可能會造成語法錯誤
圖3.5-16 在Google Page Creator輸入影像地圖的語法
圖3.5-17 有正確啟動outlook,表示電子郵件部分的影像地圖有成功連結
圖3.5-18 設計另一個分頁
圖3.5-19 將「外地遊記」的標籤設定為影像地圖
圖3.5-20 輸入影像地圖的語法
圖3.5-21 滑鼠游標如果有轉換,表示影像地圖設定完成
圖3.5-22 影像地圖之連結架構
圖3.5-23 上傳影音檔,上傳速度會因檔案大小而不同
圖3.5-24 編寫影音檔的程式碼
圖3.5-25 在Mozilla Firefox上執行的結果
圖3.5-26 在IE 7.0上面執行,啟動Quick Time播放器
圖3.5-27 在Netscape Navigate 9.0版影音檔可以執行
圖3.5-28 使用Safari會出現不完全支援瀏覽器之警告
圖3.5-29 在Vista上的執行狀況
圖3.5-30 在Google Page Creator中再插入自己的部落格
圖3.5-31 在Google Page Creator中插入table語法
圖3.5-32 執行結果
圖4.1-1 創建一個新網頁
圖4.1-2 帳號沒有重複的畫面
圖4.1-3 按下「Create site」即可建立網站
圖4.2-1 網站設定功能表
圖4.2-2 將Site Name改名稱為boy
圖4.2-3 網站名稱「boy」將顯示在瀏覽器的標頭
圖4.2-4 利用下拉式選單來選擇首頁
圖4.2-5 如果網頁沒有設定公開,會出現找不到網頁的訊息
圖4.2-6 Image Upload影像上傳選項
圖4.2-7 於Photoshop中儲存一張「.png」的影像
圖4.2-8 上傳檔案至Google Page Creator
圖4.2-9 檔案仍維持「.png」檔
圖4.2-10 檔案已變成「.jpg」檔了
圖4.2-11 將限制級內容勾選
圖4.2-12 限制級網頁的警告
圖4.2-13 核取「Hide this site(隱藏網站)」
圖4.2-14 選取「Hide the site」則所有網頁都會無法存取
圖5.2-1 在FrontPage上編輯框架頁
圖5.2-2 上傳至Google Page Creator的框架頁


第一章 概略
  就如同之前常用的PChome個人網站,都要先申請一個帳號,早先要申請到GMAIL的帳號,都要得到別人的邀請函,現在已經開放一般人申請了。申請後就會得到iGoogle首頁,裡面有包含GMAIL、Blogger、...等小工具,現在已包含「Google Page Creator」。目前的Google Page Creator仍是英文的,因此對於不熟悉英文介面之使用者而言,可能有點困難。左邊列出來的三個粗黑要點是Google Page Creator的優點,右邊則為登入的表單(見圖1-1)。
Google的優點就列入圖所示,三個要點分別為:
一、不需要科技方面的知識。
  建立網頁不需要學習HTML語法或更複雜的軟體。
二、所見即所得。
  直接在瀏覽器的右方編輯您的網頁,而且可以即時預覽完成的作品。
三、不用擔心所存放的檔案。
  網頁將會存在您專屬的網址中。
  也因為如此,所以Google Page Creator的網址將會比一般免費空間短,也更好記。

圖1-1 Google Page Creator之登入畫面

  登入之後,就會看到Google Page Creator的完整介紹,包括版面配置,工具列等,但是自己覺得Google Page Creator最為人稱道的就是「Autosave」機制,如果編輯到一半電腦當機或是按到滑鼠的上一頁,致資料遺失,還是可以把資料救回來的(見圖1-2)。
  最下面可以看到的文字方塊為Google Page Creator的相關協議,將底下「I have read and agree to these Terms and Conditions(我已閱讀並同意這些協議)」勾選,最下方的「I'm ready to create my pages(我已準備創作的我網頁)」就會浮現出來,按進去開始編輯自己的網站吧(編輯會在第三章說明)!

圖1-2 Google Page Creator登入後之說明畫面

  Google Page Creator供給使用者100MB的空間,但在同一個帳號下,可以申請五個不同網址的網頁,並且空間獨立,一個網頁管理100個文件,亦可上傳100個檔案,檔案不限格式,但大小只限10MB,某論譠想把Google Page Creator當作網路硬碟來用是行不通的。而且Google Page Creator是採用HTML的方式上傳,而不是一般的FTP上傳,一次想要上傳太大的檔案,再加上伺服器在國外,可能會花費極長的時間。此外,還有一些限制,詳見第五章
  Yahoo、Google Page Creator及Pchome之個人網頁比較(參見表1-1),可以發現Google Page Creator雖然有100MB之空間,限制卻也比較多。

表1-1 Yahoo、Google、Pchome之個人網頁比較
  Yahoo Google Page Creator
Pchome
HTML 支援 部分支援 支援
動態網頁 不支援 不支援 不支援
資料庫 不支援 不支援 不支援
Javascript 支援 部分支援 支援
CSS 支援 部分支援 支援
自訂樣版 支援 不支援 支援
有無範本
網頁框架
空間大小 15MB 100MB 15MB
文件計量 僅空間限制 100個附件 僅空間限制
儲檔機制 自行存檔 自動存檔 自行存檔
推薦網頁
計數器
留言板
網頁廣告
FLASH 支援 支援 支援
表格


第二章 工具列  
  整個編輯區也和以前的Yahoo及PChome不一樣,其介面有點偏向於一般部落格的編輯畫面。首先最上面的「Back to Site Manager」是回到網站管理中心、「Publish」是設定為公開,最右邊的「Preview」是即時預覽。
橫在下方的是工具列,Google所提供的工具列非常齊全,由左至右依序為(不同螢幕解析度,出現的位置也會不同):
一、「Undo」還原
  就和一般軟體一樣,回到上一個動作,而且可以使用「Ctrl+Z」操作。例如輸  入一排英文為「doctors」,最後一個動作是輸入「s」,因此上一個動作就是  輸入「r」,因此按「Undo」後,就會變成「doctor」。
二、 「Redo」重做
  就和一般軟體一樣,回到下一個動作。如上個例子中,如果要將「s」這個字  元恢復,就按「Redo」這個按鈕。
三、「Image」影像
  將圖片或照片從自己的電腦傳到Google伺服器中。影像上傳到Google後,就可  以編輯圖文並茂的網頁了。
四、「Link」連結
  這裡的連結應該是指「Hyperlink」超連結,使用者可以將某一段文字或是某一  張圖片建立超連結,就可以和其他的網頁相連,甚至可以連結Google Page以  外的網頁。
五、「Heading」標題
  使用者可以設定網頁的標題,如次標題、子標題及正常標題。
六、「B」是「Boldface」粗體字
  將想要變粗的字元或字串反白,然後按「B」這個工具,就可以將字體加粗。
七、「I」是「Italic」斜體字
  將想要變粗的字元或字串反白,然後按「I」這個工具,所選擇的字元或字串就  會變斜體。
八、「Text Color」字體顏色
  即調整文字的顏色,Google Page Creator一共有七十種顏色可以選擇,當然也  可以利用HTML編輯(見3.5.1)。
九、「Background color」背景顏色
  調整文字的背景網點顏色,這裡指的是只有文字的背景,跟網頁整體的背景是  毫無關係的。
十、「Font」字體
  調整文字的字體,有「Times New Roman」、「Arial」、「Courier New」、  「Georgia」、「Trebuchet」、「Verdana」等六種英文字體可選擇。
十一、「Size」文字大小
  調整文字的大小,計有「Small」、「Normal」、「Large」及「Huge」四種。
十二、「Numbered list」編號項目符號(編號清單)
  將網頁內容變成有編號的條列方式呈現,如:
  1. ....
        2. ....
        3. ...
十三、「Bulleted list」項目符號清單
  將網頁內容變成有項目符號的條列方式程呈現,如:
  .First...
  .Second...
  .Third...
  .Fourth...
十四、「Indent less」減少縮排
  就是將文字向左縮排,先把想要縮排的文章選取反白,然後按一下縮排工具  ,就可以將文章向左排列,如下圖所示是還沒有點選「減少縮排」工具的文章  (如圖2-1所示)。

圖2-1 尚未縮排前之文章

  按下減少縮排後,可以看到編號項目符號整個被刪除,段落間距也稍稍擴大了一些(見圖2-2)。

圖2-2 向左減少縮排後之文章

十五、「Indent more」增加縮排
  將文章向右縮排,而且不但文章整個向右移,連文字也會變小,而且可以不只  一次的縮排。縮排的結果(如圖2-3)。

圖2-3 向右增加縮排後之文章

十六、「Align left」靠左對齊
  將文章整個靠到左邊,並切齊邊緣,但是不會有任何縮排,如果文章前方有留  空,則留空處會被文章蓋掉。
十七、「Align center」置中對齊
  將文章整個移到編輯區的正中央,除非像在寫歌或寫詞之類的,一般在編排文  章時,是不會用置中對齊的。但是像在寫表格或標題時,則會使用到置中對齊  。
十八、「Align right」靠右對齊
  和靠左對齊完全相反,文章會全部切齊右邊的邊界,但不會有任何縮排的動   作。
  圖2-4為整個編輯工具列的畫面,至於沒有介紹到的Change Look及Change Layout,到後面也會陸續介紹。橘色的部分是「Unsaved Time」,表示網頁編輯,但尚未存檔的時間,一但存檔就會變成「Saved Time」,Google Page Creator採用的是自動存檔,不用擔心檔案未存而丟失。

圖2-4 Google Page Creator工具列


第三章 編輯網頁
3.1 創建網頁
  Google Page Creator並是要讓使用者架一個網站,而是寫一個網頁,使用者可以不用花時間去記、去學繁雜的HTML語法,就可以輕輕鬆鬆寫一個網頁,因此用了許多的內定格式,這對初學者來說非常好上手,但是對比較資深的網頁設計師或使用者來說,就有綁手綁腳的感覺。
  首先,來到管理中心,上面有一個「Create a new page...(創造一個新網頁...)」的連結,按滑鼠左鍵點入(如圖3.1-1)。

圖3.1-1 創建一個新網頁

  接下來,命名網頁的標題,網頁標題一定要命名才能編輯,不過也可以隨便命名一個標題,到了完稿後,還可以再作修改,這方面不用太過擔心(如圖3.1-2)。

圖3.1-2 命名標題及創建網頁

  整個網頁的編輯方式,是採用文字方塊的方式編輯,類似Office的PowerPoint,在文字方塊上點擊滑鼠左鍵,就可以在上面打字編輯了(如圖3.1-3)。

圖3.1-3 編輯畫面

  如果不滿意文字方塊的配置,可以選擇「Change layout(改變編排方式)」,其中不能改變的是標題位置,底下的網頁主體則分和一欄式,二欄式(包含左大右小,左小右大兩種),三欄式等,所以可以很清楚的知道,網頁編輯已經被訂死了,無法自由地加入框架頁(如圖3.1-4)。

圖3.1-4 改變版面排編方式

  在視覺效果上,總共有四十一種背景,使用者也是只能用內定的背景,如果是要用自己的圖片當作背景,這裡是行不通的。原因是背景圖是受到HTML語法之限制,在之後也會介紹。要改變背景,點選「Change look(改變外觀)」(如圖3.1-5)。

圖3.1-5 視覺效果

  一切都準備就緒,就可以開始編輯自己的網頁了,經過測試,發現Google Page Creator雖然全為英文介面,而且不支援中文字型,但是對於中文輸入是沒有問題的,也就是說可以利用各種的中文輸入法打字,不會出現亂碼,只是沒有中文的字體可更換。瀏覽器的使用上,必須使用Internet Explorer 6.0以上,Mozilla Firefox必須使用1.0以上之版本始可支援(如圖3.1-6)。

圖3.1-6 以中文輸入製作網頁

  而網頁之最下面有一個欄位,上面寫著「Click here to enter your page's footer (optional).」的字樣,表示輸入頁尾的意思,這個欄位一般人都是來做版權宣告,如:「Copyright © sassow2002. All rights reserved.」這個欄位可以加也可以不加,如果沒寫,網頁就不會顯示出來。
  在前文有提到過Google Page Creator的寫法有點類似PowerPoint,是在文字方塊內作編輯的,因此每個文字方塊都是獨立的,無法以「Ctrl+A」全選所有的文字方塊,而只能全選游標所在的方格。每個方塊接為獨立,一次只能編輯一個方塊(如圖3.1-7)。

圖3.1-7 全選畫面

  編輯時,點選上面的「Preview」,就可以預覽,預覽是預覽整個頁面,而不是單一的文字方塊,使用者可以一面編輯,一面預覽,隨時了解網頁之編輯狀態。至於在預覽時會出現橘底白字的警告:「This page is a preview, and has not yet been published.」表示這是一個預覽的網頁,而且尚未設定成公開(如圖3.1-8)。

圖3.1-8 預覽編輯中的網頁

  編輯好後,只要按上一頁,就會自動存檔了,編輯時沒有任何的存檔按鈕可以存檔,但Google Page Creator是採自動存檔的方式,隨時都會存檔的(如圖3.1-9)。

圖3.1-9 存檔中之情形

3.2 管理中心  
  回到管理中心,這裡就有網頁相關的檔案資料,使用者可以在這邊整理已經編輯好的網頁,甚至還可以設定瀏覽權限,如同在編輯網誌一樣。首先看到的是「Publish」,就是把勾選的網頁設定為公開,這是全開放的,右邊的下拉式選單則有更多的操作(如圖3.2-1):
  ● Tell your friends(告訴您的朋友)。
  ● Discard unpublished changes(取消未發布的修改)。
  ● Unpublish(未公開/未發表)。
  ● Duplicate(複製成副本)。
  ● Delete(刪除)。

圖3.2-1 管理中心下拉式選單

  再往右方看,有View as: Grid/List,這是檔案的呈現方式,說明如下(如圖3.2-2):
一、Grid
    Grid是圖形化控制界面,有點類似現在的GUI(Graphical User        Interface)。而Sort: by page name| by most recent edit是指檔案排列之方式:
     1.By page name(以檔名排列):如果是英文檔案,採用檔案的第一個英文    字母依26個英文字母順序排列,即A~Z。中文檔案,則看不出排序之規     則。
  2. By most recent edit(以最近編輯之檔案排列):就是以時間做為排列之     參數,所有網頁中最近被編輯之網頁將會擺在第一順位,其餘的類推。

圖3.2-2 Grid圖形控制介面

二、List
    List是表列的方式,這種方式比Grid更能一目瞭然,欄位上有Page Name、  Status、Web Address (URL)、Last edited。
  1. Page Name(網頁名稱):
   這是Google Page Creator在List上排列的參數,排列方式和Grid是一樣的,但   是可以選擇遞增和遞減方式排列,如遞增就是A~Z,遞減就是Z~A。
  2. Status(狀態):
   狀態則是網頁的狀態,如「Unpublished(不公開)」或「Published(公開   )」。
  3. Web Address (URL)網頁位址:
   檔案所在的網址。網址會自動產生,而副檔名是網頁的標題,如果標題是中   文,在List中仍然會列出中文網址,但是在檢視時,瀏覽器會轉成英文的網   址。
  4. Last edited(最後編輯時間):
   指網頁存檔後距離現在的時間,例如網頁最後編輯時間是2008年6月17日    13:00,等到2008年6月17日18:00再去看,就會差3小時,上面就會顯示「    3 hours ago」,時間如果差距過大,就會顯示存檔的時間,而不是時間的差   距。
  管理中心的最右邊還有Uploaded stuff(上傳物件),使用者可以上傳及管理100個文件或物件,這些檔案是不限格式的,如.txt、.png、.jpeg、.html、.xml、...而且限制10MB的檔案大小,超過時,上傳會發生錯誤的警告,所以在上傳時,得壓縮一下文件大小(如圖3.2-3)。

圖3.2-3 管理中心右邊還有上傳附件的功能

3.3 圖片(Image)
  寫網頁通常都會加入圖片,而圖片就得靠上傳的方式才能使用,一般而言,利用小畫家或Photoshop就可以製作一張圖片,圖片可以是.png、.jpg、.gif等常見格式,不過曾嘗試上傳.wbmp格式,可以成功上傳,但無法開啟,只能下載。
3.3.1 上傳圖片
  在編輯工具列中,有Image的工具,點擊就可以增加一張影像(如圖3.3-1)。

圖3.3-1 從工具列中之「Image(影像)」點擊,以增加影像

  點擊之後,就會出現一個頁面,頁面之標題為「Add an Image(插入一張影像)」,左邊有兩個選項,只能選一個,「Uploaded images(上傳影像)」及「Web address (URL)自網路中插入」(如圖3.3-2)。
  一、上傳影像是指從使用者的硬碟傳一張影像到Google Page Creator,這個檔    案大小不得超過10MB,否則將會無法上傳。

圖3.3-2 增加影像之對話視窗

  二、在上傳前,用Photoshop來確認將要上傳的圖片大小,檔案大小會在      「Image Size(圖片大小)」中被顯示出來(如圖3.3-3)。

圖3.3-3 於Adobe Photoshop中之「影像/影像尺寸」調整影像大小

  三、點選想要上傳的圖片,就可以上傳了(如圖3.3-4)。

圖3.3-4 點選電腦中想要上傳的圖片

  四、影像上傳中,這時會出現讀取的畫面,旁邊還有一個「Cancel Upload」的    連結,按下去,就會停止上傳了(如圖3.3-5)。

圖3.3-5 圖片上傳中的畫面,右邊「cancel upload」為取消上傳

  五、影像成功上傳後,就可以看到圖片管理畫面多出了一張新上載的圖片(如    圖3.3-6),點擊想要的圖片,下方的「Add Image」按鈕就會浮現出來,    點擊就會插入了,同樣的,在那張圖片上快速按滑鼠左鍵兩下,也可以插    入。至於插入的位置,是以游標的位置為準。

圖3.3-6 上傳成功並點擊想要插入的圖像

  六、影像成功插入後,如果覺得影像插入的位置不是使用者想要的,可以在圖    片上點擊滑鼠左鍵,且不能放開,移動滑鼠,就可以直接拖曳圖片到適當    的位置(如圖3.3-7)。

圖3.3-7 拖曳圖片至想要的位置

  七、上傳後的影像還可以進行一些動作,如「Edit image-Remove」,Edit      image是編輯影像,Remove是刪除影像,但是只是將文章中的影像刪除,    管理中心仍保有這張圖片的。
  至於編輯影像,Google Page Creator可以簡單地作影像處理,當然網路上的影像處理並沒有專業的軟體那麼多元,但是不失為一個方便的小工具(如圖3.3-8)。

圖3.3-8 影像編輯畫面

最左邊的下拉式選單為影像尺寸,一共有五個尺寸供使用者選擇(如圖3.3-9):
   ● Small(小)。
   ● Medium(中)。
   ● Large(大)。
   ● Original size(原始尺寸)。
   ● Custom(自訂)。

圖3.3-9 影像大小下拉式選單

  再往右看去,有兩個箭頭,左邊的是讓圖片逆時針旋轉;右邊的是順時針旋轉,一次點擊皆旋轉九十度。
  Crop(裁切),在這裡是指裁切圖片,在圖片後置時,可能會想要顯示圖片某一個特別之處,或是拍出來的圖片四周有暗角,這時候就可以利用裁切工具將圖片不要的部分裁掉,在Photoshop中使用Crop,可以利用鍵盤中之Shift,搭配滑鼠左鍵執行裁切框,達到等比例裁切,此時,圖形之寬高仍和原始圖片之比例完全相同,使裁切可以更精準。Google Page Creator使用的是控制點裁切,利用位在圖片旁邊之八個控制點控制裁切框,用「Shift+滑鼠左鍵」作等比例是無效的(如圖3.3-10)。
  下方的「Crop To Selection」是指使用者已經確定圖片要裁切了,就點選「Crop To Selection」,圖片就會被裁切,而Cancel Crop是取消裁切。Google Page  Creator在圖片裁切後,如果使用者不滿意,想要重做,就可以按右下角之「Cancel」,如果按下「OK」表示確認,圖片就會被裁切,並套用在網頁上。

圖3.3-10 用控制點控制裁切框之縮放

  至於再往右的下拉式選單,有「Brightness(亮度)」、「Enhance(強化)」、「Grayscale(灰階/去色)」、「Sharpen(銳利化)」、「Mash-up(合成)」等五個選單,這些選單要搭配右方的橫向捲軸調整(如圖3.3-11)。

圖3.3-11 圖片後製下拉式選單

下方為圖片後製下拉式選單的說明:
  ● Brightness(亮度):即調整圖片的亮度,橫向捲軸愈右移,照片會愈亮。
  ● Enhance(強化):強化圖片之顏色,使圖片更加明顯。
  ● Grayscale(灰階):去除圖片之顏色,但是圖片之顏色仍會隨亮度變化,這   和黑白照片是不同的,黑白照片只有黑白,但是顏色不會隨亮度變化的。
  ● Sharpen(銳利化):強化圖片邊緣之線條,可適度修正模糊的照片,但是   太過模糊的照片用銳利化是無救的,而且太過銳利化,圖片會出現雜訊而破   壞影像品質。
  ● Mash-up(合成):用Google Page Creator所提供的圖片和使用者上傳的照   片相結合,直到整張圖片都被覆蓋為止,圖3.3-12為輕微合成的畫面。

圖3.3-12 選一張圖片,並和自己上傳的影像結合

3.3.2 網路上插入圖片
  現在要在網外插入一張圖片到網頁內,實在是一件很困難的事情,雖然各大網站都有推出超大相簿的服務,但是因為圖片外連會有著作權之爭議,再加上外連亦會增加伺服器之負擔,所以很多網站都已經不支援相片連外的服務。
  免費的網路相片資料庫,又能支援外連的,目前比較著名的是ImageShake它不用任何帳號就可以將圖片上傳,但圖片管理權就全都由網站管理了,自己沒有刪除之權,圖片到最後可能會被擠掉。但是ImageShake不失為臨時保管圖片之好方式。
  一、首先,連到ImageShake的網頁(如圖3.3-13)。

圖3.3-13 ImageShake的首頁

  二、點選想要上傳的圖片,按Browse或瀏覽按鈕,不用註冊為會員亦可以上     傳圖片的(如圖3.3-14)然後點選「Host it!!」鈕。

圖3.3-14 點選要上傳的圖片

  三、然後就會來到一個到處充滿URL的頁面,看起來是非常複雜的(如圖3.3-    15)。

圖3.3-15 圖片上傳成功的頁面

  四、參考圖3.3-15,可以看到一張剛上傳成功的圖片,點擊進去後,就會來到    一個只有廣告和剛傳上去的圖片,下面則有五個URL,頁面比上一頁還要    簡潔(如圖3.3-16)。

相簿設定
標籤設定
相簿狀態