網頁設計技術課件_第1頁
網頁設計技術課件_第2頁
網頁設計技術課件_第3頁
網頁設計技術課件_第4頁
網頁設計技術課件_第5頁
已閱讀5頁,還剩308頁未讀, 繼續(xù)免費閱讀

VIP免費下載

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

第1章

網站設計與網頁制作基礎

本章要點:

網站的概念

網站的設計與實現(xiàn)

HTML及其語法1.1網站概述

1.1.1Internet與Web服務

Internet是一個覆蓋范圍極廣,功能極其強大的網絡,在Internet上用戶可以享受很多服務,Web服務是目前Internet上很重要也是用戶最多的一項服務。

Web服務最初是由日內瓦歐洲核物理研究中心(CERN)開發(fā)的一個科研項目,1990年底研制成功并投入使用。

1993年初,美國國家超級計算機應用中心(NCSA)開發(fā)的基于圖形用戶界面的MOSAIC瀏覽器問世,使得Web服務得以突飛猛進地發(fā)展。隨后,Internet上Web服務器的數(shù)量也成幾何數(shù)增長,并使得Web服務迅速成為Internet上最有吸引力的服務之一。

1.1.2網頁與網站

Internet上各式超文本文件稱為網頁(Page)。其中其中超文本(Hypertext)是一種文件格式,是一種對信息的描述方法,這種描述方法不受系統(tǒng)平臺的限制,可以在不同的平臺上使用,用戶也可以在各種操作系統(tǒng)上瀏覽這些超文本文件。在每一個頁面上,可以有一些詞、語句或圖片等作為“鏈接點(Link)”,通過這些鏈接點可以快速地跳轉到本網站的其它頁面或其它網站上的頁面。這種“鏈接點”方式稱為超鏈接。存放這些頁面的服務器稱為網站。

1.2網站設計

1.2.1網站規(guī)劃

1.確定主題和目的

2.可行性分析

可行性分析是指分析建設者是否有能力建設和維護網站,即這個網站的制作在經濟上及技術上是否可行,是否具備一定的經濟效益和社會效益,是否值得為制作和維護網站而付出時間、精力和金錢。

3.確定網站的功能、形式

1.2.2網站實現(xiàn)

1.服務器選擇

2.網頁的編寫

3.網頁調試

4.網頁的發(fā)布

5.維護與管理

1.3HTML概述

1.3.1HTML簡介

HTML語言是由一個世界性的標準化組織W3C(WorldWideWebConsortium)制定出來的。該語言自1990年問世以來,迄今為止已經發(fā)行了4個版本?,F(xiàn)在最新的是HTML4.0版本,通過瀏覽“/pub/www/”站點,可以了解HTML標準的最新動態(tài)。

HTML文件本身是一個ASCII文件,在任何文本編輯器中都可以進行編輯,當一個HTML文件編輯好后,必須用擴展名“.htm”或“.html”來存儲,以表示該文件是HTML文檔。一個HTML文件是由內容和標記構成的。

1.3.2HTML基本語法

HTML文件通常由4個主要的標識元素構成,基本格式為:

<HTML><HEAD><TITLE>HTML文件標題演示</TITLE></HEAD><BODY>HTML文件的內容在這里顯示

</BODY></HTML>

下面簡單介紹一些HTML文件中常見的標記及其功能與用法

1.子標題標記

HTML定義了6個級別的子標題,從<H1>到<H6>,數(shù)字越小,字號越大。定義格式為:<Hn>子標題名稱</Hn>。

2.分段、換行、原樣顯示標記

<P>:段落標記,它是一個雙向標記,相當于回車換行。

<BR>:也是一個換行標識,同樣也是一個雙向標記。不同于<P>的是,由它定義的換行,兩行之間不留空行。

<PRE>:雙向標識,標識以原始文本格式進行顯示。

3.超文本鏈接標記

<A>:雙向標識,用于標識超文本鏈接。使用格式為:

<A>超鏈接標記</A>創(chuàng)建的超鏈接可以有以下幾種形式:

(1)鏈接到其它網頁

(2)鏈接到本網頁的其它部分

(3)鏈接到FTP服務器定義格式為:<AHREF=FTP服務器地址>超鏈接標記</A>。

(4)鏈接到E-mail地址定義格式為:<AHREF=”mailto:URL”>超鏈接標記</A>。

(5)將圖像作為超鏈接標記在網頁中嵌入圖像:定義格式為:<IMGSRC=”圖像文件名或URL”>。

4.網頁文本修飾標記修飾網頁文本的標記非常豐富,下面列舉幾種主要的標記

(1)字體修飾

(2)設置字號和顏色定義格式為:

<FONTCOLOR=#csize=n>文字……</FONT>

(3)居中顯示定義格式為:<CENTER>文字……</CENTER>。

(4)橫線標識

5.HTML標記應用舉例

HTML代碼如下:

<html><head><title>我的個人網站首頁</title></head><body><h1>歡迎光臨個人網站:(這里是標題1)</h1><hrnoshadecolor="#000000"align="left"><h2>互聯(lián)網簡介(這里是標題2)</h2><palign="center"><fontcolor=“#FF0000”face=“黑體”>隨著

<ahref="/china/index.htm">Internet</a>技術的飛速發(fā)展,Internet用戶正以指數(shù)級速度在增長。

<imgborder="0"src="file:///d:/ie.JPG"align="right"width="58"height="63"></font></p><p><br><fontsize="2">現(xiàn)在已經沒有人懷疑,是Internet打破了傳統(tǒng)的信息傳播方式,是Internet實現(xiàn)了世界范圍內的網絡間的互聯(lián)和資源共享。</font></p><p>它沒有地理上的差別和時間上的限制,具有其獨有的互聯(lián)、開放和共享模式,真正的將全世界緊密的聯(lián)系在一起。</p></br></body></html>網頁的瀏覽效果如下圖

2.1熟悉FrontPage20022.1.1FrontPage2002用戶界面

2.1.2菜單的使用

菜單是包含一組選項的列表。用戶可以單擊一個菜單來顯示它下面的項目,或者可以通過【Alt】鍵并同時按下標題中帶下劃線的字符,來訪問它。

2.1.3工具欄的使用

工具欄包含了一系列圖標,它們中的每一個都對應于FrontPage的一個命令或選項。工具欄中默認情況下包含了很多常用的命令選項,單擊它們旁邊的一個向下的箭頭,會出現(xiàn)一個相關的子菜單,通過展開的菜單來選擇想要的命令或選項。

提示:當拖動工具欄到原始位置或在FrontPage窗口中拖動工具欄到左邊、右邊、頂端或底端時,工具欄會自動捕獲適當位置。2.1.4視圖欄的使用

視圖欄在默認情況下出現(xiàn)在屏幕的左下方。

FrontPage2002的視圖欄包括【網頁】、【文件夾】、【報表】、【導航】、【超鏈接】和【任務】等六種模式。

【視圖欄】

【視圖欄】快捷菜單

打開/隱藏【視圖欄】

2.1.5主編輯區(qū)

根據視圖欄中選擇的不同模式,主編輯區(qū)會出現(xiàn)不同的內容模式:

1.【網頁】視圖模式

2.【文件夾】視圖模式

3.【報表】視圖模式

4.【導航】視圖模式

5.【超鏈接】視圖模式

6.【任務】視圖模式

2.1.6任務窗口

