第七章網(wǎng)頁(yè)制作

1、第七章 網(wǎng)頁(yè)制作7.1 HTML語(yǔ)言簡(jiǎn)介 HTML的基本語(yǔ)法HTML（Hyper Text Markup Language 超文本標(biāo)記語(yǔ)言）是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。使用HTML語(yǔ)言編寫(xiě)的文件的擴(kuò)展名是.htm或.html。HTML的標(biāo)簽名總是封裝在一對(duì)尖括號(hào)（）之中。1、成對(duì)標(biāo)簽HTML語(yǔ)言中的標(biāo)簽通常是成對(duì)使用的，它使用一個(gè)開(kāi)始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽來(lái)標(biāo)識(shí)文本，結(jié)束標(biāo)簽是在標(biāo)簽名前加一個(gè)“/”，也就是以“”表示標(biāo)簽的開(kāi)始，以“”表示標(biāo)簽的結(jié)束。一對(duì)標(biāo)簽中還可以嵌套其他的標(biāo)簽，所以，成對(duì)標(biāo)簽又稱之為容器。（例如，段落1）2、空標(biāo)簽HTML中也有單獨(dú)標(biāo)簽，單獨(dú)標(biāo)簽不需要與之配對(duì)的結(jié)束

2、標(biāo)簽，它們可以單獨(dú)使用，又稱之為空標(biāo)簽（例如，）。一個(gè)HTML標(biāo)簽及標(biāo)簽中嵌套的內(nèi)容就形成了網(wǎng)頁(yè)中的一個(gè)元素，很多人喜歡直接用“HTML元素”來(lái)等同“HTML標(biāo)簽”。3、標(biāo)簽屬性許多HTML標(biāo)簽都可以設(shè)置一個(gè)或多個(gè)屬性來(lái)控制標(biāo)簽的顯示效果，例如，標(biāo)簽中的size和color就是html標(biāo)簽屬性。屬性設(shè)置的一般格式為：屬性名=屬性值，屬性值部分可以用英文的雙引號(hào)（）或單引號(hào)（ ）引起來(lái)，也可以不使用任何引號(hào)。標(biāo)簽名與屬性之間，屬性與屬性之間必須用空格分隔。7.1.2 HTML文檔的結(jié)構(gòu)一個(gè)網(wǎng)頁(yè)文件中的標(biāo)簽有一定的組成結(jié)構(gòu)，不能隨意顛倒和錯(cuò)亂這種關(guān)系，下面這段內(nèi)容說(shuō)明了一個(gè)最基本的網(wǎng)頁(yè)文件的組成結(jié)

3、構(gòu)。 顯示在瀏覽器左上方的標(biāo)題紅色背景、藍(lán)色文本 1、 圖7-1 簡(jiǎn)單的HTML文件標(biāo)簽用于HTML文檔的最前邊，用來(lái)標(biāo)識(shí)HTML文檔的開(kāi)始。而標(biāo)簽恰恰相反，它放在HTML文檔的最后邊，用來(lái)標(biāo)識(shí)HTML文檔的結(jié)束，兩個(gè)標(biāo)簽必須成對(duì)使用，網(wǎng)頁(yè)中所有其他的內(nèi)容都要放在和之間。2、一個(gè)網(wǎng)頁(yè)文檔從總體上可分為頭和主體兩部分。和定義了HTML文檔的頭部分，必須是成對(duì)使用。標(biāo)簽對(duì)之間的內(nèi)容是不會(huì)在瀏覽器的文檔窗口中顯示出來(lái)的。3、定義了HMTL文檔的主體部分，必須是成對(duì)使用。在之間放置的是實(shí)際要顯示的文本內(nèi)容和其他用于控制文本顯示方式的標(biāo)簽。 FrontPage簡(jiǎn)介7.2 .1 FrontPage的功能特

4、點(diǎn)FrontPage 2003在以往版本的基礎(chǔ)上新增了許多新的功能，主要體現(xiàn)在以下幾方面：1、設(shè)計(jì)網(wǎng)站FrontPage 2003新增了設(shè)計(jì)網(wǎng)站功能，改進(jìn)了設(shè)計(jì)環(huán)境、新的布局和設(shè)計(jì)工具、模板以及經(jīng)過(guò)改進(jìn)的主題，可以幫助用戶實(shí)現(xiàn)自己的創(chuàng)意網(wǎng)站，無(wú)須了解過(guò)多的HTML知識(shí)。 支持設(shè)計(jì)時(shí)的圖層圖像FrontPage 2003包含了設(shè)計(jì)時(shí)圖層的支持，可以更完整地控制圖層的創(chuàng)建、布局和樣式。使得圖像編輯更容易，新的界面和行為可以更好地控制設(shè)計(jì)視圖中圖像的顯示和保存。 布局表格和單元格使用布局表格和單元格，可以創(chuàng)建具有專業(yè)外觀的網(wǎng)頁(yè)布局。布局表格是為網(wǎng)頁(yè)創(chuàng)建框架的，布局單元格是該框架內(nèi)的區(qū)域，可以包括文本

5、、圖像、Web組件等其他元素。 改進(jìn)的工作環(huán)境和設(shè)計(jì)區(qū)域FrontPage 2003將Web組件集中到一個(gè)工具欄中，而且還提供了整個(gè)站點(diǎn)的全景視圖；更大的設(shè)計(jì)環(huán)境減少了頁(yè)面的滾動(dòng)次數(shù)，使用戶操作起來(lái)非常方便。 動(dòng)態(tài)Web模板FrontPage 2003增強(qiáng)了動(dòng)態(tài)模板工具，可以幫助用戶創(chuàng)建多個(gè)模板。在每個(gè)可編輯區(qū)域，用戶都可以通過(guò)更新模板內(nèi)容來(lái)改變?nèi)?，然后將其快速地?yīng)用到站點(diǎn)中。2、增強(qiáng)的代碼工具通過(guò)FrontPage 2003強(qiáng)大的代碼工具可以更容易地創(chuàng)建HTML和交互式腳本語(yǔ)言。 代碼編寫(xiě)工具在網(wǎng)頁(yè)的拆分視圖中可以同時(shí)顯示代碼視圖和設(shè)計(jì)視圖，當(dāng)在拆分視圖中更新設(shè)計(jì)視圖時(shí)，代碼視圖也將隨著更

6、新。通過(guò)使用“快速標(biāo)記選擇器”和“快速標(biāo)記編輯器”可以幫助用戶輕松地編寫(xiě)代碼。而且使用Microsoft Intellisense技術(shù)可以簡(jiǎn)化代碼編寫(xiě)工作，同時(shí)也降低了編寫(xiě)的出錯(cuò)率。 交互式腳本工具FrontPage 2003為在代碼視圖中編寫(xiě)JavaScript和VBScript腳本提供智能感知功能。通過(guò)將Microsoft Windows SharePoint Services和Windows Server 2003鏈接到FrontPage 2003，可以修改和顯示一系列從數(shù)據(jù)源所獲得的活動(dòng)數(shù)據(jù)。3、擴(kuò)展功能除了上述所講新增功能外，F(xiàn)rontPage 2003還具有遠(yuǎn)程網(wǎng)站視圖和多形式鏈接

7、遠(yuǎn)程站點(diǎn)功能。 遠(yuǎn)程網(wǎng)站視圖新的遠(yuǎn)程網(wǎng)站視圖可以支持站點(diǎn)間文件和目錄同步，簡(jiǎn)化了以往的發(fā)布方式。幫助用戶將整個(gè)網(wǎng)站和單獨(dú)的文件或文件夾發(fā)布到任意位置，同時(shí)還可以顯示本地網(wǎng)站和遠(yuǎn)程網(wǎng)站中的文件。 多形式鏈接站點(diǎn)FrontPage 2003允許在創(chuàng)建XML數(shù)據(jù)驅(qū)動(dòng)的網(wǎng)站時(shí)，直接在FrontPage設(shè)計(jì)視圖中處理XML數(shù)據(jù)。可以支持多種站點(diǎn)鏈接方式，如FrontPage 2003服務(wù)器擴(kuò)展或FTP，DAV以及文件系統(tǒng)等。 FrontPage的圖形界面1、FrontPage 2003的啟動(dòng)（1）雙擊桌面上的FrontPage 2003快捷方式圖標(biāo)，即可啟動(dòng)FrontPage 2003。（2）單擊“開(kāi)始

8、”按鈕，然后在彈出的“開(kāi)始”下拉菜單中選擇“所有程序”/“Microsoft Office”/“Microsoft Office FrontPage 2003”命令，即可啟動(dòng)FrontPage 2003。2、FrontPage 2003的退出退出FrontPage 2003應(yīng)用程序可采用以下3種方法：（1）選擇“文件”“退出”命令。（2）單擊窗口右上角的“關(guān)閉”按鈕。（3）雙擊窗口左上角的控制按鈕。3、FrontPage 2003工作窗口FrontPage 2003的窗口由標(biāo)題欄、菜單欄、工具欄、狀態(tài)欄、任務(wù)窗格、編輯區(qū)、網(wǎng)頁(yè)視圖切換區(qū)組成。與Word 2003,Excel 2003等其他Of

9、fice軟件相比，其標(biāo)題欄、菜單欄和工具欄的用法基本相同，如圖7-2所示。狀態(tài)欄菜單欄“常用”工具欄任務(wù)窗格網(wǎng)頁(yè)視圖切換區(qū)標(biāo)題欄編輯區(qū)“格式”工具欄圖7-2 FrontPage 2003的窗口網(wǎng)頁(yè)視圖是FrontPage 2003中默認(rèn)的視圖方式，網(wǎng)頁(yè)視圖提供了4種視圖模式，分別是設(shè)計(jì)視圖、拆分視圖、代碼視圖和預(yù)覽視圖。單擊視圖切換區(qū)中相應(yīng)的按鈕，可在這4種視圖模式之間方便地進(jìn)行切換。7.3 使用FrontPage制作網(wǎng)頁(yè)7 創(chuàng)建站點(diǎn)無(wú)論是設(shè)計(jì)個(gè)人站點(diǎn)，還是設(shè)計(jì)商業(yè)站點(diǎn)，都需要對(duì)其進(jìn)行整體規(guī)劃。規(guī)劃站點(diǎn)包括確定站點(diǎn)主題、規(guī)劃站點(diǎn)結(jié)構(gòu)、規(guī)劃網(wǎng)頁(yè)布局等。1、確定站點(diǎn)主題確定站點(diǎn)主題的目的就是能夠吸

10、引更多的訪問(wèn)者，要使得網(wǎng)站有吸引力就一定要有特色的主題。確定站點(diǎn)主題時(shí)應(yīng)當(dāng)根據(jù)需要來(lái)設(shè)置。例如，用戶要做一個(gè)娛樂(lè)方面的網(wǎng)站，就應(yīng)當(dāng)考慮怎樣做才能吸引愛(ài)好音樂(lè)影視的網(wǎng)友，因此就需要在頁(yè)面上提供許多媒體信息和相應(yīng)的文字介紹。設(shè)計(jì)者應(yīng)當(dāng)根據(jù)情況定期更新站點(diǎn)內(nèi)容，一般過(guò)時(shí)的信息很少有人去瀏覽，所以只有定期更新站點(diǎn)內(nèi)容才能夠吸引更多的瀏覽者。2、規(guī)劃站點(diǎn)結(jié)構(gòu)規(guī)劃站點(diǎn)結(jié)構(gòu)就是將站點(diǎn)中不同內(nèi)容的網(wǎng)頁(yè)有機(jī)地組織在一起，各個(gè)頁(yè)面分別屬于不同的專欄，并且提供不同的內(nèi)容服務(wù)。而且它們之間通過(guò)超鏈接將其鏈接在一起，從而形成了一個(gè)有機(jī)的整體。3、規(guī)劃網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局是網(wǎng)站的重要組成部分，包括頁(yè)面的整體風(fēng)格、頁(yè)面各元素的

11、排列方式、文本、圖形的格式等。隨著訪問(wèn)者要求的不斷提高，頁(yè)面的布局也越來(lái)越受廣大訪問(wèn)者的關(guān)注，只有當(dāng)網(wǎng)頁(yè)布局和網(wǎng)頁(yè)內(nèi)容成功結(jié)合時(shí)才會(huì)受訪問(wèn)者喜愛(ài)。創(chuàng)建網(wǎng)站主要有兩種方法，一種是使用FrontPage 2003模板和向?qū)?chuàng)建；另一種是創(chuàng)建空白網(wǎng)站。1、使用模板創(chuàng)建使用FrontPage 2003模板創(chuàng)建網(wǎng)站的具體操作步驟如下：（1）啟動(dòng)FrontPage 2003應(yīng)用程序。（2）選擇“文件”/“新建”命令，打開(kāi)“新建”任務(wù)窗格，如圖7-3所示。（3）單擊“新建網(wǎng)站”選區(qū)中的“由一個(gè)網(wǎng)頁(yè)組成的網(wǎng)站”超鏈接，彈出如圖7-4所示的“網(wǎng)站模板”對(duì)話框。（4）在該對(duì)話框中選擇所需的網(wǎng)站模板，如選中“個(gè)人網(wǎng)

12、站”；在“指定新網(wǎng)站的位置”下拉列表框中輸入網(wǎng)站的保存地址。 圖7-3 “新建”任務(wù)窗格 圖7-4 “網(wǎng)站模板”對(duì)話框 （5）設(shè)置完成后，單擊“確定”按鈕，即可創(chuàng)建網(wǎng)站，并將該網(wǎng)站保存在指定的位置，創(chuàng)建后的網(wǎng)站如圖7-5所示。圖7-5 使用模板創(chuàng)建的個(gè)人網(wǎng)站2、使用向?qū)?chuàng)建所謂向?qū)侵敢环N將操作過(guò)程分為若干步驟的引導(dǎo)程序。FrontPage 2003中提供了4種創(chuàng)建網(wǎng)站的向?qū)В謩e是導(dǎo)入網(wǎng)站向?qū)?、公司展示向?qū)?、討論網(wǎng)站向?qū)Ш蛿?shù)據(jù)庫(kù)界面向?qū)?。使用向?qū)?chuàng)建網(wǎng)站的具體操作步驟如下：（1）在“網(wǎng)站模板”對(duì)話框（見(jiàn)圖7-4）中選擇所需的網(wǎng)站向?qū)?，如選中“公司展示向?qū)А?；在“指定新網(wǎng)站的位置”下拉列表框中

13、輸入網(wǎng)站的保存地址。（2）設(shè)置完成后，單擊“確定”按鈕，彈出如圖7-6所示的“公司網(wǎng)站建立向?qū)А睂?duì)話框（一）。（3）單擊“下一步”按鈕，彈出如圖7-7所示的“公司網(wǎng)站建立向?qū)А睂?duì)話框（二）。 圖7-6 “公司網(wǎng)站建立向?qū)А睂?duì)話框(一) 圖7-7 “公司網(wǎng)站建立向?qū)А睂?duì)話框(二) （4）在該對(duì)話框中的“選擇要包含在網(wǎng)站中的主要網(wǎng)頁(yè)”選項(xiàng)組中選擇所需的選項(xiàng)，然后單擊“下一步”按鈕，彈出如圖7-8所示的“公司網(wǎng)站建立向?qū)А睂?duì)話框（三）。（5）在該對(duì)話框中的“請(qǐng)選擇要顯示在主頁(yè)的主題”選項(xiàng)組中選擇所需的選項(xiàng)，然后單擊“下一步”按鈕，彈出如圖7-9所示的“公司網(wǎng)站建立向?qū)А睂?duì)話框（四）。 圖7-8 “公

14、司網(wǎng)站建立向?qū)А睂?duì)話框(三) 圖7-9 “公司網(wǎng)站建立向?qū)А睂?duì)話框(四) （6）在該對(duì)話框中的“請(qǐng)選擇要顯示在新增內(nèi)容網(wǎng)頁(yè)中的主題”選項(xiàng)組中選擇所需的選項(xiàng)，然后單擊“下一步”，彈出如圖7-10所示的“公司網(wǎng)站建立向?qū)А睂?duì)話框（五）。 圖7-10 “公司網(wǎng)站建立向?qū)А睂?duì)話框(五) 圖7-11 “公司網(wǎng)站建立向?qū)А睂?duì)話框 （7）在該對(duì)話框中設(shè)置需要向?qū)?chuàng)建的產(chǎn)品網(wǎng)頁(yè)和服務(wù)網(wǎng)頁(yè)的數(shù)目。單擊“下一步”按鈕繼續(xù)進(jìn)行設(shè)置，直到彈出如圖7-11所示的“公司網(wǎng)站建立向?qū)А睂?duì)話框時(shí)，單擊“完成”按鈕，即可創(chuàng)建公司網(wǎng)站。3、創(chuàng)建空白網(wǎng)站創(chuàng)建空白網(wǎng)站的具體操作步驟如下：（1）啟動(dòng)FrontPage 2003應(yīng)用程序

15、，選擇“文件”/“新建”命令，打開(kāi)如圖7-3所示的“新建”任務(wù)窗格。（2）單擊“新建網(wǎng)站”選區(qū)中的“由一個(gè)網(wǎng)頁(yè)組成的網(wǎng)站”超鏈接，在彈出的“網(wǎng)站模板”對(duì)話框中選擇 “空白網(wǎng)站”圖標(biāo)，然后在“指定新網(wǎng)站的位置”下拉列表框中輸入網(wǎng)站的保存地址。（3）單擊“確定”按鈕，即可創(chuàng)建網(wǎng)站。 編輯網(wǎng)頁(yè)1、新建網(wǎng)頁(yè)新建網(wǎng)頁(yè)通常有以下兩種方法：（1）新建空白網(wǎng)頁(yè)新建空白網(wǎng)頁(yè)的具體操作步驟如下： 選擇“文件”/“新建”命令，打開(kāi)“新建”任務(wù)窗格，如圖7-3所示。 在“新建網(wǎng)頁(yè)”選區(qū)中單擊“空白網(wǎng)頁(yè)”，即可創(chuàng)建一個(gè)空白網(wǎng)頁(yè)。（2）使用模板創(chuàng)建使用模板可以快速地創(chuàng)建出具有一定格式的網(wǎng)頁(yè)，其具體操作步驟如下： 選擇“文

16、件”/“新建”命令，打開(kāi)“新建”任務(wù)窗格。 在“新建網(wǎng)頁(yè)”選區(qū)中單擊“其他網(wǎng)頁(yè)模板”超鏈接，彈出如圖7-12所示的“網(wǎng)頁(yè)模板”對(duì)話框。圖7-12 “網(wǎng)頁(yè)模板”對(duì)話框（3）在該對(duì)話框中選擇所需的網(wǎng)頁(yè)模板，然后單擊“確定”按鈕，即可新建一個(gè)網(wǎng)頁(yè)。2、保存網(wǎng)頁(yè)網(wǎng)頁(yè)編輯完成后，需要保存該網(wǎng)頁(yè)，保存網(wǎng)頁(yè)通常采用以下3種方法：（1）普通保存普通保存和保存其他文檔一樣，選擇“文件”/“保存”命令，在彈出的“另存為”對(duì)話框中的“保存位置”下拉列表中選擇網(wǎng)頁(yè)的保存位置，在“文件名”文本框中輸入網(wǎng)頁(yè)的名稱，然后單擊“保存”按鈕即可。（2）保存嵌入式文件如果網(wǎng)頁(yè)中有圖像和多媒體文件時(shí)，為了使網(wǎng)頁(yè)在保存后不發(fā)生改變，

17、需要將圖片、視頻文件等這些嵌入式文件與網(wǎng)頁(yè)保存在一起。（3）保存為模板對(duì)于一些比較專業(yè)的網(wǎng)頁(yè)，可以將其保存為模板，便于以后使用，其具體操作步驟如下：選擇“文件”/“保存”命令，彈出“另存為”對(duì)話框，在“保存位置”下拉列表中選擇網(wǎng)頁(yè)的保存位置；在“文件名”下拉列表框中輸入網(wǎng)頁(yè)的名稱；在“保存類型”下拉列表中選擇“FrontPage模板”選項(xiàng)。3、預(yù)覽網(wǎng)頁(yè)網(wǎng)頁(yè)制作完成后，在設(shè)計(jì)視圖中只能看到頁(yè)面的基本形態(tài)，對(duì)于視頻、音頻、動(dòng)畫(huà)效果等只有在網(wǎng)頁(yè)的預(yù)覽模式下或在Web瀏覽器中才可以看到其真正效果。（1）使用預(yù)覽按鈕預(yù)覽網(wǎng)頁(yè)使用預(yù)覽按鈕預(yù)覽網(wǎng)頁(yè)，只需在網(wǎng)頁(yè)編輯狀態(tài)下單擊視圖切換區(qū)中的“預(yù)覽”按鈕，即可預(yù)

18、覽其效果。（2）在瀏覽器中預(yù)覽網(wǎng)頁(yè)在FrontPage 2003中編輯完網(wǎng)頁(yè)后，在瀏覽器中進(jìn)行預(yù)覽，以檢查瀏覽器中的效果是否與設(shè)計(jì)的效果相同，超鏈接是否正確。在瀏覽器中預(yù)覽網(wǎng)頁(yè)的具體操作步驟如下：圖7-13 “編輯瀏覽器列表”對(duì)話框 選擇“文件”“在瀏覽器中預(yù)覽”“編輯瀏覽器列表”命令，彈出如圖7-13所示的“編輯瀏覽器列表”對(duì)話框。 在該對(duì)話框中選擇合適的瀏覽器，這里選擇Internet Explorer瀏覽器，其他設(shè)置采取默認(rèn)。或單擊“添加”按鈕添加其他瀏覽器。 設(shè)置完成后，單擊“確定”按鈕。 選擇“文件”“在瀏覽器中預(yù)覽”“”命令，或單擊“常用”工具欄中的“預(yù)覽”按鈕。：按“F12”功能

