dreamweaver8.0入門圖文教程：Dreamweaver 8 操作_第1頁
dreamweaver8.0入門圖文教程：Dreamweaver 8 操作_第2頁
dreamweaver8.0入門圖文教程：Dreamweaver 8 操作_第3頁
dreamweaver8.0入門圖文教程：Dreamweaver 8 操作_第4頁
dreamweaver8.0入門圖文教程：Dreamweaver 8 操作_第5頁
已閱讀5頁，還剩37頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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

2、者的設(shè)計(jì)視圖布局。 在Dreamweave 8 中首先將顯示一個(gè)起始頁，可以勾選這個(gè)窗口下面的“不在顯示此對話框”來隱藏它。在這個(gè)頁面中包括“打開最近項(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è)文檔后，在后面還會顯示

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

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

5、”工具欄包含來自“文件”和“編輯”菜單中的一般操作的按鈕：“新建”、“打開”、“保存”、“保存全部”、“剪切”、“復(fù)制”、“粘貼”、“撤消”和“重做”。 6、文檔窗口 當(dāng)我們打開或創(chuàng)建一個(gè)項(xiàng)目，進(jìn)入文檔窗口，我們可以在文檔區(qū)域中進(jìn)行輸入文字、插入表格和編輯圖片等操作。 “文檔”窗口顯示當(dāng)前文檔。可以選擇下列任一視圖：“設(shè)計(jì)”視圖是一個(gè)用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，Dreamweaver 顯示文檔的完全可編輯的可視化表示形式，類似于在瀏覽器中查看頁面時(shí)看到的內(nèi)容?！按a”視圖是一個(gè)用于編寫和編輯 HTML、JavaScript、服務(wù)器語言代碼以及任何其他

6、類型代碼的手工編碼環(huán)境?！按a和設(shè)計(jì)”視圖使您可以在單個(gè)窗口中同時(shí)看到同一文檔的“代碼”視圖和“設(shè)計(jì)”視圖。 7、狀態(tài)欄 “文檔”窗口底部的狀態(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)簽及其全部內(nèi)容。單擊 <body> 可以選擇文檔的整個(gè)正文。 8、屬性面板 屬性面板并不是將所有的屬性加載在面板上，而是根據(jù)我們選擇的對象來動(dòng)態(tài)顯示對象的屬性屬性面板的狀態(tài)完全是隨當(dāng)前在文檔中選擇的對象來確定的。例如，當(dāng)前選擇了一幅圖像，那么屬性面板上就出現(xiàn)該圖像的相關(guān)屬性；如果選擇了表格，那么屬性面板會相應(yīng)的變化成表格

7、的相關(guān)屬性。 9、浮動(dòng)面板 其它面板可以同稱為浮動(dòng)面板，這些面板都浮動(dòng)于編輯窗口之外。在初次使用 Dreamweave 8的時(shí)候，這些面板根據(jù)功能被分成了若干組。在窗口菜單中，選擇不同的命令可以打開基本面板組、設(shè)計(jì)面板組、代碼面板組、應(yīng)用程序面板組、資源面板組和其它面板組。 終于把Dreamweave 8的基本工作界面介紹完了，你是否已經(jīng)了解它？從現(xiàn)在開始，讓我們一起來建造一座小房子。 dreamweaver8.0入門圖文教程：Dreamweaver 8 本地 站點(diǎn)的搭建與管理 要制作一個(gè)能夠被大家瀏覽的網(wǎng)站，首先需要在本地磁盤上制作這個(gè)網(wǎng)站，然后把這個(gè)網(wǎng)站傳到互聯(lián)網(wǎng)的web服務(wù)器上。放置在本

8、地磁盤上的網(wǎng)站被稱為本地站點(diǎn)，位于互聯(lián)網(wǎng)web服務(wù)器里的網(wǎng)站被稱為遠(yuǎn)程站點(diǎn)。Dreamweaver 8提供了對本地站點(diǎn)和遠(yuǎn)程站點(diǎn)強(qiáng)大的管理功能。 1、規(guī)劃站點(diǎn)結(jié)構(gòu) 網(wǎng)站是多個(gè)網(wǎng)頁的集合，其包括一個(gè)首頁和若干個(gè)分頁，這種集合不是簡單的集合。為了達(dá)到最佳效果，在創(chuàng)建任何 Web 站點(diǎn)頁面之前，要對站點(diǎn)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)和規(guī)劃。決定要?jiǎng)?chuàng)建多少頁，每頁上顯示什么內(nèi)容，頁面布局的外觀以及各頁是如何互相連接起來的。 我們可以通過把文件分門別類的放置在各自的文件夾里，使網(wǎng)站的結(jié)構(gòu)清晰明了，便于管理和查找。 2、創(chuàng)建站點(diǎn) 在Dreamweave 8中可以有效的建立并管理多個(gè)站點(diǎn)。搭建站點(diǎn)可以有兩種方法，一是利用向

