dreamweaver8.0入門圖文教程

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

2、的“不在顯示此對(duì)話框”來(lái)隱藏它。在這個(gè)頁(yè)面中包括“打開最近項(xiàng)目”、“創(chuàng)建新項(xiàng)目”“從范例創(chuàng)建”3個(gè)方便實(shí)用的項(xiàng)目，建議大家保留。新建或打開一個(gè)文檔，進(jìn)入dreamweaver8的標(biāo)準(zhǔn)工作界面。dreamweaver8的標(biāo)準(zhǔn)工作界面包括：標(biāo)題顯示、菜單欄、插入面板組、文檔工具欄、標(biāo)準(zhǔn)工具欄、文檔窗口、狀態(tài)欄、屬性面板和浮動(dòng)面板組。1、標(biāo)題顯示欄 啟動(dòng)macromedia dreamweave 8后，標(biāo)題欄將顯示文字macromedia dreamweave 8.0，新建或打開一個(gè)文檔后，在后面還會(huì)顯示該文檔所在的位置和文件名稱。2、菜單欄dreamweave 8的菜單共有10個(gè)，即文件、編輯、視

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

4、助：聯(lián)機(jī)幫助功能。例如按下f1鍵，就會(huì)打開電子幫助文本3、插入面板組 插入面板集成了所有可以在網(wǎng)頁(yè)應(yīng)用的對(duì)象包括“插入”菜單中的選項(xiàng)。插入面板組其實(shí)就是圖像化了的插入指令，通過一個(gè)個(gè)的按鈕，可以很容易的加入圖像、聲音、多媒體動(dòng)畫、表格。圖層、框架、表單、flash和activex等網(wǎng)頁(yè)元素。4、文檔工具欄“文檔”工具欄包含各種按鈕，它們提供各種“文檔”窗口視圖（如“設(shè)計(jì)”視圖和“代碼”視圖）的選項(xiàng)、各種查看選項(xiàng)和一些常用操作（如在瀏覽器中預(yù)覽）。5、標(biāo)準(zhǔn)工具欄“標(biāo)準(zhǔn)”工具欄包含來(lái)自“文件”和“編輯”菜單中的一般操作的按鈕：“新建”、“打開”、“保存”、“保存全部”、“剪切”、“復(fù)制”、“粘貼”

5、、“撤消”和“重做”。6、文檔窗口當(dāng)我們打開或創(chuàng)建一個(gè)項(xiàng)目，進(jìn)入文檔窗口，我們可以在文檔區(qū)域中進(jìn)行輸入文字、插入表格和編輯圖片等操作?！拔臋n”窗口顯示當(dāng)前文檔?？梢赃x擇下列任一視圖：“設(shè)計(jì)”視圖是一個(gè)用于可視化頁(yè)面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，dreamweaver 顯示文檔的完全可編輯的可視化表示形式，類似于在瀏覽器中查看頁(yè)面時(shí)看到的內(nèi)容?！按a”視圖是一個(gè)用于編寫和編輯 html、javascript、服務(wù)器語(yǔ)言代碼以及任何其他類型代碼的手工編碼環(huán)境?！按a和設(shè)計(jì)”視圖使您可以在單個(gè)窗口中同時(shí)看到同一文檔的“代碼”視圖和“設(shè)計(jì)”視圖。7、狀態(tài)欄“文檔”窗口底部的

6、狀態(tài)欄提供與你正創(chuàng)建的文檔有關(guān)的其它信息。標(biāo)簽選擇器顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽以選擇該標(biāo)簽及其全部?jī)?nèi)容。單擊 可以選擇文檔的整個(gè)正文。8、屬性面板屬性面板并不是將所有的屬性加載在面板上，而是根據(jù)我們選擇的對(duì)象來(lái)動(dòng)態(tài)顯示對(duì)象的屬性屬性面板的狀態(tài)完全是隨當(dāng)前在文檔中選擇的對(duì)象來(lái)確定的。例如，當(dāng)前選擇了一幅圖像，那么屬性面板上就出現(xiàn)該圖像的相關(guān)屬性；如果選擇了表格，那么屬性面板會(huì)相應(yīng)的變化成表格的相關(guān)屬性。9、浮動(dòng)面板其它面板可以同稱為浮動(dòng)面板，這些面板都浮動(dòng)于編輯窗口之外。在初次使用dreamweave 8的時(shí)候，這些面板根據(jù)功能被分成了若干組。在窗口菜單中，

7、選擇不同的命令可以打開基本面板組、設(shè)計(jì)面板組、代碼面板組、應(yīng)用程序面板組、資源面板組和其它面板組。終于把dreamweave 8的基本工作界面介紹完了，你是否已經(jīng)了解它？從現(xiàn)在開始，讓我們一起來(lái)建造一座小房子。 dreamweaver8.0入門圖文教程：dreamweaver8本地站點(diǎn)的搭建與管理 要制作一個(gè)能夠被大家瀏覽的網(wǎng)站，首先需要在本地磁盤上制作這個(gè)網(wǎng)站，然后把這個(gè)網(wǎng)站傳到互聯(lián)網(wǎng)的web服務(wù)器上。放置在本地磁盤上的網(wǎng)站被稱為本地站點(diǎn)，位于互聯(lián)網(wǎng)web服務(wù)器里的網(wǎng)站被稱為遠(yuǎn)程站點(diǎn)。dreamweaver 8提供了對(duì)本地站點(diǎn)和遠(yuǎn)程站點(diǎn)強(qiáng)大的管理功能。 1、規(guī)劃站點(diǎn)結(jié)構(gòu) 網(wǎng)站是多個(gè)網(wǎng)頁(yè)的集合

8、，其包括一個(gè)首頁(yè)和若干個(gè)分頁(yè)，這種集合不是簡(jiǎn)單的集合。為了達(dá)到最佳效果，在創(chuàng)建任何 web 站點(diǎn)頁(yè)面之前，要對(duì)站點(diǎn)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)和規(guī)劃。決定要?jiǎng)?chuàng)建多少頁(yè)，每頁(yè)上顯示什么內(nèi)容，頁(yè)面布局的外觀以及各頁(yè)是如何互相連接起來(lái)的。我們可以通過把文件分門別類的放置在各自的文件夾里，使網(wǎng)站的結(jié)構(gòu)清晰明了，便于管理和查找。2、創(chuàng)建站點(diǎn)在dreamweave 8中可以有效的建立并管理多個(gè)站點(diǎn)。搭建站點(diǎn)可以有兩種方法，一是利用向?qū)瓿?，二是利用高?jí)設(shè)定來(lái)完成。在搭建站點(diǎn)前，我們先在自己的電腦硬盤上建一個(gè)以英文或數(shù)字命名的空文件夾。 （1）選擇菜單欄站點(diǎn)管理站點(diǎn)，出現(xiàn)“管 理站點(diǎn)”對(duì)話框。點(diǎn)擊“新建”按鈕，選擇彈出菜

