2000網(wǎng)頁(yè)設(shè)計(jì)工具-最新課件

網(wǎng)頁(yè)設(shè)計(jì)工具§2FrontPage2000的組成

工具欄菜單欄工作區(qū)網(wǎng)頁(yè)顯示方式視圖欄一、菜單欄

菜單欄包括文件、編輯、查看、插入、格式、工具、表格、框架、窗口、幫助等十個(gè)菜單組。選擇不同的菜單項(xiàng)，就可以執(zhí)行不同的操作。二、工具欄

FrontPage把常用的一些操作以工具按鈕的形式放在工具欄中，方便用戶操作。三、視圖欄

FrontPage2000共有六種視圖，視圖欄是用來(lái)切換視圖的。使用不同的視圖可以從不同的側(cè)面查看設(shè)計(jì)的Web站點(diǎn)。1．網(wǎng)頁(yè)視圖網(wǎng)頁(yè)視圖是用來(lái)顯示選中的網(wǎng)頁(yè)，網(wǎng)頁(yè)的創(chuàng)建、編輯、預(yù)覽等基本操作都在網(wǎng)頁(yè)視圖中進(jìn)行。雙擊文件夾列表中的某個(gè)HTML文件，在工作區(qū)就會(huì)顯示該網(wǎng)頁(yè)的內(nèi)容。2．文件夾視圖文件夾視圖以列表的形式列出當(dāng)前的Web站點(diǎn)的文件夾里所包含的文件。3．報(bào)表視圖報(bào)表視圖給出站點(diǎn)的一些統(tǒng)計(jì)信息。4．導(dǎo)航視圖通過(guò)導(dǎo)航視圖可以方便地組織站點(diǎn)中各網(wǎng)頁(yè)的層次關(guān)系，如果站點(diǎn)設(shè)置了導(dǎo)航功能，就可以先在這里設(shè)置好各網(wǎng)頁(yè)的層次關(guān)系，然后用導(dǎo)航欄把這種層次關(guān)系表現(xiàn)出來(lái)5．鏈接視圖超鏈接視圖是用來(lái)查看選中網(wǎng)頁(yè)中設(shè)置的超鏈接情況。6．任務(wù)視圖任務(wù)視圖里放著關(guān)于站點(diǎn)維護(hù)的任務(wù)列表，如果站點(diǎn)需要由多人維護(hù)，他們就可以通過(guò)任務(wù)列表知道工作的進(jìn)展情況。四、工作區(qū)在工作區(qū)可以完成創(chuàng)建、維護(hù)和管理WEB站點(diǎn)的全部工作。五、網(wǎng)頁(yè)顯示模式網(wǎng)頁(yè)顯示模式有普通、HTML和預(yù)覽三種模式。在普通模式下可以編輯網(wǎng)頁(yè)的內(nèi)容以及設(shè)置各種格式。在HTML模式下可以看到當(dāng)前編輯的網(wǎng)頁(yè)的HTML文本文件，如熟悉HTML語(yǔ)言則可進(jìn)行修改編輯。在預(yù)覽模式下，可以看到當(dāng)前編輯的網(wǎng)頁(yè)在瀏覽器中的顯示實(shí)況，但不能編輯網(wǎng)頁(yè)。§3FrontPage網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

一、網(wǎng)頁(yè)設(shè)計(jì)常用術(shù)語(yǔ)

1．統(tǒng)一資源定位器統(tǒng)一資源定位器（URL）是指網(wǎng)絡(luò)上某一資源的完整地址，是網(wǎng)絡(luò)上不同的服務(wù)器或同一服務(wù)器上不同網(wǎng)頁(yè)的標(biāo)志。例如：以下是一個(gè)完整的URLhttp://www.Ecit.Edu.Cn/Network/Index.asp

超文本輸協(xié)議

一個(gè)www服務(wù)器的主機(jī)地址該服務(wù)器下的一個(gè)目錄名

一個(gè)具體的網(wǎng)頁(yè)文件

2．網(wǎng)絡(luò)文件與網(wǎng)站

網(wǎng)絡(luò)文件：是一個(gè)存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。它包含一個(gè)或多個(gè)網(wǎng)頁(yè)，這些網(wǎng)頁(yè)以一定的方式鏈接在一起，成為一個(gè)整體，站點(diǎn)（網(wǎng)站）：用來(lái)描述一組完整的信息。網(wǎng)絡(luò)文件與服務(wù)器共同構(gòu)成。3．網(wǎng)頁(yè)與主頁(yè)

網(wǎng)頁(yè)：網(wǎng)絡(luò)文件的基本組成部分。網(wǎng)頁(yè)中可以有文字、表格、圖象、聲音和視頻等信息。主頁(yè)：既像普通網(wǎng)頁(yè)一樣，可以存放各種信息。又是一個(gè)特殊的網(wǎng)頁(yè)，它是整個(gè)網(wǎng)絡(luò)文件的起始點(diǎn)和匯總點(diǎn)。二、創(chuàng)建站點(diǎn)

1．創(chuàng)建站點(diǎn)

選擇菜單欄中的“文件”、“新建”、“站點(diǎn)”菜單，在“新建”站點(diǎn)對(duì)話框中，選擇站點(diǎn)的類型，并指定新站點(diǎn)位置和名稱，單擊“確定”按鈕。站點(diǎn)創(chuàng)建好后，會(huì)自動(dòng)創(chuàng)建_Private和_images兩個(gè)文件夾以及index.htm主頁(yè)。用來(lái)存放站點(diǎn)中所用到的圖形文件用來(lái)存放網(wǎng)頁(yè)文件2．站點(diǎn)設(shè)置

單擊“工具”、“站點(diǎn)設(shè)置”命令，在打開的如下圖所示的“站點(diǎn)設(shè)置”對(duì)話框中，進(jìn)行各個(gè)選項(xiàng)卡的設(shè)置。二、創(chuàng)建網(wǎng)頁(yè)

1．規(guī)劃和設(shè)計(jì)網(wǎng)頁(yè)

（1）站點(diǎn)主題

（2）站點(diǎn)主頁(yè)“Index.htm”主頁(yè)文件（3）站點(diǎn)素材

文字、圖形、圖像、動(dòng)畫、視頻及聲音等（4）設(shè)計(jì)Web的結(jié)構(gòu)

2．網(wǎng)頁(yè)布局

網(wǎng)頁(yè)的布局：包括頁(yè)面的整體風(fēng)格、各種頁(yè)面元素的排列方式以及文本、圖形的格式等規(guī)劃。是網(wǎng)站工作的重要組成部分。

（1）頁(yè)面尺寸

頁(yè)面尺寸與顯示器的大小及分辨率有關(guān)。分辨率越高，頁(yè)面顯示尺寸越大。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，一般不要使網(wǎng)頁(yè)的尺寸超過(guò)二屏。（2）網(wǎng)頁(yè)布局的技術(shù)

1）表格布局

表格的制作、應(yīng)用、編輯與在Word中相同。

后面將詳細(xì)介紹2）框架布局

框架布局的特點(diǎn)是可以把一個(gè)網(wǎng)頁(yè)頁(yè)面分成幾個(gè)獨(dú)立的區(qū)域，每個(gè)區(qū)域就像一個(gè)獨(dú)立的網(wǎng)頁(yè)，可以實(shí)現(xiàn)在一個(gè)網(wǎng)頁(yè)內(nèi)顯示多個(gè)HTML文件的功能。后面將詳細(xì)介紹

3．創(chuàng)建網(wǎng)頁(yè)

