「2020/資訊基礎應用」修訂間的差異
跳至導覽
跳至搜尋
(→今日重點) |
|||
(未顯示同一使用者於中間所作的 12 次修訂) | |||
行 1: | 行 1: | ||
+ | [[分類:資訊基礎應用]] | ||
===本課介紹=== | ===本課介紹=== | ||
本班必修課「資訊基礎應用」暨「全民科學平台編輯培力」 | 本班必修課「資訊基礎應用」暨「全民科學平台編輯培力」 | ||
行 5: | 行 6: | ||
====簡易生態運作圖==== | ====簡易生態運作圖==== | ||
<img src='https://upload.wikimedia.org/wikipedia/commons/c/c8/%E5%85%A8%E6%B0%91%E7%A7%91%E5%AD%B8%E5%B9%B3%E5%8F%B0%E9%81%8B%E4%BD%9C%E7%94%9F%E6%85%8B%E7%B3%BB.png?uselang=zh-tw' width=50%> | <img src='https://upload.wikimedia.org/wikipedia/commons/c/c8/%E5%85%A8%E6%B0%91%E7%A7%91%E5%AD%B8%E5%B9%B3%E5%8F%B0%E9%81%8B%E4%BD%9C%E7%94%9F%E6%85%8B%E7%B3%BB.png?uselang=zh-tw' width=50%> | ||
− | |||
− | |||
− | |||
===HTML語法入門=== | ===HTML語法入門=== | ||
講師:丁志仁 | 講師:丁志仁 | ||
+ | {{s4e::編輯培力/HTML+WIKI(一)}} | ||
+ | {{jendo::Box Model}} | ||
+ | =====今日重點===== | ||
+ | #樣式需成對 | ||
+ | #修飾標籤的叫屬性 | ||
+ | ##兩組屬性之間用空格分開 | ||
+ | ##屬性名與屬性值用「=」相連 | ||
+ | ##屬性名不加引號('' or "") | ||
+ | ##屬性值如其中有空白必加引號屬性值,如其中無空格可加引號,可不加引號 | ||
+ | #style屬性可包含多組樣式指示<br>標籤外觀該看甚麼樣<br>< td >文字< /td><br>styel = ' color : blue broder : 1px ptsolid red ; '<br> | ||
+ | #如果要在標籤中顯示"<"或者">"等特殊字符,可以使用“&”開頭,“;”結尾,中間加上字符對應的編碼就可以 <br> <例如:<br> <&lt; <=&le; <br> <br> >&gt; > =&ge;><br> | ||
+ | |||
===SVG及HTML入門=== | ===SVG及HTML入門=== | ||
講師:丁志仁 | 講師:丁志仁 |
於 2020年9月14日 (一) 15:45 的最新修訂
目錄
本課介紹
本班必修課「資訊基礎應用」暨「全民科學平台編輯培力」
訓練能為「全民科學平台」做事的同學,合格並且有意願的同學會選入編輯群。
簡易生態運作圖
HTML語法入門
講師:丁志仁
開場
- 看一下課程簡介
- 分配臨時帳號
- 練習使用「網路檔案櫃」
- 區網 wifi :jendo_d與jendo_a,密碼現場說明
- 瀏覽器:firefox 優先於 chrome ,避免使用 IE
本日練習
- 登入 wiki
- wiki 以頁為單位
- 條目頁,及其討論頁
- 使用者頁,及其討論頁
- 分類頁,及其討論頁
- 去自己的「使用者頁」:
- 想一個題目
- wiki 入門語法
- 貼圖
- 在使用者頁的討論頁寫筆記
- 嵌入影片
- 製作本班通訊錄
- padding(內距):
- 控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離)
- 不可以設定負值,這點與 margin 不同。
- 基本語法範例:
padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値;
- padding:auto;:讓瀏覽器自己去設定
- padding:%;:讓瀏覽器自己去設定,跟邊界元素有關。
- margin(邊沿):
- 控制一個區域(例如 DIV 或 span)的外邊界距離,俗稱外距。
- 可以設定負値,會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如,我們將 A 區塊的 margin-bottom 設為 0 , B 區塊的 margin-top 設為 -10px ,那麼 B 區塊的文字就會疊到 A 區塊的文字上。
- 基本語法範例:
margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;
- margin:auto;:讓瀏覽器自己去設定。
- margin:%;:讓瀏覽器自己去設定,跟邊界元素有關。
- border(邊框):
- 邊框粗細:用長度表達
- 邊框顏色:可以使用色標準色碼或顏色的英文名稱表達
- 邊框樣式:可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等:border-style:solid;border-style:dotted;border-style:dashed;border-style:double;border-style:outset;border-style:groove;border-style:ridge;border-style:inset;border-style:none;
- 雙刪除線:<span style='position:relative;top:0.7em;border-top:5px double red;'><span style='position:relative;top:-0.7em;'>雙刪除線</span></span>
- 先用 position:relative; 讓元素「可用top」以相對其「原本該出現的所在位置」,調整至新位置。
- 再用 top:0.7em; 在上方塞約半個字,使上框線下降約半個字
- 最後增加一個子元素,用 top:-0.7em; 讓字回到「原來該出現的位置」。
- 須要如此做的原因是因為 text-decoration: 樣式只能畫單刪除線,無法指示畫出雙刪除線。
今日重點
- 樣式需成對
- 修飾標籤的叫屬性
- 兩組屬性之間用空格分開
- 屬性名與屬性值用「=」相連
- 屬性名不加引號( or "")
- 屬性值如其中有空白必加引號屬性值,如其中無空格可加引號,可不加引號
- style屬性可包含多組樣式指示
標籤外觀該看甚麼樣
< td >文字< /td>
styel = ' color : blue broder : 1px ptsolid red ; ' - 如果要在標籤中顯示"<"或者">"等特殊字符,可以使用“&”開頭,“;”結尾,中間加上字符對應的編碼就可以
<例如:
<&lt; <=&le;
>&gt; > =&ge;>
SVG及HTML入門
講師:丁志仁
CSS及SVG進階應用
講師:張又懿
SVG動畫進階使用
講師:張又懿
SVG進階複雜繪圖
講師:張又懿
CC授權與素材進階運用
講師:丁志仁
Adobe繪圖軟體入門
講師:張又懿
Adobe繪圖軟體進階
講師:張又懿
進階應用
講師:丁志仁
MySQL、PHP、javescipt入門
講師:丁志仁