資訊基礎應用:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
2017.10.31
2017.10.31
第 245 行: 第 245 行:
 
</g>
 
</g>
 
&lt;/svg&gt;</pre>
 
&lt;/svg&gt;</pre>
 +
*練習作業:<img src='http://jendo.org/~admin/Image17.png' />
  
 
===2017.11.7===
 
===2017.11.7===

2017年10月30日 (一) 19:04的修訂版本

概述

一、課程目標

  1. 培養會使用 wiki,html,GIS,SVG 做事的人
  2. 協助全民科學平台的「動手做科學」活動上架

二、選修說明

  • 修課同學:蕭卉均、李彥廷、張又懿(妹)、張鈞祺(兄)、黃柏實(子)、陳洹霈(母)、盧星瑜、紀詠恩、谌卫军(遠距學習)、吳文瀚(未到課)、吳亞蓁(未到課)
  • 地點:新埔國中信義樓 517
  • 時間:週二早上 9:15~12:00
  • 費用:無
  • 選課優先順位:有參與全民科學平台數位編輯意願者優先
  • 教師:丁志仁
  • 助教:柯智懷
  • 上課規範:學員須自行攜帶筆電上課。上課注意聽,作業按時交。
  • 成績以作業為主,通過者得 3 學分

三、課程內容組成

  1. 雲端空間使用
  2. 維基共享資源利用
  3. wiki,html 語法
  4. 點陣圖處理
  5. 向量圖處理(SVG)
  6. GIS

四、重要參考資料

英文指令中文
hyper html
text html 文字,文件
markup html 標記
language html 語言
head head
title title 標題
body body 身體
anchor a 錨,超連結
image img
paragraph p
break br
space space 空間,空格
horizontal hr 水平
rule hr
table table
row tr
diamond td
order ol 有次序的
unorder ul 沒有次序的
list ol;ul;li 列表
item li 項目
style style 樣式(修飾一個超文件)
span span 文字小片段
division div 區塊
preserve pre 保留原有斷行及排列之式
form form 表單
source src 來源
reference href 參考
target target 目標
blank _blank 空白
width width 寬度
height height 高度
border border 邊界,邊框。
font font 字體
family family 字族,系
size size 大小
weight weight 輕重
align align 對齊
color color 顏色
collapse collapse 崩塌
html html 超文件
content content 內容
meta meta 對自身的描述
http http-equiv 超文件傳輸協定
equiv http-equiv 約當
Character charset 字元
set charset 集合
alternative alt 替代的
identy id 惟一的身份表示法
background background 背景
back background
ground background 地面、引申為基礎的
none none 沒有
margin margin
padding padding 填充,框到框內圖文的距離
pad pad 墊、便箋本
clear clear 清乾淨
position position 位置
absolute absolute 絕對
relative relative 相對的
index index 指標
left left
center center
right right
top top
middle middle
bottom bottom 下(底)
button button 按鈕、按鍵
class class 類別
URL URL 網路資源的位置
script script 腳本


各次上課內容

2017.9.5

  • 工具與環境,看見伺服器與VDSL
    1. 區網 wifi :jendod與jendoa,密碼現場說明
    2. 伺服器 DS216,網址 6years.jendo.org
    3. 調整 C:\Windows\System32\drivers\etc\hosts,新增一行「192.168.4.2 6years.jendo.org」,下課前註解掉
    4. 瀏覽器:firefox 優先於 chrome ,避免使用 IE
    5. filezilla
      • 打開 filezilla ,並新增一個站台叫「DS216+(共用)」
      • 上述站台的設為:
        1. 主機:6years.jendo.org;
        2. 協定:SFTP
        3. 使用者:共用
        4. 密碼:
        5. 字碼集:UTF-8
      • 連線,然後到「/home/www」
      • 關閉 filezilla 。
      • 建自己帳號的連線
    6. 可用的文字編輯器,如 emeditor
    7. 連結 filezilla 和慣用的文字編輯器:「編輯/設定/檔案編輯」,選用「使用自訂編輯器」與「總是使用預設的編輯器」,並指定編輯器的路徑。

