DreamweaverFlash

Size: px

Start display at page:

Download "DreamweaverFlash"

奈切凌
5 years ago
Views:

1 香港浸會大學持續教育學院 School of Continuing Education Web Design and Computer Animation 學員姓名 :

2 單元一網頁設計與網站推廣網頁設計基本概念網站網頁與首頁網頁 (webpage): 在瀏覽器上出現的每一版都是一個網頁網站 (website): 這是有特定主題的網頁的集合網站不一定要有域名 (Domain Name)( 大多數個人網站都沒有 ), 但網站中各網頁的內容或形式應有一定程度的關聯首頁 (homepage): Homepage 又稱主頁, 這是指一個網站的第一頁, 一般都是目錄頁通常首頁的 HTML 檔名稱都是 index.html 或 index.htm 何謂網域 (Domain)? 網域是依照網站擁有者的特性, 將全球資訊網的網站分門別類主要頂層網域包括 ;.com- 商業企業.org- 非營利組織.net- 網路.edu- 教育單位.gov- 政府機構.mil- 軍事單位.int- 依據國際條約所設立的國際組織什麼是 URL? URL 或稱為制式資源定址器 (Uniform Resource Locator), 就是指 Internet 檔案的地址通常是由四個部份所組成 : 通訊協定伺服器 ( 或網域 ) 路徑及檔案名稱有些時候沒有路徑或檔案名稱以下是一個實例 : magazine/tips/ default.htm 通訊協定伺服器或網域是指路徑檔名 1 頁

3 網頁與瀏覽器之間的關係網頁其實是由 HTML 標籤寫成的文件, 而瀏覽器便負起翻譯這些標籤, 然後轉為一個個的畫面, 所以兩者有著不同分的關係但由於瀏覽器的種類頗多, 其所支援的 HTML 標籤有些許的不同, 亦由於瀏覽器的版本不同, 對於 HTML 標籤的支援亦未必一樣, 所以有時在不同的版本或類型的瀏覽器, 便會有不同的效果出現所以在設計網頁時, 便要特別留意, 利用不同的瀏覽器去測試自己的網頁是一個保險的方法除此之外, 有某些特別效果需到某個類型或版本才能觀看時, 最好在首頁中註明瀏覽者要使用何種瀏覽器及版本如 : 請用 800x600 及 IE5.0 版本或以上模式瀏覽本網站以獲取最佳效果 2 頁

4 網站設計的規劃網站的組成網際網路 www World Wide Web 服務主要是以一個個的網頁來呈現, 也就是說, 設計者製作了幾個網頁, 並且經過組織規劃, 讓網頁彼此相連, 然後讓連上 Internet 的人都能看到, 這樣的完整架構就稱為網站今次課程我們以一個福利機構網站為例 Site Map Welcome Menu About Us Photo 本課程範例網站 : Test Feedback Links Activity Games 一個網站中通常會有一個首頁用來做為其目錄或索引 (index.htm), 就像是一份報紙的頭版, 會把最熱門最重要的消息寫在上面, 然再註明詳見第 x 版, 讓讀者能快速找到自己感興趣的新聞 ; 而在 www 中, 首頁的詳見第 x 版通常就是一個連結, 瀏覽者只要在連結上按一下, 就可以連到另外一個網頁, 觀看更詳細的內容 3 頁

5 網站的規劃網頁的誕生流程圖繪畫流程圖是製作網頁最先的步驟, 這樣做使條理清晰, 進行起來更有效率! 下圖是規劃一份網站的製作流程表 : 確定網站的主題及目標瀏覽群匯集網站所需的相關資料 ( 包含文字及圖片等等 ) 前置作業網站企劃, 規劃出整個網詀的架構配置, 及內容分類版面設計, 繪製草圖後搭配其他影像軟體製作網頁圖片網頁的撰寫, 及 java 等其他程式的配合應用離線測試, 測試每一網頁的畫面與連結無誤中期製作尋找合適的 ISP 並申請網址上傳網頁至伺服器中, 做最後的測試, 便可正式開張至其他網站連結登錄, 提高網站的曝光率隨時更新網頁資訊並開闢新單元後期維護 4 頁

6 HTML 的格式萬維網 www 網頁是用 HTML 電腦語言編寫的 HTML(HyperText Markup Language) 是一種包含標籤的組合語言, 讀者可通過瀏覽器 (Browser) 讀取文件中的標籤及文字, 演譯出預設的效果, 如加插圖片文字放大縮小等 HTML 文件是像一般文字格式檔 (Text File) 一樣, 可用任何文書編輯器 ( 例如 DOS 的 Editor 或 Windows 的 Notepad 記事本等 ) 來編輯產生並存檔命名為.htm 或.html 只不過是文件中有一些字元由一些富有意義籤 (tags) 所標示, 以定義文件之結構性與其文件間之邏輯關連簡言之,HTML 是以各式各樣的標籤在文件中來描述多媒體的資訊 ( 以超連結的方式去個別儲存於外部的檔案中 ) 而已 HTML 標籤 HTML 的標籤是用小於的符號 (<) 和大於符號 (>), 而中間夾著標籤名稱所組成標籤通常都是成對的例如 :<HTML> 和 </HTML>,<TITLE> 和 </TITLE> 前標籤和尾標籤不同處在於尾標籤有斜線 (/) 的符號標籤中的指令是不分大小楷的, 如粗體字標籤 <B> 或 <b> 是一樣的 HTML 的格式文件的起始主題的起始主題的結束內文的起始內文的結束文件的結束備忘等範例以下是一個標準 HTML 文件的例子 : <HTML> <HEAD> <TITLE>My Homepage</TITLE> </HEAD> <BODY> Hello, this is my first homepage in the net!! </BODY> </HTML> <! Create by Spiderboy in the net 5 頁

