Dreamweaver 專業網頁設計

(1)

Dreamweaver 專業網頁設計

講師：Cruise

http://www.good4u.com.tw

2008/10/27 Dreamweaver 專業網頁設計 2008/10/27

Part1 基本觀念 Part1 基本觀念

• 網站與網頁的概念

• 網站開發的流程

(2)

網站與網頁的概念

• 網頁與首頁的關係

我們透過瀏覽器WWW上所看到的畫面，皆稱為網頁(Web page)，

而通常進入一個網站時所看到的第一個網頁，即稱為「首頁」(Home 而通常進入個網站時所看到的第個網頁即稱為首頁」(Home page)，所以首頁只是網頁的其中一頁而已。

• 首頁(Home page)

首頁可說是網站的主要門面，其最重要的功能是提供整個網站的內容導覽，可使觀看者快速連結至想看的內容。

• 網站

網站

什麼是「網站」呢? 其實網站就是網頁的集合，網站中所有的網頁彼此相連結，瀏覽者才可連結到各頁來觀看內容，這樣的網頁架構就稱為

「網站」。

網站與網頁的概念

• 網站是放在哪裡呢?

當網站製作完成後，須放到web伺服器上，如此一來，全世界的瀏覽者才可連結至你的網站上觀看。一般來說，通常是大型企業、政府學術單者才可連結至你的網站上觀看。一般來說，通常是大型企業、政府學術單位等，負擔得起高額設備，才需考慮自行架設，而對一般中小企業、工作室、個人等，則是向 ISP (Internet Service Provider網路服務提供者)申請

「虛擬主機」或「附屬網站」，也就是說，在ISP所架設的Web伺服器上租空間，來放置你的網站。

• 申請網站空間

「虛擬主機」與「附屬網站」有什麼不同呢?差別就在於「虛擬主機」

有獨立的IP與經過註冊得來的網址。

(3)

網站開發的流程

一般除了個人網站外，其它具有公司行號的網站開發，是須群體的合作才能完成的，以下為網站開發的流程可供你參考：

設計施工執行測試

工作分配設計元件設計版型程式置入

規劃

設定目標客戶業務需求確定網站功能資料收集與整理繪製網站架構腳本繪製網頁設計草稿

執行測試

功能確認風格確認程式測試優使性測試相容性測試

上線維護更新

網站主機設定申請網址上傳網站

時效性資料更新定期新增

檢討活動收集目標客戶業務成長分析

Part2 工作環境的認識與基本操作 Part2 工作環境的認識與基本操作

• 自訂使用者環境

• 建立網站

• 文字與網頁屬性設定

(4)

自訂使用者環境

• 插入列

選單與標籤的切換

自訂最愛選單訂最愛單

換網編輯模式

• 切換網頁編輯模式

顯示設計檢視

顯示程式碼檢視

顯示程式碼和設計檢視

自訂使用者環境

• 尺規

變更單位狀態紹

• 狀態列介紹

放大鏡工具

手型工具

設定顯示比例

設定編輯區大小

• 屬性面板

顯示與隱藏屬性面板

開啟進階屬性面板

(5)

自訂使用者環境

• 面板群組

「面板群組」與「面板」有何不同呢? 以下面圖片為例，這個面板群組的名稱叫作檔案，放置了檔案、資源與片段三個面板。

板群組的名稱叫作檔案放置了檔案資源與片段三個面板

開啟與折疊面板群組目前顯示檔案面板的內容

面板群組

關閉與隱藏面板群組

調整尺寸

移動與組合面板

建立網站

• 定義網站

設定網站資料夾

網站定義的操作程序

修改網站設定與刪除網站

(6)

建立網站

• 網頁語系編碼

目前網頁語系設定

設定多國語言的網頁 Unicode(UTF-8)網頁 ( )

執行修改/頁面屬性，

切換至標題/編碼方式頁次，即可修改編碼方式。

2008/10/27 Dreamweaver 專業網頁設計

2008/10/27 13

執行編輯/偏好設定，

切換至新文件頁次，

即可更改預設的編碼方式。

文字與網頁屬性設定

• 輸入文字

段落操作 Enter

換行設定 Shift + Enter

加入特殊字元

加入註解文字

連續輸入多個空格

設定文字的樣式屬性

(7)

文字與網頁屬性設定

加入與修改水平分隔線

• 網頁屬性設定

頁面字體

網頁背景色彩

背景圖片

2008/10/27 15

背景圖片

設定頁面邊界

標題與網頁標題

影像藍圖

Part3 影像、聲音、超連結、Flash等多項媒體元件的整合應用

多項媒體元件的整合應用

• 加入圖片

• 加入超連結

• 加入Flash動畫、按鈕和音樂

(8)

加入圖片

• 圖片格式介紹

GIF圖檔格式

JPG圖檔格式格式

PNG圖檔格式

• 加入圖片

加入圖片

絕對路徑與相對路徑的問題修改性定超連結

修改圖片屬性與設定超連結

加入圖片

文繞圖的排列方式

替代文字及低解析度圖片

設定圖片外框與周圍間距

編輯圖片

(9)

• 加入影像預留位置

• 製作影像地圖

加入圖片

• 製作網頁背景圖片

拼貼效果的創意背景圖

設定不會捲動的背景

• 加入隨滑鼠指標(Rollover)的圖片

• 加入導覽列

2008/10/27

點選

加入超連結

• 加入超連結

超連結文字與圖片

讓瀏覽者下載檔案

- 選取欲連結的文字或圖片，接著由下方屬性面板中

的設定欲連結的檔案。

加入錨點

• 讓連結網頁開啟在新視窗

屬性面板中的目標列示窗中選擇 bl k - 屬性面板中的目標列示窗中選擇_blank

(10)

加入超連結

• 加入E-mail連結

• 變換超連結文字狀態

- 執行修改/頁面屬性的連結頁次，可設定超連結效果。

2008/10/27 21

加入Flash動畫、按鈕和音樂

• Flash動畫

設定Flash動畫屬性

將Flash動畫背景為設透明

• FlashPaper文件

利用此功能，你便能輕易地將word

、Excel 等文件放入網頁中。

、Excel…等文件放入網頁中。

用FlashPaper文件將各種文件轉成Flash檔案

加入FlashPaper文件左：輸入wmode 右：輸入transparent

(11)

• 加入背景音樂

設定背景音樂屬性

隱藏播放面板

加入Flash動畫、按鈕和音樂

隱藏播放面板

• 加入Flash影像檢視器

• 設定Flash按鈕

• 加入Flash文字

• Flash視訊

左：輸入hidden 右：輸入true

• 設定網站更新日期

2008/10/27 23

Part4 建立表格

• 加入表格

• 編輯表格

• 版型的另一選擇

(12)

加入表格

• 製作基本表格

加入表格

表格編輯模式

表格的屬性操作

- 選取表格外框，即出現下方屬性。

加入表格

• 套用內建的表格色彩樣式

- 執行命令/表格格式執行命令/表格格式

• 匯入外部的表格資料可嵌入的檔案格式為 .csv或.txt。資料匯入後，將自動形成表格。

點選版面面板的表格 - 點選版面面板的表格式資料按鈕或執行檔案/匯入/表格式資料

(13)

Part 5 網頁排版與CSS的應用

• 認識CSS的基本語法

• 為HTML標籤設定CSS樣式

• CSS樣式表美化網頁

2008/10/27 36

認識CSS的基本語法

• CSS是什麼?

CSS功用

CSS全名為Cascading Style Sheets，中文為串接樣式表，

即代表各樣式分開定義，再串接起來套用於網頁上的意思。

CSS可重新定義HTML原有的樣式，例如加入區塊變化，文字重疊、以及隨意擺放位置…等多項新樣式。如此，網頁就能跳脫傳統的HTML語法束縛，而輕易設計出豐富多變化的網頁了。

CSS規格與瀏覽器的支援度

CSS雖然可加強版面設計，但不同版本的瀏覽器所支援的效

(14)

認識CSS的基本語法

• 認識CSS的基本語法

定義HTML標籤的方法

CSS可將原有的HTML標籤定義成自式

<head>

<style>

H1{color:red}

</style>

己想要的效果，如範例的語法格式，

將<H1>標籤定義紅色字體。

自訂專屬樣式將每組樣式寫好設定

，並給予一個代號名稱，如此任何HTML

</style>

</head>

2008/10/27 38

標籤都可直接快速套用了。

認識CSS的基本語法

CSS在網頁中的使用方式 c 使用外部連結樣式表

d 以內嵌方式，於網頁開頭定義 e 局部套用CSS樣式

當樣式衝突時的優先順序

> >

• Dreamweaver的CSS功能

CSS在文字屬性上的應用

e d c

CSS在文字屬性上的應用

CSS在圖層上的應用

CSS在頁面屬性上的應用

由CSS樣式面板建立

(15)

為HTML標籤設定CSS樣式

• 為HTML標籤設定CSS樣式

• 修改HTML標籤的CSS樣式

• 「CSS規則定義」交談窗各頁次說明

「類型」頁次

「背景」頁次

「區塊」頁次

「方框」頁次

「邊框」頁次

2008/10/27 40

「清單」頁次

「定位」頁次

「擴充功能」頁次

Part 6 圖層的操作技巧以及時間軸互動製作

動製作

• 建立圖層

• 圖層與表格互相轉換

• 製作圖層位移動畫

• 製作影像變換動畫

(16)

建立圖層

• 圖層是什麼?

圖層可放入任何網頁物件，如文字、圖片、表格…等，並且可任意移動，讓網頁編排更加自由。

意移動讓網頁編排更加自由

• 建立圖層

加入圖層與內容

- 執行「插入/版面物件/圖層」或版面面板的繪製圖層鈕。

調整圖層大小與移動

• 使用圖層面板管理圖層

使用圖層面板管理圖層

為圖層命名

調整圖層順序

圖層的顯示與隱藏

建立圖層

• 巢狀圖層

圖層中還有圖層，即稱為「巢狀圖層」，其目的是為了將多個圖層變成群組，如此只要一移動父圖層，則其子圖層也將一起移動。

• 設定圖層屬性

圖層的顯示屬性

default：依瀏覽器所設定的顯示方式來顯示圖層 - default：依瀏覽器所設定的顯示方式來顯示圖層。

- inherit：以父圖層為顯示依據，若無父圖層，則預設會顯示。

- visible：此圖層內容必定顯示。

- hidden ：隱藏圖層內容。

(17)

建立圖層

圖層的溢位屬性

- visible：不論如何縮放圖層大小，都會自動將圖層放大至可顯示完整圖層內容的狀態。

層內容的狀態

- hidden：僅會顯示圖層內的部份，超出圖層框的內容將被隱藏。

- scroll：不論圖層內容是否可完整顯示，都會出現捲軸。

- auto：依據圖層大小與其內容的關係，自動調整是否出現捲軸。

2008/10/27 44

製作圖層位移動畫

• 製作圖層位移動畫

直線路徑

曲線路徑

¾ 1.將圖層拖移至時間軸上

¾ 3.在第10格影格上執行右鍵/增加關鍵影格以移動圖層來產生曲線路徑

曲線路徑

紀錄路徑

¾ 2.於第15格影格上移動圖層位置

(18)

製作影像變換動畫

影像動畫就是可切換顯示不同影像的動畫效果，製作此效果前，應先自行調整圖片為同樣大小，否則將發生變形的狀況。

¾ 製作影像動畫小技巧：

1 變換影像的時間是依據Fps值與影格長度，此範例是每五格影格更換圖片

2008/10/27 48

1.變換影像的時間是依據Fps值與影格長度，此範例是每五格影格更換圖片。

2.勾選自動播放及重複選項，可讓影像動畫不斷播放。

3.時間軸上的行為符號「-」即表示重複的命令，可將此行為符號往後移動幾格，如此最後一張圖片才不會快速閃過。

Part 7 製作互動式網頁

• 行為面板的應用

• 精選動態網頁範例

(19)

行為面板的應用

• 開啟不含工具列的瀏覽視窗 - 在「行為」面板上按下

「+」鈕，選擇「開啟瀏覽器視窗」。

• 跳出訊息交談窗

- 增加行為，選擇「彈出訊息」即可設定文字。

• 於狀態列上顯示文字

- 增加行為，選擇「設定文字/設定狀態列文字」

精選動態網頁範例

• N 秒後自動切換頁面

前往URL：通常是開場動畫播放完後，自動跳至主頁。

重新整理這個文件：若是即時性的新聞、股價指數等內容，可選取此項，

以顯示最新的網頁內容以顯示最新的網頁內容。

• 變換圖片的進階用法變換圖片的進階用法

(20)

精選動態網頁範例

• 一層層的彈出式功能表

- 增加行為，選擇「顯示彈出式選單」

內容頁次

外觀頁次

進階頁次

位置頁次

• 跳頁式下拉選單

插入跳頁選單

2008/10/27 59

修改跳頁選單內容

• 圖層的顯示與隱藏技巧

- 增加行為，選擇「顯示隱藏圖層」。

Part 8 網站上傳、更新與維護的操作方法

• 上傳網站到web伺服器

• 檢查超連結狀況

• 檢查網頁語法有無錯誤

(21)

上傳網站到web伺服器

• 申請免費個人網站空間

• 上傳你的網站

• 申請轉址服務

轉址服務可以讓你的網址變的又短又好記，而目前提供轉址服務的網站大多為免費，有些較具規模的站台則採收費制，你可視需求而定。

• 推廣你的網站

到各大搜尋引擎網站上登入

在網頁中加入關鍵字

Dreamweaver 專業網頁設計