<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          在网页设计中制作自由拖动层

          • 2019-11-07 16:17:14
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          用Dreamweaver可以在网页设计时制作出具有很好交互性的网页,例如,利用拖动层制作拼图游戏。但是在Dreamweaver中,所插入的层,在用浏览器浏览时,一般情况下是不能被移动的,而拼图游戏本身要求每张图片都能够自由移动。要解决这个问题,其实并不困难,因为Dreamweaver提供了一个“拖动AP元素”行为,利用它不但能够实现层的拖动,还能为每个层设置目标位置的坐标值。在浏览网页时,只要拖动该图片到正确的位置附近,图片就会被自动“吸”到坐标点上。下面利用该行为在网站建设中介绍拼图游戏的制作过程。

          【操作步骤】

          第1步,在制作拼图游戏之前,首先要找一幅图片,并利用Photoshop将图片切分成多块。如图7.8所示将一张完整的图片平均分成9块。

          技巧:在工具箱中选择【切片选取工具】,在工具选项栏中单击【划分】按钮,打开【划分切片】对话框,选中【水平划分为】复选框,然后在下面的文本框中输入数字3,设置水平分为3栏;选中【垂直划分为】复选框,然后在下面的文本框中输入数字3,设置垂直分为3栏。设置自动切片单击【确定】按钮,关闭【划分切片】对话框,此时Photoshop会自动把整个图片切分为9块。

          第2步,在Photoshop中选择【文件】|【存储为Web所用格式】命令,打开【存储为Web所用格式】对话框。

          第3步,保存默认设置,单击【存储】按钮,打开【将优化结果存储为】对话框,在【文件名】文本框中设置网页的名称,建议以英文字母配合数值进行命名;在【格式】下拉列表框中选择【HTML和图像】选项;在【设置】下拉列表框中保持默认设置,在【切片】下拉列表框中选择【所有用户切片】选项。

          第4步,单击【保存】按钮,输出并存储切片和网页,可以在当前站点目录下看到所存储的HTML文档和images文件夹,在images文件夹中保存着所有的用户切片图像,直接双击HTML文件名,即可在网页浏览器中预览网页效果。

          第5步,启动Dreamweaver,打开使用Pho-toshop输出的HTML文档。可以看到该页面为表格布局页面。

          第6步,选择【文件】|【另存为】命令,把index.html另存为pintu.html。然后切换到代码视图,使用CSS把表格布局的图像转换为图层布局图像。

          提示:在Dreamweaver以前的版本中,可以快速把表格布局转换为图层布局。方法是:选择【修改】|【转化】|【表格到层】命令,把插入的表格图像文件转换为层布局网页。

          第7步,选择【窗口】|【行为】命令,打开【行为】面板。

          第8步,在【标签选择器】内选择整个网页标签<body>,再单击【行为】面板中的按钮,弹出一个菜单,在菜单中选择【拖动AP元素】命令,打开【拖动AP元素】对话框。

          第9步,在【AP元素】下拉列表框中选择要设置的层。在本例中,由于插入了9个层,在该对话框中依次选择这9个层,并分别设置其目标位置的坐标值等参数。

          第10步,在【移动】下拉列表框中选择【不限制】选项。该列表框提供了两种拖动方式。   

          ?【不限制】为不受限制拖动,可将层拖动到浏览器的任何位置。   

          ?【限制】为受限制拖动,在该对话框中,可利用【上】、【下】、【左】、【右】选项为拖动层设置一个矩形范围,这样浏览者就只能在该范围内拖动层。第11步,在【放下目标】选项组的【左】和【上】文本框中输入层目标位置的坐标值。它是指每个图片在目标位置时,其左上角的坐标值。提示:如果不能确定该坐标值,可用下面的方法来获取坐标值。   

          ?选择【查看】|【标尺】|【显示】命令,在窗口中显示出标尺,并将鼠标指针移到单元格的左上角,记下标尺上虚线所对应的数值。其中顶部标尺显示的是【左】文本框的值,左面标尺显示的是【右】文本框的值。

          ?先将层拖到对应的单元格中,并用键盘上的方向键调整好层的位置;然后打开【拖动AP元素】对话框,单击【取得目前位置】按钮,即可自动获取该图片的坐标值。

          第12步,在【靠齐距离】文本框中设置目标点的允许误差范围。例如设为50,表示如果图片被拖动到距离目标位置小于50个像素时,就认为已经拖动到了目标点上。

          第13步,重复第8步~第12步操作,分别为其他8个层设置移动操作行为。最后,设置拖动触发事件为onLoad。完成设置后,保存文档,按F12键预览页面。

          如果在制作网页时想把游戏做得更好一些,可在其中加入一些动画以及设置【开始】、【重玩】和【结束】等按钮。

          【拓展】经过以上设置后,基本上已经能够实现所需要的功能了。如果需要对层进行更进一步的设置,例如层被拖动后的层次、拖动到目标点后引发的动作等,可单击【高级】标签,打开【高级】选项卡。

          在该选项卡中,可设置的选项如下。   

          ?拖动控制点:该下拉列表框用于设置可拖动的区域,其默认值为【整个元素】,即在该图片上的任何位置都可以拖动。如果选择了【元素内的区域】选项。列表框右侧的【左】、【上】、【宽】和【高】文本框用于确定拖动区域在图片上的位置,其中【左】和【上】文本框用于定位拖动区域距图片左边和顶边的距离,【宽】和【高】文本框用于设置拖动区域的宽度和高度。

          ?拖动时:在该选项组中,如果不选中【将元素置于顶层,然后】复选框,在拖动层时将不改变层的叠放次序,这意味着它有可能被其他层遮盖;如果选中该复选框,并在后面的下拉列表框中选择【留在最上方】选项,则层在拖动时将处于最顶层,释放鼠标后,该层也将变为顶层;如果选择【恢复z轴】选项,则层在被拖动时处于顶层,放开鼠标指针后将恢复原来的层次。   

          ?呼叫JavaScript:该文本框用于调用JavaScript。可以在其后面的文本框中输入完整的JavaScript语句。同时该选项也可进行某函数的调用。在拖动层时系统将反复执行所输入的语句。   

          ?放下时,呼叫JavaScript:用于在释放鼠标时调用JavaScript语句。可以在此文本框中输入JavaScript语句或其他函数。所输入的语句或函数,将在图形被拖动完成后执行。如果选中【只有在靠齐时】复选框,则只有当图形被拖动到目标位置后才能执行所输入的语句。利用【高级】选项卡中提供的这种可调用JavaScript语句的功能,可制作巧妙的换图效果。例如,当拖动该层到目标位置时,该图片立刻切换为其他图片。

          当前文章标题:在网页设计中制作自由拖动层

          当前URL:http://www.1c4w.com/news/wzzz/3123.html

          上一篇:在网页设计中制作跳转菜单

          下一篇:在网页设计中改变显示属性

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图