ch04 设定文字以强化重点.ppt

由「屬性」面板設定文字格式 在「HTML」部分，主要包括粗體、斜體、項目清單、編號清單、凸排、縮排等設定，另外由「格式」下拉，可以選擇標題1-6、段落、及預先格式化等變化。 標題1-6、段落、及預先格式化等格式設定 粗體 斜體 凸排、縮排 項目清單 編號清單 由「頁面屬性」設定文字格式 2.由「屬性」面板按下「頁面屬性」鈕 1.開啟網頁檔 範例檔：04_10.html 3.下拉選定文字顏色 1.切換到「外觀(CSS)」的類別 2.下拉設定字體大小 4.按下「瀏覽」鈕可以一併設定網頁背景圖案 3.按下「確定」鈕離開 1.切換到「標題(CSS)」的分類 2.依序可設定各種標題的字體大小和顏色 2.下拉選擇「標題1」 1.將輸入點放置在要設定格式的段落上 3.瞧！文字馬上套用到剛剛設定的標題1樣式 4.依序設定「標題2」的文字格式 範例檔：04_10ok.html 4-3 項目符號及編號 設定項目效果 1.先選取要設定為清單的文字段落 ? ? ? ? ? ? 2.由「屬性」面板點取「項目清單」鈕 範例檔：04_11.html 1.以圓點的符號顯示在各清單之前 2.以同樣方式完成其他清單的設定 範例檔：04_11ok.html 變更符號及編號 2.按下「清單項目」鈕 1.點選項目清單所在的段落 1.選擇「項目清單」 ? 3.按下「確定」鈕 2.從樣式中選擇「方形」 圓形的項目符號已更換成方形 多層次的項目效果 1.點選要做第二層的文字範圍 ? ? ? 2.按下「文字縮排」鈕 範例檔：04_12.html 完成第二層的設定，第一層的編號清單，也依照順序顯示 範例檔：04_12ok.html 4-4 加入水平線 3.按下「水平線」鈕 1.將插入點放在水平線要插入的位置 2.切換到「插入」面板的「常用」類別 範例檔：04_13.html 點選水平線時，可由屬性面板設定水平線的寬高及對齊方式 顯示新增的水平線 範例檔：04_13ok.html 水平線建立完成後，可利用「屬性」面板來調整線條效果。而各項的設定內容說明如下： 4-5 文字的尋找及取代 1.將輸入點放在文章的最前端 ? ? 2.執行「編輯/尋找和取代」指令 範例檔：04_14.html 1.輸入要尋找和取代的文字內容 2.按此鈕可以找到下一個目標文字 3.按此鈕則可以取代文字 瞧！文章中所有「垂直連結」的文字都被更換成「縱向連結」了 4-6 應用範例-「最新消息」的頁面設計 這裡要設計的是「班級網站」中的第一個頁面「最新消息」，圖中即為本範例作品與整個網站的關係圖。 設定網頁背景 執行「修改/頁面屬性」指令 1.點選「外觀(CSS)」分類 ? 2.按下「瀏覽」鈕 1.點選此圖檔 2.按下「確定」鈕 1.選此項，使指定背景影像為不重複 ? 2.按下「確定」鈕 套用背景影像後的畫面 複製與貼上文字內容 1.開啟「最新消息.txt」文字檔，並全選文字 ? ? 2.執行「編輯/複製」指令 按「Ctrl」+「V」鍵，即可貼入文字內容 使用水平線進行分隔 1.將滑鼠移到此位置 ? 2.執行「插入/HTML/水平線」指令，或是由「插入」面板按下此鈕 1.點選分隔線 ? ? 2.展開屬性面板，寬度設為550像素 ? 3.指定為「靠左對齊」 以同樣方式，再利用水平線隔開「教務處」與「輔導室」之間的文字內容 加入頁面更新日期 1.將滑鼠指標移到此處 ? 2.點選此按鈕 1.指定此日期格式 ? 2.按下「確定」鈕 更新日期加入到網頁中 修改文字格式 1.選取此段文字 ? 2.下拉點選「標題3」的格式 1.顯示套用「標題3」格式的效果 ? 2.將「輔導室」也套用同樣的格式 加入項目符號 ? 2.按下「編號清單」鈕 1.選取這些文字 2.按下此鈕 這些文字已加上編號 1.選取這些文字 編排完成的效果 QA討論時間 本章結束 * 第四章 設定文字以強化重點-「最新消息」頁面設計 課前指引 良好的文字設計有助於瀏覽者的閱讀，雖然沒有任何格式也不會影響文字內容的完整性，但是貼心的替瀏覽者在文章中標記重點，也是讓網站爭取更多人氣的一個好方法。 本章將從各種文字及符號的建立方式開始學習，繼而導入到文字及段落格式的設定操作，同時還會藉由文字的尋找及取代功能來快速編輯文字，最後再利用水平線為頁面內容作重點區分。 章節大綱 備註：可依進度點選小節 4-1 文字輸入技巧 4-2 文字效果設定 4-3 項目符號及編號 4-4 加入水平線 4-5 文字的尋找及取代 4-6 應用範例-「最新消息」的頁