|
*** |
Что можно растянуть в ИнтернетеВы когда-нибудь обращали внимание на компоновку, структуру сайта? Замечали наверное, что они все различаются. Есть сайты, которые висят слева экрана, а справа от них пустая полоса, либо по центру экрана. Но в любом случае, такие сайты ограничены разрешением 800х600 и никуда от этого не деться. Соответственно, при просмотре этих сайтов на мониторах с высоким разрешением, наблюдается или совершенно жуткая поолоса справа или полосы слева и справа. Сам собой напрашивается вопрос - ведь делают как-то сайты, растягивающиеся на весь экран, почему тут нельзя было так сделать? Но иногда действительно нельзя. Если нельзя, но очень хочется
Вся координатная сетка считается от левого верхнего угла и зависит от размеров окна и разрешения экрана. И вот нам на сайте, заверстанным в виде центральной колонны, необходимо сделать выпадающие меню... К координатам слои не привяжешь - координаты точек этой колонны постоянно меняются при смене размеров рабочего окна (чем окно больше, тем полосы слева и справа шире и соответственно меняется расстояние между левым краем окна и краем заверстанного материала). Можно, конечно, написать скрипт, который в реальном времени будет считывать размер окна и в зависимости от этого позиционировать слои. Но нужно ли? Итог - такой вариант подходит в том случае, когда нету времени что-нибудь мудрить, когда надо сделать побыстрее, попроще и не надо делать выпадающие меню. Очень хорошо себя оправдывает, когда надо сделать не меняющиеся в размерах колонки текста или поля для вывода информации. Верстка не очень высокого уровня сложности. Но как быть, если хочется сделать просто, но со слоями? Такой большой и безобразничаешь...Обратимся к классическому примеру - сайт зажимается на 800х600 и делается в виде полосы, отцентрированной слева. Это то же самое, что и вышеописанный вариант, только тут уже есть к чему привязать слои, т.к. слева расстояние до границы окна не менятся и примерно равно нулю. Ну а вот сюда мы можем навесить тонны слоев. Также хорошо себя оправдывает для заверстки массы текста в виде колонок, создания систем новостей, новостные порталы и.т.п. короче, где будет много текста. Но страшный минус такого подхода - огромнейшая полоса справа при сверхвысоких разрешениях экрана... И с этим уже ничего не сделаешь. Некрасиво получается, портится весь дизайн. Но есть еще одно решение - самое сложное, самое красивое, самое удобное и оптимальное. Оно уже начинает завоевывать сердца веб-разработчиков и заказчиков. В таком решении нет размеров, ничего никуда не зажимается. Это называется - "резиновый дизайн". Резиновый дизайнРезиновой может быть соска, резинка от трусов, в крайнем случае презерватив, хотя там используется не совсем резина. И вот теперь выясняется, что и дизайн может быть резиновым. Это значит, что сайт может тянуться под разрешение экрана, окна и чего угодно, там нет размеров. Яркий пример - этот вот сайт. Он рассчитан на любое разрешение, начиная с 800х600, у него нет никаких ограничений. А все потому, что все размеры указываются в процентах. Но это не самое главное - главное изначально так нарисовать дизайн, чтобы из него можно было бы сделать сайт-резинку. Вот тут начинаются сложности. Рисуем резинку
Сверху может быть сразу несколько растяжек в разных местах, чтобы хорошо легли текстуры. Или например, сверху надо разместить меню, которое также может сидеть прямо в растяжке. Использование нескольких текстур с возможностью тайлинга одновременно называется мультитекстурированием. Когда макет нарезается на кусочки, из того что сверху, снизу (сбоку) вместо кусочков режутся текстуры, которые при верстке вставляются в таблицы-растяжки в виде background-а. Если в ячейках с background-ом ничего нет (например другой таблицы с меню) туда имеет смысл вставить прозрачный рисунок размером 1х1 пикс. чтобы Netscape не подавился, когда ему подсунут сие творение. Не надо забывать и про вертикальный тайлинг - когда страница наполняется текстом, все вертикальные текстуры должны тянуться. Например, мы имеем 2-х столбцовую таблицу, слева таблица с меню, справа - призывный текст. Дизайн у нас такой, что ниже меню должна идти какая-нибудь вертикальная текстура до самого нижнего края. Это все хорошо работает, когда призывный текст маленький и нижний край страницы как раз доходит до меню. А что делать, если призывный текст огромен и сайт вытянулся вниз? Таблица с меню у нас висит в левом столбце сверху, но растягиваться до самого низу она не хочет. Это решается очень просто - в левый столбец прямо под таблицу с меню кладется нужная текстура с вертикальным тайлингом. И все. В этой статье мы вкратце обьяснили что такое резиновые сайты, и по какому принципу их делают. Эта мелочь защитит вас обоихА теперь смело можно переходить к тому, ради чего и была написана эта статья. Чем резиновый сайт лучше своих собратьев? Приведем конкретные примеры. Резиновый сайт занимает все пространство экрана, поэтому дизайнерское решение тут воплощается наиболее полно. В резиновом сайте смело можно делать минимум графики - итак все будет красиво. И возвращаясь к пресловутым слоям - их в резиновом дизайне очень легко позиционировать по левому краю, что и нужно делать. Ну и просто красиво это смотрится. У такой компоновки есть свои минусы, например то, что текст разьезжается в зависимости от размера окна, но это мелочи. Итак на наш взгляд, будущее за резиновыми сайтами, резиновыми дизайнами и вообще, за всем резиновым. Как в известной рекламе - "Эта мелочь защитит вас обоих"... Примечание: В качестве примеров использованы только работы компании МиллиАРТ. Источник (Oborot.ru): "Что можно растянуть в Интернете"
|
|
Copyright © "Internet Zone", info@izcity.com |