Webmaker + BlueGriffon + Github Pages - 自己的網頁自己做

本講義採   創用 CC 姓名標示相同方式分享 3.0 台灣授權
2015/5/27  雲林科技大學  3hrs
BlueGriffon + GitHub 自己的網頁自己架
Mozilla 台灣社群  /  Irvin Chen  /  irvin @ moztw.org
講義下載：http://bit.ly/yunt-web-note

BlueGriffon 是以 Firefox 瀏覽器的 Gecko 核心為基礎，所開發的網頁設計軟體，具備所見即所
得功能，完整支援現代網頁標準。
GitHub 是全世界最熱門的自由軟體專案平台，提供原始碼管理平台，可供多人協同開發。
本課程將搭配 Mozilla Webmaker 中的教材，介紹網頁設計的基礎知識，包含 HTML5、CSS3
等語法，並使用 BlueGriffon 搭配 GitHub Pages 服務，讓您能像在用 Word 一樣，輕易的學會
如何製作並架設個人網頁。

一、認識網頁的基礎結構
網頁「X光護目鏡」
1. 請打開瀏覽器，連到 XRay Goggles 網站，按下「啟動 Xray Goggles」 1
2. 等待 X光機啟動後，點擊網頁的背景圖片
3. 頁面下方會出現 <img src="/shapes.jpg">
4. 將「shapes.jpg」修改成「blur.jpg」，稍待片刻
5. 你成功修改了網頁背景！
6. 按下鍵盤左上角的 ESC 離開網頁X光機
問題：為什麼這樣可以讓網頁背景變不同？
1
https://webmaker.org/zhTW/goggles
1

使用 X光護目鏡探索常用網頁
1. 打開瀏覽器的書籤工具列：
a. Frefox: 分頁列空白處按右鍵 → 選擇「書籤工具列」
b. Chrome: 選單 → 書籤 → 顯示書籤列
c. IE: 在分頁列空白處按右鍵 → 選擇「我的最愛列」
2. 點選 X光鏡網站下方「安裝 Xray Goggles 並獲得查看…」中的 XRay Goggles
連結，或直接打開 X光護目鏡安裝網頁 2
3. 按住頁面右上方的黃色「XRay Goggles」按鈕，並拖到書籤工具列上
4. 隨便開啟日常生活中的常用網站，然後點書籤列上的 XRay Goggles 按鈕
5. 四處探索探索網站的結構吧！
使用 X光護目鏡製作個人簡介網頁
1. 請打開「小小的關於我」網頁：http://mzl.la/1Q5Oudz
2. 點書籤列上的 XRay Goggles、或頁面上的「使用 XRay Goggles 重組」按鈕
3. 一個一個把頁面上的資訊填寫好
4. 完成之後，按下右下角的「P Publish」按鈕存檔
5. （如果跳出登入 Webmaker 畫面）按下右上角的「Join Webmaker」建立帳號
6. 按下「Publish To Internet」發佈網頁
7. 超簡單個人自介網頁這樣就做好了！（記得抄下你的小小關於我網址喔）
2
https://webmaker.org/zhTW/goggles/install
2

常見的 HTML 標籤
HTML 是網頁的程式語法，用來撰寫網頁的內容；而 CSS 語法則是用來幫網頁加上樣
式。請參考附錄的「HTML 小抄」，了解以下常用的 HTML 標籤。 3
更詳細的 HTML 介紹，請參閱講義附錄「HTML 簡介」。 4
網頁基礎元素
● <html>
● <head>
● <title>
● <body>
文字
● <h1> ~ <h6>
● <p>
● <ul> <ol> <li>
● <strong> <em>
● <span>
連結與圖片
● <a>
● <img>
● <embed>*
● <iframe>*
頁面結構
● <div>
● <section>
● <nav>
● <article>*

HTML 延伸自學資料（英文）
● Erase All Kittens 互動遊戲  http://eraseallkittens.com
● Code Acadamy 互動教學：Make a Website 課程
http://www.codecademy.com/en/skills/make-a-website
3
http://mzl.la/1EsYKG4
4
http://developer.mozilla.org/zh-TW/docs/Web/HTML/Introduction
  HTML 簡介 by Mozilla貢獻者，CCBYSA 2.5 授權
