• 沒有找到結果。

Dreamweaver 專業網頁設計

N/A
N/A
Protected

Academic year: 2022

Share "Dreamweaver 專業網頁設計"

Copied!
21
0
0

加載中.... (立即查看全文)

全文

(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)

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

• 網站

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

網站

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

「網站」。

網站與網頁的概念

• 網站是放在哪裡呢?

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

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

• 申請網站空間

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

有獨立的IP與經過註冊得來的網址。

(3)

網站開發的流程

一般除了個人網站外,其它具有公司行號的網站開發,是須群體的 合作才能完成的,以下為網站開發的流程可供你參考:

設計施工 執行測試

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

規劃

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

執行測試

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

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

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

時效性資料更新 定期新增

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

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

• 自訂使用者環境

• 建立網站

• 文字與網頁屬性設定

(4)

自訂使用者環境

• 插入列

„ 選單與標籤的切換

„ 自訂最愛選單訂最愛 單

換網 編輯模式

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

• 切換網頁編輯模式

„ 顯示設計檢視

„ 顯示程式碼檢視

„ 顯示程式碼和設計檢視

自訂使用者環境

• 尺規

„ 變更單位 狀態 紹

• 狀態列介紹

„ 放大鏡工具

„ 手型工具

„ 設定顯示比例

„ 設定編輯區大小

• 屬性面板

„ 顯示與隱藏屬性面板

„ 開啟進階屬性面板

(5)

自訂使用者環境

• 面板群組

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

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

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

面板群組

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

„ 關閉與隱藏面板群組

„ 調整尺寸

„ 移動與組合面板

建立網站

• 定義網站

„ 設定網站資料夾

„ 網站定義的操作程序

„ 網站定義的操作程序

„ 修改網站設定與刪除網站

(6)

建立網站

• 網頁語系編碼

„ 目前網頁語系設定

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

執行修改/頁面屬性,

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

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

2008/10/27 13

執行編輯/偏好設定,

切換至新文件頁次,

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

文字與網頁屬性設定

• 輸入文字

„ 段落操作 Enter

„ 換行設定 Shift + Enter

„ 加入特殊字元

„ 加入註解文字

„ 連續輸入多個空格

„ 設定文字的樣式屬性

(7)

文字與網頁屬性設定

„ 加入與修改水平分隔線

• 網頁屬性設定

„ 頁面字體

„ 網頁背景色彩

„ 背景圖片

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

2008/10/27 15

„ 背景圖片

„ 設定頁面邊界

„ 標題與網頁標題

„ 影像藍圖

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

多項媒體元件的整合應用

• 加入圖片

• 加入超連結

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

(8)

加入圖片

• 圖片格式介紹

„ GIF圖檔格式

„ JPG圖檔格式格式

„ PNG圖檔格式

• 加入圖片

„ 加入圖片

„ 絕對路徑與相對路徑的問題 修改 性 定超連結

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

„ 修改圖片屬性與設定超連結

加入圖片

„ 文繞圖的排列方式

„ 替代文字及低解析度圖片

„ 設定圖片外框與周圍間距

„ 編輯圖片

(9)

• 加入影像預留位置

• 製作影像地圖

加入圖片

• 製作網頁背景圖片

„ 拼貼效果的創意背景圖

„ 設定不會捲動的背景

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

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

• 加入導覽列

2008/10/27

點選

加入超連結

• 加入超連結

„ 超連結文字與圖片

„ 讓瀏覽者下載檔案

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

的 設定欲連結的檔案。

„ 加入錨點

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

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

(10)

加入超連結

• 加入E-mail連結

• 變換超連結文字狀態

- 執行修改/頁面屬性的連結頁次,可設定超連結效果。

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

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 Dreamweaver 專業網頁設計

• 設定網站更新日期

2008/10/27 23

Part4 建立表格

• 加入表格

• 編輯表格

• 版型的另一選擇

(12)

加入表格

• 製作基本表格

„ 加入表格

„ 表格編輯模式

„ 表格的屬性操作

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

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

加入表格

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

- 執行命令/表格格式執行命令/表格格式

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

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

(13)

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雖然可加強版面設計,但不同版本的瀏覽器所支援的效

(14)

認識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樣式面板建立

(15)

為HTML標籤設定CSS樣式

• 為HTML標籤設定CSS樣式

• 修改HTML標籤的CSS樣式

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

„ 「類型」頁次

