📄 0036.htm
字号:
<html>
<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1 {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
<p align="center"><big><strong>动态HTML教程（五）</strong></big></p>
<div align="right">---《网猴》版权所有</div>
<p>现在，经过四天的动态HTML教程，你已经知道如何制作动画和用户界面。你可以定位对象，在网页中移动它们，用程序改变它们的z-index和可视性。你知道如何条件化不同的DOM和写在Microsoft和Netscape的浏览器中都可用的文档。也许你觉得用手工编码太辛苦，于是你抛弃了文本编辑器，投入所见即所得的编辑工具的怀抱。</p>
<p>但是不管你用哪中工具，你都会遇到一些问题。比如你想真正让导航条一直放在浏览器的右侧。或者用户访问你的站点时不停地调整浏览器的大小，于是Netscape用户会抱怨所有的样式信息突然消失（当你调整窗口尺寸时，Netscape扔掉了所有的样式信息）。或许，你在制作动画，并把所有的演员放在后台，让他们等着进入，但是有的人有一个非常大的高分辨率显示器，能看出页面边缘的演员。你在使用动态HTML时会遇到所有这些问题。教程的最后一天将涉及其中的一些问题。
<p>CSS在定位上的缺点是它只有left和top属性，但是没有bottom或right。这就意味着你只能放一个对象在离浏览器窗口50个像素的位置，但是你不能只用CSS就能把对象放在离浏览器窗口右边50像素的地方。这个问题在CSS2中应该能得到解决，样式表的下一代<a
href="javascript:if(confirm('../../www.w3.org/TR/WD-CSS2/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server@'))window.location='../../www.w3.org/TR/WD-CSS2/default.htm'" tppabs="http://www.w3.org/TR/WD-CSS2/">specification</a>正在出笼；在它被主流浏览器支持之前，你只好求助于JavaScript。</p>
<p>用JavaScript解决这个问题的最好方式是基于文档宽度的计算。两种4.0浏览器都在DOM中包含文档大小的对象。所以定位对象的方式是把窗口的宽度减去对象的宽度。</p>
<pre><div id="foo">
your content here
</div>
<script>
if (document.layers)
{
document.foo.left = window.innerWidth - document.foo.clip.width;
}
else if (document.all)
{
foo.style.left = document.body.offsetWidth - parseInt(foo.style.width);
}
</script></pre>
<p>这可以把div定位到屏幕的右边。这种技术也可以把对象定位到窗口底部。</p>
<p>两种浏览器都支持的屏幕对象是：</p>
<table border="1" width="518" bordercolor="#0A4800" cellspacing="0">
<tbody>
<tr>
<th width="52" bgcolor="#FFEEFB">Feature</th>
<th width="270" bgcolor="#FFEEFB">Internet Explorer</th>
<th width="182" bgcolor="#FFEEFB">Netscape Navigator</th>
</tr>
<tr>
<td width="52" bgcolor="#FFF1F0">height of the screen</td>
<td width="270" bgcolor="#EFFFEE"><tt>screen.height</tt></td>
<td width="182" bgcolor="#F0E8FF"><tt>screen.height</tt></td>
</tr>
<tr>
<td width="52" bgcolor="#FFF1F0">width of the screen</td>
<td width="270" bgcolor="#EFFFEE"><tt>screen.width</tt></td>
<td width="182" bgcolor="#F0E8FF"><tt>screen.width</tt></td>
</tr>
<tr>
<td width="52" bgcolor="#FFF1F0">color depth of the screen</td>
<td width="270" bgcolor="#EFFFEE"><tt>screen.colorDepth</tt></td>
<td width="182" bgcolor="#F0E8FF"><tt>screen.colorDepth</tt></td>
</tr>
<tr>
<td width="52" bgcolor="#FFF1F0">height of the window</td>
<td width="270" bgcolor="#EFFFEE"><tt>document.body.offsetHeight</tt>*</td>
<td width="182" bgcolor="#F0E8FF"><tt>window.innerHeight</tt></td>
</tr>
<tr>
<td width="52" bgcolor="#FFF1F0">width of the window</td>
<td width="270" bgcolor="#EFFFEE"><tt>document.body.offsetWidth</tt>*</td>
<td width="182" bgcolor="#F0E8FF"><tt>window.innerWidth</tt></td>
</tr>
</tbody>
</table>
<p><em><small>*从技术上讲，这是文档的高度和宽度，不是窗口的，但是大多数情况下可以把它们看成一件事。</small></em></p>
<p>如果你用的是Netscape，在看这篇教程的时候，可能要调整浏览器窗口的大小以便达到较好的显示效果。这是可能会突然出现一个可怕的闪光，然后所有的定位信息都消失了，你的页面看起来象<a
href="javascript:if(confirm('../../www.jodi.org/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server@'))window.location='../../www.jodi.org/default.htm'" tppabs="http://www.jodi.org/">jodi.org</a>。</p>
<p>这是Netscape 4.0的一个bug。有解决办法吗？较简单的方式是在页面上放一个提示：如果您是Netscape用户，当调整浏览器尺寸时，需要重新下载页面。</p>
<p>或者可以使用程序：</p>
<pre><script>
if (document.layers)
{
window.onResize = reloadIt;
}
function reloadIt()
{
document.location = document.location;
}
</script></pre>
<p>这种方法在大多数情况下管用。（但是，Netscape偶尔会进入重新下载文档的死循环。）
<p>如果你经常访问网猴，你可能知道我们鼓吹在线文档中结构、表现和行为的分离。你保持你的HTML结构，用CSS进行布局，然后用JavaScript做一些事情。尽可能地不要把这三者混在一起。问题是，当你从文档的head部分应用样式规则到对象时，在IE中，整个规划会分离到不同部分。</p>
<pre><html>
<head>
<title>DOM example</title>
<style>
#foo {position: absolute; left: 10px; top: 10px}
</style>
<script>
function alertIt() {
alert(foo.style.left);
</script>
</head>
<body onload="alertIt()">
<div id="foo">This is the sample</div>
</body>
</html></pre>
<p>你得到一个空的对话框，是吗？</p>
<p>你的第一个反映可能是假定下载过程中断了。但是实际上是IE把这个整体分离。因为如果你查看文档，对象foo并没有样式在其中，虽然它有一个指向样式表的ID。所以foo的唯一属性是ID。你可以做一个实验，在foo标记中加入：</p>
<pre><div id="foo" bar="neat">This is the sample</div></pre>
<p>现在alert(foo.bar)会返回"neat"。你看出来在IE中发生什么了吗？标记中的任何属性都在DOM中作为对象的属性出现。但是如果它不在对象内，就在DOM中没有反映。这就是为什么把样式加到标记中。</p>
<p>为了修正这个问题，我们再一次使用JavaScript的object-as-reference能力。但是不指向HTML对象，我们<br>
为按照ID为对象指定样式表规则。页面的结果和在你的脚本中的一致，但是不需要把样式放在标记行中。</p>
<pre><script>
function setup(myId)
{
if(document.layers)
{
myObj = document.layers[myID];
}
else if(document.all)
{
for (ss=0 ; ss < document.styleSheets.length; ss++)
{
for (sr=0 ; sr < document.styleSheets(ss).rules.length; sr++)
{
if (document.styleSheets(ss).rules(sr).selectorText == '#' + myId)
{
myObj = document.styleSheets(ss).rules(sr).style;
}
}
}
}
}
</script></pre>
<p>结果是循环经过所有的页面的样式表。如果其中一个与你的对象的ID匹配，它就作为这个对象的别名。你可以象从前一样处理，但是用的HTML代码更整洁。
<p>在你完全掌握dHTML前，你需要了解event对象。两种4.0浏览器都包含event对象。它在事件创立时产生，如点击一个可点击的对象，移动鼠标，或聚焦到一个窗体元素上。Event对象被创建然后传递给处理事件的函数。</p>
<p>下面是event对象属性的描述，以及Netscape和IE处理它们的方式：</p>
<table border="2" cellspacing="0" bgcolor="#EEFFEE">
<tbody>
<tr>
<th align="left" height="28" valign="baseline" width="253" bgcolor="#FFFFEC"><b><a
name="1005913"><b>描述</b></a></b></th>
<th align="left" height="28" valign="baseline" width="91" bgcolor="#FFFFEC">Microsoft
属性</th>
<th align="left" height="28" valign="baseline" width="126" bgcolor="#FFFFEC"><b><b><a
name="1005911">Netscape </a></b>属性</b></th>
</tr>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -