計算機(jī)文化基礎(chǔ)第八章

1、第八章 網(wǎng) 頁 制 作 DREAMWEAVERMX 2004 第八章知識點：第八章知識點：1 1、網(wǎng)頁制作的語言和工具、網(wǎng)頁制作的語言和工具2 2、網(wǎng)站制作、網(wǎng)站制作3 3、使用、使用DreamweaverDreamweaver制作網(wǎng)頁制作網(wǎng)頁4 4、網(wǎng)頁特效制作、網(wǎng)頁特效制作 1 1、網(wǎng)頁制作的語言和工具、網(wǎng)頁制作的語言和工具 網(wǎng)頁與主頁( Web Page )( Home Page )瀏覽器與瀏覽器與Web服務(wù)器之間服務(wù)器之間是以是以為單位來傳送信息。為單位來傳送信息。http:/ 網(wǎng)頁與網(wǎng)站服務(wù)器服務(wù)器網(wǎng)頁通常成組出現(xiàn)，并且這組網(wǎng)頁網(wǎng)頁通常成組出現(xiàn)，并且這組網(wǎng)頁之間通過超鏈接相互組織成為

2、反映之間通過超鏈接相互組織成為反映某個主題的網(wǎng)站。某個主題的網(wǎng)站。8 提高下載速度提高下載速度8 超文本地址引用方便超文本地址引用方便8 Web頁沒有固定的長度頁沒有固定的長度 網(wǎng)頁的制作工具可利用可利用編輯編輯Web文檔文檔（推薦：記（推薦：記事本）事本）Web文檔以純文本格式存放，取名為文檔以純文本格式存放，取名為*.html或或*.htm。 ，最終在瀏覽器窗口中呈現(xiàn)為圖文并茂的網(wǎng)頁。，最終在瀏覽器窗口中呈現(xiàn)為圖文并茂的網(wǎng)頁。NOTEPAD超文本標(biāo)記語言HTML yper ext arkup anguage 歡迎光臨無名的主頁歡迎光臨無名的主頁歡迎光臨無名的主頁歡迎光臨無名的主頁樣樣 例例

3、標(biāo)記需要放在中標(biāo)記中有很多是成對出現(xiàn)，一頭一尾（結(jié)束標(biāo)記前要加“/”）所有標(biāo)記中的字母不區(qū)分大小寫通常以“.html”或“htm”為文件后綴標(biāo)記的書寫格式如下： 文件內(nèi)容/ HTML特點特點直接使用HTML編寫網(wǎng)頁簡單的HTML例子歡迎光臨無名的主頁這就是我我常去的網(wǎng)站， Yahoo! HTML在瀏覽器中被解釋簡單的HTML例子歡迎光臨無名的主頁這就是我我常去的網(wǎng)站， Yahoo! 一個HTML文件總是由（HEAD）和（BODY）兩部分組成。標(biāo)記和用來說明本文件是一個HTML文件?！八娂此谩钡木W(wǎng)頁編輯工具FrontPage易學(xué)易用，適合于網(wǎng)頁設(shè)計的初學(xué)者；Dreamweaver強(qiáng)調(diào)的是更強(qiáng)

4、大的網(wǎng)頁控制、設(shè)計能力及創(chuàng)意的完全發(fā)揮，適合專業(yè)的制作人員使用?！八娂此谩钡木W(wǎng)頁編輯：“頁面視圖”，所見即所得的編輯環(huán)境；： “源代碼視圖”，直接通過修改HTML標(biāo)記命令編輯網(wǎng)頁；：代碼視圖和設(shè)計視圖同時顯示。2 2、網(wǎng)站制作、網(wǎng)站制作選擇主題選擇主題規(guī)劃網(wǎng)頁（結(jié)構(gòu)與鏈接關(guān)系）規(guī)劃網(wǎng)頁（結(jié)構(gòu)與鏈接關(guān)系）組織素材組織素材選擇視覺外觀選擇視覺外觀設(shè)計有效的頁面布局設(shè)計有效的頁面布局制作具體網(wǎng)頁制作具體網(wǎng)頁發(fā)布網(wǎng)站信息發(fā)布網(wǎng)站信息 網(wǎng)站制作步驟 網(wǎng)站基本結(jié)構(gòu)網(wǎng)站是由網(wǎng)頁組成的，網(wǎng)頁之間是由超鏈接來連接的，其連接方網(wǎng)站是由網(wǎng)頁組成的，網(wǎng)頁之間是由超鏈接來連接的，其連接方式有三種：線性網(wǎng)站、樹狀網(wǎng)站

5、、非線性網(wǎng)站式有三種：線性網(wǎng)站、樹狀網(wǎng)站、非線性網(wǎng)站：一頁連接一頁：一頁連接一頁：分層排列：分層排列：上述：上述兩種網(wǎng)站的結(jié)合兩種網(wǎng)站的結(jié)合 網(wǎng)頁制作步驟可利用可利用編輯編輯Web文檔（推薦：記事本）文檔（推薦：記事本）Web文檔以純文本格式存放，取名為文檔以純文本格式存放，取名為*.html或或*.htm。 其中插其中插入的入的HTML語言只有用瀏覽器才能被解釋翻譯語言只有用瀏覽器才能被解釋翻譯 在瀏覽器中使用在瀏覽器中使用菜單菜單命令，可在本地機(jī)瀏覽命令，可在本地機(jī)瀏覽 Web文文檔，完成編輯后，可利用檔，完成編輯后，可利用FTP將文件及其將文件及其所用到的媒體素材文所用到的媒體素材文件傳

