План-конспект занятия «"Вставка изображений на WEB-страницы"»
план-конспект занятия по теме

План – конспект

занятия в объединении

«СОВРЕМЕННЫЕ КОМПЬЮТЕРНЫЕ ТЕХНОЛОГИИ»

Третьей ступени обучения

Специализированного курса «Компьютерные сети и

Web – конструирование»

Педагога Миланко Т.П.

                                                                                                                    2 октября 2014 года

Тема: «"Вставка изображений на  WEB-страницы"»

Цель:  повышение компьютерной грамотности учащихся  в вопросе создания Web-страниц на языке разметки гипертекста (HTML) средствами текстового редактора Блокнот.

Задачи:

Образовательные:

• Сформировать у учащихся  способности самостоятельного создания сайта;
• Научить размещать графические изображения на  web-страницах;
• Научить создавать графические гиперссылки для  смены web-страниц.

Развивающие:

• Развитие мотивации и стимулирование интересов учащихся к изучению информатики;
• Развитие у учащихся внимания и навыков самостоятельной работы.

Воспитательные:

• Формирование восприятия компьютера как инструмента информационной деятельности человека;
• Воспитание стремления к самоутверждению через освоение персонального компьютера;
• Воспитание потребности и умения работать в коллективе.

Методы обучения:

• по источнику знаний: словесные, наглядные, практические;
• по характеру познавательной деятельности:  объяснительно – иллюстративные.

Тип занятия: изучение нового материала.

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

План занятия:

1. Организационная часть- 5 мин.
2. Актуализация знаний -5 мин.
3. Изложение нового материала- 20 мин.
4. Подведение итогов -5 мин.

Ход занятия

1. Организационная часть.

Приветствие, проверка готовности к занятию.

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

Педагог: На предыдущих занятиях мы изучали создание текстовых гиперссылок, создание таблиц.

         Какой тег предназначен для создания гиперссылки, какие атрибуты тега используются для задания цвета гиперссылки, активной гиперссылки и ссылки, посещаемой в прошлом? Каково назначение таблиц на Web-страницах? Какие теги и атрибуты тегов предназначены для создания таблиц на Web-страницах?

3. Изложение нового материала.

Самыми распространенными изображениями, публикуемыми в Интернете, являются цифровые фотографии, рисунки и отсканированные картинки.

Красота  и привлекательность оформления Web-страниц не должна влиять на  скорость доставки информации в Сети. Чтобы успешно решать эту проблему, необходимо знать все используемые в Интернете графические форматы, понимать различия между ними, области применения и особенности использования.

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

Наиболее популярные графические форматы, которые стали фактическими стандартами для использования на WWW:

GIF, JPEG, PNG,BMP, TIFF  -  растровые форматы изображения

Векторные графические форматы значительно более привлекательны для использования в Сети: AI, CDR, CMX, EPS, FLA, FH, SVG, SWF, WMF.

        Для размещения изображений, сначала их обрабатывают в графическом редакторе,  задают размер в пикселях и помещают  в папку, например, Images (изображения) данного сайта.

Для отображения изображения на web-странице  используется тег c атрибутами:

Width=ширина изображения в пикселях;

Height= высота изображения в пикселях;

Border=ширина рамки изображения в пикселях;

Align=center (по центру), left (слева), right (справа), top (сверху) или bottom (снизу web-страницы) – выравнивание изображения;

Hspase- горизонтальный отступ в пикселях от изображения до текстовой или графической информации web-страницы;

Vspase- вертикальный отступ;

Alt – альтернатива, всплывающее сообщение о изображении.

Например,

< img src =”IMAGES\photo1.jpg” Align=”center”  Border=”1” Width=”300” Height=”200” Hspase=”10” Vspase=”10” >

Или

Если изображение использовать  в качестве гиперссылки, то его необходимо заключить в тег , например,

< img src =”IMAGES\knopka1.jpg” >

Разместив изображения в ячейках таблицы, создается фотогалерея.

Например,

Рисунки для творчества        

 

Рисунок можно использовать для фона web-страницы.

, если добавить атрибут

BGproperties=”fixed”, (свойство присоединения фона - фиксировано), то фон остается неподвижным при использовании вертикальной и горизонтальной полос прокрутки.

,

4. Подведение итогов занятия.

Педагог отмечает лучших учащихся, подводит итоги занятия.

Задания для практической части занятия:  из подготовленных изображений и текстового материала создать три web – страницы : 1-я - разместить изображения и текстовый материал; 2-я –создать web-страницу с фоновым изображением; 3-я- создать фотогалерею.