9、單中的“站點(diǎn)”項(xiàng)。 在打開的窗口上方有“基本”和“高級(jí)”兩個(gè)標(biāo)簽，可以在站點(diǎn)向?qū)Ш透呒?jí)設(shè)置之間切換。下面選擇“基本”標(biāo)簽。在文本框中，輸入一個(gè)站點(diǎn)名字以在 dreamweaver8.0中標(biāo)識(shí)該站點(diǎn)。這個(gè)名字可以是任何你需要的名字。單擊“下一步”。出現(xiàn)向?qū)У南乱粋€(gè)界面，詢問是否要使用服務(wù)器技術(shù)。我們現(xiàn)在建立的是一個(gè)靜態(tài)頁(yè)面，所以選擇“否”。點(diǎn)下一步，在文檔框設(shè)置本地站點(diǎn)文件夾的地址。點(diǎn)下一步，進(jìn)入站點(diǎn)定義，我們將在站點(diǎn)建設(shè)完成后在與ftp鏈接，這里選擇“無(wú)”。單擊“完成”按鈕，結(jié)束“站點(diǎn)定義“對(duì)話框的設(shè)置。單擊“完成”按鈕，文件面板顯示出剛才建立的站點(diǎn)。到此，我們完成了站點(diǎn)的創(chuàng)建。3、搭建站點(diǎn)結(jié)

10、構(gòu)站點(diǎn)是文件與文件夾的集合，下面我們根據(jù)前面對(duì)xmweb網(wǎng)站的設(shè)計(jì)，來(lái)新建xmweb站點(diǎn)要設(shè)置的文件夾和文件。新建文件夾，在文件面板的站點(diǎn)跟目錄下單擊鼠標(biāo)右鍵，從彈出菜單中選擇“新建文件夾”項(xiàng)，然后給文件夾命名。這里我們創(chuàng)建新建8個(gè)文件夾，分別命名為：img、med、swf、txt、css、js、moan和fy。創(chuàng)建頁(yè)面，在文件面板的站點(diǎn)跟目錄下單擊鼠標(biāo)右鍵，從彈出菜單中選擇“新建文件”項(xiàng)，然后給文件命名。首先要添加首頁(yè)，我們把首頁(yè)命名為index.html，再分別新建01.html、02.html、03.html、04.html和05.html。4、文件與文件夾的管理對(duì)建立的文件和文件夾，可

11、以進(jìn)行移動(dòng)、復(fù)制、重命名和刪除等基本的管理操作。單擊鼠標(biāo)左鍵選中需要管理的文件或文件夾，然后單擊鼠標(biāo)右鍵，再?gòu)棾霾藛沃羞x“編輯”項(xiàng)，即可進(jìn)行相關(guān)操作。 dreamweaver8.0入門圖文教程：dreamweaver8頁(yè)面的總體設(shè)置新浪vivi 百度搜藏 qq書簽作者:未知 | 點(diǎn)擊數(shù): 661 | 時(shí)間:2008-12-4【大 中 小】我們已經(jīng)描繪了小屋的藍(lán)圖，從現(xiàn)在開始，為我們的小屋添磚加瓦吧。打開01.html，制作一個(gè)圖文混排的簡(jiǎn)單頁(yè)面。一、頁(yè)面的總體設(shè)置 1、設(shè)置頁(yè)面的頭內(nèi)容 頭內(nèi)容再瀏覽器中是不可見的，但是卻攜帶著網(wǎng)頁(yè)的重要信息，如關(guān)鍵字、描述文字等，還可以實(shí)現(xiàn)一些非常重要的功能，

12、如自動(dòng)刷新功能。 鼠標(biāo)左鍵單擊插入工具欄最左邊按鈕旁的下拉小三角，在彈出菜單中選擇“html”項(xiàng)，出現(xiàn)“文件頭”按鈕，點(diǎn)開下拉菜單，就可以進(jìn)行頭內(nèi)容的設(shè)置了。 設(shè)置標(biāo)題，網(wǎng)頁(yè)標(biāo)題可以是中文、英文或符號(hào)，顯示在瀏覽器的標(biāo)題欄中。我們直接在設(shè)計(jì)窗口上方的標(biāo)題欄內(nèi)輸入或更改，就可以完成網(wǎng)頁(yè)標(biāo)題的編輯了。插入關(guān)鍵字，關(guān)鍵字用來(lái)協(xié)助網(wǎng)絡(luò)上的搜索引擎尋找網(wǎng)頁(yè)。要想讓更多的人看見你的網(wǎng)站，這項(xiàng)要好好填哦_單擊上圖所示的“關(guān)鍵字”項(xiàng)，彈出“關(guān)鍵字”對(duì)話框，填入關(guān)鍵字即可。插入meta，meta標(biāo)記用于記錄當(dāng)前網(wǎng)頁(yè)的相關(guān)信息，如編碼，作者，版權(quán)等，也可以用來(lái)給服務(wù)器提供信息。單擊上圖所示的“meta”項(xiàng)，彈出“

13、meta”對(duì)話框，在“屬性”欄選擇“名稱”屬性，在“值”文本框中輸入相應(yīng)的值，可以定義相應(yīng)的信息。author作者信息，copyright版權(quán)聲明，generator網(wǎng)頁(yè)編輯器。2、設(shè)置頁(yè)面屬性單擊“屬性欄”中的“頁(yè)面屬性”按鈕，打開的“頁(yè)面屬性”對(duì)話框。設(shè)置外觀，“外觀”是設(shè)置頁(yè)面的一些基本屬性。我們可以定義頁(yè)面中的默認(rèn)文本字體、文本字號(hào)、文本顏色、背景顏色和背景圖像等。我們?cè)O(shè)置頁(yè)面的所有邊距為0。設(shè)置鏈接，“鏈接”選項(xiàng)內(nèi)是一些與頁(yè)面的鏈接效果有關(guān)的設(shè)置?！版溄宇伾倍x超鏈接文本默認(rèn)狀態(tài)下的字體顏色，“變換圖像鏈接”定義鼠標(biāo)放在鏈接上時(shí)文本的顏色，“已訪問鏈接”定義訪問過的鏈接的顏色，“活

14、動(dòng)鏈接”定義活動(dòng)鏈接的顏色?！跋聞澗€樣式”可以定義鏈接的下劃線樣式。設(shè)置標(biāo)題，“標(biāo)題”用來(lái)設(shè)置標(biāo)題字體的一些屬性。如下圖所示，在左側(cè)“分類”列表中選擇“標(biāo)題”，這里的標(biāo)題指的并不是頁(yè)面的標(biāo)題內(nèi)容，而是可以應(yīng)用在具體文章中各級(jí)不同標(biāo)題上的一種標(biāo)題字體樣式。我們可以定義“標(biāo)題字體”及6種預(yù)定義的標(biāo)題字體樣式，包括粗體、斜體、大小和顏色。按自己的喜歡的風(fēng)格設(shè)置吧。dreamweaver8.0入門圖文教程：dreamweaver8文本的插入與編輯新浪vivi 百度搜藏 qq書簽作者:未知 | 點(diǎn)擊數(shù): 550 | 時(shí)間:2008-12-4【大 中 小】1、插入文本 要向 dreamweaver 文檔添

15、加文本，可以直接在dreamweaver“文檔”窗口中鍵入文本，也可以剪切并粘貼，還可以從word文檔導(dǎo)入文本。 用鼠標(biāo)在文檔編輯窗口的空白區(qū)域點(diǎn)一下，窗口中出現(xiàn)閃動(dòng)的光標(biāo)，提示文字的起始位置，將01.rar中的文字素材復(fù)制/粘貼進(jìn)來(lái)。 2、編輯文本格式 網(wǎng)頁(yè)的文本分為段落和標(biāo)題兩種格式。 在文檔編輯窗口中選中一段文本，在屬性面板“格式”后的下拉列表框中選擇“段落”把選中的文本設(shè)置成段落格式。 “標(biāo)題1”到“標(biāo)題6”分別表示各級(jí)標(biāo)題，應(yīng)用于網(wǎng)頁(yè)的標(biāo)題部分。對(duì)應(yīng)的字體由大到小，同時(shí)文字全部加粗。 另外，在屬性面板中可以定義文字的字號(hào)、顏色、加粗、加斜、水平對(duì)齊等內(nèi)容。 3、設(shè)置字體組合 drea

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

17、按鈕，可以向網(wǎng)頁(yè)中插入相應(yīng)的特殊符號(hào)。插入列表，列表分為兩種，有序列表和無(wú)序列表，無(wú)序列表沒有順序，每一項(xiàng)前邊都以同樣的符號(hào)顯示，有序列表前邊的每一項(xiàng)有序號(hào)引導(dǎo)。在文檔編輯窗口中選中需要設(shè)置的文本，在屬性面板中單擊，則選中的文本被設(shè)置成無(wú)序列表，單擊則被設(shè)置成有序列表。插入水平線，水平線起到分隔文本的排版作用，選擇快捷工具欄的“html”項(xiàng)，單擊html欄的第一個(gè)按鈕，即可向網(wǎng)頁(yè)中插入水平線。選中插入的這條水平線，可以在屬性面板對(duì)它的屬性進(jìn)行設(shè)置。 插入時(shí)間，在文檔編輯窗口中，將鼠標(biāo)光標(biāo)移動(dòng)到要插入日期的位置，單擊常用插入欄的“日期”按鈕，在彈出的“插入日期”對(duì)話框中選擇相應(yīng)的格式即可。 dr

18、eamweaver8.0入門圖文教程：dreamweaver8插入圖像新浪vivi 百度搜藏 qq書簽作者:未知 | 點(diǎn)擊數(shù): 524 | 時(shí)間:2008-12-4【大 中 小】目前互聯(lián)網(wǎng)上支持的圖像格式主要有g(shù)if、jpeg和png。其中使用最為廣泛的是gif和jpeg。1、插入圖像在制作網(wǎng)頁(yè)時(shí)，先構(gòu)想好網(wǎng)頁(yè)布局，在圖像處理軟件中將需要插入的圖片進(jìn)行處理，然后存放在站點(diǎn)根目錄下的文件夾里。插圖圖像時(shí)，將光標(biāo)放置在文檔窗口需要插入圖像的位置，然后鼠標(biāo)單擊常用插入欄的“圖像”按鈕。 彈出的“選擇圖像源文件”對(duì)話框，選擇img/001.jpg，單擊“確定”按鈕就把圖像001.jpg插入到了網(wǎng)頁(yè)中。

19、注意：如果我們?cè)诓迦雸D片的時(shí)候，沒有將圖片保存在站點(diǎn)根目錄下，會(huì)彈出下圖所示的對(duì)話框，提醒我們要把圖片保存在站點(diǎn)內(nèi)部，這時(shí)單擊“是”按鈕，然后選擇本地站點(diǎn)的路徑將圖片保存，圖像也可以被插入到網(wǎng)頁(yè)中。2、設(shè)置圖像屬性選中圖像后，在屬性面板中顯示出了圖像的屬性，如下如所示。在屬性面板的左上角，顯示當(dāng)前圖像的縮略圖，同時(shí)顯示圖像的大小。在縮略圖右側(cè)有一個(gè)文本框，在其中可以輸入圖像標(biāo)記的名稱。 圖像的大小是可以改變的，但是在dw里更改是極不好的習(xí)慣，如果我們的電腦安裝了fw軟件，單擊屬性面板的“編輯”旁邊的，即可啟動(dòng)fw對(duì)圖像進(jìn)行縮放等處理。當(dāng)圖像的大小改變時(shí)，屬性欄中“寬”和“高”的數(shù)值會(huì)以粗體顯示

20、，并在旁邊出現(xiàn)一個(gè)弧形箭頭，單擊它可以恢復(fù)圖像的原始大小。 “水平邊距”和“垂直邊距”文本框用來(lái)設(shè)置圖像左右和上下與其它頁(yè)面元素的距離。 “邊框”文本框時(shí)用來(lái)設(shè)置圖像邊框的寬度，默認(rèn)的邊框?qū)挾葹?。 “替代”文本框用來(lái)設(shè)置圖像的替代文本，可以輸入一段文字，當(dāng)圖像無(wú)法顯示時(shí)，將顯示這段文字。 單擊屬性面板中的對(duì)齊按鈕，可以分別將圖像設(shè)置成瀏覽器居左對(duì)齊、居中對(duì)齊、居右對(duì)齊。 在屬性面板中，“對(duì)齊”下拉列表框時(shí)設(shè)置圖像與文本的相互對(duì)齊方式，共有10個(gè)選項(xiàng)。通過它我們可以將文字對(duì)齊到圖像的上端、下端、左邊和右邊等，從而可以靈活的實(shí)現(xiàn)文字與圖片的混排效果。 3、插入其它圖像元素 在我們單擊常用插入欄的

