第二篇 在 FrontPage 設計網頁 第 4 章 編輯網頁文字與元件.

Presentation on theme: "第二篇 在 FrontPage 設計網頁 第 4 章 編輯網頁文字與元件."— Presentation transcript:

1 第二篇 在 FrontPage 設計網頁 第 4 章 編輯網頁文字與元件

2 本章提要 輸入文字 文字的複製、搬移、尋找與取代 文字的段落樣式及對齊方式 項目符號及編號 文字屬性 框線及網底 插入水平線 插入日期及時間
插入註解

3 輸入文字 輸入文字 設定文字與網頁邊界的距離 輸入符號

4 輸入文字 請開啟一個新的 .htm 檔, 將網頁切換到設計檢視模式中：

5 輸入文字 輸入文字時, 若一行的長度超過視窗顯示的範圍, 此行文字會自動折到下一行。
自動折行的好處是不管瀏覽器視窗調成多大或多小, 在瀏覽這個網頁時, 都會依視窗大小自動換行。

6 輸入文字 另起段落－按 [Enter] 鍵換行：如果要輸入較多的文字內容, 可適時按下 [Enter] 鍵為文字分段, 在兩段落間會自動產生一小段行距, 有助於瀏覽者閱讀。 換行不換段落－按 [Shift] + [Enter] 鍵換行：如果只是要將文字換行, 而不想另起段落, 那麼可按下 [Shift] + [Enter] 鍵來換行。使用此方式換行, 兩行文字間不會產生空白行距。

7 顯示換行符號 按下一般工具列的全部顯示鈕, 可顯示網頁中的換行符號, 這樣在編輯文字時, 就比較容易分辨折行的方式及位置。
再按一次全部顯示鈕, 可將符號再度隱藏起來。

8 顯示換行符號

9 設定文字與網頁邊界的距離 如果覺得文字太靠近網頁左邊界或上邊界, 請在網頁上按右鈕, 選擇『網頁內容』命令, 並切換到進階頁次來做設定：

10 輸入符號 執行『插入/符號』命令, 再由符號交談窗選用：

11 文字的複製、搬移、尋找與 取代 複製與搬移文字 尋找字串 取代字串

12 複製與搬移文字 複製與搬移的做法, 和一般文書處理軟體相同。只要先選取一段文字, 然後按下一般工具列上的複製鈕或剪下鈕, 將文字放入剪貼簿, 再利用貼上鈕, 將文字複製或搬移到指定的位置。

13 善用「貼上選項」鈕 當我們進行複製或剪下後, 按下貼上鈕 , 文字的最後會出現貼上選項鈕, 你可以按下該鈕右邊的向下箭頭, 來選擇是否要套用目的區的文字格式, 例如：粗體、顏色…等：

14 善用「貼上選項」鈕

15 複製與搬移文字 直接用滑鼠來選取文字, 並將其拉曳到目的位置後, 再放開滑鼠左鈕, 文字就會搬移到目的位置。
若在拉曳的過程中按住 [Ctrl] 鍵, 到目的位置後先放開滑鼠左鈕, 再放開 [Ctrl] 鍵, 則可將物件複製到目的位置。

16 尋找字串 需要在長篇文章裡尋找某個特定的字串、或是需要在一大長串的 HTML 語法中尋找某個標籤時, 可利用 FrontPage 提供的尋找功能, 達到事半功倍之效哦！ 請開啟練習檔 ex04-01.htm, 再執行『編輯/尋找』命令, 進行如下的設定：

17 尋找字串

18 尋找字串

19 取代字串 取代的用法和尋找相同, 差別是尋找只是幫我們將找到的內容標示起來；取代則可以將找到的文字替換成指定的內容。
若網頁中有多個需要替換的字串, 就可以利用取代的方式, 免去一個個尋找、替換的動作。 請執行『編輯/取代』命令：

20 取代字串

21 取代字串

22 「HTML 標籤」頁次 在尋找與取代交談窗中, 還有一個 HTML 標籤頁次, 此頁次最主要的功能是讓熟悉 HTML 語法, 及利用 HTML 語法撰寫網頁的使用者, 能迅速找到想要編輯、修改的 HTML 標籤。

23 「HTML 標籤」頁次

24 文字的段落樣式及對齊方式 五花八門的段落樣式 段落的對齊方式 段落的縮排方式 段落的間距及行距調整

25 五花八門的段落樣式 我們可針對不同的文字段落, 設定不同的樣式, 以方便瀏覽者區分。例如標題可能需要放大、加粗, 以突顯標題的重要性。最快速的設定方法, 就是直接套用樣式列示窗內現成的設定。 請開啟練習檔 ex04-02.htm, 再進行如下的練習：

26 五花八門的段落樣式

27 五花八門的段落樣式

