Создание HTML-сайта

Графика

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

О том, как вставить изображение в HTML документ в моих уроках уже есть достаточно информации. Об этом я рассказывал в разделах «Введение в HTML» и «Стили CSS» так что особенно распространяться по этой теме я не буду, а просто покажу, как это делается на практике в программе Adobe Dreamweaver CS3.

И так, для того, чтобы вставить изображение на страницу сайта, его сначала надо найти или создать самому, обработать в графическом редакторе (хотя бы подогнать по размерам) и поместить в папку img вашего сайта.

Если все готово, открывайте папку img в программе Adobe Dreamweaver CS3, выбирайте вашу картинку, цепляйте ее мышкой и тащите в нужное место страницы.

Вставить изображение вы можете куда угодно: по центру, справа, слева или в абзац с текстом. Прошу обратить внимание на то, что если вы размещаете графику в отдельный абзац, то атрибут ALIGN, указывающий местоположение картинки (справа, слева или по центру) прописывается в теге «Р». Если же вы хотите, чтобы рисунок находился в абзаце с текстом и последний обтекал его справа или слева, то необходимо вставить изображение в абзац с текстом и использовать тот же атрибут ALIGN, но уже не тега Р, а тега IMG.

Если, к примеру, вставить изображение в тексте слева, то код будет иметь примерно следующий вид:

А сама картинка будет смотреться в браузере примерно так:

Как видите, вставить изображение в страницу, используя программу Adobe Dreamweaver CS3 совсем не сложно. Здесь же можно создать и стиль для изображений, но поскольку у нас есть таблица стилей, то лучше воспользоваться ей.

Кстати о таблице стилей! Давайте попробуем вставить изображение, используя стили CSS. Я предлагаю в вертикальной навигации вставить изображения стрелочек перед ссылками. Делается это очень просто. Сначала нужно поместить рисунок стрелки в папку img вашего сайта. Затем в таблице стилей в правило, которое мы создавали для вертикальной навигации добавить несколько строчек:

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

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

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

Для тех, кто не очень любит работать ручками, я публикую в виде удобном для копирования некоторые файлы сайта, которым мы занимались в этой серии уроков.

Файл INDEX.HTML

Файл STYLE.CSS

Файл NAV2.HTML

На следующем занятии мы займемся регистрацией доменного имени.