Как использовать HtmlDrag: импорт, редактирование, уточнение и экспорт HTML

Это руководство описывает реальный рабочий процесс от исходного материала до готового результата HTML. Узнайте, как импортировать существующую страницу, захватить общедоступный URL-адрес, использовать ИИ-доработка, превратить поддерживаемые файлы в редактируемый HTML, внести визуальные изменения, а также сохранить, поделиться или экспортировать свою работу.

1. Перенесите контент в HtmlDrag

Выберите начальный путь, соответствующий уже имеющемуся у вас материалу. Загрузите HTML и вставьте код, чтобы открыть существующую страницу для визуального редактирования; Клонировать сайт захватывает общедоступную веб-страницу; ИИ-доработка выполняет целевые изменения на импортированной странице; Файл в HTML превращает поддерживаемые документы и изображения в редактируемый черновик HTML.

1.1 Домашнее рабочее пространство

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

1.2 Клонировать сайт

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

Введите общедоступный URL-адрес

Откройте Клонировать сайт, вставьте общедоступный адрес http:// или https:// и нажмите Клонировать. Адреса частных сетей, пути к локальным файлам и страницы, требующие частного входа в систему, не поддерживаются.

Клонировать сайт: вставьте адрес общедоступной веб-страницы и запустите клон

Просмотрите захваченную страницу

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

1.3 Загрузить HTML

Используйте Загрузить HTML, если у вас уже есть файл .html или .htm и вы хотите внести визуальные изменения, не перестраивая страницу с нуля.

Выберите существующий HTML-файл

Выберите Загрузить HTML, затем нажмите или перетащите HTML-файл в область загрузки. Исходная страница остается отправной точкой для редактора; HtmlDrag не превращает страницу в статический снимок экрана.

Загрузить HTML: выберите или перетащите существующий файл .html или .htm

Проверьте импортированный результат

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

1.4 Вставка кода

Используйте Вставить код, когда HTML находится в помощнике по кодированию, локальном редакторе, электронной почте или на другой вкладке браузера.

Вставьте визуализированный HTML

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

Вставить код: вставьте исходный код HTML и откройте его в редакторе

Ознакомьтесь с ресурсами и уведомлениями о безопасности

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

1.5 Целевая ИИ-доработка

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

ИИ-доработка: выберите существующую страницу в качестве источника для целевого редактирования

Откройте рабочую область уточнения

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

ИИ-доработка: выбранная страница обрабатывается

Выберите масштаб изменения

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

ИИ-доработка: отметьте элементы, на которые должна повлиять инструкция

Просмотрите и продолжите редактирование

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

ИИ-доработка: просмотрите результат, затем откройте его в редакторе или просмотрите

1.6 Файл в редактируемый HTML с помощью ИИ

Файл в HTML создает редактируемую HTML-страницу из исходного материала. Это полезно, когда отправной точкой является документ PDF, Word, презентация PPT/PPTX, электронная таблица Excel/XLSX, CSV, Markdown или текстовый файл или изображение, а не существующий HTML.

Файл в HTML: начните с документа, таблицы, презентации или изображения

Загрузите исходный файл

Откройте Файл в HTML, прикрепите исходный файл и добавьте короткую инструкцию, описывающую, что вы хотите создать. В подсказке можно указать цель страницы, аудиторию, тон, структуру или визуальное направление.

Файл в HTML: прикрепите исходный файл и опишите нужную страницу

Подождите, пока контент будет организован

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

Файл в HTML: исходный код собирается в HTML-страницу

Файл в HTML: система организует иерархию, макет и компоненты

Просмотрите редактируемый результат

Когда страница будет готова, просмотрите предварительный просмотр и выберите ИИ-доработка, Открыть в редакторе, Поделиться или Загрузить HTML по мере необходимости. Результатом является редактируемая HTML-страница, на которой можно продолжить тот же рабочий процесс визуального редактирования.

Файл в HTML: сгенерированная HTML-страница готова для просмотра и редактирования

2. Основные возможности визуального редактора

Сердце HtmlDrag — мощный редактор WYSIWYG, который позволяет работать непосредственно в реальной среде HTML, устраняя необходимость редактирования кода.

2.1 Обзор интерфейса редактора

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

Рабочая область визуального редактора: выберите элемент, настройте его и сохраните или экспортируйте проект

Левая навигация и история

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

Центральная область холста

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

Правая панель (Правка/Компоненты/Слои/Библиотека)

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

Верхние и нижние действия

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

2.2 Основные операции и выбор

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

Вид выбора: просмотрите выбранные элементы перед применением целенаправленного изменения

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

