文档库 最新最全的文档下载
当前位置:文档库 › html中spry菜单应用

html中spry菜单应用

html中spry菜单应用
html中spry菜单应用

Spry菜单

步骤要求:

1.使用DW编辑所解压出来“制作购物网”文件夹下的index.htm文件;

2.将光标定位于页面上方黑色区域两个公司首页图片之间的单

元格内;

3.插入水平布局方式的Spry菜单栏;并将一级菜单分别设定为“每日速递”、“新品上市”、“今日推荐”、

“独家专卖”、“流行讯息”五个栏目;

4.并在“新品上市”菜单中添加“Donna B”、“Loveteen”、“Travel”、“居家区”、“饰品类”、“休闲类”、

“Sport”七个二级菜单;

5.修改ul.MenuBarHorizontal a规则,将菜单的背景颜色设为“#000”,文字颜色设为“#FFF”;

6.修改ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus,使光标移动菜单上时菜单

背景设为“#36C,文字颜色设为“#FFF”;

7.将光标定位在页面左侧“”图片下的单元格中;

8.插入垂直布局方式的Spry菜单栏;并将一级菜单分别设定为“Donna B”、“Loveteen”、“Travel”、“居

家区”、“饰品类”、“休闲类”、“Sport”七个栏目;

9.修改ul.MenuBarVertical li规则,将垂直菜单的宽度设为175px;

10.修改ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus规则,使光标移动菜单上时菜单背

景设为“#36C,文字颜色设为“#FFF”;

11.将光标定位于右侧商品大图下方的单元格中,添加Spry选项卡式面板,添加标签,使选项卡共三项,

分别修改其名称为“最新商品”、“最新讯息”、“流行讯息”;

12.修改“.TabbedPanels”的背景为“#EDEDED”;

13.修改“.TabbedPanelsTab”字体为“黑体,14px”,颜色为“#FB763D”,背景设为“#EDEDED”;

14.修改“. TabbedPanelsTabSelected”的背景为“#FFC”;

15.修改“. TabbedPanelsContentGroup”的背景为“#FFF”;

16.切换到代码模式,将代码:onmouseover="TabbedPanels1.showPanel(this)"添加到选项卡的标

签里面,使之与下面相同:

保存文件后仔细观察一下,看看选项卡的切换方式有什么不同?

17.将下方表格内的内容放到第一个选项卡的显示区域内,并进行适当的调整;

18.同理,将其他两个选项卡内也加上一些内容。

19.保存文件,查看效果。

跟我学Dreamweaver Spry设计工具——创建横向或纵向的网页下拉或弹出菜单

目录 1.1Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单 (2) 1.1.1Spry菜单栏 (2) 1.1.2自定义菜单栏组件的显示风格(修改CSS文件) (9) 1.1.3更改菜单栏组件的方向 (15)

1.1Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单 1.1.1Spry菜单栏 Spry 框架是一个JavaScript 库,Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web 页。有了Spry,就可以使用HTML、CSS 和极少量的JavaScript 将XML 数据合并到HTML 文档中,创建构件(如折叠构件和菜单栏),向各种页面元素中添加不同种类的效果。 在设计上,Spry 框架的标记非常简单且便于那些具有HTML、CSS 和JavaScript 基础知识的用户使用。 1、菜单栏组件是一组可导航的菜单按钮 当站点访问者将鼠标悬停在其中的某个按钮上时,将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息,并使站点访问者无需深入浏览站点即可了解站点上提供的内容。 Dreamweaver 允许Web开发人员插入两种菜单栏组件:垂直组件和水平组件。并且所生成的菜单栏组件由标准的HTML标签(由

相关文档
相关文档 最新文档