Transcript FrontPage 網頁設計

FrontPage 網頁設計
陽明大學資訊與通信中心
高健雄資料管理師
2020/4/27
陽明大學資通中心
1
課程內容
 網頁基本介紹
 如何製作網頁
 網頁設計觀念
 網頁設計相關名詞
 FrontPage 98簡介
 FrontPage 98操作環境
 開始你的網頁製作與網頁設計
2020/4/27
陽明大學資通中心
2
網頁基本介紹
 何謂網頁(Web page)
 Home Page (首頁) V.S. Web Page (網頁)
 網頁的基本觀念
– HyperText
– HyperLink
2020/4/27
陽明大學資通中心
3
如何製作網頁
 遵循規範
– HTML、SGML、XML 、JAVA、CGI …等
 製作軟體
– 記事本、Word、FrontPage……等
 Browser Tools
– Internet Explorer、Netscape、KKman…等
2020/4/27
陽明大學資通中心
4
網頁設計觀念
方向
測試
想法
製作
內容
2020/4/27
陽明大學資通中心
5
網頁設計相關名詞
 HTML（HyperText Markup Language）
 HTTP （HyperText Transfer Protocol）
 Browser
 URL（Uniform Resource Locator）
– http://www.ym.edu.tw/~jskao/index.htm#123
 Client／Server架構
– 圖解架構
– 傳送過程
 CGI (Common Gateway Interface)
 JAVA：具有互動能力的程式語言
2020/4/27
陽明大學資通中心
6
FrontPage 98簡介
 微軟出品
 網頁製作功能佳
 介面操作方便
 WYSIWYG (What You See Is What You
Get)
 可與Office相關軟體相互結合
 無中文版本
 可中文化，但需安裝中文套件
2020/4/27
陽明大學資通中心
7
FrontPage 98操作環境
 網頁檔案總管（Explorer）
 網頁編輯器（Editor）
2020/4/27
陽明大學資通中心
8
FrontPage基本操作（Explorer）
 開啟、關閉FrontPage
 檢視不同編輯模式
– 資料夾模式
– 瀏覽模式
– 超連結模式
– 超連結狀態模式
– 工作模式
2020/4/27
陽明大學資通中心
9
FrontPage基本操作（Editor）
 操作畫面
 簡單範例說明
 Normal／HTML／Preview
 加入新網頁
– 內建範本
– 框架
2020/4/27
陽明大學資通中心
10
FrontPage Editor簡介
 基本功能（幾乎與MS Word同）
 功能表
 工具列
– 一般工具列
– 格式工具列
– 圖片工具列
– 表格工具列
2020/4/27
陽明大學資通中心
11
網頁製作範本及精靈
 網頁範本（利用預設之Web Page）
 網頁精靈（利用引導程式）
2020/4/27
陽明大學資通中心
12
網頁設計基本效果
 文字、文字超連結
 圖形、圖形超連結
 Ｅ-mail
 表格
 框架
 書籤
2020/4/27
陽明大學資通中心
13
設計自己第一個網頁
 文字編輯
 圖形編輯
 表格編輯
 框架編輯
2020/4/27
陽明大學資通中心
14
網頁文字編輯
 基本文字編輯
 文字屬性
 文字超連結
說明：
 超連結可分為
–
–
–
2020/4/27
絕對位址
相對位址
同一網頁連結 (書籤)
陽明大學資通中心
15
網頁圖形編輯
 插入圖形
– 利用既有圖形
– 自我設計
 圖形屬性
 圖文處理
 圖形超連結
2020/4/27
陽明大學資通中心
16
網頁表格編輯
 何謂表格
 插入表格
 直欄與橫列
 表格屬性
 儲存格屬性
2020/4/27
陽明大學資通中心
17
網頁框架編輯
 視窗區域分割數個大小不等之視窗
 各視窗相互獨立
 優點：使用者同時觀賞不同視窗內容
 缺點：常使人感到視窗混亂（無均衡感）
2020/4/27
陽明大學資通中心
18
網頁框架編輯（續）
 開啟框架網頁
 基本框架網頁編輯
 框架網頁屬性
 建立超連結
2020/4/27
陽明大學資通中心
19
網頁動態元件
 跑馬燈
 動態顯示按鈕
 計數器
 橫幅廣告管理員
2020/4/27
陽明大學資通中心
20
如何上傳網頁
 利用既有的網站 (快速)
 自行假設網站 (複雜)
2020/4/27
陽明大學資通中心
21
Ftp簡易教學
 開啟Ftp軟體
 Ftp設定
 Ftp簡易操作說明
 上傳資料
2020/4/27
陽明大學資通中心
22
請上過我的課程的學員
希望你們都能夠多加練習
我不希望寒假班又見到你們
Bye Bye…...
2020/4/27
陽明大學資通中心
23