Part3醫學網站的建立與

FRONTPAGE2002的使用

計算機醫學實用技術

讓揚回孽工程遍究所施王華

FRONTPAGE20021

ter13FrontPage2002基礎知識

?13.1必備的Internet知識概述

.13.2FrontPage2002功能簡介

.13.3FrontPage2002界面

.13.4基本的文件操作

.13.5基本的站點操作

5曉

FRONTPAGE20022

^.1必備的Internet知識概述

?Internet的各種服務

>WWW：worldwideweb

>E-mail

+FTP:文件傳輸協議(FileTransferProtocol),

下載文件，在Internet的兩臺主機之間傳遞文件。

?Telnet：遠程登錄(RemoteLogon)

FRONTPAGE20023

?萬維網(WWW)和Web頁

+為Internet核心，由一個個互聯互通的網站所組成的信息

的海洋。

+網站的靈魂就是網頁(Web頁)。

+Web頁面：是包含了超文本標記的一種文本文件，它和

其他普通文檔的不同之處在于該文本文件還包含了與許

多圖形文件和其他Web頁面間相互鏈接的URL標記和其

他格式化信息。可以綜合許多種元素，如圖片、文本、

視蕨等。

+Web頁面必須通過Web瀏覽器來解釋執行。/

?MicrosoftInternetExplorer.

?Netscapenavigator。

FRONTPAGE20024

?Web頁面的工作原理：WWW是Client/Server

（客戶/服務器）體系結構

?客戶端（Client）即訪問者計算機上的web瀏覽器向

web服務器發出請求信息

?Web服務器接收客戶端的請求，并調用服務器端的處

理程序將客戶端的請求處理后發送回客戶端瀏覽器

（Web服務器通過向瀏覽器傳遞HTML代碼來響應瀏

覽器發出的請求）

?瀏覽器將返回的信息解釋后將結果顯示在屏幕上

?HTML（超文本標識語言）是一種標識語言，它

告訴瀏覽器每個頁面元素的排列位置與風格.

FRONTPAGE20025

於FRONTPAGE2002功能簡介

?Frontpage2002是OFFICEXP家族成員之一，為

創建和管理極具專業水準的Web站點提供了妥善的

解決方案，無需編程即可擁有極具專業水準的Web

站點。

?FrontPage能夠解釋和生成web頁面的HTML代碼，

利用Frontpage,網頁制作人員不需要學習、書寫

HTML源代碼即可快速并輕松地設計出各種專業網

站，同時能夠對整個站點的內容和結構進行高效的

管理。

?既適向于缺少HTML知識的入門者，也同樣適用于

有經驗的網頁制作專業技術人員，建設專業品質

Internet和Intranet網站的最佳工具。」『

FRONTPAGE20026

?FrontPage2002的特點：

+簡單易用與Word相似的界面，所見即所得地創作。

+工具增強

+站點管理可在短時間內配置和更改所有文件，所有的站

點管理工具、文件、設置等都可輕松訪問、輕松管理。

+數據庫集成輕松實現瀏覽和發送信息到數據庫。

+豐富的主題輕松自定義站點樣式，并可控制站點網頁顏

色、字體、圖像、項目符號等屬性。

+交互性內容輕松在網頁內插入圖片、音樂和視頻。內置

對動畫技術的支持，如DHTML,輕松創建簡單動畫。

+HTML源代碼編輯Frontpage允許直接進行HTML代碼

編輯。/.＜一

FRONTPAGE20027

X3FRONTPAGE2002界面

?啟動Frontpage2002：“開始”菜單中的“程序

-^MicrosoftFrontPage,5

?界面：

+標題欄、菜單欄、工具欄、狀態欄

+“視圖”工具欄：在窗口的左側

夾

+文9

列表：視圖欄右邊，顯示當前打開站點的文件夾

。

結“視圖-文件夾列表”

窗

+輯

口：中間，用來進行網頁的編輯和網站的管理，

據

所

亂選視圖模式的不同，包含的具體內容也不曷同。

+務

寡

三

