文、意如
聖誕節要到了，應景一下來實作一個點亮聖誕燈的網頁。
首先，準備幾張不一樣顏色的聖誕樹圖
其實你只要準備一張圖，其他顏色的圖都可以使用編修軟體製作出來的。
例如，我們準備這張圖：
如果您沒有photoshop之類的軟體，可以使用線上的編修軟體。
開啟圖片後，點選
1. 影像
2. 調整
3. 色相／飽和度
4. 隨便拉一下色相，即可改變顏色
改好顏色後，另存新檔，這裡請最少準備5張不一樣顏色的圖片。
接下來在您的桌面或D槽按下右鍵建立一個資料夾當作我們工作的資料夾，取名為mytree。
進入您的資料夾後，再建立一個資料夾（取名為：images），
這個資料夾專門放我們會使用到的所有圖片，所以把剛剛準備好的幾張圖片都放進裡面。
接下來就可以開始寫程式了，回到mytree資料夾。
1. 右鍵新增文字文件
2. 取名為treepage.html。
1. 點選treepage.html按下右鍵
2. 開啟檔案
3. 選擇預設程式
4. 記事本
5. 確定
用記事本開啟就可以開始寫程式了～
因為我們要做的是網頁程式，所以需把每一張網頁一定要有的語法先寫好。
例：
網頁開始：<html>
網頁標頭：<head><title>網頁標題寫在這裡</title></head>
網頁內容：<body>網頁的內容都寫在這裡</body>
網頁結束：</html>
如下：
接著按下檔案右鍵，用瀏覽器開啟，即可看到網站效果。
接下來回到記事本，在網頁內容中先寫一個置中標籤<center> </center>，等等把所有要置中的元件放進去。
這次準備的聖誕樹共有五個顏色：灰、紫、綠、黃、紅
這次點亮聖誕燈的秘訣就是點選按鈕（置換圖片），看起來效果就像開關燈一樣，所以我們需要做的是預設一張圖片再加上五顆按鈕。
先做預設圖片（img5.jpg），語法如下：
插入圖片：<img src=”圖片路徑” width=”寬度”>，記得插入在置中標籤裡。
圖片目前路徑：
<image src=”images/img5.jpg” width=”500px”>
看看網頁是否正常出現預設圖片了？
接下來要做五顆按鈕，分別為：關燈、紫燈、綠燈、黃燈、紅燈。
按鈕語法為<button>按鈕名稱</button>
分段落語法為<p></p>（這邊單純想讓按鈕放在圖片下而已）
使用瀏覽器測試看看，目前只有介面而已還沒有任何功能。
重點來了，接下來就要開始寫點選按鈕之後要做什麼事情了。
事件寫在onclick=”” 中。這次我們先做開紅色燈的這件事，其實就是把原本的預設圖片改成紅色這一張（img4.jpg）
因為要去改變預設圖，所以需要把剛剛的img5.jpg 上的<img>標籤取一個名字（id），這裡我取名叫mytreeimg，方便我們等等找到它。
再來我們就需要使用document.getElementById(‘mytreeimg’)來找到預設的<img>這個標籤了，找到它之後把它的路徑位址（src）改成紅燈這一張圖（img4.jpg）
完整語法如下：
<button onclick=”document.getElementById(‘mytreeimg’).src=’images/img4.jpg'”>紅燈</button>
來看看效果吧～點選紅燈，切換紅燈照，感覺就像開燈一樣。
不可思議的非常簡單吧!再來只要重複以上動作，把另外四顆按鈕都加上功能就完成了。
完整語法如下：
<html> <head>
<title>網頁標題寫在這裡</title>
</head>
<body>
<center>
<image src=”images/img5.jpg” width=”500px” id=”mytreeimg”>
<p>
<button onclick=”document.getElementById(‘mytreeimg’).src=’images/img5.jpg'”>關燈</button>
<button onclick=”document.getElementById(‘mytreeimg’).src=’images/img1.jpg'”>紫燈</button>
<button onclick=”document.getElementById(‘mytreeimg’).src=’images/img2.jpg'”>綠燈</button>
<button onclick=”document.getElementById(‘mytreeimg’).src=’images/img3.jpg'”>黃燈</button>
<button onclick=”document.getElementById(‘mytreeimg’).src=’images/img4.jpg'”>紅燈</button>
</p>
</center>
</body>
</html>
趁著聖誕節，趕快把這個效果放到您的網頁上吧！
Yiru@Studio - 關於我 - 意如