Используйте Нажмите, чтобы выбрать, чтобы выбрать один элемент на странице. Редактор выделяет элемент и показывает его тег или содержимое в состоянии выделения.

Выбор области и полноэкранный режим

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

Выбор в полноэкранном режиме: работайте с большим пространством на сложных страницах

Режим перетаскивания и режим редактирования

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

Блокировка, скрытие и удаление элементов

Используйте элементы управления элементом или контекстное меню, чтобы заблокировать элемент от случайного редактирования, скрыть его при просмотре макета или удалить из текущего HTML. Подтвердите выбор перед удалением; используйте отмену или восстановление, когда вам нужно вернуться в предыдущее состояние.

Контекстное меню

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

Множественный выбор

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

2.3 Ярлыки холста

Освоение сочетаний клавиш может значительно повысить эффективность редактирования. Вот основные сочетания клавиш, поддерживаемые в области холста:

2.4 Правая панель — вкладка «Редактировать»

Вкладка «Редактировать» — наиболее часто используемая область, предоставляющая переключатели режимов и богатые инструменты настройки стиля. После выбора элемента на панели интеллектуально отображаются параметры редактирования в зависимости от типа элемента.

Вкладка "Правка": переключатели режимов и инструменты стиля

Переключение режимов

В верхней части панели расположены четыре переключателя режимов для управления поведением редактора. Каждый переключатель можно включать и выключать независимо с уведомлением о текущем состоянии.

Совет: Навигация по ссылкам по умолчанию отключена во время редактирования, чтобы можно было изменять компоненты. Чтобы переходить по ссылкам, включите переключатель «Навигация по ссылкам» на панели «Редактировать». Отправка форм также заблокирована в режиме редактирования для защиты содержимого.

Стиль текста

После выбора текстового элемента или входа в режим редактирования на панели отображаются комплексные инструменты стиля текста со следующими параметрами форматирования:

Стиль текста: настройки шрифта, размера, цвета

Стиль элемента

После выбора любого элемента используйте инструменты стиля элемента, чтобы настроить его внешний вид:

Стиль изображения

После выбора элемента изображения настройте параметры отображения и замените изображение:

Стиль таблицы

При выборе таблицы или ячейки таблицы становятся доступны специальные инструменты редактирования таблицы. Подробные инструкции см. в разделе 4.10 Редактирование таблиц.

Стиль таблицы: операции со строками/столбцами, границы и настройки ячеек

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

Добавьте ссылки для навигации по клику к любому элементу или отредактируйте существующие ссылки:

Инструменты выравнивания (множественный выбор)

Если выбрано несколько элементов, на панели отображаются инструменты выравнивания и распределения, которые помогут быстро организовать макеты элементов:

2.5 Правая панель — вкладка «Компоненты»

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

Вкладка «Компоненты». Вставка различных элементов одним щелчком мыши

2.6 Правая панель — вкладка «Слои» (дерево DOM)

Вкладка «Слои» обеспечивает просмотр списка всех редактируемых элементов на холсте, поддержку фильтрации, пакетных операций и точного позиционирования — мощный инструмент для управления сложными элементами страницы.

Вкладка "Слои": управление слоями и пакетные операции

Список карточек элементов

На панели все управляемые элементы отображаются в виде карточек. На каждой карточке указан тип тега элемента (например, DIV, IMG, SPAN) и уровень слоя, а текстовые элементы показывают предварительный просмотр содержимого. Элементы декоративного слоя отмечены значком «Декоративный». Значки быстрой блокировки/разблокировки и скрытия/отображения появляются на правой стороне каждой карты.

Параметры фильтра

Нажмите кнопку «Фильтр», чтобы отфильтровать список по состоянию элемента со следующими параметрами:

Пакетные операции

После выбора нескольких элементов в списке карточек используйте кнопки пакетной обработки для унифицированной обработки:

Переключение точности

На вкладке «Слои» имеется переключатель точности для управления точностью распознавания элементов:

Нажмите на карту, чтобы найти

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

2.7 Правая панель — вкладка «Библиотека» (Избранное)

Вкладка «Библиотека» — это ваша личная библиотека компонентов, где вы можете сохранять часто используемые элементы или компоненты для повторного использования в разных проектах, повышая эффективность вашего творчества.

Вкладка «Библиотека»: Персональная библиотека компонентов

Список избранных компонентов

На панели отображаются все сохраненные вами компоненты в виде карточек, каждая из которых содержит миниатюру и имя. Миниатюры генерируются автоматически при сохранении; безымянные компоненты отображаются как «Без названия».

Поиск в избранном

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

Вставить избранный компонент

