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

2015年2月12日 星期四

Go to basic:表格(三)







一定要會的表格排版寫作基本動作(三)

透 過CSS來控制「格/td」,可以有很多排版變化的可能。
加 上邊框
給 它陰影效果
可以來位移
也可以旋轉哦

這樣可以為「規律感」的表格,帶來版面上的變化。

2015年重新推出有關表格寫作的基本動作系列。


影 音教學內容:
  1. 使用CSS直接控制儲存格。
  2. 使用kompozer直接控制。
  3. 利用class來產生陰影及旋轉效果。
  4. 利用位置功能來形成創意版型。
  5. 混搭DIV & 1px 技法。



影音教學範例的 CSS:

<style type="text/css">

.word2015013001 {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6;
}

.word2015013002 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6;
}

.sha01 {
-webkit-box-shadow: 2px 2px 2px 2px gray;
}

.rot01 {
-webkit-transform: rotate(-8deg);
}

</style>





一 種空間

靜靜的安靜,
是得來不易之覺悟?
貓兒,
是生活的過著的大師。








  夜市的來來往往,是好味道的來源。川流不息的聲響,讓空氣很開放。

注意事項:
當最下方的文字DIV,往上拉時,如果背景色出不來,或文字出不來。沒關係,你把文字DIV設成在版面的最上層,就可以顯現了。
請將向上拉升的Class,設定到文字DIV裡。

<style>
/*將媒材物件接到版面最上層*/
.positionuptop {

position: relative;
z-index: 99;

}
 
</style>



表格寫作相關主題:
  1. 慢 工出細活:搞定DIV的調校
  2. 快 有變化的版型:表格+CSS:圓角、陰影、旋轉、移動
  3. 讓 表格很聽話:把表格當格線用
  4. 塊 狀版型寫作實作練習一
  5. table + div + click互動的整合性排版寫作



沒有留言:

張貼留言