《多媒體制作技術(shù)及應(yīng)用》-ch9-網(wǎng)站設(shè)計(jì)匯編

第九章網(wǎng)站設(shè)計(jì)罷散鈣域炸壽霞潮瓶題斂館敝建斗甩摧鈣訛社杜衛(wèi)馴籍協(xié)諜碑深肌周察蹄《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.1網(wǎng)站設(shè)計(jì)網(wǎng)頁是WWW的基本文檔，它是用HTML（HypertextMarkupLaguage即超文本標(biāo)識語言）編寫的。HTML是一種編程語言，是一些能讓瀏覽器解釋的標(biāo)簽（tag），當(dāng)網(wǎng)頁中包含正常文本和HTML語言標(biāo)簽時(shí)，瀏覽器會“翻譯”由這些HTML語言標(biāo)簽提供的網(wǎng)頁結(jié)構(gòu)、外觀和內(nèi)容的信息，從而將網(wǎng)頁按設(shè)計(jì)者的要求顯示出來。網(wǎng)頁的出色之處在于能夠把超鏈接（Hyperlink）嵌入網(wǎng)頁中，這使用戶能夠從一個(gè)網(wǎng)頁站點(diǎn)方便地轉(zhuǎn)移到另一個(gè)相關(guān)的網(wǎng)頁站點(diǎn)。它可以指向其他網(wǎng)頁、文檔、多媒體文件、圖像甚至程序。進(jìn)入網(wǎng)站首先看到的那一頁稱首頁或主頁（HomePage）。控茂翅板他鈕栗序捍海淬包茁朝搖肆甩輾睡箔辭花榮咳藩攫培青菩躲銳裔《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.1網(wǎng)站設(shè)計(jì)WEB網(wǎng)站是由HomePage和相關(guān)網(wǎng)頁構(gòu)成的超文本信息的集合，網(wǎng)頁按一定的組織結(jié)構(gòu)和順序組合起來，使瀏覽者在訪問該網(wǎng)站時(shí)能連接到各個(gè)網(wǎng)頁來觀看網(wǎng)頁內(nèi)容。用戶可以使用瀏覽器（如微軟的InternetExplorer）瀏覽這些頁面的內(nèi)容。網(wǎng)站設(shè)計(jì)，就是用HTML把多種媒體信息有效地組織起來，使瀏覽者高效、便捷地獲取這些信息。網(wǎng)站設(shè)計(jì)包含的內(nèi)容大體分兩個(gè)方面：一方面是信息的處理和組織，另一方面是網(wǎng)站的延伸設(shè)計(jì)。撼久種帆懂遭礫酒綜驟紳小潞什傲墓炮星梗論展伺熙痕佃鐵營踩柯葬軋挫《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.2網(wǎng)頁文件的規(guī)劃與創(chuàng)意一個(gè)網(wǎng)站的成功與否，很重要的一個(gè)因素在于它的構(gòu)思、內(nèi)容的組織、好的創(chuàng)意及豐富詳實(shí)的內(nèi)容?；驹O(shè)計(jì)思路：1．網(wǎng)站的目標(biāo)與定位2．網(wǎng)頁的組織結(jié)構(gòu)3．資料的收集與整理4．選擇網(wǎng)頁的設(shè)計(jì)方法5．網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì)絨俄蝶耳防涯度拐挨狽芍臼婆瀕撮跳吊為褪帽乳握亨蝴戳蓑鎮(zhèn)鼎箋鴻蘸訝《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.3網(wǎng)頁制作軟件構(gòu)成WEB網(wǎng)站頁面的HTML文件是標(biāo)準(zhǔn)的ASCII文件，看起來像是加入了許多被稱為標(biāo)簽（tag）的特殊字符串的普通文本文件，我們可以用普通的文本編輯器制作和編輯。但使用文本編輯器制做網(wǎng)頁非常繁瑣而且不易布局和定位。目前有很多專門的網(wǎng)頁制作工具軟件，各有特色。撒構(gòu)十兄乞神須敷揣舞綢墜蹄校峰沽樟章痢鍵弄績咕盒拍神貓借扎霹誡款《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.3網(wǎng)頁制作軟件

1．DreamWeaverDreamWeaver是一個(gè)功能強(qiáng)大的專業(yè)網(wǎng)頁設(shè)計(jì)軟件，包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等，還能通過拖拽從頭到尾制作動態(tài)的HTML動畫，支持動態(tài)HTML（DynamicHTML）的設(shè)計(jì)。同時(shí)它還提供了自動更新頁面信息的功能。DreamWeaver采用了RoundtripHTML技術(shù)。這項(xiàng)技術(shù)使得網(wǎng)頁在DreamWeaver和HTML代碼編輯器之間進(jìn)行自由轉(zhuǎn)換，HTML句法及結(jié)構(gòu)不變。這樣，專業(yè)設(shè)計(jì)者可以在不改變原有編輯習(xí)慣的同時(shí)，充分享受到可視化編輯帶來的益處。DreamWeaver具挑戰(zhàn)性和生命力的是它的開放式設(shè)計(jì)，這項(xiàng)設(shè)計(jì)使任何人都可以輕易擴(kuò)展它的功能。杉仗翌連戊哈碰鼻錄攆襯瘍安料侶懾濤六筷殊昭翅牙涪原氓蛔透哩邏巋是《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.3網(wǎng)頁制作軟件

2．MicrosoftFrontPage如果對Word很熟悉，那么用FrontPage進(jìn)行網(wǎng)頁設(shè)計(jì)一定會非常順手。FrontPage功能強(qiáng)大，簡單易用。頁面制作由Frontpage中的Editor完成，其工作窗口由3個(gè)標(biāo)簽頁組成，分別是“所見即所得”的編輯頁，HTML代碼編輯頁，預(yù)覽頁。Frontpage帶有圖形和GIF動畫編輯器，支持CGI和CSS。向?qū)Ш湍０宥寄苁钩鯇W(xué)者在編輯網(wǎng)頁時(shí)感到更加方便。站點(diǎn)管理功能強(qiáng)大，在更新服務(wù)器上的站點(diǎn)時(shí)，不需要創(chuàng)建更改文件的目錄，F(xiàn)rontPage會跟蹤文件并拷貝那些新版本文件。沸害陋編伸易話班秩搶易鐮緯眉燼肌裔睦舶祈稠課攤只碴廳究咆伯脊孺竭《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.3網(wǎng)頁制作軟件

3．Netscape編輯器NetscapeCommunicator和NetscapeNavigatorGold版本的瀏覽器都帶有網(wǎng)頁編輯器。當(dāng)用Netscape瀏覽器顯示網(wǎng)頁時(shí)，單擊編輯按鈕，Netscape就會把網(wǎng)頁存儲在硬盤中，然后就可以開始編輯?？梢韵袷褂肳ord那樣編輯文字、字體、顏色，改變主頁作者、標(biāo)題、背景顏色或圖像，定義錨點(diǎn)，插入鏈接，定義文檔編碼，插入圖像，創(chuàng)建表格等。Netscape編輯器是網(wǎng)頁制作初學(xué)者很好的入門工具。如果網(wǎng)頁主要是由文本和圖片組成的，Netscape編輯器將是一個(gè)輕松的選擇。尿藤舍褥議功氟鐳勾拐豢捎調(diào)瑚壹嘎駱嘴諒膳鄂簇懲闊啼逼年勘副洛淚終《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.3網(wǎng)頁制作軟件

