Верстка

Преподаватель:

Алексей Тортев

MST Digital Agency

Аннотация курса:

Курс знакомит с принципами работы HTML-верстальщика, с приемами использования различных инструментов и помощников. Слушатели курса знакомятся с принципами верстки различных типов контента (иллюстрации, таблицы, списки и др.), учатся работать с формами и каскадными стилями, с JavaScript. По завершении курса слушателям предлагается аттестационное задание. Курс состоит из 6 лекций по 2 академических часа.

Целевая аудитория:

Студенты, желательно 4-6 курсов, желающие научиться качественно верстать.

Цель курса:

Дать базовые знания верстки, которые студенты смогут применять как для выполнения учебных задач, так и в дальнейшей работе. Подготовить кадровую смену верстальщиков, обладающих всеми необходимыми базовыми знаниями и смогут работать в IT-компаниях Ульяновска.

Какие курсы рекомендованы после данного:

Есть один-единственный способ стать хорошим верстальщиком – постоянно практиковаться. Тем, кто окончит курс, рекомендую побольше заниматься версткой, брать работу на фриланс, желательно пройти стажировку в IT-компании. Если чего-то не знаете – ищите способы решения задачи в Интернете. Помните, что приемы верстки придуманы до вас, нужно только научиться все это использовать. Кроме того всем верстальщикам советую ближе познакомиться с работой графических программ.

Курс состоит из 6 лекций по 2 академических часа.

ПЛАН ЗАНЯТИЙ

№ занятия	№ п/п	Заголовок	Параграф (§)
1	1	Введение и основные понятия, профессия HTML-верстальщика	1	Принципы и основы работы HTML-верстальщика. Инструменты-помощники (firebug).
			2	Основные сведения о языках разметки: HTML, XML, XHTML. Эволюция языков разметки. Цели и задачи языка HTML.
			3	Структура HTML-документа. Понятие элементов и атрибутов. Что такое тег? Типы тегов. Правила оформления HTML-документа.
			4	Основные элементы форматирования текста. Элементы блочной (block) и текстовой (inline) разметки. Использование комментариев.
	2	Ссылки и иллюстрации, таблицы и списки	1	Механизмы адресации на ресурсы в Интернет. Реализация механизма в языке HTML.
			2	Создание гиперссылок с помощью элемента A и его атрибутов. Типы ссылок.
			3	Размещение иллюстрации на веб-странице. Типы файлов иллюстраций. Элемент IMG и его атрибуты.
			4	Структурирование информации на веб-странице при помощи списков. Типы списков.
			5	Особенности табличной модели в HTML 4, отличия от модели в HTML 3.2. Таблица и ее элементы.
			6	Правила задания размеров для таблицы и ее ячеек. Объединение ячеек. Типичные ошибки при работе с таблицами.
			7	Использование таблиц. Макетирование веб-страницы с помощью таблиц.
			8	Использование вложенных таблиц.
			9	Приемы использования таблиц на веб-странице.
2	3	Формы и Каскадные таблицы стилей (CSS)	1	Зачем нужны формы. Элементы формы.
			2	Методы отправки информации из полей формы.
			3	Использование табличных функций при создании формы на примере анкеты.
			4	Основные цели и задачи CSS. Способы добавления стилей на WEB-страницу. Спецификации CSS Level 1 и Level 2: особенности, поддержка браузерами.
			5	CSS: основные понятия и определения. Грамматика языка стилей.
			6	Способы подключения таблицы стилей, базовый синтаксис, правила применения.
			7	Создание стилей и классов. Принципы каскадирования и принципы группировки.
			8	Использование псевдоклассов и псевдоэлементов.
			9	CSS3
			10	Анимация
			11
			12
	4	Каскадные таблицы стилей (Блоковая модель)	1	Форматирование блоков. Поля и отступы.
			2	Использование блоков. Блоковая модель.
			3	Управление видимостью и переполнением блоков.
			4	Схемы позиционирования. Относительное, абсолютное, фиксированное, статическое позиционирование.
3	5	Резина, полу-резина	1	Что такое резиновая и полурезиновая верстка?
			2	Основные подводные камни
			3	Методы расчета позиционирования элементов на странице
			4	Объявление миинмальных и максимальных величин
4	6	Адаптив	1	Понятие, значение, место в жизни общества
			2	Методика мышления при создании адаптивного сайта
			3	Подход к анализу макета адаптивного сайта
			4	С чего начинать, когда вроде бы все понятно
			5	Медиа запросы
5	7	JavaScript	1	Введение, возможности языка, необходимость использования, способы подключения скриптов.
			2	Семантика и синтаксис, объектная модель браузера, объектная модель документа.
			3	Примеры использования одного из популярных фреймворков JQUERY.
	8	jQuery + @media	1	Использование фреймворков для адаптации верстки
			2	Почему вообще на адаптивке необходим фрэймворк
			3	Как поймать границу между адаптивкой на js и css
6		Аттестация