Frontpage的表單設計

想做出如聯絡站長的表單式E-MAIL嗎？本範例一般免費網頁空間就可製作囉！



選擇開新網頁


選擇表單網頁精靈


按下一步


按新增鈕


選聯絡資訊


勾名稱即可


採用預設值


採用預設值


完成精靈設定


產生畫面如下


插入新的一列


現在要新增多行的文字方塊


修改畫面如下


切換到HTML頁面，刪除以下反白文字


加入以下字串，修改E-MAIL為你自己的MAIL帳號


自己測試一下是否能收到E-MAIL吧！

FrontPage的討論區設定

首先要跟大家先說明一下，你的網頁空間必須有FrontPage Server Extensions的伺服器功能，才可以使用以下FrontPage討論區精靈的設定建立自己的討論區

確定你的網頁空間有支援後使用FrontPage2000就能做出如本站的討論區功能，不必會CGI、ASP、資料庫等技術喔！(不過大部分免費網頁都無支援FrontPage Server Extensions的伺服器功能！)

先從檔案/開新檔案/Web進入


點選討論區精靈web精靈，如果是直接連上線上修改就勾選新增到目前的web，不然就要等全部設定完再用發送web去更新了。


點選下一步


通常是全部勾選


命名討論區標題




一般用途選第一個即可


通常一般討論區不會去設定要註冊


通常選從最新到最舊瀏覽者比較好看到最新資料


記得選否，不要選是喔！


一般設定為主題，大小，日期


這個步驟則看您自己喜好囉！


完成後記得自己先留言測試一下是否功能正常，不過搜尋功能只能找到英文與數字，無法支援中文...


例如下圖是完成的畫面

FrontPage的文字編輯

介紹一些關於在FrontPage裡的文字編輯方式...

★加入文字：文字是一個網站最基本的東西
若您有使用過文書處理軟體(如word)，加入文字是非常簡單。 將你的游標指到你要加入文字的地方。便可將文字加入。

★改變文字的大小、字型
改變文字大小、字型的方法有兩種：
可以直接點選格式工作列，便可以改變。


文字大小分為７級(8,10,12,14,18,24,36)


也可以由功能列上的"格式"→"字型"來改變。＜注意＞使用字型時，若瀏覽者的電腦無安裝你所設定的字型，將無法看出；一般電腦皆有的字型為：細明體及標楷體

★變更文字顏色：讓文字看起來較多色彩


要改變文字的色彩較快的方法，我們可以先將要改變的文字選取起來，然後點選格式工作列中的，便可以改變。也可以由功能列上的"格式"→"字型"來改變。

★變更文字樣式
要使用粗體、斜體及加底線時，一樣將要改變的文字圈選起來，然後點選格式工作列中的(由左到右為：粗體、斜體、加底線)，便可以改變。

也可以由功能列上的"格式"→"字型"來改變。


★文字特殊效果
要使文字更多彩多姿，我們可以設定文字的特殊效果：由功能列上的"格式"→"字型"便可以來改變一些文字特殊效果



PS:因為IE不支援閃爍，所以這效果只能在Netscape看出來。　　

★段落設定
將一段字用滑鼠左鍵拖曳反白，選擇格式/段落(或按滑鼠右鍵選擇段落)，會出現如word編輯時的段落設定畫面


★項目符號
選擇格式/項目符號及編號


也可以指定圖片


★註解
選擇插入/註解
會出現在FrontPage編輯中才看得到的註解功能

FrontPage網站管理(WEB資料夾、導覽)

關於使用FrontPage進行網站管理(WEB資料夾、導覽)...

首先在硬碟上開一個目錄，選FrontPage裡面的檔案/開啟web



即能夠將此目錄轉換成web資料夾，以後網頁作新增刪除等就用FrontPage來管理。


選檢視/導覽。


按滑鼠右鍵選擇開新網頁(例如下圖是一個網站的導覽範例)。


其實不做導覽也不會有礙於網站建構，但是做了導覽會對於以後要使用共用邊框與導覽列有絕對的影響

FrontPage基本操作界面介紹

要學好FrontPage，首先要先瞭解他的操作介面，FrontPage有分成97、98、2000、2002、2003等版本，介面雖稍有差異但使用原理是近似的。

安裝完Frontpage後，要啟動Frontpage，只要從”開始”→”程式集”中，執行”Microsoft Frontpage”，便可以開啟Frontpage，基本的介面如下。



首先先來認識Frontpage中，常見的幾個工具列：



除了一開始會出現的工具列外，我們可以從功能表列上的檢視→工具列，點選其它的工具列，將其開啟或關閉。
　
選擇工具/WEB設定，如果你的網頁語系是繁體中文的話，記得確定語系標籤裡是設定成為Big5碼或是UTF-8。

抽離網頁上CSS的小工具

如何去觀看網頁是否有使用CSS做編排？推薦使用微軟開發的Internet Explorer Developer Toolbar這個IE瀏覽器外掛軟體。

您可以下載http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en該軟體安裝後，即可在IE瀏覽器的右上角按下Internet Explorer Developer Toolbar圖示開啟此功能，例如以Yahoo首頁為例http://www.webspace.com.tw/E-C/images/yahoo-css1.jpg目前是這樣的正常顯示，您到瀏覽器下方的Internet Explorer Developer Toolbar裡選擇"Disable"勾選"All CSS"，就可以看到Yahoo首頁被抽離CSS的畫面http://www.webspace.com.tw/E-C/images/yahoo-css2.jpg，這樣做的另一個好處是可以使搜尋引擎更容易分析找到您的網頁，對於在搜尋引擎裡的排序也會有幫助。

目前台灣的業者很少有運用這些技術來作為版面配置製作網站的，大多只有把CSS拿來運用在一些文字連結變色等小層面零碎運用，其實相當的可惜。

附帶說明一下，如果您使用IE8，則已經有內建這項工具，不需要另行安裝。