-
课程
课程内容
-
学习计划
学习计划内容
-
技能图谱
技能图谱内容
Dreamweaver制作下拉导航菜单
用Dreamweaver制作下拉菜单的原理:它利用了Behaviors(行为)面板中的内置方法Show-Hide La yers(隐藏-显示层)方法,并用onMouseOver(鼠标移至)和onMouseOut(鼠标移开)来触发层的隐藏和显示,而将要出现的菜单就在“层”中。 一、导航条的制作 按CTRL+F2打开Objects面板,点击【层按钮】在页面中按住鼠标不放拖出一个“层”,然后在层的Pro perties(属性)面板中设置各参数,Layer ID框填入title,L、T、W、H框分别填入8、15、480、30,背景色填入#006699,如图。 将光标移至‘层内’,点击Objects面板上的【表格按钮】,插入一个一行四列的“表格”。 按住CTRL键不放,公别点取表格的四个单元格,然后设置它们的宽度为120(120*4=480),高度为25,并在前两个单元格中输入“关于公司”和“新闻中心”,做为主菜单名,并加上链接。 二、下拉选单的制作 现在开始制作将要‘下拉出现的菜单’,同样用‘层’来制作。 再次插入一个层到前面我们做好的导航条的下方,各项参数填为:Layer ID框填入menu1,L、T、W、H框分别填入8、34、120、80,背景色填入#999966,其中L和T两个参数是设置这个层距离窗口‘左边框’和‘上边框’的距离,一定不能填错,不然菜单将会错位,也将影响完成后的可用性。
这时候,我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便,我在这还是使用表格来做菜单(W=120,H=80)。这个层将作为“关于公司”的下拉选单出现,填入你所需要的菜单并链接。同样的方法,制作其它的下拉选单(层menu2)。 这一步要注意的地方就是下拉菜单所在的层(menu1、menu2)的位置非常重要(由L和T 两个参数决定)。它们的上边线应该紧贴导航条的下边线。如果远离导航条的话,鼠标一离开导航条,菜单就消失了。 按F2打开LAYER(层)面板,其中列出了网页中的三个层,点menu1和menu2的前面一格,出现闭着的眼睛图标,这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。 三、显示和隐藏效果的添加 本步骤分为两部分: 第一,对“导航条中的主菜单”添加控制显示隐藏的命令; 第二,给“下拉选单”本身添加显示隐藏的命令。 1.导航条部分 首先按CTRL键不放,点击导航条中的第一个单元格,现按Shift+F3打开Behaviors(行为)窗口,在下拉选项中选中"Show-Hide Layers"(如图)。如果选项中没有这一项,则选择Show Events For 下的IE 5.0后,重新点按钮,此时"Show-Hide Layers"将出现。
CSS制作导航栏
实验六 CSS制作导航栏 1实验目的 1)掌握CSS的类选择器和派生选择器; 2)掌握导航栏的制作方法; 3)掌握CSS中伪类(Pseudo-Classes)的使用。 2实验内容 1)使用CSS制作导航菜单栏; 2)使用伪类的属性使菜单动起来; 3)丰富实验三中的网站栏目,为你的网站设计栏目结构,使其更加完善; 4)制作一个绚丽的导航栏,应用到实验三中网站上。 3实验仪器、设备 1)PC机最低配置:2G Hz以上CPU;1G以上内存;1G自由硬盘空间; 2)Internet Explorer、Firefox、Chrome、Opera、Safari任意浏览器; 3)Macromedia Dreamweaver 8或Macromedia Dreamweaver CS3。 4实验要求 1)掌握CSS的类选择器和派生选择器; 2)掌握导航栏的制作方法; 3)掌握CSS中伪类(Pseudo-Classes)的使用。
5实验步骤 5.1CSS导航入门 在前几次实验中,我们的网站已经已经越来越完善了,但我们的还没有一个漂亮的导航菜单栏,看到网络上的那些漂亮的菜单,是不是也想制作一个绚丽的菜单栏。这里我们要使用到CCS中伪类的特性,简单来说就是根据鼠标的状态来改变相关样式。 我们知道了什么是“内容块状元素和内联元素”,以及XHTML+CSS布局的核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮动”,这次我们就利用这三个概念,来制作一款,经典的导航条,别看它其貌不扬,可是网上所有的导航条都可以再它的基础上修改而来,其实理论都是一样的,只要你能理解并学会这节课的内容,以后再困难的导航条你都可以很应对,EASY !!!OK!我们要做的导航条的效果如下,鼠标移动上去背景变黑,并且字体颜色变成白色 5.2制作导航菜单 新建一个html文档,我们要先做一个容器(要求:ID为“nav”,宽度为960px,高度为:35px,位于页面水平正中,与浏览器顶部的距离是30px;),这个容器就是放我们的导航的,html代码如下:
HTML下拉框代码
HTML下拉框代码 效果描述:当鼠标滑过一级导航的时候,对应的二级导航会展现出来,这就是我们经常说的下拉导航效果。 效果图如下: 详细代码如下: Html部分:
Css样式部分: .navs{width:910px;height:48px;float:left;margin-left:15px} .navs li{width:110px;height:48px;float:left;text-align:center; line-height:48px;cursor:pointer;text-align:center} .navs li ul{width:110px;height:180px;overflow:hidden;display:none} .navs li ul li{width:110px;height:40px;background:green;margin-top:1px; line-height:40px} .navs li.on{background:green;color:#FFF} .navs li ul li.in{background:#000} Javascript部分: 以上是实现这个下拉框效果的代码,图中的图片、文字等可以根据自己的实际情况做相应的调整。实验八 制作网页导航条
实验八制作网页导航条 使用实验八给的实验素材建立站点文件夹,然后制作如下的导航条。 一、利用列表制作垂直方向的导航栏 步骤: 1.在站点中新建nav01.html,页面设置如下。 2.在“插入”菜单中选择“Div”命令,在弹出的对话框中设置如下: 3.在插入的Div标签中输入如下段落文字,给文字设置空链接并应用项目列表, 如下图所示效果: 4.打开【CSS样式】面板,新建以下CSS规则,保存在当前文档,具体设置如 下: 1)新建“ID”的样式#navigation,属性设置如下: 2)新建“复合内容“样式#navigationul,属性设置如下: 3)新建“复合内容”样式#navigation li ,属性设置如下
4)新建“复合内容”样式#navigation li a ,属性设置如下 5)新建“复合内容”样式#navigation li a:hover ,属性设置如下 6)保存并预览该页面,最终效果图如下: 7)可修改其中相应样式的属性,将导航菜单变为水平排列的菜单,操作参 考如下: 选择【CSS样式】面板中的#navigation样式,将【方框】分类中的“width”属性改为600px。
选择【CSS样式】面板中#navigationli样式,将【方框】分类中的“width”属性设置为100px。“float(浮动)”属性设为:left(左对齐),单击【应用】按钮查看效果。继续将“margin”的右right、左left属性分别设为5px,单击【应用】按钮查看效果。最后单击【确定】按钮,则可看到垂直导航菜单变为水平导航菜单。 二、制作垂直方向的导航栏 在Dreamweaver CC打开实验素材文件夹中的nav02文件夹中的nav02.html 文件,将图1左侧竖排的导航栏制作成如2的效果: 图1 初始竖排导航栏图2 导航栏最终效果
网页设计-导航条
顶部水平栏导航 顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单,且最通常地放在网站所有页面的网站头的直接上方或直接下方。 顶部水平栏导航设计模式有时伴随着下拉菜单,当鼠标移到某个项上时弹出它下面的二级子导航项。 顶部水平栏导航一般特征 导航项是文字链接,按钮形状,或者选项卡形状 水平栏导航通常直接放在邻近网站logo的地方 它通常位于折叠之上
顶部水平栏导航的缺点 顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说,这不是什么问题,但是对于有非常复杂的信息结构且有很多模块组成的网站来说,如果没有子导航的话,这并不是一个完美的主导航菜单选择。 何时使用顶部水平栏导航 顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时,这种设计模式可以支持更多的链接。 竖直/侧边栏导航 侧边栏导航的导航项被排列在一个单列,一项在一项的上面。它经常在左上角的列上,在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究,左边的竖直导航栏比右边的竖直导航表现要好。 侧边栏导航设计模式随处可见,几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一,可以适应数量很多的链接。
它可以与子导航菜单一起使用,也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。侧边栏导航的一般特征 文字链接作为导航项很普遍(包含或不包含图标) 很少使用选项卡(除了堆叠标签导航模式) 竖直导航菜单经常含有很多链接
二级导航菜单模板 代码与实例
二级导航菜单 https://www.360docs.net/doc/ff5015036.html,网站建站 实现效果如下: 一、新建导航菜单 1、列表如下: 2、在https://www.360docs.net/doc/ff5015036.html,环境下,代码如下:
<%@Page Language="C#"AutoEventWireup="true"CodeFile="二级菜单模板.aspx.cs"Inherits="二级菜单模板" %>
无标题页