Масштаб под монитор

Логотип, который масштабируется под любой разрешение монитора пользователя
Периодически нам всем попадаются форумы или сайты, с очень длинным логотипом, настолько длинным, что он растягивает всю таблицу форума или сайта, при этом весь форум на экране монитора не помещается и чтобы увидеть, что там, за правым углом, нужно подвигать нижней полосой прокрутки.
Сайт или форум, растянутый в ширину больше, чем экран пользователя — картина мало привлекательная. Но что делать, если автору дизайна непременно хочется, чтобы логотип располагался во всю ширину экрана, а разрешение по горизонтали на разных мониторах может быть очень разным: от 800 по 1900?
Выход один — нужно сделать логотип, чтобы он сам приспосабливался под разрешение монитора вашего посетителя, чтобы логотип масштабировался.

1 способ: картинка-фон
Самый простой способ — сделать очень длинную картинку для логотипа, картинку, рассчитанную на максимальное разрешение монитора, поставить её в табличку фоновым изображением, а табличку сделать шириной 100% (или 90 % — смотря как Вам нужно для Вашей идеи дизайна)

Всем юзерам всегда будет видна левая её часть и потому, если Вы хотите написать что-то на логотипе, лучше написать это в левой части. Правая часть будет показываться вашим юзерам в соответствии с разрешением монитора каждого: чем большее разрешение — тем длиннее картинку он увидит. Но в любом случае, такой логотип не растянет дизайн сайта.

Код такого логотипа:

<table width=»100%» border=»0″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td height=»135″ style=»background:url(‘Адрес нашей картинки’)» >
</td>
</tr>
</table>

Пример можно посмотреть здесь

Обращаю Ваше внимание: в табличке нужно прописать реальную высоту картинки, например height=»135″, но не прописывать ширины!

В чём недостаток данного способа? Вы, наверное, сами понимаете: картинка, показывающаяся как фон, очень большая, и вероятно будет достаточно тяжёлая, а наша задача — сделать дизайн как можно легче, чтобы он открывался быстрее и не забирал много трафика у посетителей.

Потому можно создать масштабирующийся логотип по другому принципу.

2 способ: картинка + фон

На картинке, которая будет располагаться по левому краю лого, мы пишем и рисуем всё, что нам нужно:

Всё остальное место на нашем логотипе займёт масштабирующийся фон. Фон желательно сделать как можно легче: например, в данном случае, это полоска в высоту логотипа и шириной в 1 px.

Код такого логотипа:

<table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»100%» height=»52″ style=»background:url(‘Адрес фоновой картинки’) repeat-x;»>
<tr>
<td width=»374″> <img src=»Адрес картинки логотипа (который стоит в левом углу)» border=»0″>
</td>
<td style=»padding-bottom:20px;»> <span style=»color:#ffffff;font:20pt bold;» > <b> Координационный форум админов </b> </span>
</td>
</tr>
</table>

Посмотреть, что получилось можно здесь

Поскольку лучше использовать всё пространство информативно, то я написала на нашем синем фоне текст: «Координационный форум админов» (это название нашего реального форума, Вы, естественно, напишете то, что захотите)
Итак, ширина нашей таблички — 100%, высота — это высота вашей картинки и картинки фона (в данном случае height=»52″). Далее мы ставим фоном изображение нашей тоненькой синей полоски, с пометкой repeat-x, т.е. повторить картинку столько, сколько нужно. В первой ячейке мы размещаем картинку лого, (в данном случае красноармеец, т.е. «синеармеец» с надписью, которая должна урезонить каждого лентяя). Далее идёт следующая ячейка с надписью «Координационный форум админов» (указаны цвет, величина и пр.)

Однако кому-то и этого может показаться мало.

3 способ: картинка справа и картинка слева, между ними — масштабирующийся фон.

Это может показаться скучно — всего одна картинка слева. Например, я хочу, чтобы у меня на логотипе была одна картинка слева, одна — справа, а в середине — масштабирующийся фон.
Именно это я и сделала на своём сайте.