3

二、BlueGriffon 網頁設計軟體
BlueGriffon（藍獅鷲）是一個開放原始碼的網頁編輯軟體，具備所見即所得功能，支援
多國語言，完整支援現代的 HTML5 + CSS3 網頁標準。
BlueGriffon 為採取 MPL 1.1 + GPL 2 + LGPL 2.1 三重授權的自由軟體，以 Mozilla
Firefox 瀏覽器的 Gecko 核心為基礎所開發。其主要開發商 Disruptive Innovations SAS
公司曾為 Linspire 專案開發著名的網頁編輯器 Nvu。BlueGriffon 專案以銷售附加元件、
與 BlueGriffon EPUB Edition 版本等方式營利。 5
下載安裝
1. 請至 BlueGriffon 網站 http://bluegriffon.org
2. 點選選單中的「Download」，並根據作業系統下載安裝程式，進行安裝
Windows 下，請選擇「download installer」，並按執行
3. 如果在執行時出現錯誤，請到 Microsoft 網站下載「Microsoft Visual C++ 2010 可
轉散發套件」並安裝 6
第一個網頁
開啟 BlueGriffon 後，會出現「BlueGriffon 提示」的使用秘訣，請先關掉。
您會看到其類似 Word 等文書處理軟體的介面。在此我們先試著編寫第一個網頁。
1. 按下工具列第一個按鈕「建立新頁面」，建立一個空白網頁
2. 確認頁面下方的狀態在「設計模式」，點選頁面的空白處
3. 輸入「我的第一個 BlueGriffon 網頁」
5
http://www.bluegriffon-epubedition.com/
6
http://www.microsoft.com/zh-TW/download/details.aspx?id=5555
4

4. 按下工具列上的存檔按鈕，輸入頁面標題「我的第一個網頁」
（頁面標題將會出現在瀏覽器的標題列與分頁列上）
5. 將「我的第一個網頁」檔案儲存到桌面
6. 此時可以點選 BlueGriffon 工具列右上方的地球圖示（在瀏覽器中預覽）
7. 如果跳出「啟動程式」對話框，請按「選擇」，瀏覽並選擇你常用的瀏覽器：
（勾選「對於 file 鏈結一律使用並記住我的選擇」，今後就不會再次詢問）
○ IE: C:Program FilesInternet Exploreriexplore
○ Firefox: C:Program Files (x86)Mozilla FirefoxFirefox
○ Chrome: C:Program Files (x86)GoogleChromeApplicationchrome
8. BlueGriffon 就會自動開啟瀏覽器，並且顯示「我的第一個網頁」了！
原始碼時間
從 BlueGriffon 下方切換到「原始碼模式」，看看網頁原始碼中，有下列哪些你在先前已
熟悉的標籤？ <html>、<head>、<title>、<body>、<p>
加入連結
回到設計模式中。此時我們要在網頁中建立一些網頁連結。
1. 回到 BlueGriffon，並切換回設計模式。
在第一行後按下 Enter 換行，並輸入「我的 Facebook」（或「我的相簿」）
2. 按下工具列「插入並編輯超連結」按鈕
3. 在「目標」中輸入想要連結的網址「http://...」
4. 在「視窗目標」中勾選「開啟連結」，並選「新視窗」，按下確定
5. 進入瀏覽器預覽，點看看連結效果
5

