加强网站功能-行为与扩充程式.PPT

擴充程式的基本資料 以下是「加入最愛」擴充程式的基本資料： 加入行為 請開啟 tokyolayout.htm 繼續設定，這裡要為上方 「加入最愛」圖示加上行為。 11-5-3 幻燈片展示 接下來要介紹的是一個幻燈片播放程式，不僅設定上簡單，在影像與影像切換時可提供 25 種的轉景特效，而且還具有互動的效果，控制展示的影像，是不是很心動呢？ 擴充程式的基本資料 以下是幻燈片展示擴充程式的基本資料： 加入行為 請開啟 tokyolayout.htm繼續設定，這裡要為右方「精選照片」影像的顯示加上幻燈片展示。 首先設定影像播放的預告內容： 接著設定往前播放的圖片連結區： 接著設定往後播放的圖片連結區： 最後設定停止播放的圖片連結區： 請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看。右方「精選照片」圖片的顯示開始進行幻燈片展示，也可以使用上方的連結區控制往前播放、往後播放或停止播放照片。 11-5-4 加強型檢驗表單 這個擴充程式是大家極力推薦的，除了實用之外，功能強大是眾所公認的。在第十章中曾介紹過 檢驗表單 行為，但是除了沒有中文的錯誤訊息之外，可以檢查的部份也很有限。 而 Spry 表單檢驗工具集 雖然功能強大，但是設定複雜，工程浩大！這裡所要介紹的擴充程式就是剛好處於中間，不可錯過！ 擴充程式的基本資料 以下是加強型檢驗表單擴充程式的基本資料： 加入行為 請開啟第十章的完成檔 contact.htm (不加任何表單驗證的版本) 來練習設定： 首先設定必填的文字欄位： 接著設定要檢查格式的欄位： 接著設定要 清單/選單 及 文字區域 欄位的檢查： 11-5-5 加入 YouTube 線上影片 隨著 Web2.0 的流行，分享免費資源的網站正流行。在線上影片的領域中，YouTube () 更是執業界牛耳。如何在自己的頁面上放置 YouTube 的線上影片在過去有些難度，這裡將介紹如何使用擴充程式，快速的在頁面上加入 YouTube 的影片，為自己的網站增添多媒體的資源。 擴充程式的基本資料 以下是加入 YouTube 線上影片擴充程式的基本資料： 插入元件 請開啟 tokyolayout.htm，這裡要為右方「線上影片」區域加入 YouTube 的線上影片，這個擴充程式較為不同的地方，是它不放置在 標籤檢視窗 \ 行為 面板裡，而是在 插入 面板中。 進階篇 進階篇 進階篇 進階篇 行為的特性 關於行為面板 常用的行為介紹 - 設定文字 常用的行為介紹 - 調換影像 常用的行為介紹 - 開啟瀏覽器視窗使用 Spry 效果 認識 Dreamweaver 的擴充程式 推薦使用的擴充程式 - 設為首頁 推薦使用的擴充程式 - 加入最愛 推薦使用的擴充程式 - 幻燈片展示 推薦使用的擴充程式 - 加強型檢驗表單 11-1-1 行為的特性 Dreamweaver 之所以如此受歡迎，行為的出現佔有相當重要的地位。市面上大部份的網頁設計軟體對於文字、影像、表格...等基礎元件在處理上不會有太大問題，可是遇到要寫程式的時候，網頁設計師就得大傷腦筋了。而 Dreamweaver 已將許多常用程式整合到 行為 面板中，讓設計網頁時能很方便的加入這些程式效果。而且它本身的設計是開放性的，除了 Adobe 官方網站外，全世界更有許多的愛好者為 Dreamweaver 開發許多好用的擴充程式，讓它的功能更加強大！行為的使用具有下列三種特性： 行為的出現是讓 Dreamweaver 流行的一大原因。它加入網頁中常用的特效 或是功能程式碼，簡化成對話方塊的設定，大大加速網頁的開發。 11-1 關於行為的使用 跨平臺、相容性高 行為在設計上使用 JavaScript 語法，不論是 Internet Explorer 或 Netscape 都有很高的相容性，讓設計師在加入特效時比較不用煩惱瀏覽器的支援問題。 使用簡單、修改容易 行為在使用上已經模組化，可以輕易地由 行為 面板來增加與編修，如果沒有特別的需求情況下是完全不需動手修改原始碼，非常容易上手。 無限擴充的可能 在 Adobe 的 Exchange 網站中有許多的擴充程式，您可以視需求進行下載的動作，只要透過 Adobe Extension Manager 就可以輕鬆安裝、移除，完全不費功夫就能讓 Dreamweaver 增加一甲子的功力。 11-1-2 關於行為面板 請進入「映象東京」範例網站開啟 tokyolayout.htm 檔案，這個頁面是之後用來製作網站樣版的頁面，本章將利用這個頁面來練習及製作，完成後也可以更新整個網站，加強網站的功能。 行為面板介紹 請開啟 標籤檢視窗 面板再選按 行為 鈕