《多媒體制作技術(shù)及應(yīng)用》ch 網(wǎng)站設(shè)計

第九章網(wǎng)站設(shè)計9.1網(wǎng)站設(shè)計基本知識9.1網(wǎng)站設(shè)計基本知識9.1.1網(wǎng)站設(shè)計WEB網(wǎng)站是由HomePage和相關(guān)網(wǎng)頁構(gòu)成的超文本信息的集合，網(wǎng)頁按一定的組織結(jié)構(gòu)和順序組合起來，使瀏覽者在訪問該網(wǎng)站時能連接到各個網(wǎng)頁來觀看網(wǎng)頁內(nèi)容。用戶可以使用瀏覽器（如微軟的InternetExplorer）瀏覽這些頁面的內(nèi)容。網(wǎng)站設(shè)計，就是用HTML把多種媒體信息有效地組織起來，使瀏覽者高效、便捷地獲取這些信息。網(wǎng)站設(shè)計包含的內(nèi)容大體分兩個方面：一方面是信息的處理和組織，另一方面是網(wǎng)站的延伸設(shè)計。9.1網(wǎng)站設(shè)計基本知識9.1.2網(wǎng)頁文件的規(guī)劃與創(chuàng)意一個網(wǎng)站的成功與否，很重要的一個因素在于它的構(gòu)思、內(nèi)容的組織、好的創(chuàng)意及豐富詳實的內(nèi)容?；驹O(shè)計思路：1．網(wǎng)站的目標(biāo)與定位2．網(wǎng)頁的組織結(jié)構(gòu)3．資料的收集與整理4．選擇網(wǎng)頁的設(shè)計方法5．網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計9.1網(wǎng)站設(shè)計基本知識9.1.3網(wǎng)頁制作軟件構(gòu)成WEB網(wǎng)站頁面的HTML文件是標(biāo)準(zhǔn)的ASCII文件，看起來像是加入了許多被稱為標(biāo)簽（tag）的特殊字符串的普通文本文件，我們可以用普通的文本編輯器制作和編輯。但使用文本編輯器制做網(wǎng)頁非常繁瑣而且不易布局和定位。目前有很多專門的網(wǎng)頁制作工具軟件，各有特色。9.1網(wǎng)站設(shè)計基本知識9.1.3網(wǎng)頁制作軟件

1．DreamWeaverDreamWeaver是一個功能強大的專業(yè)網(wǎng)頁設(shè)計軟件，包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等，還能通過拖拽從頭到尾制作動態(tài)的HTML動畫，支持動態(tài)HTML（DynamicHTML）的設(shè)計。同時它還提供了自動更新頁面信息的功能。DreamWeaver采用了RoundtripHTML技術(shù)。這項技術(shù)使得網(wǎng)頁在DreamWeaver和HTML代碼編輯器之間進行自由轉(zhuǎn)換，HTML句法及結(jié)構(gòu)不變。這樣，專業(yè)設(shè)計者可以在不改變原有編輯習(xí)慣的同時，充分享受到可視化編輯帶來的益處。DreamWeaver具挑戰(zhàn)性和生命力的是它的開放式設(shè)計，這項設(shè)計使任何人都可以輕易擴展它的功能。9.1網(wǎng)站設(shè)計基本知識9.1.3網(wǎng)頁制作軟件

2．MicrosoftFrontPage如果對Word很熟悉，那么用FrontPage進行網(wǎng)頁設(shè)計一定會非常順手。FrontPage功能強大，簡單易用。頁面制作由Frontpage中的Editor完成，其工作窗口由3個標(biāo)簽頁組成，分別是“所見即所得”的編輯頁，HTML代碼編輯頁，預(yù)覽頁。Frontpage帶有圖形和GIF動畫編輯器，支持CGI和CSS。向?qū)Ш湍０宥寄苁钩鯇W(xué)者在編輯網(wǎng)頁時感到更加方便。站點管理功能強大，在更新服務(wù)器上的站點時，不需要創(chuàng)建更改文件的目錄，F(xiàn)rontPage會跟蹤文件并拷貝那些新版本文件。9.1網(wǎng)站設(shè)計基本知識9.1.3網(wǎng)頁制作軟件

3．Netscape編輯器NetscapeCommunicator和NetscapeNavigatorGold版本的瀏覽器都帶有網(wǎng)頁編輯器。當(dāng)用Netscape瀏覽器顯示網(wǎng)頁時，單擊編輯按鈕，Netscape就會把網(wǎng)頁存儲在硬盤中，然后就可以開始編輯。可以像使用Word那樣編輯文字、字體、顏色，改變主頁作者、標(biāo)題、背景顏色或圖像，定義錨點，插入鏈接，定義文檔編碼，插入圖像，創(chuàng)建表格等。Netscape編輯器是網(wǎng)頁制作初學(xué)者很好的入門工具。如果網(wǎng)頁主要是由文本和圖片組成的，Netscape編輯器將是一個輕松的選擇。9.1網(wǎng)站設(shè)計基本知識9.1.3網(wǎng)頁制作軟件

4．AdobePagemillPagemill功能不算強大，但使用起來很方便，適合初學(xué)者制作較為美觀、而不是非常復(fù)雜的主頁。能夠很方便地編輯需要很多框架、表單和ImageMap圖像的網(wǎng)頁。Pagemill創(chuàng)建多框架頁十分方便，可以同時編輯各個框架中的內(nèi)容。Pagemill在服務(wù)器端或客戶端都可創(chuàng)建與處理ImageMap圖像，也支持表單創(chuàng)建。Pagemill允許在HTML代碼上編寫和修改，支持大部分常見的HTML擴展，還提供拼寫檢錯、搜索替換等文檔處理工具。在Pagemill3.0增加了站點管理能力，但仍不支持CSS、TrueDoc和動態(tài)HTML等高級特性。Pagemill另一大特色是有一個剪貼板，可以將任意多的文本、圖形、表格拖放到里面，需要時再打開，很方便。9.1網(wǎng)站設(shè)計基本知識9.1.3網(wǎng)頁制作軟件