任務窗口是MicrosoftOfficeXP新增的工具,F(xiàn)rontPage2002任務窗口如右圖根據需要,可以靈活地關閉或從【視圖】→【任務窗格】菜單中打開。它可以減少用戶在搜尋最近用過的檔案和常用功能時所耗精力,提高工作效率。

2.1.7自定義FrontPage2002的界面

FrontPage2002的界面完全可以根據使用者的愛好進行自定義。步驟如下:打開【工具】→【自定義】選項,

【自定義】對話框

設定【命令】選項

【自定義】選項設置

2.2FrontPage2002幫助信息獲取

2.2.1聯(lián)機幫助系統(tǒng)

執(zhí)行【幫助】→【MicrosoftFrontPage幫助】命令,或者在常用工具欄上單擊按鈕,打開【MicrosoftFrontPage幫助】窗口,啟動FrontPage

2002的聯(lián)機幫助系統(tǒng)。

【MicrosoftFrontPage幫助】窗口

【MicrosoftFrontPage幫助】窗口中各個選項卡的用法:

1.使用【目錄】選項卡

以查找“新建Web頁”幫助信息為例介紹【目錄】選項卡的使用:(1)打開【MicrosoftFrontPage幫助】窗口,單擊【目錄】選項卡。(2)用鼠標雙擊目錄內容列表中的【設計Web頁】幫助信息,顯示其下屬的幫助主題。(3)用鼠標雙擊展開的下屬幫助主題中的【創(chuàng)建Web頁】,展開后再雙擊其中的【新建Web頁】選項,則在窗口右面的列表框內將顯示該選項的內容,即為所查找的幫助信息。

2.使用【應答向導】選項卡使用【應答向導】選項卡的步驟如下:

(1)單擊【應答向導】選項卡。

(2)在【請問您要做什么】文本框中填入問題“創(chuàng)建表單”。

(3)單擊【搜索】按鈕,F(xiàn)rontPage2002聯(lián)機幫助系統(tǒng)就會檢索出所有與“創(chuàng)建表單”這一問題有關的幫助主題,并列在【請選擇要顯示的主題】列表框里。

(4)在【請選擇要混示的主題】列表框中選擇最符合要求的幫助主題,在對話框右邊的列表框中將出現(xiàn)這一幫助主題的具體說明。

3.使用【索引】選項卡以“創(chuàng)建CSS級聯(lián)式樣表”為例,說明其使用方法:

(1)單擊【索引】選項卡。(2)在【請鍵入關鍵詞】文本框中輸入關鍵詞:CSS。(3)此時,在【或者選擇關鍵詞】列表框中會出現(xiàn)CSS,表明這個關鍵詞是存在的。(4)按回車鍵,或者單擊【搜索】按鈕,開始查找所有與CSS相關的幫助主題,該主題將列在【請選擇一項主題】列表框中。(5)在【請選擇一項主題】列表框中找到【創(chuàng)建級聯(lián)樣式表】主題,單擊后即可在對話框右邊的列表框內列出該主題的內容。

2.2.2從【網上Office】系統(tǒng)中尋求幫助

2.3FrontPage2002新增功能

2.3.1FrontPage2002的主要新功能

1.新風格的用戶界面

2.出色的兼容性

3.強大的組件功能

(1)在FrontPage2002中,用戶可以使用系統(tǒng)提供的67個網站主題。

(2)用戶可以通過FrontPage2002圖片庫組件,輕松建立圖片庫,用來顯示圖片。

2.3.2FrontPage2002中的其它新功能

可選的超鏈接下劃線

自定義鏈接欄

電子商務加載項

語音命令

除了以上介紹的一些新的特點和功能外,F(xiàn)rontPage2002還增加了一些新的工具,如:自動網頁內容、活動討論板、動態(tài)在線調查表、訪問分析、Top10列表等等

3.1網頁操作

3.1.1新建網頁

1.由空白網頁創(chuàng)建網頁(1)在【常規(guī)】工具欄中單擊工具圖標或按【Ctrl+N】鍵,在主編輯窗口將出現(xiàn)一個大的空白區(qū);也可以執(zhí)行【文件】→【網頁或站點】命令,打開【新建網頁或站點】任務窗格。如右圖。(2)在【新建網頁或站點】任務窗格中,單擊執(zhí)行【新建】選項下的【空白網頁】命令,直接進入FrontPage2002的編輯舞臺2.從模板創(chuàng)建網頁

具體操作步驟如下:(1)在【新建網頁或站點】任務窗格中,單擊執(zhí)行【根據模板新建】選項下的【網頁模板】命令,打開如右圖所示【網頁模板】對話框

(2)在【網頁模板】對話框中,選中要創(chuàng)建的網頁模板。

(3)單擊【確定】,F(xiàn)rontPage2002就會根據模板打開一個新網頁3.1.2保存網頁

保存網頁的具體操作步驟如下:

(1)在【常規(guī)】工具欄中單擊工具圖標或按快捷鍵【Ctrl+S】,也可執(zhí)行【文件】→【保存】命令,打開【另存為】對話框。

(2)如果要把網頁保存到本地計算機或局域網中,可以在【另存為】對話框中的【保存位置】選項中找到保存的位置,單擊【保存】按鈕保存網頁。另外,可以通過【文件名】文本框來修改文件名。(3)如果用戶擁有對FTP站點的控制權限(可寫),就可以隨時將網頁保存到FTP站點的文件夾中。此時需要在【另存為】對話框中的【保存位置】下拉列表選取FTP位置。3.1.3打開網頁

在【常規(guī)】工具欄中單擊圖標或按【Ctrl+O】鍵;也可執(zhí)行【文件】→【打開】命令,打開【打開文件】對話框。在【打開文件】對話框中,可以通過【查找范圍】下拉列表選擇文件路徑。文件列表區(qū)將列出所選目錄中的文件。選中文件列表中的文件,然后單擊【打開】按鈕,或直接雙擊該文件名即可打開文件。

3.1.4關閉網頁

關閉網頁文件的操作很簡單。執(zhí)行【文件】→【關閉】命令或直接按快捷鍵【Alt+F4】,會彈出一個提示對話框,如下圖:

當單擊【是】按鈕時,F(xiàn)rontPage2002會自動將文件保存起來并關閉該文件;當單擊【否】按鈕時,F(xiàn)rontPage2002不保存但關閉該文件;當單擊【取消】按鈕時,F(xiàn)rontPage2002不關閉該文件,并返回原來的編輯窗口。

3.2編輯網頁

3.2.1選定文本

3.2.2基本編輯技術

1.文本的移動

使用鼠標移動文本;利用菜單的剪切操作;使用快捷鍵。

2.文本的復制用鼠標拖動;利用菜單命令復制文本;使用快捷鍵。

3.文本的刪除執(zhí)行刪除操作途徑很多,例如:使用鍵盤的【Delete】鍵;使用【常用】工具欄上的【剪切】按鈕;執(zhí)行【編輯】→【刪除】命令等。

3.2.3查找和替換

1.查找文本

(1)執(zhí)行【編輯】→【查找】命令,或直接按快捷鍵【Ctrl+F】,打開【查找和替換】對話框中的【查找】選項卡。

(2)若執(zhí)行命令之前就已經選中了要查找的文本,則在【查找對話框】中的【查找內容】文本框中就會顯示所選中的文本;若未選中要查找內容,則在【查找對話框】中輸入要查找的文本內容。

