使用Dreamweaver制作網(wǎng)站

網(wǎng)站維護(hù)與網(wǎng)頁(yè)制作主講：康梅娟第2講使用Dreamweaver制作網(wǎng)站2.1Dreamweaver基礎(chǔ)操作2.2模板、多媒體元素和書(shū)簽超鏈接的使用2.3圖像熱區(qū)、CSS樣式的應(yīng)用2.4圖層的使用2.5創(chuàng)建時(shí)間軸動(dòng)畫(huà)2.6表單的應(yīng)用2.7框架的應(yīng)用2.8使用行為講解提綱大任務(wù)制作“空谷幽蘭”的網(wǎng)站的靜態(tài)部分，包括扉頁(yè)、首頁(yè)、照片、音樂(lè)、視頻、動(dòng)畫(huà)、文章、粉絲、北京粉絲、西安粉絲和濟(jì)南粉絲共11個(gè)靜態(tài)頁(yè)面。站點(diǎn)的創(chuàng)建和管理網(wǎng)頁(yè)的創(chuàng)建和編輯使用表格布局網(wǎng)頁(yè)在網(wǎng)頁(yè)中插入文本、圖像和影片超鏈接的使用2.1Dreamweaver基礎(chǔ)操作任務(wù)1制作“扉頁(yè)”和“首頁(yè)”一、站點(diǎn)的創(chuàng)建和管理１．創(chuàng)建站點(diǎn)1.創(chuàng)建站點(diǎn)-續(xù)注意:（1）可以創(chuàng)建多個(gè)站點(diǎn)（2）打開(kāi)某個(gè)站點(diǎn)的方法“站點(diǎn)”|“管理站點(diǎn)”，選擇站點(diǎn)，單擊“完成”“文件”面板中的站點(diǎn)下拉列表（3）同一個(gè)站點(diǎn)只需創(chuàng)建1次，以后編輯時(shí)只需打開(kāi)編輯即可（裝了還原卡的機(jī)子除外）2.站點(diǎn)的管理（1）新建文件（2）新建文件夾2.站點(diǎn)的管理-續(xù)（3）文件夾和文件的移動(dòng)、復(fù)制、刪除或重命名（4）打開(kāi)文件：雙擊文件名二、網(wǎng)頁(yè)的創(chuàng)建和編輯1.網(wǎng)頁(yè)的創(chuàng)建在“文件”面板的站點(diǎn)中創(chuàng)建從啟動(dòng)頁(yè)面創(chuàng)建文件|新建2.網(wǎng)頁(yè)的編輯（1）打開(kāi)網(wǎng)頁(yè)：文件|打開(kāi)或者在“文件”面板中雙擊要編輯的文件名稱(chēng)。（2）保存網(wǎng)頁(yè)：文件|保存；文件|另存為。（3）預(yù)覽網(wǎng)頁(yè)：按“F12”鍵；文件|在瀏覽器中預(yù)覽|iexpore；單擊“文檔”工具欄的【在瀏覽器中預(yù)覽/調(diào)試】按鈕，并在彈出的下拉菜單中選擇【預(yù)覽在iexpore】命令。2.網(wǎng)頁(yè)的編輯-續(xù)（4）設(shè)置網(wǎng)頁(yè)標(biāo)題（5）設(shè)置“上邊距”為0：修改|頁(yè)面屬性（6）添加/刪除字體：選擇“字體”下拉列表的最后一項(xiàng)“編輯字體列表…”，打開(kāi)“編輯字體列表”對(duì)話框。三、使用表格布局網(wǎng)頁(yè)在設(shè)計(jì)網(wǎng)頁(yè)中，表格不僅可以羅列數(shù)據(jù)，更重要的是可以用來(lái)控制網(wǎng)頁(yè)的布局。通常，新建網(wǎng)頁(yè)后，要先在網(wǎng)頁(yè)中插入表格，再將其它網(wǎng)頁(yè)元素插入到表格的單元格中。網(wǎng)頁(yè)布局的３種解決方案：表格、框架、圖層。1.表格的3種視圖(1)標(biāo)準(zhǔn)視圖：設(shè)計(jì)規(guī)律、簡(jiǎn)單表格(2)擴(kuò)展視圖：定位元素、放光標(biāo)(3)布局視圖：設(shè)計(jì)復(fù)雜、無(wú)規(guī)律表格2.創(chuàng)建表格（1）插入表格（2種方法）單擊“插入”|“表格”命令單擊“常用”面板中的“表格”按鈕（2）表格屬性面板填充：指定單元格的內(nèi)容和單元格邊框間的距離，單位是像素。間距：相鄰單元格間的距離，單位是像素。（2）表格屬性面板-續(xù)