“格：最右面，可快速地執行一些常用的命令，分，，

分建網頁或站點”、“剪底板”（24次）、“搜警

部,“視圖一任務窗格”，

FRONTPAGE20028

嶺icrosoftFrontE:\xyh文件夾'FRONTPAGE教材hdnbm八index.htm」創兇

穰入需要幫助的問題▼

文件口編輯⑥視圖短）揚入中格式@）工具①表格?框架?@a?）幫助電）

⑥囿圃,⑥；電方：'

03,0g一一?金二|用電圖◎，：②中文簡繁轉換：

文件夾列表哥建網頁或站點▼X

-UEAzyh文件夾\FROIT打開網頁

甲,「1.privateindex

EClChineseinduded-HEHGFWUAJK

EOenglishyijianfaxikuibiaodan

FRAMEVEB

@Qimages

0H其他網頁.

困Qjiaoan

文件夾圄AllFiles,htm臉___________________

D空白網頁

圜animate,js

司fprotate.class且J空白站點

回fprotatx.classEngineering糧據現有網頁新建

.index.him出造金.

根據模板新建__________

底瓦頁畫和白泉

山象大學曷馴:表單網頁向導

O網頁模板.

靜

期Web站點模板..

超於接生物魯摩工程研究所。]Microsoft.com上的檔

CJ添加網上鄰居

回MicrosoftFrontPage

\2]30啟動時顯示

a導航口普逋回KTMLR預覽|

。笈傳輸方式：28.8,時間：4秒

FRONTPAGE2002

?視圖，6種視圖幫助完成站點創作、發布與管理的全部任務

+網頁視圖：創建和編輯網頁，編輯框中顯示當前頁，編輯框頂部顯

示網頁文件名，編輯框頂部的選項卡在多個打開的文件間進行切換

?“普通”標簽下：所見即所得地編輯網頁，

?“HTML”標簽下：直接查看、編輯及修訂HTML代碼

?“預覽”標簽下：用Frontpage仿真瀏覽器環境預覽當前網頁的實際效

-果

+文件夾視圖

+報表視圖

+導航視圖

+超鏈接視圖,,

+任務視圖：用來指定、分配與協調工作，并藉以掌控不同網頁目前

的進度。

FRONTPAGE200210

osoftFrontK八現度件夾\PR0mAGE教材\sdnbme\index.him-|glx|

?編輯?視圖①插入QD格式仍工具①表格?框架?窗口位）幫助的例人需要幫陸的問跋

一Y0國用?!1.由◎丁回中如繁轉換，，

r?金，0野喻畫，昌e：「-：薩’、

?II3[BZU--A''i-A

視圖口文件夾列表

X|/new_page_i.htm、index.ht?'

二ME:\zyh文件夾"FRONTPAGE的肛〉<?￡仙〉仃口11〉主頁</TnLE>

由廣I.private<K1ETAcontent="text/html;charset=gb2312*http-equiv=Content-Type>

</HEAD>

j+j-QChinese

a網頁<SODYbgColor=#666666leftMai-gin=OtopMargin=10marginwidth="O"marginheight="CT>

S-Qenglish《ableborder="0"cellspacing=*0*cellpadding=rt，O<align="center"height="100%”>

<tr>

IB0images<td>

由”□jiaoan(tableborder=0cellpadding=Ocellspacing=0align="center"〉

《body〉

文件夾

囹AllFiles.htm<tr>

閡animate.jsKtdXimgsrc=/，images/index06.gif*width="774"height="88"Wtd>

</tr>一

固fprotate.class〈tr)

畫fprotatx.class<tdwidtK=*774*height="238"background="images/index_070.gif">

報表《ablewidth二TOO%"border："。"cellspacin笈"0"cellpaddin^=*O*>

回index,htm<tr>

<tdheight="235"width="23T/式即小山“align=-center"Xobjectclassid=*clsid:D27CDB6E-AE6D-11cf-96B8-

KparamnsHie=movievalue=*images/Movie2.swf*>

〈para?name二qualityvalue=high>

導航〈paramname="wmode“value="transparent”)

Gmbedsrc=*images/Movie2,swf*quality=highpluginspage=*http：//www.macromediacom/shockwave/download/i

</anbedX/objectX/td^

<tdheight="235"width=tf52%*><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000*codebase="http:〃

<par?mneme=ffiovievalue=*images/line2.sw￡*>

超鏈接<paramname=qualityvalue=High>

〈paramnsme=%modeffvalue="Transparent”〉

<parajnname="_cx"value=/f10292*>

〈parsname="_cy"value="6218">

〈paramname="FlashYars"value="T"〉

任務〈paramnaffie=fl，Src*value=wimages/1ine2,s*f">

〈paramname="Play"value=*-i>

(paramname="Loop"value="T"〉

<4>&ramname=*SAlign*value)

〈paramname="Menu"value="T">

〈paramname="Base"value)

〈paramname=ffAllowScriptAccess*yalue="always">

Garamname："Scale"value=*ShowAll*>

(paramname="DeuiceFont"value="0">

<par&jnname="EmbedMovie"value="0">

〈paramname=*BGColor*valued

<p&r&jnname="SWRemote"value)

<embedsrc=*images/line2.swf*quality=highpluginspage=*http://www.macromedia.com/shockwave/downloai/in

</embedX/objectX/td>

<tdheight="235"width="25%">Gbjectclassid=\lsid:D27CDB6E-AE6D-11cf-96B8-444553540000*codebase="http：//

〈paramname:movievalue=*images/F%5Bl)5D.sw￡"〉

〈paramneme=qualityvalue=Migh>

〈paramname="wmode“value="Transparent"))

11思，<paramname=*_cx*value二04233">

|國齪斑!割G普通叵畫Q預覽］,1

行47,列81QM傳輸方式：28.8＜時間：4秒

FRONTPAGE200211

13.4基本的文件操作

13.4.1新建網頁

?單擊工具欄上的按鈕，Frontpage將自動創建一個空

白頁，第一個空白頁的文件名自動設為

new_page_1.htm。

?利用網頁模板來創建新網頁

+模板是Frontpage預設的若干個內置的頁面，它已經按照一

定的格式設置好，用戶可根據實際需要利用現成的模板快速

建立自己所需要的網頁，大大提高開發效率。

+“任務窗格”f“網頁模板”，打開“網頁模板”對話框

?“常規”：共提供了27個常規類型的網頁模板

.“框架網頁”>

.“樣式表”一

FRONTPAGE200212

1342打開文件

?打開一個已有的文件

+文件位于當前已打開站點上：在任一視圖下，雙擊該文件圖標或文件名就可

以打開該文件。

+文件位于另一個站點或是本地計算機的文件夾：單擊“文件一打開”或“常

用”工具欄上的“打開”按鈕，在彈出的“打開文件”對話框中查找需要打

開的文件。

?打開最近使用過的文件

單擊“文件一最近使用的文件”從彈出菜單中選擇想要的文件。

?打開其他類型的文件

+如超文本模板、超文本樣式表、RTF格式、文本文件、Word文件、Excel

文件等，并自動將原有的文件轉成類似于HTML格式的文件，然后可以像通

常一樣修改和編輯這些文件。

+當在Web中打開一個文件時，Frontpage總是使用與這些文件相關聯的編

輯器來打開它。可以單擊“工具一選項,，在彈出的對話框中選.牛配章編輯

器”選項卡來改變默認的設置。，7<

FRONTPAGE200213

?1343保存文件

+保存已打開的文件時，選擇“文件一保存”或單擊工

具欄上的保存按鈕。

+保存新建的文件時，選擇“文件一保存”或單擊工具

欄上的保存按鈕，在打開的“另存為”對話框中進行設

置。保存類型，網頁標題，“更改標題”按鈕

+當在頁面中插入圖像、音頻或視頻等多媒體文件時，按

“保存”按鈕后，出現“保存嵌入式文件”對話框，詢

問是否保存該多媒體文件，可以選擇重命名或改變保存

