*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2015年1月31日 星期六

Go to basic:表格(二)







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

表格的使用是數位文本排版寫作的重要基本寫作技巧。
老師累積了數年的教書經驗,看著同學可能常見的錯誤,以及因為基本功不好所導致的「創意」上的不完整。
現在,
2015年重新推出有關表格寫作的基本動作系列。
【按 我復原 click!】

請注意:
在一個表格中,將「幾個格子變為一格」的功能,最好只使用一次。不然,易於出現無法控制之情況。
如需要較複雜之版型,請使用多個表格(都可以使用上述功能),再將其積堆起來,就可以了。



影 音教學內容:
  1. 文字是泥土;圖像是磚塊。
  2. 把表格的幾格變為一格。
  3. 調整格與格之間的寬度。
  4. 表格與單元格的快速CSS套用。
  5. 在表格內插入背景圖。



影音教學範例的 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;
}

/* 插入背景圖 */
.bacimg20170622 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 800px;
background-position: left -200px top -200px;
}
</style>


表格寫作範例一:



天空的顏色決定了黃昏的溫度!燈光的開啟,是對夜晚的承諾。沈沈的重量!

↑ 請按這裡看上範例影音教學說明:



實作範例一:


這是文字



教學影音:




CSS語法:

<style>

/* 插入背景圖 */
.baim20180211 {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 800px;
background-position: left -200px top -200px;
}

/* 說明文字格式 */
.dword20180211 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.9;
background-color: rgba(152, 152, 152, 0.65);
text-align: center;
color: white;
}

/* 移動文字框 */
.dworpo20180211 {
position: relative;
top: -2em;
margin-bottom: -2em;
}

/* 以上一對是互動的CSS */
#tabtr20180211 {

}

#tabtr20180211:hover +div {
transition: 0.5s;
opacity: 0;
}

</style>







tr裡使用背景圖,創造出單一圖像均分割效果。



夏天。   天氣的好不好,看著綠葉和小蟲就知道了!











下午的食堂


人的多是一種必然。
快走的步代,
是一種讓人賞心的節奏。
★整個表格(table)插入背景圖。



表格寫作相關主題:
  1. Html 的表格應用語法
  2. 快 速排版寫作:表格堆積木法
  3. 簡 單、快速:3秒調出漂亮文字布局
  4. CSS 文字布局快速套用法
  5. 表 格使用基本功(5):影像排排站呈現規律美




1 則留言:

  1. 老師好
    css用兩個點class,之前以雖已經固定住的2個儲存格,但1列3個儲存格寬度都改變了,不知何故.預設收尋引擎是google.

    回覆刪除