Undsoft.com

В предыдущем посте я попытался осветить специфику создания макетов сайтов. Букв получилось довольно много, поэтому тему пришлось разбить на два поста.

Первый пост касался в основном шрифтов, этот будет о том, как программисты верстают готовые макеты. Знание этого, я думаю, поможет вам почувствовать себя «в шкуре» веб-программиста, а значит понять, что целесообразно использовать, а что — нет.

5. Типы макетов

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

Все это нужно учитывать при разработке макета сайта.

Отсюда — два типа сайтов: фиксированной ширины и «резиновые». В английской терминологии: fixed-width и fluid.

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

Очевидный плюс такого сайта — если он правильно спланирован, пользователь увидит меньше пустых участков. Однако такие сайты сложнее верстать — некоторые графические «спецэффекты» невозможно или сложнее использовать на таком сайте.

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

Как вы понимаете, ширина зоны контента должна быть выбрана такой, чтобы поместиться у большинства пользователей на экране. Выбирается минимальное разрешение экрана, которое будет поддерживать сайт. Сейчас обычно берется цифра в 960 (иногда 920, 910) пикселей.

Это значит, что такой сайт будет нормально отображаться у пользователей с разрешением экрана 1024 x 768 пикселей и больше. Пользователи с меньшим разрешением экрана (например, 800 х 600 на некоторых нетбуках) получат горизонтальные полосы прокрутки. Неизбежное зло.

6. Смешивание слоев

Маленькая заметка прежде, чем мы продолжим. По сути, сайт — это набор картинок и текста, наложенных друг на друга несколькими слоями. В графике сайта сильно используется полупрозрачность — часто бывает нужно выбрать отдельный слой и сохранить его в png.

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

Прецедент, который был у меня. Дизайнер использовал черно-белый градиент, чтобы затенить некоторые участки текстуры на нижнем слое. Смешивание — Multiply. Соответственно, если скрыть нижний слой с текстурой, то сохранить тень отдельно уже не получится — она не будет содержать прозрачных областей.

7. Фон

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

Итак, я могу использовать:

• Заливку цветом
• Одиночную картинку (учтите, что растягивание и сжатие картинок возможно в браузере, но на практике выглядит достаточно плохо. Я бы не стал на это рассчитывать).
• Картинку, которое повторяется по вертикали, горизонтали или по вертикали и горизонтали.

Собственно все. Как же, используя это, можно сделать красивый сайт?

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

Спасение в том, что вышеперечисленные варианты можно совмещать и накладывать друг на друга.

Вот, к примеру, использование градиента в качестве фона сайта. Сам градиент — это сохраненная в png картинка, плавно переходящая в основной цвет заливки. Пользователи с разными разрешениями остаются довольны.

Другой вариант — повторение определенной картинки. В данном случае — небольшая картинка 30 на 120 пикселей повторяется по вертикали во всю ширину окна пользователя. На нее уже накладывается логотип и все остальное.

Это примеры наиболее удобных вариантов проектирования макета с точки зрения реализации. Но бывают и более экзотичные.

Ничто не мешает вам в качестве фона использовать целую не повторяющуюся картинку (которая при этом не переходит плавно в фон). Главное, чтобы она была достаточно большой, чтобы большинство пользователей не увидело пустых зон.

В данном случае, на сайте Лостфилма используется изображение шириной в 1920 пикселей — очень маловероятно, что найдется пользователь с большим разрешением экрана. Недостаток -- сохраненная потом картинка может получится слишком «тяжелой». Нехорошо заставлять пользователя грузить полумегабайтный элемент оформления.

А вот один сложный случай.

Это с макета одного сайта — для наглядности я убрал все, кроме самого фона.

Во-первых, фон вымощен текстурой. Во-вторых, виньетирование (тени по краям).

Как реализуется виньетирование? Наиболее универсальный способ — тень режется на 8 png файлов и накладывается на текстуру.

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

Делать такое — не слишком легкая задача. Если бы дизайнер оставил тень, к примеру только сверху или только в центре, все было бы значительно проще. Но, вы же помните о нулевом пункте?

Напоследок, плюшка. Я разобрал главную страницу твиттера на составляющие.

Главная мораль всего этого пункта — помните о том, что ширина и высота готовой странички в браузере может быть разной.

8. Фреймворки

Существует такая штука как CSS фреймворки. Основное их предназначение  -- облегчение жизни программиста во время верстки сайта (да-да, программисты только и занимаются тем, что облегчают себе жизнь ).

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

Это работает, если дизайнер изначально создавал макет ориентируясь на эти самые колонки.

Я знаю, на словах не очень понятно. Просто зайдите на http://www.blueprintcss.org/ и скачайте архив с фреймворком. Где-то в этом архиве есть psd файл — он-то вам и нужен.

Посмотрите на слой с примером сайта. Блоки сайта размещены так, чтобы приходится на грани колонок.

Макет, выполненный таким образом, облегчит жизнь верстальщику, но я не знаю, насколько это целесообразно. Я не слышал, чтобы у нас верстальщики особо использовали css фреймворки.

Кроме того, ваш программист может быть приверженцем другого фреймворка, например http://960.gs/.

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

P.S.

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

Если кто-то знает еще какие-нибудь особые моменты, на которые следует обращаться внимание при разработке макета сайта, записывайтесь в комментариях.