|
HTML-редактор позволяет загружать графику с локального диска и размещать ее на веб-странице. Процесс размещения изображения очень прост:
- Выберите место для изображения на странице, установите курсор в эту позицию и нажмите кнопку Изображение на панели редактора. Появится диалог:
Выбор изображения из структуры сайта
- Перейдите к форме загрузки изображения из структуры сайта с помощью кнопки .
Появится окно Менеджера файлов:
Окно Менеджера файлов имеет дополнительный инструмент - Загрузить файл.
С помощью основного функционала менеджера мы вы можете открыть один из файлов, находящихся на сервере. С помощью дополнительной области Загрузите файл можно загрузить файл с локального компьютера.
- Для загрузки файла с локального компьютера нажмите кнопку выбрать.
В появившемся диалоге найдите файл на локальном компьютере (пример диалогового окна для 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 | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. |
|
Работа с графикой |
Описание курса
| Загрузка и размещение flash ролика
|