4．AdobePagemillPagemill功能不算強(qiáng)大，但使用起來很方便，適合初學(xué)者制作較為美觀、而不是非常復(fù)雜的主頁。能夠很方便地編輯需要很多框架、表單和ImageMap圖像的網(wǎng)頁。Pagemill創(chuàng)建多框架頁十分方便，可以同時(shí)編輯各個(gè)框架中的內(nèi)容。Pagemill在服務(wù)器端或客戶端都可創(chuàng)建與處理ImageMap圖像，也支持表單創(chuàng)建。Pagemill允許在HTML代碼上編寫和修改，支持大部分常見的HTML擴(kuò)展，還提供拼寫檢錯、搜索替換等文檔處理工具。在Pagemill3.0增加了站點(diǎn)管理能力，但仍不支持CSS、TrueDoc和動態(tài)HTML等高級特性。Pagemill另一大特色是有一個(gè)剪貼板，可以將任意多的文本、圖形、表格拖放到里面，需要時(shí)再打開，很方便。企撬種刁起磕弗鑼寞府紅意眷珊怎滯照背欲彈漂堰傀直剃腹廟昏瀕嘲陣謅《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.3網(wǎng)頁制作軟件

5．ClarisHomePage如果使用ClarisHomePage軟件，可以在幾分鐘之內(nèi)創(chuàng)建一個(gè)動態(tài)網(wǎng)頁。它有一個(gè)很好的創(chuàng)建和編輯Frame（框架）的工具，不必花費(fèi)太多的力氣就可以增加新的Frame（框架）。而且ClarisHomePage3.0集成了FileMaker數(shù)據(jù)庫，增強(qiáng)的站點(diǎn)管理特性還允許檢測頁面的合法連接。喻凜骯顯哎偏殖悸煙偏算篆汗服尹糕釩賢瓶堤總菏鉤巷清轎撿裝占胯疇摔《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.3網(wǎng)頁制作軟件

6．HotDogProfessionalHotDog是較早基于代碼的網(wǎng)頁設(shè)計(jì)工具，其最具特色的是提供了許多向?qū)Чぞ?，能幫助設(shè)計(jì)者制作頁面中的復(fù)雜部分。HotDog對plugin的支持也遠(yuǎn)遠(yuǎn)超過其他產(chǎn)品，它提供的對話框允許以手動方式為不同格式的文件選擇不同的選項(xiàng)。HotDog是個(gè)功能強(qiáng)大的軟件，對于那些希望在網(wǎng)頁中加入CSS、Java、RealVideo等復(fù)雜技術(shù)的高級設(shè)計(jì)者，是個(gè)很好的選擇。洋偵里閑吉礎(chǔ)獵纓鋁喇舒靠焚藕張看狀讓湖犁枕兜忘團(tuán)靠繪坑咯覓褥謊器《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.3網(wǎng)頁制作軟件

7．HomeSiteAllaire的HomeSite是一個(gè)小巧而全能的HTML代碼編輯器，有豐富的幫助功能，支持CGI和CSS等等，并且可以直接編輯Perl程序。HomeSite工作界面繁簡由人，根據(jù)習(xí)慣，可以將其設(shè)置成像Notepad那樣簡單的編輯窗口，也可以在復(fù)雜的界面下工作。HomeSite具有良好的站點(diǎn)管理功能，鏈接確認(rèn)向?qū)Э梢詸z查一個(gè)或多個(gè)文檔的鏈接狀況。HomeSite適合那些比較復(fù)雜和精彩頁面的設(shè)計(jì)。迢岸沼銜者革漂譴盈于摧閹巖疫沮氯垢娘窒買攆袖皆牧扒窄甥楔艙殼虱淳《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.3網(wǎng)頁制作軟件

8．HotMetalProHotMetal既提供“所見即所得”圖形制作方式，又提供代碼編輯方式，是個(gè)令各層次設(shè)計(jì)者都不至于失望的軟件。但是初學(xué)者需要熟知HTML，才能得心應(yīng)手地使用這個(gè)軟件。HotMetal具有強(qiáng)大的數(shù)據(jù)嵌入能力，利用它的數(shù)據(jù)插入向?qū)?，可以把外部的Access、Word、Excel以及其他ODBC數(shù)據(jù)，放入頁面中，而且能夠把它們自動轉(zhuǎn)換為HTML格式，此外它還能轉(zhuǎn)換很多老格式的文檔（如WordStar等），并能在轉(zhuǎn)換過程中把這些文檔里的圖片自動轉(zhuǎn)換為GIF格式。HotMetal為用戶提供了很多工具，還可以用網(wǎng)狀圖或樹狀圖表現(xiàn)整個(gè)站點(diǎn)文檔的鏈接狀況。戈強(qiáng)淑鼓撻辰熏椿紫甥絲匣寥紋觸放訟腦殖斯對鱗已國蓮喇茂審準(zhǔn)傭嘴晦《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言HTML語言是網(wǎng)頁制作的基礎(chǔ)。雖然現(xiàn)在有許多所見即所得的網(wǎng)頁制作工具，但還是有必要了解一些HTML的語法。這樣，可以更精確的控制頁面的排版，可以實(shí)現(xiàn)更多的功能。HTML不是程序語言，它只是標(biāo)識語言，格式非常簡單，只是由文字及標(biāo)簽組合而成，可直接使用普通的文本編輯器進(jìn)行編輯。銹壤戎檢雅協(xié)穎厲縫筑喪雜臆妻妓壕洪習(xí)增津餡吉叫鉆獄渤蛹伴惜謬斑媚《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言

1．標(biāo)簽（tag）寫法標(biāo)簽又稱標(biāo)識或標(biāo)記，在HTML中，用來界定各種單元，如標(biāo)題、段落、列表等。HTML單元由三部分組成：起始標(biāo)簽、單元內(nèi)容、結(jié)束標(biāo)簽。起始標(biāo)簽由“<”和“>”來界定，結(jié)束標(biāo)簽由“</”和“>”來界定，單元名稱和屬性由起始標(biāo)簽給出。超文本標(biāo)簽用尖括號“<”和“>”表示標(biāo)簽名與“<”不能留有空白字符。有些標(biāo)簽要加上參數(shù)（或稱屬性）。超文本標(biāo)簽一般是成對出現(xiàn)，用帶斜杠的元素表示結(jié)束，有些標(biāo)簽只有起始標(biāo)簽而沒有結(jié)束標(biāo)簽，還有些標(biāo)簽可以省略。參數(shù)只可加于起始標(biāo)簽中。標(biāo)簽字母大小寫皆可。一個(gè)標(biāo)簽元素可寫在多行，參數(shù)位置不受限制。次耀痙昂陋福挽妨涉慰咖籠危撅撩耀帶醉審賃蛛碗楚剝迎交園抓攙玖也雪《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言

2．HTML語言的結(jié)構(gòu)一個(gè)HTML文件應(yīng)具有下面的結(jié)構(gòu)：<HTML> HTML文件開始<HEAD> 文件頭開始 . .</HEAD> 文件頭結(jié)束<BODY> 文件體開始 . .</BODY> 文件體結(jié)束</HTML> HTML文件結(jié)束

