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

Гиперссылки

Web-сайт - группа HTML-документов, объединенных по смыслу и имеющих одинаковое дизайнерское решение. HTML-документ- это текстовый файл с расширением .html или .htm, в котором тест размечен HTML-тегами. Каждая страница (HTML-документ) является обычным текстовым файлом и содержит, во-первых, текст, нужный человеку, и, во-вторых, некоторые инструкции человеком невидимые. Эти инструкции условно можно разделить на два типа: описание внешнего вида документа (размер букв, тип шрифта, элементы оформления) и ссылки на другие ресурсы (это могут быть другие страницы, изображения, серверы и т.п.), которые, собственно, и делают из текста гипертекст. Гипертекстовые ссылки выделенные области документа, позволяющие переходить к другому документу, содержащему связанную информацию. С помощью гипертекстовых ссылок пользователь может обращаться к информации в других документах, связанных с данной темой. Выбирая подсвеченные слова, выделенные изображения и графику в тексте документа и щелкая по ним мышью, вы можете перемещаться в любом направлении и "перескакивать" на другие интересующие вас документы, независимо от того, где эти документы находятся. С помощью ссылок осуществляется навигация по web-сайту.

Навигация

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

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

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

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

Для того, чтобы этого избежать и используется иерархическое построение меню. Правильное структурирование информации позволяет нам выделить основные разделы сайта, а все второстепенные разделы будут доступны после выбора одного из основных. Описанное замечание относится также и к меню 2-го уровня - при большом количестве пунктов, имеет смысл ввести меню 3-го уровня. Но не более! Будет уже слишком. Если же информации, все же, настолько много, что не получается структурировать ее в 3 уровня меню, то имеет смысл выделить отдельные подсайты, каждый из которых будет отвечать за свою область.

Формирование макет страницы

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

Вернемся к собственно самому макетированию - вам предстоит создать таблицу, отвечающую нескольким требованиям.

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

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

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

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