(3)當各選項設定后,單擊【查找下一個】按鈕,系統(tǒng)就會在所選的文件中按照指定的查找方向查找指定的文本,當找到后,就以高亮度顯示該文本。

(4)連續(xù)單擊【查找下一個】按鈕,就可以按指定方向繼續(xù)查找。直至最后,系統(tǒng)會提示“FrontPage已完成搜索文檔”信息。

2.替換文本

(1)執(zhí)行【編輯】→【替換】命令,或按快捷鍵【Ctrl+H】,打開【替換】選項卡,也可以從上面的【查找和替換】對話框中直接切換到【替換】選項卡。(2)若在執(zhí)行命令之前已選中了要替換的文本,則在替換對話框的【查找內容】中就會顯示所選中的文本;若未選中要替換的文本,則在【查找內容】中輸入要查找的文本內容。在【替換為】文本框中輸入替換文本,則當查找到要替換的文本后,F(xiàn)rontPage就用【替換為】文本框中的文本替換查找到的指定文本。其它選項操作與查找相同。

(3)選定各選項后,按【查找下一個】按鈕,系統(tǒng)光標就停在找到的下一個內容上,此時,若單擊【替換】按鈕,則此處原來內容被新內容替換掉;若單擊【查找下一個】按鈕,系統(tǒng)將不替換此處的內容而繼續(xù)找下一個。若單擊【全部替換】按鈕,則系統(tǒng)自動將當前網頁中按指定方向搜索到的原內容全部替換成新內容。

3.3網頁制作輔助工具

圖形素材編輯工具可選用Adobe公司的Illustrator或Corel公司的CorelDraw。

圖像素材編輯工具可選用Adobe公司的Photoshop、Director等。

聲音素材及MIDI音樂的編輯工具可選用Windows中的錄音機或購買聲卡附帶的應用程序等。

平面動畫素材編輯工具可選用Micromedia公司的FlashMX等。

三維動畫素材編輯工具可選用Autodesk公司的3DSMAX等。

視頻影像素材編輯工具可選用Adobe公司的Premiere等。

腳本、特效編輯工具可選用JavaScript、VBScript、SHTML等。

此外,網頁制作過程中,可能還需要借助一些文件格式轉化工具及一些外部設備,如:掃描儀、打印機等。

3.4網頁預覽

1.直接在FrontPage2002中預覽

在FrontPage2002的【網頁】視圖編輯窗口中,單擊顯示轉換欄中的【預覽】選項卡,就可以直接在編輯區(qū)域中瀏覽網頁的制作效果。

2.瀏覽器方式預覽

執(zhí)行【文件】→【在瀏覽器中預覽】命令,或單擊【常規(guī)】工具欄中的圖標,也可以直接按快捷鍵【Ctrl+Shift+B】,打開【在瀏覽器中預覽】對話框,在對話框中選擇一個瀏覽器類型,將窗口大小設置為默認值,單擊【預覽】按鈕即可。

3.5有關網頁基本元素的操作

3.5.1字體

通過執(zhí)行【格式】→【字體】命令,打開【字體】對話框來設置。3.5.2段落

通過執(zhí)行【格式】→【段落】命令,打開【段落】對話框來設置。

提示:在【常用】工具欄上,若將鼠標放在相應的按鈕上,會出現(xiàn)相應的文本提示。常用的按鈕總會直接出現(xiàn)在工具欄上,而有些不常用的工具可以通過單擊工具欄后面的按鈕打開,以進行選取。3.5.3水平線

1.插入水平線

執(zhí)行【插入】→【水平線】命令,系統(tǒng)就會立即在當前位置插入一條水平線。

2.水平線的屬性設置

執(zhí)行彈出快捷菜單中的【水平線屬性】命令,打開【水平線屬性】對話框,也可以直接雙擊水平線打開【水平線屬性】對話框。3.刪除水平線

單擊想要刪除的水平線進行選中,然后直接按【Delete】鍵即可完成刪除。

3.5.4網頁背景

為網頁添加背景顏色,可以通過如下操作實現(xiàn):執(zhí)行【格式】→【背景】命令,或直接在所編輯網頁的空白區(qū)域,單擊鼠標右鍵,執(zhí)行彈出快捷菜單中的【網頁屬性】命令,打開【網頁屬性】對話框,選擇其中的【背景】選項卡。在【格式】選項組中可以選擇【背景圖片】或【水印】作為網頁的背景。通過【瀏覽】按鈕可以查找選取需要的圖片。在【顏色】選項組中的【背景】下拉框中可以選擇任意一種顏色作為網頁的背景顏色。

3.6設置列表

FrontPage2002中提供了六種列表,分別為:

(1)編號列表:是采用不同風格的數(shù)字作為項目的符號。

(2)項目列表

(3)定義列表

(4)菜單列表:采用實心圓點作為項目符號,每一項都是一個小段落;

(5)目錄列表

(6)圖像列表3.7超鏈接

3.7.1URL的含義

URL地址由四部分組成,其基本格式如下:傳輸協(xié)議或傳輸方式名稱://服務器地址或域名(:端口號)/路徑/文件名.擴展名

3.7.2超鏈接的類型

超鏈接有多種類型,通過執(zhí)行【插入】→【超鏈接】命令可以打開【插入超鏈接】對話框。鏈接類型:

(1)【原有文件或Web頁】是指鏈接到已存在的某個網頁或文件的超鏈接。

(2)【本文檔中的位置】是指鏈接到所編輯文檔本身中的某個位置的超鏈接。

(3)【新建文檔】是指鏈接到還沒有創(chuàng)建的網頁上的超鏈接。

(4)可以在【插入超鏈接】對話框中預先設置好所需的超鏈接相關屬性選擇鏈接到電子郵件地址的超鏈接

3.7.3創(chuàng)建超鏈接

在網頁中創(chuàng)建超鏈接是非常方便的,具體操作步驟如下:(1)在網頁內選取需要建立超鏈接的文字或者圖片;

(2)執(zhí)行【插入】→【超鏈接】命令,或單擊【常用】工具欄上的【超鏈接】按鈕也可以直接按快捷鍵【Ctrl+k】,打開【插入超鏈接】對話框;

(3)在【鏈接到】中選擇所要插入超鏈接的類型;(4)設置好以上參數(shù)后,單擊【確定】按鈕,就完成了相應的超鏈接。

注意:若要確保所有站點訪問者無論使用的是什么計算機語言或操作系統(tǒng)都能夠跟蹤URL,就應該在站點的URL中使用純ASCII字符。在Intranet中,只要服務器與所有客戶端都共享同一系統(tǒng)代碼頁,則在文件名中使用非ASCII字符也能正常工作。3.7.4管理超鏈接

管理超鏈接主要包括以下幾方面:查看Web站點中的所有內部超鏈接、驗證各個外部超鏈接的有效性、修復斷開的超鏈接、更新所有超鏈接。單擊【視圖】欄上的【超鏈接】按鈕,將在主編輯窗口中打開網站中所有頁面間的鏈接關系圖。

3.7.5向超鏈接添加字體效果

為使得超鏈接文字更加醒目,除了可以為超鏈接添加文字提示外,還可以為超鏈接添加字體效果。當訪問者將指針移至超鏈接上時,字體就會有所變化,并出現(xiàn)相應的文字提示。制作出如下圖所示的效果。具體操作步驟如下:

