臺南市文山國小 - 線上書籍

:::

各項宣導

2025-11-17 COVID-19疫苗宣導

2025-11-11 中西區永川醫院為本市「假日輕急症中心」，專為發燒、腹痛、外傷、慢性病急性發作等輕症民眾設立～診所等級收費，看診方便、省時又省錢！輕急症病患不必再跑急診排隊等候！服務時間:每週日及國定假日上午8時至凌晨12時。服務項目:內（兒）科、外（骨）科。就診專線:06-2245771、0978089180。

2025-09-18 『114年國家防災日演習』地震速報演練，臨震應變「趴下、掩護、穩住『Earthquake Disaster Drill』。

2025-08-27 114-115年度COVID-19疫苗接種計畫

2025-05-05 最新防災資訊、緊急避難處所位置即時掌控，立即上網搜尋「消防防災e點通」

2025-02-07 開心不老、健康是寶，遵守號誌、安全美好

2025-01-04 當您心情鬱卒，想有人陪伴談心事，請撥打24小時免費安心專線1925（依舊愛我）或心理諮詢專線（06）3352982 您還好嗎？讓我們一起談談臺南市政府衛生局關心您

2024-11-28 敬請支持家庭收支調查 113年家庭收支調查自即日起開始辦理，訪查項目包括戶口組成、家庭收入、支出、設備及住宅概況，敬請受訪民眾支持配合。受訪民眾如有疑慮可洽臺南市政府主計處統計科 06-2991111轉1242(永華)請支持家庭收支調查 113年家庭收支調查自這下開始辦理，訪查項目包括戶口組成、家庭收入、支出、設備同屋下狀況，請受訪民眾支持配合。受訪民眾係有疑問做得尋臺南市政府主計處統計科 06-2991111轉1242(永華)

2024-08-07 交通安全月宣導「車輛慢看停，行人安全行」、「車輛遵守停讓，人走在斑馬線上」、「遵守號誌，綠燈秒數夠再過」、「專心過馬路，不要滑手機」、「車子在走，停讓要有」

2024-08-01 兒少性剝削防制，人人有責－兒少不自拍、不傳送、不持有兒少隱私照片；拒絕毒品危害，生活多彩多姿

2024-05-21 M痘疫情ing,不打疫苗你NG!性行為全程正確使用保險套，並搭配水性潤滑液，定期接受篩檢，愛滋及性病不會來

2024-05-13 「結核不用怕！拒絕酷酷掃！」結核病常見症狀為咳嗽2週、有痰、胸痛、食慾低、體重減輕，如持續咳嗽2週，請速就醫，即早診斷抗結核。

2024-05-07 資通安全請注意，個人螢幕要保護，密碼大小寫、英文數字或特殊字元請混用，長度需超八位元，作業系統資訊軟體需更新，機敏資料需妥藏，個資需保護銷毀勿外洩，資安事件請通報。

2024-04-25 我們都會是行人，將心比心，路口停讓從不嫌晚!

2024-03-05 裝設住宅用火災警報器，守護您的居家安全

相簿一覽

1140721-0725 AI程式課程(26)

1140715趨勢AI機器人魔法營(44)

1140630休業式(宣導)(38)

1140627送堡到偏鄉(29)

1140625期末閱讀獎勵摸彩活動(26)

1140614文山國小畢業典禮(58)

more...

7-1 如何使用Google部落格平台

7-3 用部落格平台建立網站教學 next

利用Google提昇工作效率
==============

###  Google Blogger 平台推出超貼心範本設計工具，實作改版心得

