1、2020/7/25,1,本章知識(shí)點(diǎn)和技能點(diǎn)：,CSS樣式、模板的創(chuàng)建與應(yīng)用 站點(diǎn)管理，進(jìn)行檢查超級(jí)鏈接、清理無(wú)用文件等 Dreamweaver、Fireworks、Flash三者的連用,2020/7/25,2,10.1CSS樣式表,CSS（Cascading Style Sheet）即層疊樣式表，是現(xiàn)在被廣泛使用的格式控制技術(shù)。層疊樣式表的功能非常強(qiáng)大，可以將其定義在HTML的TAG（標(biāo)簽）里，也可以存儲(chǔ)為一個(gè)獨(dú)立的.CSS文件做為鏈接文件。 一個(gè)樣式表文件可以作用于多個(gè)頁(yè)面，甚至整個(gè)站點(diǎn)，因此具有很好的易用性和擴(kuò)展性，它可以精確地控制頁(yè)面中的每一個(gè)元素,2020/7/25,3,網(wǎng)頁(yè)編輯器內(nèi)設(shè)

2、置的頁(yè)面和瀏覽器中顯示的頁(yè)面實(shí)際效果往往有所差異，即使同一頁(yè)面由于使用不同的瀏覽器或由于設(shè)置不同的分辨率，最終效果也都不同，這樣設(shè)計(jì)者就很難讓頁(yè)面按自己的意愿精確布局，即便是掌握HTML語(yǔ)言精髓的人也要通過(guò)多次地測(cè)試，才能駕馭好這些信息的排版。 樣式表可以解決這樣的問(wèn)題，使頁(yè)面完全按照制作者的設(shè)想顯示。我們可以通過(guò)它對(duì)網(wǎng)頁(yè)上元素進(jìn)行精確的定位，輕易地控制文字、圖片等各種對(duì)象。內(nèi)容結(jié)構(gòu)和格式控制相分離，使得網(wǎng)頁(yè)可以只由內(nèi)容構(gòu)成，而將所有網(wǎng)頁(yè)的格式控制指向某個(gè)CSS樣式表文件，其好處表現(xiàn)在以下兩個(gè)方面：,2020/7/25,4,簡(jiǎn)化了網(wǎng)頁(yè)的格式代碼，外部的樣式表會(huì)被瀏覽器保存在緩存里，加快了下載顯

3、示的速度，也減少了需要上傳的代碼數(shù)量（因?yàn)橹貜?fù)設(shè)置的格式只被保存一次）。 只要修改保存網(wǎng)站格式的CSS樣式表就可以改變整個(gè)站點(diǎn)的風(fēng)格特色。在修改頁(yè)面數(shù)量龐大的站點(diǎn)時(shí)非常有用。 使用樣式表可以靈活地控制頁(yè)面的布局和顯示。CSS樣式表的類型主要有： 外部樣式：當(dāng)多個(gè)頁(yè)面文件具有相同的樣式時(shí)，可以將CSS樣式保存為獨(dú)立的文件，所有頁(yè)面文件可共享該樣式文件。 嵌入式樣式：通過(guò)標(biāo)記符，可將樣式信息作為文檔的一部分用于HTML。 內(nèi)聯(lián)式樣式：只包含在與它有關(guān)的標(biāo)記內(nèi)，對(duì)頁(yè)面上其他的標(biāo)記不起作用。,2020/7/25,5,10.1.1外部樣式表,通過(guò)Dreamweaver的CSS樣式面板可以很方便地創(chuàng)建和編

4、輯樣式表。 1.創(chuàng)建外部樣式表 這里我們以創(chuàng)建超級(jí)鏈接的樣式為例說(shuō)明CSS樣式表的創(chuàng)建過(guò)程。超級(jí)鏈接的樣式定義超級(jí)鏈接的四種狀態(tài)，分別為：a:link 定義鏈接普通狀態(tài)的顯示樣式。a:visited 定義被訪問(wèn)的鏈接的顯示樣式。a:hover 定義將鼠標(biāo)置于超級(jí)鏈接之上的顯示樣式。a:active 定義超級(jí)鏈接即將點(diǎn)擊時(shí)的顯示樣式。 默認(rèn)的超級(jí)鏈接有下劃線，此處我們將去掉下劃線，并重新定義超級(jí)鏈接四個(gè)狀態(tài)的樣式，具體操作過(guò)程如下：,2020/7/25,6,步驟1：打開(kāi)xiangce.htm，單擊左側(cè)框架區(qū)域，執(zhí)行【窗口】【CSS樣式】命令打開(kāi)left.htm文件的樣式面板，如圖所示。,2020