6、送件傳送到某臺公共到某臺公共Web服務(wù)器服務(wù)器人人均可在瀏覽器中人人均可在瀏覽器中處，鍵入具體命令，實現(xiàn)異地瀏覽該處，鍵入具體命令，實現(xiàn)異地瀏覽該Web文檔文檔 一旦對該一旦對該Web文檔內(nèi)容進(jìn)行更新，須文檔內(nèi)容進(jìn)行更新，須它所在它所在Web服務(wù)器上服務(wù)器上的相關(guān)文檔的相關(guān)文檔 網(wǎng)頁的基本分類以網(wǎng)頁的角度來看以網(wǎng)頁的角度來看, ,一個網(wǎng)站中的眾多網(wǎng)頁一個網(wǎng)站中的眾多網(wǎng)頁主要可以分成下列兩層主要可以分成下列兩層: :個人主頁個人主頁興趣愛好興趣愛好個人相冊個人相冊個人收藏個人收藏 網(wǎng)站創(chuàng)建的基本方法將本地機(jī)中的某個文件夾定義為將本地機(jī)中的某個文件夾定義為Dreamweaver站點，利用站點，利用

7、Dreamweaver管管理這些網(wǎng)頁理這些網(wǎng)頁 網(wǎng)站創(chuàng)建步驟舉例（1） 在本地磁盤上新建站點文件夾，如在本地磁盤上新建站點文件夾，如d:openlab執(zhí)行執(zhí)行 “站點站點|管理站點管理站點”命令，彈出命令，彈出“管理站點管理站點”對對話框話框執(zhí)行執(zhí)行“”命令命令 網(wǎng)站創(chuàng)建步驟舉例（2）設(shè)置站點名稱：開放實驗室設(shè)置站點名稱：開放實驗室不使用服務(wù)器技術(shù)不使用服務(wù)器技術(shù)設(shè)置開發(fā)過程中設(shè)置開發(fā)過程中,使用文件使用文件的方式和文件的存儲位置的方式和文件的存儲位置設(shè)置無遠(yuǎn)端服務(wù)器連接設(shè)置無遠(yuǎn)端服務(wù)器連接 網(wǎng)站創(chuàng)建步驟舉例（3）在文件面板上新建網(wǎng)頁在文件面板上新建網(wǎng)頁文件和圖片素材文件夾文件和圖片素材文件夾

8、 網(wǎng)站創(chuàng)建步驟舉例（4）切換到切換到“站點地圖站點地圖”視圖視圖創(chuàng)建的站點結(jié)構(gòu)創(chuàng)建的站點結(jié)構(gòu) 網(wǎng)站創(chuàng)建步驟舉例（5）雙擊某個網(wǎng)頁文件名雙擊某個網(wǎng)頁文件名進(jìn)入具體網(wǎng)頁的編輯進(jìn)入具體網(wǎng)頁的編輯3 3、使用、使用DreamweaverDreamweaver制作網(wǎng)頁制作網(wǎng)頁8 基本網(wǎng)頁編輯基本網(wǎng)頁編輯8 圖形的插入和圖形格式圖形的插入和圖形格式8 創(chuàng)建超鏈接（超鏈接、書簽、熱點）創(chuàng)建超鏈接（超鏈接、書簽、熱點）8 網(wǎng)頁的布局（表格和框架）網(wǎng)頁的布局（表格和框架）8 創(chuàng)建和使用表單創(chuàng)建和使用表單認(rèn)識認(rèn)識Dreamweaver MX 2004 管理和組織網(wǎng)頁管理和組織網(wǎng)頁網(wǎng)頁編輯網(wǎng)頁編輯制作導(dǎo)航欄制作導(dǎo)航

9、欄層、時間軸、行為及其應(yīng)用層、時間軸、行為及其應(yīng)用樣式表樣式表動態(tài)動態(tài) gif gif 圖像的制作圖像的制作 認(rèn)識Dreamweaver界面網(wǎng)頁間切換標(biāo)簽網(wǎng)頁間切換標(biāo)簽文件面板文件面板 基本網(wǎng)頁編輯既可以在站點中創(chuàng)建新網(wǎng)頁，也可以創(chuàng)建獨立的網(wǎng)頁。既可以在站點中創(chuàng)建新網(wǎng)頁，也可以創(chuàng)建獨立的網(wǎng)頁。Dreamweaver 內(nèi)置的各類模板可以幫助我們創(chuàng)建不同類內(nèi)置的各類模板可以幫助我們創(chuàng)建不同類型的網(wǎng)頁。型的網(wǎng)頁。設(shè)計視圖中進(jìn)行文本的錄入和設(shè)計視圖中進(jìn)行文本的錄入和word類似，也可以在網(wǎng)頁類似，也可以在網(wǎng)頁中插入任何一種基于文本的文件，包括中插入任何一種基于文本的文件，包括 .htm 文件、文件、.

10、asp 文件文件、.rtf 文件和文件和 .txt 文件，以及任何文件，以及任何 Microsoft Office 文檔。文檔。 基本網(wǎng)頁編輯在在 Dreamweaver 中，可以在屬性面板上設(shè)置文本格式，如更改字體、中，可以在屬性面板上設(shè)置文本格式，如更改字體、大小、樣式、顏色等大小、樣式、顏色等.Dreamweaver的插入菜單可以插入換行符、水平線、特殊字符和注的插入菜單可以插入換行符、水平線、特殊字符和注釋等多種類型的特殊元素釋等多種類型的特殊元素. 基本網(wǎng)頁編輯 使用項目符號和編號使用項目符號和編號使用使用“頁面屬性頁面屬性”對話框設(shè)置網(wǎng)頁標(biāo)題、背景色對話框設(shè)置網(wǎng)頁標(biāo)題、背景色或背景

