Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)電子教案(全)完整版課件整套教學(xué)課件

1、第1章 走進(jìn) Dreamweaver 網(wǎng)頁(yè)基本概念 認(rèn)識(shí)Dreamweaver 網(wǎng)頁(yè)的構(gòu)成元素 網(wǎng)頁(yè)的設(shè)計(jì)與規(guī)劃本章學(xué)習(xí)知識(shí)點(diǎn)開(kāi)始上一張下一張返回1.1 第一個(gè)主頁(yè)：基本操作 本章內(nèi)容目錄1.2 學(xué)生成績(jī)表：表格的應(yīng)用 1.3 學(xué)生成績(jī)分類(lèi)匯總:表格綜合應(yīng)用 1.4 圖片應(yīng)用：網(wǎng)上花店 1.5 小說(shuō)封面：圖像映射 1.6 層的使用：使用層編排網(wǎng)頁(yè) 1.7 框架技術(shù)：星座介紹 1.8 插入Java Applet：焰火晚會(huì) 1. 9 插入Flash：在線游戲 本章內(nèi)容目錄1.10 插入視頻和聲音 1.11 本章小結(jié)1.12 本章習(xí)題1.1 基本操作 1.1.1 網(wǎng)頁(yè)的基本概念網(wǎng)頁(yè)：通常是HTML格

2、式（文件擴(kuò)展名為.html或.htm）。網(wǎng)頁(yè)通常用圖像來(lái)提供圖畫(huà)，網(wǎng)頁(yè)要透過(guò)網(wǎng)頁(yè)瀏覽器來(lái)閱讀。 HTML語(yǔ)言：HTML的全稱是Hyper Text Markup Language，中文翻譯為“超文本標(biāo)記語(yǔ)言”。它的特點(diǎn)是用語(yǔ)言來(lái)設(shè)計(jì)網(wǎng)頁(yè)，但是其實(shí)質(zhì)和通過(guò)Dreamweaver可視化軟件設(shè)計(jì)頁(yè)面是一致的。 示例：北京航空航天大學(xué)圖書(shū)館主頁(yè)HTML代碼結(jié)合可視化設(shè)計(jì)超文本標(biāo)記“容器”頁(yè)頭“容器”這對(duì)標(biāo)簽之間是該超文本文檔文檔頭。對(duì)該超文本文檔的定義、說(shuō)明、描述等都在這部份。主體部份“容器”這對(duì)標(biāo)簽之間是該超文本文檔的具體內(nèi)容。該網(wǎng)頁(yè)要傳送的信息基本上都在這一部份。1.1.2 第一個(gè)網(wǎng)頁(yè)的制作Hel

3、lo World!1. 啟動(dòng)Dreamweaver2. 新建網(wǎng)頁(yè)文檔3. 在編輯窗口中輸入文字4. 按F12鍵觀察效果1.2 學(xué)生成績(jī)表 1.2.1 表格的基本概念1.2.2 插入表格的三種方法表格是網(wǎng)頁(yè)中最重要的工具之一。作為一個(gè)基本的網(wǎng)頁(yè)構(gòu)成應(yīng)該以表格為基礎(chǔ)，搭配其他的輔助排版工具，使頁(yè)面達(dá)到最佳的設(shè)計(jì)效果。 1.2.3 表格的屬性設(shè)置1.2.4 制作學(xué)生成績(jī)表通過(guò)設(shè)置輸入表格對(duì)話框來(lái)制作一個(gè)表格 在表格內(nèi)的各個(gè)單元格內(nèi)，插入文本，并且選擇居中對(duì)齊 1.3 學(xué)生成績(jī)分類(lèi)匯總1.3.1 基本概念和操作增加行和列單擊一個(gè)單元格，執(zhí)行菜單 修改-表格-插入行，則在光標(biāo)所在行的上面插入新的一行。同

4、樣，執(zhí)行 修改-表格-插入列，則在光標(biāo)左側(cè)插入新的一列增加多行或者列執(zhí)行 修改-表格-插入行或列 在彈出對(duì)話框中設(shè)置無(wú)論文本、圖像、動(dòng)畫(huà)等，一切在網(wǎng)頁(yè)中可以插入的對(duì)象，在表格或者單元格中都可以插入。插入方法基本相同，將光標(biāo)置于表格或者單元格中，就可以執(zhí)行相應(yīng)的操作所插入的對(duì)象，同樣可以在屬性面板中進(jìn)行編輯表格的嵌套可插入對(duì)象的類(lèi)型Dreamwaver8 內(nèi)置了多種基于顏色搭配的表格樣式，可以從中選擇合適的樣式來(lái)使用。執(zhí)行菜單 命令-格式化表格制作格式化表格1.3.2 制作成績(jī)列表首先插入一個(gè)7行6列的表格將第一行的單元格合并設(shè)置表格的顏色第一行設(shè)置顏色為黃色，RGB值為#FFFF00 第一行一

5、下設(shè)置顏色為綠色，RGB值為#CCFF00 插入表格內(nèi)容刪除行高和列寬1.4 網(wǎng)上花店圖像是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的重要組成部分。但作為網(wǎng)頁(yè)設(shè)計(jì)人員應(yīng)該考慮到網(wǎng)頁(yè)的大小，從而照顧到各種用戶的需求。下面這個(gè)例子就來(lái)介紹如何對(duì)網(wǎng)頁(yè)圖像進(jìn)行處理，使得在保持圖形美麗與網(wǎng)站風(fēng)格搭配的基礎(chǔ)之上，力求圖片能夠變得更小。 設(shè)置圖像大小 設(shè)置圖像超鏈接 設(shè)置圖像對(duì)齊方式 設(shè)置圖像替換 低分辨率載入 1.4.1 基本概念新建表格，并將光標(biāo)置于某一個(gè)單元格內(nèi)。在屬性面板中，單擊瀏覽文件按鈕，彈出選擇文件對(duì)話框。選擇插入圖片。當(dāng)插入的圖片不在站點(diǎn)根目錄或者其子目錄中，則軟件會(huì)提示是否需要復(fù)制一份拷貝文件到相應(yīng)的根文件夾中

6、。1.4.2 上機(jī)操作進(jìn)行圖文混排的時(shí)候，也就是需要選擇在表格同一單元格內(nèi)，既要插入圖片，也要插入文字，選擇其兩者之間的對(duì)齊方式。加入文本替換，可以實(shí)現(xiàn)當(dāng)瀏覽者把鼠標(biāo)定位于某個(gè)網(wǎng)頁(yè)元素上的時(shí)候，自動(dòng)彈出說(shuō)明文本，幫助瀏覽者理解。最終完成的網(wǎng)頁(yè)效果圖1.5 小說(shuō)封面圖像映射：一種在頁(yè)面上局部區(qū)域鏈接的功能。這些形狀區(qū)域可以稱作“熱點(diǎn)”或“熱區(qū)”。當(dāng)用戶單擊某個(gè)“熱點(diǎn)”時(shí)，就完成指定的任務(wù)，這個(gè)任務(wù)可以是進(jìn)入超鏈接地址，也可以是激發(fā)某中網(wǎng)頁(yè)行為。 虛擬連接：在網(wǎng)頁(yè)設(shè)計(jì)的初期，往往并不需要真正實(shí)現(xiàn)某些標(biāo)題或者圖片的連接，僅僅提示設(shè)計(jì)者在后續(xù)的工作中需要實(shí)現(xiàn)此功能。在屬性面板的鏈接文本框內(nèi)插入字符“#

7、”即可。1.5.1 基本概念插入圖片，并且為圖片中的某一個(gè)區(qū)域繪制對(duì)應(yīng)的“圖像映射”，也就是熱區(qū)。1.5.2 上機(jī)操作繪制后的效果1.6 層的使用1.6.1 基本概念層相當(dāng)于一個(gè)容器，可以包含所有在HTML文件中出現(xiàn)的元素。這里要注意和Photoshop的層不是一個(gè)概念。用戶可以隨便將這個(gè)容器放置在頁(yè)面的任何位置，從而使層中的元素在頁(yè)面中的地位達(dá)到像素級(jí)的精確度。層還可以與許多高級(jí)特性相連。例如，時(shí)間軸動(dòng)畫(huà)功能就必須用到層；行為控制層的顯示和隱藏，也可以對(duì)層進(jìn)行操作和控制，熟練使用這些功能可以做出生動(dòng)有趣的效果。 1.6.2 上機(jī)操作鼠標(biāo)在編輯窗口的背景上，單擊鼠標(biāo)右鍵，彈出右鍵菜單，選擇頁(yè)面

