| Поиск по сайту |
|
На Главную Статьи современных авторов Художественные произведения Библиотека История Европы и Америки XIX-XX вв Как мы делали этот сайт Форум и Гостевая Полезные ссылки Статьи на заказ 
|
Урок 15. Логотип, который масштабируется под любой разрешение монитора пользователяПериодически нам всем попадаются форумы или сайты, с очень длинным логотипом, настолько длинным, что он растягивает всю таблицу форума или сайта, при этом весь форум на экране монитора не помещается и чтобы увидеть, что там, за правым углом, нужно подвигать нижней полосой прокрутки.
Пример можно посмотреть здесь Обращаю Ваше внимание: в табличке нужно прописать реальную высоту картинки, например height="135", но не прописывать ширины! В чём недостаток данного способа? Вы, наверное, сами понимаете: картинка, показывающаяся как фон, очень большая, и вероятно будет достаточно тяжёлая, а наша задача - сделать дизайн как можно легче, чтобы он открывался быстрее и не забирал много трафика у посетителей. Потому можно создать масштабирующийся логотип по другому принципу.
Посмотреть, что получилось можно здесь Поскольку лучше использовать всё пространство информативно, то я написала на нашем синем фоне текст: "Координационный форум админов" (это название нашего реального форума, Вы, естественно, напишете то, что захотите) Итак, ширина нашей таблички - 100%, высота - это высота вашей картинки и картинки фона (в данном случае height="52"). Далее мы ставим фоном изображение нашей тоненькой синей полоски, с пометкой repeat-x, т.е. повторить картинку столько, сколько нужно. В первой ячейке мы размещаем картинку лого, (в данном случае красноармеец, т.е. "синеармеец" с надписью, которая должна урезонить каждого лентяя). Далее идёт следующая ячейка с надписью "Координационный форум админов" (указаны цвет, величина и пр.) Однако кому-то и этого может показаться мало. 3 способ: картинка справа и картинка слева, между ними - масштабирующийся фон. Это может показаться скучно - всего одна картинка слева. Например, я хочу, чтобы у меня на логотипе была одна картинка слева, одна - справа, а в середине - масштабирующийся фон. Именно это я и сделала на своём сайте. Код логотипа:
Пример можно посмотреть на моём сайте 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. Поэтому писать название своего сайта лучше всё-таки текстом в коде самого логотипа. Итак, делаем логотип: картинка справа, картинка слева, между ними - на фоне текст. Но, например, мне хочется, чтобы моя надпись не начиналась там, где кончается левая картинка, а как бы наплывала на неё. Как сделано на этой странице Это очень просто: нужно прописать часть левой картинки фоном и тогда надпись спокойно расположится поверх изображения. Код логотипа:
Наш логотип состоит из четырёх картинок. Крайняя левая картинка:  Рядом - стоящая к ней вплотную следующая левая картинка, прописанная неповторяющимся фоном:  Затем мы видим масштабирующийся участок фона (маленький квадратик, который размножается на всю ширину экрана):  За ним - крайняя правая картинка, также прописанная неповторяющимся фоновым изображением.  Как вы видите, левая картинка разделена на две половинки, вторая половинка поставлена фоном и именно на ней начинается наша надпись: "Странный город, таинственный город..." Мне захотелось, чтобы надпись была не строго в центре, а слегка смещена вниз. Для этого, в стиле ячейки прописано: valign="bottom". Как Вы помните по предыдущим урокам, это означает выравнивание нашей надписи по нижнему краю. Однако, если мы ограничимся только valign="bottom", наша надпись будет лежать вплотную на нижнем крае логотипа. Чтобы чуть-чуть её приподнять пишем: padding-bottom:50px - нижний отступ (поле) в 50 px, иными словами говоря, высоту, на которую поднимется Ваш текст от нижней рамки ячейки. Меняя значения вы можете приподнимать или опускать надпись как хотите. Если вообще убрать из стилей ячейки valign="bottom" padding-bottom:50px, ваша надпись будет располагаться ровно в середине ячейки. Думаю, что можно придумать ещё много вариантов масштабирующихся логотипов! Перейти к Уроку 16 © А.М. Возлядовская. 2008 |
