1、第1頁(yè)第7章 網(wǎng)頁(yè)制作軟件介紹本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁(yè)，共154頁(yè)。第2頁(yè)本章概述 Internet上豐富的信息資源大多是通過(guò)網(wǎng)頁(yè)傳遞的，網(wǎng)頁(yè)是WWW網(wǎng)的基本文檔之一，網(wǎng)頁(yè)用HTML（超文本標(biāo)記語(yǔ)言）書(shū)寫(xiě)，一個(gè)網(wǎng)頁(yè)包含許多不同類(lèi)型的HTML標(biāo)記符，使用這樣的標(biāo)記符構(gòu)建成網(wǎng)頁(yè)的結(jié)構(gòu)、外貌和內(nèi)容。網(wǎng)頁(yè)被保存在WWW服務(wù)器中，可以通過(guò)特定的URL地址檢索到，當(dāng)你在瀏覽器的地址欄中輸入相應(yīng)的URL地址時(shí)，就可以找到相應(yīng)的Homepage，并從中 獲取信息。人們?cè)谥谱饕粋€(gè)網(wǎng)頁(yè)時(shí)，大都采用一些專(zhuān)門(mén)的網(wǎng)頁(yè)制作工具，如FrontPage編輯器、Dreamweaver編輯器等，它們將網(wǎng)頁(yè)界面自動(dòng)構(gòu)

2、建成對(duì)應(yīng)的HTML標(biāo)記語(yǔ)言。人們要制作一個(gè)有特色的、動(dòng)態(tài)交互的網(wǎng)頁(yè)還需要使用Flash和Fireworks等輔助技術(shù)和動(dòng)態(tài)網(wǎng)頁(yè)語(yǔ)言 ASP、JSP、PHP等制作工具。第2頁(yè)，共154頁(yè)。第3頁(yè)本章的學(xué)習(xí)目標(biāo)了解HTML語(yǔ)言掌握網(wǎng)頁(yè)、網(wǎng)站等相關(guān)概念掌握網(wǎng)站與網(wǎng)頁(yè)創(chuàng)建和管理的操作掌握網(wǎng)頁(yè)的編輯技術(shù)掌握網(wǎng)頁(yè)的表格操作掌握網(wǎng)頁(yè)圖片操作掌握網(wǎng)頁(yè)表單和框架網(wǎng)頁(yè)操作掌握網(wǎng)頁(yè)超鏈接操作了解網(wǎng)頁(yè)制作的輔助技術(shù)和動(dòng)態(tài)交互網(wǎng)頁(yè)的制作工具第3頁(yè)，共154頁(yè)。第4頁(yè)主要內(nèi)容7.1 HTML語(yǔ)言簡(jiǎn)介 7.2 FrontPage 2003的使用7.3 FrontPage 2003的高級(jí)應(yīng)用7.4 Dreamweaver8.

3、0的使用7.5 網(wǎng)頁(yè)開(kāi)發(fā)輔助技術(shù)7.6 動(dòng)態(tài)交互網(wǎng)頁(yè)的制作工具7.7 本章小結(jié) 第4頁(yè)，共154頁(yè)。7.1 HTML語(yǔ)言簡(jiǎn)介7.1.1 超文本標(biāo)記語(yǔ)言HTML7.1.2 HTML標(biāo)記語(yǔ)言的基本結(jié)構(gòu)7.1.3 幾個(gè)常用的HTML標(biāo)記第5頁(yè)第5頁(yè)，共154頁(yè)。第6頁(yè) HTML（Hyper Text Markup Language）是超文本標(biāo)記語(yǔ)言。同所有的編程語(yǔ)言一樣，HTML語(yǔ)言也有一套自己的符號(hào)和語(yǔ)法約定。但它又不同于一般的編程語(yǔ)言，它只是一些可以由瀏覽器加以解釋?zhuān)⒕哂忻顦?biāo)記性質(zhì)的文本。一、超文本標(biāo)記語(yǔ)言HTML第6頁(yè)，共154頁(yè)。第7頁(yè)例如在瀏覽器IE中顯示的是一個(gè)簡(jiǎn)單的主頁(yè)（如圖7-1

4、-1所示）。該網(wǎng)頁(yè)的文本內(nèi)容如下： 我的第一個(gè)homepage，歡迎光臨！ 您的到來(lái)為本站增輝！ 本站全體同仁歡迎您！ 蜜蜂之家 圖7-1-1 一個(gè)簡(jiǎn)單的主頁(yè)超文本標(biāo)記語(yǔ)言HTML第7頁(yè)，共154頁(yè)。第8頁(yè)二、HTML標(biāo)記語(yǔ)言的基本結(jié)構(gòu)一個(gè)網(wǎng)頁(yè)對(duì)應(yīng)于一個(gè)HTML文件，HTML文件以.htm或.html為擴(kuò)展名。標(biāo)準(zhǔn)的HTML文件都具有一個(gè)基本的整體結(jié)構(gòu)，即HTML文件的開(kāi)始與結(jié)束標(biāo)志、HTML的頭部與主體兩大部分。文件頭部用來(lái)設(shè)置當(dāng)前文檔的一些相關(guān)信息，如網(wǎng)頁(yè)的搜索關(guān)鍵字、網(wǎng)頁(yè)的標(biāo)題、網(wǎng)頁(yè)所使用的編碼以及腳本語(yǔ)言等，它一般不在瀏覽器的窗口中顯示。文件主體用來(lái)放置Web頁(yè)面的主要內(nèi)容，包含文字、

5、圖片、背景色、表格、表單等幾乎所有關(guān)于網(wǎng)頁(yè)的功能和效果的展示。第8頁(yè)，共154頁(yè)。表7-1-1 HTML文件構(gòu)成第9頁(yè)名 稱(chēng)描 述文件開(kāi)始頭部 標(biāo)題名 其他頭部?jī)?nèi)容定義標(biāo)記 主體 主頁(yè)內(nèi)容（文本、圖像等） 文件結(jié)束 HTML標(biāo)記語(yǔ)言的基本結(jié)構(gòu)第9頁(yè)，共154頁(yè)。HTML文件由標(biāo)記和文本組成，HTML用于描述功能的符號(hào)稱(chēng)為“標(biāo)記”。一個(gè)標(biāo)記表示為“”，中間可以包含標(biāo)記名、標(biāo)記的屬性等，就像編程語(yǔ)言中的參數(shù)一樣。標(biāo)記構(gòu)成一對(duì)完整的標(biāo)簽，并且許多標(biāo)記是成對(duì)出現(xiàn)的，這也是HTML標(biāo)簽的特點(diǎn)，有一個(gè)開(kāi)始標(biāo)記，還有一個(gè)結(jié)束標(biāo)記，結(jié)束標(biāo)記就是在開(kāi)始標(biāo)記之前加一個(gè)“/”。比如下面兩行： 它們告訴瀏覽器，這是H

6、omepage的開(kāi)始()以及結(jié)束()。第10頁(yè)HTML標(biāo)記語(yǔ)言的基本結(jié)構(gòu)第10頁(yè)，共154頁(yè)。第11頁(yè)三、幾個(gè)常用的HTML標(biāo)記 1 作用：表示超文本文檔的開(kāi)頭及結(jié)束。 2 作用：一些有關(guān)文檔的定義、說(shuō)明和描述等標(biāo)記包含在其中。 3 作用：其中包含的內(nèi)容出現(xiàn)在瀏覽器窗口的標(biāo)題欄上，作為該主頁(yè)的標(biāo)題。 4 作用：要表達(dá)的正文信息包含在其中。 說(shuō)明：以上4個(gè)標(biāo)記是一個(gè)完整的Homepage所必不可少的。 5 作用：其中n取值l6，表示由大到小的6種標(biāo)題文字。第11頁(yè)，共154頁(yè)。第12頁(yè) 6 作用：強(qiáng)行換行。 在HTML文本中，所有包含的回車(chē)符和空格都被忽略，當(dāng)一行的內(nèi)容還不滿(mǎn)屏幕的寬度時(shí)，下一行

7、內(nèi)容會(huì)自動(dòng)接上，因此在需換行時(shí)必須使用該標(biāo)記。 7格式： 作用：用于設(shè)定字體的大小和所用的字體，其中包含兩個(gè)屬性： 屬性size：指定字體的大小，值為l7。 屬性face：用于指定不同的字體。 8格式： 作用：將圖像文件嵌入到Homepage中。其中包含3個(gè)屬性：Src（圖像來(lái)源）、Width（圖像寬度）和 Height（圖像高度） 9格式： 作用：將文本的內(nèi)容居中。 10格式： 作用：在其間包含的文本內(nèi)容上加下劃線(xiàn)。當(dāng)然，HTML的標(biāo)記還有很多，對(duì)于初學(xué)者來(lái)說(shuō)比較難記。不過(guò)我們可以使用FrontPage2003來(lái)制作圖文并茂的Homepage。幾個(gè)常用的HTML標(biāo)記第12頁(yè)，共154頁(yè)。第1

8、3頁(yè)第二節(jié) FrontPage2003的使用7.2.1 FrontPage 2003概述 7.2.2 創(chuàng)建站點(diǎn)和網(wǎng)頁(yè)操作7.2.3 網(wǎng)頁(yè)中的文本編輯7.2.4 網(wǎng)頁(yè)中圖片的處理7.2.5 網(wǎng)頁(yè)中表格的使用7.2.6 建立超鏈接 第13頁(yè)，共154頁(yè)。第14頁(yè)一、 FrontPage 2003概述FrontPage 2003是 Microsoft公司最新推出的網(wǎng)站制作軟件，是 Office系列辦公軟件中的一個(gè)。FrontPage 2003的新特性FrontPage 2003集中了所有Web設(shè)計(jì)功能，并可以查看整個(gè)網(wǎng)絡(luò)全景，增加了布局表格和單元格、圖像描摹?？梢允褂脛?dòng)態(tài)Web模板、網(wǎng)頁(yè)標(biāo)尺和布局網(wǎng)

9、格。（1）自定義例覽器分辨率在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，可實(shí)時(shí)調(diào)節(jié)當(dāng)前頁(yè)面在客戶(hù)端顯示的分辨率，以便預(yù)覽當(dāng)前效果。（2）描摹圖像大家在學(xué)習(xí)書(shū)法的時(shí)候，都接觸過(guò)臨摹吧，描摹圖像的功用與其類(lèi)似，就是通過(guò)創(chuàng)建一個(gè)圖像（一般為網(wǎng)頁(yè)的效果圖）為參照物，以便于網(wǎng)頁(yè)的設(shè)計(jì)制作。選擇菜單欄上的“視圖”、“描摹圖像”、“設(shè)置”命令，在彈出的對(duì)話(huà)框中，選擇指定圖像，再設(shè)置其坐標(biāo)（即在設(shè)計(jì)頁(yè)面上顯示的位置）。最后，設(shè)置透明度，再單擊“確認(rèn)”按鈕即可。第14頁(yè)，共154頁(yè)。第15頁(yè)（3）層功能層在網(wǎng)頁(yè)制作中是不可缺少的，F(xiàn)rontPage 2003可以像Dreamweaver那樣使用層。通過(guò)層可以將內(nèi)容重疊、交叉擺放。（4）行為的

10、應(yīng)用行為是事件和由該事件觸發(fā)的動(dòng)作的組合。行為代碼是客戶(hù)端的Javascript代碼，因此它無(wú)需服務(wù)器的支持就可觸發(fā)事件。行為一直是Dreamweaver的強(qiáng)項(xiàng)，而FrontPage 2003現(xiàn)在也有了這個(gè)功能。選擇菜單“格式”、“行為”命令，查看界面右側(cè)的“行為”窗格，單擊“插入”向下箭頭按鈕，在彈出的菜單中可選擇播放聲音、彈出消息、調(diào)用腳本及彈出菜單等事件。在選擇指定的插入對(duì)象后，將彈出相應(yīng)的設(shè)置對(duì)話(huà)框，在其中按需操作。所有添加的行為事件，均會(huì)顯示在列表中。 FrontPage 2003新特性第15頁(yè)，共154頁(yè)。第16頁(yè)（5）用網(wǎng)頁(yè)重定向在 FrontPage 2003中，選擇菜單“工具

11、”、“中文簡(jiǎn)繁轉(zhuǎn)換”、“插入重定向代碼”命令，在彈出的對(duì)話(huà)框中，設(shè)置簡(jiǎn)體頁(yè)面網(wǎng)址及繁體頁(yè)面網(wǎng)址。而后，插入的代碼將通過(guò)測(cè)覽器對(duì)支持語(yǔ)言的檢測(cè)，實(shí)現(xiàn)自動(dòng)轉(zhuǎn)向。（6）檢查網(wǎng)頁(yè)錯(cuò)誤選擇菜單“工具”、“輔助功能”命令，在彈出的對(duì)話(huà)框中設(shè)置檢查范圍、內(nèi)容及顯示對(duì)象，接著單擊“檢查”按鈕即可。利用此項(xiàng)功能，就可快速找出指定網(wǎng)頁(yè)是否有錯(cuò)誤，并可查看問(wèn)題之所在。（7）規(guī)劃頁(yè)面布局一個(gè)成功的設(shè)計(jì)作品，大都需要事先為其規(guī)劃設(shè)計(jì)布局，以便于宏觀控制其內(nèi)容。選擇菜單“表格”、“布局表格和單元格”命令，右側(cè)窗格中將顯示相應(yīng)的屬性設(shè)置。我們著重查看“表格布局”下拉列表，在其中有若干布局樣式可供選擇。當(dāng)我們選擇一種合適的布

12、局應(yīng)用于當(dāng)前頁(yè)面上后，可隨時(shí)在設(shè)計(jì)視圖中按需自行調(diào)節(jié)其布局樣式。 FrontPage 2003新特性第16頁(yè)，共154頁(yè)。第17頁(yè)FrontPage 2003的啟動(dòng)與退出的方法和 Word 2003類(lèi)似。FrontPage 2003的啟動(dòng)雙擊Windows桌面上的Microsoft FrontPage 2003快捷方式圖標(biāo)，選擇“開(kāi)始”、“所有程序”、“Microsoft office”、“Microsoft office FrontPape2003”菜單命令都可以啟動(dòng)FrontPage 2003。 FrontPage 2003的啟動(dòng)第17頁(yè)，共154頁(yè)。第18頁(yè) FrontPage 2003

13、的退出（1）單擊FrontPage 2003窗口中的“關(guān)閉”按鈕。（2）選擇菜單“文件”、“退出”命令。（3）按ALT十F4。（4）單擊窗口中的 FrontPage 2003控制圖標(biāo)，打開(kāi)窗口控制菜單，選擇“關(guān)閉”命令。（5）雙擊窗口中的 FrontPage 2003控制圖標(biāo)。 FrontPage 2003的退出第18頁(yè)，共154頁(yè)。第19頁(yè)FrontPage 2003啟動(dòng)后進(jìn)入如圖7-2-1所示的工作界面。在 FrontPage 2003中提供了 7種視圖模式和4種網(wǎng)頁(yè)視圖方式。FrontPape 2003提供了網(wǎng)頁(yè)視圖、文件夾視圖、遠(yuǎn)程網(wǎng)站視圖、報(bào)表視圖、導(dǎo)航視圖、超鏈接視圖和任務(wù)視圖7種

14、視圖模式，利用這些視圖可以完成站點(diǎn)的創(chuàng)建、管理、發(fā)布等任務(wù)。視圖切換可以選擇菜單“視圖”，執(zhí)行相應(yīng)的命令，也可以使用視圖模式標(biāo)簽進(jìn)行切換。圖7-2-1 FrontPage 2003窗口 FrontPage 2003的工作界面第19頁(yè)，共154頁(yè)。第20頁(yè)（l）網(wǎng)頁(yè)視圖默認(rèn)情況下，打開(kāi)網(wǎng)頁(yè)，就會(huì)進(jìn)入網(wǎng)頁(yè)視圖，可以在該視圖下編輯網(wǎng)頁(yè)內(nèi)容。網(wǎng)頁(yè)視圖包括設(shè)計(jì)視圖、拆分視圖、代碼視圖和預(yù)覽視圖4種視圖方式。（2）文件夾視圖文件夾視圖列出了文件夾中的所有內(nèi)容?？梢栽谖募A內(nèi)容上單擊右鍵直接對(duì)其進(jìn)行刪除、復(fù)制、重命名、移動(dòng)、打開(kāi)等操作。 FrontPage 2003視圖第20頁(yè)，共154頁(yè)。第21頁(yè)（3）遠(yuǎn)

15、程網(wǎng)站視圖該視圖是FrontPape 2003的新特性之一，主要功能是向互聯(lián)網(wǎng)發(fā)布文件?？梢允褂么斯δ軐⑼景l(fā)布到一個(gè)網(wǎng)絡(luò)服務(wù)提供商的服務(wù)器上。（4）報(bào)表視圖在該視圖模式下，可以查看站點(diǎn)的各種分布情況，包括網(wǎng)站摘要、文件、共享內(nèi)容、工作流、使用率信息和網(wǎng)站存在的問(wèn)題等。（5）導(dǎo)航視圖導(dǎo)航視圖中提供了網(wǎng)站的分層視圖，可以直觀地表示一個(gè)網(wǎng)站的組織關(guān)系和邏輯層次，以方便管理網(wǎng)站中的各個(gè)網(wǎng)頁(yè)。 FrontPage 2003視圖第21頁(yè)，共154頁(yè)。第22頁(yè)（6）超鏈接視圖超鏈接視圖可以將網(wǎng)站中的超鏈接的狀態(tài)顯示在一個(gè)列表中，該列表中包括內(nèi)部鏈接和外部鏈接。圖中帶有加號(hào)的超鏈接表示該鏈接還鏈接其他站點(diǎn)，

16、單擊加號(hào)就可以打開(kāi)它所包括的鏈接。（7）任務(wù)視圖任務(wù)視圖主要用來(lái)記錄和分配任務(wù)，包括已完成任務(wù)和尚未完成任務(wù)，主要信息包括狀態(tài)、任務(wù)名稱(chēng)、分配對(duì)象、優(yōu)先級(jí)等信息。任務(wù)視圖用于同站項(xiàng)目的管理和任務(wù)的分配?？梢赃x擇菜單“編輯”、“任務(wù)”命令，執(zhí)行添加任務(wù)、編輯任務(wù)、標(biāo)記完成等操作。 FrontPage 2003視圖第22頁(yè)，共154頁(yè)。第23頁(yè)選擇菜單“視圖”、“網(wǎng)頁(yè)”命令可以切換到網(wǎng)頁(yè)視圖模式。此時(shí)文檔窗口的左下方就會(huì)出現(xiàn)4種網(wǎng)頁(yè)視圖方式的選項(xiàng)卡，可以從不同的角度對(duì)一個(gè)網(wǎng)頁(yè)進(jìn)行查看和處理?？梢詥螕粼撨x項(xiàng)卡實(shí)現(xiàn)視圖方式的切換。（1）設(shè)計(jì)視圖?？梢栽谠撘晥D中設(shè)計(jì)和編輯網(wǎng)頁(yè)，以“所見(jiàn)即所得”的工作方式

17、實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)和編輯。（2）代碼視圖。網(wǎng)頁(yè)文件其實(shí)是HTML標(biāo)記語(yǔ)言編寫(xiě)的文本文件，可以采用代碼視圖顯示和編輯網(wǎng)頁(yè)中的HTML標(biāo)記代碼。（3）拆分視圖。拆分視圖可以同時(shí)訪問(wèn)代碼視圖和設(shè)計(jì)視圖。該模式將工作窗口分成兩部分：上面窗口是HTML標(biāo)記代碼，下面窗口是網(wǎng)頁(yè)的編輯畫(huà)面。（4）預(yù)覽視圖。通過(guò)該視圖可以在網(wǎng)頁(yè)制作過(guò)程中隨時(shí)查看網(wǎng)頁(yè)的顯示效果，可以看到和瀏覽器中一樣的顯示效果。 FrontPage 2003視圖第23頁(yè)，共154頁(yè)。第24頁(yè)二、創(chuàng)建站點(diǎn)和網(wǎng)頁(yè)操作創(chuàng)建站點(diǎn)網(wǎng)站由網(wǎng)頁(yè)組成，小型的網(wǎng)站可以逐個(gè)網(wǎng)頁(yè)創(chuàng)建。如果Web站點(diǎn)較大，則通過(guò)站點(diǎn)會(huì)使管理和創(chuàng)建更加便捷。可以使用向?qū)Ш褪褂媚０鍍煞N方式創(chuàng)

18、建站點(diǎn)。FrontPage 2003中的向?qū)Ш湍０宸譃閮深?lèi)：一類(lèi)是網(wǎng)頁(yè)向?qū)c模板，包括常規(guī)、框架網(wǎng)頁(yè)和樣式表3種；另一類(lèi)是網(wǎng)站向?qū)Ш湍０濉５?4頁(yè)，共154頁(yè)。第25頁(yè)選擇菜單“文件”|“新建”命令，打開(kāi)“新建”任務(wù)窗格，如圖7-2-2所示，單擊“新建站點(diǎn)”中的一個(gè)選項(xiàng)，根據(jù)提示操作即可創(chuàng)建站點(diǎn)。其中“只有一個(gè)網(wǎng)頁(yè)組成的網(wǎng)站”模板將創(chuàng)建包含一個(gè)空白網(wǎng)頁(yè)的新網(wǎng)站，是比較常用的方式，用于一般用途網(wǎng)站的創(chuàng)建。網(wǎng)頁(yè)是網(wǎng)站的基本組成部分，下面將介紹網(wǎng)頁(yè)制作的基本操作，包括新建網(wǎng)頁(yè)、設(shè)置網(wǎng)頁(yè)屬性、保存網(wǎng)頁(yè)、打開(kāi)已有網(wǎng)頁(yè)和預(yù)覽網(wǎng)頁(yè)等。新建網(wǎng)頁(yè) 新建網(wǎng)頁(yè)一般有3種方式，分別為新建空白網(wǎng)頁(yè)、根據(jù)現(xiàn)有網(wǎng)頁(yè)新建網(wǎng)頁(yè)

19、和使用網(wǎng)頁(yè)模板新建網(wǎng)頁(yè)。選擇菜單“文件”、“新建”命令，打開(kāi)“新建”任務(wù)窗格，如圖7-2-2所示。圖7-2-2“新建”任務(wù)窗格 創(chuàng)建站點(diǎn)和網(wǎng)頁(yè)第25頁(yè)，共154頁(yè)。第26頁(yè)新建空白網(wǎng)頁(yè)。 在“新建網(wǎng)頁(yè)”選擇區(qū)域中單擊“空白網(wǎng)頁(yè)”，空白網(wǎng)頁(yè)創(chuàng)建后，系統(tǒng)自動(dòng)為其命名為“new_page_1.htm”。根據(jù)現(xiàn)有網(wǎng)頁(yè)新建網(wǎng)頁(yè)。 在“新建網(wǎng)頁(yè)”選擇區(qū)域中單擊“根據(jù)現(xiàn)有網(wǎng)頁(yè)”，打開(kāi)“根據(jù)現(xiàn)有網(wǎng)頁(yè)新建”對(duì)話(huà)框。選擇所需應(yīng)用的網(wǎng)頁(yè)，單擊“創(chuàng)建”按鈕即可。此時(shí)會(huì)打開(kāi)現(xiàn)有的網(wǎng)頁(yè)，命名為“new_page_2.htm”。新建的網(wǎng)頁(yè)new_page_2.htm將繼承現(xiàn)有網(wǎng)頁(yè)的格式，且可以在此基礎(chǔ)上進(jìn)行編輯和修改。使用

20、網(wǎng)頁(yè)模板新建網(wǎng)頁(yè)。 該選項(xiàng)是根據(jù) FrontPage 2003提供的網(wǎng)頁(yè)模板來(lái)新建網(wǎng)頁(yè)。在“新建網(wǎng)頁(yè)”選擇區(qū)域中單擊“其他網(wǎng)頁(yè)模板”，打開(kāi)“網(wǎng)頁(yè)模板”對(duì)話(huà)框，如圖7-2-3所示。提供了常規(guī)網(wǎng)頁(yè)模板、框架網(wǎng)頁(yè)模板和樣式表模板共3類(lèi)。選擇所需要的網(wǎng)頁(yè)模板，單擊“確定”按鈕即可。圖7-2-3“網(wǎng)頁(yè)模板”對(duì)話(huà)框網(wǎng)頁(yè)基本操作第26頁(yè)，共154頁(yè)。第27頁(yè)網(wǎng)頁(yè)屬性設(shè)置網(wǎng)頁(yè)屬性主要包括網(wǎng)頁(yè)的標(biāo)題、背景音樂(lè)、背景圖片、背景顏色、超鏈接顏色、邊距和正文樣式等。選定網(wǎng)頁(yè)文檔區(qū)域，選擇菜單“文件”、“屬性”命令，或者單擊右鍵，在彈出的快捷菜單中選擇“網(wǎng)頁(yè)屬性”命令，打開(kāi)“網(wǎng)頁(yè)屬性”對(duì)話(huà)框，如圖7-2-4所示。共有常

21、規(guī)、格式、高級(jí)、自定義、語(yǔ)言、工作組6個(gè)選項(xiàng)卡，其中：“常規(guī)”選項(xiàng)卡設(shè)置標(biāo)題。網(wǎng)頁(yè)標(biāo)題是一個(gè)網(wǎng)頁(yè)的概括性說(shuō)明文字，該標(biāo)題將會(huì)顯示在Web測(cè)覽器的標(biāo)題欄中。網(wǎng)頁(yè)說(shuō)明。網(wǎng)站訪問(wèn)者在Web上搜索內(nèi)容，則會(huì)在搜索結(jié)果中看到此說(shuō)明。關(guān)鍵字。描述網(wǎng)頁(yè)內(nèi)容的一個(gè)或多個(gè)關(guān)鍵宇（用一個(gè)逗號(hào)和一個(gè)空格隔開(kāi)）。背景音樂(lè)。在“位置”文本框中輸入要在打開(kāi)網(wǎng)頁(yè)時(shí)播放的音樂(lè)文件的路徑和文件名，或者單擊“瀏覽”選擇文件。循環(huán)次數(shù)。播放音樂(lè)的次數(shù)。若要不停地播放音樂(lè)，選中“不限次數(shù)”復(fù)選框。圖7-2-4 “網(wǎng)頁(yè)屬性”對(duì)話(huà)框第27頁(yè)，共154頁(yè)。第28頁(yè)網(wǎng)頁(yè)屬性設(shè)置“格式”選項(xiàng)卡，可以設(shè)置網(wǎng)頁(yè)的背景圖片、背景顏色、文本顏色、超鏈

22、接顏色。已訪問(wèn)的超鏈接顏色、當(dāng)前超鏈接顏色等。如圖7-2-5所示。背景。設(shè)置背景圖片，如果圖形的長(zhǎng)或?qū)捙c網(wǎng)頁(yè)不同，則圖形會(huì)在網(wǎng)頁(yè)的背景中重復(fù)顯示，并與網(wǎng)頁(yè)中的文本及其他元素一起滾動(dòng)。使其成為水印。把網(wǎng)頁(yè)背景圖形作為水印，固定在背景中，不會(huì)與網(wǎng)頁(yè)中的文本及其他元素一起滾動(dòng)。屬性。更改背景圖形的格式和其他設(shè)置。只有已向網(wǎng)頁(yè)添加了背景圖形，此選項(xiàng)才可用。顏色。設(shè)置網(wǎng)頁(yè)的背景顏色、網(wǎng)頁(yè)中文本的默認(rèn)顏色。超鏈接。設(shè)置尚未訪問(wèn)的超鏈接的文本顏色。已訪問(wèn)的超鏈接。設(shè)置已單擊過(guò)的超鏈接的文本顏色。當(dāng)前超鏈接。單擊超鏈接時(shí)的文本顏色。圖7-2-5 “格式”選項(xiàng)卡第28頁(yè)，共154頁(yè)。第29頁(yè)網(wǎng)頁(yè)屬性設(shè)置“高級(jí)”

