Маштабирующая рамка

Масштабирующаяся рамка в обрамлении страницы, картинки, логотипа, таблиц, текста и пр.: общий принцип
Создание масштабирующихся рисунков для страницы сайта достаточно актуально. Ведь часто для того, чтобы украсить свои страницы, мы вставляем в них рисунки. Если рисунок не масштабируется, то на мониторах с разным разрешением он будет выглядеть непредсказуемо. К примеру, растягивать таблицу или выезжать за край монитора, от чего снизу появляется горизонтальная полоса прокрутки, что для вас, как для дизайнера — существенный минус.
О масштабирующихся логотипах поговорим в другой раз, начнём с более простого: масштабирующейся рамки. Допустим, мы хотим, чтобы по периметру нашей страницы стояла красивая декоративная рамочка. Что нужно делать?

1. Для начала нужно подобрать соответствующий рисунок, или нарисовать его. У такого рисунка будут некоторые закономерности. Рассмотрим на примере:

Детали 01, 02, 03, 04, 05, 06, 07, 08 — это и есть части для нашей рамочки. Их нужно нарисовать или вырезать из готового рисунка вот по какому принципу:
стороны «а» каждой детали должны совпадать по конфигурации со сторонами «а», а стороны «в» — соответственно, со сторонами «в». Если вы внимательно присмотритесь, то поймёте, почему это необходимо: этими сторонами наши детали будут соприкасаться друг с другом и рисунок на них должен точно совпадать.
Например, правая сторона «а» детали «02» — это зеркальное отражение левой стороны «а» той же детали «02».

Для создания таких рисунков есть много способов, всё это можно сделать в графической программе типа «фотошоп» или той, которая имеется у вас.

2. Теперь, когда у нас есть рисунок, надо прописать для него табличку такого вида:

То есть, нам нужна табличка на три строки, по три ячейки в каждой строке, с заданным размером ячеек под детали 01, 03, 06 и 08. А масштабирующиеся детали 02, 04, 05 и 07 нужно прописать как фоновое изображение в соответствующие ячейки. Пишем код этой таблицы:

<table align=»center» width=»95%» border=»0″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td width=»21″ height=»22″> <img src=»01.jpg» border=»0″> </td>
<td style=»background:url(’02.jpg’);»> </td>
<td width=»21″ height=»22″> <img src=»03.jpg» border=»0″> </td>
</tr>
<tr>
<td style=»background:url(’04.jpg’);» > </td>
<td align=»center» body bgcolor=#000000>

<FONT COLOR=#ffffc9 STYLE=»font-size:24pt»> СОДЕРЖИМОЕ ТАБЛИЦЫ (пустая ячейка в центре) </font>

</td>
<td style=»background:url(’05.jpg’);» > </td>
</tr>
<tr> <td width=»21″ height=»22″> <img src=»06.jpg» border=»0″> </td>
<td style=»background:url(’07.jpg’);» > </td>
<td width=»21″ height=»22″> <img src=»08.jpg» border=»0″> </td>
</tr>
</table>

width=»21″ height=»22″ — это высота и ширина наших деталей 01, 03, 06 и 08. <img src=»06.jpg» border=»0″> — адрес рисунка. Поскольку рисунок я в данном случае кладу в ту же папку, где будет лежать сама страница сайта, я прописываю только название рисунка — «06.jpg». Если же вы положите рисунки для таблички, к примеру, на фоторадикал, вам нужно будет ввести вместо «06.jpg» — полный url-адрес рисунка , который выглядит к примеру: http://fotoradical.ru/0123456.jpg

Детали, которые должны размножаться, вы прописываете в соответствующие ячейки как фоновое изображение: style=»background:url(’07.jpg’);» и точно так же, если будете класть рисунки на фоторадикал, вместо 07.jpg — полный url-адрес рисунка.

В данном случае, поскольку мы взяли рисунок с преобладающим чёрным цветом, я поставила фон внутри центральной ячейки — чёрный: body bgcolor=#000000

Общая деталь для всей таблицы — cellpadding=»0″ cellspacing=»0″ — очень важна, потому что между ячейками не должно быть зазоров, иначе рисунки будут не совпадать.

Ширину таблицы с рамочкой и выравнивание вы задаёте в процентах, как вы хотите, чтобы она располагалась в том месте страницы, в каком вы пожелаете. Я поставила: table align=»center» width=»100%»
И, чтобы табличка гармонично смотрелась на странице, я задала цвет всей страницы тоже чёрный. Теперь вся страница html будет выглядеть так:

<html> <head> <title> Наша первая страница с рамочкой </title> </head> <body bgcolor=»#000000″>

<table align=»center» width=»95%» border=»0″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td width=»21″ height=»22″> <img src=»01.jpg» border=»0″> </td>
<td style=»background:url(’02.jpg’);»> </td>
<td width=»21″ height=»22″> <img src=»03.jpg» border=»0″> </td>
</tr>
<tr>
<td style=»background:url(’04.jpg’);» > </td>
<td align=»center» body bgcolor=#000000>

<FONT COLOR=#ffffc9 STYLE=»font-size:24pt»> СОДЕРЖИМОЕ ТАБЛИЦЫ (пустая ячейка в центре) </font> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</td>
<td style=»background:url(’05.jpg’);» > </td>
</tr>
<tr> <td width=»21″ height=»22″> <img src=»06.jpg» border=»0″> </td>
<td style=»background:url(’07.jpg’);» > </td>
<td width=»21″ height=»22″> <img src=»08.jpg» border=»0″> </td>
</tr>
</table>

 

