kj7第7章-網(wǎng)頁(yè)制作軟件介紹ppt課件(全)_第1頁(yè)
kj7第7章-網(wǎng)頁(yè)制作軟件介紹ppt課件(全)_第2頁(yè)
kj7第7章-網(wǎng)頁(yè)制作軟件介紹ppt課件(全)_第3頁(yè)
kj7第7章-網(wǎng)頁(yè)制作軟件介紹ppt課件(全)_第4頁(yè)
kj7第7章-網(wǎng)頁(yè)制作軟件介紹ppt課件(全)_第5頁(yè)
已閱讀5頁(yè)，還剩149頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第1頁(yè)第7章網(wǎng)頁(yè)制作軟件介紹本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁(yè)本章概述

Internet上豐富的信息資源大多是通過(guò)網(wǎng)頁(yè)傳遞的，網(wǎng)頁(yè)是WWW網(wǎng)的基本文檔之一，網(wǎng)頁(yè)用HTML（超文本標(biāo)記語(yǔ)言）書(shū)寫，一個(gè)網(wǎng)頁(yè)包含許多不同類型的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í)，大都采用一些專門的網(wǎng)頁(yè)制作工具，如FrontPage編輯器、Dreamweaver編輯器等，它們將網(wǎng)頁(yè)界面自動(dòng)構(gòu)建成對(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等制作工具。第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è)的制作工具第4頁(yè)主要內(nèi)容7.1HTML語(yǔ)言簡(jiǎn)介7.2FrontPage2003的使用7.3FrontPage2003的高級(jí)應(yīng)用7.4

Dreamweaver8.0的使用7.5網(wǎng)頁(yè)開(kāi)發(fā)輔助技術(shù)7.6動(dòng)態(tài)交互網(wǎng)頁(yè)的制作工具7.7本章小結(jié)7.1

HTML語(yǔ)言簡(jiǎn)介超文本標(biāo)記語(yǔ)言HTML

HTML標(biāo)記語(yǔ)言的基本結(jié)構(gòu)幾個(gè)常用的HTML標(biāo)記第5頁(yè)第6頁(yè)

HTML（HyperTextMarkupLanguage）是超文本標(biāo)記語(yǔ)言。同所有的編程語(yǔ)言一樣，HTML語(yǔ)言也有一套自己的符號(hào)和語(yǔ)法約定。但它又不同于一般的編程語(yǔ)言，它只是一些可以由瀏覽器加以解釋，并具有命令標(biāo)記性質(zhì)的文本。一、超文本標(biāo)記語(yǔ)言HTML第7頁(yè)例如在瀏覽器IE中顯示的是一個(gè)簡(jiǎn)單的主頁(yè)（如圖7-1-1所示）。該網(wǎng)頁(yè)的文本內(nèi)容如下：

<html><head><title>我的第一個(gè)homepage，歡迎光臨！</title></head><body><h1>您的到來(lái)為本站增輝！</h1><br><center><h2>本站全體同仁歡迎您！</h2><br><u><h3>蜜蜂之家</h3></u></center></body></html>圖7-1-1一個(gè)簡(jiǎn)單的主頁(yè)超文本標(biāo)記語(yǔ)言HTML第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)容，包含文字、圖片、背景色、表格、表單等幾乎所有關(guān)于網(wǎng)頁(yè)的功能和效果的展示。

表7-1-1HTML文件構(gòu)成

第9頁(yè)名稱描述文件開(kāi)始<html>頭部

<head>

<！-頭部開(kāi)始-><title>標(biāo)題名

</title>

<！-HTML文件標(biāo)題->…其他頭部?jī)?nèi)容定義標(biāo)記…</head>

<！-頭部結(jié)束->主體<body>

<！-主體開(kāi)始->…主頁(yè)內(nèi)容（文本、圖像等）…</body>

<！-主體結(jié)束->文件結(jié)束</html>

<！-HTML文件內(nèi)容結(jié)束->HTML標(biāo)記語(yǔ)言的基本結(jié)構(gòu)HTML文件由標(biāo)記和文本組成，HTML用于描述功能的符號(hào)稱為“標(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è)“/”。比如下面兩行：<html></html>它們告訴瀏覽器，這是Homepage的開(kāi)始(<html>)以及結(jié)束(</html>)。第10頁(yè)HTML標(biāo)記語(yǔ)言的基本結(jié)構(gòu)第11頁(yè)三、幾個(gè)常用的HTML標(biāo)記1．<html>…</html>

作用：表示超文本文檔的開(kāi)頭及結(jié)束。

2．<head>…</head>

作用：一些有關(guān)文檔的定義、說(shuō)明和描述等標(biāo)記包含在其中。

3．<title>…</title>

作用：其中包含的內(nèi)容出現(xiàn)在瀏覽器窗口的標(biāo)題欄上，作為該主頁(yè)的標(biāo)題。

4．<body>…</body>

作用：要表達(dá)的正文信息包含在其中。說(shuō)明：以上4個(gè)標(biāo)記是一個(gè)完整的Homepage所必不可少的。

5．<hn>…</hn>

作用：其中n取值l~6，表示由大到小的6種標(biāo)題文字。第12頁(yè)6．<br>

作用：強(qiáng)行換行。在HTML文本中，所有包含的回車符和空格都被忽略，當(dāng)一行的內(nèi)容還不滿屏幕的寬度時(shí)，下一行內(nèi)容會(huì)自動(dòng)接上，因此在需換行時(shí)必須使用該標(biāo)記。

7．格式：<font>……</font>

作用：用于設(shè)定字體的大小和所用的字體，其中包含兩個(gè)屬性：屬性size：指定字體的大小，值為l～7。屬性face：用于指定不同的字體。

8．格式：<img>

作用：將圖像文件嵌入到Homepage中。其中包含3個(gè)屬性：Src（圖像來(lái)源）、Width（圖像寬度）和Height（圖像高度）

9．格式：<center>……</center>

作用：將文本的內(nèi)容居中。

10．格式：<u>……</u>

作用：在其間包含的文本內(nèi)容上加下劃線。當(dāng)然，HTML的標(biāo)記還有很多，對(duì)于初學(xué)者來(lái)說(shuō)比較難記。不過(guò)我們可以使用FrontPage2003來(lái)制作圖文并茂的Homepage。幾個(gè)常用的HTML標(biāo)記第13頁(yè)第二節(jié)FrontPage2003的使用

FrontPage2003概述7.2.2創(chuàng)建站點(diǎn)和網(wǎng)頁(yè)操作7.2.3網(wǎng)頁(yè)中的文本編輯7.2.4網(wǎng)頁(yè)中圖片的處理網(wǎng)頁(yè)中表格的使用建立超鏈接第14頁(yè)一、FrontPage2003概述FrontPage2003是Microsoft公司最新推出的網(wǎng)站制作軟件，是Office系列辦公軟件中的一個(gè)。FrontPage2003的新特性FrontPage2003集中了所有Web設(shè)計(jì)功能，并可以查看整個(gè)網(wǎng)絡(luò)全景，增加了布局表格和單元格、圖像描摹?？梢允褂脛?dòng)態(tài)Web模板、網(wǎng)頁(yè)標(biāo)尺和布局網(wǎng)格。（1）自定義例覽器分辨率在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，可實(shí)時(shí)調(diào)節(jié)當(dāng)前頁(yè)面在客戶端顯示的分辨率，以便預(yù)覽當(dāng)前效果。（2）描摹圖像大家在學(xué)習(xí)書(shū)法的時(shí)候，都接觸過(guò)臨摹吧，描摹圖像的功用與其類似，就是通過(guò)創(chuàng)建一個(gè)圖像（一般為網(wǎng)頁(yè)的效果圖）為參照物，以便于網(wǎng)頁(yè)的設(shè)計(jì)制作。選擇菜單欄上的“視圖”、“描摹圖像”、“設(shè)置”命令，在彈出的對(duì)話框中，選擇指定圖像，再設(shè)置其坐標(biāo)（即在設(shè)計(jì)頁(yè)面上顯示的位置）。最后，設(shè)置透明度，再單擊“確認(rèn)”按鈕即可。第15頁(yè)（3）層功能層在網(wǎng)頁(yè)制作中是不可缺少的，F(xiàn)rontPage2003可以像Dreamweaver那樣使用層。通過(guò)層可以將內(nèi)容重疊、交叉擺放。（4）行為的應(yīng)用行為是事件和由該事件觸發(fā)的動(dòng)作的組合。行為代碼是客戶端的Javascript代碼，因此它無(wú)需服務(wù)器的支持就可觸發(fā)事件。行為一直是Dreamweaver的強(qiáng)項(xiàng)，而FrontPage2003現(xiàn)在也有了這個(gè)功能。選擇菜單“格式”、“行為”命令，查看界面右側(cè)的“行為”窗格，單擊“插入”向下箭頭按鈕，在彈出的菜單中可選擇播放聲音、彈出消息、調(diào)用腳本及彈出菜單等事件。在選擇指定的插入對(duì)象后，將彈出相應(yīng)的設(shè)置對(duì)話框，在其中按需操作。所有添加的行為事件，均會(huì)顯示在列表中。FrontPage2003新特性第16頁(yè)（5）用網(wǎng)頁(yè)重定向在FrontPage2003中，選擇菜單“工具”、“中文簡(jiǎn)繁轉(zhuǎn)換”、“插入重定向代碼”命令，在彈出的對(duì)話框中，設(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ì)話框中設(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)我們選擇一種合適的布局應(yīng)用于當(dāng)前頁(yè)面上后，可隨時(shí)在設(shè)計(jì)視圖中按需自行調(diào)節(jié)其布局樣式。FrontPage2003新特性第17頁(yè)FrontPage2003的啟動(dòng)與退出的方法和Word2003類似。FrontPage2003的啟動(dòng)雙擊Windows桌面上的MicrosoftFrontPage2003快捷方式圖標(biāo)，選擇“開(kāi)始”、“所有程序”、“Microsoftoffice”、“MicrosoftofficeFrontPape2003”菜單命令都可以啟動(dòng)FrontPage2003。FrontPage2003的啟動(dòng)第18頁(yè)

