計(jì)算機(jī)基礎(chǔ)第7章PPT

第7章網(wǎng)頁(yè)制作DreamweaverCS5概述7.1DreamweaverCS5界面7.2創(chuàng)建站點(diǎn)7.3制作網(wǎng)頁(yè)

7.4表單應(yīng)用

7.5第八章第六章目錄概述7.1DreamweaverCS5界面7.2創(chuàng)建站點(diǎn)7.3DreamweaverCS5界面7.2制作網(wǎng)頁(yè)

7.4創(chuàng)建站點(diǎn)7.3DreamweaverCS5界面7.2表單應(yīng)用

7.5制作網(wǎng)頁(yè)

7.4創(chuàng)建站點(diǎn)7.3DreamweaverCS5界面7.2創(chuàng)建站點(diǎn)7.3DreamweaverCS5界面7.2制作網(wǎng)頁(yè)

7.4創(chuàng)建站點(diǎn)7.3DreamweaverCS5界面7.2DreamweaverCS5界面7.2創(chuàng)建站點(diǎn)7.3DreamweaverCS5界面7.2制作網(wǎng)頁(yè)

7.4創(chuàng)建站點(diǎn)7.3DreamweaverCS5界面7.2創(chuàng)建站點(diǎn)7.3DreamweaverCS5界面7.2制作網(wǎng)頁(yè)

7.4創(chuàng)建站點(diǎn)7.3介紹DreamweaverCS5是Adobe公司推出的最新版本，通過(guò)該工具能夠高效地設(shè)計(jì)、開發(fā)和維護(hù)基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。它是一款專業(yè)化的網(wǎng)頁(yè)制作工具，支持最新的Web技術(shù)，包含HTML檢查、HTML格式控制、HTML格式化選項(xiàng)、Homesite/BBedit捆綁、可視化網(wǎng)頁(yè)設(shè)計(jì)、圖像編輯、全局查找替換、全FTP功能、處理Flash和Shockwave等多媒體格式，和動(dòng)態(tài)HTML、基于團(tuán)隊(duì)的Web創(chuàng)作。7.1概述7.1.1DreamweaverCS5的特點(diǎn)7.1.2基本概念

7.1.3網(wǎng)頁(yè)制作工具

7.1.4網(wǎng)站規(guī)劃7.1.1DreamweaverCS5的特點(diǎn)

1．業(yè)界領(lǐng)先的Web開發(fā)環(huán)境使用業(yè)界領(lǐng)先的Web創(chuàng)作工具構(gòu)建基于標(biāo)準(zhǔn)的網(wǎng)站，以可視方式或直接在代碼中工作，借助CSS檢查工具實(shí)現(xiàn)高效設(shè)計(jì)，借助內(nèi)容管理系統(tǒng)進(jìn)行開發(fā)。

2．集成CMS支持盡享對(duì)WordPress、Joomla!和Drupal等內(nèi)容管理系統(tǒng)框架的創(chuàng)作和測(cè)試支持?！皠?dòng)態(tài)相關(guān)文件”允許用戶直接訪問(wèn)某個(gè)頁(yè)面的相關(guān)文件，甚至可用于動(dòng)態(tài)頁(yè)面；“實(shí)時(shí)視圖導(dǎo)航”則提供動(dòng)態(tài)應(yīng)用程序的精確預(yù)覽。

3．全面的CSS支持借助功能強(qiáng)大的CSS工具設(shè)計(jì)和開發(fā)網(wǎng)站。無(wú)需另外提供實(shí)用程序就能以可視方式顯示CSS框模型，即使在外部樣式表中，也可以減少手動(dòng)編輯CSS代碼的需求。

4．集成FLV內(nèi)容通過(guò)輕松點(diǎn)擊和符合標(biāo)準(zhǔn)的編碼將FLV文件添加到任何網(wǎng)頁(yè)中。借助“實(shí)時(shí)視圖”中的FLV回放功能預(yù)覽影片。

5．站點(diǎn)特定的代碼提示從AdobeDreamweaverCS5中的非標(biāo)準(zhǔn)文件和目錄代碼提示中受益，它可以實(shí)現(xiàn)對(duì)WordPress、Drupal和Joomla!等第三方PHP庫(kù)和CMS框架的增強(qiáng)提示支持。7.1.2

基本概念

1．Web頁(yè)WWW（WorldWideWeb）是Internet上應(yīng)用最廣泛的一種服務(wù)。為了與傳統(tǒng)的網(wǎng)絡(luò)相區(qū)別，人們將WWW簡(jiǎn)稱為Web。Web站點(diǎn)是指具有共同主題、性質(zhì)相關(guān)的一組資源。Web頁(yè)包括的主要元素有：文本、圖像、超鏈接、導(dǎo)航欄、表格、表單、多媒體及特效等。（1）文本。文本是網(wǎng)頁(yè)的主體，在制作網(wǎng)頁(yè)時(shí)，可以設(shè)置文本的字體、字號(hào)、顏色以及其他格式。（2）圖像。圖像在網(wǎng)頁(yè)中可以起到美化網(wǎng)頁(yè)、展示作品、生動(dòng)形象等作用，可以用來(lái)作網(wǎng)站標(biāo)志（Logo）、網(wǎng)頁(yè)背景、鏈接按鈕、導(dǎo)航欄、網(wǎng)頁(yè)主圖等。（3）導(dǎo)航欄。導(dǎo)航欄能使瀏覽者方便地繼續(xù)下一頁(yè)或者返回主頁(yè)（4）超鏈接。超級(jí)鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁(yè)之間、站點(diǎn)與Web頁(yè)之間的鏈接關(guān)系，它可以使站內(nèi)的網(wǎng)頁(yè)成為有機(jī)的整體，還能使不同站點(diǎn)之間建立聯(lián)系。（5）表格。表格是用于控制網(wǎng)頁(yè)頁(yè)面布局的有效方法。使用表格布局網(wǎng)頁(yè)，可以實(shí)現(xiàn)橫豎分明的風(fēng)格。網(wǎng)頁(yè)中的表格除了具備傳統(tǒng)的表格存放和規(guī)劃數(shù)據(jù)的功能外，還可以用來(lái)定位網(wǎng)頁(yè)元素，即可用于網(wǎng)頁(yè)元素的排版。（6）表單。表單用于收集信息或者實(shí)現(xiàn)交互式的效果，主要功能是接收瀏覽者在瀏覽器端的輸入信息，然后將這些信息發(fā)送到服務(wù)器端。（7）多媒體。網(wǎng)頁(yè)中可以插入的多媒體文件包括聲音、影片、音頻文件、視頻文件、Flash對(duì)象、JavaApplet對(duì)象和ActiveX控件等。2．框架布局（1）框架。框架將瀏覽器的窗口分成多個(gè)區(qū)域，每個(gè)區(qū)域可以單獨(dú)顯示一個(gè)HTML文件，各個(gè)區(qū)域也可以相關(guān)聯(lián)地顯示某一個(gè)內(nèi)容。一般可以將索引放在一個(gè)區(qū)域，文件內(nèi)容顯示在另一個(gè)區(qū)域。單擊其中的某個(gè)鏈接時(shí)，鏈接的網(wǎng)頁(yè)將出現(xiàn)在其他框架中，而索引頁(yè)面本身不發(fā)生變化。在分配時(shí)，可以將窗口橫向或縱向分成多個(gè)部分，還可以混合框架。框架網(wǎng)頁(yè)的創(chuàng)建步驟和普通網(wǎng)頁(yè)不同，具體創(chuàng)建步驟如下。①創(chuàng)建框架結(jié)構(gòu)。首先需要?jiǎng)?chuàng)建一個(gè)新網(wǎng)頁(yè)，并將此網(wǎng)頁(yè)分割，從而獲得需要的框架結(jié)構(gòu)，并稱其為框架的主頁(yè)面。②設(shè)置框架。為分割后的框架制定或新建一個(gè)顯示具體內(nèi)容的頁(yè)面。③創(chuàng)建鏈接。為每個(gè)框架命名，并通過(guò)“屬性”面板為文本或圖像指定鏈接。④保存框架網(wǎng)頁(yè)。將所有的網(wǎng)頁(yè)全部保存。（2）框架集與框架的區(qū)別?？蚣苁菫g覽器窗口中的一個(gè)區(qū)域，可以顯示與瀏覽器窗口其余部分中所顯示內(nèi)容無(wú)關(guān)的HTML文檔?？蚣芗荋TML文件，定義了一組框架的布局和屬性。3．層布局

