dreamweaver n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
熟悉 Dreamweaver 的工作區與基本操作 PowerPoint Presentation
Download Presentation
熟悉 Dreamweaver 的工作區與基本操作

Loading in 2 Seconds...

play fullscreen
1 / 49

熟悉 Dreamweaver 的工作區與基本操作 - PowerPoint PPT Presentation


  • 219 Views
  • Uploaded on

熟悉 Dreamweaver 的工作區與基本操作. 講師 : 陳烱勳 Email: mikemousenana@gmail.com mikemouse@is.cs.nthu.edu.tw. 啟動 Dreamweaver. 請按下 開始 鈕 ( 以 Windows XP 為例 ), 執行 『 程式集 /Adobe Dreamweaver CS4 』 命令啟動  Dreamweaver, 當程式啟動後預設會顯示如下的 歡迎畫面 , 你可以由此建立新網頁 , 或是開啟現成的網頁檔案。. 啟動 Dreamweaver. 建立新網頁.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '熟悉 Dreamweaver 的工作區與基本操作' - spike


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
dreamweaver

熟悉 Dreamweaver的工作區與基本操作

講師:陳烱勳

Email: mikemousenana@gmail.com

mikemouse@is.cs.nthu.edu.tw

dreamweaver1
啟動 Dreamweaver
  • 請按下開始鈕 (以 Windows XP 為例), 執行『程式集/Adobe Dreamweaver CS4』命令啟動 Dreamweaver, 當程式啟動後預設會顯示如下的歡迎畫面, 你可以由此建立新網頁, 或是開啟現成的網頁檔案。
slide4
建立新網頁
  • 在歡迎畫面的最下方勾選不要再顯示項目, 下次開啟 Dreamweaver 時將不會顯示歡迎畫面。若想再度開啟歡迎畫面, 請執行『編輯/偏好設定』命令開啟偏好設定交談窗, 勾選一般設定頁次的顯示歡迎畫面項目後按下確定鈕, 下次開啟 Dreamweaver 即可看到歡迎畫面。
  • 在 Dreamweaver 中要建立新網頁, 有幾種方法:
    • 從歡迎畫面中建立新網頁:按下歡迎畫面中新增區的 HTML 項目, 即可直接開啟一個空白 HTML 網頁。
slide7
開啟舊網頁
  • 要開啟舊檔案, 請執行『檔案/開啟舊檔』命令開啟開啟舊檔交談窗, 從中即可選擇要開啟的檔案。請開啟 Ch02資料夾中的 Ex02-01.html, 稍後將會利用此檔案帶你熟悉 Dreamweaver 的工作環境。
slide11
功能表
  • 按下各功能表可展開命令選單, 從中可執行各種命令。不過大部分的命令可透過其他面板來執行,或是在編輯區中按右鈕,也可出現相對應的快顯功能表, 善用這 2 種方法可提高製作網頁的效率喔!
slide13
文件視窗
  • 文件視窗是用來顯示及編輯網頁的地方, 由檔案標籤、關聯檔案列、文件工具列、編輯區及狀態列所組成, 你可在多個檔案中快速切換以進行編輯、切換不同的編輯模式、檢視預覽網頁、…等, 底下就分別為你做說明。
slide15
檔案標籤
  • 在進行網頁設計時, 難免會需要同時開啟多個檔案, 為了方便選取欲編輯的網頁,Dreamweaver 會將同時開啟的檔案以標籤形式並存, 只要按下檔案標籤即可切換欲編輯的檔案。
  • 例如目前正同時開啟 2 個檔案, 若想切換則可如下操作。
slide17
關聯檔案列
  • 當編輯中的網頁有連結到其他程式檔案, 例如:CSS (*.css)、JavaScript (*.js)、動態資料庫連結用的檔案、…等, Dreamweaver 會一併開啟它們, 並在關聯檔案列中顯示檔名,只要按下 即可編輯該檔案;若關聯檔案過多時, 關聯檔案列最右邊會出現 鈕, 按下可顯示其他容納不下的檔案。
  • 請切換到 Ex02-01.html, 便會出現關聯檔案列。
slide20
文件工具列
  • 如果沒有看到文件工具列, 請執行『檢視/工具列/文件』命令即可。
slide21
編輯區
  • 編輯區
    • 「設計檢視」
      • 編輯區中可直接輸入文字、設定格式或加入各類網頁元素, 例如圖片、表格、動畫…等,也就是一般所謂的「所見即所得」編輯方式
    • 「程式碼檢視」
      • 編輯區中則可編輯 HTML 原始碼及其他的程式語法
    • 「分割檢視」
  • 不管你在哪一種模式中編輯網頁, 所做的修改都會反應在另一種模式上。
slide24
狀態列
  • 狀態列會顯示選取或編輯中的 HTML 標籤、網頁視窗尺寸、網頁檔案大小及預估下載時間、網頁編碼等資訊。
slide25
插入面板將網頁常用的元素, 分門別類地放在不同的頁次中, 按下插入面板上方的頁次按鈕, 即可進行切換。
slide26
屬性面板
  • 屬性面板可設定文字、圖片及各網頁元素的屬性樣式 (如:文字大小、圖片尺寸、…等),當你在編輯區選擇了不同的元件時, 屬性面板就會自動變成對應的設定欄位, 夠聰明吧!
slide27
屬性面板
  • 另外, 屬性面板可分為上下 2 截, 下半截通常是比較進階的設定。按一下面板右下方的箭頭符號 (若看不到箭頭, 也可在面板空白處雙按滑鼠左鈕), 可顯示/隱藏下半截的面板。
slide29
垂直分割編輯區
  • 大部分的網頁的設計會呈現長條式, 因此若覺得水平分割讓編輯區變得過於狹隘時, 你可以按下功能表的版面鈕 , 執行『垂直分割』命令 (必須先切換成分割檢視模式才可作用), 讓編輯區分割成左、右兩半。
slide31
對調設計檢視與程式碼檢視的顯示位置
  • 分割後的設計畫面與程式碼也可交換顯示位置。例如剛剛垂直分割後的編輯區, 我們希望設計畫面在左邊, 程式碼在右邊, 則可按下功能表的版面鈕 , 執行『設計檢視在左方』命令 (若是水平分割, 則會顯示『設計檢視在上方』命令)。
dreamweaver3
調整 Dreamweaver 的面板配置
  • Dreamweaver 將製作網頁所需的各項控制功能區分成多個面板, 你可視需求自由調整面板的配置, 以讓出更大的編輯空間。
slide36
按下收合後的面板標籤鈕, 可開啟單一面板群組來使用, 再按一下即可收合。
slide40
移動與組合面板
  • 此外, 面版的群組也可以自行調配。若要將面板移動到其他面板群組中, 請於索引標籤上按住左鈕, 拉到到其他面板的索引標籤標題列, 待面板群組周圍出現亮藍色外框即可放開左鈕。
slide42
移動與組合面板
  • 你也可以將面板拉曳回原來的面板區, 只要拉曳到面板群組的上緣或下緣處, 就會出現一條亮藍色粗線讓你定位, 放開滑鼠即可固定位置。
slide44
將「插入」面板拉曳到文件視窗的上方
  • 接觸過 Dreamweaver CS3 (含以前版本) 的使用者, 應該知道插入面板原本是位於文件視窗上方的位置。不過在 Dreamweaver CS4 中, 插入面板合併到右側面板群組中了。
  • 若覺得新的位置操作不太順手, 你也可以將插入面板恢復到文件視窗的上方喔!
slide46
儲存網頁
  • 若是已經存檔過的檔案, 執行『檔案/儲存檔案』命令則可直接存檔;如果想要另外存成其他檔名, 或是要存到其他地方, 則必須執行『檔案/另存新檔』命令。
dreamweaver4
關閉網頁及結束 Dreamweaver
  • 要關閉已經開啟的網頁, 只要按下檔案標籤上的 ×鈕即可;如果要關閉的網頁有經過修改但尚未存檔, 則會出現如下交談窗, 詢問你是否要先存檔再關閉:
dreamweaver5
關閉網頁及結束 Dreamweaver
  • 如果想要一次關閉所有開啟的網頁, 但不要關閉 Dreamweaver, 請執行『檔案/全部關閉』命令, 或是在任意一個檔案標籤上按右鈕, 也可執行『全部關閉』命令。