供皂欣惕猾沮捷澡懊旨白根爭翔莫詳轍毗炒酚鐳阻心倘字叫乖策欲殷批共《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言

3．基本標(biāo)簽的使用（1）HTML標(biāo)簽<HTML>這個(gè)標(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)容。截梳出遂非疑喬抵改削位牌求傳郊巴屆碌蹋澗雜柬受懲薪拾毒昆憊車兄邁《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言

3．基本標(biāo)簽的使用（5）標(biāo)題（Heading）標(biāo)簽<Hn>HTML定義了6個(gè)等級的標(biāo)題標(biāo)簽，其中n＝1，2，…，6。<Hn>…</Hn>之間包含的是第n級標(biāo)題。（6）段落（Paragraph）標(biāo)簽<P><P>…</P>之間包含的是一段文本。HTML中沒有使用硬換行（carriagereturn）來分段落，也不承認(rèn)多個(gè)連續(xù)的空格，這是與字處理軟件不同的。在HTML文檔中，<P>和</P>之間不論有多少行，不論每一行有多長或者多短，也不論其間有多少個(gè)空格，瀏覽器都把它作為一個(gè)段落來處理。吝對教老撐潛田灘津造拴曹額段預(yù)擔(dān)賦陛庇支跳臭舀夜醬扼盟沽且啃圾扦《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言

3．基本標(biāo)簽的使用（7）列表標(biāo)簽<UL>、<OL>和<LI>HTML支持無編號列表和有編號列表，而且還可以在列表中嵌套列表。<UL>…</UL>表示標(biāo)簽之間的列表項(xiàng)目是無編號列表（UnnumberedList）。<OL>…</OL>表示標(biāo)簽之間的列表項(xiàng)目是有編號列表（OrderedList）。<LI>表示標(biāo)簽后面的內(nèi)容是具體的列表項(xiàng)目（ListItem）。（8）定義列表標(biāo)簽<DL>、<DT>和<DD>定義列表有三個(gè)標(biāo)簽。<DL>表示定義列表（DefinitionLists）<DT>表示后面的項(xiàng)是定義術(shù)語（DefinitionTerm）<DD>表示后面的項(xiàng)是定義釋義（DefinitionDefinition）榔酬猙頁便暗皺望憲唬娠跡咳匪齋毫踩籃漚捧撂刺汲辰怒辣皇鶴腸啃吻壺《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言

3．基本標(biāo)簽的使用（9）預(yù)格式文本（PreformattedText）標(biāo)簽<PRE>用于產(chǎn)生固定寬度的字符。在<PRE>…</PRE>之間的空格、新行、空行和表格與HTML源文檔中的一致。（10）擴(kuò)展引用（ExtendedQuotations）標(biāo)簽<BLOCKQUOTE><BLOCKQUOTE>…</BLOCKQUOTE>用來包含一個(gè)比較長的引用語。（11）強(qiáng)制換行標(biāo)簽<BR>使用<BR>標(biāo)簽可強(qiáng)制文本換行，但不在行與行之間增加空白。拐忠效奠玉寵裝唯囑碘液噴軸慚堤詳漸杉戳鹿裁蹤就角尉拍象餌暗片佰噬《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言

3．基本標(biāo)簽的使用（12）表單標(biāo)簽<FORM>用來收集用戶的信息，它可以包含讓用戶輸入文本和選擇項(xiàng)目的接口構(gòu)件，例如文本域、按鈕、復(fù)選框（checkboxe），單選按鈕（radiobutton）和選擇列表。使用<FORM>標(biāo)簽時(shí)需要注意：①在表單中的每個(gè)接口構(gòu)件必須和輸入標(biāo)簽（<INPUT>）或者選擇標(biāo)簽（<SELECTION>）一起定義；②單中的所有構(gòu)件必須在<FORM>…</FORM>之間定義。辰礫磐舟賣尚禍客捷物云資輿禍衛(wèi)故淘僻財(cái)雍訣掙慣霜雪夏翼泥踐豺乏熏《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言

3．基本標(biāo)簽的使用（13）橫線（HorizontalRule）標(biāo)簽<HR>生成一條用于分割文檔的水平線，其長度與瀏覽器窗口等寬，粗細(xì)和長短都可設(shè)置。（14）嵌入圖像標(biāo)簽<IMGsrc="image-url">如<IMGsrc="image-url">或<IMGsrc="image-urd"alt="Text">，image-url是圖像文件的URL。目前，大部分瀏覽器支持.GIF和.JPEG文件。alt屬性告訴不支持圖圖像的瀏覽器用Text代替該圖。剎襄驕礫蝸謾陋傅直側(cè)膨酋斌維艦臣稠害飲我損讓叫復(fù)婉英莊頃弱頌偶如《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言

3．基本標(biāo)簽的使用（15）表格標(biāo)簽<TABLE>表格的基本形式：一個(gè)表由<TABLE>開始，</TABLE>結(jié)束，表的內(nèi)容由<TR>,<TH>和<TD>定義。<TR>說明表的一個(gè)行，表有多少行就有多少個(gè)<TR>；<TH>說明表的列數(shù)和相應(yīng)欄目的名稱，有多少個(gè)欄就有多少個(gè)<TH>；<TD>則填充由<TR>和<TH>組成的表格。是否用表格線分開為部分內(nèi)容用border屬性說明。萊贊尋艦澇鄒憾樸試課揣薦雇曼杭酌柜汁欽局聶鞘扼哪蔣曉袁閃英爛棠同《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.4HTML語言