19、鍵也可以打開(kāi)瀏覽器預(yù)覽網(wǎng)頁(yè)。在Internet上，文本是網(wǎng)頁(yè)信息的載體，也是網(wǎng)頁(yè)中重要的組成部分。在輸入與編輯文本過(guò)程中與Word等軟件有許多相似之處。打開(kāi)網(wǎng)頁(yè)后，將光標(biāo)定位于需要輸入文本的位置，選擇好輸入法后即可開(kāi)始輸入文本。在輸入過(guò)程中，如果已經(jīng)達(dá)到網(wǎng)頁(yè)邊界，則系統(tǒng)會(huì)自動(dòng)換到下一行繼續(xù)輸入。如果要另起一段可按回車鍵，光標(biāo)會(huì)自動(dòng)移到另一段的開(kāi)始位置。因此，對(duì)于文本的編輯、顏色設(shè)置、段落對(duì)齊、樣式設(shè)置等基本操作，這里不一一詳細(xì)地介紹，請(qǐng)讀者自己多聯(lián)系掌握。 插入圖像圖片在網(wǎng)頁(yè)中的作用主要有兩個(gè)：一個(gè)是用于裝飾，提供用戶想象的空間，增加網(wǎng)頁(yè)視覺(jué)效果，吸引瀏覽者；另一個(gè)作用是用于表達(dá)內(nèi)容，當(dāng)瀏覽者

20、一看到圖片便會(huì)在腦海中形成一個(gè)總體印象，接收信息速度快。1、FrontPage 2003中的圖片類型（1）GIF格式。GIF文件采用壓縮存儲(chǔ)，最高只能包含8位（256種）顏色，最大的優(yōu)點(diǎn)是可以實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)。（2）JPEG格式。JPEG圖像是經(jīng)過(guò)壓縮的數(shù)字靜止圖像，容量小，下載速度快。2、在網(wǎng)頁(yè)中插入圖片 插入剪貼畫(huà)的操作步驟如下：（1）將光標(biāo)置于網(wǎng)頁(yè)中需要插入剪貼畫(huà)的位置，選擇“插入”/“圖片”/“剪貼畫(huà)”命令，打開(kāi)如圖7-14所示的“剪貼畫(huà)”任務(wù)窗格。（2）在“搜索文字”文本框中輸入所需剪貼畫(huà)的名稱或關(guān)鍵字，然后單擊“搜索”按鈕，搜索出來(lái)的剪貼畫(huà)將顯示在剪輯管理器中，如輸入“背景”，搜索結(jié)

21、果如圖7-15所示。 圖7-14 “剪貼畫(huà)”任務(wù)窗格 圖7-15 搜索剪貼畫(huà)（3）在搜索出的剪貼畫(huà)上單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“插入”命令，或直接單擊該剪貼畫(huà)，即可將所需剪貼畫(huà)插入到網(wǎng)頁(yè)中。 插入圖片的操作步驟如下：（1）將光標(biāo)置于網(wǎng)頁(yè)中需插入圖片的位置，選擇“插入”“圖片”“來(lái)自文件”命令，彈出如圖7-16所示的“圖片”對(duì)話框。圖7-16 “圖片”對(duì)話框（2）在“查找范圍”下拉列表中選擇圖片所在的位置，然后選擇所需的圖片，單擊“插入”按鈕，即可將圖片插入到網(wǎng)頁(yè)中。3、編輯圖片插入到網(wǎng)頁(yè)中的圖片不一定完全符合網(wǎng)頁(yè)設(shè)計(jì)的整體要求，需要進(jìn)一步編輯，我們可以改變圖片的大小、布局，在圖片上添

22、加文字，以及調(diào)整圖片的對(duì)比度、亮度等等。這方面的操作可以通過(guò)雙擊圖片或快捷菜單打開(kāi)“圖片屬性”對(duì)話框來(lái)設(shè)置，或使用“圖片”工具欄來(lái)完成。 創(chuàng)建超鏈接簡(jiǎn)單地說(shuō)，超鏈接就是從一個(gè)網(wǎng)頁(yè)、到另一個(gè)網(wǎng)頁(yè)、的鏈接。當(dāng)瀏覽者單擊某一個(gè)超鏈接時(shí)，所鏈接的目標(biāo)內(nèi)容將顯示在瀏覽器中，并根據(jù)目標(biāo)的類型來(lái)打開(kāi)或運(yùn)行。1、超鏈接的載體所謂超鏈接的載體就是指顯示超鏈接的部分，也就是指包含超鏈接的文字、圖片或其他對(duì)象。但使用最多的是文字和圖片超鏈接，對(duì)于文本超鏈接，在網(wǎng)頁(yè)瀏覽器中，超鏈接通常采用下畫(huà)線和顏色來(lái)區(qū)別于網(wǎng)頁(yè)中的其他內(nèi)容。當(dāng)將鼠標(biāo)指針指向超鏈接時(shí)，鼠標(biāo)指針將變成形狀，單擊即可打開(kāi)所鏈接的目標(biāo)文件。2、超鏈接的目標(biāo)