11、圖片、文本顏色、超鏈接顏色和樣式等?；虮尘皥D片、文本顏色、超鏈接顏色和樣式等。 圖形的插入和簡單編輯 圖形的插入：圖形的插入：執(zhí)行執(zhí)行“插入插入|圖像圖像” 菜單命令菜單命令 直接拖拽來改變圖片的大小直接拖拽來改變圖片的大小 大圖像不能通過減小該圖像尺寸以達(dá)到減少大圖像不能通過減小該圖像尺寸以達(dá)到減少 其文件大小和下載時間的目的。其文件大小和下載時間的目的。 使用屬性面板設(shè)置圖片屬性使用屬性面板設(shè)置圖片屬性HTML并不能包含圖像，它只是包含圖像文件的名稱并不能包含圖像，它只是包含圖像文件的名稱和相應(yīng)的格式代碼。和相應(yīng)的格式代碼。重新取樣圖片重新取樣圖片 網(wǎng)頁中圖片不能正常顯示問題原因原因1：圖

12、片沒有保存到網(wǎng)站中：圖片沒有保存到網(wǎng)站中原因原因2：圖片保存到網(wǎng)站中，但保存的路徑不正確。：圖片保存到網(wǎng)站中，但保存的路徑不正確。網(wǎng)頁中的圖像、動畫等素材都有自己固定的存放位置，網(wǎng)頁網(wǎng)頁中的圖像、動畫等素材都有自己固定的存放位置，網(wǎng)頁只是通過路徑使用只是通過路徑使用HTML語言來調(diào)用它們，然后把它們顯示語言來調(diào)用它們，然后把它們顯示在網(wǎng)頁中。網(wǎng)頁中的路徑有在網(wǎng)頁中。網(wǎng)頁中的路徑有，在應(yīng)該使，在應(yīng)該使用相對路徑的地方使用了絕對路徑，或相對路徑的引用不正用相對路徑的地方使用了絕對路徑，或相對路徑的引用不正確都會導(dǎo)致瀏覽器無法在指定的位置打開指定的文件，使素確都會導(dǎo)致瀏覽器無法在指定的位置打開指定的

13、文件，使素材不能正常顯示。材不能正常顯示。 絕對路徑與相對路徑(1)：文件在硬盤上的真正路徑文件在硬盤上的真正路徑D:/myweb/wuming.htmlD:/myweb/images/wm.gif如果在如果在wuming.html網(wǎng)頁中網(wǎng)頁中插入插入wm.gif圖片，使用絕對圖片，使用絕對路徑，那么在本地電腦中將一切正常，因為在路徑，那么在本地電腦中將一切正常，因為在D:/myweb/images路徑下的確存在路徑下的確存在wm.gif這個圖片。這個圖片。但你將它們拿到另一臺機(jī)器上或傳到網(wǎng)站服務(wù)器上后，但你將它們拿到另一臺機(jī)器上或傳到網(wǎng)站服務(wù)器上后，就會出錯，因為要到當(dāng)前的機(jī)器的就會出錯，因

14、為要到當(dāng)前的機(jī)器的D:/myweb/images路路徑下找徑下找wm.gif文件文件。 絕對路徑與相對路徑(2)相對路徑相對路徑：當(dāng)前網(wǎng)頁相對目標(biāo)文件的位置當(dāng)前網(wǎng)頁相對目標(biāo)文件的位置/ 根目錄根目錄 ./ 上一級上一級 ././ 上兩級上兩級例例1：D:/myweb/wuming.html D:/myweb/images/wm.gif相對路徑：相對路徑：例例2：D:/myweb/web/index.htm D:/myweb/img/wm.gif相對路徑：相對路徑： 絕對路徑與相對路徑(3)例例3:D:/myweb/web/zhang/index.htm D:/myweb/img/images/

15、wm.gif把絕對路徑轉(zhuǎn)化為相對路徑的時候，兩個文件絕對路徑中把絕對路徑轉(zhuǎn)化為相對路徑的時候，兩個文件絕對路徑中相同的部分忽略相同的部分忽略,只考慮他們不同之處。只考慮他們不同之處。相對路徑：相對路徑： 為了避免在制作網(wǎng)頁時出現(xiàn)路徑錯誤，我們可以使用為了避免在制作網(wǎng)頁時出現(xiàn)路徑錯誤，我們可以使用Frontpage或或dreamweaver的站點管理功能來管理站點。的站點管理功能來管理站點。站點中的網(wǎng)頁保存時將把圖片保存到站點中并自動把絕對站點中的網(wǎng)頁保存時將把圖片保存到站點中并自動把絕對路徑轉(zhuǎn)化為相對路徑，并且當(dāng)你在站點中移動文件的時候，路徑轉(zhuǎn)化為相對路徑，并且當(dāng)你在站點中移動文件的時候，與這

16、些文件關(guān)聯(lián)的連接路徑都會自動更改。與這些文件關(guān)聯(lián)的連接路徑都會自動更改。 建立超鏈接超鏈接的實現(xiàn)方法：將某個文本串或某幅圖像和其他超鏈接的實現(xiàn)方法：將某個文本串或某幅圖像和其他網(wǎng)頁的地址（網(wǎng)頁的地址（URL）聯(lián)系在一起。）聯(lián)系在一起。單擊此處單擊此處可獲得某某信息。可獲得某某信息。創(chuàng)建超鏈接：創(chuàng)建超鏈接： 其他其他Web服務(wù)器上的網(wǎng)頁文件服務(wù)器上的網(wǎng)頁文件 本地機(jī)器中網(wǎng)頁文件本地機(jī)器中網(wǎng)頁文件 同一個網(wǎng)頁文件中（書簽）同一個網(wǎng)頁文件中（書簽） 圖像地圖圖像地圖是另一種形式的超鏈接，允許將不同的圖像地圖是另一種形式的超鏈接，允許將不同的URL指定給一幅圖指定給一幅圖像的不同部分，使訪問者根據(jù)不同

