|
Байланысты: РПр уч.практика 301
Разделы, темы
|
Результаты обучения
|
Критерии оценки
|
Всего часов
|
Тип
занятия
|
|
Структура HTML-документа
|
Основы HTML-разметки.
Знание о структуре HTML-документа, включая элементы , , , , и <meta>.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="2"> <li/>
<br /></ol> </td> <td width="242">
<br />Гиперссылки и якоря
<br /></td> <td width="156">
<br />Создание гиперссылок с использованием тега <a>.
<br />Понимание разницы между абсолютными и относительными URL-адресами.
<br />Использование якорей для прокрутки к определенным частям страницы.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="3"> <li/>
<br /></ol> </td> <td width="242">
<br />Изображения:тег <img>
<br /></td> <td width="156">
<br />Вставка изображений на веб-страницу с помощью тега <img>.
<br />Настройка атрибутов src, alt, width и height.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="4"> <li/>
<br /></ol> </td> <td width="242">
<br />Таблицы
<br /></td> <td width="156">
<br />Создание таблиц с использованием тегов <table>, <tr>, <td>, и <th>.
<br />Объединение ячеек с помощью атрибутов rowspan и colspan.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="5"> <li/>
<br /></ol> </td> <td width="242">
<br />Формы и элементы форм
<br /></td> <td width="156">
<br />Создание форм с использованием тега <form>.
<br />Добавление различных элементов форм, таких как поля ввода, кнопки и флажки.
<br />Основы валидации форм.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="6"> <li/>
<br /></ol> </td> <td width="242">
<br />Мультимедиа
<br /></td> <td width="156">
<br />Вставка аудио и видео с помощью тегов <audio> и <video>.
<br />Использование атрибутов controls и source.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="7"> <li/>
<br /></ol> </td> <td width="242">
<br />Селекторы и свойства
<br /></td> <td width="156">
<br />Основы CSS селекторов, включая классы, идентификаторы и элементы.
<br />Применение стилей к элементам с использованием свойств, таких как color, background-color и font-family.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="8"> <li/>
<br /></ol> </td> <td width="242">
<br />Цвет и фон
<br /></td> <td width="156">
<br />Выбор цветов с использованием различных форматов, включая имена цветов и RGB.
<br />Настройка фона элементов с помощью свойства background.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="9"> <li/>
<br /></ol> </td> <td width="242">
<br />Шрифты и текст
<br /></td> <td width="156">
<br />Установка шрифтов и их размеров с использованием свойств font-family и font-size.
<br />Выравнивание текста с помощью свойства text-align.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="10"> <li/>
<br /></ol> </td> <td width="242">
<br />margin и padding
<br /></td> <td width="156">
<br />Управление внешними и внутренними отступами элементов с помощью свойств margin и padding.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="11"> <li/>
<br /></ol> </td> <td width="242">
<br />Рамки и границы
<br /></td> <td width="156">
<br />Создание рамок вокруг элементов с использованием свойств border, border-width и border-color.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="12"> <li/>
<br /></ol> </td> <td width="242">
<br />Позиционирование элементов
<br /></td> <td width="156">
<br />Понимание различных методов позиционирования, включая relative, absolute, fixed и static.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="13"> <li/>
<br /></ol> </td> <td width="242">
<br />Flexbox
<br /></td> <td width="156">
<br />Использование Flexbox для создания гибких макетов.
<br />Основы свойств display: flex, justify-content и align-items.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="14"> <li/>
<br /></ol> </td> <td width="242">
<br />Grid Layout
<br /></td> <td width="156">
<br />Создание сложных сеток с использованием Grid Layout.
<br />Основы свойств display: grid, grid-template-columns и grid-template-rows.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="15"> <li/>
<br /></ol> </td> <td width="242">
<br />Анимации и переходы
<br /></td> <td width="156">
<br />Создание анимаций с использованием ключевых кадров и переходов между стилями.
<br />Основы свойств animation и transition.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="16"> <li/>
<br /></ol> </td> <td width="242">
<br />Псевдоэлементы и псевдоклассы
<br /></td> <td width="156">
<br />Применение стилей к псевдоэлементам и элементам в разных состояниях с помощью псевдоклассов.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="17"> <li/>
<br /></ol> </td> <td width="242">
<br />Стилизация форм и кнопок
<br /></td> <td width="156">
<br />Улучшение внешнего вида форм и кнопок с использованием CSS.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="18"> <li/>
<br /></ol> </td> <td width="242">
<br />Медиазапросы и адаптивный дизайн
<br /></td> <td width="156">
<br />Создание адаптивных дизайнов с использованием медиазапросов, чтобы страницы корректно отображались на разных устройствах и экранах.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="19"> <li/>
<br /></ol> </td> <td width="242">
<br />Кроссбраузерная совместимость
<br /></td> <td width="156">
<br />Понимание различий между веб-браузерами и как они обрабатывают HTML и CSS.
<br />Тестирование и устранение ошибок совместимости для обеспечения корректного отображения в разных браузерах.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="20"> <li/>
<br /></ol> </td> <td width="242">
<br />Работа на Figma
<br /></td> <td width="156">
<br />Использование графических инструментов для создания макетов веб-страниц.
<br />Экспорт графических ресурсов для использования в веб-разработке.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="21"> <li/>
<br /></ol> </td> <td width="242">
<br />Работа с типографикой
<br /></td> <td width="156">
<br />Выбор и настройка шрифтов для веб-страницы.
<br />Определение размеров и интерлиньяжа текста для улучшения читаемости.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="22"> <li/>
<br /></ol> </td> <td width="242">
<br />Работа с цветами
<br /></td> <td width="156">
<br />Выбор палитры цветов для веб-дизайна.
<br />Понимание цветовых моделей и использование цветов в CSS.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="23"> <li/>
<br /></ol> </td> <td width="242">
<br />Работа с компонентами и библиотеками
<br /></td> <td width="156">
<br />Интеграция готовых компонентов и библиотек (например, Bootstrap) в веб-проекты.
<br />Создание собственных компонентов для повторного использования.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="24"> <li/>
<br /></ol> </td> <td width="242">
<br />Принцип CSS-верстки.
<br /></td> <td width="156">
<br />Освоение базовых принципов каскадных таблиц стилей (CSS) и их применение к HTML-разметке.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="25"> <li/>
<br /></ol> </td> <td width="242">
<br />Макеты на основе обтекаемых элементов. Использование обтекаемых элементов при верстке.
<br /></td> <td width="156">
<br />Создание макетов, включая элементы, которые обтекают другие элементы на странице.
<br />Использование свойства float и clear для создания обтекаемых элементов.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="26"> <li/>
<br /></ol> </td> <td width="242">
<br />Решение проблем с обтекаемыми элементами.
<br /></td> <td width="156">
<br />Идентификация и устранение проблем с обтекаемыми элементами, такими как схлопывание контейнера и перекрытия.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="27"> <li/>
<br /></ol> </td> <td width="242">
<br />Позиционирование элементов на странице.
<br /></td> <td width="156">
<br />Ознакомление с различными методами позиционирования, включая relative, absolute, fixed, static, sticky.
<br />Применение этих методов для точного размещения элементов на странице.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="28"> <li/>
<br /></ol> </td> <td width="242">
<br />Принципы работы свойств позиционирования. Эффективные стратегии позиционирования.
<br /></td> <td width="156">
<br />Понимание концепции адаптивного дизайна и его важности для различных устройств и размеров экранов.
<br />Создание адаптивных макетов и резиновых дизайнов.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="29"> <li/>
<br /></ol> </td> <td width="242">
<br />Адаптивный веб-дизайн. Основы адаптивного веб-дизайна.
<br /></td> <td width="156">
<br />Использование медиазапросов в CSS для настройки стилей в зависимости от разрешения экрана.
<br />Разработка медиазапросов для адаптивной верстки.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="30"> <li/>
<br /></ol> </td> <td width="242">
<br />Создание адаптивного дизайна веб-страницы.
<br /></td> <td width="156">
<br />Понимание концепции адаптивного дизайна и его важности для различных устройств и экранов.
<br />Использование медиазапросов для настройки стилей и макета в зависимости от размера экрана.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="31"> <li/>
<br /></ol> </td> <td width="242">
<br />Медиазапросы.
<br /></td> <td width="156">
<br />Создание медиазапросов с использованием CSS для адаптивной верстки.
<br />Настройка стилей и компонентов на разных устройствах, таких как смартфоны, планшеты и настольные компьютеры.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="32"> <li/>
<br /></ol> </td> <td width="242">
<br />Гибкие сетки. Гибкие изображения.
<br /></td> <td width="156">
<br />Освоение принципов гибких сеток для создания адаптивных макетов.
<br />Использование процентных и относительных единиц измерения для размеров контейнеров и элементов.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="33"> <li/>
<br /></ol> </td> <td width="242">
<br />Профессиональная flexbox-верстка. Знакомство с методом flexbox-верстки
<br /></td> <td width="156">
<br />Настройка изображений так, чтобы они масштабировались и адаптировались к разным экранам.
<br />Использование атрибута max-width для предотвращения искажения изображений.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="34"> <li/>
<br /></ol> </td> <td width="242">
<br />Свойства flex-контейнера. Свойства flex-элементов.
<br /></td> <td width="156">
<br />Знакомство с методом flexbox-верстки, который обеспечивает гибкое позиционирование элементов.
<br />Изучение свойств flex-контейнера и flex-элементов.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="35"> <li/>
<br /></ol> </td> <td width="242">
<br />Создать интернет-магазин. Часть 1
<br /></td> <td width="156">
<br />Применение знаний по адаптивному дизайну и flexbox-верстке для создания веб-страниц интернет-магазина.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22"> <ol start="36"> <li/>
<br /></ol> </td> <td width="242">
<br />Создать интернет-магазин. Часть 2
<br /></td> <td width="156">
<br />Работа над дизайном, структурой, компонентами и адаптивностью интернет-магазина.
<br /></td> <td width="175">
<br />Отчет по практическим работам
<br /></td> <td width="137">
<br />2
<br /></td> <td width="117">
<br />Практический
<br /></td> </tr> <tr valign="top"> <td width="22">
<br />
<br />
<br /></td> <td colspan="2" width="412">
<br />Итого часов:
<br /></td> <td width="175">
<br />
<br />
<br /></td> <td width="137">
<br />72
<br /></td> <td width="117">
<br />
<br />
<br /></td> </tr> </table>
<br /><h2> </h2></video></audio></form></th></a></meta> |
Достарыңызбен бөлісу: |
|
|