23、根據(jù)鏈接目標(biāo)地址的不同，網(wǎng)頁(yè)中的超鏈接可分為兩種：一種是內(nèi)部超鏈接，另一種是外部超鏈接。（1）內(nèi)部超鏈接所謂內(nèi)部超鏈接是指在已創(chuàng)建網(wǎng)站的各個(gè)網(wǎng)頁(yè)之間建立相互鏈接的關(guān)系。建立內(nèi)部超鏈接可以將網(wǎng)站的各個(gè)部分鏈接起來(lái)。內(nèi)部超鏈接主要包括以下幾種：鏈接到其他網(wǎng)頁(yè)上的超鏈接。該網(wǎng)頁(yè)是指網(wǎng)站內(nèi)的網(wǎng)頁(yè)，這種鏈接方式是內(nèi)部超鏈接中最常見(jiàn)的一種。指向圖片的超鏈接。這種鏈接方式是指圖片本身沒(méi)有被插入到網(wǎng)頁(yè)中，而是在網(wǎng)頁(yè)中以一個(gè)鏈接圖片的URL表示，當(dāng)單擊鏈接時(shí)在網(wǎng)頁(yè)中會(huì)單獨(dú)顯示一幅圖片。同一網(wǎng)頁(yè)的超鏈接。同一網(wǎng)頁(yè)的超鏈接實(shí)際上就是指網(wǎng)頁(yè)中的書(shū)簽，關(guān)于書(shū)簽的相關(guān)知識(shí)將在本章后面講到。（2）外部超鏈接所謂外部超鏈接是

24、指鏈接到網(wǎng)站以外的文件、網(wǎng)站或服務(wù)器上的鏈接。在網(wǎng)站中創(chuàng)建外部超鏈接，可以鏈接Internet中的其他網(wǎng)站。3、創(chuàng)建超鏈接文本（或圖片）超鏈接是指在文本（或圖片）中定義的超鏈接。具體操作步驟如下：（1）在網(wǎng)頁(yè)中選中需要?jiǎng)?chuàng)建超鏈接的文本（或圖片）。（2）選擇“插入”/“超鏈接”命令，或單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“超鏈接”命令，出如圖7-17所示的“插入超鏈接”對(duì)話框。圖7-17 “插入超鏈接”對(duì)話框（3）在“地址”下拉列表框中輸入鏈接的目標(biāo)地址及文件名。（4）單擊“確定”按鈕，即可創(chuàng)建一個(gè)文本超鏈接。創(chuàng)建超鏈接的文本將會(huì)以藍(lán)色顯示，并且在該文字下方增加了一條下畫(huà)線，效果如圖7-18所示

25、。4、超鏈接的修改超鏈接的修改包括更改文本超鏈接和更改圖片超鏈接。圖7-18 創(chuàng)建文本超鏈接效果（1）更改文本超鏈接將光標(biāo)置于超鏈接文本的載體中，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“超鏈接屬性”命令，彈出如圖7-19所示的“編輯超鏈接”對(duì)話框。在該對(duì)話框中，用戶可以采用創(chuàng)建超鏈接的方法來(lái)更改超鏈接，在“地址”下拉列表框中輸入所鏈接的對(duì)象，包括鏈接文件的路徑和名稱，設(shè)置完成后單擊“確定”按鈕。圖7-19 “編輯超鏈接”對(duì)話框（2）更改圖片超鏈接更改圖片的超鏈接主要是更改圖片的鏈接目標(biāo)，與文本超鏈接的修改類似。5、刪除超鏈接如果要將多余或錯(cuò)誤的超鏈接進(jìn)行刪除，首先必須將光標(biāo)置于超鏈接的載體中，然

26、后單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇相應(yīng)的命令，如果是文本超鏈接載體，則選擇“超鏈接屬性”命令；如果是圖片超鏈接載體，則選擇“超鏈接命令。在彈出的“編輯超鏈接”對(duì)話框中單擊“刪除鏈接”按鈕，即可刪除所創(chuàng)建的超鏈接。7.4 網(wǎng)頁(yè)布局 使用表格布局FrontPage 2003中的表格與Word等其他應(yīng)用程序中的表格沒(méi)有本質(zhì)上的區(qū)別，其主要作用是存放數(shù)據(jù)和組織頁(yè)面布局。它借鑒了Word字處理軟件的表格功能，又針對(duì)網(wǎng)頁(yè)制作過(guò)程中的一些特殊情況進(jìn)行了相應(yīng)處理，使用戶在使用過(guò)程中得心應(yīng)手。在這里只介紹表格的創(chuàng)建方法，對(duì)表格處理的操作步驟就不再詳細(xì)介紹。在FrontPage 2003中創(chuàng)建表格主要有以下幾

27、種方法：（1）使用工具欄中的“插入表格”按鈕創(chuàng)建表格（2）選擇“表格”/“插入”/“表格”命令，在彈出 “插入表格”對(duì)話框中指定行數(shù)和列數(shù)。（3）選擇“表格”/“繪制表格”命令。 使用框架布局框架網(wǎng)頁(yè)就是將一個(gè)瀏覽器窗口分成幾個(gè)小窗口，每個(gè)窗口都可以顯示一個(gè)獨(dú)立的網(wǎng)頁(yè)，還可以在同一個(gè)屏幕上的各窗口之間設(shè)置超鏈接。每個(gè)顯示區(qū)域叫做一個(gè)框架，并且每個(gè)框架都有自己的名稱，當(dāng)其中某一個(gè)框架中的內(nèi)容發(fā)生變化時(shí)，其他框架中的內(nèi)容并不發(fā)生變化。單擊框架中某個(gè)網(wǎng)頁(yè)上的超鏈接時(shí)，所鏈接的網(wǎng)頁(yè)可以顯示在另一個(gè)框架，也可以在本框架中顯示。使用框架網(wǎng)頁(yè)可以同時(shí)瀏覽多個(gè)頁(yè)面，從而使得頁(yè)面整體結(jié)構(gòu)一致并且頁(yè)面的內(nèi)容豐富多