9、導(dǎo)完成，二是利用高級設(shè)定來完成。 在搭建站點(diǎn)前，我們先在自己的電腦硬盤上建一個(gè)以英文或數(shù)字命名的空文件夾。 （1）選擇菜單欄站點(diǎn)管理站點(diǎn)，出現(xiàn)“管 理站點(diǎn)”對話框。點(diǎn)擊“新建”按鈕，選擇彈出菜單中的“站點(diǎn)”項(xiàng)。 在打開的窗口上方有“基本”和“高級”兩個(gè)標(biāo)簽，可以在站點(diǎn)向?qū)Ш透呒壴O(shè)置之間切換。下面選擇“基本”標(biāo)簽。 在文本框中，輸入一個(gè)站點(diǎn)名字以在 Dreamweaver8.0中標(biāo)識該站點(diǎn)。這個(gè)名字可以是任何你需要的名字。單擊“下一步”。出現(xiàn)向?qū)У南乱粋€(gè)界面，詢問是否要使用服務(wù)器技術(shù)。 我們現(xiàn)在建立的是一個(gè)靜態(tài)頁面，所以選擇“否”。 點(diǎn)下一步，在文檔框設(shè)置本地站點(diǎn)文件夾的地址。 點(diǎn)下一步，進(jìn)入站

10、點(diǎn)定義，我們將在站點(diǎn)建設(shè)完成后在與FTP鏈接，這里選擇“無”。 單擊“完成”按鈕，結(jié)束“站點(diǎn)定義“對話框的設(shè)置。 單擊“完成”按鈕，文件面板顯示出剛才建立的站點(diǎn)。 到此，我們完成了站點(diǎn)的創(chuàng)建。 3、搭建站點(diǎn)結(jié)構(gòu) 站點(diǎn)是文件與文件夾的集合，下面我們根據(jù)前面對xmweb網(wǎng)站的設(shè)計(jì)，來新建xmweb站點(diǎn)要設(shè)置的文件夾和文件。 新建文件夾，在文件面板的站點(diǎn)跟目錄下單擊鼠標(biāo)右鍵，從彈出菜單中選擇“新建文件夾”項(xiàng)，然后給文件夾命名。這里我們創(chuàng)建新建8個(gè)文件夾，分別命名為：img、med、swf、txt、css、js、moan和fy。 創(chuàng)建頁面，在文件面板的站點(diǎn)跟目錄下單擊鼠標(biāo)右鍵，從彈出菜單中選擇“新建文

11、件”項(xiàng)，然后給文件命名。首先要添加首頁，我們把首頁命名為index.html，再分別新建01.html、 02.html、03.html、04.html和05.html。 4、文件與文件夾的管理 對建立的文件和文件夾，可以進(jìn)行移動(dòng)、復(fù)制、重命名和刪除等基本的管理操作。單擊 鼠標(biāo)左鍵選中需要管理的文件或文件夾，然后單擊鼠標(biāo)右鍵，再彈出菜單中選“編輯”項(xiàng)，即可進(jìn)行相關(guān)操作。 dreamweaver8.0入門圖文教程：Dreamweaver 8 頁面 的總體設(shè)置 新浪ViVi 百度搜藏 QQ書簽 作者:未知 | 點(diǎn)擊數(shù): 661 | 時(shí)間:2008-12-4【大 中 小】 我們已經(jīng)描繪了小屋的藍(lán)圖，

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

13、人看見你的網(wǎng)站，這項(xiàng)要好好填哦_單擊上圖所示的“關(guān)鍵字”項(xiàng)，彈出“關(guān)鍵字”對話框，填入關(guān)鍵字即可。 插入META，META標(biāo)記用于記錄當(dāng)前網(wǎng)頁的相關(guān)信息，如編碼，作者，版權(quán)等，也可以用來給服務(wù)器提供信息。單擊上圖所示的“META”項(xiàng)，彈出“META”對話框，在“屬性”欄選擇“名稱”屬性，在“值”文本框中輸入相應(yīng)的值，可以定義相應(yīng)的信息。 author作者信息，copyright版權(quán)聲明，generator網(wǎng)頁編輯器。 2、設(shè)置頁面屬性 單擊“屬性欄”中的“頁面屬性”按鈕，打開的“頁面屬性”對話框。 設(shè)置外觀，“外觀”是設(shè)置頁面的一些基本屬性。我們可以定義頁面中的默認(rèn)文本字體、文本字號、文本顏色

14、、背景顏色和背景圖像等。我們設(shè)置頁面的所有邊距為0。 設(shè)置鏈接，“鏈接”選項(xiàng)內(nèi)是一些與頁面的鏈接效果有關(guān)的設(shè)置?！版溄宇伾倍x超鏈接文本默認(rèn)狀態(tài)下的字體顏色，“變換圖像鏈接”定義鼠標(biāo)放在鏈接上時(shí)文本的顏色，“已訪問鏈接”定義訪問過的鏈接的顏色，“活動(dòng)鏈接”定義活動(dòng)鏈接的顏色。“下劃線樣式”可以定義鏈接的下劃線樣式。 設(shè)置標(biāo)題，“標(biāo)題”用來設(shè)置標(biāo)題字體的一些屬性。如下圖所示，在左側(cè)“分類”列表中選擇“標(biāo)題”，這里的標(biāo)題指的并不是頁面的標(biāo)題內(nèi)容，而是可以應(yīng)用在具體文章中各級 不同標(biāo)題上的一種標(biāo)題字體樣式。我們可以定義“標(biāo)題字體”及6 種預(yù)定義的標(biāo)題字體樣式，包括粗體、斜體、大小和顏色。按自己的喜

15、歡的風(fēng)格設(shè)置吧。 dreamweaver8.0入門圖文教程：Dreamweaver 8 文本 的插入與編輯 新浪ViVi 百度搜藏 QQ書簽 作者:未知 | 點(diǎn)擊數(shù): 550 | 時(shí)間:2008-12-4【大 中 小】 1、插入文本 要向 Dreamweaver 文檔添加文本，可以直接在Dreamweaver“文檔”窗口中鍵入文本，也可以剪切并粘貼，還可以從word文檔導(dǎo)入文本。 用鼠標(biāo)在文檔編輯窗口的空白區(qū)域點(diǎn)一下，窗口中出現(xiàn)閃動(dòng)的光標(biāo)，提示文字的起始位置，將01.rar中的文字素材復(fù)制/粘貼進(jìn)來。 2、編輯文本格式 網(wǎng)頁的文本分為段落和標(biāo)題兩種格式。 在文檔編輯窗口中選中一段文本，在屬性面

16、板“格式”后的下拉列表框中選擇“段落”把選中的文本設(shè)置成段落格式。 “標(biāo)題1”到“標(biāo)題6”分別表示各級標(biāo)題，應(yīng)用于網(wǎng)頁的標(biāo)題部分。對應(yīng)的字體由大到小，同時(shí)文字全部加粗。 另外，在屬性面板中可以定義文字的字號、顏色、加粗、加斜、水平對齊等內(nèi)容。 3、設(shè)置字體組合 Dreamweaver8預(yù)設(shè)讀的可供選擇的字體組合只有6項(xiàng)英文字體組合，要想使用中文字體，必須重新編輯新的字體組合，在“字體”后的下拉列表框中選擇“編輯字體列表”，彈出“編輯字體列表”對話框： 4、文字的其它設(shè)置 文本換行，按Enter鍵換行的行距較大（在代碼區(qū)生成<p></p>標(biāo)簽），按EnterShift鍵換

17、行的行間距較?。ㄔ诖a區(qū)生成<br>標(biāo)簽）。 文本空格，我們選擇編輯/首選參數(shù)，在彈出得對話框中左側(cè)的分類列表中選擇“常規(guī)”項(xiàng)，然后在右邊選“允許多個(gè)連續(xù)的空格”項(xiàng)，我們就可以直接按“空格”鍵給文本添加空格了。 特殊字符，要向網(wǎng)頁中插入特殊字符，需要在快捷工具欄選擇“文本”，切換到字符插入欄，單擊文本插入欄的最后一個(gè)按鈕，可以向網(wǎng)頁中插入相應(yīng)的特殊符號。 插入列表，列表分為兩種，有序列表和無序列表，無序列表沒有順序，每一項(xiàng)前邊都以同樣的符號顯示，有序列表前邊的每一項(xiàng)有序號引導(dǎo)。在文檔編輯窗口中選中需要設(shè)置的文本，在屬性面板中單擊，則選中的文本被設(shè)置成無序列表，單擊則被設(shè)置成有序列表

18、。 插入水平線，水平線起到分隔文本的排版作用，選擇快捷工具欄的“HTML”項(xiàng)，單擊HTML欄的中插入水平線。選中插入的這條水平線，可以在屬性面板對它的屬性進(jìn)行設(shè)置。 插入時(shí)間，在文檔編輯窗口中，將鼠標(biāo)光標(biāo)移動(dòng)到要插入日期的位置，單擊常用插入欄的“日期”按鈕，在彈出的“插入日期”對話框中選擇相應(yīng)的格式即可。 dreamweaver8.0入門圖文教程：Dreamweaver 8 插入 圖像 新浪ViVi 百度搜藏 QQ書簽 作者:未知 | 點(diǎn)擊數(shù): 524 | 時(shí)間:2008-12-4【大 中 小】 目前互聯(lián)網(wǎng)上支持的圖像格式主要有GIF、JPEG和PNG。其中使用最為廣泛的是GIF和JPEG。

19、1、插入圖像 在制作網(wǎng)頁時(shí)，先構(gòu)想好網(wǎng)頁布局，在圖像處理軟件中將需要插入的圖片進(jìn)行處理，然 后存放在站點(diǎn)根目錄下的文件夾里。 插圖圖像時(shí)，將光標(biāo)放置在文檔窗口需要插入圖像的位置，然后鼠標(biāo)單擊常用插入欄的“圖像”按鈕。 彈出的“選擇圖像源文件”對話框，選擇img/001.jpg，單擊“確定”按鈕就把圖像001.jpg插入到了網(wǎng)頁中。 注意：如果我們在插入圖片的時(shí)候，沒有將圖片保存在站點(diǎn)根目錄下，會彈出下圖所示的對話框，提醒我們要把圖片保存在站點(diǎn)內(nèi)部，這時(shí)單擊“是”按鈕， 然后選擇本地站點(diǎn)的路徑將圖片保存，圖像也可以被插入到網(wǎng)頁中。 2、設(shè)置圖像屬性 選中圖像后，在屬性面板中顯示出了圖像的屬性，如

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

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

