《Dreamweaver 課件PPT》由會員分享，可在線閱讀，更多相關(guān)《Dreamweaver 課件PPT（104頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、網(wǎng)頁設(shè)計經(jīng)典教程主講 段玲 第一章 萬維網(wǎng)和網(wǎng)頁的基本概念萬維網(wǎng)又稱WWW和公眾信息網(wǎng)是Internet世界最為重要的成員之一。 WWW是從網(wǎng)上獲得信息的主要途徑。 萬維網(wǎng)的特點萬維網(wǎng)的信息是通過信息頁的形式體現(xiàn)的。信息頁是用HTML（超文本標(biāo)注語言）語言編寫的。（即網(wǎng)頁） 靜態(tài)網(wǎng)頁：網(wǎng)頁的內(nèi)容不會發(fā)生變化；不能實現(xiàn)和瀏覽者的交互。 動態(tài)網(wǎng)頁：是指網(wǎng)頁文件里包含了程序代碼，通過后臺數(shù)據(jù)庫與WEB服務(wù)器進行信息交互。信息頁的傳輸是采用的HTTP協(xié)議,即超文本傳輸 協(xié)議 。 客戶瀏覽信息頁必須使用客戶端軟件，即瀏覽器。如：IE，Netscape等 網(wǎng)站的設(shè)計和發(fā)布流程網(wǎng)站是有獨立域名、獨立存放空間

2、的內(nèi)容的集合，這些內(nèi)容可能是網(wǎng)頁，也可能是程序或其他文件。對網(wǎng)站進行規(guī)劃確定所創(chuàng)建的網(wǎng)站的目的及所提供的服務(wù)，從而確定站點中應(yīng)包含哪些網(wǎng)頁。設(shè)計站點的基本結(jié)構(gòu)站點的結(jié)構(gòu)是指站點內(nèi)部文件存放的排列方式。根據(jù)站點規(guī)劃確定站點框架收集素材；包括圖片、文字和聲音等內(nèi)容制作具體的網(wǎng)頁將設(shè)計的站點上傳到所選擇的遠程站點上 繼續(xù) 網(wǎng)站的站點建設(shè)什么是站點？ 站點可以看作是一系列文檔的組合，這些文檔之間通過各種鏈接關(guān)聯(lián)起來，用來管理網(wǎng)站中的各類文件。站點的優(yōu)越性： 自動更新鏈接；自動復(fù)制文件到當(dāng)前默認的站點；自動生成站點地圖等。 相關(guān)概念本地計算機：存放自己制作網(wǎng)頁的計算機。遠程計算機：是用來發(fā)布自己主頁，提

3、供給Internet上的其它使用者來瀏覽的計算機。本地站點：是指建立在本地計算機上的站點。遠程站點：上傳到遠程計算機上的站點 DR的啟動及界面介紹 DR是將多個文件集中到一個界面中一個集成軟件。它大大降低了資源的占用率。使用戶可以方便快捷的完成相關(guān)的操作。 DR除了有一般應(yīng)用程序窗口所擁有的菜單和工具欄，它的更多操作是通過各種面板完成的。有關(guān)面板的使用以后慢慢介紹。 站點的創(chuàng)建創(chuàng)建站點方法：1.創(chuàng)建一個多級的文件夾，一般要設(shè)置有一個總文件夾，在其中再創(chuàng)建一些子文件夾，用于存放不同類型的文件。如img用于存放圖片文件，audio用于存放音頻文件。2.在DR中，指定總文件夾為站點方法：1)建立一個

4、文件夾2)站點/站點管理（指定所建的文件夾為站點文件夾） 站點規(guī)劃要點1.用分級文件夾來保存文檔2.使用合理的文件名 文件名要直觀3.合理配置文檔中的資源4.將本地站點和遠程站點設(shè)置為同樣的結(jié)構(gòu)5.整個站點要有一個整體的風(fēng)格 設(shè)計站點和網(wǎng)頁的注意事項在網(wǎng)頁設(shè)計中，不能使用中文作為文件或文件夾名網(wǎng)頁中的文件命名區(qū)分大小寫每個網(wǎng)站都必須有一個主頁主頁文件一般以index.htm文件名而且必須放在站點的根文件夾下 網(wǎng)站頁面布局網(wǎng)頁的構(gòu)成網(wǎng)頁的基本內(nèi)容通常包括：標(biāo)題、標(biāo)志、頁眉、導(dǎo)航欄、主內(nèi)容區(qū)和頁腳。1.標(biāo)題是用來提示該頁面內(nèi)容的，通常顯示在IE的標(biāo)題欄。是在頁面屬性中設(shè)置的。2.網(wǎng)站的標(biāo)志：成功的

5、網(wǎng)站標(biāo)志有著獨特的形象標(biāo)識。3. Banner(橫幅廣告）：大多數(shù)網(wǎng)站的創(chuàng)建者在此設(shè)置網(wǎng)站的宗旨、宣傳口號和廣告語。4.導(dǎo)航欄：導(dǎo)航既是網(wǎng)頁設(shè)計中的重要部分，又是整個網(wǎng)站設(shè)計中的一個較獨立的部分。它通常放在頂端和左邊。5.內(nèi)容區(qū)：它是頁面設(shè)計的主體元素。6.頁腳：是頁面的底部；它用來標(biāo)注該站點所屬公司的名稱、地址、上的版權(quán)和電子信箱地址等 網(wǎng)頁的布局類型常用的有：國字型、廠字型、封面型等。 網(wǎng)頁的制作瀏覽和修改1.網(wǎng)頁文檔的創(chuàng)建在DR中進行編輯2. 文檔的保存注意1.應(yīng)將文檔保存在站點文件夾中 2.一般只要建立了站點會默認存入站點文件夾中3.網(wǎng)頁的預(yù)覽：需要在IE中4.網(wǎng)頁文件的修改：需要在D

6、R中5. 關(guān)閉文檔 視圖方式在Dreamweaver 中共有三種視圖方式。1.代碼2.設(shè)計3.代碼和設(shè)計它們之間的切換可以利用“查看”/也可以利用“查看”菜單中的視圖按鈕。 網(wǎng)頁文件的建立1.建立站點2.在站點目錄中右擊/新建文件/為該文件改名注意：網(wǎng)頁文件常用的文件類型為.htm。在更改文件名時不可更改擴展名。也可以用文件/新建/基本頁完成，但是這種方法建立的文件應(yīng)立即保存為好。 頁面的屬性設(shè)置頁面屬性包括對背景、標(biāo)題以及頁面元素的初步設(shè)置在創(chuàng)建新網(wǎng)頁時，默認的頁面總是以白色為背景，沒有背景圖像、沒有標(biāo)題。制作一個網(wǎng)頁時，一般需要先對網(wǎng)頁的頁面屬性進行設(shè)置。網(wǎng)頁的標(biāo)題是在瀏覽網(wǎng)頁時做為IE窗

7、口的標(biāo)題顯示在IE的標(biāo)題欄上。 文檔的輸入和編輯方法一：直接輸入方法二：可以從其它軟件中復(fù)制/粘貼 空格的輸入在編輯網(wǎng)頁時一般情況下只能輸入一個空格，不能輸入連續(xù)的，可以采用以下方法。將漢字的輸入方式設(shè)制為全角方式，按SPACE鍵便可連續(xù)輸入空格。用與背景顏色相同的字符來完成空格的輸入。 分段與分行回車是段落的結(jié)束標(biāo)記，當(dāng)需要分段時，只需要回車就可以。如果只需要換行而不分段，則需要同時按下SHIFT+ENTER段落間的距離要比行距大。在HTML語言的標(biāo)記中，分段為而換行的標(biāo)記為 字符格式的設(shè)置字符格式一般包括字體、字號、顏色、字形等。字符格式的設(shè)置都可以使用下面兩種方法完成：1.屬性面板2.文

8、本/如果所需要的字體字體列表中沒有則可以從“字體列表編輯”框中添加。設(shè)置字符的顏色時，最好使用屬性面板。在代碼中顏色是用十六進制數(shù)表示的。字號有17級，在“編輯/參數(shù)選擇”中可以設(shè)置各級字體的大小。要注意如何刪除已設(shè)置好的顏色。 滾動字幕的制作在網(wǎng)頁中常?？梢钥吹綕L動的字幕。制作法一：選中要滾動的文字1.插入/標(biāo)簽/marquee(這時的視圖方式自動變?yōu)樵O(shè)計/代碼視圖2.在代碼視圖中填寫需要的參數(shù)輸入marque direction=“up”,即可讓文字向上移動。方向還可用“down” ,”left”, “right” 可以使用onmouseover=“stop()”和onmouseout=“

9、start()” 注意： marquee標(biāo)簽不能放入之中。 項目符號和編號a.給段落添加項目符號和編號后，段落間的距離會變小。b.設(shè)置好項目符號和編號后，可以用屬性面板上的“項目符號”按鈕設(shè)置項目符號的形狀和編號的起始數(shù)。 面板的操作 DR的面板是浮動的，可以隨意的在屏幕上移動，也可以隱藏或關(guān)閉。如何將關(guān)閉的面板打開方法：窗口/面板的名稱如何將隱藏的面板顯示出來方法：窗口/排列面板 插入對象在網(wǎng)頁設(shè)計中，網(wǎng)頁的頁面上除了文字之外，還可以插入一些非文字性的對象。如日期，圖片等 。插入的方法都需要先定位插入點，然后可以用下面兩種插入對象：1.在“插入”面板上選擇需要的對象2.在“插入”菜單中選擇需

10、要的對象 插入水平線長度的設(shè)置有兩種方式，一種是按絕對像素長度，另一種是按屏幕的相對長度。水平線獨立成一段落 插入日期在網(wǎng)頁上設(shè)置站點發(fā)布的日期，無論是對設(shè)計者還是瀏覽者來說都會帶來方便。如果選中“存儲時自動更新”項，則每次存儲時都會自動更新插入的日期。 插入特殊符號用此功能輸入鍵盤上不能輸入的字符。 插入圖片在設(shè)計網(wǎng)頁時主要用到的有三種格式的圖像文件，它們是JPG,GIF和PNG。當(dāng)網(wǎng)頁頁面被瀏覽時，系統(tǒng)會在站點中調(diào)用所用到的圖像文件。為了確保圖像的正確瀏覽，一定要將所用到的圖像文件復(fù)制到當(dāng)前站點之中。圖片的圖文混排：在DW中圖文混排是利用對齊方式來完成的。當(dāng)圖片與文字的對齊方式設(shè)置為左對齊

11、或右對齊時可實現(xiàn)圖文混排。圖片屬性面板中的“替換（ALT)項是為圖片添加說明的。利用“屬性”面板可以設(shè)置圖像的效果，如：亮度、裁剪等。 插入圖片的注意事項在網(wǎng)頁中插入的圖片尺寸越大讀取的速度越慢，因此應(yīng)先在其它軟件中將尺寸改小。如果在DW中改變它的大小則還會改變文件的大小。如果一張圖片要用多次可以在”窗口“/資源，即利用資源面板完成。 圖像占位符圖像占位符，顧名思義就是占領(lǐng)位置的圖形。在網(wǎng)頁設(shè)計過程中，頁面中的某個位置一時沒有合適的圖片或其它的內(nèi)容，可能導(dǎo)致整個頁面的混亂，我們就可以用占位符，先占用這些圖片的位置。方法一：插入/占位符方法二：插入面板/圖像/占位符。 插入翻轉(zhuǎn)（輪換）圖片翻轉(zhuǎn)圖

12、片是指這樣當(dāng)鼠標(biāo)指針掠過一幅圖片時，它的顯示會變?yōu)榱硪环鶊D片。翻轉(zhuǎn)圖片包含了兩張圖片，一張是初始圖片另一張是替換圖片。 插入FLSH按鈕和FLSH文字 FLSH按鈕是利用內(nèi)置的FLSH按鈕和文字，可以在網(wǎng)頁上制作出有動態(tài)效果的按鈕和方字。方法：1.插入/交互式圖像/FLSH按鈕2.利用對象面板 .如果多次用到同一形式（標(biāo)注文字不同）的按鈕，必須一個一個插入，不能復(fù)制。按鈕的大小在屬性面板上修改。每插入一個FLSH按鈕就會產(chǎn)生一個“.swf”格式的文件，最好將其存在站點文件夾下。 FLASH文字只能改變顏色。 插入flash文件插入flash文件方法：插入/媒體/FLASH注意：必須事先準(zhǔn)備好類

13、型為.swf的flash文件。 表格表格是網(wǎng)頁設(shè)計中非常有用的設(shè)計工具。它不僅可以使得數(shù)據(jù)的表達更加清晰，而且在設(shè)計頁面中有著非常特殊的作用，如頁面的布局，頁面分欄等。 表格的創(chuàng)建表格的創(chuàng)建的方法：1.插入/表格2.單擊“對象”面板中的“插入表格”按鈕。3.拖動“對象”面板上的“插入表格”按鈕到需要的位置。 表格屬性的設(shè)置表格的寬度和高度有兩種設(shè)置方式，即像素數(shù)(pixels)和瀏覽器窗口的百分比數(shù)()。表格的高度一般采用自動?！斑吙颉表検怯脕碓O(shè)置表格線的寬度，默認值為1。當(dāng)邊框設(shè)為0時，表格線為虛線，在瀏覽器中不顯示。表格或單元格的背景可以是純色也可以是圖片。 選中整張表格選中表格的標(biāo)致：整

