張洪明版-計算機(jī)基礎(chǔ)課件-第7章_網(wǎng)頁設(shè)計基礎(chǔ)

1、1第七章第七章網(wǎng)頁設(shè)計基礎(chǔ)網(wǎng)頁設(shè)計基礎(chǔ) 24HTMLHTML超文本語言基礎(chǔ)超文本語言基礎(chǔ) 4Dreamweaver MX 2004Dreamweaver MX 2004的基本操作的基本操作 4在網(wǎng)頁中使用多媒體對象及表單在網(wǎng)頁中使用多媒體對象及表單 4網(wǎng)頁版面設(shè)計網(wǎng)頁版面設(shè)計 4站點測試與發(fā)布站點測試與發(fā)布 3 網(wǎng)頁網(wǎng)頁就是用就是用HTMLHTML語言寫成的文檔，在語言寫成的文檔，在InternetInternet中的中的瀏覽器就是解釋這個文檔并將文檔內(nèi)容翻譯成我們?yōu)g覽器就是解釋這個文檔并將文檔內(nèi)容翻譯成我們可見的頁面形式?？梢姷捻撁嫘问?。HTMLHTML是超文本標(biāo)記語言的縮寫是超文本標(biāo)記語言

2、的縮寫(HyperText Mark-up (HyperText Mark-up Language),Language),是一種描述文檔結(jié)構(gòu)的語言，使用描述是一種描述文檔結(jié)構(gòu)的語言，使用描述性的標(biāo)記符性的標(biāo)記符( (稱為標(biāo)記碼稱為標(biāo)記碼) )來指明文檔的不同內(nèi)容。來指明文檔的不同內(nèi)容。用用HTMLHTML語言寫的頁面是普通的文本文檔，不含任何語言寫的頁面是普通的文本文檔，不含任何與平臺和程序相關(guān)的信息，不區(qū)分大小寫，可被任與平臺和程序相關(guān)的信息，不區(qū)分大小寫，可被任何文本編輯器讀取。何文本編輯器讀取。HTMLHTML文檔包含兩種信息：頁面本身的文本；表示頁文檔包含兩種信息：頁面本身的文本；表示

3、頁面元素、結(jié)構(gòu)、格式和其它超文本鏈接的面元素、結(jié)構(gòu)、格式和其它超文本鏈接的HTMLHTML標(biāo)簽。標(biāo)簽。標(biāo)記碼標(biāo)記碼是區(qū)分文本各個組成部分的分界符，用來是區(qū)分文本各個組成部分的分界符，用來把把HTMLHTML文檔劃分成不同的邏輯部分（或結(jié)構(gòu)），如文檔劃分成不同的邏輯部分（或結(jié)構(gòu)），如段落、標(biāo)題和表格等。標(biāo)記碼描述了文檔的結(jié)構(gòu)，段落、標(biāo)題和表格等。標(biāo)記碼描述了文檔的結(jié)構(gòu)，它向瀏覽器提供該文檔的格式化信息，以傳送文檔它向瀏覽器提供該文檔的格式化信息，以傳送文檔的外觀特征。的外觀特征。4 網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題 HTML HTML文件的正文內(nèi)容文件的正文內(nèi)容 HTMLHTML的標(biāo)記碼是由成對的標(biāo)記組成，書寫

4、格式為：的標(biāo)記碼是由成對的標(biāo)記組成，書寫格式為： 內(nèi)容內(nèi)容/ 標(biāo)記標(biāo)記與與等是每個等是每個HTMLHTML文檔必須包含的文檔必須包含的5 ：通知瀏覽器該文件含有通知瀏覽器該文件含有HTMLHTML標(biāo)記碼。標(biāo)記碼。 ：文件頭，是文件頭，是HTMLHTML文件第一部分的起始。文件第一部分的起始。 ：文件名，將顯示在瀏覽器的窗口。文件名，將顯示在瀏覽器的窗口。 ：是是HTMLHTML文件的第二部分，也是最大的文件的第二部分，也是最大的部分，它包含了可顯示的主題信息。例如：標(biāo)題、部分，它包含了可顯示的主題信息。例如：標(biāo)題、文字、圖形、表格、超級鏈接等用戶可以實際看文字、圖形、表格、超級鏈接等用戶可以實

