frontpage課件

1、1/72FrontPage 2003 2/72 主要內(nèi)容主要內(nèi)容3/721.常用網(wǎng)頁制作軟件介紹常用網(wǎng)頁制作軟件介紹 用用HTMLHTML語言編寫的文件稱為語言編寫的文件稱為HTMLHTML文件，以頁面的形式呈文件，以頁面的形式呈現(xiàn)在用戶的屏幕上?，F(xiàn)在用戶的屏幕上。4/72（1 1） Dreamweaver Dreamweaver： 所見即所得所見即所得 的網(wǎng)頁編輯工具；的網(wǎng)頁編輯工具；（2 2） FireworksFireworks：針對網(wǎng)絡(luò)圖形設(shè)計的工具軟件；：針對網(wǎng)絡(luò)圖形設(shè)計的工具軟件；（3 3） FlashFlash：矢量圖形編輯和交互式動畫制作軟件；：矢量圖形編輯和交互式動畫制作軟件

2、；網(wǎng)頁三劍客網(wǎng)頁三劍客11.常用網(wǎng)頁制作軟件介紹常用網(wǎng)頁制作軟件介紹 5/72 FrontPage 2003 FrontPage 2003是微軟公司最近推出的是微軟公司最近推出的Microsoft Microsoft Office SystemOffice System套裝軟件的重要組成部分。套裝軟件的重要組成部分。FrontPageFrontPage是一是一款所見即所得的網(wǎng)頁制作軟件，該軟件以其強(qiáng)大的向?qū)Ч钏娂此玫木W(wǎng)頁制作軟件，該軟件以其強(qiáng)大的向?qū)Чδ芎秃唵我子枚Q；能和簡單易用而著稱；FrontFrontPage 2003Page 2003 21.常用網(wǎng)頁制作軟件介紹常用網(wǎng)頁制作軟

3、件介紹 6/722. WWW 的基本知識的基本知識存放網(wǎng)頁的服務(wù)器存放網(wǎng)頁的服務(wù)器 。網(wǎng)頁的地址。網(wǎng)頁的地址。 基本結(jié)構(gòu)：服務(wù)器基本結(jié)構(gòu)：服務(wù)器 目錄目錄 文件名文件名7/72ASP（Active Server Pages)JSP (JavaServer Pages)PHP (Hypertext Preprocessor) 2. WWW 的基本知識的基本知識8/72 是網(wǎng)頁技術(shù)的基礎(chǔ)，它使用一些約定的標(biāo)記（是網(wǎng)頁技術(shù)的基礎(chǔ)，它使用一些約定的標(biāo)記（tagtag）對文對文本進(jìn)行標(biāo)注，定義網(wǎng)頁的數(shù)據(jù)格式，描述本進(jìn)行標(biāo)注，定義網(wǎng)頁的數(shù)據(jù)格式，描述WebWeb頁中的信息，頁中的信息，控制信息的顯示?？刂?/p>

4、信息的顯示。 HTML HTML語言編寫的文件稱為語言編寫的文件稱為HTMLHTML文件文件。用。用HTMLHTML語言編寫的語言編寫的網(wǎng)頁實(shí)際上是一種文本文件，網(wǎng)頁實(shí)際上是一種文本文件，它以它以. .htmhtm或或.html.html為擴(kuò)展名為擴(kuò)展名，可以可以使用任何文本處理軟件（例如：記事本）編寫使用任何文本處理軟件（例如：記事本）編寫。3. HTML語言簡介語言簡介9/723. HTML語言簡介語言簡介10/723. HTML語言簡介語言簡介11/72（1 1）文本內(nèi)容：含有需要展現(xiàn)的具體信息。）文本內(nèi)容：含有需要展現(xiàn)的具體信息。（2 2）HTMLHTML標(biāo)記：負(fù)責(zé)控制文本顯示的外觀和

5、版式。標(biāo)記：負(fù)責(zé)控制文本顯示的外觀和版式。3. HTML語言簡介語言簡介12/72（1 1）標(biāo)記名文本內(nèi)容標(biāo)記名）標(biāo)記名文本內(nèi)容標(biāo)記名（2 2）標(biāo)記名）標(biāo)記名 屬性屬性1=1=值值1 1 屬性屬性2=2=值值2 2 文本內(nèi)容文本內(nèi)容 標(biāo)記名標(biāo)記名3. HTML語言簡介語言簡介標(biāo)記名寫在標(biāo)記名寫在“”內(nèi)。內(nèi)。多數(shù)多數(shù)HTMLHTML標(biāo)記標(biāo)記同時具有起始和結(jié)束標(biāo)記，并且成對同時具有起始和結(jié)束標(biāo)記，并且成對出現(xiàn)。出現(xiàn)。HTMLHTML標(biāo)記不區(qū)分大小寫。標(biāo)記不區(qū)分大小寫。其中標(biāo)記名和屬性之間用其中標(biāo)記名和屬性之間用空格分隔空格分隔。如果標(biāo)記有多種屬性，屬性之間也要。如果標(biāo)記有多種屬性，屬性之間也要用空