14、個表格的外邊框線為粗線。選中整張表格的方法：1.用鼠標(biāo)單擊表格的左上角2.用鼠標(biāo)單擊表格的任意一條表格線3.修改/表格/選擇表格4.將光標(biāo)定位到表格中，單擊任務(wù)欄上的標(biāo)記5.編輯/全選（ctrl+A) 關(guān)于“全選”命令該命令不同于word 中的“全選”命令，具體操作如下：1.如光標(biāo)在單元格中，則選中該單元格。2.如果已選中了單元格，則選中整張表。3.如果已選中了整張表則選中該網(wǎng)頁中的所有內(nèi)容。 選中表格和單元格選中單元格的標(biāo)致1.光標(biāo)在該單元格中閃爍;2.單元格的邊框線為粗線選擇方法：1.先單擊要選擇的單元格，然后拖動鼠標(biāo)到相鄰的單元格。2.先單擊要選擇的單元格，然后單擊狀態(tài)欄的。 單元格的拆

15、分1.選中要拆分的單元格2.單擊屬性面板上的拆分單元格按鈕 單元格的合并1.選中要合并的單元格2.單擊屬性面板上的合并單元格按鈕。 表格行、列的增加和刪除方法：1.修改/表格/2.利用右鍵3.用屬性面板改變行數(shù)和列數(shù)4.用TAB鍵 表格格式套用1.選中表格2.命令/格式化表格 單元格的復(fù)制、移動、和清除其操作與WORD相同注意：1.如果復(fù)制的是整行或整列，則會添加一行或是一列。2.編輯/清除不能刪除單元格 表格排序方法：命令/表格排序 表格在頁面布局中的應(yīng)用用表格布局頁面時常常需要與跟蹤圖配合使用。跟蹤圖常常是用其他軟件制作的。跟蹤圖的使用方法：頁面屬性/跟蹤圖 布局視圖DR有兩種視圖：標(biāo)準(zhǔn)視

16、圖和布局視圖。切換方法：對象面板中，單擊相應(yīng)的按鈕。說明：在布局視圖中，應(yīng)在選使用布局表格，才能使用布局單元格。 超級鏈接的使用超鏈接的概述超鏈接為暢游網(wǎng)絡(luò)提供了方便，是網(wǎng)頁制作中使用的比較多的一種技術(shù)。是WWW的魅力所在。使用超鏈接是為了把眾多的網(wǎng)站的網(wǎng)頁聯(lián)系起來，構(gòu)成一個有機的整體。超鏈接使用的方法就是選擇需要插入超鏈接的頁面元素，然后再設(shè)置該鏈接的URL地址。 超鏈接的分類超級鏈接有文本超級鏈接、圖像熱點的超級鏈接、Email鏈接、錨點的超級鏈接和下載文件的超級鏈接。 文本或圖像的超級鏈接首先要選定欲要創(chuàng)建鏈接的文本使用下列方法之一建立鏈接：1.用屬性面板2.用“修改/創(chuàng)建鏈接”3.利用

