宁波网站设计专栏

宁波网站设计:制作下拉菜单

发布时间:2018-09-22 22:58:14

  制作下拉菜单
  在网页中使用下拉菜单可以极大地节省网页空间,并能够使内容的分类显示更具条理3下面简单介绍典型下拉菜单的制作过程。

宁波网站设计:制作下拉菜单的图片68

  首先建立主菜单项目,分别赋予对应的链接指向,然后在每个链接下面放置一个图层对象,再把相应下拉菜单的内容放到隐藏图层里。一个链接对应一个图层效果。
  因为菜单载入后子菜单部分是完全隐藏的,所以将3个子菜单图层均设为隐藏图层,这时”下拉“内容不可见,在相关链接上面用鼠标双击以选中它,然后按F8键把”行为“菜单调出来,在”行为“面板中点击”+“,选择”显示-隐藏层“,在随后的窗口中设定Layerl图层为”显示“,同时另外的两个图层Layer2、Layer3中,Layer3为”隐藏“,这样才能保证只显示对应的子菜单。在”行为“列表中点击4个动作事件的箭头按钮,将默认的”Onclick(单击)“改为”OnMouseOver(鼠标悬停)“。
  在”行为“列表中点击3个动作事件的箭头按钮,将默认的”Onclick(单击)“改为”OnMoUSeOver(鼠标悬停)“。这是一个下拉菜单的制作过程,用同样的方法设定另外3个链接效果。
  实现幻灯片效果
  用Flash制作幻灯片非常容易,效果也非常好,但它需要插件的支持,而用Java制作幻灯片,它会影响网页的浏览速度。可以通过Dreamweaver制作幻灯片,而且其效果比起用Java制作的也不差。下面这个例子主要利用了时间轴和显示隐含图层。
  首先准备几张大小一样的图片。
  需要做几张幻灯片就做几个隐藏图层,在图层中插入图片。假设制作3张幻灯片,就做3个隐藏图层,做隐藏图层的时候一定要使3个图层坐标一样,否则在变换图片时就会有位移现象。
  把时间轴编辑窗口调出来,把3个图层分别加入3条动画轨道中去。
  在第1帧的位置,加人”行为“事件,双击第1帧上方的”行为“轨道,弹出行为编辑窗口,点击”+“选择”显示-隐藏图层“,在接下来的窗口中选择”Layerl“后单击”显示“确定。

宁波网站设计:制作下拉菜单的图片67

  在第15帧处双击”行为“轨道,弹出行为编辑窗口,同样加人”显示-隐藏层“事件,这次加人的事件是把Layerl隐藏起来。当动画到第15帧就要换图片,所以在第15帧处还要加一个”显示-隐藏层“事件,这次是显示Layer2。
  在第29帧处加入两个”行为“事件,一个是把Layer2隐藏起来,另一个是显示Layer3,这是在换图片。如果幻灯片多于3张,在一段帧后加人承前启后的两个”行为“事件就行了。
  在最后一帧处,加人隐藏Layer3的”行为“事件。
  最后把时间轴编辑窗口中的”自动播放“和”循环“选上。选完后,把小方块拖到与最后一帧的行为效果重合,这样就可避免重复动画时有一帧没有显示而发生停顿。
  上面介绍的仅是Dreamweaver中行为功能的一些方法,灵活地把行为和图层结合运用还可以实现诸如动态图片、可拖曳的图层等功能,让网页看起来更加丰富多彩。
  课堂练习
  练习目标
  熟练掌握层的建立方法。
  学会使用层进行页面排版。
  学位使用层制作一些时间特效。
  练习题目
  利用层与时间轴的组合,制作一个滚动公告栏。
  练习要求
  建立一个新的文档窗口、然后插入一个层,并设置该层的背景图像。
  插入中间层,制作边距。
  插入第三个子层,并添加公告文字。

宁波网站设计:制作下拉菜单的图片64

  将文字层作为对象添加在时间轴中。
  在”时间轴“面板中设置关键帧。
  合理利用层的”溢出“属性设置。
  功能合格。

宁波网站设计:制作下拉菜单的图片58

  页面美观大方。
  表单的应用
  表单基础
  什么是表单
  表单在网页中为网站和访问者提供开展互动的窗口,它在网页中的作用不可小视,主要负责数据采集的功能,比如采集访问者的名字和电子邮件地址、调查表信息、留言簿信息等。这些数据都需要通过表单在网页中进行发送和接收。
  表单的组成
  表单有3个基本组成部分:
  表单标签:包含处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
  表单域:包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等,用于采集用户输人或选择的数据。
  表单按钮:包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上的CGI脚本或者取消输人,还可以控制其他定义了处理脚本的处理工作。
  生成表单
  创建表单
  表单的创建有两种方式,操作方法分别如下。
  通过菜单栏创建表单首先,建立一个网页文档。
  其次,将插人点放置到要插人表单的位置。
  最后,使用主菜单中的”插入“/”表单“/”表单“命令。
  通过”插人“栏创建表单首先,建立一个网页文档。