5、際看到的東西。到的東西。常用的常用的HTMLHTML標(biāo)記符號及簡要說明標(biāo)記符號及簡要說明 6設(shè)置標(biāo)題設(shè)置標(biāo)題: :每一個網(wǎng)頁都應(yīng)該有一個標(biāo)題，格式為每一個網(wǎng)頁都應(yīng)該有一個標(biāo)題，格式為: :網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題 “網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題”中的文字顯示在瀏覽器的標(biāo)題欄中中的文字顯示在瀏覽器的標(biāo)題欄中添加標(biāo)題添加標(biāo)題: :在在HTMLHTML中有六種標(biāo)題，中有六種標(biāo)題，是最大標(biāo)題，是最大標(biāo)題，是最小標(biāo)題是最小標(biāo)題例如：例如： 一級標(biāo)題一級標(biāo)題 二級標(biāo)題二級標(biāo)題 三級標(biāo)題三級標(biāo)題 四級標(biāo)題四級標(biāo)題 7 設(shè)置正文段落設(shè)置正文段落: :使用使用和和，中間存放所有的，中間存放所有的文字、圖像和超級鏈接等文字、圖像和超

6、級鏈接等 例如：例如： 第一個段落第一個段落 第二個段落第二個段落 如果要強(qiáng)調(diào)某個單詞，可以使用粗體字標(biāo)題如果要強(qiáng)調(diào)某個單詞，可以使用粗體字標(biāo)題 或強(qiáng)調(diào)標(biāo)簽或強(qiáng)調(diào)標(biāo)簽 例如：例如：訪客訪客注意注意的問題的問題8 設(shè)置超級鏈接：設(shè)置超級鏈接：一個超級鏈接唯一地指向另一個一個超級鏈接唯一地指向另一個WebWeb信息頁信息頁 超級鏈接由兩部分組成：超級鏈接由兩部分組成：可被顯示在可被顯示在WebWeb瀏覽器瀏覽器中的超鏈接文本及圖像和用以描述當(dāng)超級鏈接被觸中的超鏈接文本及圖像和用以描述當(dāng)超級鏈接被觸發(fā)后要鏈結(jié)到何處的發(fā)后要鏈結(jié)到何處的URLURL信息。超鏈接標(biāo)記的格式為信息。超鏈接標(biāo)記的格式為: :

7、A HREF=“URL 超級鏈接文本及圖像超級鏈接文本及圖像 超鏈接文本會被加上一種特殊的顏色和下劃線，當(dāng)超鏈接文本會被加上一種特殊的顏色和下劃線，當(dāng)用戶鼠標(biāo)指向超鏈接時會變成手的形狀，屬性用戶鼠標(biāo)指向超鏈接時會變成手的形狀，屬性HREFHREF表明了超級鏈接被觸發(fā)后所指向的表明了超級鏈接被觸發(fā)后所指向的URLURL。9設(shè)置圖像：設(shè)置圖像：能被能被WebWeb瀏覽器直接解釋的圖像格式有：瀏覽器直接解釋的圖像格式有：GIFGIF格式；格式；X X位圖格式（位圖格式（.XBM.XBM文件）；文件）；JPEGJPEG格式（格式（.JPG.JPG、.JPEG.JPEG文件）文件）對圖像，可用對圖像，可

8、用ALIGNALIGN屬性定義圖與文本行的對齊屬性定義圖與文本行的對齊方式：方式：TOPTOP、MIDDLEMIDDLE、BOTTOMBOTTOM、LEFTLEFT、RIGHTRIGHT例如：例如：在網(wǎng)頁中插入名為在網(wǎng)頁中插入名為“aa.jpg”aa.jpg”的圖像，圖像的圖像，圖像寬度為寬度為100100個像素，高為個像素，高為120120個像素：個像素：10聲音和視頻聲音和視頻聲音文件有聲音文件有.WAV.WAV、.AU.AU、.SND.SND等等視頻文件有視頻文件有.AVI.AVI、.MPG.MPG等等WebWeb瀏覽器自身不能解釋聲音和視頻文件瀏覽器自身不能解釋聲音和視頻文件 例如：例

9、如：一段電影一段電影.用戶觸發(fā)這段超級鏈接后，用戶觸發(fā)這段超級鏈接后，WebWeb瀏覽器立即啟動瀏覽器立即啟動默認(rèn)的網(wǎng)絡(luò)視頻播放工具程序，如默認(rèn)的網(wǎng)絡(luò)視頻播放工具程序，如mplayermplayer程序程序來播放來播放cc1.avicc1.avi視頻文件。視頻文件。 11表格表格表格的表示為：表格的表示為：表表 格格 內(nèi)內(nèi) 容容定義表格標(biāo)題：定義表格標(biāo)題： 標(biāo)題內(nèi)容標(biāo)題內(nèi)容 定義表格列：定義表格列： 表格列內(nèi)容表格列內(nèi)容定義表頭資料：定義表頭資料：表頭內(nèi)容表頭內(nèi)容定義表格內(nèi)容：定義表格內(nèi)容：表格內(nèi)容表格內(nèi)容12表單：表單：用在客戶端提供一個人機(jī)交互界面，通過表用在客戶端提供一個人機(jī)交互界面，通

