2020/資訊基礎應用

本課介紹

本班必修課「資訊基礎應用」暨「全民科學平台編輯培力」

訓練能為「全民科學平台」做事的同學，合格並且有意願的同學會選入編輯群。

簡易生態運作圖

HTML語法入門

講師：丁志仁
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/vhosts/science4everyone.net/httpdocs/MediaWiki/languages/LanguageConverter.php on line 771

開場

1. 看一下課程簡介
2. 分配臨時帳號
3. 練習使用「網路檔案櫃」
4. 區網 wifi ：jendo_d與jendo_a，密碼現場說明
5. 瀏覽器：firefox 優先於 chrome ，避免使用 IE

本日練習

1. 登入 wiki
2. wiki 以頁為單位
   • 條目頁，及其討論頁
   • 使用者頁，及其討論頁
   • 分類頁，及其討論頁
3. 去自己的「使用者頁」：
   • 想一個題目
   • wiki 入門語法
   • 貼圖
   • 在使用者頁的討論頁寫筆記
   • 嵌入影片
   • 製作本班通訊錄

• padding(內距)：
  1. 控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離)
  2. 不可以設定負值，這點與 margin 不同。
  3. 基本語法範例：

     padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;

  4. padding:auto;：讓瀏覽器自己去設定
  5. padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。
• margin(邊沿)：
  1. 控制一個區域(例如 DIV 或 span)的外邊界距離，俗稱外距。
  2. 可以設定負値，會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。
  3. 基本語法範例：

     margin:上 右 下 左;　margin:上下 左右;　margin:上 左右 下;　margin:四個邊同樣値;

  4. margin:auto;：讓瀏覽器自己去設定。
  5. margin:%;：讓瀏覽器自己去設定，跟邊界元素有關。
• border(邊框)：
  1. 邊框粗細：用長度表達
  2. 邊框顏色：可以使用色標準色碼或顏色的英文名稱表達
  3. 邊框樣式：可以設定實線(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;

  4. 雙刪除線：<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: 樣式只能畫單刪除線，無法指示畫出雙刪除線。

今日重點

1. 樣式需成對
2. 修飾標籤的叫屬性
   1. 兩組屬性之間用空格分開
   2. 屬性名與屬性值用「=」相連
   3. 屬性名不加引號( or "")
   4. 屬性值如其中有空白必加引號屬性值，如其中無空格可加引號，可不加引號
3. style屬性可包含多組樣式指示
   標籤外觀該看甚麼樣
   < td >文字< /td>
   styel = ' color : blue broder : 1px ptsolid red ; '
   
4. 如果要在標籤中顯示"<"或者">"等特殊字符，可以使用“&”開頭，“;”結尾，中間加上字符對應的編碼就可以
   <例如：
   <＆lt; <=＆le;
   
   >＆gt; > =＆ge;>
   

SVG及HTML入門

講師：丁志仁

CSS及SVG進階應用

講師：張又懿

SVG動畫進階使用

講師：張又懿

SVG進階複雜繪圖

講師：張又懿

CC授權與素材進階運用

講師：丁志仁

Adobe繪圖軟體入門

講師：張又懿

Adobe繪圖軟體進階

講師：張又懿

進階應用

講師：丁志仁

MySQL、PHP、javescipt入門

講師：丁志仁