Что можно растянуть в Интернете
Вы когда-нибудь обращали внимание на компоновку, структуру сайта? Замечали наверное, что они все различаются. Есть сайты, которые висят слева экрана, а справа от них пустая полоса, либо по центру экрана. Но в любом случае, такие сайты ограничены разрешением 800х600 и никуда от этого не деться. Соответственно, при просмотре этих сайтов на мониторах с высоким разрешением, наблюдается или совершенно жуткая поолоса справа или полосы слева и справа.
Сам собой напрашивается вопрос – ведь делают как-то сайты, растягивающиеся на весь экран, почему тут нельзя было так сделать? Но иногда действительно нельзя.
Если нельзя, но очень хочется
 Возьмем самый распостраненный пример – сайт зажимается под размер экрана 800х600 и ставится по центру экрана. Это называется сделать сайт малой кровью. Дизайн для него делается просто – рисунок нарезается на кучу картинок, которые в том же порядке и заверстываются. Дешево и сердито. И иногда даже красиво. Но вот только у такой компоновки просто куча минусов. Например, мы хотим сделать выпадающие меню. Выпадающие меню делаются, как известно, абсолютно позиционируемыми слоями (тэгами <div>) у которых меняется атрибут visibility. В обычном состоянии слой невидимый, а при наведении мышки на какой-то объект становится видимым. Но у слоев есть такая нехорошая особенность привязываться к конкретным координатам экрана.
Вся координатная сетка считается от левого верхнего угла и зависит от размеров окна и разрешения экрана. И вот нам на сайте, заверстанным в виде центральной колонны, необходимо сделать выпадающие меню… К координатам слои не привяжешь – координаты точек этой колонны постоянно меняются при смене размеров рабочего окна (чем окно больше, тем полосы слева и справа шире и соответственно меняется расстояние между левым краем окна и краем заверстанного материала). Можно, конечно, написать скрипт, который в реальном времени будет считывать размер окна и в зависимости от этого позиционировать слои. Но нужно ли? Итог – такой вариант подходит в том случае, когда нету времени что-нибудь мудрить, когда надо сделать побыстрее, попроще и не надо делать выпадающие меню. Очень хорошо себя оправдывает, когда надо сделать не меняющиеся в размерах колонки текста или поля для вывода информации. Верстка не очень высокого уровня сложности. Но как быть, если хочется сделать просто, но со слоями? |
Такой большой и безобразничаешь…
Обратимся к классическому примеру – сайт зажимается на 800х600 и делается в виде полосы, отцентрированной слева. Это то же самое, что и вышеописанный вариант, только тут уже есть к чему привязать слои, т.к. слева расстояние до границы окна не менятся и примерно равно нулю. Ну а вот сюда мы можем навесить тонны слоев.
Также хорошо себя оправдывает для заверстки массы текста в виде колонок, создания систем новостей, новостные порталы и.т.п. короче, где будет много текста. Но страшный минус такого подхода – огромнейшая полоса справа при сверхвысоких разрешениях экрана… И с этим уже ничего не сделаешь. Некрасиво получается, портится весь дизайн.
Но есть еще одно решение – самое сложное, самое красивое, самое удобное и оптимальное. Оно уже начинает завоевывать сердца веб-разработчиков и заказчиков. В таком решении нет размеров, ничего никуда не зажимается. Это называется – "резиновый дизайн".
Резиновый дизайн
Резиновой может быть соска, резинка от трусов, в крайнем случае презерватив, хотя там используется не совсем резина. И вот теперь выясняется, что и дизайн может быть резиновым. Это значит, что сайт может тянуться под разрешение экрана, окна и чего угодно, там нет размеров. Яркий пример – этот вот сайт. Он рассчитан на любое разрешение, начиная с 800х600, у него нет никаких ограничений. А все потому, что все размеры указываются в процентах. Но это не самое главное – главное изначально так нарисовать дизайн, чтобы из него можно было бы сделать сайт-резинку. Вот тут начинаются сложности.
Рисуем резинку
 Как же нарисовать резиновый сайт? Для этого нужно учесть места растяжек и сделать там текстуры с возможностью тайлинга (стыковки). Где в основном делаются места растяжек? Обычно это самый верх, самый низ и вертикальные растяжки. Растяжка – это ячейка таблицы, у которой указан размер 100% и в которой лежит текстура. Остальные ячейки этой таблицы должны иметь размер 0%. Сверху может быть сразу несколько растяжек в разных местах, чтобы хорошо легли текстуры. Или например, сверху надо разместить меню, которое также может сидеть прямо в растяжке. Использование нескольких текстур с возможностью тайлинга одновременно называется мультитекстурированием. Когда макет нарезается на кусочки, из того что сверху, снизу (сбоку) вместо кусочков режутся текстуры, которые при верстке вставляются в таблицы-растяжки в виде background-а. Если в ячейках с background-ом ничего нет (например другой таблицы с меню) туда имеет смысл вставить прозрачный рисунок размером 1х1 пикс. чтобы Netscape не подавился, когда ему подсунут сие творение. Не надо забывать и про вертикальный тайлинг – когда страница наполняется текстом, все вертикальные текстуры должны тянуться. Например, мы имеем 2-х столбцовую таблицу, слева таблица с меню, справа – призывный текст. Дизайн у нас такой, что ниже меню должна идти какая-нибудь вертикальная текстура до самого нижнего края. Это все хорошо работает, когда призывный текст маленький и нижний край страницы как раз доходит до меню. А что делать, если призывный текст огромен и сайт вытянулся вниз? Таблица с меню у нас висит в левом столбце сверху, но растягиваться до самого низу она не хочет. Это решается очень просто – в левый столбец прямо под таблицу с меню кладется нужная текстура с вертикальным тайлингом. И все. В этой статье мы вкратце обьяснили что такое резиновые сайты, и по какому принципу их делают. |
Эта мелочь защитит вас обоих
А теперь смело можно переходить к тому, ради чего и была написана эта статья. Чем резиновый сайт лучше своих собратьев? Приведем конкретные примеры.
Резиновый сайт занимает все пространство экрана, поэтому дизайнерское решение тут воплощается наиболее полно. В резиновом сайте смело можно делать минимум графики – итак все будет красиво. И возвращаясь к пресловутым слоям – их в резиновом дизайне очень легко позиционировать по левому краю, что и нужно делать. Ну и просто красиво это смотрится.
У такой компоновки есть свои минусы, например то, что текст разьезжается в зависимости от размера окна, но это мелочи. Итак на наш взгляд, будущее за резиновыми сайтами, резиновыми дизайнами и вообще, за всем резиновым. Как в известной рекламе – "Эта мелочь защитит вас обоих"…
Примечание: В качестве примеров использованы только работы компании МиллиАРТ.
 |
|
|
|
|