6、格分隔。用空格分隔。13/72 （1 1）頭部（頭部（HeadHead）：）：由由 head和和/head標(biāo)記定義。標(biāo)記定義。（2 2）正文主體（正文主體（BodyBody） ：由：由 body和和/body標(biāo)記定義。標(biāo)記定義。3. HTML語言簡介語言簡介3. HTML語言簡介語言簡介一般一般HTMLHTML文件都是以文件都是以開頭，以開頭，以結(jié)束。結(jié)束。1 1）頭部（頭部（HeadHead） H T M LH T M L 文 件 的 頭 部 由文 件 的 頭 部 由 和和 / h e a d 標(biāo) 記 定 義 。標(biāo) 記 定 義 。，它用于定義網(wǎng)頁文件的標(biāo)題。，它用于定義網(wǎng)頁文件的標(biāo)題。2 2

7、）正文主體（）正文主體（BodyBody）由由和和標(biāo)記定義。標(biāo)記定義。body =#n color=#n其中，其中，bgcolorbgcolor為背景顏色為背景顏色，colorcolor為文本顏色為文本顏色。n n為六位十六進(jìn)制數(shù)為六位十六進(jìn)制數(shù)。如果網(wǎng)頁使用背景圖像，格式如下：如果網(wǎng)頁使用背景圖像，格式如下：body 3. HTML語言簡介語言簡介 案例回顧案例回顧3. HTML語言簡介語言簡介標(biāo)記格式標(biāo)記格式字形結(jié)果字形結(jié)果/B 粗體粗體斜體斜體/U 下劃線下劃線上標(biāo)上標(biāo)下標(biāo)下標(biāo)3. HTML語言簡介語言簡介3. HTML語言簡介語言簡介3. HTML語言簡介語言簡介3. HTML語言簡介

8、語言簡介案例回顧案例回顧3. HTML語言簡介語言簡介22/723. HTML語言簡介語言簡介23/72 3. HTML語言簡介語言簡介24/72 3. HTML語言簡介語言簡介25/723. HTML語言簡介語言簡介26/724. FrontPage2003 應(yīng)用應(yīng)用27/724. FrontPage2003 應(yīng)用應(yīng)用標(biāo)題欄菜單欄常用工具欄格式工具欄視圖欄標(biāo)記欄工作區(qū)4. FrontPage2003 應(yīng)用應(yīng)用29/724. FrontPage2003 應(yīng)用應(yīng)用站點(diǎn)是指一個專門用來存放網(wǎng)站文件的站點(diǎn)是指一個專門用來存放網(wǎng)站文件的文件夾，需要一個名字和一個根目錄，以后文件夾，需要一個名字和一個根

9、目錄，以后所有站點(diǎn)的文件都將存放在這個根目錄下。所有站點(diǎn)的文件都將存放在這個根目錄下。30/724. FrontPage2003 應(yīng)用應(yīng)用站點(diǎn)的創(chuàng)建有以下幾種方法：站點(diǎn)的創(chuàng)建有以下幾種方法：利用向?qū)?chuàng)建利用向?qū)?chuàng)建 利用模板創(chuàng)建利用模板創(chuàng)建 12自定義站點(diǎn)自定義站點(diǎn) 34. FrontPage2003 應(yīng)用應(yīng)用32/72網(wǎng)網(wǎng)頁頁視視圖圖1文文件件夾夾視視圖圖2報報表表視視圖圖3導(dǎo)導(dǎo)航航視視圖圖4超超鏈鏈接接視視圖圖5任任務(wù)務(wù)視視圖圖6 網(wǎng)頁視圖是網(wǎng)頁視圖是FRONTPAGE 最常用的視圖最常用的視圖，網(wǎng)頁的創(chuàng)建，網(wǎng)頁的創(chuàng)建、編輯、預(yù)覽、編輯、預(yù)覽等都在該視圖等都在該視圖中進(jìn)行。中進(jìn)行。 文件夾

