Как создать макет сайта

Что такое макет сайта?

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

Лишь после успешно созданного и одобренного макета, разработка сайта переходит на следующий этап.

Обычно макеты сайтов создают в профессиональных графических редакторах. Раньше это был Adobe Fireworks, сейчас очень популярны Adobe Photoshop, Adobe Illustrator, а также Corel Draw.

Но что делать, если у Вас нет этих графических редакторов или вы не умеете в них работать? Все очень просто. Вы можете создать макет сайта на конструкторе сайтов tobiz.net! Мы Вам в этом поможем.

Макет сайта своими руками

Итак, приступим. Нам понадобится конструктор сайтов tobiz.net – именно на нем мы создадим свой макет. Здесь есть целый ряд преимуществ:

1. не нужно покупать графические редакторы;
2. не нужно обладать профессиональными навыками дизайна и уровнем владения графическим редактором;
3. не придется верстать сайт по макету - он уже будет готов.

Для начала переходим в проекты и создаем пустой сайт.

У Вас откроется окно редактора сайта. Сюда мы и будем добавлять готовые блоки структуры.

Для начала добавим шапку и подвал на наш сайт. Использовать будем готовые блоки, которых на конструкторе около 20 штук. А найти их можно в самом первом разделе - "Шапка и меню". Во всех блоках уже содержится шаблонный текст и фотографии. Это идельно для нас, так как мы сэкономим на этом очень много времени.

У нас получилась вот такая страница. На нее мы будем добавлять еще другие блоки структуры.

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

Обложка на сайте выглядит следующим образом:

Давайте произведем некотрые настройки сейчас, чтобы не забыть их потом.

1. Отключим высокую секцию блока.
2. Установим увеличенную ширину обложки.
3. Зададим отступы сверху и снизу по 150 пикселей.

С такими настройками обложка будет выглядеть лучше.

Далее добавим блоки контента. Это будут: обычный теестовый блок и блок с изображением.

Второй блок с текстом и изображением находится в разделе контент:

Давайте настроим эти блоки. Добавим заголовок, изменим размер изображения и ширину блока. Теперь блоки выглядят вот так:

Еще добавим блоки преимуществ на наш макет. Он находится в разделе "Преимущества". Выбираем любой понравившийся блок, и он автоматически добавляется на сайт:

Таким образом добавляем еще блоков, примерно как на скриншоте ниже. У Вас получится макет сайта с готовой структорой для наполнения контентом.

После того, как создали макет сайта, можете смело начать наполнять его статьями и фотографиями. Также не забудьте отредактировать контакты.

Рассказать друзьям: