Преподавание информатикиИспользование таблиц для размещения объектов на Web-страницах
Добавлено: 2018.08.26
Просмотров: 3
Добрынина Светлана Игоревна, учитель информатики
Цели урока:
- Систематизировать и обобщить ЗУН учащихся при изучении темы “Использование таблиц для размещения объектов на Web– страницах”;
- Развивать навыки реализации теоретических знаний в практической деятельности; расширять кругозор и развивать логическое мышление учащихся в области информатики;
- Повышать уровень информационной культуры десятиклассников.
Задачи:
- Закрепить умения решать примеры на использование таблиц для размещения объектов на Web– страницах;
- Развивать логическое мышление учащихся посредством выполнения практических задач;
- Совершенствовать умение рационально использовать время и быстро ориентироваться в обстановке;
- Закрепить навыки работы в локальной компьютерной сети.
Тип урока:
- Урок систематизации и обобщения изученного материала.
Ход урока
1. Оргмомент и объяснение хода урока.
Здравствуйте, ребята. Сегодня мы с вами повторяем изученный материал по Web-программированию (вам будет предложен тест-кроссворд) и на практических заданиях посмотрим, как можно на Web-страницах размещать объекты, используя таблицы.
2. Повторение пройденного материала (
Приложение 1). Заполнить кроссворд и получить ключевое слово в выделенном столбце. Время выполнения 4-5 минут.
3. Практические задания (
Приложение 2). Каждому учащемуся выдается лист с заданием. Дается время (1 минута), чтобы определить структуру, используемую в задании.
Учащиеся должны увидеть:
- это таблица;
- определить сколько строк в таблице;
- определить сколько ячеек в строке;
- есть, нет объединение ячеек;
- какие свойства таблицы, строки и ячеек использованы.
Затем учитель вместе с классом разбирают структуру в каждом задании (4-5 минут) и учащиеся после разбора на компьютерах выполняют предложенные задания.
a. По 1 заданию учащиеся определяют:
- это таблица с выравниванием по центру;
- состоит из 1 строки;
- состоит из 1 ячейки;
- у таблицы задан фоновый цвет, используется атрибут bgcolor;
- задано обрамление с помощью атрибута border;
- можно поработать со шрифтом
(Дополнительно).
Образец выполнения задания (в папке Приложение 3): | <HTML> <HEAD> <TITLE> Таблица 1 </TITLE> </HEAD> <BODY> <TABLE align=center border=1 bgcolor=#56ADA9> <TR> <TD> ВНИМАНИЕ! ВНИМАНИЕ! </TD> </TR> </TABLE> </BODY> </HTML> |
b. По 2 заданию учащиеся определяют:
- это таблица, у которой ширина (width) и высота (height) равны 100%;
- состоит из 1 строки;
- состоит из 1 ячейки;
- задано обрамление с помощью атрибута border;
- текст выровнен по горизонтальной (align) и вертикальной (valign) середине;
- можно поработать со шрифтом
(Дополнительно).
Образец выполнения задания (в папке Приложение 3): | <HTML> <HEAD> <TITLE> Таблица 2 </TITLE> </HEAD> <BODY> <TABLE cellspacing=0 width=100% height=100% border=1> <TR> <TD align=center valign=middle> ВНИМАНИЕ! ВНИМАНИЕ </TD> </TR> </TABLE> </BODY> </HTML> |
c. По 3 заданию учащиеся определяют:
- это таблица, у которой ширина (width) и высота (height) равны 100%, задан фоновый цвет;
- состоит из 1 строки;
- состоит из 1 ячейки;
- задано обрамление с помощью атрибута border и значение больше 1, задан цвет для границы;
- текст выровнен по вертикальной (valign) середине;
- задано расстояние от границы ячейки до его содержимого (cellpadding);
- можно поработать со шрифтом
(Дополнительно).
Образец выполнения задания (в папке Приложение 3): | <HTML> <HEAD> <TITLE> Таблица 3 </TITLE> </HEAD> <BODY> <TABLE cellspacing=0 width=100% height=100% border=30 bordercolor=#77CA99 bgcolor=#808080 cellpadding=25> <TR> <TD valign=middle> <font size=7> ВНИМАНИЕ! ВНИМАНИЕ </font> </TD> </TR> </TABLE> </BODY> </HTML> |
d. По 4 заданию учащиеся определяют:
- это таблица, высота (height) которой равна 100%;
- состоит из 3 строк;
- состоит из 3 ячеек;
- задано объединение ячеек по вертикали (rowspan);
- вертикальная полоса получена объединением ячеек по вертикали (rowspan), затем задано обрамление (border) и фоновый цвет (bgcolor);
- можно поработать со шрифтом
(Дополнительно).
Образец выполнения задания (в папке Приложение 3): | <HTML> <HEAD> <TITLE> Таблица 4 </TITLE> </HEAD> <BODY> <TABLE height=100%> <TR > <TD width=20% rowspan=3></TD> <TD width=1 border=1 bgcolor=black rowspan=3></TD> <TD width=80%> <font size=7> ВНИМАНИЕ! </TD> </TR> <TR> <TD><font size=7> ВНИМАНИЕ! </TD> </TR> <TR> <TD><font size=7> ВНИМАНИЕ! </TD> </TR> </BODY> </HTML> | Схема объединения ячеек: G Напомнить, что при объединении убираем лишние ячейки и в следующей строке используем тег < TD > только один раз. |
e. По 5 заданию учащиеся определяют:
- это таблица, высота (height) которой равна 100%;
- состоит из 1 строки;
- состоит из 3 ячеек фиксированной ширины;
- вертикальная полоса получена путем задания обрамления ячейки (border) и фонового цвета (bgcolor);
- можно поработать со шрифтом
(Дополнительно).
Образец выполнения задания (в папке Приложение 3): | <HTML> <HEAD> <TITLE> Таблица 5 </TITLE> </HEAD> <BODY> <TABLE height=100%> <TR > <TD width=100 valign=top>ширина колонки 100 пикселов</TD> <TD width=1 border=1 bgcolor=black></TD> <TD width=500 valign=top>ширина колонки 500 пикселов</TD> </TR> </BODY> </HTML> |
f. Задание с графическим наполнением выполняют без пояснения, так как есть поясняющая таблица
Образец выполнения задания (в папке Приложение 3): | <HTML> <HEAD> <TITLE> Таблица 6 </TITLE> </HEAD> <BODY> <TABLE cellpadding=0 cellspacing=0> <TR> <TD rowspan=3><img src=img1.jpg></TD> <TD ><img src=img2.jpg></TD> <TD rowspan=3><img src=img5.jpg></TD> </TR> <TR> <TD><img src=img3.jpg></TD> </TR> <TR> <TD><img src=img4.jpg></TD> </TR> </TABLE> </BODY> </HTML> |
4. Подведение итогов урока.
Учащиеся получают оценку за кроссворд. В ходе урока выполненные задания учащиеся сохраняют в своих папках, хранящихся на компьютере учителя (работа в локальной компьютерной сети). Контроль выполнения заданий можно осуществлять на уроке (хотя это бывает не очень удобно) или после уроков, тогда оценка за практическую часть объявляется учащимся на следующем уроке.