檢視 資訊基礎應用 的原始碼
←
資訊基礎應用
跳轉到：
導覽
、
搜尋
根據以下的原因，您並無權限去做編輯這個頁面:
您剛才的請求只有這個使用者組的使用者才能使用:
使用者
你可以檢視並複製本頁面的原始碼。
[[分類:資訊基礎應用]] ==概述== {{:資訊基礎應用/課程概述}} ===四、重要參考資料=== *[[HTML]]入門 *wiki 語法 *#[[Wiki_入門語法]] *#[[Wiki_基本語法與條目發展]] *#[http://zh.wikipedia.org/wiki/User:Auvaand/維基語法 維基語法及範例(詳版)] *71個單字 <sqltbl> sql=select `en`,`command`,`zhtw` from 資訊課用字 where `uses` like '%HTML%' tblhead=英文;指令;中文 </sqltbl> ==各次上課內容== ===2017.9.5=== *工具與環境，看見伺服器與VDSL *#區網 wifi ：jendod與jendoa，密碼現場說明 *#伺服器 DS216，網址 6years.jendo.org *#調整 C:\Windows\System32\drivers\etc\hosts，新增一行「192.168.4.2 6years.jendo.org」，下課前註解掉 *#瀏覽器：firefox 優先於 chrome ，避免使用 IE *#filezilla *#*打開 filezilla ，並新增一個站台叫「DS216+(共用)」 *#*上述站台的設為： *#*#主機:6years.jendo.org； *#*#協定:SFTP *#*#使用者:共用 *#*#密碼:<!--common--> *#*#字碼集:UTF-8 *#*連線，然後到「/home/www」 *#*關閉 filezilla 。 *#*建自己帳號的連線 *#可用的文字編輯器，如 emeditor *#連結 filezilla 和慣用的文字編輯器：「編輯/設定/檔案編輯」，選用「使用自訂編輯器」與「總是使用預設的編輯器」，並指定編輯器的路徑。 ===2017.9.12=== *建造每一個人的筆記頁：「資訊基礎應用/○○○」，要登入才有辦法編寫 *#其中須有一段，列出已記得的單字，老師沒列到的單字要跟丁丁講 *第一份作業：本班通訊錄 *第二份作業：HTML 與 wiki 語法對照表 *第三份作業：個人履歷，參考 http://6years.jendo.org/~共用/丁禾履歷表.doc *表格邊框美化的範例一 <pre><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></pre> *表格邊框美化的範例二 <pre><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></pre> ===2017.9.19=== *交代樣式(外觀)的三種方式： *#行內： *#通篇： *#跨多篇：<pre><link rel='stylesheet' type='text/css' href='./pa.css' /></pre> *樣式作用的三種對象： *#標籤： *#類別(class)： *#指定專一的標籤(id)： *多條件交代樣式的作用對象： ===2017.9.26=== *筆記中建立 wiki 與 HTML 對照表 *#等號 *#星號 *#井號 *#中括號(連結) *#雙層中括號(圖照) *#文字的''拉斜''與'''加粗''' *#冒號及分號 *#水平線 *角括號的寫法： *#&lt;：< *#&gt;：> *#[[Wiki_基本語法與條目發展#示例|表格的示例]] *[[Mediawiki_簡介]] *#柏納李發明 html 及 http 。 *#由HTML速記到共筆再到維基百科。 *#分享式合作與共享經濟 *[[CC|CC授權]] *[[Wiki_基本語法與條目發展]] *取用圖照： *#找到 google 翻譯，找出食人魚的英文。 *#由 google 找到「維資基共享源」的網址「commons.wikimedia.org」 *#到「維資基共享源」在蒐尋框蒐「File:Piranha」 *#開一張食人魚的圖，了解頁中各種尺寸的連結，並選擇想要的尺寸。 *#用雙層中括號將圖照帶入 wiki 頁 *#用 img 標籤帶入 wiki 頁 *#比照兩的速度有何不同 *#找到食人魚的分類「Category:Pygocentrus nattereri」 *#由 google 的照片蒐尋，使用「工具/使用權限」來找到可以用的圖。 *#蒐「File:Piranha svg」，並看 svg 檔無段放大不毛邊的效果。 *#看 svg 圖檔的原始碼，知道它是由指示組成。 *圖檔格式(點陣與向量)，SVG特性，著作權保護期的長短。 *#由蒐「file:animal cell svg」說明 svg 檔可輕易改作。但仍要尊重原作者的貢獻。 ===2017.10.03=== *下載 http://6years.jendo.org/~共用/丁禾履歷表.doc *以 word 打開 *#找到「尺規」開關並打開 *#取消「檔案/選項/進階/顯示字元寬度單位」核取方塊 *#找出長寬 *#每 inch 2.54公分，72pt *開「履歷表.html」 *頁 *#在樣式定義中以「@page 某值{…}」設定 css *#在顯示區中以「<div style='page:某值;'>」 *#可用的定義： *#: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 中設， *#<tr style='height:數字'/>時無單位數字、cm、pt三種單位均有效，百分比無效。 *#<tr height=數字/>只對無單位數字有效。 *圖的寬度： *#style='width:數字;height:數字;' 對無單位、百分比、pt、cm 皆無效 *#width=數字 height=數字 對百分比、pt、cm 皆無效，對無單位有效，但不可使用auto。無單位長度定義同上段。 ===2017.10.17=== *去看 http://6years.jendo.org/~共用/履歷表.html *用 filezilla 下載回來 *以 word 打開，看完之後，關閉此檔 *用 emeditor 打開下載檔案 *解說 xml (Extensible Markup Language) *解說 xmlns (xml namespace) *看[[HTML/適應word]] *仿做自己的履歷表 ===2017.10.24=== *Scalable Vector Graphics(可縮放向量圖形) *特性 *#XML語法。 *#二維向量圖形格式。 *#由W3C制定，是開放標準。 *[http://jendo.org/~admin/vs.php 看原始碼] *#SVG空架子：[http://jendo.org/~admin/base.svg http://jendo.org/~admin/base.svg] *#多邊形：[http://jendo.org/~admin/polygon.svg http://jendo.org/~admin/polygon.svg] *#線性漸層：[http://jendo.org/~admin/linearGradient.svg http://jendo.org/~admin/linearGradient.svg] *#放射漸層： *#*[http://jendo.org/~admin/ball1.svg http://jendo.org/~admin/ball1.svg] *#*[http://jendo.org/~admin/ball2.svg http://jendo.org/~admin/ball2.svg] *#*[http://jendo.org/~admin/ball3.svg http://jendo.org/~admin/ball3.svg] *#文字：[http://jendo.org/~admin/text.svg http://jendo.org/~admin/text.svg] *#複製：[http://jendo.org/~admin/flower3.svg http://jendo.org/~admin/flower3.svg] *在教學上應用的例子： *#[[能源與能量#能源與能量的區別|轉動的齒輪]] *#[[能源與能量#討論二：美洲人與歐亞人|山脈的走向]] *#[http://upload.wikimedia.org/wikipedia/commons/3/34/Africa_road5.svg 現代智人走出非洲的可能路線] *#[http://jendo.org/~丁禾/鄭氏治台/日本史.svg 日本史] *#[http://jendo.org/~丁禾/鄭氏治台/明鄭.svg 鄭氏大事紀] *#[https://upload.wikimedia.org/wikipedia/commons/c/c0/Animal_cell_structure_zhtw.svg 動物細胞] *圖檔寫法： <pre><?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></pre> *HTML寫法： <pre><svg> </svg></pre> *畫一個小圓圈： <pre><?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></pre> *畫熊臉(bearFace.svg)，如：[http://jendo.org/~施馨檸/svg/Shinycircle.svg 施馨檸畫的熊臉] *共同約定： *#開始與結束合一。 *#長度如省略單位，預設單位為 px。 *#px可以使用小數點。 *#以左上為座標原點。 *#座標描述先 x 後 y 。 *#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，代表實線。若為數字其值為一陣列，陣列值為線段中實線段長度與虛線段長度的交錯數字，通常是兩個數字一組，如果是奇數，則最後面自動加補第一個數字) *#stlye屬性中關於面之樣式： *#*fill (填充顏色)， *#*fill-opacity (填充不透明，合法的範圍是：0 - 1，0最透明，預設1)。 *#*fill-rule (polygon等標籤有時會將內部分割成不同的區域，填色方式，預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承) *#選擇器 class,id 同 CSS 。 *常見的簡易繪圖標籤： *#line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。 *#polyline(多點成線)，諸屬性如下： *#*points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。 *#polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下： *#*points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。 *#circle(圓)，諸屬性如下： *#*cx(圓心x座標)，cy(圓心y座標)，r(半徑) *#rect(矩形)，諸屬性如下： *#*width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑) *#ellipse(楕圓)，諸屬性如下： *#*cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。 ===2017.10.31=== 因老師父親骨折而停課 ===2017.11.7=== ====(一)畫文字==== <img src='http://jendo.org/~admin/text.svg' /> *範例一(text.svg)原始碼： <pre><?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></pre> *在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。 *可用中文字形： <div class='mw-collapsible mw-collapsed' style='width:100%'> *#Monospace：等寬字型(非調和字) *#Sans：無襯線體(黑體，哥德體) *#Serif：襯線體(筆畫末端的裝飾細節，白體，羅馬體) *#KaiTi：楷體 *#MingLiU：明體 *#PMingLiU：明體 *#MingLiU_HKSCS：明體 *#FangSong：仿宋 *#NSimSun：新宋 *#SimHei：新黑 *#Microsoft YaHei：微軟雅黑體 *#Microsoft JhengHei：微軟正黑體 *#Arial Unicode MS：微軟 Arial 體 *#DFBiaoKaiShu-B5：華康楷書體 *#DFHKStdKai-B5：華康標楷體 *#DFHKStdSong-B5：華康標宋體 *#DFBiaoSong-B5：華康宋體 *#DFHeiUBlod-B5：華康特粗黑體 *#DFHeiBlod-B5：華康粗黑體 *#DFHeiMedium-B5：華康中黑體 *#DFHeiLight-B5：華康細黑體 *#DFBiaoKaiShu-B5：華康楷書體 *#…：華康眾字體，族繁不及備載 *#Segoe UI：微軟 Segoe UI 字形 *#Tahoma：微軟 Tahoma 字形 *#Meiruo：日文明瞭體 *#Meiruo UI：日文明瞭體 *#MS Gothic：微軟日文哥德體 *#MS Mincho：微軟日文明朝體 *#MS PGothic：微軟日文哥德體 *#MS PMincho：微軟日文明朝體 *#MS UI Gothic：微軟日文哥德體 *#MS Mincho：微軟日文明朝體 </div> *屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。 *屬性 dx 和 dy 基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。 *屬性 fill 控制填入字的顏色，預設黑色 *屬性 stroke 控制字描框的顏色，預設 none *屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。 *用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。 其他進階屬性： <div class='mw-collapsible mw-collapsed' style='width:100%'> *text-decoration 屬性，有以下諸值： *#underline：底線 *#overline：頂線 *#line-through：刪除線 *#blink：閃爍 *#none：無，預設值 *#inherit：繼承 *textLength 及 lengthAdjust ，前者設定字串的總長度，後者設定要怎麼湊到這個長度，有兩個值： *#lengthAdjust='spacing' 靠調整字距來湊足字串的長度。 *#lengthAdjust='spacingAndGlyphs' 靠把字拉胖來湊足字串的長度。 *子標籤 TSPAN：就是 span ，其屬性值幾乎和 text 一模一樣，也是 x、y、dx、dy、rotate、textLength。 *子標籤 textPath：屬性 xlink:href='#path的id' ；屬性 startOffset='xx%' 從 path 的百分之多少開始跑字。path 在 def 中定義，含路徑、填充色、畫框色。 *屬性 style 控制諸樣式： *#font-size: *#writing-mode:tb;直寫，預設橫寫 </div> *作圖練習一：<img src=http://jendo.org/wiki1231/images/thumb/6/6f/Rtriangle.svg/250px-Rtriangle.svg.png width=150px> ====(二)位移、旋轉、縮放、歪斜==== <img src='http://jendo.org/~admin/transform.svg' /> *範例二(transform.svg)原始碼： <pre><?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)'/> <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(125,50) rotate(180) scale(0.8) skewX(30)'/> <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(150,50) rotate(180) scale(0.8) skewX(30) skewY(30)'/> </svg></pre> *注意： *#四個圖形都圍繞凹尖處旋轉，此點是原始圖形的(0,0)點。因為 rotate 都只交代角度，沒有交代繞著哪個中心旋轉，所以就繞預設值(0,0)旋轉。 *#如果混合兩種以上操作，請先平移、再旋轉、再縮放。請看第二個箭頭(藍色)，先旋轉再平移，結果他的平移座標，是旋轉過後的 x 軸和 y 軸，不再是預設的 x 軸和 y 軸。 *相關屬性說明： *#平移變換(translate)：transform="translate(x,y)"，即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。 *#旋轉變換(rotate)：transform="rotate(angle cx,cy)"。angle代表旋轉角度，預設單位是「度」，順時針為正，逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標，則預設值是(0,0)。 *#伸縮變換(scale)：transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大於1；縮小：小於1。若省略sy，即sy=sx，作等比例縮放。 *#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)'，x-angle,y-angle分別代表沿x軸和y軸歪斜的角度。 *#矩陣變換(matrix)：transform='matrix(x伸縮．cos(a) sin(a)+Y歪斜tan(b) -sin(a)+X歪斜tan(c) y伸縮．cos(a) 位移x 位移y)'，a 為旋轉角，b為Y歪斜角，c為X歪斜角。 *作圖練習二(3petal0.svg)(三花瓣)： <pre><?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></pre> *綁成群組(3petal1.svg)： <pre><?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></pre> *墊一張圖(3petal2.svg)： <pre><?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></pre> ====(三)定義一次，引用多次==== <img src='http://jendo.org/~admin/uses.svg' /> *範例三(uses.svg)原始碼： <pre><?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='201' height='201'> <defs> <polygon id='petal' points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/> </defs> <g> <use xlink:href='#petal'/> <use xlink:href='#petal' transform='rotate(45 100 100)'/> <use xlink:href='#petal' transform='rotate(90 100 100)'/> <use xlink:href='#petal' transform='rotate(135 100 100)'/> <use xlink:href='#petal' transform='rotate(180 100 100)'/> <use xlink:href='#petal' transform='rotate(225 100 100)'/> <use xlink:href='#petal' transform='rotate(270 100 100)'/> <use xlink:href='#petal' transform='rotate(315 100 100)'/> </g> </svg></pre> *步驟： *#先添加 svg 標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有 href 屬性的定義 *#在 defs 段落中定義圖形，並賦予 id *#用 <use xlink:href='#某id'/> 來引用既有的定義 *作圖練習三：<img src='http://jendo.org/~admin/Image17.png' /> *參考： *#[http://jendo.org/~admin/flower0.svg 花] *#[http://jendo.org/~admin/flower1.svg 花+笑臉] *#[http://jendo.org/~admin/flower2.svg (花+笑臉)拉斜] *#[http://jendo.org/~admin/flower3.svg 三朵花] ===2017.11.14=== 漸層和濾鏡如果取中文名稱，瀏覽器還認得，但 Inkscape 和線上轉檔軟體就會不認得。 ====(四)線性漸層==== <img src='http://jendo.org/~admin/linearGradient.svg' /> *範例四(linearGradient.svg)原始碼： <pre><?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'> <defs> <linearGradient id='LG' x1='30%' y1='0%' x2='70%' y2='0%'> <stop offset='0%' style='stop-color:#ffff00;stop-opacity:1' /> <stop offset='100%' style='stop-color:#ff0000;stop-opacity:1' /> </linearGradient> </defs> <rect width='130' height='90' x='0' y='0' stroke='red' fill='url(#LG)' /> </svg></pre> *步驟： *#不用添加 svg 標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到 href 屬性 *#在 defs 段落中定義漸層，並賦予 id *#用 fill='url(#某id)' 屬性來引用既有的漸層定義 *linearGradient 線性漸層定義語法說明: *#漸層標籤中的 100%，指的是整個圖形 *#其中的 id 屬性定出漸層名稱 *#由 x1,y1,x2,y2 四個屬性決定漸層範圍，以及水平，垂直或角形漸層，四個屬性都以百分比表示： *#*x1,y1,x2,y2 屬性決定漸層開始和結束位置，x1,x2以圖形的寬度為準，y1,y2以圖形的高度為準 *#*當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸層 *#*當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸層 *#*當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸層 *作圖練習四-1：做h.svg、v.svg兩個檔案，在h.svg裡做長寬各100px，由左到右、黃到紅的漸層；在v.svg裡長寬各100px，由上到下、藍到綠的漸層。 *作圖練習四-2：參考箭頭(arrow.svg)的原始碼，做一個arrowUp.svg檔，做出寬:90、高:130，由上到下，白到紫色漸層的⇧。 arrow.svg 的原始碼如下： <pre><?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'> <polygon points='0,30 100,30 100,0 130,45 100,90 100,60 0,60' stroke='black' fill='none' /> </svg></pre> ====(五)放射漸層==== *三個範例及其原始碼： :ball1.svg <img src='http://jendo.org/~admin/ball1.svg' /> <pre><?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='150' height='150'> <defs> <radialGradient id='r1' cx='30%' cy='30%' r='70%'> <stop offset='0%' stop-color='#fff'></stop> <stop offset='30%' stop-color='#9f9'></stop> <stop offset='70%' stop-color='#373'></stop> <stop offset='100%' stop-color='#000'></stop> </radialGradient> </defs> <circle cx='75' cy='75' r='75' fill='url(#r1)'/> </svg></pre> :ball2.svg <img src='http://jendo.org/~admin/ball2.svg' /> <pre><?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='150' height='150'> <defs> <radialGradient id='r2' cx='50%' cy='50%' r='50%'> <stop offset='0%' stop-color='#fff'></stop> <stop offset='30%' stop-color='#9f9'></stop> <stop offset='70%' stop-color='#373'></stop> <stop offset='100%' stop-color='#000'></stop> </radialGradient> </defs> <circle cx='75' cy='75' r='75' fill='url(#r2)'/> </svg></pre> :ball3.svg <img src='http://jendo.org/~admin/ball3.svg' /> <pre><?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='150' height='150'> <defs> <radialGradient id='r3' cx='50%' cy='50%' r='50%' fx='50%' fy='100%'> <stop offset='0%' stop-color='#fff' opacity='0'></stop> <stop offset='30%' stop-color='#9f9' opacity='0'></stop> <stop offset='70%' stop-color='#373' opacity='0'></stop> <stop offset='100%' stop-color='#000' opacity='0'></stop> </radialGradient> </defs> <circle cx='75' cy='75' r='75' fill='url(#r3)'/> </svg></pre> *radialGradient 放設漸層定義語法說明: *#漸層範圍：由 cx,cy,r 三個屬性決定，三個屬性都以百分比表示，漸層範圍是一個圓或橢圓 *#*cx 表示範圍中心在圖寬百分之幾的位置 *#*cy 表示範圍中心在圖高百分之幾的位置 *#*r 如果圖形寬、高相等則範圍為圓，r代表範圍圓半俓除以圖形寬或高；如果圖形寬、高不相等則範圍為橢圓，r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%，範圍圓直徑恰等於圖的寬或高。 *#設色中心：由 fx,fy 兩個屬性決定的位置，就是設色為 0% 的地方，兩個屬性都以百分比表示 *#*fx表示設色中心在圖寬百分之幾的位置 *#*fy表示設色中心在圖高百分之幾的位置 *#*設色 100% 的地方在範圍圓或範圍橢圓的圓周上 *#設色標籤 stop，漸層標籤包住數個 stop 標籤，每種顏色通過一個 stop 標籤來規定。 *#*offset屬性用來定義漸層的開始和結束位置，其 100% 是指整個漸層範圍。 *#*stop-color 屬性用來定義顏色，也可以做為 style 的樣式。 *#*stop-opacity 屬性決定透明度，也可以做為 style 的樣式。 *#以 ball3.svg 為例：漸層範圍為整個圓，因為 cx,cy,r 都是 50% ，而設色中心在中間下方，因為 fx='50%' fy='100%' ，此處是 stop 設為 0% 的顏色(白色)，而範圍圓週邊是 stop 設為 100% 的顏色(黑色) *作圖練習五：以 SVG 放射漸層作出此圖：<img src='http://jendo.org/~admin/sun.png' width=100px /> ，圓半徑 75px 。 ====(六)柔焦濾鏡==== <img src='http://jendo.org/~admin/sun.svg' /> *範例六(sun.svg)原始碼： <pre><?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='160' height='160'> <defs> <radialGradient id='r4' cx='50%' cy='50%' r='50%' > <stop style='stop-color:#fff100' offset='0%' /> <stop style='stop-color:#ff9900;stop-opacity:.98' offset='50%' /> <stop style='stop-color:#ff1700;stop-opacity:.98' offset='100%' /> </radialGradient> <filter id='f1' > <feGaussianBlur stdDeviation='3' /> </filter> </defs> <circle cx='79' cy='79' r='75' style="fill:url(#r4);filter:url(#f1);" /> </svg></pre> *濾鏡標籤 filter 語法說明: *#其中的 id 屬性定出濾鏡名稱 *#也可以設 width,height,x,y 去定濾鏡範圍和起點，如沒設以整個圖形為範圍。 *#高斯模糊濾鏡 feGaussianBlur ：濾鏡標籤包住數種不同效果的濾鏡，高斯模糊濾鏡是最簡單的濾鏡。 *#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差)，用來控制模糊的程度，數字越大越模糊，數字為零則是圖片原本的狀態。 *作圖練習六-1：加日。請到 jendo.org/~admin/waterfall1.svg 複製原始碼到自己的www裡，將夕陽放到瀑布(waterfall1.svg)圖裡適當的位置，如右圖：<img src='http://jendo.org/~admin/waterfall1.png' width=150px align=right />，山要蓋住一部分柔焦的太陽。 *作圖練習六-2：加天。以 SVG 漸層,柔焦作出夕陽圖如右圖：<img src='http://jendo.org/~admin/waterfall2.png' width=150px align=right />，天用矩形做，天的顏色是下紫紅上藍，夕陽天色剛好在山的輪廓線之上。檔名叫做 waterfall2.svg 。 *作圖練習六-3：加草地。以 SVG 漸層,柔焦作出夕陽圖如右圖：<img src='http://jendo.org/~admin/waterfall3.png' width=150px align=right /> 加入綠草地，是矩形，與天、山的左緣相接。檔名叫做 waterfall3.svg 。 ===2017.11.21=== path {{:SVG/path}} ====貝茲曲線==== 用參數(0~1)和控制點作圖： #一次：<img src='https://upload.wikimedia.org/wikipedia/commons/0/00/B%C3%A9zier_1_big.gif' width='240px' height='*' /> #二次：<img src='https://upload.wikimedia.org/wikipedia/commons/3/3d/B%C3%A9zier_2_big.gif' width='240px' height='*' /> <img src='https://upload.wikimedia.org/wikipedia/commons/6/6b/B%C3%A9zier_2_big.svg' width='240px' height='*' /> #三次：<img src='https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif' width='240px' height='*' /> <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/B%C3%A9zier_3_big.svg' width='240px' height='*' /> #四次：<img src='https://upload.wikimedia.org/wikipedia/commons/a/a4/B%C3%A9zier_4_big.gif' width='240px' height='*' /> <img src='https://upload.wikimedia.org/wikipedia/commons/b/bf/B%C3%A9zier_4_big.svg' width='240px' height='*' /> #五次：<img src='https://upload.wikimedia.org/wikipedia/commons/0/0b/BezierCurve.gif' width='240px' height='*' /> ====path示範==== #[http://jendo.org/~admin/path1.svg 波浪] #[http://jendo.org/~admin/path2.svg 二,三次貝茲曲線] #[http://jendo.org/~admin/path3.svg 三次貝茲曲線軌跡] #[http://jendo.org/~admin/path4.svg 循跡字串(textPath子標籤)] #[http://jendo.org/~admin/path5.svg 簡易動畫(齒輪自轉)] #[http://jendo.org/~admin/path6.svg 簡易動畫(齒輪自轉並前進)] ====path練習==== #path01.svg 鋸子 #path02.svg 二次貝茲波浪 #path03.svg 三次貝茲波浪 #path04.svg 循跡字串 #path05.svg 簡易動畫 ====同學作業==== *張又懿：[http://6years.jendo.org/~張又懿/svg/path01.svg path01.svg],[http://6years.jendo.org/~張又懿/svg/path02.svg path02.svg],[http://6years.jendo.org/~張又懿/svg/path03.svg path03.svg],[http://6years.jendo.org/~張又懿/svg/path04.svg path04.svg],[http://6years.jendo.org/~張又懿/svg/path05.svg path05.svg] *張鈞祺：[http://6years.jendo.org/~張鈞祺/svg/path01.svg path01.svg],[http://6years.jendo.org/~張鈞祺/svg/path02.svg path02.svg],[http://6years.jendo.org/~張鈞祺/svg/path03.svg path03.svg],[http://6years.jendo.org/~張鈞祺/svg/path04.svg path04.svg],[http://6years.jendo.org/~張鈞祺/svg/path05.svg path05.svg] *柯智懷：[http://6years.jendo.org/~柯智懷/svg/path01.svg path01.svg],[http://6years.jendo.org/~柯智懷/svg/path02.svg path02.svg],[http://6years.jendo.org/~柯智懷/svg/path03.svg path03.svg],[http://6years.jendo.org/~柯智懷/svg/path04.svg path04.svg],[http://6years.jendo.org/~柯智懷/svg/path05.svg path05.svg] *盧星瑜：[http://6years.jendo.org/~盧星瑜/svg/path01.svg path01.svg],[http://6years.jendo.org/~盧星瑜/svg/path02.svg path02.svg],[http://6years.jendo.org/~盧星瑜/svg/path03.svg path03.svg],[http://6years.jendo.org/~盧星瑜/svg/path04.svg path04.svg],[http://6years.jendo.org/~盧星瑜/svg/path05.svg path05.svg] *蕭卉均：[http://6years.jendo.org/~蕭卉均/SVG/path01.svg path01.svg],[http://6years.jendo.org/~蕭卉均/SVG/path02.svg path02.svg],[http://6years.jendo.org/~蕭卉均/SVG/path03.svg path03.svg],[http://6years.jendo.org/~蕭卉均/SVG/path04.svg path04.svg],[http://6years.jendo.org/~蕭卉均/SVG/path05.svg path05.svg] *李彥廷：[http://6years.jendo.org/~李彥廷/svg/path01.svg path01.svg],[http://6years.jendo.org/~李彥廷/svg/path02.svg path02.svg],[http://6years.jendo.org/~李彥廷/svg/path03.svg path03.svg],[http://6years.jendo.org/~李彥廷/svg/path04.svg path04.svg],[http://6years.jendo.org/~李彥廷/svg/path05.svg path05.svg] ====動畫==== 詳細語法請參考： *[http://www.oxxostudio.tw/articles/201409/svg-21-smil-animation.html 初探 SMIL Animation] *[http://www.oxxostudio.tw/articles/201409/svg-22-smil-animation-2.html 深入理解 SMIL Animation] *[https://waylau.com/svg-animation/ SVG 動畫示例] 四標籤： #set(開關) #*只用attributeName,to,begin三屬性 #animate(屬性連續改變) #animateTransform(平移,旋轉,縮放) #animateMotion(循跡運動) *共通語法：將母圖形分拆成開始和結束兩標籤，中間插入動畫標籤。 *共通屬性： *#attributeName： *#*set,animate為某一個母圖形的屬性。from 和 to 就是這個屬性的值將由多少變到多少。 *#*animateTransform為'transform'另搭配 type 屬性 *#*animateMotion免設此屬性 *#type屬性之值(animateTransform專用)： *#*rotate旋轉，影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'。 *#*scale縮放，影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算，如果同組x,y倍率相同，可以只寫一個值。 *#*translate平移，影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'。 *#*skewX X軸不動，X軸下方向右歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度' *#*skewY Y軸不動，Y軸右方向下歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度' *#begin='幾s'：幾秒開始跑，通常設為 0s 。 *#dur='幾s'：跑一輪要幾秒，可以設為 indefinite 。 *#repeatCount='幾'：要跑幾輪，indefinite代表無限多輪，預設值為1。 *#from 開始狀態(animate,animateTransform有)。 *#to 結束狀態(set,animate,animateTransform有)。 *#path(animateMotion專用) 屬性為移動路徑：由 m 開始 *#rotate='auto'(animateMotion專用) 圖形隨路徑曲度而轉折。 ===2017.11.28=== inkscape(一) *[https://all.freewarehome.tw/archives/562 0.92 下載頁面] *:32 位元：[https://inkscape.org/en/gallery/item/11265/inkscape-0.92.2-x86.exe 安裝版 (62.1MB)] | [https://inkscape.org/en/gallery/item/11264/inkscape-0.92.2-x86.7z 免安裝版 (可攜式) (59.2MB)]<br/>64 位元：[https://inkscape.org/en/gallery/item/11262/inkscape-0.92.2-x64.exe 安裝版 (62.7MB)] | [https://inkscape.org/en/gallery/item/11261/inkscape-0.92.2-x64.7z 免安裝版 (可攜式) (59.9MB)] *#查明自己的電腦是 64 位元版，還是 32 位元版。 *#下載對應的免安裝版。 *#解壓縮。 *學習資源： *#http://ppt.cc/VNkV 導向 google 文件 https://docs.google.com/document/d/1iwa3lrPhBVV_O8DpR96m1cmjBKIPZYbrjflpnngayBk/edit# *#[http://sypswiki.dcs.tn.edu.tw/wiki/index.php?title=INKSCAPE_向量圖形 新營國小 Inkscape wiki頁] *#[https://zh.wikibooks.org/zh-tw/Inkscape基本操作 中文維基教科書翻譯官網教學文件] *#[https://ja.wikibooks.org/wiki/Inkscape/画面説明 日文維基教科書的畫面說明] *素材： *:介紹 .org 跟 .com 的差別，open source 和商業軟體的差別。 *#介紹 openclipart.org *#介紹 freepik.com 上面有很多 ai 檔，選「Vector/animals」，再選第一個圖，下載解壓縮。 *#*下載 ai 檔，解散群組，取出猴子。 *#*調整紙張，匯出點陣圖 *作業一：找一隻動物，用 A4 紙彩印出來。 *作業二：畫出一個矩形、一個弧、一個星形或多邊形。 *作業三：畫出 <img src='http://jendo.org/~admin/TriceratopsHead.svg' /> *工具箱： <div class='tleft'><img src='https://upload.wikimedia.org/wikipedia/commons/3/30/Inkscape043_ToolBox.png' width='80' height='287'/></div> :1：物件選用(F1) :2：路徑/節點(F2) :3：拉近/拉遠(F3) :4：矩形和正方形(F4) :5：圓/弧(F5) :6：星型/多邊形 :7：螺旋(F9) :8：自由行手繪線(F6) :9：貝茲線/直線 :10：書法字畫線 :11：文字(F8) :12：創建一個新的連接器 :13：創建和編輯漸變 :14：吸管(F7) *命令欄： <img src='https://upload.wikimedia.org/wikipedia/commons/e/e9/Inkscape043_CommandBar.png' width='500' height='83' /> :1：創建一個新文檔 :2：打開現有的文件 :3：保存文件 :4：打印文件 :5/6：匯入/匯出 :7/8：復原/取消復原 :9：複製到剪貼板 :10：剪切到剪貼板 :11：從剪貼板粘貼 :12：放大以適應物體 :13：根據窗口寬度進行縮放 :14：縮放以適應頁面 :15：重複的對象 :16：創建一個對象的庫侖 :17：取消原鏈接 :18：分組選定的對象 :19：取消選擇組 :20：填充與邊框對話框 :21：文本字體對話框 :22：XML編輯器 :23：排列/放置對話框 :24：Inkscape設置 :25：文檔設置 ===2017.12.5=== inkscape(二)操作要領 *選單：工具盒(左)、命令欄(上)、選單圖示(右)、即時提示訊息(下)，物件參數(上)、對話框 *滑鼠： *#確認你的操作工具<img src='http://jendo.org/files/6year/教學資源/資訊/SVG/inkscape_select.png' /> *#點１下(奇數) vs 點２下(偶數)<br/><img src='http://jendo.org/files/6year/教學資源/資訊/SVG/inkscape_mouse.png' /> *鍵盤 <Table class='nicetable'> <tr><th>指法</th><th>作用</th></tr> <tr><td>Del</td><td>刪除物件</td></tr> <tr><td>Home</td><td>物件升到最上層</td></tr> <tr><td>End</td><td>物件降到最下層</td></tr> <tr><td>Page-Up</td><td>物件升到上一層</td></tr> <tr><td>Page-Down</td><td>物件降到下一層</td></tr> <tr><td>Alt + 滑鼠點擊</td><td>在不同層的物件中跳動</td></tr> <tr><td>Ctrl + B</td><td>顯/隱捲動條</td></tr> <tr><td>Ctrl + 方向鍵</td><td>垂直/水平捲動畫布</td></tr> <tr><td>Ctrl中鍵滾輪</td><td>拉近、拉遠</td></tr> <tr><td>Shift中鍵滾輪</td><td>水平捲動畫布</td></tr> <tr><td>Ctrl右鍵</td><td>拉近</td></tr> <tr><td>Shift右鍵</td><td>拉遠</td></tr> <tr><td>Ctrl + N</td><td>建新檔</td></tr> <tr><td>Ctrl + O</td><td>開舊檔</td></tr> <tr><td>Alt + Tab</td><td>檔案間切換</td></tr> <tr><td>Ctrl + Z</td><td>回復上一步</td></tr> <tr><td>Ctrl + Shift + Z</td><td>重做你上一個動作</td></tr> <tr><td>F1~F9</td><td>工具箱中九個工具</td></tr> <tr><td>F10</td><td>打開選單</td></tr> <tr><td>F11</td><td>收放全螢幕</td></tr> <tr><td>F12</td><td>收放對話框</td></tr> <tr><td>Ctrl + Shift + F</td><td>叫用Fill and Stroke對話框</td></tr> <tr><td>Ctrl + Shift + A</td><td>叫用「對齊」對話框</td></tr> <tr><td>選物 + 方向鍵</td><td>移動2個像素(用Shift快10倍)</td></tr> <tr><td>選物 + Alt + 方向鍵</td><td>移動1個像素</td></tr> <tr><td>選物 + <和></td><td>中心點縮(50%)放(200%)</td></tr> <tr><td>選物 + Alt + <和></td><td>微縮放</td></tr> <tr><td>選物 + [和]</td><td>旋轉15度(加Ctrl一次轉90度)</td></tr> <tr><td>選物 + Alt + [和]</td><td>微旋轉</td></tr> <tr><td>Shift + 滑鼠點擊</td><td>選擇/排除選擇(配合範圍選擇)好幾個物件</td></tr> <tr><td>Esc</td><td>取消全部選擇</td></tr> <tr><td>Ctrl + A</td><td>選擇本圖層所有物件</td></tr> <tr><td>Ctrl + G</td><td>建立群組</td></tr> <tr><td>Ctrl + U</td><td>解散群組</td></tr> <tr><td>Ctrl + Shift + G</td><td>解散群組</td></tr> <tr><td>Ctrl + 滑鼠點擊</td><td>選用群組中的物件加以編輯</td></tr> <tr><td>Ctrl + Shift + 滑鼠點擊</td><td>選用群組中的多個物件加以編輯</td></tr> <tr><td>Ctrl＋F1</td><td>漸層工具</td></tr> <tr><td>F7</td><td>吸管</td></tr> <tr><td>Ctrl + D</td><td>複製</td></tr> </Table> *作業四：[http://jendo.org/files/6year/教學資源/資訊/SVG/notebook.svg 記事本] *作業五：[http://jendo.org/files/6year/教學資源/資訊/SVG/Lesson-2.svg Lesson-2.svg]中的變形，任選一至二個圖形 ===2017.12.12=== GIS(一) GIS (Geographic Information System,地理資訊系統)，是指在地圖上加上數據或訊息。 ====概述==== *使用地圖庫： *#google map：google釋出的地圖庫，公布了API使得用戶能夠建立自訂的應用。公開格式，但非公共版權內容。 *#OpenStreetMap：(開放街圖，簡稱OSM)，於2004年由英國的 Steve Coast 發起，採用類似 Wiki 的協作編輯以及開放的授權與格式。 * GIS 相關單字。 *#zoom:放大或縮小畫面 *#overlay:覆蓋物，GIS中用複數overlays *#marker:標記，GIS中代表地點標示，用複數markers *#address:地址 *#latitude:緯度 *#longitude:經度 *#coord:經緯度座標，GIS中代表地點標示，用複數coords *#map:地圖 *#type:類別 *#road:道路 *#color:顏色 *#fill:填滿 *#radius:半徑 *#html:超文件 *#content:內容 *#popup:跳出 *#false:假的，不成立 *#true:真的，成立 *#polyline:多點成線 *#polygon:多邊形 *#circle:圓形 *#rectangle：方形(矩形) *#ROADMAP：道路地圖 *#SATELLITE：衛星空照圖 *#HYBRID：道路與空照圖相疊加。 *#TERRAIN：地形圖 *初階應用，大槪分為 markers (標點)， overlays (標區域)，使用的語法是 javascript 。 *範例： *#[http://jendo.org/~admin/Africa.html 非洲] *#[http://jendo.org/~admin/America.html 美洲] *#[http://jendo.org/~admin/Eurasia.html 歐亞大陸] *#[http://jendo.org/~admin/Greece.html 希臘古戰場] *#[http://jendo.org/~admin/以色列.html 以色列] *#[http://jendo.org/~admin/中正山.html 境內行動學習] *#[http://jendo.org/~admin/Chengdu.html 境外行動學習] *#[http://jendo.org/~admin/丁丁家.html 住家] *#[http://jendo.org/~admin/gismap0.html 範例總覽] *#[http://jendo.org/~admin/gismap1.html 一點一區] *#[http://jendo.org/~admin/markerDemo1.html 標點無連結] *#[http://jendo.org/~admin/markerDemo2.html 標點加連結] *基本 DIV <pre> <meta content='text/html;charset=utf-8' http-equiv='Content-Type'> <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script> <script type='text/javascript' src='http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3.3.min.js'></script> <script> $(function(){ $('#map').goMap({ ……… }); }); </script> <div align=center id='map' style='height:550px; width:900px;'>六年制學程</div></pre> ====括號、引號必須成對==== *所有字和符號都用「英數」、「半形」符號，不可以用全形符號。 *所有的小括號、中括號、大括號、單引號、雙引號都要成對。 *每一對大括號代表<u>一個東西</u>(物件)，東西裡面可以包進去更小的東西，東西不一定要取名字。例如： *#一張地圖。 *#一個覆蓋物。 *#一個經緯度座標點。 *#一個地點標示。 *#一個html指示。 *每一對中括號裡面包<u>一群相同的東西</u>。例如： *#一群 marker 包成一組，名字叫 markers ； *#一群 overlay 包成一組，名字叫 overlays ； *#一群 coord(經緯度座標)包成一組，名字叫 coords 。 *每一對小括號中代表「函式」要作用的對象，現在先不必記它。 ====整張圖的性質==== #調整比例尺的性質：zoom:1~20。1比例尺最大，20比例尺最小。 #標定整張地圖中心點位置的性質： #*latitude:緯度，十進位。 #*longitude:經度，十進位。 #*address:地址。如：以色列。 #地圖種類：maptype:值加引號有四種選擇： #*ROADMAP：道路地圖 #*SATELLITE：衛星空照圖 #*HYBRID：道路與空照圖相疊加。 #*TERRAIN：地形圖 #markers：各個地點標示 #overlays：各個覆蓋物 ====標點==== *性質的名稱和性質的「值」用「:」連接。 *同一級或同一組的東西並列時，用「,」分開，但是最後一個性質或東西後面不可以加「,」，因為後面沒有東西了。 *HTML 中的樣式語法有點像 GIS 中性質語法，但前者是用「;」間隔開兩組樣式，後者是用「,」間隔開兩組性質或東西。 ====取得經緯度的方法==== *android 上面必須使用 chrome 瀏覽器，不能使用預設瀏覽器。也不能使用地圖 app 。 *#地圖上某一點按久一點，模擬滑鼠右鍵，出現下拉式選單，按下「這裡有什麼？」 *網址使用 maps.google.com.tw?ui=maps 得到 ms 介面。 *#ms介面可以到「地圖研究室」啟動「經緯標記」。 *#長按地圖上一點，會跳出選單。選「標記經緯度」，可以標示經緯度。但標示點會偏，需要修正。 *PC板只要使用滑鼠，而且不限瀏覽器。 *#在要找的點，點擊滑鼠左鍵。就會出現該點的地址及經緯度。 *#網址列如打出：「[https://www.google.com.tw/maps/@25.0246702,121.4566057,16z https://www.google.com.tw/maps/@25.0246702,121.4566057,16z]」可以指示圖中心點的經緯度及zoom的等級。 ====作業==== #去抄[http://jendo.org/~admin/markerDemo1.html 標點無連結]的原始碼回來，改成你家附近的地標。 #為上述地標找到介紹頁。 #將介紹頁的連結加到你的地標上。(參考[http://jendo.org/~admin/markerDemo1.html 標點加連結]) #將圖示改成你找的小圖， svg,png,jpg,gif 皆可。 #增加第二個地標。 *張又懿：[http://6years.jendo.org/~張又懿/gis2.html 張又懿] *張鈞祺：[http://6years.jendo.org/~張鈞祺/住家.html 張鈞祺] *柯智懷：[http://6years.jendo.org/~柯智懷/gis1.html 柯智懷] *盧星瑜：[http://6years.jendo.org/~盧星瑜/gis/gis1.html 盧星瑜] *蕭卉均：[http://6years.jendo.org/~蕭卉均/gis1.html 蕭卉均] *李彥廷：[http://6years.jendo.org/~李彥廷/gis1.html 李彥廷] *劉國安：[http://6years.jendo.org/~劉國安/GIS1.html 劉國安] ===2017.12.19=== GIS(二) ====markers內參數==== *整個markers:後面用一個中括號把所有的點包起來。中括號裡面，每一組大括號是一個點。 *第一個 marker 為整張圖的中心點，優先於整張圖的中心點。 *每一個點內，諸參數如下： #address:值為字串，故加引號，可用國名如「台灣」或地址如「台灣新北市三峽區三樹路2號」 #longitude:經度，十進位。如：121.459502 #latitude:緯度，十進位。如：25.025448 #html:放物件，內含： #*content:HTML碼 #*popup:false不主動彈出；true主動彈出。 #title:游標停住會顯示。 #draggable:true代表可拖動。 #icon:字串，代表圖檔。 ====overlays內參數==== 每一個覆蓋物用大括號包起來，所有的覆蓋物用中括號包起來。 每一個覆蓋物共有的性質有：type、color、fillColor。 四種覆蓋物各自的參數： #circle 圓：latitude、longitude、radius #polyline 線：coords #polygon 多邊形：coords #rectangle 方形(矩形)：ne、sw ====作業==== *將範例程式的圖中心點，改成自己家，路線圖改在自己家附近，圓圈圈住自己家。 *做新的檔案，目標對準以色列，並用圓圈圈住死海。 *在上一個檔案中，加入耶路撒冷、海法、台拉維夫三個城市的「地點標示」，點擊地點標示時，跳出連結，可以連向維基百科的介紹頁。 *自訂主題，運用 GIS 幫助自己進行主題的說明與表達。 ===2017.12.26=== GIS(三) ====google 我的地圖==== *進入方法： *#[https://www.google.com/maps/d/ https://www.google.com/maps/d/] 或 [https://www.google.com/maps/d/?hl=zh-TW https://www.google.com/maps/d/?hl=zh-TW] *#「google 地圖選單/我的地點/地圖/建立地圖」 *一圖多層： *#觀摩丁丁的我的地圖 *#[http://www.playpcesor.com/2016/03/google-maps-my-maps.html 操作講義] *#存成 kml 檔 *別人分享出來的地圖，以[https://maps.google.com/maps/ms?msa=0&msid=216006515222070930637.0004ccf5b0fba2ca5b9e6&hl=zh-TW&ie=UTF8&t=h&ll=24.945655,121.454673&spn=0.00681,0.00912&z=16&source=embed&dg=feature 台北郊山地圖]<br/>[http://jax-work-archive.blogspot.tw/2011/07/google-maps.html 中文參數說明]<br/>[http://asnsblues.blogspot.tw/2011/11/google-maps-query-string-parameters.html 英文參數說明] *#msa=0：處理我的地圖。msa配合「/ms」，兩者缺一就什麼都不做。msa=0配合msid=用以秀出一個特定的地圖。msa=1直接顯示我的地圖側邊欄。msa=2直接跳到創建我的地圖。 *#msid=216006515222070930637.0004ccf5b0fba2ca5b9e6：登山 - 台北郊山景點地圖。 *#hl=zh-TW：主機語言。 *#ie=UTF8：指定輸入的字符編碼。 *#oe=UTF8：指定輸出的字符編碼。 *#t=h：地圖類型。m為常規地圖，k為衛星地圖，h為混合地圖，p為地域地圖。 *#ll=24.945655,121.454673：地圖中心點經緯度。 *#spn=0.00681,0.00912：大致的區域。如果沒有指縮放參數z=，那麼將調整縮放水平到一個合理的數值。 *#z=16：放大縮小。值範圍1~20。1比例尺最大，20比例尺最小。 *#source=embed：原始碼嵌入。 *#dg=feature：自動產生，不必下命令。 ====結合「我的地圖」與 GIS==== *GIS←kml←google 我的地圖 *什麼是 kml *將 kml 中的經緯度，換成 GIS *#將經緯度段落複製到一個新檔。 *#將經緯度前的空白換成四個 tab *#將「,0\n」置換成「}\n」 *#將「\t\t\t\t」置換成「\t\t\t\t{longitude:」 *#將「,」置換成「,latitude:」 *#將「}」置換成「},」 *置換後的經緯度座標，嵌入 GIS 的 polyline 裡的 coords:[]性質中。 ===2018.1.2=== 圖形計算機(一) *製作 svgdraw.php *#[http://6years.jendo.org/~丁志仁/svg/svgdraw.txt 抄原始碼(utf-8)] *#在每個同學的 www 之下建 svg ，之下建 svgdraw.php ，內容抄上面。 *#檔名自己取，副檔名用 php ，基本內容： <pre><?php require_once("./svgdraw.php"); $draw = new svgdraw; … $drawResult=$draw->draw(); echo $drawResult['svg']; ?></pre> *基本圖紙： *#圖寬：$draw->W，預設601。 *#圖高：$draw->H，預設401。 *#原點距左上角：$draw->x0,$draw->y0，預設(200,200)。 *#x每單位幾點：$draw->xu，預設15。 *#y每單位幾點：$draw->yu，預設15。 *#x每幾單位畫一個刻度：$draw->xGraduate，預設1。 *#y每幾單位畫一個刻度：$draw->yGraduate，預設1。 *#x每幾刻度標示一數字：$draw->xScale，預設1。 *#y每幾刻度標示一數字：$draw->yScale，預設1。 *#秀出直角座標系：$draw->coordinate，預設1。 *#函式描點密度：$draw->pointDensity，預設20。 *基本圖： ===2018.1.9=== 圖形計算機(二) ===2018.1.16=== 總復習與綜合演練 ===2018.1.23=== 綜合演練與實作評量
此頁面包含以下模板:
SVG/path
（
檢視原始碼
）
資訊基礎應用/課程概述
（
檢視原始碼
）
返回到
資訊基礎應用
。
導航
個人工具
登入
名字空間
頁面
討論
變換
檢視
閱讀
檢視原始碼
檢視歷史
動作
搜尋
導覽
首頁
近期變動
隨機頁面
使用說明
工具箱
連入頁面
相關頁面修訂記錄
特殊頁面
頁面資訊
