Как редактировать сайт в браузере
Компания Adobe прекращает размещение существующих сайтов в Business Catalyst с 26 марта 2020 г. Начиная с 26 марта 2020 г. редактирование пробных или платных сайтов Business Catalyst с помощью функции In-Browser Editing будет невозможно. Для получения подробной информации о прекращении обслуживания Business Catalyst перейдите в раздел Объявление о прекращении обслуживания Business Catalyst.
Функция In-browser Editing упрощает процесс обновления содержимого веб-сайта посредством веб-браузера. Независимо от того требуется ли обновить веб-сайт, когда вы находитесь в пути, или вам необходимо предоставить клиентам и другим соавторам возможность с легкостью редактировать нужное содержимое, функция редактирования в браузере обеспечивает беспроблемное решение этих задач.
Эта функция позволяет редактировать текст и заменять все изображения, за исключением следующих элементов:
- Содержимое страницы-шаблона.
- Текст, размещенный по вертикали.
- Изображения, используемые в качестве фона в прямоугольниках, фреймах изображений и виджетах.
- Счетчики слайд-шоу.
- Кнопки для отправки данных, веденных в форму.
- Динамические подписи меню (элементы виджетов «Меню», для которых не задан параметр редактирования вручную).
- Растрированные элементы страницы: изображения со скругленными углами, скошенными краями, внутренним свечением или к которым применен поворот; текстовые фреймы, использующие системные шрифты, а также текстовые фреймы, к которым применены поворот и эффекты.
Несмотря на то что вам доступна возможность редактировать текст, формат текста вам изменить не удастся. Изображения можно только заменять. Добавить или удалить их так же не удастся.
Перед началом работы убедитесь, что в окне свойств вашего сайта включена функция In-Browser Editing.
Нажмите «Файл» > «Свойства сайта». Перейдите на вкладку «Дополнительно» и убедитесь в том, что установлен флажок «Включить In-Browser Editing».
Передайте свой сайт на FTP-сервер.
Для этого воспользуйтесь встроенной функцией Adobe Muse «Передача на FTP-сервер», выбрав команду Файл > Передача на FTP-сервер . Инструкции представлены в разделе Передача на FTP-сервер.
Сохраните файл .muse после его передачи на FTP-сервер, чтобы после внесения в дальнейшем любых изменений с помощью функции In-Browser Editing сайт можно было синхронизировать.
В этом разделе представлены инструкции по редактированию сайта Adobe Muse с помощью функции In-Browser Editing.
Из этой статьи вы узнаете, как редактировать содержимое веб-сайта Adobe Muse с помощью функции In-Browser Editing.
Войдите на сайт с использованием учетных данных, предоставленных поставщиком услуг хостинга.
После входа в систему отображается главная страница сайта с панелью навигации In-Browser Editing наверху.
Функция In-Browser Editing позволяет редактировать текст прямо в браузере. Также можно редактировать изображения, изображения в тексте и гиперссылки.
Далее можно прочитать о том, как быстро редактировать содержимое веб-сайта Adobe.
Редактирование текста
Функция In-Browser Editing позволяет с легкостью редактировать текст в браузере. После входа в In-Browser Editing просто выделите текст, который необходимо удалить, и начните вводить новый текст.
После завершения внесенные изменения немедленно отображаются в этом же браузере. Для адаптивного сайта изменения можно предварительно просматривать во всех точках остановки. Если сайт создан с помощью альтернативных макетов, предварительный просмотр изменений возможен для любого из устройств.
Редактирование изображений и изображений в тексте
Нажмите изображение, которое требуется отредактировать, либо нажмите текстовый фрейм, а затем изображение в нем, которое требуется отредактировать.
Во всплывшем окне выберите существующий файл, связанный с сайтом. Также можно передать изображение со своего компьютера, нажав кнопку «Загрузить фото».
В этом диалоговом окне также можно добавить или изменить текст всплывающей подсказки для изображения.
Выбрав фотографию, нажмите .
Старое изображение заменяется выбранным изображением.
При замене изображения размер нового изображения будет изменен в соответствии с размерами области, которую занимало предыдущее изображение. Если соотношения сторон нового изображения отлично от исходного изображения, то будет заполнена не вся область предыдущего изображения. Это может повлиять на визуальную компоновку страницы. По этой причине существующее изображение рекомендуется заменять только таким изображением, размеры которого совпадают с исходным, или изображением большего размера, но с одинаковыми пропорциями ширины и высоты.
Если сайт имеет разрешение HiDPI и замещающее изображение содержит достаточно данных для отображения в увеличенном в 2 раза размере, то при редактировании с помощью In-Browser Editing сохраняются как стандартная, так и увеличенная в 2 раза версия изображения для отображения на дисплеях HiDPI. Дополнительная информация о создании ресурсов для HiDPI представлена в статье Создание веб-сайтов HiDPI в Muse.
На веб-странице можно редактировать гиперссылки нескольких типов: внешние ссылки, ссылки электронной почты, ссылки на другие страницы веб-сайта, скачиваемые файлы и другие. Далее описывается, как редактировать гиперссылки с помощью функции In-Browser Editing.
Вставка ссылок с помощью функции In-Browser Editing
Гиперссылки можно добавлять или вставлять, нажимая кнопку «Добавить ссылку» в In-Browser Editing. Далее описывается процедура вставки и обновления ссылок для сайта Adobe Muse.
Нажмите текст там, где требуется добавить ссылку.
В диалоговом окне Вставка ссылки выберите перечисленные ниже типы целевых объектов ссылки:
Это первая часть перевода статьи о свойствах designMode и contentEditable, их поведении и особенностях.
- Различные методы включения режима редактирования
- Команды редактирования
- HTML генерируемый в процессе редактирования
- Взаимодействие с DOM
Вступление
В самом первом браузере, созданном Тимом Бернесом-Ли в 1990 году, веб-страницы можно было редактировать непосредственно в браузере в WYSIWYG режиме. Веб рассматривался как среда доступная как для чтения так и для записи. Более поздние браузеры, однако, в основном, давали возможности только для чтения информации, исключая разве что ввод текста в поля ввода форм.
WYSIWYG редактирование в браузере снова стало нормой с выходом Internet Explorer 5: новое свойство designMode позволяло пользователю редактировать весь документ. Сначала эта особенность как то упускалась из виду, возможно, ввиду того, что появилась вместе с массой других не стандартных, доступных только под ОС Windows, проприетарных возможностей IE.
В последние годы остальные браузеры-конкуренты — Mozilla, Safari и Opera (примечание переводчика: Chrome на момент написания статьи еще не появился. Первая бета выйдет только через несколько месяцев.) — последовали примеру IE и тоже реализовали эту возможность. WHATWG работает над стандартизацией режима редактирования — свойства designMode и contentEditable представлены в HTML 5. Похоже что браузерное WYSIWYG редактирование все же становится неотъемлемой частью веба.
- Различные методы включения режима редактирования
- Команды редактирования
- HTML генерируемый в процессе редактирования
- Взаимодействие с DOM
Примечание: Я рассматриваю только особенности редактирования в браузерах: Opera 9.5, Firefox 2+ и Safari 3, так как в предыдущих версиях редакторы были через-чур глючными и неполноценными. А редактор в IE практически не менялся с версии 5.5 )))
Обзор режима редактирования
- Курсор показывает текущую точку ввода. Пользователь может вводить текст, удалять его и т.д. используя клавиатуру или мышь.
- Некоторые браузеры обеспечивают интерфейсы, позволяющие изменять и двигать изображения, таблицы и абсолютно позиционированные элементы.
- Есть множество встроенных команд — Bold, Italic, InsertLink, Paste, Undo и так далее. (Полужирное начертание, курсивное начертание, вставить ссылку, вставить из буфера обмена, отменить действие и так далее.) Эти команды могут быть вызваны горячими комбинациями клавиш или с помощью скрипта с использованием соответствующего API.
- С использованием Range и Selection API вы можете реализовать любые изменения в HTML. Это можно использовать для реализации нестандартных команд.
- Режим редактирования позволяет изменять HTML. И все. Если вы, например, хотите выслать его на сервер, что бы сохранить изменения, то вам придется написать соответствующий скрипт.
- Команды и поведение редактора в основном не описаны спецификацией и результирующий HTML код сильно отличается в разных браузерах.
- Реализация в IE почти не менялась с выхода IE 5.5 (2000 год). HTML код, который он генерирует может сильно напугать чувствительных людей. Если вы думаете, что уже давным давно увидели последний в вашей жизни тег font, то вас ждет сюрприз! (Примечание переводчика: Уи-и-и-и-и-и-и-и!)
Включение режима редактирования
Есть два способа включения режима редактирования — свойства designMode и contentEditable.
Окно или фрейм становятся доступными для редактирования установкой свойства designMode объекта document в true. (Оговорка: В IE надо получить ссылку на document из объекта window.) Обычно редактируемый блок создается с использованием IFrame и designMode.
Любой элемент, содержащий текст, можно сделать редактируемым установкой свойства contentEditable в true. (contentEditable не поддерживается Firefox 2, поддержка появилась в Firefox 3. Так же она есть во всех актуальных версиях IE, Opera и Safari.)
Редактирование с помощью клавиатуры
Редактирование с помощью клавиатуры и мыши работает более менее так, как можно ожидать от простого текстового редактора. Курсор показывает точку ввода документа и ее можно перемещать по всему документу. Набор и удаление работают вполне предсказуемо. Выделение можно перемещать, удалять и перезаписывать.
Очень приятная особенность — по умолчанию работают redo и undo (запись и отмена действий). (Позже будет описано, как вызвать команду Undo.)
Сложности начинаются когда нажимаются кнопки Enter/Return. Не совсем понятно какой HTML код должен получится в результате и, действительно, этот код сильно отличается в различных браузерах и зависит от контекста. Если курсор находится внутри не пустого тега p, все браузеры закроют его и откроют новый (с теми же атрибутами) и переместят курсор в него. А Mozilla еще и вставит (излишний) элемент br после курсора. Например (в примерах символ вертикальной черты означает курсор):
И нажатие Enter/Return в IE или Safari:
Если курсор находится в конце не пустого элемента h1, все браузеры закроют h1, но IE и Opera вставят новый элемент p и поместят курсор в него. Safari вставит новый h1 элемент и поместит курсор внутрь. Mozilla не будет создавать никаких дополнительных элементов, но зачем то добавит два дополнительны тега br после курсора. Например:
Если писать текст непосредственно в body (без каких либо элементов-оберток), и нажать Enter/Return, Mozilla вставит br. IE и Opera обернут предыдущий текст в p и создадут новый p. Safari вставит div.
Если набирать текст внутри div, Safari, Opera и IE закроют текущий элемент div и откроют новый. Mozilla вставит br и поместит курсор после него.
Если вокруг курсора несколько элементов-оберток, то все браузеры закроют (и дублируют) только обертку с наибольшей степенью вложенности. Курсор останется в обертке.
Примечание: Это жутковато! Неожиданно у IE оказался наиболее разумный подход всегда гарантирующий осмысленное применение блочных элементов. Mozilla ведет себя ужасно используя элементы br внутри блочных элементов, благодаря этому невозможно реализовать осмысленную стилизацию текста.
Позиционирование курсора
Курсор перемещается между символами. Не видно, как курсор позиционируется относительно тегов. Логика перемещения остается неизменной вне зависимости от браузера. Относительно блочных элементов: курсор всегда позиционируется внутри блочного элемента с наибольшей вложенностью. Например невозможно поместить курсор между двумя параграфами.
Например, посмотрите сюда; Символ вертикальной черты обозначает возможные положения курсора:
- < p > |P|1| < / p >< p > |P|2| < / p >
- < div >< p > |P|3| < / p >< div >< p > |P|4| < / p >< / div >< / div >
Так что если вы набираете символы слева от полужирного текста, новый текст будет отображен в нормальном начертании. Если наберете справа, то он тоже будет полужирным.
Удаление
Если вы удаляете границу параграфа, результат будет неизменен: левый блок «побеждает» и содержимое правого блока включается в левый:
Safari, впрочем, ведет себя умно (или ужасно, в зависимости от точки зрения) и сохраняет представление правого элемента неизменным:
- < h1 > Overskrift| < span class = "Apple-style-span" style = "font-size: 16px; font-weight: normal; " > Text < / span >< / h1 >
Редактирование объектов
Браузеры поддерживают некоторые дополнительные интерфейсы для редактирования.
IE позволяет изменять размер изображений, таблиц, элементов форм или абсолютно позиционированных элементов перетягивая их уголки (когда объект выделен, то появляется соответствующий контейнер)
Mozilla тоже позволяет менять размер картинок и таблиц, но у нее есть еще и дополнительные элементы управления, которые позволяют создавать в таблице новые колонки и строки. Кроме того Mozilla позволяет изменять положение абсолютно позиционированных элементов.
Интерфейсы управления для всего этого абсолютно проприетарны, различны в каждом браузере и настраивать их нельзя.
От переводчика: Так как хабр отказался публиковать 35кб текста за раз, то разбиваю перевод на две части.
Эта функция использует опцию «document.designMode», которую Вы можете включить через консоль JavaScript Вашего веб-браузера.
Чтобы активировать эту функцию, посетите веб-страницу и откройте консоль разработчика. Чтобы открыть консоль в Google Chrome, нажмите Меню > Дополнительные инструменты > Инструменты разработчика или нажмите Ctrl + Shift + i.
Хотя в качестве примера мы используем Chrome, эта функция работает и в других современных браузерах. Вот как открыть консоль в других браузерах:
- В Mozilla Firefox нажмите Меню > Веб-разработчик > Веб-консоль или нажмите Ctrl + Shift + K.
- В Apple Safari нажмите «Safari» > «Установки» > «Дополнительно» и включите «Показать меню «Разработка» в строке меню». Затем нажмите «Разработка» > «Показать консоль JavaScript».
- В Microsoft Edge нажмите Меню > Дополнительные инструменты > Инструменты разработчика или нажмите F12, а затем перейдите на вкладку «Консоль».
Нажмите вкладку «Console» в верхней части панели инструментов разработчика. Введите в консоли следующее и нажмите Enter:
Теперь Вы можете закрыть консоль, если хотите, и отредактировать текущую веб-страницу, как если бы это был редактируемый документ. Нажмите где-нибудь, чтобы вставить курсор и набрать текст. Используйте клавиши Backspace или Delete для удаления текста, изображений и других элементов.
Это просто меняет внешний вид веб-страницы в Вашем браузере. Как только Вы обновите страницу, Вы снова увидите оригинал. Если Вы перейдете на другую веб-страницу или вкладку, она не будет в режиме разработки, пока Вы не откроете консоль и еще раз не наберете эту строку.
Вы даже можете вернуться в консоль и запустить следующую команду, чтобы отключить режим разработки:
Веб-страница больше не будет редактироваться, но Ваши изменения будут сохранены до следующего обновления страницы.
Типичный процесс веб-разработки включает в себя создание HTML-страниц со связанным CSS и JavaScript. Он включает в себя следующие этапы:
- Открытие созданной страницы в браузере.
- Поиск проблем с дизайном и функционалом с помощью инструментов разработчика.
- Изменение HTML, CSS и JavaScript.
- Копирование измененного в редактор и повтор первого шага.
Но можно открывать и редактировать файлы непосредственно в Google Chrome, а внесенные изменения сохранять локально и обновлять в редакторе. Для этого
Шаг 1: Откройте инструменты разработчика
Откройте создаваемую веб-страницу в Google Chrome. Затем перейдите в « Инструменты разработчика» на вкладку Sources .
Здесь можно открывать и редактировать файлы HTML, CSS и JavaScript. Но любые внесенные изменения будут потеряны, когда вы обновите страницу.
Шаг 2. Свяжите папку с рабочей областью
Перейдите на вкладку Filesystem, затем нажмите + Add folder to workspace . После этого укажите рабочую папку и подтвердите, что разрешаете браузеру доступ к ней.
Шаг 3: Отредактируйте и сохраните исходный код
Отредактируйте исходный код веб-страницы. Не сохраненные изменения помечаются звездочкой прямо на вкладке файла.
Изменения CSS мгновенно обновляются. Для сохранения HTML и JavaScript, нужно нажать Ctrl +S, а затем обновить окно браузера.
Вы также можете кликнуть правой кнопкой мыши по вкладке нужного файла и выбрать в контекстном меню пункт Save as , чтобы сохранить копию файла в другом месте.
Шаг 4. Просмотр и отмена изменений
Значок стрелки в левом нижнем углу панели отменяет все внесенные изменения и возвращает файл к исходному состоянию.
Инструменты разработчика Google Chrome не станут полноценной заменой редактора кода. Но они могут оказаться полезны при работаете на другом ПК, где ваш редактор не установлен.
Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, подписки, лайки, дизлайки!
Читайте также: