photoshop.jpg (9478 bytes)
line335x1.gif (57 bytes)
/dynamic_html
Dreamweaver教程 - 第二天
Taylor
网猴教程
网页设计
HTML
JavaScript
样式表
动态HTML
图形与字体
多媒体
Java
Perl
后端编程
浏览器
电子商务
其它资源
Web入门
软件下载
网猴信箱

第二页:DIV和Layer

创建dHTML页面以DIV开始。可以从Objects工具条的Common集合
中插入DIV。点击图标插入DIV。不是出现标准对话框,而是
光标弹出选取框一样的图标。用它在页面上画一个矩形 - 此
黑体矩形有抓取器和一个小操作图标。

Properties工具条将显示关于Layer的信息。 注意当
Dreamweaver讲到Layer时,不一定意味着<LAYER>tag。
Dreamweaver把所有有绝对位置的元素当作Layer,然后给那个
对象一个小抓取器。在知道是否超越DIV和SPAN之前尝试跨平台
的dHTML是自找麻烦。为了解决这个问题,一些Dreamweaver的
特征 - 如Timeline - 决定页面中命名Layer的表现。
Dreamweaver把<DIV>、<SPAN>、<LAYER>和<ILAYER>当作有效
的Layer对象,你可以选择在Preferences(Layer之下)中使用哪
个tag。要在Layer中插入HTML,可以在Layer内点击,如同
在document中一样。

要编辑Layer,可以点击它的抓取器。这会引起Properties工
具条的Layer UI。从那儿,你可以设置Layer的样式属性 - 可
以在Netscape和Internet Explorer两种方式下工作。第一种属
性被缺省设置:你插入到文档中的Layer号标记给ID。你可以用
一个更容易记忆的名字代替。(但是要小心!如果使
用JavaScript中的保留名,如“this”,会使Dreamweaver和你
的浏览器疯掉。)这个名字会出现在涉及这个Layer的所有界
面中。Properties工具条的其它属性允许你定位Layer和修改它
的大小。

这是dHTML的“安全”区。这些属性可以用在DIV和CSS上 - 可
以用JavaScript描述它的left、top、z-index和visibility
属性。如果你读过我的dHTML教程,你会知道这只是一项杂务。

要改变Layer的位置和大小,可以设置工具条中的坐标或使用抓
取器。可以用Layer边界上的改变Layer的大小。其它两个
安全的、可写脚本的技术也可通过Layers工具条实现。从
Window菜单,选择Layers(或按F11键)。

此工具条使你容易地存取Layers - 只需点击它们的名字。你可
能会注意到每次插入一个Layer时,文档上就会出现一个小的黄
色的“invisibles”图标。这些图标允许你选择屏幕上不可
见的元素。然而,我发现这些图标在文档流程上占用了太多的
空间,所以我通常把它们关掉:选择View菜单的Invisible
Elements,或按C-Shift-I。把所有的Layer选择操作留给
Layer工具条。任何被选择的Layer变为可见,并且出现在
z-index的顶部。

Layer工具条上的工具有一些问题。例如,在Dreamweaver中设
置Layer的背景色,这种颜色就确实出现在InternetExplorer
中。但是在Netscape中,颜色只出现在Layer中的文本或图像的
背后。

Layer in
Dreamweaver
Layer in Internet
Explorer 4.0
Layer in
Netscape 4.0

Dreamweaver非常坚持Web标准。它在写HTML和CSS时严格遵守其
标准。但是不是所有的浏览器完全支持CSS。即使这样,你也可
以设置元素的背景色 - 它是有效的CSS,你得到的是上面所示
的无效渲染的图像。为了解决这个问题,必须实现非标准的CSS。
Netscape 4.0用一个layer-background-color样式规则来实际
填充Layer的颜色。不幸的是,Dreamweaver 1.2没有这样工具
的界面,你只好在文本窗口或用文本编辑器自己修改了。

你会再一次注意到背景色的问题并没有被解决。背景色只跨越
最长文本行或图像的宽度。解决这个问题要用到样式表 - 幸运
的是,Dreamweaver有这样的工具界面。

通过Window菜单调用Style工具条(或者按F7,或者点击任
何launcher上的图标)。下面让我们看看Dreamweaver的样式
表功能。

>>

第一页 Dreamweaver简介 - 第二天
第二页 DIV和Layer
第三页 样式表

[第1天][第2天][第3天]


Copyright © 1994-99 Wired Digital Inc. All rights reserved.