(1)按照所示的頁面輸入文本,插入圖片。(2)選中文本“飛鷹”,執(zhí)行【插入】→【超鏈接】命令,或單擊【常用】工具欄上的【超鏈接】按鈕打開【插入超鏈接】對話框,為“飛鷹”創(chuàng)建超鏈接。(3)在所編輯頁面上,用鼠標右鍵單擊網頁空白處,執(zhí)行快捷菜單上的【網頁屬性】命令,然后單擊【背景】選項卡。(4)在【格式】選項中,選中【啟用超鏈接翻轉效果】復選框,單擊【翻轉樣式】,為當前網頁上的超鏈接設置翻轉屬性。

3.7.6刪除超鏈接

刪除超鏈接有下面兩種情況:

1.完全刪除超鏈接,包括鏈接點的文本或圖片

2.刪除超鏈接但保留超鏈接點的文本或圖片這種情況可以直接選中作為超鏈接的文本或圖片,按【Delete】鍵即可刪除。這種操作的具體步驟如下:

(1)選中超鏈接的文本或圖片。

(2)單擊鼠標右鍵,執(zhí)行快捷菜單中的【超鏈接屬性】命令,打開【編輯超鏈接】對話框

。3.8書簽

3.8.1書簽的作用

書簽的作用是跳轉和定位,它可以用超鏈接的方法在多個網頁之間進行跳轉,也可以在同一個頁面里跳轉。它的最大優(yōu)點是可以使訪問者迅速跳到目標網頁的某部分。3.8.2創(chuàng)建書簽

創(chuàng)建書簽的具體操作步驟如下:

(1)在編輯窗口中,選擇要轉化成書簽的文本或光標位置。(2)執(zhí)行【插入】→【書簽】命令,打開【書簽】對話框。(3)在【書簽名稱】文本框中輸入書簽的名稱;在【此網頁中的其它書簽】列表框中,顯示當前頁面所有定義的書簽名稱,輸入的書簽名稱不能與這些名稱相同。

(4)設置好相關選項后,單擊【確定】按鈕,生成書簽。

3.8.3使用書簽

1.鏈接到頁面內的書簽

2.鏈接到別的頁面的書簽

3.8.5刪除一個書簽(1)若想刪除一個書簽,將光標移動到書簽所在位置,單擊鼠標右鍵并執(zhí)行快捷菜單中的【書簽屬性】命令,打開【書簽】對話框。(2)在書簽列表中選擇網頁中的書簽,再單擊【清除】按鈕即可清除該書簽。

4.1使用圖像改善網頁效果

4.1.1圖像格式簡介

1.JPG格式

JPG是利用JPEG方法壓縮的圖像格式,它也是瀏覽器所廣泛支持的一種格式。

2.GIF格式

GIF(GraphicsInterchangeFormat)是“圖形互換格式”的簡稱,它是專為聯(lián)機圖形設計的,目的是能夠在不同平臺上交流使用。

3.BMP格式

BMP(BitMap)是一種與設備無關的圖像文件格式,它是Windows軟件推薦使用的一種位圖格式。

4.1.2圖像的基本操作

1.調整圖像的大小

2.設置圖像邊框

3.設置圖像與文本的對齊方式

4.設置圖像環(huán)繞

5.設置圖像間距

通過實例說明如何設置圖像間距:

(1)在網頁中插入兩幅圖像;

(2)選中圖像,單擊鼠標右鍵,執(zhí)行快捷菜單上的【圖片屬性】命令,打開【圖片屬性】對話框,選擇【外觀】選項卡,將【布局】選項中的【水平間距】、【垂直間距】設置為20,單擊【確定】按鈕,完成設置。

4.1.3圖像工具欄的使用

在FrontPage2002中,可以直接使用【圖像】工具欄中的各種工具對網頁中的圖像進行編輯。通過執(zhí)行【視圖】→【工具欄】→【圖片】命令,打開【圖片】工具欄,如圖:

4.1.4創(chuàng)建圖像映射

圖像映射就是在圖像的局部區(qū)域上定義一個鏈接到其他對象或網頁的超鏈接。圖像映射通常通過兩種途徑實現(xiàn):通過幾何圖形創(chuàng)建鏈接熱點和通過圖片中的文本建立一個圖像映射。下面通過具體實例來介紹其創(chuàng)建方法,最后的效果如圖

具體操作步驟如下:(1)創(chuàng)建一個新網頁,在網頁中加入如圖所示的元素:表格、文字和一幅準備好的圖片,并作好網頁的布局。然后選中圖片準備創(chuàng)建熱點。(2)單擊【圖片】工具欄的按鈕,在圖片中插入文字,這時如果圖片不是GIF格式,系統(tǒng)會提示將其轉換為GIF格式。(3)此時在圖片中會出現(xiàn)一個白邊的輸入框,框中有一個閃動的光標,提示用戶輸入文字。在輸入框中輸入“地球”,并調節(jié)邊框的大小,執(zhí)行【格式】→【字體】命令或直接通過【格式】工具欄上的快捷命令編輯字體的顏色和大小。

(4)在輸入的文字上單擊鼠標右鍵,執(zhí)行快捷菜單中的【圖片熱點屬性】命令,打開【編輯超鏈接】對話框,選擇本熱點要鏈接到的目標網頁。如下圖所示:(5)依次重復步驟2、3、4為圖片添加其他的文字熱點。

(6)單擊【圖片】工具欄的按鈕,為圖片插入幾何形狀的熱點。

(7)重復步驟6,為圖片中的其它星體創(chuàng)建熱點。

(8)另外,單擊【圖片】工具欄的按鈕,可以突出所有定義的熱點,保存網頁,在瀏覽器中瀏覽,效果如下圖所示:4.1.5圖片的替代性文本和低分辨率圖片

在FrontPage2002中為圖片添加替代性文本的具體操作步驟如下:

(1)在【網頁】視圖中,用鼠標右鍵單擊圖形,執(zhí)行快捷菜單上的【圖片屬性】命令,也可以直接在編輯狀態(tài)下雙擊圖片,打開【圖片屬性】對話框。(2)單擊【圖片屬性】對話框中的【常規(guī)】選項卡,如圖4-8所示。在【替代表示】項的【文本】文本框中輸入替代文本。(3)單擊【確定】按鈕,完成設置。這樣在預覽時,就可以看到替代圖片顯示的文本。

注意:很多Web瀏覽器在下載圖形的過程中,或瀏覽者將鼠標移動到圖片上方時,也會出現(xiàn)圖片的顯示文本,另外,在選擇替代文本時,所選文字應該能夠表達圖像的主要含義。4.2表格4.2.1創(chuàng)建和編輯表格

FrontPage2002中提供了四種創(chuàng)建表格的方法:

1.快速創(chuàng)建表格單擊【常用】工具欄中的【插入表格】按鈕

2.菜單命令插入表格執(zhí)行【表格】→【插入】→【表格】命令,打開【插入表格】對話框

3.手繪表格操作步驟如下:

(1)執(zhí)行【表格】→【手繪表格】命令,打開【表格】工具欄

(2)單擊【表格】工具欄的【手繪表格】按鈕,鼠標指針在文本編輯區(qū)變?yōu)殂U筆狀圖標。

4.將文本轉換為表格要將文本轉換為表格,必須先設置文本的格式。一般用逗號分割數(shù)據項,用回車符表示段落結束

4.2.2表格工具欄的操作

