第三章 網頁編碼與網頁美化互動
Date:十二月 8, 2009 | Author:eggggg
當我們安裝好Apache+PHP+MySQL之後，就可以開始來編輯網頁。若您是使用Windows環境編輯網頁，本書建議您可安裝NetBeans IDE與NotePad++；若您是Linux環境，本書建議您可使用NetBeans IDE與vim。
3-1 開始撰寫網頁
於Windows環境內，請先開啟NotePad++，點選「檔案」功能表下「新增檔案」。 再請輸入以下的語法：（檔案名稱：「3」資料夾內「test.php」）
| 01 |
<html><head><title>第一個PHP網頁</title></head><body> |
| 02 |
<? |
| 03 |
echo “你好！”; |
| 04 |
?></body></html> |
編輯好的檔案要儲存在哪兒呢？本書以Appserv套件安裝Apache+PHP+MySQL方式安裝系統，所以預設的網頁資料夾是位於Appserv目錄內的www目錄，假設您的Appserv安裝於C槽，就請您將網頁儲存於「C:\Appserv\www」。若您是Linux系統，預設為/var/www/html內。這裡暫時不改變編碼，所以您的網頁編碼應該是Big5碼。
我們在網站目錄內建立「3」資料夾，並將檔案儲存，再請您於瀏覽器輸入http://localhost/3/test.php，您可看到網頁順利的顯示。
【圖1 第一個執行的PHP網頁】
開啟時需使用http://方式，所以網頁需放在網頁伺服器指定的位置，而不能放在我的文件夾或桌面。若使用開啟舊檔的方式，您會看到語法，而不是執行的結果，這是為什麼呢？因為PHP需經過Web Server解析後才會送到瀏覽器上顯示。很高興，您寫了第一個PHP網頁！這個網頁內，您看到什麼不同的地方呢？
+Read more
[ Javascript ] 變更圖片
Date:十一月 9, 2009 | Author:hikaru
常常在網頁頁面上看到的一種效果－當滑鼠滑過（onmouseover）時，會變換成另一張圖片，這裡我們會利用字串（string）處理中的一個方法（replace）來製作。
首先，在此範例中，我將第一張圖命名為logo.png，將要替換的圖命名為logo-hover.png；再者，我使用了jQuery這個framework以迅速找到頁面的物件，所以在HTML中得先載入這隻js（可以先到jQuery官網下載min版本）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js string</title>
<script src="script/jquery.js" type="text/javascript"></script>
</head>
…
接著寫入基本的html code。
HTML
<body>
<ul class="gallery">
<li><a href="http://www.google.com.tw/" title="google search engine"><img src="images/logo.png" alt="logo" /></a></li>
<li><a href="http://www.google.com.tw/" title="google search engine"><img src="images/logo.png" alt="logo" /></a></li>
…
<li><a href="http://www.google.com.tw/" title="google search engine"><img src="images/logo.png" alt="logo" /></a></li>
</ul>
</body>
</html>
及簡單的css style（請參考以下code，不給予並不影響js運作）。
CSS
<style type="text/css">
body {
padding-top:4em
}
.gallery {
width:60%;
min-width:800px;
margin:auto;
padding:1em 0 2em;
border:4px dashed #666;
text-align:center;
list-style:none
}
.gallery li {
display:inline-block;
margin-top:1em;
vertical-align:top
}
.gallery img {
border:0;
vertical-align:bottom
}
</style>
以上只是準備工作而已，接下來才是這次主要js的內容。
Javascript
<script type="text/javascript">
$(document).ready(function(){
$("ul.gallery img").mouseover(function(){
var imgLink = $(this).attr("src");
imgLink = imgLink.replace(".png","-hover.png");
$(this).attr("src",imgLink);
});
$("ul.gallery img").mouseout(function(){
var imgLink = $(this).attr("src");
imgLink = imgLink.replace("-hover.png",".png");
$(this).attr("src",imgLink);
});
});
</script>
首先，$(document).ready(function(){})相當於js中的window.onload事件，$(“ul.gallery img”)是jQuery的selector用法，和css的selector差不多，意指找出ul且class名稱為gallery底下所有的img；接下來，依據滑鼠滑入滑出，所以我們必須分成上下二個事件，
- mouseover（滑入）
- 我命名了一im,gLink的變名，$(this)即取得我們滑過的該圖片，$(this).attr(“src”)即取得該圖片的路徑，之後將圖片的路徑傳給了imgLink。
- imgLink.replace(“.png”,”-hover.png”)
這裡用到了字串（string）處理中的replace()，若imgLink中有’.png’的字串，以’-hover.png’取代，這也就是為什麼在一開始要將圖片以此規則命名，若有需要請自行更改此命名，取代完之後再將值回傳給imgLink。
- 接著，再將值指定到圖片路徑。
- mouseout（滑出）
- 和mouseover沒有什麼太大的差異，重點在於replace()的地方將檔名再互換回來就可以了，所以就不再多述了。
底下提供了完整的code下載。
DOWNLOAD！
