DM网页制作实验指导书

1、赭T兀iV - ttGW -/J 师护r 1 u a为菜单区,和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到一、子，选中该区 编辑（E）中的参数选择（S）. CTRL+U其中CTRL+U是该选项的快捷键,如下图所示:，举个例DREAMWEA VER 8 基础安装好Dreamweaver 8中文版后,运行，选择Dreamweaver 8工作区后，将看到下面的画面:V 直朴i? ITitJ 賣曲uJt娜 *甲it*即 醉电 叵v述fl）r ：*冲磁燥it*5肅atofTB戦寓伙倚一曲十 丄弓R工_也俑豪臺严 口1峙 吁.PO訂峙：tt &. U帝Ap, aF 丄仲【更塵備b程V匝 -

2、 !ini帘耳：砖兀r#狂M（f ；,E J沖运珂倔；HA-T-?tVUII帝ir卄IF耳bn* 卢护FTiiij 住便閉烯韶彌裁（PfreiFq, tIVKQL)技下一TOP込91*障芋标羞WHKKrSci)_ IJ扎CI）帕，a-：tdj 科令（ti 鮭总宦 口11 wnu）Ctrltfc CtrlrCtrl+l在这里，你可以把自己的 DREAMWEAVER MX设置为自己喜欢的样式，一般使用默认就可以了, 如下图：掏街宇儒（）固定字俗（S）代刑iS flc).瘀施S券工.e殴酒票（UtZTE语S邺中艾培宋萍12 pt *|ln_B231ZIZ pt V煉辂宛处V大屮12 pt V12 p

3、t VIks.为了使用的方便，选中字体这一项目，把参数设置为上图所示的样子，因为默认的时候实在太难 看了（当然也可以选自己喜欢的）。如果你浏览网页时使用的不是IE的话，请选中 在浏览器中预览这一项（以后制作网页的时候要用到），点一下那个“+”添加你使用的浏览器程序。二、 是插入项目选择工具（插入面板），在 选中了某个项目， 中会出现相应的插入项目,常用这一项后如下图:下面详细介绍，选中诵庄壓扃愷?3插AJ羊片俺架T務单雨矿*符療体【文嗨 W*阻f 7应用程序甯用布局丈同嬴 ,.i豊|辜国0摘 Fir.wnrliIlT 湖 L锚点用于网页中的定位，如网页的上、中、下等；图像点位符是用于动态交换图

4、片的，后面再说; Fireworks HTML为用Fireworks软件切割出来的图片； 交换图像为鼠标移上去时变为另一图片， 增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。在 中选中布局一项，共有 标准视图和布局视图两种视图，如下图所示:EZ 期帼I誰曇II諫S翊衆塁陆加灑酬翩型tt堆理丽繭4 J-I r h ri 1 i net畅&在标准视图下，可以插入表格和在网页制作区画图层。切换到布局视图下，如下图:常用I布局I文本俵格框架表单【根板宇符I媒毬立件头順本I両应用程序标准视E 布局视图拐绘布M左13描益局龜兀Is在布局视图下，可以

5、在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到 视图后，可以转化为表格，这个比较好用，可以用来排版网页，后面将说到。标准在中选中文本一项，可以对文本进行格式化，如下图:A可以对字体进行全面的格式；B可以将字体变为粗体；I为斜体；S为加强字体；这些比较简单,可以自己一项一项慢慢试试，看看字体有什么变化。在 中选择表单（表格和框架两项后面再说），可以插入各种按钮，如下图:戳rp.ST丽墜|稲框渠簾勾務妇至圧藻前蚪很7脚卑T硬应用握冋 D N I H E1i!V G i卞riNT1 kA为表单；B为文本框； 钮组；H为列表/菜单； 字段集。（详细的使用方法后面将说到）C为隐藏域；D为

6、文本区域；E为多选框；F为单选框；G为单选按 为跳菜单；J为图像域；K为文本字段；L为按钮；M为标签；N为在 中选中模版可以使用模版制作网页或自己创建模版，做起网页更加方便快捷。在中选中字符可以插入一些特殊的字符，如：，其中BR为换行符（快捷键为 CTRLENTER此项与ENTER有所不同，可以自己试试），其它的可以自己试试。在中选中媒体，可以插入FLASH FLASH按扭 FLASH文本 Applet 等插件。在中选中文本头，将出现下面的画面:阳tfl畫纯字说匣 剧薪 基硼 栓接关键字为网页的关键词，可以让搜索引擎搜索到； 说明为网页的说明，如作者、介绍等； 刷新可 以设定多长时间后刷新网页