17、“指向文件圖標(biāo) ”創(chuàng)建鏈接例一文本的超級鏈接例二圖像的超級鏈接（返回按鈕） 熱區(qū)鏈接所謂熱區(qū)鏈接是指將一張圖片分成若干個區(qū)域，為不同的區(qū)域設(shè)置不同的鏈接或圖片說明。在創(chuàng)建超鏈接時，可以為整幅圖建立鏈接也可以為每個熱區(qū)創(chuàng)建一個鏈接。定義熱區(qū)的方法1.選中整個圖片2.選擇屬性面板上的矩形、圓形或多邊形工具3.在圖形適當(dāng)位置標(biāo)記出形狀不同的熱區(qū) 錨點的超級鏈接所謂錨點超級鏈接就是鏈接到同一個網(wǎng)頁中的不同的位置或者鏈接到另一個網(wǎng)頁的某一個位置。錨點用來標(biāo)記網(wǎng)頁中的某一個具體的位置。 創(chuàng)建錨點及錨點的超級鏈接1.在網(wǎng)頁中選擇需要插入錨點的位置2.選擇“插入/命名錨記”或在對象面板中單擊“命名錨記”按鈕。

18、3.便會在插入點上顯示錨標(biāo)記 4.如果沒有錨點顯示用“查看/可視化助理/不可見元素”設(shè)置其顯示，也可用這種方法 設(shè)置錨點隱藏。5.錨點在鏈接的引用時，同一文檔中路徑需要在錨點名前加#；不同文檔中錨點的描述應(yīng)是文檔名.htm #錨點名6.命名錨點是區(qū)分大小寫的。7.例一：報價單（同一網(wǎng)頁中和不同網(wǎng)頁中）例二：為中國地圖不同的區(qū)域設(shè)置不同的說明和鏈接。 文件下載超級鏈接當(dāng)被鏈接的文件類型不是網(wǎng)頁文件時，這時文件就會被下載。如類型為.MP3時，就為MP3下載。 創(chuàng)建E-mail鏈接E-mail鏈接的方式在很多網(wǎng)頁中都被廣泛地采用，當(dāng)瀏覽者單擊該鏈接時，系統(tǒng) 會啟動電子郵件發(fā)送程序（如Outlook

19、Express),并將網(wǎng)頁設(shè)計者的郵件地址放在收件人文本框，為瀏覽者發(fā)送郵件做好準(zhǔn)備。 創(chuàng)建E-mail鏈接的方法1.插入/電子郵件鏈接2.選中要創(chuàng)建鏈接的對象/在屬性面板的Link文本框中輸入 mailto:要鏈接的電子郵件地址 友情鏈接所謂友情鏈接是指被鏈接的對象是本站點之外的其它網(wǎng)站。創(chuàng)建方法與其它方法相同，只是鏈接的地址必須填寫被鏈接網(wǎng)站的網(wǎng)址。如要鏈接新浪鏈接地址應(yīng)為：http:/ 空鏈接和腳本鏈接空鏈接：將鏈接地址設(shè)為#腳本鏈接：將鏈接地址設(shè)為腳本，通常為：javascript:腳本代碼。如javascript:close() 其作用是關(guān)閉當(dāng)前窗口。 建立超鏈接需注意的問題1.超鏈

20、接路徑中的文件名或文件夾的名字都必須是英文的。2.目標(biāo)文件必須保存才可以鏈接成功。3.打開鏈接窗口的方式可以在“屬性面板中”用“目標(biāo)”項設(shè)定。blank 將被鏈接的文件在新的窗口中打開self 在原窗口中打開 網(wǎng)頁的自動刷新在對象面板中的“文件頭”子面板中選擇刷新 按鈕。 網(wǎng)頁的頭部文件一個HTML文件，通常由包括在和標(biāo)記間的頭部和包括在和標(biāo)記間的正文兩個部分組成。在文檔窗口中，主要顯示的是正文部分的內(nèi)容；頭部中包括很多非常重要的信息，如標(biāo)題、文檔類型等很多不可見元素，但這些元素對網(wǎng)頁的設(shè)計是很重要的。 書寫頭部的方法可在代碼中直接書寫可用對象面板中的文件頭面板編寫 網(wǎng)頁的自動刷新在瀏覽網(wǎng)頁時

21、常常需要自動轉(zhuǎn)到另一個網(wǎng)頁，這就是頭部標(biāo)記META的刷新作用。標(biāo)記格式：Meta http-equiv=“refresh”conten=“秒數(shù);URL網(wǎng)頁的URL地址”注意：1. URL必須大寫。2.網(wǎng)頁地址中的文件名必須帶有擴展名例如：meat http-equiv=“refresh”conten=“3;URL=file:/e:lx01.htm” 表單的創(chuàng)建與應(yīng)用表單技術(shù)可以實現(xiàn)瀏覽者同Internet服務(wù)器之間信息的交互傳送，它是網(wǎng)絡(luò)信息收集處理的 種重要的方式。無論是電子商務(wù)、網(wǎng)上調(diào)查、還是留言板都要求網(wǎng)頁能夠接收瀏覽者輸入的信息，而表單就是網(wǎng)站獲取用戶信息的最重要的手段之一。 創(chuàng)建表單

22、的方法創(chuàng)建表單的方法 ：1.插入/表單2.使用“表單”對象面板 注意：使用表時單必須先創(chuàng)建表單，再創(chuàng)建表單元素。當(dāng)創(chuàng)建了表單之后，在頁面上會用紅色虛線框表示表單域。這種紅色域是不能被編輯的，但會自動調(diào)整。 插入表單對象表單可以包含標(biāo)準(zhǔn)對象，如文本域、按鈕、復(fù)選框、單選框、列表和跳轉(zhuǎn)菜單等。利用表單發(fā)送的內(nèi)容:在表單“屬性”面板中的“動作”文本框中輸入：mailto:電子郵件地址，表示要將表單數(shù)據(jù)發(fā)送給相應(yīng)的電子郵箱，當(dāng)單擊“提交”按鈕后，將自動打開outlook expreese處理該郵件。 框架框架就是把網(wǎng)頁頁面劃分成相對獨立的若干區(qū)域，每個區(qū)域都相當(dāng)于一個獨立的頁面，這些頁面既各自獨立又相

23、互聯(lián)系?？蚣芗夹g(shù)是由框架集和框架兩部分組成?？蚣芗强蚣艿募?。它定義了各框架的結(jié)構(gòu)、數(shù)量、大小尺寸及裝入框架中的頁面屬性等?？蚣苁强蚣芗慕M成元素，框架的頁面是整個網(wǎng)頁頁面的一部分，它具有網(wǎng)頁所有的屬性和功能。 框架的創(chuàng)建、調(diào)整與刪除用框架技術(shù)制作的網(wǎng)頁可以將一個頁面分成上下或左右結(jié)構(gòu)的框架，把單頁面拓展成多頁面。創(chuàng)建方法1.文件/新建/框架類型2.對象面板/框架類型3.修改/框架集 框架的保存框架結(jié)構(gòu)的網(wǎng)頁制作完成后，可以分別保存每個框架文檔;也可以單獨保存框架集文檔;還可以將整個框架集與它的各個框架文檔一起保存，不同方式的操作如下：1.保存框架文檔：2.保存框架集文檔3.保存框架集中所有

24、文檔 說明：含有框架的網(wǎng)頁保存會同時存在多個.htm文件。除每個框架一個文件外，框架集還會有一個文件。 拆分框架1.單擊要拆分的框架內(nèi)部2.修改/框架3.按住ALT鍵用鼠標(biāo)拖動邊框線 調(diào)整框架1.用鼠標(biāo)拖動邊框線2.用屬性面板 刪除框架拖動邊框線 框架集的屬性設(shè)置1.選中框架集 單擊邊框線2.框架集屬性面板 默認框架屬性是無邊框線、無滾動條的。 框架屬性設(shè)置1.選中框架 按住alt鍵單擊要選中的框架的任意位置2.框架屬性：框架的名稱：它是用于超鏈接的，其名稱中只能用字母、數(shù)字、下劃線?？梢栽O(shè)置框架是否有滾動條 框架中內(nèi)容的填寫1.可以在框架中直接編輯網(wǎng)頁內(nèi)容2.將事先制作好的網(wǎng)頁文件設(shè)為源文件