28、彩。1、創(chuàng)建框架網(wǎng)頁(yè)創(chuàng)建框架網(wǎng)頁(yè)通常有兩種方法：一種是使用HTML語(yǔ)言創(chuàng)建；另一種是使用框架模板創(chuàng)建。FrontPage 2003自帶了許多已設(shè)計(jì)好的框架模板，用戶直接選擇相應(yīng)的框架模板即可方便地創(chuàng)建出所需的框架網(wǎng)頁(yè)。使用模板創(chuàng)建框架網(wǎng)頁(yè)的具體操作步驟如下：（1）啟動(dòng)FrontPage 2003應(yīng)用程序，選擇“文件”/“新建”命令，打開(kāi)如圖7-3所示的“新建”任務(wù)窗格。（2）在“新建網(wǎng)頁(yè)”選區(qū)中單擊“其他網(wǎng)頁(yè)模板”超鏈接，在彈出的“網(wǎng)頁(yè)模板”對(duì)話框中打開(kāi)“框架網(wǎng)頁(yè)”選項(xiàng)卡，如圖7-20所示。圖7-20 “框架網(wǎng)頁(yè)”選項(xiàng)卡（3）選擇所需的選項(xiàng)，單擊“確定”按鈕，即可創(chuàng)建框架網(wǎng)頁(yè)，如圖7-21所示

29、。圖7-21 創(chuàng)建框架網(wǎng)頁(yè)框架網(wǎng)頁(yè)中的每一個(gè)框架窗口中都有“設(shè)置初始網(wǎng)頁(yè)”和“新建網(wǎng)頁(yè)”兩個(gè)按鈕，“設(shè)置初始網(wǎng)頁(yè)”按鈕用于將所在框架中顯示的網(wǎng)頁(yè)指定為一個(gè)已編輯好的網(wǎng)頁(yè)，而“新建網(wǎng)頁(yè)”按鈕用于指在該框架中新建一個(gè)空白網(wǎng)頁(yè)。2、制作框架網(wǎng)頁(yè)內(nèi)容框架網(wǎng)頁(yè)創(chuàng)建完成后，就需要對(duì)其中的各個(gè)框架窗口添加網(wǎng)頁(yè)內(nèi)容，包括設(shè)置初始網(wǎng)頁(yè)和編輯空白網(wǎng)頁(yè)兩種。（1）設(shè)置初始網(wǎng)頁(yè) 設(shè)置初始網(wǎng)頁(yè)是指將一個(gè)已編輯好的網(wǎng)頁(yè)顯示在該框架中，其具體操作步驟如下： 在需要設(shè)置初始網(wǎng)頁(yè)的框架中單擊“設(shè)置初始網(wǎng)頁(yè)”按鈕，彈出如圖7-22所示的“插入超鏈接”對(duì)話框。 在“查找范圍”下拉列表中選擇網(wǎng)頁(yè)的保存位置，然后選擇所需的網(wǎng)頁(yè)。圖7-

30、22 “插入超鏈接”對(duì)話框 單擊“確定”按鈕，即可在該框架中顯示所選的網(wǎng)頁(yè)，如圖7-23所示。圖7-23 設(shè)置初始網(wǎng)頁(yè)（2）編輯空白網(wǎng)頁(yè)編輯空白網(wǎng)頁(yè)的具體操作步驟如下： 單擊下面左框架窗口中的“新建網(wǎng)頁(yè)”按鈕，該框架窗口即可變成一個(gè)空白窗口，如圖7-24所示。圖7-24 空白框架窗口 在空白框架窗口中的任意位置單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“在新窗口中打開(kāi)網(wǎng)頁(yè)”命令，該框架窗口即可變成一個(gè)普通的空白網(wǎng)頁(yè)。 在該空白網(wǎng)頁(yè)中編輯網(wǎng)頁(yè)內(nèi)容，編輯完成后，返回到開(kāi)始新建的框架網(wǎng)頁(yè)中，此時(shí)可以發(fā)現(xiàn)框架窗口中的內(nèi)容已經(jīng)自動(dòng)更新了。 按同樣的方法編輯另一個(gè)框架窗口。編輯后的框架網(wǎng)頁(yè)效果如圖7-25所示。

31、圖7-25 編輯框架網(wǎng)頁(yè)效果3、保存框架網(wǎng)頁(yè)保存框架網(wǎng)頁(yè)與保存普通網(wǎng)頁(yè)不同，先對(duì)各個(gè)子框架網(wǎng)頁(yè)進(jìn)行保存，然后再對(duì)整個(gè)框架網(wǎng)頁(yè)進(jìn)行保存，否則會(huì)導(dǎo)致數(shù)據(jù)丟失。7.5 表單的使用 提交表單網(wǎng)頁(yè)表單是實(shí)現(xiàn)交互式網(wǎng)絡(luò)瀏覽方式的重要手段。瀏覽者在表單域中輸入各種信息后，系統(tǒng)會(huì)自動(dòng)將這些信息提交并傳回服務(wù)器端相應(yīng)的處理程序中，當(dāng)服務(wù)器端對(duì)所輸入的信息進(jìn)行組織和處理后，將所有的統(tǒng)計(jì)信息提供給網(wǎng)絡(luò)管理員，以便使用，或?qū)g覽者所需的相關(guān)信息反饋給客戶。在交互過(guò)程中，表單的作用就是收集瀏覽者輸入的信息。例如在申請(qǐng)電子郵箱時(shí)，需要填寫(xiě)個(gè)人信息，如用戶名、密碼、提示信息等，而收集這些信息的工具就是表單。1、創(chuàng)建表單域每