17、的圖像區(qū)域跳轉(zhuǎn)到不同的位置，像的不同部分，使訪問者根據(jù)不同的圖像區(qū)域跳轉(zhuǎn)到不同的位置，這些區(qū)域稱做這些區(qū)域稱做“熱點熱點”，每一個熱點與一個超鏈接相對應(yīng)。，每一個熱點與一個超鏈接相對應(yīng)。如下圖汽車生產(chǎn)商的站點可以用新車的圖像地圖：當(dāng)站點訪問者單如下圖汽車生產(chǎn)商的站點可以用新車的圖像地圖：當(dāng)站點訪問者單擊擊“車子車子”時，就會顯示詳細(xì)說明車子的網(wǎng)頁。時，就會顯示詳細(xì)說明車子的網(wǎng)頁。 網(wǎng)頁布局（表格） 網(wǎng)頁布局（表格） 表格布局舉例補(bǔ)充利用單元格的合并與拆利用單元格的合并與拆分分 ，創(chuàng)建不規(guī)則的表格。，創(chuàng)建不規(guī)則的表格。單元格的不同填充色、邊單元格的不同填充色、邊框線顏色分割區(qū)域?？蚓€顏色分割區(qū)域

18、。設(shè)置單元格屬性，單元格設(shè)置單元格屬性，單元格內(nèi)對象的排版方式。內(nèi)對象的排版方式。設(shè)置表格屬性，整個表格設(shè)置表格屬性，整個表格的排版方式。的排版方式。表格單位的設(shè)置8像素是絕對單位，不隨瀏覽器窗口尺寸變化而變化。像素是絕對單位，不隨瀏覽器窗口尺寸變化而變化。8% %是相對單位，隨著瀏覽器窗口尺寸變化而變化。是相對單位，隨著瀏覽器窗口尺寸變化而變化。0-0-顯示器分辯率值顯示器分辯率值0%-100%0%-100%表格有兩種度量單位：像素和表格有兩種度量單位：像素和% % 表格布局補(bǔ)充要用表格來布局網(wǎng)頁，首先應(yīng)決定表格在水平方向和要用表格來布局網(wǎng)頁，首先應(yīng)決定表格在水平方向和垂直方向上所需的單元格

19、數(shù)量，然后為需要跨越多行垂直方向上所需的單元格數(shù)量，然后為需要跨越多行或多列的對象合并單元格。或多列的對象合并單元格。大多數(shù)網(wǎng)頁布局采用了帶有大多數(shù)網(wǎng)頁布局采用了帶有的表格。的表格。 框架布局框架是一種將瀏覽器窗口劃分為功能獨立的多個區(qū)域的常框架是一種將瀏覽器窗口劃分為功能獨立的多個區(qū)域的常用方法。用方法。定義每個框架的大小、位置、名稱和初始定義每個框架的大小、位置、名稱和初始網(wǎng)頁，普通網(wǎng)頁提供每個框架的內(nèi)容。一個框架的超鏈接網(wǎng)頁，普通網(wǎng)頁提供每個框架的內(nèi)容。一個框架的超鏈接可以更改顯示在另一個框架中的網(wǎng)頁?？梢愿娘@示在另一個框架中的網(wǎng)頁?？蚣苊Q框架名稱 初始網(wǎng)頁初始網(wǎng)頁vivaband.

20、htm 認(rèn)識框架集網(wǎng)頁是一種特殊的網(wǎng)頁，該網(wǎng)頁定義了整體的框架布局，是一種特殊的網(wǎng)頁，該網(wǎng)頁定義了整體的框架布局，但不提供實際內(nèi)容。但不提供實際內(nèi)容。VIVABAND 此網(wǎng)頁使用了框架，但您的瀏覽器不支持框架。 vivaband.htm 框架網(wǎng)頁的創(chuàng)建（1） 框架網(wǎng)頁的創(chuàng)建（2）分別為不同的框架設(shè)定初始網(wǎng)頁文件分別為不同的框架設(shè)定初始網(wǎng)頁文件bannerbanner頁頭頁頭.html.htmlContentsContents菜單菜單.htm.htmMain Main 檸檬寢室檸檬寢室.html.html 框架網(wǎng)頁的創(chuàng)建（3）在框架面板上選擇具體的框架或框架集，在屬性面板上設(shè)置框架或框架集屬性。

21、在框架面板上選擇具體的框架或框架集，在屬性面板上設(shè)置框架或框架集屬性。 框架網(wǎng)頁的保存需要分別保存每一個框架對應(yīng)的網(wǎng)頁文件，并要需要分別保存每一個框架對應(yīng)的網(wǎng)頁文件，并要保存保存“”文件本身。文件本身。 執(zhí)行執(zhí)行“文件文件|保存全保存全部部”命令命令,保存所有保存所有的框架和框架集的框架和框架集,以以虛框突出顯示的框虛框突出顯示的框架就是當(dāng)前需要保架就是當(dāng)前需要保存的框架。存的框架。 框架之間的超鏈接指定超鏈接目的網(wǎng)頁出現(xiàn)在哪個框架中。指定超鏈接目的網(wǎng)頁出現(xiàn)在哪個框架中。在框架網(wǎng)頁中，單擊某框架內(nèi)網(wǎng)頁上的超鏈接時，被在框架網(wǎng)頁中，單擊某框架內(nèi)網(wǎng)頁上的超鏈接時，被超鏈接所指定的網(wǎng)頁通常在另一個框

22、架中打開，這個超鏈接所指定的網(wǎng)頁通常在另一個框架中打開，這個框架稱為框架稱為。 網(wǎng)頁背景音樂處理盡量使用盡量使用mid格式的音樂文件，避免產(chǎn)生慢速網(wǎng)頁。格式的音樂文件，避免產(chǎn)生慢速網(wǎng)頁。 Dreamweaver本身沒有提供設(shè)置背景音樂的命令，需本身沒有提供設(shè)置背景音樂的命令，需要在代碼視圖中要在代碼視圖中之間直接輸入代碼。之間直接輸入代碼。 網(wǎng)頁背景音樂處理設(shè)置開啟新窗口的超鏈接設(shè)置開啟新窗口的超鏈接利用框架使網(wǎng)頁背景音樂連貫1. 把把index.htm重命名為重命名為index-content.htm2. 新建一個新建一個 “上方固定上方固定”框架網(wǎng)頁框架網(wǎng)頁3. 下框架設(shè)置初始網(wǎng)頁為下框架

23、設(shè)置初始網(wǎng)頁為index-conten.htm利用框架使網(wǎng)頁背景音樂連貫4. 取消取消index-content網(wǎng)頁的背景音樂設(shè)置網(wǎng)頁的背景音樂設(shè)置5. 保存框架集網(wǎng)頁為保存框架集網(wǎng)頁為index.htm,上框架網(wǎng)頁為上框架網(wǎng)頁為index-top.htm6. 在在index-top.htm網(wǎng)頁中設(shè)置背景音樂網(wǎng)頁中設(shè)置背景音樂7. 設(shè)置上框架屬性設(shè)置上框架屬性:框架高度為框架高度為1像素像素, 不顯示邊框。不顯示邊框。 創(chuàng)建和使用表單表單能夠向網(wǎng)頁中添加文本框、表單能夠向網(wǎng)頁中添加文本框、單選按鈕、復(fù)選框、按鈕等用單選按鈕、復(fù)選框、按鈕等用戶界面控件。戶界面控件。每個網(wǎng)頁可以包含一個或多個表每

24、個網(wǎng)頁可以包含一個或多個表單，每個表單占據(jù)網(wǎng)頁中的一個單，每個表單占據(jù)網(wǎng)頁中的一個特定區(qū)域。特定區(qū)域。表單中必須有一個元素作為表單中必須有一個元素作為“提交提交”按鈕。按鈕。單擊單擊“提交提交”按鈕后，瀏覽器將數(shù)據(jù)傳送給服務(wù)器，站點服務(wù)器按鈕后，瀏覽器將數(shù)據(jù)傳送給服務(wù)器，站點服務(wù)器需要某種程序讀取這些數(shù)據(jù)并進(jìn)行處理。程序可能將數(shù)據(jù)保存在需要某種程序讀取這些數(shù)據(jù)并進(jìn)行處理。程序可能將數(shù)據(jù)保存在文件或數(shù)據(jù)庫中，也可能作為電子郵件發(fā)出等等。文件或數(shù)據(jù)庫中，也可能作為電子郵件發(fā)出等等。 應(yīng)用圖像作網(wǎng)頁背景選擇選擇的圖像文件的圖像文件選擇選擇圖像圖像 使用導(dǎo)航條交互式按鈕交互式按鈕 普通狀態(tài)普通狀態(tài) 鼠

25、標(biāo)經(jīng)過狀態(tài)鼠標(biāo)經(jīng)過狀態(tài) 鼠標(biāo)按鈕狀態(tài)鼠標(biāo)按鈕狀態(tài)在在Dreamweaver中，所有網(wǎng)頁中使用的圖像文件中，所有網(wǎng)頁中使用的圖像文件都必須保存在一個已經(jīng)定義好的本地站點中。都必須保存在一個已經(jīng)定義好的本地站點中。執(zhí)行執(zhí)行“插入插入|圖像對象圖像對象|導(dǎo)導(dǎo)航條航條”命令命令 創(chuàng)建交互式按鈕PhotoImpact 導(dǎo)出交互式按鈕圖像 設(shè)計各種網(wǎng)頁部件圖標(biāo)圖標(biāo)橫幅橫幅按鈕按鈕按鈕欄按鈕欄Rollover按鈕按鈕分隔條分隔條 層的使用網(wǎng)頁中的元素，如文本、圖像，都可以放置到網(wǎng)頁中的元素，如文本、圖像，都可以放置到中，層中，層不僅不僅具有具有表格的表格的平面布局網(wǎng)頁對象的功能平面布局網(wǎng)頁對象的功能，而且可

26、以而且可以使網(wǎng)頁中的使網(wǎng)頁中的對象對象在空間垂直方向（在空間垂直方向（Z軸）上互相重疊軸）上互相重疊，再配合時間線，再配合時間線（Timeline）的應(yīng)用可以做出很多效果，使網(wǎng)頁動感十足，）的應(yīng)用可以做出很多效果，使網(wǎng)頁動感十足，還可以配合行為（還可以配合行為（Behaviors），使得網(wǎng)頁在某種事件發(fā)生），使得網(wǎng)頁在某種事件發(fā)生時顯示隱藏的指定層等。時顯示隱藏的指定層等。用鼠標(biāo)拖動的方法畫出一用鼠標(biāo)拖動的方法畫出一個任意尺寸大小的層。個任意尺寸大小的層。繪制層按鈕繪制層按鈕 層的編輯激活圖層：激活圖層：單擊圖層中任一位置，圖層只有被激活后單擊圖層中任一位置，圖層只有被激活后才可以插入對象。才

27、可以插入對象。 選取圖層選取圖層：單擊圖層邊框或單擊文檔窗口狀態(tài)欄左側(cè)：單擊圖層邊框或單擊文檔窗口狀態(tài)欄左側(cè)層標(biāo)記層標(biāo)記圖標(biāo)圖標(biāo) ，或單擊圖層圖標(biāo)，或單擊圖層圖標(biāo) 。 選中的圖層四周出現(xiàn)選中的圖層四周出現(xiàn)8個黑色的小方塊。個黑色的小方塊。圖層標(biāo)記圖層標(biāo)記閃爍插入光標(biāo)閃爍插入光標(biāo)黑色的圖層邊框黑色的圖層邊框 層的編輯移動層移動層 ：選中層時，可用鼠標(biāo)拖動層的邊框移動圖選中層時，可用鼠標(biāo)拖動層的邊框移動圖層的位置，或者在層的位置，或者在“層層”屬性面板中精確設(shè)置圖層的屬性面板中精確設(shè)置圖層的新位置（左和上的值）。新位置（左和上的值）。改變圖層尺寸改變圖層尺寸 ：選中圖層時，可用鼠標(biāo)拖動圖層：選中圖

28、層時，可用鼠標(biāo)拖動圖層四周的小方塊調(diào)整圖層的尺寸，或者在四周的小方塊調(diào)整圖層的尺寸，或者在“層層”屬性屬性面板中精確設(shè)置圖層的寬高尺寸（寬和高的值）。面板中精確設(shè)置圖層的寬高尺寸（寬和高的值）。 時間軸時間軸是一條貫穿時間的軸線時間軸是一條貫穿時間的軸線, ,時間軸動畫是把動畫對象時間軸動畫是把動畫對象放置在不同的層中放置在不同的層中, ,通過改變層的位置、大小、可見性和通過改變層的位置、大小、可見性和疊放順序等屬性來創(chuàng)建動畫疊放順序等屬性來創(chuàng)建動畫執(zhí)行執(zhí)行“窗口窗口| |時間軸時間軸”命令，調(diào)出時間軸面板命令，調(diào)出時間軸面板 制作時間軸動畫1.1.插入一個層插入一個層2.2.在層中插入對象在

29、層中插入對象3. 3. 使用使用“窗口窗口| |時間軸時間軸”命令打開時間軸面板命令打開時間軸面板4.4.將層拖到時間軸的第將層拖到時間軸的第1 1幀上幀上5.5.選中第選中第1 1幀幀, ,將圖層拖到將圖層拖到動畫開始位置動畫開始位置6.6.選中第選中第1515幀幀, ,將圖層拖將圖層拖到動畫結(jié)束位置到動畫結(jié)束位置7.7.選中自動播放復(fù)選框選中自動播放復(fù)選框步驟步驟: : 行為行為是在網(wǎng)頁中進(jìn)行的一系列動作行為是在網(wǎng)頁中進(jìn)行的一系列動作,通過這些動作實現(xiàn)用通過這些動作實現(xiàn)用戶與頁面的交互戶與頁面的交互,使用使用Dreamweaver內(nèi)置的行為內(nèi)置的行為(實質(zhì)是實質(zhì)是JavaScript代碼代

30、碼), 用戶不需編寫代碼用戶不需編寫代碼,就可以實現(xiàn)交互和就可以實現(xiàn)交互和控制功能控制功能.行為由事件和動作組成行為由事件和動作組成,事件是動作被觸發(fā)的條件事件是動作被觸發(fā)的條件,動作動作是用于完成特定任務(wù)預(yù)先編好的是用于完成特定任務(wù)預(yù)先編好的JavaScript代碼代碼. 使用行為步驟步驟: :1.1.執(zhí)行執(zhí)行“窗口窗口| |行為行為”命命令令, ,打開行為面板打開行為面板2.2.選中要添加行為的對象選中要添加行為的對象, ,單擊加號按鈕單擊加號按鈕3.3.在彈出的動作菜單中選在彈出的動作菜單中選擇某個動作擇某個動作4.4.根據(jù)所選的動作根據(jù)所選的動作, ,在參在參數(shù)窗口中設(shè)置參數(shù)數(shù)窗口中設(shè)

31、置參數(shù)5.5.在事件菜單中為動作選在事件菜單中為動作選擇觸發(fā)事件擇觸發(fā)事件動作菜單動作菜單事件菜單事件菜單 利用圖層實現(xiàn)下拉菜單（1）圖層默認(rèn)為隱藏狀態(tài)圖層默認(rèn)為隱藏狀態(tài)步驟一：步驟一：分別為各個菜單項分別為各個菜單項創(chuàng)建對應(yīng)的下拉菜創(chuàng)建對應(yīng)的下拉菜單圖層。單圖層。 利用圖層實現(xiàn)下拉菜單（2）指定行為動作：指定行為動作：當(dāng)鼠標(biāo)指向菜單項時，當(dāng)鼠標(biāo)指向菜單項時，隱藏的指定圖層將被隱藏的指定圖層將被顯示，當(dāng)鼠標(biāo)移開菜單顯示，當(dāng)鼠標(biāo)移開菜單項時，顯示的指定圖層項時，顯示的指定圖層重被隱藏。重被隱藏。步驟二：步驟二：分別為各個菜單項分別為各個菜單項和下拉菜單圖層指和下拉菜單圖層指定行為動作。定行為動作

