В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"


НазадСодержаниеВперёд

Урок 15. Логотип, который масштабируется под любой разрешение монитора пользователя



Периодически нам всем попадаются форумы или сайты, с очень длинным логотипом, настолько длинным, что он растягивает всю таблицу форума или сайта, при этом весь форум на экране монитора не помещается и чтобы увидеть, что там, за правым углом, нужно подвигать нижней полосой прокрутки.
Сайт или форум, растянутый в ширину больше, чем экран пользователя - картина мало привлекательная. Но что делать, если автору дизайна непременно хочется, чтобы логотип располагался во всю ширину экрана, а разрешение по горизонтали на разных мониторах может быть очень разным: от 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, ваша надпись будет располагаться ровно в середине ячейки.

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




Перейти к Уроку 16

© А.М. Возлядовская. 2008-2010
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru



Навигация по урокам

Работа с хостингом

Регистрация на Narod.ru

Регистрация на платном хостинге

Переход с одного платного хостинга на другой


Вопросы по таблицам

Таблица как основа для страницы сайта: табличные теги "width", "border"

Таблица как модуль для ссылок: ячейки и строки ("td" и "tr"), значения атрибута "align"

Атрибут "VALIGN" и его значения. Атрибуты "cellpadding" и "cellspacing"

Сложные таблицы. Атрибуты атрибуты "colspan" и "rowspan"


Форматирование текста

Выравнивание текста (атрибут "align"). Имя, цвет, размер шрифта (font: family, face, color, size). Абзац ("p"). Как задать отступ красной строки (немного о стиле CSS)

Как прописать шрифты и заголовки в стилях CSS

Амперсанды. Текстовые теги. Специфические символы


Делаем ссылки

Как написать код ссылки

Как задать внешний вид ссылки (шрифт, цвет, размер и пр.) в стилях CSS

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

Внутристраничные ссылки или закладки (якоря)

Ссылка "Наверх"


Картинки (логотипы, баннеры, фон)

Загрузка изображений на Radikal.ru

Картинки в тексте

Как сделать работающую кнопку (баннер)

Как установить логотип, задать цвет фона (таблицы, страницы сайта), установить фоновое изображение. Атрибуты bgcolor и background

Как установить логотип через документ стилей CSS

Масштабирующиеся логотипы

Масштабирующиеся рамки в обрамлении таблицы (страницы)

Размещение картинки на странице с текстом

Неподвижный фон


Вопросы по JavaScript и динамическому html

Скрытый текст с помощью JavaScript и динамического html

Бегущая строка

Простейшие фотоальбомы

Сменяющийся логотип


Несколько советов по установке форумного движка SMF на платный хостинг