 |
 |
 |
Макетирование
Ну, концепцию и стиль
для сайта мы разработали, теперь самое время переходить к макетированию. Смысл
макетирования - расположить все элементы страницы так, как они должны быть в
готовом варианте.
Берем Фронтпейдж. Почему Фронтпейдж? Дело в том,
что нас интересует простое и удобное средство визуального конструирования,
а на HTML-код на этапе макетирования обращать внимание не нужно - все равно
его выкидывать. Никто не запрещает использовать для этих целей DreamWeaver
или Adobe GoLive, но это слишком мощные средства для такой задачи, тем
более, что плавающие панели мешают. Можно, если кому удобно, использовать
Фотошоп, но при его использовании для таких целей есть ряд тонкостей. Поэтому
все дальше рассказывается в расчете на Фронтпейдж.
Рассмотрим для начала макетирование "в общем смысле", а потом перейдем к частностям.
Итак, страница обычного контент-сайта собирается
из различных блоков. Блок - это некоторая область, содержащая какую-либо
информацию и имеющая самостоятельное или подчиненное функциональное назначение.
Так как блоков и блочков можно набрать достаточно много, а тасовать их
неудобно. Чтобы было понятней, приведу примеры блоков: контент-зона, шапка,
форма поиска, навигация.
Кстати, в те времена, когда газеты не набирались
на компьютере, процесс макетирования происходил вот каким образом. Берется
лист бумаги, совпадающий по размеру с листом реальной газеты, после чего
начинается приколупывание названия газеты (шапки), названий статей и самих
статей, порезанных на печатные полосы.
А мы, чтобы не мучится, будем разбивать страницу
на блоки пошаговым путем. Делается это так.
|
Мы выделяем из основного блока (общая неразмеченная
область) блоки один по одному, заполняя пространство. Только не забываем
оставить наибольшую площадь для контента. Да, о площади блоков. Площадь
блоков должна быть адекватна тем функциям, которые он выполняет. Иначе
говоря, под навигацию обычно выделяется места меньше, чем для шапки.
Необходимо помнить еще вот какую вещь. Если вы планируете
вставлять на страницу баннеры, то необходимо заранее определиться, каких
они будут размеров, сколько штук, и заранее зарезервировать для них место.
Немного о контенте. Обычно контент идет одним блоком,
причем этот блок, как правило, наибольший (у нас ведь контент-сайт). При
этом контент в блоке может идти одной полосой (по аналогии с газетными
полосами), а может и несколькими.
|
Блок может быть поделен как на вертикальные полосы
(рисунок слева), так и на горизонтальные (рисунок по центру). Хотя, никто
не мешает вам пойти дальше и сделать гибрид (рисунок справа), был бы только
контент, который туда можно впихнуть.
При макетировании было бы неплохо использовать вполне
реальные данные. Иначе несколько позже вы можете обнаружить, что реальность
отличается от желаемого, а дизайн разбредается в известных только ему направлениях.
О цветах. Понятно, что блок или полосу желательно
выделять (чтобы можно было бы визуально различить где и что). Поэтому придется
потратить время на то, чтобы убедиться в том, что выбранные цвета совместимы,
подбирая их (иногда достаточно долго).
Ну, а теперь по мелочам.
Всегда хочется прикрутить к сайту различные фенечки
и красивые заголовки. Фенечки - это, конечно интересно, и в первый раз
занимательно, но потом мешает и начинает раздражать. Особенно это касается
анимации. Так что хорошо подумайте перед тем, как ставить на сайт "приблуду",
даже если вовсю торчите от нее. Что касается заголовков - делать их текстовыми
или графическими? Тут необходимо учесть, что из-за особенностей протокола
http иной раз один большой рисунок быстрее загрузится, нежели 50 мелких,
но такого же суммарного объема. Так что смотрите, взвешивайте. Могу предложить
вот какой баланс: заголовки верхнего уровня - графические, а все остальные
- текстовые.
Пустые места. Старайтесь не допускать пустые места.
Представьте себе, насколько красиво выглядит одиноко торчащий посередине
экрана (и шириной в 300 пикселей) хвост контента. Как избавляться от пустых
мест? Это думайте и решайте сами. Способов много. Один из них - разрезание
контента на страницы (первая, вторая, и т.д.).
Счетчики. Если счетчики вас сексуально привлекают,
то вы, конечно, повесите их на самое видное место. Ну, а нормальные люди
стараются запихнуть счетчики куда подальше, чтобы не маячили перед глазами.
Кому нужно, тот их найдет, а остальным они мешать не будут.
"Центр тяжести". Это то место, куда упирается взгляд
посетителя сразу после загрузки страницы. На чистой странице - это центр
экрана. Но дизайном и грамотным расположением блоков его можно сместить
на нужное место. После чего можно разместить туда что-то привлекательное
для посетителя.
И последнее - не забывайте о том, как именно вы будете вставлять содержимое в блоки. У SSI, динамической вставки и статической генерации свои особенности.
(a) Контент: Vadim Artamonov, 1999 - 2019 Anno Domini
