網 頁圖文整合寫作利器
BlueGriffon
★ 免費 ★好用 ★建立數位文本寫作基礎能力
本頁課程綱要：
- 下載、解壓縮、啟動軟體
- 調整軟體使用介面設置
- 建立上手寫作的CSS預設語法
- 使用軟體寫入inline style的作用
- 建立及使用class 以及 id
下載、解壓啟動
下載：
【請按此處，來下載軟體，課堂用】。版本3.1。這是免安裝軟體版，可以將整個資料夾都copy到隨身碟，帶來帶去。每一台 電腦就都可以使用。適合學生到學校使用 任一電腦。
你如果使用自己的電腦，可以下載 install 版本。直接安裝軟體到你的電腦。【下載處】。
說明：一、紅框1處，是直接安裝到電腦的版本。
二、紅框2處，是免安裝版本，直接解壓縮即可使用。
解壓縮、啟動：
一、在下載的檔案處，按滑鼠【右鍵】。
二、在〔解壓縮全部(T)〕處，按下滑鼠【左鍵】，即進行解壓縮動作。
三、在出現的視窗，按〔解壓縮〕
四、解壓縮過程結束後，會跳出目的地資料夾視窗。對〔BlueGriffon〕資料夾按二下。
五、在資料夾內找到所要的程式，即〔bluegriffon.exe〕這一應用程式。按二下，啟動。
六、BlueGriffon的介面，就是如下。
說明：
因為每個人電腦的設定不同，所以畫面可能會有一些不同，但不影響。往下，我們會以影音的方式，來說明如何進行使用前介面設置，以及最基礎的操作。
上手寫作的預設語法
請將下方的CSS語法，Copy 到<head>xxx</head>之間。
預設的CSS語法：
<style>
div {
border: 1px dotted red;
}
p {
border: 1px dotted blue;
}
span {
border: 1px dotted green;
}
/*寫作完成後請刪除此部分*/
</style>
<style>
body {
width: 800px;
margin: auto;
border: 1px dotted darkred;
}
img {
width: 100%;
}
</style>
編輯軟體操作介面設置
一開始，你的介面設定未必和我的一樣。
為了教學上的方便和一致性，請你先跟著我調整你的軟體介面呈現樣態，以流暢整個教學學習過程。
Tools（工具）／Preferences（偏好）
一、請先到Tools（工具）按一下，再選擇Preferences（偏好）按一下。作用視窗會呈現。
二、在 Preferences（偏好）視窗中，選擇 Advanced 項。選擇所使用的語言。
一般是使用你電腦系統的語言。但在我們的教學系統中，一律使用英語。
請按選〔Use installed locale:〕，再選擇〔en-US〕 英語。最後再按下〔Use language〕。
如果你看得到繁體中文、簡體中文等其他選項，你也可以依個人與趣選用。
★注意★ 按下 Use language 後，畫面會消失一陣子，之後會重新再出現，這時你所選的語言就會被使用了。
三、重新在 Preferences（偏好）視窗中，選擇 Documents 項。再將〔Return Key in a paragraph always creats a news paragraph〕這一項，關閉。也就是把「打勾」符號取消。
四、繼續在 Preferences（偏好）視窗中，選擇 General。後續，在 Theme區，選擇 Black。畫面會變成此教學範例的色彩配置。
操作面板的設定
以下的三個操作面版是常用的，也是教學系統中一定要在軟體中呈現的。
請按下Panels，再依續完成三選項。
基礎操作及使用
請看教學影音介紹。
後補影音。