1. 论坛系统升级为Xenforo，欢迎大家测试！
    排除公告

Fireworks 8做CSS导航栏! FW8的新增功能

本帖由 2699 于 2005-09-15 发布。版面名称：图形设计

  1. 2699

    2699 New Member

    注册:
    2005-09-04
    帖子:
    77
    赞:
    2
    在MM官方站FW 8新功能,试了下!
    FW确实在web方面比PS强!感觉非常不错!

    下拉菜单
    有朋友说DW也可以实现.但DW没有FW的方便和快捷.

    建议做好后.优化一下代码.

    演示: www.yexiu.cn/menu/menu.html 前3个连接是横向下拉菜单.后2个是竖向下拉菜单


    另:FW的定位与PS不同!当然他具备一些基础图象处理功能
    不要拿PS的图象处理功能来跟FW比!

    偶做web都是用FW,只是要处理图象的时候用PS

    FW做下拉菜单的代码:
    1. html页面
    代码:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks 8 Dreamweaver 8 target.  Created Wed Sep 14 22:09:12 GMT+0800 2005-->
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<style type="text/css" media="screen">
	@import url("./menu.css");
</style>
</head>
<body bgcolor="#ffffff">
<div id="FWTableContainer216291553">
<img name="menu" src="menu.gif" width="450" height="25" border="0" id="menu" usemap="#m_menu" alt="menu" /><map name="m_menu" id="m_menu">
<area shape="rect" coords="344,8,365,16" href="javascript:;" title="menu" alt="menu" onmouseout="MM_menuStartTimeout(1000);"  onmouseover="MM_menuShowMenu('MMMenuContainer0914215921_0', 'MMMenu0914215921_0',344,26,'menu');"  />
<area shape="rect" coords="272,9,313,18" href="javascript:;" title="menu" alt="menu" onmouseout="MM_menuStartTimeout(1000);"  onmouseover="MM_menuShowMenu('MMMenuContainer0914215619_0', 'MMMenu0914215619_0',272,18,'menu');"  />
<area shape="rect" coords="182,8,238,16" href="javascript:;" title="menu" alt="menu" onmouseout="MM_menuStartTimeout(1000);"  onmouseover="MM_menuShowMenu('MMMenuContainer0914215517_1', 'MMMenu0914215517_1',182,26,'menu');"  />
<area shape="rect" coords="33,8,66,16" href="javascript:;" title="menu" alt="menu" onmouseout="MM_menuStartTimeout(1000);"  onmouseover="MM_menuShowMenu('MMMenuContainer0914215417_2', 'MMMenu0914215417_2',33,26,'menu');"  />
<area shape="rect" coords="106,8,141,16" href="javascript:;" title="menu" alt="menu" onmouseout="MM_menuStartTimeout(1000);"  onmouseover="MM_menuShowMenu('MMMenuContainer0914215257_3', 'MMMenu0914215257_3',106,26,'menu');"  />
</map>
<div id="MMMenuContainer0914215921_0">
	<div id="MMMenu0914215921_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
		<a href="http://www.im286.com" target="_blank" id="MMMenu0914215921_0_Item_0" class="MMMIFVStyleMMMenu0914215921_0" onmouseover="MM_menuOverMenuItem('MMMenu0914215921_0');">
			im286
		</a>
		<a href="http://www.discuz.net" target="_blank" id="MMMenu0914215921_0_Item_1" class="MMMIVStyleMMMenu0914215921_0" onmouseover="MM_menuOverMenuItem('MMMenu0914215921_0');">
			Discuz!
		</a>
		<a href="#" id="MMMenu0914215921_0_Item_2" class="MMMIVStyleMMMenu0914215921_0" onmouseover="MM_menuOverMenuItem('MMMenu0914215921_0');">
			IPB
		</a>
		<a href="javascript:;" id="MMMenu0914215921_0_Item_3" class="MMMIVStyleMMMenu0914215921_0" onmouseover="MM_menuOverMenuItem('MMMenu0914215921_0');">
			VBB
		</a>
	</div>
</div>
<div id="MMMenuContainer0914215619_0">
	<div id="MMMenu0914215619_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
		<a href="#" id="MMMenu0914215619_0_Item_0" class="MMMIFVStyleMMMenu0914215619_0" onmouseover="MM_menuOverMenuItem('MMMenu0914215619_0');">
			link1
		</a>
		<a href="#" id="MMMenu0914215619_0_Item_1" class="MMMIVStyleMMMenu0914215619_0" onmouseover="MM_menuOverMenuItem('MMMenu0914215619_0');">
			link2
		</a>
		<a href="#" id="MMMenu0914215619_0_Item_2" class="MMMIVStyleMMMenu0914215619_0" onmouseover="MM_menuOverMenuItem('MMMenu0914215619_0');">
			link3
		</a>
		<a href="#" id="MMMenu0914215619_0_Item_3" class="MMMIVStyleMMMenu0914215619_0" onmouseover="MM_menuOverMenuItem('MMMenu0914215619_0');">
			link4
		</a>
		<a href="#" id="MMMenu0914215619_0_Item_4" class="MMMIVStyleMMMenu0914215619_0" onmouseover="MM_menuOverMenuItem('MMMenu0914215619_0');">
			link5
		</a>
		<a href="#" id="MMMenu0914215619_0_Item_5" class="MMMIVStyleMMMenu0914215619_0" onmouseover="MM_menuOverMenuItem('MMMenu0914215619_0');">
			link6
		</a>
	</div>
</div>
<div id="MMMenuContainer0914215517_1">
	<div id="MMMenu0914215517_1" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
		<a href="#" id="MMMenu0914215517_1_Item_0" class="MMMIFHStyleMMMenu0914215517_1" onmouseover="MM_menuOverMenuItem('MMMenu0914215517_1');">
			link1
		</a>
		<a href="#" id="MMMenu0914215517_1_Item_1" class="MMMIHStyleMMMenu0914215517_1" onmouseover="MM_menuOverMenuItem('MMMenu0914215517_1');">
			link2
		</a>
		<a href="#" id="MMMenu0914215517_1_Item_2" class="MMMIHStyleMMMenu0914215517_1" onmouseover="MM_menuOverMenuItem('MMMenu0914215517_1');">
			link3
		</a>
		<a href="#" id="MMMenu0914215517_1_Item_3" class="MMMIHStyleMMMenu0914215517_1" onmouseover="MM_menuOverMenuItem('MMMenu0914215517_1');">
			link4
		</a>
		<a href="#" id="MMMenu0914215517_1_Item_4" class="MMMIHStyleMMMenu0914215517_1" onmouseover="MM_menuOverMenuItem('MMMenu0914215517_1');">
			link5
		</a>
		<a href="#" id="MMMenu0914215517_1_Item_5" class="MMMIHStyleMMMenu0914215517_1" onmouseover="MM_menuOverMenuItem('MMMenu0914215517_1');">
			link6
		</a>
		<a href="#" id="MMMenu0914215517_1_Item_6" class="MMMIHStyleMMMenu0914215517_1" onmouseover="MM_menuOverMenuItem('MMMenu0914215517_1');">
			link7
		</a>
	</div>
</div>
<div id="MMMenuContainer0914215417_2">
	<div id="MMMenu0914215417_2" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
		<a href="#" id="MMMenu0914215417_2_Item_0" class="MMMIFHStyleMMMenu0914215417_2" onmouseover="MM_menuOverMenuItem('MMMenu0914215417_2');">
			link1
		</a>
		<a href="#" id="MMMenu0914215417_2_Item_1" class="MMMIHStyleMMMenu0914215417_2" onmouseover="MM_menuOverMenuItem('MMMenu0914215417_2');">
			link2
		</a>
		<a href="#" id="MMMenu0914215417_2_Item_2" class="MMMIHStyleMMMenu0914215417_2" onmouseover="MM_menuOverMenuItem('MMMenu0914215417_2');">
			link3
		</a>
		<a href="#" id="MMMenu0914215417_2_Item_3" class="MMMIHStyleMMMenu0914215417_2" onmouseover="MM_menuOverMenuItem('MMMenu0914215417_2');">
			link4
		</a>
	</div>
</div>
<div id="MMMenuContainer0914215257_3">
	<div id="MMMenu0914215257_3" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
		<a href="#" id="MMMenu0914215257_3_Item_0" class="MMMIFHStyleMMMenu0914215257_3" onmouseover="MM_menuOverMenuItem('MMMenu0914215257_3');">
			link1
		</a>
		<a href="#" id="MMMenu0914215257_3_Item_1" class="MMMIHStyleMMMenu0914215257_3" onmouseover="MM_menuOverMenuItem('MMMenu0914215257_3');">
			link2
		</a>
		<a href="#" id="MMMenu0914215257_3_Item_2" class="MMMIHStyleMMMenu0914215257_3" onmouseover="MM_menuOverMenuItem('MMMenu0914215257_3');">
			link3
		</a>
		<a href="#" id="MMMenu0914215257_3_Item_3" class="MMMIHStyleMMMenu0914215257_3" onmouseover="MM_menuOverMenuItem('MMMenu0914215257_3');">
			link4
		</a>
		<a href="#" id="MMMenu0914215257_3_Item_4" class="MMMIHStyleMMMenu0914215257_3" onmouseover="MM_menuOverMenuItem('MMMenu0914215257_3');">
			link5
		</a>
	</div>
</div>
</div>
</body>
</html>
     
    #1 2699, 2005-09-15
    最后编辑: 2005-09-15
    已获得 不学无术 的点赞。
  2. 2699

    2699 New Member

    注册:
    2005-09-04
    帖子:
    77
    赞:
    2
    JS文件代码
    代码:
    var mmOpenContainer = null;
var mmOpenMenus = null;
var mmHideMenuTimer = null;

function MM_menuStartTimeout(hideTimeout) {
	mmHideMenuTimer = setTimeout("MM_menuHideMenus()", hideTimeout);	
}

function MM_menuHideMenus() {
	MM_menuResetTimeout();
	if(mmOpenContainer) {
		var c = document.getElementById(mmOpenContainer);
		c.style.visibility = "inherit";
		mmOpenContainer = null;
	}
	if( mmOpenMenus ) {
		for(var i in mmOpenMenus) {
			var m = document.getElementById(mmOpenMenus);
			m.style.visibility = "hidden";			
		}
		mmOpenMenus = null;
	}
}

function MM_menuHideSubmenus(menuName) {
	if( mmOpenMenus ) {
		var h = false;
		var c = 0;
		for(var i in mmOpenMenus) {
			if( h ) {
				var m = document.getElementById(mmOpenMenus);
				m.style.visibility = "hidden";
			} else if( mmOpenMenus == menuName ) {
				h = true;
			} else {
				c++;
			}
		}
		mmOpenMenus.length = c+1;
	}
}

function MM_menuOverMenuItem(menuName, subMenuSuffix) {
	MM_menuResetTimeout();
	MM_menuHideSubmenus(menuName);
	if( subMenuSuffix ) {
		var subMenuName = "" + menuName + "_" + subMenuSuffix;
		MM_menuShowSubMenu(subMenuName);
	}
}

function MM_menuShowSubMenu(subMenuName) {
	MM_menuResetTimeout();
	var e = document.getElementById(subMenuName);
	e.style.visibility = "inherit";
	if( !mmOpenMenus ) {
		mmOpenMenus = new Array;
	}
	mmOpenMenus[mmOpenMenus.length] = "" + subMenuName;
}

function MM_menuResetTimeout() {
	if (mmHideMenuTimer) clearTimeout(mmHideMenuTimer);
	mmHideMenuTimer = null;
}

function MM_menuShowMenu(containName, menuName, xOffset, yOffset, triggerName) {
	MM_menuHideMenus();
	MM_menuResetTimeout();
	MM_menuShowMenuContainer(containName, xOffset, yOffset, triggerName);
	MM_menuShowSubMenu(menuName);
}

