11 класс
Занятие 12. Понятие о каскадных таблицах стилей
Embedded Files
Понятие CSS. Способы подключения CSS к HTML-документу. Задание стилей форматирования веб-страниц
Цель: планируется, что к окончанию урока учащиеся будут
Цель: планируется, что к окончанию урока учащиеся будут
знать:
понятие CSS, и его назначение;
структуру описания правил на языке CSS;
способы подключения CSS в HTML-документе.
уметь:
применять CSS правила для внешнего оформления веб-страницы.
Задачи личностного развития:
содействовать формированию компьютерной грамотности;
способствовать воспитанию информационной культуры;
содействовать развитию дисциплинированности и любознательности;
способствовать бережному отношению при эксплуатации средств ИКТ.
Тип урока: урок изучения нового материала.
Учебно-методическое обеспечение:
учебное пособие "Информатика 11, В.М. Котов";
рабочая тетрадь по информатике 11 класс Л.Г. Овчинникова;
раздаточный материал "Занятие 12. Понятие о каскадных таблицах стилей".
Программное обеспечение:
Текстовый редактор Notepad++ (скачать).
Ход урока
1. Организационный момент (1 минута)
1. Организационный момент (1 минута)
Приветствие учащихся. Создание благоприятного настроя на уроке.
Проверить готовность учащихся к уроку с помощью слова ТРУД: "Тетрадь, ручка, учебник и дневник" (презентация, 1 слайд).
2. Проверка домашнего задания (4 минуты)
2. Проверка домашнего задания (4 минуты)
Фронтально задать вопросы, или использовать QR-карточки Plickers:
Какие есть виды гиперссылок в веб-среде?
Какой тег в HTML создает гиперссылку?
Назовите назначение атрибута href в теге a.
Назовите назначение атрибута alt в теге a.
Назовите назначение атрибута target в теге a.
3. Целемотивационный этап (2 минуты)
3. Целемотивационный этап (2 минуты)
Пояснить учащимся, что в современной веб-разработке используется разделение структурной части (информационно-блочное разделение) посредством HTML, и визуальной (оформление внешнего представления) части, посредством каскадных таблиц стилей (презентация, 2 слайд).
Сказать, что на данном занятии мы применим правила оформления веб-страницы в соответствии с современной концепцией веб-разработки. Рассмотрим различные варианты подключения правил каскадных таблиц стилей в HTML-документе.
Сформулировать тему урока: "Понятие о каскадных таблицах стилей" (презентация, 3 слайд).
Совместно с учащимися сформулировать цели урока (презентация, 4 слайд):
Буду знать:
понятие CSS, и его назначение;
структуру описания правил на языке CSS;
способы подключения CSS в HTML-документе.
Буду уметь (смогу):
применять CSS правила для внешнего оформления веб-страницы.
4. Домашнее задание (1 минута)
4. Домашнее задание (1 минута)
Параграф 8, ответить на вопросы 1-4 (с. 62, учебное пособие).
Урок 12, выполнить по желанию задание 6 (с. 62, рабочая тетрадь).
5. Изучение новой темы (15 минут)
5. Изучение новой темы (15 минут)
Сообщить учащихся, что до появления каскадных таблиц стилей, веб-разработчики применяли оформление веб-страниц с помощью HTML-разметки через атрибуты. Такой подход требовал изменять правило стиля для каждого тега на всех страницах, что усложняло и затягивало время на разработку веб-сайта. Все изменилось в 1994 г., когда Хокон Виум Ли предложил использовать каскадные таблицы стилей, или сокращенно CSS (Cascading Style Sheets). Познакомить учащихся с понятием CSS (с. 57, учебное пособие, или с. 57, рабочая тетрадь).
Пояснить особенность применения CSS правил оформления совместно с HTML-разметкой. Рассказать о преимуществах оформления веб-страницы с помощью CSS (применение правил оформления не к одному тегу, а к нескольким за одно правило, более богатый набор правил оформления).
Сказать, что существуют три основных способа подключения каскадных таблиц стилей к HTML-документу:
внутри открывающего HTML-тега;
встроенная таблица стилей;
внешняя таблица стилей.
Внутри открывающего тега, продемонстрировать пример 8.1 (с. 58, учебное пособие, или презентация, 6 слайд), акцентировать внимание на атрибут style, сказать, что правило стиля состоит из свойства и значения разделенных ":", несколько правил разделяются ";".
Встроенная таблица стилей. В головной части HTML-документа (тег <head>) между открывающем и закрывающем теге <style>, продемонстрировать пример 8.2 (с. 58, учебное пособие, или с. 57, рабочая тетрадь, или презентация, 7, 8 слайды), акцентировать внимание, что такая запись стилей называется объявлением, объявление состоит из селектора, или селекторов разделенных запятой (тег или группа тегов к которым будет применятся правило стилизации), в фигурный скобках описываются правила, которые состоят из свойства и значения, каждое правило заканчивается ";".
Внешняя таблица стилей. В отдельном файле с расширением .css, прописываются объявления как при встроенной таблице стилей, только без HTML-разметки. Чтобы связать файл таблицы стилей с HTML-документом, в головной части HTML-документа (тег <head>) в теге <link> с помощью атрибутов href, rel, type указывается ссылка на файл, отношение подключаемого файла к HTML-документу и описание информации в стилевом файле. Продемонстрировать пример 8.2 (с. 59, учебное пособие, или с. 57, учебное пособие, или презентация, 9 слайд).
Пояснить, что значит "каскадные" таблицы стилей (приоритет задания правил к одним и тем же тегам в зависимости от способа подключения правил CSS), приоритет от от большего к меньшему: встроенный стиль, внутренняя таблица стилей, внешняя таблица стилей.
Объяснить, как использовать стенографическую запись правил на примере свойств задания стиля для текста (пример 8.4, учебное пособие, или презентация, 10 слайд). Сказать, что какая запись сокращает описание правил, но следует придерживаться точной последовательности значений.
Показать учащимся, где найти информацию о свойстве CSS правила и его значениях (в сети Интернет, с. 110, 111, приложения в учебном пособии, с. 58, 59, рабочая тетрадь).
На примере HTML-разметки и встроенной таблицы стилей акцент сделать на теги-обертки, которые группируют несколько тегов для задания общих правил оформления. Блочный тег <div> и встроенный тег <span> (презентация, 11 слайд).
Продемонстрировать с пояснением о использовании классов для задания уникального оформления тегов с помощью селектора .имя_класса и атрибута class в открывающемся теге (презентация, 12 слайд).
Пояснить на примере презентации 13 слайд, о внутренних и внешних отступах (и свойства их задания) и области содержимого тега.
Предложить рассмотреть использование стилей на примере задания 1 (с. 59, рабочая тетрадь, или задания 1 из раздаточного материала).
6. Физкультминутка (1 минута)
6. Физкультминутка (1 минута)
Акцент делается на опорно-двигательную систему.
7. Проверка понимания и закрепления изученного (10 минут)
7. Проверка понимания и закрепления изученного (10 минут)
Предложить выполнить на компьютере задания 1 и 2 (с. 59, 60, рабочая тетрадь, или задания 1 и 2 из раздаточного материала).
8. Контроль знаний и умений (10 минут)
8. Контроль знаний и умений (10 минут)
Предложить выполнить на компьютере задание 3 (с. 60, рабочая тетрадь).
9. Обобщение и систематизация изученного (2 минуты)
9. Обобщение и систематизация изученного (2 минуты)
Организовать обсуждение (презентация, 13 слайд):
Какое преимущество задания оформления с помощью каскадных таблиц стилей над заданием посредством атрибутов HTML-разметки?
Назовите способы подключения CSS правил к HTML-документу, и какие теги и атрибуты используются в каждом из способов.
Из каких элементов состоит объявление стилевых правил в CSS?
10. Подведение итогов и рефлексия (1 минута)
10. Подведение итогов и рефлексия (1 минута)
Обсудить результаты выполнения заданий (тестов) и выборочно оценить работу учащихся на учебном занятии.
Предложить вернуться к цели урока, организовать обсуждение:
Насколько вы достигли поставленной цели?
Как вы оцениваете свою работу на уроке?
Предложить закончить фразы:
"Сегодня мне понравилось ..."
"На уроке для меня было трудным ..."
"Хотелось бы узнать еще ..."
"Хотелось бы изменить в уроке ..."
Page updated
Google Sites
Report abuse