網頁設計基本概念 -...

252
2001/3/27 1 網頁設計基本概念 ---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材 主講人:張蓺英 對象:本校教職員工

Upload: others

Post on 29-Oct-2019

8 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 1

網頁設計基本概念---使用FrontPage 2000

電算中心資訊教育訓練課程授課教材

主講人:張蓺英

對象:本校教職員工

Page 2: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 2

目目目目 次次次次 一一一一

• 課程大綱• 網站與網頁• 網頁的要素• 設計整個網站• 啟動FrontPage2000• FrontPage的工作模式• FrontPage的檢視模式• 在網頁中輸入文字• 儲存網頁檔案• 開啟網頁檔案

• 關閉編輯中的檔案• 把一般工具列與格式工具列分開

• 認識網頁真面目• 另存網頁• 建立個人Web站台• 開啟現有Web站台• 修改網頁中的文字• 更換網頁上的圖片• 修改網站超連結

Page 3: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 3

目目目目 次次次次 二二二二

• 更換網頁佈景主題• 刪除多餘的網頁邊框• 設定導覽列內容• 建立單頁Web• 修改網頁名稱• 在網站中新增網頁• 調整網站架構• 設定文字字型• 調整段落內容• 為段落文字加底框

• 為段落文字加上項目符號• 更換項目符號• 插入水平線• 刪除導覽圖的網頁• 修改網頁檔名• 調整項目段落順序• 加大字元間距與行距• 設定網頁底色• 加入動態的跑燈• 在網頁中加入音樂

Page 4: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 4

目目目目 次次次次 三三三三

• 插入美工圖案• 用美工圖案當背景• 製作自動影像目錄• 設定超連結文字• 設定圖片超連結• 連結到網站中其它的網頁• 建立下載檔案超連結• 來信的超連結• 在網頁中加入書籤

• 連結到網頁中的書籤• 在圖片上建立超連結區域• 設定不規則形狀的連結• 修改超連結作用區範圍• 刪除超連結作用區• 建立表格• 設定表格框線• 為表格加上背景圖片• 設定表格標題• 調整欄寬

Page 5: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 5

目目目目 次次次次 四四四四

• 刪除一列• 合併儲存格• 設定標題儲存格• 搬移文字到儲存格• 設定儲存格背景色• 設定儲存格沒有間距

Page 6: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 6

課程大綱課程大綱課程大綱課程大綱

• 網站與網頁• 網頁(Web Page)的要素• 網站開發的步驟• 網站設計的考量• 網頁設計的考量• 認識FrontPage 2000

• 網頁的設計

Page 7: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 7

網站與網頁網站與網頁網站與網頁網站與網頁

• 網站�由許多的網頁所構成

• 網頁(Web Page) �– 由文字、超連結、影像圖案及特效所組成

• 首頁(Home Page) �– 進入網站時的第一頁

• 超連結(HyperLink) �– 網頁之間的組合

Page 8: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 8

網頁的要素〈網頁的要素〈網頁的要素〈網頁的要素〈1〉〉〉〉

• 文字�網頁的主角,需設定格式與編排

• 超連結�建立網站的骨架

– 起點:文字或影像– 終點:可為下列三種之一

• 網頁內的超連結• 網站中的超連結• 跨網站的超連結

Page 9: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 9

網頁內的超連結網頁內的超連結網頁內的超連結網頁內的超連結

• 定義�在同一網頁內前後跳躍

1.標記要設定書籤的文字再選擇工具列的插入→書籤。

2.標記一段文字再選擇工具列中的超連結鈕,選擇書籤欄再輸入剛剛設定的書籤編號。

Page 10: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 10

網站中的超連結網站中的超連結網站中的超連結網站中的超連結

• 定義�由網站內某一網頁跳躍至另一張網頁

標記欲連結之文字再選擇超連結鈕,然後設定欲連結的網頁。

Page 11: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 11

跨網站的超連結跨網站的超連結跨網站的超連結跨網站的超連結

• 定義�由自己的網站跳躍到其他網站

標記一段欲鏈結的文字後再選擇超連結鈕,在編輯畫面中的URL欄中輸入該網站的網頁名稱即可。

Page 12: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 12

網頁的要素〈網頁的要素〈網頁的要素〈網頁的要素〈2〉〉〉〉

• 影像圖案�可分成網頁襯底的背景圖案

背景圖案,只能使用副檔名為GIF(*.gif)的圖片

Page 13: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 13

展示的照片、圖形按鈕展示的照片、圖形按鈕展示的照片、圖形按鈕展示的照片、圖形按鈕…

• 特效�動態效果或互動作用,如走馬燈表單…等。

走馬燈的設計方式如下:選擇插插插插入→元件→走馬入→元件→走馬入→元件→走馬入→元件→走馬燈燈燈燈動態圖片的格式必須副檔名為副檔名為副檔名為副檔名為GIF(*.gif)才可以。

Page 14: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 14

網站開發的步驟網站開發的步驟網站開發的步驟網站開發的步驟

• 申請網站的網址• 設計整個網站 �三者可同時執行

• 架設網站伺服器

Page 15: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 15

設計整個網站設計整個網站設計整個網站設計整個網站

規劃討論

蒐集相關資料

規劃、設計網站內容

上線測試、修正

完成網站 定期維護、更新網站內容

網站架構圖

Page 16: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 16

網頁設計的考量網頁設計的考量網頁設計的考量網頁設計的考量

• 版面的規劃• 段落的配置• 字型的格式、大小• 注意圖檔的大小• 是否能突顯主題• 顏色配置是否得當

Page 17: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 17

網頁的設計網頁的設計網頁的設計網頁的設計

• FrontPage的網頁設計環境• 文字的輸入與格式設定• 網頁的屬性與背景• 網頁的列印與儲存• 美工圖案的處理• 表格的設計• 網站的匯入

Page 18: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 18

文字的輸入與格式設定

編輯區

只要在編輯區中,都可以輸入文字,至於格式的設定,在工具列中有字型的大小、格式、樣式,還有粗、斜,底線字等功能設定。

Page 19: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 19

網頁的屬性與背景

在網頁編輯區中按滑鼠右鍵選擇網頁內容,便可以看見網頁的相關屬性及背景的設定。

網頁的內容、屬性

Page 20: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 20

網頁的列印與儲存

網頁的列印與儲存可由工具列中利用儲存鍵及列印鍵即可,亦可以利用瀏覽器中的另存網頁和列印鍵。

Page 21: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 21

美工圖案的處理

• 美工圖案通常應用於下列方式中1. 設定網頁超連結的圖示2. 設定回覆郵件的連結圖示3. 修飾網頁的版面的圖片4. 背景圖片的應用

移動滑鼠至要連要連要連要連結的圖片結的圖片結的圖片結的圖片上,然後按下滑鼠右鍵選擇超連結,然後再加以設定網頁或回覆郵件的連結即可。在後在後在後在後面章節中會再加面章節中會再加面章節中會再加面章節中會再加以詳細介紹以詳細介紹以詳細介紹以詳細介紹。

Page 22: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 22

修飾網頁的版面的圖片

Page 23: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 23

背景圖片的應用

Page 24: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 24

表格的設計

表格的設計通常可以利用工具列中的插入表格鍵來插入,然後再依實際的需求將表格調整。

Page 25: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 25

網站的匯入

將滑鼠選取檔案→匯檔案→匯檔案→匯檔案→匯入入入入然後再選去欲匯入的網站目錄或是網頁即可。

Page 26: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 26

� 開始開始開始開始→→→→程式集程式集程式集程式集→→→→Microsoft FrontPage,即可啟動FrontPage2000。

啟動啟動啟動啟動FrontPage2000

Page 27: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 27

認識認識認識認識FrontPage的畫面的畫面的畫面的畫面

編輯區

檢視模式區

工具列

狀態顯示列

工作模式標籤

Page 28: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 28

FrontPage的工作模式的工作模式的工作模式的工作模式一般模式

1. 啟動FrontPage就會進入此模式〈系統預設〉

2. 選擇『一般一般一般一般』標籤也可以切換到這個工作模式。

Page 29: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 29

FrontPage的工作模式的工作模式的工作模式的工作模式HTML模式

• 選擇『HTML』標籤會列出編輯中檔案的HTML檔案內容

• 也可以讓使用者輸入HTML命令,直接編輯網頁。

Page 30: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 30

FrontPage的工作模式的工作模式的工作模式的工作模式預覽模式

•『預覽預覽預覽預覽』標籤:可以觀看編輯中網頁的顯示效果〈動畫、動態效果〉

•一般模式下亦可觀看網頁的完整畫面,但是無法觀看動畫、動態效果。

Page 31: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 31

FrontPage的檢視模式的檢視模式的檢視模式的檢視模式〈〈〈〈1〉〉〉〉

1. 網頁檢視模式網頁檢視模式網頁檢視模式網頁檢視模式

2. 資料夾檢視模式資料夾檢視模式資料夾檢視模式資料夾檢視模式

3. 報告檢視模式報告檢視模式報告檢視模式報告檢視模式

4. 導覽檢視模式導覽檢視模式導覽檢視模式導覽檢視模式

5. 超連結檢視模式超連結檢視模式超連結檢視模式超連結檢視模式