清除表格的列寬將表格寬度轉(zhuǎn)換成像素將表格寬度轉(zhuǎn)換成百分比清除表格的行高將表格高度轉(zhuǎn)換成像素將表格高度轉(zhuǎn)換成百分比（3）為表格輸入數(shù)據(jù)在表格的單元格中，可以插入文本、圖片、超鏈接、表單、動(dòng)態(tài)組件等元素，也可以插入嵌套表格。3.編輯表格（1）選中整張表格方法1:使用<table>標(biāo)記方法2:單擊表格任意位置，按兩次Ctrl+A方法3：?jiǎn)螕舯砀褡笊辖牵?）選中表格行方法1：拖動(dòng)鼠標(biāo)從左至右方法2：把鼠標(biāo)移至要選定的行的行首，鼠標(biāo)會(huì)變成粗黑箭頭，單擊左鍵，選定行方法3：使用<tr>標(biāo)記（3）選中表格列方法1：拖動(dòng)鼠標(biāo)從上至下方法2：把鼠標(biāo)移至要選定的列的列首，鼠標(biāo)會(huì)變成粗黑箭頭，單擊左鍵，選定列（4）選中單元格方法1：?jiǎn)螕裟硞€(gè)單元格方法2：使用<td>標(biāo)記（5）添加行或列修改|表格|插入行修改|表格|插入列修改|表格|插入行或列（6）刪除行或列修改|表格|刪除行修改|表格|刪除列（7）合并單元格方法1：修改|表格|合并單元格方法2：屬性面板上的“合并單元格”按鈕（8）拆分單元格方法1：修改|表格|拆分單元格方法2：屬性面板上的“拆分單元格”按鈕小結(jié)表格的應(yīng)用技巧：外圍表格寬度：780像素內(nèi)嵌表格寬度：百分比每一個(gè)版塊都用一個(gè)單獨(dú)的表格靈活運(yùn)用嵌套表格四、在網(wǎng)頁(yè)中插入文本、圖像和影片1.插入文本（1）插入特殊字符：插入|HTML|特殊字符（2）插入日期：插入|日期（3）插入水平線：插入|HTML|水平線（4）空格符的鍵入：切換到全角中文進(jìn)行輸入（5）換行符：shift+Enter（6）段落標(biāo)識(shí)符：Enter（7）文本的屬性面板2.插入圖像（1）插入圖像：插入|圖像或單擊“常用”子面板上的【圖像】按鈕（2）設(shè)置圖像屬性3.插入滾動(dòng)字幕（1）選中滾動(dòng)字幕內(nèi)容（2）單擊“插入”|“標(biāo)簽”（3）選擇“html標(biāo)簽”中的marquee，單擊“插入”，單擊“關(guān)閉”（4）選中marquee標(biāo)簽，在“標(biāo)簽檢查器”面板的“屬性”選項(xiàng)卡中設(shè)置屬性Behavior:設(shè)置字幕運(yùn)動(dòng)方式Direction:設(shè)置字幕滾動(dòng)方向Scrollamount:設(shè)置字幕滾動(dòng)速度3.插入滾動(dòng)字幕-續(xù)Scrolldelay:設(shè)置字幕滾動(dòng)時(shí)停頓的時(shí)間，單位為毫秒。如果要讓滾動(dòng)看起來(lái)流暢，數(shù)值應(yīng)該盡量小。Loop:設(shè)置字幕滾動(dòng)次數(shù)，默認(rèn)值為無(wú)限，“-1”也為無(wú)限。打開(kāi)行為面板，添加兩個(gè)行為：onMouseOver:this.stop()設(shè)置鼠標(biāo)移動(dòng)到滾動(dòng)字幕時(shí)的動(dòng)作為停止?jié)L動(dòng)。onMouseOut：this.start()設(shè)置鼠標(biāo)離開(kāi)滾動(dòng)字幕時(shí)的動(dòng)作為開(kāi)始滾動(dòng)。4.插入Flash影片方法1：插入|媒體|Flash方法2：常用面板|“媒體”按鈕插入透明Flash五.超鏈接的使用1.超鏈接的概念超鏈接是指從起始端點(diǎn)到目標(biāo)端點(diǎn)的一個(gè)跳轉(zhuǎn)。超鏈接的鏈接目標(biāo)可以是1個(gè)網(wǎng)頁(yè)、1張圖片、1首歌曲、1個(gè)office文檔、1個(gè)程序等；超鏈接的鏈接目標(biāo)可以是本機(jī)上的1個(gè)任意的文件，也可以是其它服務(wù)器上的1個(gè)URL，或者是某個(gè)網(wǎng)頁(yè)中的具體位置。2.超鏈接路徑（1）絕對(duì)路徑使用完整URL,如：http://（2）相對(duì)路徑鏈接的文件相對(duì)于當(dāng)前網(wǎng)頁(yè)的路徑。注意：鏈接站點(diǎn)內(nèi)部的文件最好采用相對(duì)路徑。3.創(chuàng)建超鏈接（1）創(chuàng)建頁(yè)面鏈接（2）創(chuàng)建電子郵件鏈接（1）創(chuàng)建頁(yè)面鏈接選中文本或圖像，在其屬性面板的“鏈接”后設(shè)置。打開(kāi)目標(biāo)網(wǎng)頁(yè)的方式_blank：在新的瀏覽器窗口中打開(kāi)_parent：在父框架或上級(jí)窗口中打開(kāi)_self：在同一框架或本窗口中打開(kāi)_top：在頂層框架中打開(kāi)（2）創(chuàng)建Email鏈接選中載體；插入|電子郵件鏈接，或在屬性面板的“鏈接”后輸入：mailto:電子郵箱地址模板的使用在網(wǎng)頁(yè)中插入音頻、視頻在網(wǎng)頁(yè)中插入圖像查看器書(shū)簽超鏈接的使用2.2模板、多媒體元素和書(shū)簽超鏈接的使用任務(wù)2制作照片、音樂(lè)、視頻、動(dòng)畫(huà)、文章頁(yè)面。一、模板的使用什么是模板？為什么要使用模板？如何使用模板？使用模板舉例小結(jié)一、模板的使用什么是模板？模板是一種特殊類(lèi)型的文檔，用于設(shè)計(jì)“固定的”頁(yè)面布局；然后用戶便可以基于模板創(chuàng)建文檔，創(chuàng)建的文檔會(huì)繼承模板的頁(yè)面布局。設(shè)計(jì)模板時(shí)，可以指定在基于模板的文檔中哪些內(nèi)容是用戶“可編輯的”。一、模板的使用為什么要使用模板？減少重復(fù)勞動(dòng)使相關(guān)的網(wǎng)站頁(yè)面風(fēng)格保持一致創(chuàng)建1次可套用多次可以一次更新多個(gè)頁(yè)面

