FrontPage單元

[我要回到網頁設計單元]

檔名../web-design/web-design-frontpage.htm

首先接觸到的是frontpage,因為使用容易......

[點選]表示用滑鼠左鍵......[右鍵]表示用滑鼠右鍵.......[雙擊]表示用滑鼠左鍵點兩下......

　[個人網頁製作瓶頸研討]......請輸入您的帳號及密碼......

=>

-資料夾之相互關係

web-design-->網頁設計單元

web-design-frontpage.htm->本網頁

frontpage->本網頁呼叫之資料夾

folders->專門放置資料夾之圖片

 thumbs.db

folder.jpg

最大之資料夾

folder-1.jpg

1號資料夾

folder-2.jpg

2號資料夾

folder-3.jpg

3號資料夾

folder-hor.jpg

水平線條

folder-l.jpg

L形線條

folder-tee.jpg

T形線條

folder-top.jpg

總資料夾

folder-ver.jpg

垂直線條

images->專門放置應用之圖片

 thumbs.db

Label-A.jpg

圖片A

||||||||||||||||||||||||......

||||||||||||||||||......

以此類推......

Label-Z.jpg

圖片Z

sounds->專門放置聲音檔案

sound-a.wav

聽一下sound-a.wav

音效A

||||||||||||||||||||||||......

||||||||||||||||||......

以此類推......

sound-z.wav

聽一下sound-z.wav

音效Z

videos->專門放置影像檔案

 thumbs.db

mouse.avi

看一下mouse.avi

老鼠動畫-810KB-需要點時間下載......

[我要回到網頁設計單元]

第零回:照著做,趕快把網頁建立起來,加油!加油!!加油!!!......

第壹回:FrontPage是什麼碗羔......

第貳回:您必須準備什麼......

第叁回:FrontPage的安裝及伺服器擴充程式安裝設定及更新......

第肆回:啟動FrontPage開動啦......

第伍回:檢視及管理您的網站......

第陸回:如何編輯您的網頁文字......

第柒回:如何插入美美的照片......

第捌回:如何架構及規劃--內部超連結及外部超連結......

第玖回:如何建立表格及儲存格......

第拾回:如何使用內建之精靈及範本......

第拾壹回:框架及框架頁......

第拾貳回:互動式網頁--利用CGI及ASP的敘述語法......

第拾叁回:如何使用[插入][元件]......

第拾肆回:如何讓您得網頁繼續動起來......

第拾伍回:更炫的特殊效果......

第拾陸回:HTML的敘述語法......

第拾柒回:CSS語法及超連結不加底線......

第拾捌回:網頁上傳方式......

第拾玖回:建構中......

第貳拾回:建構中......

第壹回:FrontPage是什麼碗羔......

01.1.就是網頁製作的編輯軟體啦.....

WYSIWYG--What You See Is What You Get......意思就是說,如果您使用[線上更新]的方式,您做的

網頁結果就會是瀏覽器看到的結果......

回到選單

第貳回:您必須準備什麼......

02.1.[Web Page][Home Page].....

[Web Page]網頁......網頁之總稱......;[Home Page]網頁的首頁......

[Web Server]所有的網頁就是放在網頁伺服器裡面.....

您可以使用文字. 圖形.以及超連結來展現您的網頁.....

****使用Netscape 及 Internet Explorer測試您的網頁是必須要做的一項工作......

02.2.螢幕解析度及螢幕大小.....

以目前來說......15吋的螢幕不管是LCD或CRT,解析度調在800*600應該是不錯的一個選擇.....

02.3.字型的選擇.....

一般來說......您只能選擇[細明體][新細明體][標楷體]......

因為您使用別種字體別人看到的結果也會是內定字體.....

唯一的方法是將美美的字體處理成照片方式......但請記得容量大小的問題......否則讀取不易......

回到選單

第叁回:FrontPage的安裝及伺服器擴充程式安裝設定及更新......

03.1.[伺服器擴充延伸程式FrontPage Server Extensions]

不管是window-98se,window-xp-home,win-xp-professional亦或是win-2000-professional

甚至是linux-w/s,哪管他是白貓或是黑貓,只要是能捉老鼠的就是好貓.....

最重要的是:您必須確定您的電腦有[伺服器擴充延伸程式FrontPage Server Extensions]

否則您沒有辦法把FrontPage的功能發揮到極至......