層（Layer）是一種HTML頁(yè)面元素，可以將它定位在頁(yè)面上的任意位置。層可以包含文本、圖像或其他任何可在HTML文檔中放入的文件。層的出現(xiàn)使網(wǎng)頁(yè)從二維平面拓展到三維，可以對(duì)頁(yè)面上的元素進(jìn)行重疊和復(fù)雜的布局?？梢允褂脤觼?lái)設(shè)計(jì)頁(yè)面的布局，將層前后放置，隱藏某些層而顯示其他層，以及在屏幕上移動(dòng)層，也可以在一個(gè)層中放置背景圖像，然后在該層的前面放置第二個(gè)層，它包含帶有透明背景的文本。4．CSS樣式

CSS（CascadingStyleSheets）是“層疊樣式表”的簡(jiǎn)稱，是一系列格式規(guī)則，是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式。CSS對(duì)顏色、字體、間隔、定位以及邊距等格式方面提供了多種屬性設(shè)置，這些屬性均可用于HTML標(biāo)記符。CSS最主要的目的是使頁(yè)面格式設(shè)置與頁(yè)面內(nèi)容分開，可以單獨(dú)設(shè)置樣式，然后應(yīng)用到頁(yè)面中，提高網(wǎng)頁(yè)設(shè)計(jì)和管理維護(hù)的效率。5．網(wǎng)頁(yè)、網(wǎng)站、主頁(yè)

①網(wǎng)頁(yè)是用HTML所編寫的具有豐富內(nèi)容的頁(yè)面。每一個(gè)網(wǎng)頁(yè)都是磁盤上的一個(gè)文件，可以單獨(dú)瀏覽。②網(wǎng)站是由大量?jī)?nèi)容相關(guān)的網(wǎng)頁(yè)通過(guò)超鏈接的形式組織成一個(gè)邏輯上的整體。網(wǎng)站主要包括計(jì)算機(jī)服務(wù)器、在服務(wù)器上運(yùn)行的網(wǎng)絡(luò)操作系統(tǒng)、Web服務(wù)器、應(yīng)用程序服務(wù)器軟件、各種信息服務(wù)的軟件資源、網(wǎng)站管理人員和開發(fā)人員等。③主頁(yè)是網(wǎng)站中的第一頁(yè)，是網(wǎng)站的出發(fā)點(diǎn)。6．網(wǎng)頁(yè)的類型（1）靜態(tài)網(wǎng)頁(yè)。靜態(tài)網(wǎng)頁(yè)是指沒有后臺(tái)數(shù)據(jù)庫(kù)、不含程序和不可交互的網(wǎng)頁(yè)。編的是什么它顯示的就是什么，不會(huì)有任何改變。它使用HTML描述。（2）動(dòng)態(tài)網(wǎng)頁(yè)。動(dòng)態(tài)網(wǎng)頁(yè)一般以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，它實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁(yè)文件。只有當(dāng)用戶請(qǐng)求時(shí)，服務(wù)器才返回一個(gè)完整的網(wǎng)頁(yè)。7.1.3網(wǎng)頁(yè)制作工具

以前的網(wǎng)頁(yè)一般是由專業(yè)人員利用HTML（HyperTextMarkupLanguage）語(yǔ)言編寫的?，F(xiàn)在有很多可視化程度很高的網(wǎng)頁(yè)制作工具，即便用戶沒有掌握專業(yè)的網(wǎng)頁(yè)制作技術(shù)，利用這些網(wǎng)頁(yè)制作工具，也能創(chuàng)作出風(fēng)格獨(dú)特、富有動(dòng)感的網(wǎng)頁(yè)。1．網(wǎng)頁(yè)編輯工具（1）Dreamweaver。Dreamweaver是網(wǎng)頁(yè)制作工具。它具有所見即所得的界面，也具有HTML編輯的功能。Dreamweaver支持ActiveX、JavaScript、Java、Flash、ShockWave等，還支持動(dòng)態(tài)HTML的設(shè)計(jì)，使得在沒有安裝插件的情況下，也可以在Netscape和IE瀏覽器中正確地顯示頁(yè)面的動(dòng)畫，同時(shí)Dreamweaver還提供了自動(dòng)更新頁(yè)面信息的功能。Dreamweaver集成了程序開發(fā)語(yǔ)言，對(duì)ASP、NET、PHP、JS的基本語(yǔ)言和連接操作數(shù)據(jù)庫(kù)都是完全支持的。（2）FrontPage。FrontPage是微軟Office系列軟件之一，繼承了Office界面通用、操作簡(jiǎn)單等特點(diǎn)。用戶可以像在Word中一樣直接進(jìn)行編輯，編輯的內(nèi)容也將由FrontPage自動(dòng)生成HTML網(wǎng)頁(yè)代碼。FrontPage特別適合初學(xué)者。2．網(wǎng)頁(yè)動(dòng)畫與圖像制作工具要想使網(wǎng)頁(yè)具有豐富多彩的圖像和動(dòng)畫，需要采用專門的圖像和動(dòng)畫處理制作軟件。（1）Photoshop。Photoshop是由Adobe公司開發(fā)的著名的圖形圖像處理軟件。它是專業(yè)圖像創(chuàng)作的首選軟件，能夠?qū)崿F(xiàn)各種專業(yè)化的圖像處理。（2）Flash。Flash是Macromedia公司專門為制作網(wǎng)頁(yè)而設(shè)計(jì)的交互性矢量動(dòng)畫設(shè)計(jì)軟件。使用它可以設(shè)計(jì)各種動(dòng)態(tài)Logo（商標(biāo)、圖案）、動(dòng)畫、導(dǎo)航條、動(dòng)感音樂，以及其他多媒體的各項(xiàng)功能。

