Dreamweaver 專業網頁設計
講師:Cruise
http://www.good4u.com.tw
2008/10/27 Dreamweaver 專業網頁設計 2008/10/27
Part1 基本觀念 Part1 基本觀念
• 網站與網頁的概念
• 網站開發的流程
網站與網頁的概念
• 網頁與首頁的關係
我們透過瀏覽器WWW上所看到的畫面,皆稱為網頁(Web page),
而通常進入一個網站時所看到的第一個網頁,即稱為「首頁」(Home 而通常進入 個網站時所看到的第 個網頁 即稱為 首頁」(Home page),所以首頁只是網頁的其中一頁而已。
• 首頁(Home page)
首頁可說是網站的主要門面,其最重要的功能是提供整個網站的內 容導覽,可使觀看者快速連結至想看的內容。
• 網站
2008/10/27 Dreamweaver 專業網頁設計 2008/10/27
網站
什麼是「網站」呢? 其實網站就是網頁的集合,網站中所有的網頁 彼此相連結,瀏覽者才可連結到各頁來觀看內容,這樣的網頁架構就稱為
「網站」。
網站與網頁的概念
• 網站是放在哪裡呢?
當網站製作完成後,須放到web伺服器上,如此一來,全世界的瀏覽 者才可連結至你的網站上觀看。一般來說,通常是大型企業、政府學術單 者才可連結至你的網站上觀看。一般來說,通常是大型企業、政府學術單 位等,負擔得起高額設備,才需考慮自行架設,而對一般中小企業、工作 室、個人等,則是向 ISP (Internet Service Provider網路服務提供者)申請
「虛擬主機」或「附屬網站」,也就是說,在ISP所架設的Web伺服器上 租空間,來放置你的網站。
• 申請網站空間
「虛擬主機」與「附屬網站」有什麼不同呢?差別就在於「虛擬主機」
有獨立的IP與經過註冊得來的網址。
網站開發的流程
一般除了個人網站外,其它具有公司行號的網站開發,是須群體的 合作才能完成的,以下為網站開發的流程可供你參考:
設計施工 執行測試
工作分配 設計元件 設計版型 程式置入
規劃
設定目標客戶業務需求 確定網站功能 資料收集與整理 繪製網站架構腳本 繪製網頁設計草稿
執行測試
功能確認 風格確認 程式測試 優使性測試 相容性測試
2008/10/27 Dreamweaver 專業網頁設計 2008/10/27
上 線 維 護 更 新
網站主機設定申請網址 上傳網站
時效性資料更新 定期新增
檢討活動 收集目標客戶 業務成長分析
Part2 工作環境的認識與基本操作 Part2 工作環境的認識與基本操作
• 自訂使用者環境
• 建立網站
• 文字與網頁屬性設定
自訂使用者環境
• 插入列
選單與標籤的切換
自訂最愛選單訂最愛 單
換網 編輯模式
2008/10/27 Dreamweaver 專業網頁設計 2008/10/27
• 切換網頁編輯模式
顯示設計檢視
顯示程式碼檢視
顯示程式碼和設計檢視
自訂使用者環境
• 尺規
變更單位 狀態 紹
• 狀態列介紹
放大鏡工具
手型工具
設定顯示比例
設定編輯區大小
• 屬性面板
顯示與隱藏屬性面板
開啟進階屬性面板
自訂使用者環境
• 面板群組
「面板群組」與 「面板」有何不同呢? 以下面圖片為例,這個面 板群組的名稱叫作檔案,放置了檔案、資源與片段三個面板。
板群組的名稱叫作檔案 放置了檔案 資源與片段三個面板
開啟與折疊面板群組 目前顯示檔案 面板的內容
面板群組
2008/10/27 Dreamweaver 專業網頁設計 2008/10/27
關閉與隱藏面板群組
調整尺寸
移動與組合面板
建立網站
• 定義網站
設定網站資料夾
網站定義的操作程序
網站定義的操作程序
修改網站設定與刪除網站
建立網站
• 網頁語系編碼
目前網頁語系設定
設定多國語言的網頁 Unicode(UTF-8)網頁 ( )
執行修改/頁面屬性,
切換至標題/編碼方式 頁次,即可修改編碼 方式。
2008/10/27 Dreamweaver 專業網頁設計
2008/10/27 13
執行編輯/偏好設定,
切換至新文件頁次,
即可更改預設的編碼 方式。
文字與網頁屬性設定
• 輸入文字
段落操作 Enter
換行設定 Shift + Enter
加入特殊字元
加入註解文字
連續輸入多個空格
設定文字的樣式屬性
文字與網頁屬性設定
加入與修改水平分隔線
• 網頁屬性設定
頁面字體
網頁背景色彩
背景圖片
2008/10/27 Dreamweaver 專業網頁設計
2008/10/27 15
背景圖片
設定頁面邊界
標題與網頁標題
影像藍圖
Part3 影像、聲音、超連結、Flash等 多項媒體元件的整合應用
多項媒體元件的整合應用
• 加入圖片
• 加入超連結
• 加入Flash動畫、按鈕和音樂
加入圖片
• 圖片格式介紹
GIF圖檔格式
JPG圖檔格式格式
PNG圖檔格式
• 加入圖片
加入圖片
絕對路徑與相對路徑的問題 修改 性 定超連結
2008/10/27 Dreamweaver 專業網頁設計 2008/10/27
修改圖片屬性與設定超連結
加入圖片
文繞圖的排列方式
替代文字及低解析度圖片
設定圖片外框與周圍間距
編輯圖片
• 加入影像預留位置
• 製作影像地圖
加入圖片
• 製作網頁背景圖片
拼貼效果的創意背景圖
設定不會捲動的背景
2008/10/27 Dreamweaver 專業網頁設計
• 加入隨滑鼠指標(Rollover)的圖片
• 加入導覽列
2008/10/27
點選
加入超連結
• 加入超連結
超連結文字與圖片
讓瀏覽者下載檔案
- 選取欲連結的文字或圖片,接著由下方屬性面板中
的 設定欲連結的檔案。
加入錨點
• 讓連結網頁開啟在新視窗
屬性面板中的目標列示窗中選擇 bl k - 屬性面板中的目標列示窗中選擇_blank
加入超連結
• 加入E-mail連結
• 變換超連結文字狀態
- 執行修改/頁面屬性的連結頁次,可設定超連結效果。
2008/10/27 Dreamweaver 專業網頁設計
2008/10/27 21
加入Flash動畫、按鈕和音樂
• Flash動畫
設定Flash動畫屬性
將Flash動畫背景為設透明
• FlashPaper文件
利用此功能,你便能輕易地將word
、Excel 等文件放入網頁中。
、Excel…等文件放入網頁中。
用FlashPaper文件將各種文件 轉成Flash檔案
加入FlashPaper文件 左:輸入wmode 右:輸入transparent
• 加入背景音樂
設定背景音樂屬性
隱藏播放面板
加入Flash動畫、按鈕和音樂
隱藏播放面板
• 加入Flash影像檢視器
• 設定Flash按鈕
• 加入Flash文字
• Flash視訊
左:輸入hidden 右:輸入true
2008/10/27 Dreamweaver 專業網頁設計
• 設定網站更新日期
2008/10/27 23
Part4 建立表格
• 加入表格
• 編輯表格
• 版型的另一選擇
加入表格
• 製作基本表格
加入表格
表格編輯模式
表格的屬性操作
- 選取表格外框,即出現下方屬性。
2008/10/27 Dreamweaver 專業網頁設計 2008/10/27
加入表格
• 套用內建的表格色彩樣 式
- 執行命令/表格格式執行命令/表格格式
• 匯入外部的表格資料 可嵌入的檔案格式為 .csv或.txt。資料匯入後,將 自動形成表格。
點選版面面板的表格 - 點選版面面板的表格 式資料按鈕 或執行 檔案/匯入/表格式資料
Part 5 網頁排版與CSS的應用
• 認識CSS的基本語法
• 為HTML標籤設定CSS樣式
• CSS樣式表美化網頁
2008/10/27 Dreamweaver 專業網頁設計
2008/10/27 36
認識CSS的基本語法
• CSS是什麼?
CSS功用
CSS全名為Cascading Style Sheets,中文為串接樣式表,
即代表各樣式分開定義,再串接起來套用於網頁上的意思。
CSS可重新定義HTML原有的樣式,例如加入區塊變化,文字 重疊、以及隨意擺放位置…等多項新樣式。如此,網頁就能跳脫 傳統的HTML語法束縛,而輕易設計出豐富多變化的網頁了。
CSS規格與瀏覽器的支援度
CSS雖然可加強版面設計,但不同版本的瀏覽器所支援的效
認識CSS的基本語法
• 認識CSS的基本語法
定義HTML標籤的方法
CSS可將原有的HTML標籤定義成自 式
<head>
<style>
H1{color:red}
</style>
己想要的效果,如範例的語法格式,
將<H1>標籤定義紅色字體。
自訂專屬樣式 將每組樣式寫好設定
,並給予一個代號名 稱,如此任何HTML
</style>
</head>
2008/10/27 Dreamweaver 專業網頁設計
2008/10/27 38
標籤都可直接快速套 用了。
認識CSS的基本語法
CSS在網頁中的使用方式 c 使用外部連結樣式表
d 以內嵌方式,於網頁開頭定義 e 局部套用CSS樣式
當樣式衝突時的優先順序
> >
• Dreamweaver的CSS功能
CSS在文字屬性上的應用
e d c
CSS在文字屬性上的應用
CSS在圖層上的應用
CSS在頁面屬性上的應用
由CSS樣式面板建立
為HTML標籤設定CSS樣式
• 為HTML標籤設定CSS樣式
• 修改HTML標籤的CSS樣式
• 「CSS規則定義」交談窗各頁次說明
「類型」頁次
「背景」頁次
「區塊」頁次
「方框」頁次
「邊框」頁次
2008/10/27 Dreamweaver 專業網頁設計
2008/10/27 40
「清單」頁次
「定位」頁次
「擴充功能」頁次
Part 6 圖層的操作技巧以及時間軸互 動製作
動製作
• 建立圖層
• 圖層與表格互相轉換
• 製作圖層位移動畫
• 製作影像變換動畫
建立圖層
• 圖層是什麼?
圖層可放入任何網頁物件,如文字、圖片、表格…等,並且可任 意移動,讓網頁編排更加自由。
意移動 讓網頁編排更加自由
• 建立圖層
加入圖層與內容
- 執行「插入/版面物件/圖層」或版面面板的繪製圖層鈕 。
調整圖層大小與移動
• 使用圖層面板管理圖層
2008/10/27 Dreamweaver 專業網頁設計 2008/10/27
使用圖層面板管理圖層
為圖層命名
調整圖層順序
圖層的顯示與隱藏
建立圖層
• 巢狀圖層
圖層中還有圖層,即稱為「巢狀圖層」,其目的是為了將多個圖層變成 群組,如此只要一移動父圖層,則其子圖層也將一起移動。
• 設定圖層屬性
圖層的顯示屬性
default:依瀏覽器所設定的顯示方式來顯示圖層 - default:依瀏覽器所設定的顯示方式來顯示圖層。
- inherit:以父圖層為顯示依據,若無父圖層,則預設會顯示。
- visible:此圖層內容必定顯示。
- hidden :隱藏圖層內容。
建立圖層
圖層的溢位屬性
- visible:不論如何縮放圖層大小,都會自動將圖層放大至可顯示完整圖 層內容的狀態。
層內容的狀態
- hidden:僅會顯示圖層內的部份,超出圖層框的內容將被隱藏。
- scroll:不論圖層內容是否可完整顯示,都會出現捲軸。
- auto:依據圖層大小與其內容的關係,自動調整是否出現捲軸。
2008/10/27 Dreamweaver 專業網頁設計
2008/10/27 44
製作圖層位移動畫
• 製作圖層位移動畫
直線路徑
曲線路徑
¾ 1.將圖層拖移至時間軸上
¾ 3.在第10格影格上執行右鍵/增加關鍵影格 以移動圖層來產生曲線路徑
曲線路徑
紀錄路徑
¾ 2.於第15格影格上移動圖層位置
製作影像變換動畫
影像動畫就是可切換顯示不同影像的動畫效果,製作此效果前,應 先自行調整圖片為同樣大小,否則將發生變形的狀況。
¾ 製作影像動畫小技巧:
1 變換影像的時間是依據Fps值與影格長度,此範例是每五格影格更換圖片
2008/10/27 Dreamweaver 專業網頁設計
2008/10/27 48
1.變換影像的時間是依據Fps值與影格長度,此範例是每五格影格更換圖片。
2.勾選自動播放及重複選項,可讓影像動畫不斷播放。
3.時間軸上的行為符號「-」即表示重複的命令,可將此行為符號往後移動幾 格,如此最後一張圖片才不會快速閃過。
Part 7 製作互動式網頁
• 行為面板的應用
• 精選動態網頁範例
行為面板的應用
• 開啟不含工具列的瀏覽視窗 - 在「行為」面板上按下
「+」鈕,選擇「開啟瀏 覽器視窗」。
• 跳出訊息交談窗
- 增加行為,選擇「彈出訊息」即可設定文字。
2008/10/27 Dreamweaver 專業網頁設計 2008/10/27
• 於狀態列上顯示文字
- 增加行為,選擇「設定文字/設定狀態列文字」
精選動態網頁範例
• N 秒後自動切換頁面
前往URL:通常是開場動畫播放完後,自動跳至主頁。
重新整理這個文件:若是即時性的新聞、股價指數等內容,可選取此項,
以顯示最新的網頁內容 以顯示最新的網頁內容。
• 變換圖片的進階用法變換圖片的進階用法
精選動態網頁範例
• 一層層的彈出式功能表
- 增加行為,選擇「顯示彈出式選單」
內容頁次
外觀頁次
進階頁次
位置頁次
• 跳頁式下拉選單
插入跳頁選單
2008/10/27 Dreamweaver 專業網頁設計
2008/10/27 59
修改跳頁選單內容
• 圖層的顯示與隱藏技巧
- 增加行為,選擇「顯示隱藏圖層」。
Part 8 網站上傳、更新與維護的操作方法
• 上傳網站到web伺服器
• 檢查超連結狀況
• 檢查網頁語法有無錯誤
上傳網站到web伺服器
• 申請免費個人網站空間
• 上傳你的網站
• 申請轉址服務
轉址服務可以讓你的網址變的又短又好記,而目前提供轉址服務的網站 大多 為免費,有些較具規模的站台則採收費制,你可視需求而定。
• 推廣你的網站
到各大搜尋引擎網站上登入
2008/10/27 Dreamweaver 專業網頁設計 2008/10/27
在網頁中加入關鍵字