Inserting a frame. Creating Frames

Sections of the site

Editor's Choice:

Advertising

home - Setting up the router

Inserting a frame. Creating Frames

Areas of application of frames

Developers of HTML documents have a fairly wide choice of forms for displaying information on pages. Text and graphic information can be ordered and organized using lists, tables, or simply using alignment parameters, setting horizontal lines, and dividing into paragraphs. Sometimes these features are not enough and then you have to split the browser window into separate areas or frames. In a number of Russian-language descriptions of the HTML language, the term frames is used instead of the term frames. The frequency of use of both terms is approximately the same.

The choice of a frame structure for displaying information on the WWW is justified in the following cases:

if necessary, manage the loading of documents into one of the subareas of the browser viewing window while working in another subarea;
to locate information in a certain place in the viewing window that must always be on the screen, regardless of the content of other sub-areas of the screen;
to present information that is conveniently arranged in several adjacent sub-areas of the window, each of which can be viewed independently.

The given list does not exhaust all possible cases where frames can be applied, but is of a recommendatory nature.

Let's first consider typical uses of frames using examples of real-life HTML documents, and then turn to the rules for developing documents containing frames.

In Fig. Figure 5.1 shows one of the HTML pages of the Finmarket agency, which specializes in providing information from the financial and stock markets of Russia.

Rice. 5.1. A typical Web document with a frame structure

This page splits the browser window into three frames. The lower part of the window occupies 20% of the height of the entire window and contains permanent information, which in this case is a graphical menu that allows you to access the most important sections at any time. This frame cannot change its size based on user commands and does not have scroll bars. The top part of the window (which is 80% of the height) is divided horizontally into two frames. The left frame contains the table of contents of documents that can be viewed by the user. The right frame, which occupies most of the viewing window, is intended to display the documents themselves. When initially loaded, these two frames split the browser window horizontally at a ratio of 15% to 85%. This ratio can be changed by the user during viewing, which allows you to select the optimal frame sizes taking into account the content of the loaded documents. Each of these frames has its own scroll bar, allowing you to view the entire contents of the frame, regardless of the size of the frame itself, the entire browser window, or the fonts used. When you select any link in the left frame, the corresponding document will be loaded in the right frame. This structure allows you to simultaneously see on the screen both the table of contents of documents and the contents of the selected document.

Here, without explanation, is a fragment of the HTML code used to build a document with this structure:

This example shows the most typical use of frame structures, where one frame serves as a table of contents for documents and another is used to load their contents. Solving such a problem without using frames is usually done as follows. On one of the pages there is a table of contents, consisting of links to other documents or their individual fragments. When you click on such a link, the table of contents disappears, and the required document is loaded in its place, after reading which you usually need to return to the table of contents. When using frames, this return becomes unnecessary, since the table of contents is always located on part of the screen.

You can find it on the Internet website of the electronic edition of the popular address and telephone directory "All Petersburg" in St. Petersburg.

The electronic version of the directory is available at http://www.allpetersburg.ru and allows you to find the necessary information based on user requests. This document page also has a frame structure and consists of two frames, the first of which is 100 pixels wide, and the second takes up the entire remaining width of the viewport. The frame located on the left side is used for a graphical menu that is constantly present on the screen, and also contains the Nevalink company logo. The second frame contains the document, which in this case is a user request form. The structure of this page is defined by the following HTML code:

Frames are very similar to tables - they both break up the browser window into rectangular areas in which some information is located. However, with the help of frames, you can solve not only the problem of formatting document pages, but also organize the interaction between them. The fundamental difference between frames and tables is that each frame must have its own separate HTML document, but the contents of all table cells are always part of the same document. In addition, the page displayed in the frame can scroll when viewed independently of the others. Each frame is essentially a separate "mini-browser". Unlike frames, the entire structure of which is always presented on the screen, tables may not completely fit in the window and can only be viewed in parts. It follows that if in HTML tables the total number of cells is practically unlimited and can reach several hundred, then the number of frames in a document usually does not exceed several units.

Advice

If you only need to format a document, then it is enough to limit yourself to using tables. If you need to solve more complex problems, for example, organize interaction between window subareas or create subareas that are permanently located on the screen, then it is convenient to use frames.

Ultimately, the choice of document structure - tabular or frame - depends on many factors and cannot be unambiguously predetermined.

There are alsopages that appear to be built similarly to the previous ones. For example, you can take page of a very popular worldwide collection of software products designed primarily for working with the Internet. Server address http://www.tucows.com. Note that the name of the server was determined by an abbreviation derived from the abbreviation of the full name of the collection - The Ultimate Collection of Winsock Software. Since the abbreviation tucows turned out to be consonant with the phrase two cows (two cows), the server pages often contain images of cows, and the rating of software products is estimated in the number of mooings (“Moo”) and is graphically depicted as a row of the corresponding number of cows. Most of the server pages are built in the same way - on the left side of the window there is a list of available sections, and on the right side there is a list of software products for the selected section. At first glance, the structure of the document should look approximately the same as in the previous examples. However, this document does not use frames! This page is built using a table that consists of just one row with two cells. The table has no frame and only serves the purpose of formatting the page. The impression of the screen being split vertically in two is created by using a background graphic containing a vertical line rather than a table grid. You can verify this by viewing the page without loading images. The use of a table here is apparently due to considerations of greater accessibility of documents, since frames do not allow display in all browsers.

The disadvantage of this approach in this case is the need to repeat the entire list of sections (left side of the page) in each document, which slightly increases the file size.

A comparison of the examples above shows that the use of tables and frames can sometimes be interchangeable and determined by the wishes of the developers. Note that often when looking at a page with a document displayed on it, it is impossible to determine how it is built. The end user does not need to know the internal structure of the document, but when developing his own Web pages, familiarization with the source code of existing documents would be extremely useful. In the first example (see Fig. 5.1), the frame structure of the document is immediately visible - the presence of two vertical scroll bars already determines the presence of individual frames. The following two examples are very similar in appearance, and it is impossible to determine that the first of them is built using frames, and the second - using tables. Differences will only appear when working with them. In the example of a telephone directory, when scrolling a document, the left part of the window will remain in place, which is only possible if there is a frame structure. In the following example (a collection of software products), scrolling will shift the entire contents of the window.

You can view the document structure when working with the Netscape browser using the Page Info item (in versions 3.x of the Netscape browser this menu item was called Document Info) of the View menu (Fig. 5.2).

Rice. 5. 2 . Netscape Browser View Menu

In addition, you can always view the HTML source code of the entire document by using the Page Source item of the View menu (or the View Frame Source item of the right-click context menu to view the HTML code of the document loaded in the selected frame).

Advice

You should not unnecessarily abuse the use of frames, and their number should not exceed three or four.

Often on real pages on the Internet you can see the following cases of using frames:two adjacent frames are used to load documents that are convenient to view simultaneously and compare with each other. Each of the two documents loaded into frames uses a tabular form for presenting information. As a result of this organization of data, each of the two tables can be viewed (or printed) separately, or studied in comparison with the other.

All the examples given in this section are taken from the pages of popular WWW servers and, perhaps, can serve as examples of the use of frames in HTML documents.

Subsequent sections of this chapter cover rules for writing documents containing frames.

Rules for describing frames

Let us now move on to consider the rules for writing tags used for documents with frame structures.

Let's first look at the complete HTML code that creates a document with medium complexity frames:

This example creates the framed page shown in Figure. 5.3. As you can see, this HTML code defines four frames. The top frame spans the entire width of the page and contains the heading. Next are two central frames, one of which is located on the left side and takes up 25 percent of the screen width, and the second takes up the remaining space. The last, fourth frame occupies the lower quarter of the screen. A separate HTML document is loaded into each frame, the name of which is determined by the SRC parameter.

As can be seen from the example, tags are used to describe the structure of frames , And . It looks like this:

Everything placed between tags , will be displayed by browsers that do not have frame support capabilities. Frame-aware browsers will ignore all information between these tags.

Note that in real life, HTML page developers often do not use the tag's capabilities

The second file, named frameset.htm, contains the following code:

In this case, the top and bottom lines behave the same. But the second line is now a simple frame like the others. However, the frameset.htm file pointed to by the SRC parameter defines its own frame structure. As a result, the screen will display exactly the same as in the original example.

Note

It is in principle possible to create nested structures , using tags , which refer to the same file describing the frame structure, but this should not be done. This situation will lead to endless recursion and will not allow further work. Some browsers control this situation and prevent the possibility of failure. If the address written to SRC matches one of the previous addresses in the frame hierarchy, then it is ignored, as if the SRC parameter were not present at all.

Advice

Using Nested Structures in various combinations, it is possible to create almost any frame grid imaginable. However, remember to create a user-friendly interface and not just demonstrate your ability to work with frames.

Here's an example of creating a regular rectangular grid of frames:

This example creates a frame grid with two rows and three columns (Figure 5.6). Since a set of six frames is defined, it is also necessary to define six individual frames . Please note that frame definitions are given line by line. That is, the first tag defines the contents of the first column in the first row, the second defines the contents of the second column, and the third finishes defining the data for the last column of the first row. The last three frames then fill the columns of the second row.

Rice. 5. 6 . 2 by 3 frame grid

Note also that the sum of the percentage values in the COLS parameter is not 100, but only 90 percent. There is nothing wrong with this, since the browser will automatically proportionally change the width of the columns to eliminate this contradiction.

Features of navigation when using frames

Working with documents that have a frame structure has some features that you need to know. These features of JB are mainly manifested in navigation when loading documents. Significant differences in navigation are characteristic not only of different browsers, but also of different versions of the same browser.

The Netscape browser versions 3.x and 4.x, when you click the Back button, returns the document back to the frame that was last acted upon. The same actions will be performed if the Back item is selected when calling the context menu in any of the frames. Let us remind you that the context menu is called up by clicking the right mouse button. Thus, regardless of which frame the context menu was called in, pressing the Back button will cancel the last operation, even if it was performed in another frame.

The Netscape 2.x browser worked completely differently. The context menu contains the Back in Frame command, which returns the document to the current frame rather than undoing the last operation.

In any version of Netscape, you can bookmark a document contained in a selected frame. To do this, you need to select the Add Bookmark mode from the context menu mentioned above. If you simply select the Add Bookmark mode from the main menu of the browser, a bookmark will be made on the document with a description of the frame structure , which will not accurately point to a specific frame. The ability to create a bookmark on a document of a separate frame does not mean that the same frame structure will arise when you continue to use this bookmark. The document pointed to by the bookmark will be loaded into a full window outside the frame structure.

Interaction between frames

The simplest form of viewing information on the WWW consists of reading pages and following links, in which the current document in the browser window is replaced by another document. When working with frames, you can organize a more user-friendly document loading scheme.

Interaction between frames is the ability to load documents into the selected frame using commands from another frame. For this purpose, the TARGET tag parameter is used<А>. This parameter specifies the name of the frame or browser window into which the document pointed to by this link will be loaded. By default, if there is no TARGET parameter, the document is loaded into the current frame (or window). This default can be overridden by specifying a tag with the desired value of the TARGET parameter. Specifying the name of the default frame to load into is very useful when a large number of links need to direct documents to a specific frame. A typical situation with a table of contents in one frame, links from which load corresponding documents into an adjacent frame, was shown at the beginning of this chapter (Figure 5.1). For this example in the section file named LIST.htm, it is advisable to write the following line: . Otherwise, you would have to specify a TARGET parameter for each link.

Frame names must begin with a Latin letter or number. The name can be the name of an existing window or frame, or a new name can be specified under which a new window will be opened. There are four reserved names that perform special actions when specified. These names begin with an underscore (_): "_blank", "_self", "_parent", and "_top". Any other name that begins with an underscore is not valid.

TARGET="_blank" - ensures that the document is loaded into a new window. This window will not have a name, and therefore it will not be possible to load another document into it.

TARGET="_self" - the document will be loaded into the current frame (or window). This entry should be used to bypass the default specified by the tag .

TARGET="_top" - causes the document to load into the full window. If the document is already in a full window, then this value has the same effect as"_self".

TARGET="_parent" - causes the document to be loaded into the area occupied by the parent frame of the current frame. If there is no parent frame, this parameter value has the same effect as"_top" .

Note

Some HTML sources erroneously state that if a frame has no parent, the value "_parent" is equivalent to "_self". This statement is not always correct.

Warning

The reserved frame names "_blank", "_self", "_parent" and "_top" must be written in lowercase Latin letters. Note that such exactingness is unique to Netscape. Microsoft Internet Explorer correctly recognizes reserved names written in any case.

Here are examples of interaction between frames and individual browser windows. Consider the following HTML code:

Using Frames

This HTML document describes a structure consisting of three frames named "A", "B" and "C". Frame names will be needed later to organize links between frames. Note that there will be no links to the frame with the name “A” in this example, so it could have been left without a name at all. When you load the above document into a browser, the frames will display the information contained in the files identified by the SRC parameter. Frame "A" will receive the contents of the frame_a.htm file, and the remaining two frames will receive data from the empty.htm file, which has no data to display. Let us remind you once again that the HTML document describing the structure of frames does not have a section .

Here is the text of the file named frame_a.htm:

Document for Frame A

D

4. Loading a document in a new window

5. Loading a document in full window

6. Loading a document into the current frame

This document is a complete HTML document with sections And and, in turn, has links to a file called test.htm, located in the same directory as the frame_a.htm file.

The text of the test.htm file is extremely simple:

Test document

Test document text

The file frame_a.htm, the contents of which were loaded into frame "A", has six links to the same file test.htm with different values for the TARGET parameter.

Let's consider the actions that will occur when implementing these links. The first link with the value TARGET="B" will load the file test.htm into a frame named "in". Note that after implementing any of the six links, the Netscape browser will automatically color all six of them a different color, since they point to the same file. Microsoft Internet Explorer only marks links that are actually implemented.

The second link will do the same for frame "C". Initially, there is nothing in frames “B” and “C” (more precisely, the contents of the empty file empty.htm are loaded). The implementation of the first and second links will fill these frames.

The third link with the value TARGET=MD" will lead to the formation of a new browser window with the name "D" and loading the test.htm file into it. Note that the form of writing this link is no different from the first two. The difference is that in the first In two cases, references were given to existing frames, the names of which were defined in the file with the frame structure, and in this case the reference was given to a non-existent object. If this reference is made at least once, then a window with the name "D" will be created and repeated clicking on the link will only reload the data into the now existing window "D". Of course, the user can close it at any time and re-create it by selecting this link. Figure 5.7 shows the situation after the first three links have been implemented. Recall that the location and the sizes of windows on the screen are determined by the user.

Rice. 5. 7 . The situation obtained after sequential implementation of the first three links available in the left frame

The fifth link with the value TARGET="_top" will load the document in the full window instead of the entire frame structure. With this value of the TARGET parameter, a new window is not created. Returning to the frame structure is possible by clicking the Back button.

Note

The names of frames or browser windows should not be confused with the names of downloaded documents. The names of the frames are not visible anywhere when viewed; they are required only to organize interaction and are therefore hidden from the user. You can see them only when viewing the source text of HTML files.

Advice

Let us remind you that the names of downloaded documents are specified by the tag . If a document is loaded in a full window, its name is displayed at the very top of the browser window. If a document is loaded into a frame, then its name is not displayed anywhere, and the title of the document containing a description of the document’s frame structure will still be located in the upper part of the window. Therefore, the names of documents intended to be viewed in frames are not very important. For example, in Fig. 5.7 the same document is loaded into frames “B” and “C”, as well as into a separate window named “D”, while the name of the document is visible only in window “D”. However, it is hardly recommended to omit the names of documents loaded into frames, as they may appear, for example, in the Bookmarks list when creating a bookmark for a document located in a frame or list of viewed documents.</span> </i></p> <p>Let's look at another interesting example of organizing interaction between frames and browser windows. Let there be the text of the main loaded HTML document:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Using window names

A document with a frame structure into a new window

Using Frames

Please note that if the main document is a standard HTML document, then the frame.htm file loaded from a link from the main document contains the frame structure and in turn links to the empty.htm file.

After loading the main document, the browser window will look like shown in Fig. 5.8 (left window). The entire document consists of two links. Let's follow the first link. A new window will be created with the name “D”, in which the text of the test.htm file will appear (Fig. 5.8, right window). Repeating this link will only reload the data in window "D".

Rice. 5.8. Example of interacting frame windows

Let's follow the second link. A new window will be formed without a name, into which the frame.htm file will be loaded, defining two frames with the names “C” and “D” (Fig. 5.8, bottom window). There is nothing in both frames (more precisely, an empty document empty.htm is loaded). Notice that there is now an open window named "D" and a window with frames, one of which is also named "D". Let's follow the first link again. Unlike the first case, data will be loaded not into window “D”, but into a frame named “D”. The result of all the described actions is shown in Fig. 5.8.

Note

The appearance of opening windows and their contents can sometimes even depend on the order of user actions. Working with documents whose behavior is difficult to predict usually causes justifiable irritation for the user and indicates a lack of thoughtfulness in the data structure by the developers.

If you change the order of actions, i.e. first execute the second link, and then the first, then the window named “D” will not appear at all! This will happen because after implementing the second link, a frame named "D" will be created and there will be no need to open a new window for the first link.

This example is not a role model at all, but only shows the possible complexity of organizing interaction. On the contrary, you should try not to unnecessarily complicate the organization of data, much less create situations in which the result changes depending on the order of the user’s actions.

Advice

Avoid collisions in frame and window names. Although it is not formally prohibited to have frames with the same names, it can lead to confusion.

Warning

Frame and window names are compared in a case-sensitive manner. So, for example, frames named "frame_1" and "Frame_1" will be different.

Examples of more complex interactions between frames

Quite simple typical examples of interaction between frames were discussed above. The tasks of creating new windows, replacing the contents of individual frames, as well as displaying a document in a full window with the destruction of the entire frame structure were considered. Examples are given of using custom frame names, as well as the reserved names "_blank", "_self" and "_top". Using the last reserved name "_parent" is more complex and will be described below.

This section will look at more complex options for interaction between frames. In particular, replacement of the contents of several adjacent frames will be implemented.

One of the most common uses of frames, which has already been mentioned in this chapter, is the case of two frames, one of which contains a list of links, and the other contains the documents themselves (Fig. 5.1).

Let's try to expand the formulation of the problem. Suppose you want to display on the screen the contents of a fairly large document consisting of chapters divided into sections. A typical example is technical literature on a particular topic. Let us describe the desired presentation of such a document on the screen. Let's divide the screen into three frames, one of which will contain a list of book chapters, the second - a list of sections of the selected chapter, and the third - the text of the selected section. When you select a link in the second frame, the contents of the third frame should change. The implementation of this requirement is trivial. When you select a link in the first frame, the contents of both the second and third frames should change simultaneously. At first glance, implementing this task in HTML is impossible (without using programming in JavaScript or others), since when a link is executed, only one document is loaded, and not two or more. Nevertheless, solving this problem is quite possible.

Let us show a possible solution to such a problem using a simple example. Suppose you want to display three frames on the screen and load some documents into them. Let's set the task of creating links in each of these frames, the implementation of which, for example, swapped the contents of two frames. Let the first frame take up 50% of the window's width and 100% of its height and position it on the left side of the window. The right half of the window is also divided horizontally in half and contains two other frames. This structure is described by the following code:

Using this HTML code, the required structure will be created, but solving the problem is impossible. It is necessary to remove the nested structure into a separate file, and in this HTML code describe a frame that refers to the created file. Then the text of the source document will look like:

Example of interaction between frames

Created file with nested structure has the name 1_2.htm and contains the following code:

1-2

At first glance, nothing has changed at all. In both cases there are three frames into which the documents left.htm, 1.htm and 2.htm are loaded respectively. However, when the frames interact, the difference will appear. If in the first case none of the frames has a parent frame, then in the second case for two frames the parent will be a frame named "Two_Frames". Therefore, if in any of two frames you apply a link with a TARGET parameter value equal to "_parent", then the result will be different for the first and second cases. For the first case, implementing such a link will load the document into a full window, replacing the existing frame structure. This is where the "_parent" value property comes into play, which acts like "_top" in the absence of a parent frame. In the second case, a frame named "Two_Frames" will be replaced, which occupies the right half of the screen and essentially consists of two frames.

The second case formally differs from the first also by the presence of a frame named "Two_Frames" to which references can be made. It is precisely this feature that will allow us to solve the problem.

Here is the contents of the left.htm file, which is initially loaded into the first of the frames under consideration:

Left frame

documents in two frames located on the right side of the window.

Select document location option:

1 _2.htm" TARGET="Two_Frames">Option 1-2

Option 2-1

2-1<TITLE> </p> <p></HEAD> </p> <p><FRAMESET ROWS="*,*"> </p> <p><FRAME SRC="2.htm"> </p> <p><FRAME SRC="1.htm"> </p> <p></FRAMESET> </p> <p></HTML> </p> <p>Note that the text of files 1_2.htm and 2_1.htm differ only in the order of links to files 1.htm and 2.htm.</p> <p>Let us now consider the construction of a document loaded into the left frame. It contains two links with the TARGET="Two_Frames" parameter. The implementation of any of these links creates two frames at the location of the “Two_Frames” frame (this is the right half of the screen), loading documents 1.htm and 2.htm in one order or another. Thus, when choosing option 1-2, document 1.htm is loaded into the upper right frame, and 2.htm into the lower right frame. When you select option 2-1, the order of the documents changes. As a result, the alternating selection of options creates the impression that the documents in the two frames are changing places. This is exactly the effect we sought to achieve (Fig. 5.9).</p> <p>The contents of documents 1.htm and 2.htm do not matter for the described example. However, for example, instead of trivial documents, we will create documents with links that implement the same actions.</p> <p>Text of file 1.htm:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Document 1

Document 1

Option 1 -2

Option 2-1

File 2.htm differs from 1.htm only in the header.

There are two links with the value TARGET="_parent" that point to the parent frame. These links could also be written with an explicit name of the parent frame, i.e. TARGET="Two_Frames", but using an implicit name is usually more convenient. For example, if you exclude links from the left frame (document left.htm), you could omit the frame name "Two_Frames" specified when describing the main frame structure. This would create a frame with no name, but the links from documents 1.htm and 2.htm with TARGET="_parent" would still work correctly.