21、“圖像”按鈕時(shí)，可以看到，除了第1項(xiàng)“圖像”外，還有“圖像占位符”、“鼠標(biāo)經(jīng)過圖像”、“導(dǎo)航條”等項(xiàng)目。 插入圖像占位符，在我們布局頁(yè)面時(shí)，如果要在網(wǎng)頁(yè)中插入一張圖片，可以先不制作圖片，而是使用占位符來(lái)代替圖片位置。單擊下拉列表中的“圖像占位符”，打開“圖像占位符”對(duì)話框。按設(shè)計(jì)需要設(shè)置圖片的寬度和高度，輸入呆插入圖像的名稱，即可。鼠標(biāo)經(jīng)過圖像，鼠標(biāo)經(jīng)過圖像實(shí)際上由兩個(gè)圖像組成，主圖像（當(dāng)首次載入頁(yè)時(shí)顯示的圖像）和次圖像（當(dāng)鼠標(biāo)指針移過主圖像時(shí)顯示的圖像）。這兩張圖片要大小相等，如果不相等，dw自動(dòng)調(diào)整次圖片的大小跟主圖像大小一致。 圖片與文本一樣，是網(wǎng)頁(yè)中最常用到的內(nèi)容，其變化相對(duì)較少，要想

22、排出精致美觀的網(wǎng)頁(yè)，下一節(jié)課的內(nèi)容可是必不可少的哦，繼續(xù)努力吧_ dreamweaver8.0入門圖文教程：dreamweaver8插入并編輯表格新浪vivi 百度搜藏 qq書簽作者:未知 | 點(diǎn)擊數(shù): 581 | 時(shí)間:2008-12-4【大 中 小】表格是網(wǎng)頁(yè)設(shè)計(jì)制作不可缺少的元素，它以簡(jiǎn)潔明了和高效快捷的方式將圖片、文本、數(shù)據(jù)和表單的元素有序的顯示在頁(yè)面上，讓我們可以設(shè)計(jì)出漂亮的頁(yè)面，使用表格排版的頁(yè)面在不同平臺(tái)、不同分辨率的瀏覽器里都能保持其原有的布局，而在不同的瀏覽器平臺(tái)有較好的兼容性，所以表格是網(wǎng)頁(yè)中最常用的排版方式之一。一、插入并編輯表格 1、插入表格在文檔窗口中，將光標(biāo)放在需要

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

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

25、。要選擇某一行或某一列，將光標(biāo)移動(dòng)到行左側(cè)或列上方，鼠標(biāo)指針變?yōu)橄蛴一蛳蛳碌募^圖標(biāo)時(shí)，單擊即可。3、設(shè)置表格屬性選中一個(gè)表格后，可以通過屬性面板更改表格屬性。“填充”文本框用來(lái)設(shè)置單元格邊距，“間距”文本框用來(lái)設(shè)置單元格間距?！皩?duì)齊”下拉列表框用來(lái)設(shè)置表格的對(duì)齊方式，默認(rèn)的對(duì)齊方式一般為左對(duì)齊?！斑吙颉蔽谋究蛴脕?lái)設(shè)置表格邊框的寬度?！氨尘邦伾蔽谋究蛴脕?lái)設(shè)置表格的背景顏色?！斑吙蝾伾庇脕?lái)設(shè)置表格邊框的顏色。 在“背景圖像”文本框填入表格背景圖像的路徑，可以給表格添加背景圖像。也可以如下圖所示給文本框加上鏈接路徑。還可以單擊文本框后的“瀏覽”按鈕，查找圖像文件。在“選擇圖像源”對(duì)話框中定位并

26、選擇要設(shè)置為背景的圖片，單擊“確認(rèn)”按鈕即可。4、單元格屬性把光標(biāo)移動(dòng)到某個(gè)單元格內(nèi)，可以利用單元格屬性面板對(duì)這個(gè)單元格的屬性進(jìn)行設(shè)置。“水平”文本框用來(lái)設(shè)置單元格內(nèi)元素的水平排版方式，是居左、居右或是居中?！按怪薄蔽谋究蛴脕?lái)設(shè)置單元格內(nèi)的垂直排版方式，是頂端對(duì)齊、底端對(duì)齊或是居中對(duì)齊?！案摺?、“寬”文本框用來(lái)設(shè)置單元格的寬度和高度?！安粨Q行”復(fù)選框可以防止單元格中較長(zhǎng)的文本自動(dòng)換行?！皹?biāo)題”復(fù)選框使選擇的單元格成為標(biāo)題單元格，單元格內(nèi)的文字自動(dòng)以標(biāo)題格式顯示出來(lái)。“背景”文本框用來(lái)設(shè)置表格的背景圖像?！氨尘邦伾蔽谋究蛴脕?lái)設(shè)置表格的背景顏色?！斑吙颉蔽谋究蛴脕?lái)色設(shè)置表格邊框的顏色。5、表格的

27、行和列選中要插入行或列的單元格，單擊鼠標(biāo)右鍵，在彈出菜單中選擇“插入行”或“插入列”或“插入行或列”命令。如果選擇了“插入行”命令，在選擇行的上方就插入了一個(gè)空白行，如果選擇了“插入列”命令，就在選擇列的左側(cè)插入了一列空白列。如果選擇了“插入行或列”命令，會(huì)彈出“插入行或列”對(duì)話框，可以設(shè)置插入行還是列、插入的數(shù)量，以及使在當(dāng)前選擇的單元格的上方或下方、左側(cè)或是右側(cè)插入行或列。要?jiǎng)h除行或列，選擇要?jiǎng)h除的行或列，單擊鼠標(biāo)右鍵，在彈出菜單中選擇“刪除行”或“刪除列”命令即可。6、拆分與合并單元格拆分單元格時(shí)，將光標(biāo)放在待拆分的單元格內(nèi)，單擊屬性面板上的“拆分”按鈕，在彈出對(duì)話框中，按需要設(shè)置即可。

28、合并單元格時(shí)，選中要合并的單元格，單擊屬性面板中的“合并”按鈕即可。dreamweaver8.0入門圖文教程:dreamweaver8嵌套表格新浪vivi 百度搜藏 qq書簽作者:未知 | 點(diǎn)擊數(shù): 467 | 時(shí)間:2008-12-4【大 中 小】表格之中還有表格即嵌套表格。網(wǎng)頁(yè)的排版有時(shí)會(huì)很復(fù)雜，在外部需要一個(gè)表格來(lái)控制總體布局，如果內(nèi)部排版的細(xì)節(jié)也通過總表格來(lái)實(shí)現(xiàn)，容易引起行高列寬等的沖突，給表格的制作帶來(lái)困難。其次，瀏覽器在解析網(wǎng)頁(yè)的時(shí)候，是將整個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)下載完畢之后才顯示表格，如果不使用嵌套，表格非常復(fù)雜，瀏覽者要等待很長(zhǎng)時(shí)間才能看到網(wǎng)頁(yè)內(nèi)容。引入嵌套表格，由總表格負(fù)責(zé)整體排版，由

29、嵌套的表格負(fù)責(zé)各個(gè)子欄目的排版，并插入到總表格的相應(yīng)位置中，各司其職，互不沖突。另外，通過嵌套表格，利用表格的背景圖像、邊框、單元格間距和單元格邊距等屬性可以得到漂亮的邊框效果，制作出精美的音畫貼圖網(wǎng)頁(yè)。創(chuàng)建嵌套表格的操作方法，先插入總表格，然后將光標(biāo)置于要插入嵌套表格的地方，繼續(xù)插入表格即可。1、將光標(biāo)放置在文檔窗口要插入表格的位置，單擊常用插入欄“表格”按鈕，插入一個(gè)1行1列的表格一，寬度500像素，高度100，邊框?yàn)?，單元格間距為0，單元格邊距為12像素。背景圖像選擇beij/003.gif。2、將光標(biāo)放置在表格一內(nèi)，插入表格二，1行1列，寬度100，高度100，邊框?yàn)?，單元格間距為

30、0，單元格邊距為12像素。背景圖像選擇beij/002.gif。3、將光標(biāo)放置在表格二內(nèi)，插入表格二，1行1列，寬度100，高度100，單元格間距和單元格邊距都為8像素，邊框?yàn)?0，邊框顏色為#fee4ed。背景圖像選擇beij/005.gif。4、將光標(biāo)放置在表格三內(nèi)，選擇單元格的背景圖像為beij/006.gif。添加文字“恭賀新禧”，字號(hào)68px，字體為隸書，顏色為#a51008。 三、表格的格式化做好的表格可以使用dw提供的預(yù)設(shè)外觀，可以提高制作效率，保持表格外觀的同一性，同時(shí)樣式提供的色彩搭配也比較美觀。插入一個(gè)5行6列的表格，表格的寬為500像素，高為300像素，邊框、單元格間距和

31、邊距全為0 。選擇表格，居中對(duì)齊表格后，執(zhí)行命令/格式化表格，彈出“格式化表格”對(duì)話框，我們選擇altrows red格式，單擊“確定”表格的樣式就設(shè)定好了。m 這里，還可以自己設(shè)定相應(yīng)的參數(shù)值。dreamweaver8.0入門圖文教程:插入flash動(dòng)畫新浪vivi 百度搜藏 qq書簽作者:未知 | 點(diǎn)擊數(shù): 500 | 時(shí)間:2008-12-4【大 中 小】通過前面三課的學(xué)習(xí)，相信你已經(jīng)能制作出一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)了，很有成就感吧_不過，一個(gè)優(yōu)秀的網(wǎng)站應(yīng)該不僅僅是由文字和圖片組成的，而是動(dòng)態(tài)的、多媒體。為了增強(qiáng)網(wǎng)頁(yè)的表現(xiàn)力，豐富文檔的顯示效果，我們可以向其flash動(dòng)畫、java小程序、音頻播放

32、插件等多媒體內(nèi)容。一、插入flash動(dòng)畫1、插入flash為了合理的安排這一課的頁(yè)面元素，在插入flash動(dòng)畫之前，讓我們先來(lái)復(fù)習(xí)一下表格布局吧_打開03.html，設(shè)置頁(yè)面屬性，在彈出的“頁(yè)面屬性”對(duì)話框中，“外觀”項(xiàng)設(shè)置字體為“宋體”，字號(hào)為16px，文本顏色為#f282a8，背景圖像為img/008.jpg，上邊距為50px、下、左、右的邊距都為0。 “鏈接”項(xiàng)選擇始終無(wú)下劃線，鏈接顏色為#f282a8，已訪問鏈接為#f5e458。 現(xiàn)在我們開始布局_（1）插入一個(gè)1行1列的表格（表格1），表格的寬度為726px，邊框粗細(xì)為0，單元格邊距為0、單元格間距為1，背景顏色為#892321，將

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

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

35、是否在頁(yè)面加載時(shí)就播放。在“品質(zhì)”下拉列表中可以選擇flash影片的畫質(zhì)，以最佳狀態(tài)顯示，就選擇“高品質(zhì)”。“對(duì)齊”下拉列表用來(lái)設(shè)置flash動(dòng)畫的對(duì)齊方式，為了使頁(yè)面的背景在flash下能夠襯托出來(lái)，我們可以使flash的背景變?yōu)橥该鳌螕魧傩悦姘逯械摹皡?shù)”按鈕，打開“參數(shù)”對(duì)話框，設(shè)置參數(shù)為wmode，值為transparent。這樣在任何背景下，flash動(dòng)畫都能實(shí)現(xiàn)透明背景的顯示。2、插入flash文本 我們將光標(biāo)放置在表格3第二行的單元格中，用flash文本制作導(dǎo)航欄目。單擊常用快捷欄的媒體按鈕，在列表中選擇flash文本，彈出“插入flash文本”對(duì)話框，字體隨意，大小22px，

36、顏色設(shè)置為#f5e458，轉(zhuǎn)滾顏色為#54c994，文本為“圖片素材”，背景顏色#6dcff6，選擇自己需要的路徑鏈接。同樣方法我們分別在表格3的第3、4、5、6行制作“代碼素材”、“flash動(dòng)漫”、“精美壁紙”和“音頻視頻”等欄目。3、插入flash按鈕我們?cè)趯⒐鈽?biāo)放置于插入flash按鈕的位置，單擊常用快捷欄的媒體按鈕，在列表中選擇flash按鈕，彈出“插入flash按鈕”對(duì)話框?！皹邮健庇脕?lái)選擇按鈕的外觀，“按鈕文本”用來(lái)輸入按鈕上的文字，“字體”和“大小”用于設(shè)置按鈕上文字的字體和大小，字號(hào)變大，按鈕并不會(huì)跟著改變?！版溄印庇糜谳斎氚粹o的鏈接，可以是外部鏈接，也可以是內(nèi)部鏈接?！澳繕?biāo)

37、”用來(lái)設(shè)置打開的鏈接窗口。 如果需要修改flash按鈕對(duì)象，可以先選中它，然后在屬性面板中單擊“編輯”按鈕，會(huì)自動(dòng)彈出剛才的“插入flash按鈕”對(duì)話框，更改它的設(shè)置就可以了。4、插入flashpaper我們還可以在網(wǎng)頁(yè)中插入 macromedia flashpaper 文檔。在瀏覽器中打開包含 flashpaper 文檔的頁(yè)面時(shí)，瀏覽者能夠?yàn)g覽 flashpaper 文檔中的所有頁(yè)面，而無(wú)需加載新的 web 頁(yè)。也可以搜索、打印和縮放該文檔。 在“文檔”窗口中，將光標(biāo)放放在頁(yè)面上想要顯示 flashpaper 文檔的位置，然后選擇“插入”“媒體”“flashpaper”。 在“插入 flas

38、hpaper”對(duì)話框中，瀏覽到一個(gè) flashpaper 文檔并將其選定。如果需要，通過輸入寬度和高度（以像素為單位）指定 flashpaper 對(duì)象在網(wǎng)頁(yè)上的尺寸。 flashpaper 將縮放文檔以適合寬度。單擊“確定”在頁(yè)面中插入文檔。 由于 flashpaper 文檔是 flash 對(duì)象，因此頁(yè)面上將出現(xiàn)一個(gè) flash 占位符。如果需要，在屬性檢查器中設(shè)置其他屬性。 5、插入flash視頻請(qǐng)參見玉樹老師的教程（在上面的flashpaper文檔中）。 dreamweaver8.0入門圖文教程:插入聲音新浪vivi 百度搜藏 qq書簽作者:未知 | 點(diǎn)擊數(shù): 419 | 時(shí)間:2008-

39、12-4【大 中 小】聲音能極好的烘托網(wǎng)頁(yè)頁(yè)面的氛圍，網(wǎng)頁(yè)中常見的聲音格式有wav、mp3、midi、aif、ra、或real audio格式。 1、添加背景音樂 在頁(yè)面中可以嵌入背景音樂。這種音樂多以mp3，midi文件為主，在dw中，添加背景音樂有兩種方法，一種是通過手寫代碼實(shí)現(xiàn)，還有一種是通過行為實(shí)現(xiàn)。 在html語(yǔ)言中，通過這個(gè)標(biāo)記可以嵌入多種格式的音樂文件，具體步驟是： 我們將01.mid音樂文件存放在med文件夾里。 打開03.html網(wǎng)頁(yè)，我們?yōu)檫@個(gè)頁(yè)面添加背景音樂 切換到dw的“拆分”視圖，講光標(biāo)定位到之前的位置，在光標(biāo)的位置寫下下面這段代碼：，如下圖所示。 按下f12鍵，在瀏

40、覽器中查看效果，我們可以聽見背景音樂聲。如果希望循環(huán)播放音樂，將剛才的源代碼修改為以下代碼即可： 2、嵌入音樂嵌入音頻可以將聲音直接插入頁(yè)面中，但只有瀏覽者在瀏覽網(wǎng)頁(yè)時(shí)具有所選聲音文件的適當(dāng)插件后，聲音才可以播放。如果希望在頁(yè)面顯示瀏覽器的外觀，可以使用這種方法。打開02.html網(wǎng)頁(yè)，將光標(biāo)放置于我們想要顯示播放器的位置。單擊快捷欄上的“媒體”按鈕，從下拉列表中選擇“插件”。彈出“選擇文件”對(duì)話框，在對(duì)話框中02.war音頻文件。單擊確定按鈕后，插入的插件在文檔窗口中以下圖所示圖標(biāo)來(lái)顯示。選中該圖標(biāo)，在屬性面板中可以對(duì)播放器的屬性進(jìn)行設(shè)置：要實(shí)現(xiàn)循環(huán)播放音樂的效果，單擊屬性面板中的“參數(shù)”按

41、鈕，然后單擊“”按鈕，在“參數(shù)”列中輸入loop，并在“值”列中輸入true后，單擊“確定”按鈕。要實(shí)現(xiàn)自動(dòng)播放，可以繼續(xù)編輯參數(shù)，在參數(shù)對(duì)話框的“參數(shù)”列中輸入autostart，并在值中輸入true，單擊“確定”按鈕。按下f12鍵，打開瀏覽器預(yù)覽，這個(gè)頁(yè)面實(shí)現(xiàn)了嵌入音樂的效果，在瀏覽器里顯示了播放插件。 dreamweaver8.0入門圖文教程:創(chuàng)建鏈接關(guān)系新浪vivi 百度搜藏 qq書簽作者:未知 | 點(diǎn)擊數(shù): 366 | 時(shí)間:2008-12-4【大 中 小】鏈接是一個(gè)網(wǎng)站的靈魂，一個(gè)網(wǎng)站是由多個(gè)頁(yè)面組成的，而這些頁(yè)面之間依據(jù)鏈接確定相互之間的導(dǎo)航關(guān)系。超級(jí)鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁(yè)之間、

42、站點(diǎn)與web之間的鏈接關(guān)系，它可以使站點(diǎn)內(nèi)的網(wǎng)頁(yè)成為有機(jī)的整體，還能夠使不同站點(diǎn)之間建立聯(lián)系。超級(jí)鏈接由兩部分組成：鏈接載體和鏈接目標(biāo)。許多頁(yè)面元素可以作為鏈接載體，如：文本、圖像、圖像熱區(qū)、動(dòng)畫等。而鏈接目標(biāo)可以是任意網(wǎng)絡(luò)資源，如：頁(yè)面、圖像、聲音、程序、其他網(wǎng)站、email甚至是頁(yè)面中的某個(gè)位置 - 錨點(diǎn)。鏈接的類型如果按鏈接目標(biāo)分類，可以將超級(jí)鏈接分為以下幾種類型：* 內(nèi)部鏈接：同一網(wǎng)站文檔之間的鏈接。* 外部鏈接：不同網(wǎng)站文檔之間的鏈接。* 錨點(diǎn)鏈接：同一網(wǎng)頁(yè)或不同網(wǎng)頁(yè)中指定位置的鏈接。* e-mail鏈接：發(fā)送電子郵件的鏈接。1、關(guān)于鏈接路徑絕對(duì)路徑，為文件提供完全的路徑，包括適用的

43、協(xié)議，例如http、ftp，rtsp等。 /相對(duì)路徑，相對(duì)路徑最適合網(wǎng)站的內(nèi)部鏈接。如果鏈接到同一目錄下，則只需要輸入要鏈接文件的名稱。要鏈接到下一級(jí)目錄中的文件，只需要輸入目錄名。然后輸入“/“，再輸入文件名。如鏈接到上一級(jí)目錄中的文件，則先輸入”./“再輸入目錄名，文件名。根路徑：是指從站點(diǎn)根文件夾到被鏈接文檔經(jīng)由的路徑，以前斜杠開頭，例如， /fy/maodian.html就是站點(diǎn)根文件夾下的fy子文件夾中的一個(gè)文件（maodian.html ）的根路徑。2、創(chuàng)建外部鏈接不論是文字還是圖像，都可以創(chuàng)建鏈接到絕對(duì)地址的外部鏈接。創(chuàng)建鏈接的方法可以直接輸入

