When designing sites, you often have to solve a fundamental question: what will be the behavior of the page when it is opened with different screen resolutions? There are two options here - "rubber" (stretching) site pages or static. The first option will be discussed. Whatever your preference for layout, the main tenet of stretch design is relative scalability.
It is necessary
- - knowledge of HTML;
- - program for editing html-code.
Instructions
Step 1
Select the main file for your site template, which will reflect the main markup. It can be index.html or index.php file. One of the best visual site template editing software is Macromedia Dreamweawer. The necessary editing will be done on the basis of this program.
Open the template file or create a new one by command "File" - "New", category - "Base page" - "HTML" or category "Dynamic page" - "PHP". Here we consider the general case when the site structure is recorded in exactly one of the two files.
Step 2
It has long been no secret that there are different types of layout - on tables, on div-blocks and combined (tables and blocks at the same time). The html tag is responsible for the table layout
Specify a percentage (100%) for each property. This will achieve the effect of automatically stretching table cells on screens with any geometry. It can be a 19-inch monitor or a smartphone - each of them will correctly reproduce the content.
Step 3
If you need to specify exactly the correspondence between table cells, then use the following example:
| … … the contents of cell 1. … | … … the contents of cell 2. … |
Here you will see that one of the cells is specified with a width of 30% of everything that is defined for the table itself. A simple calculation shows that 100% -30% = 70% remains for the second cell. Remember that in this case one of the table cells must not have the width attribute set. The browser will make all calculations on its own and will correctly stretch the table with cells. Content inside tables will also stretch and shrink correctly across different screens.
Step 4
In a situation with a div layout, the tag blocks are stretched by default to the full width of the screen and follow one after another from left to right, from top to bottom. To refine their geometry, create a CCS class or identifier (ID), in which you specify, for example, attributes and / or for the category of dimensions and position of the box (Box). Don't forget to link the specified style to the site markup file and bind the class (ID) to the required tag. Usually it is placed at the very beginning of the script, defining all future site geometry:
… … site content. …
Or like this:
… … site content. …
The code for the CSS rule will be as follows:
… myclass {
width: 30%;
height: 50%;
}
#myID {
width: 30%;
height: 50%;
}