8、屬性。插入多個(gè)層，注意連續(xù)繪制多個(gè)層的技巧：按下Ctrl鍵，并畫(huà)出層。在編輯窗口的左上角對(duì)應(yīng)地顯示層的圖標(biāo)。在各個(gè)層內(nèi)插入對(duì)應(yīng)的圖像文件，完成制作。1.7 星座介紹框架主要用于將瀏覽器劃分為多個(gè)窗口，在各個(gè)窗口中顯示多個(gè)不同的HTML文檔。通過(guò)設(shè)定這些文檔之間的相互關(guān)系，從而實(shí)現(xiàn)文檔導(dǎo)航和文檔操作的目的。1.7.1 基本概念框架技術(shù)主要有兩種類(lèi)型的元素：一是框架集，另外一個(gè)是框架。 基于框架技術(shù)制作的BBS1.7.2 上機(jī)操作制作一個(gè)基本框架框架在框架的左側(cè)插入12行1列的表格，在右側(cè)插入2行1列的表格在左側(cè)的表格中插入星座圖片和文字在右側(cè)插入文字內(nèi)容，并且保存框架各個(gè)部分。1.8 焰火晚會(huì)J

9、ava是一種程序設(shè)計(jì)語(yǔ)言，Java Applet（Java程序）是在Java的基礎(chǔ)上形成的，它通過(guò)寫(xiě)入HTML語(yǔ)句中，在網(wǎng)頁(yè)中執(zhí)行一定的任務(wù)。Java Applet可看作是媒體的一種，所以可以用插入媒體的方式寫(xiě)進(jìn)網(wǎng)頁(yè)。 1.8.1 基本概念Java Applet在Dreamweaver中的顯示形式在編輯窗口中插入一個(gè)1行1列的表格，并且在表格內(nèi)插入Java Applet。插入的方法：將光標(biāo)置于表格單元格內(nèi)，并且切換到“代碼視圖”在代碼視圖中插入JavaScript語(yǔ)句,注意插入的位置不要隨意更換。1.8.2 上機(jī)操作將本例需要的聲音文件，以及實(shí)現(xiàn)Java Applet所以需要的一些文件拷貝到對(duì)

10、應(yīng)的網(wǎng)頁(yè)目錄中。實(shí)現(xiàn)后的效果如圖所示。用戶如果需要在黑夜中的焰火效果，請(qǐng)修改此代碼：將其改變?yōu)?.9 FLASH游戲1.9.1 基本概念Flash是網(wǎng)絡(luò)矢量動(dòng)畫(huà)的領(lǐng)跑者。文件小巧，速度快，特效精美，支持流媒體和強(qiáng)大的交互功能，成為網(wǎng)頁(yè)中最流行的動(dòng)畫(huà)格式。Flash源文件：（*.fla）該文件類(lèi)型是使用flash制作軟件創(chuàng)建的項(xiàng)目源文件，這種文件只能在flash制作軟件中打開(kāi)，具有再次編輯的功能。Flash電影文件：（*.swf）一種導(dǎo)出的flash文件，這種文件能夠在瀏覽器中直接播放，但是不能夠再次編輯。Dreamweaver中可以制作一些簡(jiǎn)單的Flash文件并且插入到網(wǎng)頁(yè)對(duì)象中，但是還是建議

11、讀者能學(xué)習(xí)使用FlashMX來(lái)制作更為專業(yè)的Flash文件。1.9.2 上機(jī)操作繪制表格，并且在第一個(gè)單元格內(nèi)插入一個(gè)Flash按鈕。 在其右側(cè)插入Flash文本。插入Flash游戲文件制作好的Flash游戲網(wǎng)頁(yè)1.10 插入音頻和視頻網(wǎng)頁(yè)中插入的主要音頻格式Midi或Mid ，Musical Instrument Digital interface直譯為“樂(lè)器數(shù)字接口”，為大多數(shù)瀏覽器支持，且不需要插件。聲音品質(zhì)很好，且文件較小。但是Mid文件不可以被錄制，且必須使用特殊的硬件和軟件在計(jì)算機(jī)上合成。Wav較高的聲音質(zhì)量，能夠?yàn)榇蠖鄶?shù)瀏覽器支持，且不需要插件。但文件較大。Aif或aiff較高質(zhì)

12、量，和wav相近。1.10.1 基本概念視頻常見(jiàn)格式Mpeg或Mpg一種壓縮比例較大的活動(dòng)圖像和聲音的視頻壓縮標(biāo)準(zhǔn)，也是VCD光盤(pán)所使用的標(biāo)準(zhǔn)。Avi一種MS windows操作系統(tǒng)所使用的多媒體文件格式WmvWindows操作系統(tǒng)自帶的媒體播放器Windows media player所使用的文件格式RmReal公司推廣的一種多媒體文件格式，具有很好的壓縮性能，網(wǎng)絡(luò)中應(yīng)用最廣泛的格式之一。MovApple公司推廣的多媒體文件格式1.10.2 上機(jī)操作插入音頻文件以類(lèi)似的操作插入視頻文件，并且按下F12進(jìn)行預(yù)覽1.11 總結(jié)提高本章是Dreamweaver學(xué)習(xí)的基本章節(jié)，重點(diǎn)是介紹了Dream

13、weaver軟件，以及插入圖片、文本、表格、層、框架、Java小程序以及靈活多樣的Flash文件。這些網(wǎng)頁(yè)的基本零件在各個(gè)實(shí)例的制作過(guò)程中遇到過(guò)，通過(guò)這些訓(xùn)練，大家就可以嘗試著制作自己的個(gè)人主頁(yè)等簡(jiǎn)單的網(wǎng)頁(yè)。 但是由于缺少了CSS樣式排版，缺少了ASP支持，缺少了數(shù)據(jù)庫(kù)的連接，這里制作出的網(wǎng)頁(yè)還只是一個(gè)靜態(tài)的沒(méi)有支持的簡(jiǎn)單網(wǎng)頁(yè)。如何使用上面提到的知識(shí)進(jìn)一步提升大家的網(wǎng)頁(yè)制作水平，就需要讀者認(rèn)真地學(xué)習(xí)后續(xù)章節(jié)。在此，筆者鼓勵(lì)讀者在課余多多瀏覽觀察制作的好的網(wǎng)頁(yè)，并且多練習(xí)，多模仿。 1.12 本章習(xí)題 一、填空題1創(chuàng)建超鏈接地址可以鏈接到不同的目標(biāo)，在網(wǎng)頁(yè)中創(chuàng)建超鏈接的目標(biāo)有： _、 _、 _、

14、 _等。 2在網(wǎng)頁(yè)中使用的圖像格式主要有_、 _、 _、 3種。3若要在調(diào)整圖像尺寸時(shí)保持其寬高比，在拖動(dòng)圖像右下角點(diǎn)的同時(shí)，按住_鍵。 4表格一般被劃分為_(kāi)、 _、 _ 3部分。5框架是由兩種元素_和_組成。 二、選擇題1創(chuàng)建虛擬鏈接使用的符號(hào)是：_A.B.#C.$D.* 2GIF格式的圖像的有點(diǎn)有_A.支持動(dòng)畫(huà)格式 B.持透明圖標(biāo) C.無(wú)損壓縮方式 D.支持24位真彩色 3單元格中可以插入的對(duì)象有_ 文本B. 圖像 C. Flash動(dòng)畫(huà) D. Java Applet4兩個(gè)命名圍巾Layer1和Layer2的層完全疊加在一起，要保證Layer1覆蓋層Layer2，之需要設(shè)置Layer1的Z值

15、_Layer2的Z索引值即可。A.大于B. 小于 C.等于D.都可以 第2章 CSS樣式表與模板 認(rèn)識(shí)CSS 使用CSS編輯器 背景樣式的定義 濾鏡的使用本章學(xué)習(xí)知識(shí)點(diǎn)開(kāi)始上一張下一張返回2.1文字和圖像的處理：生日賀卡 本章內(nèi)容目錄2.2 CSS樣式：獨(dú)具風(fēng)格的主頁(yè) 2.3 對(duì)文字運(yùn)用CSS濾鏡：藍(lán)色生死戀2.4 對(duì)圖像運(yùn)用CSS濾鏡：圖片濾鏡 2.5 層模板：海底世界 2.6 庫(kù)項(xiàng)目的應(yīng)用：公司主頁(yè) 2.7總結(jié)提高2.8本章習(xí)題 2.1.1 基本概念 2.1文字和圖像的處理：生日賀卡 CSS(Cascading Sytle Sheet，層疊樣式表)是用于增強(qiáng)和控制網(wǎng)頁(yè)樣式并允許將樣式信息與