一、模板的使用如何使用模板？使用模板的前提：首先要將網(wǎng)站作為Dreamweaver管理的一個(gè)站點(diǎn)。使用模板的思路：通常制作模板文件時(shí)，只把導(dǎo)航條和標(biāo)題欄等各個(gè)頁(yè)面共有的部分制作出來(lái)，而把其他部分留給各個(gè)頁(yè)面安排設(shè)置具體內(nèi)容。制作模板文件與制作普通的網(wǎng)頁(yè)的方法是相同的，但是在制作模板文件時(shí)，必須設(shè)置好“頁(yè)面屬性”，指定好“可編輯區(qū)域”。使用模板的步驟（1）編輯將要作為模板的頁(yè)面。（2）生成模板：文件|另存為模板，將（1）保存為模板頁(yè)，注意選擇站點(diǎn)和設(shè)置模板文件名。（3）編輯模板：打開(kāi)模板頁(yè)，插入|模板對(duì)象|可編輯區(qū)域，可編輯區(qū)域可有多個(gè)。（4）用模板生成頁(yè)面：文件|新建，選擇“模板”中的（2）保存的模板頁(yè)。編輯可編輯區(qū)域。（5）修改模板內(nèi)容與更新站點(diǎn)文件。4.使用模板舉例（1）制作照片模板photo.dwt(2)套用photo.dwt制作“照片”頁(yè)面小結(jié)使用模板的好處使用模板的前提使用模板的思路使用模板的步驟二、插入音頻、視頻

方法：插入|媒體|插件切換到代碼視圖，設(shè)置相關(guān)屬性。

autostart=“true”，自動(dòng)播放Loop=“true”,循環(huán)播放三.插入圖像查看器（1）準(zhǔn)備好用到的圖片（尺寸相同）（2）插入|媒體|圖像查看器（3）為生成的flash文件設(shè)置保存路徑和名稱(chēng)（4）在Flash元素面板中設(shè)置相關(guān)參數(shù)bgColor:背景顏色。captionColor:圖片的標(biāo)題顏色。captionFont:圖片的標(biāo)題字體。captionSize:圖片的標(biāo)題字體大小。frameColor:邊框顏色。frameShow:是否顯示邊框。frameThickness:邊框?qū)挾取mageCaption:圖片標(biāo)題。三.插入圖像查看器-續(xù)imageLinks:為每張圖片設(shè)置鏈接。imageLinkTarget:設(shè)置打開(kāi)鏈接網(wǎng)頁(yè)的方式。imageURLs：選擇圖片源文件。showControls:是否顯示控制臺(tái)slideAutoPlay:是否自動(dòng)播放slideDelay:圖片播放的延遲時(shí)間。slideLoop:是否循環(huán)播放。title：圖像查看器的標(biāo)題。titleColor:標(biāo)題顏色。titleFont:標(biāo)題字體titleSize:標(biāo)題字體大小。transitionType:圖片切換的模式。四、書(shū)簽超鏈接的使用先定義書(shū)簽：光標(biāo)定位在跳轉(zhuǎn)的目標(biāo)位置前；插入|命名錨記創(chuàng)建超鏈接指向書(shū)簽：文件名#書(shū)簽名稱(chēng)如果是當(dāng)前網(wǎng)頁(yè)，文件名可省略。圖像熱區(qū)的使用CSS樣式的使用2.3圖像熱區(qū)、CSS樣式的應(yīng)用任務(wù)3制作粉絲、北京粉絲、西安粉絲和濟(jì)南粉絲頁(yè)面；使用CSS樣式格式化所有靜態(tài)頁(yè)面。一、圖像熱區(qū)的使用圖像熱區(qū)是在一幅圖像中劃分出幾個(gè)不同的幾何圖形區(qū)域，然后分別為這些區(qū)域建立超鏈接。創(chuàng)建圖像熱區(qū)的步驟：插入圖像并選中；在屬性面板上選擇熱區(qū)工具并在圖像上繪制熱區(qū)選定熱區(qū)，在屬性面板中設(shè)置鏈接目標(biāo)二、CSS樣式的使用CSS樣式的概念CSS樣式的三種存在方式直接插入式內(nèi)嵌樣式CSS樣式的類(lèi)型CSS樣式定義外部文件方式小結(jié)二、CSS樣式的使用1.CSS樣式的概念