5．ClarisHomePage如果使用ClarisHomePage軟件，可以在幾分鐘之內(nèi)創(chuàng)建一個動態(tài)網(wǎng)頁。它有一個很好的創(chuàng)建和編輯Frame（框架）的工具，不必花費太多的力氣就可以增加新的Frame（框架）。而且ClarisHomePage3.0集成了FileMaker數(shù)據(jù)庫，增強的站點管理特性還允許檢測頁面的合法連接。9.1網(wǎng)網(wǎng)站設(shè)計計基本知識識9.1.3網(wǎng)頁頁制作軟件件6．HotDogProfessionalHotDog是較早早基于代碼碼的網(wǎng)頁設(shè)設(shè)計工具，，其最具特特色的是提提供了許多多向?qū)Чぞ呔撸軒椭O(shè)計者制制作頁面中中的復(fù)雜部部分。HotDog對plugin的的支持也遠遠遠超過其其他產(chǎn)品，，它提供的的對話框允允許以手動動方式為不不同格式的的文件選擇擇不同的選選項。HotDog是個功功能強大的的軟件，對對于那些希希望在網(wǎng)頁頁中加入CSS、Java、、RealVideo等復(fù)雜雜技術(shù)的高高級設(shè)計者者，是個很很好的選擇擇。9.1網(wǎng)網(wǎng)站設(shè)計計基本知識識9.1.3網(wǎng)頁頁制作軟件件7．HomeSiteAllaire的HomeSite是是一個小巧巧而全能的的HTML代碼編輯輯器，有豐豐富的幫助助功能，支支持CGI和CSS等等，并并且可以直直接編輯Perl程程序。HomeSite工作界面面繁簡由人人，根據(jù)習(xí)習(xí)慣，可以以將其設(shè)置置成像Notepad那樣簡簡單的編輯輯窗口，也也可以在復(fù)復(fù)雜的界面面下工作。。HomeSite具具有良好的的站點管理理功能，鏈鏈接確認(rèn)向向?qū)Э梢詸z檢查一個或或多個文檔檔的鏈接狀狀況。HomeSite適合合那些比較較復(fù)雜和精精彩頁面的的設(shè)計。9.1網(wǎng)網(wǎng)站設(shè)計計基本知識識9.1.3網(wǎng)頁頁制作軟件件8．HotMetalProHotMetal既既提供“所所見即所得得”圖形制制作方式，，又提供代代碼編輯方方式，是個個令各層次次設(shè)計者都都不至于失失望的軟件件。但是初初學(xué)者需要要熟知HTML，才才能得心應(yīng)應(yīng)手地使用用這個軟件件。HotMetal具具有強大的的數(shù)據(jù)嵌入入能力，利利用它的數(shù)數(shù)據(jù)插入向向?qū)?，可以以把外部的的Access、Word、、Excel以及其其他ODBC數(shù)據(jù)，，放入頁面面中，而且且能夠把它它們自動轉(zhuǎn)轉(zhuǎn)換為HTML格式式，此外它它還能轉(zhuǎn)換換很多老格格式的文檔檔（如WordStar等）），并能在在轉(zhuǎn)換過程程中把這些些文檔里的的圖片自動動轉(zhuǎn)換為GIF格式式。HotMetal為用戶戶提供了很很多工具，，還可以用用網(wǎng)狀圖或或樹狀圖表表現(xiàn)整個站站點文檔的的鏈接狀況況。9.1網(wǎng)網(wǎng)站設(shè)計計基本知識識9.1.4HTML語言言HTML語語言是網(wǎng)頁頁制作的基基礎(chǔ)。雖然然現(xiàn)在有許許多所見即即所得的網(wǎng)網(wǎng)頁制作工工具，但還還是有必要要了解一些些HTML的語法。。這樣，可可以更精確確的控制頁頁面的排版版，可以實實現(xiàn)更多的的功能。HTML不不是程序語語言，它只只是標(biāo)識語語言，格式式非常簡單單，只是由由文字及標(biāo)標(biāo)簽組合而而成，可直直接使用普普通的文本本編輯器進進行編輯。。9.1網(wǎng)網(wǎng)站設(shè)計計基本知識識9.1.4HTML語言言1．標(biāo)簽（（tag））寫法標(biāo)簽又稱標(biāo)標(biāo)識或標(biāo)記記，在HTML中，，用來界定定各種單元元，如標(biāo)題題、段落、、列表等。。HTML單元由三三部分組成成：起始標(biāo)標(biāo)簽、單元元內(nèi)容、結(jié)結(jié)束標(biāo)簽。。起始標(biāo)簽簽由“<””和“>””來界定，，結(jié)束標(biāo)簽簽由“</”和“>”來界定定，單元名名稱和屬性性由起始標(biāo)標(biāo)簽給出。。超文本標(biāo)簽簽用尖括號號“<”和和“>”表表示標(biāo)簽名與““<”不能能留有空白白字符。有些標(biāo)簽要要加上參數(shù)數(shù)（或稱屬屬性）。超文本標(biāo)簽簽一般是成成對出現(xiàn)，，用帶斜杠杠的元素表表示結(jié)束，，有些標(biāo)簽簽只有起始始標(biāo)簽而沒沒有結(jié)束標(biāo)標(biāo)簽，還有有些標(biāo)簽可可以省略。。參數(shù)只可可加于起始始標(biāo)簽中。。標(biāo)簽字母大大小寫皆可可。一個標(biāo)簽元元素可寫在在多行，參參數(shù)位置不不受限制。。9.1網(wǎng)網(wǎng)站設(shè)計計基本知識識9.1.4HTML語言言2．HTML語言言的結(jié)構(gòu)一個HTML文件應(yīng)應(yīng)具有下面面的結(jié)構(gòu)：：<HTML> HTML文件件開始<HEAD>文文件頭開始始..</HEAD>文文件頭結(jié)束束<BODY> 文件件體開始..</BODY>文文件體結(jié)結(jié)束</HTML>HTML文文件結(jié)束9.1網(wǎng)網(wǎng)站設(shè)計計基本知識識9.1.4HTML語言言3．基本標(biāo)標(biāo)簽的使用用（1）HTML標(biāo)簽簽<HTML>這個標(biāo)簽告告訴瀏覽器器在<HTML>……</HTML>之間的的文件是用用HTML編寫的文文檔。（2）文檔檔頭標(biāo)簽<HEAD><HEAD>…</HEAD>之之間包含的的是HTML文檔名名稱。（3）文檔檔名稱標(biāo)簽簽<TITLE><TITLE>……</TITLE>之間包包含的是具具體的HTML文檔檔名稱，字字符數(shù)通常常不超過64。（4）正文文標(biāo)簽<BODY><BODY>…</BODY>之之間是正文文部分，這這是HTML文檔最最多的部分分，它包含含的是顯示示在瀏覽器器文本窗口口中的文檔檔內(nèi)容。9.1網(wǎng)網(wǎng)站設(shè)計計基本知識識9.1.4HTML語言言3．．基基本本標(biāo)標(biāo)簽簽的的使使用用（5））標(biāo)標(biāo)題題（（Heading））標(biāo)標(biāo)簽簽<Hn>HTML定定義義了了6個個等等級級的的標(biāo)標(biāo)題題標(biāo)標(biāo)簽簽，，其其中中n＝＝1，，2，，……，，6。。<Hn>……</Hn>之之間間包包含含的的是是第第n級級標(biāo)標(biāo)題題。。（6）段落（（Paragraph））標(biāo)簽<P><P>…</P>之之間包含的是是一段文本。。HTML中中沒有使用硬硬換行（carriagereturn）來來分段落，也也不承認(rèn)多個個連續(xù)的空格格，這是與字字處理軟件不不同的。在HTML文檔檔中，<P>和</P>之間不論有有多少行，不不論每一行有有多長或者多多短，也不論論其間有多少少個空格，瀏瀏覽器都把它它作為一個段段落來處理。。9.1網(wǎng)網(wǎng)站設(shè)計基本本知識9.1.4HTML語言3．基本標(biāo)簽簽的使用（7）列表標(biāo)標(biāo)簽<UL>、<OL>和<LI>HTML支持持無編號列表表和有編號列列表，而且還還可以在列表表中嵌套列表表。<UL>……</UL>表示標(biāo)簽簽之間的列表表項目是無編編號列表（UnnumberedList））。<OL>……</OL>表示標(biāo)簽簽之間的列表表項目是有編編號列表（OrderedList）。<LI>表示示標(biāo)簽后面的的內(nèi)容是具體體的列表項目目（ListItem）。（8）定義列列表標(biāo)簽<DL>、<DT>和<DD>定義列表有三三個標(biāo)簽。<DL>表示示定義列表（（DefinitionLists）<DT>表示示后面的項是是定義術(shù)語（（DefinitionTerm）<DD>表示示后面的項是是定義釋義（（DefinitionDefinition）9.1網(wǎng)網(wǎng)站設(shè)計基本本知識9.1.4HTML語言3．基本標(biāo)簽簽的使用（9）預(yù)格式式文本（PreformattedText）標(biāo)簽<PRE>用于產(chǎn)生固定定寬度的字符符。在<PRE>…</PRE>之間的的空格、新行行、空行和表表格與HTML源文檔中中的一致。（10）擴展展引用（ExtendedQuotations）標(biāo)簽簽<BLOCKQUOTE><BLOCKQUOTE>…</BLOCKQUOTE>用來包包含一個比較較長的引用語語。（11）強制制換行標(biāo)簽<BR>使用<BR>標(biāo)簽可強制制文本換行，，但不在行與與行之間增加加空白。9.1網(wǎng)網(wǎng)站設(shè)計基本本知識9.1.4HTML語言3．基本標(biāo)簽簽的使用（12）表單單標(biāo)簽<FORM>用來收集用戶戶的信息，它它可以包含讓讓用戶輸入文文本和選擇項項目的接口構(gòu)構(gòu)件，例如文文本域、按鈕鈕、復(fù)選框（（checkboxe）），單選按鈕鈕（radiobutton）和和選擇列表。。使用<FORM>標(biāo)簽時時需要注意：：①在表單中的的每個接口構(gòu)構(gòu)件必須和輸輸入標(biāo)簽（<INPUT>）或者選選擇標(biāo)簽（<SELECTION>）一起定義義；②單中的所有有構(gòu)件必須在在<FORM>…</FORM>之之間定義。9.1網(wǎng)網(wǎng)站設(shè)計基本本知識9.1.4HTML語言3．基本標(biāo)簽簽的使用（13）橫線線（HorizontalRule）標(biāo)簽<HR>生成一條用于于分割文檔的的水平線，其其長度與瀏覽覽器窗口等寬寬，粗細和長長短都可設(shè)置置。（14）嵌入入圖像標(biāo)簽<IMGsrc="image-url">如<IMGsrc="image-url">或<IMGsrc="image-urd"alt="Text">，，image-url是是圖像文件的的URL。目目前，大部分分瀏覽器支持持.GIF和.JPEG文件件。alt屬屬性告訴不支支持圖圖像的的瀏覽器用Text代替替該圖。9.1網(wǎng)網(wǎng)站設(shè)計基本本知識9.1.4HTML語言3．基基本標(biāo)標(biāo)簽的的使用用（15）表表格標(biāo)標(biāo)簽<TABLE>表格的的基本本形式式：一一個表表由<TABLE>開始始，</TABLE>結(jié)結(jié)束，，表的的內(nèi)容容由<TR>,<TH>和<TD>定定義。。<TR>說明明表的的一個個行，，表有有多少少行就就有多多少個個<TR>；<TH>說說明表表的列列數(shù)和和相應(yīng)應(yīng)欄目目的名名稱，，有多多少個個欄就就有多多少個個<TH>；<TD>則則填充充由<TR>和和<TH>組成成的表表格。。是否否用表表格線線分開開為部部分內(nèi)內(nèi)容用用border屬性性說明明。9.1網(wǎng)網(wǎng)站站設(shè)計計基本本知識識9.1.4HTML語言言4．常常用HTML標(biāo)標(biāo)簽（1））基本本標(biāo)簽簽（2））標(biāo)題題標(biāo)簽簽（3））文檔檔整體體屬性性（4））文本本標(biāo)簽簽（5））鏈接接（6））格式式排版版（7））圖形形元素素（8））表格格（9））表格格屬性性（10）框框架（11）框框架屬屬性（12）表表單9.1網(wǎng)網(wǎng)站站設(shè)計計基本本知識識9.1.5Dreamweaver介介紹1．Dreamweaver簡介介Dreamweaver是當(dāng)當(dāng)前最最流行行的網(wǎng)網(wǎng)頁設(shè)設(shè)計軟軟件。。它與與同為為Macromedia公司司出品品的Fireworks和Flash一道道，被被譽為為網(wǎng)頁頁制作作三劍劍客。。MacromediaDreamweaverMX是是一一款款專專業(yè)業(yè)的的HTML編編輯輯器器，，用用于于對對Web站站點點、、Web頁頁和和Web應(yīng)應(yīng)用用程程序序進進行行設(shè)設(shè)計計、、編編碼碼和和開開發(fā)發(fā)。。無無論論愿愿意意享享受受手手工工編編寫寫HTML代代碼碼時時的的駕駕馭馭感感還還是是偏偏愛愛在在可可視視化化編編輯輯環(huán)環(huán)境境中中工工作作，，Dreamweaver都都會會提提供供有有用用的的工工具具。。9.1網(wǎng)網(wǎng)站站設(shè)設(shè)計計基基本本知知識識9.1.5Dreamweaver介介紹紹1．．Dreamweaver簡簡介介利用Dreamweaver中的的可視化化編輯功功能，可可以快速速地創(chuàng)建建頁面而而無須編編寫任何何代碼。?？梢圆椴榭此杏姓军c元元素或資資源并將將它們從從易于使使用的面面板直接接拖到文文檔中。?？梢栽谠贛acromediaFireworks或或其他他圖形應(yīng)應(yīng)用程序序中創(chuàng)建建和編輯輯圖像，，然后將將它們直直接導(dǎo)入入Dreamweaver，，或者添添加MacromediaFlash對對象，，從而優(yōu)優(yōu)化開發(fā)發(fā)工作流流程。9.1網(wǎng)網(wǎng)站站設(shè)計基基本知識識9.1.5Dreamweaver介介紹2．DreamweaverMX操作界界面插入面板板文檔工具箱網(wǎng)頁設(shè)計區(qū)屬性區(qū)面板組9.1網(wǎng)網(wǎng)站站設(shè)計基基本知識識9.1.5Dreamweaver介介紹2．DreamweaverMX操作界界面DreamweaverMX操作作界面主主要的構(gòu)構(gòu)成元素素：菜單區(qū)和其他的的軟件一一樣，該該軟件所所有的操操作命令令都可以以從這一一個區(qū)內(nèi)內(nèi)找到，，例如，，選中菜菜單“編編輯”中中的“首首選參數(shù)數(shù)”，或或按快快捷鍵CTRL+U，，可以把把自己的的DreamweaverMX設(shè)設(shè)置為““設(shè)計者者”或““代碼編編寫者””工作作區(qū)布局局風(fēng)格。。9.1網(wǎng)網(wǎng)站站設(shè)計基基本知識識9.1.5Dreamweaver介介紹2．DreamweaverMX操作界界面DreamweaverMX操作作界面主主要的構(gòu)構(gòu)成元素素：插入項目目選擇工工具插入項目目選擇工工具又稱稱“對象象面板””或“插插入面板板”，在在插入面面板選中中了某個個圖標(biāo)，，可在頁頁面中的的插入相相應(yīng)項目目。點擊擊向下按按鈕在下下拉菜單單中可選選擇各類類項目圖圖標(biāo)，若若選擇““顯示為為制表符符”，本本面板顯顯示為另另一種形形式。9.1網(wǎng)網(wǎng)站設(shè)計基本本知識9.1.5Dreamweaver介紹2．DreamweaverMX操作界面DreamweaverMX操作作界面主要的的構(gòu)成元素：：文檔工具欄文檔工具欄可可將網(wǎng)頁設(shè)計計區(qū)快速切換換為“代碼視視圖”、“設(shè)設(shè)計視圖”、、“拆分視圖圖”。工具欄欄中還包含一一些與查看文文檔、在本地地和遠程站點點間傳輸文檔檔有關(guān)的常用用命令和選項項。網(wǎng)頁設(shè)計區(qū)你所設(shè)計的網(wǎng)網(wǎng)頁或代碼將將出現(xiàn)在該區(qū)區(qū)。屬性區(qū)屬性區(qū)也成為為屬性面板，，在該區(qū)可以以對選中的對對象進行一些些設(shè)置，選擇擇不同的網(wǎng)頁頁元素，屬性性面板所顯示示的內(nèi)容也有有所不同。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.1了了解用DreamweaverMX2004制作網(wǎng)頁頁1.設(shè)計簡單單的主頁通過一個實例例頁面的制作作過程，我們們可以熟悉新新建文檔、插插入內(nèi)容、設(shè)設(shè)置頁面屬性性、保存、預(yù)預(yù)覽等基本功功能。首先，，在硬硬盤上上建立立一個個文件件夾，，再在在其中中建立立一個個命名名為images的的子文文件夾夾，另另準(zhǔn)備備兩幅幅要置置入網(wǎng)網(wǎng)頁中中的圖圖像文文件，，復(fù)制制到images子子文件件夾。。本例例中的的兩幅幅圖分分別為為Logo1_1.jpg和和Welcome.gif，，圖像像大小小分別別為356×80象象素和和600××300象象素。。9.2用用DreamweaverMX2004設(shè)計計站點點網(wǎng)頁頁9.2.1了解解用DreamweaverMX2004制作作網(wǎng)頁頁1.設(shè)設(shè)計簡簡單的的主頁頁（1））啟動動DreamweaverMX2004，，選擇擇“文文件””→““新建建”命命令，，新建建一個個文檔檔。出出現(xiàn)新新建文文檔對對話框框。選擇基基本頁頁的HTML并并單擊擊“創(chuàng)創(chuàng)建””按鈕鈕，創(chuàng)創(chuàng)建一一個默默認(rèn)的的空白白頁。。9.2用用DreamweaverMX2004設(shè)計計站點點網(wǎng)頁頁9.2.1了解解用DreamweaverMX2004制作作網(wǎng)頁頁1.設(shè)設(shè)計簡簡單的的主頁頁（2））選擇擇“文文件””→““另存存為””命令令，將將文件件路徑徑指定定為前前面建建立的的文件件夾，，給文文件起起一個個名字字index.htm。。在進行行具體體制作作之前前，我我們點點擊文文檔工工具欄欄的代代碼按按鈕或或拆分分按鈕鈕，可可以看看到Dreamweaver為這這個空空文件件生成成的HTML代代碼。。9.2用用DreamweaverMX2004設(shè)計計站點點網(wǎng)頁頁9.2.1了解解用DreamweaverMX2004制作作網(wǎng)頁頁1.設(shè)設(shè)計計簡簡單單的的主主頁頁（5））點點擊擊屬屬性性面面板板下下面面的的““頁頁面面屬屬性性””按按鈕鈕或或選選擇擇““修修改改””→→““頁頁面面屬屬性性””命命令令，，打打開開““頁頁面面屬屬性性””對對話話框框。。在頁頁面面屬屬性性對對話話框框中中將將背背景景顏顏色色設(shè)設(shè)置置為為f9b779，，頁頁面面字字體體保保持持默默認(rèn)認(rèn)字字體體，，大大小小設(shè)設(shè)為為12像像素素，，左左邊邊距距、、右右邊邊距距、、上上邊邊距距和和下下邊邊距距均均設(shè)設(shè)為為0。。9.2用用DreamweaverMX2004設(shè)設(shè)計計站站點點網(wǎng)網(wǎng)頁頁9.2.1了了解解用用DreamweaverMX2004制制作作網(wǎng)網(wǎng)頁頁1.設(shè)設(shè)計計簡簡單單的的主主頁頁（6））在在““插插入入對對象象面面板板””的的常常用用類類中中單單擊擊圖圖像像圖圖標(biāo)標(biāo)，，在在““選選擇擇圖圖像像源源文文件件””對對話話框框中中選選擇擇images文文件件夾夾中中的的Logo1_1.jpg。。插插入入圖圖像像后后鼠鼠標(biāo)標(biāo)點點擊擊圖圖像像右右側(cè)側(cè)使使光光標(biāo)標(biāo)移移到到圖圖像像右右邊邊，，多多次次按按回回車車將將光光標(biāo)標(biāo)定定位位在在合合適適位位置置，，用用同同樣樣方方法法將將圖圖像像Welcome.gif插插入入到到頁頁面面。。（7）在編輯輯過程中可以以隨時在瀏覽覽器中預(yù)覽以以確定效果，，按鍵盤上F12鍵或點點擊Dreamweaver中文檔檔工具欄中預(yù)預(yù)覽按鈕之后后選“預(yù)覽在在iexplore”，，可以在瀏覽覽器中察看我我們制作的網(wǎng)網(wǎng)頁結(jié)果。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.1了了解用DreamweaverMX2004制作網(wǎng)頁頁1.設(shè)計簡單單的主頁9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.1了了解用DreamweaverMX2004制作網(wǎng)頁頁1.設(shè)計簡單單的主頁（8）回到Dreamweave，，點擊選中下下面一幅圖像像Welcome.gif，在下面面的“屬性面面板”中可以以調(diào)整其在HTML文檔檔中的屬性。。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.1了了解用DreamweaverMX2004制作網(wǎng)頁頁1.設(shè)計簡單單的主頁（9）點擊右右面的居中對對齊按鈕使得得圖像在顯示示時處于頁面面中央，設(shè)置置“邊框”值值為0。（10）在設(shè)設(shè)計窗口點擊擊圖像右邊區(qū)區(qū)域并按回車車使光標(biāo)移到到圖像下方，，輸入文字““歡迎！點擊擊進入...”。拖動鼠鼠標(biāo)選中剛才才輸入的文字字，在“屬性性面板”中改改為居中對齊齊。（11）為建建立鏈接，新新建一個HTML文檔取取名為Homepage.htm，，保存并關(guān)閉閉該文檔。（12）回到到index.htm，，點擊選中圖圖像Welcome.gif，在屬屬性面板中點點擊“鏈接編編輯框”后面面的瀏覽文件件圖標(biāo)，在彈彈出的“選擇擇文件對話框框”中選擇Homepage.htm。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.1了解用DreamweaverMX2004制作作網(wǎng)頁1.設(shè)計簡簡單的主頁頁（13）拖拖動鼠標(biāo)選選擇文字““歡迎！點點擊進入...”，，以同樣方方法建立鏈鏈接到Homepage.htm。在在瀏覽器中中察看網(wǎng)頁頁的實際效效果，點擊擊網(wǎng)頁中下下方的圖像像或文字，，可以鏈接接到另一頁頁。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.1了解用DreamweaverMX2004制作作網(wǎng)頁1.設(shè)計簡簡單的主頁頁（14）回回到Dreamweave，，保存剛才才設(shè)計的網(wǎng)網(wǎng)頁。至此完成本本頁面的制制作，點擊擊代碼按鈕鈕可以看到到Dreamweaver生生成的HTML代碼碼。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.1了解用DreamweaverMX2004制作作網(wǎng)頁1.設(shè)計簡簡單的主頁頁為了不影響響網(wǎng)頁的下下載速度，，圖像要用用得少而精精，使用圖圖像處理軟軟件在不失失真的情況況下盡量壓壓縮。瀏覽器能識識別的圖像像有jpg（jpeg）、gif、png和bmp等，，Dreamweaver能能較好支持持的有jpg、gif和png。目前網(wǎng)上用用的最多的的是jpg和gif，因為這這兩種格式式文件體積積較小。Gif格式式的圖像用用工具處理理后能去掉掉本身的背背景，而很很好地和頁頁面融合，，還能做成成動畫。在Dreamweaver中中選中網(wǎng)頁頁中的圖像像后，可使使用“屬性性面板”調(diào)調(diào)整其在網(wǎng)網(wǎng)頁中的屬屬性。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.1了解用DreamweaverMX2004制作作網(wǎng)頁2．站點管管理用Dreamweaver制制作網(wǎng)頁，，為了以后后的方便，，最好首先先定義一個個本地站點點。其實，，使用網(wǎng)頁頁編輯器比比起直接手手寫代碼最最大的優(yōu)勢勢就在于站站點管理。。用Dreamweaver，可以很很方便的對對站點內(nèi)文文件進行改改名或刪除除操作，其其站點管理理能自動修修改其他頁頁面指向這這個文件的的鏈接。使使用Dreamweaver的模版和和庫，可讓讓站點內(nèi)的的部分頁面面共用相同同的部分，，還可方便便的統(tǒng)一更更新。Dreamweaver還自帶帶FTP功功能，可進進行遠程管管理。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.1了解用DreamweaverMX2004制作作網(wǎng)頁2．站點管管理（1）要新新建一個本本地站點，，需點擊Dreamweaver菜單單欄的“站站點”→““管理站點點”命令，，彈出“管管理站點””對話框。。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.1了解用DreamweaverMX2004制作作網(wǎng)頁2．站點管管理（2）單擊擊“新建””按鈕，彈彈出“站點點定義”對對話框，在在基本頁填填入你給這這個站點的的命名。在在對話框““高級”頁頁“本地根根文件夾””設(shè)置這個個站點在本本地所在的的文件夾，，用以模擬擬本地站點點的根目錄錄。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.1了解用DreamweaverMX2004制作作網(wǎng)頁2．站點管管理（3）選中中“自動刷刷新本地文文件列表””前的選框框，則將來來當(dāng)有新的的文件復(fù)制制到本地文文件夾時，，Dreamweaver將將對這個本本地站點的的目錄列表表自動更新新。（4）在HTTP地地址后可以以填入這個個站點的網(wǎng)網(wǎng)址。（5）選中中“啟用緩緩存”復(fù)選選框，則Dreamweaver會給給這個本地地站點設(shè)置置一個緩存存，以提高高站點管理理的速度。。（6）設(shè)設(shè)置完畢畢后，點點擊“確確定”按按鈕，完完成本地地站點設(shè)設(shè)置。9.2用用DreamweaverMX2004設(shè)計站站點網(wǎng)頁頁9.2.1了解解用DreamweaverMX2004制制作網(wǎng)頁頁2．站點點管理準(zhǔn)備三幅幅圖把它它們存入入images文件夾夾。Logobar.jpg圖圖像大大小為760××80像像素；Menubar.jpg760××20像像素9.2用用DreamweaverMX2004設(shè)計站站點網(wǎng)頁頁9.2.1了解解用DreamweaverMX2004制制作網(wǎng)頁頁2．站點點管理Left1_03.gif152×363像像素9.2用用DreamweaverMX2004設(shè)計站站點網(wǎng)頁頁9.2.1了解解用DreamweaverMX2004制制作網(wǎng)頁頁2．站點點管理在“文件件面板””文件列列表上的的上一節(jié)節(jié)建立的的空文件件Homepage.htm上點右右鍵，選選“打開開”，打打開Homepage.htm文檔檔，也可可在文件件列表雙雙擊打開開該文件件，“文文件面板板”文件件列表上上展開images文文件夾，，拖動圖圖像Logobar.jpg到設(shè)計計視圖，，把光標(biāo)標(biāo)移到圖圖像右側(cè)側(cè)再按鍵鍵盤上““Shift””+“回回車”鍵鍵，把Menubar.jpg拖過過來，再再把光標(biāo)標(biāo)移到右右側(cè)按鍵鍵盤上““Shift””+“回回車”鍵鍵，用同同樣方法法拖入圖圖像Left1_03.gif，設(shè)設(shè)置文檔檔的標(biāo)題題為“風(fēng)風(fēng)箏網(wǎng)站站”，保保存該網(wǎng)網(wǎng)頁。9.2用用DreamweaverMX2004設(shè)計站站點網(wǎng)頁頁9.2.1了解解用DreamweaverMX2004制制作網(wǎng)頁頁2．站點點管理按F12鍵在瀏瀏覽器中中預(yù)覽結(jié)結(jié)果9.2用用DreamweaverMX2004設(shè)計站站點網(wǎng)頁頁9.2.2文文本編編輯MacromediaDreamweaverMX2004提提供了了多種向向文檔中中添加文文本和設(shè)設(shè)置文本本格式的的方法。?？梢圆宀迦胛谋颈尽⒃O(shè)置置字體類類型、大大小、顏顏色和對對齊屬性性，以及及使用層層疊樣式式表（CSS））樣式式創(chuàng)建和和應(yīng)用自自己的自自定義樣樣式。Dreamweaver允許許通過以以下方式式在Web頁頁中添加加文本：：直接將將文本鍵鍵入頁中中，從其其他文檔檔復(fù)制和和粘貼文文本，或或從其他他應(yīng)用程程序拖放放文本。。Web專業(yè)業(yè)人員接接受的、、包含能能夠合并并到Web頁頁的文本本內(nèi)容的的常見文文檔類型型有ASCII文本本文件、、RTF文件件和MSOffice文文檔。Dreamweaver可以以從這些些文檔類類型中的的任何一一種取出出文本，，然后將將文本并并入Web頁頁中。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.2文文本編輯輯（1）打開前前面建好的網(wǎng)網(wǎng)頁Homepage.htm。選選中圖像Left1_03.gif，在“屬性性面板”對齊齊下拉菜單中中選左對齊齊，光標(biāo)在Left1_03.gif右側(cè)，輸輸入一段文字字。（2）使用““屬性面板””或“文本””菜單中的選選項可以設(shè)置置或更改所選選文本的字體體特性?？梢砸栽O(shè)置字體類類型、樣式（（如粗體或斜斜體）和大小小。（3）選中要要編輯的文字字，利用“屬屬性面版”進進行文本屬性性編輯。（4）保存設(shè)設(shè)計的網(wǎng)頁。。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.3頁頁面布局局1．使用表格格控制頁面布布局頁面元素的布布局和定位并并不能隨心所所欲排版，借借助表格，可可實現(xiàn)所設(shè)想想的任何排版版效果。也可可靈活使用表表格的背景、、框線等作出出較美觀的效效果。表格是用于在在HTML頁頁上顯示表表格式數(shù)據(jù)以以及對文本和和圖形進行布布局的強有力力的工具。表表格由一行或或多行組成；；每行又由一一個或多個單單元格組成。。雖然HTML代碼中中通常不明確確指定列，但但Dreamweaver允許操操作列、行和和單元格。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.3頁頁面布局局1．使用表格格控制頁面布布局（1）打開網(wǎng)網(wǎng)頁文檔Homepage.htm，拖動鼠標(biāo)標(biāo)選中頁面中中所有圖像和和文字，按Delete鍵刪除。在在“頁面屬性性”中設(shè)置頁頁面背景色為為#7799ca，頁面面字體大小為為12像素。。在“文檔工工具欄”中輸輸入頁面標(biāo)題題為“風(fēng)箏文文化”。在““插入面版””的“通用””組中點擊表表格圖標(biāo)，彈彈出“表格””對話框。。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.3頁頁面布局局1．使用表格格控制頁面布布局（2）設(shè)置““行數(shù)”：2，“列數(shù)””：1，“表表格寬度”：：760像素素，“邊框?qū)拰挾取保?像像素，“單元元格邊距”：：5，“單元元格間距”：：5，確定。。（3）點擊擊表格第一一行單元格格定位光標(biāo)標(biāo)，插入圖圖像Logobar.jpg。（4）在第第二行單元元格中插入入圖像Menubar.jpg。（5）點擊擊表格內(nèi)上上方區(qū)域，，在工作區(qū)區(qū)下方選擇擇要選定的的內(nèi)容，點點擊<table>選定整個個表格，在在“屬性面面板”中調(diào)調(diào)整表格屬屬性。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局2．表格的的嵌套（1）在Dreamweaver中，，選定整個個表格，選選擇“編輯輯”→“剪剪貼”命令令，在“插插入面版””的“通用用”組中點點擊表格圖圖標(biāo)，再次次建立表格格，設(shè)置““行數(shù)”：：2，“列列數(shù)”：1，“表格格寬度”：：760像像素，“邊邊框?qū)挾取薄保?像素素，“單元元格邊距””：0，““單元格間間距”：0。（2）點擊擊表格第一一行標(biāo)單元元格定位光光標(biāo)，選擇擇“編輯””→“復(fù)復(fù)制”命令令。這個單單元格內(nèi)又又套入了一一個表格。。（3）點擊擊外層表格格中下方的的單元格，，再插入一一個表格，，參數(shù)設(shè)置置為“行數(shù)數(shù)”：1，，“列數(shù)””：2，““表格寬度度”：760像素，，“邊框?qū)拰挾取保?像素，““單元格邊邊距”：0，“單元元格間距””：0。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局2．表格的的嵌套（4）點擊擊<table>，，選中最外外層表格。。在“屬性性面板”的的設(shè)為白色色或直接輸輸入#FFFFFF。（5）用鼠鼠標(biāo)點擊內(nèi)內(nèi)嵌的下面面一個表格格左側(cè)單元元格，光標(biāo)標(biāo)定位在這這個單元格格內(nèi)，點擊擊<td>，選中內(nèi)內(nèi)層表格第第一行的第第一個單元元格，在““屬性面板板”中設(shè)定定高度為152。設(shè)設(shè)置第二個個單元格的的對齊方式式為“頂端端”。（6）在內(nèi)內(nèi)嵌的下面面一個表格格的第一列列插入圖像像Left1_03.gif，第二列列中輸入文文本內(nèi)容并并調(diào)整文本本格式和屬屬性。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局2．表格的的嵌套（4）點擊擊<table>，，選中最外外層表格。。在“屬性性面板”的的設(shè)為白色色或直接輸輸入#FFFFFF。（5）用鼠鼠標(biāo)點擊內(nèi)內(nèi)嵌的下面面一個表格格左側(cè)單元元格，光標(biāo)標(biāo)定位在這這個單元格格內(nèi)，點擊擊<td>，選中內(nèi)內(nèi)層表格第第一行的第第一個單元元格，在““屬性面板板”中設(shè)定定高度為152。設(shè)設(shè)置第二個個單元格的的對齊方式式為“頂端端”。（6）在內(nèi)內(nèi)嵌的下面面一個表格格的第一列列插入圖像像Left1_03.gif，第二列列中輸入文文本內(nèi)容并并調(diào)整文本本格式和屬屬性。（7）保存存設(shè)計的網(wǎng)網(wǎng)頁Homepage.htm。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局3．合并或或拆分表格格單元只要整個選選擇部分的的單元格形形成一行或或一個矩形形，便可以以合并任意意數(shù)目的相相鄰的單元元格，以生生成一個跨跨多個列或或行的單元元格?？梢砸詫卧窀癫鸱殖扇稳我鈹?shù)目的的行或列，，而不管之之前它是否否是合并的的。Dreamweaver可以自自動重新構(gòu)構(gòu)造表格以以創(chuàng)建指定定的排列方方式。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局4．導(dǎo)入導(dǎo)導(dǎo)出可以將在另另一個應(yīng)用用程序（例例如MicrosoftExcel）中創(chuàng)建建并以分隔隔文本的格格式（其中中的項以制制表符、逗逗號、冒號號、分號或或其他分隔隔符隔開））保存的表表格式數(shù)據(jù)據(jù)導(dǎo)入到Dreamweaver中中并設(shè)置為為表格的格格式。也可可以將表格格數(shù)據(jù)從Dreamweaver導(dǎo)導(dǎo)出到文本本文件中，，相鄰單元元格的內(nèi)容容由分隔符符隔開。可可以使用逗逗號、冒號號、分號或或空格作為為分隔符。。當(dāng)導(dǎo)出表表格時，將將導(dǎo)出整個個表格，不不能選擇導(dǎo)導(dǎo)出部分表表格。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局5．靈活運運用表格設(shè)設(shè)計精美頁頁面在Dreamweaver中中，新建一一個文檔，，用表格定定位的方法法，制作網(wǎng)網(wǎng)頁。其其中的表格格線框是使使用了一個個“背景顏顏色”為灰灰色、“間間距”為1像素的表表格，所有有單元格的的“背景顏顏色”設(shè)為為白色。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局6．其他布布局方法（1）布局局模式MacromediaDreamweaverMX2004提供供了兩種查查看和操作作表格的方方式：在““標(biāo)準(zhǔn)模式式”中，表表格顯示為為行和列的的網(wǎng)格，而而“布局模模式”允許許在將表格格用作基礎(chǔ)礎(chǔ)結(jié)構(gòu)的同同時在頁面面上繪制、、調(diào)整方框框的大小以以及移動方方框。與一般的表表格不同，，在任何一一個位置拖拖動圖標(biāo)，，“布局模模式”都可可以自動生生成表格和和單元格。。另外，它它能夠自由由拖動，所所以再復(fù)雜雜的頁面布布局也可以以輕松地制制作出來。。在“布局模模式”中，，可以在添添加內(nèi)容前前使用布局局單元格和和表格來對對頁面進行行布局。例例如，可以以沿頁的頂頂部繪制一一個單元格格放置標(biāo)題題圖形，在在頁的左邊邊繪制另一一個單元格格放置導(dǎo)航航條，在右右邊繪制第第三個單元元格放置內(nèi)內(nèi)容。添加加內(nèi)容時，，您可以按按需要在四四周移動單單元格，以以調(diào)整布局局。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局6．其他布布局方法（2）層層是用于精精確定位的的頁面元素素。可往層層里加入圖圖像、文本本等其他頁頁面元素，，借助層，，可對加入入的頁面元元素進行精精確定位，，還可做出出重疊效果果和運動效效果。要往往網(wǎng)網(wǎng)頁頁中中加加入入層層，，點點擊擊““插插入入面面板板””上上““布布局局””組組中中的的““描描繪繪層層””圖圖標(biāo)標(biāo)，，移移動動鼠鼠標(biāo)標(biāo)至至Dreamweaver主主窗窗口口，，鼠鼠標(biāo)標(biāo)即即顯顯示示成成十十字字型型。。在在窗窗口口區(qū)區(qū)域域拖拖動動鼠鼠標(biāo)標(biāo)即即可可畫畫出出層層。?；蚧蛘哒?，，點點擊擊菜菜單單欄欄的的““插插入入””→→““布布局局對對像像””→→““層層””，，主主窗窗口口即即被被加加入入一一個個層層。。點擊層的邊線線，即選中這這個層?？捎糜檬髽?biāo)拖動，，將層移至頁頁面合適的位位置。用鼠標(biāo)標(biāo)拖動邊線上上的黑色方塊塊，可調(diào)節(jié)層層的大小。用用鼠標(biāo)點擊擊層內(nèi)的任意意位置，這時時可往層內(nèi)加加入文本、圖圖像等內(nèi)容。。層中可再嵌嵌套層。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.3頁頁面布局局7．使用框架架框架結(jié)構(gòu)提供供將一個瀏覽覽器窗口劃分分為多個區(qū)域域、每個區(qū)域域都可以顯示示不同HTML文檔的的方法?？蚣芗芙Y(jié)構(gòu)將兩個個或兩個以上上的網(wǎng)頁頁面面組合起來，，能用同一個個瀏覽器窗口口打開，即多多個頁面合起起來顯示成一一個頁面的效效果。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.3頁頁面布局局7．使用框架架使用框架具有有以下優(yōu)點：：（1）訪問者者的瀏覽器不不需要為每個個頁面重新加加載與導(dǎo)航相相關(guān)的圖形。。能統(tǒng)一風(fēng)格格、便于制作作和修改、方方便訪問；（2）每個框框架都具有自自己的滾動條條（如果內(nèi)容容太大，在窗窗口中顯示不不下），因因此訪問者可可以獨立滾動動這些框架。。例如，當(dāng)框框架中的內(nèi)容容頁面較長時時，如果導(dǎo)航航條位于不同同的框架中，，那么向下滾滾動到頁面底底部的訪問者者就不需要再再滾動回頂部部來使用導(dǎo)航航條。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局7．使用框框架使用框架的的缺點是：：（1）可能能難以實現(xiàn)現(xiàn)不同框架架中各元素素的精確圖圖形對齊；；（2）對導(dǎo)導(dǎo)航進行測測試可能很很耗時間；；（3）各個個帶有框架架的頁面的的URL不不顯示在在瀏覽器中中，因此訪訪問者可能能難以將特特定頁面設(shè)設(shè)為書簽。。9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局7．使用框框架（1）在Dreamweaver中，，新建一個個基本HTML文檔檔，建立一一個框架結(jié)結(jié)構(gòu)，在菜菜單“查看看”→“可可視化助理理”中確認(rèn)認(rèn)選中“框框架邊框””，在菜單單“窗口””中確認(rèn)選選中“框架架”以顯示示“框架面面板”?？蚣苊姘?.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局7．使用框框架（2）用鼠鼠標(biāo)點擊框框線，或在在“框架面面板”點擊擊最外層邊邊框，選擇擇整個框架架集在“文文檔工具欄欄”的“標(biāo)標(biāo)題”后輸輸入“風(fēng)箏箏會”，選選擇“文件件”→“框框架集另存存為”命令令，保存這這個框架集集文件，命命名為page4.htm。。（3）在““框架面板板”中點擊擊左邊的框框體，在““屬性面板板”查看和和設(shè)置框架架屬性，可可在“源文文件”后設(shè)設(shè)置將要在在本區(qū)域顯顯示的已經(jīng)經(jīng)編輯好的的HTML頁面。我我們在“源源文件”后后設(shè)置為已已經(jīng)編輯好好的一個網(wǎng)網(wǎng)頁文檔page4_l.htm9.2用用DreamweaverMX2004設(shè)計站點點網(wǎng)頁9.2.3頁面面布局7．使用框框架（4）在設(shè)計計窗口中點擊擊某區(qū)域編輯輯修改或直接接建立HTML頁面。在右側(cè)上邊的的分欄中設(shè)計計網(wǎng)頁，編輯輯后用菜單““文件”中的的“保存框架架”或“框架架另存為”保保存為page4_t_1.htm。同樣，在在下邊的分欄欄中設(shè)計網(wǎng)頁頁并用菜單““框架另存為為”保存為為page4_1_1.htm。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.3頁頁面布局局7．使用框架架（5）在“框框架面板”點點擊最外層邊邊框，選擇整整個框架集，，在“屬性面面板”中設(shè)設(shè)置“邊框””為“否”，，意為在瀏覽覽器中不顯示示邊框。設(shè)邊邊框?qū)挾葹椤啊?”，意為為在瀏覽器中中不占用空間間。菜單“文文件”→“保保存框架頁””以保存對框框架集的修改改。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.4鏈鏈接與導(dǎo)導(dǎo)航DreamweaverMX2004提提供多種創(chuàng)建建超文本鏈接接的方法，可可創(chuàng)建到文檔檔、圖像、多多媒體文件或或可下載軟件件的鏈接?？煽梢越⒌轿奈臋n內(nèi)任意位位置的任何文文本或圖像（（包括標(biāo)題、、列表、表、、層或框架中中的文本或圖圖像）的鏈接接。若要直觀觀地查看文件件是如何鏈接接在一起的，，可使用站點點地圖。在站站點地圖中，，可以向站點點添加新文檔檔、創(chuàng)建和刪刪除文檔鏈接接以及檢查到到相關(guān)文件的的鏈接。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.4鏈鏈接與導(dǎo)導(dǎo)航2．客戶戶端圖像像地圖可使一個個圖像的的不同部部位分別別鏈接到到不同的的頁面，，這叫作作客戶端端圖像映映射或客客戶端圖圖像地圖圖。在圖像““屬性面面板”擴擴展模式式左下方方有一項項為“地地圖”，，用以進進行客戶戶端圖像像映射。。在其后后可填入入你為這這個映射射起的名名字，若若不填，，則Dreamweaver自動加加上一個個名字。?！暗貓D圖”下面面有三個個圖標(biāo)，，從左到到右依次次為截取取矩形、、截取圓圓形和截截取不規(guī)規(guī)則圖形形。9.2用用DreamweaverMX2004設(shè)計站站點網(wǎng)頁頁9.2.4鏈鏈接與與導(dǎo)航2．客戶戶端圖像像地圖（1）打打開前面面建立的的網(wǎng)頁Homepage.htm，，點擊選選中最上上面的圖圖像，在在“屬性性面板””中點擊擊截取矩矩形，在在圖像中中右上角角環(huán)繞““關(guān)于我我們”部部分畫一一矩形，，這個形形狀成為為“熱點點”。。（2））在“熱熱點”的的“屬性性面板””中給““熱點””設(shè)置超超級鏈接接，用同同樣方法法給右邊邊“聯(lián)系系留言””部分建建立熱點點鏈接，，在“鏈鏈接”欄欄輸入mailto：：，后面面輸入一一個Email地址。。（3）保保存文檔檔。9.2用用DreamweaverMX2004設(shè)計站站點網(wǎng)頁頁9.2.4鏈鏈接與與導(dǎo)航3．導(dǎo)航航條導(dǎo)航條一一般由幾幾個圖像像構(gòu)成，，點擊不不同的圖圖像，將將鏈接到到網(wǎng)站不不同的頁頁面。通通過統(tǒng)一一導(dǎo)航條條的方法法，我們們可以實實現(xiàn)網(wǎng)站站風(fēng)格的的統(tǒng)一，，同時也也方便了了訪問者者在不同同頁面間間的跳轉(zhuǎn)轉(zhuǎn)。在建立導(dǎo)航條條之前，我們們先做一些準(zhǔn)準(zhǔn)備工作，使使用圖像處理理軟件，把前前面例子中的的菜單圖像Menubar.jpg切割成多塊塊，并把要在在網(wǎng)頁中建立立鏈接的每部部分圖像的背背景和文字更更換不同顏色色另存兩份9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.4鏈鏈接與導(dǎo)導(dǎo)航3．導(dǎo)航條（1）在Dreamweaver中中，刪除圖像像Menubar.jpg，加入一一個表格，在在每單元格插插入切成小塊塊的圖像，使使其看起來就就像原來的圖圖像Menubar.jpg。（2）選中有有“風(fēng)箏薈萃萃”字樣的Menubar3_1.jpg。選選擇“插入””→“圖圖像對象”→→“導(dǎo)航航條”，或在在“插入面板板”欄的“常常用”類別中中，單擊“圖圖像”菜單并并選擇“插入入導(dǎo)航條”按按鈕，打開““插入導(dǎo)航條條”對話框。。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.4鏈鏈接與導(dǎo)導(dǎo)航3．導(dǎo)航條導(dǎo)航條項目有有四種狀態(tài)：：一般：用戶尚尚未單擊或尚尚未與此項目目交互時所顯顯示的圖像。。設(shè)為Menubar3_1.jpg?；^：指鼠標(biāo)標(biāo)指針滑過““一般”圖像像時所顯示的的圖像。項目目的外觀發(fā)生生變化，以便便讓用戶知道道可與這個項項目進行交互互。設(shè)為Menubar3_2.jpg。按下：指項目目被單擊后所所顯示的圖像像。設(shè)為Menubar3_3.jpg。按下時鼠標(biāo)經(jīng)經(jīng)過：指在項項目被單擊后后，鼠標(biāo)指針針滑過“按下下”圖像時，，所顯示的圖圖像。是鼠標(biāo)標(biāo)點擊后當(dāng)鼠鼠標(biāo)再次移動動到這個部位位上時顯示的的圖像?？刹徊蛔鲈O(shè)置。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.4鏈鏈接與導(dǎo)導(dǎo)航3．導(dǎo)航條（3）在“按按下時，前往往的URL””后設(shè)置要鏈鏈接的網(wǎng)頁。。設(shè)定完成后后確定。當(dāng)鼠標(biāo)移至““風(fēng)箏薈萃””時變?yōu)榘椎椎缀谧之?dāng)鼠標(biāo)在“風(fēng)風(fēng)箏薈萃”上上按下時變?yōu)闉槌鹊装鬃?.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.5其其他設(shè)計計要素1.利用最新新多媒體技術(shù)術(shù)MacromediaDreamweaverMX2004可可以迅速、、方便地向Web站點點添加聲音和和影片，可以以在Dreamweaver自身身內(nèi)插入MacromediaFlashMX2004按鈕鈕和文本對象象等。可以在在文檔中插入入：Flash和Shockwave影片片、QuickTime、AVI、、Javaapplet、ActiveX控件以及及各種格式的的音頻文件等等?？梢栽谑故褂肈reamweaver時在在文檔中創(chuàng)建建、插入和修修改Flash按鈕而而無須使用MacromediaFlash?？梢宰远ǘxFlash按鈕對對象，并添加加文本、背景景顏色以及指指向其他文件件的鏈接。Flash文文本對象允允許您創(chuàng)建和和插入只包含含文本的Flash影影片。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.5其其他設(shè)計計要素2.CSS樣式表CSS即CascadingStyleSheet或或樣式表，是是可以定義HTML標(biāo)簽簽所無法表現(xiàn)現(xiàn)的屬性的補補充性語言。。樣式表的另另外一個優(yōu)點點就是，在對對很多網(wǎng)頁文文件設(shè)置同一一種屬性時，，無須對所有有文件進行反反復(fù)操作，只只要應(yīng)用樣式式表就可以更更加便利、快快捷地進行操操作。在Dreamweaver中中只需要單單擊幾次，就就可以在字體體、鏈接、表表格、圖片、、層等構(gòu)成網(wǎng)網(wǎng)頁文件的所所有元素屬性性中應(yīng)用樣式式表。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.5其其他設(shè)計計要素3．表單表單的作用就就是能使訪問問者與網(wǎng)站或或網(wǎng)站管理人人交互。利用用表單，可根根據(jù)訪問者輸輸入的信息，，自動生成頁頁面反饋給訪訪問者；利用用表單，還可可以為網(wǎng)站收收集訪問者輸輸入的信息。。表單的使用用其實可分為為兩部分。一一部分是表單單本身，即怎怎樣把表單作作為頁面元素素加入到網(wǎng)頁頁頁面。另一一部分為表單單的處理，即即調(diào)用服務(wù)器器端的腳本程程序，或是以以電子郵件的的方式發(fā)送。。在Dreamweaver中利利用“插入面面板”的“表表單”類別中中的圖標(biāo)建立立表單。9.2用用DreamweaverMX2004設(shè)設(shè)計站點網(wǎng)頁頁9.2.5其其他設(shè)計計要素4．行為與JavaScriptDreamweaver中行為指指的是能夠簡簡單運用制作作動態(tài)網(wǎng)頁的的JavaScript功能。網(wǎng)頁頁的動態(tài)效果果，要往網(wǎng)頁頁頁面里插入入JavaScript小程序。Dremweaver能能自動生成一一些JavaScript代碼來實實現(xiàn)動態(tài)效果果，使不會JavaScript的的人也能制作作出動態(tài)的網(wǎng)網(wǎng)頁。利用Dreamweaver的Behavior，，能做出很有有用的頁面效效果。如果想想運用行為，，首先要選擇擇運行行為的的對象，然后后決定要發(fā)生生的動作，還還要設(shè)置決定定實施的動作作在何種情況況下發(fā)生的事事件。即行為為由動作和事事件組成。在在Dreamweaver的“行為為面板”中，，可以選擇需需要的行為。。另外也可以以在網(wǎng)頁中插插入自己的JavaScript代代碼。9.3測測試和上傳9.3.1測測試可以通過運行行“站點報告告”測試整個個站點并解決決出現(xiàn)的問題題。確保頁面在目目標(biāo)瀏覽器中中能夠如預(yù)期期的那樣工作作，并確保這這些頁面在其其他瀏覽器中中要么工作正正常，要么““明確地拒絕絕工作”。頁頁面在不支持持樣式、層、、插件或JavaScript的的瀏覽器中應(yīng)應(yīng)清晰可讀且且功能正常。。對于在較早早版本的瀏覽覽器中根本無無法運行的頁頁面，應(yīng)考慮慮使用“檢查查瀏覽器”行行為，自動將將訪問者重定定向到其他的的頁面。應(yīng)盡可能多地地在不同的瀏瀏覽器和平臺臺上預(yù)覽頁面面。以便查看看布局、顏色色、字體大小小和默認(rèn)瀏覽覽器窗口大小小等方面的區(qū)區(qū)別，這些區(qū)區(qū)別在目標(biāo)瀏瀏覽器檢查中中是無法預(yù)見見的。9.3測測試和上傳9.3.1測測試檢查站點是否否有斷開的鏈鏈接，并修復(fù)復(fù)斷開的鏈接接。由于其他他站點也在重重新設(shè)計、重重新組織，您您所鏈接的頁頁面可能已被被移動或刪除除?？蛇\行鏈鏈接檢查報告告對鏈接進行行測試。監(jiān)測頁面的文文