32、個(gè)表單域都有一個(gè)屬于自己的標(biāo)識(shí)名稱和所對(duì)應(yīng)的取值。在一個(gè)表單中可以存放一個(gè)或多個(gè)表單域，并且同一個(gè)表單域可以在同一表單中重復(fù)出現(xiàn)，什么都沒(méi)放的表單稱為空白表單。FrontPage 2003中的表單域類型主要包括文本區(qū)、文本框、文件上傳、復(fù)選框、選項(xiàng)按鈕、下拉框、標(biāo)簽、高級(jí)按鈕、圖片、標(biāo)簽等。選擇“插入”/“表單”命令，彈出 “表單”級(jí)聯(lián)菜單，該級(jí)聯(lián)菜單列出了所有的表單域類型。 確認(rèn)表單網(wǎng)頁(yè)FrontPage 2003中提供了許多創(chuàng)建表單的模板，包括確認(rèn)表單模板、意見(jiàn)反饋表單模板、意見(jiàn)簿表單模板、用戶注冊(cè)模板和搜索網(wǎng)頁(yè)表單模板。使用這些模板用戶可以方便地創(chuàng)建表單。下面以確認(rèn)表單模板為例介紹表單網(wǎng)

33、頁(yè)的創(chuàng)建。使用確認(rèn)表單模板創(chuàng)建的表單可以對(duì)用戶在表單中的輸入信息進(jìn)行確認(rèn)。在用戶提交了表單信息后，會(huì)將一個(gè)默認(rèn)的確認(rèn)網(wǎng)頁(yè)返回給用戶，用戶在各表單域中所輸入的信息將顯示在該頁(yè)面中。具體操作步驟如下：（1）打開(kāi)已創(chuàng)建的Web站點(diǎn)。（2）選擇“文件”/“新建”命令，打開(kāi)“新建”任務(wù)窗格，單擊“其他網(wǎng)頁(yè)模板”超鏈接，彈出如圖7-26所示的“網(wǎng)頁(yè)模板”對(duì)話框。圖7-26 “網(wǎng)頁(yè)模板”對(duì)話框（3）在該對(duì)話框中選中“確認(rèn)表單”圖標(biāo)，然后單擊“確定”按鈕，系統(tǒng)自動(dòng)生成如圖7-27所示的“確認(rèn)表單”編輯頁(yè)面。圖7-27 “確認(rèn)表單”編輯頁(yè)面（4）在該編輯頁(yè)面中用戶可以根據(jù)自己的需要對(duì)表單進(jìn)行修改，將頁(yè)面上一些幫

34、助信息和提示信息刪除，并將其結(jié)果保存到當(dāng)前編輯的Web站點(diǎn)中。7.6 網(wǎng)頁(yè)的發(fā)布 申請(qǐng)個(gè)人主頁(yè)空間通常情況下，網(wǎng)站創(chuàng)建完成后并不能立刻進(jìn)行發(fā)布，而是需要具備一定的發(fā)布條件和對(duì)其進(jìn)行測(cè)試檢查，確保它能正常工作后，才可以發(fā)布。如果要將網(wǎng)站發(fā)布到Internet上，必須具備以下兩個(gè)條件：1、連接Internet無(wú)論是發(fā)布網(wǎng)站，還是發(fā)布網(wǎng)頁(yè)，都必須與Internet相連接。連接Internet的方式很多，用戶可以根據(jù)自己的實(shí)際情況選擇所需的連接方式，如調(diào)制解調(diào)器、ADSL、局域網(wǎng)等。2、申請(qǐng)主頁(yè)空間如果要將自己的網(wǎng)站或網(wǎng)頁(yè)發(fā)布到Internet上，那么就需要在Internet上申請(qǐng)一個(gè)存放網(wǎng)站或網(wǎng)頁(yè)的

35、空間。目前有許多網(wǎng)站都提供了免費(fèi)的個(gè)人主頁(yè)存放空間，用戶可以根據(jù)自己的需要申請(qǐng)相應(yīng)的空間，如中國(guó)萬(wàn)維網(wǎng)（）等。在申請(qǐng)主頁(yè)空間時(shí)用戶可以發(fā)現(xiàn)，許多網(wǎng)站都提供有制作個(gè)人主頁(yè)的向?qū)?，用戶可以直接通過(guò)現(xiàn)有的模板快速生成一個(gè)個(gè)人主頁(yè)。在申請(qǐng)主頁(yè)空間時(shí)，網(wǎng)站系統(tǒng)會(huì)顯示提示信息，用戶只需要按照提示步驟進(jìn)行操作即可。 網(wǎng)頁(yè)發(fā)布發(fā)布網(wǎng)站就是將FrontPage 2003中所創(chuàng)建的網(wǎng)站傳輸?shù)絀nternet或本地計(jì)算機(jī)的某個(gè)位置上，用戶可以采用FTP傳輸方式，也可以使用FrontPage 2003中提供的文件系統(tǒng)來(lái)發(fā)布網(wǎng)站。1、設(shè)置文件發(fā)布狀態(tài)在發(fā)布網(wǎng)站時(shí)，用戶可以根據(jù)情況設(shè)置文件的發(fā)布狀態(tài)。該狀態(tài)決定網(wǎng)站中文件是否發(fā)布。設(shè)置文件發(fā)布狀態(tài)的具體操作步驟如下：（1）打開(kāi)需要設(shè)置文件發(fā)