16、網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。CSS樣式表也為他們提供的展示效果的項(xiàng)目給予更多的靈活性。屬性，例如顏色、背景、邊界、邊框和許多的更多都能被所有的元素所應(yīng)用。 定義CSS樣式 使用CSS樣式對(duì)文本樣式進(jìn)行修改打開(kāi)已經(jīng)準(zhǔn)備好的網(wǎng)頁(yè)素材2.1.2 上機(jī)操作打開(kāi)【CSS樣式】面板 打開(kāi)【新建CSS樣式】對(duì)話框，了解各個(gè)部分的功能 運(yùn)用CSS樣式表制作一張生日賀卡的文本樣式和背景樣式。使得頁(yè)面上的字體為“幼圓”，大小為“中”,顏色為淺藍(lán)，粗細(xì)為“細(xì)體”，并且有閃爍的效果。文本樣式的定義。 修改前的效果修改后的效果2.2 CSS樣式：獨(dú)具風(fēng)格的主頁(yè) 2.2.1 基本概念層疊樣式表比較簡(jiǎn)單、靈活、易學(xué)，能支

17、持任何瀏覽器。可以使用HTML標(biāo)簽或命名的方式定義，除可控制一些傳統(tǒng)的文本屬性外，例如字體、字號(hào)、顏色等，還可以控制一些比較特別的HTML屬性，例如對(duì)象位置、圖片效果、鼠標(biāo)指針等。使用CSS面板靈活應(yīng)用CSS樣式對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行修改 2.2.2 上機(jī)操作執(zhí)行【窗口】|【CSS樣式】選項(xiàng)，打開(kāi)【CSS樣式】面板，單擊按鈕，彈出【鏈接外部樣式表】對(duì)話框 執(zhí)行【窗口】|【CSS樣式】選項(xiàng)，打開(kāi)【CSS樣式】面板，單擊按鈕，彈出【鏈接外部樣式表】對(duì)話框，如圖2.10所示，從外部已有的CSS樣式表中選擇一個(gè)分配給當(dāng)前的頁(yè)面。 點(diǎn)擊【瀏覽】后，在彈出的【選擇樣式表文件】對(duì)話框中選擇CSS文件。如圖2.13所

18、示。 對(duì)比添加CSS樣式前后，網(wǎng)頁(yè)的差別添加CSS樣式前添加CSS樣式后2.3 對(duì)文字運(yùn)用CSS濾鏡：藍(lán)色生死戀2.3.1 基本概念CSS濾鏡實(shí)際上是CSS一個(gè)新的擴(kuò)展部分，使用這種技術(shù)簡(jiǎn)單的語(yǔ)法就可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個(gè)標(biāo)準(zhǔn)的HTML元素上，例如圖片、文本、以及其他一些對(duì)象，為頁(yè)面添加一些豐富的變化。 右側(cè)為一些常用的濾鏡，以及其功能說(shuō)明。Alpha設(shè)置透明效果Blend Trans 設(shè)置混合過(guò)渡效果Blur 設(shè)置模糊效果Chroma 將指定顏色設(shè)為透明DropShadow 設(shè)置投影陰影FlipH 設(shè)置水平翻轉(zhuǎn)FlipV 設(shè)置垂直翻轉(zhuǎn)Glow 設(shè)置發(fā)光效果Gray 產(chǎn)生灰階In

19、vert設(shè)置反轉(zhuǎn)底片效果Light 設(shè)置燈光投影效果Mask設(shè)置蔗遮罩效果RevealTrans設(shè)置顯示過(guò)渡效果Shadow 設(shè)置陰影效果Wave 設(shè)置水平與垂直波動(dòng)效果Xray 設(shè)置X光照效果CSS濾鏡常用的Alpha濾鏡Blur濾鏡FlipV濾鏡FlipH濾鏡2.3.2 上機(jī)操作輸入“藍(lán)色生死戀” 文本在【類(lèi)型】下將文字顏色選為白色，便于查看效果。在【擴(kuò)展】下的【過(guò)濾器】中列出的就是所有的CSS濾鏡，選擇Glow濾鏡，它可以使文字產(chǎn)生邊緣發(fā)光的效果。本例中我們?cè)O(shè)置Glow(Color=red, Strength=8)，即顏色為紅色（Red），發(fā)光強(qiáng)度為8，然后單擊【確定】。 我們還可以利用

20、Blur濾鏡制作動(dòng)感字，它的語(yǔ)法格式為Blur(Add=?, Direction=?, Strength=?)。我們定義Blur(Add=1, Direction=90, Strength=150) 通過(guò)把過(guò)濾器設(shè)置為DropShadow(Color=6699cc, OffX=4, OffY=4, Positive=1)來(lái)產(chǎn)生如圖2.20所示的陰影字 CSS不僅可以對(duì)文字進(jìn)行樣式的修改，還可以對(duì)表格進(jìn)行修改。l 區(qū)塊樣式的修改：精確定義整段文本中文字的字距，對(duì)齊方式等屬性l方框樣式的修改：大表格的外面加一條細(xì)細(xì)的邊框，可以使用邊框樣式邊框樣式的修改 ：定義特定元素的大小及其與周?chē)氐拈g距等屬

21、性2.4 對(duì)圖像運(yùn)用CSS濾鏡：圖片濾鏡 2.4.1 基本概念區(qū)塊定義方框定義邊框定義2.4.2 上機(jī)操作初始狀態(tài)執(zhí)行【窗口】|【CSS樣式】選項(xiàng)，打開(kāi)【CSS樣式】面板，單擊按鈕，在彈出的對(duì)話框中作出選擇選擇，然后單擊【確定】按鈕。在【盒子】下的【邊界】選項(xiàng)中，去掉【全部相同】選項(xiàng)前面的勾，將【右】和【下】選為“自動(dòng)”。將【邊框】下的【寬度】選項(xiàng)設(shè)為“細(xì)”，【顏色】的值設(shè)為FF0000。將【擴(kuò)展】下的【過(guò)濾器】設(shè)為Alpha(Opacity=30) 最終的網(wǎng)頁(yè)效果圖層是最早在圖形圖象處理中提出的一個(gè)概念，由于層的運(yùn)用使得平面設(shè)計(jì)師在處理圖像時(shí)可以多層操作、任意組合，從而大大提高了工作效率，也

22、使創(chuàng)作出的效果更加豐富。Dreamweaver中的層概念與圖像處理中層的概念不同，但它們都有一個(gè)共同點(diǎn)，就是層的重疊性。Dreamweaver中的層可以理解為浮動(dòng)在網(wǎng)頁(yè)上的一層透明紙，它可以被準(zhǔn)確地定位于網(wǎng)頁(yè)的任意位置，并且可以設(shè)置大小。作為一種網(wǎng)頁(yè)元素定位技術(shù)，使用層可以以像素為單位精確定位頁(yè)面元素。層還可以相互嵌套層，子層會(huì)繼承父層的特征，如可見(jiàn)性、移動(dòng)等。層在Dreamweaver中被認(rèn)為是一個(gè)對(duì)象，這樣就具有更多的特性，如制作動(dòng)畫(huà)、觸發(fā)動(dòng)作。如果要構(gòu)建一個(gè)十分酷的網(wǎng)頁(yè)，層的作用不能忽視。而對(duì)于層的應(yīng)用。2.5.1 基本概念2.5 層模板：海底世界 2.5.2 上機(jī)操作打開(kāi)要插入層的頁(yè)面

23、 插入層，并且在層中插入圖片和文本執(zhí)行【文件】【另存為模板】命令 打開(kāi)【另存為模板】對(duì)話框中，在【站點(diǎn)】下拉列表中設(shè)置模板保存的站點(diǎn)，并定義模板名稱后，單擊【保存】按鈕即可把當(dāng)前網(wǎng)頁(yè)轉(zhuǎn)換為模板，同時(shí)將模板另存到選擇的站點(diǎn)中 網(wǎng)頁(yè)最終的效果2.6 庫(kù)項(xiàng)目的應(yīng)用：公司主頁(yè) 2.6.1 基本概念在站點(diǎn)中，除了具有相同外觀的許多頁(yè)面外，還有一些需要經(jīng)常更新的頁(yè)面元素，例如版權(quán)聲明、站點(diǎn)導(dǎo)航欄，這些內(nèi)容與模板不同，它們只是頁(yè)面中的一部分，在各個(gè)頁(yè)面中的擺放位置可能不同，但內(nèi)容卻是一致的。那么，可以將這種內(nèi)容保存為一個(gè)庫(kù)文件，在需要的地方插入，在需要的時(shí)間快速更新。 庫(kù)與模板的作用一樣，也是一種保證網(wǎng)頁(yè)中

24、的部件能夠重復(fù)使用的工具。模板重復(fù)使用的是網(wǎng)頁(yè)的一部分結(jié)構(gòu)，而庫(kù)則提供了一種重復(fù)使用網(wǎng)頁(yè)對(duì)象的方法。2.6.2 上機(jī)操作使用庫(kù)面板，首先執(zhí)行【窗口】|【資源】命令，調(diào)出【資源】面板，單擊左側(cè)的庫(kù)按鈕，切換到庫(kù)面板 。單擊庫(kù)面板右下角的【新建庫(kù)項(xiàng)目】按鈕 雙擊新建的庫(kù)項(xiàng)目，打開(kāi)庫(kù)項(xiàng)目編輯窗口 為一個(gè)鮮花禮品公司的主頁(yè)創(chuàng)建并編輯庫(kù)項(xiàng)目。公司已經(jīng)設(shè)計(jì)好的主頁(yè)，直接將網(wǎng)頁(yè)中現(xiàn)有的對(duì)象元素轉(zhuǎn)換為庫(kù)文件 執(zhí)行【修改】|【庫(kù)】|【增加對(duì)象到庫(kù)】命令，將選中的內(nèi)容轉(zhuǎn)化為庫(kù)項(xiàng)目選中內(nèi)容反白，同時(shí)，庫(kù)項(xiàng)目?jī)?nèi)容出現(xiàn)在【庫(kù)】列表中，提示給新建的庫(kù)文件命名 制作一個(gè)網(wǎng)頁(yè)，并且選定插入點(diǎn)插入剛才保存的庫(kù)項(xiàng)目，立即顯示效果

25、2.7 總結(jié)提高本章重點(diǎn)介紹了Dreamweaver MX中CSS樣式表的使用，同時(shí)介紹了層和庫(kù)的概念和使用。CSS樣式表是網(wǎng)頁(yè)設(shè)計(jì)中一種非常重要的技術(shù)，目前獲得了廣泛的使用，其發(fā)展勢(shì)頭勢(shì)不可擋。CSS樣式表的出現(xiàn)可以說(shuō)是網(wǎng)頁(yè)排版中的一次革命性進(jìn)步。建議用戶在初步掌握了創(chuàng)建和應(yīng)用樣式的方法后，直接學(xué)習(xí)并使用CSS語(yǔ)言編寫(xiě)樣式表文件。由于層對(duì)象與動(dòng)態(tài)效果有著密切的關(guān)系，因此完全掌握層技術(shù)是建立網(wǎng)頁(yè)動(dòng)態(tài)效果的關(guān)鍵。雖然層技術(shù)的應(yīng)用并不復(fù)雜，但在頁(yè)面中如何使用才是關(guān)鍵。 2.8 本章習(xí)題 一、填空題1如果想把一幅圖象水平翻轉(zhuǎn)應(yīng)該用_，垂直翻轉(zhuǎn)可以用_，想把整個(gè)圖象制作成底片效果可以用_。2層的優(yōu)點(diǎn)有

26、：_A精確定位 B. 插入自如C加速瀏覽 D. 可疊加性3可以使用幾種方法創(chuàng)建嵌套層？4網(wǎng)頁(yè)制作中有些需要經(jīng)常更新的頁(yè)面元素，在各個(gè)頁(yè)面中的擺放位置可能不同，但內(nèi)容是一致的，這時(shí)可以把它們制作成_以提高制作和維護(hù)的效率。5庫(kù)有哪些作用？創(chuàng)建庫(kù)項(xiàng)目的方法有哪些？6創(chuàng)建一個(gè)庫(kù)項(xiàng)目，庫(kù)項(xiàng)目的內(nèi)容為你的電話號(hào)碼和電子郵件地址。7設(shè)計(jì)一個(gè)網(wǎng)頁(yè)，其內(nèi)容為：床前明白光疑是地上霜舉頭望明月低頭思故鄉(xiāng)要求：將這首詩(shī)置于一個(gè)1行1列的表格中詩(shī)文內(nèi)容字體為楷體，顏色為#00FF00，網(wǎng)頁(yè)背景顏色為#FFFF99。表格的邊框設(shè)為藍(lán)色。三、問(wèn)答題第3章 行為與時(shí)間軸 了解行為的含義 掌握添加行為的方法 了解行為的類(lèi)型

27、掌握網(wǎng)頁(yè)動(dòng)畫(huà)的基本制作本章學(xué)習(xí)知識(shí)點(diǎn)開(kāi)始上一張下一張返回3.1 檢查瀏覽器：自動(dòng)鏈接主頁(yè) 本章內(nèi)容目錄3.2 跳轉(zhuǎn)菜單：網(wǎng)絡(luò)導(dǎo)航 3.3 播放音樂(lè)：在線音樂(lè)點(diǎn)播 3.4 拖動(dòng)層：拼圖游戲 3.5 顯示隱藏層：情人節(jié)禮物 3.6 時(shí)間軸的應(yīng)用：飛翔 3.7 時(shí)間軸的應(yīng)用：倒計(jì)時(shí)牌 3.8 行為與層技術(shù)結(jié)合：下拉式導(dǎo)航欄 本章內(nèi)容目錄3.9 時(shí)間軸與行為的結(jié)合：滑出式正文區(qū) 3.10 本章小結(jié) 3.11 本章習(xí)題3.1 檢查瀏覽器：自動(dòng)鏈接主頁(yè) 3.1.1 基本概念 Dreamweaver的行為是運(yùn)行在網(wǎng)頁(yè)瀏覽器中的Javascript代碼，設(shè)計(jì)者可以將這些行為放置在網(wǎng)頁(yè)文檔中。行為由事件和該事件

28、所觸發(fā)的動(dòng)作所組成，通過(guò)行為的設(shè)置可以方便瀏覽者與網(wǎng)頁(yè)之間進(jìn)行交互。 瀏覽者瀏覽網(wǎng)頁(yè)過(guò)程中，瀏覽器對(duì)瀏覽者的行為作出某種回應(yīng)，產(chǎn)生了消息，這就是事件。而動(dòng)作是預(yù)先編寫(xiě)好的JavaScipt代碼，由這些代碼完成對(duì)事件的回應(yīng)。 Dreamweaver可以制作很多網(wǎng)頁(yè)特效，但是這些特效在一些低版本的瀏覽器中無(wú)法正常顯示，甚至干擾瀏覽者用戶正常地閱讀網(wǎng)頁(yè)內(nèi)容。檢查瀏覽器操作可以自動(dòng)地對(duì)瀏覽者的瀏覽器版本進(jìn)行判斷，這樣可以為不同的瀏覽者訂做不同的顯示效果，讓所有到網(wǎng)頁(yè)的客人都感到滿意。插入表格，在表格內(nèi)插入文字，并為文字插入“#”虛擬鏈接 3.1.2 上機(jī)操作單擊【行為】浮動(dòng)面板上的按鈕，打開(kāi)下拉菜單為

29、文本添加動(dòng)作 。在下拉菜單中，選擇【檢查瀏覽器】動(dòng)作。 右擊事件欄下的【onLoad】，單擊右側(cè)出現(xiàn)按鈕，單擊【顯示事件】|【IE 4.0】命令。再次單擊按鈕，打開(kāi)下拉菜單，并且選擇【onClick】事件，意味著當(dāng)瀏覽者用鼠標(biāo)點(diǎn)擊這個(gè)鏈接時(shí)，將觸發(fā)檢查瀏覽器的動(dòng)作 在打開(kāi)的【檢查瀏覽器】對(duì)話框中選對(duì)這個(gè)動(dòng)作進(jìn)行設(shè)置。這里的設(shè)置基本上采用了默認(rèn)設(shè)置，即在正常狀態(tài)下，跳轉(zhuǎn)到默認(rèn)的URL地址；而當(dāng)瀏覽器版本過(guò)低，則跳轉(zhuǎn)備用URL地址。單擊【URL】對(duì)應(yīng)的文本框后的【瀏覽】按鈕，設(shè)置默認(rèn)跳轉(zhuǎn)網(wǎng)頁(yè) 3.2 跳轉(zhuǎn)菜單：網(wǎng)絡(luò)導(dǎo)航 3.2.1 基本概念跳轉(zhuǎn)菜單是非常重要的一種導(dǎo)航方式，經(jīng)常可以在商務(wù)網(wǎng)站中看到

30、它為各種門(mén)類(lèi)不同的商品制作導(dǎo)航 。網(wǎng)頁(yè)的跳轉(zhuǎn)菜單是文檔內(nèi)的彈出菜單，對(duì)站點(diǎn)訪問(wèn)者課件，并列出鏈接到文檔或文件的選項(xiàng)?？梢詣?chuàng)建到整個(gè)Web站點(diǎn)上文檔的鏈接、電子右鍵鏈接、到圖形的鏈接，也可以創(chuàng)建到可以在瀏覽器打開(kāi)的任何文件類(lèi)型的鏈接。跳轉(zhuǎn)菜單可包含三個(gè)基本部分：（可選）菜單選擇提示，如菜單項(xiàng)類(lèi)別說(shuō)明，或一些提示信息等。（可選）“前往”按鈕。（必需）所鏈接菜單項(xiàng)的列表：用戶選擇某個(gè)選項(xiàng)，則鏈接的文檔或文件被打開(kāi)。3.2.2 上機(jī)操作在【插入】快捷工具欄中選擇【表單】，單擊【跳轉(zhuǎn)菜單】按鈕。單擊【窗口】|【行為】命令，打開(kāi)【行為】浮動(dòng)面板。鼠標(biāo)左鍵單擊編輯窗口內(nèi)的跳轉(zhuǎn)菜單，在行為面板中會(huì)出現(xiàn)設(shè)置好的