22、輸入呆插入圖像的名稱，即可。 對齊按鈕，可以分別將圖像設(shè)置成瀏覽器居左對齊、居中 鼠標(biāo)經(jīng)過圖像，鼠標(biāo)經(jīng)過圖像實(shí)際上由兩個(gè)圖像組成，主圖像（當(dāng)首次載入頁時(shí)顯示的圖像）和次圖像（當(dāng)鼠標(biāo)指針移過主圖像時(shí)顯示的圖像）。這兩張圖片要大小相等，如果不相等，DW自動(dòng)調(diào)整次圖片的大小跟主圖像大小一致。 圖片與文本一樣，是網(wǎng)頁中最常用到的內(nèi)容，其變化相對較少，要想排出精致美觀的網(wǎng)頁，下一節(jié)課的內(nèi)容可是必不可少的哦，繼續(xù)努力吧_ dreamweaver8.0入門圖文教程：Dreamweaver 8 插入 并編輯表格 新浪ViVi 百度搜藏 QQ書簽 作者:未知 | 點(diǎn)擊數(shù): 581 | 時(shí)間:2008-12-4【

23、大 中 小】 表格是網(wǎng)頁設(shè)計(jì)制作不可缺少的元素，它以簡潔明了和高效快捷的方式將圖片、文本、數(shù)據(jù)和表單的元素有序的顯示在頁面上，讓我們可以設(shè)計(jì)出漂亮的頁面，使用表格排版的頁面在不同平臺、不同分辨率的瀏覽器里都能保持其原有的布局，而在不同的瀏覽器平臺有較好的兼容性，所以表格是網(wǎng)頁中最常用的排版方式之一。一、插入并編輯表格 1、插入表格 在文檔窗口中，將光標(biāo)放在需要?jiǎng)?chuàng)建表格的位置，單擊“常用”快捷欄中的表格按鈕彈出的“表格”對話框，指定表格的屬性后，在文檔窗口中插入設(shè)置的表格。 “行數(shù)”文本框用來設(shè)置表格的行數(shù)。 “列數(shù)”文本框用來設(shè)置表格的列數(shù)。 “表格寬度”文本框用來設(shè)置表格的寬度，可以填入數(shù)值

24、，緊隨其后的下拉列表框用來設(shè)置寬度的單位，有兩個(gè)選項(xiàng)百分比和像素。當(dāng)寬度的單位選擇百分比時(shí)，表格的寬度會隨瀏覽器窗口的大小而改變。 “單元格邊距”文本框用來設(shè)置單元格的內(nèi)部空白的大小。 “單元格間距”文本框用來設(shè)置單元格與單元格之間的距離。 “邊框粗細(xì)”用來設(shè)置表格的邊框的寬度。 “頁眉”定義頁眉樣式，可以在四種樣式中選擇一種。 “標(biāo)題” 定義表格的標(biāo)題。 “對其標(biāo)題”定義表格標(biāo)題的對齊方式。 “摘要” 可以在這里對表格進(jìn)行注釋。 2、選擇單元格對象 對于表格、行、列、單元格屬性的設(shè)置是以選擇這些對象為前提的。 選擇整個(gè)表格的方法是把鼠標(biāo)放在表格邊框的任意處，當(dāng)出現(xiàn)這樣的標(biāo)志時(shí)單擊即可選中整個(gè)

25、表格，或在表格內(nèi)任意處單擊，然后在狀態(tài)欄選中<table>標(biāo)簽即可；或在單元格任意處單擊，點(diǎn)鼠標(biāo)右鍵在彈出菜單菜單中選擇“表格選擇表格” 要選中某一單元格，按住Ctrl鍵，鼠標(biāo)在需要選中的單元格單擊即可；或者，選中狀態(tài)欄中的<td>標(biāo)簽。 要選中連續(xù)的單元格，按住鼠標(biāo)左鍵從一個(gè)單元格的左上方開始向要連續(xù)選擇單元格的方向拖動(dòng)。要選中不連續(xù)的幾個(gè)單元格，可以按住Ctrl鍵，單擊要選擇的所有單元格即可。 要選擇某一行或某一列，將光標(biāo)移動(dòng)到行左側(cè)或列上方，鼠標(biāo)指針變?yōu)橄蛴一蛳蛳碌募^圖標(biāo)時(shí)，單擊即可。 3、設(shè)置表格屬性 選中一個(gè)表格后，可以通過屬性面板更改表格屬性。 “填充”文

26、本框用來設(shè)置單元格邊距，“間距”文本框用來設(shè)置單元格間距。 “對齊”下拉列表框用來設(shè)置表格的對齊方式，默認(rèn)的對齊方式一般為左對齊。 “邊框”文本框用來設(shè)置表格邊框的寬度。 “背景顏色”文本框用來設(shè)置表格的背景顏色。 “邊框顏色”用來設(shè)置表格邊框的顏色。 在“背景圖像”文本框填入表格背景圖像的路徑，可以給表格添加背景圖像。也可以如下圖所示給文本框加上鏈接路徑。還可以單擊文本框后的“瀏覽”按鈕，查找圖像文件。在“選擇圖像源”對話框中定位并選擇要設(shè)置為背景的圖片，單擊“確認(rèn)”按鈕即可。 4、單元格屬性 把光標(biāo)移動(dòng)到某個(gè)單元格內(nèi)，可以利用單元格屬性面板對這個(gè)單元格的屬性進(jìn)行設(shè)置。 “水平”文本框用來設(shè)

27、置單元格內(nèi)元素的水平排版方式，是居左、居右或是居中。 “垂直”文本框用來設(shè)置單元格內(nèi)的垂直排版方式，是頂端對齊、底端對齊或是居中對齊。 “高”、“寬”文本框用來設(shè)置單元格的寬度和高度。 “不換行”復(fù)選框可以防止單元格中較長的文本自動(dòng)換行。 “標(biāo)題”復(fù)選框使選擇的單元格成為標(biāo)題單元格，單元格內(nèi)的文字自動(dòng)以標(biāo)題格式顯示出來。 “背景”文本框用來設(shè)置表格的背景圖像。 “背景顏色”文本框用來設(shè)置表格的背景顏色。 “邊框”文本框用來色設(shè)置表格邊框的顏色。 5、表格的行和列 選中要插入行或列的單元格，單擊鼠標(biāo)右鍵，在彈出菜單中選擇“插入行”或“插入列”或“插入行或列”命令。 如果選擇了“插入行”命令，在選

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

29、eaver 8 嵌套 表格 新浪ViVi 百度搜藏 QQ書簽 作者:未知 | 點(diǎn)擊數(shù): 467 | 時(shí)間:2008-12-4【大 中 小】 表格之中還有表格即嵌套表格。 網(wǎng)頁的排版有時(shí)會很復(fù)雜，在外部需要一個(gè)表格來控制總體布局，如果內(nèi)部排版的細(xì)節(jié)也通過總表格來實(shí)現(xiàn)，容易引起行高列寬等的沖突，給表格的制作帶來困難。其次，瀏覽器在解析網(wǎng)頁的時(shí)候，是將整個(gè)網(wǎng)頁的結(jié)構(gòu)下載完畢之后才顯示表格，如果不使用嵌套，表格非常復(fù)雜，瀏覽者要等待很長時(shí)間才能看到網(wǎng)頁內(nèi)容。 引入嵌套表格，由總表格負(fù)責(zé)整體排版，由嵌套的表格負(fù)責(zé)各個(gè)子欄目的排版，并插入到總表格的相應(yīng)位置中，各司其職，互不沖突。 另外，通過嵌套表格，利用

30、表格的背景圖像、邊框、單元格間距和單元格邊距等屬性可以得到漂亮的邊框效果，制作出精美的音畫貼圖網(wǎng)頁。 創(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)?，單元格間距為0，單元格邊距為12像素。背景圖像選擇beij/002.gif。 3、將光標(biāo)放置在表格二內(nèi)，插入表

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

32、我們選擇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è)簡單的網(wǎng)頁了，很有成就感吧_ 不過，一個(gè)優(yōu)秀的網(wǎng)站應(yīng)該不僅僅是由文字和圖片組成的，而是動(dòng)態(tài)的、多媒體。為了增強(qiáng)網(wǎng)頁的表現(xiàn)力，豐富文檔的顯示效果，我們可以向其Flash動(dòng)畫、Java小程序、音頻 播放插件等多媒體內(nèi)容。 一、插入Flash動(dòng)畫 1、插入Flash 為了合理的

33、安排這一課的頁面元素，在插入Flash動(dòng)畫之前，讓我們先來復(fù)習(xí)一下表格布局吧_ 打開03.html，設(shè)置頁面屬性，在彈出的“頁面屬性”對話框中，“外觀”項(xiàng)設(shè)置字體為“宋體”，字號為16px，文本顏色為#F282A8，背景圖像為img/008.JPG，上邊距為50px、下、左、右的邊距都為0。 “鏈接”項(xiàng)選擇始終無下劃線，鏈接顏色為#F282A8，已訪問鏈接為#F5E458。 現(xiàn)在我們開始布局_ （1）插入一個(gè)1行1列的表格（表格1），表格的寬度為726px，邊框粗細(xì)為0，單元格邊距為0、單元格間距為1，背景顏色為#892321，將表格居中對齊。 （2） 插入一個(gè)3行2列的表格（表格2），表格的

34、寬度為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，將表格居中對齊。第一行高度為15，其余各行高度都為40。 (4) 在表格2右側(cè)單元格插入一個(gè)1行2列的表格（表格4），表格寬度

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

36、可以選擇Flash影片的畫質(zhì)，以最佳狀態(tài)顯示，就選擇“高品質(zhì)”。 “對齊”下拉列表用來設(shè)置Flash動(dòng)畫的對齊方式， 為了使頁面的背景在Flash下能夠襯托出來，我們可以使Flash的背景變?yōu)橥该?。單擊屬性面板中的“參?shù)”按鈕，打開“參數(shù)”對話框，設(shè)置參數(shù)為wmode，值為transparent。 這樣在任何背景下，F(xiàn)lash動(dòng)畫都能實(shí)現(xiàn)透明背景的顯示。 2、插入Flash文本 我們將光標(biāo)放置在表格3第二行的單元格中，用Flash文本制作導(dǎo)航欄目。單擊常用快捷欄的媒體按鈕，在列表中選擇Flash文本，彈出“插入Flash文本”對話框，字體隨意，大小22px，顏色設(shè)置為#F5E458，轉(zhuǎn)滾顏色為

37、#54C994，文本為“圖片素材”，背景顏色#6DCFF6，選擇自己需要的路徑鏈接。同樣方法我們分別在表格3的第3、4、5、6行制作“代碼素材”、“Flash動(dòng)漫”、“精美壁紙”和“音頻視頻”等欄目。 3、插入Flash按鈕 我們在將光標(biāo)放置于插入Flash按鈕的位置，單擊常用快捷欄的媒體按鈕，在列表中選擇Flash按鈕，彈出“插入Flash按鈕”對話框。 “樣式”用來選擇按鈕的外觀，“按鈕文本”用來輸入按鈕上的文字，“字體”和“大小”用于設(shè)置按鈕上文字的字體和大小，字號變大，按鈕并不會跟著改變。 “鏈接”用于輸入按鈕的鏈接，可以是外部鏈接，也可以是內(nèi)部鏈接?！澳繕?biāo)”用來設(shè)置打開的鏈接窗口。

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

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

40、8-12-4【大 中 小】 聲音能極好的烘托網(wǎng)頁頁面的氛圍，網(wǎng)頁中常見的聲音格式有WAV、MP3、MIDI、AIF、RA、或Real Audio格式。 1、添加背景音樂 在頁面中可以嵌入背景音樂。這種音樂多以MP3，MIDI文件為主，在DW中，添加背景音樂有兩種方法，一種是通過手寫代碼實(shí)現(xiàn)，還有一種是通過行為實(shí)現(xiàn)。 在HTML語言中，通過<BGSOUNG>這個(gè)標(biāo)記可以嵌入多種格式的音樂文件，具體步驟是： 我們將01.mid音樂文件存放在med文件夾里。 打開03.html網(wǎng)頁，我們?yōu)檫@個(gè)頁面添加背景音樂 切換到DW的“拆分”視圖，講光標(biāo)定位到</body>之前的位置，在

41、光標(biāo)的位置寫下下面這段代碼：<bgsound srcmed/01.mid>，如下圖所示。 按下F12鍵，在瀏覽器中查看效果，我們可以聽見背景音樂聲。 如果希望循環(huán)播放音樂，將剛才的源代碼修改為以下代碼即可： <bgsound src=med/01.mid loop=true> 2、嵌入音樂 嵌入音頻可以將聲音直接插入頁面中，但只有瀏覽者在瀏覽網(wǎng)頁時(shí)具有所選聲音文件的適當(dāng)插件后，聲音才可以播放。如果希望在頁面顯示瀏覽器的外觀，可以使用這種方法。 打開02.html網(wǎng)頁，將光標(biāo)放置于我們想要顯示播放器的位置。 單擊快捷欄上的“媒體”按鈕，從下拉列表中選擇“插件”。 彈出“選

42、擇文件”對話框，在對話框中02.war音頻文件。 單擊確定按鈕后，插入的插件在文檔窗口中以下圖所示圖標(biāo)來顯示。 選中該圖標(biāo)，在屬性面板中可以對播放器的屬性進(jìn)行設(shè)置： 要實(shí)現(xiàn)循環(huán)播放音樂的效果，單擊屬性面板中的“參數(shù)”按鈕，然后單擊“”按鈕，在“參數(shù)”列中輸入loop，并在“值”列中輸入true后，單擊“確定”按鈕。 要實(shí)現(xiàn)自動(dòng)播放，可以繼續(xù)編輯參數(shù)，在參數(shù)對話框的“參數(shù)”列中輸入autostart，并在值中輸入true，單擊“確定”按鈕。 按下F12鍵，打開瀏覽器預(yù)覽，這個(gè)頁面實(shí)現(xiàn)了嵌入音樂的效果，在瀏覽器里顯示了播放插件。 dreamweaver8.0入門圖文教程:創(chuàng)建鏈接關(guān)系 新浪ViVi

43、 百度搜藏 QQ書簽 作者:未知 | 點(diǎn)擊數(shù): 366 | 時(shí)間:2008-12-4【大 中 小】 鏈接是一個(gè)網(wǎng)站的靈魂，一個(gè)網(wǎng)站是由多個(gè)頁面組成的，而這些頁面之間依據(jù)鏈接確定相互之間的導(dǎo)航關(guān)系。 超級鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁之間、站點(diǎn)與Web之間的鏈接關(guān)系，它可以使站點(diǎn)內(nèi)的網(wǎng)頁成為有機(jī)的整體，還能夠使不同站點(diǎn)之間建立聯(lián)系。超級鏈接由兩部分組成：鏈接載體和鏈接目標(biāo)。 許多頁面元素可以作為鏈接載體，如：文本、圖像、圖像熱區(qū)、動(dòng)畫等。而鏈接目標(biāo)可以是任意網(wǎng)絡(luò)資源，如：頁面、圖像、聲音、程序、其他網(wǎng)站、Email甚至是頁面中的某個(gè)位置 - 錨點(diǎn)。 鏈接的類型 如果按鏈接目標(biāo)分類，可以將超級鏈接分為以下

