Microsoft PowerPoint - Dreamweaver講義_3小時列印用.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - Dreamweaver講義_3小時列印用.pptx"

巴济元
5 years ago
Views:

1 講師 :Cruise Part1 基本觀念網站與網頁的概念網站開發的流程 1

2 網站與網頁的概念網頁與首頁的關係我們透過瀏覽器 WWW 上所看到的畫面, 皆稱為網頁 (Web page), 而通常進入一個網站時所看到的第一個網頁個網頁, 即稱為首頁 (Home page), 所以首頁只是網頁的其中一頁而已首頁 (Home page) 首頁可說是網站的主要門面, 其最重要的功能是提供整個網站的內容導覽, 可使觀看者快速連結至想看的內容網站什麼是網站呢? 其實網站就是網頁的集合, 網站中所有的網頁彼此相連結, 瀏覽者才可連結到各頁來觀看內容, 這樣的網頁架構就稱為網站網站與網頁的概念網站是放在哪裡呢? 當網站製作完成後, 須放到 web 伺服器上, 如此一來, 全世界的瀏覽者才可連結至你的網站上觀看一般來說, 通常是大型企業政府學術單位等, 負擔得起高額設備, 才需考慮自行架設, 而對一般中小企業工作室個人等, 則是向 ISP (Internet Service Provider 網路服務提供者 ) 申請虛擬主機或附屬網站, 也就是說, 在 ISP 所架設的 Web 伺服器上租空間, 來放置你的網站申請網站空間虛擬主機與附屬網站有什麼不同呢? 差別就在於虛擬主機有獨立的 IP 與經過註冊得來的網址 2

3 網站開發的流程一般除了個人網站外, 其它具有公司行號的網站開發, 是須群體的合作才能完成的, 以下為網站開發的流程可供你參考 : 規劃設定目標客戶業務需求確定網站功能資料收集與整理繪製網站架構腳本繪製網頁設計草稿設計施工工作分配設計元件設計版型程式置入執行測試功能確認風格確認程式測試優使性測試相容性測試上維更線護新申請網址網站主機設定上傳網站時效性資料更新定期新增檢討活動收集目標客戶業務成長分析 Part2 工作環境的認識與基本操作自訂使用者環境建立網站文字與網頁屬性設定 8 3

4 自訂使用者環境插入列選單與標籤的切換自訂最愛選單切換網頁編輯模式顯示設計檢視顯示程式碼檢視顯示程式碼和設計檢視自訂使用者環境尺規變更單位狀態列介紹放大鏡工具手型工具設定顯示比例設定編輯區大小屬性面板顯示與隱藏屬性面板開啟進階屬性面板 4

5 自訂使用者環境面板群組面板群組與面板有何不同呢? 以下面圖片為例, 這個面板群組的名稱叫作檔案, 放置了檔案資源與片段三個面板面板群組目前顯示檔案面板的內容開啟與折疊面板群組關閉與隱藏面板群組調整尺寸移動與組合面板建立網站定義網站設定網站資料夾網站定義的操作程序修改網站設定與刪除網站 12 5

6 建立網站網頁語系編碼目前網頁語系設定設定多國語言的網頁 Unicode(UTF-8) 執行修改 / 頁面屬性, 切換至標題 / 編碼方式頁次, 即可修改編碼方式執行編輯 / 偏好設定, 切換至新文件頁次, 即可更改預設的編碼方式 13 文字與網頁屬性設定輸入文字段落操作 Enter 換行設定 Shift + Enter 加入特殊字元加入註解文字連續輸入多個空格設定文字的樣式屬性 14 6

7 文字與網頁屬性設定加入與修改水平分隔線網頁屬性設定頁面字體網頁背景色彩背景圖片設定頁面邊界標題與網頁標題影像藍圖 15 Part3 影像聲音超連結 Flash 等多項媒體元件的整合應用加入圖片加入超連結加入 Flash 動畫按鈕和音樂 7

8 加入圖片圖片格式介紹 GIF 圖檔格式 JPG 圖檔格式 PNG 圖檔格式加入圖片加入圖片絕對路徑與相對路徑的問題修改圖片屬性與設定超連結加入圖片文繞圖的排列方式替代文字及低解析度圖片設定圖片外框與周圍間距編輯圖片 18 8

