Dreamweaver MX 2004 层的应用实例(转)

Dreamweaver MX 2004 层的应用实例(转)[@more@]

  【利用Z轴制作阴影字】

  1、选择菜单栏选择“插入”-“布局对象”-“层” 在文档窗口插入一个层。

  2、在层中输入文本“阴影字”然后在属性面板把字体设置为36号,红色。如图:

1160474800_ddvip_6420.gif

  然后选中该层使用鼠标右键选择拷贝,再粘贴,这样就复制了一个跟该层大小,内容完全一致的另一个层,此时通过层标签可以看出已经有了两个层,我们将这个层在属性面板层编号中改为“Layer2”。见图:

1160474808_ddvip_535.gif

  在“Layer2”将文字颜色改为黑色,见下图:

1160474813_ddvip_4912.gif

  现在来看层面板,已经出来现了两个层,并且是可见的:

1160474816_ddvip_3898.gif

  按照上图所示,目前选中的是Layer2图层,用键盘的方向键移动该图层,按下左箭头两次,上箭头两次,会看到下图中的效果。

1160474821_ddvip_5838.gif

  回到层面板,将Layer1的Z轴数值改为2,见下图左,得到下图右的效果:

1160474826_ddvip_6655.gif1160474831_ddvip_5604.gif

  以上这个实例说明,层是可以叠加的,并且叠加在一起的层是通过Z轴来确定位置的,z轴的值可以是正数、负数和零, 数值大的层在上面。合理的使用层和Z轴可以变换出各类效果。

  【用层设计表格】

  我们制作网页当然希望能支持各类浏览器,以便向更多的浏览者传递我们的信息,尽管层定位网页的元素比使用表格定位方便了很多,但并不是所有的浏览器都支持层,仅以IE浏览器而言,只有IE4.0以上的浏览器才支持层,因此有的时候我们为了兼顾各类浏览器,就只有采用表格的形式,Dreamweaver MX 2004 层转换为表格的功能挤既利用层定位网页元素的便捷性,又能兼顾更多各类浏览器,给我们提供了很大的方便。

  【层转换为表格】

  1、新建一个文档窗口,选中菜单的“查看”-“网络”-“显示网格”见图,网格将会显示在文档窗口内选择网格主要是为了在布局的时候有一个参照物来方便布局,而这网格并不会显示在发布的网页之中。

1160474835_ddvip_860.gif

  2、在文档窗口中添加7个层,同时在层面板上选中“防止重叠”

   3、分别在每一个层内添加素材包内的图片(qh111.jpg/heng.gif)或添加文字,并参照下图将层移动到合适的位置。

1160474840_ddvip_3182.gif

  4、选择下拉菜单中的“修改”-“转换”-“层到表格”见图:

1160474858_ddvip_9857.gif

  弹出【转换层为表格】对话框:

1160474873_ddvip_7395.gif

  【最精确】:

  为每个层创建一个单元格并增添一些单元格来保持相邻的层之间的距离,精确的保证转换之后的位置。

  【最小】:

  当有一些层的坐标位置接近的时候去掉一些宽高小于指定象素的的空单元格,这样能减小HTML文档,但转换后页面会有一定的差别。

  【使用透明GIF】:

  软件自己生成一个透明的GIF格式的图像充填在表格最后一行,用于保证在所有的浏览器中都有一致 的外观,选中该项之后将不能拖动表格的列来编辑表格,如果不选择,可能导致在不同的浏览器中表格具有不同的列宽而具有不同外观。可以根据设计需要选用本功能。

  【置于页面中央】

   选中后表格在页面居中对其,反之默认在左对齐。

  【防止重叠】:

   选中该项可以防止层的重叠,如果有重叠发生将无法转换,在层到表格的转换中该项应该选取。

  【显示层面板】、【显示网格】、【靠齐到网格】:

  这几项主要为了便于布局设计,根据需要决定是否选取。

  选定并按下“确定”之后,Dreamweaver MX 2004自动打开一个新的窗口,窗口内的内容和布局和用图层制作的布局完全一致,不同的是,这是用表格布局的。见图:

1160474900_ddvip_3164.gif

表格转换到层】:

  在表格布局中布局受到局限的时候,可以把表格转换为层,然后通过移动层来调整布局,与层转换为表格不同的是,层转换为表格应该取消“防止重叠”的选择,使层能够根据需要相互叠加,然后通过改变Z轴位置来达到设计要求。有一点必须注意:一旦取消了“防止重叠”层叠加之后就无法再转换为表格了。

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10752019/viewspace-955179/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/10752019/viewspace-955179/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值