在對(duì)網(wǎng)頁(yè)進(jìn)行了規(guī)劃和設(shè)計(jì)后，單擊“文件”、“新建”、“網(wǎng)頁(yè)”，在“新建”對(duì)話框中，你可以根據(jù)網(wǎng)頁(yè)的要求，選擇“常規(guī)”、“框架網(wǎng)頁(yè)”、“樣式表”中的任何一種格式來(lái)創(chuàng)建網(wǎng)頁(yè)。

§4FrontPage網(wǎng)頁(yè)設(shè)計(jì)初步

一、文字編輯網(wǎng)頁(yè)中的文字輸入及格式的設(shè)置與Word相同。常見的文字編輯工作：字體、字號(hào)、顏色、字符間距、特殊效果、邊框底紋。查找、替換功能二、段落格式

設(shè)置方法也與Word相同。段落格式的基本設(shè)置：

對(duì)齊方式、行距、間距等。三、項(xiàng)目符號(hào)和編號(hào)

設(shè)置文檔的項(xiàng)目符號(hào)和編號(hào)，可使網(wǎng)頁(yè)的文字信息結(jié)構(gòu)化、層次化，文檔更有條理，從而提高網(wǎng)頁(yè)的可讀性。例如：四、水平線的操作

有時(shí)需要在文章的段落之間插入一條水平線，是頁(yè)面段落的區(qū)分顯得更加鮮明。

例如：

五、網(wǎng)頁(yè)背景

FrontPage默認(rèn)使用白色作為網(wǎng)頁(yè)的背景，用戶也可以對(duì)網(wǎng)頁(yè)背景的顏色進(jìn)行設(shè)置。例如：

除了用單一的顏色作為網(wǎng)頁(yè)背景外，也可以選擇圖片或水印作為背景。例如：六、圖片的應(yīng)用

把光標(biāo)移到需要插入圖片或視頻的位置從“插入”菜單中選擇“圖片”命令再選擇“剪切畫”或“來(lái)自文件”或“視頻”應(yīng)當(dāng)注意：其圖片的類型必須是Gif或Jpg。圖片的編輯：?jiǎn)螕暨x中網(wǎng)頁(yè)圖片后，在編輯區(qū)的下方會(huì)出現(xiàn)如下所示“圖片”編輯工具欄，利用圖片工具欄中的各種工具可以對(duì)圖片進(jìn)行各種處理。七、超級(jí)鏈接

超級(jí)鏈接(超鏈接):根據(jù)超鏈接源的不同分為文本超鏈接或圖片超鏈接

1．創(chuàng)建文本超級(jí)鏈接

選中作為超鏈接源的文本

“插入”菜單中選擇“超鏈接”命令

從“創(chuàng)建超鏈接”對(duì)話框中,選擇超鏈接目標(biāo)后，單擊“確定”按鈕。

2．創(chuàng)建圖片的超鏈接（1）為整個(gè)圖片建立超鏈接

選中作為超鏈接源的圖片

在“插入”菜單中選擇“超鏈接”命令“創(chuàng)建超鏈接”對(duì)話框中,選擇超鏈接目標(biāo)后，單擊“確定”按鈕

（2）在圖片上創(chuàng)建熱點(diǎn)區(qū)或文本熱點(diǎn)

熱點(diǎn)區(qū)域:圖片的某個(gè)區(qū)域位置對(duì)應(yīng)有超鏈接。

1）創(chuàng)建熱點(diǎn)區(qū)

在“網(wǎng)頁(yè)”的視圖方式下選中要?jiǎng)?chuàng)建熱點(diǎn)的圖片工具欄中選擇創(chuàng)建熱點(diǎn)的形狀

將光標(biāo)移到圖片上，此時(shí)光標(biāo)變成筆狀，按住鼠標(biāo)左鍵在圖片上繪制對(duì)應(yīng)圖象的熱點(diǎn)范圍松開鼠標(biāo)左鍵，F(xiàn)orntPage將自動(dòng)打開“創(chuàng)建超鏈接”對(duì)話框，為熱點(diǎn)選擇一個(gè)目標(biāo)

2）創(chuàng)建文本熱點(diǎn)

在“工具”欄中選擇“文本”工具

把文本框移到合適的位置，調(diào)整大小，輸入文字后面的操作方法與創(chuàng)建熱點(diǎn)區(qū)完全相同。

§5FrontPage網(wǎng)頁(yè)設(shè)計(jì)的布局

表格不僅可以顯示文本、圖片、視頻等網(wǎng)頁(yè)元素，還是控制頁(yè)面布局、規(guī)劃網(wǎng)頁(yè)的有效工具。

一、使用表格布局

例如：一個(gè)典型的用表格制作的網(wǎng)頁(yè)1．表格的設(shè)計(jì)選擇菜單欄中的“文件”、“新建”、“網(wǎng)頁(yè)”菜單命令。在打開的“新建”對(duì)話框中選取網(wǎng)頁(yè)樣式，如“普通網(wǎng)頁(yè)”選項(xiàng)卡，單擊“確定”。選擇菜單欄中的“表格”、“插入”、“表格”菜單命令，插入一個(gè)二行一列表格，將表格第一行調(diào)整高度，把第二行拆分為九個(gè)單元格。然后，把第一單元格和第二單元格合并。在第一個(gè)表格底下插入一個(gè)二行三列表格，并調(diào)整各行的高度。利用單元格的合并把第一行的第一單元格和第二單元格合并一個(gè)單元格。選取表格或單元格，按下鼠標(biāo)右鍵，在彈出快捷菜單中選擇“表格屬性”或“單元格屬性”菜單命令，在“表格屬性”或“單元格屬性”對(duì)話框中對(duì)各表格或單元格進(jìn)行屬性的設(shè)置。分別在表格不同區(qū)域中進(jìn)行文字編輯、圖象編輯、設(shè)置背景、超級(jí)鏈接等編輯工作。二、使用框架布局

框架：可以將一個(gè)網(wǎng)頁(yè)分割為幾個(gè)獨(dú)立的區(qū)域，每個(gè)區(qū)域是一個(gè)框架窗口，每個(gè)框架窗口都可以單獨(dú)顯示一個(gè)普通網(wǎng)頁(yè)。一個(gè)框架網(wǎng)頁(yè)可包含多個(gè)不同的普通網(wǎng)頁(yè)，普通網(wǎng)頁(yè)的設(shè)計(jì)方法對(duì)框架網(wǎng)頁(yè)都是有效的。1．創(chuàng)建框架網(wǎng)頁(yè)

選擇菜單欄中的“文件”、“新建”、“網(wǎng)頁(yè)”菜單命令。在打開的“新建”對(duì)話框中選取“框架網(wǎng)頁(yè)”選項(xiàng)卡，在給出的框架樣式中選取需要的框架樣式，如標(biāo)題、頁(yè)腳和目錄，單擊“確定”。如有需要，可對(duì)框架布局進(jìn)行一些調(diào)整。選中某個(gè)框架窗口，單擊“框架”，選擇“拆分框架”、“框架屬性”、“刪除框架”命令對(duì)框架進(jìn)行布局調(diào)整。框架樣式有四個(gè)獨(dú)立的區(qū)域，可以建立四個(gè)普通的網(wǎng)頁(yè)，加上框架網(wǎng)頁(yè)本身一共是五個(gè)網(wǎng)頁(yè)。每個(gè)區(qū)域都有“設(shè)置初始網(wǎng)頁(yè)”和“新建網(wǎng)頁(yè)”兩個(gè)按鈕。單擊“設(shè)置初始網(wǎng)頁(yè)”是指定一個(gè)已經(jīng)存在的網(wǎng)頁(yè)作為該區(qū)域的初始網(wǎng)頁(yè)，單擊“新建網(wǎng)頁(yè)”是為該區(qū)域創(chuàng)建一個(gè)網(wǎng)頁(yè)。

