Adobe Dreamweaver

Adobe Dreamweaver Speaker：張耀文

Outline Adobe Dreamweaver 介紹為何要使用Dreamweaver 網頁的相關名詞網頁的設計流程 DreamWeaver的環境與基本操作範例實作

Adobe Dreamweaver 介紹 Adobe Dreamweaver是Adobe公司的著名網站開發工具。它使用所見即所得的介面，亦有HTML編輯的功能。它現在有Mac和Windows系統的版本。原本由Macromedia公司所開發。 Dreamweaver由MX版本開始使用Opera軟體公司的排版引擎「Presto」作為網頁預覽。由CS4 版本開始，則轉用WebKit排版引擎作為網頁預覽。 Dreamweaver最大的特點允許用戶於已經安裝的網頁瀏覽器中預覽網頁。

為何要使用Dreamweaver • Dreamweaver 是一套功能強大而介面人性化的網頁編輯軟體及管理工具，它與其他軟體的相容整合，功能的全方位延伸，與目前網際網路的多媒體化及動態資料庫的結合。 • 當設計一個複雜的例如：電子商務 (E-Commerce)網站，可以用Dreamweaver來維護管理 ! • 當設計一個多媒體形式 (Mulitimedia)的網站，如 Shockwave Flash多媒體格式、 DHTML，而 Dreamweaver也可以發揮最完整的支援整合。

網頁的相關名詞 網站(Web Site):包含首頁和網頁的內容首頁(HomePage):網站的入口網頁(WebPage):首頁之外的文件

網頁的相關名詞 超文字連結標示語言超文字連結標示語言(Hypertext Markup Language)簡稱HTML ，是最早用來製作網頁的程式語言，透過邊謙與法將網頁的內容顯示在瀏覽器當中。相對路徑/絕對路徑製作網頁的過程中，常常需要連結其他的檔案，例如：影像、視訊或網頁，相對路徑所指到的檔案或目錄，會隨著現在目錄的不同而改變。若一個路徑不屬於相對路徑，那就是絕對路徑，絕對路徑指的是一個絕對的位置，並不會隨著現在目錄的改變而改變。

網頁設計流程

CSS 介紹 • CSS 樣式表全名為「Cascading Style Sheets」中譯名稱為「串接樣式表」。CSS 是W3C為了彌補傳統HTML 功能之不足所開發的一種新的網頁設計標準，CSS 新增了很多很棒的功能，例如可以精準地設定文字的大小、文字的間距、行距、更加入了重疊圖層、區塊變化、及絕對定位和相對定位的功能….等。透過 CSS 可以讓我們更容易掌握精緻的網頁排版，製作出更專業、更多樣化的網頁。

CSS 介紹 • 透過 Dreamweaver「頁面屬性」和「文字屬性」圖形面板，可以直接設定文字的大小，從1像素到無限大像素都可以…僅僅設定文字的大小，對於 CSS 來說只是牛刀小試。 • 使用「CSS圖形面板」修改CSS樣式之後，網頁中有套用該樣式的文字就會馬上自動更新，當刪除某個樣式後，網頁中有套用該樣式的文字就會失去所有效果！尤其在一個較大型的網站中，使用CSS可以很快速地更新修改所有的網頁。

Dreamweaver 的環境與基本操作

範例實作 製作簡單的首頁加入超連結和影像地圖錨點的使用

範例實作 使用頁框做一個網頁相簿垂直距離0 水平距離5 邊框0 載入的圖片在頁框相簿的資料夾(後面有s的是小圖) 將小圖連結到大圖 AP元素(圖層)相簿寬300px 高225px 使用3X3表格載入的圖片再彈出影像的資料夾(後面th是小圖 ls是大圖) AP元素中將Z值改為2 設置顯示圖像選取行為按+ 顯示隱藏元素將做的網頁合併成一個網站壓縮後上傳到教學平台壓縮檔名稱用學號

範例實作 • 在說明文件檔裡面有圖片說明至少要做哪些功能 • 包含 -首頁說明 -頁框相簿(點小圖時要彈出大圖) -圖層相簿(點小圖時要彈出大圖) - 影像地圖說明每一個都是用圖片檔說明你要做到哪些功能 (說明檔在說明資料夾裡面) 相簿就不另外附圖說明

Adobe Dreamweaver