WEB-дизайн

в помощь учебник 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">

Занятие 4. Форматирование текста и заголовки. Стилевые правила соответствующих селекторов.
Форматирование текста и заголовки. Теги <p><br><hr><h1><h2><h3><h4><h5><h6>. Стилевые правила соответствующих селекторов: шрифттексттень текста.


Занятие 5.  Единицы измерения в CSS.
Единицы измерения в CSS. Абсолютные (px) и относительные единицы (%, emremvhvwvminvmax). Единицы для вывода на печать: mmcmptpcin. Знакомство с exch (употребляются редко). Принципы использования абсолютных и относительных единиц. Вьюпорт (ширина окна браузера). Функция calc(...).


Занятие 6. Цвет в CSS. Методы задания цвета.
Цвет в CSSМетоды задания цвета (название, 16-ричный формат, RGBRGBA, %, HSLHSLA).


Занятие 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, возможности экспресс-обработки онлайн ресурсов FOTORAVATAN.

Занятие 14. Создание векторных изображений.
Графические редакторы Inkscape (бесплатный), CorelDRAW, Adobe Illustrator (традиционно используется веб-дизайнерами). Работа в одном из редакторов. Создание SVG в редакторе и напрямую в HTML

Занятие 15Создание анимации в редакторе Macromedia Flash.
Основы работы в Macromedia Flash. Создание анимации.


Занятие 16Списки. Стилевые правила для списков.
Списки. Теги <ul><li><ol>. Маркеры. Список определенийСтилевые правила для списков. Правило ul {list-style-typenone;}Организацию меню.


Занятие 17Таблицы.
ТаблицыТеги <table><caption><tr><th><td>Стилевые правила для таблиц.


Занятие 18Фрэймы. Недостатки использования фрэймов.
Ознакомительное занятие. Вставка рекламы на сайт (тег <iframe>).


Занятие 19Контейнеры. Тег <div>. CSS: блочная модель.
Тег <div>. CSS: блочная модельCSS: блочная модель (еще одна ссылка).

Занятие 20CSS: блочная модель.
CSS: блочная модель. Позиционирование блоков CSS content


Занятие 21Виды селекторов в CSS.
CSS. Контекстные селекторы, соседние селекторы, дочерние селекторы, селекторы атрибутовуниверсальный селектор.


Занятие 22Группирование, наследование, каскадирование.
Группированиенаследование, каскадирование.


Занятие 23Стандарт HTML5. Семантический код.
Стандарт HTML5Семантический кодТеги <header><nav><main><article><section><footer><aside><mark>.


Занятие 24.  Применение стилевых правил.
Применение стилевых правил к новым тегам.


Занятие 25Стандарт HTML5. Семантический код. Применение стилевых правил.
Теги <figcaption><figure><canvas> (в ознакомительном порядке), <summary><details><embed><audio><video><source>.


Занятие 26Псевдоклассы и псевдоэлементы.
Что такое и какие бывают псевдоклассы и псевдоэлементы. Использование основных псевдоклассов и псевдоэлементов


Занятие 27Анимация в CSS. Переходы (transition).
Свойство transition. Свойство transform и его значенияtranslaterotatescaleskew. Анимация (правила @keyframes, свойство animation)


Занятие 28Стандарт CSS3. Медиа-запросы. Директива @supports.
Медиа-запросы. Метатег viewportДинамическое подключение стилей. Директива @supports.


Занятие 29Теория фиксированной, резиновой, адаптивной и отзывчивой верстки. Классы устройств и контрольные точки.
Теория фиксированной, резиновой, адаптивной и отзывчивой верстки. Принцип «От мобильных – к десктопу». Классы устройств и контрольные точки (брекпоинты), например: 576px, 768px, 992px, 1200px.

Занятие 30Общие сведения о кроссбраузерной верстке.
Общие сведения о кроссбраузерной верстке. Настройки браузеров по умолчанию. Использование файлов reset.css и normalize.css. Браузерные движки. Префиксы «-webkit-», «-moz», «-o-», «-ms-». АвтопрефиксерДекларация !importantСвойство allправила вида .example {allunset;}


Занятие 31Концепция многоколоночной разметки CSS3 columns.
Концепция многоколоночной разметки CSS3 columns. Количество колонок column-count, ширина column-width, установка колонок одним свойством columns. Ширина пустого пространства между колонками column-gap. Позиционирование элемента на несколько колонок column-span. Стиль разделительной линии column-rule.


Занятие 32CSS 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);


Занятие 33CSS Flexbox. Свойства flex-элемента.
Свойства flex-элемента:
·         порядок отображения элементов (order);
·         базовая ширина элемента (flex-basis);
·         растяжение элементов (flex-grow);
·         сужение элементов (flex-shrink);
·         задание базовой ширины и трансформации элемента одним свойством (flex), правило {flex: auto};
выравнивание отдельных элементов (align-self –  переопределение свойства контейнера align-items).


Занятие 34CSS Grid Layout. Основные понятия. Создание сетки. Позиционирование элементов. Слои.
·         основные понятия: grid-контейнер, grid-элементы, grid-линии, grid-полосы (пространства между линиями), grid-ячейки, grid-области, grid-интервалы (пространства между полосами, отступы);
·         создание сетки (правило displaygrid, значение inline-grid, свойства grid-template-columnsgrid-template-rowsgrid-gap, функция repeat(...)); единица fr (фракция, доля доступного места);
·         позиционирование: свойства grid-элементов grid-columngrid-row; значение span{grid-column-startspan 3;};
·         слои (свойство z-index);


Занятие 35CSS Grid Layout. Именованные элементы сетки.
·         именованные линии сетки, ячейки и шаблоны; разметка grid-областей (grid-template-areas), размещение элемента в области (grid-area); обращение по именам;
авторазмещение (grid-auto-flow).

Занятие 36CSS Grid Layout. Свойства контейнера и элементов. Поддержка браузерами.
·         свойства align-items и justify-items (для контейнера) и align-self и justify-self (для элемента);
·         гибкие сеткизначения auto-fill и auto-fitmin-contentmax-content функция minmax(...)правила вида grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)).
Поддержка браузерами модуля CSS Grid Layout. js-библиотека eCSStender и расширение CSS3 Grid Alignment.

Комментариев нет:

Отправить комментарий