FrontPage2003的退出（1）單擊FrontPage2003窗口中的“關(guān)閉”按鈕。（2）選擇菜單“文件”、“退出”命令。（3）按ALT十F4。（4）單擊窗口中的FrontPage2003控制圖標(biāo)，打開(kāi)窗口控制菜單，選擇“關(guān)閉”命令。（5）雙擊窗口中的FrontPage2003控制圖標(biāo)。FrontPage2003的退出第19頁(yè)FrontPage2003啟動(dòng)后進(jìn)入如圖7-2-1所示的工作界面。在FrontPage2003中提供了7種視圖模式和4種網(wǎng)頁(yè)視圖方式。FrontPape2003提供了網(wǎng)頁(yè)視圖、文件夾視圖、遠(yuǎn)程網(wǎng)站視圖、報(bào)表視圖、導(dǎo)航視圖、超鏈接視圖和任務(wù)視圖7種視圖模式，利用這些視圖可以完成站點(diǎn)的創(chuàng)建、管理、發(fā)布等任務(wù)。視圖切換可以選擇菜單“視圖”，執(zhí)行相應(yīng)的命令，也可以使用視圖模式標(biāo)簽進(jìn)行切換。圖7-2-1FrontPage2003窗口FrontPage2003的工作界面第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)容。可以在文件夾內(nèi)容上單擊右鍵直接對(duì)其進(jìn)行刪除、復(fù)制、重命名、移動(dòng)、打開(kāi)等操作。FrontPage2003視圖第21頁(yè)（3）遠(yuǎn)程網(wǎng)站視圖該視圖是FrontPape2003的新特性之一，主要功能是向互聯(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è)。FrontPage2003視圖第22頁(yè)（6）超鏈接視圖超鏈接視圖可以將網(wǎng)站中的超鏈接的狀態(tài)顯示在一個(gè)列表中，該列表中包括內(nèi)部鏈接和外部鏈接。圖中帶有加號(hào)的超鏈接表示該鏈接還鏈接其他站點(diǎn)，單擊加號(hào)就可以打開(kāi)它所包括的鏈接。（7）任務(wù)視圖任務(wù)視圖主要用來(lái)記錄和分配任務(wù)，包括已完成任務(wù)和尚未完成任務(wù)，主要信息包括狀態(tài)、任務(wù)名稱、分配對(duì)象、優(yōu)先級(jí)等信息。任務(wù)視圖用于同站項(xiàng)目的管理和任務(wù)的分配?？梢赃x擇菜單“編輯”、“任務(wù)”命令，執(zhí)行添加任務(wù)、編輯任務(wù)、標(biāo)記完成等操作。FrontPage2003視圖第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ì)視圖。可以在該視圖中設(shè)計(jì)和編輯網(wǎng)頁(yè)，以“所見(jiàn)即所得”的工作方式實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)和編輯。（2）代碼視圖。網(wǎng)頁(yè)文件其實(shí)是HTML標(biāo)記語(yǔ)言編寫的文本文件，可以采用代碼視圖顯示和編輯網(wǎng)頁(yè)中的HTML標(biāo)記代碼。（3）拆分視圖。拆分視圖可以同時(shí)訪問(wèn)代碼視圖和設(shè)計(jì)視圖。該模式將工作窗口分成兩部分：上面窗口是HTML標(biāo)記代碼，下面窗口是網(wǎng)頁(yè)的編輯畫面。（4）預(yù)覽視圖。通過(guò)該視圖可以在網(wǎng)頁(yè)制作過(guò)程中隨時(shí)查看網(wǎng)頁(yè)的顯示效果，可以看到和瀏覽器中一樣的顯示效果。FrontPage2003視圖第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)建站點(diǎn)。FrontPage2003中的向?qū)Ш湍０宸譃閮深悾阂活愂蔷W(wǎng)頁(yè)向?qū)c模板，包括常規(guī)、框架網(wǎng)頁(yè)和樣式表3種；另一類是網(wǎng)站向?qū)Ш湍０?。?5頁(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è)和使用網(wǎng)頁(yè)模板新建網(wǎng)頁(yè)。選擇菜單“文件”、“新建”命令，打開(kāi)“新建”任務(wù)窗格，如圖7-2-2所示。圖7-2-2“新建”任務(wù)窗格創(chuàng)建站點(diǎn)和網(wǎng)頁(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ì)話框。選擇所需應(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)行編輯和修改。使用網(wǎng)頁(yè)模板新建網(wǎng)頁(yè)。該選項(xiàng)是根據(jù)FrontPage2003提供的網(wǎng)頁(yè)模板來(lái)新建網(wǎng)頁(yè)。在“新建網(wǎng)頁(yè)”選擇區(qū)域中單擊“其他網(wǎng)頁(yè)模板”，打開(kāi)“網(wǎng)頁(yè)模板”對(duì)話框，如圖7-2-3所示。提供了常規(guī)網(wǎng)頁(yè)模板、框架網(wǎng)頁(yè)模板和樣式表模板共3類。選擇所需要的網(wǎng)頁(yè)模板，單擊“確定”按鈕即可。圖7-2-3“網(wǎng)頁(yè)模板”對(duì)話框網(wǎng)頁(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ì)話框，如圖7-2-4所示。共有常規(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ì)話框第28頁(yè)網(wǎng)頁(yè)屬性設(shè)置“格式”選項(xiàng)卡，可以設(shè)置網(wǎng)頁(yè)的背景圖片、背景顏色、文本顏色、超鏈接顏色。已訪問(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)卡第29頁(yè)網(wǎng)頁(yè)屬性設(shè)置“高級(jí)”選項(xiàng)卡，可以設(shè)置頁(yè)面的邊距、正文樣式、超鏈接反轉(zhuǎn)樣式等，如圖7-2-6所示。①邊距。上、下、左、右邊距分別可以設(shè)置網(wǎng)頁(yè)內(nèi)容與瀏覽器窗口的距離。邊距寬度可以設(shè)置左／右邊距為相同的寬度，邊距高度可以設(shè)置上／下邊距為相同的高度。②樣式。單擊“正文樣式”彈出“修改樣式”對(duì)話框，如圖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“修改樣式”對(duì)話框第30頁(yè)網(wǎng)頁(yè)屬性設(shè)置“自定義”選項(xiàng)卡可以添加由Meta屬性包含的頭信息變量，主要分為系統(tǒng)（HTTP-EQUIV）變量和用戶（User）變量?！罢Z(yǔ)言”選項(xiàng)卡?？梢栽O(shè)置網(wǎng)頁(yè)語(yǔ)言、HTML編碼等。第31頁(yè)保存網(wǎng)頁(yè)保存尚未保存的網(wǎng)頁(yè)單擊“常用”工具欄上的保存按鈕。或者選擇菜單“文件”、“保存”命令，在打開(kāi)的“另存為”對(duì)話框中找到并雙擊要保存網(wǎng)頁(yè)的文件夾。在“文件名”框中，輸入網(wǎng)頁(yè)的文件名，然后單擊“保存”按鈕。保存從當(dāng)前站點(diǎn)打開(kāi)的網(wǎng)頁(yè)單擊“常用”工具欄上的保存按鈕，或者選擇菜單“文件”、“保存”命令即可。保存從當(dāng)前站點(diǎn)之外的位置打開(kāi)的網(wǎng)頁(yè)選擇菜單“文件”、“另存為”命令，在彈出的“另存為”對(duì)話框中找到并雙擊要保存網(wǎng)頁(yè)的文件夾，然后單擊“保存”按鈕。第32頁(yè)打開(kāi)網(wǎng)頁(yè)選擇菜單“文件”|“打開(kāi)”命令，通過(guò)彈出的“打開(kāi)文件”對(duì)話框打開(kāi)網(wǎng)頁(yè)?；蛘咴贔rontPage2003的站點(diǎn)視圖模式下，雙擊網(wǎng)頁(yè)文件名也可以打開(kāi)網(wǎng)頁(yè)。第33頁(yè)預(yù)覽網(wǎng)頁(yè)網(wǎng)頁(yè)在制作完成后，在設(shè)計(jì)視圖下只能看到頁(yè)面的大概形態(tài)，而動(dòng)畫、視頻、音頻。網(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）在FrontPage預(yù)覽視圖中預(yù)覽單擊FrontPage2003窗口中左下角視圖切換標(biāo)簽中的預(yù)覽按鈕，即可瀏覽制作效果。（2）在Web瀏覽器中預(yù)覽選擇菜單“文件”、“在瀏覽器中預(yù)覽”命令，選擇瀏覽器，即可啟動(dòng)瀏覽器顯示頁(yè)面效果，其中瀏覽器后面的數(shù)字表示將按此大小打開(kāi)瀏覽器窗口?；蛘邌螕簟俺Ｓ谩惫ぞ邫谏系摹癕icrosoftInternetExplorer6.0中的預(yù)覽”按鈕。第34頁(yè)三、

網(wǎng)頁(yè)中的文本操作

網(wǎng)頁(yè)中大量的信息是文本，因此文本的操作是網(wǎng)頁(yè)制作的基礎(chǔ)。本節(jié)主要介紹如何在設(shè)計(jì)視圖模式下為網(wǎng)頁(yè)輸入文本，以及如何通過(guò)設(shè)置文本格式、段落格式、邊框和底紋、列表等，使頁(yè)面美觀。第35頁(yè)文本的輸入網(wǎng)頁(yè)中文本和特殊字符的輸入和前面講解的方法基本一樣，也有所不同。如果要產(chǎn)生一個(gè)新行，需要按下“Shift＋Enter”鍵，換行標(biāo)記為“”。要產(chǎn)生一個(gè)新的段落，直接按“Enter”鍵，段落標(biāo)記為“”。插入水平線。當(dāng)頁(yè)面中內(nèi)容比較多時(shí)，為了使網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)清晰，可以通過(guò)插入水平線分隔內(nèi)容。操作步驟為：選擇插入位置，選擇菜單“插入”、“水平線”命令。設(shè)置水平線。雙擊水平線，在彈出的“水平線屬性”對(duì)話框，可以設(shè)置水平線的寬度、高度、對(duì)齊方式、顏色等。第36頁(yè)文本的格式化設(shè)置字體格式網(wǎng)頁(yè)中最重要的內(nèi)容是文本，因此文本的格式化是網(wǎng)頁(yè)制作的關(guān)鍵步驟之一。包括設(shè)置字體、字號(hào)、字體顏色和字符間距等。設(shè)置字體格式首先選中要設(shè)置字體的文本，選擇方法與Word2003中的選定方式類似。顏色吸管FrontPage2003除了提供前面介紹的顏色選擇方法外，還可以使用顏色吸管選擇頁(yè)面文本或圖片的顏色作為文本的設(shè)定顏色.方法如下：選擇菜單“格式”、“字體”命令，在打開(kāi)的“字體”對(duì)話框中，單擊“顏色”下拉列表框，在彈出的下拉列表中選擇“其他顏色”，打開(kāi)“其他顏色”對(duì)話框，如圖7-2-8所示。單擊顏色選擇按鈕，鼠標(biāo)就會(huì)變成顏色吸管。移動(dòng)鼠標(biāo)，在需要的顏色處單擊鼠標(biāo)，就會(huì)在“其他顏色”對(duì)話框中的“新建”顏色窗口中顯示吸取的顏色，單擊“確定”按鈕即可使用吸取的顏色。圖7-2-8“其他顏色”對(duì)話框第37頁(yè)文本的格式化設(shè)置字符間距為了增加網(wǎng)頁(yè)中文字與文字間的距離，需要設(shè)置字符間距。首先選擇要設(shè)置字符間距的文本，選擇菜單“格式”、“字體”命令，彈出“字體”對(duì)話框，選擇“字符間距”選項(xiàng)卡，如圖7-2-9所示。在“間距”下拉列表框中可以設(shè)置間距方式：普通、加寬和緊縮。在“間距大小”微調(diào)框中輸入以像素為單位的間距大小。在“定位”下拉列表框中可以設(shè)置字符高度相對(duì)于本行基線的高度，然后單擊“確定”按鈕。圖7-2-9“字符間距”選項(xiàng)卡第38頁(yè)文本的格式化設(shè)置標(biāo)題級(jí)標(biāo)題級(jí)可以用來(lái)設(shè)置不同的字體大小，在網(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è)置第39頁(yè)段落的格式化

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