原始碼時間
切換到 BlueGriffon「原始碼模式」，看看連結的原始碼，以下兩個屬性是什麼意思？
<a target=”_blank” href=”http:...”>我的連結</a>
● target
● href
加入圖片
回到 BlueGriffon 中，此時我們要在網頁中放入一張照片。請先從網路上下載一張自己的
照片（到 FB 找找自己的照片？），並儲存到桌面。
小秘訣：Firefox 中可以直接把照片按住，並拖拉到桌面上。
1. 回到 BlueGriffon，並切換回設計模式。
在第一行後按下 Enter 換行，並點選工具列的「插入並編輯影像」
2. 在插入影像對話框中，點選「選擇影像」圖示，並選擇桌面上的照片
3. 在「替代文字」處，請填寫「你的ID 的照片」，並按下確定
4. 此時照片就出現在頁面上了
5. 儲存網頁，再到瀏覽器中預覽看看吧
原始碼時間
切換到「原始碼模式」，看看網頁原始碼中，插入的照片的原始碼是什麼樣子：
<img style="width: 600px; height: 400px;" alt="Irvin 的照片"
src="559236_3063717771496_484865005_n.jpg">
● alt 是什麼意思？
● （如果有調整圖片大小時）style 又有什麼作用？
6

行內樣式
網頁上現在有文字與圖片了，但是看起來還是很樸素。讓我們再加上一些樣式。
1. 將「我的第一個 BlueGriffon 網頁」選擇起來，下拉工具列的「段落」選單，選擇
「標題 1」
2. 在空白處按下 Enter 換行，並且打入「自我介紹」，並設定成「標題 2」
3. 再換行後，輸入簡短的自我介紹內容
4. 使用格式工具列上的各種按鈕，為自我介紹內容加上強調、粗體、斜體、底線、
清單等樣式
5. 儲存後再回到瀏覽器預覽看看效果如何
原始碼時間
● 切換到「原始碼模式」，看看這些樣式如何加入網頁原始碼中
● 切換回「設計模式」，試著將遊標在不同樣式的內容間移動，注意 BlueGriffon 視
窗最下方的元件層級（ <body> 〉<p> 〉<span> 之指示）如何變化
● 試著直接點選其中的某個元素，切換層級（例如上例中間的 <p>）
進一步探索樣式
1. 選擇選單的「面板」 → 「樣式設定」，打開樣式面板。
2. 將「一般、顏色、幾何結構…」等每一個子項目打開來，探索看看有哪些細部設
定可以調整。
如果想要更進一步了解各樣式的意義與用法，歡迎參考市面上 CSS 相關書籍，或網路上
的相關文件，如 Mozilla 開發者中心就有非常完整的 CSS 參考資訊。 7
7
https://developer.mozilla.org/zh-TW/docs/Web/CSS
7

結語
至此，我們已經了解如何使用 BlueGriffon 建立最基本的個人網頁。
所見即所得的網頁編輯器，在 HTML 原始碼上總是有無法良好組織之弱點。修改網頁時
，請時時切換至原始碼模式，配合上階段學習的 HTML 知識，做適當的調整。一起朝向
寫出乾淨的 HTML 原始碼而努力吧！
下個段落，我們將分享如何將這份個人網頁上傳到網路上，讓全世界都看到！
更深入了解網頁設計
如您想更進一步深研網頁編寫，歡迎更進一步了解以下兩個議題：如何寫出「語意化（
Sementic）」的 HTML 原始碼、及如何達成「網頁親和力」。
補充資料
● FLOSS Manuals BlueGriffon（英）
http://en.flossmanuals.net/bluegriffon/
● 軟體大發現 Bluegriffon 網頁設計Gimp+Inkscape+Bluegriffon
蘇世榮著，碁峰出版  http://books.gotop.com.tw/v_AEZ017000
● 真正的無遠弗屆 ── 談網頁內容的親和力 | Jedi's BLOG
http://jedi.org/blog/archives/004569.html
● 網頁親和力 Wikipedia  http://zh.wikipedia.org/zh-tw/網頁親和力
8

