Пошаговая инструкция создания сайта

Содержание

Добавьте заголовки в ваш документ, чтобы сгенерировать содержание.

В этой статье рассмотрим, как создать секцию «О компании» с заголовком, текстом и картинкой.

Пошаговые видеоинструкции по созданию сайтов —

Подробные видеоуроки по платформе Taptop

Шаг 1. Создайте новый проект

Откройте Панель управления Taptop — https://dashboard.taptop.pro/.

Нажмите кнопку Создать сайт в правом верхнем углу.

Создать сайт

Выберите способ создания сайта — «Пустой проект».

Создание проекта с нуля

Введите название проекта

Готово! Новый проект создан и автоматически будет открыт Редактор дизайна, где вы можете работать над сайтом.

Редактор дизайна

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

Переключение на Режим дизайнера

Шаг 2. Создайте структуру элементов

Добавьте на холст структурные элементы: секцию, а внутрь нее контейнер — Section → Container. Для этого откройте панель Элементов, нажав на + на левой панели, и выбирайте нужные элементы.

Подробнее:

Основные блоки сайта

Как добавить элементы и виджеты на сайт

Добавление и перемещение элементов

2. В контейнер добавьте картинку (Image) и Div-блок для текстов. Внутрь Div-блока добавьте текстовые элементы (Text). На вкладке Слои проверьте, что у вас получилась нужная структура.

Добавьте элементы в контейнер

Шаг 3. Задайте расположение элементов

Для контейнера настройте авто-лейаут, чтобы элементы в нем располагались в ряд.

Настройте авто-лейаут для контейнера

Для Div-блока настройте авто-лейаут, чтобы элементы в нем друг под другом.

Настройте авто-лейаут для Div-блока

Подробнее о том, как задать расположение элементов, читайте в статье

Расположение элементов

Шаг 4. Наполните элементы контентом

Загрузите изображение в Image. Для этого кликните два раза на виджете Image, а затем нажмите кнопку загрузки файла в левой панели.

Загрузите файл с изображением

Далее загрузите нужное изображение с компьютера и кликните по нему в левой панели, чтобы добавить его в Image.

Добавьте изображение в Image

Добавьте тексты в текстовые элементы.

Добавьте тексты в текстовые элементы

Шаг 5. Стилизуйте элементы

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

Подробнее о том, как настраивать стили для элементов, читайте в разделе Дизайн и стилизация.

Настройте отступы для секции: внутренние отступы сверху и снизу 30px.

Настройте отступы для секции

Настройте максимальную ширину для контейнера 1600px.

Настройте максимальную ширину для контейнера

Настройте размеры для картинки: ширина 700px, высота auto.

Настройте размеры для картинки

Настройте стили для текстов: задайте шрифт, размер шрифта, межсимвольное расстояние, цвет и др. параметры. Для первого текста также добавьте Границу 1px и Радиус 5px.

Настройте стили для текстов

Для стилизации элементов с похожим дизайном (например, заголовков, текста, кнопок, карточек) удобно использовать классы. Подробнее читайте в статье: Классы.

Шаг 6. Адаптируйте сайт для разных устройств

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

Подробнее:

Адаптация под разные устройства

Переключитесь на нужный режим отображения на верхней части Холста: Компьютер, Планшет, Мобильный телефон в горизонтальном режиме, Мобильный телефон в портретном режиме.

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

При необходимости повторите действия для разных режимов отображения.

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

Адаптация сайта для режима Планшет