微網誌與網站最佳化簡介

數位工具應用輔導教材彙編
非營利組織共同進階課程

目錄

第一章：NPO的微型網路媒體｜Plurk介紹

2

第二章：進階影像應用實務

11

第三章：SEO in Brief

24

第四章：SEO，搜尋引擎最佳化

28

非營利組織共同進階課程!


1

第一章：NPO的微型網路媒體｜Plurk介紹
什麼是微網誌？
網誌？微網誌？傻傻分不清楚
網誌＝部落格、微網誌＝微部落格？
有多少人使用微網誌？
大家用微網誌做些什麼？

有哪些微網誌？
純文字型：Twitter
文字＋圖像：Plurk、tumbler、meme
etc（每天都有新發現！）

微網誌使用者叫做？
網友（主流媒體）
噗友、推友、咪友（自稱、互稱）
部落客、公務員、學生（真實身分）
還有你！

微網誌特徵
免費、註冊門檻低
通常對篇幅及格式設限
跳躍性即時互動、一對一或一對多
多種存取方式（手機、API...）


2

匿名/團體－行銷集體目標
非匿名使用－深化個人網路識別

微網誌能做什麼？
取代MSN狀態（正在開一個無聊的會）
隨時隨地隨意心得（搭火車真好玩）
惡搞（給我報報/台灣幹得好新聞社）
個人媒體（增加網路曝光率）
即時互動（@Qweaz 帥氣又穩重）
還有更多可能性...

微網誌社群
重度使用者
輕度使用者
尚未使用，但知道微網誌的存在

尚未使用，也無知覺



3



4



5



6



7



8

會用微網誌又怎樣
微網誌不會讓你顯得比較優越
微網誌僅是眾多網路社交工具之一
比寫部落格更快
比寫MSN更容易被看到
Follow某些insider，你比CNN更快知道世界大事（也許）

進階微網誌應用
活用第三方工具
銳推（RT）、銳噗（ReP）
＠ Someone
識別假訊息及病毒式行銷陷阱
保護自己、保護別人

微網誌工具
第三方應用軟體（圖床、手機端）
同步發文工具（ping.fm）
排名、分析網站
趣味性應用網站
還有更多怪東西正在被開發...

微網誌社群禮儀
遵循人際互動原則（即使透過網路）
不發重複、大量訊息（Spam）
不要勉強和陌生人裝熟（不當的玩笑）


9

使用同步工具需謹慎（避免重複訊息）
盡可能有效回應他人的質問或建議



10

第二章：進階影像應用實務
影像原理
1. 從畫面的內容來看：
A) 具規則特性的幾何形狀：圓形、方形等圖案所構成的畫面
B) 不規則形狀的畫面：自然界的景像較多
2. 從電腦儲存影像的角度來看：向量式、點陣式

向量式影像表示方法
1. 記錄影像的座標及圖形種類與相關參數
2. 以一個空心方塊為例：
A) 視為四條由一串的連續點所構成的直線組成的圖形
B) 若 1 代表黑色，0 代表白色則電腦儲存的結果為：
{00000000，01111110，01000010，01000010，01000010，
01000010，01111110，00000000}

點陣式
1. 不管圖形的內涵，將整個影像分割成為
如棋盤式的方格點，進而儲存每一個點的資訊
2. 以一個空心方塊為例：
A) 以 {圖形種類，起點座標，長度，寬度} 表示，結果為：
{方形，(1，1)，6，6}



11

向量式 vs. 點陣式



12

特殊的影像表示方法─碎形
幾何
利用一組具有規律形態的幾何圖案，配合數學式描
述，可用以表現任意內容的影像

數位影像常見專有名詞
1. 像素
2. 影像大小
3. 解析度
4. 深度

像素
1. 構成一張影像的基本單位就是『點』，稱之為『像素』(pixel)
2. 一張影像可以視為一堆密密麻麻相鄰的點所構成
3. 以圍棋棋盤為例：用黑、白棋子填滿棋盤方格即構成一個含19×19個像素的圖案

影像大小
1. 指一張影像的長度和寬度
2. 單位可以用像素的個數來表示

解析度
1. 單位面積所包含的像素個數
2. 在影像大小不變的情形下，所含的點愈多，點就愈小，解析度愈高，影像看起來
就愈精細。



13

深度
1. 表示一個像素所需佔用的位元數
2. 方格內可填入的顏色愈多，用來表示一個像素所需的位元數也就愈多

影像顏色的顯示原理
每一個像素必須將其所具有的色彩資訊表現出來。就單色影像而言，構成的基本顏色
就是黑白兩色，彩色影像則根據光的合成原理，由紅色、綠色、藍色等三原色構成。

色彩的表示
1. 單色 (Mono)
2. 256 灰階 (256 Gray level)
3. 16 色
4. 256 色
5. 65536 種顏色 (又稱為 Hi-Color)
6. 全彩模式 (又稱 True Color)

單色 (Mono)
1. 一個像素只有黑或白兩種情形。
2. 只需要一個位元便可以表示一個像素的顏色資訊。

256 灰階 (256 Gray level)
1. 由黑白兩色構成，但是依明暗度分成 256 個層次，因此稱為 256 灰階。
2. 一個像素要能表示 256 種不同的黑白明暗度需要 8 個位元 (28=256)



14

16 色
1. 最簡單的彩色模式。
2. 表示 16 種顏色的狀況需要 4 個位元 (24=16)
3. 調色盤。

256 色
1. 是一般彩色影像最常採用的模式。
2. 要表示 256 種不同顏色，和 256 灰階一樣，一個像素需要 8 個位元。

65536 種顏色(Hi-Color)
1. 這個模式中的每一個像素可以表現出 65536 種顏色。
2. 本模式下一個像素以 16 個位元來表示其色彩的資訊，其中紅色佔 5 個位元、藍
色佔 5 個位元、綠色佔 6 個位元，所以紅色、藍色、綠色各有 32、32、64 種
明暗度的變化總共可以組合出 65536 種顏色。

全彩模式(True Color)
1. 紅色、藍色、綠色各佔 8 個位元，因此每種原色各有 256 種明暗度的變化，可
以表現出的顏色共有 224=16777216 (16.7M，也就是一千六百多萬) 種顏色。
2. 類似電視所用的『紅、藍、綠 (RGB)』三槍投影映像管的原理，可以真實的表現
出一個點的顏色出來。

影像構成的基本要素
1. 影像的長寬所佔的像素點數。
2. 影像所採用的色彩模式。
3. 如果是 16 色或是 256 色的色彩模式時則必須記錄所採用的調色盤。



15

不同色彩模式之比較

不同解析度所產生的效果



16

關於影像品質
1. 取決於解析度和所使用的色彩模式。
2. 愈高的解析度與愈多種類的色彩模式所需要的記憶儲存容量也愈大。
3. 計算儲存影像所需的記憶空間大小：
影像儲存所需空間＝
影像高(點數)×影像寬(點數)×像素深度(位元組)

計算影像品質
以一個寬 400 像素、高 300 像素的影像為例：
單色：400×300×1/8＝15,000
位元組
全彩：400×300×3＝360,000
位元組

影像儲存格式
1. 影像壓縮原理
2. 影像壓縮方法概說
3. 影像格式

影像壓縮原理─依照壓縮方法分類
1. 無損壓縮
2. 略損壓縮



17

無損壓縮
1. 資料本身壓縮後再還原保持原貌
2. 有不得失真的限制
3. 壓縮效果有限
4. 對於文數字、程式等資料型態適用
例：某份薪資文件薪水欄記錄著 70000 元，那資料壓縮再還原就不應
變為別的數值，即使是 70001 元也不行

略損壓縮
1. 經壓縮後的資料，再還原後，內容會與原來的資料略有不同
2. 限制較為寬鬆
3. 壓縮的效果遠比無損壓縮好
4. 對於影像、視訊與聲音等媒體適用

無損壓縮

v.s 略損壓縮



18

影像壓縮方法概說
1. 變動長度編碼法 (Run Length Encoding Encoding，簡稱 RLE)
2. 離散餘弦轉換 (DCT， Discrete Cosine Transform)

變動長度編碼法
1. 原理：把資料中重複多次的內容，記錄其內容細節與出現的次數
2. 不一定能達到壓縮的效果，遇到重複性很低的資料，壓過的大小可能不減反增
3. 可以直接應用外、也可以與其他壓縮方法搭配
4. 例如：ABCDEABCDEABCDEABCDE，我們可記錄 ABCDE 出現 4 次

離散餘弦轉換
1. 將影像資料中較不重要的部分去掉，僅保留重要資訊，來達到高壓縮比的效果
2. 失真比例可以利用參數來加以控制
3. 用於 JPEG 格式之影像，當壓縮比在 5% ～15% 間時，依然能保証其適當的影
像品質

影像格式
BMP、GIF、PNG、PCD、TIF、UFO、JPG

BMP
1. 微軟公司所提出的點陣圖格式
2. 原本專門用在 Windows 作業系統
3. 支援 RGB 全彩、索引色、灰階及黑白等色彩類型



19

GIF
1. 網頁上最常用的圖形格式
2. 將原始影像資料中重複區塊編碼，然後再利用此代碼(索引值)來取代原始影像資
料，每個索引值對應到一個影像區塊
3. 有壓縮的效果
4. 可以存成透明圖、交錯圖、和動畫，且提供「非破壞性壓縮」
5. 存檔後的體積小，圖片不失真
6. 缺點：最多只能儲存 256 色的色彩數

PNG
1. 採非破壞性壓縮，減少檔案的體積時也保有影像原本的品質
2. 用來取代 GIF 格式，結合了 JPG 與 GIF 的優點
3. 主要應用於 Internet 上
4. 可存成交錯圖、透明圖
5. 支援的色彩類型有：RGB 全彩、索引色、灰階及黑白模式