28 五花八門的段落樣式 在樣式列示窗中, 共有標題 1 ～標題 6 六種段落樣式。
標題 1 的字體最大, 然後依序慢慢變小, 你可依需要來套用。 若想回復成原來的字體大小, 只要選擇套用一般樣式就行了。

29 段落的對齊方式 請接續上例, 並將插入點移到第一個段落內, 然後按下工具列上的左右對齊鈕：

30 段落的對齊方式

31 段落的對齊方式 工具列上的靠左對齊鈕及靠右對齊鈕, 可設定段落文字向左或向右對齊, 若不特別設定, 預設文字會靠左對齊。
置中鈕則會使文字位於中間的位置, 是最適合用於標題的對齊方式。

32 段落的縮排方式 善用格式工具列上的增加縮排鈕、減少縮排鈕, 可使文章段落更具有層次感。
按下增加縮排鈕, 段落文字會往右內縮 (約 1 cm), 每按一次就內縮一次；而減少縮排鈕, 則可將縮排的文字往左回復。 請開啟練習檔 ex04-03.htm 進行以下的操作：

33 段落的縮排方式

34 段落的縮排方式

35 段落的間距及行距調整 當你按下 [Enter] 鍵區隔兩個段落時, 兩行之間會自動產生間距, 如果想要隨心所欲地調整段落間距, 請將插入點移到段落中 (例如練習檔 ex04-03.htm 的第 2 個文字段落), 然後執行『格式/段落』命令, 在如下的交談窗做設定：

36 段落的間距及行距調整

37 段落的間距及行距調整

38 段落的間距及行距調整 在設定縮排、行距時, 若直接輸入數字, 不特別指定單位, 預設是以 px (像素) 為單位；你也可以在數字後輸入 pt (點)、%, 做為指定的單位。 建議你多試試幾種數字與單位的組合, 來幫助你找到最適合的縮排及行距距離。

39 項目符號及編號 使用項目符號及編號 有層次的項目清單 自訂項目符號的圖案 可摺疊式大綱

40 項目符號及編號 項目符號是一種簡單而實用的文字排列方式, 可以將一堆資料以清單的條列方式來呈現。
編號則是會自動在每個項目前加上編號, 那麼瀏覽者在閱讀你的網頁時, 將會更輕鬆容易。

41 項目符號及編號

42 使用項目符號及編號 條列式項目包含項目符號與編號兩大類：

43 使用項目符號及編號 我們就以項目符號為例來示範操作方法。
請開啟一個新的空白網頁, 然後按下格式工具列上的項目符號鈕, 此時會顯示「•」這個項目符號, 請直接在符號後面輸入文字, 輸入完後再按下 [Enter] 鍵：

44 使用項目符號及編號 如果不想使用項目符號, 只要連按兩次 [Enter] 鍵, 或再按一次項目符號鈕即可。
建立 1、2、3 的編號清單時, 請改按工具列的編號鈕, 操作方式和插入項目符號相同。 若要直接將項目符號改成編號, 只要將插入點移至任何一個項目中, 再按一下編號鈕即可。

45 有層次的項目清單 如果想讓條列式的段落更有層次感, 只要利用增加縮排鈕就可以做到了。 請開啟練習檔 ex04-04.htm：

46 有層次的項目清單

47 有層次的項目清單 當你按第一次增加縮排鈕時, 項目文字會往下跳一行並除去項目符號, 按第二次才會變成具層次性的條列項目。
提醒你一點, 我們無法將第 1 個項目向內縮排, 否則其下的項目符號, 就失去對齊的依據囉！

48 自訂項目符號的圖案 項目符號預設共有 •、○、□ 三種樣式, 而預設的編號則是以 1、2、3...依序排列。
如果你不滿意這些樣式, 可以將符號設定成自己製作的小圖片, 或者用英文字母來替代沒有變化的數字。 請開啟練習檔 ex04-05.htm, 並將插入點移到要變更圖案的項目文字中, 然後執行 『格式/項目符號及編號』命令：

49 自訂項目符號的圖案

50 自訂項目符號的圖案

51 可摺疊式大綱 我們可將項目清單設計成可摺疊式大綱, 讓一長串的清單能一層層展開, 也可以一層層地收合起來, 給瀏覽者一個清爽的瀏覽空間。
請先依照前面的方法, 做出具有層級的項目清單, 或是開啟我們為你準備好的練習檔 ex04-06.htm, 然後將插入點移到最上層的文字項目, 並執行『格式/項目符號及編號』命令：

52 可摺疊式大綱

53 可摺疊式大綱 存檔後, 將網頁切換到預覽模式下觀看：

54 可摺疊式大綱

55 文字屬性 基本格式 特殊文字樣式 調整文字間距與上下位置 複製文字格式

