Transcript PowerPoint 簡報

Image
Video
Processing
Laboratory
Adobe Dreamweaver
Speaker：張耀文
Image
Video
Processing
Laboratory
Outline
•
•
•
•
•
•
Adobe Dreamweaver 介紹
為何要使用Dreamweaver
網頁的相關名詞
網頁的設計流程
DreamWeaver的環境與基本操作
範例實作
IVP Lab., CSIE@Tunghai University
Adobe Dreamweaver 介紹
Image
Video
Processing
Laboratory
• Adobe Dreamweaver是Adobe公司的著名網站開發工
具。它使用所見即所得的介面，亦有HTML編輯的功能。
它現在有Mac和Windows系統的版本。原本由
Macromedia公司所開發。
• Dreamweaver由MX版本開始使用Opera軟體公司的排
版引擎「Presto」作為網頁預覽。由CS4 版本開始，則
轉用WebKit 排版引擎作為網頁預覽。
• Dreamweaver最大的特點允許用戶於已經安裝的網頁
瀏覽器中預覽網頁。
IVP Lab., CSIE@Tunghai University
為何要使用Dreamweaver
Image
Video
Processing
Laboratory
• Dreamweaver 是一套功能強大而介面人性化的網頁編
輯軟體及管理工具， 它與其他軟體的相容整合 ，功能
的全方位延伸，與目前網際網路的多媒體化及動態資料
庫的結合。
• 當設計一個複雜的例如：電子商務 (E-Commerce) 網站，
可以用 Dreamweaver 來維護管理 !
• 當設計一個多媒體形式 (Mulitimedia) 的網站，如
Shockwave Flash 多媒體格式、 DHTML，而
Dreamweaver 也可以發揮最完整的支援整合。
IVP Lab., CSIE@Tunghai University
Image
Video
Processing
Laboratory
網頁的相關名詞
• 網站(Web Site):包含首頁和網頁的內容
• 首頁(Home Page):網站的入口
• 網頁(Web Page):首頁之外的文件
IVP Lab., CSIE@Tunghai University
Image
Video
Processing
Laboratory
網頁的相關名詞
• 超文字連結標示語言
超文字連結標示語言(Hypertext Markup Language)簡
稱HTML ，是最早用來製作網頁的程式語言，透過邊謙
與法將網頁的內容顯示在瀏覽器當中。
• 相對路徑/絕對路徑
製作網頁的過程中，常常需要連結其他的檔案，例如：
影像、視訊或網頁，相對路徑所指到的檔案或目錄，會
隨著現在目錄的不同而改變。若一個路徑不屬於相對路
徑，那就是絕對路徑，絕對路徑指的是一個絕對的位置，
並不會隨著現在目錄的改變而改變。
IVP Lab., CSIE@Tunghai University
Image
Video
Processing
Laboratory
網頁設計流程
IVP Lab., CSIE@Tunghai University
Image
Video
Processing
Laboratory
CSS 介紹
• CSS 樣式表全名為「Cascading Style Sheets」中譯名
稱為「串接樣式表」。CSS 是W3C為了彌補傳統
HTML 功能之不足所開發的一種新的網頁設計標準，
CSS 新增了很多很棒的功能，例如可以精準地設定文
字的大 小、文字的間距、行距、更加入了重疊圖層、
區塊變化、及絕對定位和相對定位的功能….等。透過
CSS 可以讓我們更容易掌握精緻的網頁排版，製作出
更專業、更多樣化的網頁。
IVP Lab., CSIE@Tunghai University
Image
Video
Processing
Laboratory
CSS 介紹
• 透過 Dreamweaver「頁面屬性」和「文字屬性」圖形
面板，可以直接設定文字的大小，從1像素到無限大像
素都可以…僅僅設定文字的大小，對於 CSS 來說只是
牛刀小試。
• 使用「CSS圖形面板」修改CSS樣式之後，網頁中有套
用該樣式的文字就會馬上自動更新，當刪除某個樣 式
後，網頁中有套用該樣式的文字就會失去所有效果！尤
其在一個較大型的網站中，使用CSS可以很快速 地更
新修改所有的網頁。
IVP Lab., CSIE@Tunghai University
Dreamweaver 的環境與基本操作
IVP Lab., CSIE@Tunghai University
Image
Video
Processing
Laboratory
Image
Video
Processing
Laboratory
範例實作
•
•
•
•
製作簡單的首頁
加入超連結和影像地圖
錨點的使用
使用頁框做一個網頁相簿
垂直距離0 水平距離5 邊框0
• AP元素(圖層)相簿
寬300px 高225px
• 將做的網頁合併成一個網站
IVP Lab., CSIE@Tunghai University