（3）Fireworks。Fireworks是Macromedia公司專門設(shè)計(jì)的Web圖形工具軟件，它可以用較少的步驟生成較小但質(zhì)量很高的JPEG和GIF圖像，這些圖像可以直接用于網(wǎng)頁(yè)上。它是Web圖形工具的首選軟件。三種軟件能夠無(wú)縫合作。通常網(wǎng)頁(yè)制作的順序是，先在Fireworks中繪制主頁(yè)圖片，然后進(jìn)行切片，再將切片導(dǎo)出到Dreamweaver中，在Dreamweaver中編輯修改，添加鏈接，最后再導(dǎo)入用Flash制作的動(dòng)畫。7.1.4網(wǎng)站規(guī)劃1．網(wǎng)站定位網(wǎng)站定位要審時(shí)度勢(shì)，根據(jù)自身的條件、地域的條件等來(lái)決定網(wǎng)站的方向，即從地域上、人群上、方向上、內(nèi)容上去定位網(wǎng)站。2．收集資料網(wǎng)站定位好后，就要搜集相關(guān)的信息，作為制作網(wǎng)站的素材。信息要多多益善，更要精益求精。3．網(wǎng)站策劃策劃網(wǎng)站的整體風(fēng)格、網(wǎng)站的前臺(tái)內(nèi)容、前臺(tái)流程圖、后臺(tái)內(nèi)容、后臺(tái)流程圖、網(wǎng)站開發(fā)工具、網(wǎng)站功能等。可以參照相關(guān)的網(wǎng)站來(lái)整體策劃。整體風(fēng)格會(huì)給用戶帶來(lái)第一印象，前臺(tái)內(nèi)容能吸引用戶瀏覽網(wǎng)站，流程圖可以理順首頁(yè)和內(nèi)頁(yè)的連接，提供更加好的用戶體驗(yàn)。網(wǎng)站的整體策劃能更好地為網(wǎng)站建設(shè)服務(wù)。4．網(wǎng)站設(shè)計(jì)網(wǎng)站的內(nèi)容排版包括首頁(yè)的排版、頻道頁(yè)的排版和內(nèi)頁(yè)的排版，按照網(wǎng)站內(nèi)容的主次、特色來(lái)排版設(shè)計(jì)網(wǎng)站。5．主題欄的設(shè)置設(shè)計(jì)網(wǎng)站的主題欄與板塊時(shí)應(yīng)考慮以下幾個(gè)問(wèn)題。（1）突出主題。把主題欄放在最明顯的地方，讓瀏覽者快速、明確地知道網(wǎng)站所表現(xiàn)的內(nèi)容。（2）設(shè)計(jì)一個(gè)“最近更新”欄目，讓瀏覽者能夠一目了然地知道更新內(nèi)容。（3）欄目不要設(shè)置太多，一般不要超過(guò)10個(gè)。6．目錄結(jié)構(gòu)設(shè)計(jì)①按欄目?jī)?nèi)容建立子目錄。②每個(gè)目錄下分別為圖像文件創(chuàng)建一個(gè)子目錄image。③目錄的層次不要太深，主要欄目最好能直接從首頁(yè)到達(dá)。④盡量使用意義明確的非中文目錄名稱。7．顏色搭配合理利用色彩對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)非常關(guān)鍵。網(wǎng)頁(yè)選用的背景應(yīng)和頁(yè)面的色調(diào)相協(xié)調(diào)，色彩搭配要遵循和諧、均衡、重點(diǎn)突出的原則。8．網(wǎng)站LogoLogo如同商標(biāo)一樣，是站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)。Logo最重要的作用就是表達(dá)網(wǎng)站的理念，便于人們識(shí)別。設(shè)計(jì)Logo的原則是：以簡(jiǎn)潔的、符號(hào)化的視覺藝術(shù)把網(wǎng)站的形象和理念展示出來(lái)。9．版面布局網(wǎng)頁(yè)頁(yè)面的整體布局是不可忽視的。要合理地運(yùn)用空間，使網(wǎng)頁(yè)疏密有致，井井有條。版面布局一般應(yīng)遵循的原則是：突出重點(diǎn)、平衡和諧，將網(wǎng)站Logo、主菜單等較為重要的模塊放在突出的位置，然后再排放次要模塊（例如：搜索、友情鏈接、計(jì)數(shù)器、版權(quán)信息、E-mail地址等）。此外，其他頁(yè)面的設(shè)計(jì)應(yīng)和首頁(yè)保持相同的風(fēng)格，并有返回首頁(yè)的鏈接。10．圖像的運(yùn)用網(wǎng)頁(yè)上應(yīng)添加一些圖像，為網(wǎng)頁(yè)內(nèi)容服務(wù)，不能喧賓奪主。圖像要兼顧大小和美觀。圖像不僅要美觀，其大小（所占字節(jié)數(shù)）應(yīng)盡量小，以免影響網(wǎng)頁(yè)的傳輸速率。最好將圖像處理為GIF（顏色較少的）和JPEG（色彩較豐富的）格式。11．網(wǎng)站的推廣（網(wǎng)站優(yōu)化）網(wǎng)站的推廣包括關(guān)鍵詞的優(yōu)化，在其他已具有相當(dāng)知名度的網(wǎng)站上的推廣和交換連接，和其他站長(zhǎng)的經(jīng)驗(yàn)交流等。7.2DreamweaverCS5界面7.2.1DreamweaverCS5界面7.2.2HTML文件1．啟動(dòng)DreamweaverCS5正確安裝DreamweaverCS5之后，選擇【開始】|【所有程序】|【Adobe】|【AdobeDreamweaverCS5】命令，或雙擊桌面上的快捷圖標(biāo)，啟動(dòng)DreamweaverCS5應(yīng)用程序。2．DreamweaverCS5窗口界面啟動(dòng)DreamweaverCS5之后，出現(xiàn)如圖7.1所示的窗口，單擊【新建】組中的【HTML】選項(xiàng)，打開DreamweaverCS5的工作界面，如圖7.2所示。工作窗口主要由標(biāo)題欄、菜單欄、插入面板、文檔工具欄、文檔窗口、屬性面板和面板組7部分組成。7.2.1DreamweaverCS5界面圖7.1【DW】窗口2．DreamweaverCS5窗口界面啟動(dòng)DreamweaverCS5之后，出現(xiàn)如圖7.1所示的窗口，單擊【新建】組中的【HTML】選項(xiàng)，打開DreamweaverCS5的工作界面，如圖7.2所示。工作窗口主要由標(biāo)題欄、菜單欄、插入面板、文檔工具欄、文檔窗口、屬性面板和面板組7部分組成。圖7.2DreamweaverCS5工作界面DreamweaverCS5的工作窗口可以改變。單擊標(biāo)題欄右邊的【設(shè)計(jì)器】按鈕，彈出【設(shè)計(jì)器】下拉菜單，如圖7.3所示。選擇【經(jīng)典】菜單命令，工作窗口變成【經(jīng)典】窗口，如圖7.4所示。圖7.3【設(shè)計(jì)器】下拉菜單圖7.4【經(jīng)典】窗口1）【插入】面板：用于在文檔中插入各種對(duì)象及進(jìn)行一些簡(jiǎn)單的編輯。默認(rèn)顯示【常用】面板?？梢詥螕裘姘逯械拿Q按鈕，從彈出的子菜單中選擇其他類別，如圖7.5所示。圖7.5【插入】面板（2）文檔工具欄的主要作用是可以不使用菜單命令，僅通過(guò)它提供的快捷按鈕就可以方便地控制文檔的視圖顯示。文檔工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)。如圖7.6所示。（3）文檔窗口顯示當(dāng)前創(chuàng)建和編輯的文檔。圖7.6文檔工具欄（4）【屬性】面板用于查看和更改所選對(duì)象或文本的各種屬性。如圖7.7所示。（5）面板組是分組在某個(gè)標(biāo)題下面的相關(guān)面板的集合，如圖7.8所示。若要展開一個(gè)面板組，只要單擊名稱左側(cè)的展開箭頭，例如，單擊【文件】按鈕，展開【文件】面板，如圖7.9所示；再單擊【文件】按鈕，取消【文件】面板。圖7.7【屬性】面板圖7.8面板組圖7.9【文件】面板HTML可以通過(guò)專用的網(wǎng)頁(yè)設(shè)計(jì)工具編寫，如FrontPage、Dreamweaver，也可以用記事本、Word文檔編輯器等進(jìn)行HTML設(shè)計(jì)。創(chuàng)建HTML文件的步驟如下。（1）單擊【開始】|【AdobeDreamweaverCS5】命令，啟動(dòng)DreamweaverCS5，打開【DW】窗口。在【新建】組中選擇【HTML】鏈接，打開【DW】的網(wǎng)頁(yè)設(shè)計(jì)窗口。單擊【拆分】按鈕，窗口分為上下兩部分。上面為【代碼】窗口，下面為【設(shè)計(jì)】窗口。7.2.2HTML文件1．創(chuàng)建HTML文件（2）在上窗口輸入如下的HTML代碼，輸入代碼的窗口如圖7.10所示。<html>

<head>

<title>郁金香</title></head><bodybgcolor=#66FFFF><p><fontcolor="blue">郁金香</font></p><p><imgsrc="Tulips.jpg"width="152"height="127"alt="郁金香"></p></body></html>圖7.10輸入HTML代碼的窗口（3）選擇菜單【文件】|【保存】命令，打開【另存為】對(duì)話框，選擇保存位置，輸入文件名，如圖7.11所示。（4）單擊【在瀏覽器中預(yù)覽/調(diào)試】按鈕，彈出下拉菜單，如圖7.12所示，選擇【預(yù)覽在IExplore】命令，瀏覽該網(wǎng)頁(yè)。圖7.11【另存為】對(duì)話框圖7.12預(yù)覽菜單

標(biāo)準(zhǔn)的HTML文件都具有一個(gè)基本的整體結(jié)構(gòu)，即HTML文件的開頭與結(jié)尾、HTML的頭部和實(shí)體3大部分。HTML用于描述功能的符號(hào)稱為“標(biāo)記”，如上例中的HTML、BODY、IMG等。標(biāo)記在使用時(shí)必須用尖括號(hào)“<>”括起來(lái)，而且是成對(duì)出現(xiàn)，無(wú)斜杠的標(biāo)記表示該標(biāo)記的作用開始，有斜杠的標(biāo)記表示該標(biāo)記的作用結(jié)束。HTML文件的基本結(jié)構(gòu)可以用3個(gè)雙標(biāo)記符表示。（1）<HTML>和</HTML>雙標(biāo)記符：<HTML>標(biāo)記符說(shuō)明該文件是用HTML來(lái)描述的。它是文件的開頭，而</HTML>則表示該文件的結(jié)尾，它們是HTML文件的始標(biāo)記和尾標(biāo)記。2．HTML文檔的基本結(jié)構(gòu)和標(biāo)記（2）<HEAD>和</HEAD>頭部標(biāo)記符：這2個(gè)標(biāo)記符分別表示頭部信息的開始和結(jié)尾。頭部中包含的標(biāo)記是頁(yè)面的標(biāo)題、序言、說(shuō)明等內(nèi)容，它本身不作為內(nèi)容來(lái)顯示，但影響網(wǎng)頁(yè)顯示的效果。頭部中最常用的標(biāo)記符是標(biāo)題標(biāo)記符<TITLE>和</TITLE>，它用于定義網(wǎng)頁(yè)的標(biāo)題，它的內(nèi)容顯示在網(wǎng)頁(yè)窗口的標(biāo)題欄中，網(wǎng)頁(yè)標(biāo)題可被瀏覽器用作書簽和收藏清單。（3）<BODY>和</BODY>正文標(biāo)記符：網(wǎng)頁(yè)中顯示的實(shí)際內(nèi)容均包含在這2個(gè)正文標(biāo)記符之間。正文標(biāo)記符又稱為實(shí)體標(biāo)記。

（1）標(biāo)題：HTML支持6級(jí)標(biāo)題。第一級(jí)的標(biāo)題用<H1>和</H1>標(biāo)記，其中的文字在顯示時(shí)字號(hào)最大；其余的分別用<H2>和</H2>、<H3>和</H3>、……、<H6>和</H6>來(lái)標(biāo)記。（2）段落：<P>和</P>用來(lái)標(biāo)記段落，它將其內(nèi)的文字另起一段顯示。段與段之間有一個(gè)空行。如果文字另起一行顯示，可以用<BR>單標(biāo)記，作用是指定其后的文本另起一行。3．常用標(biāo)記（3）鏈接：HTML文件的鏈接是通過(guò)標(biāo)記<A>和</A>實(shí)現(xiàn)的。在<A>標(biāo)記中除標(biāo)記名“A”外還包括一些屬性。HREF是鏈接標(biāo)記中最常用的屬性，該屬性用來(lái)指出所要鏈接的文件的路徑和名稱或URL，其簡(jiǎn)單結(jié)構(gòu)形式為：<AHREF="被鏈接的文件名或URL">需要鏈接的文字</A>（4）圖像：利用<IMG>標(biāo)記可以在HTML文件中嵌入圖像，其中，屬性SRC用來(lái)指定圖像文件的名字。簡(jiǎn)單格式為：<Imgsrc="圖像文件名">網(wǎng)頁(yè)的核心是HTML，掌握HTML的語(yǔ)法規(guī)則是編輯網(wǎng)頁(yè)的基礎(chǔ)。另外，掌握HTML語(yǔ)言的語(yǔ)法規(guī)則后，使得學(xué)習(xí)Dreamweaver變得容易理解，而且可以脫離Dreamweaver等網(wǎng)頁(yè)編輯工具編輯網(wǎng)頁(yè)源代碼。7.2.4超級(jí)鏈接的操作