<div class="post-header" style="line-height: 1.6; margin: 0px 0px 1.5em; font-size: 14px; color: rgb(102, 102, 102); font-family: 'Times New Roman', Times, FreeSerif, serif;"><div class="post-header-line-1"><div class="post-share-buttons goog-inline-block" style="display: inline-block; margin-top: 0.5em; vertical-align: middle; position: relative;"> [<span class="share-button-link-text" style="display: block; text-indent: -9999px;">以電子郵件傳送這篇文章</span>](http://www.blogger.com/share-post.g?blogID=38564685&postID=4792324955529422382&target=email "以電子郵件傳送這篇文章")[<span class="share-button-link-text" style="display: block; text-indent: -9999px;">BlogThis！</span>](http://www.blogger.com/share-post.g?blogID=38564685&postID=4792324955529422382&target=blog "BlogThis！")[<span class="share-button-link-text" style="display: block; text-indent: -9999px;">分享至 Twitter</span>](http://www.blogger.com/share-post.g?blogID=38564685&postID=4792324955529422382&target=twitter "分享至 Twitter")[<span class="share-button-link-text" style="display: block; text-indent: -9999px;">分享至 Facebook</span>](http://www.blogger.com/share-post.g?blogID=38564685&postID=4792324955529422382&target=facebook "分享至 Facebook")<div class="goog-inline-block dummy-container" style="vertical-align: top; padding-left: 0.3em; position: relative; display: inline-block;"><div id="___plusone_0" style="margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 300px; height: 20px;"> <iframe allowtransparency="true" data-gapiattached="true" frameborder="0" hspace="0" id="I0_1372736770638" marginheight="0" marginwidth="0" name="I0_1372736770638" scrolling="no" src="https://apis.google.com/_/+1/fastbutton?bsv&source=blogger%3Ablog%3Aplusone&size=medium&width=300&annotation=inline&hl=zh_TW&origin=http%3A%2F%2Fwww.playpcesor.com&url=http%3A%2F%2Fwww.playpcesor.com%2F2010%2F03%2Fgoogle-blogger.html&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.zh_TW.422ILe_AKok.O%2Fm%3D__features__%2Fam%3DEQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTNlPNeKL1gglTKxCHhwFZSAHRPzZQ#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled&id=I0_1372736770638&parent=http%3A%2F%2Fwww.playpcesor.com&rpctoken=39385318" style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" title="+1" vspace="0" width="100%"></iframe></div> </div> </div> </div> </div><div class="post-body entry-content" id="post-body-4792324955529422382" itemprop="description articleBody" style="width: 688px; font-size: 18px; line-height: 1.4; position: relative; color: rgb(102, 102, 102); font-family: 'Times New Roman', Times, FreeSerif, serif;"> [![bloggerdraft-01 (by 異塵行者)](http://farm3.static.flickr.com/2228/4428462254_796c088849.jpg "bloggerdraft-01 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4428462254/ "bloggerdraft-01 (by 異塵行者)")

昨天的一篇Google官方新聞：「[Express yourself with the Blogger Template Designer](http://googleblog.blogspot.com/2010/03/express-yourself-with-blogger-template.html)」，可以說讓大多數Blogger用戶都興奮不已（例如：[驚為天人的Blogger templates官方模版終於測試推出](http://01mistery.blogspot.com/2010/03/blogger-templates.html)）。Blogger，目前是Google旗下的部落格平台，也是電腦玩物部落格所使用的部落格平台。**這個平台最大的優點就是簡單、好用、穩定之餘，還有強大的自訂性，而且空間流量等服務完全免費**。

不過Google Blogger強大的自訂性，也可能讓一些不熟悉網頁設計的用戶卻步。還好，Blogger注意到了這樣的問題，並持續朝著讓一般用戶更容易上手的方向改進，**這次推出的「<font color="#ff0000">Template Designer（範本設計工具）</font>」就是這樣一個讓我們這些非技術用戶痛哭流涕的好功能！**

因為從現在開始，**Blogger用戶可以在<font color="#ff0000">完全不打一個程式碼</font>的情況下，改變部落格佈景設計、規劃雙欄三欄變化、調整欄位寬度、改變內容格式**，如果再加上不久前推出的繼續閱讀、分頁網頁，還有原本就很好操作的網頁元素搬移功能，現在Blogger的強大自訂性已經建基在**<font color="#ff0000">人性化的調整工具</font>**上，而非一定要用戶自己改動版面程式碼了。

<a name="more"></a>- **Blogger：**[**http://www.blogger.com/home**](http://www.blogger.com/home "http://www.blogger.com/home")
- **Blogger in Draft 測試區：**[**http://draft.blogger.com/home**](http://draft.blogger.com/home "http://draft.blogger.com/home")
- 部落格改造相關文章：
- [Blogger Favicon 如何讓部落格有瀏覽器書籤和網址列專屬圖示？](http://playpcesor.blogspot.com/2008/10/blogger-favicon.html)
- [\[雜言\]慢半拍的電腦玩物加速記 (謎之音:終於~嘆!)](http://playpcesor.blogspot.com/2010/01/blog-post_25.html)
- [電腦玩物那些原創內容外，我所抄襲的 Blogger Hack 技巧摘錄](http://playpcesor.blogspot.com/2009/07/blogger-hack.html)
- [Google Analytics 各種流量統計數據對部落格有什麼意義？](http://playpcesor.blogspot.com/2008/04/google-analytics.html)
 
 [![bloggerdraft-15 (by 異塵行者)](http://farm5.static.flickr.com/4004/4428462570_5322a3301f_m.jpg "bloggerdraft-15 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4428462570/ "bloggerdraft-15 (by 異塵行者)")**目前「Template Designer（範本設計工具）」必 需進入「**[**Blogger in Draft**](http://draft.blogger.com/home) **」才能使用。**或許很多用戶會希望等這個功能測試穩定後才使用，不過當我昨天看到這個消息時，馬上興起了一股一定要試試看的決心XD 於是趁著夜深人靜，清晨五點半部落格訪客最少的時段，我進入了電腦玩物的部落格後台，親身體驗看看這款範本設計工具。

結果就是目前大家在這裡所看到的樣子，要改變範本，當然很多之前做的特殊修改必須重弄，倒是側邊欄元件在版面大改的過程中保留的很好。這樣一輪改變下來，僅僅花了我兩個半小時的時間，這中間還包含了舉棋不定要選擇哪種設計風格較好看的猶豫時間，**而就結論來說，我覺得這次Blogger所推出的「Template Designer（範本設計工具）」確實非常好用（這個好用有兩層意義，第一是<font color="#ff0000">功能強大而好用</font>，第二是<font color="#ff0000">無痛上手的好用</font>）。**

如果你是在Blogger新創一個部落格，利用範本設計工具來製作自己的版型，因為少掉了舊版修改所需的重新調整時間，相信大概不用30分鐘就可以搞定一個全新而漂亮的部落格版面。

下面，我就來介紹一下這次實作電腦玩物大改版的流程，並帶出「Template Designer（範本設計工具）」的相關功能。

- **<font color="#ff0000">修改版面前記得先備份：</font>**
 
 要改動部落格版面是比較有風險的動作，所以請記得先到〔版面配置〕的「修改HTML」中，選擇「下載完整檔案」，將你的模版範本備份下載，如果修改出問題，只要回到這裡上傳回復即可。基本上我自己的習慣是每個重要修改動作的前後都各備份一次。

[![bloggerdraft-18 (by 異塵行者)](http://farm3.static.flickr.com/2737/4427696065_56c60528eb_m.jpg "bloggerdraft-18 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4427696065/ "bloggerdraft-18 (by 異塵行者)")[![bloggerdraft-19 (by 異塵行者)](http://farm3.static.flickr.com/2790/4428462652_4f81b3aaa1_m.jpg "bloggerdraft-19 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4428462652/ "bloggerdraft-19 (by 異塵行者)")

- **<font color="#ff0000">進入範本修改工具：</font>**
 
 先進入「[Blogger in Draft](http://draft.blogger.com/home)」測試區，點選〔版面配置〕，然後進入最後一項功能「範本設計工具」。

[![bloggerdraft-03 (by 異塵行者)](http://farm5.static.flickr.com/4015/4427695687_114a473f4d_m.jpg "bloggerdraft-03 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4427695687/ "bloggerdraft-03 (by 異塵行者)")[![bloggerdraft-02 (by 異塵行者)](http://farm3.static.flickr.com/2739/4427695667_ea3b9226bd_m.jpg "bloggerdraft-02 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4427695667/ "bloggerdraft-02 (by 異塵行者)")

- **<font color="#ff0000">替換基礎範本：</font>**
 
 如果你是Blogger的舊用戶，那麼你的部落格可能經過修改，裝過非官方的模版，這時候你的版面會無法使用範本設計工具裡的大多數功能。

而我這次既然要利用Blogger範本設計工具好好改造一下電腦玩物，所以我就狠下心替換了這裡的預設範本，**當然，這樣的替換會導致你之前一些自訂修改功能失效，必須重新設定，但是側邊欄元件等則可以保留下來。**

這裡提供的基礎範本，主要是一些部落格版面的大方向規劃，選擇一款你喜歡的之後，重點是後面我們可以利用各種工具來進行微調。

[![bloggerdraft-04 (by 異塵行者)](http://farm5.static.flickr.com/4037/4428462302_9c6e89263b.jpg "bloggerdraft-04 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4428462302/ "bloggerdraft-04 (by 異塵行者)")

- **<font color="#ff0000">替換背景圖片：</font>**
 
 首先我們可以替換版面的背景圖片，這裡有非常多各種主題的高解析度圖片讓你隨意使用，只要點選取代即可。

[![bloggerdraft-05 (by 異塵行者)](http://farm3.static.flickr.com/2748/4427695803_fdcfd5d062.jpg "bloggerdraft-05 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4427695803/ "bloggerdraft-05 (by 異塵行者)")

- **<font color="#ff0000">手動版面配置原來這麼容易！</font>**
 
 **Blogger範本設計工具最讓我喜愛的就是它貼心又細心的「版面配置」功能**。原本我們想要把部落格從雙欄變三欄，或者一欄中有單欄有雙欄，還是說想要調整各種欄位的位置、寬度，對於不熟悉網頁程式碼如我的人來說，都不是一件簡單的事情。

**但是如果直接替換別人設計好的欄位，又總覺得<font color="#ff0000">有哪些小地方不能盡如人意</font>，而現在Blogger範本設計工具將這些動作變得很簡單，讓你可以<font color="#ff0000">輕鬆調整版面配置的各種小細節</font>！**

**進入「版面配置」，我們可以先從預設8種配置方法中**，選擇一個自己想要的規劃模式。規劃好欄位後，欄位裡的元素可以隨意移動位置。

[![bloggerdraft-06 (by 異塵行者)](http://farm5.static.flickr.com/4002/4427695819_0f39844252.jpg "bloggerdraft-06 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4427695819/ "bloggerdraft-06 (by 異塵行者)")

**接著進入「頁尾版面配置」，可以讓我們決定整個部落格最下方頁面的呈現欄位**，如果你想要在部落格尾端擺上一些資料，那麼設計成雙欄或三欄會讓呈現效果更好。

[![bloggerdraft-07 (by 異塵行者)](http://farm3.static.flickr.com/2798/4428462406_b7d0d13f2f.jpg "bloggerdraft-07 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4428462406/ "bloggerdraft-07 (by 異塵行者)")

[![bloggerdraft-16 (by 異塵行者)](http://farm5.static.flickr.com/4048/4428462614_6618f064e3.jpg "bloggerdraft-16 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4428462614/ "bloggerdraft-16 (by 異塵行者)")

而最棒的是，**我們可以在「調整寬度」裡面，<font color="#ff0000">利用「拉桿」</font>直接調整全頁面、單獨欄位的寬度**，而且下方還可以立刻看到修改後的結果！

透過人性化的欄位規劃、位置調整、寬度修改選項，我們可以在不到三分鐘的時間裡，**<font color="#ff0000">快速製造出一個自己滿意的網頁格局</font>**。而且從我上面的操作流程裡，確實一個程式碼都不需要用到。

[![bloggerdraft-08 (by 異塵行者)](http://farm3.static.flickr.com/2196/4428462422_1523b4815a.jpg "bloggerdraft-08 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4428462422/ "bloggerdraft-08 (by 異塵行者)")

- **<font color="#ff0000">微調內容格式：</font>**
 
 在範本設計工具中的「進階」項目裡，是原本就有的修改字型、顏色等功能，不過這邊提供的選項更多一點，設定上也是能夠立即預覽結果。

[![bloggerdraft-10 (by 異塵行者)](http://farm5.static.flickr.com/4068/4427695903_763623b9c9.jpg "bloggerdraft-10 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4427695903/ "bloggerdraft-10 (by 異塵行者)")

- **<font color="#ff0000">其它：</font>**
 
 另外，有鑑於規劃網頁時，你可能會想要知道別人網頁設計的寬度配置？顏色配置？以做為自己的參考。這時候可以利用「Picpick（[**PicPick 1.8 螢幕擷圖、修圖免費中文工具，教學圖片製作心得分享**](http://playpcesor.blogspot.com/2009/01/picpick-18.html)）」裡的尺規功能、色彩選擇器來輔助你完成目的。

[![bloggerdraft-09 (by 異塵行者)](http://farm3.static.flickr.com/2776/4427695885_177b596149_m.jpg "bloggerdraft-09 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4427695885/ "bloggerdraft-09 (by 異塵行者)")[![bloggerdraft-11 (by 異塵行者)](http://farm5.static.flickr.com/4023/4428462490_beb85c3977_m.jpg "bloggerdraft-11 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4428462490/ "bloggerdraft-11 (by 異塵行者)")

當全部修改完成後，**要到右上方按下〔套用至網誌〕，你的改變就會立刻生效**。當然，如果玩一玩覺得不滿意，可以選擇「返回Blogger」，那麼你的部落格就還是原本的樣子。

[![bloggerdraft-12 (by 異塵行者)](http://farm3.static.flickr.com/2753/4428462496_5f183281a1.jpg "bloggerdraft-12 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4428462496/ "bloggerdraft-12 (by 異塵行者)")

- **<font color="#ff0000">小結：</font>**
 
 [![bloggerdraft-20 (by 異塵行者)](http://farm5.static.flickr.com/4066/4427699929_27b65e640a_m.jpg "bloggerdraft-20 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4427699929/ "bloggerdraft-20 (by 異塵行者)")[![bloggerdraft-21 (by 異塵行者)](http://farm5.static.flickr.com/4001/4427699935_6c07801d3a_m.jpg "bloggerdraft-21 (by 異塵行者)")](http://www.flickr.com/photos/esorhjy/4427699935/ "bloggerdraft-21 (by 異塵行者)")

這篇文章除了介紹Blogger最新推出的「範本設計工具」外，當然也是公告大家關於電腦玩物版面更新的消息，**並且邀請大家進入電腦玩物，<font color="#ff0000">幫忙測試看看目前的版面是否穩定</font>，有沒有什麼問題？如果發現任何問題，歡迎於本文留言告知。**

我自己目前發現的問題是，在老舊的IE 6瀏覽器上，一些版面元素會顯示不出來，但還是可以正常瀏覽電腦玩物內容。另外最後順便註記一個資料，目前電腦玩物近一個月的訪問量裡，40.51%使用Firefox瀏覽器，36.36%使用IE瀏覽器，而也有18.50%使用Google Chrome瀏覽器。

</div>

:::