网页框架布局设计
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设计人员提供一些有关框架设计的信息-某些操作方法,以及沿途的一些观察,警告和警告。 帧技术并不难,尽管它很棘手,但如果没有其他原因您会知道所有麻烦的话,则值得学习。
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
alternative, or just design your site without frames from the outset.
如果要使用框架集,请确保您的内容适合框架显示。 还有另一种显示方式吗? 考虑一下你的听众。 尽管现在几乎每个人都使用支持框架的浏览器,但是当屏幕上出现框架站点时,有些人不喜欢框架,像烫伤的猫一样奔跑。 对于这些人来说,镜框就像是超人的K石。 您不会和他们争论不休; 最好的选择是为他们提供
替代方案,或者只是从一开始就设计没有框架的网站。
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 HTML code editor. You should do this here, too, but you’re going to have to construct several HTML files to serve as the frame source files, otherwise you won’t see anything. Probably the easiest way to do this is to create a few simple HTML files with no content and different
bgcolor
attributes, just so something will show up.
注意:通常,我们建议您在自己HTML代码编辑器中尝试代码。 您也应该在这里执行此操作,但是您将必须构造多个HTML文件作为框架源文件,否则您将看不到任何内容。 可能最简单的方法是创建一些没有内容且具有不同的
bgcolor
属性的简单HTML文件,以便显示一些内容。
To use the example code below, try constructing the following pages: your index.html page, which will be your frameset page, and six content pages:
要使用下面的示例代码,请尝试构建以下页面:index.html页面(将是框架集页面)和六个内容页面:
None of these pages needs any text or graphical content unless you really want to put some content in them. Just give them different background colors so they will differentiate themselves on your screen.
这些页面都不需要任何文本或图形内容,除非您确实要在其中放置一些内容。 只需给它们提供不同的背景颜色,这样它们就可以在屏幕上与众不同。
First off, you have to use the proper frames DOCTYPE. For HTML 4 documents, it’s:
首先,您必须使用适当的框架DOCTYPE。 对于HTML 4文档,它是:
This is a variant of the HTML 4 Transitional doctype.
这是HTML 4 Transitional doctype的变体。
For XHTML 1.0 documents, the doctype is:
对于XHTML 1.0文档,文档类型为:
Remember, since earlier versions of HTML don't officially support frames, if for some reason you haven't disembarked from the Wayback Machine and are still writing pages to be viewed in HTML 3.2 or earlier, you don't need a specific doctype to write framed pages. Most modern browsers will support the frames and their content anyway, but don't expect 100% compliance by any means.
The starting point for any framed set of Web pages is the
tag, which usually uses the
src
attribute to point to a particular HTML document.
The tag defines the content of a single framed page. The example above assumes that you want to have a file called mainpage.html displayed within the frame. The only required attribute for the
tag is the src attribute, which obviously tells the browser what file to display inside the frame. So far so good.
标记定义单个框架页面的内容。 上面的示例假设您要在框架中显示一个名为mainpage.html的文件。
标记唯一需要的属性是src属性,该属性显然告诉浏览器在框架内显示什么文件。 到目前为止,一切都很好。
You can also control the appearance of scrollbars inside the frame with the scrolling attribute:
您还可以使用scrolling属性控制框架内滚动条的外观:
The default value for this attribute is auto, which lets the browser decide whether or not scrollbars are to be displayed. The other two values are yes and no, which are pretty self-explanatory.
此属性的默认值为auto,它使浏览器可以决定是否显示滚动条。 其他两个值是“是”和“否”,这很容易解释。
There is no closing tag.
没有结束标记。
You should not include any tag information in the mainpage.html file, since the file represents a larger document. Everything on this page should be included within the
tags.
您不应在mainpage.html文件中包含任何标记信息,因为该文件表示较大的文档。 此页面上的所有内容都应包含在
标记内。
Now you need to construct your frameset page. This page, usually called index.html for obvious reasons, contains the header information for the entire site as well as the tags that construct the skeletal design for the site. Here’s a basic example, leaving out such necessities as
DOCTYPE
s and tags:
现在,您需要构建框架集页面。 出于明显的原因,该页面通常称为index.html,包含整个网站的标题信息以及构成该网站的骨架设计的标记。 这是一个基本示例,省略了诸如
DOCTYPE
和标签之类的必需品:
Frames Document
Note that there aren’t any tags in this document. The
tags take their place (placing
BODY
code before the tag causes the frameset to be ignored). The
tags have one necessary attribute,
ROWS
or COL
(umn)S
. The example above uses percentages to divide the available display space into two equal, horizontal areas. The COLS
attribute will do the same thing, but divide the available space into two equal, vertical areas:
请注意,此文档中没有任何标签。
标签取代它们的位置(在
标签之前放置
BODY
代码会导致忽略框架集)。 标签具有一个必要的属性,即
ROWS
或COL
(umn) S
。 上面的示例使用百分比将可用显示空间划分为两个相等的水平区域。 COLS
属性将执行相同的操作,但是将可用空间划分为两个相等的垂直区域:
A lot of Web designers like to divide their pages into three vertical columns, with the two outside frames being narrower than the center column, which will contain the main body of information (this layout emulates the traditional three-column style of site design). If you want to do this, try something like:
许多Web设计师喜欢将页面分为三个垂直列,两个外部框架比中心列窄,其中包含信息的主体(此布局模仿传统的三列样式的网站设计)。 如果要执行此操作,请尝试以下操作:
where the left- and right-hand columns are 100 pixels wide, and the larger center takes up the rest of the display space. As always, I recommend sticking with percentage widths (or heights) whenever possible, as people use a variety of display sizes. Note that the asterisk in the center of the above code simply means something like "the rest of the display." If you wrote it like so:
左右两列的宽度为100像素,较大的中心占据了其余显示空间。 与往常一样,由于人们使用各种显示尺寸,因此我建议尽可能使用宽度(或高度)百分比。 请注意,以上代码中心的星号仅表示“显示的其余部分”。 如果您这样写:
you would have a set page width of 700 pixels, which would leave a lot of display real estate unused for our friends with bigger displays. You can also organize your display in relative terms, which specifies the size of the frames relative to other frames. This example shows two columns, where the one on the right is twice the width of that on the left:
您将页面宽度设置为700像素,这会给我们的较大显示屏的朋友留下很多可用的显示空间。 您还可以按照相对的术语来组织显示,该相对的术语指定框架相对于其他框架的尺寸。 本示例显示了两列,其中右边的一倍是左边的两倍:
The *
is simply a placeholder. The above code tells the display, "cut the display into two columns, and make the right side twice the size of the left."
*
只是一个占位符。 上面的代码告诉显示屏,“将显示屏分成两列,并使右侧的大小是左侧的两倍”。
If the ROWS
attribute is not set, the columns extend to the entire length of the page. If the COLS attribute is not set, the rows extend to the entire width of the page. If neither attribute is set, the frame takes up the exact area of the browser display — and what’s the use of that? (Maybe there is a use for a frameset with no COLS or ROWS attributes, but I can’t think of one offhand. If you can, post it in the forums.)
如果未设置ROWS
属性,则列将扩展到页面的整个长度。 如果未设置COLS属性,则行将扩展到页面的整个宽度。 如果两个属性都未设置,则该框架将占据浏览器显示的确切区域,这有什么用? (也许可以使用没有COLS或ROWS属性的框架集,但我想不到一个有用的框架集。如果可以,请将其发布在论坛中。)
You can mix absolute, relative, and percentage measurements, but check them carefully to see how they display. In fact, you should carefully check all your column and row measurements to see how they display, and don’t forget to check the layout in different display sizes and different browsers. Here are three examples of mixing measurements, cribbed from the W3C page on HTML frames:
您可以混合使用绝对,相对和百分比测量值,但要仔细检查它们的显示方式。 实际上,您应该仔细检查所有列和行的度量以查看其显示方式,并且不要忘记检查不同显示尺寸和不同浏览器的布局。 这是在HTML框架的W3C页面上抄写的三个混合测量示例:
Here, you have a browser display divided horizontally in four separate areas. The first gets 30% of the display space. The second gets 400 pixels exactly. The other two split up the remaining turf between them, with the fourth area getting twice the amount of the third. If your display is exactly 1000 pixels high, unlikely as that is, the first row will get 300 pixels, the second 400, the third 100, and the fourth 200.
在这里,您有一个浏览器显示,水平分成四个区域。 第一个获得30%的显示空间。 秒精确地获得400像素。 其他两个将剩余的草皮分开,第四个区域的面积是第三个区域的两倍。 如果您的显示器正好是1000像素高(不太可能),那么第一行将获得300像素,第二行将获得300像素,第三行将获得100像素,第四行将获得200像素。
Now let’s put together a sample frameset page, using the example codes from above and a few more:
现在,使用上面的示例代码以及其他一些示例,来组合一个示例框架集页面:
Frames Document
This gives you the three-column display, with the two side columns restrained to 100 pixels each, and the center column used for the main content. Remember that in each column, if your content exceeds the available width, you get horizontal scrollbars. Nobody likes horizontal scrollbars. Again, play with the column widths so that you can avoid scrollbars as much as possible. Using rows in your framesets gives you vertical scrollbars, which are more acceptable.
这将为您提供三列显示,两个侧面列分别限制为100像素,中间列用作主要内容。 请记住,在每一列中,如果内容超出可用宽度,则会出现水平滚动条。 没有人喜欢水平滚动条。 同样,请使用列宽,以便尽可能避免滚动条。 在框架集中使用行会为您提供垂直滚动条,这更容易接受。
Remember, frames can be resized by simply moving the cursor over the border, waiting until it changes to a double arrow, and dragging the frame border to where you want it. Text will adapt itself to the change; graphics and other rigidly-sized content will not, and scrollbars will appear. Don’t want to let your visitors change your frames around? Use the noresize attribute (it has no values).
请记住,可以通过简单地将光标移到边框上,等待它变为双箭头,然后将边框拖动到所需位置来调整边框的大小。 文字将适应变化。 图形和其他固定大小的内容将不会显示,并且会出现滚动条。 不想让您的访客改变您的框架吗? 使用noresize属性(它没有值)。
Always include a section with the
tag for people without frames-compliant browsers (there are still a few out there). People with such browsers will only see the content displayed within the tags; the rest of us won’t see it at all, as our frames-compliant browsers won’t show it:
对于没有符合框架要求的浏览器的人,请始终在其中包含带有
标记的部分(那里仍然有一些)。 使用这种浏览器的人只会看到标签中显示的内容; 我们其余的人根本看不到它,因为符合框架的浏览器不会显示它:
Your browser won't handle frames. Go here for a better view!
Of course, this noframes.html file should include all the content contained in the frameset, in a design that uses – you guessed it — no frames. Two sites in one… hmmm, here’s an argument for designing without frames…
当然,在使用“您猜对了-没有框架”的设计中,此noframes.html文件应包括框架集中包含的所有内容。 两个站点合为一体……嗯,这是无框架设计的一个论点……
Place the
code just above the closing tag.
将
代码放在结束标记上方。
Screen readers and audio browsers have a tremendous amount of difficulty with framed pages. This is reason alone to use a
page, even if everyone who visits your page is using the latest in browser technology. Some screen readers can handle simple framesets, so this caveat is slowly becoming irrelevant, but there are plenty of folks out there using older screen readers that can’t handle frames at all. Maximum accessibility is a necessity, not an option to be considered casually.
屏幕阅读器和音频浏览器对带框架的页面有很大的难度。 即使每个访问您页面的人都在使用最新的浏览器技术,也仅凭这个理由就可以使用
页面。 一些屏幕阅读器可以处理简单的框架集,因此这种警告逐渐变得无关紧要,但是很多人使用的老式屏幕阅读器根本无法处理框架。 最大的可访问性是必要的,不是随便考虑的选择。
You can "nest" one frameset inside another for more complex layouts. Start off with something simple:
您可以将一个框架集“嵌套”在另一个框架集内以获得更复杂的布局。 从简单的事情开始:
Here we’ve got two columns, the right one twice as big as the left. By the names of the files, you can deduce that we’re going to use the left side for navigation and the right, larger column for content. Now, let’s get tricky with it:
在这里,我们有两列,右列是左列的两倍。 根据文件名,您可以推断出我们将在导航中使用左侧,在内容中使用较大的右侧列。 现在,让我们棘手:
This allows us to combine rows and cols together to create the classic "newspaper" site design: a horizontal "masthead" used as our title, and two columns, a narrow left-hand column for navigation and a wider right-side column for main content display. Note that the second
, the one with the columns, is completely contained within the second row of the first
.
这使我们可以将行和列组合在一起,以创建经典的“报纸”网站设计:以水平“标头”作为标题,以及两列,用于导航的左侧窄栏和用于主栏的较宽右侧栏内容显示。 请注意,第二个
(带有列)完全包含在第一个
的第二行中。
Want a two-column display with the larger, right-hand column divided into two rows? Just switch the rows and cols attributes above:
想要一个两列的显示器,将较大的右侧列分为两行? 只需切换上面的rows和cols属性即可:
If the left-hand column isn’t wide enough, just change the value of 20% to 30% — or whatever suits you.
如果左侧栏不够宽,只需将20%的值更改为30%-或任何适合您的值即可。
Margins
保证金
HTML 4 provides two margin control commands, marginheight and marginwidth. The first specifies, in pixels, how much space is to be left between the frame’s contents in its top and bottom margins. The second does the same for the left and right margins. There is no specific default.
HTML 4提供了两个边距控制命令,marginheight和marginwidth。 第一个以像素为单位指定在帧内容的顶部和底部空白处要保留多少空间。 第二个对左右边距执行相同的操作。 没有特定的默认值。
Borderless Frames
无边框框架
You can add certain attributes to your
tag to eliminate the frame borders, which display by default. Different versions of Netscape and Internet Explorer use different commands, so you may need all of the attributes below for proper site design, though the following code isn’t quite standard HTML 4:
您可以将某些属性添加到
标记中,以消除默认显示的边框。 不同版本的Netscape和Internet Explorer使用不同的命令,因此,尽管以下代码不是完全标准HTML 4,但您可能需要以下所有属性才能进行正确的站点设计:
Both Netscape and IE use the border
attribute, but it isn’t valid HTML 4. Its value should represent the border’s width in pixels.
Netscape和IE都使用border
属性,但它不是有效HTML4。其值应表示边框的宽度(以像素为单位)。
framespacing
frameborder
works with both Netscape and IE. Before HTML 4, the tag used different values for the two browsers: Netscape's values wereyes
andno
. IE's were1
and0
, which correspond to the yes and no of Netscape. The defaults areyes
and1
, which tells the border to draw the border. HTML 4 standardized the tag to use 1 and 0.If you're coding in HTML 4, use the
<... frameborder="0">
tag if you want to keep your frames borderless.Colored Borders
bordercolor
Like the previous tags, bordercolor isn’t official HTML 4, though it works with both Netscape and IE.
像以前的标签一样,bordercolor不是官方HTML 4,尽管它可以与Netscape和IE一起使用。
Margin Width and Margin Height
边距宽度和边距高度
Not too many people bother to specify these attributes, which also go inside the
tag. The tags determine the margin’s height and width in pixels. Try the tags to see if they work for you.
没有太多的人愿意指定这些属性,这些属性也位于
标记内。 标签确定边距的高度和宽度(以像素为单位)。 尝试使用标签,看看它们是否对您有用。
Interactive Frames
互动框架
It’s a good idea for framed pages to be able to interact with each other; that is, direct hyperlinks to the framed pages. You’ll need to use the name and target attributes to do this.
框架页面之间可以进行交互是一个好主意。 也就是说,将超链接直接指向框架页面。 您需要使用名称和目标属性来执行此操作。
Start out by naming your framed content pages:
首先命名框架内容页面:
Once you’ve named them, you can use the target attribute to direct hyperlinks to them:
命名它们后,可以使用target属性将超链接指向它们:
More content
If you place this hyperlink into the navigation.html page, when the user clicks on it, the mainpage.html file will be replaced by the moreinfo.html file on the right side.
如果将此超链接放置在navigation.html页面中,则当用户单击它时,mainpage.html文件将由右侧的moreinfo.html文件替换。
If you give a target that hasn’t been defined with the name attribution, the page will open in a new browser window.
如果您提供的目标名称尚未定义,则该页面将在新的浏览器窗口中打开。
But what if we want twenty different pages to cycle through the main content display? We could just write twenty different links in navigation.html all targeted to "frame2", or we could use a
tag in the section of the navigation.html page:
但是,如果我们希望在主要内容显示中循环显示二十个不同的页面怎么办? 我们可以只在navigation.html中编写二十个不同的链接,都以“ frame2”为目标,或者可以在navigation.html页面的部分中使用
标记:
This emulates having the target="frame2"
attribute in every hyperlink.
这模拟在每个超链接中具有target="frame2"
属性。
Special Target Commands
特殊目标命令
There are four special target commands, and they all begin with the wonderful, magical, mystical underscore: _
. Here they are:
有四个特殊的目标命令,它们都以奇妙的,神奇的,神秘的下划线开头: _
。 他们来了:
target="_blank"
– causes the URL to load into a new browser window.
target="_blank"
–使URL加载到新的浏览器窗口中。
target="_top"
– targets the URL to the entire browser window and wipes out all of the previous frames; used mostly when you’re linking from your own framed content to an outside site.
target="_top"
–将URL定位到整个浏览器窗口,并擦除所有先前的框架; 从您自己的框架内容链接到外部网站时,通常使用该词。
target="_self"
– loads the URL into the same window (the default; if you want this to occur, there’s no need to specify it in the code).
target="_self"
–将URL加载到同一窗口中(默认设置;如果您希望此操作发生,则无需在代码中指定它)。
target="_parent"
– loads the URL into the frameset’s parent window; unless you’re using nested framesets, this command works just like the _top
command. If you’re using nested framesets, then this command loads the URL into the frame that is the "next step up" — the parent window.
target="_parent"
–将URL加载到框架集的父窗口中; 除非使用嵌套框架集,否则此命令的工作方式与_top
命令相同。 如果您使用的是嵌套框架集,那么此命令会将URL加载到“下一步”(父窗口)的框架中。
marginheight
andmarginwidth
define the amount of space, in pixels, that falls between the margins and the content.The
name
attribute is used to target the frame.The
scrolling
attribute decides the condition of the scrollbars, when applicable. The values areon
,off
, andauto
, the default. Unless you have a specific need to turn scrollbars on or off, this attribute is best left out of your code, and the display will choose whether or not scrollbars are needed. Note that thescrolling="no"
andnoresize
commands can make it tough on users with smaller displays if the two are used in conjunction. If you use them together, test-drive your site in a 640x480 display to see how it looks.The
title
attribute can contain a phrase that is used as the title of the iframe. Some browsers depict this information when the mouse hovers over the element, while others display the information in the right-click menu. If you want to include a longer description (usually for non-visual browsers), use thelongdesc
tag. It will provide a link to the longer description.Advanced Features
IFrames
IFrames, originally an Internet Explorer-only feature, are now viewable in Internet Explorer 2.x and above, Netscape 7, Mozilla, Opera 3 and 6, and even the WebTV/MSN browser. IFrames are included in the HTML 4.0 specifications as well as the XHTML 1.0 specs. IFrames are "inline" or "independent frames" that reside in the body of a regular HTML page, and can be nested in a page just like a graphic, and do not require the use of a frameset. They're easy to use and quite useful for sidebar and other information of interest that isn't directly relevant to the main body of content. The more you use them, the more uses you will find for them. When you're building your page and you reach the area where you want the iframe to be, simply use the following code (modified to your own uses, naturally):
This gives you a little independently framed HTML page within the body of your main Web page, filled with whatever content you like. Non-compatible browsers will see the content within the two tags. Although the width and height attributes are considered optional, they are usually employed; you can choose pixels (as in the above example) or percentages for your sizing choices.
这使您在主网页的正文中有一个独立框架HTML页面,其中填充了您喜欢的任何内容。 不兼容的浏览器将在两个标签内看到内容。 尽管width和height属性被认为是可选的,但通常使用它们。 您可以为尺寸选择选择像素(如上例所示)或百分比。
Note that the align
attribute has been deprecated in favor of style sheets. If you choose to use it, your main choices are:
请注意,不建议使用align
属性,而应使用样式表。 如果选择使用它,则主要选择是:
bottom
: the default; the bottom of the object is aligned with the baseline
bottom
:默认值; 对象的底部与基线对齐
left
: the object is aligned along the left margin, with following objects arrayed to the right
left
:对象沿左边界对齐,随后的对象排列在右侧
middle
: center of the object aligned with the baseline
middle
:对象的中心与基线对齐
right
: the object is aligned along the right margin, with following objects arrayed to the left
right
:对象沿右边距对齐,后面的对象排列在左边
top
: the top of the object aligned with the baseline
top
:与基线对齐的对象的顶部
You can also use the frameborder
and scrolling
commands in an iframe.
您还可以在iframe中使用frameborder
和scrolling
命令。
CSS users can use the class
and/or id attributes to define the contents of the tag according to the style class or the style ID. CSS users can also use absolute positioning, a floating div
tag, and stylesheet declarations to have an iframe element "float" on top of your main content. Check out Webmonkey’s tutorial on how to accomplish this nifty little feat.
CSS用户可以使用class
和/或id属性根据样式类或样式ID定义标签的内容。 CSS用户还可以使用绝对定位,浮动div
标签和样式表声明在主要内容的顶部添加iframe元素“ float”。 查看Webmonkey的教程 ,了解如何实现这一精巧的小壮举。
Layers
层数
Layers are somewhat similar to IFrames in concept, though not in execution or even appearance. They are strictly Netscape-only elements, and have never been included in official HTML specifications. Since they aren’t supported by newer versions of Netscape/Mozilla, not part of the official HTML specs, and are fading into irrelevance, I won’t go into details about their care and feeding here.
层在概念上与IFrames有点相似,尽管在执行甚至外观上都没有。 它们严格是仅Netscape元素,并且从未包含在官方HTML规范中。 由于较新版本的Netscape / Mozilla不支持它们,也不属于正式HTML规范,并且正逐渐变得无关紧要,因此在这里我不会详细介绍它们的护理和喂养。
Search Engine Placement
搜索引擎的位置
Frames cause big problems for search engines. Most search engines, including Google, have problems reading frameset pages. Some of them automatically hunt for "noframes" versions, and if they’re not available, the search engine will often settle for indexing just the "master," or frameset, page. Like older browsers, many search engines ignore the instructions on producing the frame. Only information within the noframes tags is read — information that a frames-capable browser will ignore. Hence the "this site uses frames but your browser doesn’t support them" message that you often see in search engine results. You probably don’t want the frameset page emphasized on the search engine; worse, you run the risk of having the engine display incomplete or misleading information about your site instead of the carefully crafted positioning message you intended to be shown on the engine listing.
框架给搜索引擎带来了大问题。 包括Google在内的大多数搜索引擎在阅读框架集页面时都会遇到问题。 其中一些会自动搜寻“ noframes”版本,如果它们不可用,搜索引擎通常会只索引“主”页面或框架集页面。 与旧版浏览器一样,许多搜索引擎都忽略了生成框架的说明。 仅读取noframes标记内的信息,即具有框架功能的浏览器将忽略的信息。 因此,您经常在搜索引擎结果中看到“此网站使用框架,但您的浏览器不支持它们”的消息。 您可能不希望在搜索引擎上强调框架集页面。 更糟糕的是,您冒着使引擎显示不完整或有关您的站点的信息误导的风险,而不是打算在引擎列表中显示的精心设计的定位消息。
So how do you work around this? tags included in the frameset page are one solution, but not a very good one, as most major search engines have all but abandoned support for
tags. Still, they’re worth adding for the engines and intranets that do still use them.
那么您如何解决呢? 框架集页面中包含的标签是一种解决方案,但不是一个很好的解决方案,因为大多数主流搜索引擎几乎都放弃了对
标签的支持。 仍然值得为仍使用它们的引擎和Intranet添加它们。
Note that there’s a strong argument that tags are no longer worth the time it takes to write them; I won’t debate that here, but if you want to read more about the issue, check out Search Engine Watch’s article, Death of a Meta Tag. The only major search engine to still use
tags is Inktomi, and according to their director of product marketing, they’ve never given the tags a great deal of weight.
请注意,有一个很强的论点,即标记不再值得花费时间来编写它们。 在这里,我不会对此进行辩论,但是,如果您想了解更多有关此问题的信息,请查看Search Engine Watch的文章Meta标签的死亡 。 唯一仍使用
标签的主要搜索引擎是Inktomi,据他们的产品营销总监称,他们从未给标签赋予过多的权重。
A better way to skin this particular cat is to include useful information in the
instructions. Put the
information immediately after the first
tag, if you want the text to be placed as high as possible on the page. Note that placing the information above the first frameset tag will disable the frame information in some versions of Netscape.
更好地为这只特定猫咪蒙皮的方法是在
指令中包含有用的信息。 如果要在页面上尽可能高的位置放置文本,请在第一个
标记之后立即放置
信息。 请注意,在第一个框架集标签上方放置信息会在某些版本的Netscape中禁用框架信息。
Don’t forget to use tags on the frameset page, within the
tags. Providing your frameset page a title is helpful, even though it won’t appear when the page is viewed properly. Search engines do index titles; they are one of the most important elements your pages can have.
不要忘记在
标记内的框架集页面上使用
标记。 为框架集页面提供标题会有所帮助,即使在正确查看页面时标题也不会出现。 搜索引擎做索引标题; 它们是页面可以拥有的最重要的元素之一。
Now that you’ve gotten this far, you’ve created a page that search engines can see and index properly. Great… so far. What you haven’t done yet is give search engine users a page that is within your frameset; they have a page outside the normal frame constraints. This can be particularly troublesome with engines like AltaVista that are "frames-capable." These engines can link to any page within your framed site, and display it by itself, without the benefit of the frameset.
到目前为止,您已经创建了一个页面,搜索引擎可以看到该页面并对其进行正确索引。 很好...到目前为止。 您尚未完成的工作就是为搜索引擎用户提供一个位于框架集中的页面; 他们的页面超出了正常的框架限制。 对于像AltaVista这样具有“框架功能”的引擎,这尤其麻烦。 这些引擎可以链接到框架站点中的任何页面,并且可以单独显示它,而无需使用框架集。
You can easily strand visitors coming straight to a page inside your site if and when it doesn’t display inside the frameset you designed. Fortunately, there’s a simple answer to this. Just be sure to include a "Home" link at the top or bottom of every page that leads back to the main, frameset page. Make sure you use the target="_top"
attribute, like so:
如果在您设计的框架集中没有显示访问者的页面时,您可以轻松地将访问者直接吸引到该页面。 幸运的是,有一个简单的答案。 只要确保在每个页面的顶部或底部都包含一个“主页”链接,该链接就可以返回到主框架集页面。 确保使用target="_top"
属性,如下所示:
Home Page
Without this attribute, visitors who click on your "Home" link will see a new set of frames drawn within the main frame; not pretty, and not very user-friendly.
没有此属性,单击“主页”链接的访问者将看到在主框架中绘制的一组新框架; 不漂亮,也不是很友好。
Another solution uses JavaScript to force the frames to be redrawn, but I’ll leave that as an exercise for the student to locate and use. There are many different varieties of JavaScript coding that accomplishes this particular task. Often, pages that use JavaScript to deal with frame redrawing also prevent visitors from being able to use the "Back" button in its normal fashion to get back to where they came from. Users have to click twice, very quickly, on the "Back" button before the preceding page gets a chance to throw them back into the frameset, or use the back button’s history menu to get out of the frameset.
另一种解决方案使用JavaScript强制重新绘制框架,但我将其留作练习,让学生定位和使用。 有很多不同JavaScript编码可以完成此特定任务。 通常,使用JavaScript处理框架重绘的页面还会阻止访问者以常规方式使用“返回”按钮返回到其来源。 用户必须非常快地在上一页上单击“后退”按钮两次,才有机会将其扔回到框架集中,或者使用后退按钮的历史记录菜单退出框架。
Always include alternative navigational links for your framed HTML pages for those who don’t have frames-capable browsers.
对于不支持框架浏览器的用户,请始终为框架HTML页面包括备用导航链接。
Always, always, always add the target="_blank"
attribute to links to outside Web pages from within your framed pages. Otherwise, your frame may envelop the outside site within its frameset. That effect (sometimes deliberately inflicted upon poor innocent surfers by evil-minded Web designers, most often employed by commercial sites that want to keep their ad-heavy frameset in front of your face at all times) angers both Web surfers and site owners who don’t want your frameset "hijacking" their content. There may even be legal repercussions to trapping other sites in your frames.
总是,总是,总是将target="_blank"
属性添加到框架页面中到外部Web网页的链接。 否则,您的框架可能会将外部站点包裹在其框架集中。 这种影响(有时是出于邪恶的Web设计师故意使可怜的无辜冲浪者所为,这些邪恶的Web设计师通常是经常希望将广告沉重的框架保持在您面前的商业网站所雇用),这激怒了Web冲浪者和那些不想让您的框架“劫持”他们的内容。 甚至可能会有法律上的影响,将其他网站困在您的框架中。
Keep other folks’ frames from engulfing your pages by including this tag in the
section of every page:
通过在每个页面的部分中包含以下
标记,可以防止他人的框架吞噬您的页面:
Bookmarking a framed HTML page is easy enough — just right-click inside the frame, choose "Add to Favorites" or "Add Bookmark," and that framed page is bookmarked. Of course, most modern versions of Netscape and Internet Explorer can bookmark framed pages without the fuss of right-clicking.
为带有框架HTML页面添加书签非常容易,只需在框架内右键单击,选择“添加到收藏夹”或“添加书签”,然后将该带有框架的页面添加为书签。 当然,大多数现代版本的Netscape和Internet Explorer都可以为带框架的页面添加书签,而无需单击鼠标右键。
You can share data between several frames using the tag. This is a little more sophisticated than the rest of the material I’ve covered, so I’ll leave it to you to find out more about how to use this command. Start with the W3C specifications.
您可以使用标签在多个帧之间共享数据。 这比我介绍的其余材料要复杂得多,因此我将把它留给您以了解有关如何使用此命令的更多信息。 从W3C规范开始。
A suggestion relating to the tag above: using JavaScript or CGI scripts to help manage your framed sites dramatically increases your ability to keep everything together in a reasonable amount of time, and gives your visitors more control over their navigation and usage of your site. As I’m neither a JavaScript nor Perl codemaster, I’ll let you learn about that on your own! You can start this investigation, too, with the W3C specifications above, and continue with SitePoint’s own excellent Designing with Frames tutorial from the inimitable Kevin Yank.
与上述标记有关的建议:使用JavaScript或CGI脚本来帮助管理框架站点,可以显着提高您在合理的时间内将所有内容保持在一起的能力,并使访问者可以更好地控制其导航和使用情况现场。 由于我既不是JavaScript也不是Perl代码管理员,因此我将让您自己学习! 您也可以使用上面的W3C规范来开始此调查,并继续使用无与伦比的Kevin Yank撰写的SitePoint自己出色的Designing with Frames教程。
Want to learn how to make an index page that works for both IE and Netscape, as well as for browsers that don’t support the effect? About.com has a nice little tutorial on how to use a JavaScript snippet to achieve this goal.
是否想学习如何使索引页面适用于IE和Netscape以及不支持该效果的浏览器? About.com上有一个不错的小教程,介绍如何使用JavaScript代码段实现此目标。
Have fun framing, and as always, feel free to comment in the Forums. Who knows, you may actually find a use for frames in your site that you hadn’t considered before!
玩得开心,并且一如既往地在论坛中发表评论。 谁知道,您实际上可能会在您以前从未考虑过的网站中找到框架的用途!
Choosing a DOCTYPEhttp://www.htmlhelp.com/tools/validator/doctype.html
选择DOCTYPE http://www.htmlhelp.com/tools/validator/doctype.html
Death of a Meta Taghttp://searchenginewatch.com/sereport/article.php/2165061
元标记的死亡http://searchenginewatch.com/sereport/article.php/2165061
Designing with Frames – An Introductionhttps://www.sitepoint.com/article/622
框架设计–简介https://www.sitepoint.com/article/622
Doug’s Frames Tutorialhttp://users.snowcrest.net/dougbnt/frametut.html
道格框架教程http://users.snowcrest.net/dougbnt/frametut.html
Frames Are a Picnichttp://hotwired.lycos.com/webmonkey/96/31/index3a.html
相框是野餐http://hotwired.lycos.com/webmonkey/96/31/index3a.html
Frames in HTML Documentshttps://www.w3.org/TR/REC-html40/present/frames.html
HTML文档中的框架https://www.w3.org/TR/REC-html40/present/frames.html
Frames Without Tearshttp://www.alistapart.com/stories/frames/frames4.html
没有眼泪的框架http://www.alistapart.com/stories/frames/frames4.html
Frames – Why and Why Nothttp://webdesign.about.com/library/weekly/aa111097.htm
框架–为什么和为什么不http://webdesign.about.com/library/weekly/aa111097.htm
Framing the Webhttp://webreference.com/dev/frames/i
构架网站http://webreference.com/dev/frames/i
The Furor Over Frameshttp://webclipart.about.com/library/weekly/aa062797.htm
框架狂怒http://webclipart.about.com/library/weekly/aa062797.htm
The History of HTMLhttp://hotwired.lycos.com/webmonkey/97/17/index0a.html?tw=authoring
HTML的历史http://hotwired.lycos.com/webmonkey/97/17/index0a.html?tw=authoring
How to Use HTML Meta Tagshttp://www.searchenginewatch.com/webmasters/article.php/2167931
如何使用HTML元标记http://www.searchenginewatch.com/webmasters/article.php/2167931
The Element – Inline Frameshttp://webdesign.about.com/library/tags/bltags-iframe.htm
IFrameshttp://webdesign.about.com/cs/frameshelp/a/aaiframe.htm
IFrames http://webdesign.about.com/cs/frameshelp/a/aaiframe.htm
The IFrames Lowdownhttp://hotwired.lycos.com/webmonkey/96/37/index2a.html
IFrames Lowdown http://hotwired.lycos.com/webmonkey/96/37/index2a.html
The Ins and Outs of Frameshttp://www.ddj.com/documents/s=2361/nam1011135274/index.html
框架的来龙去脉http://www.ddj.com/documents/s=2361/nam1011135274/index.html
Introduction to Frameshttp://www.jalfrezi.com/frames.htm
框架简介http://www.jalfrezi.com/frames.htm
Lynx Users Guide version 2.8.3http://lynx.isc.org/release/lynx2-8-3/lynx_help/Lynx_users_guide.html
Lynx用户指南2.8.3版http://lynx.isc.org/release/lynx2-8-3/lynx_help/Lynx_users_guide.html
Search Engines and Frameshttp://www.searchenginewatch.com/webmasters/article.php/2167901
搜索引擎和框架http://www.searchenginewatch.com/webmasters/article.php/2167901
Some Caveats with Using Frameshttp://www.evolt.org/article/rating/22/293/index.html
使用框架的一些注意事项http://www.evolt.org/article/rating/22/293/index.html
To Frame or Not to Frame?https://www.sitepoint.com/article/122
构图还是不构图? https://www.sitepoint.com/article/122
Top Ten Mistakes Revisited Three Years Laterhttp://useit.com/alertbox/990502.html
三年后重新审视的十大错误http://useit.com/alertbox/990502.html
Web Developer Foundations: Chapter 5: XHTML Frameshttp://webdevfoundations.net/chapter5/l
Web开发人员基础:第5章:XHTML框架http://webdevfoundations.net/chapter5/l
Web Frames for Everyonehttp://webdesign.about.com/library/weekly/aa110199.htm
每个人的网络框架http://webdesign.about.com/library/weekly/aa110199.htm
Web Site Administriviahttp://www.ehsco.com/opinion/19980209.html
网站管理http://www.ehsco.com/opinion/19980209.html
Why Frames Suck (Most of the Time)http://www.useit.com/alertbox/9612.html
为什么陷害(大多数时间) http://www.useit.com/alertbox/9612.html
Writing HTML Frames for Audio Browsershttp://webdesign.about.com/cs/frameshelp/a/aaaccessframes.htm
为音频浏览器编写HTML框架http://webdesign.about.com/cs/frameshelp/a/aaaccessframes.htm
翻译自: https://www.sitepoint.com/frames-frame-usage-explained/
网页框架布局设计