10、視圖文件夾視圖下，站點(diǎn)顯示下，站點(diǎn)顯示為一組文件和為一組文件和文件夾，可在文件夾，可在此視圖中創(chuàng)建此視圖中創(chuàng)建、移動和刪除、移動和刪除文件或文件夾文件或文件夾。 報表視圖可報表視圖可以方便的了解以方便的了解當(dāng)前站點(diǎn)的文當(dāng)前站點(diǎn)的文件內(nèi)容、更新件內(nèi)容、更新鏈接情況、組鏈接情況、組件錯誤，所有件錯誤，所有文件列表及變文件列表及變化情況?；闆r。 導(dǎo)航視圖可導(dǎo)航視圖可以方便地觀察以方便地觀察站點(diǎn)的鏈接結(jié)站點(diǎn)的鏈接結(jié)構(gòu)，以層狀組構(gòu)，以層狀組織結(jié)構(gòu)圖得形織結(jié)構(gòu)圖得形式顯示式顯示。 超鏈接視超鏈接視圖將當(dāng)前站點(diǎn)圖將當(dāng)前站點(diǎn)顯示為鏈接文顯示為鏈接文件的一個網(wǎng)絡(luò)件的一個網(wǎng)絡(luò)，它就象一張，它就象一張地圖，表明站

11、地圖，表明站點(diǎn)中的超級鏈點(diǎn)中的超級鏈接接 任務(wù)視圖任務(wù)視圖主要用來創(chuàng)建主要用來創(chuàng)建和管理任務(wù)，和管理任務(wù)，列出了當(dāng)前站列出了當(dāng)前站點(diǎn)尚未完成的點(diǎn)尚未完成的任務(wù)任務(wù)。4. FrontPage2003 應(yīng)用應(yīng)用33/72新建：新建：“文件文件”-“-“新建新建”-“-“新建新建”任務(wù)窗格任務(wù)窗格-“-“新建網(wǎng)頁新建網(wǎng)頁”-“-“其他網(wǎng)頁模板其他網(wǎng)頁模板”。打開：打開：“文件文件”-“-“打開打開”或或“常用常用”工具欄的工具欄的“打開打開”按鈕，在彈出的按鈕，在彈出的“打開文件打開文件”對話框中選擇相應(yīng)的網(wǎng)頁；對話框中選擇相應(yīng)的網(wǎng)頁；如需要打開的文件已在打開的網(wǎng)站中，在文件夾視圖中雙擊如需要打開的

12、文件已在打開的網(wǎng)站中，在文件夾視圖中雙擊該網(wǎng)頁圖標(biāo)即可將其打開。該網(wǎng)頁圖標(biāo)即可將其打開。保存：保存：“文件文件”-“-“保存保存”或或“常用常用”工具欄的工具欄的“保存保存”按按鈕，如需另存可使用鈕，如需另存可使用“文件文件”菜單的菜單的“另存為另存為”命令。命令。4. FrontPage2003 應(yīng)用應(yīng)用4. FrontPage2003 應(yīng)用應(yīng)用4. FrontPage2003 應(yīng)用應(yīng)用36/72在在FrontPage2003FrontPage2003中預(yù)覽網(wǎng)頁中預(yù)覽網(wǎng)頁1在瀏覽器中預(yù)覽網(wǎng)頁在瀏覽器中預(yù)覽網(wǎng)頁24. FrontPage2003 應(yīng)用應(yīng)用37/72 插入水平線插入水平線14.

13、FrontPage2003 應(yīng)用應(yīng)用 “插入插入”-“-“水平線水平線”修改：修改：u雙擊水平線雙擊水平線u選中水平線右鍵水平線屬性選中水平線右鍵水平線屬性38/72 插入圖像插入圖像24. FrontPage2003 應(yīng)用應(yīng)用“插入插入”-“-“圖片圖片”設(shè)置圖片屬性設(shè)置圖片屬性雙擊雙擊圖片圖片選中選中圖片圖片-格式格式-屬性屬性選中選中圖片圖片右鍵右鍵圖片圖片屬性屬性編輯圖片編輯圖片利用圖片工具欄旋轉(zhuǎn)等利用圖片工具欄旋轉(zhuǎn)等39/72 插入字幕 34. FrontPage2003 應(yīng)用應(yīng)用40/72 插入交互式按鈕插入交互式按鈕44. FrontPage2003 應(yīng)用應(yīng)用 “ “插入插入”-