的文件夾，以及設置保存操作選項，在一般情況下，.你

需要保存這些圖像或其他多媒體文件。「7'

FRONTPAGE200214

0

13.5基本站點操作

<***^^^

?所謂站點，就是一些網頁和程序的集合。各個網頁

之間通過超鏈接聯系在一起，所有的網頁和文件保

存在一個文件夾中，通過站點把這些文件和網頁統

一起來。所以說，建立一個新站點，事實上就是建

立一個單獨的文件夾，然后在這個文件夾中建立各

個網頁文件，并且把它們鏈接在一起。

?站點中會自動建立兩個固定的文件夾：

4.private文件夾：存儲隱含的文件。該文件夾下的文件對

不站點訪問者來說是不可見的。?

fimages文件夾：存儲圖象文件，保持web站點拓整潔。

FRONTPAGE200215

?13.5.1新建站點

+選擇“文件?新建一網頁或站點”，從任務窗格中選擇“Web站

點模板”，或用新建普通網頁按鈕彈出“Web站點模板”對話框。

在“站點”選項卡中，共提供了10種站點模板。它們都根據各自的

用途提供了完整的站點結構和巧妙的頁面組織。使用這些模板，用

戶可以十分方便地建立一個專業站點的完整框架，大大減輕了用戶

的工作量。

?常用的站點模板：

+空白站點；只創建相應的Web文件夾，不包含任何web頁和資源。

+只有一個網頁的站點；該模板將創建一個有一空白網頁的新站點。

+導入站點向導：創建一人站點，并將本地計算機目錄或遠程系統中的文檔

添加到這個新建的站點中。

士公司展示站點：用來為公司或企業創建一個專業的Internet展示。

+客戶支持站點：創建一個提供客戶支持服務的站點，通過該站點提供公司

旦

