DM網(wǎng)頁制作實驗指導(dǎo)書

1、DREAMWEA VER 8 基礎(chǔ)安裝好Dreamweaver 8中文版后，運行，選擇 Dreamweaver 8工作區(qū)后，將看到下面的畫面:一、為菜單區(qū)，和其它的軟件一樣，該軟件所有的操作命令都可以從這一個區(qū)內(nèi)找到，舉個例方?jīng)_ 口 Ml.iStX CL）辭歿曲子，選中該區(qū)編輯（E）中的參數(shù)選擇（S）. CTRL+U其中CTRL+O該選項的快捷鍵,如下圖所示：，禰文再生本g面而底注！品目照也.71 L_制.d C I :一 儂一注擦復(fù)根與 i*綠三希去如CtrltJkCtrl+fClrHJUlrlW查般T一個Q0F3族沁喃韋時帝亞，箕以使用斗哥UK牌舞浜K 11）械違圖必）.供IVES g .

2、在這里，你可以把自己的 下圖：參教選舞字偉分芟素 瞬 京彩元圖一與W亍色能主 阡改唱售前功標(biāo) si 筠碼做建字仰設(shè)置 西聯(lián)酒半（Utinl限層立均藺手仔（）二像片大小即:|lZ M |fl蹄字體 0）的索J3B231Ev A+Q）： IE pt v代6隨圖：朝大小一叵Ri V林寰險登疆工）呆體7大小憶）；吊H vT1DREAMWEAVERM為自己喜歡的樣式，一般使用默認就可以了，如為了使用的方便，選中字體這一項目，把參數(shù)設(shè)置為上圖所示的樣子，因為默認的時候?qū)嵲谔y看了（當(dāng)然也可以選自己喜歡的）。如果你瀏覽網(wǎng)頁時使用的不是IE的話，請選中 在瀏覽器中預(yù)覽這一項（以后制作網(wǎng)頁的時候要用到），點一下

3、那個“+”添加你使用的瀏覽器程序。二、 是插入項目選擇工具（插入面板），在 選中了某個項目， 中會出現(xiàn)相應(yīng)的插入項目，下面詳細介紹，選中 常用這一項后如下圖：捕入法柞慵入E-Lil健諾信也信閾口摘入用片|詢而周戊本期,框圖衰事隔拜麗T礪囪電 印8j俯甫兩力口綱目回由圜.最皋T LLJ T L _捕人地掛fm -Fir-vnrks原鴕選庠卷I八口目錨點用于網(wǎng)頁中的定位，如網(wǎng)頁的上、中、下等；圖像點位符是用于動態(tài)交換圖片的，后面再說; Fireworks HTML為用Fireworks軟件切割出來的圖片；交換圖像為鼠標(biāo)移上去時變?yōu)榱硪粓D片，增強動感；表格數(shù)據(jù)可以將其它文件的數(shù)據(jù)轉(zhuǎn)化為表格，插進網(wǎng)頁

4、；標(biāo)簽選擇器可以插入其它不常用的HTMLfe簽。在 中選中布局一項，共有 標(biāo)準(zhǔn)視圖和布局視圖 兩種視圖，如下圖所示:口 常用硒宿顆陪表朝握困鋪藻ffTS腰博都面畫酬 國鼠恒SW圖布局曜日工M入表格:i層在此現(xiàn)雷下,達兩項不可用在標(biāo)準(zhǔn)視圖下，可以插入表格和在網(wǎng)頁制作區(qū)畫圖層。切換到布局視圖下，如下圖:由此永圖予此向盥人可用描繪而局單兀格在布局視圖下，可以在網(wǎng)頁制作區(qū)描繪布局視圖下的表格和單元格，描繪好之后，再切換到標(biāo)準(zhǔn)視圖后，可以轉(zhuǎn)化為表格，這個比較好用，可以用來排版網(wǎng)頁，后面將說到。在 中選中文本一項，可以對文本進行格式化，如下圖:常用布局文本表格框架噗里.模旭字將娓體文件頭腳本ASF應(yīng)用程序

5、境 B / S sk可IM, m hl h2 h3 W ol li dl dt dd . abtx. .miacA可以對字體進行全面的格式；B可以將字體變?yōu)榇煮w；I為斜體；S為加強字體；這些比較簡單,可以自己一項一項慢慢試試，看看字體有什么變化。在 中選擇表單（表格和框架兩項后面再說），可以插入各種按鈕，如下圖:席用布局宜本表格腥器表單.提菽學(xué)替I螳擇文件頭:腳本ASP應(yīng)用程序I - - IIIP NDA為表單；B為文本框；C為隱藏域；D為文本區(qū)域；E為多選框；F為單選框；G為單選按鈕 組；H為列表/菜單；I為跳菜單；J為圖像域；K為文本字段；L為按鈕；M為標(biāo)簽；N為字 段集。（詳細的使用方法

6、后面將說到） 在 中選中模版可以使用模版制作網(wǎng)頁或自己創(chuàng)建模版，做起網(wǎng)頁更加方便快捷。在 中選中字符可以插入一些特殊的字符，如：？ ？，其中BR為換行符（快捷鍵為 CTRL+ ENTER此項與ENTERS所不同，可以自己試試），其它的可以自己試試。在中選中媒體，可以插入FLASH FLASH按扭 FLASHt本 Applet 等插件。在中選中文本頭，將出現(xiàn)下面的畫面:常用I布局文本I表格框架.兼電I模板字將I媒體王庫買1訶本I應(yīng)用程序關(guān)鍵字為網(wǎng)頁的關(guān)鍵詞，可以讓搜索引擎搜索到；說明為網(wǎng)頁的說明，如作者、介紹等；刷新可以設(shè)定多長時間后刷新網(wǎng)頁或跳轉(zhuǎn)到其它網(wǎng)頁；基礎(chǔ)為網(wǎng)頁的基本鏈接，如插入一個目標(biāo)

7、為_blank基礎(chǔ)，網(wǎng)頁中的一切默認鏈接都將打開新窗口；其它比較少用不再詳細講述。在中選中腳本，可以插入各種 Javascript 、Vbscript或其它腳本。ASP編程里用到的在 中選中ASP （編輯ASP網(wǎng)頁時用到，新手可不必理會），可以插入各種 標(biāo)簽。在中選中應(yīng)用程序（編輯動態(tài)網(wǎng)頁時候用到，新手可不必理會），可以對數(shù)據(jù)庫進行操作。三、對區(qū)的詳解如下圖：金亶I戢標(biāo)題無標(biāo)題文檔i好,第 c圖it喀T 1可捶到代民視圖由換到他注神圖文件哲建用于看網(wǎng)站同時顯示代碼和設(shè)計班用注定阿蛆的除題覘圖搐里以免叫猛網(wǎng)或在上圖中，點擊帶有向下小箭頭的工具，會彈出更多選擇。四、 區(qū)為網(wǎng)頁設(shè)計區(qū)，你所設(shè)計的網(wǎng)頁

8、或代碼將出理在該區(qū)。五、 區(qū)為屬性區(qū)（屬性面板），在該區(qū)可以對選中的對象進行一些設(shè)置（后面將有詳細講解）六、區(qū)如下圖所示，詳細的使用將在后面的章節(jié)詳細講述。而由妣處可st蕾矍上臺操作舉例題目：用 DREAMWEA VER 8 制作一個簡單網(wǎng)頁實驗操作步驟：打開 DM 8 ，點擊 Insert 插入工具欄表格按鈕，在彈出對話框中設(shè)置表格屬性。設(shè)置行為 5 ，列為 1 ，寬度 width 為 700 像素在表格第一行中輸入文本的標(biāo)題點擊菜單windowproperies 修改，打開屬性面板。.鼠標(biāo)點擊表格第二行，在屬性面板中點擊“ bg”背景后的顏色框，如圖，設(shè)置表格背景為深藍色，代碼為“ 003

9、366 ”第三行為空第四行輸入文本內(nèi)容，回車，點擊insert 工具欄圖片按鈕，選擇一個圖片插入表格中。設(shè)置居中，再回車輸入幾個文字，也設(shè)置居中。鼠標(biāo)點擊表格第二行，點擊Insert工具欄圖片按鈕，插入一個1*1像素大小的透明圖片。設(shè)置表格高度為1，單元格成為一條直。寫上網(wǎng)頁的標(biāo)題。.完成本頁制作，按F12鍵預(yù)覽網(wǎng)頁效果。實驗二圖文并茂實驗?zāi)康模簩W(xué)會使用圖像和直線的做法一、直線問題L打刑feamwe和部界，點擊Insert工具欄直段按鈾插入-M據(jù)2/觸巾涯籃疑和喊豪并且居也浦靛上角胃示代印鮑進入源照：4,嫄標(biāo).為直線獻現(xiàn)在代碼中加入“加”奸ftxxxr,設(shè) 施埃鹿為紅色5凄聘仙M紇賭不剛他員瓶

10、翻制值闞2鑲觥順費懸、圖像排列陽州皿 騙 骷hwrtXRg/槌H在耨眥耀幗戲稠卷 ?出1行加.期的寬解詁也加00像就工修睇-神T腫加人-甑.酬數(shù) 浙嘉7忡也插入圖片4在新Q獅鞠入您雅要版菽5邯鼠標(biāo)點擊懿述.蝌表翻跑瞅小.并髓居中&藏神制作打魂殿服躅、圖文環(huán)繞L打開Dfmim的廿融MXr輸入幾出文字，點擊In聘吐工具欄圖片按鈕,在立字中播入一個圖片.3選中圖片,在屬性Porperties,申.祺置Align為Loft4 .可以推動圖片到您所希望的地方*5這樣就做好了一個文字環(huán)境圖像的網(wǎng)頁，完成本例荊作按F12 雒測覽網(wǎng)頁螢果,四、項目列表L打開口叫加時MX.上入嚷的愛好：設(shè)置店中.點卻MVt工具

11、段加小按包.打開土水群式 再點擊“1”按銅,為無探列豪.回車，類似“粒的矍好；分別再做”戲的牧量.我的相冊.我的日記”三個無序 知艮的項目.4在燈載的相冊工不再翰入三個項目,，小學(xué)同學(xué).高中好友.大學(xué)時代”5.再選中這三個項比點擊同性面板中的“有序見雷?？仆钢械娜齻€項目就成了 如圖所示的看序列墨，6,括著設(shè)置居中,設(shè)置右邊幅進工完成本例制作.按F12置頊覽網(wǎng)頁效果五、移動文字L打開加防叫ear MX.輸人如圖更笈選中第一行文字，森看源代碼:2,如圖Fgrqwee direction=lttftP，表示文字從右向左耨動3第三行文字 Uoum hfth3vior=SCr0ll表示文字的動作是循環(huán)凝

12、動,4第四行文字設(shè)置了移動延時.5, St后一行文字,分別表示邊框垂直距離30和水平獨需20,邊框究60。像索 背景包代利為阡f,命文字居也6完成本例制作,按F12鍛領(lǐng)腎網(wǎng)頁效果，網(wǎng)頁設(shè)計與制作指導(dǎo)教案第一部分 -DREAMWEA VER- 8 -實驗三表格應(yīng)用實驗?zāi)康模簩W(xué)會表格在網(wǎng)頁中的用法實驗內(nèi)容：3-1圖片的疊字問題1打開Dzm加抑的1K,點點去*收工具欄表楣按杷,在彈出對話框申設(shè)置表格IS性.r-3,南擊倡柱而機在對話裾中點擊“B屋的文件夾校通選擇一篇圖片作為背曩圖片.4朋標(biāo)點毓格邊檢 蹄袤稼如圖所赤便裊醐長寬大小與背融片的大小相同.5芯表格中輸入鴕般箕洲就在圖片上淞加了焯.6完成搦制

13、化 窗陶施覽網(wǎng)員效果3-2表格的背景L打開山蜘螂丫MX.點擊Insert工具欄表格校訊播入3行3列的表格：.在部面板也點擊飛葭的文件夾拉也在一個單元格巾插入T菅即出.鼠標(biāo)點擊表格逆國拖動表格使其長更大小與背景圖片的大小適當(dāng),4,再然個表翱一個背蒯片。插入一個3行3列的表落選中整個去格5.再點擊 歸 的文件夾按鈕，插入一膈背景圖用拓動表格調(diào)整大人曼后 設(shè)置表格甚巾.6完成本例制作按F嚶預(yù)覽網(wǎng)頁瓣3-3表格的邊框L打開Drearogr MX.點擊Insert工具欄米鋁技鉆,插入3訐3列的裳格2在屬性面板中,黛在裊格謝E Bord”：為1,然后再饒式邊框融色為紅色 O3這杵一個有邊框乂有邊圈岐色的我

14、格就做好了4熱后再做一個邊框襄格.盍擊lmet工具卷表格校也插入3行2列的泰招5出直袤格量框(Border)為L單元能離-CeHSpace)也為16技者i首邊枇靛色為當(dāng)血電 W99FF1 ,科考兩個表撕比較一下實際我更L靠后點獷B院后的熟色忠上兩個戢格分別添加背暴色(BeColor)隊完成本制制化技FI2健博貫網(wǎng)頁效果3-4表格的直線問題L打開Dre刖跚仃 丸 點擊Inrtl具欄/格按鈕t排入1行1列的表格,2,點擊111sBM工具欄圖片按鈕,在表格中插入一個hl像素的透明圖片口3i然后設(shè)置單元格高度(Heiaht)為1,表格自動縮成一條直線，本點擊”B/后的顏色框，結(jié)表格加一個紅趣背景這樣就

15、有了一條紅色橫線-5,再插入一個1中列的表格,點擊工具欄圖片按用t在表格中插入一個像素的透明圖片6,然后設(shè)宣單元格賽度(Width)為1,高度(Height)知政 工選中表格,杷錯個表格的寬度40。去想這棒衰格就成了一條豎線:&點擊”取“后的弱色框，給表格添加一個背景色一9,完成本例制作.按F12鯉預(yù)覽網(wǎng)頁效果。3-5多樣的表格LabellI,打開UpamEdwer ML點擊InwriLH雙情按tH,標(biāo)入一個表格,不轆任何ifi首 2插入第二個表格.如圖設(shè)置,做成細表格,3插入第三個表格.做正立方表格.查看代鴉,如圖設(shè)謂表格邊樞4一插入第四個聶格.做凰詢費燧 充看代碼，斷塘了。匕1醯鼠參效5.

16、插入第五個表格,做無名表格, 索看代碼,MflTfl Ihtt# 1 wnd#K8.再播入一個去格, 做個表中衰毀復(fù)警看代再如II.工完成本例制作.住F126t預(yù)覽網(wǎng)頁效果3-6表格的隨意拆合打開加曲即”“梆點擊工具欄表格按鈕,橇入3行3列的表格二2選中第1行第3殂在屬性面板中.點擊，Me酬cfllla) ,組合3列成為1列,3再在第2行第2列中.點擊(Splits cell),拆分單元格成為兩列二4同樣把第3行第2列拆分為兩行，這樣.表格就具有了各種單元格口5,完成定例制作,按F12鍍預(yù)覽網(wǎng)頁放黑3-7隨意表格OTffDreaiweavbr MX,點擊Insert工具欄表格按鈕,插入3行3列

