Вы все и много раз видели, как богато иллюстрируются страницы сайтов различными картинками и фотографиями. Я говорю не о самом дизайне сайта, а о тех графических изображениях, которые вставляются в контент страницы сайта, с целью более полно передать содержание страницы. Вот сегодня мы и разберемся с таким вопросом, как вставка картинок в контент web-страницы, в редакторе Dreamweaver.
Так, как редактор Dreamweaver это, собственно, программа для создания сайта, то есть верстки web-страницы, то вставка картинок и вставка фотографий в страницу сайта с ее помощью выполняется очень просто.
Ставим курсор в место вставки картинки. Заходим в главном меню в: Вставка (Insert)– Изображение (Image), выбираем папку, файл изображения, жмем ОК, если нужно вставляем замещающий текст, который виден пока загружается изображение в браузере, снова жмем ОК — вот и вся вставка картинок! Изображение вставлено.
Форматирование изображения проводится в нижнем доке в, панели Свойства (Properties). Для активации панели Свойства активируйте изображение, щелкнув на нем левой клавишей мышки. Что мы здесь видим:
Поля ввода Ш(W) и В(Н) дают возможность задавать размеры изображения, вводя его, соответственно, ширину и высоту вручную.
Поля ввода По вертикали (V Space) и По горизонтали (Н Space) дают возможность задавать, соответственно, вертикальную и горизонтальную дистанцию от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.
Поле ввода Источник (Src) дает возможность задавать интернет-адрес файла, хранящего графическое изображение.
Поле Ссылка (Link) дает возможность создать изображение-ссылку.
Вот и вся вставка картинок с фотографиями. Хотя, обратите еще внимание на это окошко:
Выпадающий список этого окна дает возможность задавать выравнивание вставленных картинок. Назначение пунктов списка просто и понятно. Обратим внимание на два последних – По левому краю (Left) и По правому краю (Right)
По левому краю (Left) — если применить это пункт, то картинка “прижмется” к левой стороне страницы, а текст “обтечет” его справа;
По правому краю (Right) — если применить это пункт, то картинка “прижмется” к правой стороне страницы, а текст “обтечет” его слева.
В этих вариантах можно сказать, что вставленная картинка стала плавающей, то есть она не привязана жестко к тексту. Установим значение По левому краю. Вот так, например:
Получилось? Ну и хорошо. Значит вставка картинок и вставка фотографий в web-страницу для нас уже не секрет. Осваиваем дальше Dreamweaver — программу для верстки сайтов. Давайте вернемся к оформлению страницы. Оформим колонку1, где у нас будет навигация по сайту.
Все это на странице Создаем навигацию по сайту.