Нажмите кнопку «Вставить» на карточке библиотеки, чтобы добавить этот компонент на текущий холст. Вставленные компоненты можно редактировать и настраивать обычным образом.

Переименовать/удалить избранное

Каждая читательская карточка предлагает опции «Переименовать» и «Удалить». Переименование упрощает поиск компонентов в дальнейшем; удаление безвозвратно удаляет сохраненный компонент — используйте с осторожностью.

Как добавить в библиотеку

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

2.8 Контекстное меню

Щелчок правой кнопкой мыши по выбранному элементу открывает контекстное меню, обеспечивающее быстрый доступ к общим действиям. Содержимое меню динамически настраивается в зависимости от выбранного типа элемента.

Контекстное меню: быстрый доступ к общим действиям

Меню для конкретного стола

При щелчке правой кнопкой мыши по ячейке таблицы в меню отображаются дополнительные операции, специфичные для таблицы:

2.9 Редактирование таблиц

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

Редактирование таблицы: операции со строками/столбцами и настройки стиля

Операции со строками и столбцами

В разделе «Строки и столбцы» панели редактора таблиц предусмотрены:

Объединить/разделить ячейки

Выбрав несколько соседних ячеек, используйте «Объединить ячейки», чтобы объединить их в одну. Для объединенных ячеек используйте «Разделить ячейку», чтобы восстановить их до исходных нескольких ячеек.

Выравнивание ячеек

Установите выравнивание содержимого ячейки в двух измерениях:

Стиль границы

Настройте внешний вид границ таблицы, включая:

Нажмите «Применить», чтобы сохранить изменения.

Фон ячейки

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

2.10 Управление масштабированием и предустановки области просмотра

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

Управление масштабом: регулировка масштаба холста и размера области просмотра

Увеличение/Уменьшение/Сброс

Используйте кнопки «+» и «-», чтобы увеличить или уменьшить масштаб изображения холста, или удерживайте Ctrl/Cmd + колесо мыши для быстрого масштабирования. Нажмите процентное число, чтобы вернуться к масштабу по умолчанию. Удерживайте пробел + перетаскивание, чтобы панорамировать холст.

Предварительные настройки размера видового экрана

Нажмите на переключатель области просмотра, чтобы переключаться между размерами предварительного просмотра, имитируя отображение на разных устройствах:

Предварительный просмотр патчей

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

Совет: Если патчи не дают заметного эффекта, сначала попробуйте «Восстановить исходный HTML», а затем снова включите патч.

2.11 Редактор исходного кода HTML

Редактор HTML позволяет вам напрямую просматривать и редактировать полный исходный код HTML вашей работы — идеально подходит для опытных пользователей, которым требуется тонкая настройка или специальные дополнения кода. Эта функция доступна только в версии Pro.

Редактор HTML: прямое редактирование исходного кода (Pro)

Просмотр/редактирование полного HTML-кода

Когда вы открываете редактор HTML, отображается полный исходный код HTML (включая <!DOCTYPE html>). Вы можете редактировать код напрямую; при сохранении будут применены ваши изменения.

Поиск и замена

Используйте Ctrl+F, чтобы открыть поиск, вводя ключевые слова, чтобы быстро найти код. Используйте Ctrl+H, чтобы открыть замену для пакетной замены текста. На панели инструментов отображается количество совпадений (например, «3/15») с опциями индивидуальной замены или замены всех.

Перейти к линии

Используйте Ctrl+G или функцию перехода на панели инструментов, чтобы ввести номер строки и быстро перейти к этой строке — полезно для больших файлов HTML.

Спичечный футляр

Включите параметр «Учитывать регистр» во время поиска, чтобы точно сопоставить содержимое с учетом регистра.

Перенос по словам

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

Копировать/Сохранить

Нажмите «Копировать HTML», чтобы скопировать полный исходный код в буфер обмена. После редактирования нажмите «Сохранить», чтобы применить изменения. Если контент пуст или содержит синтаксические ошибки, появятся соответствующие сообщения.

Примечание: Если содержимое HTML превышает лимит хранилища, при сохранении появится сообщение «Недостаточно места в хранилище — сохранить это изменение невозможно». Удалите ненужное содержимое или перейдите на другой тариф, чтобы увеличить объём.

2.12 Нижняя панель инструментов

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

Рабочая область редактора: нижние элементы управления для предварительного просмотра, восстановления, обновления и сохранения версии

Предварительный просмотр (откроется в новом окне)

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

Отменить/Повторить

Отменить возвращает последнюю операцию; Redo восстанавливает отмененную операцию. Поддерживает несколько шагов отмены/повтора. Также доступно через Ctrl+Z (отменить действие) и Ctrl+Y (повторить действие).

