Загрузка и размещение изображения
67 / 136

HTML-редактор позволяет загружать графику с локального диска и размещать ее на веб-странице. Процесс размещения изображения очень прост:

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

  • Выбор изображения из медиабиблиотеки

  • Перейдите к форме загрузки изображения из медиабиблиотеки, нажав кнопку . Появится окно Медиабиблиотека:

  • Укажите изображение и нажмите кнопку Выбрать. После чего закроется окно выбора файла из медиабиблиотеки, и путь к выбранному файлу будет указан в поле Путь к изображению формы загрузки изображения. Изображение появится в окне предпросмотра, а также будет указана его ширина и высота, которые задаются в коде с помощью атрибутов width и height тега <img> соответственно:

    Форма загрузки изображения

  • Выбор изображения из структуры сайта

  • Перейдите к форме загрузки изображения из структуры сайта, выбрав пункт меню Выбрать из структуры сайта кнопки . Появится окно Менеджера файлов:

    Нажмите на рисунок, чтобы увеличить

    Окно Менеджера файлов разделено в нижней части на две закладки: Открыть файл и Загрузить файл.
  • На закладке Открыть файл вы можете открыть один из файлов, находящихся на сервере. На закладке Загрузить файл можно загрузить файл с локального компьютера.

  • Для загрузки файла с локального компьютера перейдите на закладку Загрузить файл.

    Нажмите на рисунок, чтобы увеличить

  • В одноименном поле укажите путь к файлу на локальном компьютере. Для выбора файла воспользуйтесь кнопкой Обзор. Поле Имя файла на сервере заполнится автоматически. Если опция Открыть файл после загрузки не отмечена, то файл будет загружен в указанную папку.
    При отмеченной опции указанный файл будет загружен в выбранную папку, одновременно с этим закроется окно менеджера файлов, и путь к выбранному файлу будет указан в поле Путь к изображению формы загрузки изображения. Изображение появится в окне предпросмотра, а также будет указана его ширина и высота, которые задаются в коде с помощью атрибутов width и height тега <img> соответственно.
  • Ниже вы можете познакомиться с видео-роликом, наглядно показывающим процесс размещения изображения на веб-странице. (2 минуты 2 секунды, 6.08 Мб.)

    Загрузить ролик.

    Далее в форме Новый рисунок заполните следующие поля:

    • Название (title) – служит для ввода всплывающей подсказки к рисунку. Подсказка будет выведена при наведении курсора независимо от того, показан сам рисунок или нет.
    • Альтернативный текст – позволяет получить текстовую информацию об изображении при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то альтернативный текст появляется раньше самого рисунка. Некоторые браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.

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

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

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

      Выравнивание

      Выравнивание в режиме кода

      Ниже вы можете познакомиться с видео-роликом, наглядно показывающим процесс размещения изображения на веб-странице. (2 минуты 6 секунд, 7.75 Мб.)

      Загрузить ролик.



Если вы выбираете среди изображений уже загруженных в систему, то, кликнув мышью по названию изображения в окне менеджера файлов, "миниатюра" этого изображения с размерами появится в левом нижнем углу окна менеджера файлов. Одновременно с этим будет заполнено поле Имя файла:

Нажмите на рисунок, чтобы увеличить

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

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

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

Выбор режима просмотра файлов

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

Выбор режима сортировки файлов

Изменить порядок сортировки можно с помощью кнопки .

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

Нажмите на рисунок, чтобы увеличить

При просмотре в режиме Предпросмотра для каждого элемента создается уменьшенная миниатюра. В этом режиме удобно просматривать изображения:

Нажмите на рисунок, чтобы увеличить

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

Ниже вы можете познакомиться с видео-роликом, наглядно показывающим процесс размещения изображения на веб-странице. (2 минуты 38 секунд, 6.7 Мб.)

Загрузить ролик.

0


 Работа с графикой | Описание курса | Загрузка и размещение flash ролика