6. 工作檢視模式工作檢視模式工作檢視模式工作檢視模式

Page 32: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 32

FrontPage的檢視模式的檢視模式的檢視模式的檢視模式〈〈〈〈2〉〉〉〉

1. 網頁檢視模式網頁檢視模式網頁檢視模式網頁檢視模式使用者可以編輯網頁內容、撰寫HTML指令,或預覽網頁畫面。

• 一啟動FrontPage,畫面就會自動進入網頁檢視模式。

Page 33: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 33

FrontPage的檢視模式的檢視模式的檢視模式的檢視模式〈〈〈〈3〉〉〉〉

2. 資料夾檢視模式資料夾檢視模式資料夾檢視模式資料夾檢視模式可列出網站資料夾中的所有內容﹝檔名、標題、大小與修改日期﹞。

Page 34: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 34

FrontPage的檢視模式的檢視模式的檢視模式的檢視模式〈〈〈〈4〉〉〉〉

3. 報告檢視模式報告檢視模式報告檢視模式報告檢視模式可以檢視網站中所有項目的報告﹝檔案數目、大小、下載時間、超連結檢查等﹞。

Page 35: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 35

FrontPage的檢視模式的檢視模式的檢視模式的檢視模式〈〈〈〈5〉〉〉〉

4. 導覽檢視模式導覽檢視模式導覽檢視模式導覽檢視模式可以看到整個網站的架構圖,修改網站導覽圖及切換編輯網頁。

Page 36: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 36

FrontPage的檢視模式的檢視模式的檢視模式的檢視模式〈〈〈〈6〉〉〉〉

5. 超連結檢視模式超連結檢視模式超連結檢視模式超連結檢視模式檢視網站中內部與外部連結的情形。

Page 37: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 37

FrontPage的檢視模式的檢視模式的檢視模式的檢視模式〈〈〈〈7〉〉〉〉

6. 工作檢視模式工作檢視模式工作檢視模式工作檢視模式可記錄尚未進行的工作項目,或是多人共同編修網站時,可用來分派工作與記載目前進度。

Page 38: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 38

在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字〈〈〈〈1〉〉〉〉

步驟一步驟一步驟一步驟一:啟動FrontPage後,游標會停在空白網頁的最上方,即可輸入文字後按下【Enter】鍵。

輸入段落文字後按【Enter】鍵

游標停在下個段落的開頭

Page 39: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 39

在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字〈〈〈〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:選取功能列→插入插入插入插入→分隔設定分隔設定分隔設定分隔設定:在新的段落中繼續輸入文字,需換行時。。

Page 40: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 40

在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字〈〈〈〈3-1〉〉〉〉

步驟三步驟三步驟三步驟三::::出現分隔設定內容分隔設定內容分隔設定內容分隔設定內容視窗後,移動滑鼠選擇一般分行符號一般分行符號一般分行符號一般分行符號,然後選擇『確定確定確定確定』鈕

Page 41: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 41

在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字〈〈〈〈3-2〉〉〉〉

步驟三步驟三步驟三步驟三::::出現分隔設定內容分隔設定內容分隔設定內容分隔設定內容視窗後,移動滑鼠選擇清除右邊界清除右邊界清除右邊界清除右邊界,然後選擇『確定確定確定確定』鈕

Page 42: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 42

在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字〈〈〈〈3-3〉〉〉〉

步驟三步驟三步驟三步驟三::::出現分隔設定內容分隔設定內容分隔設定內容分隔設定內容視窗後,移動滑鼠選擇清除左邊界清除左邊界清除左邊界清除左邊界,然後選擇『確定確定確定確定』鈕

Page 43: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 43

在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字在網頁中輸入文字〈〈〈〈3-4〉〉〉〉

步驟三步驟三步驟三步驟三::::出現分隔設定內容分隔設定內容分隔設定內容分隔設定內容視窗後,移動滑鼠選擇清除左右邊界清除左右邊界清除左右邊界清除左右邊界,然後選擇『確定確定確定確定』鈕

Page 44: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 44

在網頁中輸入文字〈在網頁中輸入文字〈在網頁中輸入文字〈在網頁中輸入文字〈4〉〉〉〉

步驟四:步驟四:步驟四:步驟四:換行後,可以繼續輸入文字,並在每次換行時決定如何分行。

四種不同的分段輸入文字結果

Page 45: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 45

儲存網頁檔案〈儲存網頁檔案〈儲存網頁檔案〈儲存網頁檔案〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:移動滑鼠到工具列選擇 儲存檔儲存檔儲存檔儲存檔案案案案。

Page 46: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 46

儲存網頁檔案〈儲存網頁檔案〈儲存網頁檔案〈儲存網頁檔案〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:在在在在另存新檔另存新檔另存新檔另存新檔視窗中,的 儲存位置儲存位置儲存位置儲存位置 選單中選擇磁碟編號。

儲存位置選單

Page 47: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 47

儲存網頁檔案〈儲存網頁檔案〈儲存網頁檔案〈儲存網頁檔案〈3〉〉〉〉

步驟三:步驟三:步驟三:步驟三:在資料夾清單中,移動滑鼠至要存檔的資料夾位置併按兩次滑鼠左鍵。

Page 48: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 48

儲存網頁檔案〈儲存網頁檔案〈儲存網頁檔案〈儲存網頁檔案〈4〉〉〉〉

步驟四:步驟四:步驟四:步驟四:然後在檔案名稱檔案名稱檔案名稱檔案名稱欄輸入存檔名稱,再選擇

儲存儲存儲存儲存鈕。

Page 49: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 49

開啟網頁檔案〈開啟網頁檔案〈開啟網頁檔案〈開啟網頁檔案〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:移動滑鼠到工具列選擇

開啟舊檔開啟舊檔開啟舊檔開啟舊檔 鈕。

Page 50: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 50

開啟網頁檔案〈開啟網頁檔案〈開啟網頁檔案〈開啟網頁檔案〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:出現開啟檔案開啟檔案開啟檔案開啟檔案視窗後,從查詢查詢查詢查詢選單中選擇磁碟機,再從檔案清單中快按兩下檔案所在的資料夾。

檔案清單

Page 51: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 51

開啟網頁檔案〈開啟網頁檔案〈開啟網頁檔案〈開啟網頁檔案〈3〉〉〉〉

步驟三:步驟三:步驟三:步驟三:最後選擇網頁檔案,然後選擇開啟開啟開啟開啟 鈕。

Page 52: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 52

關閉編輯中的檔案〈關閉編輯中的檔案〈關閉編輯中的檔案〈關閉編輯中的檔案〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:移動滑鼠到功能列選擇『 檔案→關閉檔檔案→關閉檔檔案→關閉檔檔案→關閉檔案案案案 』。

Page 53: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 53

關閉編輯中的檔案〈關閉編輯中的檔案〈關閉編輯中的檔案〈關閉編輯中的檔案〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:若這個檔案修改後尚未存檔,畫面會跳出一個提示訊息。

Page 54: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 54

把一般工具列與格式把一般工具列與格式把一般工具列與格式把一般工具列與格式工具列分開〈工具列分開〈工具列分開〈工具列分開〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:移動滑鼠到功能列選擇『 工具→自訂工具→自訂工具→自訂工具→自訂 』

Page 55: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 55

把一般工具列與格式把一般工具列與格式把一般工具列與格式把一般工具列與格式工具列分開〈工具列分開〈工具列分開〈工具列分開〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:當畫面出現自訂自訂自訂自訂視窗後,移動滑鼠選擇 選項選項選項選項 標籤,接著取消勾選取消勾選取消勾選取消勾選 一般一般一般一般和格式工具列放在和格式工具列放在和格式工具列放在和格式工具列放在同一列同一列同一列同一列,然後選擇『 關閉關閉關閉關閉 』鈕。

Page 56: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 56

把一般工具列與格式工把一般工具列與格式工把一般工具列與格式工把一般工具列與格式工具列分開〈具列分開〈具列分開〈具列分開〈3〉〉〉〉

回到FrontPage視窗後,您就可以看到格式工具列終於出現了。

兩個工具列分開了

Page 57: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 57

認識網頁真面目〈認識網頁真面目〈認識網頁真面目〈認識網頁真面目〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:在Internet Explorer﹝瀏覽器﹞視窗中,載入網頁內容後,移動滑鼠到功能列選擇『檢視→原始檢視→原始檢視→原始檢視→原始檔檔檔檔』。

Page 58: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 58

認識網頁真面目〈認識網頁真面目〈認識網頁真面目〈認識網頁真面目〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:畫面上會出現 記記記記事本事本事本事本 視窗,裡面就是目前網頁的原始HTML檔案內容。 HTML原始檔原始檔原始檔原始檔

Page 59: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 59

另存網頁〈另存網頁〈另存網頁〈另存網頁〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:移動滑鼠到功能列選擇『 檔案→另檔案→另檔案→另檔案→另存新檔存新檔存新檔存新檔 』。

Page 60: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 60

另存網頁〈另存網頁〈另存網頁〈另存網頁〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:畫面出現 另存新檔另存新檔另存新檔另存新檔視窗,然後切換到檔案要儲存的資料夾,接著在 檔案名檔案名檔案名檔案名稱稱稱稱 欄輸入新的檔名,再選擇『 儲存儲存儲存儲存 』鈕。

Page 61: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 61

建立個人建立個人建立個人建立個人Web站台〈站台〈站台〈站台〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:啟動FrontPage後,移動滑鼠到工具列選擇開新網頁開新網頁開新網頁開新網頁鈕旁的鈕,拉出選單後,從選單中選擇Web。

Page 62: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 62

建立個人建立個人建立個人建立個人Web站台〈站台〈站台〈站台〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:出現開新檔案開新檔案開新檔案開新檔案視窗後,從清單中選擇個人個人個人個人Web,然後再指定新指定新指定新指定新Web的位的位的位的位置置置置欄輸入網站要建立的資料夾位置,再選擇『確定確定確定確定』鈕。

輸入Web的儲存位置

Page 63: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 63

建立個人建立個人建立個人建立個人Web站台〈站台〈站台〈站台〈3〉〉〉〉

步驟三:步驟三:步驟三:步驟三:回到FrontPage視窗後,移動滑鼠到檢視檢視檢視檢視區選擇 導覽導覽導覽導覽鈕。

Page 64: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 64

建立個人建立個人建立個人建立個人Web站台〈站台〈站台〈站台〈4〉〉〉〉

步驟四:步驟四:步驟四:步驟四:進入導覽畫面後,編輯區中會顯示網站架構圖,每一個圖案都代表一個網頁檔案,接著移動滑鼠快按兩下要開啟的網頁。

快按兩下要開啟的網頁

Page 65: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 65

建立個人建立個人建立個人建立個人Web站台〈站台〈站台〈站台〈5〉〉〉〉

回到網頁檢視模式後,畫面上會顯示系統自動建立的網頁內容。

系統內建的網頁內容

Page 66: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 66

建立個人建立個人建立個人建立個人Web站台〈站台〈站台〈站台〈6〉〉〉〉

由於是以開新Web的方式建立整個網站,因此結束編輯時務必務必務必務必移動滑鼠到功能列選擇『檔案檔案檔案檔案→→→→關閉關閉關閉關閉Web 』。

Page 67: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 67

步驟一:步驟一:步驟一:步驟一:選擇 開開開開啟舊檔啟舊檔啟舊檔啟舊檔鈕旁的 鈕,,,,拉出選單後,選擇開啟開啟開啟開啟Web。。。。

開啟現有開啟現有開啟現有開啟現有Web站台〈站台〈站台〈站台〈1〉〉〉〉

Page 68: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 68

開啟現有開啟現有開啟現有開啟現有Web站台〈站台〈站台〈站台〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:出現開啟開啟開啟開啟Web 視窗後,從查詢查詢查詢查詢選單中選擇磁碟機編號。

Page 69: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 69

開啟現有開啟現有開啟現有開啟現有Web站台〈站台〈站台〈站台〈3〉〉〉〉

步驟三:步驟三:步驟三:步驟三:出現資料夾清單後,移動滑鼠快按兩下Web所在的資料夾。

Page 70: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 70

開啟現有開啟現有開啟現有開啟現有Web站台〈站台〈站台〈站台〈4〉〉〉〉

步驟四:步驟四:步驟四:步驟四:出現Web清單後,移動滑鼠選擇要開啟的Web資料夾,然後再選擇『開啟開啟開啟開啟』鈕。

Page 71: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 71

修改網頁中的文字〈修改網頁中的文字〈修改網頁中的文字〈修改網頁中的文字〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:開啟要編輯的網頁後,再拖移滑鼠把文字設成標記區域。

拖移滑鼠把文字設成標記區域

Page 72: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 72

修改網頁中的文字〈修改網頁中的文字〈修改網頁中的文字〈修改網頁中的文字〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:輸入新的文字內容,標記區域內的文字就會被覆蓋掉,且文字格式與原來相同。

新的文字內容

Page 73: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 73

更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:開啟個人Web站台資料夾後,移動滑鼠到檢視區檢視區檢視區檢視區選擇導覽導覽導覽導覽鈕。

Page 74: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 74

更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:顯示網站架構圖後,快按兩下 相本相本相本相本 網頁圖案。

Page 75: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 75

更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈3〉〉〉〉

步驟三:步驟三:步驟三:步驟三:回到網頁檢視模式後,移動滑鼠到要更換的圖片上,按下滑屬右鍵,拉出快速選單後,從選單中選擇 圖片內容圖片內容圖片內容圖片內容 。

Page 76: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 76

更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈4〉〉〉〉

步驟四:步驟四:步驟四:步驟四:出現 圖片內容圖片內容圖片內容圖片內容視窗後,移動滑鼠選擇『 瀏覽瀏覽瀏覽瀏覽 』鈕。

Page 77: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 77

更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈5〉〉〉〉

步驟五:步驟五:步驟五:步驟五:出現圖片圖片圖片圖片視窗後,從搜尋搜尋搜尋搜尋選單中選擇磁碟機編號並切換到Web站台資料夾,再從清單中快按兩s下images資料夾。

快案資料夾兩下

切換到Web站台資料夾

Page 78: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 78

更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈6〉〉〉〉

步驟六:步驟六:步驟六:步驟六:顯示檔案清單後,移動滑鼠選擇圖片檔案,同時右側會顯示圖片縮圖,再選擇『 確確確確定定定定 』鈕。

Page 79: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 79

更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈7〉〉〉〉

步驟七:步驟七:步驟七:步驟七:回到 圖片內容圖片內容圖片內容圖片內容 視窗後,移動滑鼠選擇『 確定確定確定確定 』鈕。

新的圖片檔案

Page 80: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 80

更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈更換網頁上的圖片〈8〉〉〉〉

網頁中原來的圖片已經被新選定的圖片檔案取代了。

Page 81: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 81

修改網站超連結修改網站超連結修改網站超連結修改網站超連結〈〈〈〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:從導覽模式中快按兩下 嗜好嗜好嗜好嗜好 圖案,切換到網頁編輯畫面後,拖移滑鼠把要修改內容的超連結文字設成標記區域,然後到工具列上選擇 超連結超連結超連結超連結鈕。

把超連結文字設成標記區域

Page 82: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 82

修改網站超連結修改網站超連結修改網站超連結修改網站超連結〈〈〈〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:出現 編輯超連結編輯超連結編輯超連結編輯超連結視窗後,在 URL URL URL URL 欄輸入新的連結位址,然後選擇『 確定確定確定確定 』鈕。

Page 83: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 83

更換網頁佈景主題〈更換網頁佈景主題〈更換網頁佈景主題〈更換網頁佈景主題〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:移動滑鼠到功能列選擇『 格式格式格式格式→佈景主題→佈景主題→佈景主題→佈景主題 』。

Page 84: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 84

更換網頁佈景主題〈更換網頁佈景主題〈更換網頁佈景主題〈更換網頁佈景主題〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:出現 佈景主題佈景主題佈景主題佈景主題視窗後,從清單中選擇佈景主題名稱,右側會顯示所選的樣式,決定樣式即選擇『 確定確定確定確定 』鈕。

Page 85: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 85

更換網頁佈景主題〈更換網頁佈景主題〈更換網頁佈景主題〈更換網頁佈景主題〈3〉〉〉〉

回到網頁編輯畫面,經過一點 ”換裝” 時間,網頁就會換成新的佈景主題畫面。

內容不變,但佈景主題換新了

Page 86: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 86

刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:移動滑鼠到功能列選擇『 格式格式格式格式→共用邊框→共用邊框→共用邊框→共用邊框 』。

以這個邊框來作範例

Page 87: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 87

刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:出現 共用邊框共用邊框共用邊框共用邊框視窗後,取消勾選要移除的邊框﹝左﹞,選擇『 確定確定確定確定 』鈕。

Page 88: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 88

刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈3〉〉〉〉

步驟三:步驟三:步驟三:步驟三:出現刪除的提示訊息後,移動滑鼠選擇『 是是是是 』鈕。

Page 89: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 89

刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈刪除多餘的網頁邊框〈4〉〉〉〉

回到編輯畫面後,導覽列會被移除,網頁上文字和圖片也會自動調整位置。

邊框消失了

Page 90: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 90

設定導覽列內容〈設定導覽列內容〈設定導覽列內容〈設定導覽列內容〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:從導覽檢視模式快按首頁首頁首頁首頁圖案兩下,切換到網頁編輯畫面後,移動滑鼠到導覽列按下滑鼠右鍵,拉出快數選單後,從選單中選擇 導導導導覽列內容覽列內容覽列內容覽列內容。

Page 91: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 91

設定導覽列內容〈設定導覽列內容〈設定導覽列內容〈設定導覽列內容〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:出現 導覽列內容導覽列內容導覽列內容導覽列內容視窗後,移動滑鼠選擇 首頁下方的子首頁下方的子首頁下方的子首頁下方的子網頁網頁網頁網頁,然後選擇『 確定確定確定確定 』鈕。

Page 92: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 92

設定導覽列內容〈設定導覽列內容〈設定導覽列內容〈設定導覽列內容〈3〉〉〉〉

回到網頁編輯畫面後,檢查所設定之內容是否均呈現。

出現按鈕式導覽列

Page 93: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 93

建立單頁建立單頁建立單頁建立單頁Web 〈〈〈〈1〉〉〉〉

步驟步驟步驟步驟1::::移動滑鼠到工具列選擇 開新網頁鈕旁的 ,拉出選單後,從選單中選擇Web。

Page 94: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 94

建立單頁建立單頁建立單頁建立單頁Web 〈〈〈〈2〉〉〉〉

步驟步驟步驟步驟2::::出現開新檔案視窗後,移動滑鼠選擇單頁Web,然後在指定新Web的位置欄中輸入網頁的位置,再選擇確定鈕。

Page 95: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 95

建立單頁建立單頁建立單頁建立單頁Web 〈〈〈〈3〉〉〉〉

步驟3:回到編輯畫面後,視窗名稱列上會顯示新建Web的完整路徑,移動滑鼠到檢視區選擇 導覽鈕。

Page 96: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 96

建立單頁建立單頁建立單頁建立單頁Web 〈〈〈〈4〉〉〉〉切換到導覽模式,裡面會顯示一個首頁圖案,資料夾清單中並會列出目前Web中所有的資料夾名稱及HTML檔案。開新Web並建立一個單頁Web後,FrontPage會自動建立一個名為index.htm的首頁檔案,網站中並有一個_private資料夾與一個images資料夾。

首頁建立了

Page 97: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 97

修改網頁名稱修改網頁名稱修改網頁名稱修改網頁名稱〈〈〈〈1〉〉〉〉

步驟步驟步驟步驟1::::移動滑鼠到要修改名稱的網頁圖示上,按下滑鼠的右鍵,拉出快速選單後,從選單中選擇重新命名。

Page 98: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 98

修改網頁名稱修改網頁名稱修改網頁名稱修改網頁名稱〈〈〈〈2〉〉〉〉

步驟2:網頁名稱欄中的文字會變成反白,此時開始輸入新的檔案名稱結束後按下Enter鍵。

Page 99: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 99

在網站中新增網頁〈在網站中新增網頁〈在網站中新增網頁〈在網站中新增網頁〈1〉〉〉〉

步驟1:移動滑鼠到要新增子網頁的圖案上,按下滑鼠右鍵,拉出快速選單後,從選單中選擇開新網頁。

Page 100: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 100

在網站中新增網頁〈在網站中新增網頁〈在網站中新增網頁〈在網站中新增網頁〈2〉〉〉〉

步驟2:出現新的網頁圖案後,輸入網頁名稱,並按下Enter鍵。

Page 101: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 101

在網站中新增網頁〈在網站中新增網頁〈在網站中新增網頁〈在網站中新增網頁〈3〉〉〉〉

利用開新網頁功能,您可以一步步把整個網站的導覽圖完成。每次新增一個網頁圖案,資料夾清單中就會自動建立一個HTML檔案。

Page 102: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 102

在網站中新增網頁〈在網站中新增網頁〈在網站中新增網頁〈在網站中新增網頁〈4〉〉〉〉

一般導覽圖都是縱向排列,您可以從導覽圖工具列上選擇直向/橫向鈕,把它改成橫向顯示。

Page 103: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 103

調整網站架構〈調整網站架構〈調整網站架構〈調整網站架構〈1〉〉〉〉

當您建好了網站架構圖,突然發現有網頁“擺”錯了位置,您只要在圖上按住滑鼠左鍵不放,然後般移至正確的位置,網站架構就會自動調整。

連結線會自動調整

Page 104: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 104

調整網站架構〈調整網站架構〈調整網站架構〈調整網站架構〈2〉〉〉〉

在還沒有鬆開滑鼠左鍵之前,您會看到連結線也跟著調整到新的網頁上,在確定網頁位置後,就可鬆開滑鼠左鍵。

網頁被移到新的位置

Page 105: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 105

設定文字字型〈設定文字字型〈設定文字字型〈設定文字字型〈1〉〉〉〉

步驟步驟步驟步驟1::::開啟要編輯的網頁後,拖曳滑鼠把文字設成標記區域,移動滑鼠到功能列選擇 字型色彩鈕旁的 鈕,拉出選單後,從選單中選擇一種顏色。

Page 106: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 106

設定文字字型〈設定文字字型〈設定文字字型〈設定文字字型〈2〉〉〉〉

步驟步驟步驟步驟2::::然後移動滑鼠到工具列選擇字型大小欄旁的 鈕,拉出選單後,從選單中選擇字型大小。

Page 107: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 107

設定文字字型〈設定文字字型〈設定文字字型〈設定文字字型〈3〉〉〉〉

步驟3:接著移動滑鼠到工具列選擇字型欄旁的 鈕,拉出選單後,從選單中選擇字型。

Page 108: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 108

設定文字字型〈設定文字字型〈設定文字字型〈設定文字字型〈4〉〉〉〉

步驟4:最後可以選擇文字格式鈕,調整標記區域內文字的字體。

Page 109: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 109

設定文字字型〈設定文字字型〈設定文字字型〈設定文字字型〈5〉〉〉〉

除了利用工具列上的按鈕外,也可以從功能列的格式選單中選擇字型,出現字型視窗後,設定所需要的字型內容。

Page 110: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 110

設定文字字型〈設定文字字型〈設定文字字型〈設定文字字型〈6〉〉〉〉

如果您的網頁中使用了預設字型以外的字型,則當別人電腦中沒有您所設定的字型時,會以預設字型取代。

Page 111: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 111

調整段落內容〈調整段落內容〈調整段落內容〈調整段落內容〈1〉〉〉〉

步驟1:把游標移到要設定對齊方式的段落,再到工具列選擇一種段落對齊鈕。

Page 112: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 112

調整段落內容〈調整段落內容〈調整段落內容〈調整段落內容〈2〉〉〉〉

步驟2:接著把游標移到要設定縮排的段落,再到工具列上選擇增加縮排鈕。

Page 113: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 113

調整段落內容〈調整段落內容〈調整段落內容〈調整段落內容〈3〉〉〉〉

• 工具列上有3個字體鈕,3個段落對齊鈕,和2個段落縮排控制鈕分別如下:粗體字 斜體字 底線字 段落置左段落置中 段落置右 減少縮排增加縮排增加段落縮排時,一行中可容納的字數會減少;反過來說,減少縮排時,會增加一行中的可容納字數。

Page 114: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 114

為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈1〉〉〉〉

步驟1:把要加底框的段落設成標記區域,然後移動滑鼠到功能列選擇格式,拉出選單後,從選單中選擇框線與網底。

Page 115: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 115

為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈2〉〉〉〉

步驟2:出現框線及網底視窗後,選擇框線標籤,點一下方塊鈕,則有許多樣式可供挑選,並能在預覽中看見其變化。

Page 116: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 116

為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈3〉〉〉〉

步驟3:接著選擇色彩欄旁的 鈕,拉出選單後,從選單中選擇其他色彩。

Page 117: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 117

為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈4〉〉〉〉

步驟4:出現其他色彩視窗後,選擇一種顏色,右下角會顯示與原來色彩的對照,然後選擇確定鈕。

Page 118: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 118

為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈5〉〉〉〉

步驟5:承步驟4,在其他色彩視窗中,還有一自訂色彩鈕,按下之後,出現色彩視窗後,從基本色彩區選擇一種顏色,再從右側色表中選擇亮度,然後選擇確定鈕。

Page 119: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 119

為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈6〉〉〉〉

步驟6:回到框線及網底視窗後,選擇前景色彩欄旁的 鈕,拉出選單後,從選單中選擇一種標準色彩,然後選擇確定鈕。

Page 120: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 120

為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈為段落文字加底框〈7〉〉〉〉回到編輯畫面,您就可以在段落文字中看到剛才所設定框線與網底。無論是選擇框線色彩、網底前景色彩或背景色彩,都有3種挑選色彩的方法,分別是標準色彩、自訂色彩和其他色彩,其中自訂色彩可以選用的顏色變化較多,標準色彩只有16種顏色可供選擇。

Page 121: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 121

為段落文字加上為段落文字加上為段落文字加上為段落文字加上項目符號〈項目符號〈項目符號〈項目符號〈1〉〉〉〉

步驟1:拖曳滑鼠把段落文字設成標記區域,然後移動滑鼠到工具列選擇項目符號鈕。

Page 122: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 122

為段落文字加上為段落文字加上為段落文字加上為段落文字加上項目符號〈項目符號〈項目符號〈項目符號〈2〉〉〉〉

步驟2:如果有些小段落內容是屬於大項目的小項,您可以繼續把些段落設成標記區域,然後移動滑鼠到工具列選擇增加縮排鈕,每按一下,段落就會往內縮,符號也會跟著改變。

Page 123: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 123

為段落文字加上為段落文字加上為段落文字加上為段落文字加上項目符號〈項目符號〈項目符號〈項目符號〈3〉〉〉〉

步驟3:如果要把項目符號換成編號,移動滑鼠到工具列選擇編號鈕。 編號和項目符號鈕都可以為整段文字加上一個項目符號,如果有順序性的段落就選擇編號鈕,否則就選擇 項目符號鈕。

選擇要設定編號的段落

Page 124: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 124

更換項目符號〈更換項目符號〈更換項目符號〈更換項目符號〈1〉〉〉〉

步驟1:把游標移到有項目符號的段落中,接著移動滑鼠到功能列選擇格式,拉出選單後,從選單中選擇項目符號及編號。

