Печать

Веб верстки с помощью html и css

 Чему научим на этом курсе:
- В первую очередь Вы овладеете основами CSS и HTML.
- Сможете создавать и редактировать сознанные собственноручно страницы, вносить исправления и дополнения в уже существующие коды. 
- Незаменимым умением будет так же работа над версткой блоков текста и работа над стилистикой отдельных элементов страницы. 

1. Знакомство с Html-разметкой. Инструментарий разработчика.

1.1 Работа с FTP клиетов. Структура страницы. Синтаксис HTML.

1.2 Обзор тегов (head, html, bodi, title, meta), работа с тегами на странице.

2. Знакомство с CSS.

2.1 Подключение к HTML документу.

3. Работа с CSS селекторами. Селекторы тегов, идентификаторы и классы.

3.1 Контекстные селекторы. Наследование и каскад. Приоритеты. Работа над типовыми ошибками.

4. Стили текста и оформления.

4.1 Работа со шрифтом. Цвет, размер, межстрочное расстояние и т.д..

4.2 Работа с фоном. Цвет, изображение. Маркеры списка. Рамки и обводки.

5. Работа с блочными и инлайновыми элементами.

5.1 Виды элементов. Различия и применение блочных и инлайновых элементов.

5.2 Свойств display. Изучение поведения элемента при отрисовке. Свойство Float и «плавающие» элементы.

5.3 Другие виды поведения элементов.

5.4 Семантическая разметка документа. Теги для работы с текстом, оформление списков, работа со ссылками и изображениями, таблицы и контейнеры (diy).

6. Стили позиционирования, отступы и размер блоков.

6.1 Поля (padding) и отступы (margin). Положение на странице. Алгоритм расчета ширины и высоты элементов на странице.

7. Управление блоками в потоке.

7.1 Базовые способы поведения элементов на странице (display: none, display: inline, display: block, display: inline-block, display: list-item, table*).

7.2 Области применения тех или иных способов поведения элементов.

7.3 Позиционирование блоков (stati, Relative, Absolute, Fixed) с «плавающими» элементами и свойство float.

7.4 Области применения тех или иных способов позиционирования.

8. Сетка. Базовая верстка.

8.1 Построение сетки с использованием float и display: inline-block. Приемущества и недостатки построения сетки с данными свойствами.

8.2 Позиционирование на странице. Отступы, фиксация ширины (центровка 2, 3 и более колонок), фиксация шапки, подвал, выносные элементы.

9. Верстка сайта. Пошаговый алгоритм создания.

10. Обзор типовых ошибок, проблемные участки кода, отображение страниц в браузерах. Секреты профессионалов. Принципы работы и профессиональный подход к созданию сайта – оформление кода с помощью CSS, HTML, JavaScrpt.

Просмотров: 6823