56 基本格式－字型 字型列示窗列出目前電腦裡所安裝的各種字型, 只要先選取文字, 再拉下列示窗選擇字型, 就可以替文字更換字型。

57 字型 注意哦！如果瀏覽者的電腦中沒有安裝你所設定的特殊字型, 則會以瀏覽器預設的字型來顯示 (通常是新細明體)。
若需要使用到特殊字型時, 建議將它們製作成圖片, 再放到網頁上就行了。

58 設定 FrontPage 編輯時的預設字型 請執行『工具/網頁選項』命令：

59 設定 FrontPage 編輯時的預設字型 這裡指定的字型, 並不是出現在瀏覽器上的字型, 而是你在編輯網頁時, 若沒有特別為文字指定字型, 就會出現這裡所設定的字型。 真正在瀏覽器上出現的預設字型, 則會依每部電腦瀏覽器的設定而異, 這裡只是設定自己想在編輯網頁時看到的字型而已。

60 粗體、斜體與底線 想要加強文字的語氣, 或使文字更突顯時, 可為文字加上粗體、斜體與底線 3 種樣式的變化, 讓瀏覽者能一眼看出文章裡所強調的部份。

61 字型大小 工具列上的字型大小列示窗可用來改變選定文字的大小, 共有 1～7 個尺寸等級 (1 級最小, 7 級最大) , 只要選取文字後, 再拉下字型大小列示窗, 選擇想要的尺寸等級：

62 字型大小

63 字型大小 網頁文字的大小並非絕對, 會依據瀏覽者的螢幕大小、顯示解析度、Windows使用大字型或小字型...等因素而有所變化, 甚至用瀏覽器就可以直接將所有文字放大或縮小來觀看。 不過 7 個等級之間的大小比例是固定的, 不會有 7 級字比 6 級字小的情形發生。

64 套用樣式和「字型大小」有什麼不同 套用樣式和設定字型大小的差異, 就外觀上而言, 標題樣式會把文字加粗, 而字型大小則不會。
標題樣式會針對整個段落做設定 (一直到按下 [Enter] 鍵為止的整段文字), 而字型大小只會對選定的文字做設定, 彈性比較大。

65 套用樣式和「字型大小」有什麼不同

66 字型色彩 請開啟練習檔 ex04-07.htm ：

67 字型色彩

68 字型色彩 選擇『其他色彩』命令可選取更多的色彩

69 自訂項目符號的顏色及編號的字型 當你改變了文字的顏色、格式之後, 再套用項目符號或編號, 會發現項目符號與文字很不搭, 此時你可以如下更改其格式：

70 自訂項目符號的顏色及編號的字型 請先將插入點移至任一項目符號段落中, 再執行『格式/項目符號及編號』命令, 切換至一般項目符號頁次並按下樣式鈕：

71 自訂項目符號的顏色及編號的字型

72 自訂項目符號的顏色及編號的字型

73 醒目提示 醒目提示的功能, 可用來強調內容的重要性：

74 醒目提示

75 快速移除文字格式 當你為文字套用了粗體、底線、字型、色彩...等格式後, 只要在選取文字後, 執行『格式/移除格式』命令, 就可將文字迅速回復成原來的樣子。

76 特殊文字樣式 有一些比較特殊的文字效果, 並沒有出現在工具列裡, 必須在字型交談窗中另做設定。
請在選取一段文字後, 執行『格式/字型』 命令 (或按滑鼠右鈕, 選擇『字型』命令), 便會出現如下交談窗：

77 特殊文字樣式

78 特殊文字樣式 在效果區共有 18 種特殊的樣式, 由於這些樣式是由英文書寫習慣演變而來的, 所以有些效果若套用在中文字上, 可能看不出效果, 因此以下採用英文字母做為範例, 讓各位較能看出其效果：

79 特殊文字樣式

80 特殊文字樣式

81 調整文字間距與上下位置 請將字型交談窗切換到字元間距頁次：

82 調整文字間距與上下位置 設定完字元間距交談窗中的位置後, 須切換到預覽模式或是在瀏覽器中才能看到效果喔！

83 複製文字格式 利用複製格式鈕, 可將目前選定的文字格式, 複製到其它的文字上：

84 複製文字格式

85 複製文字格式

86 框線及網底 框線與網底的作用範圍 替段落加上框線 替段落加上網底

87 框線及網底 利用框線與網底所做出來的效果, 與第 8 章表格的框線與網底很類似, 但兩者實際上是完全不同的東西。
表格可分割欄位, 在網頁上達到排版的功用, 而且所有的瀏覽器都支援表格, 但本節要設定的框線與網底, 只能替現有的文字畫上邊框, 加入背景色而已, 且要支援最新 CSS 語法的瀏覽器才能看得到效果。

88 框線與網底的作用範圍 框線與網底是作用在整個段落上的, 而非針對個別文字, 所以在加入框線時, 將會框住插入點所在的整個段落, 而不是框住選取的文字 (網底亦同)。 若你是用 [Shift] + [Enter] 鍵來將文字折行, 那麼下行文字仍然屬於同一個段落, 在套用時要特別注意哦！

89 框線與網底的作用範圍

90 替段落加上框線 請開啟練習檔 ex04-08.htm, 先將插入點移到文字段落中, 然後執行『格式/框線及網底』命令開啟如下的交談窗：

91 替段落加上框線

92 替段落加上框線 請在設定完成後, 存檔並按下 [F12] 鍵, 由瀏覽器預覽：

93 替段落加上網底 請執行『格式/框線及網底』命令, 繼續將框線及網底交談窗中切換到網底頁次, 我們來為整個段落填上顏色：

94 替段落加上網底

95 替段落加上網底 按下確定鈕, 並按下 [F12] 鍵進行預覽 :

96 插入水平線 在網頁中插入水平線 刪除水平線 修改水平線的屬性

97 在網頁中插入水平線 請開啟練習檔 ex04-09.htm, 先將插入點移到要插入水平線的位置, 然後執行『插入/水平線』命令：

98 在網頁中插入水平線

99 佈景主題對水平線的影響 如果你已套用佈景主題, 那麼所插入的水平線將會是佈景主題預設的水平線哦！

100 刪除水平線與修改水平線屬性 刪除水平線時, 只要先選取水平線, 再按下 [Delete] 鍵即可。
如果不滿意水平線的模樣, 也可以在水平線上雙按滑鼠左鈕, 開啟水平線內容交談窗來修改：

101 修改水平線的屬性

102 修改水平線的屬性 改變水平線的寬度：水平線的寬度設定分為兩種, 一種是以像素做為單位, 例如輸入 80 像素, 則不管瀏覽器視窗怎麼縮放, 水平線永遠是 80 像素的長度；另一種是用視窗縮放比例 (百分比) 來做單位, 若輸入 80, 則水平線就佔了瀏覽器視窗的 80 %, 不論視窗調大或縮小時, 水平線將會自動調整長度, 以符合 80 % 的比例。

103 修改水平線的屬性

104 修改水平線的屬性 改變水平線的高度：若增加水平線的高度, 就可以讓水平線看起來粗一點；如果減少水平線的高度, 水平線就會細一點。另外, 我們還可以利用一點小技巧, 讓原本是橫躺的水平線變成直立的線段, 例如將高度設為 200 像素、寬度設為 2 像素, 則水平線就會變成垂直線的效果了。

105 修改水平線的屬性 改變水平線的對齊方式：跟文字段落一樣, 水平線也可以設定左、中、右 3種對齊方式, 就看你要如何搭配網頁版面囉！不過, 如果將水平線設定為 100 % 的縮放比例, 由於已經佔滿整個視窗, 所以對齊方式就沒有作用了。

106 修改水平線的屬性 改變水平線的顏色：預設的水平線是灰色空心狀, 我們也可以更改它的顏色：

107 加入圖案式水平線 除了套用加入預設的水平線外, 你也可以在網頁上加入自己製作、或從網路下載的長條形圖片做為水平分隔線。
請先收集好圖片, 並依照稍後第 5 章所介紹加入圖片的方法, 再將圖片插入網頁中即可。

108 插入日期及時間 FrontPage 提供了日期及時間元件, 只要將它放入網頁中, 日後當網頁更新時, FrontPage 就會將時間自動更新為當天的時刻。 請開啟練習檔 ex04-10.htm, 並將入點移到欲置放日期與時間的位置, 執行『插入/日期及時間』命令：

109 插入日期及時間

110 日期及時間的顯示選項 日期及時間的顯示方式共有兩種選項：
最近網頁編輯的日期：以網頁存檔的時間為準, 只要該網頁一存檔, 日期和時間也會隨之變動。 最近網頁自動更新的日期：不僅該網頁存檔的日期會更新, 只要其所包含的共用網頁也有變動時, 日期與時間也會跟著一起更新。

111 插入註解 為了讓自己在編輯文字或維護網頁時更方便, 我們可以在文件中加入註解文字。你不必擔心註解會破壞網頁的版面, 因為只有在編輯網頁時才會看得到註解的文字。 請先將插入點移到想要加入註解的地方, 然後執行『插入/註解』命令, 就可以在註解交談窗中輸入文字：

112 插入註解

113 插入註解

114 插入註解 當你要修改註解的內容時, 請將指標移到註解上, 指標呈 狀, 再雙按註解, 就會直接開啟註解交談窗讓你修改內容：

115 插入註解 按下 [F12] 鍵開啟瀏覽器預覽看看： 若要刪除請選取註解, 再按下 [Delete] 鍵。