31、行為。雙擊【行為】面板中【動(dòng)作】欄下的【跳轉(zhuǎn)菜單】動(dòng)作，重新彈出【跳轉(zhuǎn)菜單】對(duì)話框 3.3 播放音樂(lè)：在線音樂(lè)點(diǎn)播 3.3.1 基本概念第一章介紹過(guò)在網(wǎng)頁(yè)中插入媒體的方法，而這里則介紹如何使用行為來(lái)播放音樂(lè)，提供給用戶與網(wǎng)頁(yè)交互的機(jī)制。3.3.2 上機(jī)操作使用【地圖】工具中的【矩形熱點(diǎn)工具】和【圓形熱點(diǎn)工具】繪制地圖熱點(diǎn) 選中繪制好的矩形熱點(diǎn)地圖，單擊菜單【窗口】|【行為】，在【行為】浮動(dòng)面板中單擊按鈕，并在下拉菜單中選擇第二項(xiàng)【播放聲音】。在彈出的【播放聲音中】，選擇擴(kuò)展名為“.mid”的音樂(lè)文件。這里默認(rèn)的驅(qū)動(dòng)動(dòng)作發(fā)生的事件為【onClick】 在編輯窗口中出現(xiàn)插件圖標(biāo) 3.4 拖動(dòng)層：拼

32、圖游戲 3.4.1 基本概念 層不僅是在制作網(wǎng)頁(yè)的過(guò)程中能夠被設(shè)計(jì)師拖動(dòng)，在網(wǎng)頁(yè)生成后，層以及層中插入的內(nèi)容也可以隨之被移動(dòng)。這樣，層就能夠被用來(lái)完成不同的任務(wù). 在拼圖過(guò)程中，網(wǎng)頁(yè)可以根據(jù)拼圖放置的位置，在50像素區(qū)域內(nèi)表示有效；而在拼圖完成后，網(wǎng)頁(yè)能通過(guò)JavaScript代碼對(duì)拼圖結(jié)果做出正確與否的判斷。 3.4.2 上機(jī)操作給出一幅原始的圖像，作為參照物；繪制一個(gè)藍(lán)色的背景區(qū)域，提示讀者將拼圖圖片放置于目標(biāo)的藍(lán)色區(qū)域位置使用Fireworks或者其它軟件，將原始的圖片切割成不同的部分。繪制層，并且將之前切割出來(lái)的每一個(gè)小圖片插入到層中移動(dòng)層，拖動(dòng)剛插入的三個(gè)層到正確的位置上，在接下來(lái)的

33、步驟要添加行為，所以要盡量地準(zhǔn)確 。插入JavaScript腳本。將光標(biāo)重新置于右上角插入三個(gè)層的單元格內(nèi)，選擇【插入】快捷欄中的【腳本】按鈕。彈出如圖3.17所示的對(duì)話框，在【語(yǔ)言】下拉菜單中選擇【JavaScript】，并且在【內(nèi)容】文本框中定義變量。代碼內(nèi)容為“v_Layer2 = false ; v_Layer3 = false ; v_Layer4 = false;”。 添加拖動(dòng)層行為。在編輯窗口左下角單擊【body】標(biāo)簽選中整個(gè)頁(yè)面，在菜單中選擇【窗口】|【行為】 |【拖動(dòng)層】 設(shè)置“拖動(dòng)層”動(dòng)作的參數(shù)。在彈出的【拖動(dòng)層】對(duì)話框中設(shè)置拖動(dòng)層行為的基本參數(shù)，如圖3.19所示。首先選擇

34、層為“Layer2”，單擊【取得目前位置】按鈕 按圖3.19所示步驟3所示，單擊【高級(jí)選項(xiàng)卡】，設(shè)置“拖動(dòng)層”的高級(jí)參數(shù)。其中【呼叫JavaScript】后的文本框中需要填入“v_Layer2 = false；”，而在【放下時(shí)：呼叫JavaScipt】后的文本框中填入“v_Layer2 true；” 重復(fù)上述步驟，為三個(gè)層添加“拖動(dòng)層”動(dòng)作 插入一個(gè)按鈕。在網(wǎng)頁(yè)右下角的表格內(nèi)插入一個(gè)表單按鈕。由于這里只是用按鈕來(lái)觸發(fā)一段JavaScript腳本，所以不需要用到表單。在此就不必插入標(biāo)簽，當(dāng)出現(xiàn)提示詢問(wèn)是否需要添加表單標(biāo)簽，請(qǐng)選擇【否】 為按鈕添加【調(diào)用JavaScript】行為，文本框中輸入腳本

35、：if(v_Layer2=true&v_Layer3=true&v_Layer4=true) confirm(拼圖正確);else alert(拼圖錯(cuò)誤,再試一下); 打亂三個(gè)層，為網(wǎng)頁(yè)游戲的瀏覽者制造一些難度，增加游戲的樂(lè)趣 讀者根據(jù)本教材提供的素材，完成拼圖其它部分的制作，最終的效果如圖所示。3.5 顯示隱藏層：情人節(jié)禮物 3.5.1 基本概念“顯示隱藏層”動(dòng)作顯示、隱藏或恢復(fù)一個(gè)或多個(gè)層的默認(rèn)可見(jiàn)性。此動(dòng)作用于在用戶與頁(yè)進(jìn)行交互時(shí)顯示信息?！帮@示隱藏層”還可用于創(chuàng)建預(yù)先載入層，即一個(gè)最初擋住頁(yè)的內(nèi)容的較大的層，在所有頁(yè)組件都完成載入后該層即消失所有通過(guò)層可以設(shè)置的效果都可以通過(guò)“顯示隱藏

36、層”設(shè)置出突然顯示的效果，可以給瀏覽者一種意想不到的效果。3.5.2 上機(jī)操作通過(guò)設(shè)置頁(yè)面屬性來(lái)修改網(wǎng)頁(yè)背景結(jié)合第一章制作“焰火晚會(huì)”的方法，添加JavaApplet到網(wǎng)頁(yè)中之后添加一個(gè)表單按鈕，作為焰火的觸發(fā)器。但鼠標(biāo)單擊按鈕后，JavaApplet開(kāi)始工作，顯示焰火效果繼續(xù)添加【顯示隱藏層】動(dòng)作。鼠標(biāo)左鍵單擊【按鈕】按鈕，打開(kāi)【行為】浮動(dòng)面板，添加“顯示隱藏層”動(dòng)作。設(shè)置事件為“onClick”，發(fā)生行為為顯示層Layer1 當(dāng)網(wǎng)頁(yè)瀏覽者單擊此按鈕后，觸發(fā)焰火的效果，就可以的到一份意外的驚喜。3.6 時(shí)間軸的應(yīng)用：飛翔 3.6.1 基本概念 時(shí)間軸的作用非常重要，在靜態(tài)的網(wǎng)頁(yè)中，雖然沒(méi)有A

37、SP代碼為網(wǎng)頁(yè)提供數(shù)據(jù)庫(kù)的支持，也不象JavaApplet通過(guò)程序來(lái)實(shí)現(xiàn)動(dòng)態(tài)圖景的變換。時(shí)間軸只是簡(jiǎn)單地把網(wǎng)頁(yè)中的內(nèi)容記錄先來(lái)，把內(nèi)容的位置，大小記錄到時(shí)間軸面板中，這樣在網(wǎng)頁(yè)生成后，就按照播放動(dòng)畫(huà)片的形式，以每秒固定的播放幀數(shù)來(lái)進(jìn)行圖像放映，達(dá)到動(dòng)態(tài)的效果。 時(shí)間軸的作用就是在網(wǎng)頁(yè)中制作動(dòng)畫(huà)，使用時(shí)間軸創(chuàng)建的動(dòng)畫(huà)要比ActiveX、擴(kuò)展插件或者Java Applet等更加有效，腳本代碼運(yùn)行更穩(wěn)定。 3.6.2 上機(jī)操作設(shè)置背景圖像插入個(gè)層，并且在層中插入圖像，為這個(gè)飛翔網(wǎng)頁(yè)中添加演員在事件軸內(nèi)插入對(duì)象。在【屬性】面板下有一個(gè)【時(shí)間軸】面板，平時(shí)都處于關(guān)閉狀態(tài)，此時(shí)左擊【時(shí)間軸】文字，隨機(jī)其面

