|
|
|
Главная Скачать (Download) Dreamweaver CS6 Dreamweaver CS5 Dreamweaver CS4 Dreamweaver 8 Dreamweaver MX 2004 - Рабочая область
Dreamweaver 4- Создание/ открытие документов - Настройка сайта - Компоновка страниц с CSS - Табличный контент - Шаблоны в MX 2004 - Работа с страницами - Настройка серверных приложений - Рабочая область для динамических страниц Уроки (Tutorials) Видеоуроки new!!! Fireworks ЧаВо Документация Статьи Программы и скрипты Бесплатные шаблоны Каталог сайтов Форум Карта сайта Контакты |
HTML - основы Рисунки на WEB-страничке На Web-страницах можно использовать только те типы рисунков, которые могут выводить на экран браузеры.
Для вставки рисунка используем элемент img (от английского image - изображение). Элемент img не имеет конечного тэга. 1). Допустим нам надо вставить рисунок с названием 1.jpg находящийся в том же каталоге (директории, папке). Сделаем мы это так:
То что написано между кавычками (после src=) является адресом или URL (путь к картинке). src - от английского source - источник 2). Теперь рассмотрим как вставить ту же самую картинку находящиеся в поддиректории cat.
Теперь путь к картинке выглядит так: cat/1.jpg 3). Вставим ту же самую картинку которая лежит на уровень выше.
Теперь путь к картинке выглядит так: ../1.jpg 4). Если картинка лежит на другом сайте, то путь прописывается полностью:
Практика: 1).Создадим папку под названием site. Создадим в этой папке документ с расширением html или используйте ранее созданный файл Текстовый документ.html (см. как это делалось ранее). 2).Вставляем туда.
<html>
3).Положим в папку site рисунок 1.jpg; Сделаем это так:
4).Теперь вставим сам рисунок. <html><head> <title>Изучаем HTML </title> </head> <body> <img src="1.jpg"> <p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </body> </html> 5). Теперь сохраните эти изменения и посмотрите результат. Вы должны увидеть текст и рисунок. Еще один пример: 1). Создадим еще одну папку в папке site. И назовем ее cat.
4). Для того что бы увидеть рисунок необходимо правильно написать путь. Для нашего примера он будет выглядеть cat/1.jpg
Надеюсь понятно как правильно написать путь. Рассмотрим возможные атрибуты у элемента img. SRC- указывает адрес (URL) файла с изображением. HEIGHT и WIDTH- определяют ширину и высоту изображения. Если указанные значения не совпадают с реальным размером изображения, он будет сжат или растянут. Рекомендуется всегда указывать размеры рисунка, поскольку это позволяет браузеру сразу определить размеры области, не скачивая рисунок. ALIGN- обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:
ALT- текстовое описание. Описание рисунка в параметре ALT появляется в виде всплывающей подсказки при наведении курсора мыши на этот рисунок. Кроме того, если у пользователя отключен вывод рисунков (для ускорения работы), на месте рисунка выводится текст, заданный в параметре ALT. Этот параметр, так же, как и размеры рисунка, обязательно указывается на всех серьезных сайтах. HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом. BORDER- определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю. NAME- определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев. Пример: В этом примере мы задали ширину и высоту изображения (width="189" и height="316" ), выровняли по правому краю (align="right"), определили текст который должен отображаться на месте изображения (alt="Прикольная картинка"), задали отступ картинки от других объектов документа (hspase="10" и vspace="10") и наконец определили ширину рамки (border="5"). <html>
Попробуйте поэкспериментировать с параметрами у атрибутов и посмотрите, что будет меняться с каждым Вашим изменением. Как не странно, но я настоятельно рекомендую потренироваться с этой темой. Особенно с написанием путей к картинкам, вы можете создавать различные вложенные папки, размещать в них картинки и писать к ним пути.
Реклама |
|
Проведем эксперимент. Нажмите на эту картинку правой кнопкой мыши, выберете пункт меню свойства и найдите строчку Адрес (URL). Вы увидите адрес этой картинки.