10、過表單可以將用戶輸入的數(shù)據(jù)提交給服務(wù)器。在服務(wù)器一單可以將用戶輸入的數(shù)據(jù)提交給服務(wù)器。在服務(wù)器一端，需要由端，需要由CGICGI（Common Gateway InterfaceCommon Gateway Interface）語言）語言編寫的程序進(jìn)行處理。表單的語法如下：編寫的程序進(jìn)行處理。表單的語法如下：表單的輸入域有以下幾種：表單的輸入域有以下幾種：提交（提交（SUBMITSUBMIT）：）：這是每個這是每個FROMFROM都有的。在瀏覽器都有的。在瀏覽器中這是一個按鈕，表示開始提交信息，激活服務(wù)器中這是一個按鈕，表示開始提交信息，激活服務(wù)器端的端的CGICGI程序。程序。文本（文本（T

11、EXTTEXT）：）：這是文本輸入域，用戶在通過它輸這是文本輸入域，用戶在通過它輸入信息。入信息。單選按鈕（單選按鈕（RADIORADIO）：）：類似與類似與WindowsWindows中的單選按鈕。中的單選按鈕。CHECKBOXCHECKBOX：多選按鈕。多選按鈕。選擇列表：選擇列表：SELECTIONSELECTION 13Dreamweaver MX 2004Dreamweaver MX 2004是一款專業(yè)的可視化網(wǎng)頁編是一款專業(yè)的可視化網(wǎng)頁編輯軟件，可用于對輯軟件，可用于對WebWeb站點、站點、WebWeb頁和頁和WebWeb應(yīng)用程序應(yīng)用程序進(jìn)行設(shè)計、編碼和開發(fā)。利用進(jìn)行設(shè)計、編碼和

12、開發(fā)。利用 Dreamweaver Dreamweaver 中的中的可視化編輯功能，可以快速地創(chuàng)建頁面而無需編寫可視化編輯功能，可以快速地創(chuàng)建頁面而無需編寫任何代碼。任何代碼。下面將介紹下面將介紹Dreamweaver MX 2004Dreamweaver MX 2004的工作界面、創(chuàng)的工作界面、創(chuàng)建站點、創(chuàng)建文檔、在文檔中插入文本、格式化文建站點、創(chuàng)建文檔、在文檔中插入文本、格式化文本、創(chuàng)建超級鏈接等創(chuàng)建基本網(wǎng)頁的操作方法。本、創(chuàng)建超級鏈接等創(chuàng)建基本網(wǎng)頁的操作方法。 1415“插入插入”欄：欄：包含用于將各種類型的包含用于將各種類型的“對象對象”( (如如圖像、表格和層圖像、表格和層) )插

13、入到文檔中的按鈕。每個對象都插入到文檔中的按鈕。每個對象都是一段是一段 HTML HTML 代碼，在插入時可設(shè)置不同的屬性代碼，在插入時可設(shè)置不同的屬性 “文檔文檔”工具：工具：包含各種按鈕，提供各種包含各種按鈕，提供各種“文檔文檔”窗口視圖窗口視圖( (如如“設(shè)計設(shè)計”視圖和視圖和“代碼代碼”視圖視圖) )的選項、的選項、各種查看選項和一些常用操作各種查看選項和一些常用操作“標(biāo)準(zhǔn)標(biāo)準(zhǔn)”工具欄工具欄: :包含包含“文件文件”和和“編輯編輯”菜單中菜單中的一般操作的按鈕：的一般操作的按鈕：“新建新建”、“打開打開”、“保存保存”、“保存全部保存全部”、“剪切剪切”、“復(fù)制復(fù)制”、“粘貼粘貼”、“

14、撤消撤消”和和“重做重做”16“文檔文檔”窗口窗口: :顯示當(dāng)前創(chuàng)建和編輯的文檔顯示當(dāng)前創(chuàng)建和編輯的文檔, ,有有3 3種種視圖方式視圖方式: :“設(shè)計設(shè)計”視圖：視圖：是用于可視化頁面布局、可視化是用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計環(huán)境編輯和快速應(yīng)用程序開發(fā)的設(shè)計環(huán)境 “代碼代碼”視圖：視圖：是用于編寫和編輯是用于編寫和編輯HTMLHTML等語言代等語言代碼以及任何其他類型代碼的手工編碼環(huán)境碼以及任何其他類型代碼的手工編碼環(huán)境“代碼和設(shè)計代碼和設(shè)計”視圖：視圖：可使用戶在單個窗口中同可使用戶在單個窗口中同時看到同一文檔的時看到同一文檔的“代碼代碼”視圖和視圖和“設(shè)計設(shè)計”

15、視圖視圖“屬性檢查器屬性檢查器”: :也叫也叫“屬性屬性”欄或欄或“屬性屬性”面板，面板，用于查看和更改所選對象或文本的各種屬性。用于查看和更改所選對象或文本的各種屬性。17標(biāo)簽選擇器標(biāo)簽選擇器: :位于位于“文檔文檔”窗口底部的狀態(tài)欄中，窗口底部的狀態(tài)欄中，它顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。它顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。面板組面板組: :是組合在一個標(biāo)題下面的相關(guān)面板的集合。是組合在一個標(biāo)題下面的相關(guān)面板的集合。若要展開一個面板組，請單擊組名稱左側(cè)的展開箭若要展開一個面板組，請單擊組名稱左側(cè)的展開箭頭；若要取消停靠一個面板組，請拖動該組標(biāo)題欄頭；若要取消?？恳粋€面板組，請拖動

16、該組標(biāo)題欄左邊緣的手柄。左邊緣的手柄。“文件文件”面板面板: :可以管理文件和文件夾，無論它們可以管理文件和文件夾，無論它們屬于屬于 Dreamweaver Dreamweaver 站點的一部分還是位于遠(yuǎn)程服務(wù)站點的一部分還是位于遠(yuǎn)程服務(wù)器上，非常類似于器上，非常類似于 Windows Windows 資源管理器。資源管理器。18站點：站點：一系列通過各種鏈接關(guān)聯(lián)起來的邏輯上可以一系列通過各種鏈接關(guān)聯(lián)起來的邏輯上可以視為一個整體的一些網(wǎng)頁，它可以大到整個網(wǎng)站，視為一個整體的一些網(wǎng)頁，它可以大到整個網(wǎng)站，也可以小到一個網(wǎng)頁。嚴(yán)格地說，站點也是一種文也可以小到一個網(wǎng)頁。嚴(yán)格地說，站點也是一種文檔的

17、磁盤組織形式，它同樣是由文檔和文檔所在的檔的磁盤組織形式，它同樣是由文檔和文檔所在的文件夾組成。文件夾組成。一般情況下，網(wǎng)站都有一個首頁，或者說主頁，作一般情況下，網(wǎng)站都有一個首頁，或者說主頁，作為網(wǎng)站的開始點。首頁的作用一般像是一本書的目為網(wǎng)站的開始點。首頁的作用一般像是一本書的目錄，使訪問者能夠了解網(wǎng)站的內(nèi)容。首頁的名稱一錄，使訪問者能夠了解網(wǎng)站的內(nèi)容。首頁的名稱一般是固定的，例如般是固定的，例如index.htmindex.htm或或default.htmdefault.htm等（具等（具體名稱由體名稱由WebWeb服務(wù)器確定）。服務(wù)器確定）。19選擇選擇“站點站點/ /管理站點管理站點

18、”菜單命令，打開菜單命令，打開“管理站點管理站點”對話框，在該對話框中單擊對話框，在該對話框中單擊“新建新建”按鈕，打開按鈕，打開“站站點定義點定義”導(dǎo)航頁面導(dǎo)航頁面 輸入站點名稱輸入站點名稱定位到建立的站點文件夾定位到建立的站點文件夾選擇不連接到遠(yuǎn)程服務(wù)器選擇不連接到遠(yuǎn)程服務(wù)器站點建好后，可以將設(shè)計網(wǎng)頁需要用的一些素材，如：站點建好后，可以將設(shè)計網(wǎng)頁需要用的一些素材，如：圖片、動畫、聲音文件等拷貝到站點目錄下，最好在圖片、動畫、聲音文件等拷貝到站點目錄下，最好在站點目錄下再建子目錄，將各種素材分類存放。站點目錄下再建子目錄，將各種素材分類存放。20 打開網(wǎng)頁文檔：打開網(wǎng)頁文檔：執(zhí)行執(zhí)行“文件

19、文件/ /打開打開”菜單命令菜單命令 保存網(wǎng)頁文檔：保存網(wǎng)頁文檔：執(zhí)行執(zhí)行“文件文件/ /保存保存”菜單命令菜單命令 執(zhí)行執(zhí)行“文件文件/ /另存為另存為”菜單命令菜單命令 執(zhí)行執(zhí)行“文件文件/ /關(guān)閉關(guān)閉”菜單命令菜單命令 新建網(wǎng)頁文檔：新建網(wǎng)頁文檔：執(zhí)行執(zhí)行“文件文件/ /新建新建”菜單命令菜單命令 21 插入普通文本：插入普通文本：即漢字或英文文本，先將光標(biāo)定位到即漢字或英文文本，先將光標(biāo)定位到要輸入文字的地方，然后直接輸入文字。需要換行則要輸入文字的地方，然后直接輸入文字。需要換行則按按“Shift + Enter”Shift + Enter”鍵，需要分段則按鍵，需要分段則按“Ente