window95/98+建議搭配PWS4.0[Personal Web Server]

Win-2000或NT SERVER 4.0+建議搭配IIS4.0[Internet Information Server]

03.2.如何安裝PWS[win-95/98se]

03.3.您必須先灌製伺服器擴充程式,而後再灌製Frontpage-2000...

回到選單

第肆回:啟動FrontPage開動啦......

04.1.[開始][程式集][FrontPage].....

請建立捷徑在桌面上......千萬不要告訴我......您不會......

左邊有6個按鈕......搞清楚他要做什麼用.....

網主已經將您的首頁都設定好了.....請千萬不要改變您的首頁檔名......OK!!!!!!

如果您使用[線上更新]的方式,由您的首頁開始......趕快改變內容吧......[儲存]OK!!!!!!　

04.2.--->C:\My Documents\My Webs\......

在您的電腦硬碟區......我的文件夾內......有一個My Webs......這就是製作網頁存放的地方......

製作完成後再[發送WEB]......至網主的伺服器......這種方式為[絕對路徑]之製作方式.....

優點是--您製作的網頁在您的電腦會有備份......

缺點是--用不到擴充伺服器的功能.....如計數器.表單.等特殊元件....需上傳之後才知道結果......

04.3.開啟您自己的網站......

FrontPage之線上即時更新[http://開啟web]

[FP-http1.]首先必須確定您的電腦有伺服器擴充程式......

[FP-http2.]啟動frontpage...

[檔案][開啟web]於資料夾名稱輸入[http://www.dr-cabling.idv.tw/~cat-and-dog]...~您的個人網域

以[Rainie-雨凝心境]為例---輸入[http://www.dr-cabling.idv.tw/~rainie/]

然後按[開啟]...[輸入使用者名稱及密碼]您的個人網頁就會呼叫到您的面前來了......

請記住....這是直接呼叫伺服器的檔案到您的面前..並不是在您的電腦製作網頁喔!!切記!!!

[FP-http3.]...[檔案][最近使用的web][點選您要進入的web....][輸入使用者名稱及密碼]....ok.....

04.4.開啟新的網頁......

啟動FrontPage...

[檔案][開新檔案][網頁]......[一般][框架頁][樣式頁]......您都可以試試看喔......

如果這一頁為[自我介紹]......您可以將此頁[New Page.htm]

改成[about.htm][myself.htm][me.htm]都可以...... 

然後在您的首頁....您想要的地方.....打一個[自我介紹]...然後[右鍵][超連結]指向[about.htm]即可......

04.4.FrontPage的工作環境......

*[檢視][檢視列]啟動或關閉檢視列......

*[檢視][資料夾清單]啟動或關閉資料夾清單......

*[工具][選項][一般][v]當FrontPage啟動時,自動開啟上次開啟的web.....打勾[確定]......

*[工具][選項][設定編輯器][新增]檔案類型......[jpg]編輯器名稱.....[photoshop]

因為我的電腦裡面有photpshop及photoimpact這兩個編輯圖片的程式,

因為我個人比較習慣使用photoshop,所以我指向photoshop......[瀏覽]

指向photoshop程式的路徑......[確定]......以後您只要編輯照片時,他就會自動啟動photoshop......

回到選單

第伍回:檢視及管理您的網站......

05.1.網頁模式.....

就是您製作網頁的地方......

[一般]為圖形介面,您製作的網頁,您眼睛看到的,就是網頁的呈現結果......

[HTML]為文字介面......這裡牽涉到敘述語法的使用,可能稍微難了一點....但簡單講利用敘述語法

可以由電腦幫您處理大量的變更指令,例如照片之排序及檔名變更,或是大量的照片尺寸要同時

改變大小,就可以進入此模式利用[編輯][取代]以新名稱取代舊名稱.....再回到[一般]您就會發現

原本您手動調整了一個小時的工作,電腦在一分鐘內就全部幫您完成了.....

[預覽]......當然就事先看看呈現面的結果囉!!!

05.2.資料夾模式...... 

其實他就是您網頁的檔案總管......千萬不要告訴我您不會用......

請建立資料夾......並善於利用及索引.....千萬不要將您的網頁都放在根目錄之下,因為會雜亂無章

又難以管理......

[檔案][匯入]......匯入您要的檔案至根目錄或您的資料夾內......

05.3.報告模式......

FrontPage[檢視][報告][網站總灠]......

*[所有檔案]......

*[圖片]......

*[未連結的檔案]......

在您個人網頁裡的檔案或圖片沒有連結出來使用......雙擊點開就可以知道是在哪個資料夾或是哪個網頁裡面......

*[連結的檔案]......

*[慢速網頁]......

簡單講就是讀取這個網頁所需的時間太久......可以切割成兩個部分......分成上集及下集......或是切割成三個部分......分成上集......中集......下集......

*[較舊的檔案]......

*[最近增加的檔案]......

*[超連結]......

*[未檢查的超連結]......

雙擊點開就可以知道是哪些檔案超連結未檢查......[編輯][全選]右鍵[檢查]......電腦就會自動一個一個檢查......連結失敗的話.....就趕快檢查您的網頁......

*[中斷的超連結]......

雙擊點開就可以知道是哪些檔案超連結中斷......趕快修改......

*[外部超連結]......

*[內部超連結]......

*[錯誤元件]......

*[未完成的工作]......

*[未使用的佈景主題]......　

您需要搞清楚報告的內容及處理的方式......才會讓您的個人網站更健全......

05.4.導覽模式......

檢視您的個人網站配置方式......以方塊圖顯示的方式,讓您更容易掌控您的網頁......

當然這個模式如果內容是全部空白也不會影響您的網頁......

05.5.超連結模式......

將整個網站的內部超連結及外部超連結......都全部秀出來給您看.....

當然囉......您也可以經由...[檢視][報告][網站總灠]......

然後處理[超連結]......[未檢查的超連結]......[中斷的超連結]......

都嘛是一樣的啦!!!

05.6.工作模式......

建構中......

05.7.導覽列及共用邊框以及套用佈景主題......

[導覽列]及[共用邊框]為天生的一對......但目前網主尚未應用......

[格式][佈景主題].....請注意這裡....每次都會停在[.]套用全部的網頁......

請千萬要切換到[.]選取的網頁.....

否則電腦幫您置換所有網頁的佈景主題.......當您發現時......要哭也哭不出來的喔......

回到選單

第陸回:如何編輯您的網頁文字......

06.1.網頁編輯設定成[繁體中文]......

[檔案][內容][語系]......繁體中文Big5......如果不是要趕快修改......

您可以搭配符號......[插入][符號]選取後......[插入]......

您也可以插入註解......選擇插入點[插入][註解]......只有在編輯面才看得到......瀏覽面並看不到......

06.2.由電腦來幫您做大量的處理......

例如:

文字的尋找[編輯][尋找].......

文字的搬移及取代......[編輯][取代]......

文字的段落及對齊......[格式][樣式]......

段落的縮排......[格式][段落]......

網主最常用之方式為 :[編輯][全選][格式][段落][與前段距離][0][與後段距離][0]......

然後再來調整自己想要的間距.......

剩下來的就要靠您去玩啦......幾乎WORD有的功能,均可以用的上......

選擇插入點......[插入][水平線] 　

06.3.插入水平線......

選擇插入點......[插入][水平線] .......如上圖所示......

[右鍵][水平線內容]寬度[50]...高度[10]...顏色[黃]...[齊左].....[確定]......如上圖所示......

還有[框線及網底]......您可以自己試試看......

回到選單

第柒回:如何插入美美的照片......

07.1.圖片的格式......

*.jpg--不犧牲顏色的色彩,但像素可以降至很低......所以照片可以很清楚也可以很模糊......

由儲存容量決定...

*.gif--最大的優點為取得[透明圖]及[交錯式的圖片型式]......犧牲顏色的色彩,但像素不變......

然後*.gif還可以製作簡單的平面動畫......　

07.2.插入美美的圖片......

您可以回到第零回......

[插入][圖片]......[從檔案]或[美工圖片]或[視訊]......　

[*.wmf][*.bmp][*.gif][*.jpg][*.jpeg][*.tif][*.png].......幾乎所有得圖片格式都可以......

07.3.變更及調整圖片......

點選圖片......[右鍵][內容].....自己來吧.....[一般][視訊][外觀]......

調整圖片......

搬移圖片......

複製圖片......

07.4.為什麼網頁上會使用*.gif格式的圖片......

*因為讀取速度快[因為容量小-犧牲顏色的色彩,但像素不變]......

*因為FrontPage可幫您去除圖片的底色......

*因為有[自動影像目錄標籤]可以使用.....先看小圖.....再決定[點選]......觀看大圖......

[工具][網頁選項][[自動影像目錄標籤]]可以設定[自動影像目錄標籤]的使用內容......

*在圖片中加文字......

*旋轉圖片......

*剪裁圖片......

*黑白圖與淡刷.....　

*立體圖框.....

所以使用*.gif格式的圖片就有這麼多好處......

07.5.為網頁背景打底......

*可以使用[套用佈景主題]......

*[右鍵][網頁內容][背景]......可以選擇單一顏色為背景.....也可以改變文字顏色.....

也可以套用背景圖片.....

*[右鍵][網頁內容][背景]......如果選擇[背景圖片]及[浮水印]....

則網頁上下滾動時,背景圖片完全不會動.....

回到選單

第捌回:如何架構及規劃--內部超連結及外部超連結......

08.1.可以給他亂點亂連的那支手指頭.....

最重要的是......

內部超連結......全部都是您自己設計的網頁......可以在同一個視窗呈現.....

外部超連結......是屬於別人的網頁或網站.....請超連結時設定[開新視窗].....否則有侵權之問題......

超連結不管連結至何處最好都能夠順利的回到原處......那才是最體貼的啦!!!!!!

08.2.如何規劃超連結......

再網站開始建立之時......如果您善用[網頁導覽模式]則自動將您的超連結都建立好了.....

也更方便您自己管理您自己得網頁及超連結.....

08.3.如何連結......

*文字連結.....

如果新增一個網頁為[自我介紹]......您可以將此頁[New Page.htm].....

改成[about.htm][myself.htm][me.htm]都可以...... 

然後在您的首頁....您想要的地方.....打一個[自我介紹]...框選起來.....

然後[右鍵][超連結]指向[about.htm]即可......

[檔案][儲存檔案]......　

*圖片超連結.....

先決定[該圖片]要超連結哪個音效,圖片或網頁.....

[右鍵][該圖片][超連結]......[哪個資料夾][哪個音效][確定].....或是[哪個網頁][確定].....

[檔案][儲存檔案]......　

*檔案下載超連結.....

先把該檔案[*.exe][*.zip][*.pdf][*.ppt][*.doc][*.exl]........

利用[檔案總管]甩入您得[資料夾模式][您指定的資料夾內].....

然後再建立超連結即可.....但千萬不要指向您電腦硬碟的檔案喔!!! 

[檔案][儲存檔案]......

*連結至電子郵件信箱.....

框選文字或圖片.....

[右鍵][超連結]點選右方之[信封]按鈕......則出現輸入電子郵件信箱位址之對話框.....輸入即可......

其實如果您不是用圖片來連結電子郵件信箱,直接在要打入郵件信箱的位置輸入該郵箱位址,

馬上按.....[Enter].....電腦一偵測到馬上就幫您連結將您OK啦.....　

service@dr-cabling.idv,tw[Enter].....在呈現面上.....電腦會自動啟動OUTLOOK.....

同理可證.....直接輸入網主的網域.....

http://www.dr-cabling.idv.tw/[Enter].....在呈現面上.....電腦會自動啟動Internet Explorer.....

[檔案][儲存檔案]......

08.4.書籤的加入及連結其實也很簡單又好用......

[在這裡*abc*浮標停在這裡]加入一個書籤......[插入][書籤][書籤名稱][abc][確定].......

然後就出現一個書籤了.....

他就是可以當成一個超連結的目標了......

*

[我要跳到def].....框選[我要跳到def][右鍵][超連結][書籤][def][確定].....

*

*加入這麼多列是為了要有跳動效果...... 

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*[矩形分割連結].....照片後方之河川告示牌...... 

*[回到照片]

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*[圓形分割連結]......照片左方之機車.......

*

*[回到照片]

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*[不規則分割連結].....超級無敵,舉世無雙,打遍天下無敵手之超級大帥哥.....

*

*[回到照片]

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

豬啦!!!好聰明!!!!!!!      

[在這裡*def*浮標停在''''豬'''''''前面]加入一個書籤......[插入][書籤][書籤名稱][def][確定].......

然後就出現一個書籤了.....

他就是可以當成一個超連結的目標了......

[我要回到abc]..... 框選[我要回到abc][右鍵][超連結][書籤][abc][確定].....　

[檔案][儲存檔案]......

08.5.一張圖片經由切割後製作多個超連結......

放一張照片在網頁上吧.....[置中].....

您可以使用的有.....

[矩形分割連結]......照片後方之河川告示牌...... 

[圓形分割連結]......照片左方之機車.......

[不規則分割連結].....超級無敵,舉世無雙,打遍天下無敵手之超級大帥哥.....

點選該張照片.....

在照片的下方會出現照片切割的工具列.......[檢視][工具列][圖片].....嘛是可以啟動......

選取[矩形]分割好之後做超連結.....

選取[圓形]分割好之後做超連結.....

選取[不規則]分割好之後做超連結.....

[檔案][儲存檔案]......

將滑鼠移至圖片區.....按下超連結即可.....

好好的管理您自己得網頁及超連結吧.....

回到選單

第玖回:如何建立表格及儲存格......

09.1.插入表格......

橫的叫做列.....

直的叫做欄.....

每一格都叫做儲存格.....

將這10格都框選起來.....[右鍵][表格內容][框線][1][色彩][藍色]..[套用][確定]......結果如上.....　

剩下來就由您自己去發揮了.....

[右鍵][插入列].....

[右鍵][刪除儲存格].....

[右鍵][合併儲存格].....

[表格][手繪表格].....嘛是可以...... 

09.2.文字與表格之轉換.....

[表格][轉換][文字轉表格]......

[表格][轉換][表格轉文字]......　

只有在大量處理的時候才會覺得好用.....

否則隨手改一改還更快咧.....

09.3.表格的各項操作......

選取整欄或整列......

選取整份表格......

選取單一儲存格......

選取多個儲存格......

加欄或加列.....

刪除表格及儲存格.....

分割及合併儲存格......

平均分配欄及列的寬及高......

對齊方式.....

文繞圖.....也就是文字繞著表格的右方或左方書寫......

這裡.....[表格內容][文繞圖][靠左].....

這裡.....[表格內容][文繞圖][靠左].....

這裡.....[表格內容][文繞圖][靠左].....　

其實把表格拿來當作分列,分欄,定位,很好用之外......另外把框線調整到[0]......

有隱形的效果才是最好用的啦因為在Netscape及Internet Explorer的瀏覽面呈現結果,幾乎差異不大.....

回到選單

第拾回:如何使用內建之精靈及範本......

10.1.精靈......

所謂精靈--就是電腦問您得需求,您告訴精靈之後電腦給您結果......

[檔案][開新檔案][web]......[web站台][討論區web精靈]......

最簡單的方式就是將[v]新增到目前的web......打勾......[確定]......

然後精靈就啟動了......一般來說都使用內定值就可以了......

如果您搞懂了......您可以將討論區精靈......變成留言板使用......

如果搞不懂就使用內定值之後,等精靈完成之後再修改即可......

10.2.範本......

所謂範本--就是您在內建的樣本裡尋找接近您需求的網頁,然後再加以修改......

[檔案][開新檔案][網頁]......[一般][框架頁][樣式頁]......您都可以試試看喔......

回到選單

第拾壹回:框架及框架頁......

11.1.框架......

每一個框架相當於一個獨立的頁面或網頁......

11.2.框架頁......

框架頁就是將數個框架組合起來,以不同的排列方式組合而成......

[檔案][開新檔案][網頁]......[框架頁]......選取一個您喜歡的排列方式......試試看吧......

[設定起始網頁]......讀入既有的網頁當成框架......

[開新網頁]......開新的網頁當成框架.....

調整框架的大小......

可以繼續分割框架......

可以刪除框架......

11.3.框架及網頁內容......

搞清楚......

[右鍵][框架內容].....與......[右鍵][網頁內容]......有何不同.....

設定框架邊界......

設定框架捲軸......

設定框架之超連結......及......呈現於哪個框架.....一般而言超連結之後,

均呈現於面積最大的那一個框架......

回到選單

第拾貳回:互動式網頁--利用CGI及ASP的敘述語法......

12.1.討論區或留言板就是最基本的互動式網頁......

上網的人,進入這個互動式的網頁.....按此進入帥哥的留言板......

填寫資料之後.....按發送鈕......就將資料送到伺服器......經由伺服器處理之後.....

傳回瀏覽面的總表......讓上網者可以看到自己的留言或討論內容......

建構中......

12.2.最常使用的表單精靈......

[停在網頁模式]......[檔案][開新檔案][網頁]......

使用[表單網頁精靈].....[確定]......[下一步]......

[新增]......[個人資訊].....編輯此問題的提示[帥哥&酷妹的基本資料].....[下一步].....

[基礎名稱]......[帥哥&酷妹:]......[下一步]......

若要新增下一個問題.....請按[新增]...若不新增請按[下一步]......

要問的問題都提列之後[下一步]......顯示選項使用內定值[下一步]......

輸出選項.....[v]將結果儲存到web網頁.....[基礎名稱]......[frontpage-result.htm]......[下一步]......

[完成]......

表格提列出來之後....[new page.htm].....另存新檔到您要的資料夾......[frontpage-ask.htm]......

[frontpage-ask.htm]......提出問題的網頁......

[frontpage-result.htm]......輸出結果的網頁.....趕快找這個檔案在哪裡.....

修改網頁內容及美化......

試試看填一填表單.....[frontpage-ask.htm]......看一看填寫的結果.....[frontpage-result.htm]......

12.3.以此類推.....您可以製作很多的表單及討論區......

加油!加油!!加油!!!......

回到選單

第拾叁回:如何使用[插入][元件]......

13.01.Office試算表......

[插入][元件][Office試算表].....建構中......

13.02.Office樞紐分析表......

建構中......　

13.03.Office圖表......

建構中......　

13.04.橫幅廣告管理員......

[插入][元件][橫幅廣告管理員].....都使用內定值..[新增圖片2張][確定]之後再修改大小......

切換時間1秒...

[檔案][儲存檔案]......

13.05.計數器......

0123456789

先決定計數器要擺在哪裡,就把浮標停在哪裡.....

[插入][元件][計數器]您可以選擇......[計數器樣式][重設計數器至][1688].....[固定位數][10]......

[確定].....

[檔案][儲存檔案]......

13.06.動態顯示按鈕......

[插入][元件][動態顯示按鈕]您可以選擇......顏色.....可以建立超連結.....

13.07.跑馬燈......

帥哥邱是天下舉世無雙的大帥哥......更是宇宙超級無敵的猛男......

[插入][元件][跑馬燈]您可以選擇......顯示方式.....可以建立超連結.....建構中......

13.08.確認欄位......

建構中......

13.09.共用網頁......

建構中......

13.10.排程圖片......

建構中......

13.11.排程共用網頁......

建構中......

13.12.替代......

建構中......

13.13.類別......

建構中......

13.14.搜尋表單......

建構中......

13.15.目錄......

建構中......

13.16.額外的元件......

建構中......

回到選單

第拾肆回:如何讓您得網頁繼續動起來......

14.1.動態的HTML效果......

建構中....建構中....建構中....建構中....建構中....建構中....建構中....建構中....建構中....建構中.....

建構中......建構中......建構中......建構中......建構中......建構中......建構中......建構中......建構中......

選擇一段文字框選起來......

[格式][動態的的HTML效果]開啟...[網頁載入]效果...[旋入].....

[檔案][儲存檔案]......

如果您看不到效果請按[F5]刷新.....或按[重新整理].....

14.2.網頁切換效果.....[此功能僅能使用於單一網頁,無法使用於框架頁]

選定[WEB-DESIGN.HTM]此網頁做試驗......

[格式][網頁切換].....[進入頁面][3秒][圓入][確定]......

[來去那一頁看效果]

　炫吧!!!

另外網主也將[個人網頁注意事項public-html.htm]....修改成.....

[格式][網頁切換].....[進入頁面][1秒][圓出][確定]......

14.3.Netscape無法呈現此效果......

網主試了一下,Netscape7.0並不支援此效果......

回到選單

第拾伍回:更炫的特殊效果......

15.1.PLUG-IN.....影像之插入......

100*100

200*200

先決定影片要擺在哪裡,就把浮標停在哪裡.....

[插入][進階][Plug-In]資料來源......[瀏覽][viedos][mouse.avi][確定].....可以調大小喔.....

[檔案][儲存檔案]......

15.2.Active-X.....

frontpage-insert.swf

將已經做好得Flash動畫[frontpage-insert.swf]......匯入與此網頁相同之目錄.....

[插入][進階][Active-X控制項].....[ShockWaveFlash]......該動畫[右鍵].....[Active-X控制項內容].....

Flash屬性.....[frontpage-insert.swf].....

物件標記.....程式碼來源......

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0

[套用][確定].....

然後再調整大小即可.....

15.3.Java Applet.....

當您在[個人網頁注意事項]那一頁時.....當您點選一個動態按鈕時....

您注意看瀏覽頁面的最左下角......您會看到Applet啟動......

回到選單

第拾陸回:HTML的敘述語法......

16.1.HTML的敘述語法......

雖然您可以不用了解HTML的敘述語法......

But......

<......>HTML標籤

觀看原始碼.....

在[網頁模式]之下.....切換到[HTML].....

如果您切換之前是停在一張照片.....切換到[HTML]之後.....就會停在那張照片的所有語法.....

有空......有興趣慢慢研究吧.....

回到選單

第拾柒回:CSS語法及超連結不加底線......

17.1.CSS的敘述語法......

雖然您可以不用了解CSS的敘述語法......

But......可能稍微難了一點......

另外開闢單元敘述......

17.2.超連結不加底線......

建構中......

回到選單

第拾捌回:網頁上傳方式......

18.1.第一種方法:使用CuteFTP......

[CF1.]首先您可以至雅虎-奇摩取得cuteftp...不要說您不知道......[yahoo][我的][個人網頁]個人網頁首頁...[上傳網頁][輸入使用者名稱及密碼]不要告訴我您沒有yahoo的帳號...太遜了...

然後您就會看到...[cute-ftp軟體][台灣下載專區][立即下載][儲存檔案]存到桌面...完成後....

[CF2.]...[桌面]就會出現cuteftp.exe[點兩下進行安裝...][next][yes][next][finish]...完成啦...

[CF3.]他會告訴您只有30天的試用期...[start trial]...輸入標籤(您自己看的懂就可以)例如[cat.dog][下一步]...enter your host address輸入主機位址..也就是網主的家[www.dr-cabling.idv.tw]...[下一步]...

輸入使用者名稱及密碼.....user name[    ]...password[     ]...[下一步]...告訴程式您的網頁在這一台電腦的哪個地方...[browse瀏覽...]...[下一步]..[完成]...

[CF4.]連上線了......請別注意...左手邊是您得電腦端....右手邊是網主的伺服器主機端...

您只有權限進入自己的個人網頁區間......

[CF5.]將左邊做好的網頁往右邊甩......OK!!! 

[CF6.]..若要新增一個新連結位址..[桌面][cuteftp的笑臉圖示][雙擊啟動][continue trial][cancel....]

[CF7.]...[file][site manager][new]新增一個連結...由上而下輸入[標籤名稱][www.dr-cabling.idv.tw]

[使用者帳號][密碼][21]最後按...[connect]....即可連結上伺服器主機....

......OK!!! 

18.2.第二種方法:使用IE瀏覽器的FTP功能......

將左邊做好的網頁往右邊甩......OK!!! 

18.3.第三種方法:使用FrontPage上傳網頁......[MyWEBs]......

[FP4.]...出現完成.....請點選[成功]........

[FP5.]...修改網頁之後使用同樣的方法上傳....或使用ftp及cute-ftp亦可........

[FP6.]...至瀏覽面觀看上傳之後的結果是否正確............. http://www.dr-cabling.idv.tw/~eugene/

18.4.第四種方法:使用FrontPage之線上即時更新.[http://開啟web].

[FP-http1.]首先必須確定您的電腦有伺服器擴充程式......

[FP-http2.]啟動frontpage...

[檔案][開啟web]於資料夾名稱輸入[http://www.dr-cabling.idv.tw/~cat-and-dog]...~您的個人網域

然後按[開啟]...[輸入使用者名稱及密碼]您的個人網頁就會呼叫到您的面前來了......

請記住....這是直接呼叫伺服器的檔案到您的面前..並不是在您的電腦製作網頁喔!!切記!!!

[FP-http3.]...[檔案][最近使用的web][點選您要進入的web....][輸入使用者名稱及密碼]....ok.....

回到選單

第拾玖回:

19.1.

建構中......

19.2.

建構中......

19.3.

建構中......

回到選單

第貳拾回:

20.1.

建構中......

20.2.

建構中......

20.3.

建構中......

回到選單

[我要回到網頁設計單元]

建構中......