2017.9.12

  • 建造每一個人的筆記頁:「資訊基礎應用/○○○」,要登入才有辦法編寫
    1. 其中須有一段,列出已記得的單字,老師沒列到的單字要跟丁丁講
  • 第一份作業:本班通訊錄
  • 第二份作業:HTML 與 wiki 語法對照表
  • 第三份作業:個人履歷,參考 http://6years.jendo.org/~共用/丁禾履歷表.doc
  • 表格邊框美化的範例一
<table style='border:1px solid black;border-collapse:collapse;'>
<tr><th style='border:1px solid black;border-collapse:collapse;'>一</th><td style='border:1px solid black;border-collapse:collapse;'>三</td></tr>
<tr><th style='border:1px solid black;border-collapse:collapse;'>二</th><td style='border:1px solid black;border-collapse:collapse;'>四</td></tr>
</table>
  • 表格邊框美化的範例二
<style>
.nicetable {border:1px solid black;border-collapse:collapse;}
</style>
<table class='nicetable'>
<tr><th class='nicetable'>一</th><td class='nicetable'>三</td></tr>
<tr><th class='nicetable'>二</th><td class='nicetable'>四</td></tr>
</table>

2017.9.19

  • 交代樣式(外觀)的三種方式:
    1. 行內:
    2. 通篇:
    3. 跨多篇:
      <link rel='stylesheet' type='text/css' href='./pa.css'  />
  • 樣式作用的三種對象:
    1. 標籤:
    2. 類別(class):
    3. 指定專一的標籤(id):
  • 多條件交代樣式的作用對象:

2017.9.26

  • 筆記中建立 wiki 與 HTML 對照表
    1. 等號
    2. 星號
    3. 井號
    4. 中括號(連結)
    5. 雙層中括號(圖照)
    6. 文字的拉斜加粗
    7. 冒號及分號
    8. 水平線
  • 角括號的寫法:
    1. &lt;:<
    2. &gt;:>
    3. 表格的示例
  • Mediawiki_簡介
    1. 柏納李發明 html 及 http 。
    2. 由HTML速記到共筆再到維基百科。
    3. 分享式合作與共享經濟
  • CC授權
  • Wiki_基本語法與條目發展
  • 取用圖照:
    1. 找到 google 翻譯,找出食人魚的英文。
    2. 由 google 找到「維資基共享源」的網址「commons.wikimedia.org」
    3. 到「維資基共享源」在蒐尋框蒐「File:Piranha」
    4. 開一張食人魚的圖,了解頁中各種尺寸的連結,並選擇想要的尺寸。
    5. 用雙層中括號將圖照帶入 wiki 頁
    6. 用 img 標籤帶入 wiki 頁
    7. 比照兩的速度有何不同
    8. 找到食人魚的分類「Category:Pygocentrus nattereri」
    9. 由 google 的照片蒐尋,使用「工具/使用權限」來找到可以用的圖。
    10. 蒐「File:Piranha svg」,並看 svg 檔無段放大不毛邊的效果。
    11. 看 svg 圖檔的原始碼,知道它是由指示組成。
  • 圖檔格式(點陣與向量),SVG特性,著作權保護期的長短。
    1. 由蒐「file:animal cell svg」說明 svg 檔可輕易改作。但仍要尊重原作者的貢獻。

2017.10.03

  • 下載 http://6years.jendo.org/~共用/丁禾履歷表.doc
  • 以 word 打開
    1. 找到「尺規」開關並打開
    2. 取消「檔案/選項/進階/顯示字元寬度單位」核取方塊
    3. 找出長寬
    4. 每 inch 2.54公分,72pt
  • 開「履歷表.html」
    1. 在樣式定義中以「@page 某值{…}」設定 css
    2. 在顯示區中以「<div style='page:某值;'>」
    3. 可用的定義:
      size:寬 長;
      margin:天 右 地 左
      mso-page-orientation:landscape 橫放
      mso-header-margin:頁首大小
      mso-footer-margin:頁尾大小
  • 跳頁的用法:「<br style='page-break-before:always' />」
  • 表格寬度用「style='width:xxx'」表達寬度,xxx可以用百分比、公分、pt、無單位數字,無單位數字由「控制台/顯示器/設定/一般/字型大小」控制,如96dpi(100%)則96個寬度單位為1英吋;120dpi(125%)則120個寬度單位為1英吋。
  • 表格高度在 tr 中設,
    1. <tr style='height:數字'/>時無單位數字、cm、pt三種單位均有效,百分比無效。
    2. <tr height=數字/>只對無單位數字有效。
  • 圖的寬度:
    1. style='width:數字;height:數字;' 對無單位、百分比、pt、cm 皆無效
    2. width=數字 height=數字 對百分比、pt、cm 皆無效,對無單位有效,但不可使用auto。無單位長度定義同上段。