7 * 現在就看看一個最最最簡單的例子 test.htm: <HTML> <! 第一個示範網頁 > <HEAD> <TITLE> 西遊記 </TITLE> </HEAD> <BODY> <CENTER> <H3> 歡迎光臨西遊記 </H3> <BR> <HR> <FONT SIZE=2> 齊天大聖到此一遊 </FONT> </CENTER> </BODY> </HTML> 語法內容說明 <! xxxxxxx> <title> 和 </title> 這是註解是網頁的標題, 但可以不要就是網頁的內容, 在 <body> 這標籤內, 我們是可 <body></body> <body> 內的各項屬性 <body bgcolor=" 顏色 " text=" 顏色 " link=" 顏色 " vlink=" 顏色 " alink=" 顏色 "> 以加上一些屬性指示來設定網頁的背景顏色文字格式或 Link 的顏色 bgcolor: 這是背景顏色 text: 這是文字顏色 link: 這是超連結的顏色 vlink: 這是當閱覽者看過這個連結的網頁時的顏色 alink: 這是當閱覽者按下連結時的顏色如果想以圖像做背景, 就要用這個指令了 : background=" 圖片檔案 " 而顏色就是 : 例如紅色 =#ff0000 白色 =#ffffff 這是由紅綠藍三種原色所混合而成以紅色為例 : 頭的 ff 是紅色的濃度, 之後的 00 是綠色的濃度, 之後的 00 是藍色的濃度 6 頁

8 <p> </p> <br> <nobr></nobr> <p align=center/right/left> <pre> 和 </pre> 這表示段落的開始, 而且會自動加一空行和前個段落分隔這表示段落的結束但也可以不用, 因瀏覽器看到 <p> 時就會知到新段落開始這表示一行的結束, 隨後的文字會跳去下一行這表示文字不會因應視窗自動跳下一行, 用戶需自行以捲動軸瀏灠改變文字是靠中間, 或靠右, 或靠左的指令也可以用 <center> 和 </center> 來使文字中置這是預設文字格式, 這會使瀏覽器按原來的格式顯示一篇文字, 使用固定的大小字型, 也保留原始資料中的空格空行和換行模式, 使中文網頁的版面更易控制這是加進空格 < < > > & & " " 7 頁

9 申請網址與免費網站空間申請.com 網址申請.com.hk 網址免費網站空間網站空間大小由於是免費的網站, 所以容量大小不一, 通常空間會有 2 至 10MB 是否提供程式服務網站上常見的訪客計數器留言板等, 都是由 CGI 或 ASP 程式製作而成的, 由於選寫的程式若有問題會影響伺服主機的運作, 故一般管理員不會隨意讓使用者自行放上自製的程式在伺服器上故在申請時, 要留意伺服器是否支援 FrontPage 伺服器擴充程式自動加入廣告框由於是免費的關係, 故大部分網站均會自動加入一些小設定, 如 : 小廣告廣告橫框等會員制另外有些免費網站空間是實行會員制, 故要留意你本身上網的戶口有否提供優惠免費網頁空間網站名稱網址空間大小廣告模式上傳方式 Sina 50Mb Brinkster 30MB 無 Browser trodod 30Mb Select Browser/FTP FortuneCity 100MB Banner FTP 備註 : 以上資料經常變動網頁上傳技術 FTP Web Base 網站推廣搜尋器廣告搜尋器排名 8 頁

討論區廣告電郵 SEO SEO 是 Search Engine Optimization ( 搜尋引擎最佳化 ) 的縮寫, 透過網頁編輯的技術, 並調整修改網頁中格式與內容, 協助網站能更符合搜尋引擎的抓取規則, 讓搜尋引擎能更正確地索引網站內容使之對搜尋引擎更友好, 更符合排名規則, 從而迅速提高排名, 擴大網站影響力由於不少研究發現,