超級(jí)鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁(yè)之間，站點(diǎn)與Web頁(yè)之間的鏈接關(guān)系，它可以使站內(nèi)的網(wǎng)頁(yè)成為有機(jī)的整體，還能使不同站點(diǎn)之間建立聯(lián)系。DreamweaverMX2004提供了多種方法創(chuàng)建超級(jí)鏈接。屬性面板中常用的設(shè)置如下?！緢D像】：可在文本框中輸入圖像的名稱，在腳本語(yǔ)言中引用時(shí)使用，可以不設(shè)置?！靖吆蛯挕浚河脕?lái)設(shè)置圖像的大小?！驹次募浚捍丝蛴脕?lái)設(shè)置插入圖像的路徑及名稱，單擊右端的文件夾按鈕，可以重新選擇圖像?！敬怪边吘唷亢汀舅竭吘唷浚河脕?lái)設(shè)置圖像與其他對(duì)象的距離?！具吙颉浚河脕?lái)輸入圖像邊框的寬度?！緦?duì)齊】：用來(lái)設(shè)置圖像和其他對(duì)象的對(duì)齊方式。（1）網(wǎng)站為《計(jì)算機(jī)應(yīng)用基礎(chǔ)》精品課程網(wǎng)站，引導(dǎo)頁(yè)整體結(jié)構(gòu)如圖7.13所示。1、規(guī)劃網(wǎng)站圖7.13引導(dǎo)頁(yè)結(jié)構(gòu)7.3創(chuàng)建站點(diǎn)1、規(guī)劃網(wǎng)站2、建立本地站點(diǎn)3、定義遠(yuǎn)程服務(wù)器

4、設(shè)置默認(rèn)圖像文件夾（2）精品課程首頁(yè)的整體結(jié)構(gòu)如圖7.14所示。（3）確定顏色主色調(diào)為白底藍(lán)色前景。具體顏色在設(shè)計(jì)過(guò)程中設(shè)置。圖7.14精品課程首頁(yè)整體結(jié)構(gòu)（1）啟動(dòng)DreamweaverCS5，進(jìn)入項(xiàng)目界面。在【新建】組中單擊【HTML】鏈接，打開【拆分】窗口。（2）選擇菜單【站點(diǎn)】|【管理站點(diǎn)】命令，打開【管理站點(diǎn)】對(duì)話框，如圖7.15所示。2、建立本地站點(diǎn)圖7.15【管理站點(diǎn)】對(duì)話框（3）單擊【新建】按鈕，打開【站點(diǎn)設(shè)置對(duì)象】對(duì)話框，如圖7.16所示。（4）在【站點(diǎn)名稱】文本框中輸入站點(diǎn)名稱“jsjjpkc”，單擊【本地站點(diǎn)文件夾】文本框右邊的選擇按鈕，打開【選擇根文件夾】對(duì)話框。在【選擇】下拉列表框中選擇“D:\jpkc”，如圖7.17所示。圖7.16【站點(diǎn)設(shè)置對(duì)象】對(duì)話框圖7.17“站點(diǎn)定義”對(duì)話框（5）單擊【選擇】按鈕，可以看到【本地站點(diǎn)文件夾】文本框中設(shè)置為“D:\jpkc\”，如圖7.18所示。（6）單擊【保存】按鈕，返回【管理站點(diǎn)】對(duì)話框。可以看到所有命令按鈕都呈黑色可編輯，同時(shí)新建的站點(diǎn)名稱“jsjjpkc”出現(xiàn)在窗口中，如圖7.19所示。圖7.18【站點(diǎn)設(shè)置對(duì)象jsjjpkc】對(duì)話框圖7.19設(shè)置后的【管理站點(diǎn)】對(duì)話框（7）單擊【完成】按鈕，返回到DW窗口，同時(shí)，【文件】面板自動(dòng)展開，如圖7.20所示。圖7.20【文件】面板自動(dòng)展開（1）在【文件】面板中單擊【本地視圖】下拉列表框右邊的下拉按鈕，彈出下拉列表，如圖7.21所示。3、定義遠(yuǎn)程服務(wù)器圖7.21【本地視圖】下拉列表框（2）選擇【遠(yuǎn)程視圖】選項(xiàng)，單擊“定義遠(yuǎn)程視圖”鏈接，打開【站點(diǎn)設(shè)置對(duì)象jsjjpkc】的【服務(wù)器】對(duì)話框，如圖7.22所示。（3）在右窗口單擊【添加新服務(wù)器】按鈕，打開服務(wù)器設(shè)置對(duì)話框，如圖7.23所示。圖7.22【服務(wù)器】對(duì)話框（4）在【服務(wù)器名稱】文本框中輸入“l(fā)hm-Tlink”，在【連接方法】下拉列表框中選擇“本地/網(wǎng)絡(luò)”選項(xiàng)，單擊【服務(wù)器文件夾】右邊的文件夾按鈕，選擇服務(wù)器文件夾“D:\jpkc”，在【W(wǎng)ebURL】文本框中輸入“http://localhost/”.（5）單擊【保存】按鈕，再單擊【保存】按鈕，返回到【管理站點(diǎn)】對(duì)話框，單擊【完成】按鈕，返回到DW窗口。展開【文件】面板，可以看到遠(yuǎn)程服務(wù)器的添加情況（1）在本地的“D:\jpkc”文件夾下創(chuàng)建文件夾“image”。（2）打開【管理站點(diǎn)】對(duì)話框，單擊【編輯】按鈕，重新打開【站點(diǎn)設(shè)置對(duì)象jsjjpkc】對(duì)話框，選擇【高級(jí)設(shè)置】選項(xiàng)，打開默認(rèn)圖像文件夾設(shè)置對(duì)話框，如圖7.26所示。4、設(shè)置默認(rèn)圖像文件夾圖7.25遠(yuǎn)程服務(wù)器的添加情況圖7.26默認(rèn)圖像文件夾設(shè)置對(duì)話框（3）單擊【默認(rèn)圖像文件夾】右邊的文件夾圖標(biāo)，打開【選擇圖像文件夾】對(duì)話框，選擇存放圖像的默認(rèn)路徑“G:\jpkc\image”，如圖7.27所示。單擊【打開】命令按鈕，然后單擊【選擇】按鈕。（4）返回到設(shè)置后的【站點(diǎn)設(shè)置對(duì)象jsjjpkc】對(duì)話框，選擇【站點(diǎn)根目錄】單選項(xiàng)，如圖7.28所示。圖7.27【選擇圖像文件夾】對(duì)話框圖7.28選擇【站點(diǎn)根目錄】（5）單擊【保存】按鈕。（6）以后所制作的網(wǎng)頁(yè)相關(guān)資源的全部?jī)?nèi)容就可以直接復(fù)制到站點(diǎn)根文件夾“D:\jpkc”下，在本地計(jì)算機(jī)上就可以通過(guò)IE瀏覽器測(cè)試所制作的網(wǎng)頁(yè)。7.4表單應(yīng)用7.4.1表單的創(chuàng)建7.4.2表單對(duì)象的創(chuàng)建