5、/7/25,7,步驟2：?jiǎn)螕魳邮矫姘宓撞康?新增樣式按鈕，彈出“新建CSS樣式”對(duì)話框，設(shè)置“選擇器類型”為高級(jí)，在“選擇器”的下拉列表中選擇“a:link”，“定義在”設(shè)置為“新建樣式表文件”，“新建CSS樣式”對(duì)話框的設(shè)置如圖所示。然后單擊【確定】按鈕。,2020/7/25,8,步驟3：進(jìn)入如圖所示的“保存樣式表文件為”對(duì)話框，選擇路徑、命名為mystyle，然后單擊【保存】按鈕。,2020/7/25,9,步驟4：進(jìn)入“CSS樣式定義”對(duì)話框。該對(duì)話框左側(cè)共有8類選項(xiàng)，選擇其中一類，右側(cè)會(huì)出現(xiàn)相應(yīng)的選項(xiàng)，在此定義樣式的具體格式。此處不希望鏈接對(duì)象出現(xiàn)下劃線，可將“修飾”設(shè)置為“無(wú)”，其他設(shè)

6、置如圖所示。單擊【確定】按鈕完成a:link狀態(tài)的樣式定義。,2020/7/25,10,步驟5：定義鏈接a:visited狀態(tài)的樣式。單擊樣式面板底部的 編輯樣式按鈕，彈出如圖1所示的“編輯樣式表”對(duì)話框。在“編輯樣式表”對(duì)話框中單擊【新建】按鈕也可進(jìn)入“新建CSS樣式”對(duì)話框，設(shè)置“選擇器類型”為高級(jí)，“選擇器”設(shè)置為“a:visited”，“定義在”選擇為第3步中創(chuàng)建的外部樣式文件mystyle.css，單擊【確定】按鈕進(jìn)入“CSS樣式定義”對(duì)話框，進(jìn)行如圖2所示的設(shè)置。單擊【確定】按鈕完成a:visited狀態(tài)的樣式定義。,2020/7/25,11,步驟6：按照上述步驟分別設(shè)置a:hov

7、er狀態(tài)和a:active狀態(tài)的樣式定義。字體、大小、修飾效果都不變，只改變字體的顏色，a:hover狀態(tài)字體顏色為#FF33CC，a:active狀態(tài)字體顏色為#000000。設(shè)置超級(jí)鏈接樣式后的CSS面板如圖所示。,2020/7/25,12,步驟7：保存后預(yù)覽效果，超級(jí)鏈接將無(wú)下劃線，如圖所示。,2020/7/25,13,2.應(yīng)用外部樣式表,我們以在quwen.htm文檔中引用已經(jīng)編輯好的mystyle.css樣式文件為例進(jìn)行介紹，具體操作過(guò)程如下： 步驟1：打開(kāi)quwen.htm，選擇【窗口】【CSS樣式】命令打開(kāi)樣式面板。 步驟2：?jiǎn)螕魳邮矫姘宓撞康?附加樣式表按鈕，或在樣式面板中右擊

8、從彈出的菜單中選擇“附加樣式表”，都可打開(kāi)如圖所示的對(duì)話框，通過(guò)【瀏覽】按鈕選擇樣式表文件，然后單擊【確定】按鈕即可。,2020/7/25,14,注意：導(dǎo)入外部樣式表與鏈接外部樣式表的不同在于：無(wú)論該網(wǎng)頁(yè)是否應(yīng)用了CSS樣式表，其都將讀取樣式表；鏈接樣式表則在該網(wǎng)頁(yè)應(yīng)用CSS樣式表時(shí)才去讀樣式表。import導(dǎo)入的樣式表優(yōu)先級(jí)較高，當(dāng)在文檔標(biāo)記內(nèi)部定義的樣式與導(dǎo)入的樣式發(fā)生沖突，則內(nèi)部定義的樣式將不起作用。鏈接外部樣式表文件使用以下的語(yǔ)句：,2020/7/25,15,導(dǎo)入外部樣式表文件使用以下的語(yǔ)句：,2020/7/25,16,10.1.2嵌入式樣式,1.創(chuàng)建嵌入式樣式 這里我們以在新建yan

9、gshi.htm文檔中創(chuàng)建test嵌入式樣式為例進(jìn)行介紹，具體的操作過(guò)程如下： 步驟1：新建yangshi.htm，執(zhí)行【窗口】【CSS樣式】命令打開(kāi)樣式面板。 步驟2：?jiǎn)螕魳邮矫姘宓撞康?新增樣式按鈕，彈出“新建CSS樣式”對(duì)話框，設(shè)置“選擇器類型”為“類”，“名稱”為“.test”，“定義在”設(shè)置為“僅對(duì)該文檔”，然后單擊【確定】按鈕。 步驟3：進(jìn)入“.test CSS樣式定義”對(duì)話框，分別進(jìn)行“類型”和“背景”選項(xiàng)的設(shè)置。然后單擊【確定】按鈕完成test內(nèi)部樣式義。,2020/7/25,17,步驟4：切換到“代碼”視圖下，查看嵌入式樣式的語(yǔ)句，在中包含如下語(yǔ)句：,2020/7/25,18

10、,2.應(yīng)用嵌入式樣式 步驟1：打開(kāi)yangshi.htm，輸入文字“動(dòng)物的天堂、動(dòng)物的世界！”，如圖（a）所示，選中文字。 步驟2：在其屬性面板的“樣式”選項(xiàng)中選擇創(chuàng)建的test樣式，即可應(yīng)用樣式，如圖（b）所示。,2020/7/25,19,注意：,應(yīng)用嵌入式樣式時(shí)的語(yǔ)句為：動(dòng)物的天堂、動(dòng)物的世界！,2020/7/25,20,10.1.3內(nèi)聯(lián)式樣式,我們以在yangshi.htm文檔中創(chuàng)建段落標(biāo)記的內(nèi)聯(lián)式樣式為例進(jìn)行介紹，具體的操作過(guò)程如下： 步驟1：打開(kāi)yangshi.htm，在文檔窗口中輸入“歡迎來(lái)到動(dòng)物天堂之門！”，并將其選中。 步驟2：?jiǎn)螕粑臋n工具欄中的顯示代碼視圖按鈕 ，切換到代碼視

11、圖下 。在選中的文本處輸入以下代碼:歡迎來(lái)到動(dòng)物天堂之門！ 步驟3：?jiǎn)螕粑臋n工具欄中的設(shè)計(jì)視圖按鈕 ，查看樣式效果，如圖所示。,2020/7/25,21,10.2 模板,Dreamweaver提供了模板功能，可以一次更新多個(gè)頁(yè)面。 修改模板后，所有基于該模板創(chuàng)建的文檔會(huì)立即更新。 創(chuàng)建模板時(shí)，必須指定可編輯區(qū)。,2020/7/25,22,10.2.1 創(chuàng)建模板,既可以從新建的文檔中創(chuàng)建模板，也可以將現(xiàn)有的文檔保存為模板。下面我們以將首頁(yè)保存為模板為例進(jìn)行介紹，具體操作過(guò)程如下： 步驟1：打開(kāi)index.htm。 步驟2：定義可編輯區(qū)域。將光標(biāo)置于需要添加可編輯區(qū)域的地方，單擊【插入】【模板對(duì)象

12、】【可編輯區(qū)域】命令，或單擊“常用”插入欄中的 插入可編輯區(qū)按鈕，彈出如圖所示的“新建可編輯區(qū)”對(duì)話框，在名稱文本框中輸入可編輯區(qū)域的名稱edit1，然后單擊【確定】按鈕，這樣就新建了一個(gè)名為edit1的可編輯區(qū)。同樣再建立其他幾個(gè)可編輯區(qū)，創(chuàng)建可編輯區(qū)的結(jié)果如圖所示。,2020/7/25,23,2020/7/25,24,步驟3：選擇【文件】【另存為模板】命令，彈出如圖所示的對(duì)話框。,2020/7/25,25,在“站點(diǎn)”選項(xiàng)的下拉列表框中列出了已定義的站點(diǎn)，選擇需要的站點(diǎn)后，在“現(xiàn)存在的模板”列表框中會(huì)顯示出該站點(diǎn)中已定義的模板，由于我們還沒(méi)有定義任何模板，所以此時(shí)顯示沒(méi)有模板。 “另存為”文