20、r”Enter”鍵。鍵。 插入特殊符號：插入特殊符號：在在“插入插入/HTML/HTML/特殊字符（特殊字符（C C）”的的子菜單下可以插入多種特殊符號子菜單下可以插入多種特殊符號插入水平線：插入水平線：將插入點定位到要插入水平線的位置，將插入點定位到要插入水平線的位置，并執(zhí)行以下操作之一：并執(zhí)行以下操作之一：選擇選擇“插入插入/HTML/HTML/水平線水平線”菜單命令菜單命令在插入欄在插入欄“HTML”HTML”選項卡中單擊選項卡中單擊“水平線水平線”按鈕按鈕插入日期：插入日期：執(zhí)行執(zhí)行“插入插入/ /日期日期”菜單命令菜單命令22 文本格式設(shè)置與文本格式設(shè)置與WORDWORD類似?？蓪ξ?/p>

21、本的字體、大小、類似?？蓪ξ谋镜淖煮w、大小、顏色和對齊方式等進(jìn)行設(shè)置。顏色和對齊方式等進(jìn)行設(shè)置。先選中要格式化的文本，在屬性檢查器中進(jìn)行設(shè)置先選中要格式化的文本，在屬性檢查器中進(jìn)行設(shè)置 段落段落樣式樣式顏色顏色對齊對齊鏈接鏈接字體字體大小大小頁面頁面加編號加編號23 選中要創(chuàng)建超鏈接的文字或圖片選中要創(chuàng)建超鏈接的文字或圖片, ,在在“屬性檢查器屬性檢查器”的的“鏈接鏈接”文本框中輸入目標(biāo)文件的文本框中輸入目標(biāo)文件的URLURL，或者單擊，或者單擊 “瀏覽文件瀏覽文件”按鈕，在站點中選擇一個文件作為超按鈕，在站點中選擇一個文件作為超鏈接的目標(biāo)文件。鏈接的目標(biāo)文件。 鏈接鏈接24 導(dǎo)航條能十分有效

22、地實現(xiàn)超級鏈接功能，它總結(jié)了導(dǎo)航條能十分有效地實現(xiàn)超級鏈接功能，它總結(jié)了整個站點主要頁面的關(guān)鍵詞，一般將他們排列在主整個站點主要頁面的關(guān)鍵詞，一般將他們排列在主頁上，通過單擊導(dǎo)航條上的鏈接，就可以跳轉(zhuǎn)到相頁上，通過單擊導(dǎo)航條上的鏈接，就可以跳轉(zhuǎn)到相應(yīng)的頁面進(jìn)行瀏覽。應(yīng)的頁面進(jìn)行瀏覽。將插入點定位到要插入導(dǎo)航條的地方，在將插入點定位到要插入導(dǎo)航條的地方，在“插入插入”欄的欄的“常用常用”類別中，單擊類別中，單擊“圖像圖像”菜單并選擇菜單并選擇“插入導(dǎo)航條插入導(dǎo)航條”按鈕，在出現(xiàn)按鈕，在出現(xiàn)“插入導(dǎo)航條插入導(dǎo)航條”對話對話框中進(jìn)行設(shè)置并完成導(dǎo)航條的創(chuàng)建工作框中進(jìn)行設(shè)置并完成導(dǎo)航條的創(chuàng)建工作25 電

23、子郵件超鏈接就是指當(dāng)瀏覽者單擊該超鏈接時，電子郵件超鏈接就是指當(dāng)瀏覽者單擊該超鏈接時，系統(tǒng)會啟動客戶端電子郵件程序并打開系統(tǒng)會啟動客戶端電子郵件程序并打開“新郵件新郵件”窗口，使訪問者能方便地撰寫電子郵件。窗口，使訪問者能方便地撰寫電子郵件。創(chuàng)建電子郵件超鏈接的步驟：創(chuàng)建電子郵件超鏈接的步驟：將光標(biāo)定位到需要插入電子郵件鏈接的位置將光標(biāo)定位到需要插入電子郵件鏈接的位置在文檔窗口中的在文檔窗口中的“插入欄插入欄”中選擇中選擇“常用常用”標(biāo)簽，標(biāo)簽，單擊單擊“電子郵件鏈接電子郵件鏈接”按鈕按鈕 在在“電子郵件鏈接電子郵件鏈接”對話框的對話框的“文本文本” ” 框中輸框中輸入用于超鏈接的文本，在入用

24、于超鏈接的文本，在“E-mail”E-mail”文本框中輸文本框中輸入電子郵件地址，單擊入電子郵件地址，單擊“確定確定”按鈕。按鈕。26 受網(wǎng)絡(luò)帶寬和瀏覽器的限制，在受網(wǎng)絡(luò)帶寬和瀏覽器的限制，在 Web Web 上常用的圖像上常用的圖像格式只包括格式只包括GIFGIF、JPEGJPEG和和PNGPNG三種。三種。插入圖像的步驟如下：插入圖像的步驟如下：將光標(biāo)置于要插入圖像的位置，在將光標(biāo)置于要插入圖像的位置，在“插入插入”欄的欄的“常用常用”選項卡中單擊選項卡中單擊“圖像圖像”按鈕或選擇按鈕或選擇“插插入入”菜單中的菜單中的“圖像圖像”命令命令在在“選擇圖像源文件選擇圖像源文件”對話框中選取存

