仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 681|回复: 8
打印 上一主题 下一主题

[DIV+CSS] CSS教程之用菜单飞梭创立静态酷菜单

[复制链接]
第二个灵魂 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:23:38 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
最新版本html5+CSS3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
MenuMachine是一个制造菜单的工具,具有利用复杂,制造疾速,兼容性初等特性,是GoLive上出名的扩大模块。只是在国际很少为人所知,为了便利人人的进修和利用,我已将个中的主要部分做了汉化,并临时起了一其中文称号叫做“菜单飞梭”。上面我们就来进修一下怎样利用它在网页中创立菜单。本教程有视频版本,可经由过程http://99ut.com/tutorial寓目。
启动GoLive并开启站点,然经由过程菜单【MenuMachine_开启MenuMachine调板】,就会呈现以下左图所示的调板,调板中会列出以后站点中的菜单项目。人人要先弄分明菜单飞梭的事情体例,它并非间接在页面中创立菜单,而是经由过程一个专门的编纂器来完成,完成后的菜单项目将呈现在这个调板中。然后我们再从这个调板中拖动所需的菜单项目到网页傍边。能够创立多个菜单项目,依照必要来利用。
如今还没有任何项目,以是我们依照提醒在箭头所指处点击以创立一个新的菜单项目。

点击后就会主动开启主编纂器,以下图。起首在标记1处为菜单项目取个名字,好比图中的main1。然后在标记2处的主题当选择一个主题,分歧的主题有分歧的菜单作风,能够在标记3处看到预览。今后也能够将我们本人创立的菜单作为主题来利用。为了更周全地进修,我们选择最基本的“blankmenu”主题。最初点击标记4处的右向箭头以进进下一步。必要注重的是,假如没有输出菜单名将没法持续。

如今我们进进最次要的设定界面,以下图所示。白色箭头处是3个设定类,分离是:
Item(单项设定):用来对菜单布局中的任何一项举行独自设定,内容最多。
Block(层级设定):用来对某级其余一切项目举行设定,内容绝对少些。
Global(全体设定):用来对一切项目举行设定,内容起码。
绿色箭头处是菜单布局的预览,同时也能够反应出鼠标悬停等效果。右下角的橙色箭头处能够变动预览地区的背景色彩。它只供应视觉参考,而其实不对使用菜单项目标网页发生影响。假如未来要把菜单安排在一个紫色背景的网页中,那末就能够在编纂器中设定为紫色背景,如许对照简单判别色采搭配体例。

如今人人要明白一下菜单的观点。菜单是具有多个条理的,一般来讲,一入手下手就显现在网页中的,是顶级菜单项目,然后经由过程鼠标悬停(或点击,年夜多半情形下是悬停)的体例,呈现上级的子菜单。因而在制造之前起首要先计划好本人的菜单条理布局。如今我们如今是如许来计划的:
顶级菜单有3项,分离是教程列表、资本库、友谊链接。
教程列表下设2个子级项:图形处置、网页制造。图形处置下有Photoshop、Illustrator。网页制造下有GoLive、Dreamweaver
资本库下设3个子级项:Photoshop、Illustrator、GoLive。
友谊链接下设置4个子级项:大家之路(99ut.com)、蓝色幻想(blueidea.com)、宁靖洋(pconline.com.cn)、天极网(yesky.com)。
如今我们点击下图白色箭头处的按钮创立同级菜单项,依照计划,统共要有3个项目。
蓝色箭头处是保留按钮,在修正后应实时保留。在前面我们将进修怎样将菜单项目使用到网页中,今后点击保留就能够在网页中看到修正后的效果,而不用加入编纂器。

Item(单项设定)中将菜单笔墨改成响应的内容。能够设置宽度和高度。必要注重的是,高度的修正将影响同级一切项目。别的也能够在预览窗口经由过程鼠标拖动来修正,以下动画所示。



</p>
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
飘灵儿 该用户已被删除
沙发
发表于 2015-1-18 06:33:47 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
金色的骷髅 该用户已被删除
板凳
发表于 2015-1-22 05:43:54 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
蒙在股里 该用户已被删除
地板
发表于 2015-1-30 23:20:30 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
灵魂腐蚀 该用户已被删除
5#
发表于 2015-2-6 17:04:07 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
admin 该用户已被删除
6#
发表于 2015-2-17 16:08:52 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
变相怪杰 该用户已被删除
7#
发表于 2015-3-5 21:01:58 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
活着的死人 该用户已被删除
8#
发表于 2015-3-12 15:23:31 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
不帅 该用户已被删除
9#
发表于 2015-3-19 23:33:18 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-15 09:27

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表