38、板彈起。將層Layer3和層Layer4拖動(dòng)到時(shí)間軸內(nèi)。方法是左擊各個(gè)層左上角的標(biāo)簽，按住不要松手，拖動(dòng)至?xí)r間軸面板內(nèi)合適的位置 調(diào)整時(shí)間軸添加【播放時(shí)間軸】行為，單擊事件欄內(nèi)的按鈕，打開(kāi)下拉菜單，并且選擇【onLoad】事件 3.7 時(shí)間軸的應(yīng)用：倒計(jì)時(shí)牌 3.7.1 基本概念與嘗試使用一個(gè)時(shí)間軸控制頁(yè)面上的所有操作相比，使用單獨(dú)的事件軸分別用來(lái)控制頁(yè)面中不同的離散的部分會(huì)更容易一些。比如一個(gè)頁(yè)面中有很多的活動(dòng)元素，每個(gè)元素的觸發(fā)條件都是不同的 。這一節(jié)演示多個(gè)時(shí)間軸的協(xié)調(diào)、連續(xù)工作。3.7.2 上機(jī)操作創(chuàng)建四個(gè)層，在層內(nèi)分別寫(xiě)入“1”“2”“3”“4”“發(fā)射！” 設(shè)置行為，當(dāng)裝載網(wǎng)頁(yè)的時(shí)候

39、，將除“”以外的各個(gè)層都隱藏設(shè)置時(shí)間軸，當(dāng)一段時(shí)間后，交替地隱藏層3.8 行為與層技術(shù)結(jié)合：下拉式導(dǎo)航欄 3.8.1 基本概念 網(wǎng)頁(yè)在展示中往往遇到面積有限的問(wèn)題，如何在一個(gè)窗口大的區(qū)域內(nèi)插入更多的導(dǎo)航呢？使用下拉式菜單是一個(gè)很好的選擇。這種菜單平時(shí)是折疊收緊的，只有瀏覽者進(jìn)行了某種操作的時(shí)候，菜單才打開(kāi)。l 對(duì)嵌套層添加行為l使用時(shí)間軸對(duì)下拉速度進(jìn)行限制3.8.2 上機(jī)操作繪制嵌套層插入表格和文字。在父層中插入表格，并設(shè)置寬度和高度以及背景，然后在表格內(nèi)為文字設(shè)置好樣式 設(shè)置子層,添加文本。并且將子層添加到時(shí)間軸上。打開(kāi)【時(shí)間軸】面板，按鼠標(biāo)左鍵拖動(dòng)子層，也就是Layer2，拖動(dòng)到時(shí)間軸的合

40、適位置后，松開(kāi)左鍵后則添加完畢 添加多個(gè)時(shí)間軸，并且重復(fù)以上的步驟3.9 時(shí)間軸與行為的結(jié)合：滑出式正文區(qū) 3.9.1 基本概念 時(shí)間軸和行為配合使用，可以制作互動(dòng)性強(qiáng)，表現(xiàn)形式也更為豐富的網(wǎng)頁(yè)?，F(xiàn)在制作“滑出正文區(qū)”來(lái)把這Dreamweaver兩大核心技術(shù)用到一起。 如果正文慢慢浮現(xiàn)在屏幕上，再結(jié)合適合文字的音樂(lè)作為背景，確能提高瀏覽者對(duì)網(wǎng)頁(yè)的興趣。3.9.2 上機(jī)操作插入嵌套層插入一幅背景圖像 在子層中插入文本，并且設(shè)置文本屬性。并且將子層移動(dòng)到父層的最下方：子層的頂端與父層的底端平齊。打開(kāi)【時(shí)間軸】面板。將子層拖入到時(shí)間軸面板中，并且拖動(dòng)時(shí)間線到第400幀 左擊時(shí)間線的最后一幀?；氐骄庉?/p>

41、窗口內(nèi)，拖動(dòng)層至頂端，使Layer2的最下端在Layer1的最上端以上。有一條直線連接在Layer2的左上角 播放時(shí)間軸Timeline1 的行為添加【停止時(shí)間軸】行為，設(shè)置事件為“onMouseOver”。繼續(xù)添加【播放事件軸】設(shè)置事件為“onMouseOut” 3.10 總結(jié)提高 本章通過(guò)講述“行為”和“時(shí)間軸”的應(yīng)用實(shí)例，介紹給了讀者大部分的“行為”操作。但是這里要提醒讀者使用“行為”的時(shí)候要注意確保合理和恰當(dāng)，建議讀者在同一個(gè)網(wǎng)頁(yè)中不要使用過(guò)多的“行為”。 這里主要是因?yàn)椤靶袨椤逼浔举|(zhì)是代碼，當(dāng)同時(shí)使用多個(gè)行為時(shí)，難免會(huì)出現(xiàn)個(gè)別變量在不同的行為中重復(fù)使用造成沖突，結(jié)果造成網(wǎng)頁(yè)無(wú)法正常顯

42、示。而時(shí)間軸動(dòng)畫(huà)主要是通過(guò)設(shè)置隨時(shí)間變化的層的位置、大小、可見(jiàn)性和疊放順序來(lái)創(chuàng)建動(dòng)畫(huà)。 3.11 本章習(xí)題 （1）一個(gè)行為是由_和_兩部分組成的。（2）行為可以綁定到連接、圖像、表單元素或者多種其它HTML元素中的任何一種，但是不能將行為綁定到_。（3）動(dòng)作是一段預(yù)先編寫(xiě)好的_源程序。（4）使用_動(dòng)作在打開(kāi)當(dāng)前網(wǎng)頁(yè)的同時(shí)，還可以再打開(kāi)一個(gè)新的窗口。A.彈出信息B.播放聲音C.顯示彈出菜單D.打開(kāi)瀏覽器窗口（5）“跳轉(zhuǎn)菜單”和“跳轉(zhuǎn)菜單開(kāi)始”行為有什么區(qū)別，分別使用什么情況？（6）關(guān)于時(shí)間軸的行為有_、_和_。 第4章 動(dòng)態(tài)網(wǎng)頁(yè)(ASP)與數(shù)據(jù)庫(kù) 表單的制作與使用 腳本語(yǔ)言的使用 在網(wǎng)頁(yè)中嵌入程

43、序代碼 基本對(duì)象和函數(shù)的應(yīng)用本章學(xué)習(xí)知識(shí)點(diǎn)開(kāi)始上一張下一張返回4.1 表單的基本操作：用戶注冊(cè)本章內(nèi)容目錄4.2 嵌入腳本語(yǔ)言：人際關(guān)系測(cè)試4.3 嵌入ASP語(yǔ)言：留言本4.4 Request對(duì)象和函數(shù)應(yīng)用：石頭剪刀布4.5 Application和Session對(duì)象：計(jì)數(shù)器4.6 數(shù)據(jù)庫(kù)的應(yīng)用：登陸系統(tǒng)4.7 小結(jié)4.8 本章習(xí)題 4.1 表單的基本操作：用戶注冊(cè)1 表單的概念及用途2 表單的基本參數(shù)1. Name 2. Method 3. Action它的語(yǔ)法格式： 3 表單的相關(guān)語(yǔ)法使用時(shí)的語(yǔ)法格式： Request.Form（element）（index）Count 4 制作實(shí)例使自己

44、制作的表單通過(guò)設(shè)置表單參數(shù)實(shí)現(xiàn)信息的傳遞4.2 嵌入腳本語(yǔ)言：人際關(guān)系測(cè)試 腳本語(yǔ)言的基本概念及用途2 腳本語(yǔ)言與程序語(yǔ)言以及靜態(tài)頁(yè)面語(yǔ)言之間的不同程序中用到腳本語(yǔ)言時(shí)所需做的說(shuō)明如：說(shuō)明之后的一段腳本語(yǔ)言是javascript。腳本語(yǔ)言使原本靜態(tài)的頁(yè)面變得動(dòng)態(tài)、活潑，富有生氣 4.3 嵌入ASP語(yǔ)言：留言本 ASP語(yǔ)言的基本概念及特征2 加入ASP語(yǔ)言的頁(yè)面被訪問(wèn)時(shí)實(shí)際的執(zhí)行過(guò)程3 ASP與HTML工作原理的不同ASP代碼使所有任務(wù)都交給后臺(tái)處理，從而起到保護(hù)源代碼作用4.4 Request對(duì)象和函數(shù)應(yīng)用石頭剪刀布 Request對(duì)象的基本概念及功能2 Request對(duì)象的數(shù)據(jù)集合、屬性、方

45、法Form , QueryString , ServerVariable , Cookies , ClientCertificateTotalBytes 屬性BinaryRead 方法3 Response對(duì)象的數(shù)據(jù)集合、屬性、方法Sub DetermineWinner(playerChoice,computerChoice) if playerChoice=S then if computerChoice=S then response.write 石頭 VS 石頭 response.write 我們平手了 elseif computerChoice=J then response.write