Page 125: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 125

更換項目符號〈更換項目符號〈更換項目符號〈更換項目符號〈2〉〉〉〉

步驟2:出現清單內容視窗後,移動滑鼠選擇符號樣式,然後選擇確定鈕。

Page 126: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 126

更換項目符號〈更換項目符號〈更換項目符號〈更換項目符號〈3〉〉〉〉

您也可以設定數字編號的模式,只要移動滑鼠選擇編號標籤,再從清單中選擇一種編號樣式就可以了。

Page 127: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 127

插入水平線〈插入水平線〈插入水平線〈插入水平線〈1〉〉〉〉

步驟1:把游標移到要插入水平線的位置,再到功能列上選擇插入,拉出選單後,從選單中選擇水平線。

Page 128: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 128

插入水平線〈插入水平線〈插入水平線〈插入水平線〈2〉〉〉〉

步驟2:出現水平線後,接著要設定它的內容。移動滑鼠在水平線按下滑鼠的右鍵,再從拉出的快速選單中選擇水平線內容。

Page 129: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 129

插入水平線〈插入水平線〈插入水平線〈插入水平線〈3〉〉〉〉

步驟3:出現水平線內容視窗後,在寬度欄調整線寬度,接著在高度欄輸入線條高度,然後選擇色彩欄旁的 鈕,再從拉出的選單中選擇一種色彩。水平線寬度可以配合視窗縮放比例,或依照確實的像素數目。此外,還可設定對齊方式有沒有陰影等變化。

Page 130: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 130

刪除導覽圖的網頁刪除導覽圖的網頁刪除導覽圖的網頁刪除導覽圖的網頁〈〈〈〈1〉〉〉〉

步驟1:切換到導覽圖後,移動滑鼠到要刪除的網頁圖案上,按下滑鼠右鍵,拉出快速選單後,從選單中選擇刪除。

Page 131: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 131

刪除導覽圖的網頁刪除導覽圖的網頁刪除導覽圖的網頁刪除導覽圖的網頁〈〈〈〈2〉〉〉〉

步驟2:出現刪除網頁視窗後,移動滑鼠選擇從Web刪除此網頁,然後選擇確定鈕。

Page 132: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 132

刪除導覽圖的網頁刪除導覽圖的網頁刪除導覽圖的網頁刪除導覽圖的網頁〈〈〈〈3〉〉〉〉

回到FrontPage視窗後,被刪除的圖案會從導覽列圖上消失,資料夾清單中的HTML檔案數也跟著少了一個。如果不想連HTML檔案也一並刪除掉,則在刪除網頁視窗應該選擇將本網頁從所有導覽列上移除。

圖案消失了

少了一個檔

Page 133: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 133

修改網頁檔名〈修改網頁檔名〈修改網頁檔名〈修改網頁檔名〈1〉〉〉〉

步驟1:移動滑鼠到檢視區選擇 資料夾鈕。

Page 134: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 134

修改網頁檔名〈修改網頁檔名〈修改網頁檔名〈修改網頁檔名〈2〉〉〉〉

步驟2:切換到資料夾模式後,在要修改的網頁檔案上按下滑鼠右鍵,拉出快速選單後,從選單中選擇重新命名。

在此按下右鍵

Page 135: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 135

修改網頁檔名〈修改網頁檔名〈修改網頁檔名〈修改網頁檔名〈3〉〉〉〉

步驟3:網頁名稱欄中的文字會變成反白,輸入新的名稱,並按下Enter鍵。

Page 136: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 136

修改網頁檔名〈修改網頁檔名〈修改網頁檔名〈修改網頁檔名〈4〉〉〉〉在資料夾檢視模式中修改檔名的好處是,檔名和網頁標題可以對照,在導覽模式下則對不起來。輸入新的檔名時,如果您將副檔名換成.htm或.html以外的類型時,則FrontPage會跳出一個提示訊息,選擇 鈕會將檔案改成非網頁格式,選擇

鈕會回去重新輸入檔名。

Page 137: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 137

調整項目段落順序〈調整項目段落順序〈調整項目段落順序〈調整項目段落順序〈1〉〉〉〉

步驟1:開啟網頁後,移動滑鼠到要調整順序段落的左側按下滑鼠左鍵,把整段設成標記區域。

Page 138: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 138

調整項目段落順序〈調整項目段落順序〈調整項目段落順序〈調整項目段落順序〈2〉〉〉〉

步驟2:拖曳滑鼠將項目段落搬到新的位置,然後鬆開滑鼠鍵。

按著左鍵拖曳滑鼠到此

Page 139: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 139

加大字元間距與行距〈加大字元間距與行距〈加大字元間距與行距〈加大字元間距與行距〈1〉〉〉〉

步驟1:把要加大間距與行距的文字設成標記區域,接著移動滑鼠到功能列選擇格式,拉出選單後,從選單中選擇字型。

Page 140: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 140

加大字元間距與行距〈加大字元間距與行距〈加大字元間距與行距〈加大字元間距與行距〈2〉〉〉〉

步驟2:出現字型視窗後,移動滑鼠選擇字元間距標籤,接著從字元間距選單中選擇加寬,並設定加寬的點數,然後選擇確定鈕。

Page 141: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 141

加大字元間距與行距〈加大字元間距與行距〈加大字元間距與行距〈加大字元間距與行距〈3〉〉〉〉

步驟3:回到編輯畫面後,接著要調整行距,移動滑鼠到功能列選擇格式,拉出選單後,從選單中選擇段落。

Page 142: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 142

加大字元間距與行距〈加大字元間距與行距〈加大字元間距與行距〈加大字元間距與行距〈4〉〉〉〉

步驟4:出現段落視窗後,從行距清單中選擇一種行距,然後選擇確定鈕。

Page 143: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 143

加大字元間距與行距〈加大字元間距與行距〈加大字元間距與行距〈加大字元間距與行距〈5〉〉〉〉

如果您要加大段落間的距離,可以在段落視窗中設定段落間距區的與前段距離或與後段距離。

Page 144: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 144

設定網頁底色〈設定網頁底色〈設定網頁底色〈設定網頁底色〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:首先我們先以滑鼠點選格式(O),拉出選單之後,我們再以滑鼠點選背景(K)。

Page 145: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 145

設定網頁底色〈設定網頁底色〈設定網頁底色〈設定網頁底色〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:再點選背景(C )旁的 鍵,在以滑鼠點選出自己所要的顏色,再點選確定。

Page 146: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 146

設定網頁底色〈設定網頁底色〈設定網頁底色〈設定網頁底色〈3〉〉〉〉

網頁就會改變 成如右圖。

Page 147: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 147

加入動態的跑燈加入動態的跑燈加入動態的跑燈加入動態的跑燈〈〈〈〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:選取工具列中的插入(I) →元件(O) →跑馬燈(M)。

Page 148: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 148

加入動態的跑燈加入動態的跑燈加入動態的跑燈加入動態的跑燈〈〈〈〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:在文字輸入框中輸入欲顯示的文字,再設定方向、速度、及表現方式、背景色彩、對齊方式等,再按確定。

Page 149: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 149

加入動態的跑燈加入動態的跑燈加入動態的跑燈加入動態的跑燈〈〈〈〈3〉〉〉〉

步驟三:步驟三:步驟三:步驟三:點選預覽就可以看到跑馬燈的動態結果

Page 150: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 150

在網頁中加入音樂〈在網頁中加入音樂〈在網頁中加入音樂〈在網頁中加入音樂〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:點選格式點選格式點選格式點選格式(O)→背背背背景景景景(KKKK)

Page 151: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 151

在網頁中加入音樂〈在網頁中加入音樂〈在網頁中加入音樂〈在網頁中加入音樂〈2〉〉〉〉

步驟二:步驟二:步驟二:步驟二:在背景音樂的位置點選瀏覽

Page 152: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 152

在網頁中加入音樂〈在網頁中加入音樂〈在網頁中加入音樂〈在網頁中加入音樂〈3〉〉〉〉

步驟三:步驟三:步驟三:步驟三:以滑鼠點選自己要的音樂檔,並點選確定。

Page 153: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 153

在網頁中加入音樂〈在網頁中加入音樂〈在網頁中加入音樂〈在網頁中加入音樂〈4〉〉〉〉

步驟六:步驟六:步驟六:步驟六:以滑鼠點選確定,就可以在瀏覽中聽到我們的音樂了。

Page 154: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 154

插入美工圖案〈插入美工圖案〈插入美工圖案〈插入美工圖案〈1〉〉〉〉

步驟步驟步驟步驟1::::把游標移到插入圖片的位置,接著移動滑鼠到功能列選擇『插入』,拉出選單後,把滑鼠移到『圖片』,再從右側選單中選擇『美工圖案』。

Page 155: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 155

插入美工圖案〈插入美工圖案〈插入美工圖案〈插入美工圖案〈2〉〉〉〉

步驟步驟步驟步驟2::::出現『多媒體藝廊』視窗後,從『類別』清單中選擇一種圖片類別。

Page 156: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 156

插入美工圖案〈插入美工圖案〈插入美工圖案〈插入美工圖案〈3〉〉〉〉

步驟步驟步驟步驟3::::出現所選的類別圖片清單後,移動滑鼠選擇圖片,再從選單中選擇『插入項目』鈕。

Page 157: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 157

插入美工圖案〈插入美工圖案〈插入美工圖案〈插入美工圖案〈4〉〉〉〉

步驟步驟步驟步驟4::::回到FrontPage視窗後,移動滑鼠到工具列上選擇 『儲存檔案』鈕。

這就是插入的圖片

Page 158: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 158

插入美工圖案〈插入美工圖案〈插入美工圖案〈插入美工圖案〈5〉〉〉〉

步驟步驟步驟步驟5::::出現『儲存嵌入檔案』視窗後,從要儲存的嵌入物件清單中選擇圖片檔,然後選擇 鈕。

Page 159: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 159

插入美工圖案〈插入美工圖案〈插入美工圖案〈插入美工圖案〈6〉〉〉〉

步驟步驟步驟步驟6::::輸入新的檔名後,移動滑鼠選擇

鈕。

Page 160: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 160

插入美工圖案〈插入美工圖案〈插入美工圖案〈插入美工圖案〈7〉〉〉〉

步驟步驟步驟步驟7::::出現『變更資料夾』視窗後,移動滑鼠選擇圖片要儲存的資料夾,然後選擇『確定』鈕。

Page 161: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 161

插入美工圖案〈插入美工圖案〈插入美工圖案〈插入美工圖案〈8〉〉〉〉

步驟步驟步驟步驟8::::回到『儲存嵌入檔案』視窗後,移動滑鼠選擇『確定』鈕。

Page 162: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 162

插入美工圖案〈插入美工圖案〈插入美工圖案〈插入美工圖案〈9〉〉〉〉

步驟步驟步驟步驟9::::我們先點選圖片就可以調整字體的位址的方式來調整圖片的位址或再點選絕對位址 ,就可將圖片點以滑鼠右鍵任意拖曳移動圖片

Page 163: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 163

用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈1〉〉〉〉

步驟一:步驟一:步驟一:步驟一:把滑鼠移到功能列選擇格式,拉出選單後,從選單中選擇背景。

Page 164: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 164

用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈2〉〉〉〉步驟二:步驟二:步驟二:步驟二:出現網頁視窗後,移動滑鼠選擇瀏覽鈕。

Page 165: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 165

用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈3〉〉〉〉

步驟三:步驟三:步驟三:步驟三:出現選擇背景圖片視窗後,移動滑鼠選擇鈕。

Page 166: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 166

用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈4〉〉〉〉

步驟四:出現多媒體藝廊視窗後,從類別清單中選擇Web背景。

Page 167: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 167

用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈5〉〉〉〉

步驟五:出現圖案清單後,移動滑鼠選擇圖片,再從選單中選擇插入 項目鈕。

Page 168: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 168

用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈用美工圖案當背景〈6〉〉〉〉

步驟六:步驟六:步驟六:步驟六:回到網頁內容視窗後,移動滑鼠選擇確定鈕。

Page 169: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 169

製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈1〉〉〉〉

步驟步驟步驟步驟1::::移動滑鼠功能列選擇『檢視』,拉出選單後,把滑鼠移到『工具』,再從右側選單中選擇『圖片』。

Page 170: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 170

製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈2〉〉〉〉

步驟步驟步驟步驟2::::出現『圖片』工具列後,移動滑鼠選擇要製作目錄的圖片,接著從『圖片』工具列選擇 『自動影像目錄標籤』鈕。

Page 171: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 171

製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈3〉〉〉〉

步驟步驟步驟步驟3::::完成所有圖片的目錄設定後,移動滑鼠到工具列選擇『儲存檔案』鈕。

Page 172: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 172

製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈4〉〉〉〉

步驟步驟步驟步驟4::::出現『儲存嵌入檔案』視窗後,移動滑鼠選擇

鈕。

Page 173: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 173

製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈5〉〉〉〉

步驟步驟步驟步驟5::::出現『變更資料夾』視窗後,選擇圖片存檔的資料夾,然後選擇『確定』鈕。

Page 174: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 174

製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈6〉〉〉〉

步驟步驟步驟步驟6::::回到『儲存嵌入檔案』視窗後,移動滑鼠選擇『確定』鈕。

Page 175: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 175

製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈製作自動影像目錄〈7〉〉〉〉

切換到預覽模式,移動滑鼠選擇目錄中縮小的圖片,就可以看到原始大小的圖片。

Page 176: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 176

設定超連結文字〈設定超連結文字〈設定超連結文字〈設定超連結文字〈1〉〉〉〉

步驟一:開啟Web後,從檢視區選擇 導覽鈕,再移動滑鼠到要開啟的網頁圖案上快按兩次。

Page 177: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 177

設定超連結文字〈設定超連結文字〈設定超連結文字〈設定超連結文字〈2〉〉〉〉

步驟二:切換到網頁編輯模式後,把滑鼠移到要超連結的文字設成標記區域,再從工具列上選擇超連結鈕。

Page 178: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 178

設定超連結文字〈設定超連結文字〈設定超連結文字〈設定超連結文字〈3〉〉〉〉

步驟三:出現超連結建立視窗,在URL欄輸入新的連結網址,然後選擇確定。

Page 179: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 179

設定圖片超連結〈設定圖片超連結〈設定圖片超連結〈設定圖片超連結〈1〉〉〉〉

步驟一:從導覽模式快按兩下您所要超連結的圖片,進入網頁編輯模式後,移動滑鼠選擇圖片,再從工具列上選擇 超連結鈕。

Page 180: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 180

設定圖片超連結〈設定圖片超連結〈設定圖片超連結〈設定圖片超連結〈2〉〉〉〉

步驟二:出現建立超連結視窗後,在URL欄輸入連結網址,然後選擇確定。

Page 181: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 181

設定圖片超連結〈設定圖片超連結〈設定圖片超連結〈設定圖片超連結〈3〉〉〉〉

切到預覽模式,移動滑鼠到圖片上,滑鼠會變成 形狀,如果圖片有設定文字說明,滑鼠下方會出現這一段說明。

Page 182: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 182

連結到網站中其它的連結到網站中其它的連結到網站中其它的連結到網站中其它的網頁〈網頁〈網頁〈網頁〈1〉〉〉〉

步驟一:在編輯模式中,把滑鼠移到要連結網頁的文字標記起來,再從工具列上選擇 超連結鈕。

Page 183: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 183

連結到網站中其它的連結到網站中其它的連結到網站中其它的連結到網站中其它的網頁〈網頁〈網頁〈網頁〈2〉〉〉〉

步驟二:出現建立超連結視窗後,從清單中選擇要連結的網頁檔案,URL欄會顯示檔案名稱,然後再選擇確定。

Page 184: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 184

建立下載檔案超連結〈建立下載檔案超連結〈建立下載檔案超連結〈建立下載檔案超連結〈1〉〉〉〉

步驟一:到編輯模式中,選擇要連結的圖片,再從工具列上選擇超連結鈕。

Page 185: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 185

建立下載檔案超連結〈建立下載檔案超連結〈建立下載檔案超連結〈建立下載檔案超連結〈2〉〉〉〉

步驟二:出現超連結視窗後,移動滑鼠選擇製作到您電腦上的檔案的超連結鈕。

Page 186: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 186

建立下載檔案超連結〈建立下載檔案超連結〈建立下載檔案超連結〈建立下載檔案超連結〈3〉〉〉〉

步驟三:出現選擇檔案視窗後,先切到檔案所在的資料夾,接著從清單中選擇連結檔案,然後再點選確定。

Page 187: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 187

建立下載檔案超連結〈建立下載檔案超連結〈建立下載檔案超連結〈建立下載檔案超連結〈4〉〉〉〉

只要連結的目標不是HTML檔案、.txt文字檔或圖片檔案,點選這個超連結都會出現檔檔檔檔案下載案下載案下載案下載視窗。

Page 188: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 188

來信的超連結〈來信的超連結〈來信的超連結〈來信的超連結〈1〉〉〉〉

步驟一:開啟畫面後,把文字設成標記區域,接著從工具列點選超連結鈕。

Page 189: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 189

來信的超連結〈來信的超連結〈來信的超連結〈來信的超連結〈2〉〉〉〉

步驟二:出現建立超連結視窗後,選擇按鍵製作傳送電子郵件的超連結鈕。

Page 190: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 190

來信的超連結〈來信的超連結〈來信的超連結〈來信的超連結〈3〉〉〉〉

步驟三:出現建立電子郵件超連結視窗後,在輸入電子郵件地址欄輸入您的E-mail地址,然後再按確定。

Page 191: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 191

來信的超連結〈來信的超連結〈來信的超連結〈來信的超連結〈4〉〉〉〉

步驟四:出現建立超連結視窗後,再點選確定鈕即可。

Page 192: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 192

來信的超連結〈來信的超連結〈來信的超連結〈來信的超連結〈5〉〉〉〉

每次點選這個連結都會出現新郵件視窗,收件者欄還會自動填好您的E-mail地址。

Page 193: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 193

來信的超連結〈來信的超連結〈來信的超連結〈來信的超連結〈6〉〉〉〉