Advice

Whenever possible, use implicit frame naming. For example, "parent","top","self" instead of specifying specific names.

Rice. 5.9. Interacting frame windows with the effect of changing loaded documents

Difference between frames and browser windows

When working with frames, the question arises about the fundamental difference between organizing the frame structure of a browser window and creating multiple windows. At first glance, it might seem that you could get by with the ability to create multiple windows, since working with windows and frames is very similar. Each frame requires a separate document to be loaded, has the ability to scroll content independently, and can be modified by commands from other frames. These properties of frames are similar to those of browser windows. With a tabular organization of data, it is impossible to achieve such freedom of action.

However, there is a significant difference between frames and windows. With frame organization, the division of the viewing area into frames is performed by the HTML document itself, indicating the dimensions and their location. When viewing, the user can change the size of frames, unless this is prohibited in the description of their structure. The arrangement of windows is determined by the general rules of working with the Windows system - the user can expand any window to full screen, minimize it into an icon, or arbitrarily set its size and location. Windows, unlike frames, can overlap. This wealth of choice has its downside - you need to manually position windows on the screen each time and resize them to achieve the optimal viewing option. In the case of frames, the optimal size ratio is usually specified by the developer in the description of the frame structure and often does not need to be changed.

Advice

Although frames cannot provide all the possibilities for working with individual windows, their rational organization will create maximum convenience for the user.

Working with windows also has other disadvantages. Creating each window requires a lot of memory. In Netscape, each window is essentially another copy of the browser, complete with a full set of buttons and menus. The same situation is typical for Microsoft Internet Explorer.

Note that the organization of individual windows in browsers is done differently. Creating a new window with a document results in the appearance of a separate task in the Windows system, as you can see when viewing the list of running tasks. Therefore, switching between windows can be done in the same way as switching between different tasks, for example by pressing a keyboard shortcut +.

Many popular Windows applications have the concept of a document window. Examples include the Microsoft Word word processor or the graphics program Paint Shop Pro and many others. Each of these applications allows the simultaneous use of several windows with data and, as a rule, there is a Window menu, which provides a list of windows and gives the ability to switch between them. The creation of a new window in such applications usually occurs when opening an existing file or creating a new one. However, in these programs, when a new window is created, a new running task is not created.

Netscape also has a Window menu that lists existing windows. (In Netscape 4.x versions, this feature is provided by the Window item on the Communicator menu.) Let's return to Fig. 5.8. In this example, three windows are open at the same time, each of which is essentially a separate browser. However, for the user, they are all windows of the same browser that can interact with each other. In any of these windows, you can open the Window menu and see a list of three windows. In Fig. Figure 5.10 shows the situation when this is done for the bottom window.

Rice. 5.10. Opening Frame Windows in the Netscape Browser

Each window can be closed separately (using the Close command from the File menu). To finish working with the browser in any window, you can open the File menu and select Exit (Fig. 5.11).

If several windows were open, then all of them will be closed, but before this a warning message will appear (Fig. 5.12).

Each browser window can have its own settings (though not all). Look at fig. 5.11. Two windows are open, one of which is divided into three frames. The same document is loaded in two of the three frames, as well as in a separate window. The ability to independently configure the parameters of each window allows you to display the same document differently. In the example above, the font size of the document in one window is larger than in the other. This effect is achieved by setting different encodings for each window (the Document Encoding item of the Options menu or the Character Set item of the View menu for version 4.x), with both encodings using the same font, but of different sizes. Changing any item in the General Preferences menu affects all windows.

Rice. 5.11. Quitting the Netscape Browser

Rice. 5.12. Warning about closing windows in the Netscape browser

Additional browser features

All of the above frame description tags with the corresponding parameters are implemented almost identically in the Netscape and Microsoft Internet Explorer browsers, however, each of these browsers allows you to additionally use its own unique tags or parameters.

Netscape Browser Features

The Netscape browser, starting with version 3.0, allows three additional options: BORDER, FRAMEBORDER, and BORDERCOLOR. The BORDER parameter applies only to the tag . The value of the BORDER parameter determines the thickness of the borders between frames in pixels.

The FRAMEBORDER parameter can be used both in the tag , and in the tag and determines the presence of a frame between frames. This parameter can be Yes or NO. If the parameter is written in the tag , then its effect applies to all frames in this group. For an individual frame, the value can be overridden. The default value is Yes.

Note that the BORDER and FRAMEBORDER parameters operate independently of each other. For example, if FRAMEBORDER is set to NO and BORDER is set to a value other than zero, then the border between frames will not be drawn, but the space specified by the BORDER parameter value will still be allocated for it.

The BORDERCOLOR parameter can be used as in the tag , and in the tag and defines the border color, which can be specified by the color name or its hexadecimal representation.

Here's an example:

The first line of this HTML code specifies three frames, with space between them for a 10-pixel thick frame (Figure 5.13).

Rice. 5.13. Drawing borders between frames in the Netscape browser

Between frame windows "A" and "B", no frame is drawn due to the NO value of the FRAMEBORDER parameter, however, the color red is defined for the frame. For the last frame "c", the FRAMEBORDER value is set to Yes and overrides the value set on the first line. Therefore, between the frames named “B” and “C”, a red frame with a thickness of 10 pixels will still be drawn.

Note

If borders between frames are not drawn, the Netscape browser will not allow frames to be resized by dragging them with the mouse, even without the NORESIZE parameter. For Microsoft Internet Explorer the situation is different.

Note that frames without borders are not used very rarely. It should be remembered that the absence of frames does not prevent the appearance of scroll bars (Fig. 5.14).

Rice. 5.14. Scrollbars in frame without borders

Microsoft Internet Explorer Browser Features

The Microsoft Internet Explorer browser allows you to use the FRAMEBORDER parameter for the same purposes as described above, but does not allow you to set the color and thickness of the frames. However, only the numeric value "O" can be used as a value for the FRAMEBORDER parameter to cancel drawing a frame, or a non-zero numeric value to draw a frame.

The difference in the rules for setting the values of the FRAMEBORDER parameter for different browsers is very unpleasant. Try, for example, setting FRAMEBORDER=Yes. This entry is correct for Netscape, but for Microsoft Internet Explorer it will result in the absence of a frame. The previous example (Fig. 5.13) when viewed in Microsoft Internet Explorer will be presented without a frame.

Advice

It is recommended to always write the value of the FRAMEBORDER parameter in numeric form, for example, FRAMEBORDER=0. This follows the rules for writing a parameter for Microsoft Internet Explorer, but violates the rules for Netscape (although it is correctly perceived by the latter).

Note

If the frames between frames are not drawn, then the Microsoft Internet Explorer browser (unlike Netscape), in the absence of the NORESIZE parameter, will allow you to “touch” resize the frames by dragging the frames with the mouse. You can find the place where the frame should be by changing the shape of the mouse pointer.

The Microsoft Internet Explorer browser allows the use of an additional FRAMESPACING parameter written in the tag , the value of which determines the number of pixels between frames to be left blank.

Let us give an example, the display result of which is shown in Fig. 5.15.

Changing the distance between frames

Rice. 5.15. Empty space between frames in Microsoft Internet Explorer

Note

Unfortunately, many HTML language descriptions erroneously state that the FRAMESPACING parameter must be used in the tag . Microsoft Internet Explorer only allows this parameter to be used in a tag .

