电信主站 网通分站
购买流程 付款方式 常见问题 在线提问 续租服务 购物车
用户名: 密 码: 忘记密码?
首 页
域名注册
虚拟主机
双线主机
服务器租用
VPS主机
企业邮局
代理专区
客服中心
虚拟主机行业资讯 虚拟主机评测对比 互联网最新动态 技术学院 站长资讯 在线教程 网站运营
搜索优化 服务器 网络编程 图形图象 站长之家 网页制作 操作系统
冲浪宝典 软件教学 视频通信 办公软件 邮件系统 网络安全 认证考试
您当前位置:西部数码->资讯中心-> 网页制作-> Dreamweaver教程
dreamweaver mx 2004从零开始(4)_dreamweaver教程
作者:网友供稿 点击:0
  西部数码-全国虚拟主机10强!20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!虚拟主机可在线rar解压,自动数据恢复设置虚拟目录等.虚拟主机免费赠送访问统计,企业邮局.Cn域名注册10元/年,自助建站480元起,免费试用7天,满意再付款!P4主机租用799元/月.月付免压金!
文章页数:[1] 
  图层的使用
  图层是网页的一个区域,在一个网页中可以有多个图层存在,它最大的魅力在于各个图层可以重叠,并且可以决定每个图层是否可见,同时也能够自定义各图层之间的层次关系。在熟练掌握了图层技术之后,就可以给网页提供强大的页面控制能力。


  创建图层


  为了说明图层的功能,我们先来制作图1所示的简单的实例效果(如图1)。

图1

  第一步 在Dreamweaver MX 2004中新建一个页面,运行“Insert→Layer Objects→Layer”命令,此时编辑窗口中会出现一个黑色矩形框,这就是插入的图层。当鼠标移动到矩形的框线上时,鼠标会变成十字箭头形状,此时点击鼠标则框线周围出现8个黑色实心方块,左上角还有一个空心方块,表示这个图层被选中了。

  提示:用鼠标拖拽实心方块可以改变图层大小,拖拽左上角的空心方块可以改变图层的位置。


  第二步 在图层中点击一下鼠标,并且在其中输入“中国电脑教育报”,然后在属性面板窗口中将文字设置为蓝色。

  第三步 单击图层边框选中图层,接着运行“Edit→Copy”命令复制当前图层,然后在编辑窗口其它空白处点击一下鼠标,并且运行“Edit→Paste”命令,这样在编辑窗口中就又出现了一个图层,不过目前它们重叠在一起,需要移动图层之后才能看见这两个图层。

  第四步 把其中一个图层的文字颜色更改为黑色,并且移动图层位置,使得两个图层的位置相差几个像素,这样就产生了阴影效果(如图2)。

图2

  完成上述操作之后按下“F12”按键进行预览,就可以在IE浏览器中查看到图1所示的效果了。
  嵌套图层


  所谓嵌套图层指的是一个图层创建在另外一个图层中,比如图3所示的就是一个典型的嵌套图层(如图3)。实际上制作这种嵌套图层很简单,只要创建了一个父图层之后用鼠标点击图层内部,并且再次插入一个图层即可。不过嵌套的图层并不意味着子图层必须要在父图层内部,它们之间存在着继承关系。

图3

  继承的作用是可以使子图层的可见性和父图层保持一致,由于很多动态网页的特效是通过控制图层的可见性来实现的,因此当父图层可见性改变时,子图层的可见性也随之改变。而且继承关系也可以让子图层和父图层的相对位置不变,比如我们拖拽父图层移动,此时子图层也会跟随着移动,这在制作动态网页的时候将显得非常有用。


  图层的“Z-顺序”


  和表格相比,图层最大的优势在于图层可以重叠,为了表示各个图层哪个在上面,哪个在下面,就要给每个图层设定一个序号,这个序号就是“Z-顺序”,它的意思就是除了屏幕的X和Y坐标之外,人为增加一个垂直于屏幕的Z轴。

  如图4所示,左边区域的四个图层和右边区域的四个图层就有明显的不同,而调整图层的顺序也很简单,只要用鼠标依次点选放置在最下部、中部和最上部的图层即可。但是这种操作方式在图层很多的时候就显得有些麻烦了,后期调整也不便,因此我们可以通过图层面板进行调整。

图4

  先运行“Window→Layers”命令激活图层面板,此时可以看见图5所示的面板窗口(如图5),在这里只要选中需要改变序号的图层,按下鼠标之后向上或者向下拖拽,当拖拽到希望插入的两层之间出现一条横线时松开鼠标,这样就可以改变各个图层的“Z-顺序”了。

图5

  提示:直接单击“Z”框的数值可以更改为所需要的图层层次。
  使用图层建立表格


  虽然使用图层来定位网页元素比使用表格方便得多,但是只有IE 4.0以上版本的浏览器才支持图层功能,因此为了让使用旧版本浏览器的朋友也可以看到你辛苦制作出来的作品,最好的方法就是把图层转换为表格。

  第一步 在图5所示的窗口中选取上部的“Prevent overlaps”复选框,这样使得每个图层不能互相重叠,否则在转换过程中会有警告信息提示。

  第二步 运行“Modify→Convert→Layers to Table”命令,这时可以看见图6所示的窗口(如图6),在“Table layout”区域中分别选择“Most Accurate”和“Use Transparent GIFs”两个选项,其中前者通过精确转换为每个图层建立一个单元格,确保各个单元格之间的距离;后者会在转换的表格最后一行中填充透明的GIF图,这样可以保证在所有浏览器中都有相同的外观。

图6

  第三步 按下“OK”按钮之后即可完成图层到表格的转换操作。

  提示:Dreamweaver MX 2004还提供了从表格到图层的转换功能,操作步骤类似。

  如果想把自己的网页制作的绚丽多彩,就必须掌握图层技术,否则日后制作动态网页时候将会遇到不少困难,因此建议大家通过上文的介绍深入研究一下,才能够真正掌握图层技术。

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!
相关主题
文章页数:[1] 
Google
热门文章
·在dreamweaver中插入背景音乐的几种方法_dreamweaver教程
·dreamweaver mx 打造我们的留言本(一)_dreamweaver教程
·dreamweaver mx 打造我们的留言本(一)_dreamweaver教程
·dreamweaver制作可控制的横向滚动_dreamweaver教程
·轻松打造弹出窗口_dreamweaver教程
·dreamweaver mx ultradev探索(5-1)_dreamweaver教程
·dreamweavermx ultradev探索(4-2)_dreamweaver教程
·dreamweavermx ultradev探索(4-1)_dreamweaver教程
·dreamweavermx ultradev探索(3-2)_dreamweaver教程
·dreamweavermx ultradev探索(3-1)_dreamweaver教程

最新文章
·用dreamweaver制作网页时关于文字自动换行的小技巧_dreamweaver教程
·dreamweaver经典插件下载_dreamweaver教程
·dreamweaver简单描述制作网页的基本步骤_dreamweaver教程
·通过dreamweaver设计网页时组织css的建议_dreamweaver教程
·学习dreamweaver8了解掌握css层叠样式表_dreamweaver教程
·dreamweaver制作复杂交换图像_dreamweaver教程
·利用dreamweaver8掌握网页代码基本格式_dreamweaver教程
·用dreamweaver8在网页中插入flash视频_dreamweaver教程
·dreamweaver cs3 新功能描述_dreamweaver教程
·dreamweaver实例:随机播放背景音乐_dreamweaver教程


 
 


版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!

特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
  打印  刷新  关闭
返回首页 |关于我们 | 联系我们 | 付款方式 | 创业联盟 | 虚拟主机 | 资讯中心 | 友情链接 | 网站地图

版权所有 西部数码(www.west263.com)
CopyRight (c) 2002~2006 west263.com all right reserved.
公司地址:四川成都市万和路90号天象大厦4楼 邮编:610031
电话总机:028-86262244 86263048 86263408 86263960 86264018 86267838
售前咨询:总机转201 202 203 204 206 208
售后服务:总机转211 212 213 214
财务咨询:总机转224 223 传真:028-86264041 财务QQ:点击发送消息给对方635483282
售前咨询QQ:点击发送消息给对方2182518 点击发送消息给对方241975952 点击发送消息给对方275026793 点击发送消息给对方408235859
售后服务QQ:点击发送消息给对方17708515 点击发送消息给对方307742704 点击发送消息给对方287976517 点击发送消息给对方363783715
《中华人民共和国增值电信业务经营许可证》编号:川B2-20030065号