如果收件人不只一個,輸入電子郵件地址,可以加入”,”符號分隔,例如:[email protected],[email protected]。如果想在收件者欄顯示收件人的名字,可以在輸入E-mail地址時,以名字<E-mail地址>的格式設定收件者欄的內容。

Page 194: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 194

在網頁中加入書籤〈在網頁中加入書籤〈在網頁中加入書籤〈在網頁中加入書籤〈1〉〉〉〉

步驟一:在您要編輯的網頁,把滑鼠移到要插入的位置,再到功具列點選插入,在選單裡,選擇書籤。

Page 195: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 195

在網頁中加入書籤〈在網頁中加入書籤〈在網頁中加入書籤〈在網頁中加入書籤〈2〉〉〉〉

步驟二:出現書籤視窗後,在書籤名稱欄輸入一個名稱,再按確定。

Page 196: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 196

在網頁中加入書籤〈在網頁中加入書籤〈在網頁中加入書籤〈在網頁中加入書籤〈3〉〉〉〉

回到編輯畫面,游標位置上會出現一個 圖案,標示這裡有一個書籤。

Page 197: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 197

連結到網頁中的書籤〈連結到網頁中的書籤〈連結到網頁中的書籤〈連結到網頁中的書籤〈1〉〉〉〉

步驟一:把文字設成標記區域後,移動滑鼠到工具列上選擇 超連結鈕。

Page 198: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 198

連結到網頁中的書籤〈連結到網頁中的書籤〈連結到網頁中的書籤〈連結到網頁中的書籤〈2〉〉〉〉

步驟二:出現建立超連結視窗後,從書籤選單中選擇要連結的書籤名稱。

Page 199: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 199

連結到網頁中的書籤〈連結到網頁中的書籤〈連結到網頁中的書籤〈連結到網頁中的書籤〈3〉〉〉〉

步驟三:URL欄會出現所選擇的書籤名稱,前面會自動出現一個#字符號,再按確定鈕。

Page 200: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 200

在圖片上建立超連結在圖片上建立超連結在圖片上建立超連結在圖片上建立超連結區域〈區域〈區域〈區域〈1〉〉〉〉

步驟一:移動滑鼠到檢視,拉出選單後,把滑鼠移到工具列,再從右側選單中選擇圖片。

Page 201: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 201

在圖片上建立超連結在圖片上建立超連結在圖片上建立超連結在圖片上建立超連結區域〈區域〈區域〈區域〈2〉〉〉〉

步驟二:出現圖片工具列後,從圖片工具列選擇矩形作用區鈕,會出現筆的形狀,再拖移滑鼠在圖片上框選要建立連結的區域。

Page 202: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 202

在圖片上建立超連結在圖片上建立超連結在圖片上建立超連結在圖片上建立超連結區域〈區域〈區域〈區域〈3〉〉〉〉

步驟三:出現建立超連結視窗後,從清單中選擇連結檔案,或在URL欄輸入網址,然後再按確定。

Page 203: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 203

設定不規則形狀的設定不規則形狀的設定不規則形狀的設定不規則形狀的連結〈連結〈連結〈連結〈1〉〉〉〉

步驟一:選擇要設定的不規則形狀連結的圖片,然後從圖片工具列上選擇此鈕,出現筆的圖案後,畫出您要的邊形,一一點選範圍,要結束時,快按滑鼠左鍵兩下即可。

Page 204: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 204

設定不規則形狀的設定不規則形狀的設定不規則形狀的設定不規則形狀的連結〈連結〈連結〈連結〈2〉〉〉〉

步驟二:出現建立超連結視窗後,從清單中選擇連結檔案,或在URL欄輸入連結位址,然後再按確定鈕。

Page 205: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 205

修改超連結作用區修改超連結作用區修改超連結作用區修改超連結作用區範圍〈範圍〈範圍〈範圍〈1〉〉〉〉

步驟一:選擇要修改超連結作用區範圍的圖片,圖片上會顯示您所框的區域。

Page 206: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 206

修改超連結作用區修改超連結作用區修改超連結作用區修改超連結作用區範圍〈範圍〈範圍〈範圍〈2〉〉〉〉

步驟二:移動滑鼠選擇要調整的區域,四週出現8個點,移動任何一塊,可以改變圖形。

Page 207: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 207

修改超連結作用區修改超連結作用區修改超連結作用區修改超連結作用區範圍〈範圍〈範圍〈範圍〈3〉〉〉〉

步驟三:接下來調整不規則形狀的作用區,移動滑鼠選擇不規則形作用區,再拖移滑鼠調整。

Page 208: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 208

刪除超連結作用區〈刪除超連結作用區〈刪除超連結作用區〈刪除超連結作用區〈1〉〉〉〉

步驟二:選擇要刪除超連結作用區的圖片,然後到圖片工具列上選擇標示作用區鈕。

Page 209: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 209

刪除超連結作用區〈刪除超連結作用區〈刪除超連結作用區〈刪除超連結作用區〈2〉〉〉〉

步驟二:然後圖片會變成一片白色,移動滑鼠選擇要刪除的超連結作用區,這個區域會變成黑色的,再按下DELETE鍵,即可把作用區刪掉。

Page 210: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 210

刪除超連結作用區〈刪除超連結作用區〈刪除超連結作用區〈刪除超連結作用區〈3〉〉〉〉

刪除指定的作用區後,標示作用區也會跟著消失並回到一般的圖片顯示模式。

標示作用區鈕是一個切換顯示作用區的開關,所以您按一下會隱藏圖片顯示作用區,再按一下又會恢復原來的樣子。

Page 211: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 211

建立表格〈建立表格〈建立表格〈建立表格〈1〉〉〉〉

步驟步驟步驟步驟1:將滑鼠移到要插入表格的位置,然後選擇工具列的 插入表格鈕,出現表格欄列數選單後,拖移滑鼠往右下方移動,確定欄列數後,放掉滑鼠左鍵。

拖移滑鼠設定表格大小

Page 212: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 212

建立表格〈建立表格〈建立表格〈建立表格〈2〉〉〉〉

步驟步驟步驟步驟2::::建好表格之後,把滑鼠移到要插入圖片的位置,再從功能列上選擇 從檔案插入圖片鈕。

Page 213: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 213

建立表格〈建立表格〈建立表格〈建立表格〈3〉〉〉〉

步驟步驟步驟步驟3::::出現圖片視窗後,從搜尋選單中選擇圖片所在磁碟機和資料夾,接著從清單中選擇圖片檔案,右側會顯示圖片縮圖,然後選擇『確定』鈕。

Page 214: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 214

建立表格〈建立表格〈建立表格〈建立表格〈4〉〉〉〉

步驟步驟步驟步驟4::::回到編輯畫後,移動指標到工具列選擇對齊方式鈕。

Page 215: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 215

設定表格框線〈設定表格框線〈設定表格框線〈設定表格框線〈1〉〉〉〉

步驟步驟步驟步驟1::::把滑鼠移到表格中,接著移動指標到功能列選擇『表格』,拉出選單後,把指標移到『內容』,再從右側選單中選擇『表格』。

Page 216: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 216

設定表格框線〈設定表格框線〈設定表格框線〈設定表格框線〈2〉〉〉〉

步驟步驟步驟步驟2::::出現『表格內容』視窗後,從『對齊方式』選單中選擇『置中』,接著移動指標勾選『指定寬度』,並選擇『依百分比』,然後在空格中輸入表格寬度大小。

Page 217: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 217

設定表格框線〈設定表格框線〈設定表格框線〈設定表格框線〈3〉〉〉〉

步驟步驟步驟步驟3::::接著在『框線』區的『色彩』選單中選擇一種顏色,並且調整『大小欄』中的數字,設定表格框線的粗細,然後選擇『確定』鈕。

Page 218: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 218

設定表格框線〈設定表格框線〈設定表格框線〈設定表格框線〈4〉〉〉〉

回到編輯畫面,您會看到表格依設定的內容畫出框線了。

Page 219: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 219

為表格加上背景圖片〈為表格加上背景圖片〈為表格加上背景圖片〈為表格加上背景圖片〈1〉〉〉〉

步驟步驟步驟步驟1::::把滑鼠移到表格中,接著移動指標到功能列選擇『表格』,拉出選單後,把指標移到『內容』,再從右側選單中選擇『表格』。

Page 220: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 220

為表格加上背景圖片〈為表格加上背景圖片〈為表格加上背景圖片〈為表格加上背景圖片〈2〉〉〉〉

步驟步驟步驟步驟2::::出現『表格內容』視窗後,勾選『使用背景圖片』,然後選擇

鈕。

Page 221: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 221

為表格加上背景圖片〈為表格加上背景圖片〈為表格加上背景圖片〈為表格加上背景圖片〈3〉〉〉〉

步驟步驟步驟步驟3::::出現『選擇背景圖片』視窗後,從搜尋選單中選擇圖片所在位置,接著從清單中選擇圖片檔案,右側會顯示圖片縮圖,然後選擇『確定』鈕。

Page 222: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 222

為表格加上背景圖片〈為表格加上背景圖片〈為表格加上背景圖片〈為表格加上背景圖片〈4〉〉〉〉

步驟步驟步驟步驟4::::回到『表格內容』視窗後,移動指標選擇『確定』鈕。

Page 223: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 223

為表格加上背景圖片〈為表格加上背景圖片〈為表格加上背景圖片〈為表格加上背景圖片〈5〉〉〉〉

表格背景和網頁不一樣的背景圖

Page 224: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 224

設定表格標題〈設定表格標題〈設定表格標題〈設定表格標題〈1〉〉〉〉

步驟步驟步驟步驟1::::將滑鼠移到表格中,接著移動指標到功能列選擇『表格』,拉出選單後,把指標移到『插入』,再從右側選單中選擇圖示標題。

Page 225: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 225

設定表格標題〈設定表格標題〈設定表格標題〈設定表格標題〈2〉〉〉〉

步驟步驟步驟步驟2::::接著輸入表格標題,然後移動指標到功能列選擇『表格』,拉出選單後,把指標移到『內容』,再從右側選單中選擇『表格標題』。

Page 226: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 226

設定表格標題〈設定表格標題〈設定表格標題〈設定表格標題〈3〉〉〉〉步驟步驟步驟步驟3::::出現『標題內容』視窗後,從『位置』區選擇『表格』頂端,然後選擇『確定』鈕。

Page 227: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 227

調整欄寬〈調整欄寬〈調整欄寬〈調整欄寬〈1〉〉〉〉

步驟步驟步驟步驟1::::將滑鼠移到要調整欄寬的儲存格,接著移動指標到功能列選擇表格,拉出選單後,把指標移到『內容』,再從右側選單中選擇『儲存格』。

Page 228: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 228

調整欄寬〈調整欄寬〈調整欄寬〈調整欄寬〈2〉〉〉〉

步驟步驟步驟步驟2::::出現『儲存格內容』視窗後,移動指標勾選『指定寬度』,接著在『指定寬度』欄輸入欄寬大小,然後選擇『確定』鈕。

Page 229: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 229

調整欄寬〈調整欄寬〈調整欄寬〈調整欄寬〈3〉〉〉〉

除了用設定的方式外,也可以直接拖移表格中的分隔線來調整欄寬。

Page 230: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 230

刪除一列〈刪除一列〈刪除一列〈刪除一列〈1〉〉〉〉

步驟步驟步驟步驟1::::把滑鼠移到要刪除表格列的儲存格,接著移動指標到功能列選擇『表格』,拉出選單後,把指標移到『選取』,再從右側選單中選擇『列』。

Page 231: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 231

刪除一列〈刪除一列〈刪除一列〈刪除一列〈2〉〉〉〉

步驟步驟步驟步驟2::::選好要刪除的表格列後,移動指標到功能列選擇『表格』,拉出選單後,再從選單中選擇『刪除儲存格』。

Page 232: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 232

刪除一列〈刪除一列〈刪除一列〈刪除一列〈3〉〉〉〉

表格列被刪除下方的內容都會自動往上移動。刪除欄和刪除列的操作方法差不多,只不過您先選取欄,然後再刪除儲存格。

Page 233: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 233

合併儲存格〈合併儲存格〈合併儲存格〈合併儲存格〈1〉〉〉〉

步驟步驟步驟步驟1::::拖移滑鼠選取要合併的儲存格。

Page 234: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 234

合併儲存格〈合併儲存格〈合併儲存格〈合併儲存格〈2〉〉〉〉

步驟步驟步驟步驟2::::接著移動指標到功能列選擇『表格』,拉出選單後,再從選單中選擇『合併儲存格』。

Page 235: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 235

合併儲存格〈合併儲存格〈合併儲存格〈合併儲存格〈3〉〉〉〉

合併儲存格後,儲存格間的分隔線就會消失,表格的編排方式也會有所調整。

3個表格合併了

Page 236: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 236

設定標題儲存格〈設定標題儲存格〈設定標題儲存格〈設定標題儲存格〈1〉〉〉〉

步驟步驟步驟步驟1::::移動指標到表格上緣,當指標變成�,按下滑鼠左鍵,把整欄儲存格選取起來。

Page 237: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 237

設定標題儲存格〈設定標題儲存格〈設定標題儲存格〈設定標題儲存格〈2〉〉〉〉

步驟步驟步驟步驟2::::移動指標到功能列選擇『表格』,拉出選單後,把指標移到『內容』,再從右側選單中選擇『儲存格』。

Page 238: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 238

設定標題儲存格〈設定標題儲存格〈設定標題儲存格〈設定標題儲存格〈3〉〉〉〉

步驟步驟步驟步驟3::::出現『儲存內容』視窗後,在『版面配置』區勾選『儲存格標題』,然後選擇『確定』鈕。

Page 239: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 239

設定標題儲存格〈設定標題儲存格〈設定標題儲存格〈設定標題儲存格〈4〉〉〉〉

變成標儲存格後,文字會自動加粗而且置中對齊。

Page 240: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 240

搬移文字到儲存格〈搬移文字到儲存格〈搬移文字到儲存格〈搬移文字到儲存格〈1〉〉〉〉

步驟步驟步驟步驟1::::拖移滑鼠把要移到儲存格的文字設成標記區域。

Page 241: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 241

搬移文字到儲存格〈搬移文字到儲存格〈搬移文字到儲存格〈搬移文字到儲存格〈2〉〉〉〉

步驟步驟步驟步驟2::::按住滑鼠左鍵,指標會變成箭頭形狀,拖移滑鼠把文字搬移到要放置的儲存格位置。

Page 242: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 242

搬移文字到儲存格〈搬移文字到儲存格〈搬移文字到儲存格〈搬移文字到儲存格〈3〉〉〉〉

步驟步驟步驟步驟3::::除了用拖移的方式搬移文字置外,也可以用剪刀、貼上的方式來進行。選取要搬移的文字後,移動指標到工具列選擇 『剪下』鈕。

Page 243: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 243

搬移文字到儲存格〈搬移文字到儲存格〈搬移文字到儲存格〈搬移文字到儲存格〈4〉〉〉〉

步驟步驟步驟步驟4::::剪下的文字會消失,接著把滑鼠移到文字要搬移去的儲存格,再到工具列上選擇 『貼上』鈕。

Page 244: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 244

搬移文字到儲存格〈搬移文字到儲存格〈搬移文字到儲存格〈搬移文字到儲存格〈5〉〉〉〉

步驟五:步驟五:步驟五:步驟五:把原來網頁上的文字搬到表格中之後,記得把“殘留”在表格外的空白段落刪除。

選取段落再按下『Delete』鍵

Page 245: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 245

設定儲存格背景色〈設定儲存格背景色〈設定儲存格背景色〈設定儲存格背景色〈1〉〉〉〉

步驟步驟步驟步驟1::::把滑鼠移到要設定背景色的儲存格中,接著移動指標到功能列選擇『表格』,拉出選單後,把指標移到『內容』,再從右側選單中選擇『儲存格』。

Page 246: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 246

設定儲存格背景色〈設定儲存格背景色〈設定儲存格背景色〈設定儲存格背景色〈2〉〉〉〉

步驟步驟步驟步驟2::::出現『儲存格內容』視窗後,選擇背景區中『色彩欄』旁的鈕,拉出選單後,從選單中選擇『其它色彩』。

Page 247: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 247

設定儲存格背景色〈設定儲存格背景色〈設定儲存格背景色〈設定儲存格背景色〈3〉〉〉〉

步驟步驟步驟步驟3::::出現『其它色彩』視窗後,選擇一種顏色,視窗右下角會顯示與原色彩的對照,移動指標選擇『確定』鈕。

Page 248: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 248

設定儲存格背景色〈設定儲存格背景色〈設定儲存格背景色〈設定儲存格背景色〈4〉〉〉〉

步驟步驟步驟步驟4::::回到『儲存格內容』視窗後,移動指標選擇『確定』鈕。

Page 249: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 249

設定儲存格背景色〈設定儲存格背景色〈設定儲存格背景色〈設定儲存格背景色〈5〉〉〉〉

為個別儲存格設定不同的背景色,如果配色得宜,產生的視覺效果可能比背景圖片的效果還好。

Page 250: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 250

設定儲存格沒有間距〈設定儲存格沒有間距〈設定儲存格沒有間距〈設定儲存格沒有間距〈1〉〉〉〉

步驟步驟步驟步驟1::::把滑鼠移到表格中,接移動指標到功能列選擇『表格』,拉出選單後,把指標移到『內容』,再從右側選單中選擇『表格』。

Page 251: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 251

設定儲存格沒有間距〈設定儲存格沒有間距〈設定儲存格沒有間距〈設定儲存格沒有間距〈2〉〉〉〉

步驟步驟步驟步驟2::::出現『表格內容』視窗後,選擇『儲存格間距欄』的小三角形鈕,調整間距為0,然後選擇『確定』鈕。

Page 252: 網頁設計基本概念 - cc.web2.ncut.edu.twcc.web2.ncut.edu.tw/ezfiles/26/1026/img/140/web_design_abs.pdf · 2001/3/27 1 網頁設計基本概念---使用FrontPage 2000 電算中心資訊教育訓練課程授課教材

2001/3/27 252

設定儲存格沒有間距〈設定儲存格沒有間距〈設定儲存格沒有間距〈設定儲存格沒有間距〈3〉〉〉〉

切換到預覽模式看看,儲存格果然緊貼在一起了。

儲存格緊貼在一起