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

2014年6月18日 星期三

可以互動的跳躍連結中標列表


　


  1. 第一區塊標題
  2. 星叢計畫：影音教學
  3. 區塊三標題
  4. 第四區塊標題
  5. 第五區塊標題







一、請用KompoZer製作文字的清單功能[ol li]：

注意事項：
  1. KompoZer會看不出這一效果。把其他步驟做完，存檔，再用瀏覽器來預覽就會看到。
  2. 記得在 ol 部分設上 id ，此例為 k2014061801。
二、請copy下列CSS語法，並置於<body>之後：

<style>
#k2014061801 {
margin: 0px;
padding-left: 0px;
border: 0px solid green;
}
#k2014061801 >li {
display: inline-block;
border-bottom: 2px solid red;
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
text-align: left;
letter-spacing: 0.1em;
padding: 0.3em;
margin-right: 0.5em;
margin-bottom: 0.5em;
}
#k2014061801  >li:hover {
border-bottom: 2px solid green;
}
#k2014061801  >li >a:link {
color: black;
text-decoration: none;
}
#k2014061801  >li >a:visited {
color: gray;
}
</style>

注意事項：
  1. 請把 id （紅色字者，共 5個）改成和步驟一相同的 id。
三、更多學習事項：

  1. 如果更動底線顏色（藍色字列），請更動顏色代碼，此例 green 改成 blue。
  2. 移過去後想變動字的顏色，請加上 color: red; 在藍色字列之後。
  3. 移過去後想變動背景色，請加上 background-color: yellow; 在藍色字列後。
  4. 以上請看教學影音，有詳細介紹。
  5. 顏色代碼網站。
  6. CSS語法快速 複習。
　



按此 回標題列表

世新新聞布落客星叢計畫：教學影音

如何使用google blog 寫出互動式多媒體數位文本

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)