23、選項(xiàng)卡，可以設(shè)置頁(yè)面的邊距、正文樣式、超鏈接反轉(zhuǎn)樣式等，如圖7-2-6所示。邊距。上、下、左、右邊距分別可以設(shè)置網(wǎng)頁(yè)內(nèi)容與瀏覽器窗口的距離。邊距寬度可以設(shè)置左右邊距為相同的寬度，邊距高度可以設(shè)置上下邊距為相同的高度。樣式。單擊“正文樣式”彈出“修改樣式”對(duì)話(huà)框，如圖7-2-7所示?？梢愿木W(wǎng)頁(yè)中文本的默認(rèn)格式字體、段落、邊框、編號(hào)方式、定位等。如果對(duì)網(wǎng)頁(yè)中的特定文本或元素應(yīng)用格式設(shè)置，則“正文樣式”設(shè)置對(duì)該文本或元素不起作用。啟用超鏈接翻轉(zhuǎn)效果。當(dāng)讓指針停留在超鏈接文本上時(shí)，將更改該文本的外觀。文本外觀可以通過(guò)單擊“翻轉(zhuǎn)樣式”按鈕進(jìn)行設(shè)置。圖7-2-6 “高級(jí)”選項(xiàng)卡圖7-2-7 “修改樣式”

24、對(duì)話(huà)框第29頁(yè)，共154頁(yè)。第30頁(yè)網(wǎng)頁(yè)屬性設(shè)置“自定義”選項(xiàng)卡 可以添加由Meta屬性包含的頭信息變量，主要分為系統(tǒng)（HTTP-EQUIV）變量和用戶(hù)（User）變量?！罢Z(yǔ)言”選項(xiàng)卡。可以設(shè)置網(wǎng)頁(yè)語(yǔ)言、HTML編碼等。第30頁(yè)，共154頁(yè)。第31頁(yè)保存網(wǎng)頁(yè)保存尚未保存的網(wǎng)頁(yè)單擊“常用”工具欄上的保存按鈕。或者選擇菜單“文件”、“保存”命令，在打開(kāi)的“另存為”對(duì)話(huà)框中找到并雙擊要保存網(wǎng)頁(yè)的文件夾。在“文件名”框中，輸入網(wǎng)頁(yè)的文件名，然后單擊“保存”按鈕。保存從當(dāng)前站點(diǎn)打開(kāi)的網(wǎng)頁(yè)單擊“常用”工具欄上的保存按鈕，或者選擇菜單“文件”、“保存”命令即可。保存從當(dāng)前站點(diǎn)之外的位置打開(kāi)的網(wǎng)頁(yè)選擇菜單“文

25、件”、“另存為”命令，在彈出的“另存為”對(duì)話(huà)框中找到并雙擊要保存網(wǎng)頁(yè)的文件夾，然后單擊“保存”按鈕。第31頁(yè)，共154頁(yè)。第32頁(yè)打開(kāi)網(wǎng)頁(yè)選擇菜單“文件”|“打開(kāi)”命令，通過(guò)彈出的“打開(kāi)文件”對(duì)話(huà)框打開(kāi)網(wǎng)頁(yè)。或者在FrontPage 2003的站點(diǎn)視圖模式下，雙擊網(wǎng)頁(yè)文件名也可以打開(kāi)網(wǎng)頁(yè)。第32頁(yè)，共154頁(yè)。第33頁(yè)預(yù)覽網(wǎng)頁(yè)網(wǎng)頁(yè)在制作完成后，在設(shè)計(jì)視圖下只能看到頁(yè)面的大概形態(tài)，而動(dòng)畫(huà)、視頻、音頻。網(wǎng)頁(yè)動(dòng)態(tài)效果等需要在預(yù)覽視圖模式或者Web 瀏覽器中才能看到。預(yù)覽有兩種方式：在FrontPage預(yù)覽視圖中預(yù)覽和在Web 瀏覽器中預(yù)覽。預(yù)覽網(wǎng)頁(yè)首先要確定要瀏覽的網(wǎng)頁(yè)處于打開(kāi)狀態(tài)。（l）在Fron

26、tPage預(yù)覽視圖中預(yù)覽 單擊FrontPage2003 窗口中左下角視圖切換標(biāo)簽中的預(yù)覽按鈕，即可瀏覽制作效果。（2）在Web瀏覽器中預(yù)覽 選擇菜單“文件”、“在瀏覽器中預(yù)覽”命令，選擇瀏覽器，即可啟動(dòng)瀏覽器顯示頁(yè)面效果，其中瀏覽器后面的數(shù)字表示將按此大小打開(kāi)瀏覽器窗口。 或者單擊“常用”工具欄上的“Microsoft Internet Explorer 6.0中的預(yù)覽”按鈕。第33頁(yè)，共154頁(yè)。第34頁(yè)三、 網(wǎng)頁(yè)中的文本操作 網(wǎng)頁(yè)中大量的信息是文本，因此文本的操作是網(wǎng)頁(yè)制作的基礎(chǔ)。本節(jié)主要介紹如何在設(shè)計(jì)視圖模式下為網(wǎng)頁(yè)輸入文本，以及如何通過(guò)設(shè)置文本格式、段落格式、邊框和底紋、列表等，使頁(yè)

27、面美觀。第34頁(yè)，共154頁(yè)。第35頁(yè)文本的輸入網(wǎng)頁(yè)中文本和特殊字符的輸入和前面講解的方法基本一樣，也有所不同。如果要產(chǎn)生一個(gè)新行，需要按下“ShiftEnter”鍵，換行標(biāo)記為“”。要產(chǎn)生一個(gè)新的段落，直接按“Enter”鍵，段落標(biāo)記為“”。插入水平線(xiàn)。當(dāng)頁(yè)面中內(nèi)容比較多時(shí)，為了使網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)清晰，可以通過(guò)插入水平線(xiàn)分隔內(nèi)容。操作步驟為：選擇插入位置，選擇菜單“插入”、“水平線(xiàn)”命令。設(shè)置水平線(xiàn)。雙擊水平線(xiàn)，在彈出的“水平線(xiàn)屬性”對(duì)話(huà)框，可以設(shè)置水平線(xiàn)的寬度、高度、對(duì)齊方式、顏色等。第35頁(yè)，共154頁(yè)。第36頁(yè)文本的格式化設(shè)置字體格式網(wǎng)頁(yè)中最重要的內(nèi)容是文本，因此文本的格式化是網(wǎng)頁(yè)制作的關(guān)

28、鍵步驟之一。包括設(shè)置字體、字號(hào)、字體顏色和字符間距等。設(shè)置字體格式首先選中要設(shè)置字體的文本，選擇方法與 Word 2003中的選定方式類(lèi)似。顏色吸管FrontPage 2003除了提供前面介紹的顏色選擇方法外，還可以使用顏色吸管選擇頁(yè)面文本或圖片的顏色作為文本的設(shè)定顏色.方法如下：選擇菜單“格式”、“字體”命令，在打開(kāi)的“字體”對(duì)話(huà)框中，單擊“顏色”下拉列表框，在彈出的下拉列表中選擇“其他顏色”，打開(kāi)“其他顏色”對(duì)話(huà)框，如圖7- 2 -8 所示。單擊顏色選擇按鈕，鼠標(biāo)就會(huì)變成顏色吸管。移動(dòng)鼠標(biāo)，在需要的顏色處單擊鼠標(biāo)，就會(huì)在“其他顏色”對(duì)話(huà)框中的“新建”顏色窗口中顯示吸取的顏色，單擊“確定”按

29、鈕即可使用吸取的顏色。圖7-2-8 “其他顏色”對(duì)話(huà)框 第36頁(yè)，共154頁(yè)。第37頁(yè)文本的格式化設(shè)置字符間距為了增加網(wǎng)頁(yè)中文字與文字間的距離，需要設(shè)置字符間距。首先選擇要設(shè)置字符間距的文本，選擇菜單“格式”、“字體”命令，彈出“字體”對(duì)話(huà)框，選擇“字符間距”選項(xiàng)卡，如圖7- 2 -9 所示。在“間距”下拉列表框中可以設(shè)置間距方式：普通、加寬和緊縮。在“間距大小”微調(diào)框中輸入以像素為單位的間距大小。在“定位”下拉列表框中可以設(shè)置字符高度相對(duì)于本行基線(xiàn)的高度，然后單擊“確定”按鈕。圖7-2-9 “字符間距”選項(xiàng)卡第37頁(yè)，共154頁(yè)。第38頁(yè)文本的格式化設(shè)置標(biāo)題級(jí)標(biāo)題級(jí)可以用來(lái)設(shè)置不同的字體大小

30、，在網(wǎng)頁(yè)中可分為6級(jí)不同大小的標(biāo)題。1級(jí)標(biāo)題字體最大，6級(jí)標(biāo)題字體最小。各級(jí)標(biāo)題用來(lái)顯示不同層次的主題，以區(qū)分各個(gè)主題的層次關(guān)系。設(shè)置標(biāo)題級(jí)的方法為：選中需要設(shè)置的標(biāo)題，打開(kāi)“格式”工具欄上的“樣式”下拉列表框，如圖7- 2 -10（a）所示，選擇相應(yīng)的標(biāo)題。在 IE瀏覽器中瀏覽，顯示效果如圖 7- 2 - 10（b）所示。圖7-2-10標(biāo)題級(jí)設(shè)置 第38頁(yè)，共154頁(yè)。第39頁(yè)段落的格式化 段落是一種基于文本的布局格式，段落格式主要包括段落的縮進(jìn)、段落間距和段落的對(duì)齊方式。段落縮進(jìn)選中要設(shè)置縮進(jìn)的段落，選擇菜單“格式”、“段落”命令，彈出“段落”對(duì)話(huà)框，如圖7- 2 -11所示。在“縮進(jìn)”選

31、項(xiàng)區(qū)設(shè)置文本之前、文本之后、或者首行縮進(jìn)的值。設(shè)置完成后單擊“確定”按鈕。段落間距段落間距的設(shè)置也是美化網(wǎng)頁(yè)的一個(gè)重要手段，可以有效地控制文本與整個(gè)版面的層次。設(shè)置段落間距的方法為：選中要設(shè)置間距的段落，在圖7- 2 -11所示的“段落”對(duì)話(huà)框中，可以設(shè)置段前、段后、單字間距，也可以設(shè)置行距大?。▎伪缎芯唷?.5倍行距、雙倍行距），設(shè)置完成后單擊“確定”按鈕。段落對(duì)齊方式段落的對(duì)齊方式有5種：左對(duì)齊、右對(duì)齊、居中、兩端對(duì)齊和交互象形文字。默認(rèn)情況下使用的是兩端對(duì)齊方式。設(shè)置段落對(duì)齊的方法為：選中要設(shè)置對(duì)齊方式的段落，在圖7- 2 - 11所示的“段落”對(duì)話(huà)框中，在“對(duì)齊方式”下拉列表框中選擇對(duì)

32、齊方式，然后單擊“確定”按鈕。圖7-2-11“段落”對(duì)話(huà)框第39頁(yè)，共154頁(yè)。第40頁(yè)列表的使用 列表是網(wǎng)頁(yè)中組織數(shù)據(jù)的一種形式，可以使網(wǎng)頁(yè)內(nèi)容層次分明、重點(diǎn)突出。網(wǎng)頁(yè)制作中共可以使用5種列表：項(xiàng)目符號(hào)列表、編號(hào)列表、自定義列表、圖片列表、菜單列表和目錄列表。第40頁(yè)，共154頁(yè)。第41頁(yè)項(xiàng)目符號(hào)列表項(xiàng)目符號(hào)是在文本列表項(xiàng)目的前面用于強(qiáng)調(diào)視覺(jué)效果的各種符號(hào)。創(chuàng)建項(xiàng)目符號(hào)列表的具體操作步驟如下：選中要?jiǎng)?chuàng)建項(xiàng)目符號(hào)列表的段落或?qū)⒐鈽?biāo)定位在段落的開(kāi)始處。單擊“格式”工具欄的“樣式”下拉列表框，選擇“項(xiàng)目符號(hào)列表”選項(xiàng)即可。如果需要改變項(xiàng)目符號(hào)列表，可以選擇菜單“格式”、“項(xiàng)目符號(hào)和編號(hào)”命令，彈出

33、“列表屬性”對(duì)話(huà)框，選擇“無(wú)格式項(xiàng)目列表”選項(xiàng)卡，如圖7-2-12所示。選擇所需的項(xiàng)目列表，或單擊“樣式”進(jìn)行樣式修改。圖7-2-12“無(wú)格式項(xiàng)目列表”選項(xiàng)卡第41頁(yè)，共154頁(yè)。第42頁(yè)編號(hào)列表為已存在的文字建立編號(hào)列表。選中要?jiǎng)?chuàng)建編號(hào)的段落，單擊“格式”工具欄的“樣式”下拉列表框，選擇“編號(hào)列表”選項(xiàng)即可。新建編號(hào)列表。將光標(biāo)定位在建立列表的起始位置，單擊“格式”工具欄的“樣式”下拉列表框，選擇“編號(hào)列表”選項(xiàng)。窗口就會(huì)出現(xiàn)編號(hào)“ 1”，輸入列表內(nèi)容，保存后就可以預(yù)覽效果了。編號(hào)列表的編號(hào)主要有5種：阿拉伯?dāng)?shù)字、大寫(xiě)羅馬數(shù)字、大寫(xiě)英文字母、小寫(xiě)羅馬數(shù)字、小寫(xiě)英文字母，默認(rèn)是從1開(kāi)始。可以在

34、“列表屬性”對(duì)話(huà)框中的“編號(hào)”選項(xiàng)卡中修改。第42頁(yè)，共154頁(yè)。第43頁(yè)自定義列表自定義列表前面不需要任何列表符號(hào)，可以定義列表標(biāo)題和列表項(xiàng)。定義列表標(biāo)題。即定義一個(gè)列表項(xiàng)的標(biāo)題，一般只有一行。定義列表項(xiàng)。即定義每一個(gè)列表項(xiàng)的具體內(nèi)容，一般有多行，且左側(cè)縮進(jìn)。把光標(biāo)定位在網(wǎng)頁(yè)中要?jiǎng)?chuàng)建自定義列表的位置，在“樣式”下拉列表中選擇“定義的術(shù)語(yǔ)”選項(xiàng)，然后在空白處輸入列表標(biāo)題“學(xué)校簡(jiǎn)介”，按“Enter”另起一行。在新的一行輸入列表項(xiàng)的具體內(nèi)容，再次按“Enter”鍵新起一行。重復(fù)上面的操作，保存后就可以在瀏覽器瀏覽。第43頁(yè)，共154頁(yè)。第44頁(yè)嵌套列表當(dāng)顯示的內(nèi)容層次較多時(shí)，需要建立大綱式的列表

35、，即多級(jí)嵌套的編號(hào)列表、項(xiàng)目符號(hào)列表、定義列表等，或者幾種形式的混合。嵌套式列表的操作步驟：將光標(biāo)定位在網(wǎng)頁(yè)的起始位置，在“樣式”下拉列表中選擇“項(xiàng)目符號(hào)列表”，輸入章節(jié)建立項(xiàng)目符號(hào)列表，如圖7-2-13（a）所示。選中節(jié)次，連續(xù)兩次單擊“格式”工具欄的“增加縮進(jìn)量”按鈕，得到效果如圖7-2-13（b）所示。圖7-2-13嵌套列表顯示效果第44頁(yè)，共154頁(yè)。第45頁(yè)圖片列表 圖片列表和項(xiàng)目符號(hào)列表類(lèi)似，只是圖片列表是采用圖片作為列表符號(hào)。采用圖片列表的步驟是：將光標(biāo)定位在一組列表符號(hào)的任意位置，選擇菜單“格式”、“項(xiàng)目符號(hào)和編號(hào)”命令，彈出“列表屬性”對(duì)話(huà)框，選擇“圖片項(xiàng)目符號(hào)”選項(xiàng)卡。選定

36、“指定圖片”單選按鈕，單擊“瀏覽”選擇作為列表符號(hào)的圖片。第45頁(yè)，共154頁(yè)。第46頁(yè)邊框和底紋為了突出顯示某些內(nèi)容，可以為文本或段落設(shè)置邊框和底紋，可以分別設(shè)置也可以同時(shí)設(shè)置。操作步驟如下：選中要設(shè)置邊框和底紋的文本，選擇菜單“格式”、“邊框和底紋”命令，彈出“邊框和底紋”對(duì)話(huà)框。（1）設(shè)置邊框。選擇“邊框”選項(xiàng)卡，如圖7-2-14所示?！霸O(shè)置”選項(xiàng)中可以設(shè)置3種邊框方式：默認(rèn)、方框和自定義三種。選擇“邊框”，在“樣式”列表框中選擇邊框的線(xiàn)條樣式，設(shè)置顏色、線(xiàn)條寬度、襯距（文字與邊框的距離），單擊“確定”按鈕。取消邊框可以選擇“默認(rèn)”方式。（2）設(shè)置底紋。選擇“底紋”選項(xiàng)卡，在“填充”選項(xiàng)

37、區(qū)域中，“背景色”可以設(shè)置底紋顏色，“前景色”設(shè)置底紋文本顏色。在“圖案”選項(xiàng)區(qū)域中，可以選擇圖片作為背景。設(shè)置完成后，單擊“確定”按鈕。圖7-2-14“邊框”選項(xiàng)卡第46頁(yè)，共154頁(yè)。第47頁(yè)四、網(wǎng)頁(yè)中圖片的處理 圖片是網(wǎng)頁(yè)中很重要的組成元素，恰當(dāng)?shù)氖褂脠D片不但可以美化頁(yè)面，還可以達(dá)到文字無(wú)法表達(dá)的效果，更能清楚地表達(dá)細(xì)節(jié)內(nèi)容，傳遞更多的信息。第47頁(yè)，共154頁(yè)。第48頁(yè)圖片的類(lèi)型瀏覽器支持的常用網(wǎng)頁(yè)圖片主要有GIF、JPEG、PNG、BMP四種格式。使用時(shí)既要考慮顏色效果，也要考慮文件的大小。GIF格式圖片 GIF格式圖片的文件擴(kuò)展名是.gif，采用LIM無(wú)損壓縮技術(shù)，解壓縮很快。最多

38、可包含256種顏色，可用于包含少量顏色的圖片。GIF圖片文件小且瀏覽速度快，支持動(dòng)態(tài)效果。另外GIF圖片還可以使用透明背景，這樣圖片不會(huì)覆蓋頁(yè)面的背景顏色。第48頁(yè)，共154頁(yè)。第49頁(yè)圖片的類(lèi)型JPEG格式圖片 JPEG格式圖片的文件擴(kuò)展名是.jpg，可以顯示 1670萬(wàn)種顏色，適用于要求色彩豐富的圖片，如人物、風(fēng)景等?？梢酝ㄟ^(guò)更改圖片的質(zhì)量來(lái)控制文件的壓縮比例。設(shè)置的質(zhì)量越低，壓縮比例越高，文件越小，最高可以達(dá)到1：100的壓縮比。壓縮時(shí)丟失的只是人眼不太敏感的高頻信息，因此電腦屏幕顯示時(shí)不是很明顯。但JPEG格式不適合打印或制作印刷品。一般的家用數(shù)碼相機(jī)拍攝的照片采用JPEG格式存儲(chǔ)。P

39、NG格式圖片 PNG格式圖片的文件擴(kuò)展名是.png。有些瀏覽器不能直接顯示PNG格式的圖片，因此應(yīng)用較少。BMP格式圖片 BMP格式圖片的文件擴(kuò)展名是上.bmp。BMP格式是一種位圖格式，Windows系統(tǒng)圖片交換的事實(shí)標(biāo)準(zhǔn)。目前Windows平臺(tái)下運(yùn)行的任何圖片處理軟件都支持BMP格式。該格式顏色豐富，最多224種。非壓縮圖片模式，文件較大，因此網(wǎng)頁(yè)中使用較少。第49頁(yè)，共154頁(yè)。第50頁(yè)圖片的使用圖片主要用在背景圖片、網(wǎng)頁(yè)橫幅、公司徽標(biāo)、圖片列表、導(dǎo)航按鈕、水平線(xiàn)等情況。FrontPage 2003中主要可以使用來(lái)自文件、剪輯庫(kù)、掃描儀和數(shù)碼相機(jī)的圖片，也可插入藝術(shù)字、自選圖形等。插入來(lái)

40、自文件的圖片要先確定插入圖片位置，選擇菜單“插入”、“圖片”、“來(lái)自文件”命令，彈出“圖片”對(duì)話(huà)框。選擇要插入的文件，單擊“插入”按鈕即可。如果插入的圖片不是來(lái)自當(dāng)前站點(diǎn)，保存頁(yè)面時(shí)會(huì)彈出“保存嵌入式文件”對(duì)話(huà)框，如圖7-2-15所示。單擊“重命名”按鈕可以在該對(duì)話(huà)框內(nèi)為圖片重新命名；單擊“更改文件夾”按鈕可以改變圖片保存的位置：?jiǎn)螕簟皥D片文件類(lèi)型”按鈕可以改變圖片格式，按新的設(shè)定格式保存文件。圖7-2-15“保存嵌入式文件”對(duì)話(huà)框第50頁(yè)，共154頁(yè)。第51頁(yè)圖片的設(shè)置圖片設(shè)置主要包括環(huán)繞方式、圖片布局、圖片大小等?？梢赃x擇菜單“格式”、“屬性”命令，或者單擊右鍵，在彈出的快捷菜單中選擇“圖

41、片屬性”命令，在打開(kāi)的“圖片屬性”對(duì)話(huà)框中進(jìn)行設(shè)置，如圖7-2-16所示。圖片環(huán)繞方式網(wǎng)頁(yè)中圖片環(huán)繞方式有左環(huán)繞和右環(huán)繞兩種。左環(huán)繞是圖片在左邊，文字在右側(cè)環(huán)繞。右環(huán)繞是圖片在右邊，文字在左側(cè)環(huán)繞。也可以采用無(wú)環(huán)繞方式，圖片和文字分開(kāi)。圖片布局在“布局”選項(xiàng)區(qū)域中設(shè)置對(duì)齊方式、邊框粗細(xì)、水平間距、垂直間距。其中圖片與文本在網(wǎng)頁(yè)中的位置關(guān)系也就是對(duì)齊方式共有11種。圖片大小在“大小”選項(xiàng)區(qū)域中設(shè)置圖片的大小，在“寬度”和“高度”中可以輸入具體像素值，還可以設(shè)定相對(duì)原圖的百分比。也可以通過(guò)用鼠標(biāo)拖動(dòng)圖片控點(diǎn)的方式調(diào)整圖片大小。圖7-2-16“圖片屬性”對(duì)話(huà)框第51頁(yè)，共154頁(yè)。第52頁(yè)圖片的編輯

42、圖片的編輯除了使用Photoshop這樣的專(zhuān)用圖片處理工具外，還可以使用FrontPage 2003的“圖片”工具欄。主要包括裁剪圖片、旋轉(zhuǎn)或翻轉(zhuǎn)圖片、設(shè)置對(duì)比度和亮度等，可以使用“圖片”工具欄完成這些操作。第52頁(yè)，共154頁(yè)。第53頁(yè)圖片工具欄可以選擇菜單“視圖”、“工具欄”、“圖片”命令，就會(huì)出現(xiàn)“圖片”工具欄，如圖7-2-17所示。常用按鈕功能介紹如下：（1）“文本”按鈕。用于在GIF圖片上加入說(shuō)明性文字。（2）“自動(dòng)縮略圖”按鈕。將選中的圖片生成圖片的縮略圖，并在縮略圖上建立一個(gè)鏈接到該圖片的超鏈接。（3）“向左旋轉(zhuǎn)”按鈕。將圖片逆時(shí)針旋轉(zhuǎn)90”。（4）“向右旋轉(zhuǎn)”按鈕。將圖片順時(shí)針

43、旋轉(zhuǎn)90”。（5）“水平翻轉(zhuǎn)”按鈕。將圖片做左右對(duì)稱(chēng)的鏡像。圖7-2-17“圖片”工具欄第53頁(yè)，共154頁(yè)。第54頁(yè)圖片工具欄（6）“垂直翻轉(zhuǎn)”按鈕。將圖片做上下對(duì)稱(chēng)的鏡像。（7）“降低對(duì)比度”按鈕。減少圖片前景和背景的對(duì)比度。（8）“增加對(duì)比度”按鈕。增加圖片前景和背景的對(duì)比度。（9）“增加亮度”按鈕。增加圖片的亮度。（10）“降低亮度”按鈕。降低圖片的亮度。（11）“裁剪”按鈕。將光標(biāo)定位在圖片上，可以拉出一個(gè)任意大小的虛線(xiàn)框，一框內(nèi)的保留，框外的裁掉。第54頁(yè)，共154頁(yè)。第55頁(yè)圖片工具欄（12）“設(shè)置透明色”按鈕。將GIF格式的圖片設(shè)置為透明，這樣就不會(huì)覆蓋掉頁(yè)面背景。（13）“顏

44、色”按鈕。有“自動(dòng)”、“灰度”、“黑白”、“沖蝕”選項(xiàng)，可以達(dá)到特殊效果。（14）“凹凸效果”按鈕。將圖片邊界凹凸化，達(dá)到3D效果，形成立體圖片。（15）“選擇”按鈕。用于網(wǎng)頁(yè)中圖片的選擇。（16）“長(zhǎng)方形熱點(diǎn)”按鈕。在圖片中定義長(zhǎng)方形熱點(diǎn)，在該熱點(diǎn)上可以創(chuàng)建超鏈接。（17）“圓形熱點(diǎn)”按鈕。在圖片中定義圓熱點(diǎn)，在熱點(diǎn)上可以創(chuàng)建超鏈接。（18）“多邊形熱點(diǎn)”按鈕。在圖片中定義多邊形熱點(diǎn)，在熱點(diǎn)上可以創(chuàng)建超鏈接。（19）“還原”按鈕。撤銷(xiāo)對(duì)圖片的各種編輯操作。第55頁(yè)，共154頁(yè)。第56頁(yè)圖片的編輯（1）裁剪圖片選中圖片，單擊“圖片”工具欄的“裁剪”按鈕，圖片上就會(huì)出現(xiàn)一個(gè)方框，拖動(dòng)方框上的控點(diǎn)

45、調(diào)整方框大小。調(diào)整好后，再次單擊“裁剪”按鈕或者按“Enter”鍵即可完成裁剪。（2）設(shè)置圖片透明度為GIF格式的圖片設(shè)置透明度可以避免圖片遮擋頁(yè)面背景。非GIF格式的圖片F(xiàn)rontPage會(huì)自動(dòng)轉(zhuǎn)換為GIF格式。選中圖片，單擊“圖片”工具欄的“設(shè)置透明色”按鈕，單擊圖片的任意位置即可。（3）在圖片中編輯文字可以為GIF圖片添加文字，非GIF格式的圖片F(xiàn)rontPage會(huì)自動(dòng)轉(zhuǎn)換為GIF格式。選中圖片，單擊“圖片”工具欄的“文本”按鈕，在圖片上出現(xiàn)的輸入框中輸入文字，也可以設(shè)置文字格式，移動(dòng)輸入框的位置。第56頁(yè)，共154頁(yè)。第57頁(yè)五、網(wǎng)頁(yè)中表格的使用表格的創(chuàng)建在網(wǎng)頁(yè)中表格的主要作用是組織數(shù)

46、據(jù)和頁(yè)面布局。表格主要由6部分組成：標(biāo)題、表頭、行、列、單元格、邊框。自動(dòng)創(chuàng)建表格 選定插入點(diǎn)，選擇菜單“表格”、“插入”、“表格”命令，彈出“插入表格”對(duì)話(huà)框，如圖7-2-18所示。相應(yīng)設(shè)置完成后單擊“確定”按鈕。手工繪制表格 手工繪制表格方法與 Word 2003的類(lèi)似。圖7-2-18“插入表格”對(duì)話(huà)框第57頁(yè)，共154頁(yè)。第58頁(yè)表格的編輯對(duì)表格的編輯主要包括表格大小的調(diào)整、單元格的調(diào)整、單元格的合并和拆分等。1選定表格在對(duì)表格進(jìn)行編輯之前，首先要選定表格、單元格、行或列等。2單元格對(duì)齊方式選中單元格，選擇菜單“表格”、“表格屬性”、“單元格”命令，彈出“單元格屬性”對(duì)話(huà)框，如圖7-2-

47、19所示。3插入和刪除行、列及單元格4調(diào)整表格及單元格大小圖7-2-19“單元格屬性”對(duì)話(huà)框第58頁(yè)，共154頁(yè)。第59頁(yè)六、 建立超鏈接超鏈接的概念1URL URL（Uniform Resource Locator）即統(tǒng)一資源定位符，由資源類(lèi)型、主機(jī)、端口、目錄和文件名組成。需要通過(guò)URL才能訪問(wèn)Internet上的資源。這些資源可以是一個(gè)頁(yè)面文件、一個(gè)圖片文件或者一個(gè)站點(diǎn)等。2超鏈接超鏈接是網(wǎng)頁(yè)的核心，通過(guò)超鏈接可以實(shí)現(xiàn)頁(yè)面到頁(yè)面、頁(yè)面到圖片、頁(yè)面到站點(diǎn)的跳轉(zhuǎn)。超鏈接的載體可以是文字、整個(gè)圖片以及圖片上的熱點(diǎn)。鏈接跳轉(zhuǎn)的目的地可以是頁(yè)面、書(shū)簽、圖片、站點(diǎn)以及電子郵件、視頻、音頻以及普通文件

48、。第59頁(yè)，共154頁(yè)。第60頁(yè)創(chuàng)建超鏈接1在文字上創(chuàng)建超鏈接常見(jiàn)的在文字上創(chuàng)建超鏈接是指超鏈接的載體是文字，通過(guò)單擊文字上的鏈接跳轉(zhuǎn)到URL指定的資源。方法如下：選定要?jiǎng)?chuàng)建超鏈接的文字，選擇菜單“插入”、“超鏈接”命令，或者單擊“常用”工具欄上的“插入超鏈接”按鈕，彈出“插入超鏈接”對(duì)話(huà)框。如圖7-2-20所示。選擇要鏈接的目標(biāo)地址，如果目標(biāo)地址是待創(chuàng)建的文件，可以在“地址”輸入框中輸入一個(gè)文件名或URL地址，然后單擊“確定”按鈕。圖7-2-20“插入超鏈接”對(duì)話(huà)框第60頁(yè)，共154頁(yè)。第61頁(yè)創(chuàng)建超鏈接2. 在圖片上創(chuàng)建超鏈接選定要?jiǎng)?chuàng)建超鏈接的圖片，選擇菜單“插入”、“超鏈接”命令創(chuàng)建。3

49、在圖片熱點(diǎn)上創(chuàng)建超鏈接選定要?jiǎng)?chuàng)建熱點(diǎn)的圖片，在“圖片”工具欄中，熱點(diǎn)分別可以通過(guò)“長(zhǎng)方形熱點(diǎn)”按鈕、“圓形熱點(diǎn)”按鈕和“多邊形熱點(diǎn)”按鈕創(chuàng)建。單擊其中一個(gè)按鈕，把鼠定位在圖片中某一點(diǎn)，拖動(dòng)到合適位置，松開(kāi)鼠標(biāo)，則會(huì)彈出“插入超鏈接”對(duì)話(huà)框，選擇或輸入鏈接的目標(biāo)地址，然后單擊“確定”按鈕即可。4在電子郵件地址創(chuàng)建超鏈接選擇菜單“插入”、“超鏈接”命令，彈出“插入超鏈接”對(duì)話(huà)框，單擊“電子郵件地址”選項(xiàng)，如圖7-2-21所示。圖7-2-21創(chuàng)建電子郵件超鏈接第61頁(yè)，共154頁(yè)。第62頁(yè)創(chuàng)建超鏈接5在書(shū)簽上創(chuàng)建超鏈接前面所創(chuàng)建的超鏈接都是鏈接到外部文件，有時(shí)候當(dāng)一個(gè)網(wǎng)頁(yè)頁(yè)面很長(zhǎng)的時(shí)候，為了閱讀方便

50、，可以采用書(shū)簽的方式鏈接到目標(biāo)網(wǎng)頁(yè)的特定位置。（1）定義書(shū)簽。書(shū)簽是頁(yè)面的定位標(biāo)記。選擇創(chuàng)建書(shū)簽的頁(yè)面位置，選擇菜單“插入”、“書(shū)簽”命令，彈出“書(shū)簽”對(duì)話(huà)框，如圖7-2-22所示。在“書(shū)簽”輸入框中輸入書(shū)簽名稱(chēng)，然后單擊“確定”按鈕。（2）創(chuàng)建書(shū)簽超鏈接。定義完書(shū)簽后，便可以指定超鏈接。在“插入超鏈接”對(duì)話(huà)框中單擊“書(shū)簽”按鈕，彈出“在文檔中選擇位置”對(duì)話(huà)框。如圖7-2-23所示。該對(duì)話(huà)框中會(huì)顯示先前定義的書(shū)簽，選定后單擊“確定”按鈕即可。圖7-2-22“書(shū)簽”對(duì)話(huà)框圖7-2-23“在文檔中選擇位置”對(duì)話(huà)框第62頁(yè)，共154頁(yè)。第63頁(yè)修改超鏈接修改已經(jīng)創(chuàng)建的超鏈接，可以選定超鏈接。選擇菜單

51、“插入”|“超鏈接”命令。在彈出的“編輯超鏈接”對(duì)話(huà)框中進(jìn)行修改。第63頁(yè)，共154頁(yè)。第64頁(yè)第三節(jié) FrontPage2003的高級(jí)應(yīng)用7.3.1 嵌入音頻、視頻及Flash影片 7.3.2 樣式表7.3.3 表單的初步認(rèn)識(shí)7.3.4 框架網(wǎng)頁(yè)的使用7.3.5 組件的初步認(rèn)識(shí)第64頁(yè)，共154頁(yè)。第65頁(yè)一、嵌入音頻、視頻及Flash影片一、嵌入音頻、視頻及Flash影片1網(wǎng)頁(yè)中的音頻（1）音頻的格式常用音頻文件的格式有WAV、MIDI、Au、Real Audio、Mp3等，可以使用多媒體工具軟件實(shí)現(xiàn)各種格式的相互轉(zhuǎn)換。 WAV格式。文件擴(kuò)展名是.wav，可以產(chǎn)生高質(zhì)量的音頻效果，但文件較

52、大，是計(jì)算機(jī)上常見(jiàn)的格式之一，最早用于Windows系統(tǒng)。 MIDI格式。文件擴(kuò)展名是.mid。MIDI是 Music Instrument Digital Interface（樂(lè)器數(shù)字化接口）的縮寫(xiě)。MIDI格式的音頻文件包含一系列用于播放電子合成器的指令，文件較小，適合在網(wǎng)絡(luò)上傳輸。 Au格式。文件擴(kuò)展名是.au。Au文件也是網(wǎng)絡(luò)上流行的音頻文件格式之一，最初用于Sun公司的UNIX系統(tǒng)。音頻效果不是很好，但可以用于幾乎所有的操作系統(tǒng)。 Real Audio格式。文件擴(kuò)展名是.ra，是專(zhuān)門(mén)針對(duì)網(wǎng)絡(luò)傳輸設(shè)計(jì)的，具有較高的壓縮和較好的容錯(cuò)性。 MP3格式。文件擴(kuò)展名是.mp3。是最近十分流行的

53、音樂(lè)文件格式，壓縮比高、音質(zhì)好，幾乎可以和CD音質(zhì)相媲美。第65頁(yè)，共154頁(yè)。第66頁(yè)網(wǎng)頁(yè)中嵌入音頻選定插入位置，選擇菜單“插入”、“Web組件”命令，彈出“插入Web組件”對(duì)話(huà)框，如圖7-3-1所示，在左側(cè)的“組件類(lèi)型”中選擇“高級(jí)控件”，在右側(cè)的“選擇一個(gè)控件”中選擇“插件”。單擊“完成”按鈕，彈出“插件屬性”對(duì)話(huà)框，如圖7-3-2所示。在“數(shù)據(jù)源”輸入框中輸入音頻文件名，在“大小”中設(shè)置播放器的寬度和高度，設(shè)置完成后單擊“確定”按鈕。圖7-3-1“插入Web組件”對(duì)話(huà)框 圖7-3-2“插件屬性”對(duì)話(huà)框第66頁(yè)，共154頁(yè)。第67頁(yè)網(wǎng)頁(yè)中的視頻和Flash（l）視頻的格式常用的視頻文件的