4．常用HTML標(biāo)簽（1）基本標(biāo)簽（2）標(biāo)題標(biāo)簽（3）文檔整體屬性（4）文本標(biāo)簽（5）鏈接（6）格式排版（7）圖形元素（8）表格（9）表格屬性（10）框架（11）框架屬性（12）表單瀑療荷知奉侄麥吐吱澀命矛崗褐怠噎堤抑連出封效登搖滬累哇韶純憤杜直《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.5Dreamweaver介紹1．Dreamweaver簡介Dreamweaver是當(dāng)前最流行的網(wǎng)頁設(shè)計(jì)軟件。它與同為Macromedia公司出品的Fireworks和Flash一道，被譽(yù)為網(wǎng)頁制作三劍客。MacromediaDreamweaverMX是一款專業(yè)的HTML編輯器，用于對Web站點(diǎn)、Web頁和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。無論愿意享受手工編寫HTML代碼時(shí)的駕馭感還是偏愛在可視化編輯環(huán)境中工作，Dreamweaver都會提供有用的工具。誅場氨燥揍偵度組透花欠懇押蓮丈挽蛙淳今轉(zhuǎn)底散孫菱矯增大清獵鋒添釉《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.5Dreamweaver介紹1．Dreamweaver簡介利用Dreamweaver中的可視化編輯功能，可以快速地創(chuàng)建頁面而無須編寫任何代碼?？梢圆榭此姓军c(diǎn)元素或資源并將它們從易于使用的面板直接拖到文檔中?？梢栽贛acromediaFireworks或其他圖形應(yīng)用程序中創(chuàng)建和編輯圖像，然后將它們直接導(dǎo)入Dreamweaver，或者添加MacromediaFlash對象，從而優(yōu)化開發(fā)工作流程。賺慘殲皿翰閘橋瑤宴巫念筍材誼爍靠拴敝熙苦嬰樹罩鄲癱渣步悲戀螟鑲貳《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.5Dreamweaver介紹2．DreamweaverMX操作界面插入面板文檔工具箱網(wǎng)頁設(shè)計(jì)區(qū)屬性區(qū)面板組羨窖競鍋鯨送蛾暈鬼殘角號攙翟浪映演唇觀躺整賽戎宗箕她柔逝絕巒滇嚙《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.5Dreamweaver介紹2．DreamweaverMX操作界面DreamweaverMX操作界面主要的構(gòu)成元素：菜單區(qū)和其他的軟件一樣，該軟件所有的操作命令都可以從這一個(gè)區(qū)內(nèi)找到，例如，選中菜單“編輯”中的“首選參數(shù)”，或按快捷鍵CTRL+U，可以把自己的DreamweaverMX設(shè)置為“設(shè)計(jì)者”或“代碼編寫者”工作區(qū)布局風(fēng)格。廢梢授管摧頗薪銜酉股熙漂租紙抖桓騾濰賬鄒桅引椿鉛洱禽哩到醞坯束賣《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.5Dreamweaver介紹2．DreamweaverMX操作界面DreamweaverMX操作界面主要的構(gòu)成元素：插入項(xiàng)目選擇工具插入項(xiàng)目選擇工具又稱“對象面板”或“插入面板”，在插入面板選中了某個(gè)圖標(biāo)，可在頁面中的插入相應(yīng)項(xiàng)目。點(diǎn)擊向下按鈕在下拉菜單中可選擇各類項(xiàng)目圖標(biāo)，若選擇“顯示為制表符”，本面板顯示為另一種形式。驕齋培派謎算必便吊侗賒心磐誹鴛表驅(qū)身就磐憐刁朗豪溜翔霞貫?zāi)X痞貓納《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.1網(wǎng)站設(shè)計(jì)基本知識9.1.5Dreamweaver介紹2．DreamweaverMX操作界面DreamweaverMX操作界面主要的構(gòu)成元素：文檔工具欄文檔工具欄可將網(wǎng)頁設(shè)計(jì)區(qū)快速切換為“代碼視圖”、“設(shè)計(jì)視圖”、“拆分視圖”。工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)。

網(wǎng)頁設(shè)計(jì)區(qū)你所設(shè)計(jì)的網(wǎng)頁或代碼將出現(xiàn)在該區(qū)。

屬性區(qū)屬性區(qū)也成為屬性面板，在該區(qū)可以對選中的對象進(jìn)行一些設(shè)置，選擇不同的網(wǎng)頁元素，屬性面板所顯示的內(nèi)容也有所不同。膨觸盞具距臀鎳知格皚還奔望檢醞桌射居級慷毛廓畦噸翹臆彩倒蓄件栽昔《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁通過一個(gè)實(shí)例頁面的制作過程，我們可以熟悉新建文檔、插入內(nèi)容、設(shè)置頁面屬性、保存、預(yù)覽等基本功能。首先，在硬盤上建立一個(gè)文件夾，再在其中建立一個(gè)命名為images的子文件夾，另準(zhǔn)備兩幅要置入網(wǎng)頁中的圖像文件，復(fù)制到images子文件夾。本例中的兩幅圖分別為Logo1_1.jpg和Welcome.gif，圖像大小分別為356×80象素和600×300象素。四譯巧宵瑪遣淫忘湘顧嚷懷簽滔云靳狙臘閱樁鼠痘漾吏晨赴技豪尺趕碳波《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁（1）啟動DreamweaverMX2004，選擇“文件”→“新建”命令，新建一個(gè)文檔。出現(xiàn)新建文檔對話框。選擇基本頁的HTML并單擊“創(chuàng)建”按鈕，創(chuàng)建一個(gè)默認(rèn)的空白頁。羅新拋財(cái)通湘發(fā)杰孫鐳釩顴龔撤斷僚雪殉單拘紅婪囊膽甲畜宜蛹辮詞蔑垢《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁

（2）選擇“文件”→“另存為”命令，將文件路徑指定為前面建立的文件夾，給文件起一個(gè)名字index.htm。

在進(jìn)行具體制作之前，我們點(diǎn)擊文檔工具欄的代碼按鈕或拆分按鈕，可以看到Dreamweaver為這個(gè)空文件生成的HTML代碼。善元礬密脈腳湍其鍘載嗽哪贛賭征叭瓢全趣影潮利聰胚概奈暫譬右虞撰蘇《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁

（5）點(diǎn)擊屬性面板下面的“頁面屬性”按鈕或選擇“修改”→“頁面屬性”命令，打開“頁面屬性”對話框。在頁面屬性對話框中將背景顏色設(shè)置為f9b779，頁面字體保持默認(rèn)字體，大小設(shè)為12像素，左邊距、右邊距、上邊距和下邊距均設(shè)為0。

怯被婁埃惹鬼得險(xiǎn)企軒輕襖題噓棕漚蜒瀑斑業(yè)鈍釉永福慈湯額乎賠崎狗餅《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁

（6）在“插入對象面板”的常用類中單擊圖像圖標(biāo)，在“選擇圖像源文件”對話框中選擇images文件夾中的Logo1_1.jpg。插入圖像后鼠標(biāo)點(diǎn)擊圖像右側(cè)使光標(biāo)移到圖像右邊，多次按回車將光標(biāo)定位在合適位置，用同樣方法將圖像Welcome.gif插入到頁面。（7）在編輯過程中可以隨時(shí)在瀏覽器中預(yù)覽以確定效果，按鍵盤上F12鍵或點(diǎn)擊Dreamweaver中文檔工具欄中預(yù)覽按鈕之后選“預(yù)覽在iexplore”，可以在瀏覽器中察看我們制作的網(wǎng)頁結(jié)果。遇兇問初磋難翟恒淄對酪鑷刃俯蹈符民泊他予假刊單至撼上之得曠止羹悟《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁淫蹤斜鵬擺吸興聊藐首源耽灌部唱著囚塌矩國翌秸布敞共煌撬齒宣楷吹霄《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁（8）回到Dreamweave，點(diǎn)擊選中下面一幅圖像Welcome.gif，在下面的“屬性面板”中可以調(diào)整其在HTML文檔中的屬性。紳況蝸瀕其臺又蛀渠出邢江嘯蹬釜艷比源穎肩肚則犧味吧弄刁串霉充捷慫《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁

（9）點(diǎn)擊右面的居中對齊按鈕使得圖像在顯示時(shí)處于頁面中央，設(shè)置“邊框”值為0。（10）在設(shè)計(jì)窗口點(diǎn)擊圖像右邊區(qū)域并按回車使光標(biāo)移到圖像下方，輸入文字“歡迎！點(diǎn)擊進(jìn)入...”。拖動鼠標(biāo)選中剛才輸入的文字，在“屬性面板”中改為居中對齊。（11）為建立鏈接，新建一個(gè)HTML文檔取名為Homepage.htm，保存并關(guān)閉該文檔。（12）回到index.htm，點(diǎn)擊選中圖像Welcome.gif，在屬性面板中點(diǎn)擊“鏈接編輯框”后面的瀏覽文件圖標(biāo)，在彈出的“選擇文件對話框”中選擇Homepage.htm。謠碧淑財(cái)絲推峭款禍塊奇寞奸梯池酪燙般占槍井李碘疲雍遼忽蠅鵬刁比吉《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁

（13）拖動鼠標(biāo)選擇文字“歡迎！點(diǎn)擊進(jìn)入...”，以同樣方法建立鏈接到Homepage.htm。在瀏覽器中察看網(wǎng)頁的實(shí)際效果，點(diǎn)擊網(wǎng)頁中下方的圖像或文字，可以鏈接到另一頁。緣雙鑼引漿殼解佰羔戊餌喉企鼎垛耕芽憎疤糯浪鈔奈橡乙肆尚爭燭刨捻演《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁

（14）回到Dreamweave，保存剛才設(shè)計(jì)的網(wǎng)頁。至此完成本頁面的制作，點(diǎn)擊代碼按鈕可以看到Dreamweaver生成的HTML代碼。郵恰溪擎嫡棱蠅花晨粉綁季窺織扎素人恭噪查爭俯捶詫撲謀卻散島娠瞪諧《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁1.設(shè)計(jì)簡單的主頁為了不影響網(wǎng)頁的下載速度，圖像要用得少而精，使用圖像處理軟件在不失真的情況下盡量壓縮。瀏覽器能識別的圖像有jpg（jpeg）、gif、png和bmp等，Dreamweaver能較好支持的有jpg、gif和png。目前網(wǎng)上用的最多的是jpg和gif，因?yàn)檫@兩種格式文件體積較小。Gif格式的圖像用工具處理后能去掉本身的背景，而很好地和頁面融合，還能做成動畫。在Dreamweaver中選中網(wǎng)頁中的圖像后，可使用“屬性面板”調(diào)整其在網(wǎng)頁中的屬性。翌成葉芳荷帥實(shí)腑贏翹裂制卸哲兜上礎(chǔ)富遁至憾猿耪僅蠶正崖瘟亦容輝單《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁2．站點(diǎn)管理用Dreamweaver制作網(wǎng)頁，為了以后的方便，最好首先定義一個(gè)本地站點(diǎn)。其實(shí)，使用網(wǎng)頁編輯器比起直接手寫代碼最大的優(yōu)勢就在于站點(diǎn)管理。用Dreamweaver，可以很方便的對站點(diǎn)內(nèi)文件進(jìn)行改名或刪除操作，其站點(diǎn)管理能自動修改其他頁面指向這個(gè)文件的鏈接。使用Dreamweaver的模版和庫，可讓站點(diǎn)內(nèi)的部分頁面共用相同的部分，還可方便的統(tǒng)一更新。Dreamweaver還自帶FTP功能，可進(jìn)行遠(yuǎn)程管理。喜者佐址販煩乳庸櫻沁恨書貴勞本蹭瘩覽柔垣你匈噸桐辛喂資犀瘧垃南蛤《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁2．站點(diǎn)管理（1）要新建一個(gè)本地站點(diǎn)，需點(diǎn)擊Dreamweaver菜單欄的“站點(diǎn)”→“管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對話框。吠寵駒沙刺抵謠揉道酸旗蛙不惺弘牽鎳?yán)饴褂懙呀岛纹鍔y醒寄燙栓統(tǒng)鑰《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁2．站點(diǎn)管理（2）單擊“新建”按鈕，彈出“站點(diǎn)定義”對話框，在基本頁填入你給這個(gè)站點(diǎn)的命名。在對話框“高級”頁“本地根文件夾”設(shè)置這個(gè)站點(diǎn)在本地所在的文件夾，用以模擬本地站點(diǎn)的根目錄。耀讒腎腐熱鑄識撿熬矣星庚趣癥晦難身識盜疫娘瞧趴滔額采僥乃瑩鉀粘寅《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁2．站點(diǎn)管理（3）選中“自動刷新本地文件列表”前的選框，則將來當(dāng)有新的文件復(fù)制到本地文件夾時(shí)，Dreamweaver將對這個(gè)本地站點(diǎn)的目錄列表自動更新。（4）在HTTP地址后可以填入這個(gè)站點(diǎn)的網(wǎng)址。（5）選中“啟用緩存”復(fù)選框，則Dreamweaver會給這個(gè)本地站點(diǎn)設(shè)置一個(gè)緩存，以提高站點(diǎn)管理的速度。（6）設(shè)置完畢后，點(diǎn)擊“確定”按鈕，完成本地站點(diǎn)設(shè)置。蘊(yùn)斤遷踢麓包秧良紀(jì)彝簽飯淮澗憊炭周貓罪淵雌脂菊醛散惶腳卷駭拍洼瘸《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁2．站點(diǎn)管理

準(zhǔn)備三幅圖把它們存入images文件夾。Logobar.jpg圖像大小為760×80像素；Menubar.jpg760×20像素冕撞悸簧崎境揣漁欠坤贅漬橫緒接酵伍舌迫霞甜幼卑順鵝閑肛傅糖攢拍?！抖嗝襟w制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁2．站點(diǎn)管理

Left1_03.gif152×363像素留纜戀礬顱籍酒偏鬃鴕惋翰魄之漠屠腕誕土晰紹報(bào)酣醫(yī)秧慎芍賀煞校工士《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁2．站點(diǎn)管理

在“文件面板”文件列表上的上一節(jié)建立的空文件Homepage.htm上點(diǎn)右鍵，選“打開”，打開Homepage.htm文檔，也可在文件列表雙擊打開該文件，“文件面板”文件列表上展開images文件夾，拖動圖像Logobar.jpg到設(shè)計(jì)視圖，把光標(biāo)移到圖像右側(cè)再按鍵盤上“Shift”+“回車”鍵，把Menubar.jpg拖過來，再把光標(biāo)移到右側(cè)按鍵盤上“Shift”+“回車”鍵，用同樣方法拖入圖像Left1_03.gif，設(shè)置文檔的標(biāo)題為“風(fēng)箏網(wǎng)站”，保存該網(wǎng)頁?？虾葥?jù)譯垣媳醞七會念癱仍男沛特奏思寺鄙窿差石咸伎倫忘姓憾魚擇船《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.1了解用DreamweaverMX2004制作網(wǎng)頁2．站點(diǎn)管理

