| 1. web元件 |
插入->web元件->動態效果->
1.跑馬燈
- 可改：字體顏色、字型、移動幅度
- 跑馬燈內容可改：速度、表現方式、背景顏色
2. 互動式按鈕
- [按鈕]：選擇按鈕樣式、輸入文字、超連結
- [字型]：原始、停留時、按下時字型色彩
- 存檔時會做出三個圖檔，記得存於images資料夾中!
- 框架式網頁的選單網頁(menu.htm)適合用之!
-
（開在同一網頁）
-
 （開新網頁）
|
| 2. 交換圖像 |
- 插入圖片
- 格式->表現方式
- 插入->交換圖像->瀏覽滑鼠移過去時欲交換的圖片
- 勾選「滑鼠移出時還原事件」
- 加入超連結
- 框架式網頁的選單網頁(menu.htm)適合用之!
|
| 4. 動態網頁特效 |
|
1. 變更游標圖示
- 複製以下控制碼
- 將控制碼貼在<body>之後，並修改紅字部份
- 將欲顯示的游標圖示(如：111.jpg)放在images資料夾中，則修改為images/111.jpg
|
<div id="cursor" style="position:absolute; left:100px;
top:160px; width:100px; height:25px; z-index:0;
visibility: visible">
<img src="路徑/檔名" >
</div><script language="JavaScript">
<!--
function YY_Mousetrace(evnt) { //v1.2 copyright (c)1998
Yaro von Flocken
if (yyns4)
{if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }
else{
yy_ml=(event.clientX + document.body.scrollLeft);
yy_mt=(event.clientY + document.body.scrollTop);
}
if (yy_tracescript)eval(yy_tracescript)
}
function m()
{
document.all.cursor.style.left=yy_ml+10
document.all.cursor.style.top=yy_mt+10
}
//-->
</script>
<script language="JavaScript">
<!--
var yyns4=window.Event?true:false; var yy_mt = 0; var
yy_ml = 0;
if (yyns4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = YY_Mousetrace;
yy_tracescript = 'm()';
//-->
</script>
|
|
2.
顯示文字時鐘
- 複製以下控制碼
- 將控制碼貼在<body>中欲放置的地方
|
<script
language="JavaScript1.2">
<!--
if (document.layers)
document.write('<ilayer id="clockmain" height=20><layer
id="clock" width="100%"></layer></ilayer>');
else
document.write("<span id='clock'></span>");
var now,hours,minutes,seconds,timeValue;
function showtime(){
if (!document.layers&&!document.all) return;
now = new Date();
hours = now.getHours();
minutes = now.getMinutes();
seconds = now.getSeconds();
timeValue = (hours >= 12) ? "下午 " : "上午 ";
timeValue += ((hours > 12) ? hours - 12 : hours) + " 點";
timeValue += ((minutes < 10) ? " 0" : " ") + minutes + "
分";
timeValue += ((seconds < 10) ? " 0" : " ") + seconds + "
秒";
if (document.layers){
document.clockmain.document.clock.document.write("<center><font
class=greenword>"+timeValue+"</font></center>");
document.clockmain.document.clock.document.close();
}
else if (document.all)
clock.innerHTML = timeValue;
setTimeout("showtime()",100);
}
window.onload=showtime;
//-->
</script>
|
|
| 3. 製作捲動影像特效 |
利用JavaScript程式插入到網頁程式碼內，參考課本P.10-8
- 請見範例
- 游標定在欲加特效處->「分割」編輯模式->複製這個程式碼，貼於程式碼的插入點。
- 修改圖片與連結參數：
1. L15~L19行 href:超連結位置、src:圖片來源，注意大小寫要一樣!
如：<a href="images/3D1.JPG"><img
src="images/3D1.JPG" border=1></a>
2. L4行 捲動區寬度
如：var sliderwidth=800
3. L8行 捲動速度
如：var slidespeed=1
|