9 加入圖片加入影像預留位置製作影像地圖製作網頁背景圖片拼貼效果的創意背景圖設定不會捲動的背景點選加入隨滑鼠指標 (Rollover) 的圖片加入導覽列加入超連結加入超連結超連結文字與圖片讓瀏覽者下載檔案 - 選取欲連結的文字或圖片, 接著由下方屬性面板中的設定欲連結的檔案加入錨點讓連結網頁開啟在新視窗 - 屬性面板中的目標列示窗中選擇 _blank 9

10 加入超連結加入連結變換超連結文字狀態 - 執行修改 / 頁面屬性的連結頁次, 可設定超連結效果 21 加入 Flash 動畫按鈕和音樂 Flash 動畫設定 Flash 動畫屬性將 Flash 動畫背景為設透明 FlashPaper 文件利用此功能, 你便能輕易地將 word Excel 等文件放入網頁中用 FlashPaper 文件將各種文件轉成 Flash 檔案加入 FlashPaper 文件左 : 輸入 wmode 右 : 輸入 transparent 10

11 加入 Flash 動畫按鈕和音樂加入背景音樂設定背景音樂屬性隱藏播放面板加入 Flash 影像檢視器設定 Flash 按鈕加入 Flash 文字 Flash 視訊設定網站更新日期左 : 輸入 hidden 右 : 輸入 true 23 Part4 建立表格加入表格編輯表格版型的另一選擇 24 11

12 加入表格製作基本表格加入表格表格編輯模式表格的屬性操作 - 選取表格外框, 即出現下方屬性加入表格套用內建的表格色彩樣式 - 執行命令 / 表格格式匯入外部的表格資料可嵌入的檔案格式為.csv 或.txt 資料匯入後, 將自動形成表格 - 點選版面面板的表格式資料按鈕或執行檔案 / 匯入 / 表格式資料 27 12

13 Part 5 網頁排版與 CSS 的應用認識 CSS 的基本語法為 HTML 標籤設定 CSS 樣式 CSS 樣式表美化網頁 36 認識 CSS 的基本語法 CSS 是什麼? CSS 功用 CSS 全名為 Cascading Style Sheets, 中文為串接樣式表, 即代表各樣式分開定義, 再串接起來套用於網頁上的意思 CSS 可重新定義 HTML 原有的樣式, 例如加入區塊變化, 文字重疊以及隨意擺放位置等多項新樣式如此, 網頁就能跳脫傳統的 HTML 語法束縛, 而輕易設計出豐富多變化的網頁了 CSS 規格與瀏覽器的支援度 CSS 雖然可加強版面設計, 但不同版本的瀏覽器所支援的效果會有所差異, 所以建議設計網頁時, 最好在不同瀏覽器中作測試, 才能獲得較佳的效果 37 13

認識 CSS 的基本語法認識 CSS 的基本語法定義 HTML 標籤的方法 CSS

標籤定義紅色字體 <head> <style> </style> </head>

如此任何 HTML 標籤都可直接快速套用了 38 認識 CSS 的基本語法 CSS

樣式當樣式衝突時的優先順序 > > Dreamweaver 的 CSS 功能 CSS

14 認識 CSS 的基本語法認識 CSS 的基本語法定義 HTML 標籤的方法 CSS 可將原有的 HTML 標籤定義成自己想要的效果, 如範例的語法格式, 將 <H1> 標籤定義紅色字體 <head> <style> </style> </head> H1{color:red} 自訂專屬樣式將每組樣式寫好設定, 並給予一個代號名稱, 如此任何 HTML 標籤都可直接快速套用了 38 認識 CSS 的基本語法 CSS 在網頁中的使用方式使用外部連結樣式表以內嵌方式, 於網頁開頭定義局部套用 CSS 樣式當樣式衝突時的優先順序 > > Dreamweaver 的 CSS 功能 CSS 在文字屬性上的應用 CSS 在圖層上的應用 CSS 在頁面屬性上的應用由 CSS 樣式面板建立 39 14

15 為 HTML 標籤設定 CSS 樣式為 HTML 標籤設定 CSS 樣式修改 HTML 標籤的 CSS 樣式 CSS 規則定義交談窗各頁次說明類型頁次背景頁次區塊頁次方框頁次邊框頁次清單頁次定位頁次擴充功能頁次 40 Part 6 圖層的操作技巧以及時間軸互動製作建立圖層圖層與表格互相轉換製作圖層位移動畫製作影像變換動畫 15

