Практическая работа № 5.
Тема: Вставка и размещение изображений на web-странице.
Задание:
Разместить текстуру или рисунок из коллекции Microsoft в качестве фона web-страницы .
Поместить изображение на web-страницу, установить подходящий размер и выравнивание.
Включить заголовок изображения.
Указания к выполнению работы.
Создайте рабочую папку в папке Мои документы, в которую поместите созданную ранее web-страницу. Если такой страницы не, то создайте заново простейший пример (см. практическую работу №1).
В этой же папке создайте папку "images", в которой будут располагаться рисунки дляweb-страницы.
Для подготовки текстуры откройте программу CorelDraw(Пуск ПрограммыCorelGraphicSuite11CorelDraw11) . Создайте произвольную замкнутую фигуру, желательно прямоугольник, в противном случае текстуры не полностью заполнятweb-страницу, заполните её текстурой и экспортируйте в виде рисунка с расширениемjpegв созданную папкуimages. Размер экспортируемого изображения можно изменять.
Для заполнения рисунком из коллекции Microsoftскопируйте его в папкуimagesиз папки C:\Program Files\Microsoft Office\CLIPART. Однако не все типы файлов поддерживаются браузерами. Изменить тип файла можно при помощи импорта и экспорта в программеCorelDraw.
Откройте созданную ранее страницу в браузере. Для редактирования исходного htmlкода достаточно войти в меню Вид ПросмотрHTMLкода.
В коде страницы в тег <BODY> внесите изменения добавив атрибутBACKGROUND="", где в качестве значения укажите папкуimagesи имя рисунка. Например:
<BODY BACKGROUND="images\001.jpeg">
Сохраните код (Меню файл Сохранить). В
браузере нажмите кнопку "Обновить"
,
просмотрите как происходит заполнение
фоновым рисунком.
Откройте папку с материалами и скопируйте два графических файла в папку images.
Можно так же подобрать самостоятельно 2 любых графических файла и поместить их в папку images.
Первый рисунок (gerb.gifили другой) поместите вверху по центру. Для этого используйте тег<img src = "имя_файла">. Для выравнивания рисунка относительно страницы удобно пользоваться тегом абзаца <P> (см. практическую работу № 1). Для рисунка можно задать название, которое появляется при загрузке и при наведении курсора мыши. Для этого используется атрибутalt= " название ". Например:<P align = "center"> <img src="images\gerb.gif" alt=" Герб Севастополя">.
Откройте текстовый документ и скопируйте фрагмент текста в код web-страницы. Текст выровняйте по ширине страницы. Подберите хорошо читаемый цвет текста и гарнитуру шрифта. Если необходимо, дополнительно разбейте текст на абзацы.
Второй рисунок выровняйте относительно текста, уменьшив его размеры до 30% –40% от исходного. Для изменения размеров используются атрибуты widthиheight, значениями которых служит нужный размер картинки в пикселях или процентах. Для выравнивания относительно текста используется атрибутalign со значениямиtop– вверху,middle– по центру,bottom– снизу,left– слева иright– справа. Например:
<img src = "002.jpg" width="30%" height="30%" align= "left">
Задайте подпись рисунку так же, как и в предыдущем случае.
Готовую web-страницу покажите учителю.