7、或跳转到其它网页； 基础为网页的基本链接，如插入一个目标为_blank 基础，网页中的一切默认链接都将打开新窗口；其它比较少用不再详细讲述。中选中脚本，可以插入各种 Javascript、Vbscript或其它脚本。在 标签。中选中ASP （编辑ASP网页时用到，新手可不必理会），可以插入各种ASP编程里用到的中选中应用程序（编辑动态网页时候用到，新手可不必理会），可以对数据库进行操作。三、对区的详解如下图:釦霆翳标题：无瞬j谄阿站在上图中，点击带有向下小箭头的工具，会弹出更多选择。四、五、.八、区为网页设计区，你所设计的网页或代码将出理在该区。区为属性区（属性面板），在该区可以对选中的对象进

8、行一些设置（后面将有详细讲解）。区如下图所示，详细的使用将在后面的章节详细讲述。.秽二 _ 1.CSE 瓷H ffTML 存式.石垢.巨:山坤TFK二 細奋死C曲14X:- 二二 1觀血哇蝴丰仙長笛盟行內I萄祥-=：|- I 玄J屿类型：1T ZllGcj I爭或在:曳肉曲丄life潮r巾呑如据N71 1己；：译艾件也逵一十站 123456789101112操作举例题目：用 DREAMWEAVER 8制作一个简单网页 实验操作步骤：打开 DM 8，点击 Insert 插入工具栏表格按钮，在弹出对话框中设置表格属性。 设置行为 5，列为 1，宽度 width 为 700 像素 在表格第一行中输入

9、文本的标题点击菜单 windowproperies 修改，打开属性面板。鼠标点击表格第二行，在属性面板中点击“bg”背景后的颜色框，如图，设置表格背景为深蓝色，代码为“ 003366 ”第三行为空 第四行输入文本内容，回车，点击 insert 工具栏图片按钮，选择一个图片插入表格中。 设置居中，再回车输入几个文字，也设置居中。鼠标点击表格第二行，点击 Insert 工具栏图片按钮，插入一个 1*1 像素大小的透明图片。 设置表格高度为 1，单元格成为一条直。写上网页的标题。完成本页制作，按 F12 键预览网页效果。实验二图文并茂实验目的：学会使用图像和直线的做法一、直线问题L打开Dre珊蹈ve

10、r ffiC点制伽t工艮崔直划规瓶入-蹣建. 2在融中籍战勰为侧嶽并囲収3点击扯角遍袱躅投仏进入摒代醸辄4如酬和为魏的代码在代码荊入刊ff啦J 甑匏建力红色：5类册魁植练籍不同靶.6就林制作我F啤競网蒯見二、图像排列I拥血3W3呻毗点制忸江孵翻im 鶴跚沖械飜繍it 减酚加.和加勰恤询赠素3在麴SHHH忡血入哪斤 硼鹤 怖篇-列中也軌国片代各陽二列曲入舗讓蚁本5膿麻击表馳尼他动表細站揪小.拒殳薛申注成酬難我F啤概顺鶴三、图文环绕I打开OreaiRwaver ML输入儿段丈字2馬击InrtZ具栏图片按钮，在上字中插一个3选中图片 r 在S性Porpert中.iji.SAI ii gn为 “Lef

11、l4,可以拖动图片到您所希望前地方.5这样就做好了一个*字可臨图做的网亟.完成本例轴E按FI2 键锁览网页O.四、项目列表L打开Dir嘛汨陽HX. 入“S的33rtSB中Z点卸制小工阳站按迅 打St本紳血 再点密如“谡ffl,为无3回牟 类似程的爱好“分别再做” ft的玫戴.我的相册.我的0记屮=亍无 列魏项才4在ftw相册n卞再输入三个顶目“卜学同学S中好;E大学时代j再选m这三个项0点击B性粧申的“有帛弭表r擀弘选中的三牛项目就成了 如囲所示的痫f?列嚴6接S设g居申.iSSt边馆进堯成本例制作.按F12輻!览网页效果五、移动文字h打开Drefiweaver MX.输入如園文本选中第一行宣

12、字.查看源代码2如S1 4伽raue di rect ion=left表示文字从右向左移功3. 第三行文字气旳32吹bfthavior=scrol I”表示文字対幼作是徭坏滾虬4. 第四行*字设S了移动延吋。5. S后一行文宝分别表示边椎垂1跑离孔和水申跑离20.边椎宽M0像盍， 背景色代码为ffaaaa 主字脇中乩完戒本例制作.按F12鯉预卷网頁效果：实验三表格应用实验目的：学会表格在网页中的用法 实验内容：3-1图片的叠字问题匚杠开斤煜鼻网抽痒F M)C点击從粥出討话a申设S嚷格S性. 久如團酥玫置行和邮灿 财帕阳为KB軒Pi讪乱工点击厲性面祖在对话框中点击“时的丈件夬按乩 曲-龍片作为髒

13、IS片4用肚镂击叢榕边暮拖动酬如酗礼使删的險大小鼎輕片的大小朋. 皿酬中舗入自己紙工这样就在EB片上帥了文字&就翊财.按FI2億锁览颐O3-2表格的背景!Hh点击Irsertl具栏表珞按临.播入3行3W前表格.2在属性面板中，点击托旷的文件夹投紅在一个单荒権中播入一嗚背虽囲底 3輛点击表格边艇拖动表杜便其长宽夫小与背景图片的划适当4再给整个表格加一个晋皋图片.播入一个3行和啲表洛选中整个克格.5再点击电的夏件夹按弘ffi入一幅片.动表洛碉整兀*h最后 S置表格拓庆.i完成本例制作.按rm览网页奴软3-3表格的边框I flffOrearoeaver BX,点击I冊餐t工具档最格按轻插入計和列前衆

14、格2在Ktt中進2張格a Wtardiir为h雄后再its边框眾色为红电FMTOOOO 3这样一个有边梔更有边框股色的叢格就做好了4熬后BiS今边継叢ffi.点曲li疵et工具格叢ffisa，播入3行箱啲叢格，5设姦格啜枢Border J力h单元柜离*Ce(lSpace)也为1僅齢iSl直迦豳色为找駝 O99FF 1 . SSffi个*你比JS-下炳效果 盘后点茁OfS的縣创给两个震耦分别海加背藍色BfiWw：8猊成本制制忙按口28赧克B页3-4表格的直线问题仁打开D吨戲岂r肌点击In轴t工具栏表格按附播入1行1列的表格。2点击IfiBrtZ具栏图片按钮T在表格中插入一个加11?素的透明S片；

15、3皱后S单元殆高度(Heteht)为h表曙自动缩成一条直践.4,点击fT后斜颜ft框.给表格加一个红色背景T这样就有了一条红色橫线二5再插入一个甘亍1列的表格.点击lins.rtl具栏图片按钮T在表格中插入一 个hi像素的谨明惻片&然后设置单兀搭宽度e超th ；为1高度細萄妙门为WD-7. 选中表辂.把S个表紹的宽鹿4E去禺这拝黍格就成了 f 竖线。&点击理后対颜色框.给表格添加一个背蠱色.9,完成本例制作按F12键预览网页败果。3-5多样的表格LabellIHfl-Drflarwcaver HX.击I陕卯I丄典fiiRW按*缶播入一G擔格.不做任何liS2一描入第二个表格.如图设冒.做成细表

16、格，3播入第三个表格.做正立方表格.査看代超，如a设a轰格ia4播入鈿K个裹格.做囿角農格.SS代码，新增了fi皆IU解t暑数5”插入3!五个格做无S更暮g看代码，乐增了fd岂秋和2耿n(燼6再播入一个 他个彊申表彼果5看代码如fflI完成*例制作.桜F12扯预宜R贡毁S.3-6表格的随意拆合I打开Dreaiweaer虬 点Insertl具栏S格按钮，播入3行3列的喪梏 2選申第I行第3列”在属性面撮中-点击僦逼盲牡cells)组含3列成为洌0 a再在第2行第2列中.点击-Splitscelll).拆分单元格成为两列， 4同样把第3行第2列拆分为两行。这样.表格就具STS种单元格.5完成玄例制

