本文开始处链接到的这些示例文件中的 starter_files 文件夹内包含的 index.htm 文件。 它简单, 但很有效。 两个列, 没有任何图像, 全部是 CSS。
让我也简略地复习一下关于浮动的一些技巧:
* 必须赋予浮动内容一个宽度
* 必须赋予浮动内容一个方向值 (左或右, 不存在上或下)
* 如果您希望某个浮动内容显示在另一个元素旁边, 则它必须在文档的源顺序中处于该元素的前面。
* 浮动内容从不覆盖文本或内嵌图像
* 避免在浮动内容之后的块元素上使用某个宽度; 请在浮动内容的同一侧上使用一个页边距
* 由于将浮动内容从文档的流动中取出, 所以必须清除另一个容器中的某个浮动内容, 以使父容器正确地包围它
第一步是添加第三列。 与第一列相同, 第三列将是浮动的, 但这次是靠右。 打开在本文开始处链接到的这些示例文件中的 starter_files 文件夹内包含的 index.htm 文件。 使窗口处于“拆分”视图, 将光标置于“设计”视图部分中的导航 div 中。在窗口底部的标签选择器中, 您将看见到此 div 的路径: <body> <div#holder> <div#nav> <p>。单击 <div#nav> 并单击键盘上的向右箭头。 如果仔细查看“代码”视图, 您将看到焦点刚刚已从 #nav div 内部移动到 #nav 和 #content 之间的空间中。在您的插入工具条的“布局”选项中, 单击“插入 Div 标签”图标。 在出现的“插入 Div 标签”对话框中 (请参见图 2), 向下移动到 ID 字段并键入 news。
图 2. “插入 Div 标签”对话框
单击“新建 CSS 样式”按钮。 在“新建 CSS 规则”对话框中, 确保您已将“选择器类型”设置为高级; 将“选择器”设置为#news; 并将“定义位置”设置为 demo.css。 单击“确定”。您现在将为右侧列设置基本属性和值。 下面是我选择的设置:
背景:
Background color: #877D6C
Width: 144px Float: right Padding: top:15px right:8px bottom:8px left:8px Margin: (Same for all) 0px
单击“确定”。您将注意到“插入 Div 标签”对话框仍是打开的。 也在该对话框上单击“确定”。 现在, 您已完成了将控制您的全新右列的规则。 (请注意, 这可能也已通过使用我先前的教程中的说明在“代码”视图中完成。 我只是提醒您可以在 Dreamweaver 中使用的各种选项。)
查看“设计”视图部分并注意新的 div 在 #content div 的右上角中是如何存在的 (请参见图 3)。
图 3. 处于 #content 的右上角的新 div
当然, 当您在 div 中放置更多内容时, 它将显示为向下扩展页面, 比当前它显示的内容多。 上面的图 3 显示 #content div 中的文本在达到它所包含的文本的结尾处时仍将环绕 #news div。 出于本性, 它会仅清除浮动内容的文字部分。 由于浮动的 #news div 有背景色且 #content div 为白色, 这可能对您是不透明的。 为了便于图示, 请通过选择“查看”>“可视辅助”>“查看 CSS 背景” (这会将一个不同的随机颜色置于每个 div 中)。 在图 4 中, 您将看到 #content div 实际上是从 #nav div 转到 #holder div 的右侧。 #news div 仅是将 #content div 的文本推到一边。
图 4. 显示 #news div 的 CSS 背景视图仅是将 #content div 的文本推到一边
您显然需要像您在我的前一篇文章中处理左列一样处理新的右列。 您将赋予 #content div 一个右边距, 这样不管它实际向下扩展得有多远, 它都会保持远离 #news div 的区域。
请打开您的 demo.css 文档, 找到 #content 规则, 并从您当前有的内容更改该规则内的页边距声明:
margin: 0 0 0 165px;
更改为:
margin: 0 165px 0 165px;
提示: 若要更加简化此操作, 声明 margin: 0 165px; 也会得到相同的结果。 如果您对 CSS 速记不熟悉, 它读起来就像时钟一样。 像 margin: 0 0 0 165px; 这样的声明读作 top、right、bottom、left。 但是, 您甚至可以更加简洁。 使用这三个值, 如 margin: 0 165px 5px;, 它将读作 top、right、bottom, 而 left 值镜像 right。 最后, 如果仅使用两个值, 就像在 margin: 0 165px;中一样, 第一个值是 top 和 bottom 值; 第二个值是 left 和 right。 这仅可以用于它们是精确匹配时。
一旦更改了此声明, 您将注意到 #content 现在恰好与您的新列分开 (请参见图 5)。 如果您将“查看”>“可视辅助”>“CSS 布局轮廓”打开, 您可以看得最清楚。
图 5. #content div 的文本恰好与新列分开
而为了显示它现在实际上包含在它自己的区域中, 而非秘密地藏在 #news div 的后面, 我重新打开“CSS 布局背景”, 这样您可以看到真正发生的情况 (请参见图 6)。
图 6. CSS 布局背景可视辅助打开时的设计
注意: 您可能已首先将 #nav 或 #news div 置于文档的 XHTML 源代码中。 两者都可以。 我通常会首先放置我的导航以使它对于屏幕读者更容易预测。 (为了易于访问, 我通常还会在那里放置一个“skip nav”链接。)
很显然, 它看起来还不是很像列, 因为实际的 #news div 仍被压扁到右角中。 但现在您无疑已经为它开拓出一些很不错的空间。 也许我们只需要添加一些内容到该列中。
将两个较小 Lorem Ipsum 填充物文本段落从中间内容区域 (或您自己的自定义无意义内容) 复制出来并将它粘贴到 #news div 中。确保将该文本置于 P 元素中。 如果您复制的文本不是很多, 使右列变得比中间内容区域更长, 则此部分练习的效果最好。 由于黑色文本在暗背景上阅读起来有点难, 让我们快速将一个后代选择器添加到 demo.css 文件中, 该文件会通知 #news div 中的所有 P 元素使用白色呈现:
#news p {
color: #FFF;
}
提示: 我发现在 Firefox 中开发是最快的, 接着当我已完成大多数事情时, 请在 Internet Explorer (IE) 中预览。 创建两个特殊规则或声明来修复任何 IE 问题与尝试在符合标准的浏览器中做同样的事情相比要简单得多。
该是在浏览器中预览以查看您所得到的结果的时候了。 很显然, 您已得到了三个列。 描述左列的线看起来完全是沿着页面向下, 是吗? 那是我使用的一个小窍门。 通过将边框置于 #content div 的左边 (而不是 #nav div 的右边) 的 #nav 和 #content div 之间, 我创建了一个列的视觉效果。 div 与收缩包装很相似, 在收缩包装中它仅会扩展得与其中的内容一样远。 因此, 像这样的小窍门仅适用于这样的站点: 在该站点上您知道您在中心 div 中拥有的内容总是要比在左导航 div 中拥有的内容多。是的, 对于较小的站点, 这样的小窍门经常会很有用。
但是, 如果右列使用背景色而不是边框, 又会如何呢? 很明显, #news div 不会扩展到内容区域的底部 (请参见图 7)。 您无法使用相同的方法来使它看起来扩展了。 因此, 很明显, 此处您没什么可做的。 或者有吗?
图 7. #news div 尚未扩展到内容区域的底部
您是否年纪足够大而记得家中的人工画是在什么时候流行的? 也许我要自己确定其年代。 但我记得何时流行使用绘画技术来使不存在的某个窗口 (或者带有一个花瓶的桌子, 或者各种各样的其他趣味效果) 看起来就在那里。 您将做一些与此处相似的事情。 仅仅是不使用画图, 而使用图像。可以在 Fireworks 或 Photoshop 中完成教程的这一部分。 或者您可以使用在本文开始处链接到的这些示例文件中的 finished_site 文件夹内的图像文件夹中包含的已完成的 faux.gif 图像。 我将使用 Fireworks。
由于控制网页宽度的框的宽度是 760 像素, 请创建相同宽度的画布。 这将是一个重复的分割, 因此您可以保持它的高度为大约 10 像素。 我那么喜爱 Fireworks 的一个原因是其矢量能力。 选择您的左列分割线的颜色 (#877D6C) 并从距离左侧 165 像素的位置画一条线。 如果有一点儿偏离, 您只需在“属性”检查器的“X”输入中键入 165 就可以精确放置它。 现在, 通过使用您的右列的颜色 (这种情况下也是 #877D6C ), 绘制一个 160 像素宽的矩形并将它放置到画布的右侧很远处。 在优化调色板中选择 gif, 并将该图像作为 faux.gif 导出到您的站点定义的图像目录中。
提示: 轮廓线和背景颜色使用的值过去可以在从 160 像素 (外部列的实际宽度) 到 165 像素 ( #content div 上页边距的数量) 之间的任何位置变化。 我选择了精确匹配我先前在设计中显示的内容, 因此我使用了左边的 #content div 的页边距数量 (由于边框被置于 #content div 上) 和右边的右列的宽度 (由于背景被置于右列本身上)。
现在您将施展您真正的魔法。 转到您的 CSS 文档, 找到 #holder div, 并将此值添加到您的背景属性中:
background: #FFFFFF url(images/faux.gif) repeat-y;
提示: 如果您对该值的重复 y 部分不熟悉, 则只需告诉图形在 y 轴上 (或从上到下) 平铺。
在您的浏览器中刷新页面以获得完全的效果。 注意列现在如何达到页面的完全宽度 (请参见图 8) ? 事实上, 他们正好是通过页脚运行的 (如果您删除了页眉的颜色, 则您也会在那里看到它们)。 这是因为您已将图形置于 #holder div 上。未声明自己的背景颜色的任何元素将显示此图像。 在某些设计中, 您可能选择保持 #footer 透明且只赋予它与 #content div 匹配的页边距, 保持文本正好处于中心。 其他时候, 正如我一会要阐述的, 您将赋予它一个不同的背景颜色。 现在, 很明显您可以从 #news div 删除边框和背景, 并从 #content div 删除 border-left。不再需要它们。
图 8.这些列现在达到页面的完全宽度
平滑页脚
将您的光标置于窗口的“设计视图”部分中的 #footer div 中。 转到 CSS 面板的“规则”窗格并选择 #footer (或在窗口底部的标签选择器上选择它)。 单击 CSS 面板的“属性”窗格中的“添加属性”。 键入 Background 或从弹出菜单选择它并单击 Enter。 您的光标将移动到值部分, 键入 #FFF 并再次点击 Enter (Return)。 如果您的 CSS 页面像我的一样仍是打开的, 您将需要在更改在“设计”视图中出现之前或在您的浏览器中预览时保存它 (请参见图 9)。
提示: 如果您不确信十六进制 (hex) 颜色速记是如何工作的, 请使用下面的键。 具有三个相同字符的颜色值被简单加倍。 #FFFFFF 变为 #FFF; #000000 变为 #000。 这是因为颜色方案的首两个字符代表红色, 接下来的两个代表绿色, 而最后的两个代表蓝色部分。 从而, 像 #00FF00 或 #993366 那样的十六进制数就会分别变为 #0F0 或 #936。 具有不相同的 RGB 字符的十六进制颜色, 像 #822B56 或 #ADADAD, 不能缩写。
图 9.将背景属性添加到 #footer div 中以更正页脚
关于浮动和清除的提醒
尽管我在本文开始处回顾了一些关于浮动的技巧, 我仍希望以可视方式提醒您其中几个。 出于所有实际的目的, 会将一个浮动内容从文档的流动中取出。 而父容器“看”不到它。该父级将允许它流出其容器的底部。 对于父级的这种“不可见性”可能提醒您某个绝对定位的元素。 但存在一个重要的差异。
一个绝对定位的元素开始于其父级的左上角 (或最后一个定位的元素)。 浮动内容开始于您在页面的流动中放置它的位置。 但是, 两者都看不到; 因此, 未说明它们的长度。 对于绝对定位的元素, 无论您做什么都不能强制它被看到。 对于浮动内容, 则可能看到。 这就是清除的目的。清除浮动内容有各种各样的方式, 但我使用的方法涉及在关闭父元素之前添加一个清除元素, 或者在 #footer div 上放置一个 clear:both 。可以将我在上一篇文章中讨论的 .brclear 类 (而且它在您的页面的 CSS 代码中) 放置到一个 div 或一个 break 元素上。 通常, 我使用一个 div, 但存在一些 break 更适合的情况 (通常涉及浏览器中一些 buggy 内容)。 发生这种情况时, 我使用此:
<br class="brclear" />
如果这不是完全清楚, 让我们看一下视频。 需要使用 Internet Explorer 之外的浏览器看此视频。 这是因为 Internet Explorer 会 (当然是错误地) 自动围住浮动内容 (请尝试一个基于 Mozilla 的浏览器)。
在“代码”视图中, 在 #content div 的底部, 突出显示大量文本和 <div class="brclear"></div>。右键单击并选择“选择”>“应用 HTML 注释”。 保存页面。 这将模拟某个页面, 该页面的侧列较长, 而主内容区域较短。 在基于 Mozilla 的浏览器中预览该页面来查看结果。
您将注意到右列内容盖过页脚并超出页面的末尾 (请参见图 10)。 #holder div 不知道它需要包含它。 这根本没有什么吸引力。 您可能注意到此人工 pas 的另一个小问题。 看看 #news 内容的白色文本所穿过的 #footer 。 #footer 有一个白色背景。 出于所有实际的目的, 该文本现在在该区域中不可见。 对于背景为白色的页面, 这可能是一个实际的问题。 事实上, 在那样的情形下, 您可能认为该文本完全丢失或被切除掉, 而实际上该文本只是流出了其边界之外。
图 10.由于不清除浮动内容引起的文本溢出
返回到 Dreamweaver 中并仅取消注释清除的元素 (现在保持额外的文本被注释掉)。 在浏览器中刷新您的页面的预览。 注意, 甚至主内容区域内容较少时, #holder 是如何包含浮动的列的 (请参见图 11)。 包含整个设计, 且额外的空间在 #content 区域中, 而不是在 #holder 底部的下面。这是要记住的非常重要的一点。
图 11.文本溢出已由清除浮动内容所更正
我要以可视方式向您阐述的另一件事情是浮动内容下降。 先前我曾讨论过, 如果将一个元素置于 #content 区域的内部, 且它比 #content 区域可以包含的空间大, 则该部分将下降到浮动内容的下方。我创建了一个称为 float_drop.jpg 的图像, 您可以在示例文件的图像目录中找到它。在 #content div 中在页面顶端的附近插入它。现在请在 Internet Explorer 中查看该页面。 IE 是阐述此奇怪行为的唯一浏览器, 但由于大多数人仍使用它, 所以您必须意识到它。
让我们来计算一下。 由于我们的总体 #holder 是 760 像素宽, 而 #content div 上的页边距每个 165 像素 (总计 330 像素), 所以在 #content div 中您总计有 430 像素的可用空间。由于左列占据 165 像素的水平空间, 该图像下降直到右列文本结束, 因此它可以获得它所需的额外的 20 像素。 其他浏览器遵守这些列大小并只是将该图像重叠到右列 (右列视觉效果可能也不好) 上。 图 12 在 Internet Explorer 中显示该页面。
图 12.在 Internet Explorer 中引起浮动内容下降的图像
您可能注意到, 由于这个问题, 还将 Internet Explorer 中的 #holder 扩展超出指定的宽度 20 像素。由于您正使用人工技术创建列, 您会看到难看的白色背景在右边露出来。 当然, 删除该背景色将去掉某些情形中的难看外观, 但 #holder 仍被布置得更宽, 这无疑会在其他布局中给您带来麻烦。
Dreamweaver 自己的呈现越来越倾向于 Internet Explorer。 随着每个版本的推出, 它也更接近 Web 标准。这意味着有时您将看到更多的是混合呈现, 比如您在这种情形下看到的内容。 Dreamweaver CSS 布局背景视图将使您更好地查看 #holder div 真正发生的事情 (尽管它不会向您显示浮动内容下降)。
图 13 显示 holder 是如何被加宽的。 由于 Dreamweaver 中的背景色稍微有一点透明, 您将注意到该图像实际上在增加 #content div 的宽度。右 #news div 继续在正确的位置开始, 而 #content div 保持其 165 像素的页边距, 因此总体上该布局更宽。 Voilà—您的额外空间! 避免将大元素放在其中, 且您可以避免这样做。 (这可能意味着如果您让客户使用 Contribute 更新他们自己的站点, 您将需要训练他们如何正确调整他们的布局的大小。) 删除图像并取消注释文本以继续下一部分。
图 13.宽图像切断 #holder div
更多人工图像技术
让我们在关闭此教程之前再学习一项技术。 我不打算为您创建一个显赫的设计, 那是您的事。 我要向您展示一个结构概念的证明, 您可以从那里进行创建。 你我都明白, 我们在顶部有一个整齐的页眉: 三个列和一个页脚。但是您的客户和网上冲浪者不需要认识到它是那样“四四方方的”。 为什么不使您的右列看起来向上扩展到顶部页眉区域中, 好像它重叠一样? 仿造它们是很简单的。
再次, 我打开了 Fireworks 并创建了一个 162 x 43 像素的画布。这样我有了比我的第三列更多的接触空间, 因此我可以进行工作。 出于图解目的, 我使用了与该列颜色相同的“斜面矩形”自动整形并将它设置为 160 像素宽。 您可以使用您喜欢的任何形状来完成您的列的顶部, 只是要确保它最终有 160 像素宽以获得完美匹配。 将它作为透明 GIF 导出为文件 dec_top.gif, 导出到您的图像目录中, 将暗面设置为页眉颜色 (对于此例, 就是 #DCCBAC)。或者您可以使用在本文开始处链接到的这些示例文件中的 finished_site 文件夹内的图像文件夹中包含的已完成的 dec_top.gif 图像。
现在回到 Dreamweaver。 在您的 CSS 文档中, 看看 #header div。当前, 仅存在一个背景色:
background: #DCCBAC;
让我们通过在顶部放置 URL 值在那里添加人工列, 设置它不重复, 并将它放置到该 div 的右下部。使用此技术, 不管页眉有多高 (如果某人在网上冲浪时, 将文本大小设置为一个较大的默认大小, 该页眉的高度也会增加), 它将看起来与右列是连在一起的并重叠该页眉。 将背景值更改为下列值:
background: #DCCBAC url(images/dec_top.gif) no-repeat bottom right;
刷新浏览器并看看右上部区域 (请参见图 14)。 看看列是如何看起来无缝地向上移动的? 想像一下这些可能的事情!
图 14.将人工列添加到顶部
您可以使用一种相似的技术来使页眉看起来有一个曲线形的底部, 但实际上您是将背景图像置于 #content div 上。或者您可以在某个元素上设置顶部和底部阴影或渐变, 而不指定高度, 并使它看起来可拉伸至任何高度。 “但是, ”我听到您说, “我不能将两个背景图像置于一个元素上。” 是的, 但是每个优秀的客户端开发人员将有他们的方式来进行创新的设计工作。 由于空间限制, 某些样式设置小窍门以及一些创新的导航构想将必须等待另一个教程进行介绍。
如果您需要 Hack IE
存在这样的可能性, 即使在这种布局中您没有任何 Internet Explorer 错误, 您也有可能通过某个元素或在您自己的布局中添加的一些样式设置遇到它们。 Position is Everything* 和 Community MX* 已经记录了许多这些 IE 错误, 但在即将推出的 IE 7 版本中, 对于其中许多错误, 会有一个简单的修复。 您运行时遇到的许多错误是基于 IE 要求某个元素有“hasLayout”这一事实 (您可以在由 Ingo Chao 撰写的这一篇出色文章*中阅读关于此仅 IE 属性的详细信息)。 当前, 对于此问题的修复最好是使用另一个专有 IE 属性 - 缩放。 放置在 IE 条件注释 (或随 IE 条件注释带到该页面中的样式表) 中的这一属性将修复多数 IE 错误。 放置在 IE 条件注释中, 如果您需要, 它还将允许您的页面通过验证。
<!--[if IE]>
<style type="text/css">
#content { zoom: 1; }
</style>
<![endif]-->
注释以更加清晰
这次我要向您介绍一个我发现对我的 CSS 开发特别有帮助的技巧: 注释。我在 XHTML 和 CSS 中都使用它。 在 XHTML 中, 我在关闭每个 div 之前放置一条注释。这不仅使得开发过程中关闭 div 更加容易, 而且在以后某个日期我返回到站点工作时, 它还会给我一个真正的提升。 我在关闭 div 之前而不是之后放置注释的原因是, 如果我删除整个 div, 会将注释随之删除。 如果我在关闭 div 之后放置注释, 则它会留在文档中, 而以后欺诈注释会变得相当令人混淆。 我使用下列内容:
<!-- close of news --></div>
我利用注释的另一个位置是在组合我的 CSS 的通用部分以及具有某些关于它们的不同内容的任何选择器或声明时。 即, 我可能以后忘记的任何独特的事情。 在对那个站点编码之后您又编码了 14 个新的站点, 您还会记住为什么一个选择器或值会在您的样式表中吗? 这根本无法想象。 请利用注释来提醒您自己。
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