CSS，翻譯為“層疊樣式表”，主要用來(lái)進(jìn)行頁(yè)面風(fēng)格設(shè)計(jì)。利用CSS不僅可以控制一個(gè)頁(yè)面中的元素格式，而且可以控制多個(gè)頁(yè)面中的元素格式。2.CSS樣式的三種存在方式根據(jù)作用范圍不同，CSS樣式有三種存在方式：（1）直接插入式（2）內(nèi)嵌樣式（3）外部文件方式3.直接插入式作用：僅對(duì)所定義的標(biāo)記起作用。用法：代碼視圖下，在標(biāo)記中插入style屬性。格式：<標(biāo)記style="屬性:屬性值;屬性:屬性值;…">如：<hrstyle="color:#FF0000;height:10px"/>注意：basefont、param、script不能使用style屬性。觀看示例4.內(nèi)嵌樣式（1）用法：定義在<head>和</head>之間，其范圍僅限于本網(wǎng)頁(yè)。（2）格式：<styletype=“text/css”><!--選擇符1{屬性:屬性值;屬性:屬性值…}選擇符2{屬性:屬性值;屬性:屬性值…}…選擇符n{屬性:屬性值;屬性:屬性值…}--></style>觀看示例:未格式觀看示例：套用格式后（3）使用內(nèi)嵌樣式的方法寫(xiě)代碼：先在<head>和</head>之間添加style代碼，然后在具體的標(biāo)記中應(yīng)用樣式。使用CSS樣式面板(需掌握)。*1.窗口|css樣式*2.新建css規(guī)則*3.設(shè)置樣式類(lèi)型，定義在“僅對(duì)該文檔”*4.設(shè)置規(guī)則*5.選中元素，套用樣式（在屬性面板的“樣式”或“類(lèi)”下拉列表中選擇樣式名稱(chēng)或在css樣式面板中右擊相應(yīng)的樣式名稱(chēng)選擇“套用”。）（4）使用內(nèi)嵌樣式舉例舉例.xiaobiaoti（類(lèi)）

、p（標(biāo)簽）.xiaobiaoti:宋體、18px、粗體、#4E6735、文本對(duì)齊（居中）、空格保留，定義在當(dāng)前文檔。p：宋體、14px、行高20px、黑色、左對(duì)齊、文字縮進(jìn)28px，定義在當(dāng)前文檔。5.CSS樣式的類(lèi)型（1）類(lèi)：根據(jù)用戶的需要?jiǎng)?chuàng)建一個(gè)CSS樣式屬性，可應(yīng)用到文字，圖片等網(wǎng)頁(yè)元素中；樣式的名稱(chēng)必須以“”開(kāi)頭。先定義后套用。（2）標(biāo)簽：重定義HTML標(biāo)記的默認(rèn)格式。只需定義，使用到該標(biāo)記時(shí)會(huì)自動(dòng)套用格式。（3）高級(jí)：為某個(gè)標(biāo)記組合定義樣式，可用于定義超鏈接的4種狀態(tài)的樣式。只需定義，使用到該標(biāo)記時(shí)會(huì)自動(dòng)套用格式。CSS樣式舉例

.image（類(lèi)）:方框?qū)?0px，高150px高級(jí):A:link

（文本超鏈接）：宋體、16px、黑色、無(wú)修飾A:active

（激活超鏈接）:宋體、16px、#FF0000、刪除線A:hover

（鼠標(biāo)懸停在超鏈接）：華文行楷、16px、#4A37AB、下劃線A:visited

（訪問(wèn)過(guò)的超鏈接）：宋體、16px、黑色、無(wú)修飾

6.CSS樣式定義（1）類(lèi)型：設(shè)置文本或段落的樣式（2）背景：設(shè)置元素的背景色或背景圖像（3）區(qū)塊：設(shè)置元素的對(duì)齊方式、放置位置（4）方框：控制元素在頁(yè)面上的放置方式，如圖片、表格的大小，表格的填充，頁(yè)面的邊界等。（5）邊框：定義元素周?chē)倪吙虻脑O(shè)置（如表格的邊框的寬度、顏色和樣式）。

6.CSS樣式定義-續(xù)（6）列表：設(shè)置列表（如項(xiàng)目符號(hào)列表、編號(hào)列表）的樣式（7）定位：定義層的默認(rèn)顯示樣式。（8）擴(kuò)展：包括過(guò)濾器、分頁(yè)和光標(biāo)選項(xiàng)。對(duì)樣式所控制的對(duì)象應(yīng)用特殊效果可提供分頁(yè)設(shè)置改變指針圖像7.外部文件方式（1）作用：可在每個(gè)網(wǎng)頁(yè)中引用，可使整個(gè)網(wǎng)站的網(wǎng)頁(yè)在風(fēng)格上保持一致。（2）用法：將css寫(xiě)成一個(gè)文件的方式，在網(wǎng)頁(yè)頭部引用該文件。注意：樣式表文件的擴(kuò)展名為.css。應(yīng)用格式前應(yīng)用格式后（3）使用外部文件方式的方法（需掌握）*1.新建css規(guī)則時(shí)，定義在“新建樣式表文件”或已有的樣式表文件*2.打開(kāi)需應(yīng)用樣式的網(wǎng)頁(yè)，單擊“附加樣式表”按鈕*3.選擇樣式表文件*4.鏈接或?qū)?5.“類(lèi)”樣式需手工套用，“標(biāo)簽”和“高級(jí)”自動(dòng)套用（4）使用外部文件方式舉例.dabiaoti：宋體、36px、粗體、黑色、垂直居中、水平居中，定義在style.css中。body：在“背景”中設(shè)置背景圖像，在“方框”中設(shè)置“上邊界”為0，定義在style.css中。小結(jié)統(tǒng)一整個(gè)站點(diǎn)風(fēng)格，用外部文件樣式；統(tǒng)一某個(gè)網(wǎng)頁(yè)風(fēng)格，用內(nèi)嵌樣式；調(diào)整網(wǎng)頁(yè)內(nèi)部某個(gè)標(biāo)記時(shí)，用直接插入式。三種樣式可在同一網(wǎng)頁(yè)中同時(shí)使用，如果其設(shè)置的樣式發(fā)生沖突，則按優(yōu)先級(jí)起作用。優(yōu)先級(jí)別：直接插入式>內(nèi)嵌樣式>外部文件方式2.4圖層的使用圖層可用于網(wǎng)頁(yè)布局圖層可放在網(wǎng)頁(yè)中的任意位置圖層中可以插入任意元素圖層可以移動(dòng)、重疊、顯示或隱藏使用圖層，可以制作出三維效果圖層和時(shí)間軸配合，可以制作動(dòng)畫(huà)圖層應(yīng)用實(shí)例-三維效果觀看頁(yè)面1創(chuàng)建層插入層：“插入”|“布局對(duì)象”|“層”繪制層：“布局”面板|“描繪層”按鈕單擊“描繪層”按鈕后，按下【Ctrl】鍵不放，可連續(xù)繪制多個(gè)層。2.層重疊

在層控制面板上將“防止重疊”選項(xiàng)取消選中，可創(chuàng)建重疊的層。否則，將無(wú)法創(chuàng)建重疊的層。層的最大優(yōu)勢(shì)之一就是可以重疊，層的重疊次序是用“z軸”來(lái)表示?！皕軸”上的值可正可負(fù)，也可為0，數(shù)值大的層在上面。

3.層嵌套

先在文檔中插入一個(gè)層。將光標(biāo)置于該層內(nèi)，然后“插入”|“布局對(duì)象”|“層”4選擇層單擊層的激活標(biāo)志。單擊【窗口】|【層】命令，打開(kāi)“層”面板，在“層”面板中單擊層的名稱(chēng)，這種方法也適用于選擇隱藏的層。

單擊層邊界，按住【Shift】可以同時(shí)選定多個(gè)層。在層面板中單擊層的名稱(chēng)，按住【Shift】可以同時(shí)選定多個(gè)層。5插入層對(duì)象當(dāng)光標(biāo)移入層內(nèi)時(shí)，可以插入網(wǎng)頁(yè)元素，如文本、圖像、層、表單、表格等。在層中插入網(wǎng)頁(yè)元素的方法與在編輯窗口中插入方法一樣。6移動(dòng)層選定層，按住鼠標(biāo)左鍵不放拖動(dòng)。選定層，按鍵盤(pán)上的四個(gè)方向鍵，每按一次，移動(dòng)1個(gè)像素，如果同時(shí)按住【Shift】鍵，每次可移動(dòng)10個(gè)像素的距離。

7對(duì)齊層層的對(duì)齊方式包括左對(duì)齊、右對(duì)齊、頂端對(duì)齊和底部對(duì)齊。執(zhí)行對(duì)齊方式后，各層將以最后一個(gè)選定的層為基準(zhǔn)對(duì)齊。先按住“Shift”鍵的同時(shí)用鼠標(biāo)選擇層，然后單擊菜單【修改】|【對(duì)齊】中相應(yīng)的對(duì)齊方式或按“Ctrl+相應(yīng)的方向”鍵。8設(shè)置層屬性單個(gè)層的屬性

“層編號(hào)”：層的名稱(chēng)，具有唯一性。“左”和“上”：層相對(duì)于頁(yè)面或父層的左上角相對(duì)位置。“寬”和“高”：層的寬度和高度，如果層中內(nèi)容超過(guò)指定大小，這些值被忽略?！癦軸”：層的重疊順序。編號(hào)大的層出現(xiàn)在編號(hào)小的層上面。單個(gè)層的屬性“可見(jiàn)性”：層的初始顯示狀態(tài)，包括顯示Defaule（默認(rèn)）、繼承Inherit、可見(jiàn)Visible、隱藏Hidden四種?！氨尘皥D像”：指定背景圖像?！氨尘邦伾保褐付ū尘邦伾?。

多個(gè)層的屬性當(dāng)選中多個(gè)層時(shí)，層屬性面板將顯示文本屬性和普通層屬性的子集，它可以允許一次修改多個(gè)層。

9層的應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)中，層能方便地定位頁(yè)面元素、顯示或隱藏網(wǎng)頁(yè)中的一些內(nèi)容。層除了象表格一樣可以設(shè)定背景、設(shè)定位置、自由移動(dòng)、控制顯示外，還可以輕松建立三維效果，我們可以使網(wǎng)頁(yè)中的對(duì)象在垂直方向互相重疊，再配合時(shí)間軸的應(yīng)用做出既美觀又具有動(dòng)感效果的網(wǎng)頁(yè)。

圖層的應(yīng)用-背景音樂(lè)插入1個(gè)圖層在圖層中插入插件（插入|媒體|插件）設(shè)置插件能夠自動(dòng)播放設(shè)置圖層的可見(jiàn)性為hidden補(bǔ)充：插入flash按鈕在插入之前，必須先保存網(wǎng)頁(yè)插入|媒體|Flash按鈕插入后會(huì)自動(dòng)生成一個(gè).swf文件另存為：設(shè)置生成的swf文件存放路徑，如：flash\enter.swf，注意“\”的方向注意：flash按鈕的存放路徑（在磁盤(pán)上的完整路徑）中不允許有中文目錄名。補(bǔ)充：插入flash按鈕選中flash按鈕，單擊屬性面板上的“播放”，可觀看效果；如要更改設(shè)置，如更改按鈕的樣式，可單擊屬性面板上的“編輯”按鈕。2.5創(chuàng)建時(shí)間軸動(dòng)畫(huà)時(shí)間軸是一種用來(lái)控制網(wǎng)頁(yè)中的層在每一秒的位置的工具。它通過(guò)在不同的時(shí)間改變層的位置、大小、可見(jiàn)性或疊放順序等來(lái)創(chuàng)建動(dòng)畫(huà)。用時(shí)間軸做動(dòng)畫(huà)可以滿頁(yè)飛,依賴(lài)時(shí)間軸設(shè)計(jì)的動(dòng)畫(huà)是建立在圖層基礎(chǔ)上的。

1時(shí)間軸控制面板Dreamweaver提供時(shí)間軸面板，用來(lái)設(shè)置和控制時(shí)間軸動(dòng)畫(huà)。要打開(kāi)和關(guān)閉時(shí)間軸面板，按“Alt+F9”鍵或單擊菜單【窗口】|【時(shí)間軸】命令。