44、地址也可以使用超級(jí)鏈接對(duì)話框。（1）直接輸入地址打開02.html頁(yè)面，輸入并選中文字“閃客啟航網(wǎng)頁(yè)技術(shù)區(qū)”。在屬性面板中，“鏈接”用來(lái)設(shè)置圖像或文字的超鏈接，“目標(biāo)”用來(lái)設(shè)置打開方式。我們?cè)凇版溄印蔽谋究蛑苯虞斎胪獠拷^對(duì)地 ，在“目標(biāo)”項(xiàng)的下拉列表中選擇_blank（在一個(gè)新的未命名的瀏覽器窗口中打開鏈接）。如下圖所示。 （2）使用超級(jí)鏈接對(duì)話框打開03.html頁(yè)面，選中文字“閃客啟航”。單擊常用快捷欄中的“超級(jí)鏈接”按鈕。彈出“超級(jí)鏈接”對(duì)話框，我們進(jìn)行以下各項(xiàng)的設(shè)置：“文本”文本框用來(lái)設(shè)置超級(jí)鏈接顯示的文本。“鏈接”用來(lái)設(shè)置超鏈接連接到的路徑。“目標(biāo)”下拉列表框用來(lái)設(shè)置超鏈接的打開方式

45、，有四個(gè)選項(xiàng)?！皹?biāo)題”文本框用來(lái)設(shè)置超鏈接的標(biāo)題。設(shè)置好后，單擊“確定”按鈕，向網(wǎng)頁(yè)中插入超鏈接。3、創(chuàng)建內(nèi)部鏈接在文檔窗口選中文字，單擊屬性面板“鏈接”后的按鈕，彈出“選擇文件”對(duì)話框，選擇要鏈接到的網(wǎng)頁(yè)文件，即可鏈接到這個(gè)網(wǎng)頁(yè)。我們也可以拖動(dòng)“鏈接”后的按鈕到站點(diǎn)面板上的相應(yīng)網(wǎng)頁(yè)文件，則鏈接將指向這個(gè)網(wǎng)頁(yè)文件。此外，我們還可以直接將相對(duì)地址輸入到“鏈接”文本框里來(lái)鏈接一個(gè)頁(yè)面。4、創(chuàng)建email鏈接單擊常用快捷欄中的“電子郵件鏈接”按鈕，彈出“電子郵件鏈接”對(duì)話框，在對(duì)話框的文本框那輸入要鏈接的文本，然后在email文本框內(nèi)輸入郵箱地址即可。5、創(chuàng)建錨點(diǎn)鏈接所謂錨點(diǎn)鏈接，是指在同一個(gè)頁(yè)面中

46、的不同位置的鏈接。打開一個(gè)頁(yè)面較長(zhǎng)的網(wǎng)頁(yè)，將光標(biāo)放置于要插入錨點(diǎn)的地方，單擊常用快捷欄的“命名錨記”按鈕，插入錨點(diǎn)。再選中需要鏈接錨點(diǎn)的文字，再屬性面板中拖動(dòng)鏈接后的到錨點(diǎn)上即可。6、制作圖像映射打開03.html文件，選中102。gif圖片，在屬性面板中，有不同形狀的圖像熱區(qū)按鈕，選擇一個(gè)熱區(qū)按鈕單擊。然后在圖像上需要?jiǎng)?chuàng)建熱區(qū)的位置拖動(dòng)鼠標(biāo)，即可創(chuàng)建熱區(qū)。此時(shí)，選中的部分被稱著圖像熱點(diǎn)。選中這個(gè)圖像熱點(diǎn)，在屬性面板上可以給這個(gè)圖像熱點(diǎn)設(shè)置超鏈接即可。現(xiàn)在，請(qǐng)發(fā)揮你的想象力，巧妙運(yùn)用各種頁(yè)面元素來(lái)豐富你的網(wǎng)頁(yè)，把它裝扮的更加生動(dòng)和精彩！ dreamweaver8.0入門圖文教程:創(chuàng)建css樣式

47、新浪vivi 百度搜藏 qq書簽作者:未知 | 點(diǎn)擊數(shù): 526 | 時(shí)間:2008-12-4【大 中 小】層疊樣式表 (css) 是一系列格式設(shè)置規(guī)則，它們控制 web 頁(yè)面內(nèi)容的外觀。使用 css 設(shè)置頁(yè)面格式時(shí)，內(nèi)容與表現(xiàn)形式是相互分開的。頁(yè)面內(nèi)容（html 代碼）位于自身的 html 文件中，而定義代碼表現(xiàn)形式的 css 規(guī)則位于另一個(gè)文件（外部樣式表）或 html 文檔的另一部分（通常為 部分）中。使用 css 可以非常靈活并更好地控制頁(yè)面的外觀，從精確的布局定位到特定的字體和樣式等。術(shù)語(yǔ)“層疊”是指對(duì)同一個(gè)元素或 web 頁(yè)面應(yīng)用多個(gè)樣式的能力。例如，可以創(chuàng)建一個(gè) css 規(guī)則來(lái)應(yīng)

48、用顏色，創(chuàng)建另一個(gè)規(guī)則來(lái)應(yīng)用邊距，然后將兩者應(yīng)用于一個(gè)頁(yè)面中的同一文本。所定義的樣式“層疊”到您的 web 頁(yè)面上的元素，并最終創(chuàng)建您想要的設(shè)計(jì)。css樣式表的創(chuàng)建，可以統(tǒng)一定制網(wǎng)頁(yè)文字的大小、字體、顏色、邊框、鏈接狀態(tài)等效果。在dreamweaver 8中css樣式的設(shè)置方式有了很大的改進(jìn)，更為方便、實(shí)用、快捷。一、創(chuàng)建css樣式1、選中菜單“窗口”“css樣式”。打開css樣式面板。2、單擊“css樣式”面板右下角的“新建css規(guī)則”按鈕，打開“新建css規(guī)則”對(duì)話框。在“選擇器類型”選項(xiàng)中，可以選擇創(chuàng)建css樣式的方法包括以下三種：類：我們可以在文檔窗口的任何區(qū)域或文本中應(yīng)用類樣式，如果

