資訊基礎應用/張又懿：修訂版本之間的差異

出自六年制學程
跳轉到： 導覽、 搜尋
（→‎9/26上課所學）
（→‎11/7上課所學）
 
（未顯示2位用戶所作出之96次版本）
第 4 行： 第 4 行：
  
  
 +
=張又懿筆記頁=
 
==已記住的英文單字==
 
==已記住的英文單字==
 
#table
 
#table
第 16 行： 第 17 行：
 
#hr
 
#hr
 
#ol
 
#ol
 +
 
==上課所學==
 
==上課所學==
 
===9/5上課所學===
 
===9/5上課所學===
第 135 行： 第 137 行：
 
     td    {border:#200 dashed 1px}
 
     td    {border:#200 dashed 1px}
 
     tr    {border:yellow solid 1px}
 
     tr    {border:yellow solid 1px}
−
     #xyz   {border:purple dashed 1px}
+
     #xyz {border:purple dashed 1px}
 
     </style>
 
     </style>
 
     <table>
 
     <table>
第 160 行： 第 162 行：
 
**第三曾HTML最後才會選擇採用它的樣式，這個方法是建立一個CSS要使用時只需要導入就行了。
 
**第三曾HTML最後才會選擇採用它的樣式，這個方法是建立一個CSS要使用時只需要導入就行了。
 
*[http://6years.jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/%E5%BC%B5%E5%8F%88%E6%87%BF%E8%87%AA%E6%88%91%E4%BB%8B%E7%B4%B9.html 上禮拜作業]
 
*[http://6years.jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/%E5%BC%B5%E5%8F%88%E6%87%BF%E8%87%AA%E6%88%91%E4%BB%8B%E7%B4%B9.html 上禮拜作業]
 +
=====CSS如何呼叫?=====
 +
*CSS屬於樣式，但是要先定義好才能使用，用link的功能來呼叫出CSS
  
 
===9/26上課所學===
 
===9/26上課所學===
 
*學習有次序，沒有次序的列表。
 
*學習有次序，沒有次序的列表。
 +
[https://commons.wikimedia.org/wiki/Main_Page 維基共享資源]
 +
====圖片====
 +
[[File:Pygocentrus natterei Prague 2012 2.jpg|300px]]
 +
*[http://6years.jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/table4.html wiki和html對照表]
 +
 +
====匯入照片步驟====
 +
#開啟維基共享資源，不需登入即可使用圖照，但要上傳就必須登入。
 +
#在搜尋引擎中尋找自己中意的圖片
 +
#使用   
 +
&lt;[[File:Piranha face.jpg|300px]]
 +
 +
*六種CC類別(123)
 +
*#姓名表示
 +
*#可商業利用
 +
*#非商業
 +
*#可改做
 +
*#不可改做
 +
*#相同方式分想
 +
**CC絕對允許共同使用，對不特定對象授權
 +
 +
====wiki筆記====
 +
*雙層中括號(常用img)和單層中括號(a)一個用數條另一個使用空白
 +
*老師的口訣：井號、星號、等號、中括號；用空白行分段
 +
<table class=nicetable>
 +
<tr>
 +
<td>數列</td>
 +
<td>#</td>
 +
</tr>
 +
 +
<tr>
 +
<td>不排序數列</td>
 +
<td>*</td>
 +
</tr>
 +
 +
<tr>
 +
<td>標題</td>
 +
<td>==</td>
 +
</tr>
 +
<tr>
 +
<td>描述定義</td>
 +
<td>:;</td>
 +
</tr>
 +
</table>
 +
*「''…''」兩個單引號代表''拉斜''
 +
*「'''…'''」三個單引號代表要'''加粗'''
 +
*格的屬性在該格內容之前且與內容以「|」隔開。
 +
*四種常用元素
 +
*#文字
 +
*#圖照
 +
*#聲音
 +
*#影片
 +
 +
====檔案格式====
 +
#pug:每個點都是原色，不失真公開格式
 +
#jpg：點陣圖壓縮，普遍應用，非公開格式，但從沒收過錢，是專利
 +
#gif：可動畫，256色，也不是公開格式
 +
*svg是向量圖
 +
**點陣圖會毛邊
 +
**向量圖不會
 +
*自然人死後五十年變大家的，公司是100年(美國的自然人變成70年)
 +
====wiki和html對照====
 +
<table class=nicetable>
 +
<tr>
 +
<td>指令/程式</td>
 +
<td>wiki</td>
 +
<td>html</td>
 +
</tr>
 +
 +
<tr>
 +
<td>表格</td>
 +
<td>table</td>
 +
<td>table</td>
 +
</tr>
 +
 +
<tr>
 +
<td>列</td>
 +
<td>tr</td>
 +
<td>tr</td>
 +
</tr>
 +
 +
<tr>
 +
<td>格</td>
 +
<td>td</td>
 +
<td>td</td>
 +
</tr>
 +
 +
<tr>
 +
<td>排序列</td>
 +
<td>#</td>
 +
<td>ol</td>
 +
</tr>
 +
</table>
  
 
===10/3上課所學===
 
===10/3上課所學===
−
===10/10上課所學===
+
*自我介紹「製作履歷表」
 +
*作業繳交[http://6years.jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html 履歷表]
 +
====如何決定頁面大小====
 +
因為我們要使用HTML做出下載後就能直接用word開啟的文件，所以需要抓好size。
 +
製作順序
 +
#開啟word
 +
#開啟尺規
 +
#算好表格的長寬
 +
使用程式碼
 +
    @page a4{
 +
    size:21cm 29.7cm;
 +
    margin:3cm 2cm 3cm 2cm;
 +
    }
 +
 
 
===10/17上課所學===
 
===10/17上課所學===
 +
寫HTML>用WORD讀>存DOCX或PDF>去7-11列印
 +
markup
 +
提供指示
 +
XML想要 標籤的人自己發明標籤
 +
二十個就夠了
 +
不夠記
 +
微軟的規格
 +
不會重複
 +
*<>是標籤
 +
*HTML4之前不行
 +
*HTML5才可以
 +
*帶META指令
 +
*body與head的差異
 +
**head裡做定義
 +
**像是CSS樣式，title等...部分
 +
**BODY中做顯示部份，這裡就是網站主要的內容，
 +
*黑盒子
 +
**margin(邊沿)：
 +
***margin:上 右 下 左;　margin:上下 左右;　margin:上 左右 下;　margin:四個邊同樣値;
 +
**padding(內距)：
 +
***padding:auto;：讓瀏覽器自己去設定
 +
***padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。兩者不建議使用。
 +
***padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;
 +
**border(邊框)：
 +
*[http://jendo.org/wiki1231/index.php?title=HTML/%E9%81%A9%E6%87%89word HTML對比WORD講義]
 +
*表格樣式
 +
*#實線border-style:solid;
 +
*#點線border-style:dotted;
 +
*#虛線border-style:dashed;
 +
*#框線border-style:double;
 +
*#外凸線border-style:outset;
 +
*#內凸線border-style:inset;
 +
*#溝線border-style:groove;
 +
*#立體線border-style:ridge;
 +
*#沒線border-style:ridge;
 +
*合併表格的框線border-collapse:collapse
 +
*PT是長度(每英吋72)2.542分
 +
*font-family字形
 +
*font-size字的尺寸
 +
*font字
 +
*padding：與邊框距離
 +
*螢幕解析100% 96/吋
 +
*螢幕解析125% 120/吋
 +
*表格把圖片放在P標籤中。WORD就接受了。
 +
*&nbsp;空白
 +
=====HTML中的特殊符號=====
 +
*在HTML中，〈、〉、＆、〝等符號被用來當成標記使用，因此，當瀏覽器讀到這些符號時，會自動把它們當成標記。
 +
*假如要在瀏覽器中顯示這些符號，就必須用：
 +
**「＆ｌｔ；&lt;」來顯示小於符號
 +
**「＆ｇｔ；&gt;」來顯示大於符號
 +
**「＆ａｍｐ；&amp;」來顯示＆符號
 +
**「＆ｑｕｏｔ；&quot;」來顯示雙引號
 +
**[http://tool.chinaz.com/Tools/htmlchar.aspx 更多特殊符號]
 +
**[http://expect7.pixnet.net/blog/post/39059470-%5B%E7%A8%8B%E5%BC%8F%5D%5Bhtml%5D-html%E8%AA%9E%E6%B3%95%E7%9A%84%E4%B8%80%E4%BA%9B%E7%89%B9%E6%AE%8A%E7%AC%A6%E8%99%9F%E3%80%82 特殊符號代碼]
 +
 +
=====本次練習=====
 +
*強制HTML印出時換頁。
 +
*網路上查到的程式碼
 +
    br style='page-break-before:always' />
 +
*這是一個style所以要先在head裡頭定義
 +
    {page-break-before: always /*在標籤前換頁*/}
 +
    {page-break-after: always /*在標籤後換頁*/}
 +
 
===10/24上課所學===
 
===10/24上課所學===
−
===10/31上課所學===
+
*svg放大不毛邊
 +
*用程式碼構成一張圖
 +
*步驟
 +
*#宣告格式(版本 字格式 是否獨立存在)
 +
*#SVG開始(格式、長寬)
 +
*#SVG結束
 +
*今日學會使用
 +
**polyline
 +
**polygon
 +
**circle(作業小熊)
 +
&lt;<?xml version='1.0' encoding='UTF-8' standalone='no'?>
 +
&lt;<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='400' height='400'>
 +
&lt;<circle cx='200' cy='300' r='150' style='fill:#ffdc35;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='120' cy='120' r='40' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='280' cy='120' r='40' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='120' cy='130' r='30' style='fill:#FFAD86;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='280' cy='130' r='30' style='fill:#FFAD86;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='200' cy='200' r='100' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='150' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='150' cy='181' r='5' style='fill:#fff;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='250' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='250' cy='181' r='5' style='fill:#fff;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='200' cy='240' r='50' style='fill:#FFD39B;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='200' cy='215' r='10' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='130' cy='240' r='10' style='fill:#FFCBB3;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='270' cy='240' r='10' style='fill:#FFCBB3;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;<circle cx='200' cy='280' r='5'  style='fill:#000;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
&lt;</svg>
 +
**小熊由七個圓組成
 +
====什麼是SVG====
 +
可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。
 +
這是網路上的標準定義。
 +
 
 
===11/7上課所學===
 
===11/7上課所學===
 +
*今日練習：
 +
<img src='http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E8%8A%B1%E6%9C%B5.svg' />
 +
====SVG編寫製做====
 +
*步驟一：開啟fielzilla，連線至站台
 +
*步驟二：home>www>SVG，在這個資料夾中，建立新檔案。
 +
*步驟三：命名為：flower(記得要加入副檔名.svg)
 +
*步驟四：寫入程式碼。
 +
 
===11/14上課所學===
 
===11/14上課所學===
 +
====線形漸層====
 +
*可固定Y或X來達到向下或向左的漸層
 +
*用polygon points畫出箭頭，用漸層的ID來引入
 +
*offset屬性用來定義漸層的開始和結束位置，其 100% 是指整個漸層範圍。
 +
*stop-color 屬性用來定義顏色，也可以做為 style 的樣式。
 +
*stop-opacity 屬性決定透明度，也可以做為 style 的樣式。
 +
*今日成品：
 +
<img src ="">
 +
=====漸層=====
 +
*漸層由一種以上的顏色所組成，由一種顏色慢慢轉成另一種顏色，設定好顏色之後，再以ID的形式給漸層。
 +
*漸層(又稱為「漸變」)是指將構成元素的形狀或色彩做次第改變的層層變化。例如，同一種形狀的漸大或漸小、同一種色彩的漸濃或漸淡，均屬於漸層的形式變化，而在這些漸增或漸減的層次變化中，即能具現出漸層的美感。
 +
*漸變的基本原理與反覆相類似，但由於其中或形或色的漸次改變，使得畫面較具活潑性，予人生動輕快的感受。中國建築中的寶塔；樂曲中音量的漸強漸弱；文學小說中情節高潮的堆且；大會舞隊型的漸次縮小或擴大……等，都是漸層形式原理的例子。
 +
=====漸層寫法=====
 +
*漸層是要先寫好，再使用ID匯入。
 +
範例程式
 +
    <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>
 +
*使用時要用下列程式呼叫出這個linearGradient
 +
    <rect width='130' height='90' x='0' y='0' stroke='red' fill='url(#LG)' />
 +
*rect是矩形高度、寬度都不是重點，重要的是最後面的fill='url(#LG)'
 +
*LG是id的名稱
 +
 
===11/21上課所學===
 
===11/21上課所學===
−
===11/29上課所學===
+
====貝茲曲線====
−
===12/6上課所學===
+
在數學的數值分析領域中，貝茲曲線（英語：Bézier curve，亦作「貝塞爾」）是計算機圖形學中相當重要的參數曲線。更高維度的廣泛化貝茲曲線就稱作貝茲曲面，其中貝茲三角是一種特殊的實例。
−
===12/13上課所學===
+
貝茲曲線於1962年，由法國工程師皮埃爾·貝茲（Pierre Bézier）所廣泛發表，他運用貝茲曲線來為汽車的主體進行設計。貝茲曲線最初由Paul de Casteljau於1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲曲線。
−
===12/20上課所學===
+
 
−
===12/27上課所學===
+
=====二次貝茲曲線=====
−
===1/3上課所學===
+
貝茲曲線的程式碼
−
===1/10上課所學===
+
    <path id='a1' d='M0,50 C150,130 100,0 300,40' style='stroke:#000;fill:none;' />
 +
*用貝茲曲線設定文字要先在<def></def>寫好，再使用id匯入。
 +
*所以只需要設定一次，就可以使用設好的ID使用多次。
 +
*我可以在每一個<textPath></textPath>中放上不一樣的文字，就會有一樣的角度，不同的樣貌
 +
程式碼如下(此為文字)
 +
  <textPath startOffset='4%' xlink:href='#a1' style='font-family:KaiTi;fill:pink;font-size:40px'></textPath>
 +
純貝茲曲線指令碼
 +
  <path d='M0,0 Q50,50 20,0 T40,0 60,0 80,0 100,0 120,0 140,0 160,0 180,0 200,0' style='stroke:black;fill:none;' transform='translate(0,50)'/>
 +
 
 +
=====三次貝茲曲線=====
 +
三次的程式碼
 +
    <path d='M0,50 C50,100 80,0 200 50' style='stroke:blue;fill:none;' />
 +
*三次與兩次相比更加細緻。
 +
=====三次與數次貝茲曲線的差異=====
 +
*以此類推，雖然曲線細緻度不同，但基層的原理一樣。
 +
=====鋸子程式碼=====
 +
    <?xml version='1.0' encoding='UTF-8' standalone='no'?>
 +
    <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='300' width ='800'>
 +
        <path d='M0,0 0,20 20,40 40,20 60,40 80,20 100,40 120,20 140,40 160,20 180,40 200,20 220,40 240,20 260,40 280,20 300,40 320,20 340,40 360,20
 +
        380,40  400,20 400,80 600,80 600,120 400,120 400,200 0,200 z' style='stroke:black;fill:none;'/>
 +
    </svg>
 +
=====svg動畫=====
 +
向前移動並消失的程式碼
 +
    <?xml version='1.0' encoding='UTF-8' standalone='no'?>
 +
    <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='400' width ='1000'>
 +
    <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>   
 +
    <circle cx="30" cy="30" r="25" style="stroke: none; fill:url(#LG);">
 +
    <animate attributeName="cx" attributeType="XML"
 +
        from="30"  to="1020"
 +
        begin="0s" dur="3s"
 +
        fill="remove" repeatCount="indefinite"/>
 +
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" />
 +
    </circle>
 +
    </svg>
 +
 
 +
===11/28上課所學===
 +
====inkscape====
 +
*免費的SVG建構軟體，有點像Adobe的AI繪圖軟體。
 +
*Inkscape是一套向量圖形編輯器，以自由軟體授權發布與使用。該軟體的開發目標是成為一套強力的繪圖軟體，且能完全遵循與支援XML、SVG及CSS等開放性的標準格式。Inkscape是一套跨平台性的應用程式，Windows、Mac OS X、Linux及類UNIX版等作業系統。
 +
*inkscape存檔後會轉成SVG，所以，我們可以用它來製作svg。
 +
*inkscape轉出後的程式碼幾乎都會變成貝茲曲線或是多邊形。
 +
*但是inkscape最大的壞處就是不能畫動畫。
 +
=====發展過程=====
 +
Inkscape始於2003年，最初是Sodipodi的一個分支、分線發展（fork），Sodipodi自身則是在1999年以Raph Levien的Gill為基礎開始。
 +
 
 +
此一分線發展的主導來自一個四人團隊，這四人之前為Sodipodi的開發人員，他們分別是Ted Gould、Bryce Harrington、Nathan Hurst、以及MenTaLguY，他們對原有專案目標有不同的見解體認，並未公開地進行協力貢獻，且技巧性的否認他們的動機用意是為了分線發展。此外，他們聲明Inkscape的發展是嘗試與專注在完整實現SVG的標準上，相對的Sodipodi的發展強調是在於建立一套一般性用途的向量圖形編輯器，因此可能難以兼顧SVG方面的發展與支援性。
 +
 
 +
分線發展後，Inkscape也變更了幾項事物，例如開發所用的程式語言從C換成C++；而函式庫方面也換成GTK+工具套件的C++綁定（gtkmm）、重新設計使用者介面並加入多項的新功能特點;事實上的圖像使用的語言主要是python外掛程式也是一樣的。雖然Inkscape對SVG標準的支援實現是採階段性的精進強化路線，不過至今仍未完整。
 +
 
 +
再者，Inkscape聲明在專案的開發執行上將不採行「由上到下的治理」（top-down governance）架構，而是提倡平等式文化，權柄作法或個別開發者的獨特才幹與作為，對Inkscape的發展而言都會造成拖累影響。因此，此專案特別強調其原始程式碼是放在任何參與專案活動的開發者都可以存取的位置，並在更大的開放原碼社群中進行參與及分享（這經常會形成跨專案的推動以及專案的分立，例如：Open Clip Art Library）。
 +
 
 +
雖然專案發起人依舊在決策程式上有高度代表性，不過許多新近參與者也扮演著關鍵的角色任務，例如Bulia Byak就為Inkscape的使用者介面帶來根基性的新架構，新架構為今日的Inkscape帶來新的呈現畫面。
 +
 
 +
此後，由於英國Xara公司宣布計畫將其所屬的繪圖應用程式：Xara Xtreme以開放原碼方式接續發展，這讓Inkscape的開發團隊深感興趣，並期望兩套軟體在後續發展上能緊密合作，嘗試找尋一種方式讓兩個軟體專案能共享原始程式碼、共享開發協調的心力成效等，並且使開放原碼在圖形方面的卓越表現，也能用在專屬軟體世界的各層面與環節。
 +
=====版本=====
 +
*0.92版（2016年1月4日，最新版）新特性包括網格漸變、更好的SVG2與CSS3支援、新路徑效果、鉛筆工具的互動平滑、管理所有繪圖元素的對話方塊等[2]
 +
*0.91版（2015年1月30日）改用一個新的內部彩現引擎Cairo，有更好的效能。新增了測量工具，可以量測物件之間的距離或交叉的角度。貼齊物件功能獲得了改善。此外也增加、改善了對多種圖片格式的支援，例如支援輸出FXG、SIF和HTML5格式，改善對PDF、EPS、PS+LaTeX的支援。
 +
*0.48版（2010年8月23日）加入新的噴塗工具、多徑編輯、文字上標/下標等功能
 +
*0.47版（2009年11月24日）加入了定時自動儲存，螺旋曲線，自動平滑節點，超過200個偏好設定過濾器等
 +
*0.46版（2008年3月24日）加入新的SVG濾鏡、支援開啟PDF檔案、修正OpenType/PostScript和Type1字型支援等。
 +
*0.45版（2007年1月15日）加入高斯模糊（Gaussian Blur）
 +
*0.44版（2006年6月24日）加入階層對話方塊，支援剪裁與遮罩，強化PDF的透明性匯出，及效能強化等。
 +
*0.43版（2005年11月19日）加入了連接器工具、協同編輯、手寫板壓力／角度感應能力、以及強化節點工具。
 +
*0.42版（2005年7月26日）加入文字直書功能、風格走文功能、強化效果支援、以及新的漸層工具。
 +
*0.41版（2005年2月10日）加入翻製疊磚工具及顏色追蹤，並修補許多軟體錯誤（臭蟲）。
 +
*0.40版，加入了圖層、點陣圖追蹤，以及在路徑上使用文字。
 +
*0.39版，首次用Pango函式庫發布，如此可支援更多的語系，如支援標示器、翻製、以及花紋填色。
 +
*0.38版，發布此版主要在修補錯誤，不過也增加了文字的突端、間隔、多態漸層等功能特點，以及許多使用性的強化。
 +
*0.37版，布林路徑操作以及路徑內插、外貼。
 +
*0.36版，首次以改編過的新使用者介面來發布，介面上使用了功能選單，以及在檔案視窗中加入了脈絡感應工具列。
 +
*0.35版（2003年10月14日）是Inkscape發布的首版，與0.32版的Sodipodi非常相似。
 +
=====基本建立物件=====
 +
======繪圖======
 +
*鉛筆工具（徒手描繪，且可在路徑內進行填色）。
 +
*筆式工具（運用直線與貝茲曲線與來建立路徑）。
 +
*筆畫工具（運用電子手寫板（tablet）可用筆畫的壓力、角度來進行描繪與填色）。
 +
======樣式工具======
 +
*矩形（可選擇使用圓角化）。
 +
*圓形、橢圓形或弧形（可選擇圈、弧、段）。
 +
*星形／多邊形（可選擇尖角數、輪廓比例、圓角化、隨機等）。
 +
*螺旋形
 +
 
 +
======其他工具======
 +
*文字工具（橫書、多列或直書）
 +
*連結性的點陣圖圖形，無論是匯入或是光柵化的選取物件（針對嵌入的連結圖形，Inkscape另有一個個別獨立的公用程式可以運用）
 +
*翻製（以「活性」方式連結物件的複製）。相近的功效在其他程式上稱為「symbols」。
 +
 
 +
===12/5上課所學===
 +
繼續練習inkscape
 +
====inkscape的快捷鍵====
 +
 
 +
===12/12上課所學===
 +
GIS (Geographic Information System,地理資訊系統)，是指在地圖上加上數據或訊息。
 +
====GIS維基百科的定義====
 +
地理資訊系統（英語：Geographic Information System，縮寫：GIS）是一門綜合性學科，結合地理學與地圖學，已經廣泛的應用在不同的領域，是用於輸入、儲存、查詢、分析和顯示地理資料的電腦系統，可以分為以下五部分：
 +
 
 +
*人員，是GIS中最重要的組成部分。開發人員必須定義GIS中被執行的各種任務，開發處理程式。熟練的操作人員通常可以克服GIS軟體功能的不足，但是相反的情況就不成立。最好的軟體也無法彌補操作人員對GIS的一無所知所帶來的負作用。
 +
*資料，精確可用的資料可以影響到查詢和分析的結果。
 +
*硬體，硬體的效能影響到處理速度，使用是否方便及可能的輸出方式。
 +
*軟體，不僅包含GIS軟體，還包括各種資料庫，繪圖、統計、影像處理及其它程式。
 +
*過程，GIS要求明確定義，一致的方法來生成正確的可驗證的結果。
 +
GIS屬於資訊系統的一類，不同在於它能運作和處理地理參照資料。地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性，在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：地形圖
 +
 
 +
===12/19上課所學===
 +
*學會使用覆蓋物的功能。
 +
*作業：[http://6years.jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/%E5%9C%8B%E5%AE%B6%E5%85%AC%E5%9C%92.html 國家公園]
 +
 
 +
===12/26上課所學===
 +
*?後面代表要給伺服器的變數
 +
*zh-TW是中文的意思
 +
*hl=host language
 +
====今天的作業====
 +
*繪製自己的地圖
 +
*[http://6years.jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/%E7%B7%B4%E7%BF%92.html 作品]
 +
 
 +
===1/2上課所學===
 +
====圖形計算機基本繪圖====
 +
 
 +
===1/9上課所學===
 +
====涵式表示====
 +
    function test(){
 +
    alert("這個網頁很安全，請安心使用")
 +
    }
 +
    test();
 +
====多項式====
 +
 
 
===1/17上課所學===
 
===1/17上課所學===
 
===1/23上課所學===
 
===1/23上課所學===
−
 
 
===1/30上課所學===
 
===1/30上課所學===

2019年11月6日 (三) 09:59的最新修訂版本



目錄

張又懿筆記頁

已記住的英文單字

  1. table
  2. row
  3. hyper
  4. text
  5. markup
  6. head
  7. title
  8. body
  9. hr
  10. hr
  11. ol

上課所學

9/5上課所學

  1. 編號(ip)ipv4 piv6

ooo.ooo.ooo.ooo 255.255.255.255

  1. 網址(域名)

65536 物聯網 一切人造物接上網路，得失相兼 福禍相依 連結夠大，連結夠大就有智慧 域名伺服器 hosts ds216區網的位置

  • 一定要將字體設為UFT-8才能通用多國語言

9/12上課所學

  • 練習.今天學到如何建立"筆記頁"，要注意有沒有登入自己的帳號才能建立。(#後面的都是數值。)
  • 配色.用光的三原色調出顏色red green blue，數字、字母代表數字。
  • 複習.使用table、td、tr來製做基本表格。製做："同學通訊錄"(使用border來做邊界。)
  • 學會使用style美化表格
  • 今天學到的有兩種學法一種是一個一個設定，另一個是直接做一個主控制程式，主控制程式的比較簡潔好用。
  • style是HTML中很基本的指令。
  • style指令：在自己定義的"代碼(今天使用的是nicetable來當代碼)"凡是在.後面的都是代碼下的指令，class就是類的意思，我們下的指令是關於邊框屬性的。
  • style和bordor相比style比較廣用，能做出的變化比較多。 
 <style>
 .nicetable {border:4px solid green;border-collapse:collapse;}
 </style>
張又懿yuyiolulu@gmail.com0983329126
張鈞祺chunchiolulu@gmail.com0966070126
蕭卉均suzy92126@gmail.com0939912983
李彥廷leejerry0706@gmail.com0984201016
丁志仁alledu2@gmail.com0987466665
盧星瑜thsrrabbit0803@gmail.com0930980803
紀詠恩s950285en@gmail.com0963617815
  • style和border兩者之間的差異
屬性名屬性值
bordorpx
style......

作業一 作業二

  • 表格邊框美化的範例一 
<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>
  • 表格邊框美化的範例二 
<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>

9/19上課所學

  • 屬性值和屬性名用空白分開

EX: 

   .樣式名{
 CSS屬性名A:屬性值;
 CSS屬性名B:屬性值;
 }
  • 分號";"為結束或將兩者分開
  • 用,分開的意思是兩著皆是
  • id(identy)只能使用於專一的個人
  • 在程式碼最前面用#來下程式
  • dashed為虛線的意思

  • 中間為一段

  • br不需結尾，用途就像文書處理中的Enter
  • h1~h6用於段落標題，和wiki中的==用途一樣
  • 第三篇個名詞解釋
    • linl rel：呼叫
    • styleshee：它是這個頁面的樣式表
    • type：這個用於哪裡(我們在這裡使用text，也就是普通文字)
    • href：它在哪裡
    • .：在....
    • /：資料夾中的哪裡？
  • 學會第三種多篇是，設定一個程式，所有的其他HTML就可以拉出使用 
   <link rel='stylesheet' type='text/css' href='./pa.css'  />
   白話為：<link rel='stylesheet' type(它是我的樣式表)='text/css' href(它在哪裡)='.(此地)/pac.ss'  />
  • 在設定樣式主程式的時候在前面加上table代表只能使用於table，加上texT代表只能使用於text。
  • O名稱 標籤
  • .名稱 凡
    1. 名稱 指定的專一標籤
  • 屬性值與屬性名使用=
  • collapse(崩塌)
  • solid(實線)
  • 光三原色調出顏色red green blue

紅 # foo 綠 # ofo 藍 # oof 白 # fff 黑 # ooo

  • 樣式優先順序:link導入<.nicetable(舉例而已，只要加上.就可以定義自己的style)<行內的指令

CSS層疊樣式表（英語：Cascading Style Sheets)

CSS的用途是什麼？

CSS是一種樣式表語言，用於為HTML的樣式。可設定字體、顏色、邊距、高度、寬度等屬性。

CSS跟HTML的區別在哪裡？

HTML用於結構化內容；CSS用於格式化結構化的內容。

採用CSS有哪些好處？
  1. 通過單個樣式表控制多個文檔
  2. 更精確的佈局控制
  3. 為不同的媒體類型（螢幕、列印等）採取不同的佈局

今日程式碼 

    <link rel='stylesheet' type='text/css' href='./pac.ss'>
    <style>
     table {border:yellow dashed 3px}
     td    {border:#200 dashed 1px}
     tr    {border:yellow solid 1px}
     #xyz  {border:purple dashed 1px}
     </style>
     <table>
     <b>
     <tr><th class='nicetable' style= "border:yellow solid 1px;">張又懿</th><th style='border:1px solid red;border-
     collapse:collapse;'>yuyiolulu@gmail.com</th><th style='border:1px solid red;border-collapse:collapse;'>0983329126</th></tr>
     <tr><td>張鈞祺</td><td class='nicetable'>chunchiolulu@gmail.com</td><td class='nicetable'>0966070126</td></tr>
     <tr><th class='nicetable'>蕭卉均</th><td class='nicetable'>suzy92126@gmail.com</td><td class='nicetable'>0939912983</td></tr>
     <tr><th class='nicetable'>李彥廷</th><td class='nicetable'>leejerry0706@gmail.com</td><td class='nicetable'>0984201016</td></tr>
     <tr><th class='nicetable'>丁志仁</th><td id ='xyz'>alledu2@gmail.com</td><td class='nicetable'>0987466665</td></tr>
     <tr><th class='nicetable'>盧星瑜</th><td class='nicetable'>thsrrabbit0803@gmail.com</td><td class='nicetable'>0930980803</td></tr>
     <tr><th class='nicetable'>紀詠恩</th><td class='nicetable'>s950285en@gmail.com</td><td>0963617815</td></tr>
     </b>
     </table>
     <p class = "nicetable">以上是本班的通訊錄</p>
     <br><br><br>
  • 樣式用於
    • 標籤
    • class，也就是類別，這次我們使用的是：nicetable
    • ID，也就是某東西專屬的身份辨識，就像有些通訊軟體中的ID一樣
  • 這堂課學到第三種樣式的寫法，總體來說，有三層。
    • 第一層HTML會優先聽它的，但寫法很麻煩要一個一個td加上style。
    • 第二層HTML其次才會聽它的，在每一個新網頁要寫一排主控程式，比第一層方便，但如果我想要連結多個網站，就得乖乖的一個一個下主程式。
    • 第三曾HTML最後才會選擇採用它的樣式，這個方法是建立一個CSS要使用時只需要導入就行了。
  • 上禮拜作業
CSS如何呼叫?
  • CSS屬於樣式，但是要先定義好才能使用，用link的功能來呼叫出CSS

9/26上課所學

  • 學習有次序，沒有次序的列表。

維基共享資源

圖片

Pygocentrus natterei Prague 2012 2.jpg

匯入照片步驟

  1. 開啟維基共享資源，不需登入即可使用圖照，但要上傳就必須登入。
  2. 在搜尋引擎中尋找自己中意的圖片
  3. 使用

<Piranha face.jpg

  • 六種CC類別(123)
    1. 姓名表示
    2. 可商業利用
    3. 非商業
    4. 可改做
    5. 不可改做
    6. 相同方式分想
    • CC絕對允許共同使用，對不特定對象授權

wiki筆記

  • 雙層中括號(常用img)和單層中括號(a)一個用數條另一個使用空白
  • 老師的口訣：井號、星號、等號、中括號；用空白行分段
數列 #
不排序數列 *
標題 ==
描述定義 :;
  • 「…」兩個單引號代表拉斜
  • 「…」三個單引號代表要加粗
  • 格的屬性在該格內容之前且與內容以「|」隔開。
  • 四種常用元素
    1. 文字
    2. 圖照
    3. 聲音
    4. 影片

檔案格式

  1. pug:每個點都是原色，不失真公開格式
  2. jpg：點陣圖壓縮，普遍應用，非公開格式，但從沒收過錢，是專利
  3. gif：可動畫，256色，也不是公開格式
  • svg是向量圖
    • 點陣圖會毛邊
    • 向量圖不會
  • 自然人死後五十年變大家的，公司是100年(美國的自然人變成70年)

wiki和html對照

指令/程式 wiki html
表格 table table
列 tr tr
格 td td
排序列 # ol

10/3上課所學

  • 自我介紹「製作履歷表」
  • 作業繳交履歷表

如何決定頁面大小

因為我們要使用HTML做出下載後就能直接用word開啟的文件，所以需要抓好size。 製作順序

  1. 開啟word
  2. 開啟尺規
  3. 算好表格的長寬

使用程式碼 

    @page a4{
    size:21cm 29.7cm;
    margin:3cm 2cm 3cm 2cm;
    }

10/17上課所學

寫HTML>用WORD讀>存DOCX或PDF>去7-11列印 markup 提供指示 XML想要 標籤的人自己發明標籤 二十個就夠了 不夠記 微軟的規格 不會重複

  • <>是標籤
  • HTML4之前不行
  • HTML5才可以
  • 帶META指令
  • body與head的差異
    • head裡做定義
    • 像是CSS樣式，title等...部分
    • BODY中做顯示部份，這裡就是網站主要的內容，
  • 黑盒子
    • margin(邊沿)：
      • margin:上 右 下 左;　margin:上下 左右;　margin:上 左右 下;　margin:四個邊同樣値;
    • padding(內距)：
      • padding:auto;：讓瀏覽器自己去設定
      • padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。兩者不建議使用。
      • padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;
    • border(邊框)：
  • HTML對比WORD講義
  • 表格樣式
    1. 實線border-style:solid;
    2. 點線border-style:dotted;
    3. 虛線border-style:dashed;
    4. 框線border-style:double;
    5. 外凸線border-style:outset;
    6. 內凸線border-style:inset;
    7. 溝線border-style:groove;
    8. 立體線border-style:ridge;
    9. 沒線border-style:ridge;
  • 合併表格的框線border-collapse:collapse
  • PT是長度(每英吋72)2.542分
  • font-family字形
  • font-size字的尺寸
  • font字
  • padding：與邊框距離
  • 螢幕解析100% 96/吋
  • 螢幕解析125% 120/吋
  • 表格把圖片放在P標籤中。WORD就接受了。
  •  空白
HTML中的特殊符號
  • 在HTML中，〈、〉、＆、〝等符號被用來當成標記使用，因此，當瀏覽器讀到這些符號時，會自動把它們當成標記。
  • 假如要在瀏覽器中顯示這些符號，就必須用：
    • 「＆ｌｔ；<」來顯示小於符號
    • 「＆ｇｔ；>」來顯示大於符號
    • 「＆ａｍｐ；&」來顯示＆符號
    • 「＆ｑｕｏｔ；"」來顯示雙引號
    • 更多特殊符號
    • 特殊符號代碼
本次練習
  • 強制HTML印出時換頁。
  • 網路上查到的程式碼 
   br style='page-break-before:always' />
  • 這是一個style所以要先在head裡頭定義 
   {page-break-before: always /*在標籤前換頁*/}
   {page-break-after: always /*在標籤後換頁*/}

10/24上課所學

  • svg放大不毛邊
  • 用程式碼構成一張圖
  • 步驟
    1. 宣告格式(版本 字格式 是否獨立存在)
    2. SVG開始(格式、長寬)
    3. SVG結束
  • 今日學會使用
    • polyline
    • polygon
    • circle(作業小熊)

<<?xml version='1.0' encoding='UTF-8' standalone='no'?> <<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='400' height='400'> <<circle cx='200' cy='300' r='150' style='fill:#ffdc35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='120' cy='120' r='40' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='280' cy='120' r='40' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='120' cy='130' r='30' style='fill:#FFAD86;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='280' cy='130' r='30' style='fill:#FFAD86;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='200' r='100' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='150' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='150' cy='181' r='5' style='fill:#fff;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='250' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='250' cy='181' r='5' style='fill:#fff;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='240' r='50' style='fill:#FFD39B;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='215' r='10' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='130' cy='240' r='10' style='fill:#FFCBB3;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='270' cy='240' r='10' style='fill:#FFCBB3;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='280' r='5' style='fill:#000;stroke:black;stroke-width:2;fill-opacity:1'/> <</svg>

    • 小熊由七個圓組成

什麼是SVG

可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。 這是網路上的標準定義。

11/7上課所學

  • 今日練習：

SVG編寫製做

  • 步驟一：開啟fielzilla，連線至站台
  • 步驟二：home>www>SVG，在這個資料夾中，建立新檔案。
  • 步驟三：命名為：flower(記得要加入副檔名.svg)
  • 步驟四：寫入程式碼。

11/14上課所學

線形漸層

  • 可固定Y或X來達到向下或向左的漸層
  • 用polygon points畫出箭頭，用漸層的ID來引入
  • offset屬性用來定義漸層的開始和結束位置，其 100% 是指整個漸層範圍。
  • stop-color 屬性用來定義顏色，也可以做為 style 的樣式。
  • stop-opacity 屬性決定透明度，也可以做為 style 的樣式。
  • 今日成品：

漸層
  • 漸層由一種以上的顏色所組成，由一種顏色慢慢轉成另一種顏色，設定好顏色之後，再以ID的形式給漸層。
  • 漸層(又稱為「漸變」)是指將構成元素的形狀或色彩做次第改變的層層變化。例如，同一種形狀的漸大或漸小、同一種色彩的漸濃或漸淡，均屬於漸層的形式變化，而在這些漸增或漸減的層次變化中，即能具現出漸層的美感。
  • 漸變的基本原理與反覆相類似，但由於其中或形或色的漸次改變，使得畫面較具活潑性，予人生動輕快的感受。中國建築中的寶塔；樂曲中音量的漸強漸弱；文學小說中情節高潮的堆且；大會舞隊型的漸次縮小或擴大……等，都是漸層形式原理的例子。
漸層寫法
  • 漸層是要先寫好，再使用ID匯入。

範例程式 

   <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>
  • 使用時要用下列程式呼叫出這個linearGradient 
   <rect width='130' height='90' x='0' y='0' stroke='red' fill='url(#LG)' />
  • rect是矩形高度、寬度都不是重點，重要的是最後面的fill='url(#LG)'
  • LG是id的名稱

11/21上課所學

貝茲曲線

在數學的數值分析領域中，貝茲曲線（英語：Bézier curve，亦作「貝塞爾」）是計算機圖形學中相當重要的參數曲線。更高維度的廣泛化貝茲曲線就稱作貝茲曲面，其中貝茲三角是一種特殊的實例。 貝茲曲線於1962年，由法國工程師皮埃爾·貝茲（Pierre Bézier）所廣泛發表，他運用貝茲曲線來為汽車的主體進行設計。貝茲曲線最初由Paul de Casteljau於1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲曲線。

二次貝茲曲線

貝茲曲線的程式碼 

   <path id='a1' d='M0,50 C150,130 100,0 300,40' style='stroke:#000;fill:none;' />
  • 用貝茲曲線設定文字要先在<def></def>寫好，再使用id匯入。
  • 所以只需要設定一次，就可以使用設好的ID使用多次。
  • 我可以在每一個<textPath></textPath>中放上不一樣的文字，就會有一樣的角度，不同的樣貌

程式碼如下(此為文字) 

  <textPath startOffset='4%' xlink:href='#a1' style='font-family:KaiTi;fill:pink;font-size:40px'></textPath>

純貝茲曲線指令碼 

  <path d='M0,0 Q50,50 20,0 T40,0 60,0 80,0 100,0 120,0 140,0 160,0 180,0 200,0' style='stroke:black;fill:none;' transform='translate(0,50)'/>
三次貝茲曲線

三次的程式碼 

   <path d='M0,50 C50,100 80,0 200 50' style='stroke:blue;fill:none;' />
  • 三次與兩次相比更加細緻。
三次與數次貝茲曲線的差異
  • 以此類推，雖然曲線細緻度不同，但基層的原理一樣。
鋸子程式碼
   <?xml version='1.0' encoding='UTF-8' standalone='no'?>
   <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='300' width ='800'>
        <path d='M0,0 0,20 20,40 40,20 60,40 80,20 100,40 120,20 140,40 160,20 180,40 200,20 220,40 240,20 260,40 280,20 300,40 320,20 340,40 360,20 
        380,40  400,20 400,80 600,80 600,120 400,120 400,200 0,200 z' style='stroke:black;fill:none;'/>
   </svg>
svg動畫

向前移動並消失的程式碼 

   <?xml version='1.0' encoding='UTF-8' standalone='no'?>
   <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='400' width ='1000'>
   <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>    
   <circle cx="30" cy="30" r="25" style="stroke: none; fill:url(#LG);">
   <animate attributeName="cx" attributeType="XML"
       from="30"  to="1020"
       begin="0s" dur="3s"
       fill="remove" repeatCount="indefinite"/>
   <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" />
   </circle>	
   </svg>

11/28上課所學

inkscape

  • 免費的SVG建構軟體，有點像Adobe的AI繪圖軟體。
  • Inkscape是一套向量圖形編輯器，以自由軟體授權發布與使用。該軟體的開發目標是成為一套強力的繪圖軟體，且能完全遵循與支援XML、SVG及CSS等開放性的標準格式。Inkscape是一套跨平台性的應用程式，Windows、Mac OS X、Linux及類UNIX版等作業系統。
  • inkscape存檔後會轉成SVG，所以，我們可以用它來製作svg。
  • inkscape轉出後的程式碼幾乎都會變成貝茲曲線或是多邊形。
  • 但是inkscape最大的壞處就是不能畫動畫。
發展過程

Inkscape始於2003年，最初是Sodipodi的一個分支、分線發展（fork），Sodipodi自身則是在1999年以Raph Levien的Gill為基礎開始。

此一分線發展的主導來自一個四人團隊，這四人之前為Sodipodi的開發人員，他們分別是Ted Gould、Bryce Harrington、Nathan Hurst、以及MenTaLguY，他們對原有專案目標有不同的見解體認，並未公開地進行協力貢獻，且技巧性的否認他們的動機用意是為了分線發展。此外，他們聲明Inkscape的發展是嘗試與專注在完整實現SVG的標準上，相對的Sodipodi的發展強調是在於建立一套一般性用途的向量圖形編輯器，因此可能難以兼顧SVG方面的發展與支援性。

分線發展後，Inkscape也變更了幾項事物，例如開發所用的程式語言從C換成C++；而函式庫方面也換成GTK+工具套件的C++綁定（gtkmm）、重新設計使用者介面並加入多項的新功能特點;事實上的圖像使用的語言主要是python外掛程式也是一樣的。雖然Inkscape對SVG標準的支援實現是採階段性的精進強化路線，不過至今仍未完整。

再者，Inkscape聲明在專案的開發執行上將不採行「由上到下的治理」（top-down governance）架構，而是提倡平等式文化，權柄作法或個別開發者的獨特才幹與作為，對Inkscape的發展而言都會造成拖累影響。因此，此專案特別強調其原始程式碼是放在任何參與專案活動的開發者都可以存取的位置，並在更大的開放原碼社群中進行參與及分享（這經常會形成跨專案的推動以及專案的分立，例如：Open Clip Art Library）。

雖然專案發起人依舊在決策程式上有高度代表性，不過許多新近參與者也扮演著關鍵的角色任務，例如Bulia Byak就為Inkscape的使用者介面帶來根基性的新架構，新架構為今日的Inkscape帶來新的呈現畫面。

此後，由於英國Xara公司宣布計畫將其所屬的繪圖應用程式：Xara Xtreme以開放原碼方式接續發展，這讓Inkscape的開發團隊深感興趣，並期望兩套軟體在後續發展上能緊密合作，嘗試找尋一種方式讓兩個軟體專案能共享原始程式碼、共享開發協調的心力成效等，並且使開放原碼在圖形方面的卓越表現，也能用在專屬軟體世界的各層面與環節。

版本
  • 0.92版（2016年1月4日，最新版）新特性包括網格漸變、更好的SVG2與CSS3支援、新路徑效果、鉛筆工具的互動平滑、管理所有繪圖元素的對話方塊等[2]
  • 0.91版（2015年1月30日）改用一個新的內部彩現引擎Cairo，有更好的效能。新增了測量工具，可以量測物件之間的距離或交叉的角度。貼齊物件功能獲得了改善。此外也增加、改善了對多種圖片格式的支援，例如支援輸出FXG、SIF和HTML5格式，改善對PDF、EPS、PS+LaTeX的支援。
  • 0.48版（2010年8月23日）加入新的噴塗工具、多徑編輯、文字上標/下標等功能
  • 0.47版（2009年11月24日）加入了定時自動儲存，螺旋曲線，自動平滑節點，超過200個偏好設定過濾器等
  • 0.46版（2008年3月24日）加入新的SVG濾鏡、支援開啟PDF檔案、修正OpenType/PostScript和Type1字型支援等。
  • 0.45版（2007年1月15日）加入高斯模糊（Gaussian Blur）
  • 0.44版（2006年6月24日）加入階層對話方塊，支援剪裁與遮罩，強化PDF的透明性匯出，及效能強化等。
  • 0.43版（2005年11月19日）加入了連接器工具、協同編輯、手寫板壓力／角度感應能力、以及強化節點工具。
  • 0.42版（2005年7月26日）加入文字直書功能、風格走文功能、強化效果支援、以及新的漸層工具。
  • 0.41版（2005年2月10日）加入翻製疊磚工具及顏色追蹤，並修補許多軟體錯誤（臭蟲）。
  • 0.40版，加入了圖層、點陣圖追蹤，以及在路徑上使用文字。
  • 0.39版，首次用Pango函式庫發布，如此可支援更多的語系，如支援標示器、翻製、以及花紋填色。
  • 0.38版，發布此版主要在修補錯誤，不過也增加了文字的突端、間隔、多態漸層等功能特點，以及許多使用性的強化。
  • 0.37版，布林路徑操作以及路徑內插、外貼。
  • 0.36版，首次以改編過的新使用者介面來發布，介面上使用了功能選單，以及在檔案視窗中加入了脈絡感應工具列。
  • 0.35版（2003年10月14日）是Inkscape發布的首版，與0.32版的Sodipodi非常相似。
基本建立物件
繪圖
  • 鉛筆工具（徒手描繪，且可在路徑內進行填色）。
  • 筆式工具（運用直線與貝茲曲線與來建立路徑）。
  • 筆畫工具（運用電子手寫板（tablet）可用筆畫的壓力、角度來進行描繪與填色）。
樣式工具
  • 矩形（可選擇使用圓角化）。
  • 圓形、橢圓形或弧形（可選擇圈、弧、段）。
  • 星形／多邊形（可選擇尖角數、輪廓比例、圓角化、隨機等）。
  • 螺旋形
其他工具
  • 文字工具（橫書、多列或直書）
  • 連結性的點陣圖圖形，無論是匯入或是光柵化的選取物件（針對嵌入的連結圖形，Inkscape另有一個個別獨立的公用程式可以運用）
  • 翻製（以「活性」方式連結物件的複製）。相近的功效在其他程式上稱為「symbols」。

12/5上課所學

繼續練習inkscape

inkscape的快捷鍵

12/12上課所學

GIS (Geographic Information System,地理資訊系統)，是指在地圖上加上數據或訊息。

GIS維基百科的定義

地理資訊系統（英語：Geographic Information System，縮寫：GIS）是一門綜合性學科，結合地理學與地圖學，已經廣泛的應用在不同的領域，是用於輸入、儲存、查詢、分析和顯示地理資料的電腦系統，可以分為以下五部分：

  • 人員，是GIS中最重要的組成部分。開發人員必須定義GIS中被執行的各種任務，開發處理程式。熟練的操作人員通常可以克服GIS軟體功能的不足，但是相反的情況就不成立。最好的軟體也無法彌補操作人員對GIS的一無所知所帶來的負作用。
  • 資料，精確可用的資料可以影響到查詢和分析的結果。
  • 硬體，硬體的效能影響到處理速度，使用是否方便及可能的輸出方式。
  • 軟體，不僅包含GIS軟體，還包括各種資料庫，繪圖、統計、影像處理及其它程式。
  • 過程，GIS要求明確定義，一致的方法來生成正確的可驗證的結果。

GIS屬於資訊系統的一類，不同在於它能運作和處理地理參照資料。地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性，在GIS中的兩種地理資料成分：空間資料，與空間要素幾何特性有關；屬性資料，提供空間要素的資訊。

需要背的單字

  1. zoom:放大或縮小畫面
  2. overlay:覆蓋物，GIS中用複數overlays
  3. marker:標記，GIS中代表地點標示，用複數markers
  4. address:地址
  5. latitude:緯度
  6. longitude:經度
  7. coord:經緯度座標，GIS中代表地點標示，用複數coords
  8. map:地圖
  9. type:類別
  10. road:道路
  11. color:顏色
  12. fill:填滿
  13. radius:半徑
  14. html:超文件
  15. content:內容
  16. popup:跳出
  17. false:假的，不成立
  18. true:真的，成立
  19. polyline:多點成線
  20. polygon:多邊形
  21. circle:圓形
  22. rectangle：方形(矩形)
  23. ROADMAP：道路地圖
  24. SATELLITE：衛星空照圖
  25. HYBRID：道路與空照圖相疊加。
  26. TERRAIN：地形圖

12/19上課所學

12/26上課所學

  • ?後面代表要給伺服器的變數
  • zh-TW是中文的意思
  • hl=host language

今天的作業

  • 繪製自己的地圖
  • 作品

1/2上課所學

圖形計算機基本繪圖

1/9上課所學

涵式表示

   function test(){
   alert("這個網頁很安全，請安心使用")
   }
   test();

多項式

1/17上課所學

1/23上課所學

1/30上課所學

取自「http://well-being-ng.net/wiki1231/index.php?title=資訊基礎應用/張又懿&oldid=52140」