54、格式有 AVI、MPEG、RealVideo等。 AVI格式。文件擴(kuò)展名是.avi。最初用于Windows系統(tǒng)，是最流行的視頻格式之一。 MPEG格式。文件擴(kuò)展名是.mpeg、.mpg、.mpe。是視頻文件的工業(yè)標(biāo)準(zhǔn)，提供了先進(jìn)的壓縮技術(shù)和播放質(zhì)量，是網(wǎng)絡(luò)中最常見(jiàn)的視頻格式之一。 RealVideo格式。文件擴(kuò)展名是.rm，具有較大的壓縮比和回放質(zhì)量，適合做網(wǎng)上直播系統(tǒng)。（2）網(wǎng)頁(yè)中嵌入視頻、Flash影片選定插入位置，選擇菜單“插入”、“圖片”、“視頻”或者“Flash影片”命令。在彈出的“選擇文件”對(duì)話(huà)框中選擇需要嵌入的視頻文件或者Flash影片文件。然后單擊“打開(kāi)”或“插入”按鈕。第67

55、頁(yè)，共154頁(yè)。第68頁(yè)二、樣式表1關(guān)于樣式表樣式是用名字標(biāo)識(shí)的格式的集合，每個(gè)樣式均有一個(gè)名字，一個(gè)樣式中可以定義多種格式，如字體、字號(hào)等。使用樣式可以快速設(shè)置一組頁(yè)面元素的格式，也可以將樣式應(yīng)用到整個(gè)網(wǎng)站的頁(yè)面中。在網(wǎng)頁(yè)制作中，會(huì)把多種樣式定義保存在一個(gè)文件中。樣式表主要有三種：內(nèi)置樣式、用戶(hù)定義樣式和級(jí)聯(lián)樣式，其中級(jí)聯(lián)樣式表（C S S )最常用?？梢栽谡麄€(gè)Web站點(diǎn)中使用統(tǒng)一的格式。常用的主要有內(nèi)嵌式樣式表和外部級(jí)聯(lián)樣式表兩種。（1）內(nèi)嵌式樣式表樣式代碼是保存在HTML頁(yè)面文檔的HEAD標(biāo)記之間的STYLE代碼集，可以用于當(dāng)前的單個(gè)頁(yè)面中。（2）外部級(jí)聯(lián)樣式表外部級(jí)聯(lián)樣式表可以應(yīng)用到多

56、個(gè)網(wǎng)頁(yè)中，使整個(gè)網(wǎng)站應(yīng)用相同的樣式。若在外部級(jí)聯(lián)樣式表中修改了某種樣式，整個(gè)站點(diǎn)的所有網(wǎng)頁(yè)都可隨之更改。外部級(jí)聯(lián)樣式表使用.css為文件擴(kuò)展名。第68頁(yè)，共154頁(yè)。第69頁(yè)創(chuàng)建樣式表選擇菜單“文件”、“新建”命令，打開(kāi)“新建”任務(wù)窗格。在“新建網(wǎng)頁(yè)”選擇區(qū)域中單擊“其他網(wǎng)頁(yè)模板”，彈出“網(wǎng)頁(yè)模板”對(duì)話(huà)框，選擇“樣式表”選項(xiàng)卡，如圖7-3-3所示。FrontPage 2003除了普通樣式表外提供了 12種樣式表模板，我們可以選擇其中一個(gè)模板，如“公路”，然后單擊“確定”按鈕，打開(kāi)了用該樣式表模板建立的新文件，如圖7-3-4所示。可以通過(guò)單擊“樣式”工具欄上的“樣式”按鈕，打開(kāi)“樣式”對(duì)話(huà)框，進(jìn)

57、行樣式的新建、修改和刪除操作，如圖7-3-5所示。圖7-3-3“網(wǎng)頁(yè)模板”對(duì)話(huà)框 圖7-3-4樣式表代碼窗口 圖7-3-5“樣式”對(duì)話(huà)框第69頁(yè)，共154頁(yè)。第70頁(yè)應(yīng)用樣式表樣式表創(chuàng)建并保存后，就可以應(yīng)用到網(wǎng)頁(yè)中。操作步驟如下：選擇菜單“格式”、“樣式表鏈接”命令，彈出“鏈接樣式表”對(duì)話(huà)框，如圖7-3-6所示?？梢赃x擇“所有網(wǎng)頁(yè)”和“所選的網(wǎng)頁(yè)”選項(xiàng)確定樣式表的應(yīng)用范圍。單擊“添加”按鈕，選擇想要應(yīng)用的樣式表文件，然后單擊“確定”按鈕返回。圖7-3-6“鏈接樣式表”對(duì)話(huà)框第70頁(yè)，共154頁(yè)。第71頁(yè)三、表單的初步認(rèn)識(shí)表單是網(wǎng)頁(yè)中不可缺少的組成元素，主要用來(lái)收集客戶(hù)端輸入的信息，是用戶(hù)和We

58、b應(yīng)用程序、Web數(shù)據(jù)庫(kù)進(jìn)行交互的界面。通過(guò)表單可以完成用戶(hù)和服務(wù)器之間的信息交換，在網(wǎng)絡(luò)的信息交流中起著非常重要的作用。表單其實(shí)就是個(gè)容器，表單可以容納多種表單元素。常用的表單元素有：表單、列表表單、列表域、表單Web控件、文本框、文本區(qū)、文件上載、復(fù)選框、選項(xiàng)按鈕、分組框、下拉框、按鈕、圖片、標(biāo)簽等。第71頁(yè)，共154頁(yè)。第72頁(yè)表單的初步認(rèn)識(shí)（1）文本框。長(zhǎng)條形的輸入?yún)^(qū)，在其中可以輸入少量信息。（2）文本區(qū)。文本區(qū)和文本框都可以輸入信息，文本區(qū)可以一次輸入大量的信息。（3）復(fù)選框。同時(shí)可以選擇多個(gè)選項(xiàng)，可以應(yīng)用在考試時(shí)的多選題。（4）單選按鈕。每次只能選擇一個(gè)選項(xiàng)，可以應(yīng)用在考試時(shí)的單選

59、題。（5）下拉框。由單行空白區(qū)域和下拉按鈕組成，單擊該下拉按鈕，就會(huì)彈出下拉列表項(xiàng)供選擇。插入表單元素的方法很簡(jiǎn)單，選擇菜單“插入”、“表單”命令，在彈出的子菜單中選擇相應(yīng)的表單元素即可，如圖7-3-7所示。圖7-3-7表單元素子菜單第72頁(yè)，共154頁(yè)。 四、框架網(wǎng)頁(yè)的使用利用框架網(wǎng)頁(yè)，可以在同一個(gè)瀏覽器窗口查看兩個(gè)或者多個(gè)窗口的內(nèi)容，每個(gè)窗口中顯示不同的網(wǎng)頁(yè)內(nèi)容。如圖7-3-8所示的便是一個(gè)典型的框架網(wǎng)頁(yè)，瀏覽器窗口中顯示了個(gè)頁(yè)面，分別是導(dǎo)航條、左側(cè)的項(xiàng)目介紹和右側(cè)的主界面；在左側(cè)窗口中單擊某一個(gè)超鏈接，會(huì)在右側(cè)主窗口中打開(kāi)超鏈接所對(duì)應(yīng)的網(wǎng)頁(yè)。第73頁(yè)圖7-3-8 典型框架網(wǎng)頁(yè)第73頁(yè)，共

60、154頁(yè)。新建框架網(wǎng)頁(yè)依次選擇“視圖任務(wù)窗格”菜單命令，使窗口右側(cè)顯示“新建網(wǎng)頁(yè)或網(wǎng)站”任務(wù)窗格，在窗格中選擇“其他網(wǎng)頁(yè)摸板”命令，會(huì)出現(xiàn)如圖7-3-9所示“網(wǎng)頁(yè)模板”對(duì)話(huà)框。在圖7-3-9中選擇“框架網(wǎng)頁(yè)”標(biāo)簽，并選擇合適的框架網(wǎng)頁(yè)類(lèi)型，單擊“確定”按鈕，即可新建立一個(gè)框架網(wǎng)頁(yè)，如圖7-3-10所示。在框架網(wǎng)頁(yè)中單擊“設(shè)置初始網(wǎng)頁(yè)”按鈕，可以在出現(xiàn)的“插入超鏈接”對(duì)話(huà)框中找到需要的該框架內(nèi)顯示的網(wǎng)頁(yè)；單擊“新建網(wǎng)頁(yè)”按鈕，可以在該框架內(nèi)顯示一個(gè)新建網(wǎng)頁(yè)，并在該網(wǎng)頁(yè)上進(jìn)行編輯。第74頁(yè)圖7-3-9“網(wǎng)頁(yè)模板”對(duì)話(huà)框圖7-3-10 新建框架網(wǎng)頁(yè)第74頁(yè)，共154頁(yè)。保存框架網(wǎng)頁(yè)當(dāng)框架網(wǎng)頁(yè)的各個(gè)部