| 製作流動式選單 |
 |
我們將這個範例分成 3 個步驟來進行, 在開始動手前, 先來了解這個單元的製作流程。
| 1 | 利用 marquee 語法設定圖片的移動效果 |
| 2 | 使圖片受滑鼠控制, 指標移至圖片上時選單停止, 移開時開始滑動 |
| 3 | 讓圖片無接縫、不斷重複出現 |
範例效果
請在瀏覽器開啟範例檔案 ch54-01.html, 首先會看到下方圖片緩緩移動進入畫面, 如果將指標移至圖片範圍, 圖片就會靜止不動, 等待使用者的動作；若是將指標移開圖片的範圍, 圖片將會繼續向前滑動。如果你停留的夠久, 還會發現圖片不斷地重複出現, 不會有中斷的畫面哦！這就是本單元要完成的範例成果。
1. 設定圖片的移動效果
STEP 1. 請在 Dreamweaver 開啟練習檔案 ex54-01.html, 然後將插入點移至如圖的儲存格中。
STEP 2. 接著在表格中放入要滑動的圖片。由於我們要製作橫向流動的圖片選單, 所以選擇長條形圖片, 且圖片寬度 (700) 超過表格寬度 (500)。
STEP 3. 放好圖片後, 立即切換至程式碼模式, 即可清楚看到圖片所在的位置。
STEP 4. 將插入點移至圖片程式碼的前面, 然後按兩下ENTER鍵, 使其增加 1個空白段落, 再移到空白段落的行最前面, 我們要在此處設定 marquee 語法以控制圖片的滑動效果。
STEP 5. 在空白段落按下一個 "<" 符號, 會自動出現選單讓我們選取其中的語法, 不過我們要使用的語法尚未出現, 所以繼續輸入一個 "m", 在選單中看到 "marquee" 後利用鍵盤上的方向鍵選取 marquee, 並按下ENTER鍵。
STEP 6. 接著按一下空白鍵, 下方會自動顯示此語法可用的屬性。我們要設定圖片移動的方式, 所以選擇 behavior 屬性：
STEP 7. 指標會停在雙引號內, 並顯示此屬性可設定的選項。alternate 表示圖片會在左右兩邊滑動, 例如從左到右再從右到左；scroll 表示圖片不停會往同一個方向移動, 此例請選 scroll；slide 表示圖片會從一邊滑動到另一邊, 但到達後會停止不動。
STEP 8. 再來要設定圖片的移動方向。完成步驟 7 之後請按一下空白鍵, 然後選擇 direction 屬性, 這個屬性可設定圖片要住下 (down)、左 (left)、右 (right) 或 上 (up) 任何一個方向移動, 此例設定為向左移動 (left)。
STEP 9. 利用相同方式設定滑動範圍的寬、高。由於網頁表格的寬是 500, 所以我們將滑動範圍的 width 設定為 500；圖片的原始高度是 100, 因此將滑動範圍的 height 設定為 100。
STEP 10. 選擇 scrollamount 屬性, 可設定滑動的速度, 數字愈大滑動的速度愈快, 此例設定為 2；再選擇 scrolldelay 屬性, 設定移動的延遲時間, 若不希望產生停滯效果, 可設定為 0。設定完兩個屬性, 請輸入一個 ">"。
STEP 11. 此步驟最後要設定一個與 <marquee> 對應的 </marquee>。請將指標移至<img src…> 與 </td> 之間, 再輸入 "</", Dreamweaver 就會自動完成 </marquee> 標籤。
如果你完成此步驟立即預覽網頁, 會發現圖片已經可以不停滑動了, 但是卻完全不受滑鼠控制, 所以第 2 步驟我們要讓指標移到選單範圍時, 選單就停下來等待使用者的動作, 直到指標離開滑動選單的範圍, 再繼續滑動。
2. 設定滑鼠控制效果
STEP 1.同樣切換到程式碼模式, 將指標移至 scrolldelay="0" 之後, 先按一下空白鍵再輸入 "on", 即可從選單中利用方向鍵選取 onmouseover。
STEP 2.在引號中輸入 this.stop()。步驟 1、2 的設定, 表示當指標移至選單上時, 停止滑動。
STEP 3.再如上操作輸入一個 onmouseout, 引號中改輸入 this.start(), 表示當指標移開選單時, 選單再繼續滑動。
我們已經可以成功控制選單的移動或停止了, 你可以預覽看看。不過, 仔細觀察選單, 在選單重複時前後會產生一大段空白, 我們要複製一段語法來解決這個問題。
3. 使選單不中斷地重複出現
STEP 1. 請開啟本單元資料夾下的 replay.txt, 然後選取文字檔的內容, 並按下 ctrl + c 進行複製。
STEP 2. 將 ex54-01.html 切換至程式碼模式, 再將指標移到 <img src…> 與 </marquee> 之間。
STEP 3. 按下 enter 鍵使其產生新的段落, 並貼上步驟 1 複製的內容。若覺得版面太凌亂, 可稍加整理, 完成後如圖的畫面。
此處要改為進行移動的片名稱這段語法是先定義一段變數x，初始值為1，x會迴圈執行，每執行一次就累加，直到100次，也就是說圖片會重複出現100伺候停止，這個數字對瀏覽者來說已經足夠。
STEP 1. 整個範例已經全部完成了, 如果你想要賦與選單連結的功能, 你可以回到設計模式進行超連結的設定。由於整個選單是一張圖片, 所以請利用影像地圖的方式來設定超連結。
STEP 2. 儲存檔案後預覽看看, 選單就發揮功能囉！
除此之外, 我們還可以將這個效果用來製作 360°的環景圖片, 讓畫面不停的播放, 藉由圖片自動複製的功能, 產生沒有破綻的環景效果, 找一張環景相片來試試看吧！
在網路上不難發現這樣效果的網頁, 學完本單元你會發現, 即使只用Dreamweaver 我們也能做出相同功能的效果。
留言列表