或版面面板的繪製圖層鈕調整圖層大小與移動使用圖層面板管理圖層為圖層命名調整圖層順序圖層的顯示與隱藏建立圖層巢狀圖層圖層中還有圖層, 即稱為巢狀圖層,

16 建立圖層圖層是什麼? 圖層可放入任何網頁物件, 如文字圖片表格等, 並且可任意移動, 讓網頁編排更加自由建立圖層加入圖層與內容 - 執行插入 / 版面物件 / 圖層或版面面板的繪製圖層鈕調整圖層大小與移動使用圖層面板管理圖層為圖層命名調整圖層順序圖層的顯示與隱藏建立圖層巢狀圖層圖層中還有圖層, 即稱為巢狀圖層, 其目的是為了將多個圖層變成群組, 如此只要一移動父圖層, 則其子圖層也將一起移動設定圖層屬性圖層的顯示屬性 - default: 依瀏覽器所設定的顯示方式來顯示圖層 - inherit: 以父圖層為顯示依據, 若無父圖層, 則預設會顯示 - visible: 此圖層內容必定顯示 - hidden : 隱藏圖層內容 43 16

17 建立圖層圖層的溢位屬性 - visible: 不論如何縮放圖層大小, 都會自動將圖層放大至可顯示完整圖層內容的狀態 - hidden: 僅會顯示圖層內的部份, 超出圖層框的內容將被隱藏 - scroll: 不論圖層內容是否可完整顯示, 都會出現捲軸 - auto: 依據圖層大小與其內容的關係, 自動調整是否出現捲軸 44 製作圖層位移動畫製作圖層位移動畫直線路徑曲線路徑紀錄路徑 1. 將圖層拖移至時間軸上 3. 在第 10 格影格上執行右鍵 / 增加關鍵影格以移動圖層來產生曲線路徑 2. 於第 15 格影格上移動圖層位置 47 17

18 製作影像變換動畫影像動畫就是可切換顯示不同影像的動畫效果, 製作此效果前, 應先自行調整圖片為同樣大小, 否則將發生變形的狀況製作影像動畫小技巧 : 1. 變換影像的時間是依據 Fps 值與影格長度, 此範例是每五格影格更換圖片 2. 勾選自動播放及重複選項, 可讓影像動畫不斷播放 3. 時間軸上的行為符號 - 即表示重複的命令, 可將此行為符號往後移動幾格, 如此最後一張圖片才不會快速閃過 48 Part 7 製作互動式網頁行為面板的應用精選動態網頁範例 56 18

19 行為面板的應用開啟不含工具列的瀏覽視窗 - 在行為面板上按下 + 鈕, 選擇開啟瀏覽器視窗跳出訊息交談窗 - 增加行為, 選擇彈出訊息即可設定文字於狀態列上顯示文字 - 增加行為, 選擇設定文字 / 設定狀態列文字精選動態網頁範例 N 秒後自動切換頁面前往 URL: 通常是開場動畫播放完後, 自動跳至主頁重新整理這個文件 : 若是即時性的新聞股價指數等內容, 可選取此項, 以顯示最新的網頁內容變換圖片的進階用法 - 新增行為, 選擇調換影像 58 19

20 精選動態網頁範例一層層的彈出式功能表 - 增加行為, 選擇顯示彈出式選單內容頁次外觀頁次進階頁次位置頁次跳頁式下拉選單插入跳頁選單修改跳頁選單內容圖層的顯示與隱藏技巧 - 增加行為, 選擇顯示隱藏圖層 59 Part 8 網站上傳更新與維護的操作方法上傳網站到 web 伺服器檢查超連結狀況檢查網頁語法有無錯誤 60 20

21 上傳網站到 web 伺服器申請免費個人網站空間上傳你的網站申請轉址服務轉址服務可以讓你的網址變的又短又好記, 而目前提供轉址服務的網站大多為免費, 有些較具規模的站台則採收費制, 你可視需求而定推廣你的網站到各大搜尋引擎網站上登入在網頁中加入關鍵字 21

輕鬆學 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