创建Spry导航菜单栏

极海网络  发布于:2014-11-22  浏览:

摘要:导航是一个网站非常重要的部分,可以说是点击率最高的一个部分。一个漂亮的导航设计往往能吸引很多的用户。但是要创建一个成功的导航,往往需要花费很多时间与精力,不光要熟练使用HTML、CSS,还要对JavaScript有深刻的理解。Dreamweaver的最近几个 版本提供了Spry框架,使得用户可以非常轻松地创建出相当专业的导航菜单。下面将使用Spry框架中的导航菜单控件在Index.html页面上创建一个自定义的导航菜单,实现步骤如下。 (1)在Dreamweaver中打开本章创建的CompanySite网站的Index.html页面,切换到设计视图,在插入;面板中切换到Spry;标签页,可以看到在该页面中提供了Spry封装好的很多控件,如图5.34所示。 在Spry插入页选择Spry菜单栏;,Dreamweaver会弹出一个提示窗口,提示选择水平;还是垂直;布局,在这里选择水平布局,马上就可以在Dreamweaver中看到一个导航菜
 
     导航是一个网站非常重要的部分,可以说是点击率最高的一个部分。一个漂亮的导航设计往往能吸引很多的用户。但是要创建一个成功的导航,往往需要花费很多时间与精力,不光要熟练使用HTMLCSS,还要对JavaScript有深刻的理解。Dreamweaver的最近几个
版本提供了Spry框架,使得用户可以非常轻松地创建出相当专业的导航菜单。下面将使用Spry框架中的导航菜单控件在Index.html页面上创建一个自定义的导航菜单,实现步骤如下。
     (1)在Dreamweaver中打开本章创建的CompanySite网站的Index.html页面,切换到设计视图,在"插入";面板中切换到"Spry";标签页,可以看到在该页面中提供了Spry封装好的很多控件,如图5.34所示。
     在Spry插入页选择"Spry菜单栏";,Dreamweaver会弹出一个提示窗口,提示选择"水平";还是"垂直";布局,在这里选择水平布局,马上就可以在Dreamweaver中看到一个导航菜单。当鼠标悬停在设计视图的菜单栏时,会看到一个蓝色的标签,单击该标签可以选中整个菜单。
     (2)现在保存一下Index.html,此时Dreamweaver会弹出一个对话框,提示要复制Spry的相关JavaScript文件,如图5.35所示。
     单击"确定";按钮之后,Dreamweaver会将这些JavaScript文件复制到网站文件夹下的SpryAssets子文件夹中,如图5.36所示。
     使用蓝色标签选中整个Spry菜单,在属性面板中可以添加、修改和删除菜单项,如图5.37所示。
     如果查看菜单所生成的代码,会发现其实就是<ul>和<1i>的利用,所生成的代码如下:
     (4)现在可以在浏览器中预览一下所生成的菜单,会发现非常漂亮,如图5.38所示。
     如果要控制导航菜单的显示样式,可以在CSS面板中找到SpryMenuBarHorizontal.css样式,在这个样式中控制<ul>和<1i>标签的显示样式,因此实际上Spry菜单就是列表+CSS的应用。通过这个例子也可以了解到CSS目前的功能确实很强大。
 
 

文章链接:http://www.jihai.com/a/jiaocheng/dreamweaver/201411/690.html
标签:Spry(1)菜单(4)创建(50)导航(7)栏(4)一个(46)是(83)
作者:极海网络 来源:未知 发布于2014-11-22 17:49
您可能喜欢的文章

热门模板
热门阅读
热门插件