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

出自六年制學程
跳轉到： 導覽、 搜尋
 
（未顯示同用戶所作出之81次版本）
第 2 行： 第 2 行：
  
  
−
https://www.google.com.tw/search?dcr=0&biw=1280&bih=590&tbm=isch&sa=1&q=%E4%B8%AD%E5%8D%8E%E6%B0%91%E5%9B%BD+%E5%9B%BD%E6%97%97&oq=%E4%B8%AD%E5%8D%8E%E6%B0%91%E5%9B%BD+&gs_l=psy-ab.1.0.0i30k1j0i24k1l3.1247.1247.0.3992.1.1.0.0.0.0.51.51.1.1.0....0...1.1.64.psy-ab..0.1.51....0.Uk6oR4SYu3s#imgrc=iGKGpyLaRVhoRM:
+
====圖片====
−
 
+
<!--[[File:Piranha face.jpg|203px]]-->
−
 
+
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Piranha_face.jpg/203px-Piranha_face.jpg' />
−
 
+
  
 
===已記住的英文單字===  
 
===已記住的英文單字===  
第 65 行： 第 64 行：
 
Cascading Style Sheets(簡寫CSS）的用途是什麼
 
Cascading Style Sheets(簡寫CSS）的用途是什麼
  
−
===9/26上課所學===
+
===9月26日===
−
===10/3上課所學===
+
 
−
===10/10上課所學===
+
*
−
===10/17上課所學===
+
 
−
===10/24上課所學===
+
#png不失真 公開格式
−
===10/31上課所學===
+
#jpg jepg 失真 壓縮
−
===11/7上課所學===
+
#gif可動畫 只有256色
−
===11/14上課所學===
+
 
−
===11/21上課所學===
+
 
−
===11/29上課所學===
+
 
−
===12/6上課所學===
+
*井號、星號、等號、中括號；
−
===12/13上課所學===
+
*用空白行分段。
−
===12/20上課所學===
+
例如：
−
===12/27上課所學===
+
<table class=nicetable>
−
===1/3上課所學===
+
<tr><th>語法</th><th>顯示</th><th>說明</th></tr>
−
===1/10上課所學===
+
<tr>
−
===1/17上課所學===
+
<th><pre>
−
===1/23上課所學===
+
#AAA
 +
#BBB
 +
#CCC
 +
</pre></th>
 +
<th>
 +
#AAA
 +
#BBB
 +
#CCC
 +
</th>
 +
<th>井號</th>
 +
</tr>
 +
<tr>
 +
<th><pre>
 +
*AAA
 +
*BBB
 +
*CCC
 +
</pre></th>
 +
<th>
 +
*AAA
 +
*BBB
 +
*CCC
 +
</th>
 +
<th>星號</th>
 +
</tr>
 +
<tr>
 +
<td><pre>
 +
*AA
 +
*#AA1
 +
*#AA2
 +
*BB
 +
*#BB1
 +
*#BB2
 +
</pre></td>
 +
<td>
 +
*AA
 +
*#AA1
 +
*#AA2
 +
*BB
 +
*#BB1
 +
*#BB2
 +
</td>
 +
<th>先星後井</th>
 +
</tr>
 +
<tr>
 +
<td><pre>
 +
#AA
 +
#*AA1
 +
#*AA2
 +
#BB
 +
#*BB1
 +
#*BB2
 +
</pre></td>
 +
<td>
 +
#AA
 +
#*AA1
 +
#*AA2
 +
#BB
 +
#*BB1
 +
#*BB2
 +
</td>
 +
<th>先井後星</th>
 +
</tr><tr>
 +
<td><pre>
 +
==中標==
 +
===小標===
 +
====小小標====
 +
=====加粗標=====
 +
======超小標======
 +
</pre></td>
 +
<td>
 +
<p style='font-size:150%;border-bottom:1px solid #aaa;'>中標</p>
 +
<p style='font-size:132%;font-weight:bold;'>小標</p>
 +
<p style='font-size:116%;font-weight:bold;'>小小標</p>
 +
<p style='font-size:100%;font-weight:bold;'>加粗標</p>
 +
<p style='font-size:80%;font-weight:bold;'>超小標</p>
 +
</td>
 +
</table>
 +
 
 +
===10月3日===
 +
履歷表
 +
自我介紹
 +
http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/TesT.html
 +
 
 +
===10月17日===
 +
寫HTML>用WORD讀>存DOCX或PDF>去7-11列印 markup 提供指示 XML想要 標籤的人自己發明標籤 二十個就夠了 不夠記 微軟的規格 不會重複
 +
<>是標籤
 +
HTML4之前不行
 +
HTML5才可以
 +
帶META指令
 +
BODY外面做定義
 +
BODY中做顯示部份
 +
黑盒子
 +
margin(邊沿)：
 +
margin:上 右 下 左;　margin:上下 左右;　margin:上 左右 下;　margin:四個邊同樣値;
 +
padding(內距)：
 +
padding:auto;：讓瀏覽器自己去設定
 +
padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。兩者不建議使用。
 +
padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;
 +
border(邊框)：
 +
顏色
 +
紅紅綠綠藍藍
 +
紅綠藍
 +
 
 +
===10月24日===
 +
*svg放大不毛邊
 +
*用程式碼構成一張圖
 +
*步驟
 +
*#宣告格式(版本 字格式 是否獨立存在)
 +
*#SVG開始(格式、長寬)
 +
*#SVG結束
 +
*今日學會使用
 +
**polyline
 +
**polygon
 +
**circle(作業小熊)
 +
 
 +
 
 +
 
 +
 
 +
<circle cx='200' cy='400' r='140' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
<circle cx='200' cy='400' r='110' style='fill: #EEFFBB;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
 
 +
 +
  <circle cx='120' cy='120' r='60' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
  <circle cx='280' cy='120' r='60' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
  <circle cx='120' cy='120' r='40' style='fill:#DDAA00 ;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
  <circle cx='280' cy='120' r='40' style='fill:#DDAA00 ;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
  <circle cx='200' cy='200' r='120' style='fill: #FFFF00;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='250' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
  #0000FF
 +
  <circle cx='150' cy='181' r='5' style='fill:#0000FF;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
  <circle cx='250' cy='181' r='5' style='fill:#0000FF;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
 
 +
  <circle cx='200' cy='240' r='50' style='fill:#FFFFBB;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
  <circle cx='200' cy='213' r='10' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
  <circle cx='200' cy='256' r='25' style='fill:#FF0000;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
 
 +
<ellipse cx='120'cy='395' rx='60' ry='40' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
<ellipse cx='280'cy='395' rx='60' ry='40' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
<circle cx='175' cy='395' r='25'  style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
<circle cx='225' cy='395' r='25'  style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 +
 
 +
</svg>
 +
**小熊由16個圓和2個橢圓組成
 +
什麼是SVG
 +
可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準，這是通用的定義
 +
<img src='http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/ring.sug.html' />
 +
 
 +
===10月31日===
 +
停課
 +
 
 +
===11月7日===
 +
 
 +
*今日練習：
 +
<img src='http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E5%B0%8F%E8%8A%B1.svg' />
 +
====SVG編寫製做====
 +
*1：開啟fielzilla，連線至站台
 +
*2：home>www>SVG，在這個資料夾中，建立新檔案。
 +
*3：命名為：flower(記得要加入副檔名.svg)
 +
*4：寫入程式碼。
 +
 
 +
===11月14日===
 +
====線形漸層====
 +
*可固定Y或X來達到向下或向左的漸層
 +
*用polygon points畫出箭頭，用漸層的ID來引入
 +
*offset屬性用來定義漸層的開始和結束位置，其 100% 是指整個漸層範圍。
 +
*stop-color 屬性用來定義顏色，也可以做為 style 的樣式。
 +
*stop-opacity 屬性決定透明度，也可以做為 style 的樣式。
 +
*今日成品：
 +
<img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/water3.svg">
 +
=====漸層=====
 +
*漸層由一種以上的顏色所組成，由一種顏色慢慢轉成另一種顏色，設定好顏色之後，再以ID的形式給漸層。
 +
*漸層(又稱為「漸變」)是指將構成元素的形狀或色彩做次第改變的層層變化。例如，同一種形狀的漸大或漸小、同一種色彩的漸濃或漸淡，均屬於漸層的形式變化，而在這些漸增或漸減的層次變化中，即能具現出漸層的美感。
 +
*漸變的基本原理與反覆相類似，但由於其中或形或色的漸次改變，使得畫面較具活潑性，予人生動輕快的感受。中國建築中的寶塔；樂曲中音量的漸強漸弱；文學小說中情節高潮的堆且；大會舞隊型的漸次縮小或擴大……等，都是漸層形式原理的例子。
 +
 
 +
===11月21日===
 +
 
 +
'''線性貝茲曲線'''
 +
給定點'''P'''<sub>0</sub>、'''P'''<sub>1</sub>，線性貝茲曲線只是一條兩點之間的直線。這條線由下式給出：
 +
 
 +
:<math>\mathbf{B}(t)=\mathbf{P}_0 + (\mathbf{P}_1-\mathbf{P}_0)t=(1-t)\mathbf{P}_0 + t\mathbf{P}_1 \mbox{ , } t \in [0,1]</math>
 +
且其等同於線性插值。
 +
#一次：<img src='https://upload.wikimedia.org/wikipedia/commons/0/00/B%C3%A9zier_1_big.gif' width='240px' height='*' />
 +
 
 +
'''二次方貝茲曲線'''
 +
二次方貝茲曲線的路徑由給定點'''P'''<sub>0</sub>、'''P'''<sub>1</sub>、'''P'''<sub>2</sub>的函數'''B'''（''t''）追蹤：
 +
: <math>\mathbf{B}(t) = (1 - t)^{2}\mathbf{P}_0 + 2t(1 - t)\mathbf{P}_1 + t^{2}\mathbf{P}_2 \mbox{ , } t \in [0,1]</math>。
 +
 
 +
TrueType字型就運用了以貝茲樣條組成的二次貝茲曲線。
 +
 
 +
#二次：<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='*' />
 +
 
 +
'''三次方貝茲曲線'''
 +
'''P'''<sub>0</sub>、'''P'''<sub>1</sub>、'''P'''<sub>2</sub>、'''P'''<sub>3</sub>四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始於'''P'''<sub>0</sub>走向'''P'''<sub>1</sub>，並從'''P'''<sub>2</sub>的方向來到'''P'''<sub>3</sub>。一般不會經過'''P'''<sub>1</sub>或'''P'''<sub>2</sub>；這兩個點只是在那裡提供方向資訊。'''P'''<sub>0</sub>和'''P'''<sub>1</sub>之間的間距，決定了曲線在轉而趨進'''P'''<sub>2</sub>之前，走向'''P'''<sub>1</sub>方向的「長度有多長」。
 +
 
 +
#三次：<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='*' />
 +
 
 +
===11月28日===
 +
*作業一：
 +
 
 +
*作業二：畫出一個矩形、一個弧、一個星形或多邊形。
 +
*作業三：<img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E6%81%90%E9%BE%8D.svg">
 +
*工具箱：
 +
 
 +
===12月5日===
 +
*鍵盤
 +
<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>選物 + &lt;和&gt;</td><td>中心點縮(50%)放(200%)</td></tr>
 +
<tr><td>選物 + ALT + &lt;和&gt;</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>
 +
 
 +
===12月13日===
 +
===12月20日===
 +
===12月27日===
 +
===1月2日===
 +
圖形計算機(一)
 +
*基本圖紙：
 +
*#圖寬：$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。
 +
*#函式取樣點：$draw->xs，預設'-1;0;1';
 +
*基本圖：$draw->圖形[]=array(array(…),其他屬性);
 +
*#多邊形：$draw->polygons[]=array('points'=>array(array(×,×),array(×,×),array(×,×)),'width'=>'線寬');
 +
*#線段：$draw->lineSegments[]=array(array(×,×),array(×,×),'color'=>'顏色','dash'=>'5 5');
 +
*#字：$draw->alnums[]=array(array(×,×),'word'=>'字');
 +
*#圓：$draw->circles[]=array(array(×,×),'radius'=>半徑,'fill'=>'顏色','fill-opacity'=>'1');，預設半徑3。
 +
*#楕圓：$draw->ellipses[]=array(array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色');
 +
*#弧：$draw->arcs[]=array(array(×,×),array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色','arrowEnd'=>1);
 +
 
 +
===1月9日===
 +
圖形計算機(二)
 +
 
 +
*多項式：
 +
*#基本：<br/>$draw->functions[]=array('functionName'=>'polynomialEquation','argument'=>array(×,×,×,…),'color'=>'red');
 +
*#$draw->xs='×;×;×;…';：各點 x 值。
 +
*#標y值：在functions[]中加'xToy'=>$draw->xs,
 +
*#標點：在functions[]中加'x2y'=>$draw->xs,
 +
*#斜率：在functions[]中加'tangentPoint'=>$draw->xs,
 +
*#面積：在functions[]中加'area'=>$draw->xs,
 +
*[http://6years.jendo.org/~丁志仁/svg/polynomialEquationIn.php 互動式圖形計算機]
 +
*[https://www.google.com.tw/search?q=1/((1-(x/300000)^2)^(1/2))，(1-(x/300000)^2)^(1/2) google圖形計算機]
 +
 
 +
====涵式表示====
 +
    function test(){
 +
    alert("這個網頁有毒")
 +
    }
 +
    test();
 +
 
 +
====涵式====
 +
    <!DOCTYPE HTML>
 +
    <html>
 +
    <head>
 +
    <meta charset="utf=8"></meta>
 +
    <title>Javascript</title>
 +
    <script type="text/javascript">
 +
    function test(message){
 +
    alert(message)
 +
    }
 +
    test("你受到不明病毒感染");
 +
    test("WINDOWS系統將關閉");
 +
test("DSJFDSFAJPFJSAOITAEWORUEWPOOCKSADOFJKDSLKFJDKSPLFAJLFJSALDFFIDSFAOI;LKFASSSFLSAFKLSFDLAKSJFDSLKFJSDLKDSAFLDSJSLJFD;J;KJDSJ;FDSJ;;KJDSF;J;JFDS;J;JFDS;JFDFD;J;JF;LJF;LJFD;JFJ;FD;LD;JFJODIJREIUT09UFDIFDJLKKJDSFJKLFKJKJJFDSJFLKJDSLKJ;F;JDJFDJKFDJ;K");
 +
    </script>
 +
    </head>
 +
    <body>
 +
    </body>
 +
    </html>
 +
 
 +
====多項式====
 +
 
 +
===1月16日===
 +
'''寫筆記'''
  
−
===1/30上課所學===
+
===1月23日===
 +
'''寫筆記'''

2018年1月20日 (六) 15:57的最新修訂版本


圖片

已記住的英文單字

table table 表

row tr 列

diamond td 格

hyper html 超

text html 文字，文件

markup html 標記

languagehtml 語言

head head 頭

title title 標題

body body 身體

rowspan

colspan

9月12日

練習.今天學到如何建立"筆記頁"

用字母調出光的三原色red green blue

紅 # foo

綠 # ofo

藍 # oof

白 # fff

黑 # ooo

使用table、td、tr來製做基本表格。製做同學基本資料

9月19日

屬性值

設定HTML表格的字體、顏色、大小、粗細、高度 、寬度等。

顏色table,td {border: solid 1px;}。

{border:顏色深淺#16ef dashed 表格粗細16px;}。

高度 rowspan。

寬度colspan。

Cascading Style Sheets(簡寫CSS）的用途是什麼

9月26日

  1. png不失真 公開格式
  2. jpg jepg 失真 壓縮
  3. gif可動畫 只有256色


  • 井號、星號、等號、中括號；
  • 用空白行分段。

例如：

語法顯示說明
#AAA
#BBB
#CCC
  1. AAA
  2. BBB
  3. CCC
井號 
*AAA
*BBB
*CCC
  • AAA
  • BBB
  • CCC
星號 
*AA
*#AA1
*#AA2
*BB
*#BB1
*#BB2
  • AA
    1. AA1
    2. AA2
  • BB
    1. BB1
    2. BB2
先星後井 
#AA
#*AA1
#*AA2
#BB
#*BB1
#*BB2
  1. AA
    • AA1
    • AA2
  2. BB
    • BB1
    • BB2
先井後星 
==中標==
===小標===
====小小標====
=====加粗標=====
======超小標======

中標

小標

小小標

加粗標

超小標

10月3日

履歷表 自我介紹 http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/TesT.html

10月17日

寫HTML>用WORD讀>存DOCX或PDF>去7-11列印 markup 提供指示 XML想要 標籤的人自己發明標籤 二十個就夠了 不夠記 微軟的規格 不會重複 <>是標籤 HTML4之前不行 HTML5才可以 帶META指令 BODY外面做定義 BODY中做顯示部份 黑盒子 margin(邊沿)： margin:上 右 下 左;　margin:上下 左右;　margin:上 左右 下;　margin:四個邊同樣値; padding(內距)： padding:auto;：讓瀏覽器自己去設定 padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。兩者不建議使用。 padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値; border(邊框)： 顏色 紅紅綠綠藍藍 紅綠藍

10月24日

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



<circle cx='200' cy='400' r='140' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/> <circle cx='200' cy='400' r='110' style='fill: #EEFFBB;stroke:black;stroke-width:2;fill-opacity:1'/> 


 <circle cx='120' cy='120' r='60' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='280' cy='120' r='60' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='120' cy='120' r='40' style='fill:#DDAA00 ;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='280' cy='120' r='40' style='fill:#DDAA00 ;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='200' cy='200' r='120' style='fill: #FFFF00;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='250' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
  	#0000FF 
 <circle cx='150' cy='181' r='5' style='fill:#0000FF;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='250' cy='181' r='5' style='fill:#0000FF;stroke:black;stroke-width:2;fill-opacity:1'/>
  	
 <circle cx='200' cy='240' r='50' style='fill:#FFFFBB;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='200' cy='213' r='10' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='200' cy='256' r='25' style='fill:#FF0000;stroke:black;stroke-width:2;fill-opacity:1'/>

<ellipse cx='120'cy='395' rx='60' ry='40' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/> <ellipse cx='280'cy='395' rx='60' ry='40' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/> <circle cx='175' cy='395' r='25' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/> <circle cx='225' cy='395' r='25' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>

</svg>

    • 小熊由16個圓和2個橢圓組成

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

10月31日

停課

11月7日

  • 今日練習：

SVG編寫製做

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

11月14日

線形漸層

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

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

11月21日

線性貝茲曲線 給定點P0、P1，線性貝茲曲線只是一條兩點之間的直線。這條線由下式給出：

<math>\mathbf{B}(t)=\mathbf{P}_0 + (\mathbf{P}_1-\mathbf{P}_0)t=(1-t)\mathbf{P}_0 + t\mathbf{P}_1 \mbox{ , } t \in [0,1]</math>

且其等同於線性插值。

  1. 一次：

二次方貝茲曲線 二次方貝茲曲線的路徑由給定點P0、P1、P2的函數B（t）追蹤：

<math>\mathbf{B}(t) = (1 - t)^{2}\mathbf{P}_0 + 2t(1 - t)\mathbf{P}_1 + t^{2}\mathbf{P}_2 \mbox{ , } t \in [0,1]</math>。

TrueType字型就運用了以貝茲樣條組成的二次貝茲曲線。

  1. 二次：　

三次方貝茲曲線 P0、P1、P2、P3四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始於P0走向P1，並從P2的方向來到P3。一般不會經過P1或P2；這兩個點只是在那裡提供方向資訊。P0和P1之間的間距，決定了曲線在轉而趨進P2之前，走向P1方向的「長度有多長」。

  1. 三次：　

四次方貝茲曲線

  1. 四次：　

五次方貝茲曲線

  1. 五次：

11月28日

  • 作業一：
  • 作業二：畫出一個矩形、一個弧、一個星形或多邊形。
  • 作業三：
  • 工具箱：

12月5日

  • 鍵盤
指法作用
Del刪除物件
Home物件升到最上層
End物件降到最下層
PAGE-UP物件升到上一層
PAGE-DOWN物件降到下一層
ALT + 滑鼠點擊在不同層的物件中跳動
CTRL + B顯/隱捲動條
CTRL + 方向鍵來垂直/水平捲動畫布
CTRL中鍵滾輪拉近、拉遠
SHIFT中鍵滾輪水平捲動畫布
CTRL右鍵拉近
SHIFT右鍵拉遠
CTRL + N建新檔
CTRL + O開舊檔
ALT + TAB檔案間切換
CTRL + Z回復上一步
CTRL + SHIFT + Z重做你上一個動作
F1~F9工具箱中九個工具
F10打開選單
F11收放全螢幕
F12收放對話框
CTRL + Shift + F叫用Fill and Stroke對話框
Ctrl + Shift + A叫用「對齊」對話框
選物 + 方向鍵移動2個像素(用SHIFT快10倍)
選物 + ALT + 方向鍵移動1個像素
選物 + <和>中心點縮(50%)放(200%)
選物 + ALT + <和>微縮放
選物 + [和]旋轉15度(加CTRL一次轉90度)
選物 + ALT + [和]微旋轉
Shift + 滑鼠點擊選擇/排除選擇(配合範圍選擇)好幾個物件
ESC取消全部選擇
Ctrl + A選擇本圖層所有物件
CTRL + G建立群組
CTRL + U解散群組
CTRL + Shift + G解散群組
CTRL + 滑鼠點擊選用群組中的物件加以編輯
CTRL + Shift + 滑鼠點擊選用群組中的多個物件加以編輯
CTRL＋F1漸層工具
F7吸管
Ctrl + D複製

12月13日

12月20日

12月27日

1月2日

圖形計算機(一)

  • 基本圖紙：
    1. 圖寬：$draw->W，預設601。
    2. 圖高：$draw->H，預設401。
    3. 原點距左上角：$draw->x0,$draw->y0，預設(200,200)。
    4. x每單位幾點：$draw->xu，預設15。
    5. y每單位幾點：$draw->yu，預設15。
    6. x每幾單位畫一個刻度：$draw->xGraduate，預設1。
    7. y每幾單位畫一個刻度：$draw->yGraduate，預設1。
    8. x每幾刻度標示一數字：$draw->xScale，預設1。
    9. y每幾刻度標示一數字：$draw->yScale，預設1。
    10. 秀出直角座標系：$draw->coordinate，預設1。
    11. 函式描點密度：$draw->pointDensity，預設20。
    12. 函式取樣點：$draw->xs，預設'-1;0;1';
  • 基本圖：$draw->圖形[]=array(array(…),其他屬性);
    1. 多邊形：$draw->polygons[]=array('points'=>array(array(×,×),array(×,×),array(×,×)),'width'=>'線寬');
    2. 線段：$draw->lineSegments[]=array(array(×,×),array(×,×),'color'=>'顏色','dash'=>'5 5');
    3. 字：$draw->alnums[]=array(array(×,×),'word'=>'字');
    4. 圓：$draw->circles[]=array(array(×,×),'radius'=>半徑,'fill'=>'顏色','fill-opacity'=>'1');，預設半徑3。
    5. 楕圓：$draw->ellipses[]=array(array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色');
    6. 弧：$draw->arcs[]=array(array(×,×),array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色','arrowEnd'=>1);

1月9日

圖形計算機(二)

  • 多項式：
    1. 基本：
      $draw->functions[]=array('functionName'=>'polynomialEquation','argument'=>array(×,×,×,…),'color'=>'red');
    2. $draw->xs='×;×;×;…';：各點 x 值。
    3. 標y值：在functions[]中加'xToy'=>$draw->xs,
    4. 標點：在functions[]中加'x2y'=>$draw->xs,
    5. 斜率：在functions[]中加'tangentPoint'=>$draw->xs,
    6. 面積：在functions[]中加'area'=>$draw->xs,
  • 互動式圖形計算機
  • google圖形計算機

涵式表示

   function test(){
   alert("這個網頁有毒")
   }
   test();

涵式

   <!DOCTYPE HTML>
   <html>
   <head>
   <meta charset="utf=8"></meta>
   <title>Javascript</title>
   <script type="text/javascript">
   function test(message){
   alert(message)
   }
   test("你受到不明病毒感染");
   test("WINDOWS系統將關閉");
test("DSJFDSFAJPFJSAOITAEWORUEWPOOCKSADOFJKDSLKFJDKSPLFAJLFJSALDFFIDSFAOI;LKFASSSFLSAFKLSFDLAKSJFDSLKFJSDLKDSAFLDSJSLJFD;J;KJDSJ;FDSJ;;KJDSF;J;JFDS;J;JFDS;JFDFD;J;JF;LJF;LJFD;JFJ;FD;LD;JFJODIJREIUT09UFDIFDJLKKJDSFJKLFKJKJJFDSJFLKJDSLKJ;F;JDJFDJKFDJ;K");
   </script>
   </head>
   <body> 
   </body>
   </html>

多項式

1月16日

寫筆記

1月23日

寫筆記

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