"編輯培力/HTML到SVG" 修訂間的差異

出自 全民科學平台
前往: 導覽搜尋
(一、SVG在教學上應用的例子:)
(XML 包含 HTML 和 SVG)
 
(未顯示同一使用者於中間所作的 6 次修訂)
行 1: 行 1:
 
[[分類:108上學年編輯培力]]
 
[[分類:108上學年編輯培力]]
 
==XML 包含 HTML 和 SVG==
 
==XML 包含 HTML 和 SVG==
<table>
+
<table style='border:none;'>
 
<tr>
 
<tr>
<th rowspan=2 style='font-size:120%;font-weight:normal;'>XML</th>
+
<th rowspan=2 style='font-size:120%;font-weight:normal;border:none;'>XML</th>
<th rowspan=2 style='font-size:220%;font-weight:normal;'>{</th>
+
<th rowspan=2 style='font-size:220%;font-weight:normal;border:none;'>{</th>
<td style='font-size:120%;'>HTML</td><td>文件</td>
+
<td style='font-size:120%;border:none;'>HTML</td><td style='border:none;'>文件</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td style='font-size:120%;'>SVG</td><td>向量繪圖</td>
+
<td style='font-size:120%;border:none;'>SVG</td><td style='border:none;'>向量繪圖</td>
 
</tr>
 
</tr>
 
</table>
 
</table>
行 15: 行 15:
 
*SVG,可縮放向量圖形(Scalable Vector Graphics)  
 
*SVG,可縮放向量圖形(Scalable Vector Graphics)  
  
style 屬性同時支援,HTML 與 SVG,只是樣式項目有相同,也有不同的。
+
*style 屬性同時支援,HTML 與 SVG,只是樣式項目有相同,也有不同的。
 
+
*SVG的特性
 +
*#XML語法,用書寫指示來畫圖。
 +
*#二維向量圖形格式,不是點陣圖,無段縮放不會毛邊。
 +
*#由W3C制定,是開放標準。
 +
*[http://jendo.org/wiki1231/index.php?title=SVG 完整的參考資料]
 +
*四次教學:
 +
*#基本入門
 +
*#進階一點點,加上使用繪圖軟體
 
===一、SVG在教學上應用的例子:===
 
===一、SVG在教學上應用的例子:===
#[http://jendo.org/wiki1231/index.php?title=能源與能量#.E8.83.BD.E6.BA.90.E8.88.87.E8.83.BD.E9.87.8F.E7.9A.84.E5.8D.80.E5.88.A5 轉動的齒輪]或[https://upload.wikimedia.org/wikipedia/commons/b/b3/GearRotate.svg 維基共享資源上的圖]
+
#[http://jendo.org/wiki1231/index.php?title=能源與能量#.E8.83.BD.E6.BA.90.E8.88.87.E8.83.BD.E9.87.8F.E7.9A.84.E5.8D.80.E5.88.A5 轉動的齒輪]或[https://upload.wikimedia.org/wikipedia/commons/b/b3/GearRotate.svg 維基共享資源上的圖]:可以動
#[http://jendo.org/wiki1231/index.php?title=能源與能量#.E8.A8.8E.E8.AB.96.E4.BA.8C.EF.BC.9A.E7.BE.8E.E6.B4.B2.E4.BA.BA.E8.88.87.E6.AD.90.E4.BA.9E.E4.BA.BA 山脈的走向]或[https://upload.wikimedia.org/wikipedia/commons/c/c2/World-map(mountains).svg 維基共享資源上的圖]
+
#[http://jendo.org/wiki1231/index.php?title=能源與能量#.E8.A8.8E.E8.AB.96.E4.BA.8C.EF.BC.9A.E7.BE.8E.E6.B4.B2.E4.BA.BA.E8.88.87.E6.AD.90.E4.BA.9E.E4.BA.BA 山脈的走向]或[https://upload.wikimedia.org/wikipedia/commons/c/c2/World-map(mountains).svg 維基共享資源上的圖]:可以在別人的基礎上添附
#[https://upload.wikimedia.org/wikipedia/commons/3/34/Africa_road5.svg 現代智人走出非洲的可能路線]
+
#[https://upload.wikimedia.org/wikipedia/commons/3/34/Africa_road5.svg 現代智人走出非洲的可能路線]:可以在別人的基礎上添附
#[https://upload.wikimedia.org/wikipedia/commons/1/17/日本史表解.svg 日本史簡表]
+
#[https://upload.wikimedia.org/wikipedia/commons/1/17/日本史表解.svg 日本史簡表]:可以結合文字畫表
#[http://home.jendo.org/~丁禾/鄭氏治台/明鄭.svg 鄭氏大事紀]
+
#[http://home.jendo.org/~丁禾/鄭氏治台/明鄭.svg 鄭氏大事紀]:可以圖解概念
#[https://upload.wikimedia.org/wikipedia/commons/c/c0/Animal_cell_structure_zhtw.svg 動物細胞]
+
#[https://upload.wikimedia.org/wikipedia/commons/c/c0/Animal_cell_structure_zhtw.svg 動物細胞]:可以將外國資源改成中文
 
#[https://commons.wikimedia.org/w/index.php?title=Special:ListFiles&user=丁志仁 丁丁在維基共享資源上的各種教學用圖]
 
#[https://commons.wikimedia.org/w/index.php?title=Special:ListFiles&user=丁志仁 丁丁在維基共享資源上的各種教學用圖]
  
行 79: 行 86:
  
 
===四、更多練習:===
 
===四、更多練習:===
[http://jendo.org/wiki1231/index.php?title=SVG 參考頁]
+
看原始碼,然後自己寫出來:
看原始碼,然後自己寫出來:
 
 
  http://jendo.org/~thisNasAdmin/polygon.svg
 
  http://jendo.org/~thisNasAdmin/polygon.svg
 
  http://jendo.org/~thisNasAdmin/text.svg
 
  http://jendo.org/~thisNasAdmin/text.svg
行 88: 行 94:
  
 
==回到 HTML==
 
==回到 HTML==
 +
CSS:串接樣式表(Cascading Style Sheets)
  
    <link href="css/from.css" rel="stylesheet" type="text/css">
+
樣式使用的三個層次:
 +
#以 style 屬性,在「行內撰寫」
 +
#調到全篇  HTML 最前面,設定 style 定義段落,供全文引用
 +
#寫成一個檔案,讓多篇 HTML 檔引用。引用的語法:&lt;link href='被引用的CSS檔' rel='stylesheet' type='text/css'/&gt;
  
 
===隨堂練習===
 
===隨堂練習===
建立一個CSS檔,給另外三個HTML使用
+
建立一個CSS檔,給兩個HTML使用

於 2019年11月13日 (三) 01:16 的最新修訂

XML 包含 HTML 和 SVG

XML { HTML文件
SVG向量繪圖
  • XML,可延伸標記式語言(Extensible Markup Language)
  • HTML,超文件標記語言(HyperText Markup Language)
  • SVG,可縮放向量圖形(Scalable Vector Graphics)
  • style 屬性同時支援,HTML 與 SVG,只是樣式項目有相同,也有不同的。
  • SVG的特性
    1. XML語法,用書寫指示來畫圖。
    2. 二維向量圖形格式,不是點陣圖,無段縮放不會毛邊。
    3. 由W3C制定,是開放標準。
  • 完整的參考資料
  • 四次教學:
    1. 基本入門
    2. 進階一點點,加上使用繪圖軟體

一、SVG在教學上應用的例子:

  1. 轉動的齒輪維基共享資源上的圖:可以動
  2. 山脈的走向維基共享資源上的圖:可以在別人的基礎上添附
  3. 現代智人走出非洲的可能路線:可以在別人的基礎上添附
  4. 日本史簡表:可以結合文字畫表
  5. 鄭氏大事紀:可以圖解概念
  6. 動物細胞:可以將外國資源改成中文
  7. 丁丁在維基共享資源上的各種教學用圖

二、兩種寫法:

  • 圖檔寫法:
<?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軸半長)。

四、更多練習:

看原始碼,然後自己寫出來:

http://jendo.org/~thisNasAdmin/polygon.svg
http://jendo.org/~thisNasAdmin/text.svg
http://jendo.org/~thisNasAdmin/3petal0.svg
http://jendo.org/~thisNasAdmin/3petal1.svg
http://jendo.org/~thisNasAdmin/3petal2.svg

回到 HTML

CSS:串接樣式表(Cascading Style Sheets)

樣式使用的三個層次:

  1. 以 style 屬性,在「行內撰寫」
  2. 調到全篇 HTML 最前面,設定 style 定義段落,供全文引用
  3. 寫成一個檔案,讓多篇 HTML 檔引用。引用的語法:<link href='被引用的CSS檔' rel='stylesheet' type='text/css'/>

隨堂練習

建立一個CSS檔,給兩個HTML使用