Floating frames

Microsoft Internet Explorer browser allows the use of a unique tag , which implements the concept of floating frames. Unlike regular frames, descriptions of floating frames can appear in the text of a regular HTML document. Browsers that do not support the tag <IFRAME>, instead of the frame will display any information recorded between <IFRAME>And. In TEGS Exactly the same parameters are used as in the tag describing regular frames <FRAME>. The only exception is the NORESIZE parameter, which is meaningless because the size of floating frames cannot be changed by the user when viewing the document in any case.</p> <p>In addition, the following additional parameters can be used to set the position and size of the floating frame in the document: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Their purpose and order of use coincides with the corresponding parameters for embedded images, which are specified by the tag <IMG>. </p> <p>Here is an example of using floating frames:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Using floating frames</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><CEMTEK><H2>An example of using the concept of floating frames</H2></СЕМТЕК> </p> <p><IFRAME SRC=float.htm NAME="A" HEIGHT=300 WIDTH=40% HSPACE=10 SCROLLING=YES ALIGN=RIGHT> </p> <p>Your browser does not allow floating frames to be displayed</p> <p>

Microsoft Internet Explorer is the first browser (and so far the only one) that supports so-called "floating" frames.

These frames can be placed anywhere on the screen, just like graphics and tables.

The frame to the right of this text is placed on the page using a special tag . Right alignment was specified when creating the frame.</p> <p></BODY> </p> <p></HTML> </p> <p>The result of displaying this example by the Microsoft Internet Explorer browser is shown in Fig. 5.16. Browsers that do not support the concept of floating frames will, for this example, instead of displaying the contents of the float.htm document, display the text "Your browser does not allow displaying floating frames."</p> <span> <br><img src='https://i2.wp.com/webnav.ru/books/html4/frames/20.gif' width="100%" loading=lazy loading=lazy></span> <p><i><span><b>Rice. 5.16.</b> Floating frame in Microsoft Internet Explorer</span> </i></p> <p>Note that the concept of floating frames is similar in ideology to embedded images or tables. Here, another HTML document is completely embedded in the desired place in the HTML document.</p> <p><i><b>Advice</b> </i></p> <p><i> <span>Currently, the use of floating frames is limited to a single browser - Microsoft Internet Explorer version 3.0 and higher. Please note that users of other browsers (particularly Netscape) will not be able to see the contents of the iframes.</span> </i></p> <p>Tools for creating documents containing frames</p> <p>An HTML document containing frames, like any other document, can be created or edited manually using any available text editor. Most specialized HTML editors either do not have visual framing capabilities or have very limited capabilities. There are several special editors that are focused on creating frames. Let us briefly describe the capabilities of some of them.</p> <p><b><span>FrameGang frame editor</span> </b></p> <p>One such editor is the FrameGang utility, developed by the Australian company Sausage Software, which is better known for its popular HTML editor HotDog.</p> <p>Information about this software product can be obtained at <b>http://www.sausage.com</b>, as well as from the collection of software products for the Internet (at <b>http://www.tucows.com</b> or any other of several dozen mirror servers scattered around the world).</p> <p>The FrameGang utility is an addition to any HTML editor or regular text editor running in the Windows environment, which allows you to visually design the necessary frame structure and then generate the corresponding HTML code. The resulting HTML code can be transferred to the HTML editor via the Windows clipboard (Clipboard). The FrameGang program will allow you to quickly build the desired frame structure.</p> <p>Let's look at the program's capabilities. After installing this program in Windows and launching it, you are asked to select one of two possible frame structures of the first (top) level - columnar arrangement of frames (Columns) or rowwise (Rows), and also determine their number. In the future, each of the first-level frames can, if necessary, be divided into several second-level frames. A larger number of frame levels is not provided, but this is not a significant limitation, since in practice more than two levels are rarely used.</p> <p>As an example, let us select four frames arranged in columns. Next, you should create a structure of second-level frames, which is done by splitting existing frames in the opposite direction. For this example, frames can only be split horizontally. The creation of second-level frames is performed in the Add menu item, the implementation of which adds the next frame to the current one.</p> <p>Please note that funny pictures in frames do not carry any meaning and serve only to fill empty space. Their drawing can be canceled in the Options menu. We also note that the very name of the manufacturer (sausage - sausages) and the name of some of its software products (HotDog - does not need translation) determined the interface style of this package - in many menu items there is an image of sausages.</p> <p>After defining the structure of the frames, you need to set their sizes. This is done by simply moving the borders of the frames with the mouse in the same way as is done to resize Windows windows. The set dimensions for the current frame are displayed as a percentage in the windows named Width and Height. If you need to set frame sizes not in percentages, but in pixels or relative units, you must change the resulting HTML code manually outside the FrameGang program.</p> <p>Next, for each frame you need to set its name (Name), which can be omitted, the URL of the document initially loaded into this frame (Frame URL), and also select the value of the Resizeable Frame Border parameter and the scrolling parameter for the contents of the frame (Frame Scrolling).</p> <p>At any time, you can view the frame structure being created in the selected external browser without leaving the FrameGang program. The Preview button is used for this. Setting the browser name is done in the Options menu. After setting all the parameters, you should generate HTML code corresponding to the selected frame structure, which will be written to the Windows clipboard (HTML Compile button). The resulting code can be pasted from the clipboard into the desired place in the HTML file when working in any editor.</p> <p>The Save and Open file buttons allow you to save and read the file only in a special encoding specific to the FrameGang program and not intended for any other use.</p> <p>Below is the HTML code generated by FrameGang for the example described:</p> <p><FRAMESET COLS="25%,25%,25%,25%"> </p> <blockquote> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_A"> </p> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_B"> </p> <p><FRAMESET ROWS="50%,50%"> </p> <blockquote> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_C1"> </p> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_C2"> </p> </blockquote> <p></FRAMESET> </p> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_D"> </p> </blockquote> <p></FRAMESET> </p> <p>To obtain a correct HTML document, it is enough to enclose the resulting code between tags <HTML>And</HTML>. You can add a document header section <HEAD>, in which to define the necessary data, for example, the title of the document (remember that the title of the document is written between the tags <TITLE>And</TITLE>). Note that modern browsers can work correctly even if some of the necessary tags are missing. If the above HTML code is saved as a file with the appropriate extension, even without adding any tags, then both Netscape Navigator and Microsoft Internet Explorer will be able to display the document correctly.</p> <p>The FrameGang program allows you to visually design frames, is quite convenient and easy to use, but is not without some drawbacks. In particular, there is no way to specify the size of frames by writing the required numbers in the Width and Height windows, since they only display the sizes set when moving the frame boundaries with the mouse. The generally accepted frame parameters MARGINWIDTH and MARGINHEIGHT are not set. There is no way to write a file in text format to disk, which makes it impossible to use this program offline.</p> <p><b><span>Frame-It frame editor</span> </b></p> <p>Another specialized frame editor is Frame-It, information about which can be found at:</p> <p><b><span>http://www.iinet.net.au/~bwh/frame-it.html</span> </b></p> <p>Working with this program is in many ways similar to the previous one. First you need to determine the basic structure of frames and their number. Next, each frame, if necessary, is divided into several, forming second-level structures. Just like the previous program, the number of frame nesting levels is limited to two.</p> <p>For each frame, all necessary parameters are set by filling in the appropriate fields. Unlike the previous program, it is possible to set the values of the MARGINWIDTH and MARGINHEIGHT parameters. In addition, the Invisible Frame Borders flag has been introduced, which, when set, generates the following code fragment:</p> <p>FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0".</p> <p>After setting the required frame parameters, you can save the generated HTML code to a file or write it to the Windows clipboard. The generated code will contain not only a description of the frame structure, but also a start tag <HTML>, as well as a couple of tags <NOFRAMES>And</NOFRAMES>, between which information is written, intended for browsers that do not display frames.</p> <p>For a specific example, the following code will be generated:</p> <p><html> </p> <p><! --- Generated using Frame-it v1.21 --- > </p> <p><! --- http://www.iinet.net.au/~bwh/frame-it.html ---> </p> <p><frameset cols="25%,25%, 25%, 25%" FRAMEBORDER="NO" BORDER="0" </p> <p>FRAMESACING="0"></p> <p><frame name="Frame_1" src="Empty.htm"> </p> <p><frame name="Frame_2" src="Empty.htm"> </p> <p><frameset rows="50%,50%"> </p> <p><frame name="Frame_3" src="Empty.htm"> </p> <p><frame name="Frame_5" src="Enipty.htm"> </p> <p></frameset> </p> <p><frame name="Frame_4" src="Empty.htm"> </p> <p></frameset> </p> <p><noframes> </p> <p><body> </p> <p>with frame structure</p> <p></noframes> </p> <p>If in this example you clear the Invisible Frame Borders checkbox, the generated code will change significantly:</p> <p><html> </p> <p><! --- Generated using Frame-it vl.21 --- > </p> <p><! --- http://www.iinet.net.au/~bwh/frame-it.html ---> </p> <p><frameset cols="25%,25%,25%,25%"> </p> <p>scrolling=auto noresize></p> <p>scrolling=auto noresize></p> <p><frameset rows="50%,50%"> </p> <p>scrolling=auto noresize></p> <p>scrolling=auto noresize></p> <p></frameset> </p> <p>scrolling=auto noresize></p> <p></frameset> </p> <p><noframes> </p> <p><body> </p> <p>Your browser can't show documents</p> <p>with frame structure</p> <p></noframes> </p> <p>Information about using frames on the WWW</p> <p>For information about frames, you can refer to the following addresses on the WWW:</p> <p>http://www.spunwebs.com/sites2c/frmtutor.html</p> <p>http://union.ncsa.uiuc.edu/HyperNews/get/www/html/guides.html</p> <p>http://cox.asu.edu/Trial/faq/webfaqs/frame/</p> <p>http://www.netlingo.com/more/framestarget.html</p> <p>http://www.aubg.bg/beast/students/raduluc/teach/fr/</p> <p>http://www.as.net/frame/</p> <p>http://www.cqi.com/~pmurphey/instruction/</p> <p>http://www.iwaynet.net/~rtyler/htmltutorial/frames.html</p> <p>http://edbo.com/frames/</p> <p>http://bela.fei.tuke.sk/netscape/frames/</p> <p>http://www.newbie.net/frames/2ed/rnenu.htmtfcontents</p> <p>http://infoserver.etI.vt.edu/coe/COE_Students/laughon/frame.html</p> <p>http://www.htmlhelp.com/frames/syntax/</p> <p>http://www.woodhill.co.uk/html/</p> <p>http://www.htmlhelp.com/design/frames/</p> <p>So, frames... what are they for and what benefits do they provide? I will try to talk about this in this chapter, and of course about how to implement them and work with them..</p> <p>Often, when creating a website, it becomes necessary to open several HTML documents at the same time in one browser window... so frames were created to define work areas for each document. In addition, frames are a good tool with which you can do page layout; they serve as a worthy “alternative” to the tabular method of page layout... I put the word “alternative” in quotes because this is a completely different way of building a website with its own advantages and disadvantages and it is quite difficult to compare it with the hitherto familiar construction of the site.. but first things first..</p> <p>Let `s start? Let’s say we need to open three HTML documents at once in one browser window and arrange them, for example, in this way:</p> <p>What do we need for this? To begin with, of course, we need to create three separate html documents which we will actually open in one window. Let the first document contain a graphic image and act as a logo, let’s call it logotype.html, the second document will be some content.. let’s call it menu .html, and the third is a document with a lot of text. text.html. Of course, you can come up with your own names, as well as the contents of the documents, but for now it’s better to copy mine... it will be more convenient for both me and you.</p> <p>So, there are three files logotype.html, menu.html and text.html.. which we need to place under one roof, but we don’t have a roof yet..</p> <p>We write “roof”, the main document to which we will connect our files. Since it will be the main one, we give it the name index.html.</p> <p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <body> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html></p> <p>Here is the structure of the document that is familiar to us, which we chewed at the very beginning of our training. Frames break existing stereotypes! The structure of the document frame looks like this:</p> <p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br><b><frameset> </b> <br><b></frameset> </b> <br> </html></p> <p>No tag <b><body> </b> compensates for the new tag <b><frameset> </b>- install a frame or set of frames... with this guy we will actually work further.</p> <p>Tag <b><frameset> </b> has attributes <b>rows</b> And <b>cols</b>- these attributes tell the browser how to place frames in the browser window</p> <b>rows</b>- horizontally <b>cols</b>- vertically <br><br><img src='https://i0.wp.com/webremeslo.ru/graphics/win1.gif' width="100%" loading=lazy loading=lazy><p>In our case, we need horizontal placement of frames... so we write like this:</p> <p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset <b>rows="15%,15%,70%"</b>> <br> </frameset> <br> </html></p> <p>The percentages after the equal sign are nothing more than the sizes of our frame windows in one large browser window; we are supposed to place three windows - therefore, there are also three values separated by commas. Remember how we set the cell sizes for the table, the same principle applies here. As in the case of table cells, frame sizes can be specified as a percentage of the total area and in pixels.</p> <p>Here are some writing examples: <br><b><frameset rows="15%,15%,70%"> </b>- this entry indicates that there will be three horizontal windows where the last one will occupy 70% of the browser window area, and the first two will occupy 15%. <br><b><frameset cols ="200,240,200"> </b>- here three windows are located vertically, the width of which is indicated in pixels. <br><b><frameset rows="100,*,180"> </b>- such an entry means that the first and third windows will have a width of 100 and 180 pixels, respectively, and the second frame will occupy the entire remaining area.</p> <p>We are done with placing the documents, now all that remains is to connect them and enjoy the first result..</p> <p>Tag <b><frame> </b> and its attribute <b>src</b> will indicate to the browser the path to the html document that should be opened in the space provided for it. We have three separate documents logotype.html, menu.html and text.html, now we need to specify a path for each, which is what we actually do. (I assume that all four files are in the same folder and the paths to them have the simplest notation like: <b><frame src="logotype.html"> </b>)</p> <p>index.html file <br> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset rows="15%,15%,70%"> <br><b><frame src="logotype.html"> </b> <br><b><frame src="menu.html"> </b> <br><b><frame src="text.html"> </b> <br> </frameset> <br> </html> <br>File logotype.html <br> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <body> <br> <img src='https://i0.wp.com/logotype.jpg' height="120" width="800" loading=lazy loading=lazy> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br>File menu.html <br> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <body bgcolor="#e8e8e8" background="fon1.jpg"> <br> <font face="Monotype Corsiva" size="6"color="#ff0000">Menu:</font><br> <font face="Comic Sans MS" size="3"> <br>Champignon soup <br>Beans in a pot, Italian style <br>Australian summer salad <br> ... ... ... <br> </font> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br>File text.html <br> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <body bgcolor="#f5f5f5"> <br> <center><font face="Comic Sans MS" size="3">Champignon soup</font></center> <br> <br>a lot of text.. <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br></p> <p>In this example, I posted all four HTML documents where index.html is the main one, and the other three are plug-in pages, each of which, in principle, can work autonomously and contain anything, pictures, tables, texts, links.. I did it This is to give you an understanding of the principle of working with frames. In further examples, I will post only the head file with frames (otherwise they all take up too much space on the page), and you know that I have “somewhere out there” all the other files containing graphics, texts, maybe be something else.. well, don’t lag behind me, slowly edit your own pages for the future training site.. I don’t know what you’re going to write yours about, but I promised to help one girl write a website dedicated to cooking..)) so that I decided, so to speak, to take aim at two birds with one stone.. the bunny girl and the website..)) something like this..))</p> <p>In the above example, we positioned all the windows horizontally, changing the attribute <b>rows</b> on <b>cols</b> you can arrange them vertically. But what if you need to place our windows?</p> <br>like this?: or like this?: or even like this?: <br><br><img src='https://i1.wp.com/webremeslo.ru/graphics/win2.gif' width="100%" loading=lazy loading=lazy><p>There is an exit. Let's look at examples.</p> <p>Let's start with the first case... what do we see? And we see two lines, where the second is divided into two columns.</p> <p>And now, in order:</p> <b><frameset rows="20%,80%"> </b> <i>- divide the browser window into two lines</i><br><b><frame src="logotype.html"> </b><i>- load our logo in the first line</i><br><b><frameset cols="30%,70%"> </b><i>- and divide the second row into two columns</i><br><b><frame src="menu.html"> </b> <i>- in the first there will be a menu</i><br><b><frame src="text.html"> </b><i>- and in the second there is a lot of text</i><br><b></frameset> </b> <i>- close the column division tag</i><br><b></frameset> </b> <i>- close the line division tag</i><br><p>In general, it is incorrect to say columns and rows, since frames have nothing to do with tables other than visual similarity; it is correct to say horizontal and vertical frames.. well, I’m saying it this way so that it would be clearer to you..</p> <p>Okay, let's look at an example:</p> <p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset rows="15%,85%"> <br> <frame src="logotype.html"> <br> <frameset cols="20%,80%"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> </html> <br></p> <p>In the second case, we have two columns in which the second is divided into two lines, so we will write like this:</p> <b><frameset cols="30%,70%"> </b> <i>- divide the window into two columns</i><br><b><frame src="menu.html"> </b> <i>- the first one will contain the content</i><br><b><frameset rows="20%,80%"> </b> <i>- and divide the second into two lines</i><br><b><frame src="logotype.html"> </b><i>- logo</i><br><b><frame src="text.html"> </b> <i>- and main text</i><br><b></frameset> </b> <i>- close the line division</i><br><b></frameset> </b><i>- close the division into columns</i><br><p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset cols="20%,80%"> <br> <frame src="menu.html"> <br> <frameset rows="15%,85%"> <br> <frame src="logotype.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> </html> <br></p> <p>The third case is a little more complicated, but you shouldn’t be afraid of it... especially since I personally chose this kind of construction for a site about culinary art; I’ll explain why below. What we have? three columns, and the second column essentially contains our first case..</p> <b><frameset cols="*,800,*"> </b> <i>- divide the window into three columns (note that the second column takes up exactly 800 pixels and the two outer ones do not have an exact size and will divide the remaining space in half)</i><br><b><frame src="dekor.html"> </b> <i>-in the first column we load an html document that will perform a purely decorative function</i><p><b><frameset rows="15%,85%"> </b> -<br><b><frame src="logotype.html"> </b> -<br><b><frameset cols="20%,80%"> </b> - <i>In the second column we insert our “first case”</i><br><b><frame src="menu.html"> </b> -<br><b><frame src="text.html"> </b> -<br><b></frameset> </b> -<br><b></frameset> </b> -</p><p><b><frame src="dekor.html"> </b><i>- in the third column we load the same file with decorations</i><br><b></frameset> </b><i>- slam</i><br></p><p>Look at the example, and then I will explain why I chose the five-window path</p> <p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html"> <br> <frameset rows="120,*"> <br> <frame src="logotype.html"> <br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html"> <br> </frameset> <br> </html> <br></p> <p>So why five windows? I remember that I already wrote about the fact that different Internet users have different resolutions on their monitors and, accordingly, on different screens our site will look different... and if there are no specific sizes, all our drawings, texts, tables will, as they say, “float” for those users whose monitor resolutions are different from yours. When we laid out the site using a table, the issue with page dimensions was resolved by assigning a specific width and height to this table; unfortunately, this cannot be done with frames... even if you specify the width of the frames not in percentages, but in pixels, it is still the last column will stretch across the remaining width of the browser window and the page, as they say, will lose its “marketable appearance”. So what should we do? We have to resort to little tricks... By setting the central column (in which we actually have the entire page) with a size of 800 pixels, we once and for all determine its width, and the dimensionless first and third columns, in addition to decoration, act as a kind of “springs” on which the central column.. So, for people with a small monitor resolution, these windows/fields will be narrow, and for people with a high resolution, they will be wide, so the central column will not be affected in any way and now we can place any objects in it with complete confidence, with precise reference locally, without worrying about their future fate. Compare the first example, where there are three windows, and the third, where there are already five of them, isn’t that better?</p> <p>We'll finish with the placement and sizes of frames... and we've been stuck here for a long time... let's move on.</p> <h2>We bring the frames into a neat appearance.</h2> <p>In our last example, the first thing that catches your eye is a whole bunch of scroll bars, which are there where they are needed and where they are not needed.. Let's get rid of them, well, you can leave them somewhere.. This is done using the attribute <b>scrolling</b>- tag <b><frame> </b>, it can have one of three values:</p> <ul><li><b>no</b> </li><li><b>yes</b>- always show</li><li><b>auto</b> </li> </ul><p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" <b>scrolling="no"</b>> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" <b>scrolling="no"</b> ><br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" <b>scrolling="no"</b>> <br> </frameset> <br> </html> <br></p> <p>Frame fields, or otherwise the distance from the frame boundaries to the text or image, as in our case, are specified in pixels using attributes <b>marginwidth</b> And <b>marginheight</b> tag <b><frame> </b></p> <p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" scrolling="no"> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" scrolling="no" <b>marginwidth="0" marginheight="0"</b>> <br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html" <b>marginwidth="10" marginheight="10"</b>> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no"> <br> </frameset> <br> </html> <br></p> <p>Let's talk a little about the framework around our frames.</p> <p>If you noticed, in the last example, by hovering the cursor over the border of the frame, the cursor, that is, takes on a different appearance (grab and move) and now this border can be dragged in any direction while holding the left mouse button. Sometimes this “mobility” of frame boundaries plays into the hands of the webmaster, but more often it still gets in the way.. In order to prevent the user from playing with the window sizes for the tag <b><frame> </b> came up with an attribute <b>noresize</b></p> <p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" scrolling="no" <b>noresize</b>> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" <b>noresize</b>> <br> <frameset cols="200,600"> <br> <frame src="menu.html" <b>noresize</b>> <br> <frame src="text.html" marginwidth="10" marginheight="10" <b>noresize</b>> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" <b>noresize</b>> <br> </frameset> <br> </html> <br></p> <p>But this is an attribute that has been familiar to us for a long time <b>border</b> sets the width in pixels of these same frames between the frames.. it is written inside the tag <b><frameset> </b>. Same as before meaning <b>border="0"</b> will completely free us from frameworks.</p> <p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset cols="*,800,*" <b>border="0"</b>> <br> <frame src="dekor.html" scrolling="no" noresize> <br> <frameset rows="120,*" <b>border="0"</b>> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize> <br> <frameset cols="200,600" <b>border="0"</b>> <br> <frame src="menu.html" noresize> <br> <frame src="text.html" marginwidth="10" marginheight="10" noresize> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" noresize> <br> </frameset> <br> </html> <br></p> <h2>Frames and links.</h2> <p>It's time to revive our site with links, but here's the problem, the familiar ordinary link <b>Beans in a pot, Italian style</b> will open this document in the same frame where it is located, in our case directly in the frame with the content, and the content itself at the moment of clicking on this link will go into oblivion.. you can look at the clumsy example.. click on any link in it.. To prevent this from happening in the future, it is necessary to indicate to the browser in which frame the document we need should be opened, unless, of course, you really need to open it in the same frame.</p> <p>I remember we already got acquainted, in the chapter dedicated to links, with attributes <b>name</b>- name and <b>target</b>- goal, they are also used when working with frames, the mechanism is slightly changed and it’s almost the same. First of all, the frame in which we would like to open any documents must be assigned an individual name.</p> <p>it is written like this:</p><p> <frame src="text.html" <b>name="osnovnoe"</b>> you can come up with any name.. the main thing is not to forget it..</p> <p>It is written like this:</p><p>target="osnovnoe"</b>>Beans in a pot, Italian style</p><p>Well, I think there’s no need to explain to you that before you refer to any documents, you need to create them... in my case, the files (recipes) have the names text.html, text1.html, text2.html...</p> <p>Look at the example:</p> <p>index.html file <br> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset cols="*,800,*" border="0"> <br> <frame src="dekor.html" scrolling="no" noresize> <br> <frameset rows="120,*" border="0"> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize> <br> <frameset cols="200,600" border="0"> <br> <frame src="menu.html" noresize> <br> <frame src="text.html" <b>name="osnovnoe"</b> marginwidth="10" marginheight="10" noresize> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" noresize> <br> </frameset> <br> </html> <br>File menu.html <br> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <body bgcolor="#e8e8e8" background="fon1.jpg" link="#b40000" alink="#900000" vlink="#900000"> <br> <font face="Monotype Corsiva" size="6"color="#ff0000">Menu:</font><hr> <br> <font face="Comic Sans MS" size="3"> <br>target="osnovnoe"</b>>Champignon soup <hr> <br>target="osnovnoe"</b>>Beans in a pot, Italian style <hr> <br>target="osnovnoe"</b>>Australian summer salad <hr> <br> ... ... ... <br> </font> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br></p> <p>Just like before, the document can be opened in a separate window. Let me remind you that it is written like this:</p><p>target="_blank"</b>>Beans in a pot, Italian style</p><p>Or by assigning the attribute <b>target</b> meaning <b>_top</b> open it in the same browser window, but in full screen.. “zeroing” everything that is there.. written like this:</p><p>target="_top"</b>>Beans in a pot, Italian style</p><p>This is how the site turned out... of course, there is still work to be done on it... besides, according to my idea, it will have a slightly different structure in terms of navigation around the site, it will have a whole bunch of pages, a beautiful menu, but as for the frame structure, I think she will remain the same..</p> <h2>floating frame</h2> <p>Sometimes it is necessary to insert another HTML document or even a series of such documents into a page containing a non-frame structure in a separate window. To accomplish this purpose there is a tag <b><iframe> </b>- the so-called floating frame.</p> <p>This tag has a number of attributes:</p> <b>src</b>- a required attribute indicating the path to the page to be opened <br><b>width</b>- width of the floating frame in pixels or percentages <br><b>height</b>- floating frame height <p><b>scrolling</b>- show scroll bar</p><ul><li><b>no</b>- never show the scroll bar,</li><li><b>yes</b>- always show</li><li><b>auto</b>- show it if it is necessary.</li> </ul><b>align</b>- floating frame alignment <ul><li><b>left</b>- left</li><li><b>right</b>- on right</li><li><b>top</b>- higher</li><li><b>bottom</b>- below</li> </ul><b>frameborder</b>- presence of a frame around the floating frame <ul><li><b>1 </b>- enable frame</li><li><b>0 </b>- turn off the frame</li> </ul><p>All together it is written like this:</p> <b><iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1" >
Example document with floating frame:

floating frame

floating frame

The so-called "floating frame" has been introduced into this page.
In a separate window, it opens another html document for display.

… … …

Noframes

Some browsers do not support the document frame structure or interpret it incorrectly; in addition, users often deliberately disable support for the HTML document frame structure in their browser settings. And although the percentage of such browsers and users is small, they nevertheless exist.

Now imagine that you have built your website using a frame structure and some visitors, perhaps without knowing what the problem is, try to open your website, and their browser displays an error! What will they think of your site? I think something like: “Ugh.. some kind of nonsense.. I won’t come here again!”

In order to make it clear to the user that his browser/browser settings do not support frames, there is a tag

The result of the example will be noticeable if your browser really does not support frames (here I thought for a long time.. :) if this is so, then why read this chapter at all?) or you turned off frame support in your browser as an experiment.

Tag
○ Floating frame

If you need to insert an iframe window directly into a page that does not have a frame structure, there is an "iframe" tag for this.

* “iframe” tag attributes

src - path to the page to open

width - width of the floating frame

height - floating frame height

scrolling - scroll bar
- no - never show the scrollbar
- yes - always show
- auto - show if necessary

align - floating frame alignment
- left – left
- right – on the right
- top – higher
- bottom – below

frameborder - border around floating frame
- 1 - turn on the frame
- 0 - turn off the frame

