dreamweaver846;0入門圖文教程

1、dreamweaver8.0入門圖文教程：Dreamweaver8操作環(huán)境 第一天的內(nèi)容可能讓你覺得枯燥乏味，不過，“工欲善其事，必先利其器”，讓我們一起來了解Dreamweaver8的操作環(huán)境，完成站點的創(chuàng)建。一、Dreamweaver8 的操作環(huán)境在首次啟動Dreamweaver8時會出現(xiàn)一個“工作區(qū)設(shè)置”對話框，在對話框左側(cè)是Dreamweaver8的設(shè)計視圖，右側(cè)是Dreamweave 8的代碼視圖。Dreamweaver8設(shè)計視圖布局提供了一個將全部元素置于一個窗口中的集成布局。我們選擇面向設(shè)計者的設(shè)計視圖布局。在Dreamweave 8 中首先將顯示一個起始頁，可以勾選這個窗口下面

2、的“不在顯示此對話框”來隱藏它。在這個頁面中包括“打開最近項目”、“創(chuàng)建新項目”“從范例創(chuàng)建”3個方便實用的項目，建議大家保留。新建或打開一個文檔，進入Dreamweaver8的標(biāo)準(zhǔn)工作界面。Dreamweaver8的標(biāo)準(zhǔn)工作界面包括：標(biāo)題顯示、菜單欄、插入面板組、文檔工具欄、標(biāo)準(zhǔn)工具欄、文檔窗口、狀態(tài)欄、屬性面板和浮動面板組。1、標(biāo)題顯顯示欄 啟動Maacromeedia DDreamwweave 8后，標(biāo)題題欄將顯示文文字Macrromediia Dreeamweaave 8.0，新建或或打開一個文文檔后，在后后面還會顯示示該文檔所在在的位置和文文件名稱。2、菜單欄Dreammweavee

3、 8的菜單單共有10個個，即文件、編編輯、視圖、插插入、修改、文文本、命令、站站點、窗口和和幫助。其中中，編輯菜單單里提供了對對Dreammweaveer菜單中首選參數(shù)的訪問。文件：用來來管理文件。例例如新建，打打開，保存，另另存為，導(dǎo)入入，輸出打印印等。編編輯：用來編編輯文本。例例如剪切，復(fù)復(fù)制，粘貼，查查找，替換和和參數(shù)設(shè)置等等。查看看：用來切換換視圖模式以以及顯示、隱隱藏標(biāo)尺、網(wǎng)網(wǎng)格線等輔助助視圖功能。插入：用來插入各種元素，例如圖片、多媒體組件，表格、框架及超級鏈接等。修改：具有對頁面元素修改的功能，例如在表格中插入表格，拆分、合并單元格，對其對象等。文本：用來對文本操作，例如設(shè)置文本

4、格式等。命令：所有的附加命令項站點：用來創(chuàng)建和管理站點窗口：用來顯示和隱藏控制面板以及切換文檔窗口幫助：聯(lián)機幫助功能。例如按下F1鍵，就會打開電子幫助文本3、插入面板組 插入面板集成了所有可以在網(wǎng)頁應(yīng)用的對象包括“插入”菜單中的選項。插入面板組其實就是圖像化了的插入指令，通過一個個的按鈕，可以很容易的加入圖像、聲音、多媒體動畫、表格。圖層、框架、表單、Flash和ActiveX等網(wǎng)頁元素。4、文檔工工具欄“文文檔”工具欄欄包含各種按按鈕，它們提提供各種“文文檔”窗口視視圖（如“設(shè)設(shè)計”視圖和和“代碼”視視圖）的選項項、各種查看看選項和一些些常用操作（如如在瀏覽器中中預(yù)覽）。5、標(biāo)準(zhǔn)工工具欄“標(biāo)

5、標(biāo)準(zhǔn)”工具欄欄包含來自“文文件”和“編編輯”菜單中中的一般操作作的按鈕：“新新建”、“打打開”、“保保存”、“保保存全部”、“剪剪切”、“復(fù)復(fù)制”、“粘粘貼”、“撤撤消”和“重重做”。6、文檔窗窗口當(dāng)我我們打開或創(chuàng)創(chuàng)建一個項目目，進入文檔檔窗口，我們們可以在文檔檔區(qū)域中進行行輸入文字、插插入表格和編編輯圖片等操操作?！拔奈臋n”窗口顯顯示當(dāng)前文檔檔?？梢赃x擇擇下列任一視視圖：“設(shè)計計”視圖是一一個用于可視視化頁面布局局、可視化編編輯和快速應(yīng)應(yīng)用程序開發(fā)發(fā)的設(shè)計環(huán)境境。在該視圖圖中，Dreeamweaaver 顯顯示文檔的完完全可編輯的的可視化表示示形式，類似似于在瀏覽器器中查看頁面面時看到的內(nèi)內(nèi)

6、容。“代碼碼”視圖是一一個用于編寫寫和編輯 HHTML、JJavaSccript、服服務(wù)器語言代代碼以及任何何其他類型代代碼的手工編編碼環(huán)境?！按a和設(shè)計”視視圖使您可以以在單個窗口口中同時看到到同一文檔的的“代碼”視視圖和“設(shè)計計”視圖。7、狀態(tài)態(tài)欄“文文檔”窗口底底部的狀態(tài)欄欄提供與你正正創(chuàng)建的文檔檔有關(guān)的其它它信息。標(biāo)簽簽選擇器顯示示環(huán)繞當(dāng)前選選定內(nèi)容的標(biāo)標(biāo)簽的層次結(jié)結(jié)構(gòu)。單擊該該層次結(jié)構(gòu)中中的任何標(biāo)簽簽以選擇該標(biāo)標(biāo)簽及其全部部內(nèi)容。單擊擊 可以以選擇文檔的的整個正文。8、屬性面面板屬性性面板并不是是將所有的屬屬性加載在面面板上，而是是根據(jù)我們選選擇的對象來來動態(tài)顯示對對象的屬性屬屬性

7、面板的狀狀態(tài)完全是隨隨當(dāng)前在文檔檔中選擇的對對象來確定的的。例如，當(dāng)當(dāng)前選擇了一一幅圖像，那那么屬性面板板上就出現(xiàn)該該圖像的相關(guān)關(guān)屬性；如果果選擇了表格格，那么屬性性面板會相應(yīng)應(yīng)的變化成表表格的相關(guān)屬屬性。9、浮動面板其它面板板可以同稱為為浮動面板，這這些面板都浮浮動于編輯窗窗口之外。在在初次使用DDreamwweave 8的時候，這這些面板根據(jù)據(jù)功能被分成成了若干組。在在窗口菜單中中，選擇不同同的命令可以以打開基本面面板組、設(shè)計計面板組、代代碼面板組、應(yīng)應(yīng)用程序面板板組、資源面面板組和其它它面板組。終于把DDreamwweave 8的基本工工作界面介紹紹完了，你是是否已經(jīng)了解解它？從現(xiàn)在在開

8、始，讓我我們一起來建建造一座小房房子。 dreamweeaver88.0入門圖圖文教程：DDreamwweaverr8本地地站點的搭建建與管理 要制作一個能夠夠被大家瀏覽覽的網(wǎng)站，首首先需要在本本地磁盤上制制作這個網(wǎng)站站，然后把這這個網(wǎng)站傳到到互聯(lián)網(wǎng)的wweb服務(wù)器器上。放置在在本地磁盤上上的網(wǎng)站被稱稱為本地站點點，位于互聯(lián)聯(lián)網(wǎng)web服服務(wù)器里的網(wǎng)網(wǎng)站被稱為遠遠程站點。DDreamwweaverr 8提供了了對本地站點點和遠程站點點強大的管理理功能。 1、規(guī)劃劃站點結(jié)構(gòu) 網(wǎng)站是是多個網(wǎng)頁的的集合，其包包括一個首頁頁和若干個分分頁，這種集集合不是簡單單的集合。為為了達到最佳佳效果，在創(chuàng)創(chuàng)建任何

9、WWeb 站點點頁面之前，要要對站點的結(jié)結(jié)構(gòu)進行設(shè)計計和規(guī)劃。決決定要創(chuàng)建多多少頁，每頁頁上顯示什么么內(nèi)容，頁面面布局的外觀觀以及各頁是是如何互相連連接起來的。我們可以通過把文件分門別類的放置在各自的文件夾里，使網(wǎng)站的結(jié)構(gòu)清晰明了，便于管理和查找。2、創(chuàng)建站點在Dreamweave 8中可以有效的建立并管理多個站點。搭建站點可以有兩種方法，一是利用向?qū)瓿?，二是利用高級設(shè)定來完成。在搭建站點前，我們先在自己的電腦硬盤上建一個以英文或數(shù)字命名的空文件夾。 （1）選擇菜單欄站點管理站點，出現(xiàn)“管 理站點”對話框。點擊“新建”按鈕，選擇彈出菜單中的“站點”項。 在打開的窗窗口上方有“基基本”和“高高

10、級”兩個標(biāo)標(biāo)簽，可以在在站點向?qū)Ш秃透呒壴O(shè)置之之間切換。下下面選擇“基基本”標(biāo)簽。在文本框中中，輸入一個個站點名字以以在 Dreeamweaaver8.0中標(biāo)識該該站點。這個個名字可以是是任何你需要要的名字。單單擊“下一步步”。出現(xiàn)向向?qū)У南乱粋€個界面，詢問問是否要使用用服務(wù)器技術(shù)術(shù)。我們現(xiàn)在建建立的是一個個靜態(tài)頁面，所所以選擇“否否”。點下一步，在在文檔框設(shè)置置本地站點文文件夾的地址址。點下一步，進進入站點定義義，我們將在在站點建設(shè)完完成后在與FFTP鏈接，這這里選擇“無無”。單擊“完成成”按鈕，結(jié)結(jié)束“站點定定義“對話框框的設(shè)置。單擊“完成成”按鈕，文文件面板顯示示出剛才建立立的站點。到此

11、，我們們完成了站點點的創(chuàng)建。3、搭建建站點結(jié)構(gòu)站點是文文件與文件夾夾的集合，下下面我們根據(jù)據(jù)前面對xmmweb網(wǎng)站站的設(shè)計，來來新建xmwweb站點要要設(shè)置的文件件夾和文件。新建文件夾，在文件面板的站點跟目錄下單擊鼠標(biāo)右鍵，從彈出菜單中選擇“新建文件夾”項，然后給文件夾命名。這里我們創(chuàng)建新建8個文件夾，分別命名為：img、med、swf、txt、css、js、moan和fy。創(chuàng)建頁面，在在文件面板的的站點跟目錄錄下單擊鼠標(biāo)標(biāo)右鍵，從彈彈出菜單中選選擇“新建文文件”項，然然后給文件命命名。首先要要添加首頁，我我們把首頁命命名為inddex.httml，再分分別新建011.htmll、02.hht

12、ml、003.htmml、04.html和和05.httml。4、文件與與文件夾的管管理對建建立的文件和和文件夾，可可以進行移動動、復(fù)制、重重命名和刪除除等基本的管管理操作。單單擊鼠標(biāo)左鍵鍵選中需要管管理的文件或或文件夾，然然后單擊鼠標(biāo)標(biāo)右鍵，再彈彈出菜單中選選“編輯”項項，即可進行行相關(guān)操作。 dreamweeaver88.0入門圖圖文教程：DDreamwweaverr8頁面面的總體設(shè)置置 HYPERLINK javascript:d=document;t=d.selection?(d.selection.type!=None?d.selection.createRange().text:)

13、:(d.getSelection?d.getSelection():);void(vivi=window.open(/collect/icollect.php?pid=&title=+escape(d.title)+&url=+escape(d.location.href)+&desc=+escape(t),vivi,scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes);vivi.focus(); o 收藏的網(wǎng)頁將被永久地保存到新浪ViVi收藏夾url=/url 新浪ViVii HYPERLINK

14、l nw=1,_blank,scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes); void 0 百度搜搜藏 HYPERLINK javascript:window.open(/post?title=+encodeURIComponent(document.title)+&uri=+encodeURIComponent(document.location.href)+&jumpback=2&noui=1,favit,width=960,height=600,left=50,top=50,toolba

15、r=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes);void(0) QQ書書簽作者:未知 | 點擊數(shù)數(shù): 6611 | 時間間:20088-12-44【 HYPERLINK javascript:FontZoom(16) 大 HYPERLINK javascript:FontZoom(14) 中 HYPERLINK javascript:FontZoom(12) 小】我們已經(jīng)描繪了了小屋的藍圖圖，從現(xiàn)在開開始，為我們們的小屋添磚磚加瓦吧。打打開01.hhtml，制制作一個圖文文混排的簡單單頁面。一、頁面的的總

16、體設(shè)置 1、設(shè)設(shè)置頁面的頭頭內(nèi)容 頭內(nèi)容再再瀏覽器中是是不可見的，但但是卻攜帶著著網(wǎng)頁的重要要信息，如關(guān)關(guān)鍵字、描述述文字等，還還可以實現(xiàn)一一些非常重要要的功能，如如自動刷新功功能。 鼠標(biāo)左鍵單單擊插入工具具欄最左邊按按鈕旁的下拉拉小三角，在在彈出菜單中中選擇“HTTML”項，出出現(xiàn)“文件頭頭”按鈕，點點開下拉菜單單，就可以進進行頭內(nèi)容的的設(shè)置了。 設(shè)置標(biāo)題，網(wǎng)網(wǎng)頁標(biāo)題可以以是中文、英英文或符號，顯顯示在瀏覽器器的標(biāo)題欄中中。我們直接接在設(shè)計窗口口上方的標(biāo)題題欄內(nèi)輸入或或更改，就可可以完成網(wǎng)頁頁標(biāo)題的編輯輯了。插插入關(guān)鍵字，關(guān)關(guān)鍵字用來協(xié)協(xié)助網(wǎng)絡(luò)上的的搜索引擎尋尋找網(wǎng)頁。要要想讓更多的的人看見

17、你的的網(wǎng)站，這項項要好好填哦哦_單擊擊上圖所示的的“關(guān)鍵字”項項，彈出“關(guān)關(guān)鍵字”對話話框，填入關(guān)關(guān)鍵字即可。插入METTA，METTA標(biāo)記用于于記錄當(dāng)前網(wǎng)網(wǎng)頁的相關(guān)信信息，如編碼碼，作者，版版權(quán)等，也可可以用來給服服務(wù)器提供信信息。單擊上上圖所示的“MMETA”項項，彈出“MMETA”對對話框，在“屬屬性”欄選擇擇“名稱”屬屬性，在“值值”文本框中中輸入相應(yīng)的的值，可以定定義相應(yīng)的信信息。aauthorr作者信息息，copyyrightt版權(quán)聲明明，geneeratorr網(wǎng)頁編輯輯器。2、設(shè)置頁頁面屬性單擊“屬性性欄”中的“頁頁面屬性”按按鈕，打開的的“頁面屬性性”對話框。設(shè)置外觀，“外外觀

18、”是設(shè)置置頁面的一些些基本屬性。我我們可以定義義頁面中的默默認(rèn)文本字體體、文本字號號、文本顏色色、背景顏色色和背景圖像像等。我們設(shè)設(shè)置頁面的所所有邊距為00。設(shè)置鏈接，“鏈鏈接”選項內(nèi)內(nèi)是一些與頁頁面的鏈接效效果有關(guān)的設(shè)設(shè)置。“鏈接接顏色”定義義超鏈接文本本默認(rèn)狀態(tài)下下的字體顏色色，“變換圖圖像鏈接”定定義鼠標(biāo)放在在鏈接上時文文本的顏色，“已已訪問鏈接”定定義訪問過的的鏈接的顏色色，“活動鏈鏈接”定義活活動鏈接的顏顏色?！跋聞潉澗€樣式”可可以定義鏈接接的下劃線樣樣式。設(shè)置標(biāo)題，“標(biāo)標(biāo)題”用來設(shè)設(shè)置標(biāo)題字體體的一些屬性性。如下圖所所示，在左側(cè)側(cè)“分類”列列表中選擇“標(biāo)標(biāo)題”，這里里的標(biāo)題指的的并

19、不是頁面面的標(biāo)題內(nèi)容容，而是可以以應(yīng)用在具體體文章中各級級不同標(biāo)題上上的一種標(biāo)題題字體樣式。我我們可以定義義“標(biāo)題字體體”及6種預(yù)預(yù)定義的標(biāo)題題字體樣式，包包括粗體、斜斜體、大小和和顏色。按自自己的喜歡的的風(fēng)格設(shè)置吧吧。dreamweeaver88.0入門圖圖文教程：DDreamwweaverr8文本本的插入與編編輯 HYPERLINK javascript:d=document;t=d.selection?(d.selection.type!=None?d.selection.createRange().text:):(d.getSelection?d.getSelection():);vo

20、id(vivi=window.open(/collect/icollect.php?pid=&title=+escape(d.title)+&url=+escape(d.location.href)+&desc=+escape(t),vivi,scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes);vivi.focus(); o 收藏的網(wǎng)頁將被永久地保存到新浪ViVi收藏夾url=/url 新浪ViVii HYPERLINK l nw=1,_blank,scrollbars=no,width=600,

21、height=450,left=75,top=20,status=no,resizable=yes); void 0 百度搜搜藏 HYPERLINK javascript:window.open(/post?title=+encodeURIComponent(document.title)+&uri=+encodeURIComponent(document.location.href)+&jumpback=2&noui=1,favit,width=960,height=600,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars

22、=yes,status=yes,resizable=yes);void(0) QQ書書簽作者:未知 | 點擊數(shù)數(shù): 5500 | 時間間:20088-12-44【 HYPERLINK javascript:FontZoom(16) 大 HYPERLINK javascript:FontZoom(14) 中 HYPERLINK javascript:FontZoom(12) 小】1、插入文本本 要向向 Dreaamweavver 文檔檔添加文本，可可以直接在DDreamwweaverr“文檔”窗窗口中鍵入文文本，也可以以剪切并粘貼貼，還可以從從word文文檔導(dǎo)入文本本。 用用鼠標(biāo)在文檔檔編輯窗口

23、的的空白區(qū)域點點一下，窗口口中出現(xiàn)閃動動的光標(biāo)，提提示文字的起起始位置，將將01.raar中的文字字 HYPERLINK /Search.asp?Field=Title&keyword=素材 素材復(fù)制/粘粘貼進來。 2、編編輯文本格式式 網(wǎng)頁頁的文本分為為段落和標(biāo)題題兩種格式。 在文檔編輯窗口中選中一段文本，在屬性面板“格式”后的下拉列表框中選擇“段落”把選中的文本設(shè)置成段落格式。 “標(biāo)題1”到“標(biāo)題6”分別表示各級標(biāo)題，應(yīng)用于網(wǎng)頁的標(biāo)題部分。對應(yīng)的字體由大到小，同時文字全部加粗。 另外，在屬性面板中可以定義文字的字號、顏色、加粗、加斜、水平對齊等內(nèi)容。 3、設(shè)置字體組合 Dreamweave

24、r8預(yù)設(shè)讀的可供選擇的字體組合只有6項英文字體組合，要想使用中文字體，必須重新編輯新的字體組合，在“字體”后的下拉列表框中選擇“編輯字體列表”，彈出“編輯字體列表”對話框： 4、文字的的其它設(shè)置 文本換換行，按Ennter鍵換換行的行距較較大（在代碼碼區(qū)生成標(biāo)簽），按按EnterrShifft鍵換行的的行間距較小小（在代碼區(qū)區(qū)生成標(biāo)簽）。 文本空格，我們選擇編輯/首選參數(shù)，在彈出得對話框中左側(cè)的分類列表中選擇“常規(guī)”項，然后在右邊選“允許多個連續(xù)的空格”項，我們就可以直接按“空格”鍵給文本添加空格了。特殊字符，要要向網(wǎng)頁中插插入特殊字符符，需要在快快捷工具欄選選擇“文本”，切切換到字符插插入欄

25、，單擊擊文本插入欄欄的最后一個個按鈕，可以以向網(wǎng)頁中插插入相應(yīng)的特特殊符號。插入列表，列列表分為兩種種，有序列表表和無序列表表，無序列表表沒有順序，每每一項前邊都都以同樣的符符號顯示，有有序列表前邊邊的每一項有有序號引導(dǎo)。在在文檔編輯窗窗口中選中需需要設(shè)置的文文本，在屬性性面板中單擊擊，則選中的的文本被設(shè)置置成無序列表表，單擊則被被設(shè)置成有序序列表。插入水平線線，水平線起起到分隔文本本的排版作用用，選擇快捷捷工具欄的“HHTML”項項，單擊HTTML欄的第第一個按鈕，即即可向網(wǎng)頁中中插入水平線線。選中插入入的這條水平平線，可以在在屬性面板對對它的屬性進進行設(shè)置。 插入時時間，在文檔檔編輯窗口中

26、中，將鼠標(biāo)光光標(biāo)移動到要要插入日期的的位置，單擊擊常用插入欄欄的“日期”按按鈕，在彈出出的“插入日日期”對話框框中選擇相應(yīng)應(yīng)的格式即可可。 dreamweeaver88.0入門圖圖文教程：DDreamwweaverr8插入入圖像 HYPERLINK javascript:d=document;t=d.selection?(d.selection.type!=None?d.selection.createRange().text:):(d.getSelection?d.getSelection():);void(vivi=window.open(/collect/icollect.php?pid

27、=&title=+escape(d.title)+&url=+escape(d.location.href)+&desc=+escape(t),vivi,scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes);vivi.focus(); o 收藏的網(wǎng)頁將被永久地保存到新浪ViVi收藏夾url=/url 新浪ViVii HYPERLINK l nw=1,_blank,scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable

28、=yes); void 0 百度搜搜藏 HYPERLINK javascript:window.open(/post?title=+encodeURIComponent(document.title)+&uri=+encodeURIComponent(document.location.href)+&jumpback=2&noui=1,favit,width=960,height=600,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes);void(0) QQ書書簽作

29、者:未知 | 點擊數(shù)數(shù): 5244 | 時間間:20088-12-44【 HYPERLINK javascript:FontZoom(16) 大 HYPERLINK javascript:FontZoom(14) 中 HYPERLINK javascript:FontZoom(12) 小】目前互聯(lián)網(wǎng)上支支持的圖像格格式主要有GGIF、JPPEG和PNNG。其中使使用最為廣泛泛的是GIFF和JPEGG。1、插插入圖像在制作網(wǎng)頁頁時，先構(gòu)想想好網(wǎng)頁布局局，在圖像處處理軟件中將將需要插入的的圖片進行處處理，然后存存放在站點根根目錄下的文文件夾里。插圖圖像像時，將光標(biāo)標(biāo)放置在文檔檔窗口需要插插入圖像的

30、位位置，然后鼠鼠標(biāo)單擊常用用插入欄的“圖圖像”按鈕。 彈出的“選選擇圖像源文文件”對話框框，選擇immg/0011.jpg，單單擊“確定”按按鈕就把圖像像001.jjpg插入到到了網(wǎng)頁中。注意：如果果我們在插入入圖片的時候候，沒有將圖圖片保存在站站點根目錄下下，會彈出下下圖所示的對對話框，提醒醒我們要把圖圖片保存在站站點內(nèi)部，這這時單擊“是是”按鈕，然后選擇本本地站點的路路徑將圖片保保存，圖像也也可以被插入入到網(wǎng)頁中。2、設(shè)置圖圖像屬性選中圖像后后，在屬性面面板中顯示出出了圖像的屬屬性，如下如如所示。在屬性面板板的左上角，顯顯示當(dāng)前圖像像的縮略圖，同同時顯示圖像像的大小。在在縮略圖右側(cè)側(cè)有一個

31、文本本框，在其中中可以輸入圖圖像標(biāo)記的名名稱。 圖像的大小小是可以改變變的，但是在在DW里更改改是極不好的的習(xí)慣，如果果我們的電腦腦安裝了FWW軟件，單擊擊屬性面板的的“編輯”旁旁邊的，即可可啟動FW對對圖像進行縮縮放等處理。當(dāng)當(dāng)圖像的大小小改變時，屬屬性欄中“寬寬”和“高”的的數(shù)值會以粗粗體顯示，并并在旁邊出現(xiàn)現(xiàn)一個弧形箭箭頭，單擊它它可以恢復(fù)圖圖像的原始大大小。 “水平邊距距”和“垂直直邊距”文本本框用來設(shè)置置圖像左右和和上下與其它它頁面元素的的距離。 “邊框”文文本框時用來來設(shè)置圖像邊邊框的寬度，默默認(rèn)的邊框?qū)拰挾葹?。 “替代代”文本框用用來設(shè)置圖像像的替代文本本，可以輸入入一段文字，

32、當(dāng)當(dāng)圖像無法顯顯示時，將顯顯示這段文字字。 單單擊屬性面板板中的對齊按按鈕，可以分分別將圖像設(shè)設(shè)置成瀏覽器器居左對齊、居居中對齊、居居右對齊。 在屬性性面板中，“對對齊”下拉列列表框時設(shè)置置圖像與文本本的相互對齊齊方式，共有有10個選項項。通過它我我們可以將文文字對齊到圖圖像的上端、下下端、左邊和和右邊等，從從而可以靈活活的實現(xiàn)文字字與圖片的混混排效果。 3、插插入其它圖像像元素 在我們單擊擊常用插入欄欄的“圖像”按按鈕時，可以以看到，除了了第1項“圖圖像”外，還還有“圖像占占位符”、“鼠鼠標(biāo)經(jīng)過圖像像”、“導(dǎo)航航條”等項目目。 插插入圖像占位位符，在我們們布局頁面時時，如果要在在網(wǎng)頁中插入入

33、一張圖片，可可以先不制作作圖片，而是是使用占位符符來代替圖片片位置。單擊擊下拉列表中中的“圖像占占位符”，打打開“圖像占占位符”對話話框。按設(shè)計計需要設(shè)置圖圖片的寬度和和高度，輸入入呆插入圖像像的名稱，即即可。鼠標(biāo)經(jīng)過圖圖像，鼠標(biāo)經(jīng)經(jīng)過圖像實際際上由兩個圖圖像組成，主主圖像（當(dāng)首首次載入頁時時顯示的圖像像）和次圖像像（當(dāng)鼠標(biāo)指指針移過主圖圖像時顯示的的圖像）。這這兩張圖片要要大小相等，如如果不相等，DDW自動調(diào)整整次圖片的大大小跟主圖像像大小一致。 圖片與文文本一樣，是是網(wǎng)頁中最常常用到的內(nèi)容容，其變化相相對較少，要要想排出精致致美觀的網(wǎng)頁頁，下一節(jié)課課的內(nèi)容可是是必不可少的的哦，繼續(xù)努努力吧

34、_ dreamweeaver88.0入門圖圖文教程：DDreamwweaverr8插入入并編輯表格格 HYPERLINK javascript:d=document;t=d.selection?(d.selection.type!=None?d.selection.createRange().text:):(d.getSelection?d.getSelection():);void(vivi=window.open(/collect/icollect.php?pid=&title=+escape(d.title)+&url=+escape(d.location.href)+&desc=+es

35、cape(t),vivi,scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes);vivi.focus(); o 收藏的網(wǎng)頁將被永久地保存到新浪ViVi收藏夾url=/url 新浪ViVii HYPERLINK l nw=1,_blank,scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes); void 0 百度搜搜藏 HYPERLINK javascript:window.open(/post?title

36、=+encodeURIComponent(document.title)+&uri=+encodeURIComponent(document.location.href)+&jumpback=2&noui=1,favit,width=960,height=600,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes);void(0) QQ書書簽作者:未知 | 點擊數(shù)數(shù): 5811 | 時間間:20088-12-44【 HYPERLINK javascript:FontZo

37、om(16) 大 HYPERLINK javascript:FontZoom(14) 中 HYPERLINK javascript:FontZoom(12) 小】表格是網(wǎng)頁設(shè)計計制作不可缺缺少的元素，它它以簡潔明了了和高效快捷捷的方式將圖圖片、文本、數(shù)數(shù)據(jù)和表單的的元素有序的的顯示在頁面面上，讓我們們可以設(shè)計出出漂亮的頁面面，使用表格格排版的頁面面在不同平臺臺、不同分辨辨率的瀏覽器器里都能保持持其原有的布布局，而在不不同的瀏覽器器平臺有較好好的兼容性，所所以表格是網(wǎng)網(wǎng)頁中最常用用的排版方式式之一。一、插插入并編輯表表格 11、插入表格格在文檔檔窗口中，將將光標(biāo)放在需需要創(chuàng)建表格格的位置，單單擊

38、“常用”快快捷欄中的表表格按鈕彈出出的“表格”對對話框，指定定表格的屬性性后，在文檔檔窗口中插入入設(shè)置的表格格。 “行數(shù)數(shù)”文本框用用來設(shè)置表格格的行數(shù)?！傲袛?shù)”文文本框用來設(shè)設(shè)置表格的列列數(shù)?！氨肀砀駥挾取蔽奈谋究蛴脕碓O(shè)設(shè)置表格的寬寬度，可以填填入數(shù)值，緊緊隨其后的下下拉列表框用用來設(shè)置寬度度的單位，有有兩個選項百分比和和像素。當(dāng)寬寬度的單位選選擇百分比時時，表格的寬寬度會隨瀏覽覽器窗口的大大小而改變。 “單元格邊距”文本框用來設(shè)置單元格的內(nèi)部空白的大小。 “單元格間距”文本框用來設(shè)置單元格與單元格之間的距離。 “邊框粗細”用來設(shè)置表格的邊框的寬度。 “頁眉”定義頁眉樣式，可以在四種樣式中選

39、擇一種。 “標(biāo)題” 定義表格的標(biāo)題。 “對其標(biāo)題”定義表格標(biāo)題的對齊方式。 “摘要” 可以在這里對表格進行注釋。2、選擇單單元格對象對于表格格、行、列、單單元格屬性的的設(shè)置是以選選擇這些對象象為前提的。選擇整個表格的方法是把鼠標(biāo)放在表格邊框的任意處，當(dāng)出現(xiàn)這樣的標(biāo)志時單擊即可選中整個表格，或在表格內(nèi)任意處單擊，然后在狀態(tài)欄選中標(biāo)簽即可；或在單元格任意處單擊，點鼠標(biāo)右鍵在彈出菜單菜單中選擇“表格選擇表格”要選中某一單元格，按住Ctrl鍵，鼠標(biāo)在需要選中的單元格單擊即可；或者，選中狀態(tài)欄中的標(biāo)簽。要選中連續(xù)的單元格，按住鼠標(biāo)左鍵從一個單元格的左上方開始向要連續(xù)選擇單元格的方向拖動。要選中不連續(xù)的幾

40、個單元格，可以按住Ctrl鍵，單擊要選擇的所有單元格即可。要選擇某一行或某一列，將光標(biāo)移動到行左側(cè)或列上方，鼠標(biāo)指針變?yōu)橄蛴一蛳蛳碌募^圖標(biāo)時，單擊即可。3、設(shè)置表格屬性選中一個表格后，可以通過屬性面板更改表格屬性?！疤畛洹蔽奈谋究蛴脕碓O(shè)設(shè)置單元格邊邊距，“間距距”文本框用用來設(shè)置單元元格間距?！皩R”下下拉列表框用用來設(shè)置表格格的對齊方式式，默認(rèn)的對對齊方式一般般為左對齊?！斑吙颉蔽谋究蛴脕碓O(shè)置表格邊框的寬度?！氨尘邦伾蔽谋究蛴脕碓O(shè)置表格的背景顏色?！斑吙蝾伾庇脕碓O(shè)置表格邊框的顏色。 在“背景圖像”文本框填入表格背景圖像的路徑，可以給表格添加背景圖像。也可以如下圖所示給文本框加上鏈接路徑

41、。還可以單擊文本框后的“瀏覽”按鈕，查找圖像文件。在“選擇圖像源”對話框中定位并選擇要設(shè)置為背景的圖片，單擊“確認(rèn)”按鈕即可。4、單元格格屬性把把光標(biāo)移動到到某個單元格格內(nèi)，可以利利用單元格屬屬性面板對這這個單元格的的屬性進行設(shè)設(shè)置?！八健蔽奈谋究蛴脕碓O(shè)設(shè)置單元格內(nèi)內(nèi)元素的水平平排版方式，是是居左、居右右或是居中。“垂直”文本框用來設(shè)置單元格內(nèi)的垂直排版方式，是頂端對齊、底端對齊或是居中對齊?！案摺薄ⅰ皩挕蔽谋究蛴脕碓O(shè)置單元格的寬度和高度?！安粨Q行”復(fù)選框可以防止單元格中較長的文本自動換行?！皹?biāo)題”復(fù)選框使選擇的單元格成為標(biāo)題單元格，單元格內(nèi)的文字自動以標(biāo)題格式顯示出來?！氨尘啊蔽谋究蛴脕碓O(shè)

42、置表格的背景圖像?！氨尘邦伾蔽谋究蛴脕碓O(shè)置表格的背景顏色。“邊框”文本框用來色設(shè)置表格邊框的顏色。5、表格的行和列選中要插入行或列的單元格，單擊鼠標(biāo)右鍵，在彈出菜單中選擇“插入行”或“插入列”或“插入行或列”命令。如果選擇了了“插入行”命命令，在選擇擇行的上方就就插入了一個個空白行，如如果選擇了“插插入列”命令令，就在選擇擇列的左側(cè)插插入了一列空空白列。如果選擇了了“插入行或或列”命令，會會彈出“插入入行或列”對對話框，可以以設(shè)置插入行行還是列、插插入的數(shù)量，以以及使在當(dāng)前前選擇的單元元格的上方或或下方、左側(cè)側(cè)或是右側(cè)插插入行或列。要刪除行或或列，選擇要要刪除的行或或列，單擊鼠鼠標(biāo)右鍵，在在