1．向站點(diǎn)添加所需要的空網(wǎng)頁(yè)（1）新建一HTML文件，選擇菜單【文件】|【保存】命令，打開【另存為】對(duì)話框。將文檔保存在文件夾“D:\jpkc\”中，名稱為“index.html”，如圖7.30所示。7.4.1添加空網(wǎng)頁(yè)圖7.30【另存為】對(duì)話框（2）單擊【保存】按鈕，將文檔保存為“index”文檔。2．設(shè)置網(wǎng)頁(yè)頁(yè)面屬性（1）在“index.html”網(wǎng)頁(yè)中，選擇菜單【窗口】|【屬性】命令，【屬性】面板出現(xiàn)在網(wǎng)頁(yè)下方，如圖7.31所示。圖7.31【屬性】面板（2）單擊【頁(yè)面屬性】按鈕，打開【頁(yè)面屬性】對(duì)話框，如圖7.32所示。圖7.32【頁(yè)面屬性】對(duì)話框（3）單擊【頁(yè)面字體】右邊的下拉箭頭，在下拉列表中選擇【編輯字體列表】選項(xiàng)，如圖7.33所示。圖7.33字體下拉列表（4）打開【編輯字體列表】對(duì)話框。在【可用字體】列表框中選擇【宋體】，單擊添加按鈕，將“宋體”添加到【選擇的字體】列表框中，同時(shí)“宋體”出現(xiàn)在上面的【字體列表】中，如圖7.34所示。圖7.34【編輯字體列表】對(duì)話框（5）單擊【確定】按鈕，返回【頁(yè)面屬性】對(duì)話框。在【頁(yè)面字體】下拉列表中選擇“宋體”；在“大小”下拉列表中選擇“12”，單位選擇“像素”等，如圖7.35所示。（6）在“分類”列表框中選擇【標(biāo)題】選項(xiàng)，屬性設(shè)置如圖7.36所示。圖7.35“外觀”設(shè)置圖7.36【標(biāo)題】屬性設(shè)置1．插入表格（1）在“index.html”網(wǎng)頁(yè)中，單擊網(wǎng)頁(yè)空白處，選擇菜單【插入】|【表格】命令，或者單擊【常用】工具欄中的【表格】工具按鈕，打開【表格】對(duì)話框，如圖7.37所示。（2）根據(jù)需要設(shè)置各參數(shù)，單擊【確定】按鈕，插入的表格如圖7.38所示。7.4.2創(chuàng)建表格圖7.37【表格】對(duì)話框圖7.38插入的表格2．選定表格元素（1）選定一行：把鼠標(biāo)移到要選定行的最左邊單元格的左邊框上，鼠標(biāo)變成向右的小黑箭頭狀，單擊鼠標(biāo)。（2）選定一列：把鼠標(biāo)移到要選定列的上邊框上，鼠標(biāo)變成向下的小黑箭頭狀，單擊鼠標(biāo)。（3）選定連續(xù)單元格區(qū)域：?jiǎn)螕暨x定第一個(gè)單元格，按下【Shift】鍵不放，單擊選定最后一個(gè)單元格。（4）選定不連續(xù)單元格區(qū)域：按下【Ctrl】鍵不放，單擊選定所需要的單元格。（5）選定整張表格：把鼠標(biāo)移到表格的左上角（右邊框或下邊框線）上，單擊，即可選定整張表格。3．插入表格元素（1）插入行：將光標(biāo)定位在單元格內(nèi)，選擇菜單【修改】|【表格】|【插入行】命令。（2）插入列：將光標(biāo)定位在單元格內(nèi)，選擇菜單【修改】|【表格】|【插入列】命令。4．刪除表格元素（1）刪除行：將光標(biāo)定位在單元格內(nèi)，選擇菜單【修改】|【表格】|【刪除行】命令。（2）刪除列：將光標(biāo)定位在單元格內(nèi)，選擇菜單【修改】|【表格】|【刪除列】命令。5．合并單元格（1）選定要合并的單元格，選擇菜單【修改】|【表格】|【合并單元格】命令；（2）或者右擊鼠標(biāo)，在彈出的快捷菜單上選擇【表格】|【合并單元格】命令。6．拆分單元格圖7.39【拆分單元格】對(duì)話框（1）選定要拆分的單元格，選擇菜單【修改】|【表格】|【拆分單元格】命令；（2）或者右擊鼠標(biāo)，在彈出的快捷菜單上選擇【表格】|【拆分單元格】命令，打開【拆分單元格】對(duì)話框，如圖7.39所示。（3）設(shè)置需要拆分的【行數(shù)】，單擊【確定】按鈕。圖7.39【拆分單元格】對(duì)話框7．調(diào)整表格的大小（1）選定整個(gè)表格。（2）調(diào)整整個(gè)表格的大?。河檬髽?biāo)拖動(dòng)右下角的尺寸柄，斜向拉出如圖7.40所示的虛線框，大小合適時(shí)松開鼠標(biāo)。（3）調(diào)整水平方向表格的大小：用鼠標(biāo)拖動(dòng)右邊的尺寸柄，向右拉出如圖7.41所示的虛線框，大小合適時(shí)松開鼠標(biāo)。（4）調(diào)整垂直方向表格的大小：用鼠標(biāo)拖動(dòng)底邊的尺寸柄，向下拉出虛線框，大小合適時(shí)松開鼠標(biāo)。（5）調(diào)整表格的行高：將鼠標(biāo)移到表格的行線上，當(dāng)鼠標(biāo)變成上下箭頭時(shí)，上下拖動(dòng)鼠標(biāo)。（6）調(diào)整表格的列寬：將鼠標(biāo)移到表格的列線上，當(dāng)鼠標(biāo)變成左右箭頭時(shí)，左右拖動(dòng)鼠標(biāo)。圖7.40調(diào)整整個(gè)表格的大小圖7.41調(diào)整水平方向表格的大小8．設(shè)置表格屬性選定表格后，可以用【屬性】面板來(lái)為表格設(shè)置屬性。如圖7.42所示。圖7.42表格【屬性】面板①行和列：輸入表格的行數(shù)和列數(shù)。②寬：用于指定表格的寬度，單位一般是像素或百分比。③填充：用于指定單元格內(nèi)容和單元格邊框之間的像素?cái)?shù)。④間距：用于指定相鄰單元格之間的像素?cái)?shù)。⑤對(duì)齊：用于選擇表格相對(duì)于同一段落中其他元素的顯示位置。⑥邊框：用于設(shè)置表格的邊框線寬。如果在網(wǎng)頁(yè)中不想看到邊框線，可以將其設(shè)置為0。9．向表格內(nèi)部添加表格圖7.43向表格內(nèi)部添加表格（1）新建一個(gè)表格。（2）單擊需要插入表格的單元格，再次執(zhí)行插入表格操作，如圖7.43所示。圖7.43向表格內(nèi)部添加表格7.4.3插入文本1．插入文本（1）將光標(biāo)定位在文檔窗口中要插入文本的位置，直接輸入文本。（2）或者在其他編輯器中生成的文本上單擊右鍵，在快捷菜單選擇【復(fù)制】命令，在文檔窗口中要插入文本的位置右擊，在快捷菜單中選擇【粘貼】命令。如果要輸入多個(gè)連續(xù)的空格，則選擇菜單【編輯】|【首選參數(shù)】命令，打開【首選參數(shù)】對(duì)話框。選擇【分類】列表框中的【常規(guī)】選項(xiàng)，在【編輯選項(xiàng)】下選擇【允許多個(gè)連續(xù)的空格】復(fù)選項(xiàng)，2．插入特殊字符（1）將光標(biāo)定位在文檔窗口中要插入特殊字符的位置。（2）選擇菜單【插入】|【HTML】|【特殊字符】命令，在級(jí)聯(lián)菜單中單擊需要的特殊字符命令。（3）或者選擇菜單【窗口】|【插入】命令，在窗口上方出現(xiàn)【插入】面板，如圖7.45所示。圖7.45【插入】面板（4）單擊【文本】選項(xiàng)卡，切換為如圖7.46所示的【文本】工具欄。圖7.46【文本】工具欄（5）單擊最右邊的【字符】工具按鈕旁邊的下拉箭頭，在拉出的列表中選擇【其他字符】選項(xiàng)，打開【插入其他字符】對(duì)話框，如圖7.47所示。（6）選擇需要的字符，單擊【確定】按鈕。圖7.47【插入其他字符】對(duì)話框3．插入水平線（1）將光標(biāo)定位于要插入水平線的位置。（2）選擇菜單【插入】|【HTML】|【水平線】命令，就可以插入水平線。（3）單擊選定“水平線”，打開【屬性】面板，如圖7.48所示。對(duì)水平線進(jìn)行屬性設(shè)置。圖7.48水平線【屬性】面板4．設(shè)置文本屬性選定文本，通過(guò)設(shè)置【屬性】面板中各個(gè)參數(shù)（見如圖7.49），改變文本的字體、顏色、大小和對(duì)齊方式等。圖7.49文本【屬性】面板7.4.4插入圖像1．插入圖像（1）將光標(biāo)定位于文檔窗口中要插入圖像的位置，選擇菜單【插入】|【圖像】命令。（2）或者在【插入】面板中單擊【常用】選項(xiàng)卡，切換為【常用】工具欄。（3）單擊【圖像】工具按鈕旁邊的下拉箭頭，在拉出的列表中選擇【圖像】選項(xiàng)，打開【選擇圖像源文件】對(duì)話框，如圖7.50所示。選擇圖像后單擊【確定】按鈕，即可插入圖像。圖7.50【選擇圖像源文件】對(duì)話框2．設(shè)置圖像屬性選定需要編輯的圖像，調(diào)整【屬性】面板中各個(gè)參數(shù)，如圖7.51所示，對(duì)圖像的大小、圖像的名稱、超級(jí)鏈接和對(duì)齊方式進(jìn)行編輯。圖7.51圖像【屬性】面板屬性面板中常用的設(shè)置如下。①高和寬：用來(lái)設(shè)置圖像的大小。②源文件：此框用來(lái)設(shè)置插入圖像的路徑及名稱，單擊右端的文件夾按鈕，可以重新選擇圖像。③垂直邊距和水平邊距：用來(lái)設(shè)置圖像與其他對(duì)象的距離。④邊框：用來(lái)輸入圖像邊框的寬度。⑤對(duì)齊：用來(lái)設(shè)置圖像和其他對(duì)象的對(duì)齊方式。⑥替換：輸入圖像的說(shuō)明文字。當(dāng)鼠標(biāo)停留于圖片上或者圖像不能正常顯示時(shí)，在其相應(yīng)區(qū)域?qū)@示說(shuō)明文字。⑦類：選擇應(yīng)用已經(jīng)定義好的CSS樣式。⑧地圖：創(chuàng)建圖像熱點(diǎn)地圖，包括矩形熱點(diǎn)工具、橢圓形熱點(diǎn)工具、多邊形熱點(diǎn)工具。⑨目標(biāo)：設(shè)置鏈接文件顯示的目標(biāo)位置。3．編輯圖像圖7.52圖像“編輯”工具（1）選定圖像。（2）利用圖像【屬性】面板中的圖像“編輯”工具，如圖7.52所示，對(duì)圖形進(jìn)行編輯。圖7.52圖像“編輯”工具7.4.5插入多媒體1．插入音頻（1）將光標(biāo)定位于插入音樂文件的位置。（2）在【常用】工具欄中單擊【媒體】按鈕右邊的下拉箭頭，彈出下拉列表，如圖7.53所示。（3）單擊【插件】選項(xiàng)，打開【選擇文件】對(duì)話框，選擇音頻文件，單擊【確定】按鈕，如圖7.54所示。圖7.53【媒體】按鈕下拉列表圖7.54【選擇文件】對(duì)話框（4）返回到窗口中，光標(biāo)所在位置出現(xiàn)圖標(biāo)。如果要將插入的音頻文件作為背景音樂，單擊選定圖標(biāo)，出現(xiàn)音頻文件【屬性】面板，如圖7.55所示。圖7.55音頻文件【屬性】面板（5）單擊【參數(shù)】按鈕，打開【參數(shù)】對(duì)話框，如圖7.56所示。（6）在【參數(shù)】下方單擊，出現(xiàn)文本框，輸入“hidden”，在“值”文本框中輸入“true”；單擊上面的【+】按鈕，在【參數(shù)】文本框中輸入“autostart”，在【值】文本框中輸入“true”；在【參數(shù)】文本框中輸入“l(fā)oop”，在【值】文本框中輸入“infinite”，單擊【確定】按鈕，如圖7.57所示。圖7.56【參數(shù)】對(duì)話框圖7.57設(shè)置后的【參數(shù)】對(duì)話框2．插入Flash動(dòng)畫（1）將光標(biāo)定位于插入Flash文件的位置，在【常用】工具欄中單擊【媒體】按鈕右邊的下拉箭頭，在拉出的下拉列表中單擊【Flash】選項(xiàng)。（2）打開【選擇文件】對(duì)話框，選擇Flash文件，單擊【確定】按鈕。（3）如果要將動(dòng)畫背景透明化，選定Flash文件，出現(xiàn)動(dòng)畫【屬性】面板，如圖7.58所示。圖7.58動(dòng)畫【屬性】面板（4）單擊【參數(shù)】按鈕，打開【參數(shù)】對(duì)話框。在【參數(shù)】文本框中輸入“wmode”，在【值】文本框中輸入“transparent”。單擊【確定】按鈕，動(dòng)畫背景就會(huì)變得透明。7.4.6設(shè)置超鏈接1．站內(nèi)網(wǎng)頁(yè)之間的鏈接（1）在網(wǎng)頁(yè)中選定要作為超鏈接的文本或者圖片，在【屬性】面板中的【鏈接】文本框中輸入鏈接文件，并保存。（2）創(chuàng)建鏈接后，按【F12】鍵瀏覽網(wǎng)頁(yè)時(shí)，將光標(biāo)指向鏈接對(duì)象，光標(biāo)變成小手形狀，表示該對(duì)象已經(jīng)創(chuàng)建超鏈接，單擊后打開目標(biāo)文件窗口。2．創(chuàng)建電子郵件鏈接（1）選定要?jiǎng)?chuàng)建郵件鏈接的文本，在【屬性】面板中的【鏈接】文本框中輸入“mailto:hong