品信息、I/[77II//,該

e支持站點。

+個人站點：快速創建一個個人站點，包含興趣愛好、照片和喜好。［

+討論站點向導；創建一人帶有線索、目錄和全文搜索能力的討論組，該

討論組可以讓訪問者留下信息或回答信息，并以有關的線索組織信息

FRONTPAGE200216

?選擇了相應的向導或模板后，在“指定新站點的位

置”下拉列表中指定新站點所在的文件夾，可手工

輸入也可以單擊“瀏覽”按鈕進行選擇。

?指定了新站點的位置后，還可以指定是否要將新站

點作為子站點添加到當前已打開的Web站點，如果

選擇了web服務器作為新站點的位置，那么還可選

擇是否需要“安全的鏈接(SSL)”來保護你的站點安

金。

?單擊“確定”按鈕，系統就會自動建立起相應的文

件和文件夾，下面就可以雙擊文件進行編輯和修改

網頁了。，

FRONTPAGE200217

1352打開站點

?單擊“文件一打開站點”或按工具欄上的

“打開”按鈕邊上的下拉標志，從下拉菜單

中選“打開站點”，在彈出的“打開站點”

對話框中找到需要打開的站點后按“打開”

按鈕即可。

?如想在每次啟動Frontpage時自動打開上次

打開的站點，可以從“選項”對話框的“常

規”選項卡中選擇“在啟動Frontpage時,

自動打開上次打開的站點”。、二

FRONTPAGE200218

1次14章網頁編輯的基礎知識

14.1設置文本格式

14.2創建超鏈接

14.3圖像處理

14.4插入水平線

14.5應用表格

FRONTPAGE200219

14.1設置文本格式

14.1.1文字格式和段落格式

+文字格式包括：字體、字形、字號、字體顏色、

字符間距和應用一些特殊效果等。

?格式工具欄上相應的工具按鈕

鼠?“格式一字體”，“字體”對話框

+段落格式包括：段落對齊、段落縮進、行間距、

段落間距等。

?格式工具欄上相應的工具按鈕,一

?“格式一段落”，“段落”對話框，"

FRONTPAGE2002?20

14」.2使用文本樣式

+內置了多種文本樣式，利用它可以快速地設置文

本的格式，包括：標題、地址、目錄列表、編號

列表、菜單列表、項目符號列表、默認字符樣式。

.+應用樣式

“格式”工具欄“樣式”選擇框下拉按鈕

FRONTPAGE200221

^III限

+修改樣式

“格式一樣式”，“樣式”對話框

+新建樣式

“樣式”對話框中單擊“新建”按鈕

可在“格式”欄“樣式”下拉列表中應用新建樣

式。

FRONTPAGE200222

14.1.3使用列表格式

+在網頁設計過程中內容按條目來說明

+每一條前加一圓點、方塊、圓圈、圖片或其他符

號，叫做項目符號。

￡+按先后順序來說明問題，在每一條前加數字序號,

叫編號。

+編號和項目符號統稱列表，利用列表來設計網頁

可使頁面排版美觀，內容清晰。

+項目符號與編號混合使用，稱為多級列表。7,

FRONTPAGE200223

c

?利用格式工具欄上的“編號”和“項目符號”按

鈕可以快速地在網頁中添加列表格式。

+選擇不同的項目符號和數字格式

“格式一項目符號和編號”，“列表屬性”對

話框

?“編號”選項卡

?“無格式項目列表”選項卡

?“圖片項目符號”選項卡,

FRONTPAGE200224

14.1.4插入注釋文字

+便于編輯維護頁面。

+插入方法：“插入一注釋”，“插入注釋”對話

框

+注釋文字只在編輯狀態顯示，在瀏覽器中瀏覽網

頁時不顯示。

FRONTPAGE200225

、j14.2創建超鏈接

?超鏈接是從一個網頁指向另一個目的端的鏈

接，通過超鏈接很方便地從一個頁面（或網

站）漫游到另一個頁面（或網站）。

?超鏈接包括兩部分：

+鏈接的載體（指包含超鏈接的文字或圖像），根

據鏈接載體的不同，超鏈接分為圖像超鏈接和文

字超，連接。——

+鏈接的目的地址（單擊超鏈接后所顯示的內容），

它可以是一個網頁，也可是另一個網站或電子郵

件地址。,

FRONTPAGE200226

1421建立超鏈接

+選中要建立超鏈接的文字或圖像

+單擊常用工具欄中的“插入超鏈接”按鈕或單擊“插入

一超鏈接”菜單命令，打開“編輯超鏈接”對話框

?鏈接到站點內的其他網頁對話框左面“鏈接到”框中的“原有

文件或Web頁”按鈕；單擊“屏幕提示”按鈕，定義鼠標指向超

鏈接時顯示的提示文字。

?鏈接到其他網站“原有文件或web頁”按鈕，在“地址”框中

直接輸入網址；在“瀏覽過的頁”列表中選擇一個網址；單擊

“瀏覽web頁”按鈕瀏覽需要鏈接到的網站。

?鏈接到新網頁單擊“新建文檔”按鈕。；

?鏈接到電子郵件單擊“電子郵件地址"按鈕。、'J

FRONTPAGE200227

14.2.2創建圖像熱點鏈接

+圖像熱點鏈接就是在一人圖像之上建立多個不同的鏈接，每一個鏈

接分別對應一圓形、矩形或多邊形的區域，每一個區域就叫做一個

“熱點”。當鼠標移到該熱區域內單擊鼠標時，就可以直接跳轉到

該鏈接所指的網頁中。

+建立圖像熱點鏈接的操作:

選定圖像，

單擊“圖片”工具欄右邊的長方形熱點、圓形熱點或多邊形熱點按鈕，

在圖像上拖曳鼠標畫出相應的形狀；

松開鼠標打開“插入超鏈接”對話框，創建一個超鏈接。

重復以上操作，在一個圖像上建立起多個熱點鏈接。如圖13」所示的研

究所主頁由圖片組成，在圖片上創建了兩個矩形的熱點，分別覆蓋了顯

75“中文版”和“英文版”文字的區域，并把這兩個熱點分別鏈接到站

忐內的中文版主頁(chinese/indexLhtm)和英文版主頁

(english/indexl.htm)。圖14-16突出顯示的兩個熱點圖14?15在

網頁工創建的兩個熱點

熱點形狀重疊在圖像上不易時，點擊圖片工具欄上的、“奏出顯示虻點”

按鈕，將圖像內容鷹藏起來，只顯示熱點形狀。

FRONTPAGE200228

c

14.2.3建立指向書簽的超鏈接

+書簽是網頁中被標記的位置，可作為同一頁面或

其他頁面中的超鏈接的目標。

+書簽的一個常見用法是將一個內容較長的網頁的

各個標題定義為書簽，然后在網頁開頭創建目錄,

目錄中的項目是分別指向不同書簽的超鏈接。單

擊目錄中的項目可快速定位到相應內容所在的位

置，方便訪問者瀏覽網頁。

FRONTPAGE200229

+建立指向書簽的超鏈接的方法：

?單擊“插入一書簽”菜單命令，打開“書簽”對話框，

在“書簽名”文本框中給書簽起個名字

?單擊“確定”按鈕，目的地前方出現表示此處為一書簽

的符號

?回到網頁開頭，選取欲作為書簽超鏈接的文字或圖片設

置超鏈接，在“插入超級鏈接”對話框中單擊右邊的

“書簽”按鈕，在打開的“在文檔中選擇位置”對話框

中選擇目的書簽名稱，按“確定”完成。

FRONTPAGE2002

14.3圖像處理

14.3.1網頁中使用的圖像格式

+網頁中廣泛使用的圖像格式有GIF和JPEG,兩種圖像格式之間有差別，但

它們存儲的圖像信息都是經過壓縮處理的，體積都較小，適于在網上傳輸。

+GIF（圖像交換格式），缺點是最多只能用256種不同的顏色來顯示數據。

?用于保存和壓縮基于文字的圖像、線條和剪貼畫等，這些圖像類型不需要百萬色,

很容易存成非常小的GIF文件。

?用來做動畫，因其可以保存多個圖像。

+JPEG-由聯合攝影專家組（JointPhotographicExpertsGroup）開發，

24位圖像格式（真彩色，支持16百萬色X。

?是在Internet上展現實景圖像的標準格式，可將大型圖像壓縮得非常小，同時能

夠保留圖像的整體質量。

?最大缺點是圖像壓縮的越多，信息就丟失的越多。將文件保存為JPEG時，在壓

縮率與質量之間求得一個平衡至關重要。

+Frontpage所支持的圖像格式還包括：

BMP、EPS、MAC、MSP、PCD、PCX、RAS、TIFF、WMF和WPG等。

使用這些圖像格式時.Frontpage把它們自動轉成GIF（256種顏色以內的

圖像）或JPEG格式（256種顏苞以上的圖像）。

FRONTPAGE200231

1432插入圖像

+插入當前站點中的圖像

?將光標移到插入圖像的位置

?單擊“插入一圖片T來自文件”菜單命令或常用工具欄中的“插

入文件中的圖片”按鈕，打開“圖片”對話框，系統將自動打開

當前站點，選擇所需的圖像文件。如果選取的圖像不在當前站點

中保存時，程序將提醒圖像文件的保存路徑。

+插入剪貼畫

單擊“插入一圖片-剪貼畫”命令，出現“插入剪貼畫”任務窗格。

士在“搜索文字”中輸入要搜索的剪貼畫名稱，選擇合適的“搜索范

圍”和“結果類型”，單擊“搜索”按鈕，顯示出要查找的圖片，

單擊圖片，就可插入到當前網頁中。

?直接單擊下方的“剪輯管理器”打開剪輯庫瀏覽器■從簞瀏覽并選

擇所需的剪貼畫圖片。d

FRONTPAGE200232

14.3.3編輯圖像

+調整圖像大小和位置：

?單擊選中圖像，在圖像周圍出現控制點，用鼠標按住任一控制點

拖動，改變圖像的大小。

?單擊選中圖像，拖動圖像到新的位置釋放鼠標，可將圖像移動到

新的位置