計算機基礎第7章PPT

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

7.4表單應用

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

7.4創(chuàng)建站點7.3DreamweaverCS5界面7.2表單應用

7.5制作網(wǎng)頁

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

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

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

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

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

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

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

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

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

4．集成FLV內容通過輕松點擊和符合標準的編碼將FLV文件添加到任何網(wǎng)頁中。借助“實時視圖”中的FLV回放功能預覽影片。

5．站點特定的代碼提示從AdobeDreamweaverCS5中的非標準文件和目錄代碼提示中受益，它可以實現(xiàn)對WordPress、Drupal和Joomla!等第三方PHP庫和CMS框架的增強提示支持。7.1.2

基本概念

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

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

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

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

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

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

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

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

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

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

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

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