PCD
1. 是柯達 (Kodak)公司制定的相片光碟 ( Photo CD) 格式 (相片光碟是直接將底片
「沖洗」成數位影像存在光碟片裡面)
2. 品質非常高，最高可達 4096×6144 個像素
3. 可以配上聲音及文字，做成多媒體光碟播放
4. 可以開啟成 1024×1536、512×768 等大小，並可用全彩、256 色或灰階來
檢視，而不影響檔案本身的內容



20

TIF
1. 影像處理界普遍支援的圖檔格式
2. 可以跨平台
3. 提供非破壞性壓縮
4. 適用於印刷輸出
5. 大多數的影像處理軟體及排版軟體都會支援 TIF 圖檔

UFO
1. PhotoImpact 專用的檔案格式
2. 其它影像處理軟體並不支援 UFO 格式
3. 支援各種色彩類型，也提供非破壞性壓縮
4. 適合用來儲存未完成的影像處理工作，或是當成已完成的作品備份

JPG
1. 以 DCT 技術將影像壓縮，壓縮時先省略影像中變化較細微的部分
2. 儲存檔案時可選擇壓縮的層級：
3. 高壓縮的方式影像的品質會降低
4. 高品質的壓縮方式，影像比較接近原來的品質，但檔案也相對較大
5. 例：原本 1 MB 的圖片，存成 JPG 檔後可能只剩幾十 K 而已
a) 優點：壓縮率驚人、適用於全彩影像的壓縮、是目前應用最為廣泛的壓縮格式
b) 缺點：屬於略損壓縮的格式、可能造成圖片失真



21

JPG不同壓縮比較

影像播放
1. 利用 Windows 系統本身的預覽功能
2. 使用 IE 瀏覽器
3. 使用 ACDSee

利用 Windows 系統本身的預覽功能
1. 在 Windows 的「我的電腦」中或是「檔案總管」瀏覽檔案資料
2. 若是影像格式的檔案，在視窗的左側可以看到小縮圖
3. 只要滑鼠點選指定的檔案就可以看到預覽的內容
4. 缺點：預覽的圖案很小，只能作概略性的查看

使用 IE 瀏覽器
1. 執行 IE 後，從主功能表的「檔案」「開啟舊檔」，可開啟要瀏覽的影像檔案


22

2. 主動執行系統已安裝的影像繪圖軟體來開啟所指定的影像圖檔

使用 ACDSee
1. 顯示目前影像檔的同時會把下一張影像先讀取到記憶體中
2. 特色為瀏覽影像非常快速
3. 提供各種不同瀏覽方式
4. 提供簡單的影像處理功能
5. 支援 QuickTime 及 Adobe 格式檔案的瀏覽



23

第三章：SEO in Brief
網站的經營三大面向
內圈：內容、商品、專題
中圈：功能、介面、客服
外圈：行銷、SEO、社群

網站內圈
內容：總網頁數
商品：活動、廣告、業務
專題：深度
討論區：活躍度

網站中圈
介面：資訊架構，眼球分析
功能：搜尋，個人化,
客服：互動，討論，貢獻

網站外圈
行銷：話題，新聞，部落客
社群：其他網站結合
SEO：議題掌控與熱度

SEO 的層次


24

內圈：網頁內容，關鍵字，tag
中圈：meta-data，總頁數，內部連結
外圈：外部連結，引用

SEO 內圈
網頁內容：如何創造內容，如何創造話題
關鍵字：如何嵌入，如何導引與聚焦
TAG：見下頁

網頁中的關鍵字標記
Em
Font：Bold，strike，Underline，Italic
H1，List，th
Title or Description：Head，Table，Div，Img，Form，Alt

SEO 中圈
總頁數：site，info
內部連結：關鍵字，Title，入口
meta-data：見下頁

SEO 外圈
外部連結
引用
社群


25

貼紙
廣告

資訊的三本體論
1. 內容
2. 描述
3. 使用

搜尋引擎的判斷
1. 內容：密度? 原創?
2. 描述：網站地圖? Meta-Data? Alt and Desc?
3. 使用：連結? 點擊?

SEO也是從這三點下手?
1. 內容 => 無障礙(白)，複製(黑)
2. 描述 => meta-data(白)，隱形關鍵字(黑)
3. 使用 => 外部連結(白)，點擊器(黑)

SEO 開始的三面向
1. 了解內容
2. 了解描述
3. 了解使用

SEO 的步驟


26

1. 了解目前狀況
2. 從目前狀況作調整(Layout)
3. 現有內容新增(Content)
4. 創做新的東西

=> 回到 1



27

第四章：SEO，搜尋引擎最佳化



28



29



30



31



32



33



34



35



36



37



38



39



40



41

微網誌與網站最佳化簡介

More Related Content

Viewers also liked

Similar to 微網誌與網站最佳化簡介

More from Andy Juang

微網誌與網站最佳化簡介