檢視資訊基礎應用的原始碼

[[分類:資訊基礎應用]]
==概述==
{{:資訊基礎應用/課程概述}}
===四、重要參考資料===
*[[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>&lt;table style='border:1px solid black;border-collapse:collapse;'&gt;
&lt;tr&gt;&lt;th style='border:1px solid black;border-collapse:collapse;'&gt;一&lt;/th&gt;&lt;td style='border:1px solid black;border-collapse:collapse;'&gt;三&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th style='border:1px solid black;border-collapse:collapse;'&gt;二&lt;/th&gt;&lt;td style='border:1px solid black;border-collapse:collapse;'&gt;四&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</pre>
*表格邊框美化的範例二
<pre>&lt;style&gt;
.nicetable {border:1px solid black;border-collapse:collapse;}
&lt;/style&gt;
&lt;table class='nicetable'&gt;
&lt;tr&gt;&lt;th class='nicetable'&gt;一&lt;/th&gt;&lt;td class='nicetable'&gt;三&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th class='nicetable'&gt;二&lt;/th&gt;&lt;td class='nicetable'&gt;四&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</pre>

===2017.9.19===
*交代樣式(外觀)的三種方式：
*#行內：
*#通篇：
*#跨多篇：<pre>&lt;link rel='stylesheet' type='text/css' href='./pa.css'  /&gt;</pre>
*樣式作用的三種對象：
*#標籤：
*#類別(class)：
*#指定專一的標籤(id)：
*多條件交代樣式的作用對象：
===2017.9.26===
*筆記中建立 wiki 與 HTML 對照表
*#等號
*#星號
*#井號
*#中括號(連結)
*#雙層中括號(圖照)
*#文字的''拉斜''與'''加粗'''
*#冒號及分號
*#水平線
*角括號的寫法：
*#&amp;lt;：&lt;
*#&amp;gt;：&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
*#在顯示區中以「&lt;div style='page:某值;'&gt;」
*#可用的定義：
*#:size:寬 長;
*#:margin:天 右 地 左
*#:mso-page-orientation:landscape 橫放
*#:mso-header-margin:頁首大小
*#:mso-footer-margin:頁尾大小
*跳頁的用法：「&lt;br style='page-break-before:always' /&gt;」
*表格寬度用「style='width:xxx'」表達寬度，xxx可以用百分比、公分、pt、無單位數字，無單位數字由「控制台/顯示器/設定/一般/字型大小」控制，如96dpi(100%)則96個寬度單位為1英吋；120dpi(125%)則120個寬度單位為1英吋。
*表格高度在 tr 中設，
*#&lt;tr style='height:數字'/&gt;時無單位數字、cm、pt三種單位均有效，百分比無效。
*#&lt;tr height=數字/&gt;只對無單位數字有效。 
*圖的寬度：
*#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/ball.svg http://jendo.org/~admin/ball.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/~洪凌煙/flower3.svg http://jendo.org/~洪凌煙/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>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'&gt;

&lt;/svg&gt;</pre>
*HTML寫法：
<pre>&lt;svg&gt;

&lt;/svg&gt;</pre>
*畫一個小圓圈：
<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='12' height='12'&gt;
  &lt;circle cx='6' cy='6' r='4' style='fill:#fff;stroke:blue;stroke-width:2;fill-opacity:0'/&gt;
&lt;/svg&gt;</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>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'&gt;
	&lt;text x='40' y='50' style='font-family:kaiti;fill:#666666'&gt;羅馬&lt;/text&gt;
&lt;/svg&gt;</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>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg height='100' width='112.5' xmlns='http://www.w3.org/2000/svg' version='1.1'&gt;
	&lt;line x1='0' y1='50' x2='113' y2='50' style='stroke:#0f0;stroke-dasharray:2 2;stroke-width:0.5pt;' /&gt;
	&lt;polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#000;fill:none;stroke-width:1pt;' transform='translate(25,50)'/&gt;
	&lt;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)'/&gt;
	&lt;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)'/&gt;
	&lt;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)'/&gt;
&lt;/svg&gt;</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>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='600' height='600'&gt;
&lt;g&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/&gt;
&lt;/g&gt;
&lt;/svg&gt;</pre>
*綁成群組(3petal1.svg)：
<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'&gt;
&lt;g transform='translate(300,48) rotate(30) scale(1.7)'&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/&gt;
&lt;/g&gt;
&lt;/svg&gt;</pre>
*墊一張圖(3petal2.svg)：
<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'&gt;
&lt;image xlink:href='http://jendo.org/~admin/Image15.png' x='0' y='0' width='600' height='600'/&gt;
&lt;g&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/&gt;
&lt;/g&gt;
&lt;/svg&gt;</pre>
====(三)定義一次，引用多次====
<img src='http://jendo.org/~admin/uses.svg' />
*範例三(uses.svg)原始碼：
<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='201' height='201'&gt;
&lt;defs&gt;
	&lt;polygon id='petal' points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/&gt;
&lt;/defs&gt;
&lt;g&gt;
&lt;use xlink:href='#petal'/&gt;
&lt;use xlink:href='#petal' transform='rotate(45 100 100)'/&gt;
&lt;use xlink:href='#petal' transform='rotate(90 100 100)'/&gt;
&lt;use xlink:href='#petal' transform='rotate(135 100 100)'/&gt;
&lt;use xlink:href='#petal' transform='rotate(180 100 100)'/&gt;
&lt;use xlink:href='#petal' transform='rotate(225 100 100)'/&gt;
&lt;use xlink:href='#petal' transform='rotate(270 100 100)'/&gt;
&lt;use xlink:href='#petal' transform='rotate(315 100 100)'/&gt;
&lt;/g&gt;
&lt;/svg&gt;</pre>
*步驟：
*#先添加 svg 標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有 href 屬性的定義
*#在 defs 段落中定義圖形，並賦予 id
*#用 &lt;use xlink:href='#某id'/&gt; 來引用既有的定義
*作圖練習三：<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===
*箭頭(arrow.svg)：
<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'&gt;
	&lt;polygon points='0,30 100,30 100,0 130,45 100,90 100,60 0,60' stroke='black' fill='none' /&gt;
&lt;/svg&gt;</pre>
*做h.svg、v.svg兩個檔案，在h.svg裡做長寬各100px，由左到右、黃到紅的漸層；在v.svg裡長寬各100px，由上到下、藍到綠的漸層。
*做一個arrowUp.svg檔，做出寬:90、高:130，由上到下，白到紫色漸層的⇧。
*以 SVG 放射漸層作出此圖：<img src='http://jendo.org/~admin/sun.png' width=100px /> ，圓半徑 75px 。
*請到jendo.org/~admin/waterfall0.svg複製原始碼到自己的www裡，新設檔名：waterfall1.svg，將太陽放到瀑布(waterfall1.svg)圖裡適當的位置
*以 SVG 漸層作出夕陽圖如右圖：<img src='http://jendo.org/~admin/waterfall2.png' width=150px align=right /> 山要蓋住一部分柔焦的太陽，天用矩形做，天的顏色是下紫紅上藍，夕陽天色剛好在山的輪廓線之上。檔名叫做 waterfall2.svg 。
*以 SVG 漸層作出夕陽圖如右圖：<img src='http://jendo.org/~admin/fall2water.svg' width=150px align=right /> 加入綠草地，是矩形，與天、山的左緣相接。檔名叫做 waterfall3.svg 。