Microsoft Office FrontPage 2003 網站建置與網頁製作技巧

24
Microsoft Office Microsoft Office FrontPag FrontPag e 2003 e 2003 網網網網網網網網網網網 網網網網網網網網網網網 網網網 ( 網網網網 ) Ares Wang

description

Microsoft Office FrontPage 2003 網站建置與網頁製作技巧. 王仲麒 (全泉科技) Ares Wang. 議題:. 網站的建置與規劃,再也不是網站、資訊等管理人員或網頁設計高手的專利了,一般沒有太多經歷的使用者,只要選對環境與工具,也能夠快速建置具備專業水平的網站,設計出擁有一致性風格與亮麗外觀的網頁。本課程的目的就是要協助您即是電腦初學者,網站與網頁都一竅不通的入門者,也能夠在最短的時間內,就學會架設最完美、最酷炫的網站,設計出最具專業水準的網頁 – 即使您連一行 HTML 網頁程式都不會撰寫。. Agenda. - PowerPoint PPT Presentation

Transcript of Microsoft Office FrontPage 2003 網站建置與網頁製作技巧

Page 1: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

Microsoft Office Microsoft Office FrontPage 2003FrontPage 2003網站建置與網頁製作技巧網站建置與網頁製作技巧王仲麒 ( 全泉科技 )Ares Wang

Page 2: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

議題:

網站的建置與規劃,再也不是網站、資訊等管理人員或網頁設計高手的專利了,一般沒有太多經歷的使用者,只要選對環境與工具,也能夠快速建置具備專業水平的網站,設計出擁有一致性風格與亮麗外觀的網頁。本課程的目的就是要協助您即是電腦初學者,網站與網頁都一竅不通的入門者,也能夠在最短的時間內,就學會架設最完美、最酷炫的網站,設計出最具專業水準的網頁 – 即使您連一行 HTML 網頁程式都不會撰寫。

Page 3: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

Agenda

透過 Microsoft FrontPage 2003 建置並管理 Web 網站 建立、控制、管理您理想中的網站,製作最亮麗美觀的

網頁 全新的工作窗格、智慧標籤與精美的相片藝廊。 嶄新的連結列與新增具有中國風味的佈景主題。 框架與框架頁的運用 影像地圖的製作 表單式網頁的製作 專業效果的 Web 元件 共用網頁與共用排程 可依賴的使用分析報告控制並管理您的 Web 網站。

Page 4: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

透過 Microsoft FrontPage 2003建置並管理 Web 網站

Page 5: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

網頁的組成架構 文字 圖片 表格 網頁背景 超連結 網址 框架 Web 元件

Page 6: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

建立、控制、管理您理想中的網站

Page 7: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

嶄新快速的操作環境

Page 8: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

全新的工作窗格、智慧標籤

Page 9: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

精美的相片藝廊

Page 10: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

以導覽概念建立網站 以導覽檢視建立網頁架構

繪製網頁架構 設定網頁標題與更改網頁檔案名稱

變更網頁導覽架構 層級關係的展開與摺疊 層級關係的展開與摺疊 加入其它既有的網頁

共用邊框 就像是[頁首 / 頁尾]的概念運用

Page 11: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

嶄新的連結列 一組用於導覽網站的超連

結,讓站台訪客可以迅速且輕易地到達網站的主要頁面。典型的[連結列]可以含有連結到網站首頁及其主要頁面的超連結。

可以將[連結列]放在某一特定的網頁上,當然,也可以放在共用邊框裡,讓網站內的網頁也都擁有此一[連結列]。

Page 12: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

新增具有中國風味的佈景主題 山花浪漫 中式青瓷 中式書畫 吉祥如意 景泰藍 千禧紅

自訂佈景主題 變更色彩 變更圖形 變更字型樣式 儲存自訂的佈景主題

Page 13: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

框架與框架頁的運用 關於框架與框架頁 建立框架頁 框架頁的編輯

調整框架大小 框架的新增與移除

框架內容的設定 利用框架頁規劃超連結

Page 14: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

影像地圖的製作 利用下列三種形狀繪製作用區:

[矩形作用區 ] 按鈕 [圓形作用區 ] 按鈕 [ 多角形作用區 ] 按鈕

為作用區建立超連結

Page 15: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

表單式網頁的製作 互動式的網頁表單 使用表單網頁精靈建立表單

問題的設計 表單上的問題排列版面 預設的表單確認網頁

表單資料存在哪裡? 建立自訂的表單確認網頁

建立新的表單確認網頁 插入表單確認欄位 使用自訂的表單確認網頁

檢視表單資料的儲存結果 各種表單輸出 建立自訂表單 各種表單欄位的類型與應用 與資料庫的整合應用

Page 16: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

專業效果的 Web 元件 聲音與影像 ( 網頁背景音樂;聲音檔案的超連結;

視訊影像超連結 跑馬燈 橫幅廣告 建立動態顯示按鈕 圖片式的動態顯示按鈕 建立網頁或網站的切換效果 計數器 支援的內置框架

Page 17: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

超強的表現方式 表現方式 (Behavior) - 替網頁注入互動式能力。 替網頁注入互動式能力。 表現方式是「事件」和「動作」的組合。 表現方式是「事件」和「動作」的組合。 透過「表現方式」工作窗格來定義。 透過「表現方式」工作窗格來定義。 自動撰寫出符合 自動撰寫出符合 ECMAScript ECMAScript 規格的用戶端指令碼。 規格的用戶端指令碼。

「事件」(「事件」( EventEvent ) ) 導致瀏覽器去觸發指令碼的使用者行為或系統行為。 導致瀏覽器去觸發指令碼的使用者行為或系統行為。

事件的名稱通常是明示意義的。例如:事件的名稱通常是明示意義的。例如: onmouseOveronmouseOver 、、onclickonclick 、、 ondblclick…ondblclick… 。 。 「動作」(「動作」( ActionAction ) ) 在事件發生時所要執行的指令。 在事件發生時所要執行的指令。 動作通常就是函式(也就是預先寫好的指令碼區塊),用來執動作通常就是函式(也就是預先寫好的指令碼區塊),用來執

行特定的作業。 行特定的作業。 請使用「表現方式」工作窗格來檢視或編輯每個動作的屬性。請使用「表現方式」工作窗格來檢視或編輯每個動作的屬性。

Page 18: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

「表現方式」的操作程序

選物件選物件或整個或整個 BodyBody

開啟開啟表現方式表現方式工作窗格工作窗格

插入插入表現方式表現方式

進行進行相關設定相關設定

Page 19: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

「表現方式」的運用 「播放聲音」表現方式 「播放聲音」表現方式

設定在引發特定事件時就播放特定的聲音檔。 設定在引發特定事件時就播放特定的聲音檔。 支援的聲音檔格式:支援的聲音檔格式: Wave Wave 檔(檔( .wav.wav )、)、 Midi Midi 檔(檔( .mid.mid )、)、

RealAudio RealAudio 檔(檔( .ram .ram 與 與 .ra.ra )、)、 AIFF AIFF 聲音檔(聲音檔( .aif.aif 、、 .aifc .aifc 與 與 .aiff.aiff )以及 )以及 AU AU 聲音檔(聲音檔( .au .au 與 與 .snd.snd )。)。

「設定文字」表現方式 「設定文字」表現方式 設定顯示在狀態列中的文字訊息。 設定顯示在狀態列中的文字訊息。 設定顯示在文字欄位中的文字。 設定顯示在文字欄位中的文字。 設定顯示在框架中的文字。 設定顯示在框架中的文字。 設定顯示在圖層中的文字。設定顯示在圖層中的文字。

「呼叫指令碼」表現方式 「呼叫指令碼」表現方式 設定在特定事件引發時便呼叫 設定在特定事件引發時便呼叫 JavaScript JavaScript 或 或 Jscript Jscript 函式來函式來執行所需的作業。 執行所需的作業。

藉由呼叫自行撰寫的函式來完成所需的自訂功能。藉由呼叫自行撰寫的函式來完成所需的自訂功能。

Page 20: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

「表現方式」的運用 「檢查瀏覽器」表現方式「檢查瀏覽器」表現方式

檢查網站訪客的瀏覽器類型與版本,以便動態將網站訪客重新導向至檢查網站訪客的瀏覽器類型與版本,以便動態將網站訪客重新導向至特定版本的網頁。特定版本的網頁。

「檢查外掛程式」表現方式「檢查外掛程式」表現方式 檢查網站訪客的電腦中是否已安裝所需的外掛程式,如果已安裝所需檢查網站訪客的電腦中是否已安裝所需的外掛程式,如果已安裝所需

的外掛程式則導向至某網頁;如果沒有安裝所需的外掛程式則導向至的外掛程式則導向至某網頁;如果沒有安裝所需的外掛程式則導向至其他的網頁。其他的網頁。

「變更內容」表現方式「變更內容」表現方式 設定當引發特定事件時隨即變更目前或其他網頁元素的「字型」、設定當引發特定事件時隨即變更目前或其他網頁元素的「字型」、

「位置」、「框線」、「可見度」以及其他各項屬性設定。 「位置」、「框線」、「可見度」以及其他各項屬性設定。 「變更內容」表現方式的設定對象務必擁有 「變更內容」表現方式的設定對象務必擁有 id id 屬性的設定。例如:屬性的設定。例如:

<img id=“image1” src=“images/Alex.jpg ” ><img id=“image1” src=“images/Alex.jpg ” > 「控制 「控制 Flash Flash 中的內容」表現方式中的內容」表現方式

讓網頁使用者能夠在網頁執行階段對 讓網頁使用者能夠在網頁執行階段對 Flash Flash 影片作更完善的控制。影片作更完善的控制。

Page 21: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

共用網頁與共用排程 共用網頁網頁

在一個網頁上顯示另一個網頁內容的元件。 共用排程

指定時間,在一個使用中網頁上顯示另一個網頁內容的元件。( 要有 Microsoft FrontPage 2002 Server Extensions 或 Mirosoft SharePoint Team Services v1.0的支援。 )

Page 22: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

可依賴的使用分析報告控制並管理您的 Web 網站 各種報告及使用分析 網頁之瀏覽器相容性的檢查 網頁可及性的檢查 管理超連結 發佈您的網站

Page 23: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

報告 網站摘要

「網站摘要」報表可顯示網站重要統計資料的總覽,如檔案和圖片數目和大小、超連結的數目和類型等。

檔案 「檔案」報表可顯示檔案的總覽,如檔案作用時間,誰正在其中工作、它們何

時修改或新增到網站等。 共用內容

「共用內容」報表可顯示有關網頁群組上使用的網站功能,如佈景主題、樣式、動態 Web 範本和共用框線。

問題 「問題」報表可顯示與網站有關的問題,包括中斷的連結、元件錯誤、下載時

間過長的檔案等。 工作流程

「工作流程」報表可指出檔案狀態及網站中的指定,包括複查狀態、檔案已指定給誰、是否要使用來源控制取出它等。

用法 「用法」報表可顯示有關網站訪客的資訊,包括網頁瀏覽人數、網站訪客所使

用的瀏覽器、參考 URL 等。「

Page 24: Microsoft Office  FrontPage 2003 網站建置與網頁製作技巧

Thanks王仲麒[email protected]://home.kimo.com.tw/areswang