17、忙按F12O览网页效果3-7随意表格L打开DreaJTweaver MX点击Insert丁具栏溝格按钮*插入3行3列的表格.2一把第一行合并成1列，点击Insert工具栏图片按钮，在蛊格中加入一个1橡 透阴图片3同时设H单元榕高愷tHeight）为5第一行的髙燈就成了5惊索,4一合并第二行，播入一个1橡S进明图片，设養单元格高度CHeight）为E 第二行的高度就成了礪素5.合并第三行，播入一个1像素透明團片.设養单元格高蛊C Height）为行, 第三行的高這就成了 15慷素，丘爰只姜S入一个1慷索的图片.它的大小就可以随意改亚了.7-为了能看到实际效果.我帕谡$柬格边框为仁R完成本例制作.

18、按F12键预览网页a果.3-8表格应用f打开MX.点击Insertl具栏录格按钮.描入7行2列的表格 2在屈性扳中kpace和Bo电r都为1同瞬给边枢添加颇色ft3399FF、a3接港在属性面S屮点击CMerges cells?.合并第一行.在第一行里插 入一个行n列的表格.涛加育量色为WWCGFF.谟置Ce11Epacfl为仁4在这个表格內加入t宇.再把这个表格分成3列-分别加入一些丈字或图 片.鼠标点缶裘格边框.拖动至适当大小.斤再在下面几行涼加一些i字。6合并第五音同时也插入一个将刃列的表格.设S背景色为#MCCfF.设 置Ce 11 apace为1.加上一些丈字.7合井第注行.加入一些

19、乂字.&完成本例制作-按F12縫拽癡网页效果.实验四 层的应用实验目的：学会使用层的用法实验步骤:4-1 层的定位t fTJFbreamweaver MX，瘾击InsertT县程團层按tfl-用鼠様拖岀一个层亠2慮击S的边框，选中可以在a性面檢中储改一些垠的養数ftGLeft和T购 玄可以拖功BL标进行定位*这样就对层做了绝对定位=4 T面钱们对层进疔相对定位.点击图层按钮.新建一个层.5选中这个层.在S性扳中lSLeft和Top用百分SU帕.这样護可対层迸行 相肘定位.G男外，S的男一个属性Z-lndcx.即层的上下位置.其散宇大的位于高嵐所以 S-S位干底S匚人最后.我们维两个层各加一个图

20、片；a完成本例制作.按F12Sf55览网页效果n4-2 浮动的图层I打开Dreawzgr MX,Insert工具栏图fl按钮，用就标拖出一于!12, tDeaiiign面板中Behavijors （行为【、如黑没有Des i gn面扳，IS可以 ?$Sh t 于七+F3鍵打开BeM* I ors.a然后点击Behaviors面ffi上的*5先设定适盒的浏器为【E5匚因为大 部分帕血讯百訓览器都在！ E5以上.，4一点击Dzg Laver按钮、使用歎认的设S,点击OK,您就可以看測罢了一 个行为5 fflonCI iakK为。口如血如辛时闕槪标4立于层的上方时*就发iDrag Laysr 这个行

21、为区为了直观一些.在展上加入一个图片孔完成本例訓作.按F129|ffi览网页效果，4-3双背景图片L如图所忌网页有背景图片.而目青景重复出观，查看源代码. 在匕旳沖濡加了如图阴彩部分代码.J=Z接看再做一个网页+在Deign面椒中点击他咅+然后点击鋼面 板上的屮”命Sb站.ilbodvl式表.点击叽3 !弹出对话框中点击Bckgroundk点击Browse选择一幅背灵 图戌4然后Repeat卞拉亲单中选no-repeat* OK,网页立刻S 4相应变匕背翼图片不再1复岀现，氐完成本例制作-按F1瑙预览网I页效果4-4 Layer与 iframe1,打?Fd咖刿材M躍用威掃拖出。个用，芻后入懣优

22、码堀辑S2左雇上加入1个谭功密Mr；Mie塗Jtffl如H代码.srcftSiframe显示的吱件. TffiSBUK称及大小，咅ab虫啦*示浮动口边証为6 scroll mrnogi 没有眼动茶Iffi/gflfi在这亍iFq血中显示的*件新建一亍文件.输入一S*字后保存文件 4.在IE中打幵第一个丈件、KII点击t字，?it$Ctr HAothflrsTimcl incs,打开时间帧，如囲4州鼠标拖动层到时间帧中.5.点中时间帧的第一帧，自己设置层的位g.6点中最后一帧，用鼠标拖动层水平移动一段距离”7.SS选中时间帧中Autoplay.让层的移动g动运行.&可以端加时间帧的数目.使得移动