25、（即設(shè)置默認顯示頁面）。A)選中該框架B)在屬性面板中填寫源文件名為欲使用的網(wǎng)頁文件路徑。 用鏈接控制框架顯示內(nèi)容1.選擇要建立超鏈接的對象2.在屬性面板中指定要鏈接的文件名3.在“目標(biāo)”欄中，選擇要顯示被鏈接文檔的框架名稱。默認為在當(dāng)前框架中顯示。 CSS樣式 CSS是英文cascading style sheet的縮寫。稱為“級聯(lián)樣式表”，也稱為層疊樣式表。 CSS是一種對文本進行格式化操作的高級技術(shù)，它從一個較高的級別上對文本進行控制。它的特點是可以對文本的格式進行精確控制，而且可以在文檔中實現(xiàn)格式的自動更新。 CSS樣式的分類嵌入式：獨立的文檔中應(yīng)用CSS樣式外部鏈接式：應(yīng)用于多個文檔

26、 ，生成專門的*.css文件。 CSS樣式引例設(shè)置超鏈接文字的格式.利用“頁面屬性”設(shè)置，查看代碼如下：可從代碼中修改代碼如下：a:hover color: #33CC00;font-family:華文彩云; 創(chuàng)建CSS樣式的方法1.用菜單在CSS樣式面板中（窗口/CSS樣式）右擊/新建說明：新建樣式的名稱必須以”.”開始樣式有三種類型，其中use CSS selector用于超鏈接的格式設(shè)置。2.套用CSS樣式：選中對象/在CSS樣式面板中右擊/套用。 幾種常見的CSS格式1.設(shè)置背景不隨文字一起滾動。CSS樣式定義框中：背景/附件/固定（設(shè)置后一定要選擇：全選/應(yīng)用）2.字的大小、添加上、

27、下劃線3.設(shè)置陰影（擴展/shadow)。 陰影的效果只對層起作用。4.動感效果（擴展/blur/)5.光暈的效果（擴展/glow)6.修改項目符號和編號的形式(列表）7.設(shè)置表格的邊框線。（邊框） 樣式文件的刪除CSS樣式面板中/選中要刪除的樣式/刪除樣式 2.用代碼設(shè)置CSS屬性在文檔的頭部內(nèi)容中插入CSS格式代碼。其格式為：查看代碼雙擊CSS樣式名。例如：設(shè)置背景不隨文字一起滾動可在頭部內(nèi)容中加入 層層是可以將頁面元素精確定位的一種新的定位技術(shù)。層內(nèi)可以放置文本、圖像、表單等元素。插入層的方法：方法1：插入/布局對象/層方法2：布局面板/層層的標(biāo)簽為Div 選擇層1.選定層的標(biāo)志是層的邊

28、框線上有黑色的方塊點。2.方法：單擊層的選擇手柄或邊線。（如果在層中單擊則只是激活層）3.選擇多個層：在選擇的同時按住SHIFT鍵。 層的屬性1.名稱2.定位3.大小4.層的疊放層次5.層顏色的填充6.可見性 層面板的使用1.打開：窗口/層2.可觀察、設(shè)置可見性和疊放層次3.可設(shè)置“防止重疊” 層的操作1.層的對齊：選中/修改/對齊2.防止層的重疊3.層與表的相互轉(zhuǎn)換：修改/轉(zhuǎn)換/ 層的應(yīng)用層和行為技術(shù)組合可以完成很多網(wǎng)頁制作中的操作如：下拉菜單、拼圖游戲等。還有一個重要應(yīng)用就是布局頁面。例利用層制作模板。 時間線所謂時間線，是DW提供的一個設(shè)計網(wǎng)頁動態(tài)運動層的工具面板，時間線通過設(shè)置不同時間

29、段的層的大小、位置和可見性等屬性可以制出動態(tài)的網(wǎng)頁動畫。 時間線創(chuàng)作動畫的基本原理把一對象在一定的時間內(nèi)，根據(jù)設(shè)計好的路徑顯示在某網(wǎng)頁頁面上，再把其它對象放置在另外的時間段內(nèi)。在時間線上顯示的每一對象就叫一幀。整條時間線就是由許多幀構(gòu)成的。當(dāng)將時間段連續(xù)播放時，則所有的幀將按照設(shè)置好的時間和顯示方式一個一個的顯示出來，一段動態(tài)效果畫面就顯示在瀏覽者面前。 相關(guān)術(shù)語1.關(guān)鍵幀：是指給某個對象指定了屬性的幀。可以自動生成兩個關(guān)鍵幀之間的過渡幀。2. FPS：是每秒播放的幀數(shù)。一般電影每秒播放27幀。 用時間線創(chuàng)建動畫1.時間線只能移動層，因此要移動的文字或圖像首先要將其放入層中。2.時間線通過改變

30、層的位置、大小、可見性以及疊放順序來創(chuàng)建動畫。 創(chuàng)建對象的移動過程1.創(chuàng)建相關(guān)的層2.打開時間線面板（窗口/時間軸）3.為時間線添加對象a.右擊時間線/添加對象b.直接拖動對象到時間線c.修改/時間軸/添加對象4.設(shè)置路徑：a.添加關(guān)鍵幀:設(shè)置關(guān)鍵幀的位置b.修改/時間軸/錄制路徑/拖動對象繪制路徑5.設(shè)置播放速度和播放方式。 在時間線上改變層的可見性在時間線上選擇一個關(guān)鍵幀打開屬性面板進行調(diào)整 事件、動作和行為的應(yīng)用行為（behaviors)顧名思義就是以某種方式完成的動作，行為是由事件（Event)和動作（action)兩部分組成的，事件是指完成某一動作的方式,如單擊、雙擊、鼠標(biāo)離開等。動