„ 「背景」頁次

„ 「區塊」頁次

„ 「方框」頁次

„ 「邊框」頁次

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

2008/10/27 40

„ 「清單」頁次

„ 「定位」頁次

„ 「擴充功能」頁次

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

動製作

• 建立圖層

• 圖層與表格互相轉換

• 製作圖層位移動畫

• 製作影像變換動畫

(16)

建立圖層

• 圖層是什麼?

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

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

• 建立圖層

„ 加入圖層與內容

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

„ 調整圖層大小與移動

• 使用圖層面板管理圖層

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

使用圖層面板管理圖層

„ 為圖層命名

„ 調整圖層順序

„ 圖層的顯示與隱藏

建立圖層

• 巢狀圖層

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

• 設定圖層屬性

„ 圖層的顯示屬性

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

- inherit:以父圖層為顯示依據,若無父圖層,則預設會顯示。

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

- hidden :隱藏圖層內容。

(17)

建立圖層

„ 圖層的溢位屬性

- visible:不論如何縮放圖層大小,都會自動將圖層放大至可顯示完整圖 層內容的狀態。

層內容的狀態

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

- scroll:不論圖層內容是否可完整顯示,都會出現捲軸。

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

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

2008/10/27 44

製作圖層位移動畫

製作圖層位移動畫

„ 直線路徑

„ 曲線路徑

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

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

„ 曲線路徑

„ 紀錄路徑

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

(18)

製作影像變換動畫

影像動畫就是可切換顯示不同影像的動畫效果,製作此效果前,應 先自行調整圖片為同樣大小,否則將發生變形的狀況。

¾ 製作影像動畫小技巧:

1 變換影像的時間是依據Fps值與影格長度,此範例是每五格影格更換圖片

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

2008/10/27 48

1.變換影像的時間是依據Fps值與影格長度,此範例是每五格影格更換圖片。

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

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

Part 7 製作互動式網頁

• 行為面板的應用

• 精選動態網頁範例

(19)

行為面板的應用

• 開啟不含工具列的瀏覽視窗 - 在「行為」面板上按下

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

• 跳出訊息交談窗

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

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

• 於狀態列上顯示文字

- 增加行為,選擇「設定文字/設定狀態列文字」

精選動態網頁範例

• N 秒後自動切換頁面

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

„ 重新整理這個文件:若是即時性的新聞、股價指數等內容,可選取此項,

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

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

(20)

精選動態網頁範例

• 一層層的彈出式功能表

- 增加行為,選擇「顯示彈出式選單」

„ 內容頁次

„ 外觀頁次

„ 進階頁次

„ 位置頁次

• 跳頁式下拉選單

„ 插入跳頁選單

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

2008/10/27 59

„ 修改跳頁選單內容

• 圖層的顯示與隱藏技巧

- 增加行為,選擇「顯示隱藏圖層」。

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

• 上傳網站到web伺服器

• 檢查超連結狀況

• 檢查網頁語法有無錯誤

(21)

上傳網站到web伺服器

• 申請免費個人網站空間

• 上傳你的網站

• 申請轉址服務

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

• 推廣你的網站

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

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

„ 在網頁中加入關鍵字

參考文獻

相關文件

點選路徑 安全性 安全性 安全性 安全性信任網站 信任網站 信任網站網站 信任網站 網站 網站 網站(S).

了解電腦網路的原理,學習使用 個人網誌及簡易的網頁設計,具 備電子商務的觀念、網路安全以 及網路犯罪與相關法規.

整體網站之規劃與設計設,包括網站企畫,網頁版面美工設計,網頁版面

Flash 平台 Macromedia 公司宣佈全世界 97.3%的網路瀏覽器都有內建 Flash player 播放器,只要在 Internet Explorer 或 Netscape 瀏覽器,安裝了 Flash Player 播放程式,就可以播放

(一) 錄取人員名單將於甄選當日下午 17:00 前公告於本校網站及臺中市政府教育局

工作氣質或求職端 TWS 工作風格)或是 1 門就業促進

a 全世界各種不同的網路所串連組合而成的網路系統,主要是 為了將這些網路能夠連結起來,然後透過國際間「傳輸通訊 控制協定」(Transmission

‡ Verio 提供網站代管公司完整的軟體、運算 與網路資源,也提供網路零售業者開發電子 商務及網站代管的服務 V i 也提供小型 商務及網站代管的服務。