數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2019年12月7日 星期六

BlueGriffon軟體使用及基礎操作




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




本頁課程綱要:
  1. 下載、解壓縮、啟動軟體
  2. 調整軟體使用介面設置
  3. 建立上手寫作的CSS預設語法
  4. 使用軟體寫入inline style的作用
  5. 建立及使用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〕這一項,關閉。也就是把「打勾」符號取消。



四、繼續在 Preferences(偏好)視窗中,選擇 General。後續,在 Theme區,選擇 Black。畫面會變成此教學範例的色彩配置。




操作面板的設定

以下的三個操作面版是常用的,也是教學系統中一定要在軟體中呈現的。
請按下Panels,再依續完成三選項。






基礎操作及使用

請看教學影音介紹。

後補影音。


2019年11月23日 星期六

最具親眼性的區塊圖文佈局



每次都成功的區塊圖文佈局
網「頁」是由「區塊」組成的。

在我的教學中被強調的是:數位文本寫作中,網「頁」是由「區塊」組成的。
那麼對進行內容的填充,有沒有最基本的「文本佈局」,可以使得最常見到的 「圖文區 塊」都具有最可親的閱讀性呢?

有的!

以下,提供最基本的圖文區塊寫作最常被使用,最可被接受的圖文佈局模式。
共五步驟:

  1. 圖像
  2. 圖說
  3. 大標題
  4. 文章開始中標
  5. 內文(可以分欄更好)


#範例#



下午陽光、小孩與溫暖
有溫暖的下午時光
一種異想不到的溫暖
帶著我們走向想像的天南地北的大器
/文:作者


在七月的中旬,我來到了山上的某地。山上的風是涼的,但陽光是燙的。

陽光是漸小了,人開始出來了,小朋友早就擋不住那想逛出去的心。手和腳,並不是可以被管得住的。

下午的陽光,是具有威力的。一種小小的溫暖,早就吸引著各式各樣的存在物,包括小朋友最喜去旁著的小狗狗。

陽光從左上方照了下來,一群小朋友就那麼的圍著。我可以斷定,那狗不知小朋友在言語著什麼。但它的認真,卻超乎我的想像之外。

在七月的中旬,我來到了山上的某地。

陽光是漸小了,人開始出來了,小朋友早就擋不住那想逛出去的心。

下午的陽光,是具有威力的。一種小小的溫暖,早就吸引著各式各樣的存在物,包括小朋友最喜去旁著的小狗狗。

陽光從左上方照了下來,一群小朋友就那麼的圍著。我可以斷定,那狗不知小朋友在言語著什麼。但它的認真,卻超乎我的想像之外。
一欄版型變化, click!! 居中版型變化, click!! 字體大小變化, click!! 字型使用變化, click!!




說明範例的網頁 click!!
圖文整合排版寫作重要觀念

  1. 數位文本是螢幕閱讀,這不容易,所以文字應儘量少。往往文字擔任「摘要」的說明就 夠了,具體的內容細節,應由圖像或影音來補 充。這正是圖文整合文本寫 作的特色。【範例, click!
  2. 因為文字量少,而且是擔任摘要型的功能,所以閱讀的速度就不用被強調。在排版上,往往可使用降低閱讀速度的排版方式。
  3. 在文字字型上可使用無襯線體(sans-serif),例如黑體。在排版對齊上,可以使用居中對齊。在字行的長度上,可以加大長度,沒關係。



襯線體


字有凸出的三角形。例如細明體。
在傳統印刷中,襯線字體用於正文印刷,因為它被認為比無襯線體更易於閱讀,是比較正統的。


無襯線體


字沒有凸出的三角形。例如黑體。
無襯線體用於短篇和標題等,能夠引起讀者注意,或者提供一種緩慢的閱讀氣氛。


參考資料:
Golombisky, K. & Hagen, R.著/林安琪、于冠雲譯。(2012)。《設計之鑰》。台北市:碁峰。



2019年2月17日 星期日

超快的添增圖表(with infogram)




快速在網頁上添增圖表

視覺化閱讀,是網路文本呈現去「表現意義的」重要技巧之一。可以說,可能是「很重要」的意義表達方法。

但,你會弄出一個漂亮的圖表嗎?不會。

對,所以,有沒有一種方法,它可以比較快而方便,同時是較為「user-friendly」的可以操作出來圖表來?

有的。這裡介紹使用 infogram 這個網站。使用它快速地建構出圖表來。
然後,我們再教你,如何把在 infogram 網站裡所做出來的圖表,嵌到你的網頁裡。


範例:





使用 infogram 建構圖表:


在 infogram 中建置圖表




將圖表的語法,嵌入到你 的網頁

操作過程方法如下:

一、找到分享按鈕




二、填入圖表標題、按下「Embed」(嵌入)鍵



三、找到嵌入碼(注意是第2個選項),copy



四、貼入到你的網頁原始碼中(Kompozer為例,【插入】─【HTML】)