Обновить предварительный просмотр

Нажатие кнопки «Обновить» перезагружает область предварительного просмотра. Система сначала сохраняет текущий контент, а затем обновляет холст, чтобы отобразить последнее состояние. Полезно после обширного редактирования для синхронизации дисплея.

Восстановить последнее сохраненное состояние

Восстанавливает работу до последнего сохраненного вручную состояния. Все несохраненные изменения будут потеряны. Используйте их с осторожностью. Перед выполнением система запросит подтверждение.

Восстановить исходный HTML

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

Сохранять

Вручную сохраняет все текущие изменения. Система также поддерживает автосохранение, но после важных изменений рекомендуется сохранять вручную, чтобы обеспечить сохранность данных. По завершении появится надпись «Сохранить успешно».

2.13 Верхняя панель инструментов

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

Рабочая область редактора: верхние элементы управления для загрузки HTML, экспорта изображений и совместного использования

Название проекта (дважды щелкните, чтобы изменить)

Вверху отображается название текущего проекта; дважды щелкните область заголовка, чтобы войти в режим редактирования и изменить имя. Название не может быть пустым; В случае успеха появляется сообщение «Заголовок обновлен успешно». Безымянные проекты отображаются как «Работа без названия».

Кнопка «Поделиться»

Нажмите кнопку «Поделиться», чтобы включить общий доступ к работе и создать доступную ссылку. Подробнее см. в разделе 4.16 Функция общего доступа. Эта функция доступна только в версии Pro.

Кнопки загрузки

В правой части расположены кнопки «Загрузить как изображение» и «Загрузить как HTML». Подробности см. в разделе 4.15. Экспорт и загрузка HTML.

3. Управление проектами, обмен и экспорт

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

3.1 Экспорт и загрузка HTML

Используйте Загрузить HTML на правой верхней панели инструментов, чтобы экспортировать версию, которую вы просмотрели в редакторе. Диалоговое окно экспорта отделяет отредактированную страницу от исходного источника, а также предоставляет параметры копирования и передачи AI.

Экспорт HTML: выберите отредактированный или исходный источник, скопируйте HTML или отправьте его в AI

Отредактированный HTML

На вкладке Отредактированный HTML экспортируется текущая версия, включая изменения, внесенные на холсте.

Исходный HTML

Вкладка Исходный HTML сохраняет исходный импортированный источник доступным, когда вам нужно сравнить или восстановить начальную версию.

Скопируйте HTML и экспортируйте в AI

Копировать HTML копирует текущий источник в буфер обмена. Экспорт в AI создает ссылку передачи, чтобы другой рабочий процесс AI мог прочитать текущий HTML и продолжить работу с отредактированным результатом.

3.2. Поделиться функциями и общедоступными превью

Функция «Поделиться» создает общедоступную ссылку на текущую работу, чтобы другие люди могли просмотреть ее, не заходя в редактор. На снимке экрана ниже показаны настройки общего доступа, доступные перед публикацией ссылки. Эта функция доступна для пользователей Pro.

Поделиться проектом: выберите продолжительность ссылки и решите, какие уведомления или боковые панели показывать

Выберите «Настройки общего доступа».

Нажмите Поделиться и выберите доступную продолжительность, например 7 дней, 30 дней, 90 дней или оставшийся период вашего плана. Ссылка «Поделиться» не может пережить дату истечения срока действия плана.

Параметры отображения

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

Поделиться страницей и получить доступ

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

3.3 Панель быстрого доступа «Мои проекты»

Панель быстрого доступа «Мои проекты» слева позволяет разворачивать/сворачивать список проектов и быстро переключаться между проектами, обеспечивая плавный переход между несколькими творениями.

Развернуть и свернуть

Нажмите кнопку «Мои проекты» в левом верхнем углу, чтобы развернуть список работ на боковой панели. Нажмите еще раз или щелкните за пределами боковой панели, чтобы свернуть ее. В развернутом виде вы можете визуально просматривать миниатюры и названия своих исторических проектов.

Переключение проектов

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

3.4 Снимки истории версий

На левой боковой панели «Мои проекты» (История) обеспечивает быстрый доступ к вашим прошлым творениям. В нем перечислены все ваши записи редактирования в хронологическом порядке.

Быстрый выбор и редактирование

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

Детали окна предварительного просмотра

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

1. Изменить заголовок напрямую: щелкните текст заголовка, чтобы мгновенно изменить имя проекта.
2. Просмотр статуса общего доступа: значки указывают, опубликована ли работа в данный момент.
3. Быстрые действия: доступ к редактированию, удалению и другим ярлыкам.