宁波网站设计:制作下拉菜单的图片59

  其次,将插入点放置到要插人表单的位置、
  最后,将”插人“栏切换到”表单“类别,单击其中的”表单“按钮,即可插人相应的表单。

宁波网站设计:制作下拉菜单的图片56

  实际”表单“栏
  设置表单属性
  需要在表单的”属性“面板中设置表单。
  实际表单的”属性“面板
  各属性的作用说明如下:
  表单名称:设置表单的名称,可用于处理程序的调用。
  动作:在文本框中输人或者浏览处理该表单的动态页或脚本程序,用于处理表单提交的数据。
  目标:指定一个目标窗口来处理表单的动态页或脚本程序的打开方式。
  方法:指定将表单数据传输到服务器的方法,有3个选项:”POST(发送)“”GET(获取)“和”默认“。
  MIME类型:指定提交给服务器进行处理的数据所使用的编码类型。
  通过设计工具添加表单对象
  根据上述方法,可以在表单中添加具体对象。各个对象间有什么区别?如何应用?下面分别说明D14.3.1文本域1.文本域说明文本域有3种类型:
  单行文本域:文本内容可见,但只能输入在一行之中。
  密码域:文本内容不可见,通常只输入在一行之中。
  多行文本域:文本内容可见,并可实现多行输入。
  添加步骤如下:
  将光标插人到要添加文本域的表单内。
  执行”插入“/”表单“/”文本域“命令,或将插人工具栏切换到”表单“类别,单击”文本域“,即可在光标所在处添加文本域。
  选中”文本域“表单对象,在其”属性“面板中选择”单行“文本域类型。
  [o文本域宇符ss□类坦?单行O多行O密码类幻*textfi?ld最多字符数□初始值11换行__实际单行文本域属性
  多行文本域
  多行文本域提供输人多行文本信息的文本框,用于设置留言板等文字较多的部分。其添加步骤同单行文本域的添加步骤。设置效果如实际所示。
  银胃醸闕圈利CIWTIl,lI」11||,11琴曝晒||1文本域字符宽度亡二]类坦O单行?多行O密码类幻互v?
  行教|5…|初始值
  換行StiA*
  实际多行文本域属性
  密码域
  密码域用来让用户输人密码,输人的字符以占位符”參“显示,以隐藏原始内容。
  单选按钮和单选按钮组
  单选按钮
  用户在一组选项中只能选择单个选项时用到单选按钮。
  实际单选按钮
  添加单选按钮的步骤如下:
  将光标插人到要添加单选按钮的表单中。
  执行”插入“/”表单“/”单选按钮“命令。
  在弹出的对话框中输入标签文字,并选择文字所在的位置,最后单击”确定“按钮。

宁波网站设计:制作下拉菜单的图片61

  单选按钮组
  单选按钮组是为了方便插入一组单选按钮。
  插人单选按钮组的具体操作步骤如下:
  将光标插人到要添加单选按钮组的表单中。
  执行”插人“/”表单“/”单选按钮组“命令,或将插人工具栏切换到”表单“类别,单击”单选按钮组“按钮,弹出”单选按钮组“对话框。
  实际‘’单选按钮组”对话框
  复选框

宁波网站设计:制作下拉菜单的图片63

  复选框具有多选性,允许在一组选项中选择一个或多个选项。
  实际复选框

宁波网站设计:制作下拉菜单的图片60

  添加复选框的具体操作步骤如下:
  将光标放在表单中要添加复选框的位置。

宁波网站设计:制作下拉菜单的图片57

  执行“插人”/“表单”/“复选框”命令,或将插人工具栏切换到“表单”类别,单击“复选框”按钮,即可插人复选框。复选框显示为一个小方块,在它后面可以加上说明文字。
  选中添加的某个“复选框”对象,可以在“属性”面板中进行相关设置。
  实际复选框的“属性”面板
  列表/菜单
  当需要选择的项目比较多时,为了节省空间,可以把这些选项集中到一个“列表/菜单”的表单对象中,浏览者可以通过列表或菜单提供的选项选择适当的值。

宁波网站设计:制作下拉菜单的图片62

  插入列表/菜单
  将光标放到表单中要插人列表/菜单的位置。
  执行“插人”/“表单”/“列表/菜单”命令,即査插人相应的对象;或将插人工具栏切换到“表单”类别,然后单击“列表/菜单”,即可在网页中插人列表/菜单对象。