25、放在站點對話框中選取存放在站點中的圖像文件，最后單擊中的圖像文件，最后單擊“確認(rèn)確認(rèn)”按鈕按鈕如果所選擇的圖像文件不是站點中的文件，則將如果所選擇的圖像文件不是站點中的文件，則將打開打開“Macromedia Dreamweaver MX 2004”Macromedia Dreamweaver MX 2004”對話對話框，提示是否將圖像文件保存到根目錄下，單擊框，提示是否將圖像文件保存到根目錄下，單擊“是是”按鈕按鈕 27 插入插入FlashFlash動畫動畫 插入插入FlashFlash動畫之前應(yīng)首先在動畫之前應(yīng)首先在FlashFlash制作軟件中制作軟件中完成完成FlashFlash動畫的

26、制作，并且最好將其制作好后保動畫的制作，并且最好將其制作好后保存在站點相應(yīng)文件夾中。存在站點相應(yīng)文件夾中。插入插入 Flash Flash 按鈕按鈕 在在Dreamweaver MX 2004Dreamweaver MX 2004中可以插入自己制作的中可以插入自己制作的FlashFlash按鈕，也可以插入按鈕，也可以插入Dreamweaver MX 2004Dreamweaver MX 2004集成集成的動態(tài)按鈕的動態(tài)按鈕 插入插入 Flash Flash 文本文本 FlashFlash文本是文本是Dreamweaver MX 2004Dreamweaver MX 2004中集成的文中集成的文

27、本動畫。插入本動畫。插入FlashFlash文本與插入文本與插入FlashFlash按鈕類似按鈕類似 28 插入聲音文件插入聲音文件 有多種不同類型的聲音文件和格式可以插入，有多種不同類型的聲音文件和格式可以插入，例如例如 .wav.wav、.midi .midi 和和 .mp3.mp3。插入插入ShockwaveShockwave影片影片 Shockwave Shockwave 作為作為 Web Web 上用于交互式多媒體的上用于交互式多媒體的 Macromedia Macromedia 標(biāo)準(zhǔn)，是一種經(jīng)壓縮的格式，其擴(kuò)展標(biāo)準(zhǔn)，是一種經(jīng)壓縮的格式，其擴(kuò)展名為：名為：.dcr.dcr，.dir.

28、dir或或.dxr.dxr，可以從網(wǎng)上獲取。，可以從網(wǎng)上獲取。插入視頻插入視頻 可以通過不同方式和使用不同格式將視頻添加可以通過不同方式和使用不同格式將視頻添加到到 Web Web 頁面。視頻可被下載給用戶，或者可以在頁面。視頻可被下載給用戶，或者可以在下載它的同時播放它。下載它的同時播放它。29 表單：表單：是用于實現(xiàn)瀏覽者與網(wǎng)頁制作者之間信息交是用于實現(xiàn)瀏覽者與網(wǎng)頁制作者之間信息交互的一種網(wǎng)頁對象，例如：郵箱登錄時的對話窗口，互的一種網(wǎng)頁對象，例如：郵箱登錄時的對話窗口，要求用戶輸入用戶名和密碼，確定后提交給服務(wù)器要求用戶輸入用戶名和密碼，確定后提交給服務(wù)器驗證，驗證通過后你才能進(jìn)入郵箱。

29、驗證，驗證通過后你才能進(jìn)入郵箱。在在Dreamweaver MX 2004Dreamweaver MX 2004中創(chuàng)建表單網(wǎng)頁，要進(jìn)行中創(chuàng)建表單網(wǎng)頁，要進(jìn)行以下幾步：以下幾步：創(chuàng)建表單并對其進(jìn)行屬性設(shè)置，創(chuàng)建表單并對其進(jìn)行屬性設(shè)置，向表單中添加需要的表單對象（如文本框、按向表單中添加需要的表單對象（如文本框、按鈕等），設(shè)置其屬性，鈕等），設(shè)置其屬性，創(chuàng)建后臺處理程序。創(chuàng)建后臺處理程序。30創(chuàng)建表單創(chuàng)建表單將插入點定位到要創(chuàng)建表單的位置將插入點定位到要創(chuàng)建表單的位置執(zhí)行執(zhí)行“插入插入/ /表單表單/ /表單表單”菜單命令，在編輯窗菜單命令，在編輯窗口中插入表單口中插入表單設(shè)置表單屬性設(shè)置表單屬性

