Что значит сверстать страницу
Что такое верстка сайта: определение, виды
Узнайте, что такое верстка, ознакомьтесь с ее видами, сложностями и стоимостью работы
Верстка сайта — это структурированное сочетание изображений, заголовков, подзаголовков, таблиц, инфографик, текста и других элементов на странице c помощью языка разметки HTML и языка описания внешнего вида страницы CSS.
Посмотрите это видео от BrainCloud, в котором эксперт по верстке показывает, как сверстать базовую страничку за час.
Содержание
Понятие верстки позаимствовано из издательской деятельности, где в книгах, журналах и газетах информацию располагали продуманно, особым образом. Главная цель верстки, в том числе и верстки сайта, — расположить текстовые и графические элементы так, чтобы читателю было максимально удобно и интересно усваивать информацию.
Давайте рассмотрим, из чего состоит процесс верстки сайтов.
Что включает в себя верстка сайта
Задачей верстальщика сайтов является написание кода, который трансформирует дизайн-макет (самый примитивный его вариант — набросок на бумаге) в считываемую браузером страничку, интерактивную для пользователя.
Важно знать, что в контексте создания сайтов в целом существует два вида программирования:
Верстальщик сайтов — front-end разработчик. Важнейший аспект его работы — это HTML, то есть единая система стандартов отображения элементов веб-страницы. С помощью HTML браузеры показывают страницы и контент, размещенный на них, в заданном верстальщиком порядке. Язык верстки HTML базируется на тегах, вот основные из них:
Верстка сайта с нуля 
Содержание
Когда возникает потребность в собственном портале, становится ребром вопрос о его верстке. Что такое верстка? Это процесс формирования страниц путем прописывания кода.
Что значит верстка сайта? По сути, верстать страницу сайта, значит сделать его осязаемым и вставить туда изображения, которые были ранее разработаны. Это большой процесс, который включает в себя много действий, таких как разметка страницы, разработка шаблонов, прописывание блоков информации и т.д.
Попробуем более широко разобрать это понятие и поговорим о создании интернет ресурса. Верстка сайта с нуля занимает довольно много времени, особенно, если ей занимается не профессионал.
Начиная верстку, проверьте все ли из приведенного списка уже готово:
Тип ресурса
Скорее всего этот пункт создатель выбирает для себя еще до того как приступить к разработке. Однако было бы неправильно не упомянуть об этом. Бывает множество типов интернет ресурсов. Все они отличаются целью, оформлением и функциональностью.
Существуют такие виды сайтов:
Визитка представляет собой сайт об определенном человеке. Такой ресурс призван раскрыть и разрекламировать профессиональную сторону специалиста.
Часто на этом типе нужна галерея для ознакомления с примерами работ, гостевая книга с отзывами, контактная информация и все, что нужно, чтобы представить профессионала в лучшем свете. Как правило, верстка сайта такого плана занимает не очень много сил и времени. Как пример можно говорить о сайте на wordpress.
Здесь все просто и шаблонно, придется попотеть только над дизайном и продумыванием рекламирующих текстов. Технически ничего сложного в таком шаблоне нет, так как он не требует какого-то особого функционала.
Блог – это уже привычный для нас в современном мире онлайн дневник. Туда человек может выставить на всеобщее обозрение интересные мысли, свои работы в формате видео, фото и текстов.
Блог немного сложнее, так как подразумевает постоянное обновление информации в отличие от предыдущего типа сайта. Верстать такой ресурс намного сложнее, хотя все зависит от того, что именно вы хотите отобразить на страницах.
Ведь блог подразумевает наличие большого числа материалов, которые должны выводиться на страницах. Тип отображения и порядок, а так же стиль выбирается самостоятельно.
Интернет магазин пожалуй один из самых сложных типов интернет проектов. Уроки верстка сайта вряд ли помогут в этом не легком занятии.
Тут, как и в блоге нужно правильно подать материал, однако так же следует правильно разместить функциональные кнопки и важные участки страницы. Все это задача верстальщика.
Конечно, когда создается такой серьезный проект, не обойтись без помощи профессионалов. Сверстать «на колене» магазин в сети практически невозможно, требуется огромный запас знаний для того, чтобы сверстать грамотно страницы интернет магазина.
Тут будет недостаточно поверхностно знать HTML и CSS.
Лендинг создается в первую очередь для продажи какого-то одного товара. Чаще всего это какая-то новинка или редкое изобретение.
Лендинг представляет собой ресурс, состоящий из одной страницы, на котором изложена вся информация о продающемся товаре и есть форма заказа. Такая функциональность достаточна для одностраничника.
Заказать верстку будет не очень сложно, так как главной его особенностью являются изображения и грамотно составленные тексты, чем обычно занимаются профессионалы этой области.
Галерея создается в первую очередь для деятелей искусства, чьи произведения можно сфотографировать или же выставить в интернет как изображение.
Уроки верстка сайта можно найти в огромном количестве в интернете, а именно на тему галерей, пытливые умы создают очень много типов отображения и разметки сайта.
Этот тип ресурса дает огромные возможности для фантазии, так как подать творения можно в абсолютно любом формате. Используя картинки, не выкладывайте их целиком, это сильно снизит загрузку.
Лучше сделать вывод миниатюр и загрузку изображений по запросу.
Информационный портал немного похож на блог, однако требует несколько большей функциональности. Как правило, на нем больше направлений для информации, чем на обычном блоге.
Все это нужно систематизировать и дать пользователю возможность ориентироваться. Она сложна, но во многом зависит от запросов, ведь если у блога явно не должно быть много запросов, а информационный ресурс может быть требовательным.
Так же важным моментом является то, что информационный ресурс – это чаще всего коммерческий проект, а значит запросы в нем гораздо выше, нужно лучше продумывать разметку страницы.
Форум – это место для общения. Как правило, форум является отдельной частью портала, но случается, что весь ресурс создается целиком под этот формат общения.
Тогда все что нужно – это правильно разместить дизайнерские изображения и настроить цвета отображения. Вёрстка такого проекта очень проста из-за того, что все страницы одного типа и вам не придется подгонять каждый отдельный шаблон.
Дизайн сайта
Верстка сайта урок по его создания часто говорит нам, что следует делать дизайн максимально просто и комфортно для посетителя. Лучше всего ориентироваться на свои представления об удобстве.
Так вы сможете сделать сайт максимально удобным для посетителя, однако не все могут взглянуть на свое творение как бы со стороны. Взгляд разработчика часто замыливается и он не замечает очевидных проблем.
В таких случаях следует обратиться к соответствующим сервисам. В сети существуют много ресурсов, которые предлагают услуги тестирования ресурса.
По итогам вы получите карту кликов, отзывы реальных людей об удобстве, предложения по поводу оптимизации.
Что касается дизайна, то тут сложно что-то советовать, так как это очень творческая работа, и каждый выбирает то, что ему нравится, однако не используйте слишком яркие и раздражающие цвета.
Постарайтесь сделать изображения на максимально привлекательными для пользователя. Для этого существуют множество таблиц, которые показывают сочетающиеся цвета.
Тип верстки
Это процесс разметки. Очень важно сделать его качественно, так как от этого зависит правильность расположения активных элементов и их отображения на разных экранах. Существует несколько основных типов верстки:
Фиксированная верстка
Фиксированная предполагает создание шаблона страниц под одно единственное расширение экрана, соответственно страница не меняет свой внешний вид под разные разрешения. В этом типе есть, как и резкие положительные стороны, так и сильно негативные. Из положительных можно выделить то, что сайт проще верстать.
Уроки покажут вам, как правильно сделать такой вариант. Он позволяет сохранить внешний вид на любом устройстве и на любом разрешении экрана. Однако на маленьком экране будет появляться горизонтальный скроллинг, а на большом будут пустые места.
Такой тип технического дизайна предотвращает возникновение ошибок. Но фиксированная верстка плохо сказывается на красоте отображения. Ведь горизонтальный скроллинг – это не самая приятная вещь. На мобильных устройствах страница будет вовсе отображаться плохо, сейчас это очень важно, как показывают исследования 25-30% источников траффика идут из мобильных устройств и этот показатель растет. Планшеты и смартфоны набирают популярность, а мобильный интернет становится все быстрее и доступнее. Так можно сделать заключение, что это очень перспективная область для роста. Вёрстка с нуля для мобильных фиксированного дизайна – это самая простая работа для верстальщика.
Адаптивная верстка сайта
Этот тип технического дизайна предполагает разработку отдельного типа отображения на каждый возможный размер экрана пользователя. На данный момент это один из наиболее качественных и популярных типов технического дизайна. В таком случае можно прописать программно, как будет выглядеть страница на том или ином разрешении. Сделать так дизайн очень сложно, нужно продумать и прописать вручную каждый тип отображения под каждый самым популярный размер экрана.
Это весьма сложное занятие, которое оправдывает каждую каплю пота пролитую на клавиатуру. Ведь при таком дизайне все пользователи смогут одинаково комфортно пользоваться ресурсом, не смотря на тип устройства, с которого они решили зайти на сайт.
Учитывая сложность исполнения, адаптивная верстка сайта div может привести к возникновению ошибок на каком либо шаблоне. А так же вам придется протестировать ресурс на каждом макете, а это займет время, возможно деньги. Любое изменение так же придется вносить и в каждый отдельный макет. Это не очень удобно, но выгодно в плане отображения, так как пользователь всегда будет видеть максимально удобную для себя картинку проекта.
Растягивающийся дизайн
По самому названию понятно, что этот стиль технического дизайна предполагает автоматическую подгонку страницы под расширение экрана. Тут, как и везде, присутствует несколько положительных и отрицательных сторон. Этот тип немного лучше фиксированной, но уступает второму типу, так как резиновая, верстка сайта по адаптивному методу предполагает ручную подгонку под каждый тип экрана, а тут ширина контента рассчитывается в зависимости от размера устройства отображения.
Однако дизайн резиновой верстки сайта легче сделать. Если выбор стоит из самых простых вариантов, то растягивающийся дизайн – это лучшее решение. Но все же в случае, если у вас есть некоторые ресурсы, лучше обратить внимание на адаптивную.
Одним из главных недостатков такого способа отображения, является то, что каждое изменение – это рулетка, не понятно как страница поведет себя на том или ином экране. Возможны возникновения слишком длинных строчек текста, это сделает чтение материала неудобным. Но с другой стороны, если пользователь пользуется устройством с нестандартным разрешением экрана или же его браузер раскрыт не на все окно, то ваш ресурс будет выглядеть на много привлекательнее с растягивающимся дизайном, чем с любым другим.
Блочная верстка
Этот тип технического дизайна представляет собой комплекс всех выше описанных типов. Например, при блочной верстке сайта можно сделать контент растягивающимся, а сайдбар статичным, при этом верхнее меню может отображаться под определенный вид устройства.
Очень удобный тип, так как создает ощущение удобства на страницах, пользователь сможет удобно пользоваться функционалом, при этом, не теряя качества отображения текста.
В отличие от этого типа адаптивная вёрстка сайта гораздо проще, так как блочная предполагает комплекс всех остальных типов дизайна. Но она дает наилучший вариант отображения с минимальным количеством багов и максимально удобным интерфейсом.
Так что именно этот способ создает наиболее красивый и гармоничный дизайн. Кстати, для продвижение, а следовательно и монетизации веб сайта стоит использовать именно этот тип верстки.
Сегодня регистрация в каталогах не является больше эффективным способом продвижения сайта.
Перед публикацией необходимо обязательно проверить текст на уникальность. При помощи каких программ и сервисов это можно сделать, вы узнаете из нашей статьи.
Хотите продвинуть свой сайт через Яндекс.Директ? Здесь есть полезные советы по этой теме.
Уважаемые посетители, сохраните эту статью в социальных сетях. Мы публикуем очень полезные статьи, которые помогут Вам в вашем деле. Поделитесь! Жмите!
Программы для верстки сайта
Существует два типа программ:
Первый тип редакторов еще называют WYSIWYG, что в полном варианте означает «что видишь, то и получаешь». Считается, что этот тип больше подходит для новичков и людей не очень хорошо разбирающихся в разметке страниц.
Она может быть выполнена даже новичком на одном из таких редакторов. Он позволяет в визуальном режиме отредактировать страницу как нужно. Однако у такого способа есть несколько недостатков.
Например, некоторые программы не дают возможность подстроить код так, чтобы он работал максимально эффективно. При выборе некоторых видов отображения могут быть ошибки. Даже хорошо протестированная программа может вызывать ошибки на готовой странице.
Вот список наиболее популярных визуальных редакторов:
Текстовые редакторы представляют собой обычные программы, чем то похожие на стандартный Блокнот в Виндоус. Однако текстовая программа предоставляет пользователю удобный функционал, такой как подсветка кода.
Таким образом, вы будете видеть начало и конец нужного тега. Нужно только выбрать используемый код. Вёрстка сайта HTML часто делается именно на таких редакторах.
Список наиболее популярных текстовых редакторов:
Если вы заинтересованы в том, чтобы самостоятельно освоить навык, то при наличии интернета существует множество способов пройти обучение. Вот какие варианты существуют на данный момент:
Один из самых доступных способов пройти обучение по адаптивной верстке. Достаточно вбить в поисковике или в поиске торрента «верстка для начинающих» и получить доступ к огромному количеству информации посвященной этой теме совершенно бесплатно.
Этот способ позволяет пройти обучение в любой точке мира, не обязательно находится в крупном городе Москве или Петербурге для освоению навыков.
Совет: если планируете проходить обучение именно таким образом, то стоит зарегистрироваться на тематических форумах, и получать поддержку оттуда.
Сейчас появилось большое количество курсов посвященным программированию и верстке в частности. Стоимость таких курсов по верстке может быть очень разной, но всегда можно подобрать вариант по карману и по душе.
В случае прохождения такого курса, помимо доступных видеоматериалов, как в предыдущем способе, можно получить живое общение с преподавателем, который разберет примеры вёрстки сайта онлайн, даст рабочие советы позволяющие сэкономить огромное количество времени и нервов.
Зачастую курс включает в себя уже по макету psd и вообще необходимые знания для подготовки макета в фотошопе.
Полученные знания могут пригодиться не только для создания собственного проекта, но и найти работу в реальном офисе, или же на бирже фриланса, так как специалисты по вёрстке всегда нужны, а сколько стоит верстка сайта однозначного ответа мы дать, к сожалению, не можем. Работа на фрилансе позволит заниматься вёрсткой сайтов из любой точки России и мира, а не обязательно в СПб или Мск.
Верстка сайта: инструкция для начинающих
Что такое вёрстка сайта
Вёрстка – это структура всех элементов на странице документа, сайта или другого информационного носителя. Такими элементами могут быть изображения, заголовки, подзаголовки, таблицы, инфографика и сам текст.
Изначально понятие вёрстки было применимо к издательской деятельности. Книги, газеты, журналы содержат структурированную информацию. В них есть чёткая сетка, блоки, в которых текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его.
Сейчас актуальность вёрстки для издательств сохраняется, но к ним также примкнула и сфера веб-дизайна.
В разработке сайтов вёрсткой называется перевод дизайн-макетов в интерактивный, читаемый браузерами вид. То есть, верстальщик пишет код, который формирует из предоставленного графического шаблона «живую» веб-страницу, с элементами которой может работать пользователь.
В контексте создания сайтов есть два вида разработки:
Вёрстка относится к front-end. Она не отвечает за базовые возможности сайта, например, за регистрацию пользователей, товарную корзину или прочие операции, связанные с вычислениями, внешними и внутренними запросами, хранением и загрузкой данных.
Вёрстка правильно располагает все элементы на странице и делает так, чтобы с ними было удобно работать. Поэтому вёрстка сайта – это ответственная задача, требующая внимательности, терпения и постоянного тестирования.
Вёрстку веб-страниц невозможно представить без HTML. Если говорить простыми словами, то HTML — это единый стандарт отображения всех элементов веб-страницы. Это язык разметки, с помощью которого браузеры показывают нам порядок, размер, формы и шрифт текста. С его тегами знакомы все, кто занимался созданием сайтов, например:
Как сверстать веб-страницу. Часть 1
Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.
Часть 1. Верстка стандартными средствами
Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.
Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
Структура файлов
Первым шагом давайте создадим простую структуру файлов для наших файлов.
Предварительный осмотр
После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.
Общие изображения
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей.
Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png
В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png
Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.
Основные стили
И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.
На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.
Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.
Прописываем все эти стили в styles.css:
В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».
Каркас HTML
И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:
Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.
Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.
Макет
В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).
Опишем это в теге body:
Wrapper используется для объединения блоков и их выравнивания по центру страницы.
Затем укажем стили блоков:
Логотип
Вставляем логотип в тег header:
Дополнительных стилей не требуется.
Поиск
Вставляем форму поиска в тег header:
И стили выравнивания по правому краю для нее:
Для отображения меню необходимо создать список со ссылками внутри тега nav:
CSS стили для него будут следующие:
Здесь мы указали, что для всех навигаций ссылки не будут иметь подчеркивания, убрали стандартные отступы для элементов списка, отобразили список горизонтально и указали нужные цвета и шрифт.
Заголовок страницы
Заголовок страницы помещается в div с идентификатором heading
Заголовок имеет следующие стили:
Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
Колонки
Для того, чтобы создать колонки страницы нужно прописать следующие стили:
Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.
Подменю
Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:
И применяем к подменю следующие стили:
Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.
Контент сайдбара
В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.
В html это выглядит так:
В стилях укажем шрифты, цвета и отступы:
Данные стили применяются только к заголовкам и параграфам, лежащим непосредственно внутри сайдбара, но не глубже.
Цитата
Вёрстку контента начнём с добавления цитаты.
Добавим код цитаты в раздел section
И применим для него стили:
Здесь нет ничего нового, так же — шрифты, фоны и отступы.
Контент
Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после
Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега :
, которому зададим следующие стили:
Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.
Блок «Our team»
При верстке этого блока добавим сначала заголовок:
А затем два блока-строки с карточками сотрудников
Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:
Здесь мы задали шрифт и отступ для подписи, размер и цвет должности, добавили верхний отступ для карточек и указали, что для всех карточек в строке, кроме первой, должен быть отступ слева.
Футер
Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.
Для начала создадим контейнер футера с этим блоками:
И применим к нему оформление:
Контейнер с находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.
Лента Твиттера
Верстаем содержимое ленты Твиттера:
Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.
Карта сайта
Карта сайта представляет собой два блока со ссылками:
Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.
Социальные ссылки
Вставляем набор ссылок в контейнер
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Копирайт
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
На этом наши работы закончены. Готовый проект можно скачать здесь.