宁波网站设计:制作下拉菜单的图片65

  设置列表/菜单属性
  列表/菜单的“属性”面板如实际所示。
  列表/菜单:设置列表/菜单的名称。
  类型:指定此对象是列表还是菜单。如果是列表,用户可以设置其髙度,即在不滚动的情况下显示出来的选项数;选定“允许多选”复选框,也可以设置是否允许用户从列表中选择多项。
  髙度:该项只用于列表类型,指定列表中可显示的行数Q选定范围:选中“允许多选”后,宁波网站设计可以结合Shift键对列表中的项目进行多选,否则为单选。
  初始化选定:指定列表/菜单开始显示时定位在哪一个选项上。
  列表值:单击该按钮,可打开“列表值”对话框,在“项目标签”下可输人列表/菜单的内容,单击?按钮添加新内容,单击?按钮删除内容;添加完成后,可单击“确定”按钮。如实际所示即添加后的列表值。
  实际添加列表值
  跳转菜单
  跳转菜单的外观和列表/菜单中的菜单类型差不多,不同的是跳转菜单具有超级链接的功能,在其中选择一个选项,将跳转到相应的页面中。
  创建跳转菜单的具体操作步骤如下:
  将光标放到要插人跳转菜单的位置。
  执行“插人”/“表单”/“跳转菜单”命令,或单击“表单”类别工具栏中的“跳转菜单”按钮,打开“插人跳转菜单”对话框。
  首页V
  铃声下蛇图片下駐
  实际跳转菜单

宁波网站设计:制作下拉菜单的图片66

  实际“插入跳转菜单”对话框
  添加按钮
  网页文档中存在3种不同类型的按钮,它们分别是:
  提交按钮:单击时将表单数据提交到表单域Action属性所指定的服务器端程序或一个E-mail地址。
  重置按钮:单击后表单中各项数据恢复为初始状态。
  命令按钮:必须为它编制相应的脚本程序,将按钮链接到特定的函数,否则在默认状态下,添加的按钮是一个提交按钮。
  添加按钮
  添加按钮的具体操作步骤如下:
  将光标放到要插入按钮的位置。
  执行“插人”/“表单”/“按钮”命令,或单击“表单”类别工具栏中的“按钮”,即可插人按钮为插人的提交按钮和重置按钮。
  以上内容是否公开……
  岡1重幻
  实际按钮
  设置按钮属性
  按钮的“属性”面板如实际所示。
  按钮名称:给按钮命名,Dreamweaver有两个保留名称——“提交”和“重置”。
  值:设置显示在按钮上的文本。
  动作:设置按钮被单击时发生什么动作。有3个选项——提交表单、重设表单和无。选择“无”时,单击按钮不会发生任何动作。
  其他表单域
  隐藏域
  隐藏域可存储用户输人的信息内容,并向服务器提供这些数据,便于通过后台处理程序实现在该用户下次访问此站点时显示这些数据的目的。
  文件域
  文件域是由一个文本框和一个显示“浏览”字样的按钮组成的,它的作用就是使访问者能浏览本地计算机上的某个文件,并将该文件作为表单数据上传。
  ——iwn
  实际文件域
  通过标签添加表单对象
  表单标签
  功能:用于申明表单,定义采集数据的范围,也就是
*  语法:
  属性解释:
  “action=Url”:指定处理提交表单的格式,它可以是一个URL地址(提交给程式)或一个电子邮件地址。
  “method=get”或“post”:指明提交表单的HTTP方法,可能的值为:
  post:post方法在表单的主干包含名称/值对并且无须包含于action特性的URL中。
  get:get方法把名称/值对加在action的URL后面并且把新的URL送至服务器,这是往前兼容的缺省值,这个值由于国际化的原因不赞成使用。
  “enctype=cdata”:指明用来把表单提交给服务器时(当method值为“post”)的互联网媒体形式,这个特性的缺省值是“application/x-www-form-urlencoded”。
  *target=?指定提交的结果文档显示的位置:
  _blank:在一个新的、无名浏览器窗口调人指定的文档;_self:在指向这个目标的元素的相同的框架中调人文档;_parent:把文档调人当前框的直接的父FRAMESET框中;这个值在当前框没有父框时等价于_self;_top:把文档调人原来的最顶部的浏览器窗口中(因此取消所有其他框架),这个值等价于当前框没有父框时的_self。
  本文转载自
  宁波网站设计www.leseo.net
  补充词条:宁波网站排名优化  宁波网络seo  宁波网站seo优化  宁波seo哪家好  宁波网站优化推广