The centrally located area of the main page for the desktop version contains 3 columns. In the left column are sections with telephone numbers and news announcements. On the left side are advertisements. Center-formatted space includes a text element and a photo for publications.
We start index.html and under the slider_ container (PIC) we mark out the graphic space described earlier:
To indicate the location of the informative component of the page in the middle, we form the center_wrap framing container, which includes shells for those placed on the right, left and main () side. The markup uses specialized tags from the html 5 toolkit.
Probably noticed that the code for the columns created on the right is the priority in the stream. This contributes to the fact that in IE 7 there will be no overlays with the location at the time of setting the float: right; parameter, which provides the ability to move the compartment to the right.
Let's start filling. Subject to careful consideration of the layout, it is easy to notice that the blocks in the side columns are characterized by a uniform width, the general style of the title - differences are present only in the content. This allows us to apply uniform styles to the entire number of blocks displayed in these columns. The layout of the center area under development is especially simple - we place the information component and photos in p, place the title in h1.
Let's make a visual design. For smartphones, we cut out the icons from the layout, save them in the images folder with the names sity.png for stationary No and velcom.png for the provider of the mobile network. Images in a text publication and advertising modules should be placed in a new folder. Compared to the icons, these pictures do not appear as details of the page styling. Save a separate directory with the name pic in the images folder and copy two illustrations for banners (banner_1, ...) and the same number of illustrations for text (pic_1, ... with the jpg extension).
If you have not figured out and understood where and what is placed, then download the link below for an option of what is created at this stage as a result. You can also order website layout by contacting company managers.