17、的表格$ 工把第一行合并成1列.點擊1儂2代工具欄圖片按鈕，在表格中加入一個1像 素透明圖片3響時設(shè)置單元格高度(HeEghti為5.第一行的高度就成了5愫素4合并第二行，插入一個1像素透明圖片，設(shè)置單元格高度CHeight)為心 第二行的高度就成了 H像素。5.合井第三行，捅入一個1愫素透明國片，設(shè)置單元格高度CHeight)為直 第三行的高度就成了 15像素.員裘格只要插入一個1像素的圖片.它的大小就可以隨意改變了*L為了能看到實際效果.我們設(shè)置裳格邊框為1,&-完成本例制作.按門2罐預(yù)覽網(wǎng)頁效果.3-8表格應(yīng)用L打開MX.點擊lnst工具欄表格按超,插入7行2訓(xùn)的表格,在屬性面板中.設(shè)置

18、表格加I Ie口ace和的rd名r都為L同時給邊框添切顏色 口thT imel ines.打開時間幀,如圖.4用鼠標(biāo)拖動層到時間幀中,.點申時間楨的第一幀，自己設(shè)置層的位置，.點中最后一幀,用鼠林拖動層水平移動一段距離.旗者選中時間城中的AutElM,讓層的移動自動運行口&可以增加時間幀的救目，使得移動變慢g.完成本例制作？按Fia設(shè)預(yù)覽網(wǎng)頁效果,4-6 窗口和菜單L打開口yamfteav時MK,點擊Insert工具欄表格按鈕.插入一個表格,2一輸入一些文字u3另做一個彈出文件，在其中重復(fù)輸入“這善一個新窗口I ”4.回到原來的頁面.拖碎鼠標(biāo).選中本頁鏈接在屬性面板中點 擊link后面的文件夾

19、按鈕，選擇剛才做的彈出文件，5,給“打開新強口做同樣的錐接,只是在屬性面板中選擇“的t的 下拉菜單為black.最后來場比由阿口*點擊呢i “面板中的BfhavWr與、網(wǎng)點擊+ 選擇Open Browser Window .在彈出對話框中點擊叫訓(xùn)s針選擇彈出文件、設(shè)置彈出窗口的大 小為500 x 400,點擊0L&點擊左上角“顯示代碼按鈕.進入源代碼編輯.在源代碼中加入 一個參數(shù).如圖，熔加式y(tǒng)住樣式定義鼠標(biāo)光梯為手形.完成本例制作，按F12最預(yù)覽網(wǎng)頁效果.網(wǎng)頁設(shè)計與制作指導(dǎo)教案第一部分 -DREAMWEA VER- 13 -實驗五 CSS高級應(yīng)用實驗?zāi)康模簩W(xué)會CSS樣式表的使用實驗步驟:5-

20、1CSS簡單應(yīng)用1行刑rwnwea幄f UK1橫入幾位文字.2點擊M*ig面板中的CSS St/les,再點擊墉輯一個新孱式豪3.在源宙麻姬札弟一個是可以自定義部第二個圣H林站.下及察的申有很久4家!燧擇%始進用I電點擊制.5在算出對玷椎中.選玨穴點大小SI為gPoinH6國在郵4設(shè)置必艮浦都為Q，如月頁內(nèi)容與瀏班翁邊他的總惠都第0.點擊0L網(wǎng)頁立發(fā)生相應(yīng)變化.插入一悌插把:U品后TB稠果格內(nèi)9點擊M&i和面板中的C$ Sls,百點擊二，為body/遭一個林先素、d：必表格杵式 處在，出對話版中.造牌文本大小Si曲為9%而出4置文本敷色為紅色.0CII如果覺胃不看富,可U點輸siM而板巾（器恥

21、制時的囪眥如.可對相應(yīng)設(shè)置進行修政12例如 創(chuàng)0臨政劃忖”標(biāo)嶼 地帆1加曲勒為1物腌品即文本行加方180113,可以點擊如遂行）|覽一14完成本科制作.拓Fl?境假覽同頁或火5-2 超鏈接式樣1,打開。0的俞6加匕MX,插入她用表格和文字.2一分別選中兩行文字.在Link后面選棒3。M%1鼾&n為Bisk,打開新窗口.3點擊比i和面板中的CSS Styles,再點擊F二新建樣或裝.4.在海出對結(jié)樞中.選任艇三個Type.對那抵接進行樣式編輯”5選擇下拉莫弗中的-ML有（5接的文字樣式.點擊既，做圉示設(shè)置6再4hxi$ited.訪問過后的幡接悻占如圖設(shè)置.7按苦做，口府鼠標(biāo)置于特接上的樣式.如圖

22、設(shè)置8口肩是，丸He,即fft標(biāo)點擊破接處還沒那政時的神戈如留設(shè)苴9牲后.我們做另一個自定義鞋盤杼出二11破二通為了區(qū)耨 1膿直你RII詠軌論ittd賺色的紅色,憶仃的獻色為藍5后active可怵F用電IL選中陽密處文本,再點擊C疆中的N的應(yīng)用樣式表aL12.完成本例制作,按門2設(shè)僚覽網(wǎng)頁效果，5-3 另類鏈接打開Ormev肝匹點費左上河顯卡代科”拉亂進入我代酣揣相.如賽濟加版提樣小2超后在的公中海加胴散部分代現(xiàn)h是M的拿虱t是連接文字參效工回到圖粕編除播入一個米格，4選中泉怖進入或代碼銅卷,在其中插入一代明獷仃汕3如逸實雙連接文字的效果5.制成本例制作.按Fl2at他奧阿貢城SL5-4 改變