44、幾種類型： * 內(nèi)部鏈接：同一網(wǎng)站文檔之間的鏈接。 * 外部鏈接：不同網(wǎng)站文檔之間的鏈接。 * 錨點(diǎn)鏈接：同一網(wǎng)頁或不同網(wǎng)頁中指定位置的鏈接。 * E-mail鏈接：發(fā)送電子郵件的鏈接。 1、關(guān)于鏈接路徑 絕對路徑，為文件提供完全的路徑，包括適用的協(xié)議，例如http、ftp，rtsp等。 / 相對路徑，相對路徑最適合網(wǎng)站的內(nèi)部鏈接。如果鏈接到同一目錄下，則只需要輸入要鏈接文件的名稱。要鏈接到下一級目錄中的文件，只需要輸入目錄名。然后輸入“/“，再輸入文件名。如鏈接到上一級目錄中的文件，則先輸入”./“再輸入目錄名，文件名。 根路徑：是指從站點(diǎn)根文件夾到被鏈接

45、文檔經(jīng)由的路徑，以前斜杠開頭，例如， /fy/maodian.html就是站點(diǎn)根文件夾下的fy子文件夾中的一個(gè)文件（maodian.html ）的根路徑。 2、創(chuàng)建外部鏈接 不論是文字還是圖像，都可以創(chuàng)建鏈接到絕對地址的外部鏈接。創(chuàng)建鏈接的方法可以直接輸入地址也可以使用超級鏈接對話框。 （1）直接輸入地址 打開02.html頁面，輸入并選中文字“閃客啟航網(wǎng)頁技術(shù)區(qū)”。 在屬性面板中，“鏈接”用來設(shè)置圖像或文字的超鏈接，“目標(biāo)”用來設(shè)置打開方式。 我們在“鏈接”文本框直接輸入外部絕對地 ，在“目標(biāo)”項(xiàng)的下拉列表中選擇_blank（在一個(gè)新的未命名的瀏覽器窗口中打開鏈接）。如下圖所示。 （2）使用

46、超級鏈接對話框 打開03.html頁面，選中文字“閃客啟航”。 單擊常用快捷欄中的“超級鏈接”按鈕。 彈出“超級鏈接”對話框，我們進(jìn)行以下各項(xiàng)的設(shè)置： “文本”文本框用來設(shè)置超級鏈接顯示的文本。 “鏈接”用來設(shè)置超鏈接連接到的路徑。 “目標(biāo)”下拉列表框用來設(shè)置超鏈接的打開方式，有四個(gè)選項(xiàng)。 “標(biāo)題”文本框用來設(shè)置超鏈接的標(biāo)題。 設(shè)置好后，單擊“確定”按鈕，向網(wǎng)頁中插入超鏈接。 3、創(chuàng)建內(nèi)部鏈接 在文檔窗口選中文字，單擊屬性面板“鏈接”后的 選擇要鏈接到的網(wǎng)頁文件，即可鏈接到這個(gè)網(wǎng)頁。 按鈕，彈出“選擇文件”對話框， 我們也可以拖動(dòng)“鏈接”后的按鈕到站點(diǎn)面板上的相應(yīng)網(wǎng)頁文件，則鏈接將指向這個(gè)網(wǎng)頁

47、文件。 此外，我們還可以直接將相對地址輸入到“鏈接”文本框里來鏈接一個(gè)頁面。 4、創(chuàng)建Email鏈接 單擊常用快捷欄中的“電子郵件鏈接”按鈕，彈出“電子郵件鏈接”對話框，在對話框的文本框那輸入要鏈接的文本，然后在Email文本框內(nèi)輸入郵箱地址即可。 5、創(chuàng)建錨點(diǎn)鏈接 所謂錨點(diǎn)鏈接，是指在同一個(gè)頁面中的不同位置的鏈接。 打開一個(gè)頁面較長的網(wǎng)頁，將光標(biāo)放置于要插入錨點(diǎn)的地方，單擊常用快捷欄的“命名錨記”按鈕，插入錨點(diǎn)。再選中需要鏈接錨點(diǎn)的文字，再屬性面板中拖動(dòng)鏈接后的到錨點(diǎn)上即可。 6、制作圖像映射 打開03.html文件，選中102。gif圖片，在屬性面板中，有不同形狀的圖像熱區(qū)按鈕，選擇一個(gè)熱

48、區(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)在，請發(fā)揮你的想象力，巧妙運(yùn)用各種頁面元素來豐富你的網(wǎng)頁，把它裝扮的更加生 動(dòng)和精彩！ dreamweaver8.0入門圖文教程:創(chuàng)建CSS樣式 新浪ViVi 百度搜藏 QQ書簽 作者:未知 | 點(diǎn)擊數(shù): 526 | 時(shí)間:2008-12-4【大 中 小】 層疊樣式表 (CSS) 是一系列格式設(shè)置規(guī)則，它們控制 Web 頁面內(nèi)容的外觀。使用 CSS 設(shè)置頁面格式時(shí)，內(nèi)容與表現(xiàn)形式是相互分開的。頁面內(nèi)容（HTML 代碼）位于自

