制作随滑鼠指标变换的图片-静宜大学.PPT

靜宜大學專用PowerPoint 檔案數位教材 旗標出版股份有限公司 製作 Dreamweaver網頁製作 第 24 章 本章重點 在眾多的網頁編輯軟體中,Dreamweaver 有所見即所得的操作介面,也兼備了進階編輯程式碼的功能, 可以說是學習製作網頁最好的工具。本章就要教您使用 Dreamweaver 製作出一個完整的網站, 並且上傳到網際網路中。 網站的概念與規劃流程 Dreamweaver 的工作環境 用 Dreamweaver 設計網頁 製作隨滑鼠指標變換的圖片 表格的應用 套用 CSS 樣式 發佈網站 24-1 網站的概念與規劃流程 在正式開始製作網站前, 最重要的工作就是先規畫好網站架構圖並建立相關的檔案及資料夾, 如此一來, 不僅可以幫助您構思網站要呈現的內容, 也可以提高製作效率。 24-1-1 網站架構圖 網站就是網頁的集合, 網站架構就是網站內網頁要呈現的方式。在開始製作網頁之前, 應該要先了解自己想做什麼樣的網站, 也就是決定網站的主題和網站中要呈現的內容, 並準備相關的資料, 例如文字、圖片、影片、音樂檔案等, 再將資料適度地分類, 規劃要分哪些頁面, 每一頁需要連結到哪些網頁等等。 24-2 Dreamweaver 的工作環境 Dreamweaver 是一套所見即所得的網頁編輯軟體, 對於迫不及待想製作網頁,卻不想從頭學習 HTML 的人而言, 它正是可供立即上手的最佳選擇, 讓您輕鬆地製作網頁。請跟著下列步驟來實際體驗 Dreamweaver 的強大功能吧！ 24-2-1 認識 Dreamweaver 的操作介面 接下來我們要啟動 Dreamweaver, 並且認識一下 Dreamweaver 的主畫面, 就可以一步步來建構網站了。 啟動 Dreamweaver 在您安裝好 Dreamweaver 後, 請執行『開始/ 所有程式/Adobe DreamweaverCS3』命令, 啟動 Dreamweaver。啟動後您會看到 Dreamweaver 的起始頁面： 24-3 用 Dreamweaver 設計網頁 接下來我們就要製作網頁的內容, 請在檔案面板雙按要編輯的檔案, 即可開啟新網頁。若您尚未建立網頁檔案, 也可以執行『檔案/ 開新檔案』命令, 在交談窗中選擇建立 HTML 頁面, 直接開啟新的空白網頁來編輯。 24-3-1 編輯文字 在 Dreamweaver 的編輯區輸入文字, 如圖所示： 從上圖中可以發現, Dreamweaver 會將您的文字依照視窗大小自動換行, 也就是當我們輸入的文字超過 Dreamweaver 視窗的顯示範圍時, 這行文字就會自動折到下一行。 24-4 製作隨滑鼠指標變換的圖片 您一定看過隨滑鼠指標變換圖片的效果, 也就是當滑鼠移到某圖片上面時, 會瞬間變色或變成另一張圖片, 以下我們就來練習這種效果。 要製作這樣的效果, 我們必須準備兩組圖片, 一組是表示滑鼠還沒移上去的狀態,一組則是滑鼠移上去的狀態。若您沒有這樣的圖片, 可以利用範例檔案中的圖片來練習。 製作隨滑鼠指標變換的圖片 24-5 表格的應用 使用過文書處理軟體 (例如 Word ) 的人對表格一定不陌生。表格可以為我們排列資料, 讓圖文看起來井然有序, 更可以幫我們規劃網頁版面, 達到版面配置的目的。接下來就要示範如何在網頁中應用表格。 24-5-1 插入表格 請開啟練習檔案 ex-06.html, 我們要練習在這一頁中加入表格： 表格也是一種常用的網頁元件, 我們可以在常用面板找到表格鈕 , 按下此鈕即可加入表格 (執行『插入/ 表格』命令亦可)： 24-6 套用 CSS 樣式 當我們在 Dreamweaver 中調整文字的樣式 （如大小、顏色、粗體等）時,Dreamweaver 會自動將您調整的樣式設定成一組 CSS 樣式, 下次要設定樣式時即可直接套用。請開啟練習檔案 ex-08.html, 進行如下練習： 選取「3月11 日」, 在屬性面板中拉下格式列示窗, 選擇標題 2, 然後將文字顏色改為 #FF0066 ： 套用 CSS 樣式 24-7 發佈網站 我們必須把網站上傳到網路伺服器上, 才能讓全世界的人看到。在大型企業或政府學術單位中, 通常會自備架設網站用的網路伺服器, 不過費用高昂。對一般中小企業或個人而言, 最省錢的方式, 就是向 ISP ( Internet Service Provider, 網路服務提供者) 申請「虛擬伺服器」 (或稱虛擬主機), 也就是在 ISP 所架設的網路伺服器上租用網頁空間。完成申請或租用空間的手續後, 就可以上傳您的網站了。 24-7-1 以網站空間提供的介面上傳網站 一般的網站空間會有自己的上傳介面, 您只要依其系統的指示,