49、將類樣式應(yīng)用于一整段文字，那么會(huì)在相應(yīng)的標(biāo)簽中出現(xiàn)class屬性，該屬性值即為類樣式的名稱。標(biāo)簽（重新定義特定標(biāo)簽的外觀）：重新定義html標(biāo)記的的默認(rèn)格式。我們可以針對(duì)某一個(gè)標(biāo)簽來(lái)定義層疊樣式表，也就是說(shuō)定義的層疊樣式表將只應(yīng)用于選擇的標(biāo)簽。例如，我們?yōu)楹蜆?biāo)簽定義了層疊樣式表，那么所有包含在和標(biāo)簽的內(nèi)容將遵循定義的層疊樣式表。高級(jí)（id、偽類選擇器等）：為特定的組合標(biāo)簽定義層疊樣式表，使用id作為屬性，以保證文檔具有唯一可用的值。高級(jí)樣式是一種特殊類型的樣式，常用的有4種：a:link設(shè)定正常狀態(tài)下鏈接文字的樣式。a:active 設(shè)定鼠標(biāo)單擊時(shí)鏈接的外觀。a:visited設(shè)定訪問過的鏈接

50、的外觀。a:hover 設(shè)定鼠標(biāo)放置在鏈接文字之上時(shí)，文字的外觀。3、為新建css樣式輸入或選擇名稱、標(biāo)記或選擇器，其中：對(duì)于自定義樣式，其名稱必須以點(diǎn)（.）開始，如果沒有輸入該點(diǎn)，則dw回自動(dòng)添加上。自定義樣式名可以是字母與數(shù)字的組合，但.之后必須是字母。對(duì)于重新定義html標(biāo)記，可以在“標(biāo)簽”下拉列表中輸入或選擇重新定義的標(biāo)記。對(duì)于css選擇器樣式，可以在“選擇器”下拉列表中輸入或選擇需要的選擇器。4、在“定義在”區(qū)域選擇定義的樣式位置，可以是“新建樣式表文件”或“僅對(duì)該文檔”。單擊“確定”按鈕，如果選擇了“新建樣式表文件”選項(xiàng)，回彈出“保存樣式表文件為”對(duì)話框，給樣式表命名，保存后，回彈

51、出“css規(guī)則定義”對(duì)話框。如果選擇了“僅對(duì)該文檔”，則單擊“確定”后，直接彈出“css規(guī)則定義”，在其中設(shè)置css樣式。5、“css規(guī)則定義”對(duì)話框中設(shè)置css規(guī)則定義。主要分為類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展8項(xiàng)。每個(gè)選項(xiàng)都可以對(duì)所選標(biāo)簽做不同方面的定義，可以根據(jù)需要設(shè)定。定義完畢后，單擊“確定”按鈕，完成創(chuàng)建css樣式。 dreamweaver8使用css樣式美化頁(yè)面新浪vivi 百度搜藏 qq書簽作者:佚名 | 點(diǎn)擊數(shù): 318 | 時(shí)間:2008-12-5【大 中 小】在“css規(guī)則對(duì)話框”中，我們可以通過類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展項(xiàng)的設(shè)置，來(lái)美化我

52、們的頁(yè)面，當(dāng)然啦，我們?cè)诙x某個(gè)css樣式的時(shí)候，不需要對(duì)每一個(gè)項(xiàng)都進(jìn)行設(shè)置，需要什么效果，選擇相應(yīng)的項(xiàng)進(jìn)行設(shè)置就可以了。1、文本樣式的設(shè)置新建css樣式, “選擇器類型”為類，名稱為 “style1”定義在“僅對(duì)該文檔”。保存至站點(diǎn)根目錄下的css文件夾內(nèi)，彈出“css規(guī)則定義”對(duì)話框，默認(rèn)顯示的就是對(duì)文本進(jìn)行設(shè)置的“類型”項(xiàng)。字體：可以在下拉菜單種選擇相應(yīng)的字體。大?。捍笮【褪亲痔?hào)，可以直接填入數(shù)字，然后選擇單位。樣式：設(shè)置文字的外觀，包括正常、斜體、偏斜體。行高：這項(xiàng)設(shè)置在網(wǎng)頁(yè)制作種很常用。設(shè)置行高，可以選擇“正?！保層?jì)算機(jī)自動(dòng)調(diào)整行高，也可以使用數(shù)值和單位結(jié)合的形式自行設(shè)置。需要注意

53、的是，單位應(yīng)該和文字的單位一致，行高的數(shù)值是包括字號(hào)數(shù)值在內(nèi)的。例如，文字設(shè)置為12pt，如果要?jiǎng)?chuàng)建一倍行距，則行高應(yīng)該為24pt。變量：在英文種，大寫字母的字號(hào)一般比較大，采用“變量”中的“小型大寫字母”設(shè)置，可以縮小大寫字母。顏色：設(shè)置文字的色彩。2、背景樣式的設(shè)置在html中，背景只能使用單一的色彩或利用圖像水平垂直方向的平鋪。使用css之后，有了更加靈活的設(shè)置。在css規(guī)則定義”對(duì)話框左側(cè)選擇“背景”項(xiàng)，可以在右邊區(qū)域設(shè)置css樣式的背景格式。背景顏色：選擇固定色作為背景。背景圖像：直接填寫背景圖像的路徑，或單擊“瀏覽”按鈕找到背景圖像的位置。重復(fù)：在使用圖像作為背景的時(shí)，可以使用此項(xiàng)

54、設(shè)置背景圖像的重復(fù)方式，包括“不重復(fù)”、“重復(fù)”、“橫向重復(fù)”、和“縱向重復(fù)“。附件：選擇圖像做背景的時(shí)候，可以設(shè)置圖像是否跟隨網(wǎng)頁(yè)一同滾動(dòng)。水平位置：設(shè)置水平方向的位置，可以“左對(duì)齊“右對(duì)齊”、“居中”。還可以設(shè)置數(shù)值與單位結(jié)合表示位置的方式，比較常用的是像素單位。垂直位置：可以選擇“頂部”、“底部”、“居中”。還可以設(shè)置數(shù)值和單位結(jié)合表示位置的方式。3、區(qū)塊樣式設(shè)置在css規(guī)則定義”對(duì)話框左側(cè)選擇“區(qū)塊”項(xiàng)，可以在右邊區(qū)域設(shè)置css樣式的區(qū)塊格式。單詞間距“英文單詞之間的距離，一般選擇默認(rèn)設(shè)置。字母間距：設(shè)置英文字母間距，使用正值為增加字母間距，使用負(fù)值為減小字母間距。垂直對(duì)齊：設(shè)置對(duì)象的垂直對(duì)齊方式。文本對(duì)齊：設(shè)置文本的水平對(duì)齊方式。文字縮進(jìn)：這是最重要的項(xiàng)目。中文文字的首行縮進(jìn)就是由它