49、身的 HTML 文件中，而定義代碼表現(xiàn)形式的 CSS 規(guī)則位于另一個(gè)文件（外部樣式表）或 HTML 文檔的另一部分（通常為 <head> 部分）中。使用 CSS 可以非常靈活并更好地控制頁面的外觀，從精確的布局定位到特定的字體和樣式等。 術(shù)語“層疊”是指對同一個(gè)元素或 Web 頁面應(yīng)用多個(gè)樣式的能力。例如，可以創(chuàng)建一個(gè) CSS 規(guī)則來應(yīng)用顏色，創(chuàng)建另一個(gè)規(guī)則來應(yīng)用邊距，然后將兩者應(yīng)用于一個(gè)頁面中的同一文本。所定義的樣式“層疊”到您的 Web 頁面上的元素，并最終創(chuàng)建您想要的設(shè)計(jì)。 CSS樣式表的創(chuàng)建，可以統(tǒng)一定制網(wǎng)頁文字的大小、字體、顏色、邊框、鏈接狀態(tài)等效果。在Dreamweav

50、er 8中CSS樣式的設(shè)置方式有了很大的改進(jìn)，更為方便、實(shí)用、快捷。 一、創(chuàng)建CSS樣式 1、選中菜單“窗口”>“CSS樣式”。打開CSS樣式面板。 2、單擊“CSS樣式”面板右下角的“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框。 在“選擇器類型”選項(xiàng)中，可以選擇創(chuàng)建CSS樣式的方法包括以下三種： 類：我們可以在文檔窗口的任何區(qū)域或文本中應(yīng)用類樣式，如果將類樣式應(yīng)用于一整段文字，那么會在相應(yīng)的標(biāo)簽中出現(xiàn)CLASS屬性，該屬性值即為類樣式的名稱。 標(biāo)簽（重新定義特定標(biāo)簽的外觀）：重新定義HTML標(biāo)記的的默認(rèn)格式。我們可以針對某一個(gè)標(biāo)簽來定義層疊樣式表，也就是說定義的層疊樣式表將只應(yīng)

51、用于選擇的標(biāo)簽。例如，我們?yōu)?lt;body>和</body>標(biāo)簽定義了層疊樣式表，那么所有包含在<body>和</body>標(biāo)簽的內(nèi)容將遵循定義的層疊樣式表。 高級（ID、偽類選擇器等）：為特定的組合標(biāo)簽定義層疊樣式表，使用ID作為屬性，以保證文檔具有唯一可用的值。高級樣式是一種特殊類型的樣式，常用的有4種： a:link 設(shè)定正常狀態(tài)下鏈接文字的樣式。 a:active 設(shè)定鼠標(biāo)單擊時(shí)鏈接的外觀。 a:visited 設(shè)定訪問過的鏈接的外觀。 a:hover 設(shè)定鼠標(biāo)放置在鏈接文字之上時(shí)，文字的外觀。 3、為新建CSS樣式輸入或選擇名稱、標(biāo)記或選擇

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

53、中設(shè)置CSS樣式。 5、“CSS規(guī)則定義”對話框中設(shè)置CSS規(guī)則定義。主要分為類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展8項(xiàng)。每個(gè)選項(xiàng)都可以對所選標(biāo)簽做不同方面的定義， 可以根據(jù)需要設(shè)定。定義完畢后，單擊“確定”按鈕，完成創(chuàng)建CSS樣式。 dreamweaver8使用CSS樣式美化頁面 新浪ViVi 百度搜藏 QQ書簽 作者:佚名 | 點(diǎn)擊數(shù): 318 | 時(shí)間:2008-12-5【大 中 小】 在“CSS規(guī)則對話框”中，我們可以通過類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展項(xiàng)的設(shè)置，來美化我們的頁面，當(dāng)然啦，我們在定義某個(gè)CSS樣式的時(shí)候，不需要對每一個(gè)項(xiàng)都進(jìn)行設(shè)置，需要什么效果，選擇相應(yīng)的項(xiàng)進(jìn)行設(shè)置就可以了。 1、文本樣式的設(shè)置 新建CSS樣式, “選擇器類型”為類，名稱為 “style1”定義在“僅對該文檔”。保存至站點(diǎn)根目錄下的CSS文件夾內(nèi)，彈出“CSS規(guī)則定義”對話框，默認(rèn)顯示的就是對文本進(jìn)行設(shè)置的“類型”項(xiàng)。 字體：可以在下拉菜單種選擇相應(yīng)的字體。 大?。捍笮【褪亲痔?，可以直接填入數(shù)字，然后選擇單位。 樣式：設(shè)置文字的外觀，包括正常、斜體、偏斜體。 行高：這項(xiàng)設(shè)置在網(wǎng)頁制作種很常用。設(shè)置行高，可以選擇“正?！?，讓計(jì)算機(jī)自動(dòng)調(diào)整行高，也可以使用數(shù)值和單位結(jié)合的形式自行設(shè)置。需要注意的是，單位應(yīng)該和文字的單位一致，行高的數(shù)值是包括字號數(shù)值在內(nèi)的。例如，文

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論