Профессиональная верстка. Позиционирование элементов. Практическая верстка

План урока
Знакомство с курсом.
Позиционирование элементов.
Популярные генераторы.
Практика (создание макета страницы сайта).

GeekUniversity

GeekUniversity
Факультет веб-разработки
1 год.
Online-обучение.
На выходе: Middle-разработчик.

Чему мы научимся на подготовительных курсах?
Узнаем основы HTML, CSS, JS, PHP.
Научимся применять данные технологии.
Создадим интернет-магазин.

Как проходит обучение?
2 дня в неделю.
Онлайн.
Видеозаписи.
Методические материалы.
Наставник.

GeekUniversity
HTML/CSS.
Javascript.
PHP.
Практика командной разработки.
Компьютерные сети.
Видеокурс от резюме до испытательного срока.
Операционные системы.
Алгоритмы и структуры данных.
Базы данных.
Курсовая работа.
Yii2 framework. Уровень 1.
Yii2 framework. Уровень 2.

GeekUniversity
ReactJS.
Архитектуры и шаблоны проектирования.
Командная работа над Highload-проектом.
Командная работа над Open Source-проектом.
Подготовка к собеседованию на Middle-разработчика.

Позиционирование элементов

Значение по умолчанию, означает отсутствие позиционирования. Элементы отображаются один за другим в том порядке, в котором они определены в HTML-документе.
Относительно позиционированный элемент сдвигается со своего обычного места, а пространство, которое он занимал, не исчезает. При этом такой элемент может перекрывать другое содержимое на странице.

Абсолютно позиционированный элемент полностью удаляется из потока документа и позиционируется относительно его блока-контейнера.
Фиксирует элемент в нужном месте страницы. Блоком-контейнером фиксированного элемента является окно просмотра, при этом элемент полностью удаляется из потока документа.

Устанавливает значение свойства в значение по умолчанию.
Наследует значение свойства от родительского элемента.

Свойства смещения
Свойства описывают смещение относительно ближайшей стороны блока-контейнера. Задаются для элементов, для которых значение свойства position не равно static. Могут принимать положительные и отрицательные значения. Не наследуются.

Значение по умолчанию. Вычисляемое значение свойства равно нулю.
<%>
Процентные значения вычисляются относительно высоты блока-контейнера для top и bottom и ширины блока-контейнера для right и left.

Устанавливает значение свойства в значение по умолчанию.
Наследует значение свойства от родительского элемента.

Значение по умолчанию. Также отменяет любое перемещение для элемента из группы элементов, для которых уже установлено обтекание.
Элемент изымается из нормального потока элементов и позиционируется по левому краю блока-контейнера.

Элемент позиционируется по правому краю блока-контейнера.

Отмена обтекания элементов
Свойство clear определяет, как будет располагаться элемент, идущий следом за плавающим элементом. Свойство отменяет обтекание с одной или обеих сторон элемента, установленное свойством float.

Отменяет обтекание по левой стороне, смещая элемент вниз. Правое обтекание остается в силе.
Отменяет обтекание по правой стороне, смещая элемент вниз. Левое обтекание остается в силе.

Значение по умолчанию. Также отменяет очистку обтекания, установленного для элементов одной группы.
Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.

Устанавливает значение свойства в значение по умолчанию.
Наследует значение свойства от родительского элемента.

CSS3 Генераторы

Как можно ускорить написание стилей CSS3?
Онлайн-сервисы CSS упрощают процесс веб-разработки. С их помощью вы можете получить готовый кроссбраузерный код для различных элементов интерфейса, протестировать, как выглядит сайт на экранах мобильных устройств, подобрать цветовую палитру для сайта и многое другое.

http://css3.me
Рассчитать скругления.
Тени для блоков.
Градиент цвета.
Размытие.

Всё и сразу
http://www.css3maker.com.
http://webcodetools.com/.
http://css3generator.com/ (самые важные).
http://www.colorzilla.com/gradient-editor/ (работа с цветом).
http://tridiv.http://tridiv.com/ (создание 3D моделей.

http://howtocenterincss.com/
Одна из самых сложных задач в позиционировании блоков – центрирование. Данный сервис помогает решить ее: выставляя нужные параметры, можно легко отцентрировать блок.

Практическое задание

Практическое задание
Ознакомиться с макетами интернет-магазина, прикрепленного к данному уроку.
Создать главную страницу нашего интернет-магазина (1_index.psd).

Практическое задание
* У учеников разное количество времени и возможностей, а верстка занимает большую часть свободного времени. Поэтому, если справились с главной страницей, можно приступать к созданию страницы товара каталога.