李明哲老師多媒體互動寫作教學: BlueGriffon軟體使用及基礎操作

2019年12月7日星期六

BlueGriffon軟體使用及基礎操作

網頁圖文整合寫作利器
BlueGriffon
★ 免費 ★好用 ★建立數位文本寫作基礎能力

本頁課程綱要：

下載、解壓縮、啟動軟體
調整軟體使用介面設置
建立上手寫作的CSS預設語法
使用軟體寫入inline style的作用
建立及使用class 以及 id

在我的教學系統中，請同學先學會上列的各種設置過程以及操作手法，這是要流利使用BlueGriffon來書寫數位文本的基本動作。

下載、解壓啟動

下載：

【請按此處，來下載軟體，課堂用】。版本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〕這一項，關閉。也就是把「打勾」符號取消。