檢視 資訊基礎應用 的原始碼
←
資訊基礎應用
跳轉到：
導覽
、
搜尋
根據以下的原因，您並無權限去做編輯這個頁面:
您剛才的請求只有這個使用者組的使用者才能使用:
使用者
你可以檢視並複製本頁面的原始碼。
[[分類:資訊基礎應用]] ==概述== {{:資訊基礎應用/課程概述}} ===四、重要參考資料=== *[[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)'/> </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，作等比例縮放。 *作圖練習二(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 位元版。 *#下載對應的免安裝版。 *#解壓縮。 ===2017.12.5=== inkscape(二) ===2017.12.12=== 圖形計算機(一) ===2017.12.19=== 圖形計算機(二) ===2017.12.26=== GIS ===2018.2.2=== GIS ===2018.2.9=== GIS ===2018.2.16=== 總復習與綜合演練 ===2018.2.23=== 綜合演練與實作評量
此頁面包含以下模板:
SVG/path
（
檢視原始碼
）
資訊基礎應用/課程概述
（
檢視原始碼
）
返回到
資訊基礎應用
。
導航
個人工具
登入
名字空間
頁面
討論
變換
檢視
閱讀
檢視原始碼
檢視歷史
動作
搜尋
導覽
首頁
近期變動
隨機頁面
使用說明
工具箱
連入頁面
相關頁面修訂記錄
特殊頁面
頁面資訊