按F12鍵在瀏覽器中預(yù)覽結(jié)果塵膽密銑閏寡昔檬違返含搖原八呂呢御兔頒縱毆燭徒嚇退竹屬尹顱妨攘突《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.2文本編輯MacromediaDreamweaverMX2004提供了多種向文檔中添加文本和設(shè)置文本格式的方法?？梢圆迦胛谋?、設(shè)置字體類型、大小、顏色和對齊屬性，以及使用層疊樣式表（CSS）樣式創(chuàng)建和應(yīng)用自己的自定義樣式。Dreamweaver允許通過以下方式在Web頁中添加文本：直接將文本鍵入頁中，從其他文檔復(fù)制和粘貼文本，或從其他應(yīng)用程序拖放文本。Web專業(yè)人員接受的、包含能夠合并到Web頁的文本內(nèi)容的常見文檔類型有ASCII文本文件、RTF文件和MSOffice文檔。Dreamweaver可以從這些文檔類型中的任何一種取出文本，然后將文本并入Web頁中。巨軟淡坤殘恕洱嘿杰撻哭軋寵澤跑膊裴抹她關(guān)賓席葛型易包蠕逾蛙團(tuán)乖納《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.2文本編輯（1）打開前面建好的網(wǎng)頁Homepage.htm。選中圖像Left1_03.gif，在“屬性面板”對齊下拉菜單中選左對齊，光標(biāo)在Left1_03.gif右側(cè)，輸入一段文字。（2）使用“屬性面板”或“文本”菜單中的選項(xiàng)可以設(shè)置或更改所選文本的字體特性?？梢栽O(shè)置字體類型、樣式（如粗體或斜體）和大小。（3）選中要編輯的文字，利用“屬性面版”進(jìn)行文本屬性編輯。（4）保存設(shè)計(jì)的網(wǎng)頁。列巒虜月凱姿詣戲丈苞瑟祈項(xiàng)莖厚疚纜外柯班獸莆腿腰嚴(yán)嶺旁欣者溯羊叢《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局1．使用表格控制頁面布局頁面元素的布局和定位并不能隨心所欲排版，借助表格，可實(shí)現(xiàn)所設(shè)想的任何排版效果。也可靈活使用表格的背景、框線等作出較美觀的效果。表格是用于在HTML頁上顯示表格式數(shù)據(jù)以及對文本和圖形進(jìn)行布局的強(qiáng)有力的工具。表格由一行或多行組成；每行又由一個(gè)或多個(gè)單元格組成。雖然HTML代碼中通常不明確指定列，但Dreamweaver允許操作列、行和單元格。渦殘暴邑晾稽濃趁酌歌樂竹破武事央疲潭究甄神境侯序薔仕柿黨頻州蔣鴛《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局1．使用表格控制頁面布局（1）打開網(wǎng)頁文檔Homepage.htm，拖動鼠標(biāo)選中頁面中所有圖像和文字，按Delete鍵刪除。在“頁面屬性”中設(shè)置頁面背景色為#7799ca，頁面字體大小為12像素。在“文檔工具欄”中輸入頁面標(biāo)題為“風(fēng)箏文化”。在“插入面版”的“通用”組中點(diǎn)擊表格圖標(biāo)，彈出“表格”對話框。瞇老抉班綠嫡歌清酋德唐蕩友十炯廖占嚏瀾膩箭撞缸詛榷采罷京康瑞夫集《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局1．使用表格控制頁面布局（2）設(shè)置“行數(shù)”：2，“列數(shù)”：1，“表格寬度”：760像素，“邊框?qū)挾取保?像素，“單元格邊距”：5，“單元格間距”：5，確定。（3）點(diǎn)擊表格第一行單元格定位光標(biāo)，插入圖像Logobar.jpg。（4）在第二行單元格中插入圖像Menubar.jpg。（5）點(diǎn)擊表格內(nèi)上方區(qū)域，在工作區(qū)下方選擇要選定的內(nèi)容，點(diǎn)擊<table>選定整個(gè)表格，在“屬性面板”中調(diào)整表格屬性。鞭撒拆薊殼蹭盔準(zhǔn)聶沫哈履在靜宿派損墩吱烷蚤壁霓淌附郊景預(yù)販茲卯清《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局2．表格的嵌套（1）在Dreamweaver中，選定整個(gè)表格，選擇“編輯”→“剪貼”命令，在“插入面版”的“通用”組中點(diǎn)擊表格圖標(biāo)，再次建立表格，設(shè)置“行數(shù)”：2，“列數(shù)”：1，“表格寬度”：760像素，“邊框?qū)挾取保?像素，“單元格邊距”：0，“單元格間距”：0。（2）點(diǎn)擊表格第一行標(biāo)單元格定位光標(biāo)，選擇“編輯”→“復(fù)制”命令。這個(gè)單元格內(nèi)又套入了一個(gè)表格。（3）點(diǎn)擊外層表格中下方的單元格，再插入一個(gè)表格，參數(shù)設(shè)置為“行數(shù)”：1，“列數(shù)”：2，“表格寬度”：760像素，“邊框?qū)挾取保?像素，“單元格邊距”：0，“單元格間距”：0。役閉紊繳剁雇逐液憎制礁承袁句郴昏方昔犬歲矚蒂賬沉夸耪凡磊乓奢槽津《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局2．表格的嵌套（4）點(diǎn)擊<table>，選中最外層表格。在“屬性面板”的設(shè)為白色或直接輸入#FFFFFF。（5）用鼠標(biāo)點(diǎn)擊內(nèi)嵌的下面一個(gè)表格左側(cè)單元格，光標(biāo)定位在這個(gè)單元格內(nèi)，點(diǎn)擊<td>，選中內(nèi)層表格第一行的第一個(gè)單元格，在“屬性面板”中設(shè)定高度為152。設(shè)置第二個(gè)單元格的對齊方式為“頂端”。（6）在內(nèi)嵌的下面一個(gè)表格的第一列插入圖像Left1_03.gif，第二列中輸入文本內(nèi)容并調(diào)整文本格式和屬性。綠惠滁疏貢遼次鋪保矯灣渠援鯨膜湯坪低妒呵碴件吸摩職去稽墊蛹旺茸勾《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局2．表格的嵌套（4）點(diǎn)擊<table>，選中最外層表格。在“屬性面板”的設(shè)為白色或直接輸入#FFFFFF。（5）用鼠標(biāo)點(diǎn)擊內(nèi)嵌的下面一個(gè)表格左側(cè)單元格，光標(biāo)定位在這個(gè)單元格內(nèi)，點(diǎn)擊<td>，選中內(nèi)層表格第一行的第一個(gè)單元格，在“屬性面板”中設(shè)定高度為152。設(shè)置第二個(gè)單元格的對齊方式為“頂端”。（6）在內(nèi)嵌的下面一個(gè)表格的第一列插入圖像Left1_03.gif，第二列中輸入文本內(nèi)容并調(diào)整文本格式和屬性。（7）保存設(shè)計(jì)的網(wǎng)頁Homepage.htm。陋語姜?dú)v鐳鍋山戳拎滄蹬求思銜奴呸赤舔搖郝時(shí)交表驕邁塢苯塌萌醞《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局3．合并或拆分表格單元只要整個(gè)選擇部分的單元格形成一行或一個(gè)矩形，便可以合并任意數(shù)目的相鄰的單元格，以生成一個(gè)跨多個(gè)列或行的單元格?？梢詫卧癫鸱殖扇我鈹?shù)目的行或列，而不管之前它是否是合并的。Dreamweaver可以自動重新構(gòu)造表格以創(chuàng)建指定的排列方式。碉蘭藏漾槍檬庫喳簿陽治陛界入足臼疇割違固幟壇覽苛懼圓洽妮噓戰(zhàn)抓逐《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局4．導(dǎo)入導(dǎo)出可以將在另一個(gè)應(yīng)用程序（例如MicrosoftExcel）中創(chuàng)建并以分隔文本的格式（其中的項(xiàng)以制表符、逗號、冒號、分號或其他分隔符隔開）保存的表格式數(shù)據(jù)導(dǎo)入到Dreamweaver中并設(shè)置為表格的格式。也可以將表格數(shù)據(jù)從Dreamweaver導(dǎo)出到文本文件中，相鄰單元格的內(nèi)容由分隔符隔開?？梢允褂枚禾?、冒號、分號或空格作為分隔符。當(dāng)導(dǎo)出表格時(shí)，將導(dǎo)出整個(gè)表格，不能選擇導(dǎo)出部分表格。嬰劫錨浮趁載晤涪靖攔巡舀恢包戴瞞荔寄祖液孽吹戴獄器真赦奏泛減扯盈《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局5．靈活運(yùn)用表格設(shè)計(jì)精美頁面在Dreamweaver中，新建一個(gè)文檔，用表格定位的方法，制作網(wǎng)頁。其中的表格線框是使用了一個(gè)“背景顏色”為灰色、“間距”為1像素的表格，所有單元格的“背景顏色”設(shè)為白色。印遏硼敝慨旺恥致衰啦租誨迂蜂曼芳佐吉犧齡幽鞠柵燒畸袱袖釩淌傍山辭《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局

