Good day to all! Andrey Bernatsky is with you.
Before moving directly to the article, I would like to give you a link to the video version of this topic:
In this episode we will talk about frames in HTML. Frames in essence they are very similar to tables, but unlike tables, each frame is independent and each of them can have a separate web page with its own address.
In the figure we see a fairly common site structure. It can be presented in the form of a table, or all this can be done using frames. In the top frame you can load a page with a logo and menu, in the left frame you can load a page with site navigation, in the central frame there will be a page with the main content of the site, in the right frame you can load a page with advertising banners, and in the bottom frame you can load a page with contact information. Here's what frames are in a nutshell.
Now let's look at how all this can be done.
The peculiarity of a document containing frames is that it does not contain a container BODY. A container is used instead FRAMESET. The general syntax for frames is as follows:
XHTML
In a container …. tags are located , which define the contents of frames.
At the tag there are two parameters:
rows = number– number of lines (horizontal sills).
cols = number– number of columns (vertical sills).
Generally speaking, the values of the rows and cols parameters are specified not exactly by numbers, but by listing the numbers separated by commas. As many numbers as there are, there will be as many rows or columns, and the numbers determine the size of the frame. The main thing is that the sum of these numbers equals the entire width of the screen.
Let's look at this with an example, and everything will be clear. Now let's create a frame document like this:
The code that will define this frame structure for us will look like this:
The first line of the code above opens the frameset container, the cols parameter indicates that there will be three nested frames. The first one will have a width of 30% of the entire screen width. The third one will also have 30% of the entire screen width. And the second frame will take up all the remaining space. Yes symbol "*" (asterisk) means take up all the remaining space on the screen.
By the way, let's look at how frames can be set in the cols and rows parameters:
You can set the size by simply entering a number. This number will determine the size of the frame in pixels.
You can set the width as a percentage. Moreover, if the sum of the percentages of all columns exceeds 100%, then all frames will be proportionally reduced so that the total sum is equal to 100%. The situation will be similar: if the sum of the percentages of all columns is less than 100%, then all frames will increase proportionally so that the total sum is equal to 100%.
You can set the frame size with a symbol “*” (star). This means that the frame must take up all the remaining space. If specified, for example , that is, two asterisks, then all remaining space will be equally divided between these two frames (in this case, 40%).
You can combine options for setting frame sizes in HTML. For example:
This code means that the first frame will be 70 pixels, the third will be 40% of the screen width, and the second will take up the rest of the space.
We completely figured out the first line of code. Go ahead.
Tags follow . Since separated by commas in the parameter cols tag frameset if three numbers are given (that is, there will be three frames), then tags there must be three too. The value of the src parameter is the address of the web page that will be loaded into this frame. The address, as can be seen from the example, can be absolute and relative.
And the last line closes the container
If we replace the cols parameter with rows in the first line of code, we will get the same frame document consisting of three frames. Only the division into frames will be vertical.
Options rows And cols cannot be used simultaneously. This leads to errors and incorrect display of content.
Everyone now has a question about how to create such a structure, which I spoke about at the very beginning of the article. We’ll come back to this a little later, but for now let’s turn to what’s happening in our browser now.
In the browser we see three pages, each of which is in its own frame.
At the same time, by moving the mouse cursor to the borders of the frames, we can change the size of the frames; scroll bars and borders between frames are also visible. This is not always necessary, in fact it is not necessary at all. And all this can be controlled thanks to tag parameters frame And frameset.
Tag options frame And frameset:
src="url"– required parameter. Specifies the address of the page that will be displayed inside the frame. Used only for frame.
noresize– cancels the ability to resize. Only used for frame.
scrolling="yes/no/auto"– determines the presence of scroll bars. The value yes – indicates the presence of scroll bars. The value no specifies that there will be no scroll bars. When set to auto, the browser itself determines whether there will be scroll bars. Only used for frame.
name="frame-name"– frame name. This parameter is used for interaction between frames. We'll talk more about it a little later. Only used for frame.
border=number– thickness of borders between frames. If it takes the value 0, then the borders between frames are not displayed. Used only for frameset.
framespacing="number"– distance between frames. Used only for frameset.
Using these parameters, you can get a page in which the borders between frames are not displayed, there is no way to change the size of the frames, and scrolling is prohibited for the last two frames. The code for such a page looks like this:
There are a few other options, but they don't clearly work, so I think it makes sense not to even mention them in the release.
Perhaps that's all with the parameters. We looked at an example of how to use them.
Now let's create the frame structure that I talked about at the very beginning of the release.
To do this, we create a structure of three frames divided vertically.
Accordingly, instead of the tag , we have to insert another container ..
"../lesson3/Untitled-1.html" />
After this, we insert our third frame with contact information and close the main container
The full code for this page is below:
Of course, I took the addresses for the frames from previous issues of the newsletter, and we didn’t see any menu, logo, navigation, etc. here. But we got the structure we needed. But if you create the actual pages you need, you can get a beautiful structure.
What we got in the end. Whether this is convenient or inconvenient is up to you to decide, but with a frame structure, all our frames always remain on the page. Regardless of the size of the content, we will always see the site logo and menu, the bottom of the site with contact information, the navigation block and banners. This, in general, is the essence and meaning of frames.
There is the possibility of interaction between frames. You can make it so that by clicking on a link in one frame, the information appears in another. Now we will see how this is done.
Let's create a frame like this:
Our links will be located in the left frame. And on the right are the pages to which these links lead.
Hi all. There is one interesting tag in html with which you can insert another into your web page, and it will look as if it was sewn into yours. This is an article on how to insert an iframe into html with an example.
So, using this paired tag, you can insert a page from any website on the Internet into your article. Let's look at this piece of code:
As you can see, all insertion parameters are set in the tag attributes. I think there is no need to explain anything to you about the first two - this is the width and height of our frame in which the desired page will be located. Dimensions should be selected based on the width of your content block.
The address of the desired page is specified in the src attribute. In it you need to write the full address to the site. The next attribute is the frame name. You can write an arbitrary value here. Finally, scrolling is responsible for causing scrollbars to appear, and its value of auto ensures that scrolling will only appear when needed. You can also set the value to no here. In this case, scroll bars will not appear, but then you will not be able to scroll the page - you will only be able to view its fragment, as long as the specified height is enough.
If necessary, you can set the remaining parameters via css. For example, this could be padding or a border.
In the code example that I gave above, you only need to change the page address to your own, as well as the frame dimensions, if necessary. Here's an example:
Now in this article a web service has appeared in which you can select colors by moving the cursor around the screen, and when you click, they are saved. I often use this useful site when I'm experimenting with creating beautiful menus, buttons, and forms.
This is how you can simply insert another site onto your page. Perhaps in this regard, you will have many of your own ideas for inserting iframes to yourself. The main thing is that now you know how to do it.
Let's start with the frame structure. What is its essence? We have the opportunity in the document that we load into the browser to organize special window-type areas. Other individual documents (web pages) can be loaded into these areas.
Why is this necessary? Since documents are loaded into their own separate areas, they behave independently. That is, you can do something in one document, while other documents remain unchanged.
Where can you find such frame structures? These are help files (with the extension .chm).
Here's a simple example of a document with frames:
Element frameset. Its job is to cover the viewing area and divide it into separate areas. Those. instruct the browser in what ratio and how (horizontally or vertically) we divide these areas.
Element frame– describes each such individual area. Single tag. It occupies the dimensions specified in the frameset.
Element noframes- displayed if the browser does not support frames.
Note that there is no body element. The frameset element is used instead. This is one of the reasons why frames are no longer used on websites.
This element describes a single window area. You can load any document into it using the src attribute. Examples:
Attribute scrolling- scrolling (auto by default). If the document exceeds the viewing area of this frame, scrolling occurs. If the document fits completely within the frame, then there is no scrolling. Scrolling can be disabled, but it is better to leave it at auto.
Single attribute noresize- prohibits changing the frame size in the browser. By default this is allowed.
Attribute frameborder– frame by frame. Value '1' - draw, value '0' - do not draw. Only these two values are valid. By default, the frame is drawn.
Attribute marginwidth– indicates the distance that the content in a given frame will recede horizontally from the frames of this frame.
Attribute marginheight– vertical indent from the content to the borders of the frame.
Element iframe(‘line window’). This element is paired (there is an opening and closing tag). This element serves the same purpose - to organize a window element in the document.
How is it different from the old frames? It is self-sufficient and does not need any additional containers. And it can appear in any documents, so where there is a body element.
An iframe element is an inline element with replaceable content. Those. an area of line type with any abstract dimensions is formed, and the content of some external document (html file) is loaded into this area.
Iframe has the same attributes as images (since they are of the same type): name, width, height, src, frameborder, scrolling, hspace, vspace, marginwidth, marginheight.
In any text editor, make a new text file.
Enter the main tags, not counting the tags
Instead of tags
Please note: attribute values are separated by a comma.
To divide the browser window vertically into two frames 200 and 600 pixels wide, you should write:
But the actual width and height of the frame window depends on the current monitor resolution. Therefore, if the user has a resolution set to, for example, 1024 x 768 pixels, in other words, the screen width is 1024 pixels, then part of the screen may remain blank. Therefore, it is recommended to set the frame sizes as percentages so that their sum is equal to 100%. If you still need to specify a fixed size in pixels for one of the windows, then you can not specify the size of the other window, replacing its value with the * logo. In this case, the browser itself will select the appropriate size for the second window.
Let's make two vertical frames to display our WEB site. For the first frame in which the menu will be displayed, we will set a fixed width of 160 pixels, and let the browser find the size of the second, replacing it with an asterisk *.
In the text editor, insert a blank line after the closing tag and enter the following code:
In this way, we specified that the browser window should be split vertically into two frames. Single tags are used to describe each frame individually , which must be inside the element
Insert a blank line after the opening tag
The file other.html must be loaded into the second frame, so the second tag will be like this:
So that all other pages of the WEB site - list.html and others that may be created - can also be loaded into the second frame, you need to use the name attribute to assign this frame a name, which, being designated in the links of any document as the value of the target attribute will determine which specific frame the document should be loaded into. Let us remind you that in the general case, when you follow a link, a new document opens in the same window. Specifically, so that when you follow the links in our menu, the pages open not in the first frame in which the menu is located, but in the second, we used in previous experience in menu links the target attribute with the value "frame": target="frame", where "frame" is the name of the second frame. And now the name “frame” should be assigned to the second frame, in which the other.html file should be expanded. Because the second tag in the final form it should be written like this:
Enter this code by inserting a blank line before the closing tag
Save the file in the WEB folder under the name index.html.
The name index.html must be assigned to the file with the main page of each WEB site. This particular file is opened by default when accessing a WEB node, unless a different file name is specified. On some WEB sites, the name of the main page may be index.htm, and index.html is displayed not as a page, but as a folder with file names. This needs to be clarified with the site administrator.
Now you can see how the created frames look.
Open the index.html file from the WEB folder in your browser. You will see that the viewer window is split vertically into two frames. The left frame displays the menu, and the right frame displays the other.html file.
Please note that each frame has its own scroll bars. You can cancel their display as needed. For this purpose enough in the tag specify the scrolling=no attribute.
Add the scrolling=no attribute to the tag describing the first frame:
You see, frames are a convenient means for placing information on WEB pages. But when using it, one should not lose a sense of proportion. A very large number of windows on the display does not improve the perception of information. Don't have more than three frames on your display and try not to use them unnecessarily.
The main disadvantage of using frames is that such a page cannot actually be found by search engines and you will not get visitors to such a page. This is the main disadvantage. Frames also put a strain on the computer's processing power. Naturally, this is not very relevant in our time, but it is relevant for mobile devices, where the speed of drawing WEB pages is still difficult. Let me remind you that at the end of 2010, WEB was used through mobile devices by about 10% and this figure is growing every year.
So, the first step of our work is completed - we made a WEB site from two WEB pages. Now, for it to become available to everyone, it needs to be placed on the Internet on one of the World Wide WEB servers.
In FrontPage, frames are called frames. The easiest way is to create a page with frames based on one of the ready-made templates available in the FrontPage program.
Select the menu command File - Make (File - New). A Task Pane with the active New task will appear in the right part of the program's working window.
In the New page section of the Task Pane, click on the More page templates link. The Page Templates dialog will appear on the display.
Select the Frames Pages tab.
This tab contains a set of templates for creating pages with frames. When you select a template, the initial view of the page is displayed on the right in the Preview field, and a description of the template is displayed in the Description field.
Select one of the templates, for example Contents, and click OK. A new page with frames will be created according to the selected template.
At the bottom of the newly created new_page_1.htm tab (new_page_1.htm) an additional No Frame button will appear. By clicking on it, we will see how the page will look in a browser that does not support working with frames. By default, the message text about the impossibility of displaying frames is placed there.
When a browser loads a page with frames, it reads information about the frames and then loads the original page into each frame. Therefore, after creating a page with frames, you need to set the original pages for the frames.
In the Design editing mode of the Page view, buttons are shown in empty frames.
Click the New Page button in each frame. New pages will be created inside the frames.
Using another button, Set Initial Page, you can select one of the previously made pages for the frame as the initial one.
Select the menu command File - Save (File - Save) to save new pages. The usual file saving dialogs Save As will appear on the display one by one for each page in which you need to specify file names. Specify, for example, the name LeftFrame for the source page of the left frame, the name RightFrame for the source page of the right frame, and the name FrameContainer for the page with frames itself.
If you chose the Contents template when developing a page with frames, then it already has an established connection between the frames: activating a link placed in the left frame will cause the pages the link shows to load into the right frame. In this case, the right frame is called a motivated frame (target frame).
To check how the connection between frames works, let's place two text links on the page of the left frame. Let one of them link, for example, to the original page of the right frame, and the other to the main page of the WEB site.
Place the text cursor at the beginning of the page in the left frame and type the phrase Link to main page.
Select the typed phrase using the mouse or keyboard and select the menu command Insert - Hyperlink. The Create Hyperlink dialog box appears on the display.
In the list of WEB site files, select the home page index file and click OK. The entered phrase will be converted into a link.
Select the typed phrase using the mouse or keyboard and click on the add hyperlink button on the Standard toolbar. The Create Hyperlink dialog box appears on the display.
In the list of WEB site files, select RightFrame and click OK. The entered phrase will be converted into a link.
Switch to preview mode by clicking the Preview button at the bottom of the FrameContainer.htm tab.
If necessary, you can change the motivated frame for a single link or for all links in the current frame.
In the Design editing mode of the Page view, right-click one of the links in the left frame and select Hyperlink Properties from the context menu that appears. The Edit Hyperlink dialog box appears on the display.
(Target Frame). The Target Frame dialog appears on the display.
In the Target setting field, you can specify a motivated frame or select one of the options in the Common targets list. The Set as page default flag allows you to use a selected motivated frame for all links on a page where no other one is obviously specified.
Click OK to close the Target Frame dialog box, and then click OK on the Edit Hyperlink dialog box.
Although frames do not contain their own visual parts, the page with frames and the frames themselves have a number of options that allow you to control their display.
Right-click anywhere on one of the frames and select Frame Properties from the context menu that appears. The Frame Properties dialog appears on the display.
The Name field indicates the internal name of the frame; it is also used when selecting a motivated frame for a link. The Initial page field specifies the page displayed in the frame when it loads. In the Frame size group of control parts, you can specify the width (Width) and height (Height) of the frame relative to adjacent frames (Relative), relative to the size of the browser window in percentage (Percent) or a fixed size in pixels (Pixels). In the Margins group of control parts, the indentation values from the vertical (Width) and horizontal (Height) boundaries of the frame to the content inside the frame are determined. If the Resizable in browser flag is set, then a WEB site guest can change the frame size by moving the separator between adjacent frames with the mouse. In the Show scrollbars drop-down list, you can set the scrollbar display mode: if needed, in other words, when the page does not completely fit in the frame, never (Never) or always (Always).
Click the Frames Page button. The Page Properties dialog appears with the Frames tab open.
The Show borders flag determines whether the frame's borders will be displayed. If the flag is cleared, the separating stripes between frames will not be visible in the browser. In the Frame Spacing field, you set the width of the boundaries separating adjacent frames.
Click OK to close the Page Properties dialog and then click OK on the Frame Properties dialog.
You can add new frames or remove existing ones from the page.
In page editing mode, select one of the frames by clicking on it.
Select the menu command Frames - Split Frame
(Frames - Split Frame). The Split Frame dialog box appears on the display.
Using one of the switches, select the split option: Split into columns or Split into rows.
Click OK. The area of the current frame will be divided into two parts, and a new frame will be added to the page.
A new frame can also be created if, in page editing mode, you move the frame separator with the mouse while holding down the Ctrl button.
To delete a frame, select it by clicking on it with the mouse, and in the program menu select the command Frames - Delete Frame. The frame will be deleted.
Deleting a frame does not delete the page that was displayed in it. The last frame on the page cannot be deleted.
In the Save as type drop-down list, select FrontPage Templates.
In the File Name input field, enter the name of the template file and click the Save button. The Save As Template dialog will appear on the display.
In the Title input field, specify the title of the template, which will be displayed in the list of templates when developing a new page. In the Description input field you can briefly describe the purpose and type of the template.
Click OK. The template will be saved.
Now you can use your template when developing a new page with frames by selecting it in the list of templates in the Page Templates dialog. If, when saving the template, the original pages were installed in frames, then they will be used by default for all frames made based on the template.
Frames are convenient to use for navigating a WEB site or a section of a WEB site. A list of links in the form of text or pictures is usually placed in one of the frames, and pages are loaded in the other when links from the first frame are selected. Another option is to implement common borders and navigation menus, which we already covered. It is not immediately recommended to use frames and general boundaries - this can make navigation around the WEB site confusing.
A browser window can be divided into parts called frames, sometimes frames; You can also call them sills. In each such part of the browser window, i.e. frame, a separate HTML document can be loaded. Let's look at an example of a browser window with three frames.
In this case, for clarity, each frame is loaded with a simple HTML document indicating the frame number and the name of the file storing its contents. If a real document is loaded into the frame, which does not fit completely in it, then the frame (attention, not the entire window!) will have vertical and/or horizontal scroll bars depending on whether the contents do not fit horizontally and/or vertically document. For example, the design and structure of your site are such that there are the same elements repeated on every page of the site: the title, navigation menu, address at the end of the page, or some other similar elements. Only the content of the sections changes. Then the pages can be divided into parts so that the unchangeable parts are placed in separate frames, and another frame can be allocated so that the contents of the desired section are loaded into it after clicking on the corresponding link, for example, from a menu. This saves on loading speed, since identical parts of the site pages are not re-loaded, but are simply displayed all the time in the frames allocated to them.
The structure of the window layout is stored in a separate HTML document, which is called a framed document. The frame structure is formed using a special FRAMESET element. A regular document has one HEAD section and one BODY section, while in a document with frames, the BODY section is replaced by a description of the structure of the frames, i.e. FRAMESET section. A NOFRAME element can be added to the FRAMESET section with alternative content for display in browsers that do not support frames, or in browsers that do not support frames. Such browsers simply will not understand the FRAMESET and NOFRAME structures, but will display the text placed inside them.