This is what the “iframe” tag with attributes will look like:

If your browser doesn't support frames, you can insert the text " OOPS! Your browser does not support frames. » between tags .
It will look like this:
OOPS! Your browser does not support frames.
For example, let's add an iframe to the "content.html" file:
Home page
Home page
Site content - "Home page (content.! Your browser does not support frames.

Previous post
Next entry

Read:

Typed Programming Language What to do with all these variable types Rating of the best wireless headphones The main camera of a mobile device is usually located on the back of the body and is used for taking photos and videos How to switch to another operator while keeping your number review of a phablet, expensive, but very competent

Popular:

Smartphone Sony Xperia Tipo: characteristics and reviews Sony Xperia Tipo: reviews

Smartphone Sony Xperia Tipo: characteristics and reviews Sony Xperia Tipo: reviews

New

How to restore the menstrual cycle after childbirth:

Rating of the best wireless headphones

Rating of the best wireless headphones

Is it possible to buy universal ears inexpensively? 3,000 rubles - is it possible to buy high-quality headphones for that kind of money? As it turned out, yes. And speech...

The main camera of a mobile device is usually located on the back of the body and is used for taking photos and videos

The main camera of a mobile device is usually located on the back of the body and is used for taking photos and videos

An updated version of the tablet with improved characteristics and high autonomy. Acer smartphones are rarely visited...

How to switch to another operator while keeping your number

How to switch to another operator while keeping your number

The law on preserving a telephone number when a subscriber switches to another mobile operator came into force in Russia on December 1. However, it turned out that...

review of a phablet, expensive, but very competent

review of a phablet, expensive, but very competent

Review of a phablet, expensive, but very competent 03/20/2015 I am the only shoemaker in the world without boots, a smartphone reviewer without my own smartphone....

PC settings, updates, maintenance, settings