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"将出现。
这时将会弹出一个窗口,如下图。在Named Layers(命名的层)框中会列出当前网页所有的层,选中“层 "menu1" ”,因为我们想要menu1这个层对“关于公司”响应。然后点下面的“显示(Show)”按钮→OK。
这时会回到Behaviors窗口,窗口中出现如下图所示字样,点击Events下的文字“onClick”,会出现一个向下的小箭头,点击它,在下拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个单元格时,下拉选单menu1的状态变为显示(Show)。
下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加隐藏状态。
再点按钮,在下拉选项中选中"Show-Hide Layers",在弹出窗口中选中“层 "menu1" ”,因为我们想要menu1这个层对“新闻中心”响应。然后点下面的“隐藏(hide)”按钮,OK。
回到Behaviors窗口,点击向下的小箭头,在下拉选项中选中onMouseOut。
2.下拉选单部分
先选中层menu1,方法是点击‘层的边缘’或在LAYER面板中点击menu1,用与导航条部分同样的方法在Behaviors窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时,层menu1就自动隐藏。
3.重复以上两部分,为导航条的第二个主菜单“新闻中心”和层menu2添加显示、隐藏层命令。
【若鼠标停留“导航标题栏”(关于公司),看到“下拉选单”不整齐,则可把第一行的“公司简介”改
四、下拉菜单的美化修饰
到这里,下拉菜单的功能效果已经实现了,你现在按F12就可以看到。不过你一定也发现菜单有点难看,字不够精细,菜单选项的默认链接色不好看,菜单也没有边框,那就让我们来稍稍为它美容一下。
1.定义菜单字体样式
按Shift+F11打开CSS Style(样式)面板,点击面板下面的按钮
在弹出的"New Style"窗的Type选Redefine HTML Tag,Tag框内选中td标签,Define选This Document Only,如图。
此时弹出设置窗口,不管其它的,只在右边的Size框里选中12,单位为pixels。
2.定义菜单链接样式
在样式面板中,点击面板下面的按钮,在弹出窗中, Type选Use CSS Selector,Tag框内选中a:hover 标签,Define选This Document Only.
点击‘确定’后在弹出窗中,Color填#ff9933,Decoration选none,点OK。
返回到样式面板,点击面板下面的按钮,在弹出窗中, Type选Use CSS Selector,Tag框内选中a:link 标签,Define选This Document Only。
点击OK后在弹出窗中,Color填#ffffff,Decoration选none,点OK。
又返回到样式面板,点击面板下面的按钮, Type选Use CSS Selector,Tag框内选中a:visited标签,Define选This Document Only。
点击OK后在弹出窗中,Color填#ffffff,Decoration选none,点OK。
3.定义菜单边框样式
在样式面板中,点击面板下面的按钮,在弹出窗中, Tag框内选中tabld标签,Type选Redefine HTML Tag,Define选This Document Only.
弹出设置窗口,在左边的列表中选Border,右边四条边宽度都输入为1,颜色设为黑色#000000,Style选为solid。
dw网页制作基础代码
Dreamweaver 8 基础代码 HTML基本结构(每个网页都是在基本结构的基础上添加内容的) -------- 网页文件开始标签
------- 头部元素开始标签加粗:... 倾斜:… 滚动字幕: 滚动标签:marquee 最简表达: 滚动的属性: Direction-- 表示滚动的方向,值可以是left , right , up , down,默认为left Behavior--表示滚动的方式,值可以是scroll (连续滚动)slide (滑动一次)alternate (来回滚动)
《Dreamweaver网页制作》期中试卷及答案
一、填空: (40分,每空 1 分) 1、网页三剑客中 Dreamweaver 是(网页)的软件; Fireworks 是(图像)的软件;Flash8 是(动画)的软件。 2、 Dreamweaver8的视图窗口有三种,即(代码)视图、 (拆分)视图和(设计)视图。 3、在开发网页之前,首先应建立一个(站点)来管理网页及图像等内容。 4、网页文件默认的扩展名是(.html), Flash 源文件的扩展名是(.swf)。 5、在网页设计中,要使表格边框在浏览器中不可见,应将边框粗细设为(0 像素)。 6、通过 Dreamweaver定义站点的方法有(基本)和(高级)两种。 7、站点地图是整个站点的(结构图),它以(层次结构)显示站点中各网页的链接关系。 8、单元格边距是指(单元格内容与边框)之间的距离;单元格间距是指(单元格)之间的距离。 9、 www 国内称之为广域网,是英文(WORLD)、(WIDE)、(WEB)的缩写,其信息资源主要就是由一篇篇使用(HTML)语言编写的 Web 文档组成。 10、通常用于网络中的图像格式有三种,即(JPG)、 (GIF)和(PNG)格式。 11、使用(放缩)工具可以放大或缩小文档;使用(抓手)工具则可以拖动页面。 12、网页中表格的宽度单位一般以(像素)为单位,也可用(百分比)来表示。 13、表格背景效果有两种设置,分别是(背景颜色)和(背景图案)。 14、跟踪图像用于辅助页面设计,可在(查看)对话框中设置。默认情况下,跟踪图像在 Dreamweaver编辑窗口是(可见),在浏览器中永远(不可见)。 15、标准表格又称为(html表格),它是用于 HTML页上显示(文字)以及(图像)和(表格数据)进行布局的强有力的工具。 16、 Dreamweaver 为用户提供了(左对齐)、 (右对齐)、 (居中对齐)、(两端对齐)四
《Dreamweaver网页设计》综合练习题(二)及答案
《Dreamweaver网页设计》综合练习题(二)及解答一、选择填空题(每空2分,共20分) 1.HTML 2.URL 3.ICP 4.SGML 5.CSS (_____)网络内容服务商 (_____)网络内容服务商 (_____)标准通用标记语言 (_____)统一资源定位符 (_____)超文本标识语言 答案: (___3_)网络内容服务商 (__5_)网络内容服务商 (__4_)标准通用标记语言 (___2__)统一资源定位符 (___1_)超文本标识语言 1.标签