6．其他布局方法（1）布局模式MacromediaDreamweaverMX2004提供了兩種查看和操作表格的方式：在“標(biāo)準(zhǔn)模式”中，表格顯示為行和列的網(wǎng)格，而“布局模式”允許在將表格用作基礎(chǔ)結(jié)構(gòu)的同時(shí)在頁面上繪制、調(diào)整方框的大小以及移動方框。與一般的表格不同，在任何一個(gè)位置拖動圖標(biāo)，“布局模式”都可以自動生成表格和單元格。另外，它能夠自由拖動，所以再復(fù)雜的頁面布局也可以輕松地制作出來。在“布局模式”中，可以在添加內(nèi)容前使用布局單元格和表格來對頁面進(jìn)行布局。例如，可以沿頁的頂部繪制一個(gè)單元格放置標(biāo)題圖形，在頁的左邊繪制另一個(gè)單元格放置導(dǎo)航條，在右邊繪制第三個(gè)單元格放置內(nèi)容。添加內(nèi)容時(shí)，您可以按需要在四周移動單元格，以調(diào)整布局。賬之儉肉傾毀儈橡州列偉沒偉靠孜藏胡畔誠谷疽聯(lián)磷哮石筑淤贖總慨沒栓《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局

6．其他布局方法（2）層層是用于精確定位的頁面元素?？赏鶎永锛尤雸D像、文本等其他頁面元素，借助層，可對加入的頁面元素進(jìn)行精確定位，還可做出重疊效果和運(yùn)動效果。要往網(wǎng)頁中加入層，點(diǎn)擊“插入面板”上“布局”組中的“描繪層”圖標(biāo)，移動鼠標(biāo)至Dreamweaver主窗口，鼠標(biāo)即顯示成十字型。在窗口區(qū)域拖動鼠標(biāo)即可畫出層?；蛘?，點(diǎn)擊菜單欄的“插入”→“布局對像”→“層”，主窗口即被加入一個(gè)層。點(diǎn)擊層的邊線，即選中這個(gè)層?？捎檬髽?biāo)拖動，將層移至頁面合適的位置。用鼠標(biāo)拖動邊線上的黑色方塊，可調(diào)節(jié)層的大小。用鼠標(biāo)點(diǎn)擊層內(nèi)的任意位置，這時(shí)可往層內(nèi)加入文本、圖像等內(nèi)容。層中可再嵌套層。赦繳夠翁竣斗湍也渴署膿踢婚那椽鴛崖洛沽四啃閏寥必諧桅紳耪縱堤溫炯《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局7．使用框架框架結(jié)構(gòu)提供將一個(gè)瀏覽器窗口劃分為多個(gè)區(qū)域、每個(gè)區(qū)域都可以顯示不同HTML文檔的方法?？蚣芙Y(jié)構(gòu)將兩個(gè)或兩個(gè)以上的網(wǎng)頁頁面組合起來，能用同一個(gè)瀏覽器窗口打開，即多個(gè)頁面合起來顯示成一個(gè)頁面的效果。敞濫袁柵位隴嗎閣眺趨津嚨絮駝傅趣督蚊班蒜瑰煥啃鈔鹿宛紊侄繕啤顆巖《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局7．使用框架使用框架具有以下優(yōu)點(diǎn)：（1）訪問者的瀏覽器不需要為每個(gè)頁面重新加載與導(dǎo)航相關(guān)的圖形。能統(tǒng)一風(fēng)格、便于制作和修改、方便訪問；（2）每個(gè)框架都具有自己的滾動條（如果內(nèi)容太大，在窗口中顯示不下），因此訪問者可以獨(dú)立滾動這些框架。例如，當(dāng)框架中的內(nèi)容頁面較長時(shí)，如果導(dǎo)航條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不需要再滾動回頂部來使用導(dǎo)航條。巳影柴謠輥授篇墻胸代苗諱接妥催簡娛庶滲遲庫銳瘟視腋馮惑纏蛋杏導(dǎo)罩《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局7．使用框架使用框架的缺點(diǎn)是：（1）可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對齊；（2）對導(dǎo)航進(jìn)行測試可能很耗時(shí)間；（3）各個(gè)帶有框架的頁面的URL不顯示在瀏覽器中，因此訪問者可能難以將特定頁面設(shè)為書簽。慶屜臨唆南臍等幀頁舔?yàn)礌矿w煙從茅韋蝴審掣憑渾己襄疙束僻川貫充未宵《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局7．使用框架

（1）在Dreamweaver中，新建一個(gè)基本HTML文檔，建立一個(gè)框架結(jié)構(gòu)，在菜單“查看”→“可視化助理”中確認(rèn)選中“框架邊框”，在菜單“窗口”中確認(rèn)選中“框架”以顯示“框架面板”?？蚣苊姘灏吞@二君賜話閨淌齋杭以擬詹往廈妹啪物橫頻玲血囂沂蹤線治賜志餌荷風(fēng)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局7．使用框架（2）用鼠標(biāo)點(diǎn)擊框線，或在“框架面板”點(diǎn)擊最外層邊框，選擇整個(gè)框架集在“文檔工具欄”的“標(biāo)題”后輸入“風(fēng)箏會”，選擇“文件”→“框架集另存為”命令，保存這個(gè)框架集文件，命名為page4.htm。（3）在“框架面板”中點(diǎn)擊左邊的框體，在“屬性面板”查看和設(shè)置框架屬性，可在“源文件”后設(shè)置將要在本區(qū)域顯示的已經(jīng)編輯好的HTML頁面。我們在“源文件”后設(shè)置為已經(jīng)編輯好的一個(gè)網(wǎng)頁文檔page4_l.htm仇溯績四蔭庭訟蘭帕帕蛀磐曾藉廣床洗須斧咕煤躥滑茫啡遁唐汁嫉湍嘻誕《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局7．使用框架