История: быстрый просмотр и управление прошлыми проектами

3.5 Управление и организация проекта

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

Список работ и фильтры

Проекты отображаются в виде карточек или списком. Вы можете отфильтровать их, используя:

1. Поиск: введите код работы или должность для поиска.
2. Фильтр по типу: фильтрация по генератору искусственного интеллекта, загрузке файла, клонированию веб-страницы, вставке кода и т. д.
3. Диапазон дат: выберите даты начала и окончания, чтобы отфильтровать проекты за определенный период.
4. Сортировка: сортировка по: сначала самые новые, сначала самые старые, количество лайков или количество просмотров.

управление проектами: просмотр, фильтрация и управление всеми проектами

Просмотр и редактирование проектов

Нажмите кнопку «Просмотр» на карточке проекта, чтобы просмотреть его. В интерфейсе предварительного просмотра вы можете:

1. Отредактируйте заголовок проекта (дважды щелкните заголовок, чтобы изменить его).
2. Нажмите «Изменить», чтобы войти в визуальный редактор и продолжить редактирование.
3. Просмотр истории сохранений работы и восстановление до определенной версии

Управление статусом общего доступа

Пользователи Pro могут делиться проектами, позволяя другим просматривать их по ссылке:

1. Включить общий доступ. Нажмите кнопку «Поделиться», чтобы создать ссылку для общего доступа, действительную в течение 7 дней.
2. Обновить общий ресурс: ссылки на уже опубликованные проекты могут быть обновлены, что приведет к обновлению срока действия.
3. Запретить общий доступ. Нажмите «Прекратить общий доступ», чтобы немедленно аннулировать ссылку.

Удалить проекты

Нажмите кнопку «Удалить» на карточке проекта, чтобы удалить его. Система отобразит два диалоговых окна подтверждения, чтобы предотвратить случайное удаление:

1. Первое подтверждение: спрашивает, хотите ли вы удалить эту работу.
2. Второе подтверждение: напоминает, что удаление необратимо.

Совет: За один раз можно удалить не более 3 записей. После удаления проекта место в хранилище, которое он занимал, будет освобождено.

Страница «Проекты» — это выделенное место для просмотра и управления всеми вашими творениями. Получите к нему быстрый доступ из боковой панели или пользовательского меню.

Рабочий дисплей

На странице все ваши проекты отображаются в виде карточек, каждая из которых содержит:

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

Проекты: просматривайте все свои творения и управляйте ими в одном месте

Быстрые действия

На каждой карточке проекта предусмотрены удобные кнопки действий:

1. Изменить. Войдите в визуальный редактор, чтобы продолжить создание.
2. Поделиться: создание ссылок для общего доступа или управление ими (только версия Pro).

4. Системные советы и устранение неполадок

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

4.1 Обнаружение HTML и оповещения о хотлинках

Чтобы обеспечить качество импорта и стабильность редактора, система автоматически сканирует URL-адреса и файлы, предупреждая вас о потенциальных проблемах.

Обнаружение локальных ресурсов

Если страница содержит локальные пути (например, file:// или C:/), ресурсы не будут загружаться. Предложение: убедитесь, что все ресурсы используют общедоступные ссылки HTTP/HTTPS.

Защита хотлинков изображений

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

Страницы динамического рендеринга (SPA)

Страницы, полностью использующие JavaScript (SPA), могут импортироваться как пустые или неполные, поскольку динамический DOM не фиксируется напрямую. Предложение. Используйте команду «Вставить код», скопировав визуализированный HTML-код из браузера.

Внешние шрифты/библиотеки значков

Шрифты или значки с отсутствующими заголовками CORS могут отображаться неправильно. Предложение: замените их системными шрифтами или значками библиотеки в редакторе.

Встроенный контент (iframe)

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

4.2 Ограничения на хранение и использование

HtmlDrag применяет квоты ресурсов в соответствии с вашим планом. Вы можете увидеть оповещения «Достигнут лимит хранилища» или «Достигнут лимит работы».

Достигнут предел хранилища

Вы не можете сохранять изменения или загружать файлы, если на диске недостаточно места. Решение:

1. Удалите старые элементы в «Проектах», чтобы освободить место.
2. Нажмите «Обновить сейчас» в диалоговом окне, чтобы получить больше возможностей с версией Pro.

Ограничение количества проектов

Бесплатные пользователи имеют ограничение на количество сохраняемых проектов. Удалите старые проекты или обновите их, чтобы увеличить этот лимит.

Ограничения на загрузку изображений

Система проверяет размер одного файла и ограничения по пакетам. Если вы видите сообщение «Размер файла превышает лимит» или «Размер пакета превышен», сжимайте изображения или загружайте меньшими партиями. Профессиональные пользователи получают более высокие лимиты.

4.3 Песочница безопасности и очистка

Встроенное сканирование безопасности автоматически оценивает риск контента при импорте URL-адресов, загрузке файлов или вставке кода для защиты вашей учетной записи.

Уровень риска

На основании таких угроз, как XSS, вредоносные сценарии или опасные теги, риски классифицируются как:

1. Низкий риск: незначительные предупреждения; обычно безопасно продолжать.
2. Средний риск: потенциальные проблемы; действуйте осторожно.
3. Высокий риск: серьезные риски; продолжайте только в том случае, если источнику доверяют.
4. Критический риск: содержит вредоносное ПО или фишинговый контент; сразу заблокировали.

Безопасный режим

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

4.4 Системные уведомления и сообщения

Модуль «Сообщения» получает важные системные уведомления, включая состояние учетной записи, напоминания о платежах, оповещения об истечении срока подписки и обновления функций.

Сообщения: получение системных уведомлений и оповещений

Список системных сообщений

Список сообщений отсортирован в хронологическом порядке, показывая заголовок, краткое описание, время создания и срок действия. Нажмите на сообщение, чтобы просмотреть подробности или выполнить действия (например, «Продолжить платеж», «Продлить сейчас»).

Непрочитанный фильтр

Установите флажок «Только непрочитанные» в правом верхнем углу, чтобы быстро фильтровать непрочитанные сообщения и сосредоточиться на важных уведомлениях.

Отметить все как прочитанное

Нажмите кнопку «Отметить все как прочитанные», чтобы мгновенно пометить все сообщения в текущем списке как прочитанные, очистив красные точки.

Подробности сообщения

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

4.5 Обратная связь и поддержка

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

Обратная связь: сообщайте о проблемах или предложениях

Список отзывов и статус

В списке отображается история ваших заявок и текущий статус:

1. В процессе: отзыв отправлен, ожидает рассмотрения администратором.
2. Ответ: Администратор ответил; нажмите, чтобы просмотреть.
3. Закрыто: отзыв заархивирован или решен; дальнейшие ответы не допускаются.

Отправить новый отзыв

Нажмите «Новый отзыв», введите текст (обязательно, минимум 10 символов). Вы можете «Загрузить изображения» (максимум 2 МБ каждое), чтобы предоставить скриншоты. Когда закончите, нажмите «Отправить отзыв».

Подробности обратной связи и разговор

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

Продолжить ответ

Для отзывов «В процессе» или «Ответ» используйте поле ввода внизу, чтобы предоставить дополнительную информацию или ответить администратору, пока они не будут решены.

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

Мы ценим каждый отзыв и постараемся обработать его как можно скорее. Спасибо за участие и поддержку!

5. Учетная запись, кредиты и подписка (Приложение)

Управляйте настройками своей учетной записи, безопасностью входа в систему, кредитным балансом и планами подписки.

5.1 Регистрация

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

Регистрация по электронной почте

На странице регистрации выполните следующие шаги для создания учетной записи:

1. Введите адрес электронной почты. Укажите часто используемый адрес электронной почты. Он будет служить вашими учетными данными для входа и каналом уведомлений. Убедитесь, что формат электронного письма правильный, например: [email protected].
2. Установить пароль. Пароль должен содержать буквы и цифры длиной от 8 до 32 символов. Мы рекомендуем использовать надежный пароль для защиты вашей учетной записи.
3. Подтвердите пароль. Введите пароль еще раз, чтобы убедиться, что обе записи совпадают.
4. Задать псевдоним (необязательно). Вы можете настроить свой псевдоним. Если оставить это поле пустым, система автоматически сгенерирует для вас псевдоним по умолчанию.
5. Согласен с условиями. Установите флажок «Я прочитал и согласен с Условиями обслуживания и Политикой конфиденциальности», затем нажмите кнопку «Зарегистрироваться», чтобы завершить регистрацию.

Страница регистрации: введите адрес электронной почты и основную информацию для создания учетной записи

Проверка электронной почты и кредитное вознаграждение

После успешной регистрации система отправит письмо с подтверждением на ваш почтовый ящик. После завершения проверки электронной почты вы получите бонусные кредиты, которые можно использовать для функций Генератор ИИ и Клонировать сайт. Если вы не получили электронное письмо, проверьте папку со спамом; вы можете нажать «Отправить повторно», чтобы запросить еще одно письмо с подтверждением через 3 минуты.

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

5.2 Войти

HtmlDrag поддерживает несколько методов входа. Выбирайте наиболее удобный вариант исходя из своих предпочтений.

Электронная почта и пароль

Войдите, используя адрес электронной почты и пароль, которые вы указали при регистрации:

1. Введите свой адрес электронной почты на странице входа.
2. Введите свой пароль (нажмите значок глаза, чтобы переключить видимость пароля)
3. Нажмите кнопку «Продолжить», чтобы завершить вход.

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

Сторонний вход (Google/GitHub)

Для более быстрого доступа вы можете войти в систему, используя свою учетную запись Google или GitHub:

1. Войти через Google. Нажмите кнопку «Войти через Google». Во всплывающем окне авторизации Google выберите свою учетную запись и подтвердите авторизацию.
2. Войти с помощью GitHub. Нажмите кнопку «Войти с помощью GitHub». Вы будете перенаправлены на страницу авторизации GitHub. После подтверждения вы автоматически вернетесь в HtmlDrag.

Страница входа: поддерживает адрес электронной почты/пароль и сторонние учетные записи

Совет: Вход через Google или GitHub автоматически создаёт аккаунт, поэтому отдельная регистрация не требуется. При первом входе через сторонний сервис система автоматически создаст связанный аккаунт.

Забыли пароль? Ссылка

Если вы забыли свой пароль, нажмите кнопку «Забыли пароль?». ссылку в правом нижнем углу страницы входа для входа в процесс сброса пароля (см. раздел 1.3).

5.3 Забыли и сбросили пароль

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

Процесс сброса пароля

Выполните следующие действия, чтобы сбросить пароль:

1. Введите адрес электронной почты: укажите адрес электронной почты, который вы использовали при регистрации.
2. Получить код подтверждения. Нажмите кнопку «Отправить код». Система отправит электронное письмо, содержащее 6-значный код подтверждения.
3. Введите код подтверждения. Введите полученный шестизначный код в поле кода подтверждения.
4. Установить новый пароль: введите новый пароль (должен содержать буквы и цифры длиной 8–32 символа).
5. Подтвердите новый пароль: введите новый пароль еще раз, чтобы убедиться, что он совпадает.
6. Нажмите «Сбросить пароль»: завершите сброс пароля. После просмотра сообщения об успехе вы будете автоматически перенаправлены на страницу входа.

Забыли пароль: сбросьте с помощью кода подтверждения по электронной почте

Срок действия кода подтверждения

Код подтверждения имеет ограниченный срок действия. Используйте его сразу после получения электронного письма. Если срок действия кода истек, вы можете нажать кнопку «Отправить повторно», чтобы запросить новый код (перед повторной отправкой вам придется дождаться окончания обратного отсчета).

Примечание: Если ваш адрес электронной почты не зарегистрирован в системе, код подтверждения отправить невозможно. Убедитесь, что вводите адрес, использованный при регистрации.

5.4 Настройки профиля

Модуль «Настройки профиля» позволяет вам управлять основной информацией вашей учетной записи, включая настройки аватара, псевдонима, электронной почты, биографии и пароля.

Изменить аватар

Нажмите кнопку «Изменить аватар» в области аватара и выберите локальный файл изображения для загрузки. Система автоматически обрежет и сохранит ваш новый аватар.

Изменить псевдоним

Нажмите кнопку «Изменить» рядом со своим ником, введите новое имя и нажмите «Сохранить». Ваш никнейм будет отображаться во всех ваших проектах и комментариях.

Управление электронной почтой

В разделе электронной почты отображается ваш текущий адрес электронной почты и статус проверки:

1. Проверено: ваш адрес электронной почты подтвержден, и все функции доступны.
2. Не проверено. Нажмите «Отправить электронное письмо с подтверждением», чтобы завершить проверку и получить бонусные кредиты.
3. Изменить адрес электронной почты: сначала необходимо подтвердить текущий адрес электронной почты, а затем ввести новый адрес электронной почты, чтобы завершить изменение.

Био

Введите информацию о себе в области биографии (рекомендуется: не более 200 символов), затем нажмите «Сохранить» для обновления.

Изменить пароль/Установить пароль

Нажмите кнопку «Изменить пароль», чтобы открыть диалог настройки пароля:

1. Пользователи с существующим паролем: введите текущий пароль, затем установите новый пароль (8–32 символа, включая буквы и цифры).
2. Пользователи без пароля: установите новый пароль напрямую. После настройки вы можете войти в систему, используя адрес электронной почты и пароль.

Удалить аккаунт

Чтобы удалить свою учетную запись, нажмите кнопку «Удалить учетную запись» внизу страницы. В целях безопасности вам необходимо подтвердить свою личность с помощью кода подтверждения по электронной почте.

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

Профиль: управление аватаром, псевдонимом, адресом электронной почты и паролем

5.5 Использование хранилища

Модуль «Использование хранилища» отображает потребление хранилища вашей учетной записью, помогая вам понять, сколько места осталось, и соответствующим образом спланировать свои творения.

Обзор хранилища

В верхнем разделе отображается общий объем использования, в том числе:

1. Используется: объем памяти, используемый в данный момент.
2. Итого: лимит хранилища вашей учетной записи (пользователям Pro предлагается больший объем).
3. Осталось: свободное место для создания новых проектов.
4. Сохраненные проекты: текущее количество сохраненных проектов и ограничение.

Распределение хранилища

Система разделяет хранилища на три типа:

1. HTML-контент: пространство, используемое кодом веб-страницы ваших проектов.
2. Ресурсы изображений: пространство, используемое загруженными файлами изображений.
3. Другие ресурсы: пространство, используемое другими вложениями.

Ограничение количества проектов

Пользователи Free и Pro имеют разные ограничения на количество работ. Когда вы достигнете лимита, вам придется удалить некоторые проекты или обновить план, прежде чем создавать новые.

Обновление и модернизация хранилища

Нажмите кнопку «Обновить», чтобы обновить информацию о хранилище. Чтобы получить больше места для хранения, нажмите «Обновить хранилище», чтобы перейти на страницу цен и выбрать подходящий план.

Совет: Если хранилище аккаунта заполнено или достигнут лимит проектов, система приостановит создание новых проектов. Удалите некоторые проекты или перейдите на другой тариф, чтобы восстановить возможность загрузки.

5.6 Кредиты и история использования

Модуль «Кредитная история» отображает историю кредитных транзакций вашей учетной записи, включая записи о потреблении и доходах.

История кредитных транзакций

Кредитные записи отображаются в таблице, содержащей следующую информацию:

1. Дата: когда произошло изменение кредита.
2. Тип: тип операции изменения кредита.
3. Изменение кредитов: кредиты добавлены (положительный результат) или вычтены (отрицательный результат).
4. Описание: подробное объяснение изменения.

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

Типы кредитов

1. Генератор ИИ: кредиты, расходуемые при использовании функции генератора ИИ.
2. Клонировать сайт: кредиты, расходуемые при использовании функции клонирования веб-страницы.
3. Награда за регистрацию: кредиты, начисляемые новым пользователям после регистрации и проверки электронной почты.
4. Бонус платформы: кредиты, подаренные платформой.
5. Ежемесячный подарок: ежемесячный кредит для пользователей Pro.
6. Пополнение кредита: кредиты, полученные за покупки в кредит.
7. Административная корректировка: кредиты корректируются администраторами вручную.

Кредитная история: просмотр сведений о кредитной транзакции

Совет: Пользователи Pro получают дополнительные кредиты каждый месяц. Кредиты можно использовать для платных функций, например «Генератор ИИ» и «Клонировать сайт».

5.7 История заказов и выставление счетов

Модуль «История заказов» отображает историю ваших покупок и записи платежей, что упрощает запрос заказов и управление ими.

Управление заказами

В списке заказов отображаются записи о ваших покупках. Вы можете:

1. Просмотр статуса и подробностей заказа
2. Используйте фильтры, чтобы быстро находить конкретные заказы
3. Продолжить оплату отложенных заказов
4. Закройте или удалите ненужные вам заказы

Совет: При проблемах с оплатой можно закрыть текущий заказ и создать новый.

5.8 Ценообразование и планы подписки

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

Планы подписки

HtmlDrag предлагает планы подписки Pro и Pro Max. После подписки вы сможете пользоваться включенными преимуществами в течение активного периода подписки:

Pro: для обычных авторов, которым нужен полный рабочий процесс редактирования HTML, создания искусственного интеллекта, обмена и экспорта.

Pro Max: для более сложного создания искусственного интеллекта, более крупных проектов и более высоких ограничений использования.

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

Цены: выберите план, который подходит вам лучше всего

Пополняющие кредиты

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

Сравнение функций

Основные различия между Free и Pro заключаются в следующем:

Руководство по использованию кредита

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

Начните работу с HtmlDrag

Начните с существующей HTML-страницы, общедоступного URL-адреса, запроса на доработку ИИ или поддерживаемого файла. HtmlDrag помогает перейти от исходного материала к визуальному редактированию, совместному предварительному просмотру или чистому экспорту HTML.

Начните творить сейчас

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