數位互動文本寫作學習專區

　回到頁首　

數位互動文本step-by-step學習專區

數位文本必要技能是什麼概念？ 憑什麼，這些技能就是必要的？如何論證？ 技能的內容，要如何來提出呢？ 必要技能是指整合多媒體寫作的各式各樣「數位媒材處理能力」…

觀摩作品↖

陸續增加中…

搞定HTML／理解區塊寫作：

1. 立即體驗：30秒會寫html
2. Html基本結構及語法概念
3. 使用Html來變化文字
4. HTML／CSS基本排版語法
5. 使用HTML／CSS語法把圖片嵌到網頁
6. 我也會用三種方式使用CSS//css文字變化
7. 網頁嵌入PDF、影音、聲音、Flash、youtube影音的Html語法運用
8. Html的表格應用語法
9. 讓我們來互動吧：Html基礎互動語法
10. 搞定DIV的區塊寫作技能＆css選擇器初步// 精選案例

必要網路寫作工具：

1. 網路空間的使用：安裝 Dropbox & 建立 public folder【世新專用】
2. 新聞系全新 Ftp 搞定 安裝加使用【世新專用】
3. 使用google相薄及youtube嵌入照片、影音★強大推薦★
4. 小世界多媒體新聞也可以被按「讚」！【世新專用】
5. 使用 QR code ：平面與網路的整合傳播
6. 世新新聞系的資料交換雲【世新專用】

圖像處理基本技法：

1. 圖像編輯：理解圖像的三步驟
2. 裁切圖像以及裁切成固定大小圖像
3. 讓圖像主體站出來：「去背」、「淺景深」技法
4. 圖像的拼貼：使用ppt的快速技法
5. 圖像剪裁固定大小、去背、拼貼、透明：StylePix(free)
6. 文接圖// 文繞圖的技法
7. 5秒搞定動態圖檔 Gif 檔！
8. 背景圖的技法
9. 半透明的誘惑在背景色

影音素材基本技能：

1. 影片不轉，我來轉：影片格式的轉檔
2. 影音剪輯嚇嚇叫：剪輯、上傳、嵌入，一氣呵成
3. 有聲音的照片

網頁寫作軟體 Kompozer：

1. 網頁寫作／編輯軟體Kompozer：第一次使用就上手
2. 網路組使用KompoZer的三個基本動作
3. KompoZer的DIV & 文字處理基本功
4. 將圖片放到寫作的網頁：使用KompoZer
5. 在網頁中嵌入影音、flash：使用Kompozer
6. CSS選擇器的使用：父子、子孫、兄弟
7. 簡潔乾淨的文字列表的使用
8. 背景圖的妙用：插入背景圖
9. 對外、對內超連結//回到首頁

為什麼是學Kompozer，
而不是其他？click here!
因為，首先這是free的…

Kompozer像Word，是文書處理導向的設計；而Dreamweaver像是Indesign，是排版導向概念的設計。這是兩個不同的軟體世界！

表格排版寫作技能：

1. 表格的應用：網頁排版之靈魂
2. 表格排版寫作基本動作（一）
3. 表格排版寫作基本動作（二）
4. 表格排版寫作基本動作（三）
5. 表格排版寫作基本動作（四）
6. 表格使用基本功(5)：影像排排站呈現規律美
7. 表格使用基本功(7)：把影音貼到照片上面去
8. 快速排版寫作：表格堆積木法
9. KompoZer表格排版寫作練習題（一）

徹底理解、完全操控DIV：

1. 完全理解DIV可以做什麼變化
2. DIV的靠左、置中、靠右、上移、下移！
3. 慢工出細活：Kompozer中搞定DIV的調校
4. 自由移動 DIV：relative, absolute, translate, z-index

Image gallery／content slider的使用：

1. bxSlider 快速使用
2. 有導覽小圖的image gallery: Fotorama
3. 一直按圖就一直換圖【自製】
4. 完全DIY 快速自製 image gallery
5. 把紛雜的訊息收納起來：Accordion／content slider
6. 標題／內文式的互動開合

互動模態呈現：

1. 滑鼠移到文字或圖片上，跑出說明文字
2. 利用scroll bar創造互動文本
3. 想要表現的影音／圖像，按一下文字就跑出來
4. 超快速、好用的補充說明互動法：Hint.css Tooltips
5. 按一下就可以跑出圖片、影音的fancybox
6. 移動滑鼠就換圖
7. 讓更多細節跑出來的互動寫作：按A跑出B
8. 互動的照片效果：時間前後的比較
9. 超快速好用的image hover：共24種

創意版型寫作技能：

1. 我要快速、好看的中標版型
2. 讓文字活起來：重點引文強調的表現
3. 網頁文本的分欄及斜置
4. 搞定對話框也未免太簡單了吧！
5. PPT圖文速成大法：網路寫作功力大增祕技
6. 滑鼠到那裡，就變色到那裡：CSS hover
7. 2D變形效果
8. 資訊溢出框外的表現形態: overflow
9. 文繞圖／文繞區塊排列: float

小世界網路組寫作入門七式【搞定保證會寫互動新聞！】：

1. 用kompoZer寫作的三個基本動作
2. 將圖片放到寫作的網頁：使用KompoZer
3. 在網頁中嵌入youtube影音、flash
4. 對外、對內超連結／浮動的導覽列： 〈回到頁首〉
5. 寫出漂亮的中標和內文
6. 快速排版寫作：表格堆積木法
7. 分層文本的互動寫作技法

教學方案設計思路

多媒體互動新聞寫作常見問題集

解決瀏覽器跑出來是亂碼的問題：


本來可以正常的互動模式，在加入其他互動模組後，就動不了了？


如何快速找到原始碼中的特定內容、資料 ？

---