网页框架布局设计_实用的网页设计-框架和框架用法介绍

网页框架布局设计

Ah, frames. We hated them when Netscape first offered them up around 1995; we deplored them when they became all the rage for a few short years; we wish they would go away and never darken our displays again. Well, maybe.

啊，帧。 当Netscape在1995年左右首次提出要约时，我们讨厌他们。 当他们在短短几年内风靡一时时，我们对他们感到遗憾； 我们希望它们能消失并且不再使显示变暗。 也许会。

The debate on frame usage has been raging for eight years now, and while most experts come down solidly against their use in most instances, I won’t continue the debate here. I will say that in my experience on the Web, 90% of the sites that still use frames don’t use them well; I’m still a bit surprised when I find a site that works better with a frame than not.

关于框架使用的争论已经持续了八年之久，尽管大多数专家在大多数情况下都坚决反对使用框架，但是我在这里不再继续讨论。 我会说，根据我在网络上的经验，仍然有90％的网站仍在使用框架，它们使用得不好； 当我找到一个比框架更好的网站时，我仍然感到有些惊讶。

Most people who have come late to Web design or are just learning it now get told, "Frames? Forget ’em! You won’t design a page in frames, they’re hard to get right, and it’s a waste of time for you to learn them." Now, there’s plenty of truth in this statement. It’s not a necessity to learn frame design: many professional Web designers have designed hundreds of elegant, functional sites without a single frame and will go right on designing without giving frames a thought. The percentage of framed sites out there is dropping steadily, especially now that more and more designers are moving towards CSS-based design, which essentially renders the entire concept of frames irrelevant. Note that while HTML 4 includes frames as part of the official code, HTML 4.01 Strict does not support frames, relying instead on style sheets.

大多数迟到Web设计或只是学习Web设计的人现在都会被告知：“框架？忘了他们！您不会在框架中设计页面，他们很难正确地进行设计，而这浪费了时间。你学习它们。” 现在，这句话有很多道理。 学习框架设计不是必需的：许多专业的Web设计师已经设计了数百个没有单个框架的优雅，实用的网站，并且会在设计时不加思考地进行。 框架站点的百分比正在稳步下降，尤其是现在，越来越多的设计师正在转向基于CSS的设计，这从根本上使框架的整个概念无关紧要。 请注意，虽然HTML 4包含框架作为官方代码的一部分，但HTML 4.01 Strict不支持框架，而是依赖样式表。

For a nice compilation of the pros and cons of frames, see Tom Chaplin’s SitePoint article on the subject. It’s a few years old, but still pertinent.

有关框架的优缺点的很好的汇编，请参阅Tom Chaplin的关于该主题的SitePoint文章 。 它已有数年历史，但仍具有针对性。

There are times when a knowledge of frame design is necessary, however. Perhaps your business site uses frames and you’re constrained to operate within company parameters. Perhaps you’ve got a client, or an aunt, who is mad for frames and insists you use a frame-based design. Or maybe you’ve come up with a concept for a design that actually works better in a frame (unlikely as that sounds, it does happen).

但是，有时需要了解框架设计知识。 也许您的企业站点使用框架，并且您不得不在公司参数范围内操作。 也许您有一个客户或一个姨妈，他们为框架而生气，并坚持使用基于框架的设计。 或者，也许您想出了一个实际上可以在框架中更好地工作的设计概念(听起来不太可能发生)。

Frames have their uses, infrequent though they are. So I’ve decided to provide some info on frame design for the novice or intermediate Web designer — some how-tos, along with some observations, caveats and warnings along the way. Frame technique is not that hard, though it’s tricky, and it is worth learning if for no other reason that you’ll know what all the fuss is about.

框架有其用途，尽管很少使用。 因此，我决定为新手或中级Web设计人员提供一些有关框架设计的信息-某些操作方法，以及沿途的一些观察，警告和警告。 帧技术并不难，尽管它很棘手，但如果没有其他原因您会知道所有麻烦的话，则值得学习。

基本设计 (Basic Design)

Frames disrupt the entire fundamental concept for the Web: a large collection of individual pages, linked together with hypertext. …Frames violate too many accepted Web standards to be a worthy information delivery system. — Ross Shannon

框架破坏了Web的整个基本概念：大量单独页面的集合，这些页面与超文本链接在一起。 …框架违反了太多公认的Web标准，因此无法成为有价值的信息传递系统。 罗斯·香农

Frames: just say no. — Jakob Nielsen

镜框：只是说不。 —雅各布·尼尔森(Jakob Nielsen)