按照網(wǎng)頁(yè)規(guī)劃，對(duì)每個(gè)框架窗口進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，其方法與普通網(wǎng)頁(yè)設(shè)計(jì)完全相同。單擊“文件”、“保存”，在彈出的“另存為”對(duì)話框的“文件名(N)：”中，首先輸入框架網(wǎng)頁(yè)文件名。然后，依次輸入各框架窗口網(wǎng)頁(yè)文件名。三、使用表單布局表單頁(yè)：具有交互性的網(wǎng)頁(yè)表單頁(yè)作用：收集瀏覽者輸入的信息，實(shí)現(xiàn)網(wǎng)上調(diào)查、在線查詢、網(wǎng)上訂貨和在線申請(qǐng)1．表單和表單域的概念表單域：有單行文本框、滾動(dòng)文本框、復(fù)選框、單選按鈕、下拉菜單、普通按鈕、圖象、標(biāo)簽等八種。表單：由一系列的表單域組成的。每個(gè)表單域都有一個(gè)名稱，用戶填寫的數(shù)據(jù)就是通過(guò)這些表單域的名字來(lái)傳遞的。一般情況下，用戶的表單提交后，都會(huì)有一個(gè)“確認(rèn)表單”的頁(yè)面呈現(xiàn)在用戶的面前。2．表單網(wǎng)頁(yè)的制作例如：如下表單網(wǎng)頁(yè)選擇菜單欄中的“文件”、“新建”、“網(wǎng)頁(yè)”菜單命令。在打開的“新建”對(duì)話框中選取網(wǎng)頁(yè)樣式，如“普通網(wǎng)頁(yè)”選項(xiàng)卡，單擊“確定”。插入文字、水平線、背景圖將光標(biāo)落在插入表單處，選擇菜單欄中的“插入”、“表單”、“表單”菜單命令。此時(shí)，在插入點(diǎn)的位置上出現(xiàn)一個(gè)虛線框，產(chǎn)生了一個(gè)表單，表單自動(dòng)生成了“提交”和“全部重寫”兩個(gè)普通按鈕，設(shè)計(jì)者可根據(jù)規(guī)劃調(diào)整表單的大小按表單的設(shè)計(jì)要求，在相應(yīng)的位置插入對(duì)應(yīng)的表單域。比如：先輸入“姓名：”，選擇菜單欄中的“插入”、“表單”、“單行文本框”就插入了“單行文本框”表單域，可以根據(jù)輸入字符的多少調(diào)整文本框大小。用同樣的方法插入插入其它的表單域，“個(gè)人愛好：”選擇菜單欄中的“插入”、“表單”、“復(fù)選框”菜單命令，插入一個(gè)“復(fù)選框”?！耙庖姾徒ㄗh：”選擇菜單欄中的“插入”、“表單”、“滾動(dòng)文本框”菜單命令，插入一個(gè)滾動(dòng)文本框，并調(diào)整大小。保存表單網(wǎng)頁(yè)3．處理表單結(jié)果表單處理程序?qū)Ρ韱蔚奶幚碛兴姆N方式：使用文本文件保存使用電子郵件發(fā)送表單結(jié)果將表單發(fā)送到一個(gè)指定的數(shù)據(jù)庫(kù)、發(fā)送給其他對(duì)象在默認(rèn)的情況下，表單文件將自動(dòng)存放站點(diǎn)中_private目錄下，文件名“form-results.txt”的文本文件中。4．確認(rèn)表單網(wǎng)頁(yè)用戶填寫好表單后，按“提交”按鈕。當(dāng)把表單提交出去后，在瀏覽器窗口會(huì)自動(dòng)出現(xiàn)“確認(rèn)網(wǎng)頁(yè)”，使用戶確認(rèn)表單信息是否已正確發(fā)送出去。§6制作動(dòng)態(tài)網(wǎng)頁(yè)使用字幕

創(chuàng)建懸停按鈕

使用橫幅廣告