46、 石頭 VS 剪子.4.5 Application和Session對(duì)象計(jì)數(shù)器Application對(duì)象的基本概念及功能、屬性2 Session對(duì)象的基本概念及功能、屬性3 Global.asa文件的重要性及其程序內(nèi)容Sub Application_onStart Application(OnLine) = 0 End Sub Sub Session_onStart Application.Lock Application(OnLine) = Application(OnLine) + 1 Application.Unlock End Sub 您的SessionID為：當(dāng)前共有人訪問(wèn)本網(wǎng)站當(dāng)前訪

47、問(wèn)本網(wǎng)站的在線人數(shù)，可以防止刷新產(chǎn)生的計(jì)數(shù)錯(cuò)誤4.6 數(shù)據(jù)庫(kù)的應(yīng)用：登陸系統(tǒng)數(shù)據(jù)庫(kù)在網(wǎng)頁(yè)建設(shè)中的作用2 數(shù)據(jù)庫(kù)及數(shù)據(jù)庫(kù)中表的建立3 頁(yè)面與數(shù)據(jù)庫(kù)之間的連通將數(shù)據(jù)寫(xiě)入數(shù)據(jù)庫(kù)表中：% set cn1=Server.CreateObject(ADODB.Connection) cn1.Open DRIVER=Microsoft Access Driver (*.mdb);DBQ=& Server.MapPath(s1.mdb) a1=trim(Request.Form(user) a2=trim(Request.Form(pwd) a3=trim(Request.Form(pwd1)if a2a3

48、then response.write(兩次密碼不同，請(qǐng)重新輸入)else cn2= &a1& , &a2& cn1.Execute(Insert into users(user,pwd) values(&cn2&)將注冊(cè)的用戶名和密碼增加到數(shù)據(jù)庫(kù)文件中 cn1.close response.write(注冊(cè)已成功!)end if %4 最終效果登陸界面注冊(cè)界面登陸成功界面4.7 小結(jié) 本章通過(guò)幾個(gè)程序代碼實(shí)例介紹了ASP的內(nèi)置對(duì)象，其中涉及到Request、Response、Application、Session和Server五個(gè)經(jīng)常使用的類(lèi)型。通過(guò)對(duì)它們的屬性、方法和事件等方面的實(shí)例，介紹

49、如何使用這些內(nèi)置對(duì)象來(lái)實(shí)現(xiàn)ASP動(dòng)態(tài)網(wǎng)頁(yè)的功能。同時(shí)，還簡(jiǎn)單地對(duì)ASP與數(shù)據(jù)庫(kù)的之間的連接進(jìn)行了介紹。 使用ASP內(nèi)置對(duì)象以及與數(shù)據(jù)庫(kù)的連接是ASP編程的重要部分，是進(jìn)行大型網(wǎng)站編程不可缺少的知識(shí)。因此，讀者需要結(jié)合書(shū)上的例子，在實(shí)際生活中進(jìn)行大量的練習(xí)，在實(shí)踐中掌握這項(xiàng)技能。 下一章，將會(huì)向讀者講述如何管理站點(diǎn)和如何將網(wǎng)頁(yè)上傳到Internet服務(wù)器上，最終將網(wǎng)頁(yè)提供給廣大的Internet沖浪者。4.8 本章習(xí)題 一、填空題1在聊天室程序中，一般使用_對(duì)象來(lái)存儲(chǔ)在線人數(shù)。2在a1.asp文件中加入_標(biāo)記可讀取a2.asp文件的內(nèi)容。3的意思為：_4如果想在在form中使用GET方法把數(shù)據(jù)提

50、交到服務(wù)器端的一個(gè)ASP文件中，那么在該文件的程序中，可以使用_對(duì)象的_數(shù)據(jù)集合負(fù)責(zé)取得用戶提交的數(shù)據(jù)，并加以處理。5._方法用于釋放ASP頁(yè)面鎖定application對(duì)象的狀態(tài)。二、問(wèn)答題6ASP中Application與Session對(duì)象有何區(qū)別？(請(qǐng)舉例說(shuō)明)7在瀏覽器中顯示“Hello World!”，分別用HTML、VBscript、ASP寫(xiě)出相應(yīng)的顯示程序。8試說(shuō)明Global.asa文件的作用。9. 一段程序中出現(xiàn)：是什么意思？ Application.lock呢？三、程序填空 下面是一段上機(jī)程序，用于顯示用戶輸入的姓名，請(qǐng)?jiān)诳瞻滋幪顚?xiě)適當(dāng)?shù)某绦?請(qǐng)輸入您的姓名:第5章 站點(diǎn)管

51、理和第三方組件 站點(diǎn)的定義 站點(diǎn)和網(wǎng)頁(yè)的關(guān)系 如何上傳站點(diǎn)到網(wǎng)絡(luò)服務(wù)器 使用第三方組件本章學(xué)習(xí)知識(shí)點(diǎn)開(kāi)始上一張下一張返回5.1 本地站點(diǎn)管理：軟件屋 本章內(nèi)容目錄5.2 遠(yuǎn)程站點(diǎn)管理：軟件屋 5.3 使用第三方組件：滑動(dòng)菜單（SlideMenu） 5.4 總結(jié)提高5.5 本章習(xí)題 5.1 本地站點(diǎn)管理：軟件屋 5.1.1 基本概念站點(diǎn)也稱網(wǎng)站，是互聯(lián)網(wǎng)中最小的環(huán)節(jié)，是一些通過(guò)超鏈接相互聯(lián)系的網(wǎng)頁(yè)集合。一般來(lái)說(shuō)，用戶應(yīng)該首先在本地計(jì)算機(jī)上建立本地站點(diǎn)，設(shè)計(jì)合理的站點(diǎn)結(jié)構(gòu)和制作所有的網(wǎng)頁(yè)，進(jìn)行一系列的測(cè)試。在測(cè)試通過(guò)后，再將網(wǎng)頁(yè)上傳到Internet服務(wù)器上。l 創(chuàng)建站點(diǎn)l 編輯站點(diǎn)內(nèi)容 使用文件

52、面板 5.1.2 上機(jī)操作使用向?qū)?chuàng)建站點(diǎn)。在菜單欄中選擇【站點(diǎn)】|【新建站點(diǎn)】命令，彈出【未命名站點(diǎn)1的站點(diǎn)定義為】對(duì)話框。在對(duì)話框中【站點(diǎn)名稱】以及【本地根文件夾】后的文本框內(nèi)填入基本信息 切換到【基本】選項(xiàng)卡下，繼續(xù)完成對(duì)站點(diǎn)的定義操作。單擊【下一步】按鈕，可以設(shè)置站點(diǎn)需要的服務(wù)器技術(shù)，由于這里是本地管理而且是靜態(tài)站點(diǎn)，所以選擇“否，我不想使用服務(wù)器技術(shù)”復(fù)選框 單擊【下一步】按鈕，可以設(shè)置該站點(diǎn)的編輯方式。 有三個(gè)選項(xiàng)，單擊選擇【編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器（推薦）】按鈕。其余的兩個(gè)選項(xiàng)需要網(wǎng)絡(luò)環(huán)境，在本書(shū)的下一節(jié)內(nèi)容中會(huì)介紹。在對(duì)話框中的【你將把網(wǎng)頁(yè)文件存儲(chǔ)在計(jì)算

53、機(jī)的什么位置？】文本框內(nèi)填入路徑，或者單擊后面的【選擇文件】按鈕，在彈出的【選擇站點(diǎn)軟件屋2的本地根文件夾】對(duì)話框中選擇路徑 單擊【下一步】按鈕進(jìn)入【站點(diǎn)定義】對(duì)話框設(shè)置遠(yuǎn)程站點(diǎn)，如圖5.5所示。在【您如何連接到遠(yuǎn)程服務(wù)器】下拉列表中選擇“無(wú)”選項(xiàng)。 單擊【下一步】按鈕，進(jìn)入【站點(diǎn)定義】對(duì)話框，這個(gè)對(duì)話框?qū)⒘谐稣军c(diǎn)設(shè)置的所有屬性。包括站點(diǎn)的本地信息、遠(yuǎn)程信息和測(cè)試服務(wù)器信息。用戶可以在此查看核對(duì)站點(diǎn)的設(shè)置，如果有錯(cuò)誤，則可以單擊【上一步】返回進(jìn)行修改。 查看網(wǎng)站地圖 管理站點(diǎn)，可以對(duì)站點(diǎn)進(jìn)行的操作有添加、刪除、編輯、復(fù)制和導(dǎo)入導(dǎo)出。首先我們可以編輯站點(diǎn)。選擇【站點(diǎn)】|【編輯站點(diǎn)】，打開(kāi)【編輯站

54、點(diǎn)】對(duì)話框5.2 遠(yuǎn)程站點(diǎn)管理：軟件屋 5.2.1 基本概念Dreamweaver MX不僅具有強(qiáng)大的網(wǎng)頁(yè)制作功能，而且在站點(diǎn)創(chuàng)建與管理方面功能同樣強(qiáng)大。Dreamweaver MX提供的站點(diǎn)管理器可以全面實(shí)現(xiàn)對(duì)遠(yuǎn)程服務(wù)器的管理和控制。這一節(jié)將介紹有關(guān)網(wǎng)站的測(cè)試、上傳及維護(hù)，完成網(wǎng)站制作最后的一個(gè)步驟。l 站點(diǎn)鏈接測(cè)試l 修復(fù)站點(diǎn)鏈接優(yōu)化HTML源代碼 5.2.2 上機(jī)操作測(cè)試站點(diǎn)的兼容性。選擇菜單【文件】|【檢查頁(yè)】|【檢測(cè)目標(biāo)瀏覽器】命令，打開(kāi)【目標(biāo)瀏覽器檢查】面板。在彈出的【檢查目標(biāo)瀏覽器】對(duì)話框中，選擇【Microsoft Internet Explorer 5.0】進(jìn)行檢查。 站點(diǎn)的

55、鏈接測(cè)試。檢測(cè)網(wǎng)頁(yè)中是否包含斷開(kāi)的鏈接是一個(gè)非常重要的醒目，如果網(wǎng)頁(yè)中存在這種錯(cuò)誤鏈接，一般很難手工查找到。Dreamweaver可以幫助用戶快速地檢查站點(diǎn)中的網(wǎng)頁(yè)的鏈接，避免出現(xiàn)錯(cuò)誤。首先選擇菜單【文件】|【檢查頁(yè)】|【檢查鏈接】命令，打開(kāi)【鏈接檢查器】面板。單擊【鏈接檢查器】左上角的【檢查鏈接】按鈕，在彈出的菜單中選擇【為整個(gè)站點(diǎn)檢查鏈接】。在【鏈接檢查器】面板中會(huì)顯示檢查的結(jié)果 測(cè)試站點(diǎn)的合法性。選擇【文件】|【檢查頁(yè)】|【驗(yàn)證標(biāo)記】命令，打開(kāi)【驗(yàn)證】面板 單擊【驗(yàn)證】面板左上角的三角形按鈕，在彈出的菜單中選擇相應(yīng)命令對(duì)整個(gè)站點(diǎn)進(jìn)行驗(yàn)證 生成站點(diǎn)報(bào)告，對(duì)網(wǎng)頁(yè)設(shè)計(jì)做出一些建議，幫助用戶修改

56、網(wǎng)頁(yè)。選擇菜單中【站點(diǎn)】|【報(bào)告】命令，打開(kāi)【報(bào)告】對(duì)話框 在【報(bào)告在】下拉列表中選擇【整個(gè)當(dāng)前本地站點(diǎn)】。在【選擇報(bào)告】區(qū)域中，選中“可移除的空標(biāo)簽”以及“多余的嵌套標(biāo)簽”前的復(fù)選框。單擊【運(yùn)行】按鈕，就會(huì)生成網(wǎng)站報(bào)告 上傳站點(diǎn)到服務(wù)器的步驟設(shè)置服務(wù)器信息。選擇菜單【窗口】|【文件】命令，打開(kāi)【文件】面板，在【站點(diǎn)】下拉列表中選擇【編輯站點(diǎn)】命令，如圖5.20所示。打開(kāi)【編輯站點(diǎn)】對(duì)話框 選擇【軟件屋】，并且單擊【按鈕】，重要就彈出【軟件屋的站點(diǎn)定義為】對(duì)話框，選擇高級(jí)選項(xiàng)卡中【分類(lèi)】欄中的【遠(yuǎn)程服務(wù)信息】項(xiàng)，右側(cè)列出了有關(guān)遠(yuǎn)程服務(wù)器的一些信息。在【訪問(wèn)】右邊的下拉菜單中選擇【FTP】模式。

57、在相應(yīng)的各個(gè)文本框中填入對(duì)應(yīng)的文本，找到一個(gè)合法的FTP主機(jī)地址，并在【登陸】以及【密碼】文本框中填入相應(yīng)的數(shù)據(jù)就可以了。單擊【測(cè)試】按鈕對(duì)遠(yuǎn)程服務(wù)器進(jìn)行連接測(cè)試 鏈接到遠(yuǎn)端服務(wù)器。只要打開(kāi)站點(diǎn)管理窗口，單擊工具欄中的【連接接到遠(yuǎn)端主機(jī)】按鈕。 文件上傳。首先選擇需要上傳的文件，單擊工具欄上的按鈕，于是開(kāi)始上傳網(wǎng)頁(yè) 5.3 使用第三方組件：滑動(dòng)菜單（SlideMenu） 5.3.1 基本概念第三方組件就是可以添加到Dreamweaver程序中用來(lái)增強(qiáng)程序功能的軟件。其中包括可以添加到【插入】快捷欄以及【插入】菜單的HTML代碼，也包括可以添加到【命令】菜單的JavaScript命令?！盎瑒?dòng)菜單

58、”只是眾多的第三方組件中的一員，使用此組件可以方便地制作出漂亮的滑動(dòng)菜單，并且適合作網(wǎng)絡(luò)站點(diǎn)的導(dǎo)航。 Macromedia Extension Manager（擴(kuò)展管理器）在插件菜單中設(shè)置滑動(dòng)菜單基本屬性 5.3.2 上機(jī)操作啟動(dòng)Macromedia擴(kuò)展管理器。在Dreamweaver中，執(zhí)行菜單欄中的【命令】|【擴(kuò)展管理】命令安裝滑動(dòng)菜單插件。單擊【Macromedia擴(kuò)展管理器】左上角的【安裝新的擴(kuò)展】按鈕，彈出【選擇要安裝的擴(kuò)展】對(duì)話框 繼續(xù)安裝插件。在彈出的免責(zé)許可聲明窗口下，單擊【接受】按鈕，在【Macromedia擴(kuò)展管理器】彈出窗口下方單擊【確定】按鈕 新建一個(gè)網(wǎng)頁(yè)文檔，并保存。

59、在【插入】快捷欄中選擇【常用】選項(xiàng)，接下來(lái)左鍵單擊【MFX_SlideMenu】按鈕 在對(duì)話框中輸入需要插入的滑動(dòng)導(dǎo)航欄的基本屬性。從上向下的下拉菜單和文本框分別代表的意思是：菜單級(jí)數(shù)、菜單與頁(yè)面的上邊距、菜單與頁(yè)面的左邊距、子菜單相對(duì)主菜單的縮進(jìn)距離、菜單的滑動(dòng)速度、雙擊后是否關(guān)閉菜單 在代碼視圖中，通過(guò)修改代碼改變顏色默認(rèn)菜單顏色修改后菜單顏色5.4 總結(jié)提高本章介紹了站點(diǎn)的本地管理和遠(yuǎn)程管理。利用Dreamweaver可以完成站點(diǎn)的上傳、更新、鏈接測(cè)試，找出其中的斷裂和錯(cuò)誤，并且及時(shí)對(duì)網(wǎng)頁(yè)設(shè)計(jì)中的謬誤進(jìn)行修正，確保網(wǎng)頁(yè)結(jié)構(gòu)的穩(wěn)健。 第三方插件可以到網(wǎng)上進(jìn)行搜索下載，一般來(lái)說(shuō)使用第三方插件

60、可以大大提高Dreamweaver用戶制作網(wǎng)頁(yè)的效率。但是使用插件存在一些缺憾：使得網(wǎng)頁(yè)制作變得千篇一律，沒(méi)有自己的性格特點(diǎn)；和用戶自己設(shè)定的資源名稱發(fā)生沖突，軟件自動(dòng)關(guān)閉。 5.5 本章習(xí)題 1、在創(chuàng)建站點(diǎn)的時(shí)候，為了管理方便，建立文件夾應(yīng)該分好類(lèi)。目前網(wǎng)站比較流行的存放圖片的文件夾命名為：A. soundsB. imagesC. templatesD. classes2、設(shè)置遠(yuǎn)程服務(wù)器的時(shí)候，可以選擇遠(yuǎn)程服務(wù)器WebDAV（基于Web的分布式創(chuàng)作和版本控制），如果要選擇此類(lèi)服務(wù)器，必須要先安裝_和_。3、如果要要對(duì)網(wǎng)頁(yè)中的超鏈接進(jìn)行檢查，應(yīng)該怎么操作？ 4、站點(diǎn)取出后，別的用戶還能通過(guò)服務(wù)