模块二网页排版技术 单元9：简单特效应用 一、DW导航条设计网页效果预览 百度经验 百度经验 百度经验 ,百度经验 百度经验 百度经验 百度经验 图2-91m中设计导航条网页效果图 打开示你国更 二、实例制作步骤： 1设计导航条 (1)移动光标到需要导航条的地方单击 (2)执行一下以下方法，弹出如图2-9-2所示的【插入菜单栏】对话 框： 在菜单栏中单击插入"，选择Spy(s)”一Spy菜单栏
模块二 网页排版技术 单元 9：简单特效应用 一、DW 导航条设计网页效果预览 图 2-9-1 DW 中设计导航条网页效果图 打开示例网页 二、实例制作步骤： 1.设计导航条 （1）移动光标到需要导航条的地方单击。 （2）执行一下以下方法，弹出如图 2-9-2 所示的【插入菜单栏】对话 框： 在菜单栏中单击"插入"，选择"Spry(s)"—"Spry 菜单栏
司波M格式O)命女(G站点的 室口初起世H有 标益(G) Ctrl+E Adobe BrowserL 图像0 Ctrl+Alt+I 插入 图像对像(G) 常用甲 煤体(M 超级链接 表格① Ctrl+Alt+T 回 电子邮件 表格对象(A) 命名镪记 布局对象) 一水平线 表单（门 用 表格 超级链接(P) 口括入D1v 电子邮件链接L) 口，图像：线 命名错记(N) Ctrl+Alt+A 白·媒体 日期(D) 意构件 服务器端包括（日 CSS样AP元 注释(C 尾性行为特 HTML 圆 模板对象(O) 回常规 最近的代码片断R) 田划览器特定 田CSS/铺助功 Widget(W).. 回语言 Spry(S) Spy数据集(D) InContext Editing(l) Spry区域(G) 数强对发() Spy重复项(P 自定义收藏夹U)一 Spy重复列表U 无 获取更多对象(G Spy验证文本域(E 连接L) Spry绘证文本区域 Spry验证复选框(C Spy验证选择(S) Spry验证密码 异准贴碳怡站报香FP记服务周 Spy验证确认(O) 一匹文本 已妇证海忧按钮 Spy率单EM 图2-9-2菜单栏
图 2-9-2 菜单栏
在Spy菜单栏窗口里选择"水平"或"垂直"并单击”确定"。 Spry菜单栏 请选择所需的布局： 确定 。目水平 取消 ○白杀直 帮助 图2-93菜单选择 菜单栏在页面出现了 代的折分计卖时代销专实时视图始立认，品标题：无标题文与■ ◆。金地址：1le1/G/1m/m1t1e合1.htn1 项目1 项目2 项目3 项目4 图2-94确定之后效果图 选择中Sy菜单栏，在下面属性面板里选择中项目1，输入文本内容与 对应链接
在 Spry 菜单栏窗口里选择" 水平" 或" 垂直" 并单击" 确定"。 图 2-9-3 菜单选择 菜单栏在页面出现了 图 2-9-4 确定之后效果图 选择中 Spry 菜单栏，在下面属性面板里选择中项目 1，输入文本内容与 对应链接
中50企地址：f11e:/g几0s111e1.bm1 项目1 项目2 项日3 ~项目4 bedv)-.. A0403s-T021193,24E/1秒0le0deGT正-8》 直定北WdH 某用样式 图2-9-5菜单设计 文本框里输入“百度经验"，链接也输入百度经验的网址，这样一条莱单 就完成了。 ●●0企地址：1le:/e/1/4H1e1.h41 百度经验 项日2 项日3 项日4 ao>Ka.a习 10910%-102t1的~24【/1秒m1coa0u-0 文幸百度组物 定gt 随操h证p/小ynL日 某同拜其 标题■已日1指 图2-9-6菜单完成 设置完所有项目后，点击”在浏览器中预览/调试按钮
图 2-9-5 菜单设计 文本框里输入"百度经验"，链接也输入百度经验的网址，这样一条菜单 就完成了。 图 2-9-6 菜单完成 设置完所有项目后，点击"在浏览器中预览/调试"按钮
SprvMenuBarHorizontal.css 时代到实时视园检查..心 标题：无标题支 /G|/1x/Untitled-1.htal 在浏览器中预宽/调试 5度经验 百度经验 百度经验 图2-9-7效果图 在浏览器中的效果出来了。 百度经验 百度经验 百度经验 ·百度经验 百度经验 百度经地 百度经验 图2-9-8浏览器中的效果图 2.添加行为 ·首先调出行为，如图所示
图 2-9-7 效果图 在浏览器中的效果出来了。 图 2-9-8 浏览器中的效果图 2. 添加行为 • 首先调出行为,如图所示
密口M阳稀助H州通，女，晶 适入 Ctrl+F2 墨性P Ctrl+F3 CSS样式O Shift+F11 AP元素U 2 立城车(D) Ctrl+Shift+F10 定周 Ctrl+F10 限务器行为O) Ctrl+F9 相件利5) Ctrl+F7 文件月 F8 资A) 代两片断N Shift+F9 √标签控奇播D F9 √行为) Shift+F4 历走记景H ShM◆F10 菜M Shift+F2 代码控立器D) F10 储果同 扩周网 工作区布局M 隐意面版向 F4 √应用程字相 层登9 水平平铺内 垂直干橘M 1 Web0209.htm 图2-9-9调出“行为”图 ·点击窗口的行为后，在右边就会出现如图所示的行为面板，点击 “+”,添加你想要添加的行为，如图所示。如果该选项显示为灰色 显示，说明当前所选中的对象不支持此行为
图 2-9-9 调出“行为”图 • 点击窗口的行为后，在右边就会出现如图所示的行为面板，点击 “+”，添加你想要添加的行为，如图所示。如果该选项显示为灰色 显示，说明当前所选中的对象不支持此行为
CSS样其AP请标查节 属鞋行为标@y> 四+，-4 换图像 津出信早 恢规交图净 打开淀器验口 拖动AP元素 改变蛋性 效果 里示种京元素 检查酒件 检市表单 设置文本 满用JavaScript 洗转膜单 能转草单开始 转到U限 现先数入西楼 税取更多行为- 图2-9-10选择行为 ·选择了支持的行为后，将打开相应的对话框，对于不同的行为， 打开的对话框不同。如选择“弹出信息”选项，则打开“弹出信息” 对话框，如图2911所示
图 2-9-10 选择行为 • 选择了支持的行为后，将打开相应的对话框，对于不同的行为， 打开的对话框不同。如选择“弹出信息”选项，则打开“弹出信息” 对话框，如 图 2-9-11 所示
弹出信单 后，你满欢本地马7 确定 浦应 见消 积助 图2-9-11“行为”而板中添加“弹出信息”行为 在该对话框中进行相应的设置后，单击确定按钮，即在“行为”面板列 表中添加了一个“弹出信总”行为，如图2-9-12所示。 CSS样式AP元透标密路 属性行为标整①山〉 四"+.- 多弹出信息 图29-12行为”面板中添加的“弹出信息”行为 “事件“列表中显示的是默认的事作，若事件不是所需要的事件，则可 以单击该事件，“事件“列表则变为“事件”下拉列表框。单击 按组， 从弹出的下拉列表框中重新选择需要的事件即可，如图2-913所示
图 2-9-11 “行为”面板中添加“弹出信息”行为 在该对话框中进行相应的设置后，单击确定按钮，即在“行为”面板列 表中添加了一个“弹出信息”行为，如图 2-9-12 所示。 图 2-9-12 行为”面板中添加的“弹出信息”行为 “事件”列表中显示的是默认的事件，若事件不是所需要的事件，则可 以单击该事件，“事件”列表则变为“事件”下拉列表框，单击 按钮， 从弹出的下拉列表框中重新选择需要的事件即可，如图 2-9-13 所示
C55样其AP康标粉 凰性行为标强4> a型，出信 eaBlur enDblclick enErrar caay】own cnLaad 6u5情00 colaus40vir 图2-9-13事件下拉列表框 三、表单验证实例 在之前的例子中，我们学会了如何使用Dreamweaver来实现简单的导航 栏特效，接下来介绍一下如何使用Dr eam Weaver实现表单验证， 首先，创建一个表单页面如图2-914所示： ma涵5《通s线e银A mi-Tpp mams'irs/-r 图2-9-14表单验证页面
图 2-9-13 事件下拉列表框 三、表单验证实例 在之前的例子中，我们学会了如何使用 Dreamweaver 来实现简单的导航 栏特效，接下来介绍一下如何使用 Dr eamWeaver 实现表单验证。 首先，创建一个表单页面如图 2-9-14 所示： 图 2-9-14 表单验证页面
接着按照之前的方式为id为namc的文本域添加一个特效：如图2-9-15 所示： 4漏中姓名究本城 w.nl.mprLiuhin.p 3港挥前 2.锋加行为 55107 四t, 可m·4录挥隆生松验证 6电线0积国 图2-9-15验证行为的添加 以此类推，将所有的表单元素添加上行为“表单验证”，姓名做不为空的 验证，密码做不为空且只能输入数字的验证，郎箱做不为空且必须是电 子邮件地址验证。 最后，在浏览器中看看效果。如图2-916所示： 姓名： 智码 邮痛。 反 Te following or oored
接着按照之前的方式为 id 为 name 的文本域添加一个特效：如图 2-9-15 所示： 图 2-9-15 验证行为的添加 以此类推，将所有的表单元素添加上行为“表单验证”，姓名做不为空的 验证，密码做不为空且只能输入数字的验证，邮箱做不为空且必须是电 子邮件地址验证。 最后，在浏览器中看看效果。如图 2-9-16 所示：