В этом руководстве вы узнаете, как создать свой первый проект в Фреймопласт с нуля. Мы пройдем все этапы: от создания фрейма до экспорта готового макета.

Шаг 1: Вход в редактор

Перейдите на главную страницу Фреймопласт и нажмите кнопку "Войти в редактор" в правом верхнем углу. Вы попадете в рабочую область редактора.

Редактор разделен на три основные части:

• Левая панель — содержит все доступные блоки (текст, фигуры, кнопки, формы, изображения)
• Центральная область (холст) — здесь располагаются ваши фреймы и блоки
• Правая панель — свойства выбранного элемента (размеры, цвета, текст)

Шаг 2: Создание фрейма

Фрейм — это контейнер для блоков. Он имитирует экран устройства, на котором будет отображаться ваш макет.

Чтобы создать фрейм:

1. Нажмите кнопку "Новый фрейм" на верхней панели инструментов
2. На холсте появится фрейм с размерами 375×600 пикселей (стандартный размер мобильного экрана)
3. Фрейм автоматически выделится синей рамкой

Вы можете изменить размер фрейма двумя способами:

• Потяните за маркер в правом нижнем углу фрейма
• В правой панели измените значения "Ширина" и "Высота"

Шаг 3: Добавление блоков

Теперь наполним фрейм блоками. Для примера создадим простую карточку товара.

Добавление изображения

1. Найдите в левой панели блок "Изображение"
2. Перетащите его внутрь фрейма
3. Блок появится в том месте, где вы его отпустили
4. Кликните на блок, чтобы выделить его
5. В правой панели нажмите кнопку "Загрузить" и выберите изображение на компьютере

Добавление текста

1. Перетащите блок "Текст" из левой панели под изображение
2. Дважды кликните по тексту внутри блока и введите название товара, например: "Смартфон iPhone 15"
3. В правой панели настройте размер текста (20px) и сделайте его жирным (B)

Добавление цены

1. Перетащите еще один блок "Текст" под названием
2. Введите цену: "89 990 ₽"
3. В правой панели настройте цвет текста (например, синий) и размер (18px)

Добавление кнопки

1. Перетащите блок "Кнопка" под цену
2. Измените текст на "Купить" (двойным кликом по кнопке)
3. В правой панели настройте цвет кнопки (например, зеленый) и скругление углов (8px)

Шаг 4: Настройка позиций и размеров

Теперь нужно расположить блоки красиво:

1. Кликните на блок с изображением
2. В правой панели установите ширину 200px и высоту 200px
3. Перетащите изображение в верхнюю часть фрейма
4. Выделите блок с названием и переместите его под изображение
5. Выделите блок с ценой и поставьте его под названием
6. Выделите кнопку и поместите ее под ценой

Для более точного позиционирования используйте поля X и Y в правой панели.

Шаг 5: Множественное выделение и выравнивание

Чтобы все блоки выглядели аккуратно, выровняем их по центру:

1. Зажмите клавишу Ctrl и кликните по всем блокам по очереди (изображение, название, цена, кнопка)
2. Все блоки подсветятся желтой пунктирной рамкой
3. В правой панели появится раздел "Выравнивание"
4. Нажмите кнопку "⬆️" (выровнять по центру)
5. Все блоки выровняются по горизонтали

Шаг 6: Сохранение проекта

Проект сохраняется автоматически каждые 3 секунды. В правой панели вы видите статус сохранения:

• 💾 Сохранено — все изменения сохранены
• ⏳ Сохранение... — идет процесс сохранения

Вам не нужно нажимать кнопку "Сохранить" — редактор делает это сам.

Шаг 7: Экспорт в код

Когда макет готов, его можно экспортировать в HTML и CSS:

1. Убедитесь, что нужный фрейм выделен
2. Нажмите кнопку "Экспорт в код" на верхней панели
3. Откроется модальное окно с двумя вкладками: HTML и CSS
4. Нажмите "Копировать", чтобы скопировать код в буфер обмена

Пример сгенерированного кода:

<div class="frame" style="width: 375px; height: 600px;">
    <div class="block block-image" style="left: 87px; top: 20px; width: 200px; height: 200px;">
        <img src="data:image/jpeg;base64,..." alt="Image">
    </div>
    <div class="block block-text" style="left: 20px; top: 230px; width: 250px; height: 80px;">
        <div class="content" style="font-size: 20px; font-weight: bold;">Смартфон iPhone 15</div>
    </div>
    <div class="block block-text" style="left: 20px; top: 320px; width: 250px; height: 80px;">
        <div class="content" style="font-size: 18px; color: #0a84ff;">89 990 ₽</div>
    </div>
    <div class="block block-button" style="left: 97px; top: 410px; width: 180px; height: 60px;">
        <button class="button-content" style="background: #34c759; border-radius: 8px;">Купить</button>
    </div>
</div>

Что дальше?

Поздравляем! Вы создали свой первый проект. Теперь вы можете:

• Создать более сложный макет с несколькими фреймами
• Добавить форму обратной связи
• Изучить горячие клавиши для ускорения работы
• Заказать установку кода на сервер

Часто задаваемые вопросы

Можно ли изменить размер фрейма после создания?

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

Как удалить ненужный блок?

Выделите блок и нажмите клавишу Delete, либо нажмите на крестик в правом верхнем углу блока при наведении.

Что делать, если я случайно закрыл вкладку?

Не волнуйтесь! Проект автоматически сохраняется. При следующем открытии редактора вы увидите все свои фреймы и блоки.

Сколько проектов можно создать?

Без ограничений. Все проекты хранятся в вашем браузере.

Как перенести проект на другой компьютер?

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