30、將插入點定位到插入的表單中，打開將插入點定位到插入的表單中，打開“屬性檢屬性檢查器查器”進(jìn)行設(shè)置進(jìn)行設(shè)置31 表單是一個容器表單是一個容器，只有在表單中添加了表單對象后，只有在表單中添加了表單對象后才能使用。才能使用。表單對象有：表單對象有：文本字段、隱藏域、文本區(qū)域、復(fù)選文本字段、隱藏域、文本區(qū)域、復(fù)選框、單選按鈕、單選按鈕組、列表框、單選按鈕、單選按鈕組、列表/ /菜單、跳轉(zhuǎn)菜單、菜單、跳轉(zhuǎn)菜單、圖像域、文件域、按鈕、標(biāo)簽、字段集。圖像域、文件域、按鈕、標(biāo)簽、字段集。插入欄插入欄32表格是頁面布局中最常用的手段表格是頁面布局中最常用的手段Dreamweaver MX 2004Dreamwe

31、aver MX 2004中的表格技術(shù)不僅支持有序地中的表格技術(shù)不僅支持有序地排列數(shù)據(jù)，還可在其中插入文本、圖像及其他元素排列數(shù)據(jù)，還可在其中插入文本、圖像及其他元素在在“文檔文檔”窗口的窗口的“設(shè)計設(shè)計”視圖中，將插入點放在視圖中，將插入點放在需要表格出現(xiàn)的位置，在需要表格出現(xiàn)的位置，在“插入插入”欄的欄的“常用常用”類類別中，執(zhí)行別中，執(zhí)行“插入插入/ /表格表格”菜單命令，即會出現(xiàn)菜單命令，即會出現(xiàn)“表表格格”對話框?qū)υ捒?33 選擇整個表格選擇整個表格選擇行或列選擇行或列選擇單元格選擇單元格合并單元格合并單元格：用：用“修改修改/ /表格表格/ /合并單元格合并單元格”命令命令 插入行或

32、列插入行或列：用：用“修改修改/ /表格表格/ /插入列插入列”命令命令 刪除行或列刪除行或列：用：用“修改修改/ /表格表格/ /刪除行刪除行”命令命令設(shè)置表格屬性、設(shè)置單元格屬性設(shè)置表格屬性、設(shè)置單元格屬性選中整個表格，在選中整個表格，在“屬性檢查器屬性檢查器”面板中進(jìn)行設(shè)面板中進(jìn)行設(shè)置，各功能與置，各功能與EXCELEXCEL軟件相似軟件相似34利用表格將網(wǎng)頁內(nèi)容分成若干個區(qū)，然后將相應(yīng)的利用表格將網(wǎng)頁內(nèi)容分成若干個區(qū)，然后將相應(yīng)的內(nèi)容分別填入不同的表格中，著名的門戶網(wǎng)站內(nèi)容分別填入不同的表格中，著名的門戶網(wǎng)站“新新浪浪”的頁面就是用表格進(jìn)行布局的。的頁面就是用表格進(jìn)行布局的。一般用表格

33、定位來布局網(wǎng)頁都分成一般用表格定位來布局網(wǎng)頁都分成“標(biāo)題和導(dǎo)航區(qū)標(biāo)題和導(dǎo)航區(qū)”與與“正文區(qū)正文區(qū)”兩大部分。兩大部分。“標(biāo)題和導(dǎo)航區(qū)標(biāo)題和導(dǎo)航區(qū)”一般在網(wǎng)頁最上部，可由兩個大一般在網(wǎng)頁最上部，可由兩個大的表格組成：上面表格是圖片區(qū)，下面是導(dǎo)航區(qū)。的表格組成：上面表格是圖片區(qū)，下面是導(dǎo)航區(qū)。 “正文區(qū)正文區(qū)”是由一個多行多列的大表格構(gòu)建而成，是由一個多行多列的大表格構(gòu)建而成，其中每一行、列再通過插入單獨的表格或者拆分的其中每一行、列再通過插入單獨的表格或者拆分的方法來形成多個區(qū)域并輸入相應(yīng)的信息。方法來形成多個區(qū)域并輸入相應(yīng)的信息。35執(zhí)行執(zhí)行“查看查看/ /表格模式表格模式/ /布局模式布局模

34、式”菜單命令，在布局菜單命令，在布局面板中選擇面板中選擇“布局布局”按鈕，使窗口處于按鈕，使窗口處于“布局模式布局模式”創(chuàng)建布局表格創(chuàng)建布局表格創(chuàng)建布局單元格創(chuàng)建布局單元格在布局單元格中添加內(nèi)容在布局單元格中添加內(nèi)容調(diào)整布局表格調(diào)整布局表格調(diào)整布局單元格調(diào)整布局單元格設(shè)置布局表格和單元格設(shè)置布局表格和單元格用布局模式布局頁面是在用布局模式布局頁面是在添加內(nèi)容前才創(chuàng)建布局表添加內(nèi)容前才創(chuàng)建布局表格和布局單元格。如，可格和布局單元格。如，可沿頁的頂部繪制一個單元沿頁的頂部繪制一個單元格放置標(biāo)題圖形，在頁的格放置標(biāo)題圖形，在頁的左邊繪制另一個單元格放左邊繪制另一個單元格放置導(dǎo)航條，在右邊繪制第置導(dǎo)航