10 討論區廣告電郵 SEO SEO 是 Search Engine Optimization ( 搜尋引擎最佳化 ) 的縮寫, 透過網頁編輯的技術, 並調整修改網頁中格式與內容, 協助網站能更符合搜尋引擎的抓取規則, 讓搜尋引擎能更正確地索引網站內容使之對搜尋引擎更友好, 更符合排名規則, 從而迅速提高排名, 擴大網站影響力由於不少研究發現, 搜尋引擎的用戶往往只會留意搜索結果最開首的幾項條目, 所以不少商業網站都希望透過各種形式來影響搜尋引擎的排序當中尤以各種依靠廣告維生的網站為甚藉由以下 SEO 的技巧, 可協助搜尋引擎抓取網站資訊到相關的搜尋結果中 : 1. 設定有意義且與網頁內容相關的檔案名稱 2. 在網頁編輯 Title 標籤中, 編入與網站內容密切且高相關性的標題名稱 3. 適當使用網頁 Meta Description 標籤, 簡潔清楚的描述網站內容 4. 網頁內容的主題盡可能單一化 5. 網頁中的連結能提供滿足網友需求的相關資訊 6. 過度的 SEO, 會被搜尋引擎視為 SPAM 網站 9 頁

單元二網頁編寫認識 Dreamweaver 工作環境全新的 Dreamweaver CS4 工作視窗, 已經以 1280 1024 像素的螢幕解析度為參考,

橫跨應用程式視窗頂端的區域包含工作區切換器功能表列及應用程式的其他控制項文件工具列 : 放置切換網頁編輯區的按鈕設定網頁標題的輸入方塊與管理網頁的工具標準工具列 :

11 單元二網頁編寫認識 Dreamweaver 工作環境全新的 Dreamweaver CS4 工作視窗, 已經以像素的螢幕解析度為參考, 所以建議您將螢幕解析度設定為 1280 像素以上進入網頁編輯製作環境後, 其相關的視窗面板指令都會依據您的操作開始作用, 預設值為設計師工作區應用程式列 : 橫跨應用程式視窗頂端的區域包含工作區切換器功能表列及應用程式的其他控制項文件工具列 : 放置切換網頁編輯區的按鈕設定網頁標題的輸入方塊與管理網頁的工具標準工具列 : 標準工具列包含檔案與編輯功能表中常用的指令工具鈕, 使用這些工具鈕就像使用對應指令一樣文件窗格 : 用來顯示目前的文件, 共有設計檢視程式碼檢視分割檢視即時檢視四種模式, 視需要可以選取任何一種模式使用 10 頁

12 狀態列 : 位於文件窗格的最下方, 顯示編輯中文件的相關資訊, 其中幾項重要元件面板群組的操作顯示與隱藏面板視需要可以顯示或隱藏工作區中的面板 11 頁

13 網站管理設定網站資料夾修改網站設定要修改相關設定, 可以點選網站 > 管理網站指令, 開啟管理網站對話方塊, 選擇要編輯的網站按編輯鈕, 再次進入網站定義對話方塊中做修改若要移除網站, 可選取後按移除鈕 ; 當您不需要網站中的所有檔案時, 可進入檔案總管中刪除資料夾 12 頁

文字與圖片編排插入網頁影像圖片格式檔案插入影像的方式可以執行插入 > 影像指令, 或按插入面板常用類別中的影像鈕在這裡要提醒您, 最好先將要用到的影像圖片複製到網站的相關資料夾中 ( 例如 : images 資料夾 ), 以免日後進行發佈作業時, 影像檔案沒有被一起傳送到網站伺服器

14 文字與圖片編排插入網頁影像圖片格式檔案插入影像的方式可以執行插入 > 影像指令, 或按插入面板常用類別中的影像鈕在這裡要提醒您, 最好先將要用到的影像圖片複製到網站的相關資料夾中 ( 例如 : images 資料夾 ), 以免日後進行發佈作業時, 影像檔案沒有被一起傳送到網站伺服器預留影像圖片位置龐大複雜的網站於製作網頁時, 都會先行規劃並予以分工, 因此在製作網頁的過程中, 如果某些影像未能即時完成設計工作, 則可以先在網頁中預留一塊區域給該影像圖片, 等到影像完工後再將其置換, 如此一來, 就不會因為缺少這些影像圖片而影響網頁的頁面編排工作使用 Photoshop(*.psd) 圖檔已使用 Photoshop 設計許多影像檔案 (*.psd 格式 ), 可以在設計檢視下將其直接插入到目前編輯的網頁中, 但過程中需要經由 Dreamweaver 執行影像最佳化的工作, 轉換成網站可用的影像格式 (GIF JPEG 和 PNG) 可以將多重圖層或多重分割的 Photoshop 影像全部或部分貼到 Dreamweaver 的網頁中在 Dreamweaver 中編輯影像圖片若想要編輯所插入的影像圖片, 可以在選取圖片的情形下, 按屬性面板中編輯項目中的各項按鈕 : 裁切亮度和對比銳利, 執行影像的編輯工作 ; 或是點選編輯鈕, 開啟預設的編輯軟體進行變更, 也可以在影像上按一下滑鼠右鍵, 從指令清單中選擇一種預先指定的編輯軟體編修影像圖片 13 頁