Код логотипа:

<table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»100%» style=»background:url(‘Адрес фоновой картинки’) #000000;» height=»223″>
<tr>
<td width=»216″> <img src=»Адрес левой картинки логотипа» border=»0″>
</td>
<td width=»509″ height=»223″ style=»background:url(‘Адрес правой картинки логотипа’) right no-repeat; color:#000000;» >
</td>
</tr>
</table>

Пример можно посмотреть на моём сайте palmernw.ru

Здесь в табличку мы проставляем фон (указывая его высоту), в первой ячейке — левую картинку, с изображением церкви, прописывая её ширину в ячейке: width=»216″ (высота у нас уже прописана в тэге table).
Во второй ячейке мы прописываем фоном вторую картинку с надписью «Монастыри и храмы…», обязательно добавив right no-repeat, чтобы наша вторая картинка не размножалась, как фоновое изображение, а стояла строго в правом углу, никуда не двигаясь.

Почему надпись написана прямо на картинке, расположенной справа? Потому, что я решила написать её шрифтом StaroUspenskaya Caps ieUcs. Но если я укажу в коде логотипа: span style=»color:#ffeaa3;font:30pt bold StaroUspenskaya Caps ieUcs;», то мой замечательный экзотический шрифт увидят лишь те немногие, кто заранее скачал и установил у себя на компьютере этот редкий шрифт. Но, по логике вещей, вряд ли у всех юзеров, посещающих мой сайт, есть такой шрифт, а потому, скорее всего надпись они увидят каким-нибудь банальным шрифтом, который стоит у них в браузере по умолчанию, например, обычным Arial.
В общем, хотите написать что-нибудь экзотическим шрифтом — пишите в фотошопе, прямо на картинке.

Надеюсь, с этим логотипом всё понятно.

4 вариант: картинка справа и картинка слева, между ними — масштабирующийся фон, но надпись, наплывает на картинку

Надпись сделанная в фoтошопе прямо на картинке, это, конечно, красиво, но не всегда практично. Например, поисковик, пришедший на ваш сайт, не сможет это оценить, ведь он может прочитать только реальную надпись в HTML. Поэтому писать название своего сайта лучше всё-таки текстом в коде самого логотипа.

Итак, делаем логотип: картинка справа, картинка слева, между ними — на фоне текст. Но, например, мне хочется, чтобы моя надпись не начиналась там, где кончается левая картинка, а как бы наплывала на неё. Как сделано на этой странице

Это очень просто: нужно прописать часть левой картинки фоном и тогда надпись спокойно расположится поверх изображения.

Код логотипа:

<table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»100%» style=»background:url(‘Адрес размножающейся картинки фона’) #E2C275;» height=»293″>
<tr>
<td width=»200″> <img src=»Адрес левой картинки логотипа» border=»0″> </td>
<td align=»center» style=»background:url(‘Адрес не размножающейся фоновой картинки, на которую наплывает надпись’) left no-repeat;padding-bottom:50px;» valign=»bottom»> <span style=»color:#ffffff;font:30pt bold Verdana,Tahoma;» > <b> Странный город, таинственный город… </b> </span>
</td>
<td width=»200″ height=»293″ style=»background:url(‘Адрес фоновой картинки, которая стоит справа и не размножается’);color:#790000;» >
</td>
</tr>
</table>

Наш логотип состоит из четырёх картинок.

Крайняя левая картинка:

 

Рядом — стоящая к ней вплотную следующая левая картинка, прописанная неповторяющимся фоном:

 

Затем мы видим масштабирующийся участок фона (маленький квадратик, который размножается на всю ширину экрана):

 

За ним — крайняя правая картинка, также прописанная неповторяющимся фоновым изображением.