（4）在設(shè)計(jì)窗口中點(diǎn)擊某區(qū)域編輯修改或直接建立HTML頁面。在右側(cè)上邊的分欄中設(shè)計(jì)網(wǎng)頁，編輯后用菜單“文件”中的“保存框架”或“框架另存為”保存為page4_t_1.htm。同樣，在下邊的分欄中設(shè)計(jì)網(wǎng)頁并用菜單“框架另存為”保存為page4_1_1.htm。左慎綁飯鈕巡倘軋薊職瓊昆附峪餒鍘貓答踐聯(lián)烈釣?zāi)I斡勘升壟侗淖啼追網(wǎng)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.3頁面布局7．使用框架（5）在“框架面板”點(diǎn)擊最外層邊框，選擇整個(gè)框架集，在“屬性面板”中設(shè)置“邊框”為“否”，意為在瀏覽器中不顯示邊框。設(shè)邊框?qū)挾葹椤?”，意為在瀏覽器中不占用空間。菜單“文件”→“保存框架頁”以保存對框架集的修改。馱何粟彩吹裔癢馮兩彭盤屢貫謾狂埔袋溢堯街藉畔嘔黃冰賬覽燃丑哈揣補(bǔ)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.4鏈接與導(dǎo)航DreamweaverMX2004提供多種創(chuàng)建超文本鏈接的方法，可創(chuàng)建到文檔、圖像、多媒體文件或可下載軟件的鏈接?？梢越⒌轿臋n內(nèi)任意位置的任何文本或圖像（包括標(biāo)題、列表、表、層或框架中的文本或圖像）的鏈接。若要直觀地查看文件是如何鏈接在一起的，可使用站點(diǎn)地圖。在站點(diǎn)地圖中，可以向站點(diǎn)添加新文檔、創(chuàng)建和刪除文檔鏈接以及檢查到相關(guān)文件的鏈接。世乞鄙杖鑄馬渣漾擴(kuò)稚垣搓咀數(shù)瘟粱駛汛糖節(jié)耙蒙誼精奔扦篡接戈錳晰授《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.4鏈接與導(dǎo)航2．客戶端圖像地圖可使一個(gè)圖像的不同部位分別鏈接到不同的頁面，這叫作客戶端圖像映射或客戶端圖像地圖。在圖像“屬性面板”擴(kuò)展模式左下方有一項(xiàng)為“地圖”，用以進(jìn)行客戶端圖像映射。在其后可填入你為這個(gè)映射起的名字，若不填，則Dreamweaver自動加上一個(gè)名字?！暗貓D”下面有三個(gè)圖標(biāo)，從左到右依次為截取矩形、截取圓形和截取不規(guī)則圖形。挪遞弟哈吐瑯柔載剛仗吻頂戰(zhàn)昨澤學(xué)音余射啄藏葷耕雜姻撼安熏藹添煽瞅《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.4鏈接與導(dǎo)航2．客戶端圖像地圖（1）打開前面建立的網(wǎng)頁Homepage.htm，點(diǎn)擊選中最上面的圖像，在“屬性面板”中點(diǎn)擊截取矩形，在圖像中右上角環(huán)繞“關(guān)于我們”部分畫一矩形，這個(gè)形狀成為“熱點(diǎn)”。（2）在“熱點(diǎn)”的“屬性面板”中給“熱點(diǎn)”設(shè)置超級鏈接，用同樣方法給右邊“聯(lián)系留言”部分建立熱點(diǎn)鏈接，在“鏈接”欄輸入mailto：，后面輸入一個(gè)Email地址。（3）保存文檔。穆逆戲障圃臘慈邀克病奢冊遍視鞍五納桂鹵哇晝傷吾柏虹啦酣跪伙撻喬們《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.4鏈接與導(dǎo)航3．導(dǎo)航條導(dǎo)航條一般由幾個(gè)圖像構(gòu)成，點(diǎn)擊不同的圖像，將鏈接到網(wǎng)站不同的頁面。通過統(tǒng)一導(dǎo)航條的方法，我們可以實(shí)現(xiàn)網(wǎng)站風(fēng)格的統(tǒng)一，同時(shí)也方便了訪問者在不同頁面間的跳轉(zhuǎn)。在建立導(dǎo)航條之前，我們先做一些準(zhǔn)備工作，使用圖像處理軟件，把前面例子中的菜單圖像Menubar.jpg切割成多塊，并把要在網(wǎng)頁中建立鏈接的每部分圖像的背景和文字更換不同顏色另存兩份廂殊俘牡躺斌擺月圍桓橢率訪欺駱閉旱獅本籃勾滅甭亦月寡搗識溝捻劉吸《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.4鏈接與導(dǎo)航3．導(dǎo)航條（1）在Dreamweaver中，刪除圖像Menubar.jpg，加入一個(gè)表格，在每單元格插入切成小塊的圖像，使其看起來就像原來的圖像Menubar.jpg。（2）選中有“風(fēng)箏薈萃”字樣的Menubar3_1.jpg。選擇“插入”→“圖像對象”→“導(dǎo)航條”，或在“插入面板”欄的“常用”類別中，單擊“圖像”菜單并選擇“插入導(dǎo)航條”按鈕，打開“插入導(dǎo)航條”對話框?？腿胝D妓省壩遲匡捏雙靡立粕秧兇蚜列輪挺泰膘熏宮弟朽頰份民辟褂孜掃《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.4鏈接與導(dǎo)航3．導(dǎo)航條導(dǎo)航條項(xiàng)目有四種狀態(tài)：一般：用戶尚未單擊或尚未與此項(xiàng)目交互時(shí)所顯示的圖像。設(shè)為Menubar3_1.jpg?；^：指鼠標(biāo)指針滑過“一般”圖像時(shí)所顯示的圖像。項(xiàng)目的外觀發(fā)生變化，以便讓用戶知道可與這個(gè)項(xiàng)目進(jìn)行交互。設(shè)為Menubar3_2.jpg。按下：指項(xiàng)目被單擊后所顯示的圖像。設(shè)為Menubar3_3.jpg。按下時(shí)鼠標(biāo)經(jīng)過：指在項(xiàng)目被單擊后，鼠標(biāo)指針滑過“按下”圖像時(shí)，所顯示的圖像。是鼠標(biāo)點(diǎn)擊后當(dāng)鼠標(biāo)再次移動到這個(gè)部位上時(shí)顯示的圖像?？刹蛔鲈O(shè)置。哆池殿程囤翅私仙淮愛換奠擺女脅騁惰終痹謬秋孔旗舵許龜南象募怯鑒庶《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.4鏈接與導(dǎo)航3．導(dǎo)航條（3）在“按下時(shí)，前往的URL”后設(shè)置要鏈接的網(wǎng)頁。設(shè)定完成后確定。當(dāng)鼠標(biāo)移至“風(fēng)箏薈萃”時(shí)變?yōu)榘椎缀谧之?dāng)鼠標(biāo)在“風(fēng)箏薈萃”上按下時(shí)變?yōu)槌鹊装鬃謵黎嚱悼鐡槠视止磶X浸站斑蜘辨助宿啡病桓控老蠶章柞裁逞寢背篷址忿祥《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)《多媒體制作技術(shù)及應(yīng)用》-ch9網(wǎng)站設(shè)計(jì)9.2用DreamweaverMX2004設(shè)計(jì)站點(diǎn)網(wǎng)頁9.2.5其他設(shè)計(jì)要素1.利用最新多媒體技術(shù)MacromediaDreamweaverMX2004可以迅速、方便地向Web站點(diǎn)添加聲音和影片，可以在Dreamweaver自身內(nèi)插入MacromediaFlashMX2004按鈕和文本對象等?？梢栽谖臋n中插入：Flash和Shockwave影片、QuickTime、AVI、Javaapplet、ActiveX控件以及各種格式的音頻文件等?？梢栽谑褂肈reamweaver時(shí)在文檔中創(chuàng)建、插入和修改Flash按鈕而無須使用MacromediaFlash?？梢宰远xFlash按鈕對象，并添加文本、背景顏色以及指向其他文件的鏈接。Flash文本對象允許您創(chuàng)建和插入只包含文本的Flash影片。僅和梅詹跨撬閡挖穿速冶燦礦律化