六年制學程/02/2015.02.26:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
(新頁面: 分類:六年制學程/02 ==晨課== ==SVG 和 GIS 進階== ===準備工作=== *windows *#瀏覽器:firefox *#檔案上下傳:filezilla *#文字編輯器:Emeditor *android *#...)
 
觀察與複製
 
(未顯示同用戶所作出之16次版本)
第 12 行: 第 12 行:
 
*#文字編輯器:檔編輯器、文本編輯器、文件大師
 
*#文字編輯器:檔編輯器、文本編輯器、文件大師
  
復習「
+
復習「伺服器」、「客戶端電腦」、「檔案在伺服器供大眾瀏覽」、「檔案在客戶端電腦編輯、修改」、「伺服器為上,客戶端電腦為下,用檔案傳輸軟體將檔案上傳下載」等觀念。
 +
 
 +
檔名全班統一約定:
 +
*gistest0.html,抄襲複製示範檔案。
 +
*gistest1.html,自己家的 GIS 練習。
 +
*Gistest1.html,月考 GIS 實作。
 +
*Gistest2.html,月考 GIS 實作。
 +
*gistest3.html,練習貼上縮小版瀑布的 GIS 練習。
 +
*gistest4.html,練習貼上縮小版馴養動物的 GIS 練習。
  
 
===掃描器使用===
 
===掃描器使用===
  
 
===觀察與複製===
 
===觀察與複製===
 +
本次練習以將 SVG 圖(瀑布)嵌入 GIS 為主,不必實作 SVG 圖之縮小
 +
#觀察「jendo.org/~admin/Africa.html」或「jendo.org/~丁志仁/Africa.html」。看維多利亞瀑布。
 +
#看原始碼:[http://www.ifreesite.com/viewsource http://www.ifreesite.com/viewsource],了解 GIS 的 marker 如何更換圖示。
 +
#注意:SVG 標籤中有兩種顯示指示:
 +
#*width 及 height 這種指示的圖可以做為 GIS 的嵌入圖。
 +
#*viewbox 這種指示的圖不能做為 GIS 的嵌入圖,須改為 width 、 height 指示。
 +
#複製原始碼至自己的檔案 gistest2.html 。
 +
#了解由<table><tr><td><img src=http://jendo.org/~admin/pool.svg width=250px /></td><td> 到 </td><td><img src=http://jendo.org/~admin/waterfall1.svg width=250px /></td><td> 再到 </td><td><img src=http://jendo.org/~admin/fall2water.svg width=32px/></td></tr></table>
 +
#inkscape 剪除多餘部分的練習
 +
#svg 縮小解說:標籤 g 加上 transform='scale(橫向倍率,縱向倍率)'
 +
#貼入 GIS 練習
 +
 +
===用自己的馴養動物貼到 GIS===
 +
本次重點在將自己的 SVG 圖縮小,新生的馴養動作在此: <img src='/~邱申晴/蜜蜂.svg' width='100px' /> 。
 +
#找到自己的 SVG 圖。在「該作的事/馴養動物GIS」中。
 +
#加工縮小:
 +
#*下載回客戶端電腦
 +
#*以標籤 g 把動物包起來
 +
#*標籤 g 加上 transform='scale(橫向倍率,縱向倍率)'
 +
#*調整 svg 標籤的 width 數值,和 height 數值
 +
#找到馴養動物最初被馴養成功的經緯度。
 +
#將縮小版的馴養動物貼到自製的檔案 gistest3.html 。

2017年3月8日 (三) 09:34的最新修訂版本

晨課

SVG 和 GIS 進階

準備工作

  • windows
    1. 瀏覽器:firefox
    2. 檔案上下傳:filezilla
    3. 文字編輯器:Emeditor
  • android
    1. 瀏覽器:HTML Viewer
    2. 檔案上下傳:DSfile
    3. 文字編輯器:檔編輯器、文本編輯器、文件大師

復習「伺服器」、「客戶端電腦」、「檔案在伺服器供大眾瀏覽」、「檔案在客戶端電腦編輯、修改」、「伺服器為上,客戶端電腦為下,用檔案傳輸軟體將檔案上傳下載」等觀念。

檔名全班統一約定:

  • gistest0.html,抄襲複製示範檔案。
  • gistest1.html,自己家的 GIS 練習。
  • Gistest1.html,月考 GIS 實作。
  • Gistest2.html,月考 GIS 實作。
  • gistest3.html,練習貼上縮小版瀑布的 GIS 練習。
  • gistest4.html,練習貼上縮小版馴養動物的 GIS 練習。

掃描器使用

觀察與複製

本次練習以將 SVG 圖(瀑布)嵌入 GIS 為主,不必實作 SVG 圖之縮小

  1. 觀察「jendo.org/~admin/Africa.html」或「jendo.org/~丁志仁/Africa.html」。看維多利亞瀑布。
  2. 看原始碼:http://www.ifreesite.com/viewsource,了解 GIS 的 marker 如何更換圖示。
  3. 注意:SVG 標籤中有兩種顯示指示:
    • width 及 height 這種指示的圖可以做為 GIS 的嵌入圖。
    • viewbox 這種指示的圖不能做為 GIS 的嵌入圖,須改為 width 、 height 指示。
  4. 複製原始碼至自己的檔案 gistest2.html 。
  5. 了解由
    再到
  6. inkscape 剪除多餘部分的練習
  7. svg 縮小解說:標籤 g 加上 transform='scale(橫向倍率,縱向倍率)'
  8. 貼入 GIS 練習

用自己的馴養動物貼到 GIS

本次重點在將自己的 SVG 圖縮小,新生的馴養動作在此:

  1. 找到自己的 SVG 圖。在「該作的事/馴養動物GIS」中。
  2. 加工縮小:
    • 下載回客戶端電腦
    • 以標籤 g 把動物包起來
    • 標籤 g 加上 transform='scale(橫向倍率,縱向倍率)'
    • 調整 svg 標籤的 width 數值,和 height 數值
  3. 找到馴養動物最初被馴養成功的經緯度。
  4. 將縮小版的馴養動物貼到自製的檔案 gistest3.html 。