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