討論:資訊基礎應用/張鈞祺:修訂版本之間的差異
出自六年制學程
(→5.3 三、文字) |
(→5.8 八、柔焦濾鏡) |
||
第 282 行: | 第 282 行: | ||
====5.8 八、柔焦濾鏡==== | ====5.8 八、柔焦濾鏡==== | ||
+ | *範例六(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> | ||
+ | |||
====5.9 九、path==== | ====5.9 九、path==== | ||
====5.10 十、動畫==== | ====5.10 十、動畫==== |
2018年1月20日 (六) 16:15的修訂版本
1 環境以工具
1.1 一、環境
1.2 二、工具與設定
firefox
firefox優點
1. 不容易中毒 2. 有精選網站功能
firefox缺點
1. 沒有自己的搜尋引擎 2. 歷史紀錄資料不好找
filezilla EmEditor
2 HTML與HTTP
HTTP
HTTP的發展是由提姆·柏內茲-李於1989年在歐洲核子研究組織(CERN)所發起
HTML
HTML的首個公開描述出現於一個名為「HTML標籤」的檔案中,由提姆·柏內茲-李於1991年底提及
3 wiki
語法 | 顯示 | 說明 |
---|---|---|
#AAA #BBB #CCC |
|
井號 |
*AAA *BBB *CCC |
|
星號 |
*AA *#AA1 *#AA2 *BB *#BB1 *#BB2 |
|
先星後井 |
#AA #*AA1 #*AA2 #BB #*BB1 #*BB2 |
|
先井後星 |
==中標== ===小標=== ====小小標==== =====加粗標===== ======超小標====== |
中標 小標 小小標 加粗標 超小標 |
段落標題,等號多標題小 |
=大標= |
大標 |
請不要用,這是留 給議程題目用的。 |
[http://jendo.org 振鐸網站] 格式:[URL 連結說明] |
外部連結:一層中 括號包著 URL,空 白後放連結說明。 |
|
[[首頁|這是首頁]] 格式:[[頁面名稱|連結說明]] 中括號內也可只寫頁面名稱 |
內部連結:兩層中括 號包著「頁名」,豎 槓(|)後放連結說明。 |
|
[[檔案:Go top.gif]] 格式:[[檔案:檔名|圖長|圖寬|…]] |
插入圖照也是內部連結 |
4 CSS
5 SVG
5.1 一、概述
1:開啟fielzilla,連線至自己的站台管理員
2:home>www>SVG,在這個資料夾中,建立新檔案。
3:命名,然後記得要加入副檔名.svg
4:寫入程式碼。
5.2 二、基本架構
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version=' ' width=' ' height=' '> <</svg>
5.3 三、文字
- 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:微軟日文明朝體
svg文字範例
內碼
<?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:#00ff00'>張</text> <<text x='55' y='50' style='font-family:kaiti;fill:#ff0000'>鈞</text> <<text x='70' y='50' style='font-family:kaiti;fill:#0000ff'>祺</text> <</svg>
5.4 四、位移、旋轉、縮放、歪斜
5.5 五、群組
5.6 六、定義一次,引用多次
5.7 七、漸層
5.7.1 (一)線性漸層
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='500' height='500'> <defs> <linearGradient id='LG' x1='50%' y1='0%' x2='0%' y2='50%'> <stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' /> <stop offset='100%' style='stop-color:#00FFFF;stop-opacity:1' /> </linearGradient> </defs> <rect width='500' height='500' x='0' y='0' stroke='red' fill='url(#LG)' /> <</svg>
5.7.2 (二)放射漸層
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='750' height='750'> <defs> <radialGradient id='r2' cx='50%' cy='50%' r='50%'> <stop offset='0%' stop-color='#99FFFF'></stop> <stop offset='30%' stop-color='#66FFFF'></stop> <stop offset='70%' stop-color=' #5599FF '></stop> <stop offset='100%' stop-color='#0000FF'></stop> </radialGradient> </defs> <circle cx='200' cy='200' r='200' fill='url(#r2)'/> <</svg>
5.8 八、柔焦濾鏡
- 範例六(sun.svg)原始碼:
<?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>
5.9 九、path
5.10 十、動畫
6 Inkscape
Inkscape是一套向量圖形編輯器,以自由軟體授權發布與使用。該軟體的開發目標是成為一套強力的繪圖軟體,且能完全遵循與支援XML、SVG及CSS等開放性的標準格式。Inkscape是一套跨平台性的應用程式,Windows、Mac OS X、Linux及類UNIX版等作業系統。
7 GIS
GIS基本指令
<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({ zoom:17, markers:[ ], }); }); </script> <<div align=center id='map' style='height:550px; width:900px;'>239新北市鶯歌區永明街58號</div>
8 圖形計算機
PHP是一種開源的通用電腦手稿語言,尤其適用於網路開發並可嵌入HTML中使用。PHP的語法借鑑吸收C語言、Java和Perl等流行電腦語言的特點,易於一般程式設計師學習。PHP的主要目標是允許網路開發人員快速編寫動態頁面,但PHP也被用於其他很多領域。 PHP最初是由勒多夫在1995年開始開發的;現在PHP的標準由the PHP Group維護。PHP以PHP License作為許可協議,不過因為這個協議限制了PHP名稱的使用,所以和開放原始碼許可協議GPL不相容