32、。 讓圖層中的對象沿路徑動起來“修改修改| |時間軸時間軸| |錄錄制層路徑制層路徑”命令命令 讓圖層中的內(nèi)容動起來（1）的創(chuàng)建：的創(chuàng)建：創(chuàng)建圖層，如創(chuàng)建圖層，如layer7選中該圖層，按住選中該圖層，按住Alt鍵的同時，在其鍵的同時，在其中創(chuàng)建其嵌套圖層。中創(chuàng)建其嵌套圖層。利用利用“剪輯剪輯”選項設(shè)置選項設(shè)置layer7圖層的可見區(qū)域圖層的可見區(qū)域 讓圖層中的內(nèi)容動起來（2）起始幀起始幀結(jié)束幀結(jié)束幀選中圖層選中圖層Layer8，執(zhí)，執(zhí)行行“修改修改|時間軸時間軸|錄制錄制層路徑層路徑”命令，制作命令，制作該圖層從圖層該圖層從圖層Layer7底部移動到圖層底部移動到圖層Layer7頂部的運頂部

33、的運動效果動效果。 調(diào)整多個圖層的疊放順序選中圖層選中圖層Layer7，直接用鼠，直接用鼠標(biāo)將其拖拽到相應(yīng)層次。標(biāo)將其拖拽到相應(yīng)層次。 CSS樣式CSS（Cascading Style Sheet ）層疊式樣式）層疊式樣式表，是國際組織表，是國際組織W3C制定的擴(kuò)展制定的擴(kuò)展HTML功能的功能的標(biāo)準(zhǔn)，標(biāo)準(zhǔn)，CSS樣式廣泛適用于文本、圖形等網(wǎng)頁樣式廣泛適用于文本、圖形等網(wǎng)頁元素的格式化工作，方便網(wǎng)頁的制作和維護(hù)，元素的格式化工作，方便網(wǎng)頁的制作和維護(hù)，還能產(chǎn)生半透明圖像等特殊效果。還能產(chǎn)生半透明圖像等特殊效果?！啊泵蠲?CSS樣式嵌入式樣式表嵌入式樣式表:對某個具體的網(wǎng)頁定義的樣式對某個具體

34、的網(wǎng)頁定義的樣式,它的表現(xiàn)它的表現(xiàn)形式是直接將樣式插入到網(wǎng)頁的形式是直接將樣式插入到網(wǎng)頁的HTML代碼中，定義的代碼中，定義的樣式自動應(yīng)用到網(wǎng)頁中。樣式自動應(yīng)用到網(wǎng)頁中。外部樣式表：將外部樣式表：將CSS樣式保存為單獨的一個樣式保存為單獨的一個文件文件(.css)，網(wǎng)頁中可以創(chuàng)建對某個現(xiàn)成樣，網(wǎng)頁中可以創(chuàng)建對某個現(xiàn)成樣式表的鏈接，而且多個網(wǎng)頁可以使用同一個式表的鏈接，而且多個網(wǎng)頁可以使用同一個樣式表的樣式樣式表的樣式.局部應(yīng)用樣式表：也是對某個具體的網(wǎng)頁定義的樣式局部應(yīng)用樣式表：也是對某個具體的網(wǎng)頁定義的樣式,定義的樣式顯示在樣式表面板中定義的樣式顯示在樣式表面板中,可以選擇某段文本或可以選擇

35、某段文本或圖像使用所定義的樣式。圖像使用所定義的樣式。 去除超鏈接的下劃線選擇新建選擇新建CSS樣式命令樣式命令直接將樣式插直接將樣式插入到網(wǎng)頁的入到網(wǎng)頁的HTML代碼中代碼中 定義文字樣式選擇選擇“導(dǎo)出導(dǎo)出”命令，命令，導(dǎo)出為外部樣式表，導(dǎo)出為外部樣式表，在其它的網(wǎng)頁中可應(yīng)在其它的網(wǎng)頁中可應(yīng)用此樣式表的樣式用此樣式表的樣式 動畫原理與制作的形成是由連續(xù)顯示數(shù)張圖片所造的視覺效果，其原理的形成是由連續(xù)顯示數(shù)張圖片所造的視覺效果，其原理與卡通影片是一樣的，我們可以設(shè)定每張圖片所停滯時間，與卡通影片是一樣的，我們可以設(shè)定每張圖片所停滯時間，從而造成不同的動畫顯示速度。從而造成不同的動畫顯示速度。當(dāng)

36、要制作一張動畫時，可使用有支持當(dāng)要制作一張動畫時，可使用有支持GIF格式的繪圖軟件來格式的繪圖軟件來制作圖像制作圖像(或掃描進(jìn)來的影像或掃描進(jìn)來的影像)，將這些構(gòu)成動畫的連續(xù)數(shù)張，將這些構(gòu)成動畫的連續(xù)數(shù)張圖像分別儲存成不同檔名的圖像分別儲存成不同檔名的GIF文檔，然後再使用動畫制作文檔，然後再使用動畫制作軟件，如軟件，如GIF Construction Set或或動動畫制作軟件來整合這些圖像，針對每張圖像設(shè)定相關(guān)的屬性畫制作軟件來整合這些圖像，針對每張圖像設(shè)定相關(guān)的屬性(如顯示的停滯時間如顯示的停滯時間)，以完成一幅動畫的制作，且在這些軟，以完成一幅動畫的制作，且在這些軟件中就可以直接觀看動畫

37、的顯示。件中就可以直接觀看動畫的顯示。 動態(tài)Gif圖片的制作（1）工作窗口工作窗口對象管理器對象管理器幀窗格幀窗格 動態(tài)Gif圖片的制作（2）：在啟動在啟動ulead gifanimator 程序時，會顯示一個啟程序時，會顯示一個啟動向?qū)硪龑?dǎo)我們創(chuàng)建動畫。動向?qū)硪龑?dǎo)我們創(chuàng)建動畫。 使用動畫向?qū)е谱鲃赢?1)步驟步驟1:1:設(shè)置畫布尺寸設(shè)置畫布尺寸步驟步驟2:2:選擇文件選擇文件步驟步驟3:3:設(shè)置幀延遲時間設(shè)置幀延遲時間將一系列靜態(tài)圖片連接生成動將一系列靜態(tài)圖片連接生成動畫畫 使用動畫向?qū)е谱鲃赢?2)編輯模式下的顯示編輯模式下的顯示步驟步驟5:輸出輸出gif動畫動畫:執(zhí)行執(zhí)行“文件文件|

