FrontPage 2000網頁設計
認識網站與網頁
WWW、網站與網頁
認識網頁
網站就是網頁的集合
網站放在哪裡？
以個人網站來說，設計好一個網站，然後向
ISP(Internet Service Provider)申請網站空間•••也有企業公司為省下
WWW成本較高，也向ISP申請，將自己網站•••網頁的組成元素
文字
圖形
超連結
跳躍至各主題頁面的連結
連至其他網站的連結
網站管理者的
E-mail網站的規劃設計與注意事項
網頁的設計考量
不同瀏覽器的觀看效果
螢幕解析度與色彩顯示
Monitor 17" 1024 x 768
Monitor 15" 800 x 600
256
16 bit High Color (64k, 65536)
24 bit True Color (16000000)
字型的設定
為了讓使用者都能顯示網頁的字型，儘可能用系統的預設字型
考量網路的傳輸速度
網站的誕生過程
Step1
：擬定網站主題Step2
：蒐集相關資料常常更新，永續經營
Step3
：規劃網站架構與網頁內容Step4
：開始製作網頁Step5
：上傳與測試Step6
：網站推廣Step7
：更新與維護製作網站所需的電腦配備及工具軟體
建議配備
Pentium200 以上之CPU,32MB以上之記憶體
2.5GB以上之硬碟
8倍速以上之光碟機
全彩顯示能力之顯示卡
麥克風，音效卡，喇叭
數據機
掃瞄器
建議軟體
網頁編輯與網站管理軟體
FrontPage 2000理由：
1.所見即所得網頁編輯方式2.網站管理的功能
影像繪圖軟體
Photoshop處理風景照片、製作標題文字
CorelDraw繪製網站 logo
GIF Animator製作動畫
檢查通訊協定與安裝Personal Web Server
檢查通訊協定
如果電腦能連上
Internet，則表示已經安裝了TCP/IP通訊協定如何確定是否安裝
TCP/IP通訊協定？開始
/ 設定 / 控制台按下 網路 圖示，在 組態 頁次標籤中檢查是否有TCP/IP項目
新增
TCP/IP通訊協定開始 / 設定 / 控制台
按下 網路 圖示，在 組態 頁次標籤中檢查是否有TCP/IP項目
如果沒有安裝
TCP/IP通訊協定，則按下 新增 鈕，新增TCP/IP通訊協定然後選擇廠商為
Microsoft,並選擇新增TCP/IP通訊協定，然後按下 確定設定
TCP/IP安裝完
TCP/IP通訊協定，按下內容 鈕，開啟TCP/IP內容交談窗，然後切換到IP位址頁次如果使用電話撥接的用戶，則點選
ž 自動取得
IP位址如果使用區域網路連上Internet，則點選
™ 指定IP位址
安裝
Client for Microsoft Networks如果有安裝網路卡，並且處於區域網路的環境，則在組態頁次中檢查是否安裝
Client for Microsoft Networks元件，這是為了讓你能連上其他的Microsoft電腦與主機，在 網路 按 下 新增鈕，新增網路元件選擇
選擇
Microsoft,再選擇Client for Microsoft Networks按下
確定鈕替電腦
(主機)取個名字不論是否再單機或區域網路的環境下使用
FrontPage 2000,先幫電腦取一個名字，這樣在安裝伺服器軟體之後，就可以直使用'http://電腦名稱' 的方式來存取自己或他人所建立的網站，在網路交談窗切換到 識別資料 頁次電腦名稱：
工作群組：
電腦說明：
例如電腦名稱為benchome，就可以用http://benchome/網站名稱 的方式來存取自己電腦裡的網站
區域網路的環境下，則除了要設定識別資料外，還要設定DNS的主電腦名稱：
切換到 組態 頁次
選擇網路卡的TCP/IP設定，再按下 內容 鈕
切換到 DNS組態 頁次，ž 啟動DNS，設定主電腦名稱
DNS組態 頁次的內容請參考ISP所提供的資料，撥接用戶則不必設定
設定瀏覽選項
取消自動連線設定
開啟
Inernet Explorer，『工具 / Internet選項』切換到
連線 頁次，選取ž 永遠不撥號連線，即可取消自動連線取消
Proxy設定開啟
InernetExplorer，『工具 / Internet選項』切換到
連線 頁次，按下 區域網路設定 鈕，取消Proxy設定安裝Personal Web Server
認識
PWSPWS(Personal Web Server)個人伺服器的縮寫，能將電腦模擬成伺服器環境，以便透過http://電腦名稱的方式來存取電腦中的網站，並進一步對網站作管理。
如果系統是Windows98,則可以使用Windows98光碟所附之MicrosoftPersonalWebServer來搭配FrontPage2000使用。
哪裡可以下載PWS？
http://www.microsoft.com/windows/ie/pws/default.htm
安裝
PWS將
Windows98光碟中"add-ons\pws",並執行setup.exe，開始安裝PWS選擇一般安裝
設定網站的根目錄，保留預設值即可
C:\Inetpub\wwwroot
安裝FrontPage 2000與更新FrontPage伺服器擴充程式
安裝FrontPage 2000
什麼是FrontPage 伺服器擴充程式
FrontPage 伺服器擴充程式
(FrontPage Server Extensions)適用來搭配伺服器軟體的，其作用可以增加伺服器原本沒有的功能，使伺服器能支援FrontPage所作的網頁，像是FrontPage計數器、FrontPage 所提供的表單、上傳網站、能編輯Internet上的網站不過光是自己的電腦有
FrontPage 伺服器擴充程式還不夠，還要看上傳網頁到Web主機上之後，看該主機是否支援FrontPage 伺服器擴充程式，才能顯示FrontPage所提供的各項效果只要安裝了
FrontPage2000，FrontPage 伺服器擴充程式也一起安裝到電腦中更新FrontPage 伺服器擴充程式
開始
/ 程式集 / Microsoft Office 工具 / Server Extensions管理員 ，開啟MMC 主控台選取電腦名稱，按右鍵，工作
/ 升級擴充程式，即可更新FrontPage 伺服器擴充程式啟動與認識FrontPage的操作環境與檢視模式
控制台
/ 網路 裡是否安裝了Client for Microsoft Networks及TCP/IP通訊協定？是否為電腦取了英文名稱？
是否安裝了
PWS或其他HTTP伺服器？確定
FrontPage伺服器擴充程式是最新版本？啟動FrontPage 2000
開啟FrontPage 2000
認識FrontPage 2000的工作環境
功能表
工具列
檢視列：利用檢視列可以切換各種工作模式
FrontPage的主要工作區會隨著工作模式而變換畫面
FrontPage 的六大檢視模式
網頁模式
網頁模式是
FrontPage2000提供使用者編輯及製作網頁的工作模式，所有編輯網頁的動作都必須切換到此模式下才能進行網頁模式下還包含了
3個標籤，一般標籤是一個 所見即所得 的環境，就可以直接最視覺化的方式來編輯文字、圖片、表格•••，還可以將JavaApplet,ActiveX Control…等元件，雖然不懂HTML語言,也可以製作出專業的網頁FrontPage2000也提供使用者直接編輯HTML原始碼的功能，如果懂得HTML語言，及可以切換到HTML標籤來進行修改
網頁編輯完之後，還可以切換到 預覽 標籤預覽一下
資料夾模式
資料夾模式是類似
Windows檔案總管的一種顯示模式，主要是用來管理網站的檔案項目及結構，可以方便進行檔案的刪除、複製等工作……如果對檔案或資料夾作了任何的變動，如搬移、更名…，
FrontPage會自動更新連結報告模式
可以了解整個網站的更新、連結狀況，都可以一目了然
導覽模式
在導覽模式中可以建立並管理網站的架構，以最快速的方法建構出一個網站的雛形，而且網頁還會依據架構圖的形式自動產生連結關係
改變顯示方式，在預設的情況下，網站配置的顯示方式是由上往下的層次組織架構，但可以利用導覽工具列上的直向
/橫向鈕，使網站配置的顯示方式是由左往右的顯示方式另外也可以選定某一網頁，然後按下導覽工具列上的 只檢視子樹 鈕，及可以將其下的架構顯示出來，若再按一下
只檢視子樹 鈕，即可恢復到整個網站架構超連結模式
使用超連結檢視模式，可以清楚地看到每個網頁之間的連結情形、網頁多少超連結，哪些圖片都一清二楚，若中斷連結可以馬上看出
工作模式
網站編輯及維修工作分派給不同的人，才能獲得更好的效率，工作模式就可以記錄網站編輯的進度，並將未完成的工作分派給其他人
總之，除了網頁模式是用來編輯網頁內容的，另外五個模式都是用來管理網站的架構及連結情況用的
自訂FrontPage 的工作檢視環境
快速建立一個網站
建立新的網站
檔案
/ 開新檔案 / Web選擇一個網站範本
單頁Web
指定要放置網站的資料夾
範本與精靈
檔案
/ 開新檔案 / Web「精靈」與「範本」其實都放在同一個地方，有
"精靈"字樣就是「精靈」，否則就是「範本」。「精靈」會一步一步地指引輸入網站的資料，再依據這些資料建立網站；而「範本」則依據內部預設的架構，建立一個所需的網站絕對路徑與相對路徑
絕對路徑
如果沒有安裝任何的伺服器的軟體，如PWS,則網站放置的位址就會以"C:\My Documents\My Webs\資料夾名稱"的方式表示，這就是絕對路徑相對路徑
如果有安裝任何的伺服器的軟體，如PWS,則網站放置的位址就會以"http://"的方式表示，這就是相對路徑使用
絕對路徑的缺點就是完全用不到Web伺服器功能，也沒有FrontPage伺服器擴充程式的支援，如此用FrontPage所製作的計數器、表單等元件，將無法在自己的電腦預覽，一些需要伺服器端支援的功能，如ASP網頁也無法執行，必須將網頁上傳到Web Server之後，才能看到真正的結果關閉與開啟網站
關閉網站
檔案 / 關閉 Web開啟網站
檔案 / 開啟 Web新增與刪除網頁
在導覽模式新增網站
導覽模式
可以將網站組織成完整的網站架構，而且網頁之間會依據架構圖的形式自動產生連結關係新增網頁
在資料夾清單中按右鍵，選開新網頁
或者在導覽視窗中按右鍵，選開新網頁
更改檔名
在資料夾清單中，點一下檔案名稱上按右鍵，選重新命名
或者在導覽視窗中，點一下檔案圖示上按右鍵，選重新命名
變更網站架構
只要在導覽視窗中直接拉曳網頁圖示，
FrontPage就可以自動調整網頁間的連結關係首頁的檔名
首頁的檔名是由伺服器來決定，
PWS或IIS預設的首頁名稱是default.htm，而有些Web Server或Unix系統的首頁則為index.htm (若沒有安裝伺服器軟體，則FrontPage也會將首頁取名為index.htm)在資料夾模式新增網站
點選網頁要放置的資料夾
按一下
開新檔案 鈕新增網頁在右邊內容窗格中，為新網頁命名
在網頁模式新增網站
在網頁模式
下按一下開新檔案鈕，在右邊內容窗格中，則會開啟一個新的網頁供編輯網頁內容，不過必須將這個網頁存檔，此網頁才會存在於網站中按一下
按一下
儲存檔案 鈕將網頁存檔按一下
變更 鈕變更網頁標題，網頁標題會顯示在瀏覽器的標題列上為網頁取個檔名
按下 儲存 鈕
除了按一下
開新檔案 鈕來增加網頁外，還可以執行 檔案 /開新檔案 / 網頁，則會出現一堆網頁範本供選擇將網頁加入網站架構中
如果在資料夾模式或網頁模式下新增網頁，則這些網頁都是獨立的檔案，沒有連結關係，這時只要從左方的資料夾清單將檔案拉曳到導覽視窗即可
匯入檔案與網站和使文字預段落編排
匯入網站
把以前不是用
FrontPage作的網站，變成FrontPage可以支援的網站把
A電腦中的網站複製或搬移到B電腦上將
Internet上的網站下載下來，作為製作網站的參考匯入
Internet上的網站檔案
/ 開新檔案 / Web開啟 開新檔案 視窗，選擇 匯入Web精靈輸入新網站的名稱
按下
確定再選擇網站來源時，選擇由
從全球資訊網網站 來匯入網站﹝要先連上Internet﹞輸入該網站的網址，下一步
選擇要匯入網站的階層數，是否要限制匯入網站的總容量，以及是否限制所匯入的檔案類型
什麼是「階層」？
若設定為 0 階層，則只有首頁會下載下來，若為1階層 則首頁理所連結到的網頁也會下載下來；………
如果網頁內有ASP,CGI等技術，就不一定能全部下載下來
匯入舊有網站
檔案
/ 開新檔案 / Web開啟 開新檔案 視窗，選擇 匯入Web精靈輸入新網站的名稱
按下
確定再選擇網站來源時，選擇由
ž 從本機電腦或網路的檔案來源目錄按下
瀏覽 鈕，選取網站所存放的位置，按下一步在
匯入Web精靈─編輯檔案清單 中，若有不要匯入的檔案，則可以先選定按下 排除 鈕，將之自匯入清單中移除匯入網站可能導致的錯誤？
就是原先的網站是在FrontPage導覽模式中建立的網站架構，在匯入之後，這些架構將會消失不見，所以在網頁導覽列也會消失，連帶使得網頁中的導覽列也無法顯示。不過只要匯入的網站不是使用FrontPage導覽模式中建立的網站，則可以放心使用 匯入Web精靈
匯入檔案
有時只需要幾張圖片或網頁，就可以使用匯入檔案的功能
先在資料夾模式下選定檔案要匯入的資料夾，然後執行
如果要匯入幾個檔案，請按下
新增檔案 鈕；如果要匯入整個資料夾，請按下 新增資料夾 鈕；如果要匯入整個Web，請按下 從Web 鈕選擇要匯入的資料夾
選擇要匯入的檔案
回到匯入交談窗，選定要匯入的檔案，按下
確定 即開始匯入檔案網站的預覽與瀏覽
預覽網頁
在網頁模式下的預覽標籤來預覽網頁
使用瀏覽器瀏覽
在開啟瀏覽器觀看網頁之前，請先將正在編輯的網頁存檔，然後在執行
檔案 / 用瀏覽器預覽預覽網頁的注意事項
若在網頁中包含由
FrontPage製作成的表單，請不要用"C:\網站地址"的方式來瀏覽，如此將不會透過伺服器來處理表單；要正確地測試表單的功能，請確定伺服器和伺服器擴充程式皆已安裝，並用http://電腦名稱/網站名稱若要避免每次開啟，或預覽自己電腦裡的網暫時，都會要求撥號連線的麻煩，在
IE瀏覽器中的連線設定中選擇不要自動連線選項，而且也不要設定Proxy伺服器，或者將Proxy的設定改為 近端網址不使用Proxy,否則會造成無法順利開啟的現象加入導覽列與共用邊框
認識導覽列與共用邊框
導覽列
導覽列的作用是將網站的架構以超連結導覽列的方式顯示在頁面上
由於導覽列是依據導覽模式中網站層級架構所建立的
共用邊框
共用邊框則是一塊網頁中的區域，凡是放在共用邊框裡的內容就會出現在網站的每一網頁中
共用邊框其實是指網頁四周圍的區域，分為上、下、左、右四區，若在網頁中設立共用邊框，則在共用邊框中的內容就會出現在網站的每一網頁中，因此時常將其和導覽列一起配合使用，成為網頁中負責導覽工作的重要元件
共用邊框除了可以放置導覽列外，還可以放入網頁橫幅…
使用導覽列與共用邊框
設定共用邊框
先在
FrontPage開啟神龍網頁(Home.htm),要每個網頁中加入版權聲明在網頁上按右鍵，選
共用邊框 ，或執行 格式 / 共用邊框在 共用邊框 視窗中選擇要套用到整個網站或是目前的網頁，選 ž 所有的網頁
然後選擇套用的位置，¨ 上，¨ 左，¨ 右，¨ 下；若選擇所有的網頁，又設定上或左邊框，則可以選擇是否要顯示導覽按鈕
加入與編輯導覽列
插入
/導覽列改變導覽文字
工具
/Web設定/導覽套用佈景主題
套用佈景主題
開啟網頁
在網頁上按右鍵，選擇「
佈景主題」鮮豔的色彩
使用中的圖形
背景圖片
使用共用樣式表套用
修改或自訂佈景主題
格式
/佈景主題修改色彩
格式
/佈景主題，開啟佈景主題視窗，按下色彩鈕修改圖形
格式
/佈景主題，開啟佈景主題視窗，按下圖形鈕儲存佈景主題
格式
/佈景主題，開啟佈景主題視窗，按下另存新檔鈕在網頁中編輯文字
輸入文字
將網頁開啟在網頁模式
按
Enter鍵換一個段落按
Shift+Enter鍵換行不換段落顯示換行符號
插入水平線
插入
/水平線修改水平線的屬性
在插入的水平線上雙按左鍵，開啟水平線視窗，修改屬性
如何使文字與段落編排更美麗
段落樣式
格式工具列的
樣式列視窗段落的對齊
靠左對齊，置中對齊，靠右對齊
段落的縮排
減少
縮排，增加縮排段落的間距及行距
格式
/段落改變文字的外觀
格式工具列的字型
列視窗字型
粗體、斜體、底線
字型大小
字型色彩
文字底色
格式工具列的
標示色彩鈕複製文字格式
複製格式鈕
框線及網底
替段落加上框線
格式
/框線及網底/框線替段落加上網底
格式
/框線及網底/網底條列項目使網頁文字排列更整齊
條列項目的應用
項目符號及編號的使用
格式
/項目符號及編號有層次的條列項目
配合
減少縮排，增加縮排，增加層次感自訂條列項目
格式
/項目符號及編號可摺疊式大綱
格式
/項目符號及編號R 開啟可摺疊大綱
適合放在網頁中的圖片格式
在FrontPage中使用的三種圖片格式
GIF格式圖檔
透明背景
交錯圖
非失真的壓縮方式
JPEG格式圖檔
PNG格式圖檔
具有大部分
GIF圖檔之優點，如透明背景、交錯顯示、之外它支援到４８bits,右採取非失真的壓縮方式圖片的使用
加入背景
加入網頁背景
用圖片作為背景
在網頁上按右鍵，選「網頁內容」；或是執行「格式
/背景」，開啟網頁內容/背景視窗其他的背景設定
使用圖片作為網頁背景
在網頁上按右鍵，選「網頁內容」；或是執行「格式
/背景」，開啟網頁內容/背景視窗R 背景圖片，再按下瀏覽 鈕
套用其他頁面的背景
在網頁上按右鍵，選「網頁內容」；或是執行「格式
/背景」，開啟網頁內容/背景視窗R 從別的網頁取得背景資訊，再按下瀏覽 鈕
浮水印
浮水印的效果就是把背景直接嵌在網頁頁面，捲動時不會跟著文件的捲動而捲動
在網頁上按右鍵，選「網頁內容」；或是執行「格式
/背景」，開啟網頁內容/背景視窗R 浮水印
在網頁中加入圖片與動畫
加入圖片
插入
/圖片/從檔案刪除圖片
選取圖片，按一下
Del選擇其他的圖片來源
自Internet上匯入
按一下工具列之從檔案插入圖片鈕
開啟
IE5.0 ,可以直接從瀏覽器上拉曳圖片到FrontPage的網頁中從美工圖案
按一下工具列之從檔案插入圖片鈕
按下美工圖案鈕，開啟多媒體藝廊
儲存檔案
變更資料夾
變更存檔形式
簡單的圖片編輯
調整圖片大小
在圖片上按右鍵，選
圖片內容，開啟 圖片內容/外觀 視窗重新取樣
經過上述
調整圖片大小之後，對檔案的大小並沒有影響，此時按下圖片工具列之 重新取樣 鈕，重新計算調整圖片大小之後之大小搬移圖片位置
善用圖片工具列
在圖片上加上文字
圖片的旋轉與翻轉
調整圖片對比與亮度
剪裁圖片
黑白圖與洗白
立體圖
圖片與文字的排列
圖片與文字的對齊方式
網頁上的圖片旁邊有些文字，則可以選取圖片按右鍵，選
圖片內容/外觀 視窗中選擇不同的對齊方式清除邊界
配合圖片的左右對齊，在執行
插入/分隔設定再談圖片格式、透明圖與自動影像目錄標籤
選取自行加入的圖片，按下右鍵，選
圖片內容/一般 視窗中選擇不同的儲存格式圖片格式
GIF
圖檔格式的特殊屬性設定透明
交錯
JPEG
圖檔格式的特殊屬性設定品質
漸層處理
透明圖
選取圖片
按下圖片工具列之 設定透明色彩 鈕，即可已設圖片的透明背景
自動影像目錄標籤
使用自動影像目錄標籤
選取圖片
按下圖片工具列之
自動影像目錄標籤 鈕設定自動影像目錄標籤
選取圖片
工具
/ 網頁選項，開啟 網頁選項 / 自動影像目錄標籤 視窗作修改圖片的定位與圖層
圖片的定位
絕對位置
選取圖片
按下圖片工具列之
絕對位置 鈕，相對位置
選取圖片
格式
/位置，在 位置 視窗中設定圖片的定位樣式圖層
選取圖片
按下圖片工具列之 上推一層 鈕，後推一層 鈕，來改變圖層順序
或者執行 格式
/位置 ， 在 位置 視窗中設定圖片的圖層順序加入超連結
連到網站內部的超連結
選取文字或圖片
按下
超連結 鈕選擇要連結的網頁
連到WWW的超連結
選取文字或圖片
按下
超連結 鈕在建立超連結視窗中，輸入
WWW的URL讓瀏覽者按下連結時開啟新視窗
選取文字或圖片
按下
超連結 鈕在建立超連結視窗中，指定 目標框架 選「開啟視窗」
超連結強化效果
及當滑鼠指到
超連結上就會變顏色，這就是超連結的強化效果，再網頁上按右鍵，選「網頁內容」/ 背景將R 啟用超連結強化效果
然後按 強化樣式，設定變化的字型與字元間距
建立檔案下載連結與E-mail連結
提供檔案下載服務
先執行
檔案/匯入 ，把要供人下載的檔案匯入網站中選定要加入超連結的圖片或文字
按下
超連結 鈕，開啟建立超連結視窗點選要連結的檔案
連結到電子郵件信箱
選定要加入超連結的圖片或文字
按下
超連結 鈕，開啟建立超連結視窗輸入要連結的電子郵件信箱
建立同一網頁中的書籤
將插入點移到要加入
書籤標記的地方(在所編輯的網頁中)執行
插入/書籤選定要加入超連結的圖片或文字，連結到此書籤上
按下
超連結 鈕，開啟建立超連結視窗拉下書籤列示窗，從中選取要連結的書籤
加入「回到最上面」的書籤連結
將插入點移到要加入回到最上面
書籤標記的地方執行
插入/書籤選定要加入超連結的圖片或文字，連結到此書籤上
按下
超連結 鈕，開啟建立超連結視窗拉下書籤列示窗，從中選取要連結的書籤
連結到其他網頁的書籤
開啟
建立超連結視窗中，選該書籤所在的網頁，再從書籤列示窗中選擇要連結的書籤製作影像地圖
影像地圖的作用
可以使同一張圖片包含不同的超連結
製作影像地圖
認識工具
將選定的圖片分割成好幾個區域，再分別指定不同的超連結
如何做？
選取圖片
利用出現的圖片工具列，選取不同的區域
如按一下多邊形，拉曳出一個區域
放開滑鼠之後，會自動開啟建立超連結視窗，為這區域設定超連結
管理超連結
利用表格來編排網頁的版面
超連結檢視模式
報告檢視模式
認識表格的屬性
建立表格
插入表格
按列上之插入表格鈕
或執行
手繪表格
執行
在出現的工具列上按下
手繪表格 鈕刪除表格線段
��
快速修改表格
表格的選取
選取整欄和整列
選取整份表格
執行
選取單一儲存格
執行
表格/選取/儲存格選取多個儲存格
調整表格寬度及高度
加欄或加列
執行
或是按一下表格工具列之
插入列 鈕；按一下表格工具列之 插入欄 鈕刪除表格及儲存格
選取表格或是儲存格
再執行
合併與刪除儲存格
合併儲存格
選取要合併的儲存格
按一下表格工具列之
分割儲存格
將游標移入要分割的儲存格上
按一下表格工具列之
認識表格的屬性
表格的內容屬性設定
版面配置區
��
��
按下右鍵選 表格內容��
對�� 齊方式��
文繞圖：預設值(使文字可以繞著表格呈現)��
儲存格墊充：設定表格內的文字與�� 格線之距離��
儲存格間距��
指�� 定寬度與�� 指�� 定高度��
��
依百分比：站視窗大小的百分比框線區
��
��
色彩��
亮框線：設定左邊及上方的框線顏色��
暗框線：設定右邊及下方的框線顏色背景區
��
��
R 使用背景圖片儲存格的內容屬性設定
將游標移入儲存格之中
按下右鍵選
��
��
垂直對�� 齊方式：文字與�� 圖片在儲存格中的垂直位置��
指�� 定高度及寬度��
儲存格標題��
不�� 分行分割網頁 ─ 使用框架功能
框架(Frame)與框架頁(Frame Page)
建立框架
準備好要使用的網頁
執行
檔案 / 開新網頁 / 網頁開啟
開新網頁 視窗，並切換到框架頁設定框架的頁面文件來源
框架
建立好之後，把準備好之網頁放入框架中選定上框架〈此時會出現藍色外框〉
然後按下 設定起始網頁 鈕
選擇要放入框架的網頁
再選定下框架〈此時會出現藍色外框〉
然後按下 設定起始網頁 鈕
選擇要放入框架的網頁
調整框架的大小
將指標移到框架的分隔線上，拉曳分隔線
分割與刪除框架
分割框架
選取上或下框架
執行
框架 / 分割框架刪除框架
選取上或下框架
執行
儲存框架頁
建立好框架之後記得按下
儲存檔案 鈕 存檔使用框架的建議
最好
3 個以上的框架設定框架的超連結與屬性
設定框架的超連結
由於每個框架都是依各單獨的網頁，因此要編輯框架中的網頁和編輯一般的網頁沒什麼不同，但是對於超連結來說，預設都是再同一個視窗瀏覽，而框架的超連結，則可以指定要顯示在哪依個框架
加入框架超連結
��
選取上或下框架的圖示上��
按下超連結鈕��
選擇要連結的頁面��
然後在 建立超連結 視窗中，�� 按下 變更目標框架 鈕，�� 選擇要顯示的框架��
然後在 目標框架 視窗中，�� 按下 要顯示的框架��
回到 建立超連結 視窗中，�� 按下 確定 鈕，�� 完成框架超連結的設定工作其他目標框架
��
��
整頁：以全視窗顯示連結的頁面��
開新視窗：開啟一個新的視窗顯示頁面��
父框架：如果是個巢狀框架，�� 則會將�� 頁面顯示在上一層的框架〈所謂巢狀框架，�� 就是在框架中還劃分了其他框架〉框架屬性
選定某一框架，按下右鍵選
框架內容 ，即可以開啟 框架內容 視窗框架的名稱：名稱和頁面標題不同，框架名稱的作用是用來建立框架間的連結，而不會出現在頁面的標題欄上
初始網頁：指定要放在此框架中的頁面，按下
框架的大小
框架的邊界：設定框架中資料與邊框間的距離大小
框架捲動軸：將網頁分割成幾個框架之後，有事因為無法顯示所有的文內容而必須移動捲動軸來調整瀏覽的範圍。在
框架內容 視窗中，可以是需要選擇是否顯示框架的捲動軸框架頁的屬性
在
框架內容 視窗中按下 框架頁 鈕，可以針對框架頁改變其屬性設定框線寬度
是否顯示框線
加入網站背景音樂
加入
IE瀏覽器可以聽到的背景音效在網頁上按下右鍵，選
網頁內容 鈕，開啟 網頁內容 視窗在
背景 視窗中選擇聲音檔設定音效播放次數
��
可以作為背景音效的檔案有：WAV檔(.wav)、MIDI檔(.midi , .mid)、RealAudio檔(.ram , .ra)、AIFF檔(.aif , .aifc , .aiff)、AU檔(.au , .snd)一般多用
MIDI檔來作為背景音樂，因為MIDI音樂的檔案較小，播放時間較長，適合在Internet上傳輸加入IE和Netscape瀏覽器都可以聽到的背景音效
IE和Netscape瀏覽器都可以聽到的背景音效，必須用Plug-in的方式加入，而且這樣可以再網頁上產生一個播放面板
將游標移到網頁中要加入音效的地方
執行 插入/進階/Plug-in ,開啟Plug-in視窗
按下 瀏覽 鈕，來指定音樂檔
大小：設定播放面板的高度與寬度
R 隱藏plug-in
按下
確定 鈕，網頁繪出現一個插頭圖形，這是Front Page表示Plug-in元件的方法，必須在瀏覽模式才可以觀看用超連結加入聲音檔
選取作為超連結的文字或圖片
按下
超連結 鈕，開啟 建立超連結 視窗選取要連結的聲音檔，按下
確定 鈕加入AVI檔案
在網頁中加入影片
插入視訊
將游標移到網頁中要加入視訊檔的地方
執行
選取要加入的視訊檔，按下
確定 鈕(先將avi檔案匯入網站中)設定視訊
在加入的視訊檔上按右鍵，選
£ 在瀏覽器顯示控制項
迴圈數 £ 不限次數
迴圈延遲
R 開啟檔案時 £ 當滑鼠移動時
用超連結加入影片
1.選取作為超連結的文字或圖片
2.按下 超連結 鈕，開啟 建立超連結 視窗
3.選取要連結的影片檔，按下 確定 鈕
動態顯示按鈕與橫幅廣告管理員
動態顯示按鈕
文字動態顯示按鈕
1. 將2. 游標移到網頁中要加入文字動態顯示按鈕的地方
3. 執行 插入/元件/動態顯示按鈕,開啟動態顯示按鈕內容視窗
4. 在按鈕文字欄輸入按鈕的文字，5. 然後按下字型鈕，6. 修改按鈕文字的字型
7. 回到動態顯示按鈕內容視窗，8. 按下 瀏覽 鈕，9. 設定按鈕的超連結(不10. 設超連結亦可)
11. 再來設定按鈕呈現的顏色及動態效果
圖片動態顯示按鈕
要製作
圖片動態顯示按鈕，必須先準備兩張尺寸大小一樣的按鈕圖片執行
插入/元件/動態顯示按鈕,開啟動態顯示按鈕內容視窗按下
自訂 鈕，選擇按鈕要變換的圖片，以及也可以指定動態按鈕的音效回到
動態顯示按鈕內容視窗，依照圖片的尺寸設定按鈕的大小橫幅廣告管理員
先準備幾張尺寸大小相同的圖片
(不超過9張)執行
插入/元件/橫幅廣告管理員 ,開啟橫幅廣告管理員內容視窗按下
新增 鈕，選擇要顯示的圖片設定橫幅廣告管理員的大小，並選擇切換效果、設定圖片顯示的間隔時間
動態HTML效果
網頁的換頁效果
網頁的換頁效果
設定網頁的切換效果
1.
在網頁中執行 格式/網頁切2. 換，3. 開啟網頁切4. 換內容視窗，5. 設定不同6. 的時機所要顯現的網頁的換頁效果7. 按下 事件
��
進入頁面��
離開頁面��
進入網站��
離開網站8
. 選擇網頁切9. 換效果10
. 輸入網頁切11. 換效果持續的時間加入計數器和網站更新日期
加入FrontPage所提供的計數器
加入計數器
��
將�� 游標移到網頁中要加入計數器的地方��
執行 插入/元件/計數器,開啟計數器內容視窗，�� 選擇所要的樣式設定起始人數和固定位數
為您的
計數器灌水，雙按加入的計數，開啟計數器內容視窗加入CGI計數器
加入中山大學的
CGI計數器以開啟一個新網頁為例
將游標移到網頁中要加入
計數器的地方然後按下
HTML標籤，依如下輸入原始碼<p aling=”center”> <img src=”http://counter.nsysu.edu.tw/Count.cgi?dd=40”>
然後按下
儲存檔案 鈕，使用瀏覽器預覽一下中山大學提供了172種計數器字型，其中
”dd=40”，表示使用第40號字型也可以設定起始人數，把
HTML原始碼修改如下<img src=”http://counter.nsysu.edu.tw/Count.cgi?st=200”>，修改成功之後，在換成”dd=?”(以上動作必須在連線之下執行)
7.但是您的網址必須是 http://…edu.tw 才可以使用…….(Are you a student?)
加入「日期及時間」元件
插入
/ 日期及時間加入跑馬燈
快速製作跑馬燈
將游標移到網頁中要加入
跑馬燈的地方執行
插入/元件/跑馬燈,開啟跑馬燈內容視窗跑馬燈的設定
跑馬燈
位置上按右鍵，選擇 跑馬燈內容開啟
跑馬燈內容視窗Java Script
跑馬燈套用別人的
Java Script回到
FrontPage的網頁模式中按下HTML標籤將
HTML標籤整段Java Script搬到網頁中，再修改一下顯示文字即可<script LANGUAGE=”JavaScript”>
<!—
function scroll(seed)
{
varm1=”在此處輸入要顯示的文字 ”
………
………
……….
</script>
認識FrontPage的表單功能
什麼是表單？
建立表單的幕後功臣──
CGI 與 ASPFrontPage的表單功能
在
FrontPage中建立表單的方法使用精靈或範本建立表單
在網頁模式中執行
檔案/開新檔案/網頁(或Web) 命令，在 開新檔案視窗中，有許多的表單精靈與範本從無到有建立表單
1. 表單：插入表單外框及按鈕〈放在同2. 一個表單外框中的表單元件，3. 均視為同4. 一份表單〉
5. 單行文字方塊：單行的文字輸入欄位。多半輸入姓名6. 、身分證等資料〉
7. 多行式文字方塊：多行式的文字輸入欄位。多使用在留言或建議性的表單元件
8. 核取方塊：提供可多選的表單元件
9. 選擇鈕：提供單選的表單元件
10. 下拉式功能表：提供下拉式選單元件
11. 按鈕：當瀏覽者填完表單之後，12. 按下提交〈Submit〉鈕，13. 才能將14. 資料傳到WWW伺服15. 器主機上，16. 觸發處理表單的程式進行處理，17. 然後將18. 結果回傳給瀏覽者。而19. 重新設定則可以讓瀏覽者填寫錯誤時，20. 按下此鈕，21. 更正資料，22. 因此 提交 鈕與23. 重新設定 鈕，24. 是建立表單過程中，25. 不26. 可或缺的元件
27. 圖片：在表單中插入圖片，28. 當作 提交 鈕
29. 標籤：在表單中加入標籤
製作訪客留言板
訪客留言板的運作流程
製作訪客留言板
製作留言板網頁
試著在所謂留言板網頁上加入介紹過的動態顯示按鈕，並將按鈕的連結設至所謂我要留言網頁
製作留言表單
開啟上述之
我要留言網頁將插入點移至要插入表單的位置，然後執行 插入
/表單/多行式文字方塊在此多行式文字方塊上雙按，為此多行式文字方塊設定屬性
名稱：
(如)Result 輸入欄位名稱起始值：
(如)姓名(如)留言
字元寬度
行數
再來為
提交 鈕及 重新設定 鈕來設定，分別在此雙按鈕上雙按左鍵提交
鈕名稱：
值
/標籤：(如)送出留言重新設定
鈕名稱：
值
/標籤：(如)重新填寫Hint：欄位的標籤與名稱
欄位的標籤只是為了方便使用者辨識而已；在FrontPage則以名稱來辨識欄位，當我們按下 送出留言鈕時，送出的資料是每個欄位的名稱與值
設計好之後，在進行存檔，回到瀏覽器中看看結果
製作確認頁面
切回
我要留言網頁中，在網頁上按右鍵，選 表單內容 ，開啟 表單內容視窗，然後按下 選項 鈕開啟 表單儲存結果的選項視窗，切換到 確認網頁標籤
按下瀏覽 鈕選擇已經建立的確認頁面
(如) _private/Confirmation.htm
設定表單結果的儲存方式
切回
我要留言網頁中，在網頁上按右鍵，選 表單內容 ，開啟 表單內容視窗來設定表單結果的儲存方式? 傳送到
檔案名稱：
(如) _private/Result.htm電子郵件地址
然後按下 選項 鈕，開啟 表單儲存結果的選項視窗，切換到 檔案結果 標籤
檔案名稱：
(如) _private/Result.htm檔案格式：
(如)HTML 或 文字檔(.txt)R 包含欄位名稱：儲存表單的結果時，會將欄位名稱一起儲存起來
R 最後的結果：會將表單結果加在檔案的最後，也就是說，最新加入的資料會最後才會看到
顯示留言內容
如果要在所謂留言板網頁上，顯示留言內容〈瀏覽者在 我要留言 網頁上所輸入的內容〉，將插入點移到適當的位置，然後執行 插入
開啟共用網頁內容
視窗中，輸入存放留言結果的網頁，或者按下 瀏覽 鈕去選擇製作討論區
使用「討論區
Web精靈」建立討論區1. 開啟討論區Web精靈
開啟網站，在網頁模式中，執行
檔案/開新檔案/Web選擇
討論區Web精靈勾選新增到目前的
Web中開啟討論區
Web精靈，按下一步2. 設定討論區內容
設定討論區中所包含的表單，全部勾選
輸入討論區的標題，以及存放討論區資料的資料夾名稱〈建議使用預設值即可以〉
選擇討論區中藥瀏覽者填寫的欄位
? 主題，建議
捨定是否每個瀏覽此討論區的人都可以留言
? 否，每個人都可張貼文章
3. 設定討論區的外觀
張貼文章的順序
? 從最新到最舊
是否讓討論區的首頁成為此網站的首頁
? 否
設定在顯示搜尋表單時，想要列出的相關資訊
? 主題，大小，日期
設定討論區要套用
的佈景主題按
選擇
討論區要以何種框架呈現4. 結束討論區Web精靈
按下
完成 鈕，就可以關閉討論區Web精靈將討論區框頁加入導覽列
因為
討論區剛剛加入網站中，尚未加入導覽架構中，所以切換到導覽模式中，然後再將討論區網頁拉曳到網站中修改討論區
1.刪除不要的欄位
多出來的表單欄位，選取之後，直接按下DEL鍵即可刪除
2.修改欄位寬度
在表單欄位上按右鍵，選擇 表單欄位內容，然後在文字方塊內容 視窗中設定
修改大彙總
討論區的秘密
1. 張貼文章表單
開啟討論區網頁，在表單框線內按下右鍵，選擇 表單內容 ，開啟 表單內容 視窗
? 傳送至其他 討論表單處理程式
按下
表單內容 視窗中，按下 選項 鈕，可以看到討論表單處理程式的詳細設定��
目錄
(瀏覽者所張貼文章都儲存在此資料夾)表單欄位
(要顯示在目錄中的張貼資料,如主題,寄件者)R 從最新排到最舊
�� 文章頁次
設定共用網頁的頁首和頁尾(建議不要更動此設定)
�� 確認網頁頁次
指定張貼文章成功後，所要顯示的確認網頁
2. 搜尋文章表單
開啟搜尋文章表單網頁，然後在表單上雙按左鍵，開啟搜尋表單內容/搜尋表單內容 視窗
�� 輸入項標籤
�� 字元寬度
�� [開始搜尋]按鈕標籤
�� [清除]按鈕標籤
開啟搜尋表單內容/搜尋結果 頁次
要搜尋的文字清單
日期格式
時間格式
顯示選項
R 顯示檔案日期
R 顯示檔案大小
加入Java Applet
什麼是Java Applet
Java
市一種程式語言，而用Java 語言開發出來的程式員，就叫做Java Applet(副檔名為.class)。設計者只要在網頁中加入Java Applet在設定一些參數，即可以做出各樣得特殊效果，但是Java Applet，不是.exe檔能單獨執行，逼需要有支援Java 的瀏覽器才能解讀並執行在
Internet有許多地方可以Download Java Applet(免費的！)，下載之後可以放自己的網站上，提供以下的網站供參考：|
下載 Java Applet |
|
| DOB網頁製作百寶箱 | http://www..dob.com.tw/ |
| The Java Boutique | http://javaboutique.internet.com/ |
| Gamelan | http://www.gamelan.com/ |
| The Source For Java Technology | http://java.sun.com/applets/index.html/ |
| Java Shareware.com | http://www.javashareware.com/ |
將Java Applet匯入網站
要在網頁中加入Java Applet之前，逼需先將Java Applet檔案匯入網站中
(Web)1.在資料夾模式下選定檔案要匯入的資料夾，然後執行 檔案 / 匯入
如果要匯入幾個檔案，請按下
新增檔案；如果要匯入整個資料夾的檔案，請按下 新增資料夾；回到
匯入視窗，選定要匯入的檔案，按下 確定鈕加入Java Applet
檔案都會入以後就可以在網頁中
加入Java Applet1. 將2. 插入點移到要加入Java Applet的地方，3. 然後執行 插入
/進階/JavaApplet,開啟Java Applet視窗，4. 設定Java Applet的檔名5. 及路徑6.
Applet來源：輸入Java Applet的檔名7.含有
Applet的基底URL：輸入JavaApplet所在的資料夾接下來按下 新增 鈕，設定Java Applet的參數，比如背景為黑色…..
名稱：
BackgroundColorR 指定值
值：000000(表示黑色，此為16進位RGB色彩表示法)
5.設定此Java Applet的大小
加入HTML與CSS語法
申請免費的網站空間
將網站出版至Internet
推廣所出版的網站
網站的的更新、管理與維護
關於網站製作的二三事