43、彈出菜單中中選擇“刪除除行”或“刪刪除列”命令令即可。6、拆分與與合并單元格格拆分單單元格時，將將光標(biāo)放在待待拆分的單元元格內(nèi)，單擊擊屬性面板上上的“拆分”按按鈕，在彈出出對話框中，按按需要設(shè)置即即可。合并單元格格時，選中要要合并的單元元格，單擊屬屬性面板中的的“合并”按按鈕即可。dreamweeaver88.0入門圖圖文教程:DDreamwweaverr8嵌套套表格 HYPERLINK javascript:d=document;t=d.selection?(d.selection.type!=None?d.selection.createRange().text:):(d.getSelec

44、tion?d.getSelection():);void(vivi=window.open(/collect/icollect.php?pid=&title=+escape(d.title)+&url=+escape(d.location.href)+&desc=+escape(t),vivi,scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes);vivi.focus(); o 收藏的網(wǎng)頁將被永久地保存到新浪ViVi收藏夾url=/url 新浪ViVii HYPERLINK l nw=1,_blan

45、k,scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes); void 0 百度搜搜藏 HYPERLINK javascript:window.open(/post?title=+encodeURIComponent(document.title)+&uri=+encodeURIComponent(document.location.href)+&jumpback=2&noui=1,favit,width=960,height=600,left=50,top=50,toolbar=no,menubar

46、=no,location=no,scrollbars=yes,status=yes,resizable=yes);void(0) QQ書書簽作者:未知 | 點擊數(shù)數(shù): 4677 | 時間間:20088-12-44【 HYPERLINK javascript:FontZoom(16) 大 HYPERLINK javascript:FontZoom(14) 中 HYPERLINK javascript:FontZoom(12) 小】表格之中還有表表格即嵌套表表格。網(wǎng)網(wǎng)頁的排版有有時會很復(fù)雜雜，在外部需需要一個表格格來控制總體體布局，如果果內(nèi)部排版的的細節(jié)也通過過總表格來實實現(xiàn)，容易引引起行高列寬寬

47、等的沖突，給給表格的制作作帶來困難。其其次，瀏覽器器在解析網(wǎng)頁頁的時候，是是將整個網(wǎng)頁頁的結(jié)構(gòu)下載載完畢之后才才顯示表格，如如果不使用嵌嵌套，表格非非常復(fù)雜，瀏瀏覽者要等待待很長時間才才能看到網(wǎng)頁頁內(nèi)容。引入嵌套表表格，由總表表格負(fù)責(zé)整體體排版，由嵌嵌套的表格負(fù)負(fù)責(zé)各個子欄欄目的排版，并并插入到總表表格的相應(yīng)位位置中，各司司其職，互不不沖突。另外，通過過嵌套表格，利利用表格的背背景圖像、邊邊框、單元格格間距和單元元格邊距等屬屬性可以得到到漂亮的邊框框效果，制作作出精美的音音畫貼圖網(wǎng)頁頁。創(chuàng)建建嵌套表格的的操作方法，先先插入總表格格，然后將光光標(biāo)置于要插插入嵌套表格格的地方，繼繼續(xù)插入表格格即可

48、。1、將光標(biāo)標(biāo)放置在文檔檔窗口要插入入表格的位置置，單擊常用用插入欄“表表格”按鈕，插插入一個1行行1列的表格格一，寬度5500像素，高高度100，邊框為00，單元格間間距為0，單單元格邊距為為12像素。背背景圖像選擇擇beij/003.ggif。2、將光標(biāo)標(biāo)放置在表格格一內(nèi)，插入入表格二，11行1列，寬寬度100，高度1000，邊框框為0，單元元格間距為00，單元格邊邊距為12像像素。背景圖圖像選擇beeij/0002.giff。3、將將光標(biāo)放置在在表格二內(nèi)，插插入表格二，11行1列，寬寬度100，高度1000，單元元格間距和單單元格邊距都都為8像素，邊邊框為10，邊邊框顏色為#FEE4EE

49、D。背景圖圖像選擇beeij/0005.giff。4、將將光標(biāo)放置在在表格三內(nèi)，選選擇單元格的的背景圖像為為beij/006.ggif。添加加文字“恭賀賀新禧”，字字號68pxx，字體為隸隸書，顏色為為#A510008。 三、表格的的格式化做好的表格格可以使用DDW提供的預(yù)預(yù)設(shè)外觀，可可以提高制作作效率，保持持表格外觀的的同一性，同同時樣式提供供的色彩搭配配也比較美觀觀。插入入一個5行66列的表格，表表格的寬為5500像素，高高為300像像素，邊框、單單元格間距和和邊距全為00 。選選擇表格，居居中對齊表格格后，執(zhí)行命命令/格式化化表格，彈出出“格式化表表格”對話框框，我們選擇擇AltRoow

50、s reed格式，單單擊“確定”表表格的樣式就就設(shè)定好了。m 這里，還可可以自己設(shè)定定相應(yīng)的參數(shù)數(shù)值。dreamweeaver88.0入門圖圖文教程:插插入Flassh動畫 HYPERLINK javascript:d=document;t=d.selection?(d.selection.type!=None?d.selection.createRange().text:):(d.getSelection?d.getSelection():);void(vivi=window.open(/collect/icollect.php?pid=&title=+escape(d.title)+&ur

51、l=+escape(d.location.href)+&desc=+escape(t),vivi,scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes);vivi.focus(); o 收藏的網(wǎng)頁將被永久地保存到新浪ViVi收藏夾url=/url 新浪ViVii HYPERLINK l nw=1,_blank,scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes); void 0 百度搜搜藏 HYPERLIN

52、K javascript:window.open(/post?title=+encodeURIComponent(document.title)+&uri=+encodeURIComponent(document.location.href)+&jumpback=2&noui=1,favit,width=960,height=600,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes);void(0) QQ書書簽作者:未知 | 點擊數(shù)數(shù): 5000 | 時間間:2008

53、8-12-44【 HYPERLINK javascript:FontZoom(16) 大 HYPERLINK javascript:FontZoom(14) 中 HYPERLINK javascript:FontZoom(12) 小】通過前面三課的的學(xué)習(xí)，相信信你已經(jīng)能制制作出一個簡簡單的網(wǎng)頁了了，很有成就就感吧_不過，一一個優(yōu)秀的網(wǎng)網(wǎng)站應(yīng)該不僅僅僅是由文字字和圖片組成成的，而是動動態(tài)的、多媒媒體。為了增增強網(wǎng)頁的表表現(xiàn)力，豐富富文檔的顯示示效果，我們們可以向其FFlash動動畫、Javva小程序、音音頻播放插件件等多媒體內(nèi)內(nèi)容。一一、插入Fllash動畫畫1、插插入Flassh為了了合理的安

54、排排這一課的頁頁面元素，在在插入Flaash動畫之之前，讓我們們先來復(fù)習(xí)一一下表格布局局吧_打開033.htmll，設(shè)置頁面面屬性，在彈彈出的“頁面面屬性”對話話框中，“外外觀”項設(shè)置置字體為“宋宋體”，字號號為16pxx，文本顏色色為#F2882A8，背背景圖像為iimg/0008.JPGG，上邊距為為50px、下下、左、右的的邊距都為00。 “鏈接接”項選擇始始終無下劃線線，鏈接顏色色為#F2882A8，已已訪問鏈接為為#F5E4458。 現(xiàn)在我們們開始布局_（1）插插入一個1行行1列的表格格（表格1），表表格的寬度為為726pxx，邊框粗細細為0，單元元格邊距為00、單元格間間距為1，背

55、背景顏色為#8923221，將表格格居中對齊。（2） 插入一個3行2列的表格（表格2），表格的寬度為100，邊框粗細為0，單元格邊距和單元格間距都為0，背景顏色#6DCFF6。設(shè)置第一行左邊單元格的寬為173px，高為137px，設(shè)置第二行的高為238px，將第三行的兩個單元格合并，高度為50px。在第一行左側(cè)單元格插入圖片img/102.gif,在右側(cè)單元格插入圖片img/101.jpg。在第三行將光標(biāo)水平居中，輸入文字“版權(quán)所有閃客啟航”（3）在表格2第二行左側(cè)單元格插入一個6行一列的表格（表格3），表格寬度為95，邊框和單元格邊距為0，單元格間距為5，將表格居中對齊。第一行高度為15，其

56、余各行高度都為40。 (4) 在表格2右側(cè)單元格插入一個1行2列的表格（表格4），表格寬度為550px。邊框、單元格邊距和間距都為0。好啦我們完成了頁面的布局，開始插入頁面元素。將光標(biāo)放置在表格4右側(cè)單元格中，單擊常用快捷欄中的媒體按鈕，然后在彈出的列表中選擇Flash。彈出“選擇擇文件”對話話框，選擇sswf文件夾夾中的huaaduo.sswf文件。單單擊“確定”按按鈕后，插入入的Flassh動畫并不不會在文檔窗窗口中顯示內(nèi)內(nèi)容，而是以以一個帶有字字母F的灰色色框來表示。在文檔窗口單擊這個Flash文件，就可以在屬性面板中設(shè)置它的屬性了。勾選“循環(huán)環(huán)”復(fù)選框時時影片將連續(xù)續(xù)播放，否則則影片在

57、播放放一次后自動動停止。通過勾選“自自動播放”復(fù)復(fù)選框后，可可以設(shè)定Fllash文件件是否在頁面面加載時就播播放。在在“品質(zhì)”下下拉列表中可可以選擇Fllash影片片的畫質(zhì)，以以最佳狀態(tài)顯顯示，就選擇擇“高品質(zhì)”。“對齊”下拉列表用來設(shè)置Flash動畫的對齊方式，為了使頁面的背景在Flash下能夠襯托出來，我們可以使Flash的背景變?yōu)橥该?。單擊屬性面板中的“參?shù)”按鈕，打開“參數(shù)”對話框，設(shè)置參數(shù)為wmode，值為transparent。這樣在任何何背景下，F(xiàn)Flash動動畫都能實現(xiàn)現(xiàn)透明背景的的顯示。2、插入FFlash文文本 我我們將光標(biāo)放放置在表格33第二行的單單元格中，用用Flash

58、h文本制作導(dǎo)導(dǎo)航欄目。單單擊常用快捷捷欄的媒體按按鈕，在列表表中選擇Fllash文本本，彈出“插插入Flassh文本”對對話框，字體體隨意，大小小22px，顏顏色設(shè)置為#F5E4558，轉(zhuǎn)滾顏顏色為#544C994，文文本為“圖片片素材”，背背景顏色#66DCFF66，選擇自己己需要的路徑徑鏈接。同樣樣方法我們分分別在表格33的第3、44、5、6行行制作“代碼碼 HYPERLINK /Search.asp?Field=Title&keyword=素材 素材”、“FFlash動動漫”、“精精美壁紙”和和“音頻視頻頻”等欄目。3、插入Flash按鈕我們在將光標(biāo)放置于插入Flash按鈕的位置，單擊常

59、用快捷欄的媒體按鈕，在列表中選擇Flash按鈕，彈出“插入Flash按鈕”對話框?！皹邮健庇糜脕磉x擇按鈕鈕的外觀，“按按鈕文本”用用來輸入按鈕鈕上的文字，“字字體”和“大大小”用于設(shè)設(shè)置按鈕上文文字的字體和和大小，字號號變大，按鈕鈕并不會跟著著改變?！版溄印庇糜糜谳斎氚粹o鈕的鏈接，可可以是外部鏈鏈接，也可以以是內(nèi)部鏈接接。“目標(biāo)”用用來設(shè)置打開開的鏈接窗口口。 如如果需要修改改Flashh按鈕對象，可可以先選中它它，然后在屬屬性面板中單單擊“編輯”按按鈕，會自動動彈出剛才的的“插入Fllash按鈕鈕”對話框，更更改它的設(shè)置置就可以了。4、插入FlashPaper我們還可以在網(wǎng)頁中插入 Macr

60、omedia FlashPaper 文檔。在瀏覽器中打開包含 FlashPaper 文檔的頁面時，瀏覽者能夠瀏覽 FlashPaper 文檔中的所有頁面，而無需加載新的 Web 頁。也可以搜索、打印和縮放該文檔。 在“文檔”窗口中，將光標(biāo)放放在頁面上想要顯示 FlashPaper 文檔的位置，然后選擇“插入”“媒體”“FlashPaper”。 在“插入 FlashPaper”對話框中，瀏覽到一個 FlashPaper 文檔并將其選定。如果需要，通過輸入寬度和高度（以像素為單位）指定 FlashPaper 對象在網(wǎng)頁上的尺寸。 FlashPaper 將縮放文檔以適合寬度。單擊“確定”在頁面中插入