网页导航制作
急!dreamweaver怎么制作鼠标经过文字字体变色效果
1、做好一个链接2、点击工具面板中CSS模式下的“+”,打开新建CSS样式面板3、选择“复合内容”,选择a:link,表示正常链接时的样式。4、点击确定,打开样式设置面板,选择Color:#333,或别的你要的着色,确定。5、下面设置鼠标经过的文字色彩,还是参考第二步,打开新建CSS规则面板,选择“复合内容”,选择器中选择:a:hover,6、color中选择鼠标经过的颜色,这里以“#F00”即红色为例。确定。7、下面看一下效果,完毕。
HTML下拉网页,导航条一直漂浮在顶端怎么做?
<div class="fixed"></div>.fixed { width:100%; height:30px; background:#000; position:fixed; top:0; left:0;}主要用到了position:fixed 这个属性,希望能帮到您,谢谢!
dw网页二级菜单代码怎么做!很着急把它放在一级导航底下!
一、打开Dreamweaver,点击 文件-新建 菜单,创建一个HTML文件,输入网站导航栏文字,并选中输入的文字,在下面的属性栏链接处加一个空链接。然后保存该网页文件。二、点击 窗口-行为 菜单,打开行为面板。 三、选中第一步输入的文字,点行为面板上的+号,在弹出的菜单中选-显示弹出式菜单。四、在弹出的对话框中勾选 Don’t show me this message again(不要再次向我提示此信息),再点 继续。五、在下列对话框分别设置内容、外观、高级、位置选项。在 内容 选项中,点+号可以添加菜单项,-号可以删除菜单项,缩进项可以自动生成二级菜单。六、各项都设置好后,按F12,在浏览器中预览网页效果此时你会发现和网页同级的目录多了两个文件,分别是:arrows.gif、mm_menu.js。请勿修改、移动位置,这是弹出式菜单必须的图片、JS文件。如需修改下拉菜单,可以选中文字,点击行为面板的 显示弹出式菜单 即可。如果下拉菜单下面有Flash,为了不影响下拉菜单的正常效果和层次,需要给Flash添加透明代码: <param name="WMODE" value="transparent"> ,还需在embed标签中加入代码:wmode="transparent",
网页制作时如何在同一个页面点击导航后其内容显示在相同的页面。
<html><head><title>范例</title><body><table><tr><td><a href="content.htm" target="target_area">左边的导航栏,做成列表的话最好;相应的内容会在右边显示</a></td><td><iframe id=target_area src="content.htm"></iframe></td></tr></table></body></html>-----------------------------------------------------------------------上面的代码就是你想要的效果的最简单的写法,这样有助于你理解原理:导航栏中所有的链接,都有一个共同的内容:target="target_area",意为在目标区显示内容,而目标区就是右边的那部分。至于做成什么样子,可以随便。右边的内容区最主要的就是一个浮动框架,里面的内容根据左边的点击显示不同页面(是网页HTML文件)。至于浮动框架(Iframe)的尺寸,就根据你的要求(受限于外层的单元格)了。
网页设计导航条
下面的代码,你去看看,不好用再说。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"><!--body { background-color: #0099FF;}#navigation { font-family: Arial, Helvetica, sans-serif; font-size: 12px;}#navigation ul { margin: 0px; padding: 0px; list-style-type: none;}#navigation li { border-bottom-style: none; border-bottom-color: #ed9f9f; border-top-style: none; border-right-style: none; border-left-style: none; border-top-color: #ed9f9f; border-right-color: #ed9f9f; border-left-color: #ed9f9f; float: left;}#navigation li a { text-decoration: none; display: block; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 0.5em; border-right-width: 1px; border-left-width: 12px; border-right-style: solid; border-left-style: solid; border-right-color: #711515; border-left-color: #711515; border-top-style: none; border-bottom-style: none; width: 50px; text-align: center; margin: 0px;}#navigation li a:link, #navigation li a:visited { color: #FFFFFF; background-color: #c11136;}#navigation li a:hover { color: #ffff00; background-color: #990020;}#navigation ul li:hover ul,#navigation ul a:hover ul { visibility: visible;}#navigation ul ul { visibility: hidden;}#navigation ul ul li { clear: both;}#navigation ul ul li a { border: 1px solid #CCCCCC;}#navigation ul ul li a:link, #navigation ul ul li a:visited { color: #000000; background-color: #FFCC66;}#navigation ul ul li a:hover { color: #006699; background-color: #99CC00;}.nav { border: 1px solid #0099CC; position: absolute; width: 357px; left: 112px; top: 34px;}.nav ul { margin: 0px; padding: 0px; list-style-type: none; font-size: 12px;}.nav li { float: left;}.nav li a { border: 1px solid #FF3333; display: block; padding: 5px; background-color: #FFCC33; text-decoration: none;}--></style></head><body><div id="navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品展示</a> <div> <ul> <li><a href="#">产品1一</a></li> <li><a href="#">产品2一</a></li> <li><a href="#">产品3一</a></li> <li><a href="#">产品4一</a></li> <li><a href="#">产品5一</a></li> <li><a href="#">产品6一</a></li> </ul> </div> </li> <li><a href="#">联系电话</a> <div> <ul> <li><a href="#">产品1一</a></li> <li><a href="#">产品2一</a></li> <li><a href="#">产品3一</a></li> <li><a href="#">产品4一</a></li> <li><a href="#">产品5一</a></li> <li><a href="#">产品6一</a></li> </ul> </div> </li> <li><a href="#">公司介绍</a></li> </ul></div></body></html>
如何使用Dreamweaver做一个网页的导航栏
Dreamweaver,简称“DW”,中文名称"梦想编织者",是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。想用DW做出导航栏必熟知div+css,基本代码:ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto} ul#nav li{display:inline; height:60px} ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px; color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px} ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/ <ul id="nav"> <li><a href="#">首页</a></li> <li><a href="#">HTML教程</a></li> <li><a href="#">CSS基础</a></li> <li><a href="#">CSS开发工具</a></li> <li><a href="#">CSS特效</a></li> <li><a href="#">CSS问题</a></li> </ul>
求网页制作达人,dreamweaver怎样在图片上放导航条?
1、点击Dreamweaver,双击打开。2、选择文件-打开(快捷键Ctrl+O),打开网页文本。3、把鼠标光标放在需要插入导航条的地方,选择插入记录-图像对象-导航条命令。4、此时会弹出插入导航条的对话框。5、点击“状态图像”后面的浏览,在弹出的对话框中选择需要的图片。6、同上步一样,插入鼠标经过图像和按下图像。7、点击确定后出现下面效果。8、保存文档,按F12使用浏览器浏览效果。
网页制作 导航栏和分类栏怎么在子页面也共用呢
首先将导航栏或分类栏目制作成一个独立的文件,这个文件需要根据你使用不同的网页编程语言来进行不同的命名,比如.html .asp .php .jsp;再将这文件放置到需要调用的地方即可:HTML静态网页调用:<include file="header.htm" />ASP网页调用:<!--#include.file="header.asp"-->PHP网页调用:<?php include 'header.php';?>
我自己做了一个网页,上面是导航栏,下面是轮播图,导航栏菜单展开时总是被轮播图挡住,怎样使菜单显示在
看一下轮播图模块里是否有代码是绝对定位;你可以给轮播图的层层DIV斗加上代码:z-index:1;然后给导航最外围的DIV加个代码:position:relative;里层代码加上:position:abselute;z-index:2;试试例如……<div class="titbox" style="position:relative;"> <div class="tit" style="position:absolute;z-index:2;">***</div></div><div class="pic" style="position:absolute;z-index:1;">***</div>……
谢谢,我先试试
网页设计导航条
下面的代码,你去看看,不好用再说。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"><!--body { background-color: #0099FF;}#navigation { font-family: Arial, Helvetica, sans-serif; font-size: 12px;}#navigation ul { margin: 0px; padding: 0px; list-style-type: none;}#navigation li { border-bottom-style: none; border-bottom-color: #ed9f9f; border-top-style: none; border-right-style: none; border-left-style: none; border-top-color: #ed9f9f; border-right-color: #ed9f9f; border-left-color: #ed9f9f; float: left;}#navigation li a { text-decoration: none; display: block; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 0.5em; border-right-width: 1px; border-left-width: 12px; border-right-style: solid; border-left-style: solid; border-right-color: #711515; border-left-color: #711515; border-top-style: none; border-bottom-style: none; width: 50px; text-align: center; margin: 0px;}#navigation li a:link, #navigation li a:visited { color: #FFFFFF; background-color: #c11136;}#navigation li a:hover { color: #ffff00; background-color: #990020;}#navigation ul li:hover ul,#navigation ul a:hover ul { visibility: visible;}#navigation ul ul { visibility: hidden;}#navigation ul ul li { clear: both;}#navigation ul ul li a { border: 1px solid #CCCCCC;}#navigation ul ul li a:link, #navigation ul ul li a:visited { color: #000000; background-color: #FFCC66;}#navigation ul ul li a:hover { color: #006699; background-color: #99CC00;}.nav { border: 1px solid #0099CC; position: absolute; width: 357px; left: 112px; top: 34px;}.nav ul { margin: 0px; padding: 0px; list-style-type: none; font-size: 12px;}.nav li { float: left;}.nav li a { border: 1px solid #FF3333; display: block; padding: 5px; background-color: #FFCC33; text-decoration: none;}--></style></head><body><div id="navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品展示</a> <div> <ul> <li><a href="#">产品1一</a></li> <li><a href="#">产品2一</a></li> <li><a href="#">产品3一</a></li> <li><a href="#">产品4一</a></li> <li><a href="#">产品5一</a></li> <li><a href="#">产品6一</a></li> </ul> </div> </li> <li><a href="#">联系电话</a> <div> <ul> <li><a href="#">产品1一</a></li> <li><a href="#">产品2一</a></li> <li><a href="#">产品3一</a></li> <li><a href="#">产品4一</a></li> <li><a href="#">产品5一</a></li> <li><a href="#">产品6一</a></li> </ul> </div> </li> <li><a href="#">公司介绍</a></li> </ul></div></body></html>