meil66@”。（2）或者選擇菜單【插入】|【電子郵件鏈接】命令，打開【電子郵件鏈接】對(duì)話框。（3）在【文本】文本框中輸入“聯(lián)系我們”，在【E-mail】文本框中輸入“hongmeil66@”，如圖7.60所示。圖7.60【電子郵件鏈接】對(duì)話框（4）單擊【確定】按鈕。瀏覽網(wǎng)頁(yè)時(shí)，單擊“聯(lián)系我們”，就會(huì)啟動(dòng)Outlook軟件，即可書寫電子郵件。3．創(chuàng)建空鏈接選定要?jiǎng)?chuàng)建空鏈接的對(duì)象，在【屬性】面板的【鏈接】文本框中輸入“#”即可。4．創(chuàng)建下載鏈接（1）選定要?jiǎng)?chuàng)建下載鏈接的文本，在【屬性】面板中，單擊【鏈接】文本框右側(cè)的文件夾按鈕，打開【選擇文件】對(duì)話框，如圖7.61所示。圖7.61【選擇文件】對(duì)話框（2）在對(duì)話框中選擇要鏈接的文件，單擊【確定】按鈕。（3）瀏覽網(wǎng)頁(yè)時(shí)，單擊鏈接文本，彈出【文件下載】對(duì)話框，進(jìn)行下載文件。5．創(chuàng)建錨記鏈接（1）定位光標(biāo)于創(chuàng)建命名錨記的位置，選擇菜單【插入】|【命名錨記】命令，打開【命名錨記】對(duì)話框。（2）在【錨記名稱】文本框中輸入錨的名稱，如圖7.62所示。單擊【確定】按鈕。（3）可以看到在文檔窗口中出現(xiàn)錨標(biāo)記。（4）選定要建立錨記鏈接的文本或圖像。（5）在【屬性】面板中的【鏈接】文本框中輸入錨記名稱及其相應(yīng)前綴。圖7.62【命名錨記】對(duì)話框7.4.7創(chuàng)建框架1．創(chuàng)建框架（1）新建一個(gè)HTML文件，在【插入】面板中單擊【布局】選項(xiàng)卡，工具欄切換為【布局】工具欄，如圖7.63所示。（2）單擊【框架】工具按鈕右邊的下拉箭頭，拉出框架列表，如圖7.64所示。圖7.63【布局】工具欄（3）單擊【左側(cè)框架】選項(xiàng)，打開【框架標(biāo)簽輔助功能屬性】對(duì)話框，為每一個(gè)框架制定一個(gè)標(biāo)題，如圖7.65所示。圖7.64框架列表圖7.65【框架標(biāo)簽輔助功能屬性】對(duì)話框（4）選定框架，出現(xiàn)框架【屬性】面板，如圖7.66所示。（5）如果要調(diào)整框架的寬度，可以直接拖動(dòng)框架的邊框。（6）選擇菜單【文件】|【保存全部】命令，將會(huì)兩次彈出【另存為】對(duì)話框。圖7.66框架【屬性】面板2．創(chuàng)建框架內(nèi)的鏈接制作在左框架單擊某項(xiàng)后，在右框架顯示內(nèi)容。（1）在左框架中選定要鏈接的文本，單擊【屬性】面板中【鏈接】文本框右邊的文件夾圖標(biāo)，選擇要鏈接的網(wǎng)頁(yè)。（2）在【目標(biāo)】下拉列表中選擇“mainframe”，即在“mainframe”框架中打開鏈接的網(wǎng)頁(yè)。7.4.9CSS樣式1．創(chuàng)建CSS樣式（1）選擇菜單【窗口】|【CSS樣式】命令，在窗口右邊出現(xiàn)【CSS樣式】面板，如圖7.68所示。（2）單擊【規(guī)則】下的“#apDiv1”，在彈出的快捷菜單中選擇【新建】命令，打開【新建CSS規(guī)則】對(duì)話框，在【選擇器名稱】框中輸入“apdiv1”，在【定義在】選項(xiàng)組中選擇“新建樣式表文件”，單擊【確定】按鈕，如圖7.69所示。圖7.68【CSS樣式】面板1．創(chuàng)建層（1）在【布局】工具欄中單擊【繪制APDiv】工具按鈕，鼠標(biāo)變成十字形，拖動(dòng)鼠標(biāo)，即可繪制出一個(gè)層。（2）或者選擇菜單【插入】|【布局對(duì)象】|【APDiv】命令，也可以創(chuàng)建層。（3）將一個(gè)層拖入另一個(gè)層可以實(shí)現(xiàn)層的嵌套。（4）選擇一個(gè)層，出現(xiàn)層【屬性】面板，如圖7.67所示。調(diào)整各參數(shù)可以對(duì)層進(jìn)行設(shè)置。7.4.8創(chuàng)建層圖7.67層【屬性】面板（3）單擊【確定】按鈕，打開【保存樣式表文件為】對(duì)話框，選擇路徑保存樣式表，輸入樣式表文件名“kj”，如圖7.70所示。圖7.70【保存樣式表文件為】對(duì)話框圖7.69【新建CSS規(guī)則】對(duì)話框（4）單擊【保存】按鈕，打開“apdiv1的CSS規(guī)則定義”對(duì)話框，如圖7.71所示。（5）在對(duì)話框中設(shè)置各種對(duì)象的屬性，單擊【確定】按鈕。即可在CSS樣式面板中看到新建的CSS樣式，如圖7.72所示。圖7.71【apdiv1的CSS規(guī)則定義】對(duì)話框圖7.72新建的樣式2．應(yīng)用CSS樣式選定要應(yīng)用樣式的文本，右擊【CSS樣式】面板中要應(yīng)用的樣式，從彈出的快捷菜單中選擇【套用】命令，即可應(yīng)用CSS樣式。3．管理CSS樣式（1）在【CSS樣式】面板中，右擊樣式“apDiv1”，在彈出的快捷菜單中選擇【編輯】命令，打開【.apdiv1的CSS規(guī)則定義】對(duì)話框，如圖