插入計(jì)數(shù)器

一、使用字幕

選擇菜單欄中的“插入”、“組件”、“字幕”菜單命令。彈出“字幕屬性”對(duì)話框。在文本框中輸入字幕的文字“熱烈祝賀東華理工學(xué)院成立五十周年”并對(duì)方向、速度、表現(xiàn)方式、文本對(duì)齊方式、大小、重復(fù)等參數(shù)進(jìn)行設(shè)置。單擊“字幕屬性”對(duì)話框中的“樣式”，彈出“修改樣式”對(duì)話框，單擊“格式”按鈕，進(jìn)行字體、邊框等參數(shù)的設(shè)置。之后，單擊“確定”按鈕。二、創(chuàng)建懸停按鈕

懸停按鈕的效果是，當(dāng)鼠標(biāo)放在懸停按鈕上，其顏色和形狀都會(huì)發(fā)生改變，具有動(dòng)態(tài)效果。將光標(biāo)定位在要插入“懸停按鈕”的“懸停按鈕示例”位置上，選擇菜單欄中的“插入”、“組件”、“懸停按鈕”菜單命令，在“懸停按鈕屬性”對(duì)話框中進(jìn)行各項(xiàng)設(shè)設(shè)置。單擊【確定】按鈕，而后，將文件保存。三、使用橫幅廣告

使用橫幅廣告可以使多個(gè)畫面在橫幅廣告位置上循環(huán)顯示，橫幅廣告適合制作一些商業(yè)性廣告。將光標(biāo)定位在要插入“橫幅廣告”的位置上，選擇菜單欄中的“插入”、“組件”、“橫幅廣告管理器”菜單命令，在彈出的如圖9-19所示的“橫幅廣告管理器屬性”對(duì)話框中進(jìn)行寬度、高度、過(guò)渡效果、每幅圖片顯示時(shí)間、添加要顯示的圖片等各項(xiàng)設(shè)置。單擊【確定】按鈕，而后，將文件保存。四、插入計(jì)數(shù)器計(jì)數(shù)器是用來(lái)統(tǒng)計(jì)站點(diǎn)訪問人數(shù)。將光標(biāo)定位在要插入計(jì)數(shù)器的位置上，選擇菜單欄中的“插入”、“組件”、“站點(diǎn)計(jì)數(shù)器”菜單命令。在打開的“站點(diǎn)計(jì)數(shù)器屬性”對(duì)話框中選擇一種計(jì)數(shù)器樣式，單擊“確定“按鈕。而后，將文件保存。請(qǐng)注意，只有當(dāng)你將站點(diǎn)發(fā)布到Web服務(wù)器，并設(shè)置了網(wǎng)站的FrontPage服務(wù)器擴(kuò)展后，計(jì)數(shù)器才能正常顯示?！?-5插入視頻及音頻文件1．插入視頻在網(wǎng)頁(yè)中播放視頻文件有兩種方法：將視頻文件插入到網(wǎng)頁(yè)的某個(gè)位置，使它在網(wǎng)頁(yè)種播放使用超級(jí)鏈接指向視頻文件，當(dāng)訪問者單擊該超級(jí)鏈接播放將光標(biāo)定位在要插入視頻的位置上，選擇菜單欄的“插入”、“圖片”、“視頻”命令。在彈出的“視頻”對(duì)話框中選取一個(gè)視頻文件。右擊視頻文件，從快捷菜單中選擇“圖片屬性”，在“圖片屬性”對(duì)話框中進(jìn)行循環(huán)次數(shù)、循環(huán)延時(shí)、開始播放條件等設(shè)置。2．插入音頻在網(wǎng)頁(yè)中播放音頻文件也有兩種方法使用超級(jí)鏈接將音頻文件放置到網(wǎng)頁(yè)的某個(gè)位置上，把音樂作為網(wǎng)頁(yè)的背景音樂。

右擊網(wǎng)頁(yè)的某個(gè)