13、本框中是新建模板的名稱，默認(rèn)值是當(dāng)前頁(yè)面的文件名。設(shè)置好名稱后單擊【保存】按鈕，就可保存模板。 系統(tǒng)會(huì)自動(dòng)創(chuàng)建一個(gè)“Templates”文件夾，并將模板文件保存到這里，模板文件的擴(kuò)展名為.dwt。,2020/7/25,26,10.2.2 應(yīng)用模板,我們將利用index.dwt模板創(chuàng)建一個(gè)有關(guān)動(dòng)物知識(shí)的頁(yè)面，具體操作過(guò)程如下： 步驟1：從模板新建文件。在Dreamweaver中，執(zhí)行【文件】【新建】命令打開(kāi)新建對(duì)話框，選擇“模板”選項(xiàng)卡，如圖所示。 左側(cè)是站點(diǎn)列表，中間列出所選站點(diǎn)的模板文件，右側(cè)為選中模板的預(yù)覽效果。 選中所需的模板后，單擊【創(chuàng)建】按鈕即可新建一個(gè)基于該模板的文檔。 在新建文檔

14、的右上角顯示模板的名稱。,2020/7/25,27,2020/7/25,28,步驟2：編輯新建的文件。 除了可編輯區(qū)域，其他區(qū)域都是不可編輯的。 在可編輯區(qū)域編輯文檔，編輯后的文檔如圖所示，然后保存文檔zhishi.htm即可。,2020/7/25,29,10.2.3 更新模板,完成模板后還可以對(duì)其進(jìn)行修改，例如增加、刪除可編輯區(qū)，以及頁(yè)面布局的修改等。修改完后選擇【文件】【保存】命令,這時(shí)彈出如圖所示的對(duì)話框，詢問(wèn)是否更新站點(diǎn)中所有應(yīng)用該模板的頁(yè)面。,2020/7/25,30,單擊【更新】按鈕進(jìn)入如圖所示的“更新頁(yè)面”對(duì)話框。,2020/7/25,31,也可以利用資源面板來(lái)創(chuàng)建、編輯或更新模

15、板。執(zhí)行【窗口】【資源】命令，打開(kāi)資源面板，在左側(cè)列表中單擊 按鈕，然后在面板的菜單選項(xiàng)中選擇相應(yīng)的操作，即可進(jìn)行模板的創(chuàng)建、編輯和更新等，如圖所示。,2020/7/25,32,10.3 站點(diǎn)管理,站點(diǎn)管理的主要內(nèi)容包括： 站點(diǎn)內(nèi)文件及文件夾的管理 網(wǎng)頁(yè)鏈接的管理 文件的上傳和下載等。 可以利用站點(diǎn)窗口進(jìn)行網(wǎng)站的管理。,2020/7/25,33,10.3.1 站點(diǎn)地圖,1.查看站點(diǎn)地圖 所謂的站點(diǎn)地圖，是指由系統(tǒng)自動(dòng)按網(wǎng)頁(yè)之間的鏈接關(guān)系生成的一個(gè)示意圖，從而使整個(gè)網(wǎng)站的組織一目了然。 要查看站點(diǎn)地圖，可在站點(diǎn)窗口中執(zhí)行【查看】【站點(diǎn)地圖】命令，或單擊工具欄中的 站點(diǎn)地圖按鈕。 “動(dòng)物天堂”網(wǎng)站

16、的站點(diǎn)地圖如圖所示，站點(diǎn)地圖顯示在站點(diǎn)窗口的左側(cè)，頁(yè)面左側(cè)有 符號(hào)的，說(shuō)明該頁(yè)面中還有鏈接頁(yè)面，單擊 可以展開(kāi)這些鏈接。,2020/7/25,34,圖示的站點(diǎn)地圖是以頁(yè)面文件名顯示的。通過(guò)執(zhí)行【查看】【顯示頁(yè)面標(biāo)題】命令，站點(diǎn)地圖可以按頁(yè)面標(biāo)題顯示。,2020/7/25,35,2.修改站點(diǎn)的布局,執(zhí)行【查看】【布局】命令，在彈出的對(duì)話框中可以設(shè)置站點(diǎn)地圖的布局，如圖所示。此處將列數(shù)設(shè)置為4，結(jié)果如上圖所示。,2020/7/25,36,10.3.2 文件及文件夾的整理,在站點(diǎn)窗口中可以方便地進(jìn)行新建、刪除、修改和更新網(wǎng)頁(yè)鏈接，以及檢查整個(gè)站點(diǎn)中的鏈接等操作。下面介紹檢查整個(gè)站點(diǎn)范圍內(nèi)的鏈接，然后

17、刪除無(wú)用文件（指沒(méi)有鏈接的文件）。 步驟1：在“動(dòng)物天堂”網(wǎng)站的站點(diǎn)窗口中，執(zhí)行【站點(diǎn)】【檢查站點(diǎn)范圍的鏈接】命令，打開(kāi)結(jié)果面板中的“鏈接檢查器”選項(xiàng)，如圖所示。此處可以檢查斷掉的鏈接、外部鏈接以及沒(méi)有鏈接的文件。 步驟2：在“顯示”下拉列表中選擇“孤立文件”選項(xiàng)，按住Shift鍵選擇文件框中的所有文件，然后按Delete鍵刪除無(wú)用的文件。,2020/7/25,37,2020/7/25,38,10.4 綜合技術(shù)應(yīng)用,經(jīng)過(guò)前面的章節(jié)學(xué)習(xí)，我們已經(jīng)掌握了Macromedia公司推出網(wǎng)頁(yè)三劍客的基本使用方法。他們各有側(cè)重，只有以Dreamweaver為核心綜合運(yùn)用Fireworks及Flash，才能

18、充分發(fā)揮出Macromedia網(wǎng)頁(yè)三劍客的功能。,2020/7/25,39,10.4.1 Dreamweaver與Fireworks的綜合應(yīng)用,可以在Dreamweaver中直接啟動(dòng)Fireworks并使用Fireworks的工具對(duì)圖片進(jìn)行深層次的修改，返回到Dreamweaver中時(shí)，頁(yè)面中的圖形會(huì)自動(dòng)更新。以修改index.htm文件中的Logo圖標(biāo)為例進(jìn)行介紹，操作過(guò)程如下： 步驟1：在Dreamweaver打開(kāi)index.htm文件，選中Logo圖標(biāo)后，單擊其屬性面板中的 按鈕 步驟2：系統(tǒng)自動(dòng)啟動(dòng)Fireworks，彈出如圖所示的對(duì)話框，單擊【使用此文件】按鈕后，打開(kāi)logo.gif

19、文件，如圖所示。,2020/7/25,40,(a)修改前 (b)修改后,2020/7/25,41,步驟3：在Fireworks中編輯好logo.gif，如圖（b）所示，然后單擊【完成】按鈕即可返回Dreamweaver中，同時(shí)更新Logo圖標(biāo),如圖所示。,2020/7/25,42,10.4.2 Dreamweaver與Flash的的綜合應(yīng)用,眾所周知，在當(dāng)今網(wǎng)頁(yè)制作上Flash動(dòng)畫的廣泛使得網(wǎng)頁(yè)變得更加生動(dòng)活潑，從而給瀏覽者以賞心悅目的感覺(jué)。與其它傳統(tǒng)的動(dòng)畫制作軟件相比，F(xiàn)lash除具有矢量圖的基本特征外，還更好地融合了音、視頻等多媒體技術(shù)及交互功能，而且由于它本身是由Macromedia公司所開(kāi)發(fā)，因此它能更好地與Dreamweaver相兼容，現(xiàn)在已經(jīng)受到了專業(yè)人士及網(wǎng)頁(yè)制作發(fā)燒友的普遍青睞。 以修改index.htm文件中的Banner動(dòng)畫為例進(jìn)行介紹，操作過(guò)程如下：,2020/7/25,43,步驟1：在Dreamweaver打開(kāi)index.htm文件，選中Banner動(dòng)畫后，單擊其屬性面板中的 按鈕。 步驟2：系統(tǒng)自動(dòng)啟動(dòng)Flash，彈出如圖所示的對(duì)話框，選擇Flash動(dòng)畫的原始文件banner.f