三、使用 GitHub Pages 發佈網頁
GitHub 是全世界最熱門的自由軟體原始碼共享平台，而除 Git 相關的原始碼管理功能外
，也提供 GitHub Pages 的網頁服務。提供簡單便利的方式建立個人與自由軟體專案網
站。
雖然這個功能通常是透過 Git，熱門的原始碼版本管理工具來使用，但使用 GitHub 提供
的線上編輯介面，今天我們不需要會 Git，也能在 GitHub Pages 上建立個人網頁。
註冊帳號
首先我們必須先到 github.com 上註冊帳號：
1. 打開 GitHub 首頁，在右方輸入英文用戶代號、電子郵件、密碼
用戶代號將會成為你的個人網頁網址：http:// username .github.io
2. 點選「Sign up for GitHub」；拉到最下方，點選「Finish sign up」
3. 兩步就完成了
認證電子郵件
GitHub 要求必須先認證電子郵件，才能建立 GitHub Pages 網頁：
1. 請到你的電子郵件信箱，找尋一封來自於 GitHub，主旨是「[GitHub] Please
verify your email 'xxx@yyy.zzz'」的信件，點選裡面的認證連結
2. 在開啟的 GitHub 業面上，按下「confirm」按鈕
如果找不到認證郵件時，請按照下列步驟重新寄送：
1. 請點選 GitHub 網站右上角的「齒輪」圖示，進入「Settings」
2. 點選左邊有驚嘆號的「Emails」
3. 按下右邊的「Send verification email」
9

建立專案
接著我們要建立一個專案，來放是個人網頁。
1. 在 GitHub 的主畫面上，點選右邊綠色的「+ New Repository」（或拉下右上方的
「+」，選擇「New repository」）
2. 專案名稱（Repository name）處，輸入「username.github.io」← 此處的
username 需要輸入你的使用者名稱
3. 按下下方綠色「Create repository」按鈕
4. 換頁後，看到「Quick setup — if you've done this kind of thing before」時，就完
成了！
上傳網頁原始碼
由於 GitHub 的空專案頁面上，沒有提供「新增檔案」按鈕，因此我們要用間接一點的
方法來建立第一個網頁檔案。
1. 點選專案頁面上「We recommend every repository include a README,
LICENSE, and .gitignore.」字樣中的任一連結
2. 將上方檔名欄位，修改成「index.html」
3. 回到 BlueGriffon，切換回原始碼模式，全選並複製 HTML 原始碼
4. 再回到瀏覽器，點選中間「Edit new file」的空白編輯區
5. 貼上從 BlueGriffon 複製的原始碼
6. 按下下方的「Commit new file」存檔，此時你會回到專案的檔案清單介面
這時候稍待片刻，你的網站就會出現在 http://username.github.io 了！
10

為什麼照片不見了？
上一個步驟中，我們將網頁的原始檔上傳到 GitHub 上（實際上是把 BlueGriffon 產生的
原始碼貼到專案中的新檔案內），但是我們沒有上傳圖片，因此圖片就不見了。
由於 GitHub 沒有提供上傳圖片檔的介面，因此我們無法透過網頁介面上傳圖片，而需
仰賴 Git 工具。如果您想要了解，可以先到下載安裝「GitHub for Windows / GitHub for 8
Mac 」，並點選專案頁面右下角「Clone in Desktop」，將專案透過 GitHub 程式同步到9
電腦中，藉此上傳圖片檔案。
你亦可使用此頁列出的其他 Git 圖形化工具，諸如 SourceTree 來管理專案。更進一10 11
步的使用方法，歡迎參考下列補充資訊的相關文章。
補充資訊
由於 Git 已成為程式開發、網頁開發不可或缺的工具，網路上有非常多相關的教學文
件。歡迎進一步閱讀，真正了解他作為檔案控管的威力，並學習 git 指令列的使用方式。
在此提供幾份參考資訊：
● 連猴子都能懂的Git入門指南 | 貝格樂（Backlog）
http://backlogtool.com/git-guide/tw/
● will 保哥的 30 天精通 Git 版本控管系列文章
http://ithelp.ithome.com.tw/question/10132053
● Code School 的「Try Git」互動教學（英）
https://try.github.io/levels/1/challenges/1
● Pro Git 中文版 https://git-scm.com/book/zh-tw/v1
8
http://windows.github.com
9
http://mac.github.com
10
http://git-scm.com/downloads/guis
11
http://www.sourcetreeapp.com/
11

Webmaker + BlueGriffon + Github Pages - 自己的網頁自己做

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (13)

Plus de Irvin Chen

Plus de Irvin Chen (16)

Webmaker + BlueGriffon + Github Pages - 自己的網頁自己做