38、另存為另存為 |gif文件文件”命令命令步驟步驟4:在預(yù)覽模式下在預(yù)覽模式下觀看動畫效果觀看動畫效果 制作橫幅文字(1)先創(chuàng)建一個空白的動畫文檔，然后在先創(chuàng)建一個空白的動畫文檔，然后在 “ “幀幀”菜單菜單中選擇中選擇 “ “添加橫幅文本添加橫幅文本”在文本標(biāo)簽中在文本標(biāo)簽中設(shè)置字體、字設(shè)置字體、字號、顏色、陰號、顏色、陰影等效果影等效果 制作橫幅文字(2)設(shè)置文字動畫效果設(shè)置文字動畫效果設(shè)置幀畫面的延遲時間設(shè)置幀畫面的延遲時間添加霓虹效果添加霓虹效果最終效果最終效果 漸變動畫（1）工作區(qū)（畫布）工作區(qū)（畫布）幀窗格幀窗格對象管理器對象管理器延時延時 漸變動畫（2）添加圖像添加圖像改變畫布大小

39、改變畫布大小選定范圍工具：魔術(shù)棒選定范圍工具：魔術(shù)棒自動創(chuàng)建自動創(chuàng)建手動創(chuàng)建手動創(chuàng)建 用視頻片段制作 GIF 動畫1. 創(chuàng)建一個新的空白動畫。創(chuàng)建一個新的空白動畫。2. 單擊標(biāo)準(zhǔn)工具欄上的單擊標(biāo)準(zhǔn)工具欄上的 “添加視頻添加視頻”按鈕，打開按鈕，打開 “添加視頻文件添加視頻文件”對話框。對話框。3. 找到要用的影片文件并選中后，單找到要用的影片文件并選中后，單擊擊Duration按鈕。按鈕。4. Duration對話框打開后，有兩個屬對話框打開后，有兩個屬性需要定義性需要定義:要使用的起始和結(jié)束的視要使用的起始和結(jié)束的視頻段頻段, Mark in和和Mark out。通過預(yù)覽窗口和視頻控件，決定

40、起始通過預(yù)覽窗口和視頻控件，決定起始幀和結(jié)束幀的幀號幀和結(jié)束幀的幀號, 在在Mark in和和Mark out中分別輸入中分別輸入.5. 單擊單擊OK。Duration對話框關(guān)閉，對話框關(guān)閉，返回到返回到“添加視頻文件添加視頻文件”對話框。再對話框。再單擊單擊OK，選擇的幀就被加載到，選擇的幀就被加載到 GIF Animator 中了。中了。 4 4、網(wǎng)頁特效制作、網(wǎng)頁特效制作 網(wǎng)頁特效所謂所謂“特效特效”是指用某種編輯語言編寫，或用特效軟件是指用某種編輯語言編寫，或用特效軟件編制的，實現(xiàn)某種網(wǎng)頁特殊效果的一段編程代碼。編制的，實現(xiàn)某種網(wǎng)頁特殊效果的一段編程代碼。JavaScript是一種擴(kuò)展

41、到是一種擴(kuò)展到HTML的腳本設(shè)計語言的腳本設(shè)計語言,它使網(wǎng)它使網(wǎng)頁開發(fā)者可以更有效地控制頁面頁開發(fā)者可以更有效地控制頁面,并能對用戶觸發(fā)事件并能對用戶觸發(fā)事件作出即時響應(yīng)作出即時響應(yīng),諸如單擊鼠標(biāo)、表單操作等諸如單擊鼠標(biāo)、表單操作等,而且這些都而且這些都不需要客戶機(jī)與服務(wù)器的交互通信不需要客戶機(jī)與服務(wù)器的交互通信,既為用戶提供了更既為用戶提供了更快速的操作快速的操作,又減小了服務(wù)器端的負(fù)擔(dān)。又減小了服務(wù)器端的負(fù)擔(dān)。JavaScript不不能脫離能脫離HTML而獨立存在而獨立存在,只有在支持只有在支持JavaScript的瀏覽的瀏覽器中器中,它才能作為它才能作為HTML頁面的一部分起作用頁面的一

42、部分起作用,但它增強(qiáng)但它增強(qiáng)了網(wǎng)頁的表現(xiàn)力。了網(wǎng)頁的表現(xiàn)力。 網(wǎng)頁特效制作許多網(wǎng)頁的特殊效果都是用許多網(wǎng)頁的特殊效果都是用來裝點的。不懂點編來裝點的。不懂點編程知識人要想使用這些特效就有些困難了，因此國內(nèi)共享軟程知識人要想使用這些特效就有些困難了，因此國內(nèi)共享軟件作者便寫了許多便于使用的件作者便寫了許多便于使用的Javascript模式程序，呼吸主模式程序，呼吸主頁秀就屬于這類軟件。頁秀就屬于這類軟件。呼吸主頁秀包含了窗口、鼠標(biāo)、文字、菜單等九類共呼吸主頁秀包含了窗口、鼠標(biāo)、文字、菜單等九類共350種種特效。特效。為了便于用戶的使用為了便于用戶的使用,既可既可以先對已生成的代碼進(jìn)行以先對已生成的代碼進(jìn)行效果預(yù)覽，也可以直接修效果預(yù)覽，