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

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

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

  

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

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

  

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

  

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

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

  

  Окно Менеджера файлов разделено в нижней части на две закладки: Открыть файл и Загрузить файл.

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

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

  

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

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

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

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

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

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

  Альтернативный текст в режиме кода
  В HTML-тегах альтернативный текст задается с помощью атрибута alt тега <img>, т.е. HTML-код вставки изображения с альтернативным текстом "Обсуждение" будет таким: <img src="/images/Picture1.jpg" height="222" alt="Обсуждение" width="200"/>

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

  Задание отступов в режиме кода
  В коде эти параметры задаются с помощью атрибутов hspace и vspace тега <img>. HTML-код вставки изображения c горизонтальным отступом 30 пикселей и вертикальным отступом 5 пикселей имеет вид: <img src="/images/Picture4.jpg" title="Светофор" hspace="30" vspace="5" border="0" align="left" alt="Светофор" width="96" height="152"/>

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

  Рамка в режиме кода
  В HTML коде этот параметр задается с помощью атрибута border тега <img>.

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

  

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

  В коде этот параметр задается с помощью атрибута align тега <img>. Представим в виде таблицы подробное описание значений этого атрибута: Значение Описание bottom Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию. left Изображение располагается по левому краю родительского элемента. middle Середина изображения выравнивается по базовой линии текущей строки текста. right Изображение выравнивается по правому краю родительского элемента. top Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

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

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

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

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

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

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

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

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