35、條，在右邊繪制第三個單元格放置內(nèi)容。三個單元格放置內(nèi)容。36框架頁面將瀏覽器的顯示窗口分為多個顯示區(qū)域，框架頁面將瀏覽器的顯示窗口分為多個顯示區(qū)域，每個顯示窗口稱為一個框架，它包含一個單獨的、可每個顯示窗口稱為一個框架，它包含一個單獨的、可以滾動的頁面。幾個框架組合在一起就構(gòu)成了框架集。以滾動的頁面。幾個框架組合在一起就構(gòu)成了框架集。選中框架選中框架創(chuàng)建框架創(chuàng)建框架在框架中添加內(nèi)容在框架中添加內(nèi)容保存框架保存框架設(shè)置框架屬性設(shè)置框架屬性框架的最常見用途就是導(dǎo)框架的最常見用途就是導(dǎo)航。一組框架通常包括一航。一組框架通常包括一個含有導(dǎo)航條的框架和另個含有導(dǎo)航條的框架和另一個要顯示主要內(nèi)容頁面一個要

36、顯示主要內(nèi)容頁面的框架。的框架。37訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相關(guān)的圖形。相關(guān)的圖形。每個框架都具有自己的滾動條，因此訪問者可以獨每個框架都具有自己的滾動條，因此訪問者可以獨立滾動這些框架。立滾動這些框架。 例如：例如：當(dāng)框架中的內(nèi)容頁面較長時，如果導(dǎo)航當(dāng)框架中的內(nèi)容頁面較長時，如果導(dǎo)航條位于不同的框架中，那么向下滾動到頁面底部的條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不需要再滾動回頂部來使用導(dǎo)航條。訪問者就不需要再滾動回頂部來使用導(dǎo)航條。使用框架也有一些缺點，如：可能難以實現(xiàn)不同框使用框架也有一些缺點，如：可能難以實現(xiàn)

37、不同框架中各元素的精確圖形對齊以及對導(dǎo)航進(jìn)行測試可架中各元素的精確圖形對齊以及對導(dǎo)航進(jìn)行測試可能很耗時間等。能很耗時間等。38 現(xiàn)代網(wǎng)頁制作離不開現(xiàn)代網(wǎng)頁制作離不開 CSS技術(shù)，使用它可以對網(wǎng)頁技術(shù)，使用它可以對網(wǎng)頁中的布局元素（如表格）、字體、顏色、背景、鏈中的布局元素（如表格）、字體、顏色、背景、鏈接效果和其他圖文效果實現(xiàn)更加精確的控制，并顯接效果和其他圖文效果實現(xiàn)更加精確的控制，并顯示更好效果。示更好效果。CSS樣式不僅可以在一個頁面中使用，樣式不僅可以在一個頁面中使用，而且可以用于其他多個頁面。而且可以用于其他多個頁面。創(chuàng)建層疊樣式創(chuàng)建層疊樣式設(shè)置層疊樣式設(shè)置層疊樣式 管理層疊樣式管理

38、層疊樣式 應(yīng)用層疊樣式應(yīng)用層疊樣式 39站點中所有頁面制作好后要對整個網(wǎng)站進(jìn)行測試站點中所有頁面制作好后要對整個網(wǎng)站進(jìn)行測試測試最基本的方法就是在瀏覽器中測試每一個頁面，測試最基本的方法就是在瀏覽器中測試每一個頁面，看內(nèi)容是否能正確顯示，尤其要測試超鏈接是否能看內(nèi)容是否能正確顯示，尤其要測試超鏈接是否能正確工作。正確工作。進(jìn)一步測試超鏈接的正確性的方法：將整個站點目進(jìn)一步測試超鏈接的正確性的方法：將整個站點目錄復(fù)制到另外一個位置，然后在瀏覽器中打開站點錄復(fù)制到另外一個位置，然后在瀏覽器中打開站點首頁，測試是否所有的超鏈接都能正確工作。首頁，測試是否所有的超鏈接都能正確工作。為了確保不同的瀏覽者能夠看到一致的頁面效果，為了確保不同的瀏覽者能夠看到一致的頁面效果，網(wǎng)站還應(yīng)在不同的顯示分辨率下進(jìn)行測試，至少要網(wǎng)站還應(yīng)在不同的顯示分辨率下進(jìn)行測試，至少要在在 800800600600和和10241024768768兩種分辨率下進(jìn)行測試兩種分辨率下進(jìn)行測試在不同字體顯示大小情況下