The Internet, Web design

A frame is what? Structure and creation of frames

A frame is an area on a site (window) in which another web page is visible. Webmasters use this opportunity to showcase the main page of the site of their friends or partners. The same technique is used to display the search form in the windows and its result, and so on.

But basically the frames are used to create large web portals, where a lot of menu items and submenus are required. About these usually say: "site on the frames." To create such a resource requires a good knowledge of the HTML-language.

Creating frames in the site builder

Some site designers provide automatic generation of such code. Usually the button for adding a frame is in the main menu of the program. First you need to place the cursor in the right place on the page, then click the button, the window will open (as shown in the screenshot). In it, you can set the address of the page that will open in the frame, and adjust the dimensions: width and height.

But basically the frames are used to create large web portals, where a lot of menu items and submenus are required. About these usually say: "site on the frames." To create such a resource requires a good knowledge of the HTML-language.

With the help of this "service" it is possible to create several frames on the page, that's just the interconnected elements so you do not get.

Frames in CMS

In many programs for creating sites, it is possible to install the corresponding module. For example, for the Joomla frame, this is the "Wrapper" module.

It can be found and created in the control panel of CMS Jumla: "Extensions" - "Module Manager" - "Create" (a round button of orange color with a plus sign inside). In the pop-up window, in the list, you will see the "wrapper" module.

If he is not here, then it is not included. To use it, you first need to activate it here: the "Extensions" tab, then "Extension Manager", then the "Management" tab. And look in the list that opens, you can enter the word: Wrapper for a quick search in the "Filter" field. Opposite this module should be a green icon with a tick inside. A red circle with a dot inside will indicate that this plugin is off.

After this procedure, you can return to the "Module Manager", create a frame and set its parameters.

As you can see in the picture, the module allows you to set: the header above the frame, the position of the module, select the pages of the site on which it will be displayed. And also adjust the width, height; Add a frame and the actual link to the web page. If in the frame you want to display the main page of a site at full width, then 100%, set by default, will not be enough. You can immediately put it safely 400%. Altitudes of 200 are usually enough to display the top menu of the page. All the rest of the content will be visible if the user (the site visitor) uses the scroll bar.

Here is an example of what a frame in Jumla is.

The Jumla module for creating a frame is very convenient and easy to use. However, its capabilities are limited, as are the capabilities of the designer.

History and reality

In the practice of creating sites from frames, this tag (its application) has long ago receded into the background. They were able to replace the modules, settings in the constructor programs that generate code for the web page without the participation of the site builder. However, in some cases this is not enough. For example, when a frame is an integral complex structure of the areas displayed in the browser. This is how its owners see the complexity of structured sites. On its creation are only in extreme cases, because Framey's sites are created exclusively with the help of specialized tags.

Complex structured sites

For them, the creation of several interrelated frames is the optimal solution for organizing content on the pages of the resource. This, as a rule, large portals, growing every year more and more.

How to achieve the same result? How to create a frame structure?

How to write a frame into the page code

Frames in HTML are added using tags:

  • Frame (for a single window);
  • Frameset (with the help of it an entire structure is created);
  • Iframe ("floating" frame);
  • Noframes (in case the frame is not displayed in the user's browser).

The first specified tag always fits in the and pair. And it replaces and . And with the help of the appropriate attributes, you can adjust the characteristics of each element: the name (name =), the size (cols = and rows =), the border (border), the scroll bar and, of course, the link to the web page to display.

Design variations

The whole page of the site can be divided into areas. For example, this:

Left

Upper frame

Right

This structure (it is called nested) can be obtained by setting the cols attribute inside the tag, indicating the horizontal position of the frame, and rows - vertically. The next is the = sign and the dimensions are written. For example, 60%, 40% - percentage (one window will take 60% of the browser space, the other, respectively, 40%). Or 100, 200 - the ratio of the sizes in pixels. The size of one of the frames can not be set at all (it will be installed by default). To do this, you must specify a * after the comma or after the comma.

Within this pair, frameset registers each frame with the parameters: src = http: // site / article / 143778 /% 2C, then in quotes a link is given to the web page and name = with the header (for example, Frame 1).

The nesting of each new area is denoted by the new frameset.

Example code:

Notice that in our example, for frames 2 and 3, the sizes are written only once.

A lot of zadumok allow you to execute frames. Examples of their location in the browser window can be brought endlessly (changing the code accordingly). However, this information has not been used for a long time. Frames, if used today when creating sites, then only as modules in free CMS or in the form of iframe.

Floating frame

It's strange, why he got that name, the word "built-in" is more suitable here. This frame is created to display the contents of a file. You load into the database any document or file, use the tags of the ayframe to register the path to it - and visitors will see the text of the file (video or image). Unfortunately, browsers do not always display the content. To do this, web builders enter the phrase between the opening and closing tag: "Your browser does not display content."

For example, Seopult.ru is a well-known service for promotion masters. Not his primary site, but I.seopult.pro mirror, created for portal clients. The code of the ayframe is here written:

  • Instructions . Where the
  • tag is created to define a list item. Supported by all browsers.

    On the page of the mirror itself you can see the word "Instruction" in the form of a button. When you click on it, a presentation opens in the center of the browser window.

    All the major sites for watching movies and serials are created with the help of ayframes (for example, "Imhonet"), as well as social networks. Even the main page of "Yandex" contains this tag, and not one pair.

    How to prescribe iframe

    Upload to the site a document in the form of a window with a scroll bar can be anywhere. Usually tags are placed inside the body. In addition to the standard

    and , as shown in the example above, the list tag

  • can also be used.

    Attributes are added to the attribute:

    • Width (width) and height (height =);
    • Align on the edge align;
    • Indentation, which you can not prescribe: the default value is 6 - this is quite enough;
    • With allowtransparency, you can set the transparency of the frame area so that the page background is visible;
    • Plus already familiar scr, name, scrolling, border.

    Navigation with the help of an airframe

    The most interesting skill in creating frames is writing code that allows you to open content in a window by reference, something that the makers of the Seopult mirror did, just right away with several links (simultaneously available to the user on one page).

    For this purpose, the ayframe is taken, in it the name through name = is additionally registered. For example, zagolovok. Next before it in the tags and , the links through a HREF = http: // site / article / 143778 /% D1% 81 are specified, followed by the attribute target = zagolovok. Before using the closing tag, an inscription will be indicated, which will serve as a link-button. The "a" tags are opened and closed in the p tag.

    There are several lines in the code that can be used to obtain several buttons in a row on the site, clicking on which different content will be displayed in the bottom window.

    The code will look like this:

    Post your ad

    View Ads