列表是網(wǎng)頁(yè)中組織數(shù)據(jù)的一種形式，可以使網(wǎng)頁(yè)內(nèi)容層次分明、重點(diǎn)突出。網(wǎng)頁(yè)制作中共可以使用5種列表：項(xiàng)目符號(hào)列表、編號(hào)列表、自定義列表、圖片列表、菜單列表和目錄列表。第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)”命令，彈出“列表屬性”對(duì)話框，選擇“無(wú)格式項(xiàng)目列表”選項(xiàng)卡，如圖7-2-12所示。選擇所需的項(xiàng)目列表，或單擊“樣式”進(jìn)行樣式修改。圖7-2-12“無(wú)格式項(xiàng)目列表”選項(xiàng)卡第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ù)字、大寫羅馬數(shù)字、大寫英文字母、小寫羅馬數(shù)字、小寫英文字母，默認(rèn)是從1開(kāi)始?？梢栽凇傲斜韺傩浴睂?duì)話框中的“編號(hào)”選項(xiàng)卡中修改。第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ù)上面的操作，保存后就可以在瀏覽器瀏覽。第44頁(yè)嵌套列表當(dāng)顯示的內(nèi)容層次較多時(shí)，需要建立大綱式的列表，即多級(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嵌套列表顯示效果第45頁(yè)圖片列表

圖片列表和項(xiàng)目符號(hào)列表類似，只是圖片列表是采用圖片作為列表符號(hào)。采用圖片列表的步驟是：將光標(biāo)定位在一組列表符號(hào)的任意位置，選擇菜單“格式”、“項(xiàng)目符號(hào)和編號(hào)”命令，彈出“列表屬性”對(duì)話框，選擇“圖片項(xiàng)目符號(hào)”選項(xiàng)卡。選定“指定圖片”單選按鈕，單擊“瀏覽”選擇作為列表符號(hào)的圖片。第46頁(yè)邊框和底紋為了突出顯示某些內(nèi)容，可以為文本或段落設(shè)置邊框和底紋，可以分別設(shè)置也可以同時(shí)設(shè)置。操作步驟如下：選中要設(shè)置邊框和底紋的文本，選擇菜單“格式”、“邊框和底紋”命令，彈出“邊框和底紋”對(duì)話框。（1）設(shè)置邊框。'選擇“邊框”選項(xiàng)卡，如圖7-2-14所示?！霸O(shè)置”選項(xiàng)中可以設(shè)置3種邊框方式：默認(rèn)、方框和自定義三種。選擇“邊框”，在“樣式”列表框中選擇邊框的線條樣式，設(shè)置顏色、線條寬度、襯距（文字與邊框的距離），單擊“確定”按鈕。取消邊框可以選擇“默認(rèn)”方式。（2）設(shè)置底紋。選擇“底紋”選項(xiàng)卡，在“填充”選項(xiàng)區(qū)域中，“背景色”可以設(shè)置底紋顏色，“前景色”設(shè)置底紋文本顏色。在“圖案”選項(xiàng)區(qū)域中，可以選擇圖片作為背景。設(shè)置完成后，單擊“確定”按鈕。圖7-2-14“邊框”選項(xiàng)卡第47頁(yè)四、網(wǎng)頁(yè)中圖片的處理

圖片是網(wǎng)頁(yè)中很重要的組成元素，恰當(dāng)?shù)氖褂脠D片不但可以美化頁(yè)面，還可以達(dá)到文字無(wú)法表達(dá)的效果，更能清楚地表達(dá)細(xì)節(jié)內(nèi)容，傳遞更多的信息。第48頁(yè)圖片的類型瀏覽器支持的常用網(wǎng)頁(yè)圖片主要有GIF、JPEG、PNG、BMP四種格式。使用時(shí)既要考慮顏色效果，也要考慮文件的大小。GIF格式圖片

