Учебное пособие

Создание сайта

Создание макета сайта

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

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

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

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

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

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

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

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

Особенности WWW и собственно языка HTML приводят к тому, что вид вашей страницы зависит от используемого монитора и от настроек конкретного компьютера пользователя. Если вы не хотите доставить пользователям неудобство (а горизонтальная прокрутка экрана - это одна из самых неприятных штук), то ограничивайтесь экранным разрешением. Доминирующее сейчас разрешение - 1024х768 точек. Опираясь на эти цифры, вы можете смело рассчитывать на ширину 900 точек - это будет оптимальная ширина вашей таблицы.

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

Каркас макета страницы сайта

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

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

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

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

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

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

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

Область основного содержания

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

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

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

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

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