23、鼠標(biāo)樣式L打開DygFEveWX.珞入姐圍蠢格和文字.2點擊Ui的面板中瓶SSStylM，森點擊所建自定義樣式表;他就、3在&加6i9M中啪際F攜單為翻狀為Mn評限點擊B.4選中第一行文字點擊樣式刈馳1應(yīng)用.5然后分別% Ms2，其Cirior為cxdwir+字光扁guw3力t*t、本光掠 1 mu 5專4”為點播管光扁;用網(wǎng)專電5為h&l購超光靠6再對各文本分期點擊樣式應(yīng)用，7完成本例制作,按2槌預(yù)置網(wǎng)頁我果5-5彩色滾軸L打開Dr酎附4vdMX,在源代鶴中加入如圖所示代碼，富croHbar-Sce-colo為立體諼第條凸出部分的顛色、scrol lbarhii-hl ight-glm為鬣條

24、空白部分的顛色scrol lbar-3dl垣hLmlcr為立體滾動條身邊的顏色Jscrol IMrrhrk雷hwdowcolor為怪體出動。由陰影的薇色，scfoI lb曠曲adOTTglor為“立體灌窗條明M窗顏色、7jcfoI IbTcrrwrco即針上卡按鈕上三角箭頭向題色“口息 53011gLKMkHoEr為滾動條的基本函色二9,最后注意，滾動條的這個樣式屬性只有IE5版本以上才靛支揩.斫以您在調(diào)試的時候要注童,10.完成本例制作.按F12犍預(yù)覽網(wǎng)頁效果.5-6文字陰影1打不加0抑9髀0，取,如圖括人表格和文字2,點擊Owign面板申的CS$ $ty|g加點擊丁.新建二/祥武,如S1設(shè)

25、置3.新建自定義樣式二廣，點擊Haion鼠，F(xiàn)lltr（X）下過菜單中選擇如圖遮樂4,表示”加光輝在的近動象的由外:如圖設(shè)置，5前建自定義樣式二I廣,如圖.沒自沌橫.6選中第一個表格.點擊樣式匕應(yīng)用7選中第二個梟格,點擊棒式H.應(yīng)用實驗六 互動效果（行為應(yīng)用）實驗?zāi)康模簩W(xué)會使用Dreamweaver內(nèi)置行為設(shè)置實驗內(nèi)容：互動效果一：在網(wǎng)頁上經(jīng)?？吹竭@樣的效果，當(dāng)鼠標(biāo)移到一張圖片上的時候，原來的圖片就切換為另一張圖片，鼠標(biāo)移開后，又恢復(fù)原來的模樣，是怎么做的呢？Dreamweaver比Frontpage優(yōu)勝的其中一個地方是Dreamweaver能做出能具互動性的網(wǎng)頁?，F(xiàn)在，我們就利用Dreamw

26、eaver制作這個最簡單的互動效果變換圖片。準(zhǔn)備兩張大小相同的圖片，一張是鼠標(biāo)還沒有移上的狀態(tài)，另一張是鼠標(biāo)移上去后的圖片，例如 以下兩圖：javascript I javascript)點擊對象面板上的 舉（ 區(qū)選中常用，在 區(qū)可找到），看到如下的對話框:A圖像名稱（Image Name）:變換圖片效果的標(biāo)記名稱，Dreamweaver會自動分配；B原始圖像（Original Image） :指定原始的圖片，（例如這里是左圖）C鼠標(biāo)經(jīng)過圖像（Rollover Image）:指定鼠標(biāo)移上去后的圖片（例如這里是右圖）；D按下時，前往的 URL圖片的鏈接網(wǎng)址（也可以是站點內(nèi)的文件，點后面的瀏覽可以

27、選擇）； 例如按照上圖的設(shè)置完畢后，按下 OK然后可以按F12（F12為預(yù)覽網(wǎng)頁的快捷鍵）預(yù)覽一下效果 了。小提示：細心的朋友會發(fā)現(xiàn)，做出來的鏈接不會彈出新窗口的，你可以選中剛做好的鼠標(biāo)經(jīng)過圖像，在屬性面板里的 目標(biāo)（T）選_blank 互動效果二：按下一按鈕時，彈出一個問候的窗口。在插入面板（ 區(qū)），切換到 表單，插入一個按鈕，如遇到對話框，選否就行了。選中剛插入的按鈕，在屬性面板把 標(biāo)簽（L）改為請點擊我展開 區(qū)，再展開設(shè)計窗口，切換到 行為窗口，也可以從 區(qū)（菜單欄）里的 窗口（ W ,再選行為其中Shift+F3為該操作的快捷鍵 點一下行為窗口上的“ +”，再選彈出信息，如下圖:播放聲

28、音打開瀏覽器畫口彈出信息調(diào)用 J%#。* 1 p t 改費屬性 恢復(fù)交船國像 臉芟表率 椅直插件如果你發(fā)現(xiàn) 彈出信息 這一項為灰色的，不可選時，不用急，先選顯示事件，接著IE 5.0 （選IE 5.5 或IE 6.0 也是可以的）,如下圖：接著再按上一步的去操作，選中 彈出信息 后會出現(xiàn)下面的對話框:填上你喜歡的 消息，按下確定就OK了，再按下F12就可以看到你的大作了。下面的是做出來的效果：請點擊我 |在Dreamweaver中，更復(fù)雜的效果是通過一個叫行為(Behaviors )的功能實現(xiàn)的，我們又稱為事件的響應(yīng)。通過網(wǎng)頁元素的變化，如鼠標(biāo)的移動、點擊等“事件”(Events),觸發(fā)彈出窗

