Просмотр содержимого документа
«Разработка занятия спецкурса «Web-дизайн» »
Разработка занятия спецкурса «Web-дизайн»
Салихова Нурия Мухамедовна учитель информатики МОУ СОШ №41 г. Томска.
Тема занятия: «Таблицы».
Тип урока: комбинированный (изучение нового материала, практическая работа).
Форма проведения: урок-лекция с элементами урока-практикума.
Класс: 10А класс (информационно-технологический профиль).
Задачи урока:
Образовательные: научиться создавать таблицы.
Воспитательные: развитие познавательного интереса, внимания учащихся.
Развивающие: формирование навыков работы в HTML.
Методы обучения: словесные - лекция, беседа.
Ход урока:
Организационный момент (3 мин).
Приветствие. Сегодня наш урок пройдет в форме – лекции. Затем вы выполните практическое задание.
Изучение нового материала (20 мин).
Содержание лекции
Тег
, с которым мы будем работать сегодня, один из самых главных и сложных и, в то же время, самых незаметных тегов. Без использования таблиц нельзя построить грамотную красивую страничку, ну, разве что, самую простенькую.
Таблицы – это что-то вроде шкафчиков с полочками, на которых мы расставляем различные вещи. Можно, конечно, всё разложить и на полу…
Но мы желаем стать настоящими мастерами, поэтому принимаемся за изучение таблиц.
Теги
и
задают саму таблицу.
Таблица состоит из строк (
и
), которые разбиваются на ячейки тегами
и
.
Чтобы легче ориентироваться в структуре таблицы, применяют ступенчатую (иерархическую) запись, когда теги одного уровня записываются с одинаковым отступом (друг под другом), а вложенные теги имеют больший отступ, чем теги-хозяева.
Все табличные теги имеют атрибуты, с большей частью которых ты уже знаком, но всё же перечислим основные из них:
border – толщина границы;
width, height – ширина и высота (таблицы, строки или ячейки – всё зависит от того, в каком теге этот атрибут записан), может задаваться в точках или в процентах;
align, valign – выравнивание по горизонтали (left, right, center) и по вертикали (top – по верхнему краю, bottom – по нижнему краю, center) содержимого ячейки; если этот атрибут находится в теге
, то выравнивание относится к самой таблице, а не к её содержимому;
bgcolor – цвет фона (таблицы, строки или ячейки);
background – фоновый рисунок (с помощью этого атрибута ты сможешь на фоне фотографии разместить текст, бегущую строку или картинку – это пока единственный способ сделать страничку многослойной);
cellpadding, cellspacing – поля внутри ячеек и просветы между ячейками;
colspan, rowspan – пропуск колонок (ячеек) или строк.
Для начала создадим что-то вроде фотогалереи на страничке, используя таблицу для разметки.