14、“Web-“Web組件組件”-“-“組件類型組件類型”-“-“動態(tài)效果動態(tài)效果”-“-“選擇一種效果選擇一種效果”-“-“交互式按鈕交互式按鈕”-“-“完成完成” 設(shè)置按鈕設(shè)置按鈕 字體字體 圖像圖像 鏈接鏈接41/72 插入站點(diǎn)計數(shù)器插入站點(diǎn)計數(shù)器54. FrontPage2003 應(yīng)用應(yīng)用“插入插入”-“Web-“Web組件組件”-“-“插入插入WebWeb組件組件”-“-“組件類型組件類型”-“計數(shù)器計數(shù)器”-“-“選擇計數(shù)器樣式選擇計數(shù)器樣式”-“-“完成完成”-“-“計數(shù)器屬性計數(shù)器屬性”42/72建立文本超級鏈接建立文本超級鏈接14. FrontPage2003 應(yīng)用應(yīng)用（2 2）

15、“插入超鏈接插入超鏈接”對話框中選擇要鏈接的目標(biāo)網(wǎng)頁，單擊對話框中選擇要鏈接的目標(biāo)網(wǎng)頁，單擊“確定確定”按鈕按鈕43/72建立圖像超級鏈接建立圖像超級鏈接24. FrontPage2003 應(yīng)用應(yīng)用4. FrontPage2003 應(yīng)用應(yīng)用1.1.選擇需要添加熱點(diǎn)的圖片在選擇需要添加熱點(diǎn)的圖片在“圖片圖片”工具欄上，單擊長工具欄上，單擊長方形、圓形或多邊形熱點(diǎn)按鈕匹配需要的形狀。方形、圓形或多邊形熱點(diǎn)按鈕匹配需要的形狀。2.2.在圖片上，在圖片上，采用鼠標(biāo)拖動操作畫出所選形狀采用鼠標(biāo)拖動操作畫出所選形狀。畫多邊形。畫多邊形時，可單擊多邊形的第一個角，然后依次單擊多邊形其他時，可單擊多邊形的第一

16、個角，然后依次單擊多邊形其他角的位置，最后雙擊完成多邊形。角的位置，最后雙擊完成多邊形。3.3.釋放鼠標(biāo)，彈出釋放鼠標(biāo)，彈出“插入超鏈接插入超鏈接”對話框，按照插入超鏈對話框，按照插入超鏈接中所講方法創(chuàng)建超鏈接即可。接中所講方法創(chuàng)建超鏈接即可。3建立熱點(diǎn)超級鏈接建立熱點(diǎn)超級鏈接45/72書簽超級鏈接書簽超級鏈接44. FrontPage2003 應(yīng)用應(yīng)用應(yīng)用書簽?zāi)軌蚋鼑?yán)格地控制用戶到達(dá)網(wǎng)頁內(nèi)的某個具體位置。應(yīng)用書簽?zāi)軌蚋鼑?yán)格地控制用戶到達(dá)網(wǎng)頁內(nèi)的某個具體位置。書簽是網(wǎng)頁中被標(biāo)記的位置或被標(biāo)記的文本。書簽是網(wǎng)頁中被標(biāo)記的位置或被標(biāo)記的文本。1 1）插入書簽）插入書簽（1 1）選中作為書簽的文本，

17、或?qū)⒐鈽?biāo)定位在要插入書簽的位置。）選中作為書簽的文本，或?qū)⒐鈽?biāo)定位在要插入書簽的位置。（2 2） “插入插入”-“-“書簽書簽”-“-“確定確定”2 2）創(chuàng)建書簽超鏈接）創(chuàng)建書簽超鏈接（1 1）選定要定義超鏈接的文本或圖片；）選定要定義超鏈接的文本或圖片；（2 2）“插入插入”-“-“超鏈接超鏈接”命令，命令，-“-“鏈接到鏈接到”-“-“本文本文檔中的位置檔中的位置”，選擇要鏈接的書簽；，選擇要鏈接的書簽；-“-“確定確定”46/72創(chuàng)建電子郵件鏈接創(chuàng)建電子郵件鏈接54. FrontPage2003 應(yīng)用應(yīng)用（1 1）選擇作為電子郵件超鏈接的文本或圖片；）選擇作為電子郵件超鏈接的文本或圖片；

18、（2 2）“插入插入”-“-“超鏈接超鏈接”-“-“鏈接到鏈接到”-“-“電子郵件地址電子郵件地址”-“-“確定確定”。47/72下載文件超級鏈接下載文件超級鏈接64. FrontPage2003 應(yīng)用應(yīng)用（1 1）選擇作為文件超鏈接的文本或圖片；）選擇作為文件超鏈接的文本或圖片；（2 2）“插入插入”-“-“超鏈接超鏈接”-“-“選擇一個壓縮選擇一個壓縮文件文件”-“-“確定確定”。 4. FrontPage2003 應(yīng)用應(yīng)用2. 2. 設(shè)置表格屬性設(shè)置表格屬性 將光標(biāo)定位到表格內(nèi)部或選中表格將光標(biāo)定位到表格內(nèi)部或選中表格,“,“表格表格”-“-“表格屬表格屬性性”“”“表格表格”3. 3.

19、 設(shè)置單元格屬性設(shè)置單元格屬性 將光標(biāo)定位到單元格將光標(biāo)定位到單元格,“,“表格表格”-“-“表格屬性表格屬性”單元格單元格表格的其他操作（插入、刪除、調(diào)整等）類似與表格的其他操作（插入、刪除、調(diào)整等）類似與word2003word2003！49/72v單元格間距單元格間距v邊框粗細(xì)（通常設(shè)為邊框粗細(xì)（通常設(shè)為0 0）v單元格邊距（通常設(shè)為單元格邊距（通常設(shè)為0 0）幾個概念幾個概念1表格與單元格屬性表格與單元格屬性2表格的相關(guān)操作表格的相關(guān)操作3 插入表格、插入刪除插入表格、插入刪除行和列、行高與列寬的調(diào)行和列、行高與列寬的調(diào)整、合并與拆分單元格。整、合并與拆分單元格。4. FrontPag

20、e2003 應(yīng)用應(yīng)用50/72 4. FrontPage2003 應(yīng)用應(yīng)用51/72 在在FRONTPAGE中，可以把一個瀏中，可以把一個瀏覽器窗口分成幾個區(qū)域，每一個部分可覽器窗口分成幾個區(qū)域，每一個部分可以顯示不同的網(wǎng)頁。以顯示不同的網(wǎng)頁。4. FrontPage2003 應(yīng)用應(yīng)用52/72 4. FrontPage2003 應(yīng)用應(yīng)用4. FrontPage2003 應(yīng)用應(yīng)用1. 1. 創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁2. 2. 保存框架網(wǎng)頁保存框架網(wǎng)頁3. 3. 拆分框架拆分框架4. FrontPage2003 應(yīng)用應(yīng)用4. FrontPage2003 應(yīng)用應(yīng)用4. 4. 刪除框架刪除框架選擇要

21、刪除的框架，選擇要刪除的框架，“框架框架” “ “刪除框架刪除框架”5. 5. 設(shè)置框架屬性設(shè)置框架屬性4. FrontPage2003 應(yīng)用應(yīng)用57/72表單的組成表單的組成14. FrontPage2003 應(yīng)用應(yīng)用58/72插入文本框插入文本框24. FrontPage2003 應(yīng)用應(yīng)用59/72插入文本區(qū)插入文本區(qū)34. FrontPage2003 應(yīng)用應(yīng)用與文本框的不同之處在于文本區(qū)中可以接受多行文本與文本框的不同之處在于文本區(qū)中可以接受多行文本“插入插入”-“表單表單”-“文本區(qū)文本區(qū)”60/72插入復(fù)選框插入復(fù)選框44. FrontPage2003 應(yīng)用應(yīng)用 將光標(biāo)放在要插入復(fù)選

22、框的位置，將光標(biāo)放在要插入復(fù)選框的位置，“插入插入”-“表單表單”-“復(fù)選框復(fù)選框”在復(fù)選框旁鍵入文字進(jìn)行說明在復(fù)選框旁鍵入文字進(jìn)行說明61/72插入選項按鈕插入選項按鈕54. FrontPage2003 應(yīng)用應(yīng)用將光標(biāo)放在要插入選項按鈕的位置，將光標(biāo)放在要插入選項按鈕的位置，“插入插入”-“表單表單”-“選項按鈕選項按鈕”?！斑x項按鈕屬性選項按鈕屬性”對話框中，對話框中，“組名稱組名稱”用來設(shè)用來設(shè)置此選項按鈕所屬組的名稱，如果把多個選項按置此選項按鈕所屬組的名稱，如果把多個選項按鈕編成一組，必須使它們的組名稱相同。鈕編成一組，必須使它們的組名稱相同。62/72插入分組框插入分組框64. FrontPage2003 應(yīng)用應(yīng)用將一組相關(guān)的控件或文本與網(wǎng)頁或當(dāng)前表單中的其他信將一組相關(guān)的控件或文本與網(wǎng)頁或當(dāng)前表單