29、口,關(guān)閉頁面等“響應(yīng)” (Actions ),就是一個事件的響應(yīng)。而值得高興的是，“行為”的制作過 程幾乎是傻瓜式的，下面講述行為的用法：按Shift+F3 ,打開行為面板(上面已經(jīng)說過)；1、選取產(chǎn)生行為的元素，例如圖片、帶鏈接的文字、層等。如果需要在頁面一載入就開始出現(xiàn)效果，可以選擇狀態(tài)欄上的標(biāo)簽彈出菜單在網(wǎng)頁制作中是一種非常常用的菜單方式，這種菜單不但制作簡單， 而且效果也很好。效果說明本實例所要完成的效果是當(dāng)鼠標(biāo)移動到文字上時，就會彈出一個漂亮的菜單，如圖17-1和圖17-2所示。彈出菜單在網(wǎng)頁制作中是一種非常常用的菜單方式，這種菜單不但制作簡單，而且效果也很好。我是彈出菜單圖17-1

30、鼠標(biāo)未鼠過時的狀態(tài)在廣山海陰香 71圖17-2鼠標(biāo)經(jīng)過時的狀態(tài)創(chuàng)作思想本實例首先在網(wǎng)頁中輸入一行文字，并對文字做一個特殊的超鏈接，然后利用Dreamweaver MX 2004自帶的行為制作彈出菜單。操作步驟(1 )輸入文字并設(shè)置超鏈接。在網(wǎng)頁中輸入文字，因為單獨的文本文字是無法添加行為的，按照Dreamweaver中的約定，將文字的超鏈接設(shè)置為“javascript:;”才能夠添加行為。所以將文字的超鏈接設(shè)為“javascript:; ，并執(zhí)行【顯示彈出式菜單】行為，如圖 17-3所示。圖17J輸入文字并執(zhí)行【顯示彈出式菜單】行為(2 )設(shè)置菜單項和子菜單項， 并為菜單設(shè)置超鏈接，然后安排好

31、各個菜單的次序，如圖17-4所示。圖17-4設(shè)置菜單項(3 )設(shè)置頁面元素。將菜單設(shè)置為垂直菜單，并分別設(shè)置菜單的字體、字號、對齊方式、般狀態(tài)和鼠標(biāo)滑過時的狀態(tài)，如圖17-5所示。圖17-5設(shè)置菜單外觀(4 )設(shè)置【高級】標(biāo)簽。在【高級】標(biāo)簽選項中設(shè)置菜單的延遲時間，以及是否顯示菜單邊 框。然后設(shè)置邊框的寬度、顏色、陰影、高亮，如圖 17-6所示。2、按工J按鈕選擇一種響應(yīng)（不同的元素，對應(yīng)的響應(yīng)也有所不同），并在隨后的對話框中設(shè)置 此響應(yīng)的屬性；以下是可以供選擇的響應(yīng)說明：播放聲音打開瀏覽器窗口彈出信息調(diào)用J即壬cri pt改變屜性恢復(fù)交損圖像檢董表單檢直插伴檢查瀏覽需交換圖像控制 Skfj

32、clwae 醺 FLisL設(shè)置導(dǎo)航噗圖像諼置文本卜時間軸上跳轉(zhuǎn)藁單跳轉(zhuǎn)聚單開始拖動層顯示彈出式菜單隱藏彈出式兼單預(yù)先袋入圖像 TOC o 1-5 h z 轉(zhuǎn)到UHL-顯示事件，|奈取更多行為-一播放聲音：可以為網(wǎng)頁加入聲音;打開瀏覽窗口：可以打開一個小窗口（和網(wǎng)上的彈出窗口一樣）；彈出信息：可以彈出一條警告信息；調(diào)用JavaScript :調(diào)用網(wǎng)頁中包含的 Javascript 程序；交換圖像：實際上是交換圖像；更改辦容：可以改變已經(jīng)插入的層的內(nèi)容；恢復(fù)交換圖像：把已經(jīng)交換的圖像恢復(fù)過來；檢測插件：可以檢測訪問者的瀏覽器是否己安裝瀏覽網(wǎng)頁所必須的插件;檢測瀏覽器：檢測訪問者使用的是什么類型的瀏

33、覽器；檢查表單：檢驗網(wǎng)頁中的表單是否合法；控制 Shockwave 或 Flash ：控制網(wǎng)頁中包含的 Shockwave 或 Flash ；轉(zhuǎn)到URL跳轉(zhuǎn)到其它頁面；設(shè)定圖像導(dǎo)航條：和交換圖像差不多；設(shè)置文字：在特定的地方顯示文字；顯示或隱藏層：設(shè)置圖層的顯示或隱藏；時間軸：可以制作更多的動態(tài)交果；（以后再說）跳轉(zhuǎn)菜單：插入跳轉(zhuǎn)導(dǎo)航菜單；跳轉(zhuǎn)菜單開始：控制導(dǎo)航菜單跳到哪個頁面；拖動層：設(shè)定圖層是否允許拖動；預(yù)先載入圖像：在網(wǎng)頁裝載前先預(yù)先載入圖像；顯示事件：設(shè)定顯示IE或NS各個版本的事件；下載更多的行為事件：打開網(wǎng)頁，去下載更多的事件。3、選擇事件（ Events ），決定在什么情況下觸發(fā)