15 網頁上所使用的圖片格式 GIF 圖檔格式 JPG 圖檔格式 PNG 圖檔格式 GIF 圖檔格式 GIF 動畫格式最多只能儲存 256 色可設定透明背景 GIF 動畫格式 JPG 圖檔格式強大的壓縮率支援漸進式的顯示方式 PNG 圖檔格式 PNG 格式的特色, 融合了 GIF 與 JPG 格式的優點, 例如可交錯顯示可設定透明背景支援全彩採取不失真的壓縮方式... 等, 只差無法做成動畫而已! 14 頁

16 連結運用加入內部超連結若超連結是要連結到網站中其他網頁, 或是同一網頁中的其他內容時, 稱為內部超連結而連結到其他網站的超連結則稱為外部超連結加入超連結文字加入超連結圖片選取圖片, 並在屬性面板的連結欄輸入網址即可 15 頁

加入錨點 (Anchor) 當網頁的內容很多, 必須不斷捲動網頁才能看完所有內容時, 例如

即可做到要連結到這裡, 在超連結是輸入 [# 錨點名稱 ] 即可連結到其他網頁中的錨點

17 加入錨點 (Anchor) 當網頁的內容很多, 必須不斷捲動網頁才能看完所有內容時, 例如 FAQ 之類文件, 建議你可在網頁的開頭加入網頁內容索引超連結, 也就是按下有興趣的內容標題超連結, 即可直接跳到網頁中該內容所在之處這種可直接顯示某一部分網頁內容的超連結, 只要在網頁內容加入錨點 (Anchor) 即可做到要連結到這裡, 在超連結是輸入 [# 錨點名稱 ] 即可連結到其他網頁中的錨點若要指定可直接連結到某一網頁錨點的超連結, 就直接在連結網頁的 URL 資訊之後加入外部超連結直接輸入目標網頁的 URL 即可 16 頁

在同一個新視窗中顯示超連結當你將屬性面板目標列示窗設定為 _blank, 便會開啟一個新視窗來顯示網頁, 所以瀏覽者在瀏覽網頁的過程中, 有可能會開啟很多個瀏覽器視窗在桌面上, 這對電腦的執行效能而言, 將是很大的負擔要解決如上問題, 可在同一個新視窗開啟超連結網頁在同一個新視窗中顯示超連結再將其他超連結圖片及文字也在屬性面板的目標列示窗中輸入 "_new" 即可

18 在同一個新視窗中顯示超連結當你將屬性面板目標列示窗設定為 _blank, 便會開啟一個新視窗來顯示網頁, 所以瀏覽者在瀏覽網頁的過程中, 有可能會開啟很多個瀏覽器視窗在桌面上, 這對電腦的執行效能而言, 將是很大的負擔要解決如上問題, 可在同一個新視窗開啟超連結網頁在同一個新視窗中顯示超連結再將其他超連結圖片及文字也在屬性面板的目標列示窗中輸入 "_new" 即可新視窗的名稱前面不一定要加上底線, 但為了避免跟 JavaScript 保留字相衝突, 所以一般都會加上底線加入連結在網頁中最常應用的電子郵件信箱超連結, 就是用於訪客意見回覆網站中可能會有好幾個電子郵件信箱超連結, 若每個超連結都共用一個電子郵件信箱, 就要在電子郵件信箱超連結中指定主旨, 才好為郵件分類加入連結你好嗎? 讓瀏覽者下載檔案在目標直接輸入檔案名稱就可以了, 如 :download.zip 由於 Windows XP 會將.zip 檔模擬成壓縮的資料夾, 所以必須將這個網頁及相關的資料夾上傳至網站上, 才能看到實際下載的狀況若超連結指向瀏覽器無法直接顯示的檔案格式, 如.zip.exe 等等, 瀏覽器就會當成是要下載的檔案, 進而啟動下載功能如果超連結指向.gif.jpg.png 等圖片格式, 那麼就不會當成下載檔案, 而是直接顯示在瀏覽器中加入隨滑鼠指標變換 (Rollover) 的圖片準備好兩張大小相同的圖片, 一張是滑鼠還沒移上去時的狀態, 另一張則是滑鼠移上去後的圖片 17 頁

每個區域都可以自定連結, 許多以圖形為主的網站相當適合 1. 先輸入您的圖形, 並且利用滑鼠點選圖形 2.

19 按下確定鈕後, 請利用瀏覽器來進行預覽, 即可測試 Rollover Image 的效果影像地圖影像地圖的好處是將一張圖形本來只能連接一個路徑, 但是利用影像地圖, 可以在一張圖形上, 圍出多個區域, 每個區域都可以自定連結, 許多以圖形為主的網站相當適合 1. 先輸入您的圖形, 並且利用滑鼠點選圖形 2. 您會發現屬性面板左下方, 就有些關於影像地圖的工具從第二個開始, 分別是矩形橢圓多邊形連結區域工具, 您可以按照畫面的需要使用相對的形狀工具 3. 利用工具在圖形上選出您要連結的範圍並輸入相關的連結資訊即可 18 頁

20 19 頁

步驟 : 插入媒體 SWF 設定 Flash 動畫屬性如何將 Flash 動畫背景設為透明在

屬性面板的參數鈕, 開啟如下交談窗來做設定 : 加入背景音樂目前可以用來當網頁背景音樂的格式有 wav midi

21 聲音與影片運用加入 Flash 動畫 Flash 製作的動畫 (.swf), 是目前網頁製作領域中備受矚目與廣泛應用的動畫格式 Flash 動畫的優勢包括 : 檔案小向量格式不失真可播放 MP3 音效互動效果優異... 尤其在互動效果方面, Flash 動畫可以製作網頁常見的超連結按鈕功能表表單, 甚至還能做出遊戲步驟 : 插入媒體 SWF 設定 Flash 動畫屬性如何將 Flash 動畫背景設為透明在 Dreamweaver 中要將 Flash 動畫的背景去掉, 可以在選取 Flash 動畫後, 按下屬性面板的參數鈕, 開啟如下交談窗來做設定 : 加入背景音樂目前可以用來當網頁背景音樂的格式有 wav midi au 等, 不過基於檔案的大小網路的頻寬瀏覽器的支援度是否跨平台等考量因素, 一般大多採用 MIDI 檔做為網頁的背景音樂步驟 : 插入媒體 plugin 設定背景音樂的屬性在加入的 Plugin 物件上按右鈕, 執行屬性命令 : 20 頁

22 設定好音樂的屬性後, 可按下 [F12] 鍵, 開啟瀏覽器來聆聽音樂效果 : 顯示完整的播放面板若希望顯示完整的播放面板, 請將面板的尺寸設定成約寬 :280 高 :45 的大小即可 : 隱藏播放面板利用外掛程式加入聲音檔後, 預設會顯示播放面板, 讓瀏覽者可以自行操作播放面板, 決定要不要播放背景音樂若是覺得播放面板會影響到網頁版面的話, 也可以將它隱藏起來, 但是設為隱藏後, 瀏覽者就不能自行操控了要隱藏播放面板, 可在選取外掛程式圖示後, 由屬性面板來做設定 : 若要音樂不斷地重複播放, 可在參數欄位中輸入 loop, 在值欄位中輸入 true 加入網站更新日期步驟 : 插入日期 21 頁

23 自動更新日期的注意事項請注意哦! 如果你只有在網站中的首頁加入日期, 則進行網站的維護更新工作時, 即使首頁不打算更新, 也要將首頁重新儲存一次, 才能將日期更新 22 頁

24 頁框與表格製作加入表格網頁表格的各部分名稱 : 按下常用面板的插入表格鈕 : 在表格交談窗指定表格的欄列數寬度 : 雖然表格邊框寬度設定為 0, 但還是會使用虛線來表示表格的格線, 以方便表格的編 23 頁

25 輯作業, 預覽網頁時就不會看見虛線了設定表格的屬性將插入點移到表格任一儲存格內, 執行修改 / 表格 / 選取表格命令 : 進階表格屬性設定儲存格的屬性 24 頁

26 巢狀表格使用巢狀表格的好處降低每個表格結構的複雜度每個表格都可以儘可能地維持如棋盤格一般的面貌, 在編輯上會比較方便 : 表格資料排序 Dreamweaver 還可將表格中的數字或是英文資料依照順序排列 25 頁

27 26 頁

28 頁框 (Frame) 什麼是頁框頁框的製作是用來分割瀏覽器的視窗畫面, 讓一個瀏覽器視窗能夠同時呈現數個不同的網頁畫面, 也就是說利用頁框可以將數個不同的 HTML 文件同時在一個瀏覽器中瀏覽每一個分割的視窗範圍就稱之為頁框, 而將每個不同的頁框分割方式, 及配置等屬性紀錄起來, 就是頁框組, 而頁框組也是一個 HTML 文件檔, 所以一個分割成二個頁框的網頁, 必須由三個不同的 HTML 文件檔組合而成頁框的用法最常使用在分離網頁的連結導覽列和連結內容的顯示區, 好處是瀏覽者可隨時點選導覽列上的連結, 也不會因瀏覽內如容時導覽列的連結也隨之捲動, 下圖就是利用頁框功能所做的網頁頁框的製作 Dreamweaver 提供下列三種製作頁框的方法 : 開新檔案後, 點選插入面板的頁框類別標籤, 其中 Dreamveraver 內建了數種頁框的分割樣式, 只要你點選你要的頁框分割樣式, 頁框就會出現在你編輯的檔案視窗內從功能表點選檔案 > 開新檔案, 會出現新增文件的對話視窗, 選取類別中的頁框組, 再從頁框組的樣式類別清單中, 選取你要的頁框分割樣式, 按建立鈕 27 頁

29 即可完成 28 頁

30 如果你不滿意預設的頁框樣式, 你可以先選擇一個比較接近的樣式來修改, 或是直接從新檔案完全的以手動方式來設計製作頁框, 參考步驟如下 : 開啟新的空白文件點選功能表檢視 > 視覺輔助 > 頁框邊框, 此時編輯區的視窗邊緣會顯示出頁框邊框將游標移到邊框上, 游標會變成符號, 接著按住滑鼠左鍵不放拖曳頁框邊框到適當位置上, 再鬆開滑鼠按鍵, 即可分割視窗畫面重覆 Step3 一直分割視窗畫面到滿意為止若要刪頁框, 只要按住邊框拖曳到編輯視窗外即可如果要使再分割的頁框空間沒有分隔, 在按住滑鼠左鍵不放拖曳頁框邊框之前, 按住 Ctrl 鍵不放然後再拖曳 29 頁

實作範例 : 頁框製作建議的參考步驟 Step1 點選功能表檔案 > 開新檔案會出現新增文件的對話視窗, 選取類別中的頁框組, 再從頁框組的樣式類別清單中, 選取你要的頁框分割樣式, 筆者選擇固定上頁框的樣式按下建立鈕 Step2 再到屬性面板中的列輸入你要的數值, 以及依需求來更改是否要邊框及邊框顏色邊框寬度,

31 實作範例 : 頁框製作建議的參考步驟 Step1 點選功能表檔案 > 開新檔案會出現新增文件的對話視窗, 選取類別中的頁框組, 再從頁框組的樣式類別清單中, 選取你要的頁框分割樣式, 筆者選擇固定上頁框的樣式按下建立鈕 Step2 再到屬性面板中的列輸入你要的數值, 以及依需求來更改是否要邊框及邊框顏色邊框寬度, 筆者使用預設值 Step3 接著不作任何網頁內容編輯直接存檔, 點選檔案 > 全部儲存, 此時會出現另存新檔的對話視窗, 並且編輯區視窗的頁框邊框會顯示粗斜線範圍, 此粗斜線範圍便是提示目所存的頁框範圍分別是, 先顯示全部範圍, 將存檔的路徑切換到網站定義的根資匣, 輸入檔案名稱按下確定鈕再顯示下半部的頁框範圍, 輸入檔案名稱按下確定 30 頁

32 鈕最後顯示上半部的頁框範圍, 輸入檔案名稱按下確定鈕此頁框的作法會提示存檔的粗斜線範圍, 便是建議此一作法的原因 Step4 儲存檔案完成後即可進行網頁內容的編輯頁框的屬性頁框包含兩種屬性, 一種是頁框組的屬性, 另一種則是個別頁框的屬性為能夠控制設定頁框的屬性, 必須將頁框面板呼叫出來, 點選視窗 > 其它 > 頁框, 在頁框面板中點一下個別頁框, 屬性面板就會顯示出頁框的屬性, 如果在頁框面板中的最外緣框線點一下, 屬性面板就會顯示出頁框組的屬性 31 頁

連結目標及頁框連結目標設定當在文字或影像上設定連結後, 便可以設定連結目標, 其中有四種預設值, 分別是 _blank _parent _self _top 如果使用了頁框, 則連結目標會顯示出除了四種預設值外, 還會顯示頁框名稱, 指定連結目標的頁框名稱 ( 頁框名稱可以點選頁框面板後, 再到屬性面板修改 ), 才可以使製作了頁框分割的網頁點選連結時,

33 連結目標及頁框連結目標設定當在文字或影像上設定連結後, 便可以設定連結目標, 其中有四種預設值, 分別是 _blank _parent _self _top 如果使用了頁框, 則連結目標會顯示出除了四種預設值外, 還會顯示頁框名稱, 指定連結目標的頁框名稱 ( 頁框名稱可以點選頁框面板後, 再到屬性面板修改 ), 才可以使製作了頁框分割的網頁點選連結時, 指定顯示在特定的頁框視窗中 _blank _parent _self 將點選的連結文件, 開啟於新的瀏覽視窗中將點選的連結文件, 開啟於所在頁框組的瀏覽視窗中將點選的連結文件, 開啟於目前所在的瀏覽視窗中, 或是所在的頁框視窗中 ( 此為預設值 ) _top FrameName 將點選的連結文件, 開啟於最上層頁框組的視窗中將點選的連結文件, 開啟於指定頁框名稱的視窗中頁框名稱可自訂修改表單 (Form) 表單功能最常使用在網站與瀏覽者相互交流的管道上, 比如說網站上的加入會員的基本資料填寫網頁, 或是一些有資料庫功能的留言板搜尋引擎或是電子商務型態的網站, 都會使用到表單的元素在 Dreamweaver 要置入表單的元素, 只要點選插入面板上的表單類別標籤, 或是點 32 頁

34 選功能表插入 > 表單物件就可以選擇你要置入的表單物件, 下表是表單物件的類型及使用說明表單物件表單物件名稱表單物件說明表單定義表單範圍, 以紅色虛線框表示設定表單的處理位址及表單資料的傳送方式文字欄位用來輸入文字的欄位, 可設定成單行多行密碼方式因程式需要, 可以透過隱藏欄位設定的變數隱藏欄位值, 在傳送表單時一併傳送, 但在瀏覽器不會顯示出來文字區域與文字欄位的多行類型相同, 用來輸入較多的文字內容核取方塊讓瀏覽者可勾選預先輸入好的選項內容, 而且可以複選選項按鈕讓瀏覽者可點選預先輸入好的選項內容, 但是在相同的群組名稱中僅能單選選項按鈕群組設定選項按鈕的群組, 可以設定二個群組以上 33 頁

35 清單 / 選單將預先設定好的類別內容, 以清單或下拉選單的方式呈現供瀏覽者點選跳頁選單以下拉選單方式呈現, 在點選預先設好的選單內容時, 會前往指定的 URL 影像欄位以影像圖片來取代表單的按鈕物件外觀檔案欄位讓瀏覽者上傳本機電腦中的檔案到伺服器, 但實際上傳檔的程式碼要自行撰寫按鈕用於送出表單或重設表單, 也可用來配合觸控 JavaScript 程式 ( 行為指令 ) 34 頁

36 互動效果 1. Java Script 應用技巧 Download Web Site: javascript.internet.com 1. 選擇喜愛效果 2. 閱讀指引 3. 選取所提供之原始碼 4. 複製按 Ctrl+C 將標記的部份複製起來 5. 返回 FrontPage 2000 的 HTML 模式, 按貼上或按 Ctrl+V 將剛剛複製的程式碼貼在指示位置之前指示位置之前 6. 通常會有三個位置, 一是 <HEAD> 與 </HEAD> 之間一是 <BODY> 與 </BODY> 之間一是加進 <BODY..> 標纖之中 (BODY HANDLER) 7. 按指示修改原始碼 8. 預覽即可例子 : Easy: Medium: Advanced 頁

37 行為 (Behavior) 點選視窗行為呼叫出行為面板行為指令幕後其實就是 JavaScript 語法, 當我們在行為面板上設定行為動作指令及觸控事件後,Dreamweaver 會在網頁內自動產生 JavaScript 語法程式碼 1. 選取要產生行為的目標元件, 你可以選擇影像連結文字圖層等元件, 如果要使網頁一載入就開始出現效果, 則可按一下狀態列上的 <body> 標籤 2. 按下新增項目鈕選擇效果, 可使用的效果會依你選取的元件而有差異接著在隨後出現的交談窗中設定屬性 3. 選擇事件, 以決定什麼時候要發生你所設定的效果 36 頁

38 事件與動作假設我們現在已經加入一個行為效果了, 在面板中就會顯示事件和動作的資訊 : 事件和動作都是 Script 中的用語, 意思就是 : 當瀏覽者做了什麼事件之後, 就會發生你所設定好的動作當你加入了一個行為效果之後, 事件欄位就會自動選擇一個適當的事件, 點選事件欄位可從選單中選擇其它的事件 37 頁

39 選擇事件與瀏覽器相容性在新增項目鈕選單的顯示特定事件次功能表中選擇瀏覽器版本 : 建議將瀏覽器版本設為 4.0 及更新版本的瀏覽器 onmouseover: 滑鼠移到目標上時 onmouseup: 按下滑鼠再放開左鈕時 onmouseout: 滑鼠移開時 onmousedown: 按下滑鼠時 ( 不必放開左鈕 ) onclick: 用滑鼠點選物件時 ( 按下左鈕並放開 ) ondblclick: 用滑鼠雙按物件時 onload: 載入網頁時 onunload: 離開目前網頁時 onfocus: 滑鼠移入表單元件時 ( 或網頁視窗被置於前景時 ) onblur: 滑鼠移出表單元件時 ( 或網頁視窗被置於背景時 ) onabort: 當瀏覽者不載入影像時 onhelp: 執行瀏覽器的輔助說明時 onresize: 當瀏覽者改變視窗大小時 onscroll: 當瀏覽者捲動捲軸時刪除 / 修改行為雙按動作欄位, 即可開啟對應的交談窗, 讓你繼續修改其屬性, 而按下刪除鈕, 則可刪除目前選取的行為 : 38 頁

40 擴充功能這次下載的網址是 : er.com/, 按下左側的 Javascript 的選單點選 Windows Suite 1.1 的連結安裝好之後要幫我準備兩個網頁第一個網頁上面幫我準備好一個空連結 ( 就是在連結上面輸入 Javascript:;) 第二個網頁就隨意放些東西接下來回到前一頁圈選空連結後, 利用行為面板中剛剛安裝的 Windows/Launch Window 39 頁

41 先把 Url 設定好, 按下右側黃色的資料夾圖示選取欲開起來的網頁名稱後按下確定其餘設定可以參考下圖, 設定好之後按下確定其中 Left Top 指的是視窗開起來的位置 W idth Height 指的是開啟的視窗大小最下面的 Focus... 指的是彈出來的視窗會顯示在所有視窗最上層擴充功能下載 40 頁

42 你亦可以自行下載不同的 extension 來豐富你的 Dreamweaver 功能 41 頁

HTML 進階運用 Light box 效果 http://www.huddletogether.

43 HTML 進階運用 Light box 效果先下載幾個必備的資料檔 ( 共有三個資料夾 ) 然後將他們複製到製作網頁的資料夾中 : 將下來製作兩張圖片 ( 一張為小縮圖一張則是此大張的圖片, 可參考下圖 ) 接下來利用 Dreamweaver 將縮圖置放於頁面後, 直接製作超連結到大圖即可 42 頁

js"></script> <link rel="stylesheet" href="css/lightbox.

44 接下來將以下的語法新增餘網頁 <head>...</head> 內 : <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 另外在超連結標籤內增加 : rel="lightbox[roadtrip]" 的語法即可 43 頁

45 插入 You Tube 片段先選取喜愛的 youtube 片段, 留意嵌入的變數, 選取後按 Ctrl + C 複制返回 Dreamweaver 進入程式碼在 body 內按 Ctrl + C 貼上即可 44 頁

46 Free Hosting and FTP setup 請先前往申請一個戶口你會收到一封確認信, 要按連結確認如果申請成功後, 你的網址就是 yourid.001webs.com 如我的連結就是 : FTP Server 就是 microstyle.001webs.com 有了以上資料後, 就可以試定網頁的 FTP 資料雙按右下方網站名稱即出現網站定義頁面按進階內的遠端資訊, 輸入 FTP 主機登入及密碼你可以按一按測試是否妥當 45 頁

打開的範本頁面和普通的網頁沒什麽兩樣, 同樣可以加入表格層圖片動畫腳本, 設置頁面屬性等 2

47 範本製作一建立範本 1 創建範本頁面最簡單的辦法是將一個網頁另存爲範本文件, 通過執行命令 : 檔案另存成範本, DreamWeaver 會在網站根目錄中建立一個範本文件夾 Templates 來保存該範本新建打開的範本頁面和普通的網頁沒什麽兩樣, 同樣可以加入表格層圖片動畫腳本, 設置頁面屬性等 2 設定可編輯區域設定範本可編輯區域, 一般來說有兩種方法新建可編輯區域 : 選擇命令 : 插入範本物件可編輯區域在某一空白區域中單擊後執行該命令即可將該區域變爲可編輯區域 46 頁

48 舉例 : 在大片空白區中隨便單擊一下, 執行插入範本物件可編輯區域命令, 在彈出對話方塊中輸入名稱 :content; 可以看到可編輯區顯示爲淺藍色, 保存即完成範本製作二使用範本批量製作網頁 1 根據範本新建頁面命令 : 檔案來自範本的頁面從範本列表中選取範本, 出現的新頁面中除可編輯區外均有淡黃色背景, 是不能進行修改的部分空白的 content 編輯區可直接進行插入表格文字圖片等操作 47 頁

49 3 更新範本以全面更新站點基於某一範本建立了一些頁面後, 對範本進行修改後保存時, 就會自動彈出一個對話方塊, 列出所有使用了該範本的頁面, 詢問是否要更新 48 頁

CSS 文字樣式運用全名為 Cascading Style Sheets, 它是用來設定網頁文字表格水平線

標籤編排網頁的缺點是, 網頁內容將被一堆和內文無關的標籤指令糾結在一起, 而且一旦定下版型就不易修改和更換 CSS 分隔網頁的

50 CSS 文字樣式運用全名為 Cascading Style Sheets, 它是用來設定網頁文字表格水平線等等網頁元素的外觀樣式的語言 CSS 樣式功能 HTML 語言是描述網頁文件結構的標籤語言使用 HTML 標籤編排網頁的缺點是, 網頁內容將被一堆和內文無關的標籤指令糾結在一起, 而且一旦定下版型就不易修改和更換 CSS 分隔網頁的表現層與內文結構, 而且 CSS 樣式表可以單獨地儲存成一個文件讓多個網頁共用, 令它們呈現一致的外觀與感覺 CSS 樣式表的分類外部樣式表 : 外部樣式表就是獨立的樣式表 (.css) 檔, 此檔案可以包含許多 CSS 標籤外部樣式表最大的優點是, 可以讓整個網站共用同一個 ( 或多個 ) 樣式表檔內部樣式表 : 直接把 CSS 樣式標籤寫在網頁檔頭中, 所以, 基本上這些樣式無法分享給其他網頁使用 49 頁

51 網站規劃計畫 ;Planning 01. 網站名稱 & LOGO 02. 網站目的 03. 網站屬性 04. 網站主要對象 05. 網站視覺風格 06. 網站架構圖 50 頁

52 07. 版面結構圖 08. 視覺提案一 (welcome) 構成元素 : IMAGES+ENTER+LOGO+COPYRIGHT 09. 視覺提案二 (index) 構成元素 :LOGO+IMAGES+BUTTON( 內頁選單 )+COPYRIGHT+LAYOUT( 版面構成 ) 10. 工作分配說明 51 頁

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

$輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4$ JAVA Extension 0..\Example\Ch0\ \ T.html..\Example\Ch0\ \ T.txt T.txt..\Example\Ch0\ \ T_Ok.html 提示 :. Marquee Marquee Font Color #FFFFFF BG Color #867bf Width 90 Height 50. T.txt Ctrl+C your scrolling