23、变慢按F12f预览网页效果:9垸施本制制作，4-6 窗口和菜单嗽点击InsertX具栏叢格按钮.播入一个叢格1 frDesMaver2 一输入一些丈字。3另做个禅岀文件，在貝中重复输入“这堤个新窗口！.A 0到原未的页面.拖动鼠标.选中本页链接在S性面扳中点 击HnkS面的*件夹按a,选择刚才做的弾出文件王给打幵新窗LT做同样的磁按-只罡在疑性面板中选S口“吐的 下拉菜单为.black：.8. 蟲后采嫌弹出窗口，点击Design面tS中的Behaviors再点击耳、 选择0口刖 Browser Wirdowr在弹出对话框中点击Bros-选择弾出文件，设g弹出窗口的天 小为KWr 4TO,萤击O

24、Kd乩点击左上角，显示代码戶按钿.进入职代码漏辑.在源优码中抑入 个参裁9. 如图，増加Etyit样貳，定史鼠标光标为手形.W完成本例制作按FIE護预览网页效果.实验五 css高级应用实验目的：学会CSS样式表的使用实验步骤:5-1CSS简单应用I n开少时血Mb观.S入几S文字2点费血昭Kfiffi赫中WCSS St allies, B点宙忒编M-个新牌武蠱.3在jS对话框中.-个是可以自定义曲弟二个SH讪标昧下掘樂曲*有很多.4我幻选m财曲诵辑，点击0K5 1出对话軀中.SfH木犬小5说那旳ing6 中asifeqm都为0如网页内昌SSJKSifitSfiWESffi为0一7点击0KH页2

25、发生应变化B播入-个最检把丈林后-段啊劇納g鼻击thrnffi版中的CS$ St/lles.类愼ody：断1|-牛或表uT砂叢gft喪IQ蛊豊出对SKI中，iifitt大小为g阳戟H文去敢&为址ft： WII則嫁觉胃不；I#.可以点由Oesi嗣88掖中C$S$lMaqE(M StyIIPS. ffi对柜ESI进找S 吃刪teSi榊ftgft孑棕輻 堆加Liw桶qht为IgPoi时，即丈本行掙为10pt13可以点击讪我行就一14完成本桝剖花liF12MS!页ajR.5-2超链接式样I”打并抽UiX.猶入如ES格和支孚2分剂选中两ftt字.在Li恥后1進S3Q htr前帥t为EbGk*打幵新窗口.

26、3点Oesiftn面扳中的CSS Stylfls.再点出丁SfOJt#4在Sa対话枢中.逸毎第三个Hp对超儀S进柠W农编it5 iSttTUas中的机Ii両有HIS的文字样式点击0K,做St设g,6JilSa;visited,访问过后的12搖样St如ESB.1第者flb同叫e鼠掠置于a接上的祥S.如;设a3.5是3“龙即眾标点击as处ss解放吋的样氐如图aa9朋后，fi们锲另一个自定义iS葬式汨川rT闻.为了SSr氛佝八我你83link和vi前it胡的離供为蛊忆阳丫打曲磺ft为童亀 可以不用ft：II选中Oit*. S点击C開中Kall.即应用非式表汀12完本酬制作按F12O览网页败歟5-3另

27、类链接1 打开和上河栋.点击上Sra常代科按氧i8入源伏码编如图游加H接样直 ZaE4中灌加阴簸部分代础hSE啲疝. ifi连接文字挨址 isfwa-皤入-牛剰各_4遛中表昭a入观代阳编在刃中播入一用帀诉显riDt，如E实规连接*字的5咒戍tffl刘作.搜FMBtftSEW页ajR5-4改变鼠标样式1. nffQrtver 弟S入如8量塘和文字.2点击讯现n甌中的CS5SWI忖再点击ifiil自定义样式表”EXJW匚3在EiW呻g中选甌”沏下拉舉勒为Hincf *即执标砥状为h叔手形，盒护OKI4诡中舉一肝丈字点击ff咒II胡I应用mouse5然6W捌值fWKO几其Cursor jcrosfi

28、hairf字光枫moLJM3耀为询d文太光攝 :何J谜4”为帕it等待光标：阪弘5为hal論皿廉良6 S对各文*分别点击样式应用7 完咸*钢期ft i$Fi2afi5SRS3K，5-5彩色滚轴t JJffOrearw/eaver MX,在源代码中加入如團所示代码，2. scrol Ibar-facfl-colorj立休滚动棗凸出聽分的颍色：3. Ecrol Sbar-hifthl iht-color为谦动条空白部分的駆色4. scrol lbar-3dl ijht*color为立休滚幼条亮边的颜色口5. scrol Ibar-darkehadoiN-color为S体谦动棗强明影的顾色6. sc

29、rol lbar-Eh3dow-color*S|条明影対颜色I scrol Ibar-arrowrcolorS上下技鈕上三备箭头的顽色口8,11bartrack-eo Ior为”滚动条的基本顾色“.9.SS井意，滚动条的这个祥式S性只有IE5,5SS本以上才能i持.所W您在调试的时候耍注童：1心完成本例制作按F12犍预览网页效果：5-6文字阴影I打刑心叶沖啊UX.如ffifS入表爸和文字-Z点击tosiign面扳中的css Stylus，再点击+“新样式.tmSHStfi3&建自定义样STf.点击飞就雷|曲孑，在Filter下e单中逸择如監4潘示”加光辉在附近对ft的边外二如ffi设S.S.S

30、iil自罡义sr u如ffi. SB濫僅e选中个叢格.点出样式应用：7 a中貌二个卷II点击佯Ati.应用.8垸成本啊制作，按n2a预览网页效黒，实验六互动效果（行为应用）实验目的：学会使用Dreamweaver内置行为设置实验内容：互动效果一:在网页上经常看到这样的效果，当鼠标移到一张图片上的时候,鼠标移开后，又恢复原来的模样，是怎么做的呢 是Dreamweaver能做出能具互动性的网页。现在，我们就利用 互动效果一一变换图片。原来的图片就切换为另一张图片,Dreamweaver比Frontpage优胜的其中一个地方Dreamweaver制作这个最简单的准备两张大小相同的图片，一张是鼠标还没

31、有移上的状态，另一张是鼠标移上去后的图片，例如 以下两图：I jajscript I (jaiascript)点击对象面板上的（ 区选中常用，在 区可找到），看到如下的对话框:./i*/i*v*. xiff词気J./i*t*/tif: Ja預载鬼穌轻竝瞬i tvtscrLDthttp /www.RftE删览一 JB原皓SHfiD特拱文本;按下时，前牲的URL：C 标餐览関t1(取m1L帮助)Dreamweaver 会自动分配;图像名称（Image Name）:变换图片效果的标记名称,原始图像（Original Image）:指定原始的图片，（例如这里是左图）鼠标经过图像（Rollover Im

32、age）:指定鼠标移上去后的图片（例如这里是右图）；按下时，前往的 URL：图片的链接网址（也可以是站点内的文件，点后面的浏览可以选择）；例如按照上图的设置完毕后，按下0K,然后可以按F12（F12为预览网页的快捷键）预览一下效果了。做出来的效果：UavajKript）小提示：细心的朋友会发现， 做出来的链接不会弹出新窗口的，你可以选中刚做好的 鼠标经过图像，在属性面板里的 目标（T）选_blank 互动效果二:按下一按钮时，弹出一个问候的窗口。在插入面板（区），切换到 表单，插入一个按钮，如遇到对话框，选否就行了。选中刚插入的按钮，在属性面板把标签（L）改为请点击我摂钮名称Btltimi t

33、动作提交表单0无O重设表单展开 区，再展开设计窗口，切换到行为窗口，也可以从 区（菜单栏）里的 窗口（ W）,再选行为淇中Shift+F3为该操作的快捷键 点一下行为窗口上的“ +”，再选弹出信息，如下图:匡二I 动作播放声音 打幵现廣器窗口调珂 改费屣性 恢复交换国像7- ./ 4-i椎直插件如果你发现弹出信息 是可以的），如下图：这一项为灰色的，不可选时，不用急，先选显示事件，接着IE （选IE或IE也接着再按上一步的去操作，选中 弹出信息后会出现下面的对话框:弹岀信息消息:欧光临品lit人生阿站Mtpjfw 艸.taEtelife. net1,扁定i取消帮助填上你喜欢的 消息，按下确定就