34、響應(yīng)。常見的的事件有：onMouseOver：鼠標(biāo)移到目標(biāo)上；onMouseUp按下鼠標(biāo)再放開左鍵時；onMouseOut:鼠標(biāo)移開時；onMouseDown按下鼠標(biāo)時（不需要放開左鍵）；onClink ：點擊時；onDblClick ：雙擊時；onLoad：載入網(wǎng)頁時；onUnload ：離開頁面時；onResize ：當(dāng)瀏覽者改變?yōu)g覽窗口的大小時；onScroll ：當(dāng)瀏覽者拖動滾動條的時。注意：當(dāng)你找不到所需要的事件時，選顯示更多事件，換取另一個瀏覽器的件事，或更高版本瀏覽器的事件實驗七互動效果（行為高級應(yīng)用）實驗?zāi)康模簝?nèi)置行為的高級設(shè)置實驗內(nèi)容：一、浮動提示:.首先插入一個兩行三列的表

35、格，第二行的三個單元格合并起來，邊框為0,并填充文字，文字加上應(yīng)該的鏈接，第二行的單元格插上一個圖層（命名為：good）,如下：.選取“品味人生”四個字，按 Shift+F3，打開行為面板，點擊行為面板上的 本，再選設(shè)置層文本，如下圖：恢復(fù)交換曼像 檢查高卜 檢查插件 檢查瀏覽器 交換屋像櫻置層文本儻置睡架文本 諼置文本糜變字 設(shè)置狀態(tài)條文本時間輔跳轉(zhuǎn)兼單 跳轉(zhuǎn)菜單開始 拖動層 顯示-噫藏層 顯示彈出爆單 限該彈出式菜單 M方十*1-、fFVfi.然后出現(xiàn)對話框如下（在 新建HTML1填上需要的文字），然后按確:.再點擊一次圖重復(fù)剛才的步驟，不過這次，新建HTML里不填任何文字，然后確定。行為

36、面板變?yōu)橄聢D：.把第二次加進的行為 onMouseover改為onMouseout,（點onMouseover旁邊的工1,找到 onMouseout后選中它，如果找不到,選顯示事件，再選其它版本瀏覽器，這樣就有onMouseout了），如：-i1動作設(shè)置層文主視圖-站點-0取消i 為EK OUWMX教程)11哈rleL也繁一 htmLex. ktinltB htmidnie. tact由t. htinonA.ftei_1/pdat e onBefar eCopy onBefor eCut onBef4r eTaste onBefr tUpli t 已 gjiBlur OTiClisk onDl

37、blCl i ck 口耳了富百 onDrag.Eftd MiDTagjEn.tffF otiDt agLeave onDragOYer oiiDrop oriF ini sk orJ octis onMelp ortKeyDown onKtyPrtss： onKeyllp onMouseDcwrn (srJikusMvonM GuseOut.再選取網(wǎng)易兩個字，操作和上面的步驟一樣，只不過加入的文字不同。.再選取搜狐兩個字，操件同理。.把網(wǎng)頁保存下來，按 F2看看你的大作吧，呵呵，也可以看看下面的例子：J J品味人生 網(wǎng)易搜狐提示：層是可以定義 位置和大小（注意屬性面板）的，如果在第2步的時候，

38、設(shè)置的不是 層文本，是狀態(tài)條文本，提示將出現(xiàn)在狀態(tài)條（此做法不必插入圖層）二、網(wǎng)頁中做動畫.準(zhǔn)備一張圖片:. 了解一下 Dreamweaver MX中的時間軸。窗匚手口 都助皿iAQ)Ctrl+F2fTML屬性gCU1H3答案Mt+Fl*l| 劫 1CSS樣式 口)Shit+FllHTfIL樣式CtrlHU。行為 HIShift+F3事件3IT5Q 1 1 11 11 八標(biāo)簽檢遹翳值）F9代強片斷切 Shift+F參考任）Shift+Fl.嘀孱2j髭點貧活 文件.編輯.數(shù)據(jù)庫)Ctrl+Shift+TlO鯽定色)CtrlHlO服務(wù)器行為班)Ctrl+F9蛆件 CM)Ctrl+F7&CJJ站點G

39、)F8資源Q)F11的g,rL 8站點- 國曰htm 吊吊 i（ne結(jié)果*其它|代碼檢查器皿no舞架 0Shift+FS歷史記錄如SliiEt+FLO層電)F22itspringFTE看根列El菽魅J面板電）F4后疊水平平鞘時間軸。A1HF(I目居直平鋪之）LL中 工LfiJ在下圖的方法中你可以找到時間軸（或者按下快捷鍵ALT+F9由himDreamweaver的時間軸和FLASH中的時間軸是差不多的，我們的目的是讓圖片按時間軸上的設(shè)定 進行運動。調(diào)整圖.點一下對象面板上的 田，在網(wǎng)頁設(shè)計區(qū)畫出一個圖層， 在圖層里插入剛準(zhǔn)備好的圖片, 層的大小，讓其適合于圖片：品垛人士.用鼠標(biāo)選中圖層，并將其

40、拖到時間軸的的第1個小格:時間他5| 1/ Fps,1151015 a 25 加 35 鈍V L 1 I l I j L . jJJl L 工：j 1 , L L II !, 威 37 L J u L L J Lun l1 OL*yr t O然后將第15那個格拉遠一些，如拉到 40,這樣可以讓動畫放得慢些:5.再次選中圖層，并用鼠標(biāo)再次把它拖到時間軸，如下圖:用鼠標(biāo)點一下時間軸上的第55點，并把它拉到第 80點:j+J Fjj 15自動期放naw3Mlin里】300 （即讓300 （即讓用鼠標(biāo)點一下時間軸第 40那個格子，然后把目光移動 屬性面板，把層的左(L),加上 其右移300像素)；用鼠

41、標(biāo)點一下時間軸第41那個格子，然后把目光移動 屬性面板，把層的左(L),加上其右移300像素)：請注意上圖帶有紅色框處，原來為73px,加上300后變?yōu)?73px。6.插進兩個按鈕，第一個的 標(biāo)簽(L)為播放，第二個為 停止，如下圖:選中播放這個按鈕，加上 播放時間軸 的動作:以箕離任恢復(fù)交換圖像檢葺表單檢查插件檢宣瀏覽船交換圖像控制 SKoclwave 飄 FI&e設(shè)置導(dǎo)航案圖等播成時間軸時同軸停止時間軸轉(zhuǎn)到時同他幀 I林特懿單開蛇施葫層顯示-隱藏W選中停止這個按鈕，加上 停止時間軸 的動作:檢壹表軍麴疊插件檢查瀏竟器交頓團像控制 Sko ekwavt 或 FL i-E.li建置導(dǎo)航條圖像設(shè)

42、置文本播放時間軸時間軸停止時間釉轉(zhuǎn)到時閭軸頓林錯菜單燃轉(zhuǎn)菜單開姓拖動層顯示-隙減層大功告成了，按 F12就可以看到你的大作了實驗八框架和表單使用實驗?zāi)康模簩W(xué)會使用框架和標(biāo)單的使用 實驗內(nèi)容：一、框架使用: 上網(wǎng)時候，經(jīng)?？吹近c擊左邊，內(nèi)容從右邊出來之類的網(wǎng)頁，其實就是框架的應(yīng)用了。在插入面板（區(qū)），選中框加，將看到：嚴(yán)用臨局汶制表格 商標(biāo)WWTITO! B B a E 3 B Bl B all點擊需要的框架樣式就可以插進去了（你還可以從菜單欄的文彳（F）,選擇新建（N）,建一框架頁面），比如點一下第一個，就出現(xiàn)了一個左右式的框架：其中邊框（B）處可以選：是、否和默認（即是否顯示邊框），如果你選

43、顯示邊框的話，還可以設(shè) 邊框的顏色（C）和邊框的寬度（W 還有是左右框架的比例，在上圖，我選了 80像素，也就是說，左框架為 80像素，剩下的是右邊 框的寬度，當(dāng)然還可以選百分比和相對的，如下圖：框架的參數(shù)就說完了，接著你就可以把鼠標(biāo)光標(biāo)移到左邊或右邊設(shè)計網(wǎng)頁了。值得注意的就是鏈接問題了，比如，在左邊填上“鏈接測試”幾個字，并加上鏈接:窿飄眼在屬性面板的 目標(biāo)（T）處，將看到:，躺入在以前的鏈接里，只是看到：_blank , _parent , _self、_top幾項的，現(xiàn)在多了mainFrame和leftFramemainFrame指的是主框架，也就是右邊的，如果鏈接的目標(biāo)選了mainFr

44、ame ,則點擊鏈接時，內(nèi)容將在右邊出現(xiàn)；leftFrame 指左邊，鏈接目標(biāo)為leftFrame則內(nèi)容在左邊出現(xiàn)；如果選 _seft 剛在本窗口出現(xiàn)；選 _parent則在框架窗口出現(xiàn)了（也就是替換整個框架了）；選 _top將&上級 窗口出現(xiàn)，在本例子和選 _parent無差別，因為上級窗口就是 _parent。、表單使用: 在第一章，已經(jīng)有簡單的說明了，如下圖:常用布扃生木:表格藤表單砥板字將1煌體文件頭腳本ASF應(yīng)用程序A為表單；B為文本框；C為隱藏域；D為文本區(qū)域；E為多選框；F為單選框；G為單選按鈕 組；H為列表/菜單；I為跳菜單；J為圖像域；K為文本字段；L為按鈕；M為標(biāo)簽；N為字 段集。當(dāng)要在網(wǎng)頁中輸入內(nèi)容時就要用到表單了，比如留言板，BBS網(wǎng)上訂單等。處理表單的內(nèi)容，要用到網(wǎng)絡(luò)編程，如 asp,php,cgi,jsp 等，我們暫時不理會，下面學(xué)習(xí)制做一 個通過電子郵件發(fā)送的表單：1.點一下A插入一個表單，如下圖:2.在表單內(nèi)插入一個四行兩列的表格（邊框為0）,并填上文字，如下圖: -I9* *9R-4 H l-a-IMH HI*卻 Mia.W-M-iH