Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,054 views

Published on

本課程將搭配 Mozilla Webmaker 中的教材,介紹網頁設計的基礎知識,包含 HTML5、CSS3 等語法,並使用 BlueGriffon 搭配 GitHub Pages 服務,讓您能像在用 Word 一樣,輕易的學會如何製作並架設個人網頁。

Webmaker + BlueGriffon + Github Pages - Making your own webpage
Using Mozilla Webmaker X-Ray Goggles to discover website, learn making Webpage with BlueGriffon and put it online on Github Pages.

YouTube 錄影 - https://youtu.be/2ekcPVjTUr4
課程講義原始檔 - http://bit.ly/yunt-web

Published in: Internet
  • Be the first to comment

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

  1. 1.     本講義採    ​創用 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. 請打開瀏覽器,連到 X­Ray Goggles  網站,按下「啟動 X­ray Goggles」 1 2. 等待 X光機啟動後,點擊網頁的背景圖片  3. 頁面下方會出現 ​<img src="/shapes.jpg">  4. 將「​shapes.jpg​」修改成「​blur.jpg​」,稍待片刻  5. 你成功修改了網頁背景!  6. 按下鍵盤左上角的 ESC 離開網頁X光機  問題:為什麼這樣可以讓網頁背景變不同?  1  ​https://webmaker.org/zh­TW/goggles  1
  2. 2.     本講義採    ​創用 CC 姓名標示­相同方式分享 3.0 台灣​ 授權  使用 X光護目鏡 探索常用網頁  1. 打開瀏覽器的書籤工具列:  a. Frefox: 分頁列空白處按右鍵 → 選擇「書籤工具列」  b. Chrome: 選單 → 書籤 → 顯示書籤列  c. IE: 在分頁列空白處按右鍵 → 選擇「我的最愛列」  2. 點選 X光鏡網站下方「安裝 X­ray Goggles 並獲得查看…」中的 ​X­Ray Goggles  連結,或直接打開 X光護目鏡安裝網頁  2 3. 按住頁面右上方的黃色「X­Ray Goggles」按鈕,並拖到書籤工具列上  4. 隨便開啟日常生活中的常用網站,然後點書籤列上的 X­Ray Goggles 按鈕  5. 四處探索探索網站的結構吧!  使用 X光護目鏡 製作個人簡介網頁  1. 請打開「小小的關於我」網頁:​http://mzl.la/1Q5Oudz 2. 點書籤列上的 X­Ray Goggles、或頁面上的「使用 X­Ray Goggles 重組」按鈕  3. 一個一個把頁面上的資訊填寫好  4. 完成之後,按下右下角的「P ­ Publish」按鈕存檔  5. (如果跳出登入 Webmaker 畫面)按下右上角的「Join Webmaker」建立帳號  6. 按下「Publish To Internet」發佈網頁  7. 超簡單個人自介網頁這樣就做好了!(記得抄下你的小小關於我網址喔)  2   ​https://webmaker.org/zh­TW/goggles/install  2
  3. 3.     本講義採    ​創用 CC 姓名標示­相同方式分享 3.0 台灣​ 授權  常見的 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貢獻者​,​CC­BY­SA 2.5​ 授權  3
  4. 4.     本講義採    ​創用 CC 姓名標示­相同方式分享 3.0 台灣​ 授權  二、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
  5. 5.     本講義採    ​創用 CC 姓名標示­相同方式分享 3.0 台灣​ 授權  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
  6. 6.     本講義採    ​創用 CC 姓名標示­相同方式分享 3.0 台灣​ 授權  原始碼時間  切換到 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
  7. 7.     本講義採    ​創用 CC 姓名標示­相同方式分享 3.0 台灣​ 授權  行內樣式  網頁上現在有文字與圖片了,但是看起來還是很樸素。讓我們再加上一些樣式。  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
  8. 8.     本講義採    ​創用 CC 姓名標示­相同方式分享 3.0 台灣​ 授權  結語  至此,我們已經了解如何使用 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
  9. 9.     本講義採    ​創用 CC 姓名標示­相同方式分享 3.0 台灣​ 授權  三、使用 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
  10. 10.     本講義採    ​創用 CC 姓名標示­相同方式分享 3.0 台灣​ 授權  建立專案  接著我們要建立一個專案,來放是個人網頁。  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
  11. 11.     本講義採    ​創用 CC 姓名標示­相同方式分享 3.0 台灣​ 授權  為什麼照片不見了?  上一個步驟中,我們將網頁的原始檔上傳到 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

×