HTML5 & CSS3. Верстка сайтов.

Грамотно, качественно, с любовью свёрстанный веб сайт не только одинаково хорошо отображается на любом устройстве от компьютера до планшета и даже экране мобильного телефона, но и однозначно лучше индексируется поисковыми роботами. Казалось бы, что в современном мире с широкими интернет каналами размер страницы веб сайта не имеет значения, но это не так – если страница загружается слишком долго или с ошибками, то заметная часть пользователей уйдет, так и не став пользователями (или покупателями) конкретного веб ресурса.

В настоящий момент есть много средств автоматизации вёрстки веб страниц, но код, произведенный даже самым лучшим автоматическим средством верстки может быть улучшен специалистом.

Помните, что при приеме на работу вас скорее всего будут спрашивать не то сколькими программами верстки вы умеете пользоваться, а насколько хорошо вы можете верстать в обычном «блокноте».

Наш курс откроет вам секреты кроссбраузерной верстки и будет хорошим стартом для настоящего профессионала (HTML верстальщика, веб программиста, тестировщика, SEO оптимизатора).

Занятие 1. Основы разработки веб-ресурсов
  • Что такое верстка?
  • Важность и предназначение верстки в веб;
  • Консорциум W3C. Краткий экскурс в историю создания языка. Как сейчас происходит его доработка и развитие;
  • Браузеры. Актуальные браузеры. Кроссбраузерность;
  • Выбор редактора для написания кода;
Занятие 2. Синтаксис HTML и разметка документа
  • Понятие тега;
  • Каркас документа и Meta-теги;
  • Семантика кода;
  • Правила написания тегов: открытие-закрытие тегов, пустые, вложенные, регистр написания тегов;
  • Пример каркаса веб-страницы;
Занятие 3. Работа с текстом
  • Параграфы и заголовки;
  • Форматирование текста;
  • Жирный;
  • Курсив;
  • Подчеркивание;
  • Перечеркнутый текст;
  • Надстрочный и подстрочный текст;
  • Линии;
  • Семантика тегов форматирования;
  • Пример веб-страницы со всеми разобранными типами форматирования;
Занятие 4. Атрибуты элементов
  • Использование кавычек;
  • Регистр написания атрибутов;
  • Атрибуты Class, Id, Style, Title;
Занятие 5. Списки
  • Маркированные списки;
  • Нумерованные списки;
  • Списки определений;
  • Вложенные списки;
  • Примеры использования на практике вышеизложенных списков;
Занятие 6. Ссылки
  • Атрибуты;
  • Якоря;
  • Почтовые и внутренние ссылки;
Занятие 7. Изображения, мультимедиа и вставка внешних объектов
  • Мультимедиа в веб: изображения, видео, аудио;
  • Добавление изображений на страницу;
  • Атрибуты изображений: ширина, высота, рамка, alt и title;
  • Форматы изображений;
  • Видео-форматы и их поддержка браузерами;
  • Аудио-форматы и их поддержка браузерами;
  • Вставка внешних объектов с помощью тегов object и embed;
  • Пример вставки видео YouTube;
Занятие 8. Таблицы
  • Элементы таблиц;
  • Атрибуты;
  • Назначение таблиц;
  • Табличная верстка на практике;
Занятие 9. Работа с формами
  • Поля ввода и их типы;
  • Метки полей;
  • Текстовые поля ввода;
  • Радиокнопки;
  • Чекбоксы;
  • Списки выбора;
  • Текстовая область;
  • Кнопки;
  • Группирование элементов формы;
  • Тег legend;
  • Атрибуты элементов формов;
  • Примеры создания формы;
Занятие 10. Основы работы с CSS
  • Что такое CSS?
  • Возможности и предназначение CSS;
  • Подключение CSS к html-документу;
  • Синтаксис и терминология;
  • Наследование, каскадность, приоритетность;
  • ID и CLASS;
  • Селекторы: групповые селекторы, селекторы потомков, псевдоселекторы;
  • Сброс стилей по умолчанию
Занятие 11. Работа с параметрами шрифта
  • Установка шрифта;
  • Размер шрифта;
  • Стиль шрифта;
  • Font-weight;
  • Font-variant;
  • Сокращенная запись;
  • Подключение нестандартных шрифтов;
Занятие 12. Работа с текстом
  • Интерлиньяж;
  • Выравнивание;
  • Красная строка;
  • Цвет;
  • Расстояние между словами/буквами;
  • Text-decoration;
  • Text-transform;
  • White-space;
Занятие 13. Стилизация ссылок
  • Цвет;
  • Декорирование;
  • Псевдоселекторы;
Занятие 14. Курсор
  • Стиль курсора;
  • Виды курсоров;
  • Использование кастомизированного курсора;
Занятие 15. Списки
  • Виды маркеров;
  • Кроссбраузерное отображение маркеров;
  • Практика: создание навигации и использованием списков
  • Горизонтальное меню
  • Вертикальное меню
  • Вложенное меню
Занятие 16. Таблицы
  • Границы таблиц;
  • Ширина и высота;
  • Выравнивание: горизонтальное и вертикальное;
  • Отступы;
  • Фон;
Занятие 17. Использование изображений в качестве фона
  • Фоновый цвет;
  • Фоновое изображение;
  • Повтор фонового изображения;
  • Позиционирование фона;
  • Фиксация фона;
  • Краткая запись;
Занятие 18. Формы
  • Границы;
  • Ширина, высота;
  • Интерлиньяж;
  • Кнопки;
Занятие 19. Блочная модель
  • Ширина, высота;
  • Margin, Padding, Border;
  • Outline;
Занятие 20. Свойство Display
  • Блочные элементы;
  • Строковые;
  • Блочно-строковые;
Занятие 21. Свойство Float
  • Обтекание по сторонам;
  • Понятие потока;
  • Очистка потока;
Занятие 22. Позиционирование
  • Абсолютное;
  • Относительное;
  • Фиксированное;
  • Свойство z-index;
Занятие 25. Практическая работа
  • Верстка макетов с фиксированной шириной
  • Пример верстки двухколоночных макетов с разным расположением элементов
  • Пример верстки трехколоночных макетов с разным расположением элементов
  • Верстка макетов с «плавающей» шириной
  • Пример верстки двухколоночных макетов с разным расположением элементов
  • Пример верстки трехколоночных макетов с разным расположением элементов
  • Улучшаем навигацию по сайту
  • Стилизация меню
  • Выпадающее меню
  • Верстка новостной ленты (блога)
  • Верстка информационных блоков
  • Создание блоков-ссылок
  • Создание закругленных уголков
  • Создание тени и иммитация тени
  • Создание рамок
  • Форма обратной связи на css
  • Создание галереи изображений
  • Презентационная страница
  • Страница с подробным описанием фото
  • Создание галереи Lightbox
  • Верстка каталога организаций или товаров
  • Фиксированные панели (блоки) на странице
  • Вертикальное выравнивание
  • Прижимание футера сайта к низу страницы в не зависимости от высоты контента сайта
  • Информация о курсе

    Продолжительность (часов) — 60
    Цена (бел. рублей) — 330
    идет набор в группу
    Дни занятий — сб/вскр
    Время занятий — -/-

Записаться на компьютерный курс

Имя:

Email:

Телефон:

Название курса:

Сообщение

Введите изображение на картинке
captcha

Яндекс.Метрика