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

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

    диалог вставки рисунка

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

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


    Появится окно Менеджера файлов:

    менеджер выбора файла из структуры сайта

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

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

    загрузка файла с локального компьютера - шаг ВЫБОР


    В появившемся диалоге найдите файл на локальном компьютере (пример диалогового окна для Windows XP): пример диалогового окна загрузки файла - Windows XP
    Поле Имя файла на сервере заполнится автоматически (вы можете изменить его по собственному усмотрению).
    Для размещения файла в конкретной папке сервера воспользуйтесь структурой сайта в левом окне. Адрес папки, куда будет загружен файл всегда можно увидеть в поле Папка на серверевыбор папки на сервере для сохранения файла Загрузка файла осуществляется на сервер после этого нажатием кнопки Загрузить.

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

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

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

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

      <img src="/medcin/images/Papiloma.jpg" height="222" alt="Обсуждение" width="200"/>
    • Горизонтальный отступ и Вертикальный отступ. Если задать эти параметры отличными от нуля, то изменение положения изображения сразу отображается в окне предпросмотра.

      отступы

      В коде эти параметры задаются с помощью атрибутов hspace и vspace тега <img>. HTML-код вставки изображения c горизонтальным отступом 30 пикселей и вертикальным отступом 5 пикселей имеет вид:

    • <img src="/medcin/images/Papiloma.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Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.


Это нравится:0Да/0Нет


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