Как вы видите, левая картинка разделена на две половинки, вторая половинка поставлена фоном и именно на ней начинается наша надпись: «Странный город, таинственный город…» Мне захотелось, чтобы надпись была не строго в центре, а слегка смещена вниз. Для этого, в стиле ячейки прописано: valign=»bottom». Как Вы помните по предыдущим урокам, это означает выравнивание нашей надписи по нижнему краю. Однако, если мы ограничимся только valign=»bottom», наша надпись будет лежать вплотную на нижнем крае логотипа. Чтобы чуть-чуть её приподнять пишем:
padding-bottom:50px — нижний отступ (поле) в 50 px, иными словами говоря, высоту, на которую поднимется Ваш текст от нижней рамки ячейки. Меняя значения вы можете приподнимать или опускать надпись как хотите. Если вообще убрать из стилей ячейки valign=»bottom» padding-bottom:50px, ваша надпись будет располагаться ровно в середине ячейки.

Думаю, что можно придумать ещё много вариантов масштабирующихся логотипов!

The logo, which scales to any screen resolution User

From time to time we all come across forums or sites with very long logo, so long that it stretches the entire table forum or site, and the entire forum on the screen does not fit, and to see what is out there, beyond the right angle, it is necessary to move the bottom of the scroll bar .
Website or forum that spans across more than a user’s screen — a picture of a little attractive. But what if the author of the design certainly want the logo was placed across the entire width of the screen, and the horizontal resolution on different screens can be very different: from 800 to 1900?
Only one way out — you need to make the logo that he adapts to the screen resolution of your visitor to scaled logo.

Method 1: Picture background
The easiest way — to make a very long image for the logo image, designed for a maximum screen resolution, put it in a plate background image, and make the plate width of 100% (or 90% — depending on how you need for your design ideas)

All users to always be visible to the left part of it because if you want to write something on the logo, it is better to write it in the left side. The right side of your users to be shown in accordance with a resolution of each monitor: the greater the resolution — the longer the picture he sees. But in any case, this does not stretch the logo design of the site.

The code of the logo:

<table width = «100%» border = «0» cellpadding = «0» cellspacing = «0»>
<tr>
<td height = «135» style = «background: url (‘Address of our pictures’)»>
</ td>
</ tr>
</ table>

An example can be seen here

I draw your attention: the tablet is necessary to register the real height of the image, such as height = «135», but does not prescribe the width!

What is the disadvantage of this method? You probably understand: the picture shows as a backdrop, is very large, and is likely to be quite severe, and our task — to make the design as easily as possible, so that it opens quickly and takes a lot of traffic from visitors.

Because you can create a scaled logo on a different principle.

Method 2: picture + background

In the picture, which will be located on the left edge of the logo, we write and draw everything that we need:

All the remaining space on our logo will take scaled background. Background desirable to make as easy as possible: for example, in this case a strip of a width and height of the logo 1 px.

The code of the logo:

<table border = «0» cellpadding = «0» cellspacing = «0» width = «100%» height = «52» style = «background: url (‘Address wallpaper’) repeat-x;»>
<tr>
<td width = «374»> <img src = «Address Pictures logo (which is in the left corner)» border = «0»>
</ td>
<td style = «padding-bottom: 20px;»> <span style = «color: #ffffff; font: 20pt bold;» > <B> Coordination Forum admins </ b> </ span>
</ td>
</ tr>
</ table>

See what happened here

As is better to use the entire space of informative, I wrote on our blue background text: «The Coordination Forum admins» (the name of our real offline, you naturally write what you want)
Thus, the width of our plate — 100%, height — is the height of your image and the background image (in this case height = «52»). Next, we set the background image of our thin blue strip labeled repeat-x, ie repeat the image as much as you need. In the first cell we put the logo image (in this case the Red Army, that «sinearmeets» with the inscription, which is to reason with each tape). Next comes the next box that says «The Coordinating Forum admins» (indicated by color, size and so on.)

But someone and this may sound a little.

3 method: the picture on the right and the picture on the left, between them — scaled background.