function MM_menuShowMenuContainer(containName, x, y, triggerName) {	
	var c = document.getElementById(containName);
	var s = c.style;
	s.visibility = "inherit";
	
	mmOpenContainer = "" + containName;
}
     
    #2 2699, 2005-09-15
  3. 2699

    2699 New Member

    注册:
    2005-09-04
    帖子:
    77
    赞:
    2
    css源代码 (优化过)
    代码:
    td img {
	display: block;
}
#FWTableContainer216291553 {
	position: relative;
	margin: 0;
	width: 450px;
	height: 25px;
	text-align: left;
}
#MMMenuContainer0914215921_0 {
	position: absolute;
	left: 344px;
	top: 26px;
	visibility: hidden;
	z-index: 300;
}
#MMMenu0914215921_0 {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	border: 1px solid #c6e8f9;
	width: 52px;
	height: 85px;
	background: #fff;
}
.MMMIFVStyleMMMenu0914215921_0 {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 44px;
	height: 14px;
	voice-family: inherit;
}
.MMMIVStyleMMMenu0914215921_0 {
	border-top: 0;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 44px;
	height: 14px;
	voice-family: inherit;
}
#MMMenu0914215921_0_Item_0 {
	left: 0;
	top: 0;
}
#MMMenu0914215921_0_Item_1 {
	left: 0;
	top: 22px;
}
#MMMenu0914215921_0_Item_2 {
	left: 0;
	top: 43px;
}
#MMMenu0914215921_0_Item_3 {
	left: 0;
	top: 64px;
}
#MMMenuContainer0914215921_0 img {
	border: 0;
}
#MMMenuContainer0914215921_0 a {
	text-decoration: none;
	color: #f60;
	text-align: center;
	vertical-align: middle;
	padding: 3px;
	display: block;
	position: absolute;
	background: #ddf1fb;
	font: normal bold 10px Verdana, Arial, Helvetica, sans-serif;
}
#MMMenuContainer0914215921_0 a:hover {
	color: #fff;
	background: #f60;
}
#MMMenuContainer0914215619_0 {
	position: absolute;
	left: 272px;
	top: 18px;
	visibility: hidden;
	z-index: 300;
}
#MMMenu0914215619_0 {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	border: 1px solid #c6e8f9;
	width: 38px;
	height: 127px;
	background: #fff;
}
.MMMIFVStyleMMMenu0914215619_0 {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 30px;
	height: 14px;
	voice-family: inherit;
}
.MMMIVStyleMMMenu0914215619_0 {
	border-top: 0;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 30px;
	height: 14px;
	voice-family: inherit;
}
#MMMenu0914215619_0_Item_0 {
	left: 0;
	top: 0;
}
#MMMenu0914215619_0_Item_1 {
	left: 0;
	top: 22px;
}
#MMMenu0914215619_0_Item_2 {
	left: 0;
	top: 43px;
}
#MMMenu0914215619_0_Item_3 {
	left: 0;
	top: 64px;
}
#MMMenu0914215619_0_Item_4 {
	left: 0;
	top: 85px;
}
#MMMenu0914215619_0_Item_5 {
	left: 0;
	top: 106px;
}
#MMMenuContainer0914215619_0 img {
	border: 0;
}
#MMMenuContainer0914215619_0 a {
	text-decoration: none;
	color: #f60;
	text-align: center;
	vertical-align: middle;
	padding: 3px;
	display: block;
	position: absolute;
	background: #ddf1fb;
	font: normal bold 10px Verdana, Arial, Helvetica, sans-serif;
}
#MMMenuContainer0914215619_0 a:hover {
	color: #fff;
	background: #f60;
}
#MMMenuContainer0914215517_1 {
	position: absolute;
	left: 182px;
	top: 26px;
	visibility: hidden;
	z-index: 300;
}
#MMMenu0914215517_1 {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	border: 1px solid #c6e8f9;
	width: 266px;
	height: 23px;
	background: #fff;
}
.MMMIFHStyleMMMenu0914215517_1 {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 30px;
	height: 15px;
	voice-family: inherit;
}
.MMMIHStyleMMMenu0914215517_1 {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 30px;
	height: 15px;
	voice-family: inherit;
}
#MMMenu0914215517_1_Item_0 {
	left: 0;
	top: 0;
}
#MMMenu0914215517_1_Item_1 {
	left: 38px;
	top: 0;
}
#MMMenu0914215517_1_Item_2 {
	left: 76px;
	top: 0;
}
#MMMenu0914215517_1_Item_3 {
	left: 114px;
	top: 0;
}
#MMMenu0914215517_1_Item_4 {
	left: 152px;
	top: 0;
}
#MMMenu0914215517_1_Item_5 {
	left: 190px;
	top: 0;
}
#MMMenu0914215517_1_Item_6 {
	left: 228px;
	top: 0;
}
#MMMenuContainer0914215517_1 img {
	border: 0;
}
#MMMenuContainer0914215517_1 a {
	text-decoration: none;
	color: #f60;
	text-align: center;
	vertical-align: middle;
	padding: 3px;
	display: block;
	position: absolute;
	background: #ddf1fb;
	font: normal bold 10px Verdana, Arial, Helvetica, sans-serif;
}
#MMMenuContainer0914215517_1 a:hover {
	color: #fff;
	background: #f60;
}
#MMMenuContainer0914215417_2 {
	position: absolute;
	left: 33px;
	top: 26px;
	visibility: hidden;
	z-index: 300;
}
#MMMenu0914215417_2 {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	border: 1px solid #c6e8f9;
	width: 152px;
	height: 23px;
	background: #fff;
}
.MMMIFHStyleMMMenu0914215417_2 {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 30px;
	height: 15px;
	voice-family: inherit;
}
.MMMIHStyleMMMenu0914215417_2 {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 30px;
	height: 15px;
	voice-family: inherit;
}
#MMMenu0914215417_2_Item_0 {
	left: 0;
	top: 0;
}
#MMMenu0914215417_2_Item_1 {
	left: 38px;
	top: 0;
}
#MMMenu0914215417_2_Item_2 {
	left: 76px;
	top: 0;
}
#MMMenu0914215417_2_Item_3 {
	left: 114px;
	top: 0;
}
#MMMenuContainer0914215417_2 img {
	border: 0;
}
#MMMenuContainer0914215417_2 a {
	text-decoration: none;
	color: #f60;
	text-align: center;
	vertical-align: middle;
	padding: 3px;
	display: block;
	position: absolute;
	background: #ddf1fb;
	font: normal bold 10px Verdana, Arial, Helvetica, sans-serif;
}
#MMMenuContainer0914215417_2 a:hover {
	color: #fff;
	background: #f60;
}
#MMMenuContainer0914215257_3 {
	position: absolute;
	left: 106px;
	top: 26px;
	visibility: hidden;
	z-index: 300;
}
#MMMenu0914215257_3 {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	border: 1px solid #c6e8f9;
	width: 190px;
	height: 23px;
	background: #fff;
}
.MMMIFHStyleMMMenu0914215257_3 {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 30px;
	height: 15px;
	voice-family: inherit;
}
.MMMIHStyleMMMenu0914215257_3 {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 30px;
	height: 15px;
	voice-family: inherit;
}
#MMMenu0914215257_3_Item_0 {
	left: 0;
	top: 0;
}
#MMMenu0914215257_3_Item_1 {
	left: 38px;
	top: 0;
}
#MMMenu0914215257_3_Item_2 {
	left: 76px;
	top: 0;
}
#MMMenu0914215257_3_Item_3 {
	left: 114px;
	top: 0;
}
#MMMenu0914215257_3_Item_4 {
	left: 152px;
	top: 0;
}
#MMMenuContainer0914215257_3 img {
	border: 0;
}
#MMMenuContainer0914215257_3 a {
	text-decoration: none;
	color: #f60;
	text-align: center;
	vertical-align: middle;
	padding: 3px;
	display: block;
	position: absolute;
	background: #ddf1fb;
	font: normal bold 10px Verdana, Arial, Helvetica, sans-serif;
}
#MMMenuContainer0914215257_3 a:hover {
	color: #fff;
	background: #f60;
}
     
    #3 2699, 2005-09-15
  4. laogui

    laogui Administrator
    管理成员

    注册:
    2005-08-30
    帖子:
    15,216
    赞:
    35
    这些代码都是FW自动生成的？我现在终于明白我做网站为什么那么慢了
     
    #4 laogui, 2005-09-15
  5. A君

    A君 Well-Known Member

    注册:
    2005-08-31
    帖子:
    19,987
    赞:
    98
    恩？我怎么没发现，哎，我也不会fw，dw，flash。。。。哎
     
    #5 A君, 2005-09-15
  6. sohou

    sohou New Member

    注册:
    2005-09-04
    帖子:
    876
    赞:
    4
    很好,支持.
     
    #6 sohou, 2005-09-15
  7. 2699

    2699 New Member

    注册:
    2005-09-04
    帖子:
    77
    赞:
    2
    ID什么的要自己设置!

    除了CSS文件是优化过的.其他全部都是FW自动生成的! 优化前13.5K 优化后7.07K
    FW自动生成的css代码太肥胖,优化一下减去50-40%
     
    #7 2699, 2005-09-15
  8. 2699

    2699 New Member

    注册:
    2005-09-04
    帖子:
    77
    赞:
    2
    在制作网页相关图象推荐FW
    处理图象和画图当然还是老牌PS:D
     
    #8 2699, 2005-09-15
  9. 2699

    2699 New Member

    注册:
    2005-09-04
    帖子:
    77
    赞:
    2
    给我加声望:mad:
     
    #9 2699, 2005-09-15
    已获得 laogui 的点赞。
  10. dwenlee

    dwenlee New Member

    注册:
    2005-09-07
    帖子:
    92
    赞:
    1
    FW8到现在还没出中文的吧？
     
    #10 dwenlee, 2005-09-27
(您必须注册并登陆后发新主题。)
Toggle Width
语言
简体中文