31、作是指網(wǎng)頁的一些特殊的功能，如播放音樂、顯示和隱藏層。如在右擊圖標(biāo)打開快捷菜單的行為中，右擊是事件，打開菜單是動作即行為事件動作 為對象添加行為為對象添加行為是通過行為面板完成的。打開方法：窗口/行為 具體步驟1.在合適的位置插入所有的元素2.選中要添加行為的對象3.單擊行為面板上的“”按鈕，并為該元素選擇一個動作，然后為其設(shè)置屬性。4.單擊事件和動作之間的可以選擇需要的事件。注意：一定要選擇適用的瀏覽器，否則很多行為和事件不能添加。 修改行為1.修改行為也是在行為面板中完成的。 常用的行為層的顯示與隱藏（例捉迷藏、下拉菜單）層的拖動（看圖記英語、拼圖游戲）彈出消息框（大小是默認的，例：拒絕下

32、載：設(shè)置右擊彈出消息框）彈出網(wǎng)頁（是一個預(yù)先制作好的網(wǎng)頁，可以設(shè)置窗口的大小）驗證表單（簡單的內(nèi)容驗證）播放音樂（試聽）動態(tài)的下拉菜單和級聯(lián)菜單(設(shè)置此行為前必須先建立自鏈接并保存此文件）設(shè)置狀態(tài)欄的文本行為與時間軸的結(jié)合（制作“開始”和“停止”按鈕）調(diào)用javascript(例09.htm)1 編寫函數(shù)2 給對象添加行為 代碼插件（例如：插入視頻文件） 模板新建模板文件1.資源面板中/新建按鈕2.編輯頁面內(nèi)容：主要編輯布局和不變內(nèi)容區(qū)。3.設(shè)置可編輯區(qū)域。4.保存應(yīng)用模板1.新建/基本頁2.在資源面板中選中要套用的模板文件/應(yīng)用。注意：1.模板中的區(qū)域默認為“不可編輯區(qū)”2.萬萬不可直接打開模板文件建立基本網(wǎng)頁。 后續(xù)作業(yè)添加時間軸（停止和播放按鈕）層的拖動（新的網(wǎng)頁）菜單層的隱藏消息框和彈出網(wǎng)頁“網(wǎng)絡(luò)調(diào)查”添加驗證新歌中添加“試聽”改變狀態(tài)欄的文本調(diào)用腳本（新的網(wǎng)頁）代碼插件