我走。我看。我吃。我聽。我想。我寫。

<<這篇主要是寫給自己的，避免下次又忘記Orz>>

因為客戶的要求真的很簡單

加上範例中我把logo&slogan都拿掉

所以版面看起來單調到一個不行

各位高手有啥想法 還是可以跟我說唷

 

1.先做好版型，因為要做滑鼠變換效果，

所以"中文"、"English"兩個區塊水平或垂直距離不要重疊，才方便切版！

2.切版後，直接用Photoshop存成網頁(index.html)。

 

3.再做滑鼠變換效果，一樣存成網頁(indexa.html)。

這裡把兩個html檔存再同一層，這樣圖片就會再同一個images資料夾了

indexa的圖片只留"中文"、"English"其他刪掉，然後indexa.html也可以刪掉了。

4.用Dreamweaver打開index.html 看一下"中文"、"English"兩張圖的大小

5.到Photoshop做與"中文"、"English"一樣大小的全透明gif 備用

(就如同做菜時要先切好蔥備用一般)

 

6.回到Dreamweaver調整一下頁面 把title、替代文字、連結等等該弄的都搞定

 

7.在table裡"中文"、"English"兩張圖對應的td中加入"class"像這樣↓

<td class="ch-nav"><a href="#">

<img src="images/ch.gif" alt="中文" width="89" height="97" border="0"></a></td>

 

<td class="en-nav"><a href="#">

<img src="images/en.gif" alt="English" width="90" height="95" border="0"></a></td>

 

8.把table裡"中文"、"English"兩張圖刪掉，換成全透明的那兩張

 

9.在</head>前面加上↓這段CSS就好了ㄟ

<style type="text/css">

< ! - -(←PIXNET會檔這個ㄟ)

td.ch-nav a {
    display: block;
    background: url(images/index_04.jpg) no-repeat 100%;
}
td.ch-nav a:hover {
    background: url(images/indexa_04.jpg) no-repeat 100%;
}
td.en-nav a {
    display: block;
    background: url(images/index_07.jpg) no-repeat 100%;
}
td.en-nav a:hover {
    background: url(images/indexa_07.jpg) no-repeat 100%;
}

- - >(←PIXNET會檔這個ㄟ)

</style>

 

10.大功告成，

原本直接用Dreamweaver做滑鼠變換影像 IE會跑出來的那個ActiveX就消失了 喔耶