</body>
</html>

В готовом виде выглядит так:
Наша первая страница: чёрный фон, масштабирующаяся табличка в обрамлении страницы

В тело таблички, на место моей надписи (выделено зелёным цветом), можно поставить любое содержимое, например все другие таблицы вашей страницы сайта.

Scaled frame framed pages, pictures, logos, tables, text, etc .: general principle

 

Create scaled drawings for site pages rather overdue. After all, often in order to decorate their pages, we put them in the drawings. If the picture does not scale, then on monitors with different resolutions it will look unpredictable. For example, stretch the table or leave the edge of the monitor, from which the bottom horizontal scroll bar appears that you, as a designer — a significant minus.

About scaled logos talk another time, let’s start with the simpler: scaled frame. Let’s say we want around the perimeter of our pages was beautiful decorative frame. What do we have to do?

 

1. First you need to choose the appropriate image, or draw it. In this picture there are some patterns. Consider the following example:

 

 

 

 

Items 01, 02, 03, 04, 05, 06, 07, 08 — that is part of our frames. They need to draw or cut out from the finished drawing here on what basis:

side «a» of each part must be identical in configuration with the sides «a» and the side «a» -, respectively, with the sides «a». If you look closely, you will understand why this is necessary: these sides our items will be in contact with each other and figure they must match exactly.

For example, the right side «and» parts «02» — a mirror image of the left side «and» the same part of «02».

 

To create these paintings there are many ways, all this can be done in a graphics program such as «Photoshop» or one that is available to you.

 

2. Now that we have a picture, you have to register for a plate like this:

 

 

That is, we need a sign on the three lines, three cells in each row with the specified mesh size under parts 01, 03, 06 and 08. A scaled parts 02, 04, 05 and 07 need to register as a background image in the appropriate cells. Writing code in this table:

 

<table align = «center» width = «95%» border = «0» cellpadding = «0» cellspacing = «0»>

<tr>

<td width = «21» height = «22»> <img src = «01.jpg» border = «0»> </ td>

<td style = «background: url (’02 .jpg ‘);»> </ td>

<td width = «21» height = «22»> <img src = «03.jpg» border = «0»> </ td>

</ tr>

<tr>

<td style = «background: url (’04 .jpg ‘);» > </ Td>

<td align = «center» body bgcolor = # 000000>

 

<FONT COLOR = # ffffc9 STYLE = «font-size: 24pt»> contents of the table (the empty box in the middle) </ font>

 

</ td>

<td style = «background: url (’05 .jpg ‘);» > </ Td>

</ tr>

<tr> <td width = «21» height = «22»> <img src = «06.jpg» border = «0»> </ td>

<td style = «background: url (’07 .jpg ‘);» > </ Td>

<td width = «21» height = «22»> <img src = «08.jpg» border = «0»> </ td>

</ tr>

</ table>

width = «21» height = «22» — this is the height and width of our items 01, 03, 06 and 08. <img src = «06.jpg» border = «0»> — the address of the image. Since the figure in this case I put in the same folder where it will be based on the very page of the website, I prescribe only the name of the figure — «06.jpg». If you put the drawings for plates, for example, on fotoradikal, you will need to enter instead of «06.jpg» — full address url-pattern that looks for example: http://fotoradical.ru/0123456.jpg

 

Details that need to multiply, you have to write in the corresponding cell as the background image: style = «background: url (’07 .jpg ‘);» and similarly, if you put pictures on fotoradikal instead 07.jpg — full address url-pattern.

 

In this case, as we have with the prevailing pattern in black, I put the background inside the central cell — black: body bgcolor = # 000000

 

Total item for the entire table — cellpadding = «0» cellspacing = «0» — is very important because between the cells should not be gaps, otherwise the figures would be different.

 

The width of the table with the frame and the alignment you specify the percentage you want to be located in the place of the page, in which you wish. I put: table align = «center» width = «100%»

And to label harmoniously looked at the page, I set the color of the entire page is also black. Now the whole html page will look like this:

 

<html> <head> <title> Our first outline in a page with </ title> </ head> <body bgcolor = «# 000000»>

 

<table align = «center» width = «95%» border = «0» cellpadding = «0» cellspacing = «0»>

<tr>

<td width = «21» height = «22»> <img src = «01.jpg» border = «0»> </ td>

<td style = «background: url (’02 .jpg ‘);»> </ td>

<td width = «21» height = «22»> <img src = «03.jpg» border = «0»> </ td>

</ tr>

<tr>

<td style = «background: url (’04 .jpg ‘);» > </ Td>

<td align = «center» body bgcolor = # 000000>

 

<FONT COLOR = # ffffc9 STYLE = «font-size: 24pt»> contents of the table (the empty box in the middle) </ font> <br> <br> <br> <br> <br> <br> <br> < br> <br>

 

</ td>

<td style = «background: url (’05 .jpg ‘);» > </ Td>

</ tr>

<tr> <td width = «21» height = «22»> <img src = «06.jpg» border = «0»> </ td>

<td style = «background: url (’07 .jpg ‘);» > </ Td>

<td width = «21» height = «22»> <img src = «08.jpg» border = «0»> </ td>

</ tr>

</ table>

 

 

</ body>

</ html>

In finished form it looks like this:

Our first page: black background, scaled plaque framed page

 

The body plate in the place of my writing (highlighted in green), you can put any content, such as all the other tables to your page.