FrontPage 2000.

Presentation on theme: "FrontPage 2000."— Presentation transcript:

1 FrontPage 2000

2 課程大綱 網站的建立、開啟、關閉與刪除 網站的檢視與佈景主題 框架的應用 使用佈景主題 文字工具介紹 項目符號及編號
文字的段落樣式及對齊方式 加入圖片及元件 建立表格 加入超連結

3 1-1 建立新的網站 1-2 新增空白網頁 1-2.1 在『資料夾模式』新增網頁 1-2.2 在『網頁模式』下新增網頁 1-3 另存新檔
1.網站的建立、開啟、關閉與刪除 1-1 建立新的網站 1-2 新增空白網頁 1-2.1 在『資料夾模式』新增網頁 1-2.2 在『網頁模式』下新增網頁 1-3 另存新檔

4 1-1建立新的網站 方法一：我們執行『檔案/開新檔案/Web』命令

5 方法二：按下開新網頁鈕右邊箭頭，選擇『Web』命令

6 1-2新增空白網頁 1.在『資料夾模式』新增網頁

7

8 2.在『網頁模式』下新增網頁

9 1-3另存新檔

10 網站的檢視與佈景主題 2-1網頁模式 2-1.1一般標籤 2-1.2Html標籤 2-1.3預覽標籤

11 2-1網頁模式 網頁模式是最適合用來編輯網頁內容的模式，不論是要在網頁中加入文字、圖片，甚至各種特效，都是在網頁模式中進行。網頁模式下還包含了3個標籤，它們各有自己的功用。

12 2-1.1一般標籤 一般標籤是一個『所視即所得』(What you see is what you get)的環境，您可以用最直接、最視覺化的方式來編輯文字、圖片、表格，還可以加入Java Applet、 ActiveX Control等元件，讓您不需要懂HTML語言，即可透過最簡單的方式製作出來專業的網頁。

13

14 2-2.2Html標籤 FrontPage 2000當然也提供直接編輯Html原始碼的功能，如果您懂得Html語法，即可切換到Html標籤來進行修改；或者當Html又有新規格時，您也可以透過這樣的方式加入FrontPage 2000原本並不支援的語法。

15

16 2-3.3預覽標籤 雖然說FrontPage 2000已經是個『所視即所得』的環境了，但網頁中的某些效果還是必須到能夠瀏覽網頁的模式下觀看才會準確，最快的方法就是馬上切換到預覽標籤預覽一下。

17

18 3.框架的應用 3-1網站中的頁面或是檔案 3-2新的頁面 3-3調整框架大小 3-4分割與刪除框架 3-5刪除框架 3-6儲存框架
3-7儲存右框架文件 3-8儲存框架頁

19 步驟一：首先請您先執行『檔案/開新網頁/網頁』命令，然後在開啟的開新網頁交談窗中選擇框架頁標籤。

20 步驟二：現在就可以看到FrontPage為您建立的框頁。

21 3-1網站中的頁面或是檔案 若您要指定的頁面文件已存在網站中，請您先在框架上按一下滑鼠左鍵選定框架，然後再按下設定起始網頁鈕，指定頁面文件。

22

23 接著，請您改選右框架，並按下設定起始網頁鈕。

24 設定完成後，二個網頁便會分別置入指定的框架中。

25 3-2新的頁面 若您還沒製作好相關的頁面文件，則可以在選定框架後，按下開新網頁鈕，即可為框架開啟一份新的網頁文件。

26

27 3-3調整框架大小 分割完框架後，您可以調整一下框架的大小，以符合需求。請將滑鼠指標移到框架的分隔線上，然後以拉曳的方法來移動分隔線，即可調整左右框架的比例。

28

29 3-4分割與刪除框架 分割框架 若是FrontPage所提供的基本框架樣式您都不滿意，您還是可以先選擇一個比較相進的框架套用，再自行將框架分割成所需的樣式。假設我們要將右框架再分成上下兩個框架，請先選定右框架，然後執行『框架/分割框架』。

30

31 3-5刪除框架 若想將分割出來的框架刪除，您可以利用復原鈕取消剛剛的框架分割動作，也可以選取欲刪除的框架，然後再執行『框架/刪除框架』命令，將框架刪除。

32 3-6儲存框架 當您的所有框架頁面都設計好之後，別忘了做儲存檔案的動作。 儲存左框架文件
若是您在建立框架時，放入框架的是新網頁的話，則在儲存框架頁面時，必須先進行框架文件的儲存。請您先按下儲存鈕，儲存框架中的頁面文件。

33

34 3-7儲存右框架文件 接著我們用同樣的方法將右框架文件儲存起來。

