Дифференциация для II курса Бизнес-информатики
Цель: Получить минимум компетенций в области web-дизайна, которые позволят превратить WEBએ в органичный и эффективный инструмент продвижения своих проектов.
Курс разбит на несколько самостоятельных блоков по принципу от простого к сложному. основное внимание уделяется формированию практических навыков использования WEBએ.
Блок I (базовый). Основы верстки. HTML, CSS
- Структура HTML-документа. Простейшие HTML-страницы, разбираемся из каких тегов она состоит и за что эти теги отвечают. Подключаем к странице CSS-стили и JS-скрипты.
- Научимся добавлять на простейшую HTML-страницу текстовое содержание и правильно размечать его: абзацы, заголовки, подзаголовки, списки и многое другое. Научимся использовать ссылки, вставлять на страницу изображения.
- Таблицы доставляют наибольшее количество проблем новичкам. Здесь мы узнаем из каких тэгов состоит таблица и научимся создавать таблицы с любым количеством строк и столбцов. Попрактикуемся аккуратно оформлять таблицы: задавать рамки, отступы внутри ячеек, фон строк, размеры столбцов, выравнивание текста в ячейках (и всё это с помощью CSS, а не древних атрибутов). Помимо этого мы потренируемся в самом сложном: объединении ячеек.
- Вы научитесь создавать простейшие формы, попрактикуетесь использовать текстовые поля, выпадающие списки, поля-галочки, кнопки и другие элементы форм.
- Знакомство с CSS. Рассматриваются базовые понятия CSS: селекторы, каскадность, наследование, приоритеты. Вы познакомитесь с некоторыми CSS-свойствами для оформления текста, создания сетки страницы, позиционирования элементов.
- Селекторы. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их.
- Наследование и каскадирование. Наследование, каскадирование, специфичность: что это и как их правильно использовать?
- Оформление текста с помощью CSS. Самые распространенные CSS-свойства для оформления текста: жирность, курсив, размер, цвет и многое другое.
- Блочная модель документа. Как управлять размерами и расположением элементов, задавать отступы и рамки, а также рассмотрим различные типы элементов и их особенности. Это первый и самый важный шаг к созданию страниц со сложной сеткой и сложных декоративных элементов.
- Позиционирование. Вы узнаете о различных режимах позиционирования элементов: относительном, абсолютном, фиксированном. А также попрактикуетесь изменять расположение элементов на странице с помощью CSS-свойств для позиционирования.
- Сетки. Понятие потока документа, тонкости свойства float и блочно-строчных элементов, отрабатываются основные приёмы построения сеток.
- Фоны. Вы научитесь использовать фоновые изображения и задавать цвета фона. Также мы разберемся с популярными в веб форматами изображений и познакомимся с некоторыми приёмами создания декоративных эффектов.
- Знакомство с HTML5. Вы познакомитесь с новыми возможностями HTML5. Вы узнаете, какие новые элементы появились в стандарте и как их правильно использовать, потренируетесь вставлять на страницу аудио и видео, подключать и использовать нестандартные шрифты и векторные изображения.
- Формы и HTML5. Вы научитесь создавать продвинутые формы, используя новые возможности HTML5. Мы познакомимся с новыми типами полей для ввода дат, цветов, чисел и адресов сайтов. Также рассмотрим такие возможности как автофокус, подсказки, средства валидации и многие другие.
- Игра теней. Вы научитесь создавать тени с помощью CSS. Мы по косточкам разберем свойство box-shadow, научимся использовать множественные тени, а также изучим некоторые продвинутые приёмы работы с тенями.
- Селекторы. Часть 2. Рассмотрим много продвинутых селекторов, таких как :nth-last-of-type или :only-child. Также научимся использовать псевдоэлементы, такие как :before и :after.
- Селекторы. Часть 3. Мы рассмотрим продвинутые селекторы, умеющие искать элементы по подстрокам в атрибутах, а также огромное количество селекторов для стилизации элементов форм, таких как :required, :optional или :checked.
- Линейные градиенты. Вы узнаете, что такое линейные градиенты и как их можно использовать для создания интересных декоративных эффектов. Мы разберём синтаксис функции linear-gradient, некоторые интересные приёмы, попрактикуемся создавать сложные орнаменты с помощью градиентов.
- Двумерные трансформации. Будем крутить, наклонять, перемещать, уменьшать и увеличивать объекты, а также взрывать их фаерболами, телепортироваться и использовать телекинез. Ну и, конечно, разберём крутые приёмы использования трансформаций для создания декоративных эффектов.
- Оформление текста с помощью CSS. Часть 2. Вы в прямом смысле «наиграетесь со шрифтами», декоративными текстовыми эффектами и тенями, а ещё узнаете, как повысить читабельность текстов с помощью новых CSS-свойств.
- Анимация. Рассмотрены основы анимации на CSS. Вам предстоит пройти путь развития цивилизации и покорить космический простор. Вы будете двигать, поворачивать и видоизменять объекты, попутно осваивая приёмы работы анимации в CSS.
- Плавные переходы. Вы научитесь плавно менять CSS-свойства, будете создавать красивые и функциональные элементы форм в стиле Material Design и построите мини-викторину об HTML и CSS.
- Таблицы на CSS. Вы взглянете на таблицы с другой стороны: научитесь строить их с помощью CSS, исследуете и опробуете на практике редкие табличные свойства.
- Рамки и фоны, часть 2. Вы научитесь мастерски управляться с рамками и фонами любых форм и размеров, откроете для себя секреты давно знакомых свойств и примените их на практике.
Большая практическая работа: создаём персональную целевую страницу. Подробнее о целевых страницах и посмотреть примеры можно в моих статьях "Landing Page или как опознать кормильца?" и "Смотри как надо делать Landing Page".
Блок II (продвинутый). Новые возможности HTML5 и CSS3
Продолжаем большую практическую работу: модернизируем свою персональную целевую страницу в свете новых знаний.
Примерная программа курса "Современные web-технологии" в условия наступивших перемен by Костерин Вадим Валентинович is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
