A frame is an area on a site (window) in which another web page is visible. Webmasters use this opportunity to showcase the home page of their friends' or partners' sites. The same technique is used to display the search form in the boxes with the result next to it, etc.
But mostly frames are used in the creation of large web portals, where a considerable number of menu items and submenus are required. They usually say about such people: "website on frames". To create such a resource, a good knowledge of HTML is required.
Creating frames in website builder
Some website builders provide automatic generation of such code. Usually the button for adding a frame is located 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, a 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 mostly frames are used in the creation of large web portals, where a considerable number of menu items and submenus are required. They usually say about such people: "website on frames". To create such a resource requires good knowledgeHTML language.
With the help of this "service" it is possible to create several frames on the page, but you will not get interconnected elements in this way.
Frames in CMS
In many programs for creating websites, it is possible to install the corresponding module. For example, for Joomla, a frame is a "Wrapper" module.
It can be found and created in the Joomla CMS control panel: "Extensions" - "Module Manager" - "Create" (a round orange button with a plus sign inside). In the pop-up window, in the list, you will see the "Wrapper" module.
If it's not here, it's not included. To use it, you first need to activate it here: "Extensions" tab, then "Extension Manager", then the "Management" tab. And we are looking in the list that opens, for a quick search in the "Filter" field, enter the word: Wrapper. Opposite this module there should be a green icon with a check mark inside. A red circle with a dot inside will mean that this plugin is disabled.
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 title 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 actuallylink to a web page. If in a frame you want to display the main page of a site in full width, then 100%, set by default, will not be enough. You can immediately safely put 400%. A height of 200 is usually enough to display the top menu of the page. All other content will be visible if the user (website visitor) uses the scrollbar.
Here is an example of what a frame is in Joomla.
Jumla module for creating a frame is very convenient and easy to use. However, its capabilities are limited, as are the capabilities of the constructor.
History and realities
In the practice of creating sites from frames, this tag (its application) has long faded into the background. They were able to be replaced by modules, settings in constructor programs that generate code for a web page without the participation of a site builder. However, in some cases this is not enough. For example, when a frame is a holistic complex structure of areas displayed in the browser. This is how the owners of complexly structured sites see it. Its creation is used only in extreme cases, since frame sites are created exclusively with the help of specialized tags.
Complexly structured sites
For them, creating several interconnected frames is the best solution for organizing content on resource pages. These are, as a rule, large portals, growing stronger every year.
How to achieve the same result? How is frame structure created?
Howinsert frame into page code
Frames in HTML are added using tags:
- frame (for a separate window);
- frameset (using it to create a whole structure);
- iframe ("floating" frame);
- noframes (in case the frame is not displayed in the user's browser).
The first specified tag always fits in a pair of and. And it replaces and. And with the help of the appropriate attributes, you can adjust the characteristics of each element: the name (name=), size (cols=and rows=), the presence of a frame (border), the appearance of the scrollbar and, of course, the link to the web page to display.
Design variations
The entire page of the site can be divided into areas. For example, like this:
| Left | Top frame |
| Right |
Such a structure (it's called nested) can be obtained by writing the cols attribute inside the tag, which means the frame's location horizontally, and rows - vertically. Next, the=sign is put and the dimensions are prescribed. For example, 60%, 40% - percentage (one window will take 60% of the browser space, the other, respectively, 40%). Or 100, 200 - aspect ratio in pixels. The size of one of the frames can not be set at all (it will be set by default). To do this, after or before the comma, you need to specify the symbol.
Nestingeach new area is denoted by a new frameset.
Code example:
Note that in our example, for the second and third frames, the sizes are specified only once.
Many ideas allow you to complete frames. Examples of their location in the browser window can be given endlessly (changing the code accordingly). However, this information has not found practical application for a long time. Frames, if used today when creating sites, are only in the form of modules in free CMS or in the form of an iframe.
Floating frame
It's strange why it got such a name, the word "built-in" is more suitable here. This frame is created to display the contents of a file. You upload any document or file to the database, write the path to it using iframe tags - and visitors will see the text of the file (video or image). Unfortunately, browsers don't always render content. To do this, web builders enter the phrase between the opening and closing tags: "Your browser is not displaying content."
For example, Seopult.ru is a well-known service for promotion masters. Only not his main site, but a mirror I.seopult.pro, created for portal clients. The iframe code is written here as follows:
Instructions
. Where is the tag
-
was created to define a list item. Supported by all browsers.
On the mirror page itself, you can see the word "Instruction" in the form of a button. Clicking on it in the center of the browser window opens the presentation.
All bigsites for watching movies and series are created using iframes (for example, "Imhonet"), as well as social networks. Even the main page of "Yandex" contains this tag, and more than one pair.
How to write an iframe
You can upload a document in the form of a window with a scroll bar to any place on the site. Usually tags are placed inside the body. Beyond the standard
and, as shown in the example above, the list tag can also be used -
-
Attributes are added to the iframe:
- width (width) and height (height=);
- edge alignment align;
- indents that may or may not be specified: the default value is 6 - this is quite enough;
- using allowtransparency, you can set the transparency of the frame area so that the background of the page can be seen;
- plus the familiar scr, name, scrolling, border.
Navigating with an iframe
The most interesting framing skill is writing code that allows you to open content in a window by a link, which is what the creators of the Seopult mirror did, only with several links at once (simultaneously available to the user on the same page).
For this, an iframe is taken, the name is additionally written in it through name=. For example, header. Further, before it in the tags and the links are written through a HREF=with the obligatory indication of the attribute after them. Before using the closing tag a, an inscription is indicated that will serve as a link-button. Tags "a" opening and closingare enclosed in the tag p.
You can write several such lines in the code in order to eventually get several link buttons in one row on the site, by clicking on which different content will be displayed in the window below.
The code will look like this:
Post an ad
View Ads
Image How it will look on the website:
How to insert an iframe into a Joomla site
As a standard, the Joomla control panel has an enabled (ready-to-use) "HTML-code" module. With it, you can insert any code anywhere on the site. However, he stubbornly ignores the code with the iFrem tag. Therefore, we will use a special Jumi module.
First of all, you need to download it from the Internet and install it through the Joomla administrative panel: "Extensions" - "Extension Manager" - "Select File". Specify the path to the downloaded archive and click "Download".
After successful installation, go to the "Module Manager" and create a new one. Select the type of Jumi. In the window that opens, in the "Custom Code" field, enter the prepared iFrem, as shown in the previous paragraph of the article. Give the module a title, specify the placement position and site pages. Click save and check it out.
Browsers and frames
All popular browsers display the contents of frame windows well: Chrome, Safari, Firefox, Android, iOS. Internet Explorer and Opera have a particularly high rate in this regard. And yet there is no guaranteethat the visitor to your site will see the contents of all windows. In this case, you should leave a message using the noframe tag (opening and closing). You can enter the following into it: "Your browser is out of date. Update the version to display the contents of the site." If the user's browser renders frames correctly, they will not see this message.
So a frame is an area or window of a site that has its own URL. Used to display several web pages or independent documents in one browser field at once, also having their own URL. Despite the fact that frames allow you to organize a complex site well, they have not been used for a long time, except for the iframe. The use of this tag is still relevant for loading presentations, a video player, text documents in a specific window. It is actively used by large and well-known web resources.
-
