WWW.DOCX.LIB-I.RU
БЕСПЛАТНАЯ  ИНТЕРНЕТ  БИБЛИОТЕКА - Интернет материалы
 

«Класс: 11 Дата: Тема: Работа с изображениями Цели: познакомить со способами работы с изображениями в html; развивать навыки программирования, расширять знания в области ...»

Класс: 11 Дата:

Тема: Работа с изображениями

Цели: познакомить со способами работы с изображениями в html;

развивать навыки программирования, расширять знания в области информационных технологий;

воспитывать самостоятельность мышления, любознательность, интерес к предмету, аккуратность.

Оборудование: компьютеры, проектор, конспект.

Ход урока:

I. Инициация

II. Актуализация знаний

Давайте вспомним материал нашего предыдущего занятия.

С помощью каких тегов создаются списки? Какие ссылки можно вставить в html-документ и с помощью какого тега? Как задаются цвета ссылок?

III. Формирование новых понятий и способов действий

Изображения – это неотъемлемая часть любого сайта. Есть три типа файлов изображений, которые можно вставить в ваши страницы:

Gif

Jpg / jpeg

Png <img src="my.jpg">.

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:

<img src="my/my.jpg">

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../my.jpg">

Если картинка лежит на другом сайте, то путь прописывается полностью: <img src="http://www.homepage.ru/my/my.jpg">

Для вашего удобства кладите картинку в ту же папку, что и документ, тогда путаницы будет меньше. Также я хочу обратить ваше внимание на то, что MY.jpg, my.JPG, my.jpg и MY.JPG – это разные имена файлов. Никогда не забывайте, что регистр нужно учитывать.

Кстати, запомните, тэг img не требует закрывающего тэга.

Атрибуты:

align – определяет способ выравнивания картинки и текста относительно неё по горизонтали, значения: left, right. Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - <img src="pr1.png" align="bottom">

(2) - <img src="pr1.png" align="middle">

(3) - <img src="pr1.png" align="top">.

Вот мы узнали о том, как расположить текст относительно картинки, но мы не говорили, как расположить саму картинку в центре экрана (справа, слева). Здесь все очень просто, вспомните параграфы (<p></p>) или другие тэги для выравнивания текста, о которых мы говорили, ведь они не только текст выравнивают.

hspace и vspace – отступы в пикселях по горизонтали и по вертикали от картинки до других объектов документа.

height и width – высота и ширина изображения в пикселях.

alt – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

title – определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title.

border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю. Цвет рамки вокруг картинки задается атрибутом bordercolor, например:





<img src="picture.gif" border="3" bordercolor="#CC0000">

В нашем примере я задала цвет рамки красным, ну, и, естественно, что атрибут border (толщина рамки) не должен равняться нулю, если вы хотите видеть рамку вокруг картинки. Но, если ваша картинка будет ссылкой, то рамка вокруг нее будет того цвета, который мы задали для ссылок в тэге body с помощью link, vlink, alink, т.е. атрибут bordercolor в этом случае уже не влияет на цвет рамки вокруг картинки.

Как мы помним, атрибуты для одного тэга могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следующие атрибуты для нашей картинки: <img src="pr1.png" align="left" hspace="30" vspace="5" alt="моя фотография"> Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография". Картинку можно сделать фоном документа. Это прописывается в открывающем тэге боди:

<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg"> Атрибут background указывает на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и наш документ.

Но зачем оставлять атрибут bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем.

Картинка может быть ссылкой. Принцип ссылки тот же, что и в случае с текстом, только в тэг <a></a> вставляется не текст, а картинка: <a href="prf.html"><img src="primtocodephoto.gif"></a>

Если вы хотите сделать картинку ссылкой на ваш почтовый ящик, то принцип тот же:

<a href="mailto:pochta@mail.ru"><img src="primtocodephoto.gif"></a>

IV. Применение изученного

Практическая работа: работа с изображениями.

V. Рефлексия

Какие три типа файлов изображений можно вставить в ваши страницы? Как вставлять картинки в документ? Назовите атрибуты тега <img>. Как картинку можно сделать фоном документа? Может ли картинка быть ссылкой?

VI. Домашнее задание

конспект


Похожие работы:

«Ответы к экзаменационным задачам Ответ на задачу №1 Ранняя анемия недоношенных. РДСН в анамнезе. Недоношенность 33 недели. Ответ на задачу №2 Гемолитическая болезнь новорожденных, обусловленная конфликтом по резус-...»

«Мастер класс по курсу "Основы дизайна с элементами здоровьесберегающей деятельности" Тема: Изготовление объёмной бумажной игрушки "Яблоко". Модуль программы: Работа с бумагой и картоном. Цели 1. Показать, как можно на любом уроке или занятии внеурочной деятельности включ...»

«ПРАВИТЕЛЬСТВО РОССИЙСКОЙ ФЕДЕРАЦИИПОСТАНОВЛЕНИЕ от 31 марта 2001 г. N 251ОБ УТВЕРЖДЕНИИ ПЕРЕЧНЯПРЕДМЕТОВ РЕЛИГИОЗНОГО НАЗНАЧЕНИЯ И РЕЛИГИОЗНОЙЛИТЕРАТУРЫ, ПРОИЗВОДИМЫХ И РЕАЛИЗУЕМЫХ РЕЛИГИОЗНЫМИОРГАНИЗАЦИЯМИ (ОБЪЕДИНЕНИЯМИ), ОРГАНИЗАЦИЯМИ, НАХОДЯЩИМИСЯ В СОБСТВЕННОСТИ РЕЛИГИОЗНЫХ ОРГАНИЗАЦИЙ (ОБЪЕДИНЕНИЙ), И ХОЗЯЙСТВЕННЫМ...»

«Вариант №2 При выполнении заданий этой части в бланке ответов №1 под номером выполняемого вами задания (А1-А36) поставьте знак "Х" в клеточку, номер которой соответствует номеру выбранного в...»

«ВОПРОСЫ ПРАКТИЧЕСКОЙ ЧАСТИ (ПРАКТИЧЕСКИЕ НАВЫКИ) для студентов лечебного факультета по специальности: 31.05.01 Лечебное дело с критериями оценок Перечень органов, их частей и деталей строения (анатомических образований), которые каждый студент должен уметь найти и показать на трупе или отдельных препаратах и назвать их...»

«Глобальность проблемы табакокурения трудно преувеличить, поскольку не найдется человека, который бы в своей жизни не встречался с табачным дымом или рекламой табачной продукции. И для этого не обязательно курить табак самому. Мы ежедневно встречаемся с табачным дымом на лестничных...»

«АНКЕТА ДЛЯ ЖЕНЩИН Ф.И.О. _ Дата "_"_20 г. ЧАСТЬ 1 Секция АНет/ Редко Иногда Часто Очень часто1. Несварение желудка после еды 0 1 4 82. Чрезмерная отрыжка, вздутие живота после еды 0 1 4 83. Спазмы в желудке во время или после ед...»









 
2017 www.docx.lib-i.ru - «Бесплатная электронная библиотека - интернет материалы»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.