35 3-8儲存框架頁 最後FrontPage會要求您將框架頁儲存起來，若您放入框架的是已存在網站中的網頁，則會跳過上述兩個步驟，直接進行儲存框架頁的工作。存檔之後，按下瀏覽器預覽一下做出來的框架。

36

37 4.使用佈景主題

38 使用佈景主題可說是FrontPage 2000給各位的網站的造型師，因為他知道非每個人都有絕佳的設計天份，所以如果您有這樣一個幫手，它會為你帶來十幾種不同的造型。要套用佈景主題，請在網頁模式中任意開啟網站中的網頁，在頁面中按下滑鼠右鈕，選擇『佈景主題』命令：

39

40 5.文字工具的介紹 5-1字型 5-2粗體、斜體與底線 5-3字型大小 5-4字型色彩 5-5文字底色 5-6特殊文字樣式

41 5-1字型 在字型下拉列視窗中，列出了目前電腦所安裝的各種字型，只要先把想要做變化的文字選取起來，再拉下 列示窗來選擇字型，就可以替文字換一種字型顯示了。

42 5-2粗體、斜體與底線 若我們想要加強文句的語氣時，可以利用粗體鈕、斜體鈕、底線鈕，分別為文字加上這3種樣式的變化，讓瀏覽者能一眼看出文章要強調的部分。

43 5-3字型大小 工具列上的字型大小列示窗，可以用來改變選定文字的尺寸，共有1至7個尺寸等級，只要選取要改變大小的文字後，再拉下字型大小列示窗，選擇想要的尺寸等級就可以了。

44 5-4字型色彩 除了有許多不同的字型可供選擇，另外也可以變換它的顏色。 若您想要自訂色彩可點選「其他色彩」，就會出現色彩的對話方塊。

45 5-5文字底色 文字除了可以更換顏色之外還可以加上底色。
不過要提醒您的是文字底色所用的是CSS語法，所以在某些不支援CSS的瀏覽器中可能看不到效果。

46 5-6特殊文字樣式 有一些比較特殊的文字效果並沒有出現在工具鈕裡，必須在字型屬性交談窗中才能設定；請在選取一段文字後，執行「格式/字型」命令，便會出現以下的交談視窗：

47 6.項目符號及編號 6-1項目符號及編號的使用 6-2使用有層次的項目清單

48 6-1項目符號及編號的使用

49 注意 如果下一行不想變成項目符號了，只要連按兩次Enter鍵，或再按一下項目符號鈕，讓它彈回原狀即可。若想把已經建立的項目符號變成1、2、3這種編號方式，只要按下工具列的編號鈕就好了(插入點必須在項目符號的文字)。

50 6-2使用有層次的項目清單 若文字想要像大綱那樣的層次性排列，那麼就需要用到前一節所講的增加縮排鈕來將文字內縮了。如果要將其下的文字繼續變成第三層，那麼只要重複步驟1、2的動作就好了，也可以同時選取好幾行項目文字，再按下鈕，這樣比較有效率。

51 7.文字的段落樣式及對齊方式 7-1段落樣式 7-2段落的對齊方式

52 7-1段落樣式 不同的文字段落可以使用不同的樣式來顯示，以方便瀏覽者區分。例如我們作為標題的文字可能需要放大、加粗，好讓標題看起來突顯一點，這些我們可從格式工具列的樣式下拉列示窗來快速設定。

53 7-2段落的對齊方式 加大了標題文字之後，我們還想把整段標題置中對齊，使版面看起來更加美觀。同樣地，先將插入點移到該段文字中，然後按下工具列上置中鈕，則標題就會移到中間位置了：

54 還有一種特別的左右對齊沒有出現在工具鈕裡，必需執行『格式/段落』命令，然後在對齊方式列示窗中選擇左右對齊項目，就可以讓段落文字的頭尾都切齊視窗左右兩端。

55 8.加入圖片及元件 8-1加入圖片 8-2儲存檔案

56 8-1加入圖片 將插入點移到插入圖片的位置，然後按下工具列上的從檔案插入圖片(或是執行『插入/圖片/從檔案』命令)，開啟圖片交談窗來選擇要插入的圖片：

57 8-2儲存檔案 在網頁中加入圖片以後，當我們在存檔時，會出現儲存嵌入檔案交談窗，詢問我們是否要將圖片儲存於網站中：

58 9.建立表格 9-1插入表格 9-2加欄或加列 9-3刪除表格及儲存格 9-4合併儲存格 9-5插入與分割儲存格 9-6平均分配欄列的寬高
9-1.1利用插入表格鈕 9-1.2利用『表格/插入/表格』命令 9-1.3利用手繪表格工具 9-2加欄或加列 9-3刪除表格及儲存格 9-4合併儲存格 9-5插入與分割儲存格 9-6平均分配欄列的寬高

59 9-1插入表格 在FrontPage中建立表格的方法有三種

60 9-1.1利用插入表格鈕 請將插入點移到要插入表格的地方，然後按下工具列上的插入表格鈕，就可以指定所要插入表格的欄、列數了。

61 9-1.2利用『表格/插入/表格』命令 執行『表格/插入/表格』命令，會開啟插入表格交談窗，在此交談窗中可以指定表格的欄數、列數、寬度、框線粗細等屬性，按下確定鈕後便可插入一個表格。

62

63 9-1.3利用手繪表格工具 第三種建立表格的方法是最直覺化的，我們可以用手繪表格工具來繪製表格，就像拿一枝筆在紙上畫表一樣，很符和實際生活中的習慣喔！請執行『表格/手繪表格』命令，接著會出現表格工具列，此時工具列上的手繪表格鈕應呈按下狀態，指標也會變成一枝筆的形狀，用這枝筆就可以直接在網頁上畫出表格了。

64 9-2加欄或加列 請將插入點移到表格之中，並執行『表格/插入/列或欄』命令，開啟如下的交談窗。另外還有更簡單的方法：直接按下頁表格工具列上的插入列鈕，就會在插入點上方新增一行空白列；而按下插入欄鈕，就馬上在左方加入一整欄了。

65

66 9-3刪除表格及儲存格 刪除表格的方法很簡單，只要先將表格整個選取起來，再按下鍵盤上的delete鍵即可，表格中的資料也會跟著一起消除。若想單獨刪除特定的欄、列或儲存格，則方法稍有不同，請先選取好欲刪除的欄、列或儲存格後，再執行『表格/刪除儲存格』命令，就可以將選定的儲存格刪掉了。

67 9-4合併儲存格 合併儲存格可以將兩個以上的儲存格並成一個，在表格編輯中是常用到的技巧。

68 9-5插入與分割儲存格 如果我們只想新增單一儲存格，可用插入儲存格或分割儲存格來達成。 插入儲存格
請將插入點移到儲存格內，並執行「表格/插入/儲存格」命令，就可在該儲存格前面插入一個新的儲存格。

69 分割儲存格 除此之外，我們還可以將原有的儲存格進行分割，切成好幾塊新的儲存格。請先將插入點移到要分割的儲存格中，然後執行「表格/分割儲存格」命令，就會出現如下的交談窗：

70 9-6平均分配欄列的寬高 有時為了視覺上的美觀，我們會希望表格每列的高度、或每欄的寬度都一樣，然而用滑鼠一個個拉曳調整不但麻煩，而且還不一定準確，這時就有賴於FrontPage的平均分配列高及平均分配欄寬的功能了。

71 要平均分配欄寬也是同樣的方法，先選取要等分的欄位然後按下平均分配欄寬即可。

72 10.加入超連結 10-1加入文字連結 10-2加入圖片連結 10-3連結到WWW網站 10-4連結到電子郵件信箱

73 10-1加入文字連結 步驟一：先在網頁模式中，將要加入的連結文字選取起來。 步驟二：按下工具列上的超連結鈕 (或是選擇插入/超連結)，開啟建立超連結交談窗。請在對話方塊中選取想要對應的網頁檔案。

74

75 步驟三：文字加上了超連結。(通常是藍色的文字並有底線)

76 10-2加入圖片連結 方法都與上面文字連結一樣，只要點選圖片，再按超連結鈕即可。或在圖片上按滑鼠右鍵，選擇「圖片內容」，然後於交談窗中指定超連結目標。

77

78 要連結的網頁還沒產生時我們可以選擇按下新增網頁鈕，就可立刻建立一個新網頁，並與其產生連結。不過我們一定要記得儲存起來，否則連結就會找不到網頁了。

79 10-3連結到WWW網站 步驟一：在網頁中輸入要加入連結的文字，例如輸入：「蕃薯藤」。然後選定這些文字，按下工具列的超 連結鈕。
步驟二：在建立超連結交談窗中，按下超連結鈕。

80 步驟三：接著FrontPage會開啟預設的瀏覽器，請自行連上Internet並連到想要加入的網站。

81 10-4連結到電子郵件信箱 步驟一：請先選定一段文字或圖片，然後按下超連結鈕，開啟建立超連結交談窗，並在交談窗中輸入要連結的電子郵件信箱。

82