It’s hard to argue with those statements. Frames do disrupt the flow of the Web. Ideally, the idea is to surf unencumbered from site to site and page to page without any problem navigating from one location to another. Point, click, peruse the content, point, click, go somewhere else.

这些说法很难争论。 框架确实会干扰Web的流动。 理想情况下，该想法是从一个站点到另一个站点以及从一个页面到另一个页面畅游无阻，而从一个位置导航到另一个位置则没有任何问题。 指向，单击，细读内容，指向，单击，转到其他位置。

The Web is inherently fluid in nature; frames disrupt that paradigm by adding static structure to Web pages. The fluid paradigm shifts the moment you enter a framed page. Content is displayed inside a "corral" of frames, locked inside a barricade of code. Navigation is disrupted; the usual "click in, click out" methodology no longer works. In some older browsers like Netscape 2, even the BACK button didn’t always get you out of a framed page. Thankfully, that little irritant is no longer a factor, since browsers that don’t handle frames well have all but disappeared from the pool of browsers currently in use, with the notable exception of Lynx, which displays the content of the NOFRAMES page and provides labeled links to the framed content.

网络本质上是可变的。 框架通过向网页添加静态结构来破坏该范例。 流畅的范式改变了您进入带框页面的时间。 内容显示在框架的“围栏”中，并锁定在代码屏障中。 导航中断； 通常的“点击，点击”方法不再起作用。 在某些较旧的浏览器(如Netscape 2)中，即使“返回”按钮也不总是使您脱离框架页面。 幸运的是，这种刺激性不再是一个因素，因为不能很好地处理框架的浏览器几乎全部从当前使用的浏览器池中消失了，Lynx例外，它显示了NOFRAMES页面的内容并提供了带标签的指向框架内容的链接。

Bookmarking doesn’t always work; instead of marking the specific URL of the framed content, you’ve just bookmarked the frameset, which may have a different URL and may not contain the same content upon your return. Copying a frame’s URL for use as a hyperlink in another page may not send a visitor to the proper page, since the framed page’s URL doesn’t display; only the frameset URL displays. Printing a framed page doesn’t always work well. Cookies don’t track frameset pages well. Framed content displays quite poorly on smaller screens such as notebooks and handhelds.

书签并非总是有效。 您无需标记框架内容的特定URL，而只是将框架集添加为书签，该框架集可能具有不同的URL，并且在返回时可能不包含相同的内容。 复制框架的URL以用作其他页面的超链接，可能不会将访问者发送到正确的页面，因为框架页面的URL不显示。 仅显示框架集URL。 打印带框的页面并不总是能正常工作。 Cookies无法很好地跟踪框架集页面。 带边框的内容在较小的屏幕(如笔记本电脑和手持设备)上的显示效果很差。

Probably the biggest irritant of frames is the occasional framed page that won’t let you out once you’ve entered; it insists (whether because of poor design or intent) on displaying every other page you go to within its own frameset. This last is a technically defensible choice for some commercial sites that want to keep their own navigational setup or advertising content always in front of visitors, but it’s not a good choice. Trapping visitors within your site’s frames is the best way to aggravate them into leaving your site as quickly as possible — even if that includes closing the browser completely and starting to surf from scratch.

可能是最大的框架刺激因素是偶然的带框架页面，一旦进入页面就不会让您失望。 它坚持(无论是由于设计不良还是出于意图)在您自己的框架集中显示您要访问的所有其他页面。 对于某些希望将自己的导航设置或广告内容始终保持在访问者面前的商业站点，这是一个技术上可行的选择，但这不是一个好选择。 在网站框架内诱捕访客是使他们尽快离开网站的最好方法，即使这包括完全关闭浏览器并从头开始冲浪也是如此。

There are also the considerations of additional server load and page maintenance. A framed page often takes up more server space than a non-framed alternative, and those frames also add load time to the page. A bunch of framed pages can be more difficult and time-consuming to modify. And when you create a new frameset, you’ll have a minimum of two (with just one frame — more if you have more frames) hits to the server from a single visit. With more framesets, you generate more hits to the server without generating additional page views. This can cause problems if you can accept a limited amount of traffic to your site; it can also can play havoc with your attempt to keep track of site visitations.

还有其他服务器负载和页面维护的注意事项。 带框架的页面通常比无框架的页面占用更多的服务器空间，并且这些框架还增加了页面的加载时间。 一堆带有框架的页面可能更难修改，而且耗时。 并且，当您创建新的框架集时，一次访问服务器的命中次数最少为2(只有一帧，如果有更多帧，则为更多)。 使用更多框架集，您可以对服务器生成更多匹配，而无需生成其他页面视图。 如果您可以接受有限的网站访问量，则可能会导致问题。 它还可能会破坏您对网站访问的跟踪。

Now, there are some situations where frames represent a reasonable solution. One is the presentation of a long document divided into chapters or blocks. A simple, workable solution is to build a frameset with two columns, where the left side offers navigational links, while the right side displays the actual chapters of content. Clicking on a link in the left-hand frame causes a particular chapter to display in the right-hand frame. This avoids having a horribly long document that may take too much time to display, and displays the content in manageable chunks. Is using a frameset the only solution to such content? Of course not, but it is one feasible method.

现在，在某些情况下框架代表了合理的解决方案。 一种是将长文件分为几章或几节的介绍。 一个简单可行的解决方案是用两列构建框架集，其中左侧提供导航链接，而右侧显示内容的实际章节。 单击左侧框架中的链接会使特定章节显示在右侧框架中。 这样可以避免显示冗长的文档，而该文档可能要花费太多时间才能显示，并且以可管理的块形式显示内容。 使用框架集是此类内容的唯一解决方案吗？ 当然不是，但这是一种可行的方法。

A frameset used with an outsourced shopping cart is another useful possibility. If you use separate frames for your banner or logo, navigation, and content, and incorporate the shopping cart in the content page, even if the outsourced shopping cart doesn’t use your logo or navigational material, your site still works well and has the proper look and feel.

与外包购物车一起使用的框架集是另一种有用的可能性。 如果您对横幅或徽标，导航和内容使用单独的框架，并且将购物车合并到内容页面中，即使外包的购物车未使用徽标或导航材料，则您的网站仍然可以正常运行并具有适当的外观。

The point is, frames are considered bugbears of Web design not because they are useless, but because they’ve been so horribly misused in the past (and the present, and will probably be well into the future). Remember, the basic idea behind a frame is to keep some information permanently visible while viewing other information that is subject to change. When this works well, it allows the viewer to keep, say, a navigational window, a table of contents, an advertisement, or a title bar (or a combination of these elements) in place while they access different areas of the site. For commercial sites, this can be useful for keeping your company’s logo or navigation, or an advertisement in front of the viewer at all times. For non-commercial sites, this is probably most useful for keeping navigational or other information always handy, as opposed to placing a menu on each page (the choice of most designers, by the way).

关键是，框架被认为是Web设计的负担，不是因为它们没有用，而是因为它们在过去(和现在，以及很可能在将来)被严重滥用。 请记住，框架背后的基本思想是在查看其他可能更改的信息时，使某些信息永久可见。 如果效果良好，则允许观看者在访问站点的不同区域时将导航窗口，目录，广告或标题栏(或这些元素的组合)保留在适当的位置。 对于商业站点，这对于始终将公司的徽标或导航或广告保持在查看者面前非常有用。 对于非商业站点，这对于使导航或其他信息始终保持方便最为有用，这与在每个页面上放置菜单相反(顺便说一下，大多数设计师的选择)。

At its worst, you can get locked into "frame hell," where badly designed or deliberately constrictive framesets lock you into a site with no way out. Back buttons don’t work like they ought to, navigating through the site itself is nightmarish, the frames replicate themselves one inside another, and even typing a brand new URL in the address bar opens the new site inside the old frame. Now that’s annoying.

在最坏的情况下，您可能会陷入“框架地狱”，在这种情况下，设计不良或故意限制框架集会使您无法进入站点。 后退按钮无法正常工作，浏览网站本身是噩梦般的，框架相互复制，甚至在地址栏中键入全新的URL也会在旧框架内打开新站点。 现在这很烦人。

If you’re going to use a frameset, make sure your content lends itself to framed display. Is there another way to display it? And think about your audience. While even though almost everyone now uses frames-capable browsers, some people don’t like frames and run like scalded cats when a frames site appears on their screen. For these people, frames are like Kryptonite to Superman. You won’t get far arguing with them; your best bet is to give them a <noframes> alternative, or just design your site without frames from the outset.

如果要使用框架集，请确保您的内容适合框架显示。 还有另一种显示方式吗？ 考虑一下你的听众。 尽管现在几乎每个人都使用支持框架的浏览器，但是当屏幕上出现框架站点时，有些人不喜欢框架，像烫伤的猫一样奔跑。 对于这些人来说，镜框就像是超人的K石。 您不会和他们争论不休； 最好的选择是为他们提供<noframes>替代方案，或者只是从一开始就设计没有框架的网站。

Let’s say you want to build a site using frames, for whatever reason. Okay, how do you do it?

假设您出于某种原因想要使用框架来构建网站。 好吧，你怎么做？

Note: I usually advocate trying the code out as we go along in your own HTM