FrontPage & Flash 動態網頁設計入門 FrontPage 網站建立與管理 講師 : 陳昭源 CSIE,NTU August 25, 2007
Outline 使用 FrontPage 建立網站 網站開啟 關閉與刪除 在導覽模式建立網站架構 設定網站 / 網頁預設編碼 使用 FrontPage 上傳網站 August 25, 2007 Page 2
使用 FrontPage 建立網站 我們無法使用檔案總管來新增網站資料夾, 因為 FrontPage 的網站資料夾另包含了許多隱藏資料夾及檔案, 以提供網路存取時的必要資訊, 所以必須透過 FrontPage 才能完整地建立一個新的網站 August 25, 2007 Page 3
隱藏資料夾 建立網站後,FrontPage 會自動產生兩個資料夾 _private 用來存放表單結果 images 則是儲存網站圖片 如果套用非單頁網站 空白網站的其它範本, 可能會出現更多的資料夾, 例如 :_borders _themes 等 這些資料夾扮演著維持網站架構的重要角色, 不可隨意刪除或移動 如果怕誤刪了這些資料夾 上方選單, 工具 網站選項 進階 August 25, 2007 Page 4
網站範本 建立新網站時, 可直接套用網站範本,FrontPage 會自動組織約略的網站架構 若你想白手起家, 可選擇 單頁網站 或 空白網站 ; 前者會建立一個空白的首頁, 後者則無, 但同樣都可以讓你從頭開始規劃網站內容 August 25, 2007 Page 5
開啟已存在的網站 上方選單, 檔案 開啟網站 使用工作窗格 August 25, 2007 Page 6
匯入現成的網站 上方選單, 檔案 匯入 August 25, 2007 Page 7
匯入現成的網站 August 25, 2007 Page 8
匯入現成的網站 August 25, 2007 Page 9
匯入現成的網站 August 25, 2007 Page 10
關閉目前的網站 欲關閉目前正在編輯的網站 上方選單, 檔案 關閉網站 關閉檔案 vs. 關閉網站 August 25, 2007 Page 11
刪除網站 開啟欲刪除的網站 開啟資料夾清單, 選取最上層的網站資料夾 按 [Delete] 鍵 August 25, 2007 Page 12
建立網站架構圖 開啟網站 切換至 導覽模式 August 25, 2007 Page 13
將網站內的網頁新增至架構圖 點選欲新增的位置, 按右鍵 新增現有的頁面 August 25, 2007 Page 14
快速新增已存在的網頁 開啟資料夾清單, 點選欲加入之網頁, 直接拖曳至導覽窗中欲加入的位置 August 25, 2007 Page 15
調整網站架構 直接用滑鼠拉曳網頁圖示, 將其拉曳到正確的位置 August 25, 2007 Page 16
刪除導覽圖中的網頁 點選欲刪除之網頁圖示 按 [Delete] 鍵, 從刪除提示對話視窗選擇刪除模式 August 25, 2007 Page 17
橫向檢視 網站配置通常會由上往下顯示, 你也可以將網站的配置方式改成由左至右 : August 25, 2007 Page 18
檢視部份網站 選定某一網頁 工具列, 只檢視子目錄 August 25, 2007 Page 19
設定網站的預設編碼 上方選單, 工具 網站設定, 語言 August 25, 2007 Page 20
設定網頁的編碼方式 在網頁空白處按右鍵 網頁內容 August 25, 2007 Page 21
Unicode 編碼方式 即使編碼方式不設成繁體中文, 也能正確的輸入中文字, 但因為此時原始的 HTML 檔不是 BIG-5 編碼儲存, 因次將改用 Unicode 編碼儲存中文字 以 Unicode 編碼方式所顯示的原始碼, 雖不易修改, 但可讓一個網頁中同時並存兩種以上的語言 若要建立多國語言的網頁, 建議將編碼方式設為 Unicode(UTF-8), 較能避免產生亂碼的問題 August 25, 2007 Page 22
上傳網頁前準備 當你已經申請好網站空間, 並將網頁製作完成準備上傳之前, 應再仔細檢視以下資訊 伺服器所提供支援之服務及上傳方式 網站內容是否正確 August 25, 2007 Page 23
上傳你的網站 上方選單, 檔案 發佈網站 或 切換 遠端網站 檢視, 點選 遠端網站內容 August 25, 2007 Page 24
上傳你的網站 連線成功會自動跳至 遠端網站 檢視畫面 August 25, 2007 Page 25
標示不上傳的網頁 若是有某些網頁尚未完成, 暫時不需上傳到 Web 伺服器, 我們也可以將網頁設定為 不要發佈 選取檔案, 按右鍵 點選 不要發佈 FontPage 的隱藏資料節也不應發佈至網站上 August 25, 2007 Page 26
FrontPage & Flash 動態網頁設計入門 段落格式設定與項目符號 講師 : 陳昭源 CSIE, NTU August 25, 2007
Outline 段落格式設定 段落樣式 段落對齊 段落縮排 段落間距及行距 框線及網底 項目符號與編號 插入水平線 插入日期與時間 HW #02 August 25, 2007 Page 28
段落樣式 針對不同的文字段落, 可設定不同的樣式以方便瀏覽者區分 ; 最快速的方式, 就是套用 樣式選單 內現成的設定 August 25, 2007 Page 29
段落樣式 樣式選單中有 標題 1 ~ 標題 6 共六種段落樣式 ; 標題 1 的字型最大, 依序變小 欲回復原來的字體大小, 套用 一般 樣式即可 August 25, 2007 Page 30
段落對齊 工具列裡段落對齊方式分為 靠左對齊 靠右對齊 置中 與 兩邊對齊 四種模式 HTML tag:align 屬性 若無特別指定, 預設為靠左對齊 August 25, 2007 Page 31
段落縮排 格式工具列 上的 增加縮排 減少縮排 可使文章段落更具有層次感 按下 增加縮排, 段落文字會往右內縮, 每按一次就內縮一次 ; 而按下 減少縮排, 則可將縮排的文字往左回復 August 25, 2007 Page 32
段落間距與行距 當按下 [Enter] 鍵區隔兩個段落時, 兩行之間會自動產生間距 ; 欲自行調整段落間距, 請將插入點移到段落中, 執行上方選單, 格式 段落 August 25, 2007 Page 33
段落間距與行距 在設定縮排 行距時, 若直接輸入數字不指定單位, 預設是以 px( 像素 ) 為單位 也可以在數字後輸入 pt( 點 ) % 做為指定單位 px pt vs. % August 25, 2007 Page 34
框線與網底 框線與網底是作用在整個段落, 而非針對個別文字, 所以在加入框線或網底時, 會將插入點所在的整個段落框住或加上網底 上方選單, 格式 框線及網底 [Shift] + [Enter] vs. [Enter] 若只是想將部分文字加上底色該如何? August 25, 2007 Page 35
框線設定 設定完成後, 以瀏覽器預覽較為準確 August 25, 2007 Page 36
網底設定 August 25, 2007 Page 37
Outline 段落格式設定 項目符號與編號 使用項目符號及編號 有層次的項目清單 自訂項目符號 可摺疊式大綱 插入水平線 插入日期與時間 HW#02 August 25, 2007 Page 38
項目符號及編號 項目符號用以將資料以清單的條列方式來呈現 符號是自動在每個項目前加上編號 August 25, 2007 Page 39
項目符號及編號 插入項目符號 格式工具列, 按下 項目符號, 此時會顯示 這個項目符號, 直接在符號後面輸入文字, 輸入完後再按一次 [Enter] 鍵, 即會自動顯示下一個項目符號 結束 / 取消項目符號 連按兩次 [Enter] 鍵或再按一次 項目符號 編號的使用方式與項目符號相同 August 25, 2007 Page 40
有層次的項目清單 增加縮排 第一次按 增加縮排 時, 項目文字會往下跳一行並除去項目符號, 按第二次才會變成具層次性的條列項目 無法將第 1 個項目向內縮排, 否則其下的項目符號, 就失去對齊的依據了 August 25, 2007 Page 41
自訂項目符號 項目符號預設共有 三種樣式, 而預設編號則是以 1 2 3... 依序排列 項目符號可設定成自己製作或其他小圖示 ; 編號可以英文字母替代 在項目符號 / 編號段落, 按右鍵 清單內容 August 25, 2007 Page 42
自訂項目符號 當你改變了文字的顏色 格式之後, 再套用項目符號或編號, 會發現項目符號與文字很不搭 修正方式 在項目符號 / 編號段落, 按右鍵 清單內容 切換至 一般項目符號 頁次並按下 樣式 鈕 August 25, 2007 Page 43
自訂項目符號 August 25, 2007 Page 44
可摺疊式大綱 將項目清單設計成可摺疊式大綱, 讓一長串的清單能一層層展開, 也可以一層層地收合起來, 給瀏覽者清爽的瀏覽空間 在項目符號 / 編號段落, 按右鍵 清單內容 August 25, 2007 Page 45
可摺疊式大綱 存檔後切換至預覽模式 注意! 摺疊式大綱為使用 JavaScript 程式碼控制, 網頁存檔後, 會在相同網站目錄下出現 outline.js 檔案, 需一併上傳至伺服器, 此功能才會成功執行! August 25, 2007 Page 46
Outline 段落格式設定 項目符號與編號 插入水平線 插入日期與時間 HW#02 August 25, 2007 Page 47
插入水平線 上方選單, 插入 水平線 HTML tag:<hr> August 25, 2007 Page 48
修改水平線 刪除 點選水平線, 按下 [Delete] 鍵 修改 在水平線雙擊滑鼠左鍵 對齊 :align 屬性 px( 像素 ) vs. % 高度即厚度 將水平線變成直線? August 25, 2007 Page 49
Outline 段落格式設定 項目符號與編號 使用項目符號及編號 有層次的項目清單 自訂項目符號 可摺疊式大綱 插入水平線 插入日期與時間 HW#02 August 25, 2007 Page 50
插入日期及時間 上方選單, 插入 日期及時間 每次編輯或更新檔案 FrontPage 將自動更新網頁時間 HTML:<!-- webbot bot= --> August 25, 2007 Page 51
插入日期及時間 日期及時間更新選項 最近網頁編輯的日期 : 以網頁存檔的時間為準 最近網頁自動更新的日期 : 不僅該網頁存檔的日期會更新, 只要包含的共用網頁有變動, 日期與時間也會更新 August 25, 2007 Page 52
Outline 段落格式設定 項目符號與編號 使用項目符號及編號 有層次的項目清單 自訂項目符號 可摺疊式大綱 插入水平線 插入日期與時間 HW#02 August 25, 2007 Page 53
HW #02 製作 [ 自我介紹 ] 網頁 (intro.htm) 內容至少包括下列各項 自我簡介 : 至少一段 150 字 個人資訊 : 使用項目符號列表條列顯示 興趣喜好 : 使用項目符號列表條列顯示 其他 各項內容設定 使用項目符號列表 使用水平線分隔, 寬度為 96%, 置中 若所含內容為條列式, 則設定為層次列表, 初始摺疊 作業完成後請上傳至伺服器個人資料夾, 於留言板回報! 作業繳交 :9/16, before the class starts 參考範例 :http://csietrain.byethost18.com/146/fp01/intro.htm August 25, 2007 Page 54