This may sound boring — only one picture left. For example, I want to have my logo was a picture on the left, one — on the right and in the middle — scaled background.
That’s what I did on the site.

The code of logo:

<table border = «0» cellpadding = «0» cellspacing = «0» width = «100%» style = «background: url (‘Address wallpaper’) # 000000;» height = «223»>
<tr>
<td width = «216»> <img src = «Address the left image of the logo» border = «0»>
</ td>
<td width = «509» height = «223» style = «background: url (‘images of the logo the right address’) right no-repeat; color: # 000000;» >
</ td>
</ tr>
</ table>

An example can be found on my website palmernw.ru

Here we stamped plate background (specifying its height), the first cell — the left picture with the image of the Church, prescribing its width in the cell: width = «216» (height we have already written into the tag table).
In the second cell, we prescribe a second background image with the words «Monasteries and temples …», be sure to add right no-repeat, to our second picture is not bred as a background image, and was strictly in the right corner, not moving anywhere.

Why the inscription is written right on the picture to the right? Because I decided to write her letters StaroUspenskaya Caps ieUcs. But if I point out in the code of the logo: span style = «color: # ffeaa3; font: 30pt bold StaroUspenskaya Caps ieUcs;», then my wonderful exotic font see only those few who previously downloaded and installed on your computer this rare print. But, logically, it is unlikely that all users who visit my site, there is such a font, and therefore, most likely sign they see some banal font that is in their default browser, for example, the usual Arial.
In general, you want to write something exotic letters — write in Photoshop directly on the picture.

Hopefully, with this logo, everything is clear.

4 variant: the picture on the right and the picture on the left, between them — scaled background, but the inscription, slides over the picture

The inscription made in fotoshope directly on the picture, it is certainly beautiful, but not always practical. For example, a search engine that came to your site, will not be able to appreciate it, because it can only read a real inscription in HTML. Therefore, write the name of your website it is better to text in the code of the logo.

So, do the logo: the picture on the right, the picture on the left, among them — on the background of the text. But, for example, I want to get my label did not start where the ends left picture, but as it slides over it. How did this page

It’s very simple: it is necessary to prescribe the left part of the background image and then the label is quietly located on top of the image.

The code of logo:

<table border = «0» cellpadding = «0» cellspacing = «0» width = «100%» style = «background: url (‘Address breeding background image’) # E2C275;» height = «293»>
<tr>
<td width = «200»> <img src = «Address the left image of the logo» border = «0»> </ td>
<td align = «center» style = «background: url (‘Address breeding background image, which slides over the inscription’) left no-repeat; padding-bottom: 50px;» valign = «bottom»> <span style = «color: #ffffff; font: 30pt bold Verdana, Tahoma;» > <B> Strange town, the mysterious city … </ b> </ span>
</ td>
<td width = «200» height = «293» style = «background: url (‘Address the background image, which is right and does not breed’); color: # 790000;» >
</ td>
</ tr>
</ table>

Our logo consists of four pictures.

The leftmost picture:

Next — standing close to her left next picture-written non-recurring background:

Then we see a scaled portion of the background (small box that reproduces the entire width of the screen):

Behind him — the rightmost picture as the background image-written non-recurring.

As you can see, the left picture is divided into two halves, the second half of the background and put it on it starts our inscription: «Strange town, the mysterious city …» I wanted to sign was not strictly in the center and slightly displaced downward. To do this, in the style of the cell is written: valign = «bottom». As you recall from the previous lessons, this means the alignment of our label on the bottom edge. However, if we confine ourselves to valign = «bottom», our label will be based closely on the lower edge of the logo. To little to lift her writing:
padding-bottom: 50px — bottom margin (field) 50 px, saying, in other words, the height to which rises from the bottom of your text frame cell. By changing the values, you can raise or lower the label you want. If you remove all of the styles cell valign = «bottom» padding-bottom: 50px, your inscription will be located exactly in the middle of the cell.

I think that you can come up with many more options scaled logos!