Использование таблиц для размещения объектов на Web-страницах

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

Цели урока:

  • Систематизировать и обобщить ЗУН учащихся при изучении темы “Использование таблиц для размещения объектов на 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. Подведение итогов урока.

Учащиеся получают оценку за кроссворд. В ходе урока выполненные задания учащиеся сохраняют в своих папках, хранящихся на компьютере учителя (работа в локальной компьютерной сети). Контроль выполнения заданий можно осуществлять на уроке (хотя это бывает не очень удобно) или после уроков, тогда оценка за практическую часть объявляется учащимся на следующем уроке.