2017.10.17

2017.10.24

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>

</svg>
  • HTML寫法:
<svg>

</svg>
  • 畫一個小圓圈:
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='12' height='12'>
  <circle cx='6' cy='6' r='4' style='fill:#fff;stroke:blue;stroke-width:2;fill-opacity:0'/>
</svg>
  • 畫熊臉(bearFace.svg),如:施馨檸畫的熊臉
  • 共同約定:
    1. 開始與結束合一。
    2. 長度如省略單位,預設單位為 px。
    3. px可以使用小數點。
    4. 以左上為座標原點。
    5. 座標描述先 x 後 y 。
    6. stlye屬性中關於線條之樣式,也可以作為繪圖:
      • stroke (線條顏色),
      • stroke-width (線條寬度),
      • stroke-opacity (線條顏色的透明度,合法的範圍是:0 - 1,0最透明,預設1),
      • stroke-linecap (線條端點形狀,預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形),
      • stroke-linejoin (線條轉彎處樣式,預設miter尖角、round圓角、bevel斜角),
      • stroke-miterlimit (尖角內外距/線寬的最大值,不設限則尖角可以拉長至無限長,預設為 4 倍),
      • stroke-dasharray (預設none,代表實線。若為數字其值為一陣列,陣列值為線段中實線段長度與虛線段長度的交錯數字,通常是兩個數字一組,如果是奇數,則最後面自動加補第一個數字)
    7. stlye屬性中關於面之樣式:
      • fill (填充顏色),
      • fill-opacity (填充不透明,合法的範圍是:0 - 1,0最透明,預設1)。
      • fill-rule (polygon等標籤有時會將內部分割成不同的區域,填色方式,預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承)
    8. 選擇器 class,id 同 CSS 。
  • 常見的簡易繪圖標籤:
    1. line(直線),屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
    2. polyline(多點成線),諸屬性如下:
      • points:多點,點與點用空白間開,同一點 x y 座標以逗點間開。
    3. polygon(多邊形),也可以取五點畫出一個星形。諸屬性如下:
      • points:多點,點與點用空白間開,同一點 x y 座標以逗點間開。
    4. circle(圓),諸屬性如下:
      • cx(圓心x座標),cy(圓心y座標),r(半徑)
    5. rect(矩形),諸屬性如下:
      • width(寬),height(高),省略起點則以原點為起點,x(起點x座標),y(起點y座標),rx(圓角x半徑),ry(圓角y半徑)
    6. ellipse(楕圓),諸屬性如下:
      • cx(中心x座標),cy(中心x座標),rx(x軸半長),ry(y軸半長)。

2017.10.31

  • 加文字(text.svg):
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
	<text x='40' y='50' style='font-family:kaiti;fill:#666666'>羅馬</text>
</svg>
  • 位移、旋轉、縮放範例(transform.svg):
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg height='100' width='112.5' xmlns='http://www.w3.org/2000/svg' version='1.1'>
	<line x1='0' y1='50' x2='113' y2='50' style='stroke:#0f0;stroke-dasharray:2 2;stroke-width:0.5pt;' />
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#000;fill:none;stroke-width:1pt;' transform='translate(25,50)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='rotate(90) translate(50,-50)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='translate(75,50) rotate(90)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(100,50) rotate(180) scale(0.8)'/>
</svg>
  • 三花瓣練習(3petal0.svg):
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='600' height='600'>
<g>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>
  • 綁成群組(3petal1.svg):
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'>
<g transform='translate(300,48) rotate(30) scale(1.7)'>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>
  • 墊一張圖(3petal2.svg):
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'>
<image xlink:href='http://jendo.org/~admin/Image15.png' x='0' y='0' width='600' height='600'/>
<g>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>
  • 練習作業:

2017.11.7