в помощь учебник 11 класса
В помощь САЙТ
Занятие 1. Обучение правилам безопасности
Занятие 2. Язык гипертекстовой разметки HTML. Синтаксис. Форматирование, стиль, наглядность, читаемость кода.
Язык гипертескстовой разметки HTML. Синтаксис: структура; теги, атрибуты и значения. Текстовый редактор, браузер, валидатор (определение понятия), графический редактор, справочник. Структура HTML документа. Парные и одиночные теги. Теги <html>, <head>, <title>, <body>. Форматирование, стиль, наглядность, читаемость кода (рекомендации по оформлению кода от Google, W3C). Тэг <meta>. Основы SEO.
Занятие 3. Язык описания стилей CSS. Синтаксис. Подключение стилей к HTML.
Язык описания стилей CSS. Синтаксис: структура; правило, селектор, свойство, значение. Статическое подключение стилей к HTML: <link rel="stylesheet" href="style.css">
Графические редакторы Inkscape (бесплатный), CorelDRAW, Adobe Illustrator (традиционно используется веб-дизайнерами). Работа в одном из редакторов. Создание SVG в редакторе и напрямую в HTML
В помощь САЙТ
Занятие 1. Обучение правилам безопасности
Занятие 2. Язык гипертекстовой разметки HTML. Синтаксис. Форматирование, стиль, наглядность, читаемость кода.
Язык гипертескстовой разметки HTML. Синтаксис: структура; теги, атрибуты и значения. Текстовый редактор, браузер, валидатор (определение понятия), графический редактор, справочник. Структура HTML документа. Парные и одиночные теги. Теги <html>, <head>, <title>, <body>. Форматирование, стиль, наглядность, читаемость кода (рекомендации по оформлению кода от Google, W3C). Тэг <meta>. Основы SEO.
Занятие 3. Язык описания стилей CSS. Синтаксис. Подключение стилей к HTML.
Язык описания стилей CSS. Синтаксис: структура; правило, селектор, свойство, значение. Статическое подключение стилей к HTML: <link rel="stylesheet" href="style.css">
Занятие 4. Форматирование текста и заголовки. Стилевые правила соответствующих селекторов.
Форматирование текста и заголовки. Теги <p>, <br>, <hr>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Стилевые правила соответствующих селекторов: шрифт, текст, тень текста.
Занятие 5. Единицы измерения в CSS.
Единицы измерения в CSS. Абсолютные (px) и относительные единицы (%, em, rem, vh, vw, vmin, vmax). Единицы для вывода на печать: mm, cm, pt, pc, in. Знакомство с ex, ch (употребляются редко). Принципы использования абсолютных и относительных единиц. Вьюпорт (ширина окна браузера). Функция calc(...).
Занятие 6. Цвет в CSS. Методы задания цвета.
Цвет в CSS. Методы задания цвета (название, 16-ричный формат, RGB, RGBA, %, HSL, HSLA).
Занятие 7,8. CSS. Селекторы тегов, классы, идентификаторы.
CSS. Селекторы тегов, классы, идентификаторы. Преимущества и традиционность использования классов перед идентификаторами в CSS (классы – для CSS, идентификаторы (id) – для JavaScript).
Занятие 9. Гиперссылки. Стилевые правила для ссылок.
Гиперссылки. Тег <a href=”...”>. Стилевые правила для ссылок. Шрифт, текст, тень текста.
Занятие 10. Изображения. Вставка изображений. Стилевые правила для изображений.
Вставка изображений. Тег <img src="..." alt="..." title="...">. Стилевые правила для изображений (форматирование, эффекты и др.).
Занятие 11. Фоновые изображения. Изображения в качестве гиперссылок. Стилевые правила.
Фоновые изображения. Изображения в качестве гиперссылок. Свойство {background: url(...)}. Стилевые правила для фона. Стилевые правила для изображений в качестве гиперссылок. Карты-изображения. Методы оформления.
Занятие 12. Базовые сведения о графических редакторах.
Базовые сведения о графических редакторах. Принципы создания (редактирования) изображений для сайта. Растровые и векторные редакторы. Форматы BMP, JPG, GIF, PNG, ICO, PSD, SVG. Верстка дизайна (макета страницы) в формате PSD (ознакомительные сведения). Преимущества использования формата PNG для публикации изображений. Формат ICO, создание favicon.ico.
Занятие 13. Редактирование фотографий и растровых изображений.
Редактирование фотографий и растровых изображений. Графические редакторы Paint, Adobe Photoshop, возможности экспресс-обработки онлайн ресурсов FOTOR, AVATAN.
Занятие 14. Создание векторных изображений.
Занятие 15. Создание анимации в редакторе Macromedia Flash.
Основы работы в Macromedia Flash. Создание анимации.
Занятие 16. Списки. Стилевые правила для списков.
Списки. Теги <ul>, <li>, <ol>. Маркеры. Список определений. Стилевые правила для списков. Правило ul {list-style-type: none;}. Организацию меню.
Занятие 17. Таблицы.
Таблицы. Теги <table>, <caption>, <tr>, <th>, <td>. Стилевые правила для таблиц.
Занятие 18. Фрэймы. Недостатки использования фрэймов.
Ознакомительное занятие. Вставка рекламы на сайт (тег <iframe>).
Занятие 19. Контейнеры. Тег <div>. CSS: блочная модель.
Тег <div>. CSS: блочная модель. CSS: блочная модель (еще одна ссылка).
Занятие 21. Виды селекторов в CSS.
CSS. Контекстные селекторы, соседние селекторы, дочерние селекторы, селекторы атрибутов, универсальный селектор.
CSS. Контекстные селекторы, соседние селекторы, дочерние селекторы, селекторы атрибутов, универсальный селектор.
Занятие 22. Группирование, наследование, каскадирование.
Группирование, наследование, каскадирование.
Группирование, наследование, каскадирование.
Занятие 23. Стандарт HTML5. Семантический код.
Стандарт HTML5. Семантический код. Теги <header>, <nav>, <main>, <article>, <section>, <footer>, <aside>, <mark>.
Стандарт HTML5. Семантический код. Теги <header>, <nav>, <main>, <article>, <section>, <footer>, <aside>, <mark>.
Занятие 24. Применение стилевых правил.
Применение стилевых правил к новым тегам.
Применение стилевых правил к новым тегам.
Занятие 25. Стандарт HTML5. Семантический код. Применение стилевых правил.
Теги <figcaption>, <figure>, <canvas> (в ознакомительном порядке), <summary>, <details>, <embed>, <audio>, <video>, <source>.
Теги <figcaption>, <figure>, <canvas> (в ознакомительном порядке), <summary>, <details>, <embed>, <audio>, <video>, <source>.
Занятие 26. Псевдоклассы и псевдоэлементы.
Что такое и какие бывают псевдоклассы и псевдоэлементы. Использование основных псевдоклассов и псевдоэлементов.
Что такое и какие бывают псевдоклассы и псевдоэлементы. Использование основных псевдоклассов и псевдоэлементов.
Доп. -но: Продвинутое руководство для любопытных. Использование фильтров в псевдоклассе :hover.
Занятие 27. Анимация в CSS. Переходы (transition).
Свойство transition. Свойство transform и его значения: translate, rotate, scale, skew. Анимация (правила @keyframes, свойство animation)
Свойство transition. Свойство transform и его значения: translate, rotate, scale, skew. Анимация (правила @keyframes, свойство animation)
Занятие 28. Стандарт CSS3. Медиа-запросы. Директива @supports.
Медиа-запросы. Метатег viewport. Динамическое подключение стилей. Директива @supports.
Медиа-запросы. Метатег viewport. Динамическое подключение стилей. Директива @supports.
Занятие 29. Теория фиксированной, резиновой, адаптивной и отзывчивой верстки. Классы устройств и контрольные точки.
Теория фиксированной, резиновой, адаптивной и отзывчивой верстки. Принцип «От мобильных – к десктопу». Классы устройств и контрольные точки (брекпоинты), например: 576px, 768px, 992px, 1200px.
Теория фиксированной, резиновой, адаптивной и отзывчивой верстки. Принцип «От мобильных – к десктопу». Классы устройств и контрольные точки (брекпоинты), например: 576px, 768px, 992px, 1200px.
Занятие 30. Общие сведения о кроссбраузерной верстке.
Общие сведения о кроссбраузерной верстке. Настройки браузеров по умолчанию. Использование файлов reset.css и normalize.css. Браузерные движки. Префиксы «-webkit-», «-moz», «-o-», «-ms-». Автопрефиксер. Декларация !important. Свойство all, правила вида .example {all: unset;}
Общие сведения о кроссбраузерной верстке. Настройки браузеров по умолчанию. Использование файлов reset.css и normalize.css. Браузерные движки. Префиксы «-webkit-», «-moz», «-o-», «-ms-». Автопрефиксер. Декларация !important. Свойство all, правила вида .example {all: unset;}
Занятие 31. Концепция многоколоночной разметки CSS3 columns.
Концепция многоколоночной разметки CSS3 columns. Количество колонок column-count, ширина column-width, установка колонок одним свойством columns. Ширина пустого пространства между колонками column-gap. Позиционирование элемента на несколько колонок column-span. Стиль разделительной линии column-rule.
Концепция многоколоночной разметки CSS3 columns. Количество колонок column-count, ширина column-width, установка колонок одним свойством columns. Ширина пустого пространства между колонками column-gap. Позиционирование элемента на несколько колонок column-span. Стиль разделительной линии column-rule.
Занятие 32. CSS Flexbox. Терминология. Создание flex-контейнера. Свойства flex-контейнера.
· терминология: flex-контейнер, flex-элементы, главная ось (main-axis), перпендикулярная ось (cross axis);
· создание flex-контейнера: правило {display: flex}, значение inline-flex;
· свойства контейнера (начинаем изучать, если есть время):
o направление главной оси (flex-direction);
o многострочность элементов (flex-wrap);
o краткая запись направления и многострочности (flex-flow);
o выравнивание элементов по главной оси (justify-content);
o выравнивание элементов по перпендикулярной оси (align-items);
выравнивание строк контейнера (align-content);
Занятие 33. CSS Flexbox. Свойства flex-элемента.
Свойства flex-элемента:
· порядок отображения элементов (order);
· базовая ширина элемента (flex-basis);
· растяжение элементов (flex-grow);
· сужение элементов (flex-shrink);
· задание базовой ширины и трансформации элемента одним свойством (flex), правило {flex: auto};
выравнивание отдельных элементов (align-self – переопределение свойства контейнера align-items).
Занятие 34. CSS Grid Layout. Основные понятия. Создание сетки. Позиционирование элементов. Слои.
· основные понятия: grid-контейнер, grid-элементы, grid-линии, grid-полосы (пространства между линиями), grid-ячейки, grid-области, grid-интервалы (пространства между полосами, отступы);
· создание сетки (правило display: grid, значение inline-grid, свойства grid-template-columns, grid-template-rows, grid-gap, функция repeat(...)); единица fr (фракция, доля доступного места);
· позиционирование: свойства grid-элементов grid-column, grid-row; значение span: {grid-column-start: span 3;};
· слои (свойство z-index);
Занятие 35. CSS Grid Layout. Именованные элементы сетки.
· именованные линии сетки, ячейки и шаблоны; разметка grid-областей (grid-template-areas), размещение элемента в области (grid-area); обращение по именам;
авторазмещение (grid-auto-flow).
Занятие 36. CSS Grid Layout. Свойства контейнера и элементов. Поддержка браузерами.
· свойства align-items и justify-items (для контейнера) и align-self и justify-self (для элемента);
· гибкие сетки: значения auto-fill и auto-fit, min-content, max-content функция minmax(...), правила вида grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)).
Поддержка браузерами модуля CSS Grid Layout. js-библиотека eCSStender и расширение CSS3 Grid Alignment.
Комментариев нет:
Отправить комментарий