|
Урок 1. Тип урока комбинированный (повторение, изучение нового материала, закрепление полученных знаний) Цели урока
Тема 6: Графика в HTML-документах
Урок №1.
Тип урока: комбинированный (повторение, изучение нового материала, закрепление полученных знаний)
Цели урока:
Образовательная познакомить учащихся с методами интеграции изображений в HTML-документы. Привести примеры использования тега IMG и его параметров.
Воспитательная: Воспитание умения логически рассуждать.
Развивающая: Развитие аналитическо-синтезирующего мышления, умения проводить аналогии, делать выводы и обобщать.
Средства обучения: презентация, проектор, компьютерный класс.
Распределение времени урока
Ход урока
|
Время (мин.)
|
1. Организационный момент
(приветствие и проверка отсутствующих)
|
2
|
2. Цели и план работы на уроке
|
2
|
3. Изучение нового материала, закрепление.
|
34
|
5. Подведение итогов, выставление оценок и домашнее задание.
|
2
|
Ход урока:
Время
|
Деятельность учителя
|
Деятельность учащихся
|
Доска, экран, ком-р
|
1-2 минута
|
Приветствует учащихся, отмечает посещаемость, проверяет готовность к уроку.
|
Слушают учителя
|
|
3-4 минута
|
Рассказывает учащимся цель урока и план работы:
Целью урока является знакомство с внедрением графики в HTML-документ, организация изображений-ссылок, изображений – маркеров списке. В конце урока необходимо закрепить полученные знания на практике.
|
Слушают учителя, задают вопросы по плану урока
|
Слайд № 1
|
5-38
|
Возможность использования графики трудно переоценить в приложении к любому виду публикации, в том числе и для Web-документов. Без иллюстраций документ однообразен, вял и скучен. Расчетливо подобранная и правильно размещенная в документе графика делает его визуально привлекательнее и, что самое важное, передает одну из основных идей документа.
Изображения могут сделать текст вашего документа более содержательным. Представьте некий сухой HTML-документ, содержащий, например, описание придуманного вами технического устройства. Если он состоит из одного текста, то многим покажется скучным и порой непонятным. А если его "разбавить" несколькими иллюстрациями, размещенными в нужных местах, документ станет более читабельным и визуально привлекательным.
Изображения помогают лучше передать суть и содержание документа. Однако во всем нужно чувство меры. Это правило лишний раз подтверждается при просмотре ряда Web-страниц. Довольно часто встречаются Web-документы, загроможденные фоновыми изображениями, ничего не выражающей графикой и раздражающей анимацией. Планируя разместить на своей странице то или иное изображение, убедитесь, что оно действительно необходимо. Если при просмотре печатных материалов вам не составит труда перевернуть страницу, то для Web-документов часто приходится дожидаться окончания его загрузки с тем, чтобы двинуться дальше.
Загроможденность графикой также плоха, как и полное ее отсутствие. Дело усугубляет наличие рекламы в Интернет, которая появляется на страницах многих сайтов в виде привлекательных графических плакатов (рекламных баннеров), которые обычно размещаются до основной содержательной части документов.
Принимая решение о целесообразности включения в документ тех или иных иллюстраций, нужно иметь в виду следующее. Графические файлы могут иметь значительные размеры, что требует времени для их загрузки. Насыщенность графикой может привести к недопустимо большим затратам времени, требуемым для получения документов, особенно, если используется соединение с помощью модема на небольших скоростях. С другой стороны, одновременная работа нескольких пользователей с большими документами, размещенными на вашем сервере, может также привести к его перегрузке. Многие пользователи работают в режиме отключения приема графических изображений для увеличения скорости передачи данных. Некоторые пользователи до сих пор используют чисто текстовые программы просмотра. В обоих случаях от полученных документов останется только текстовая часть, которая должна давать информацию о содержательной стороне документа. Поисковые системы не могут индексировать графику. Поэтому если на ваших страницах расположены только иллюстрации без текстовых пояснений, то читатели, использующие современные методы поиска, такие страницы не обнаружат.
Следует помнить, что пользователи могут работать с различным разрешением экрана монитора и различной глубиной цвета. Страницы, хорошо смотрящиеся при одном разрешении, могут выглядеть совершенно по-другому при ином разрешении. Нужно помнить также, что многие изображения защищены законом об авторских правах. Публикация изображений без санкции автора может при вести к неприятностям.
Встроенные изображения
Для встраивания изображений в HTML-документ следует использовать тэг ![]() , имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения: 
1 Выравнивание изображений
При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра ALIGN тэга ![]() . Возможные значения этого параметра приведены на слайде 2.
Поясним действие параметров выравнивания, приведенных в таблице. Все значения параметров выравнивания изображений можно условно разделить на две группы по их принципу действия. К одной группе относятся два значения параметра — LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое "плавающее" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) "обтекают" изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением, может занимать несколько строчек.
К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой строки текста, правда, достаточно большой (типа буквицы).
Отметим, что по умолчанию изображения выравниваются по базовой линии.
Задание размеров выводимого изображения.
Тэг встраивания изображений имеет два необязательных параметра, указывающих размеры изображения при отображении — WIDTH и HEIGHT. Значения параметров могут указываться как в пикселях, так и в процентах от размеров окна просмотра. Значения параметров ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры автоматически при загрузке изображений выполняют его перемасштабирование. Заметим, что неаккуратное задание параметров может привести к изменению пропорций рисунка и, как следствие, к его искажению.
Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр будет вычисляться автоматически из условий сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения. Если не требуется решать задачу изменения размеров изображения, настоятельно рекомендуется указывать их реальные размеры в пикселах с помощью параметров WIDTH и HEIGHT. Определить действительные размеры используемых вами изображений можно при помощи любой из многих программ работы с растровой графикой. Указание действительных размеров:
1. позволяет читателю, работающему в режиме отключения загрузки изображений, иметь представление о размерах иллюстраций по пустому прямоугольнику, выдаваемому на экран вместо изображения (если размеры не будут указаны, то браузер, не зная их, выведет маленькую пиктограмму и форматирование страницы будет нарушено);
2. позволяет ускорить верстку документа на экране. Обычно браузеры должны загрузить все встроенные изображения прежде, чем отформатировать текст на экране. Указание размеров встроенных изображений позволяет выполнить форматирование документа до полной загрузки файлов с изображениями.
Отделение изображения от текста
Для тэга ![]() можно задавать параметры HSPACE и VSPACE, значения которых определяют отступы от изображения, оставляемые пустыми, соответственно, по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия.
Рамки вокруг изображений
Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тэга ![]() . В качестве значения параметра используется число, означающее толщину рамки в пикселах. По умолчанию рамка вокруг изображений не рисуется. Исключением из этого правила является случай, когда изображение является ссылкой.
Альтернативный текст
Одним из параметров тэга ![]() является параметр ALT, определяющий альтернативный текст. Его указание дает возможность пользователям неграфических браузеров или пользователям, работающим в режиме отключения загрузки изображений, получить некоторую текстовую информацию о встроенных изображениях. При отключенном изображении вместо них на экране появится альтернативный текст, определенный значением параметра ALT. Значение этого параметра имеет смысл и для случаев, когда загрузка изображений будет выполняться. Поскольку загрузка изображений выполняется на втором проходе после отображения текстовой информации, то изначально на экране на месте изображения появится альтернативный текст, который по мере загрузки будет сменяться изображением. Современные браузеры будут также отображать альтернативный текст в качестве подсказки при помещении курсора мыши в область изображения.
Использование изображения в качестве ссылки
Графические изображения могут использоваться не только в качестве иллюстраций, но и выполнять роль указателей гипертекстовых связей. Для обеспечения работы изображения в качестве ссылки на другие ресурсы достаточно включить изображение внутрь тэга-контейнера . Например,
<А HREF="example.html">
Изображения в списках
Графические изображения можно использовать качестве маркеров списка, что широко применяется для создания привлекательных, красиво оформленных HTML-документов. На самом деле такая возможность не предоставляется непосредственно языком HTML, а реализуется несколько искусственно.
Чтобы понять идею, необходимо разобраться в механизме реализации списков на HTML-страницах. Оказывается, что тэг списка (как, впрочем, и тэги списков других типов, рассматриваемых ниже) выполняет единственную задачу — указывает браузеру, что вся информация, располагаемая после данного тэга должна отображаться со сдвигом вправо (отступом) на некоторую величину. Тэги - , указывающие на отдельные элементы списка, обеспечивают вывод стандартных маркеров элементов списка. Если же нам требуется построить список с графическими маркерами, то можно вообще обойтись без тэгов
- . Достаточно будет перед каждым элементом списка вставить желаемое графическое изображение. Единственной задачей, которую нужно при этом решить, будет отделение элементов списка друг от друга. Для этого можно использовать тэги абзаца <Р> или принудительного перевода строки
.
<В>Заголовок списка.
 Элемент списка.
Элемент списка.
Элемент списка.
В приведенном примере в качестве маркера элементов списка используется графический файл hand.gif
Практическая часть:
1. Реализовать в HTML-документе буквицу. Рисунок выполнить средствами графического редактора MSPaint.
|
Ученики слушают учителя, записывают содержимое слайдов в тетрадь, задают вопросы по материалам лекции.
|
Слайд № 2
Слайд № 3
Слайд № 4
Слайд № 5
Слайд № 6
Слайд № 7
Слайд № 8
|
39-40
|
Домашнее задание:
материал лекции;
|
Записывают домашнее задание
|
Домашнее задание записано на доске.
| |
|
|
Скачать 69 Kb.