2創(chuàng)建時(shí)間軸動(dòng)畫(huà)直線運(yùn)動(dòng)動(dòng)畫(huà)簡(jiǎn)單曲線運(yùn)動(dòng)動(dòng)畫(huà)復(fù)雜曲線運(yùn)動(dòng)動(dòng)畫(huà)使用時(shí)間軸改變圖像屬性使用時(shí)間軸改變圖層屬性直線運(yùn)動(dòng)動(dòng)畫(huà)插入1個(gè)圖層，在圖層中放置元素（輸入文本或插入圖像等）ALT+F9，打開(kāi)時(shí)間軸面板選中圖層，按住鼠標(biāo)左鍵不放，將其拖動(dòng)到時(shí)間軸的某一條動(dòng)畫(huà)通道中；或右擊，在彈出菜單中選擇“添加到時(shí)間軸”分別在起始關(guān)鍵幀、結(jié)束關(guān)鍵幀處將圖層拖動(dòng)到所需的位置選擇“自動(dòng)播放”和“循環(huán)”簡(jiǎn)單曲線運(yùn)動(dòng)動(dòng)畫(huà)先完成直線運(yùn)動(dòng)動(dòng)畫(huà)的制作（參照上頁(yè)）在起始關(guān)鍵幀和結(jié)束關(guān)鍵幀之間選擇1幀，如第8幀，右擊，選擇“增加關(guān)鍵幀”，然后在該幀處將圖層拖動(dòng)到所需位置。如需要，可重復(fù)第步。復(fù)雜曲線運(yùn)動(dòng)動(dòng)畫(huà)-記錄路徑插入1個(gè)圖層，在圖層中放置元素（輸入文本或插入圖像等）ALT+F9，打開(kāi)時(shí)間軸面板選中圖層，單擊“修改”|“時(shí)間軸”|“錄制層路徑”，將鼠標(biāo)指針移到圖層左上角的標(biāo)志處，變成“+”后，按住左鍵不放并拖動(dòng)繪制1條封閉曲線（運(yùn)動(dòng)軌跡）。選擇“自動(dòng)播放”和“循環(huán)”使用時(shí)間軸改變圖像屬性插入圖像1，如aoyun1.jpgALT+F9，打開(kāi)時(shí)間軸面板選中圖像，按住鼠標(biāo)左鍵不放，將其拖動(dòng)到時(shí)間軸的某一條動(dòng)畫(huà)通道中用鼠標(biāo)拖動(dòng)動(dòng)畫(huà)條右端的結(jié)束關(guān)鍵幀標(biāo)記，將第15幀拖動(dòng)到第45幀在第15、30幀處分別右擊，選擇“增加關(guān)鍵幀”使用時(shí)間軸改變圖像屬性在第15幀處，選中圖像，單擊其屬性面板中“源文件”文本框右邊的“瀏覽”按鈕，更換1張圖像，如aoyun2.jpg在第30幀處，將圖像的源文件更換為aoyun3.jpg，操作步驟同第步。選擇“自動(dòng)播放”和“循環(huán)”。注意：該動(dòng)畫(huà)不需要用圖層。使用時(shí)間軸改變圖層屬性插入圖層，為圖層設(shè)置背景圖像，如fj.jpg，將圖層的寬度設(shè)置為1像素，高度設(shè)置為背景圖像的高度ALT+F9，打開(kāi)時(shí)間軸面板選中圖層，按住鼠標(biāo)左鍵不放，將其拖動(dòng)到時(shí)間軸的某一條動(dòng)畫(huà)通道中；或右擊，在彈出菜單中選擇“添加到時(shí)間軸”在結(jié)束關(guān)鍵幀處將圖層寬度調(diào)整為背景圖像的寬度選擇“自動(dòng)播放”和“循環(huán)”練習(xí)鳥(niǎo)群的變化繞復(fù)雜曲線運(yùn)動(dòng)的變換圖像動(dòng)畫(huà)2.6表單的應(yīng)用認(rèn)識(shí)表單創(chuàng)建表單網(wǎng)頁(yè)的步驟添加表單對(duì)象檢查表單表單標(biāo)簽引言表單的作用是獲取web站點(diǎn)訪問(wèn)者的信息，實(shí)現(xiàn)用戶和服務(wù)器之間的交互。搜集用戶的個(gè)人資料信息、訂單信息等，都要用表單來(lái)搜集，然后將搜集到的信息提交給服務(wù)器來(lái)處理。一.認(rèn)識(shí)表單表單是由文本和表單控件組成的，用戶在表單中鍵入或選擇相關(guān)的信息，單擊“提交”按鈕將信息傳給服務(wù)器，由服務(wù)器處理收集到的信息，并將信息保存到特定文件中。一個(gè)完整的表單包含表單對(duì)象和表單處理程序兩部分。表單對(duì)象用來(lái)收集用戶信息，表單處理程序負(fù)責(zé)向服務(wù)器提交表單。只有將表單與某個(gè)表單處理程序關(guān)聯(lián)之后，才能實(shí)現(xiàn)該表單功能。一個(gè)網(wǎng)頁(yè)中可以有多個(gè)表單，但一個(gè)表單中不能再嵌入表單。二.創(chuàng)建表單網(wǎng)頁(yè)的步驟(1)插入表單(2)在表單中插入表格(3)在表格中插入說(shuō)明性文字和表單域三.添加表單對(duì)象插入表單的2種方法：插入|表單|“相應(yīng)的表單對(duì)象”命令單擊表單面板上的相應(yīng)按鈕表單的屬性面板動(dòng)作：指定表單處理程序所在的文件，可以是一個(gè)網(wǎng)址，也可以使用以mailto:為前綴的郵件地址，將表單數(shù)據(jù)發(fā)到指定的郵箱。方法：表單數(shù)據(jù)傳輸?shù)椒?wù)器的方法。post：傳遞大量數(shù)據(jù)、安全性高Get:傳遞少許數(shù)據(jù)，安全性低2.添加文本域（1）文本域的類(lèi)型：?jiǎn)涡形谋居颍狠斎攵虜?shù)據(jù)多行文本域：輸入較長(zhǎng)文本密碼域：輸入密碼（2）文本域的屬性面板字符寬度：允許顯示的字符數(shù)最多字符數(shù)：允許輸入的字符數(shù)初始值：默認(rèn)的顯示文字3.添加單選按鈕組Label:選項(xiàng)內(nèi)容布局：按鈕組的外觀風(fēng)格。表格，表格式的單列表；換行符，沒(méi)有表格線的單列表。4.添加復(fù)選框復(fù)選框的屬性面板初始狀態(tài)：初始選中狀態(tài)選定值：選中復(fù)選框后控件代表的值5.添加按鈕“按鈕”屬性面板標(biāo)簽：按鈕上的顯示文字動(dòng)作：提交表單，用來(lái)提交表單數(shù)據(jù)；重設(shè)表單，用來(lái)取消表單輸入內(nèi)容，重新輸入；無(wú)，根據(jù)處理腳本執(zhí)行相應(yīng)操作。6.添加列表框類(lèi)型：設(shè)置列表框外觀。菜單，顯示為下拉列表框；列表，顯示為帶滾動(dòng)條的平鋪列表框。列表值：設(shè)置列表項(xiàng)目。初始化時(shí)選定：設(shè)置列表框中初始值允許多選7.添加文件域使用文件域時(shí)要求將表單的方法設(shè)置為post。四、檢查表單可以為表單或文本域添加行為，用來(lái)檢查指定文本域的內(nèi)容是否符合規(guī)定，以確保用戶輸入的正確性。五、表單標(biāo)簽<form>表單內(nèi)容</form>小結(jié)表單的概念表單的作用創(chuàng)建表單網(wǎng)頁(yè)的步驟表單的插入和屬性設(shè)置常用表單域的插入和屬性設(shè)置2.7用框架布局頁(yè)面框架也是一種設(shè)計(jì)網(wǎng)頁(yè)布局的技術(shù)?？蚣軐⒁粋€(gè)瀏覽器窗口劃分為多個(gè)區(qū)域，每個(gè)區(qū)域顯示不同的網(wǎng)頁(yè)內(nèi)容。一組框架構(gòu)成的網(wǎng)頁(yè)被稱(chēng)為一個(gè)框架集?？蚣芗且粋€(gè)網(wǎng)頁(yè)，用來(lái)存儲(chǔ)頁(yè)面的框架結(jié)構(gòu)，包括框架的大小和位置信息等?？砂阉醋魇侨萜?。其中，每一個(gè)框架都對(duì)應(yīng)一個(gè)頁(yè)面文件。在框架集中，一般情況下，可以用其中的一個(gè)框架來(lái)保持網(wǎng)頁(yè)中固定的內(nèi)容，如網(wǎng)頁(yè)大標(biāo)題、導(dǎo)航菜單等，用一個(gè)框架來(lái)展現(xiàn)所選擇的網(wǎng)頁(yè)內(nèi)容。1.創(chuàng)建框架和框架集插入預(yù)定義框架集在“布局”面板上單擊“框架”按鈕，在下拉菜單中選一個(gè)框架集樣式。1.創(chuàng)建框架和框架集用戶自己設(shè)計(jì)框架集上下拖框架集的邊框左右拖框架集的邊框拖動(dòng)框架集的邊框角修改|框架集2.選定框架和框架集用鼠標(biāo)選中框架或框架集按下Alt鍵，單擊欲選中的框架的任意位置利用框架面板選中單擊框架內(nèi)的任意位置，可選定框架單擊框架面板四周的邊框，可選定框架集3.設(shè)置框架邊框的顯示和隱藏查看|可視化助理|框架邊框4.刪除框架和框架集刪除框架，將該框架邊框拖到父框架的邊框上或拖離頁(yè)面刪除框架集，要么不保存，要么刪除該框架集文件。5.框架和框架集屬性面板（1）“框架集”屬性面板邊框邊框?qū)挾冗吙蝾伾岛蛦挝?.框架和框架集屬性面板（2）“框架”屬性面板框架名稱(chēng)源文件邊框和邊框顏色滾動(dòng)不能調(diào)整大小邊界寬度和邊界高度6.保存框架和框架集一個(gè)包含n個(gè)框架的框架頁(yè)所包含的網(wǎng)頁(yè)個(gè)數(shù)為n+1。在保存時(shí)，需要將其保存成n+1個(gè)不同的文件。命名框架中的各個(gè)網(wǎng)頁(yè)時(shí)，要做到見(jiàn)名知意。6.保存框架和框架集（1）保存框架集文件|保存框架頁(yè)如果框架集文件是主頁(yè)，需保存為index.htm（2）保存框架文件|保存全部7.在框架中插入文本、圖像和表格直接在每個(gè)框架中插入直接編輯某框架對(duì)應(yīng)的頁(yè)面文件2.8使用行為行為，是將JavaScript代碼放置在文檔中，使訪問(wèn)者能夠與網(wǎng)頁(yè)進(jìn)行交互，從而以多種方式更改頁(yè)面或執(zhí)行某些任務(wù)。行為由事件和該事件觸發(fā)的動(dòng)作兩部分組成。事件指示網(wǎng)頁(yè)的訪問(wèn)者執(zhí)行了某種操作，