FrontPage & Flash 動態網頁設計入門 FrontPage2003 初探 講師 : 陳昭源 CSIE, NTU September 9, 2007
Outline 認識 FrontPage 工作環境 網站的六種檢視模式 網頁的四種檢視模式 網頁檔案的檢視模式 September 9, 2007 Page 2
認識 FrontPage 工作環境 September 9, 2007 Page 3
認識 FrontPage 工作環境 工具列 September 9, 2007 Page 4
認識 FrontPage 工作環境 工具列 September 9, 2007 Page 5
Outline 認識 FrontPage 工作環境 網站的六種檢視模式 網頁的四種檢視模式 網頁檔案的檢視模式 September 9, 2007 Page 6
網站的六種檢視模式 資料夾 檢視模式 September 9, 2007 Page 7
網站的六種檢視模式 遠端網站 檢視模式 September 9, 2007 Page 8
網站的六種檢視模式 報告 檢視模式 September 9, 2007 Page 9
網站的六種檢視模式 導覽 檢視模式 September 9, 2007 Page 10
網站的六種檢視模式 超連結 檢視模式 September 9, 2007 Page 11
網站的六種檢視模式 工作 檢視模式 ( 多人編輯環境使用 ) September 9, 2007 Page 12
網站的六種檢視模式 工作 檢視模式 當網站事務分派給專門的人員來負責時, 在 工作檢視模式 中即可追蹤管理這些分派的工作 工作檢視模式 除了必須是網路環境外, 還需要一部伺服主機, 用來存放共同完成的網站內容, 且伺服主機還必須安裝 Web 伺服軟體及 FrontPage Server Extensions September 9, 2007 Page 13
Outline 認識 FrontPage 工作環境 網站的六種檢視模式 網頁的四種檢視模式 網頁檔案的檢視模式 September 9, 2007 Page 14
網頁的四種檢視模式 設計 檢視模式 所見即所得 (WYSWYG,What You See is What You Get) September 9, 2007 Page 15
網頁的四種檢視模式 分割 檢視模式 September 9, 2007 Page 16
網頁的四種檢視模式 程式碼 檢視模式 September 9, 2007 Page 17
網頁的四種檢視模式 預覽 檢視模式 September 9, 2007 Page 18
Outline 認識 FrontPage 工作環境 網站的六種檢視模式 網頁的四種檢視模式 網頁檔案的檢視模式 September 9, 2007 Page 19
網頁檔案的檢視模式 若是在編輯網頁的同時, 還想全盤掌控網站資料夾內的檔案, 可執行 檢視 / 資料夾清單 命令, 在視窗的左邊開啟 資料夾清單 窗格 September 9, 2007 Page 20
網頁檔案的檢視模式 資料夾清單 September 9, 2007 Page 21
網頁檔案的檢視模式 導覽模式 September 9, 2007 Page 22
FrontPage & Flash 動態網頁設計入門 FrontPage2003 網頁製作 講師 : 陳昭源 CSIE, NTU September 9, 2007
Outline FrontPage2003 製作網頁初體驗 新增與開啟網頁 文字編輯與格式設定 網頁註解 HW #01 September 9, 2007 Page 24
新增空白網頁 由網站的 資料夾 模式新增 切換到網站的 資料夾檢視, 按右上角 新增頁面 鈕 September 9, 2007 Page 25
首頁的名稱是 default 或 index? 首頁的檔名是由伺服器的設定來決定的 例如,IIS 預設的首頁名稱是 default.htm, 而有些伺服器, 如 Apache 的預設首頁則是 index.htm 如果你沒有安裝任何伺服器, 則 FrontPage 預設會將首頁取名為 index.htm 當你將網站上傳到網路上的主機時, 首頁檔名請依據對方伺服器的設定而自行變更 一般 HTML 網頁的副檔名為.htm 或.html September 9, 2007 Page 26
新增空白網頁 由網站的 資料夾 模式新增 September 9, 2007 Page 27
新增空白網頁 由 資料夾清單 新增網頁 September 9, 2007 Page 28
新增空白網頁 由 資料夾清單 新增網頁 新增檔案後, 檔案搬移 複製 刪除 更名 等操作的方式, 和在 Windows 中使用檔案總管相同 在資料夾模式進行網站內檔案的管理,FrontPage 會自動更新連結 ; 但若是在檔案總管修改, 就得一個個重新建立連結 建議你, 善用 FrontPage 來管理網站檔案, 較有效率哦! September 9, 2007 Page 29
新增空白網頁 由 一般 工具列新增網頁 September 9, 2007 Page 30
新增空白網頁 由 一般 工具列新增網頁 September 9, 2007 Page 31
新增空白網頁 由 一般 工具列新增網頁 在任何的檢視模式下, 只要按下 一般 工具列上的 建立新的網頁 鈕, 就會新增一個空白的網頁, 並開啟該網頁方便你進行編輯 此時新網頁尚未儲存在任何一個資料夾下, 當你按下 儲存檔案 鈕, 並選擇要儲存網頁的位置後, 才會真正將網頁儲存 September 9, 2007 Page 32
新增空白網頁 由 工作窗格 新增網頁 September 9, 2007 Page 33
開啟網站內的網頁 在欲編輯的檔案上雙按, 即可開啟網頁進行編輯 September 9, 2007 Page 34
開啟網站外的網頁 按下工具列的 開啟舊檔 September 9, 2007 Page 35
在網頁中輸入文字 開啟預編輯的.htm 檔, 將網頁切換到 設計檢視 September 9, 2007 Page 36
在網頁中輸入文字 輸入文字時, 若一行的長度超過視窗顯示的範圍, 此行文字會自動折到下一行 ; 自動折行的好處是不管瀏覽器視窗調成多大或多小, 在瀏覽這個網頁時, 都會依視窗大小自動換行 按 [ Enter] 鍵換行 - 新段落 在 HTML 原始碼中, 文字將被 <p></p> 包圍 按 [Shift]+[Enter] 鍵換行 - 換行不換段落 在 HTML 原始碼中, 文字後端會加上 <br> 標籤 September 9, 2007 Page 37
在網頁中輸入文字 按下工具列的 全部顯示, 可顯示網頁中的換行符號, 再編輯時較容易分辨折行的方式及位置 ; 再按一次 全部顯示, 可將符號隱藏 September 9, 2007 Page 38
設定文字與網頁邊界的距離 在網頁上按右鍵 網頁內容 進階 September 9, 2007 Page 39
插入特殊符號 上方選單, 插入 符號 September 9, 2007 Page 40
預覽網頁 設計網頁時要培養預覽網頁的好習慣 雖說網頁的預覽模式可預覽網頁, 但有些效果, 如表單, 還是得透過瀏覽器來觀看才會準確, 也可藉此在瀏覽器中檢測網頁間的連結是否正確 September 9, 2007 Page 41
預覽網頁 September 9, 2007 Page 42
預覽網頁 如果編輯過網頁再進行預覽, 則會出現提示訊息 每一種瀏覽器對於 HTML 語言可能會有不同的解讀方式, 因此同樣的設計內容, 在不同的瀏覽器中也許會顯示不同的效果 September 9, 2007 Page 43
設定字型 字型列示窗 列出目前電腦裡所安裝的各種字型, 先選取文字, 再拉下列示窗並選擇字型 注意哦! 如果瀏覽者的電腦中沒有安裝你所設定的特殊字型, 則會以瀏覽器預設的字型來顯示 ( 通常是新細明體 ) 若需要使用特殊字型, 建議製作成圖片再放至網頁 September 9, 2007 Page 44
設定 Fontpage 編輯時預設字型 上方選單, 工具 網頁選項 September 9, 2007 Page 45
設定 Fontpage 編輯時預設字型 這裡指定的字型不是出現在瀏覽器上的字型, 而是在編輯網頁時, 若沒有特別為文字指定字型便以這裡所設定的字型顯示 真正在瀏覽器上出現的預設字型會依每部電腦瀏覽器的設定而異, 這裡只是設定在編輯網頁時想看到的字型而已 September 9, 2007 Page 46
粗體 斜體與底線 想要加強文字的語氣或使文字更突顯時, 可為文字加上粗體 斜體與底線三種樣式的變化 September 9, 2007 Page 47
字型大小 工具列上的 字型大小列示窗 可用來改變選定文字的大小, 共有 1~7 等級 (1 級最小,7 級最大 ) 選取文字 拉下字型大小列示窗 選擇尺寸 September 9, 2007 Page 48
字型大小 網頁文字的大小並非絕對, 會依據瀏覽者的螢幕大小 顯示解析度 Windows 使用大字型或小字型等造成顯示結果不同 ; 瀏覽器亦可以直接將所有文字放大或縮小瀏覽 7 個等級之間的大小比例是固定的, 不會有 7 級字比 6 級字小的情形發生 September 9, 2007 Page 49
字型色彩 September 9, 2007 Page 50
字型色彩 September 9, 2007 Page 51
字型色彩 在顏色選單中點選 其他色彩, 可有更多樣選擇 September 9, 2007 Page 52
文字底色 替文字加上底色可達到醒目提示的效果 September 9, 2007 Page 53
其他文字格式設定 移除文字格式設定 選取文字 格式 移除格式 比較特殊的文字效果, 並沒有出現在工具列裡, 必須在 字型視窗 中另做設定 選取文字 格式 字型 選取文字 按右鍵 字型 September 9, 2007 Page 54
其他文字格式設定 September 9, 2007 Page 55
其他文字格式設定 September 9, 2007 Page 56
調整文字間距與上下位置 字型視窗 字元間距 September 9, 2007 Page 57
調整文字間距與上下位置 設定完成字元間距與位置後, 須切換到預覽模式或是在瀏覽器中才能看到效果哦! September 9, 2007 Page 58
複製文字格式 可將目前選定的文字格式, 複製到其它的文字上 September 9, 2007 Page 59
複製文字格式 將變成小刷子的指標刷到預套用格式的文字上 September 9, 2007 Page 60
複製文字格式 若按下 複製格式 後想取消動作, 再按一次即可 若欲套用格式的文字區塊不只一個, 可連按兩下 複製格式 進入多重套用模式; 套用完畢, 再按一次即可解除狀態 September 9, 2007 Page 61
插入註解 為了在編輯文字或維護網頁時更方便, 我們可以在文件中加入註解文字 註解不會破壞網頁的版面, 只有在編輯時才會看到 將插入點移到想要加入註解的地方 上方選單, 插入 註解, 在註解視窗中輸入文字 September 9, 2007 Page 62
插入註解 註解文字在編輯模式下會以紫色文字表示 September 9, 2007 Page 63
插入註解 修改註解的內容時, 請將指標移到註解上, 指標呈狀, 再雙按註解, 就會直接開啟註解視窗 September 9, 2007 Page 64
Outline FrontPage2003 製作網頁初體驗 新增與開啟網頁 文字編輯與格式設定 網頁註解 HW #01 September 9, 2007 Page 65
HW #01 準備工具 家中請自備 Microsoft FrontPage2003 個人網站第一頁! 於網頁空間中上傳個人網站中的首頁 內容需呈現三段文字 段落標題為四號字體, 粗體, 並以黃色底色強調顯示 段落內容以標楷體顯示, 內容字數須大於 50 字 第一 三段設定為自動換行 ; 第二段設定每行 20 字換行 請將完成之網頁上傳至伺服器, 並於留言板回報! 最後繳交日期 :09/09 上課前 September 9, 2007 Page 66
HW #01 上傳網頁方式 使用 FrontPage 2003( 使用 FrontPage 管理網站 ) 使用 FTP 軟體 -SmartFTP( 推薦使用 ) 伺服器位址 csietrain.byethost18.com 上傳目錄 csietrain.byethost18.com/htdocs/ 期號 /FP 學號 請自行建立以 FP 學號 為名之資料夾 凡不在個人資料夾內之所有檔案將被刪除! 登入將提示輸入帳號 密碼 上傳完畢可至瀏覽器瀏覽結果 http://csietrain.byethost18.com/ 期號 /FP 學號 / September 9, 2007 Page 67
國內常見免費網頁空間 Hinet ( 需為 Hinet ADSL 客戶 ) http://www.myweb.hinet.net/ So-net ( 需為 So-net ADSL 客戶 ) http://home.so-net.net.tw/ 台灣固網 ( 需為台灣固網或其相關客戶 ) http://tinyurl.com/25s526 Yahoo! GeoCities http://geocities.yahoo.com/ September 9, 2007 Page 69
課堂補充 常用快速鍵 FrontPage2003(Office 系列皆適用 ) Ctrl + s 存檔 Ctrl + c 複製 Ctrl + v 貼上 瀏覽器 Ctrl + F5 重新整理 Ctrl + +/-/ 滾輪 字型放大 縮小 HTML <!-- 這是註解 --> 註解文字 September 9, 2007 Page 70