Мир программирования - Web - Складываем кубики

Макет - это набор правил, по которым располагаются элементы страницы. Таким образом, макет - это основа верстки, - тот каркас, на который "натягиваются" элементы дизайна и информационное наполнение страницы.

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

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

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

Иногда возникает необходимость создания нескольких макетов для одного сайта, однако это может быть оправдано только в том случае, если нужно заметно разделить несколько разделов или при наличии различных типов материалов, долженствующих размещаться отдельно. Но даже и в этом случае важно понимать, что создавать две разные страницы, пользуясь одним макетом гораздо проще, чем создать стилистически похожие страницы на разных макетах. Для примера можно сравнить страницы статей и страницы в каталоге рассылок на сайте "Библиотека Мастера", которые сверстаны по одному макету.

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

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

Возьмем в качестве примера "Парад уродцев". Это классический вариант подгона материалов под макет: все картинки приведены к одинаковой ширине (для удобства, макет допускает три стандартные ширины) так, чтобы они укладывались в отведенное им место. Естественно, что макет учитывает основной характер материала (крупные графические объекты), поэтому я легко могу подгонять материалы в соответствии с установленными правилами. С другой стороны, зажатый со всех сторон макет "Библиотеки Мастера" не подходит для графической информации, которая будет стараться "выйти за рамки страницы" и создавался специально для текстовых и презентационных материалов (диаграммы графики), поэтому не возникает проблем при их редактировании под формат. Точно также и вы определяете характер предполагаемых материалов, делаете макет, а затем подгоняете объем информационных элементов под установленные вами же рамки.

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

Особенности WWW и собственно языка HTML приводят к тому, что вид вашей страницы зависит от настроек конкретного компьютера пользователя. В связи с этим ваше творчество ограничено рядом стандартов 'de facto' - со многими из них вы познакомитесь по ходу курса. Что же касается макета, то здесь вы ограничены по большей части экранным разрешением (то есть количеством точек, которые способен отображать среднестатистический монитор). Вернее будет сказать так: если вы не хотите доставить пользователям неудобство (а горизонтальная прокрутка экрана - это одна из самых неприятных штук), то ограничивайтесь экранным разрешением. Доминирующее сейчас разрешение - 800х600 точек, более того, с постепенным переходом на 17-дюймовые мониторы среднее разрешение возрастает до 1024х768. Опираясь на эти цифры, вы можете смело рассчитывать на ширину 700 точек - это будет максимальная ширина вашей таблицы. Внимание полиграфистам: точка (pixel) к пункту не имеет никакого отношения! Это физическая точка - элемент люминофора.

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

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

После этого я решаю для себя сколько потоков информации будет размещено на каждой странице, например на внутренних станицах "Библиотеки Мастера" таких потоков два: основной текст в левом поле и навигационное меню справа. Число визуальных колонок-полей текста (но отнюдь не колонок таблицы-разметки) будет соответствовать числу информационных потоков (и наоборот). Далее я рисую от руки примерное расположение элементов на странице, обязательно включая элементы, которые имеют фиксированные размеры (обычно это баннеры и кнопки). На этом этапе все подобные элементы должны быть распределены по странице, то есть в этот момент я уже представляю, как будет выглядеть страница. Важной деталью будет определение ширины колонок для комфортного размещения в них необходимых материалов. Например, если вы располагаете большой массив текста (более 5 килобайт), то вряд ли вы захотите это делать в узкой колонке 100-150 точек, для такого текста подойдет поле шириной 350 и более точек. Все это необходимо учитывать на начальной стадии "раскидывания" макета.

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

На всякий случай напомню, что самые распространенные на сегодняшний момент размеры баннеров - это 468х60, 120х60, 100х100, 400х50, а также кнопка 88х31. Следует иметь в виду также и формы для подписки на рассылку, которые могут иметь заранее заданную ширину (ее, правда, всегда можно поменять), поисковые окна и прочие служебные элементы. Таким образом, задача создания макета наполовину состоит из решения головоломки, как разместить все эти элементы на ограниченном поле страницы так, чтобы полученный результат выглядел гармонично и аккуратно.

Закончив с принципиальной схемой, я рисую макет на бумаге уже с помощью линейки и карандаша, приводя все к реальному масштабу и размечая размеры элементов (таблица 700 точек поместится на листе А4 в масштабе 2 мм на точку). Теперь мне точно известны размеры колонок, а следовательно и ширина размещения текстовых или графических элементов, поскольку часть из них образована от стандартных баннеров, а остальные получены по остаточному принципу. Расчертив колонки, я отображаю на макете характер материала в каждом информационном потоке, стандартные элементы, расположение навигации, колонтитульные элементы и пр.

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

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

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