【表格】工具欄中常用工具的使用。

手繪表格

擦除

插入行

插入列

合并單元格

填充顏色

單元格布局

4.2.3設置表格各種屬性

執(zhí)行【表格】→【表格屬性】命令,可以看到表格屬性包括三部分:表格屬性、單元格屬性和標題屬性,打開其中的【表格屬性】對話框,如圖:表格的外觀設置示意圖

4.2.4頁面布局

如下圖所示,就是一個采用表格布局的網頁,具體制作過程,用戶可以參考以上的表格編輯方法,自己獨立完成。

4.3創(chuàng)建框架網頁

4.3.1認識框架

下面是一個簡單的框架網頁示例,如下圖所示。設計時使用框架將網頁分為三部分,點擊左下邊框架中的導航網頁時,通過右下邊的主要區(qū)域顯示目標網頁的內容。

4.3.2在網頁中使用框架

1.使用模板創(chuàng)建框架網頁

(1)執(zhí)行【文件】→【新建】→【網頁或站點】命令,出現(xiàn)【新建網頁或站點】任務窗格,打開【網頁模板】對話框,選擇【框架網頁】選項卡(2)在選項卡的【預覽】選項窗口中會出現(xiàn)所選框架模板的外觀縮略圖。根據需要選擇合適的框架網頁模板,單擊【確定】按鈕

(3)新建的框架網頁包括3個框架,可以看到每個框架里都有一個【設置初始網頁】按鈕和一個【新建網頁】按鈕。

2.在框架中加入網頁

(1)在已經選擇【新建網頁】的框架里,單擊鼠標右鍵,執(zhí)行快捷菜單中的【在新窗口中打開網頁】命令,就會出現(xiàn)一個新的編輯窗口

(2)在新窗口中編輯完成后,關閉網頁,這時包含該頁面的框架網頁窗口中會自動顯示該網頁。

4.3.3編輯框架

1.調整各個框架的布局(大?。?/p>

(1)用鼠標直接拖動。將鼠標放在框架的線上,當鼠標變成雙向箭頭時,按住鼠標左鍵,左右或上下拖動鼠標,到滿意的位置再放開鼠標左鍵即可。

(2)通過設置【框架屬性】對話框的框架高度和寬度來精確的設定框架的大小。

2.拆分框架

(1)使用鼠標拆分框架。

(2)選中該框架,然后執(zhí)行【框架】→【拆分框架】命令,打開【拆分框架】對話框

4.3.4設置框架屬性

1.設置各個框架之間的間距和邊框寬度

具體操作步驟如下:(1)在當前網頁下,點擊某個框架邊框選中所有框架,執(zhí)行【文件】→【屬性】命令,打開【網頁屬性】對話框,切換到【框架】選項卡。(2)通過選項卡中【框架間距】選項來設置相鄰框架邊框之間的間隔大小。

2.設置框架各屬性操作步驟如下:

(1)在要修改屬性的框架中,單擊鼠標右鍵,執(zhí)行【框架屬性】命令,打開【框架屬性】對話框。

(2)可以在對話框的【名稱】文本框中,設定框架的名稱,也可以使用系統(tǒng)的默認值。

4.3.5嵌入式框架

還有一種特殊的框架是嵌入式框架。它與框架網頁的不同之處在于嵌入式框架及其內容是嵌入在普通的Web頁中,任何可以加載到普通網頁的內容都可以加載到嵌入式框架中。下面列舉一個嵌入式框架的應用實例:5.1動態(tài)組件效果

5.1.1為網頁或Web站點創(chuàng)建過渡效果打開所編輯網頁,執(zhí)行【格式】→【網頁過渡】命令。

網頁過渡效果

5.1.2動態(tài)

HTML效果

所謂“動態(tài)HTML”也就是DHTML。操作步驟:(1)選擇【格式】→【動態(tài)HTML效果】命令

(2)在所編輯的網頁中,選擇所要觸發(fā)效果的對象

(3)在【應用】選項中選擇所想要的動態(tài)效果

(4)緊接著【應用】選項之后的“選擇設置”下拉列表中是用來設置剛被選中的效果參數(shù)的。

(5)單擊頁面主編輯區(qū)下方的【預覽】按鈕,出現(xiàn)設定好特效的頁面預覽效果。

5.1.3懸停按鈕

懸停按鈕是具有動態(tài)效果的活動按鈕。將鼠標移至懸停按鈕時,它便顯示出一定的動態(tài)效果,在單擊按鈕后,該按鈕的顏色將發(fā)生變化,并同時打開所連接的目標頁面。另外,還可以設定當鼠標移至懸停按鈕或單擊按鈕時,伴隨著聲音的變化。操作步驟:(1)選擇【插入】→【Web組件】命令,打開了【Web組件】對話框。(2)單擊【完成】按鈕,打開【懸停按鈕屬性】對話框(3)接著用戶可以在【按鈕文本】文本框中,輸入在按鈕上要顯示的文字;單擊【字體】按鈕可以設置字體的屬性。在【鏈接到】中可輸入懸停按鈕鏈接目標的地址,也可以通過單擊【瀏覽】按鈕來查找確定的目標。(4)在【按鈕顏色】下拉列表中可選擇懸停按鈕的顏色,這是懸停按鈕的初始顏色。在【背景顏色】下拉列表中可選擇懸停按鈕的背景顏色,背景顏色將出現(xiàn)在懸停按鈕的后面?!緦挾取亢汀靖叨取恐锌稍O定懸停按鈕的尺寸大小。(5)在【效果】下拉列表中可選擇當鼠標指向懸停按鈕時所表現(xiàn)出的動態(tài)效果

5.1.4滾動字幕

(1)選擇【插入】→【Web組件】命令,打開了【Web組件】對話框。在【組件類型】中選擇“字幕”選項。(2)單擊【完成】按鈕,打開【字幕屬性】對話框(3)在【字幕屬性】對話框的【文字】文本框中,輸入需要播放的文字。在【方向】選項中選擇字幕的滾動方向。

(4)在【大小】選項中,設定字幕的尺寸大小

(5)最后單擊【確定】,并關閉對話框,完成操作。

5.1.5橫幅廣告

實現(xiàn)步驟如下:

(1)在所編輯網頁中選定要插入標題廣告的區(qū)域,再打開【插入】→【Web組件】命令,選擇【橫幅廣告管理器】命令,打開【橫幅廣告管理器屬性】對話框。(2)在【寬度】和【高度】文本框中,確定廣告的大小尺寸,尺寸的單位是像素。

(3)如想為圖片添加一個超鏈接目標,可以在【鏈接到】文本框內輸入超鏈接目標。

(4)在【顯示圖片】列表內,將所有要顯示的圖片添加進去。

5.1.6網站計數(shù)器

在站點中添加計數(shù)器的操作步驟如下:

(1)首先選擇好需要插入站點計數(shù)器的網站頁面,通常情況下都是在網站的首頁上。

(2)執(zhí)行【插入】→【Web組件】命令,顯示【插入Web組件】選項;選擇【組件類型】選項欄中的【計數(shù)器】選項,然后在對話框的右側【選擇計數(shù)器樣式】選項欄中選擇想要的計數(shù)器外貌。

(3)當選擇了五種樣式中的一種后,雙擊選中的計數(shù)器,這時將彈出

【站點計數(shù)器屬性】對話框。

(4)當選擇好外觀并設定好屬性后,單擊【確定】按鈕,完成操作,并保存網頁。

5.1.7音頻、視頻動畫

1.音頻對象的插入

(1)打開需要導入音頻的網頁,執(zhí)行【文件】→【屬性】命令,打開【網頁屬性】對話框。

(2)在【網頁屬性】對話框【常規(guī)】選項卡中,單擊【背景音樂】選項中的【瀏覽】按鈕,將出現(xiàn)【背景音樂】對話框,查找并選取想要的音頻文件。

(3)此時,選取文件的URL路徑會出現(xiàn)在【網頁屬性】對話框的【背景音樂】選項的【位置】文本框中。

(4)在【背景音樂】選項的【循環(huán)次數(shù)】文本框中輸入音樂的循環(huán)次數(shù),若希望音樂一直循環(huán)下去,可以選擇【次數(shù)不限】。

(5)最后單擊【確定】按鈕,背景音頻文件就插入到網頁中了。

2.視頻對象的插入

在FrontPage2002中為網頁中導入視頻對象的步驟如下:(1)執(zhí)行【插入】→【圖片】→【視頻】命令,打開【打開文件】對話框。查找選擇要用的視頻文件,單擊【確定】按鈕,返回到編輯網頁,F(xiàn)rontPage會生成一個框架顯示視頻外觀。如圖:

(2)在編輯頁面上雙擊視頻對象,出現(xiàn)【圖片屬性】對話框,其【視頻】選項的【重復】項中,可以控制視頻播放時的循環(huán)、間隔等屬性。在【開始】選項中若選擇【打開文件時】選項,可以讓瀏覽器在下載對象后馬上播放;選擇【當鼠標懸停于其上時】,是設定對象在鼠標停留在視頻上方時才播放。(3)在預覽網頁效果時,用戶可以單擊對象的任何一處再次播放;要結束或中途繼續(xù)播放,可以在對象上單擊鼠標。

5.2時間戳

網頁中“時間戳”效果

5.3包含網頁組件

5.3.1替換組件

(1)執(zhí)行【工具】→【站點設置】命令,打開【站點設置】對話框

(2)在【站點設置】對話框中單擊【參數(shù)】選項卡,在【參數(shù)】選項卡中單擊【添加】按鈕,出現(xiàn)一個【添加名稱與值】對話框(3)在【添加名稱與值】對話框的【名稱】文本框中輸入“day”,然后在【值】文本框中輸入“Sunday”,再單擊【確定】按鈕,按照這個步驟分別定義下面的幾個變量及值,分別設置如表

變量名稱數(shù)值daySundaytime2004-03-21add南京工業(yè)emailwg@(4)單擊【確定】按鈕。替換定義完畢。(5)下面將替換應用到網頁中。在【網頁】視圖模式下,確定需要插入替換的位置,執(zhí)行【插入】→【Web組件】命令,打開【插入Web組件】對話框。(6)在【插入Web組件】對話框中,選中【組件類型】選項框中的【包含內容】項,再選取【選擇內容類型】選項框中的【替換】,并單擊【完成】按鈕,打開【替換屬性】對話框。(7)在【替換為】下拉列表中選取要替換的變量名稱,再單擊【確定】按鈕,頁面上將出現(xiàn)該變量的值。

5.3.2包含頁面組件

具體操作步驟如下:(1)在【網頁】視圖模式下,確定需要包含其它網頁的位置,執(zhí)行【插入】→【Web組件】命令,打開【插入Web組件】對話框。(2)在【插入Web組件】對話框中,選中【組件類型】選項框中的【包含內容】項,再選取【選擇內容類型】選項框中的【網頁】,并單擊【完成】按鈕,打開【包含網頁屬性】對話框。(3)單擊【瀏覽】按鈕,選取要包含的網頁文件(擴展名為.htm)。如圖5-26所示,選定后,單擊【確定】按鈕,被選中的網頁將自動加到當前網頁中。(4)保存文件并瀏覽,得出如圖所示的效果。

包含網頁效果

5.3.3預定網頁

插入一個預定網頁操作步驟如下:(1)在【網頁】視圖模式下,確定需要插入預定網頁的位置,執(zhí)行【插入】→【Web組件】命令,打開【插入Web組件】對話框。(2)在【插入Web組件】對話框中,選中【組件類型】選項框中的【包含內容】項,再選取【選擇內容類型】選項框中的【預定網頁】。(3)點擊【完成】按鈕,打開【預定的包含網頁屬性】對話框,進行設置。(4)單擊【確定】按鈕,即預定了起于“開始時間”、止于“結束時間”的顯示網頁。

5.3.4預定圖片

步驟如下:

(1)在【網頁】視圖模式下,確定需要插入預定網頁的位置,執(zhí)行【插入】→【Web組件】命令,打開【插入Web組件】對話框。(2)在【插入Web組件】對話框中,選中【組件類型】選項框中的【包含內容】項,再選取【選擇內容類型】選項框中的【預定圖片】。

(3)點擊【完成】按鈕,打開【預定圖片屬性】對話框,在【預定圖片屬性】對話框中對【要顯示的圖片】進行設置。

(4)單擊【確定】按鈕,即預定了起于“開始時間”、止于“結束時間”的顯示圖片。

5.4使用搜索組件

搜索表單瀏覽效果

5.5ActiveX控件

5.5.1插入ActiveX控件在網頁中插入一個ActiveX控件的具體操作方法:(1)在【網頁】視圖模式下,選定要插入控件的網頁,并將插入點定位到具體位置。執(zhí)行【插入】→【Web組件】命令,打開了【Web組件】對話框。在【組件類型】中選擇【高級控件】選項,在右側的【選擇搜索類型】中選擇【ActiveX控件】選項。(2)點擊【下一步】按鈕,打開【插入Web組件】對話框(3)在【選擇一個控件】列表框中,列出了計算機上已安裝和注冊的所有可用的ActiveX控件,單擊【自定義】按鈕,可以在列表中添加或刪除ActiveX控件。(4)在【選擇一個控件】列表框中選中要插入的控件,這里選擇“ActiveMovieControlObject”,單擊【完成】按鈕。(5)回到頁面的編輯窗口,就可以看到頁面中被插入的ActiveX控件。

5.5.2編輯ActiveX控件

操作步驟:(1)在【網頁】視圖模式下,右擊頁面中要修改的ActiveX控件,并執(zhí)行【ActiveX控件屬性】命令,或雙擊該ActiveX控件,打開【選項】對話框。

(2)在【選項】對話框中有多個選項卡,其中可以修改ActiveX控件的相關屬性。(3)當所有選項都設定后,單擊【確定】按鈕,完成屬性設置。(4)回到網頁的編輯窗口,單擊底部的【預覽】標簽,切換到【預覽】視圖,或單擊工具欄上的預覽按鈕就會看到控件播放的視頻效果。

6.1表單概述

如圖是一個簡單的表單。表單中包含單行文本框、單選按鈕、復選框、提交按鈕、重置按鈕等項目(即下節(jié)中所說的表單域)。

6.1.1創(chuàng)建表單

1.用戶自己直接創(chuàng)建表單具體操作步驟如下:(1)明確表單要收集哪些信息,從而確定表單需要有哪些表單域以及表單域的類型;(2)將光標放置在編輯區(qū)要插入表單的空白處,執(zhí)行【插入】→【表單】→【表單】命令,插入空白表單,此時表單只包含【提交】和【重置】按鈕;

(3)向表單中添加所需的表單域及其注釋

2.使用向導創(chuàng)建表單網頁具體操作步驟如下:

(1)打開【網頁模板】對話框中,選擇【常規(guī)】選項卡,從中選擇【表單網頁向導】,打開【表單網頁向導】對話框,【表單網頁向導】對話框中有一個進度條,指示設置整個表單的進度。(2)單擊【下一步】按鈕,進入對話框。在這里可以點擊【添加】按鈕來進入添加表單項的對話框。

(3)在該對話框中,【選擇此問題要收集的輸入類型】列表里列出可供選擇的表單域提示信息??梢愿鶕枰啻螁螕簟咎砑印堪粹o添加問題,也可以對這些問題直接進行編輯。

(4)每添加完一個問題提示,單擊【下一步】按鈕,進入這個表單項的屬性設置對話框

。設置完畢后,單擊【下一步】按鈕,進入【設置表單處理程序】對話框。(6)這里可以設置如何處理表單,如【將結果保存到Web頁】、【將結果存為文本文件】以及【使用自定義的CGI腳本】等。(7)回到編輯窗口,會發(fā)現(xiàn)新建的網頁上產生了一個表單。如圖

3.使用模板創(chuàng)建表單

在FrontPage2002的【網頁模板】對話框中,打開【常規(guī)】選項卡,可以看到系統(tǒng)提供的多種表單網頁的模板,如“確認表單”、“搜索網頁”、“意見簿”、“意見反饋表單”、“用戶注冊”等模板,和其它網頁模板一起列出。用戶可以像使用表單網頁模板一樣來創(chuàng)建一個表單網頁,這和使用普通模板創(chuàng)建網頁沒有什么區(qū)別。6.1.2表單域類型

在執(zhí)行【插入】→【表單】命令時,用戶可以按住所彈出子菜單的最上方,將其拖出到編輯的窗口上,生成一個【表單】工具欄,如圖:6.2表單域

6.2.1單行文本框插入單行文本框的具體操作步驟如下:

(1)先確定要插入單行文本框的位置,然后執(zhí)行【插入】→【表單】→【文本框】命令,也可以單擊【表單】工具欄中的【文本框】按鈕進行插入。(2)鼠標右鍵單擊文本框,執(zhí)行彈出菜單中的【表單域屬性】命令,也可以直接雙擊文本框,打開【文本框屬性】對話框,如下圖所示:

6.2.2文本區(qū)(滾動文本框)

對文本區(qū)可進行如下操作:

(1)插入一個文本區(qū),同樣有兩種方法可以實現(xiàn):將光標移到要插入的位置,執(zhí)行【插入】→【表單】→【文本區(qū)】命令,也可以單擊【表單】工具欄上的【文本區(qū)】按鈕

,插入文本區(qū)。

(2)鼠標右鍵單擊文本區(qū),執(zhí)行彈出菜單中的【表單域屬性】命令,或直接雙擊文本區(qū),打開【文本框屬性】對話框。在【文本區(qū)屬性】對話框中,可以設置文本區(qū)的相關屬性。文本區(qū)的屬性與單行文本框的屬性基本相同,不同的是可以輸入多行的初始值,并且可以在【行數(shù)】文本框中指定文本區(qū)的行數(shù),其默認值是2。還可以通過拖動文本區(qū)周圍的控制點來改變文本區(qū)的寬度和行數(shù)。

6.2.3文件上載

操作步驟如下:

(1)先確定要插入單行文本框的位置,然后執(zhí)行【插入】→【表單】→【文件上載】命令,或者單擊【表單】工具欄上的【文件上載】按鈕

,插入文件上載控件。(2)直接在編輯窗口中雙擊文件上載表單域,打開【文件上載屬性】對話框。(3)在對話框中可以設置文件上載域的相關屬性。(4)單擊【文件夾】按鈕,打開【文件夾列表】窗口。(5)單擊鼠標右鍵,執(zhí)行【新建】→【文件夾】命令。(6)用鼠標右鍵單擊表單,選擇【表單屬性】菜單項。

6.2.4復選框

操作步驟如下:

(1)通過單擊【表單】工具欄上的【復選框】按鈕,可以插入復選框,添加文本注釋。(2)雙擊所添加【復選框】表單域,打開【復選框屬性】對話框,進行屬性設置。在【名稱】框中輸入該表單域的名稱。在【值】框中輸入的文本用來描述選中后的復選框所表示的含義。若要該選項初始狀態(tài)是選中的,在【初始狀態(tài)】選項欄中選中【選中】單選按鈕。如果一個表單上有多個復選框,每個復選框的名字可以是相同的。

6.2.5選項按鈕(單選按鈕)

使用選項按鈕的具體操作方法如下:

(1)在編輯窗口中的確定位置,單擊【表單】工具欄上的【選項】按鈕

,插入選項按鈕。如下圖所示,插入了4個選項按鈕,并分別為其添加了文字內容。

(2)雙擊編輯窗口中的選項按鈕,打開【選項按鈕屬性】對話框,設置選項按鈕的屬性。

6.2.6下拉框(下拉菜單)

操作方法如下:

(1)先確定要插入下拉框的位置,再單擊【表單】工具欄上的【下拉框】按鈕,插入一個空的下拉框,如圖:(2)雙擊頁面中的下拉框,打開【下拉框屬性】對話框,并進行相關屬性的設置。(3)單擊【下拉框屬性】對話框中的【添加】按鈕,打開【添加選項】對話框。(4)在其中的【選項】文本框中輸入列表項中各項的標題,若想在下拉框中選擇的值與下拉框中的選項的文本不同,可選中【指定值】復選框輸入該項所代表的值。

6.2.7按鈕

按鈕是表單中最常見的表單域,它可以完成訪問者提交表單、重置表單或其它特定功能。

6.2.8高級按鈕

單擊【表單】工具欄上的【高級按鈕】可以在表單中插入高級按鈕。

6.2.9分組框

使用分組框的具體操作如下:

(1)單擊【表單】工具欄上的【分組框】按鈕,在頁面上插入一個分組框。用戶可以直接在分組框中添加各種表單域。(2)右擊編輯頁面上的分組框,執(zhí)行快捷菜單上的【分組框屬性】命令,打開【分組框屬性】對話框。(3)在【標簽】文本框中,鍵入分組框標簽的名稱。在【對齊】下拉列表中,選擇所需的分組框標簽對齊方式。單擊【式樣】按鈕訪問其它使用級聯(lián)樣式表作為嵌入式樣式來設置表單格式的選項。

6.2.10圖片

表單中可以存放兩種圖片,一種是普通的圖片,還有一種是表單中具有特殊作用的圖片。

6.2.11標簽

要在網頁中插入標簽,首先選中要建立一個標簽的表單域和它的標簽文本,然后單擊【表單】工具欄中的【標簽】按鈕,或執(zhí)行【插入】→【表單】→【標簽】命令。

6.2.12隱藏表單域操作步驟如下:(1)在表單中單擊鼠標右鍵,彈出一個快捷菜單,執(zhí)行【表單屬性】命令,打開【表單屬性】對話框。(2)單擊【表單屬性】對話框中的【高級】按鈕,出現(xiàn)【高級表單屬性】對話框,(3)在這里可以添加隱藏域。單擊【添加】按鈕,出現(xiàn)一個【名稱/值對】對話框。輸入后單擊【確定】,回到高級表單屬性對話框。通過【添加】按鈕可以重復添加隱藏域,并且可以通過【修改】、【刪除】按鈕對隱藏域的名稱和值進行編輯。

6.3保存表單結果

6.3.1【文件結果】選項卡

6.3.2把表單結果發(fā)送到某電子郵件地址

6.3.3設置【確認網頁】選項

6.3.4選擇保存到文件的表單域

6.4表單的輔助設置和操作

6.4.1設置表單域數(shù)據的有效性規(guī)則

用戶可以在上面介紹的單行文本框、文本區(qū)、選項按鈕、下拉框等表單域的屬性對話框中看到一個【驗證有效性】按鈕,它是用來限定訪問者按照某種規(guī)則來輸入數(shù)據信息。打開相應屬性對話框,單擊【驗證有效性】按鈕,打開【文本框有效性驗證】對話框。在【數(shù)據類型】下拉列表中制定客戶輸入的數(shù)據類型,以此限制客戶只能輸入文本、整數(shù)或數(shù)字,默認值是【無限制】,表示可以輸入任何類型數(shù)據。對于文本來說可以指定是否包含字母、數(shù)字元、空格(包括Tab、回車和換行)以及其它的字符。對于整數(shù)來說,可以指定分組符號使用逗號還是小圓點或不需要。對數(shù)字來說,可以指定小數(shù)點符號。

6.4.2設置表單中的【Tab】鍵次序

在除了文件上載表單域外的另外八個表單域的屬性對話框中,都有一個【Tab鍵順序】選項。它是用于設置瀏覽者按【Tab】鍵時光標在表單域間移動的順序。缺省情況下是按照加入的次序進行移動的,可以通過修改【Tab鍵順序】來設置光標在表單域之間的移動順序,范圍在1~99999之間。

6.4.3為表單中的域設置鍵盤快捷鍵操作步驟如下:

(1)在表單域的后面鍵入文本,同時選擇該表單域和文本,單擊【表單】工具欄的標簽按鈕,或執(zhí)行【插入】→【表單】→【標簽】命令,創(chuàng)建域標簽。(2)在域標簽中插入要用作快捷鍵的字母,并為該字母加上“下劃線。(3)單擊編輯窗口上的【預覽】標簽,進行表單網頁的預覽。

6.4.4禁用表單域的自動表單功能

操作步驟如下:

(1)執(zhí)行【工具】→【網頁選項】命令,打開【網頁選項】對話框。

(2)在其中的【常規(guī)】選項卡中,去掉【在表單中自動圍繞表單域】復選項。

(3)單擊【確定】按鈕,完成設置?,F(xiàn)在就禁用了自動表單功能,可以通過編寫腳本來使用表單域了。

6.4.5刪除表單中的域

操作步驟如下:(1)對于可見域,點擊鼠標左鍵選中要刪除的域,再按【Del】鍵。(2)由于隱藏域在編輯頁面中是不可見的,可以用鼠標右鍵單擊表單,在快捷菜單上選中【表單屬性】選項,打開【表單屬性】對話框,單擊【高級】按鈕,從列表中選擇隱藏域,單擊【刪除】即可。7.1創(chuàng)建站點

1.使用模板創(chuàng)建站點(1)打開【文件】→【新建】→【網頁或站點】命令,在FrontPage窗口的右邊出現(xiàn)【任務窗格】。(2)若要新建一個空白站點,選取【新建】項中的【空白站點】選項;這里選擇【根據模板新建】中的【Web站點模板】,打開【Web站點模板】對話框,在【站點】列表中選擇要使用的模板或向導。

(3)在【Web站點模板】對話框中,單擊所選模板,并在【選項】中指定新站點存放的具體位置。(4)如果需要,可以選擇【添加到當前站點】,這樣可將新站點的網頁添加到默認站點中。

2.不使用模板創(chuàng)建站點

(1)執(zhí)行【文件】→【新建】→【網頁或站點】命令,打開【新建網頁或站點】任務窗格,并執(zhí)行【新建】選項下的【空白站點】命令,打開【Web站點模板】對話框。

(2)在對話框的【站點】選項中選擇【空站點】選項,在【選項】欄中指定新站點的位置,單擊【確定】按鈕,這樣就可以創(chuàng)建一個沒有內容的新站點,它將創(chuàng)建相應的文件夾,但不包含任何Web頁面及其它網站資源。

7.2站點操作

7.2.1打開

Web站點如果要編輯以前建立好的站點,就需要先將其打開。在FrontPage中可以同時打開多個站點。要打開一個站點,可以執(zhí)行【文件】→【打開站點】命令,或者按工具欄上的

按鈕邊上的下拉按鈕,然后執(zhí)行下拉菜單中的【打開站點】命令,

提示:如果用戶想在每次啟動FrontPage時自動打開上次打開的站點,可以在FrontPage中執(zhí)行【工具】→【選項】命令,在【選項】對話框中的【常規(guī)】選項卡中選中【在啟動FrontPage時,自動打開上次打開的站點】選項。7.2.2導入

Web站點、文件夾或文件

導入站點的方法如下:

(1)執(zhí)行【文件】→【新建】→【網頁或站點】命令,在【新建網頁或站點】中【根據模板新建】中選擇【Web站點模板】命令,打開

【Web站點模板】對話框。(2)在【Web站點模板】對話框中選擇【導入站點向導】,然后單擊【確定】按鈕

.

(3)根據要導入的源站點的位置選擇源站點,并在【位置】文本框內輸入站點的位置。

(4)單擊【下一步】按鈕。若之前選擇了【從萬維網站點】單選項,則出現(xiàn)對話框,來設置下載文件的一些選項。

(5)單擊【下一步】按鈕,出現(xiàn)【完成】對話框,單擊【確定】完成導入操作。

7.2.3重命名

Web站點

有時用戶在設計好整個網站中的所有網頁后,想更換網站的名稱,這時可以打開【工具】→【站點設置】命令,在【常規(guī)】選項卡中的【站點名稱】文本框中輸入新的站點名稱即可。

注意:如果重命名基于本地機的

Web站點會更改本地計算機或本地網絡上該

Web站點的路徑。重命名基于服務器的

Web站點會更改服務器上的該

Web站點的

URL。7.2.4Web站點的保存與關閉

1.Web站點的保存

保存嵌入式文件

2.Web站點的關閉

在確信編輯好某個網站中的所有網頁后,想離開FrontPage,可以直接點擊FrontPage主窗口右上角的“Χ”號離開。若有網頁沒有保存,系統(tǒng)會作出提示。如果要想關閉整個Web站點,但仍然要保留FrontPage的窗口時,則可以執(zhí)行【文件】→【關閉站點】命令。

關閉站點

7.3鏈接欄

圖形形式鏈接欄

:7.3.1鏈接欄的類型

1.自定義鏈接欄

2.包含“上一個”和“下一個”鏈接的鏈接欄

3.基于Web站點導航結構的鏈接欄

注意:只有在通過FrontPage創(chuàng)建的Web站點內部操作時才可以生成鏈接欄,單獨的網頁中是不行的。7.3.2添加或刪除鏈接欄

(1)選中要插入鏈接欄的網頁,并確定好具體插入點。

(2)執(zhí)行【插入】→【導航】命令,打開【插入Web組件】對話框,默認選擇了【鏈

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論