GIF格式圖片的文件擴(kuò)展名是.gif，采用LIM無(wú)損壓縮技術(shù)，解壓縮很快。最多可包含256種顏色，可用于包含少量顏色的圖片。GIF圖片文件小且瀏覽速度快，支持動(dòng)態(tài)效果。另外GIF圖片還可以使用透明背景，這樣圖片不會(huì)覆蓋頁(yè)面的背景顏色。第49頁(yè)圖片的類型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ǔ)。PNG格式圖片

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è)中使用較少。第50頁(yè)圖片的使用圖片主要用在背景圖片、網(wǎng)頁(yè)橫幅、公司徽標(biāo)、圖片列表、導(dǎo)航按鈕、水平線等情況。FrontPage2003中主要可以使用來(lái)自文件、剪輯庫(kù)、掃描儀和數(shù)碼相機(jī)的圖片，也可插入藝術(shù)字、自選圖形等。插入來(lái)自文件的圖片要先確定插入圖片位置，選擇菜單“插入”、“圖片”、“來(lái)自文件”命令，彈出“圖片”對(duì)話框。選擇要插入的文件，單擊“插入”按鈕即可。如果插入的圖片不是來(lái)自當(dāng)前站點(diǎn)，保存頁(yè)面時(shí)會(huì)彈出“保存嵌入式文件”對(duì)話框，如圖7-2-15所示。單擊“重命名”按鈕可以在該對(duì)話框內(nèi)為圖片重新命名；單擊“更改文件夾”按鈕可以改變圖片保存的位置：?jiǎn)螕簟皥D片文件類型”按鈕可以改變圖片格式，按新的設(shè)定格式保存文件。圖7-2-15“保存嵌入式文件”對(duì)話框第51頁(yè)圖片的設(shè)置圖片設(shè)置主要包括環(huán)繞方式、圖片布局、圖片大小等?？梢赃x擇菜單“格式”、“屬性”命令，或者單擊右鍵，在彈出的快捷菜單中選擇“圖片屬性”命令，在打開(kāi)的“圖片屬性”對(duì)話框中進(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ì)話框第52頁(yè)圖片的編輯圖片的編輯除了使用Photoshop這樣的專用圖片處理工具外，還可以使用FrontPage2003的“圖片”工具欄。主要包括裁剪圖片、旋轉(zhuǎn)或翻轉(zhuǎn)圖片、設(shè)置對(duì)比度和亮度等，可以使用“圖片”工具欄完成這些操作。第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í)針旋轉(zhuǎn)90”。（5）“水平翻轉(zhuǎn)”按鈕。將圖片做左右對(duì)稱的鏡像。圖7-2-17“圖片”工具欄第54頁(yè)圖片工具欄（6）“垂直翻轉(zhuǎn)”按鈕。將圖片做上下對(duì)稱的鏡像。（7）“降低對(duì)比度”按鈕。減少圖片前景和背景的對(duì)比度。（8）“增加對(duì)比度”按鈕。增加圖片前景和背景的對(duì)比度。（9）“增加亮度”按鈕。增加圖片的亮度。（10）“降低亮度”按鈕。降低圖片的亮度。（11）“裁剪”按鈕。將光標(biāo)定位在圖片上，可以拉出一個(gè)任意大小的虛線框，一框內(nèi)的保留，框外的裁掉。第55頁(yè)圖片工具欄（12）“設(shè)置透明色”按鈕。將GIF格式的圖片設(shè)置為透明，這樣就不會(huì)覆蓋掉頁(yè)面背景。（13）“顏色”按鈕。有“自動(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）“還原”按鈕。撤銷對(duì)圖片的各種編輯操作。第56頁(yè)圖片的編輯（1）裁剪圖片選中圖片，單擊“圖片”工具欄的“裁剪”按鈕，圖片上就會(huì)出現(xiàn)一個(gè)方框，拖動(dòng)方框上的控點(diǎn)調(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)輸入框的位置。第57頁(yè)五、網(wǎng)頁(yè)中表格的使用表格的創(chuàng)建在網(wǎng)頁(yè)中表格的主要作用是組織數(shù)據(jù)和頁(yè)面布局。表格主要由6部分組成：標(biāo)題、表頭、行、列、單元格、邊框。自動(dòng)創(chuàng)建表格選定插入點(diǎn)，選擇菜單“表格”、“插入”、“表格”命令，彈出“插入表格”對(duì)話框，如圖7-2-18所示。相應(yīng)設(shè)置完成后單擊“確定”按鈕。手工繪制表格手工繪制表格方法與Word2003的類似。圖7-2-18“插入表格”對(duì)話框第58頁(yè)表格的編輯對(duì)表格的編輯主要包括表格大小的調(diào)整、單元格的調(diào)整、單元格的合并和拆分等。1．選定表格在對(duì)表格進(jìn)行編輯之前，首先要選定表格、單元格、行或列等。2．單元格對(duì)齊方式選中單元格，選擇菜單“表格”、“表格屬性”、“單元格”命令，彈出“單元格屬性”對(duì)話框，如圖7-2-19所示。3．插入和刪除行、列及單元格4．調(diào)整表格及單元格大小圖7-2-19“單元格屬性”對(duì)話框第59頁(yè)六、

建立超鏈接超鏈接的概念1．URLURL（UniformResourceLocator）即統(tǒng)一資源定位符，由資源類型、主機(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)以及電子郵件、視頻、音頻以及普通文件。第60頁(yè)創(chuàng)建超鏈接1．在文字上創(chuàng)建超鏈接常見(jiàn)的在文字上創(chuàng)建超鏈接是指超鏈接的載體是文字，通過(guò)單擊文字上的鏈接跳轉(zhuǎn)到URL指定的資源。方法如下：選定要?jiǎng)?chuàng)建超鏈接的文字，選擇菜單“插入”、“超鏈接”命令，或者單擊“常用”工具欄上的“插入超鏈接”按鈕，彈出“插入超鏈接”對(duì)話框。如圖7-2-20所示。選擇要鏈接的目標(biāo)地址，如果目標(biāo)地址是待創(chuàng)建的文件，可以在“地址”輸入框中輸入一個(gè)文件名或URL地址，然后單擊“確定”按鈕。圖7-2-20“插入超鏈接”對(duì)話框第61頁(yè)創(chuàng)建超鏈接2.在圖片上創(chuàng)建超鏈接選定要?jiǎng)?chuàng)建超鏈接的圖片，選擇菜單“插入”、“超鏈接”命令創(chuàng)建。3．在圖片熱點(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ì)話框，選擇或輸入鏈接的目標(biāo)地址，然后單擊“確定”按鈕即可。4．在電子郵件地址創(chuàng)建超鏈接選擇菜單“插入”、“超鏈接”命令，彈出“插入超鏈接”對(duì)話框，單擊“電子郵件地址”選項(xiàng)，如圖7-2-21所示。圖7-2-21創(chuàng)建電子郵件超鏈接第62頁(yè)創(chuàng)建超鏈接5．在書(shū)簽上創(chuàng)建超鏈接前面所創(chuàng)建的超鏈接都是鏈接到外部文件，有時(shí)候當(dāng)一個(gè)網(wǎng)頁(yè)頁(yè)面很長(zhǎng)的時(shí)候，為了閱讀方便，可以采用書(shū)簽的方式鏈接到目標(biāo)網(wǎng)頁(yè)的特定位置。（1）定義書(shū)簽。書(shū)簽是頁(yè)面的定位標(biāo)記。選擇創(chuàng)建書(shū)簽的頁(yè)面位置，選擇菜單“插入”、“書(shū)簽”命令，彈出“書(shū)簽”對(duì)話框，如圖7-2-22所示。在“書(shū)簽”輸入框中輸入書(shū)簽名稱，然后單擊“確定”按鈕。（2）創(chuàng)建書(shū)簽超鏈接。定義完書(shū)簽后，便可以指定超鏈接。在“插入超鏈接”對(duì)話框中單擊“書(shū)簽”按鈕，彈出“在文檔中選擇位置”對(duì)話框。如圖7-2-23所示。該對(duì)話框中會(huì)顯示先前定義的書(shū)簽，選定后單擊“確定”按鈕即可。圖7-2-22“書(shū)簽”對(duì)話框圖7-2-23“在文檔中選擇位置”對(duì)話框第63頁(yè)修改超鏈接修改已經(jīng)創(chuàng)建的超鏈接，可以選定超鏈接。選擇菜單“插入”|“超鏈接”命令。在彈出的“編輯超鏈接”對(duì)話框中進(jìn)行修改。第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è)的使用組件的初步認(rèn)識(shí)第65頁(yè)一、嵌入音頻、視頻及Flash影片一、嵌入音頻、視頻及Flash影片1．網(wǎng)頁(yè)中的音頻（1）音頻的格式常用音頻文件的格式有WAV、MIDI、Au、RealAudio、Mp3等，可以使用多媒體工具軟件實(shí)現(xiàn)各種格式的相互轉(zhuǎn)換。①WAV格式。文件擴(kuò)展名是.wav，可以產(chǎn)生高質(zhì)量的音頻效果，但文件較大，是計(jì)算機(jī)上常見(jiàn)的格式之一，最早用于Windows系統(tǒng)。②MIDI格式。文件擴(kuò)展名是.mid。MIDI是MusicInstrumentDigitalInterface（樂(lè)器數(shù)字化接口）的縮寫。MIDI格式的音頻文件包含一系列用于播放電子合成器的指令，文件較小，適合在網(wǎng)絡(luò)上傳輸。③Au格式。文件擴(kuò)展名是.au。Au文件也是網(wǎng)絡(luò)上流行的音頻文件格式之一，最初用于Sun公司的UNIX系統(tǒng)。音頻效果不是很好，但可以用于幾乎所有的操作系統(tǒng)。④RealAudio格式。文件擴(kuò)展名是.ra，是專門針對(duì)網(wǎng)絡(luò)傳輸設(shè)計(jì)的，具有較高的壓縮和較好的容錯(cuò)性。⑤MP3格式。文件擴(kuò)展名是.mp3。是最近十分流行的音樂(lè)文件格式，壓縮比高、音質(zhì)好，幾乎可以和CD音質(zhì)相媲美。第66頁(yè)網(wǎng)頁(yè)中嵌入音頻選定插入位置，選擇菜單“插入”、“Web組件”命令，彈出“插入Web組件”對(duì)話框，如圖7-3-1所示，在左側(cè)的“組件類型”中選擇“高級(jí)控件”，在右側(cè)的“選擇一個(gè)控件”中選擇“插件”。單擊“完成”按鈕，彈出“插件屬性”對(duì)話框，如圖7-3-2所示。在“數(shù)據(jù)源”輸入框中輸入音頻文件名，在“大小”中設(shè)置播放器的寬度和高度，設(shè)置完成后單擊“確定”按鈕。圖7-3-1“插入Web組件”對(duì)話框圖7-3-2“插件屬性”對(duì)話框第67頁(yè)網(wǎng)頁(yè)中的視頻和Flash（l）視頻的格式常用的視頻文件的格式有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ì)話框中選擇需要嵌入的視頻文件或者Flash影片文件。然后單擊“打開(kāi)”或“插入”按鈕。第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)置樣式、用戶定義樣式和級(jí)聯(lián)樣式，其中級(jí)聯(lián)樣式表（C

SS)最常用?？梢栽谡麄€(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)用到多個(gè)網(wǎng)頁(yè)中，使整個(gè)網(wǎng)站應(yīng)用相同的樣式。若在外部級(jí)聯(lián)樣式表中修改了某種樣式，整個(gè)站點(diǎn)的所有網(wǎng)頁(yè)都可隨之更改。外部級(jí)聯(lián)樣式表使用.css為文件擴(kuò)展名。第69頁(yè)創(chuàng)建樣式表選擇菜單“文件”、“新建”命令，打開(kāi)“新建”任務(wù)窗格。在“新建網(wǎng)頁(yè)”選擇區(qū)域中單擊“其他網(wǎng)頁(yè)模板”，彈出“網(wǎng)頁(yè)模板”對(duì)話框，選擇“樣式表”選項(xiàng)卡，如圖7-3-3所示。FrontPage2003除了普通樣式表外提供了12種樣式表模板，我們可以選擇其中一個(gè)模板，如“公路”，然后單擊“確定”按鈕，打開(kāi)了用該樣式表模板建立的新文件，如圖7-3-4所示?？梢酝ㄟ^(guò)單擊“樣式”工具欄上的“樣式”按鈕，打開(kāi)“樣式”對(duì)話框，進(jìn)行樣式的新建、修改和刪除操作，如圖7-3-5所示。圖7-3-3“網(wǎng)頁(yè)模板”對(duì)話框圖7-3-4樣式表代碼窗口圖7-3-5“樣式”對(duì)話框第70頁(yè)應(yīng)用樣式表樣式表創(chuàng)建并保存后，就可以應(yīng)用到網(wǎng)頁(yè)中。操作步驟如下：選擇菜單“格式”、“樣式表鏈接”命令，彈出“鏈接樣式表”對(duì)話框，如圖7-3-6所示?？梢赃x擇“所有網(wǎng)頁(yè)”和“所選的網(wǎng)頁(yè)”選項(xiàng)確定樣式表的應(yīng)用范圍。單擊“添加”按鈕，選擇想要應(yīng)用的樣式表文件，然后單擊“確定”按鈕返回。圖7-3-6“鏈接樣式表”對(duì)話框第71頁(yè)三、表單的初步認(rèn)識(shí)表單是網(wǎng)頁(yè)中不可缺少的組成元素，主要用來(lái)收集客戶端輸入的信息，是用戶和Web應(yīng)用程序、Web數(shù)據(jù)庫(kù)進(jìn)行交互的界面。通過(guò)表單可以完成用戶和服務(wù)器之間的信息交換，在網(wǎng)絡(luò)的信息交流中起著非常重要的作用。表單其實(shí)就是個(gè)容器，表單可以容納多種表單元素。常用的表單元素有：表單、列表表單、列表域、表單Web控件、文本框、文本區(qū)、文件上載、復(fù)選框、選項(xiàng)按鈕、分組框、下拉框、按鈕、圖片、標(biāo)簽等。第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í)的單選題。（5）下拉框。由單行空白區(qū)域和下拉按鈕組成，單擊該下拉按鈕，就會(huì)彈出下拉列表項(xiàng)供選擇。插入表單元素的方法很簡(jiǎn)單，選擇菜單“插入”、“表單”命令，在彈出的子菜單中選擇相應(yīng)的表單元素即可，如圖7-3-7所示。圖7-3-7表單元素子菜單

四、框架網(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è)新建框架網(wǎng)頁(yè)依次選擇“視圖︱任務(wù)窗格”菜單命令，使窗口右側(cè)顯示“新建網(wǎng)頁(yè)或網(wǎng)站”任務(wù)窗格，在窗格中選擇“其他網(wǎng)頁(yè)摸板”命令，會(huì)出現(xiàn)如圖7-3-9所示“網(wǎng)頁(yè)模板”對(duì)話框。在圖7-3-9中選擇“框架網(wǎng)頁(yè)”標(biāo)簽，并選擇合適的框架網(wǎng)頁(yè)類型，單擊“確定”按鈕，即可新建立一個(gè)框架網(wǎng)頁(yè)，如圖7-3-10所示。在框架網(wǎng)頁(yè)中單擊“設(shè)置初始網(wǎng)頁(yè)”按鈕，可以在出現(xiàn)的“插入超鏈接”對(duì)話框中找到需要的該框架內(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ì)話框圖7-3-10新建框架網(wǎng)頁(yè)保存框架網(wǎng)頁(yè)當(dāng)框架網(wǎng)頁(yè)的各個(gè)部分都編輯完成之后，需要對(duì)整個(gè)框架網(wǎng)頁(yè)進(jìn)行保存。在菜單中選擇“文件”︱“保存”命令，會(huì)出現(xiàn)如圖7-3-11所示的對(duì)話框，可以按照提示的步驟對(duì)各個(gè)部分進(jìn)行保存即可。第75頁(yè)圖7-3-11保存框架網(wǎng)頁(yè)中的各個(gè)部分框架網(wǎng)頁(yè)中的超鏈接在框架網(wǎng)頁(yè)中設(shè)置超鏈接的步驟同一般的超鏈接的設(shè)置相同，惟一區(qū)別的是在“編輯超鏈接”對(duì)話框中要單擊“目標(biāo)框架”按鈕。在“目標(biāo)框架”對(duì)話框中設(shè)置鏈接的目標(biāo)框架，如圖7-3-12所示。在左側(cè)框架示意圖中單擊鏈接網(wǎng)頁(yè)要顯示的位置，單擊“確定”按鈕。在“超鏈接”對(duì)話框中再設(shè)置該對(duì)象鏈接頁(yè)面的地址即可。第76頁(yè)圖7-3-12“目標(biāo)框架”對(duì)話框第77頁(yè)五、組件的初步認(rèn)識(shí)Web組件是一種特殊的動(dòng)態(tài)對(duì)象，使用FrontPeqe2003中的Web組件可以向網(wǎng)頁(yè)中添加多種功能，不但能夠?qū)崿F(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果如字幕、橫幅廣告、交互按鈕、懸停按鈕、Flash影片等動(dòng)畫效果，還可以向網(wǎng)頁(yè)中插入計(jì)數(shù)器、電子表格和圖表等。實(shí)現(xiàn)方法：選擇菜單：“插入”、“Web組件”命令，在彈出的“插入Web組件”對(duì)話框中，如圖7-3-13所示，選擇組件類型并進(jìn)行相應(yīng)的選擇設(shè)置即可。圖7-3-13“插入Web組件”對(duì)話框中第78頁(yè)第四節(jié)Dreamweaver8.0的使用7.4.1Dreamweaver8.0操作環(huán)境7.4.2建立與管理Web站點(diǎn)7.4.3網(wǎng)頁(yè)中文本的應(yīng)用7.4.4網(wǎng)頁(yè)插入圖像和Flash元素7.4.5表格的應(yīng)用超鏈接7.4.7層、行為和時(shí)間軸7.4.8框架和表單7.4.9網(wǎng)站的測(cè)試與發(fā)布第四節(jié)Dreamweaver8.0的使用Dreamweaver是Macromedia公司的產(chǎn)品，是目前最優(yōu)秀的網(wǎng)頁(yè)制作軟件之一，它提供了眾多功能強(qiáng)勁的可視化設(shè)計(jì)工具、應(yīng)用開(kāi)發(fā)環(huán)境以及代碼編輯支持，適合各個(gè)層次的開(kāi)發(fā)人員和設(shè)計(jì)人員高效地設(shè)計(jì)、開(kāi)發(fā)和維護(hù)網(wǎng)站。第79頁(yè)一、Dreamweaver8.0操作環(huán)境Dreamweaver8.0是一款專門的網(wǎng)頁(yè)設(shè)計(jì)軟件，它采用所見(jiàn)即所得的編輯方式，可以快速地創(chuàng)建頁(yè)面而無(wú)需編寫任何代碼。用戶在安裝Dreamweaver8.0完成之后，可以啟動(dòng)Dreamweaver8.0的起始頁(yè)，如圖7-4-1所示。第80頁(yè)圖7-4-1Dreamweaver的歡迎界面Dreamweaver8.0的工作界面當(dāng)打開(kāi)Dreamweaver8.0，并打開(kāi)相應(yīng)的站點(diǎn)后，可以看到如圖7-4-2所示的窗口。該窗口主要由“插入”欄、“文檔”工具欄、面板組、“文件”面板、“屬性”面板、標(biāo)簽選擇器和“文檔”窗口等組成。第81頁(yè)

“插入”欄“文檔”工具欄面板組文件面板標(biāo)簽選擇器“屬性”面板“文檔”窗口圖7-4-2Dreamweaver8.0的工作區(qū)界面“插入”欄插入”欄包含創(chuàng)建和插入對(duì)象的按鈕，當(dāng)需要某個(gè)操作的時(shí)候，可以將鼠標(biāo)指針移動(dòng)到某個(gè)按鈕上，這時(shí)鼠標(biāo)旁邊會(huì)出現(xiàn)該按鈕的功能提示，根據(jù)提示用戶選擇想要的操作?！安迦搿睓诘陌粹o被包括在幾個(gè)不同的類別中，其中的“常用”類別如圖7-4-3所示。如果我們想要的按鈕沒(méi)有在當(dāng)前的類別中，則可以單擊類別名稱右邊向下的箭頭，選擇其他想要的類別?！安迦搿睓诎ǖ念悇e有：第82頁(yè)圖7-4-3“插入”欄“插入”欄①常用”類別：可以插入或創(chuàng)建最常用的對(duì)象，如圖像、表格等。②“布局”類別：可以插入表格、Div標(biāo)簽和繪制層等，并且可以在三種表格模式之間切換，分別是標(biāo)準(zhǔn)模式、擴(kuò)展表格模式和布局模式。③“表單”類別：通過(guò)此類別，用戶可以插入表單中的各種元素，如隱藏域、文本區(qū)域、復(fù)選框、單選按鈕等。④“文本”類別：通過(guò)此類別，用戶可以插入文本設(shè)置標(biāo)簽，如字體標(biāo)簽編輯器、粗體、斜體等。⑤“HTML”類別：通過(guò)此類別，用戶可以插入HTML的一些基本元素，如水平線、文件頭的一些信息、表格、框架等。⑥“應(yīng)用程序”類別：通過(guò)此類別，用戶可以插入網(wǎng)頁(yè)的動(dòng)態(tài)元素，如記錄集、動(dòng)態(tài)數(shù)據(jù)、記錄集分頁(yè)等。⑦“Flash元素”類別：可以幫助用戶插入Flash元素。第83頁(yè)“文檔”工具欄“文檔”工具欄中包含了視圖選擇按鈕和一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)，如圖7-4-4所示。

圖7-4-4“文檔”工具欄①“代碼”：?jiǎn)螕粼摪粹o可以切換到“代碼”視圖，該視圖顯示的是HTML代碼或者腳本程序，適合熟悉代碼的用戶使用。②“拆分”：?jiǎn)螕粼摪粹o可以同時(shí)出現(xiàn)“代碼”視圖和“設(shè)計(jì)”視圖，上部顯示“代碼”視圖，下部顯示“設(shè)計(jì)”視圖。在該視圖模式下，用戶在“設(shè)計(jì)”視圖中所作的操作會(huì)立即顯示在代碼窗口中，而用戶在代碼窗口中所作的操作，必須在“屬性”面板中單擊“刷新”按鈕后，才可以顯示在“設(shè)計(jì)”視圖中。③“設(shè)計(jì)”：該視圖模式可以直觀的顯示出網(wǎng)頁(yè)的布局和結(jié)構(gòu)等，適合不熟悉代碼的用戶使用。④“標(biāo)題”：用于編輯網(wǎng)頁(yè)的標(biāo)題，該標(biāo)題將顯示在網(wǎng)頁(yè)的標(biāo)題欄上。第84頁(yè)文檔”窗口、面板組、“文件”面板（3）“文檔”窗口“文檔”窗口是制作與編輯網(wǎng)頁(yè)的主要工作區(qū)。（4）面板組面板組集成了每一類的操作，通過(guò)單擊相應(yīng)的項(xiàng)目就可以展開(kāi)該面板，也可以將某個(gè)面板拖放到窗口的任意位置。（5）“文件”面板“文件”面板列出了當(dāng)前Dreamweaver站點(diǎn)內(nèi)的所的文件，該站點(diǎn)視圖可以是本地站點(diǎn)、遠(yuǎn)程站點(diǎn)或測(cè)試服務(wù)器，同樣如果要打開(kāi)站點(diǎn)內(nèi)的某個(gè)文件，只需要雙擊該文件名就可以了，另外還可以在該文件名上單擊鼠標(biāo)右鍵，在打開(kāi)的快捷菜單中選擇相應(yīng)的操作。第85頁(yè)標(biāo)簽選擇器、“屬性”面板（6）標(biāo)簽選擇器當(dāng)單擊標(biāo)簽選擇器中的某個(gè)標(biāo)簽時(shí)，對(duì)應(yīng)在“文檔”窗口中，Dreamweaver會(huì)自動(dòng)選擇工作窗口中相對(duì)應(yīng)的區(qū)域。如果是在“代碼”視圖下，當(dāng)選定了某個(gè)標(biāo)簽后，依次選擇“編輯”菜單、“代碼折疊”、“折疊所選”命令（或按Ctrl+Shift+C），可將該標(biāo)簽區(qū)域的代碼折疊起來(lái)，以便于檢查代碼的層次結(jié)構(gòu)。要展開(kāi)折疊的代碼，只需要雙擊該代碼片段即可。（7）“屬性”面板每一種標(biāo)簽對(duì)應(yīng)的屬性是不同的，所以當(dāng)單擊工作區(qū)中的某個(gè)標(biāo)簽或?qū)ο髸r(shí)，其屬性會(huì)顯示在“屬性”面板中，以便用戶查看和修改?！皩傩浴泵姘迥J(rèn)位于工作區(qū)底部，但是如果需要的話，用戶可以將其拖動(dòng)到窗口的上部或者浮動(dòng)在工作區(qū)窗口上。

第86頁(yè)二、建立與管理Web站點(diǎn)站點(diǎn)是一系列相關(guān)文檔的集合。站點(diǎn)可以放在本地或遠(yuǎn)程服務(wù)器上。先建立本地站點(diǎn)可以從全局上控制網(wǎng)站的結(jié)構(gòu)，完成對(duì)網(wǎng)頁(yè)的編輯調(diào)試工作。Dreamweaver8.0是一個(gè)站點(diǎn)創(chuàng)建和管理工具。第87頁(yè)創(chuàng)建本地站點(diǎn)每個(gè)網(wǎng)站都有自己的站點(diǎn)。一個(gè)本地站點(diǎn)需要有一個(gè)名稱和一個(gè)本地根目錄。要?jiǎng)?chuàng)建一個(gè)本地站點(diǎn)，首先啟動(dòng)Dreamweaver8.0。選擇“站點(diǎn)”|“新建站點(diǎn)”菜單命令。出現(xiàn)“新建站點(diǎn)”對(duì)話框，如圖7-4-5所示。第88頁(yè)圖7-4-5“新建站點(diǎn)”對(duì)話框創(chuàng)建本地站點(diǎn)該對(duì)話框由“基本”和“高級(jí)”兩個(gè)選項(xiàng)卡組成?！盎尽边x項(xiàng)卡針對(duì)初級(jí)用戶，采用引導(dǎo)方式引導(dǎo)用戶逐步定義站點(diǎn)；“高級(jí)”選項(xiàng)卡將所有的分類集成在一個(gè)面板組上，對(duì)Dreamweaver8.0較熟悉的用戶，可以直接在該面板組上進(jìn)行設(shè)置。單擊“下一步”按鈕，在打開(kāi)的對(duì)話框中有兩個(gè)單選按鈕，可以決定是否使用服務(wù)器技術(shù)，如圖7-4-6所示。如果需要制作動(dòng)態(tài)網(wǎng)站，可以選擇第二個(gè)單選按鈕，同時(shí)進(jìn)行相應(yīng)屬性的設(shè)定。如果只是進(jìn)行靜態(tài)網(wǎng)站的制作，可以選擇默認(rèn)的第一個(gè)選項(xiàng)“否，我不想使用服務(wù)器技術(shù)”。第89頁(yè)圖7-4-6決定是否使用服務(wù)器技術(shù)創(chuàng)建本地站點(diǎn)單擊“下一步”按鈕，出現(xiàn)向?qū)У南乱粋€(gè)界面，如圖7-4-7所示，詢問(wèn)站點(diǎn)的位置以及如何使用將要編輯與網(wǎng)頁(yè)制作有關(guān)的文件。選擇“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器”的選項(xiàng)。在站點(diǎn)開(kāi)發(fā)過(guò)程中這里有兩種選擇處理文件的方式，一般情況下選擇此選項(xiàng)。在“您將把文件存儲(chǔ)到計(jì)算機(jī)上的什么位置？”處，單擊文本框旁邊的文件夾圖標(biāo)，會(huì)出現(xiàn)“選擇站點(diǎn)的本地根文件夾”對(duì)話框。第90頁(yè)圖7-4-7設(shè)置用戶存放站點(diǎn)的路徑創(chuàng)建本地站點(diǎn)單擊“下一步”按鈕。出現(xiàn)向?qū)У南乱粋€(gè)界面，如圖7-4-8所示，詢問(wèn)“您如何連接到遠(yuǎn)程服務(wù)器”。從彈出式菜單中選擇“無(wú)”。也可以稍后設(shè)置有關(guān)遠(yuǎn)程站點(diǎn)的信息。第91頁(yè)圖7-4-8設(shè)置計(jì)算機(jī)與服務(wù)器的連接方式創(chuàng)建本地站點(diǎn)單擊“下一步”按鈕，該向?qū)У南乱粋€(gè)對(duì)話框?qū)⒊霈F(xiàn)，其中顯示設(shè)置概要，如圖7-4-9所示。目前，本地站點(diǎn)信息對(duì)于開(kāi)始創(chuàng)建網(wǎng)頁(yè)已經(jīng)足夠了。單擊“完成”按鈕完成設(shè)置。單擊窗口右側(cè)的“文件”面板組將其展開(kāi)，并選擇“文件”面板，如圖7-4-10所示，其中新建的站點(diǎn)中還沒(méi)有任何文件和文件夾。第92頁(yè)圖7-4-9新建站點(diǎn)結(jié)束對(duì)話框圖7-4-10“文件”面板組

管理站點(diǎn)

當(dāng)用戶建立好了站點(diǎn)以后，可以利用Dreamweaver8.0的“站點(diǎn)導(dǎo)出”功能將定義好的站點(diǎn)導(dǎo)出并保存到本地硬盤上。當(dāng)用戶下次要使用該站點(diǎn)進(jìn)行操作時(shí)，可方便地利用“站點(diǎn)導(dǎo)入”功能，把已經(jīng)保存在硬盤上的站點(diǎn)定義導(dǎo)入Dreamweaver8.0中，具體操作方法如下：第93頁(yè)導(dǎo)出站點(diǎn)通過(guò)選擇“站點(diǎn)”菜單中的“管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，如圖7-4-11所示。用鼠標(biāo)選擇需要導(dǎo)出的站點(diǎn)名稱，單擊“導(dǎo)出”按鈕，打開(kāi)“導(dǎo)出站點(diǎn)”對(duì)話框，選擇合適的路徑，一般選擇導(dǎo)出的站點(diǎn)設(shè)置與站點(diǎn)根文件夾在同一目錄下。Dreamweaver8.0會(huì)在該位置將所選站點(diǎn)保存為帶.ste文件擴(kuò)展名的XML文件，單擊“保存”按鈕。最后，單擊“完成”按鈕，關(guān)閉“管理站點(diǎn)”對(duì)話框。第94頁(yè)圖7-4-11“管理站點(diǎn)”對(duì)話框?qū)胝军c(diǎn)通過(guò)選擇“站點(diǎn)”菜單中的“管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，如圖7-4-11所示。單擊“導(dǎo)入”按鈕，打開(kāi)“導(dǎo)入站點(diǎn)”的對(duì)話框，如圖7-4-12所示，選擇站點(diǎn)文件所在路徑，單擊“打開(kāi)”按鈕。此時(shí)導(dǎo)入的站點(diǎn)會(huì)出現(xiàn)在“管理站點(diǎn)”對(duì)話框的站點(diǎn)列表中。最后，在“管理站點(diǎn)”對(duì)話框中單擊“完成”按鈕，關(guān)閉該窗口，并將站點(diǎn)文件導(dǎo)入到系統(tǒng)緩存中。第95頁(yè)圖7-4-12“導(dǎo)入站點(diǎn)”對(duì)話框刪除站點(diǎn)如果要?jiǎng)h除一些沒(méi)用的站點(diǎn)，在“管理站點(diǎn)”對(duì)話框中。單擊要?jiǎng)h除的站點(diǎn)名稱（也可以同時(shí)選擇多個(gè)站點(diǎn)名稱），單擊“刪除”按鈕。出現(xiàn)確認(rèn)對(duì)話框，單擊“是”按鈕即可刪除所選站點(diǎn)。第96頁(yè)三、網(wǎng)頁(yè)中文本的應(yīng)用Dreamweaver8.0是一種“所見(jiàn)即所得”的網(wǎng)頁(yè)設(shè)計(jì)工具。設(shè)計(jì)者可以直接輸入西文字符或利用中文操作系統(tǒng)中的某一種漢字輸入法輸入漢字。然后使用Dreamweaver8.0的文本格式化工具對(duì)文本進(jìn)行格式化，在網(wǎng)頁(yè)編輯窗口中能直接見(jiàn)到文本格式化的結(jié)果。第97頁(yè)創(chuàng)建文檔創(chuàng)建自己的頁(yè)面：可以使用Dreamweaver8.0起始頁(yè)創(chuàng)建新頁(yè)，或者選擇“文件”|“新建”菜單命令，打開(kāi)“新建文檔”對(duì)話框，如圖7-4-13所示?？梢愿鶕?jù)自己的需要?jiǎng)?chuàng)建不同格式的文檔。此處選擇“基本頁(yè)”類別的“HTML”，單擊“創(chuàng)建”按鈕，就可以進(jìn)入工作區(qū)界面，用戶可以在這個(gè)空白頁(yè)輸入文本進(jìn)行編輯。第98頁(yè)圖7-4-13“新建文檔”對(duì)話框保存文檔、打開(kāi)現(xiàn)有的文檔完成文檔的編輯后，就需要對(duì)文檔進(jìn)行保存。選擇“文件”|“保存”菜單命令，彈出“另存為”對(duì)話框，在對(duì)話框中輸入要保存的文件名，選擇合適的路徑，單擊“保存”按鈕。默認(rèn)保存類型為*.html或*.htm。同時(shí)Dreamweaver8.0還支持多種文件類型的保存，如*.asp、*.css、*.js等，可以在保存類型下拉列表中選擇合適的文件類型，或直接輸入文件的后綴名。選擇“文件”|“打開(kāi)”菜單命令，在“打開(kāi)”的對(duì)話框中選擇要打開(kāi)的文件就可以了。第99頁(yè)文檔的編輯與基本操作文字是網(wǎng)頁(yè)的基本元素，Dreamweaver8.0中對(duì)文本的操作同字處理軟件類似。在網(wǎng)頁(yè)中添加文本通常使用以下兩種方法：在文檔窗口直接輸入文本或者從其它應(yīng)用程序中將文本復(fù)制、粘貼到網(wǎng)頁(yè)上。輸入文字的同時(shí)，還可根據(jù)需要，設(shè)置新創(chuàng)建文檔的頁(yè)面屬性，操作方法是：選擇“修改”|“頁(yè)面屬性”菜單命令，在打開(kāi)的對(duì)話框中，設(shè)置頁(yè)面字體、文本顏色、背景顏色以及邊距等信息，如圖7-4-14所示。第100頁(yè)圖7-4-14“頁(yè)面設(shè)置”對(duì)話框設(shè)置文本格式輸入文字后，文本的設(shè)置是通過(guò)其屬性面板來(lái)進(jìn)行的，文本屬性面板在窗口的下方，如圖7-4-15所示。面板中的項(xiàng)目與Word中文本設(shè)置的功能相似。第101頁(yè)圖7-4-15文本屬性面板

四、網(wǎng)頁(yè)插入圖像和Flash元素

一個(gè)好的網(wǎng)站除了最基本的文字內(nèi)容外，經(jīng)常要插入圖片進(jìn)行修飾。目前網(wǎng)頁(yè)上最常用的圖片文件的格式是：JPG、JPEG、GIF和PNG。１.插入圖像在網(wǎng)頁(yè)中插入圖像，首先將光標(biāo)定位在要插入圖像的位置，可以采用下列任意一種方式插入圖片：①選擇“插入”|“圖像”菜單命令。②按快捷鍵Ctrl+Alt+I。③直接在“插入工具欄組”中選擇“常用工具欄”，單擊面板上的插入圖像按鈕

。第102頁(yè)插入圖像采用前面三種方式中的任意一種方式都會(huì)彈出如圖7-4-16所示的對(duì)話框，在對(duì)話框中設(shè)置要插入的圖像文件的路徑和文件名即可。

如果面板組的文件面板中有圖片，可以將圖片直接拖放到工作區(qū)中。如果要插入的圖像文件位于站點(diǎn)以外的文件夾中，系統(tǒng)會(huì)出現(xiàn)如圖7-4-17所示的對(duì)話框，提示需要將圖像復(fù)制到站點(diǎn)內(nèi)，單擊“是”按鈕，將圖像保存到站點(diǎn)內(nèi)的文件夾中。否則，網(wǎng)頁(yè)上傳到遠(yuǎn)端站點(diǎn)后，會(huì)找不到圖像，出現(xiàn)斷開(kāi)的鏈接，導(dǎo)致圖像不能正常顯示。第103頁(yè)圖7-4-16選擇插入圖像源文件對(duì)話框圖7-4-17警告對(duì)話框設(shè)置圖像屬性插入圖像后需要根據(jù)實(shí)際情況對(duì)圖像作一些修改，使圖片和文字內(nèi)容更好地結(jié)合起來(lái)。當(dāng)選中一幅圖片時(shí)，將會(huì)在窗口的下方出現(xiàn)如圖7-4-18所示的圖像屬性面板，用戶可以在此面板中對(duì)圖像進(jìn)行格式設(shè)置。第104頁(yè)圖7-4-18圖像屬性面板插入鼠標(biāo)經(jīng)過(guò)翻轉(zhuǎn)圖像鼠標(biāo)經(jīng)過(guò)翻轉(zhuǎn)圖像實(shí)際上是在同一位置插入兩幅圖像，這項(xiàng)技術(shù)是網(wǎng)絡(luò)上最常用的技術(shù)之一。當(dāng)瀏覽網(wǎng)頁(yè)時(shí)，把鼠標(biāo)移動(dòng)到一張圖片上時(shí)，這張圖片就馬上換成另一張圖片，當(dāng)鼠標(biāo)移開(kāi)時(shí)，圖片又換回來(lái)了。這種互動(dòng)技術(shù)通常用在網(wǎng)頁(yè)的選項(xiàng)按鈕上，建立鏈接會(huì)產(chǎn)生動(dòng)態(tài)按鈕的效果。插入鼠標(biāo)經(jīng)過(guò)圖像之前，一定要準(zhǔn)備兩幅大小一樣、畫面不同的圖像。插入鼠標(biāo)經(jīng)過(guò)翻轉(zhuǎn)的圖片步驟如下：（1）把鼠標(biāo)插入點(diǎn)放到要插入圖片的位置。（2）選擇“插入”|“圖像對(duì)象”|“鼠標(biāo)經(jīng)過(guò)圖像”菜單命令，這時(shí)會(huì)彈出如圖7-4-19所示的對(duì)話框。第105頁(yè)圖7-4-19“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框插入鼠標(biāo)經(jīng)過(guò)翻轉(zhuǎn)圖像（3）在“圖像名稱”文本框中可以為翻轉(zhuǎn)圖像命名，也可以保持默認(rèn)值。（4）單擊“原始圖像”右側(cè)的“瀏覽”按鈕，打開(kāi)“原始圖像”對(duì)話框，從中選擇一幅圖像。（5）單擊“鼠標(biāo)經(jīng)過(guò)圖像”文本框右側(cè)的“瀏覽”按鈕，從中選擇另一幅圖像。（6）選中“預(yù)載鼠標(biāo)經(jīng)過(guò)圖像”復(fù)選框。（7）在“替換文本”文本框中輸入文字（8）在“按下是，前往的URL”文本框中輸入鏈接地址，或單擊右側(cè)的“瀏覽“按鈕，選擇一個(gè)鏈接目標(biāo)。（9）按下F12鍵打開(kāi)瀏覽器，當(dāng)鼠標(biāo)放到圖片上或離開(kāi)圖片時(shí)，就可以看到翻轉(zhuǎn)圖像的效果。第106頁(yè)插入Flash動(dòng)畫和Flash按鈕一個(gè)優(yōu)秀的網(wǎng)站包含的元素不僅僅有文字和圖片，為了增強(qiáng)網(wǎng)頁(yè)的表現(xiàn)力，豐富文檔的顯示效果，可以在網(wǎng)頁(yè)中插入Flash動(dòng)畫和動(dòng)態(tài)的Flash按鈕。Flash動(dòng)畫是一種高質(zhì)量的矢量動(dòng)畫，使用動(dòng)畫制作軟件Flash創(chuàng)建，其擴(kuò)展名為.swf。第107頁(yè)插入Flash動(dòng)畫在網(wǎng)頁(yè)中插入Flash動(dòng)畫的操作步驟如下：①選擇“插入”|“媒體”|“Flash”菜單命令，打開(kāi)如圖7-4-20所示的對(duì)話框。②在“選擇文件”對(duì)話框中選擇要插入的Flash動(dòng)畫文件，然后單擊“確定”按鈕，會(huì)將Flash動(dòng)畫文件的圖標(biāo)插入到文檔中。③選中插入的Flash動(dòng)畫圖標(biāo)，在窗口下方的屬性面板中可以修改其屬性，如圖7-4-21所示。④按F12鍵可以瀏覽插入的動(dòng)畫，動(dòng)畫會(huì)自動(dòng)播放。第108頁(yè)圖7-4-20選擇Flash動(dòng)畫文件對(duì)話框圖7-4-21Flash動(dòng)畫的屬性面板

插入

溫馨提示

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

評(píng)論

0/150

提交評(píng)論