Создание таблиц, вставка и оформление рисунков на Web-страницах

Разделы: Информатика


Цели урока:

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

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

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

  • Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.

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

  • Воспитывать аккуратность, внимательность, вежливость.

Оборудование, использованная литература и средства наглядности: учебник Н. Угринович “Информатика и ИКТ” 8 кл., мультимедийная система, интерактивная доска, компьютеры, презентация Microsoft PowerPoint.

План урока

Наименование этапов урока Отведенное время
1. Организационный момент 1 мин.
2. Актуализация опорных знаний 5 мин.
3. Сообщение темы 1 мин.
4. Изучение нового материала 20 мин.
5. Первичное закрепление полученных знаний 15 мин.
6. Оценивание деятельности учащихся 1 мин.
7. Сообщение домашнего задания 1 мин.
8. Подведение итогов урока 1 мин.

Ход урока

Этап урока Решаемая дидактическая задача Деятельность учителя Деятельность учащихся Результат выполнения дидактической задачи
Орг. момент Подготовка учащихся к работе на уроке Приветствие, установление дисциплины на уроке, определение отсутствующих в классе Подготовка учащихся к учебной деятельности Кратковременность организации начала урока, быстрое включение учащихся в диалоговый режим
Актуализация опорных знаний Формирование познавательной мотивации обучения, культуру общения у учащихся Ребята, ответьте мне на следующие вопросы:

1.Как можно изменить шрифт в вашем сайте?

2. Как задать название документа, которое выводится в строке заголовка в программе-браузере?

3. Как установить цвет фона документа?

4. Как поместить в качестве фона изображение?

Ответы на вопросы, задаваемые учителем.

1. Тег <font> … </font>- изменяет размер, цвет и стиль текста. Атрибуты: size - размер шрифта 1-7. По-умолчанию size=3 color - цвет текста, face - название шрифта

2. (Тег <Title>…</ Title> содержит слова, которые появляются в стоке заголовка браузера

3. Bgcolor – изменяет цвет фона.

4. Background – помещает в качестве фона изображение из файла с картинкой

Активность каждого ученика в учебной деятельности
Сообщение темы и постановка целей урока Нацеливание учащихся на решение учебной задачи Все это вы уже изучали ранее, а сегодня мы будем учиться правильно оформлять рисунки на Web- страницах и создавать таблицы Понимание и осмысление целей урока и учебной задачи Прогнозируемый результат достижения цели урока
Изучение нового материала Сформировать у учащихся конкретные представления об изучаемых факторах, явлениях, процессах, раскрытие их сущности, связи и выделении главного. Словесное объяснение темы, демонстрация конкретных примеров, работа с презентацией. Слушают учителя, отвечают на возникшие по ходу вопросы, конспектируют основные моменты, примеры, просмотр презентации. При объяснении нового материала использование различных методических приемов, оборудования, а также руководство личностно-ориентированным и компетентностным подходами способствуют включению учащихся в активную

 

 

познавательную деятельность

Первичное закрепление полученных знаний. Улучшить усвоение материала его практическим применением Разбейтесь по парам и садитесь за компьютеры. На диске ….. в папке …… для вас есть задание, которое необходимо выполнить за оставшееся время на этом уроке. Выполнение заданий за ПК Запоминание выполненной работы, умение объяснять как достигнут результат
Оценивание деятельности учащихся. Объективная оценка деятельности учащихся За работу на уроке … учащиеся получают … отметки. Запись своей отметки в дневники Мотивация к выполнению практических работ
Сообщение домашнего задания Домашнее задание направлено на осмысление нового материала, подготовку к последующему обучению Ребята, откройте дневники, запишите домашнее задание: выучить новые понятия, теги, атрибуты, выбрать проект (слайд 20) и найти материал по этой теме, принести на следующий урок. Фиксирование в дневниках домашнее задание Работа по инструктированию в рамках урока
Подведение итогов урока Анализ успешности овладения пройденной темы Сегодня на уроке вы узнали, как правильно оформлять рисунки и создавать различные таблицы в веб-документе, попробовали это на практике.

Спасибо за работу на уроке, можете быть свободными.

Проведение самоанализа своей учебной работы на уроке Краткость и емкость анализа, определение мер для последующей работы

1. Организационный момент.

Здравствуйте! Прошу всех садиться.

2. Актуализация опорных знаний.

Ребята, ответьте мне на следующие вопросы:

- Как можно изменить шрифт в вашем сайте?

<b>…</b> Полужирный шрифт <big>… </big> Увеличенный шрифт
<i>…</i> Курсив <small>…</small> Уменьшенный шрифт
<u>…</u> Подчеркивание <sup>… </sup> Верхний индекс
<s>…</s> Зачеркнутый шрифт <sub>… </sub> Нижний индекс

Тег <font> … </ font>- изменяет размер, цвет и стиль текста. Атрибуты: size - размер шрифта 1-7. По умолчанию size =3 color - цвет текста, face - название шрифта

- Как задать название документа, которое выводится в строке заголовка в программе-браузере? (Тег <Title >…</Title> содержит слова, которые появляются в стоке заголовка браузера)
- Как установить цвет фона документа? (Bgcolor – изменяет цвет фона. Цвет задается словом или кодом RGB <body bgcolor = “red”> <body bgcolor = “#FF0000”>)
- Как поместить в качестве фона изображение? ( Background – помещает в качестве фона изображение из файла с картинкой <body background = “dog.gif”>)

3. Сообщение темы.

Все это вы уже изучали ранее, а сегодня мы научимся правильно оформлять рисунки на Web- страницах и создавать таблицы (слайд № 1)

4. Изучение нового материала.

Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные – .GIF , .JPEG. Для фотографий лучше использовать формат JPEG .

Для рисунков и пиктограмм – GIF (Слайд 2). Тэг <IMG> – вставка изображений (слайд 3).

Атрибуты:

1. Src – обязательный, значение – адрес изображения <img src = “dog .gif”>

Обычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку: <img src = “pict/dog .gif”>

2. Alt – определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем. Значение alt – строка текста, длиной до 1024 символа. Кавычки обязательны. Alt= “Собака“ Этот текст также появиться в виде всплывающей подсказки, когда указатель мыши направлен на картинку.

3. Align – выравнивание. Положение изображения лучше всегда указывать явно. (слайд 4)

Значения:

  • left, right – по левому или по правому краю.
  • top – верхняя граница изображения устанавливается на уровне верхнего края самого высокого элемента в строке.
  • middle – середина изображения выравнивается с серединой строки.
  • bottom – (по умолчанию) нижний край изображения выравнивается с базовой линией текста.

4. border – устанавливает или убирает (для гиперссылок) рамку вокруг изображения (слайд 5)

border = толщина рамки в пикселях.
border=0 – убрать рамку.

5. height, width – высота и ширина изображения в пикселях. Размеры могут быть больше или меньше реальных размеров изображения. Браузер автоматически масштабирует его. Значения можно указывать в % по отношению к окну.

width = “100%” height = 20 – полоса на все окно шириной 20 пикселей.

Если указать только width = “30%”, то высоту браузер подберет сам пропорционально рисунку. Если картинка не загрузилась, то на экране остается пустая область с заданными атрибутами height , width.

6. Hspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали.

Центрирование изображения (слайд 6)Выровнять изображение по центру можно, только выделив его из текста тэгами абзацев, раздела <p > или новой строки. Обтекание изображения текстом (слайд 7). Значения left и right атрибута align помещают изображение у левого или правого края документа. Затем браузер выводит оставшееся содержание документа в свободное пространство, смежное с изображением, текст обтекает изображение.

Можно поместить картинки одновременно по обеим сторонам документа. В этом случае картинки задаются перед текстом (слайд 8).

Вот HTML-код этой станицы (слайд 9)

<body bgcolor ="#008080"> <p>
<hr width="50%" size="5"> <p>
<img src="1.jpg" width="25%" hspace="10" vspace="10" border="0" align="left">
<img src="3.jpg" width="25%" hspace="10" vspace="10" border="0" align="right">
<font size="+1" color="#C0C0C0">
<p align="center">
Кошки очень забавные животные.
<br>
Они создают уют в доме, радуют нас.
<br clear="all"> Особенно приятно смотреть на маленьких котят. <p>
<hr width="50%" size ="5"> <p>
</font>
</body>
</html>

Пояснения:

Обе картинки имеют значение атрибута width="25%" , но правая картинка заметно меньше левой. Это происходит потому, что 25% для правой картинку вычисляются от ширины, оставшейся после вывода левой картинки, т.е., от 75% ширины окна браузера.

Для того, чтобы текст выводился после всех картинок, а не между ними, используем <br clear="all">

Создание таблиц в web -документах (слайд 10).

Тег <table>… </table>создает таблицу.

Все прочие элементы таблицы – текст, рисунки, списки - должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица.

Теги <tr>…</tr> и <td>…</td> – описывают строки и столбцы (ячейки таблицы).

Тег <th> …</t h> – описывает заголовки в первой строке таблицы.

Тег <caption>… </ caption> – описывает заголовок таблицы (слайд 11).

Атрибуты для тега <table>… </table> (слайд 12).

Align – выравнивание таблицы относительно документа. Возможные значения: center, left, right.
Valign – выравнивает текст в таблице по вертикали. Значения: top, bottom, middle, baseline.
Background=“имя файла“ – строка, определяющая рисунок для заднего фона таблицы.
Bgcolor =“цвет” – определяет задний фон таблицы.
Border – толщина внешней рамки в пикселях. Если атрибут не указан, то таблица выводится без видимой рамки.
Bordercolor =“цвет” – цвет рамки.
Bordercolorlight =“цвет” – цвет рамки слева и сверху.
Bordercolordark =“цвет” – цвет рамки справа и снизу.

Атрибуты для тега <table>… </table>

Title =“Текст“ – всплывающая подсказка.
Width = число – ширина таблицы в процентах или пикселях.
Height = число – рекомендуемая высота таблицы только в пикселях.
Cellspacing = число – расстояние между ячейками.
Cellpadding = число – расстояние между содержимым и рамкой.
Colls = число – заранее сообщает браузеру количество столбцов в таблице.

(Слайд 14)

Пример:

<body bgcolor="#008080">
<table border="3" bordercolor="#ff00ff“ cellpadding="10" cellspacing="10">
<tr>
<td background="4.jpg"> A </td>
<td bgcolor="#C0C0C0"> <img src="6.jpg" > </td>
</tr>
</table>
</body>

Атрибуты для тега <table >…</table> (слайд 15)

Cлайдrules – описывает рамки внутри таблицы. Значения:

all Отображает все части рамки внутри таблицы
cols Отображает все вертикальные рамки внутри таблицы
none Удаляет все рамки внутри таблицы
rows Отображает все горизонтальные рамки внутри таблицы

Атрибуты для тега <table >…</table> (слайд 16)

Frame – описывает параметры внешней рамки. Значения:

box Отображает все части рамки вокруг таблицы
void Удаляет все рамки вокруг таблицы
above Рамка только сверху
belov Рамка только снизу
lhs Рамка только слева
rhs Рамка только справа
vsides Рамка только слева и справа
hsides Рамка только сверху и снизу

Тег <tr>…</tr> – строка таблицы (слайд 17)

В этом теге можно использовать почти все атрибуты, что и в теге таблицы. Но действуют они только в этой строке

<th> – ячейки таблицы с заголовками столбцов.
<td> – ячейки таблицы с данными.

В этих тегах тоже можно применять почти все атрибуты таблицы.

Для оформления текста можно использовать все теги форматирования.

Таблица строится по строкам. Сначала прописываются все ячейки в первой строке, затем – во второй, и т.д. (слайд 18)

Пример:

<table border=2 cols=2 bgcolor=yellow align=center>
<TR>
<TH>Заголовок столбца 1</TH>
<TH>Заголовок столбца 2</TH>
</TR>
<TR>
<TD>Ячейка столбца 1, ряд 1</TD>
<TD>Ячейка столбца 2, ряд 1</TD>
</TR>
<TR>
<TD>Ячейка столбца 1, ряд 2</TD>
<TD>Ячейка столбца 2, ряд 2</TD>
</TR>
</table>

(Слайд 19)

COLSPAN – Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки.
ROWSPAN – Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки.

5. Первичное закрепление полученных знаний.

Разбейтесь по парам и садитесь за компьютеры. На диске c:// в папке ://мои документы//8класс для вас есть задание, которое необходимо выполнить за оставшееся время на этом уроке.

6. Оценивание деятельности учащихся.

За работу на уроке … учащиеся получают … отметки.

7. Сообщение домашнего задания.

Ребята, откройте дневники, запишите домашнее задание: выучить новые понятия, теги, атрибуты, выбрать проект (слайд 20) и найти материал по этой теме, принести на следующий урок.

8. Подведение итогов урока.

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