WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Архив » Резинка от трусов

Резинка от трусов


Дата публикации: 17-03-2013

... Или что можно "растянуть" в интернете
Вы когда-нибудь обращали внимание на компоновку, структуру сайта? Замечали наверное, что они все различаются. Есть сайты, которые висят слева экрана, а справа от них пустая полоса, либо по центру экрана. Но в любом случае, такие сайты ограничены разрешением 800х600 и никуда от этого не деться. Соответственно, при просмотре этих сайтов на мониторах с высоким разрешением, наблюдается или совершенно жуткая поолоса справа или полосы слева и справа.

Сам собой напрашивается вопрос - ведь делают как-то сайты, растягивающиеся на весь экран, почему тут нельзя было так сделать? Но иногда действительно нельзя.

Если нельзя, но очень хочется
Возьмем самый распостраненный пример - сайт зажимается под размер экрана 800х600 и ставится по центру экрана. Это называется сделать сайт малой кровью. Дизайн для него делается просто - рисунок нарезается на кучу картинок, которые в том же порядке и заверстываются. Дешево и сердито. И иногда даже красиво :) Но вот только у такой компоновки просто куча минусов. Например, мы хотим сделать выпадающие меню. Выпадающие меню делаются, как известно, абсолютно позиционируемыми слоями (тэгами
) у которых меняется атрибут visibility. В обычном состоянии слой невидимый, а при наведении мышки на какой-то объект становится видимым. Но у слоев есть такая нехорошая особенность привязываться к конкретным координатам экрана.

Вся координатная сетка считается от левого верхнего угла и зависит от размеров окна и разрешения экрана. И вот нам на сайте, заверстанным в виде центральной колонны, необходимо сделать выпадающие меню... К координатам слои не привяжешь - координаты точек этой колонны постоянно меняются при смене размеров рабочего окна (чем окно больше, тем полосы слева и справа шире и соответственно меняется расстояние между левым краем окна и краем заверстанного материала).

Можно, конечно, написать стремный скрипт, который в реальном времени будет считывать размер окна и в зависимости от этого позиционировать слои. Но нужно ли? Итог - такой вариант подходит в том случае, когда нету времени что-нибудь мудрить, когда надо сделать побыстрее, попроще и не надо делать выпадающие меню. Очень хорошо себя оправдывает, когда надо сделать не меняющиеся в размерах колонки текста или поля для вывода информации. Верстка не очень высокого уровня сложности. Но как быть, если хочется сделать просто, но со слоями?

Такой большой и безобразничаешь...
Обратимся к классическому примеру - сайт зажимается на 800х600 и делается в виде полосы, отцентрированной слева. Это то же самое, что и вышеописанный вариант, только тут уже есть к чему привязать слои, т.к. слева расстояние до границы окна не менятся и примерно равно нулю. Ну а вот сюда мы можем навесить тонны слоев.

Также хорошо себя оправдывает для заверстки массы текста в виде колонок, создания систем новостей, новостные порталы и.т.п. короче, где будет много текста. Но страшный минус такого подхода - огромнейшая полоса справа при сверхвысоких разрешениях экрана... И с этим уже ничего не сделаешь. Некрасиво получается, портится весь дизайн.

Но есть еще одно решение - самое сложное, самое красивое, самое удобное и оптимальное. Оно уже начинает завоевывать сердца веб-разработчиков и заказчиков. В таком решении нет размеров, ничего никуда не зажимается. Это называется - резиновый дизайн.

Резиновый дизайн
Резиновой может быть соска, резинка от трусов, в крайнем случае презерватив, хотя там используется не совсем резина. И вот теперь выясняется, что и дизайн может быть резиновым. Это значит, что сайт может тянуться под разрешение экрана, окна и чего угодно, там нет размеров. Яркий пример - этот вот сайт. Он рассчитан на любое разрешение, начиная с 800х600, у него нет никаких ограничений. А все потому, что все размеры указываются в процентах. Но это не самое главное - главное изначально так нарисовать дизайн, чтобы из него можно было бы сделать сайт-резинку. Вот тут начинаются сложности.

Рисуем резинку
Как же нарисовать резиновый сайт? Для этого нужно учесть места растяжек и сделать там текстуры с возможностью тайлинга (стыковки). Где в основном делаются места растяжек? Обычно это самый верх, самый низ и вертикальные растяжки. Растяжка - это ячейка таблицы, у которой указан размер 100% и в которой лежит текстура. Остальные ячейки этой таблицы должны иметь размер 0%.

Сверху может быть сразу несколько растяжек в разных местах, чтобы хорошо легли текстуры. Или например, сверху надо разместить меню, которое также может сидеть прямо в растяжке. Использование нескольких текстур с возможностью тайлинга одновременно называется мультитекстурированием.

Когда макет нарезается на кусочки, из того что сверху, снизу (сбоку) вместо кусочков режутся текстуры, которые при верстке вставляются в таблицы-растяжки в виде background-а. Если в ячейках с background-ом ничего нет (например другой таблицы с меню) туда имеет смысл вставить прозрачный рисунок размером 1х1 пикс. чтобы Netscape не подавился, когда ему подсунут сие творение. Не надо забывать и про вертикальный тайлинг - когда страница наполняется текстом, все вертикальные текстуры должны тянуться.

Например - мы имеем 2-х столбцовую таблицу, слева таблица с меню, справа - призывный текст. К примеру, дизайн у нас такой, что ниже меню должна идти какая-нибудь вертикальная текстура до самого нижнего края. Это все хорошо работает, когда призывный текст маленький и нижний край страницы как раз доходит до меню. А что делать, если призывный текст огромен и сайт вытянулся вниз? Таблица с меню у нас висит в левом столбце сверху, но растягиваться до самого низу она не хочет. Это решается очень просто - в левый столбец прямо под таблицу с меню кладется нужная текстура с вертикальным тайлингом. И все. В этой статье мы вкратце обьяснили что такое резиновые сайты, и по какому принципу их делают.

Эта мелочь защитит вас обоих
А теперь смело можно переходить к тому, ради чего и была написана эта статья. Чем резиновый сайт лучше своих собратьев? Приведем конкретные примеры.

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

У такой компоновки есть свои минусы, например то, что текст разьезжается в зависимости от размера окна, но это мелочи. Итак на наш взгляд, будущее за резиновыми сайтами, резиновыми дизайнами и вообще, за всем резиновым. Как в известной рекламе - "Эта мелочь защитит вас обоих"... :)
Домен продается

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Октябрь 2018 (14)
Февраль 2017 (3)
Январь 2017 (1)
Август 2016 (1)
Май 2016 (2)
Ноябрь 2015 (1)

Карта сайта: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта



Случайная цитата

Неизвестный автор:

"Мала ссылка, да в действии пылка."

Опрос

Ваша техника?

Настольный компютер
Ноутбук
Смартфон
iPad
iPhone
другое