34、0K了，再按下F12就可以看到你的大作了。F面的是做出来的效果:请点击我在Dreamweaver中，更复杂的效果是通过一个叫行为（Behaviors）的功能实现的，我们又称为事件的响应。通过网页元素的变化，如鼠标的移动、点击等事件”（Events）,触发弹出窗口，关闭页面等“响应” （Actio ns），就是一个事件的响应。而值得高兴的是，“行为”的制作过程几 乎是傻瓜式的，下面讲述 行为的用法： 按Shift+F3,打开行为面板（上面已经说过）；1、选取产生行为的元素，例如图片、带链接的文字、层等。如果需要在页面一载入就开始出现 效果，可以选择状态栏上的标签弹出菜单在网页制作中是一种非常常用

35、的菜单方式,这种菜单不但制作简单，而且效果也很好。17-1 和效果说明本实例所要完成的效果是当鼠标移动到文字上时，就会弹出一个漂亮的菜单，如图 图17-2所示。弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也很好。巳 Hji T rF rl I n&r r M尸厲0r I*11! ?0(H - 册耀 (n J Wlire u. hi.n回我是弹出菜单團17-1 鼠标未经过时的状态我是禅出栗單一;寸 W图17-2鼠标经过时的状态二Dreamweave创作思想本实例首先在网页中输入一行文字，并对文字做一个特殊的超链接，然后利用r MX 2004自带的行为制作弹出菜单。

36、操作步骤(1 )输入文字并设置超链接。在网页中输入文字，因为单独的文本文字是无法添加行为的,按照Dreamweaver中的约定，将文字的超链接设置为“javascript:;才能够添加行为。所以将文-ff X加瓠&.輕二fe.:决肉贡中整入丈学in隘击1行为jj輕岂口衙HB出歳奋【示31出武菜*P 1會牛近豁5TO ”Q 卫澤 樂畫:M能S& 1 K薑菱丘兀7画亞血三 1 三 N al 0iiw；&3.二 IO 弊雇黔昶TBBWSWww m(2)设置菜单项和子菜单项， 并为菜单设置超链接， 然后安排好各个菜单的次序，如图17-4所示。盘 J 黑，F 盘-庁| t :?卜曲如 12.B I翳超绥

37、主衲昭蓬学gw 3tBh内取1畀甫E硕亍 皿/raam 择州酉幕t tt Jkinj： 廷7 孑总II氷暉4n.lTW站4 /伽 悬上Lh *M 律 /m MLM 为 h讥.JFfr &khZ 0213愛置丈本和flta械3lEfik disk(3 )设置页面元素。将菜单设置为垂直菜单，并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态，如图17-5所示。3 P“TiirrtU: ii 狮 Jit e onBef or eCopy onE efr eCut nEeor eTaste oftBefareUpAate QiiElur onClick onBblClirk onBraf

38、 OSkDf a承 A応 ooDragfntsr onDr agLfive olkBrav-er eitSrep oaf ini. sh Onf 9CHS daH1p onEeyDown onEtyFrest oxmE eylJp onM ousiDoim flftH4US训T仇动作设置层交视图站点it 3八鎖 司体地视團 p 扣iTiH OTMtfMJt 欷程） ,1Letex. klmer. Mml t- KtrnLe. t龙屯 禺戈.ktm层：屋a廿新翟HTML：歎迎遼临晶味人生网站4. 再点击一次重复刚才的步骤，不过这次, 为下图：七I I 动作6. 再选取网易两个字，操作和上面的步骤

39、一样，只不过加入的文字不同。7. 再选取 搜狐两个字，操件同理。8. 把网页保存下来，按F2看看你的大作吧，呵呵，也可以看看下面的例子：品味人生网易搜狐提示：层是可以定义 位置和大小（注意属性面板）的，如果在第 2步的时候，设置的不是 层文 本，是状态条文本，提示将出现在状态条（此做法不必插入图层） 二、网页中做动画1.准备一张图片:2.了解一下Dreamweaver MX中的时间轴。在下图的方法中你可以找到时间轴（或者按下快捷键ALT+F9 :宙口址J帮助QO*插入Ctrl+FCtrl-F3答案迦kLt+Fl.css样式(X)Shift+Fll1i审式Q)CtrH-Fll2行为0)Shift

40、+F3标養检查器re代码片断Shift+P奉考d)Shift+Fl数据库电)CtrlfShift+TlOCtrH-FtO服务器行対Ctrl-S-F9Ctil+FT站点rs资添rii卜苴它J隠彝面鞭(L)F4层叠t)水平平铺7)垂直平铺边dwniKC htm代码检查盟框架( 历史记录 层 2itsptriTipsoI I I 门 I I I I I I I4-til I 动 1ijgo触m盅E 0站点- 毋- D htm 曲円 i(n(noSliit+Fiar2FTZlHJDreamweaver的时间轴和FLASH中的时间轴是差不多的，我们的目的是让图片按时间轴上的设定进行运动。3.点一下对象面

41、板上的，在网页设计区画出一个图层，在图层里插入刚准备好的图片，调整图层 的大小，让其适合于图片： 4.用鼠标选中图层，并将其拖到时间轴的的第1个小格:T1 mel.irLe 11|5 1C 15025 JO 351 OL*yrl O然后将第15那个格拉远一些，如拉到 40,这样可以让动画放得慢些:TiraliiLelH| 阿fps 15151 OLayer 12IC152530355.再次选中图层，并用鼠标再次把它拖到时间轴，如下图:1 OLiyirl25 1C 152053035 葩 455055用鼠标点一下时间轴上的第55点，并把它拉到第 80点:J 5 JQ 1505：35 W 1550

42、eo 65 7Q 75J CLtFtd = tri 用鼠标点一下时间轴第40那个格子，然后把目光移动 属性面板，把层的左（L）,加上300 （即让其右移300像素）；用鼠标点一下时间轴第 41那个格子，然后把目光移动 属性面板，把层的左（L），加上300 （即让 其右移300像素）：严 IS层鏑号 左i宽區X I I轴 n背SS規（XII上址）54px高QpELpK I显茅世）d吐aiilt屮背冒；15邑Layer1谥出请注意上图带有红色框处，原来为73px,加上300后变为373px。6.插进两个按钮，第一个的 标签（L）为播放，第二个为 停止，如下图:选中播放这个按钮, wwwsfctir

43、to,net加上播放时间轴的动作:荐止丽轴 转到时间轴帧以次睡性 恢复交换閤橡橙査苍虫檢苣插件检S測览黑交换囲像汪制 S1LUa ve 谡置辱航# 设亭文本蹤萊盏:屋？n負显示=隐載层选中停止这个按钮，加上 停止时间轴的动作:检査插件 检查浏覧器 交按国朦養制 強0為,丹-或Fla-t 没置是就盖图慷 设置文本显示-隱蔽层7.把时间轴上的循环勾上:世liti色1V 竖| .訪 气I Fps 15 I 口自救播戲应旃环Jm-354045世55_ 更_ 更TO西_5IPCOLiyrl大功告成了，按 F12就可以看到你的大作了实验八框架和表单使用实验目的：学会使用框架和标单的使用 实验内容: 一、框

44、架使用: 上网时候，经常看到点击左边，内容从右边出来之类的网页，其实就是框架的应用了。文件（F）,选择新建（N），建一框架页在插入面板（ 区），选中框加，将看到:点击需要的框架样式就可以插进去了（你还可以从菜单栏的 面），比如点一下第一个，就出现了一个左右式的框架：中间的细线是可以拉动的，以便调整左右窗口的比例，点一下中间的细线，在属性面板将看到:其中边框（B）处可以选：是、否和默认（即是否显示边框），如果你选显示边框的话，还可以设 框的颜色（C）和边框的宽度（W）还有是左右框架的比例，在上图，我选了80像素，也就是说，左框架为 80像素，剩下的是右边框的宽度，当然还可以选百分比和相对的，如下

45、图：列!100单隹力 Cti 相对 框架的参数就说完了，接着你就可以把鼠标光标移到左边或右边设计网页了。值得注意的就是链接问题了，比如，在左边填上“链接测试”几个字，并加上链接:在属性面板的 目标（T）处，将看到:司 口目标（I）P ar eitt_selfleftFrame在以前的链接里，只是看到：_blank ,_parent ,_self、_top几项的，现在多了 mainFrame和leftFramemainFrame指的是主框架，也就是右边的，如果链接的目标选了mainFrame，则点击链接时，内容将在右边出现；leftFrame指左边，链接目标为leftFrame贝9内容在左边出现；如果选 _seft冈恠 本窗口出现；选parent则在框架窗口出现了（也就是替换整个框架了）；选 _top将在上级窗口 出