Верстальщик сайтов. Начальный уровень

Для кого: для начинающих верстальщиков сайтов, для тех, кто хочет изучить HTML, CSS максимально подробно.

Зачем: Начать изучение верстки сайтов, получить минимальные знания для верстки простых сайтов (макетов).

Требования к ученикам: уверенное знание компьютера, умение устанавливать незнакомые программы, пользоваться почтой, интернетом.

Объем: 7 занятий по 1 академическому часу.

Сроки обучения для групп: 3 раза в неделю, время в 19 или 20-00, всего 3 недели.

Сроки обучения для индивидуальных занятий: согласовывается с преподавателем перед началом занятий.


Программа курса

  1. Введение: цели курса, формат обучения, график, дз, переносы занятий.
  2. Этапы разработки сайта
  3. Веб-специалисты и ответственность за этапы разработки сайта.
  4. Верстальщик сайтов и его обязанности
  5. Обзор Браузеров
  6. Обзор разрешений экранов
  7. PPI - плотность пикселей на дюйм
  8. HTML (язык гипертекстовой разметки)
  9. Тэги (одиночные и парные) и атрибуты
  10. Синтаксис html
  11. Полная структура HTML документа (Теги doctype, meta, title)
  12. Теги верхнего уровня: html, head, body
  13. Знакомство с www.htmlbook.ru
  14. Обзор Firebug (инспекция кода, редактирование, изменение значений)
  15. Инспекторы кода в других браузерах
  16. Комментирование в html
  17. Оптимизация изображений. Cтатья и видео по оптимизации
  18. Тег a
  19. Атрибут target
  20. Виды гиперссылок (внешние и внутренние; абсолютные и относительные)
  21. Правила подчеркивания и выделения ссылок и текста.
  22. Теги для списков (ul, ol, li)
  23. Теги для таблиц (table, tr, td, th)
  24. Объединение ячеек в таблице
  25. Тег p
  26. Теги h1-h6
  27. Теги b, strong
  28. Теги em, i
  29. Тег address
  30. Списки определений, теги dl, dd, dt
  31. Тег img и обязательные атрибуты
  32. Обзор форматов иллюстраций JPEG, GIF, PNG
  33. Примеры адаптации изображений в различных форматах с помощью GIMP и плагина Save for web
  34. Валидация документов (HTML).
  35. ДЗ №1
  36. Технология CSS
  37. Способы добавления стилей на страницу (связанные, глобальные, внутренние, импорт CSS)
  38. Синтаксис CSS
  39. Основные виды селекторов (универсальный, селектор тегов, классы, идентификаторы, контекстные селекторы)
  40. Использование нескольких классов в одном элементе
  41. Дополнительные виды селекторов: соседний, дочерний, селектор атрибутов
  42. Значения стилевых свойств (строки, числа, проценты, размеры, адреса)
  43. Стиль FLOAT (видео)
  44. Стиль color
  45. Цвета в CSS
  46. Обзор ColorZilla
  47. Стиль background
  48. Изучение стилей padding, margin, border
  49. Изучение стилей width, height
  50. Изучение стилей min-width, min-height, max-width, max-height
  51. ДЗ № 2 Верстка выпадающих меню
  52. Комментрование в CSS
  53. Выравнивание текста по горизонтали
  54. Выравнивание текста по вертикали
  55. Выравнивание блоков по горизонтали
  56. Выравнивание блоков по вертикали
  57. Стиль display
  58. Отличия блочных и строчных элементов
  59. Теги Span и Div для CSS
  60. Псевдокласс hover
  61. Верстка макетов (этапы: создание файлов и папок, html+css код каркаса, верстка блоков, контента)
  62. Стандартные названия блоков на сайте (header, footer и др)
  63. Технические требования к верстке
  64. Верстка шаблонов (тем) под различные движки (CMS, CMF)
  65. Верстка темы под UserCMS ver 2.x
  66. Дипломная работа
  67. Экзамен

Домашние задания

Памятка

: отчеты по всем заданиям присылать на адрес dz@unibix.ru, в теме письма указать "ДЗ №1 и ФИО", формат файлов для отчетов указывается в самих заданиях, обычно это или изображение в формате JPG, или архив в формате ZIP. Письма с неверным заголовком (темой письма) до преподавателей не доходят и распознаются антивирусом как спам. Будьте внимательны при выполнении домашних заданий.

  1. Закрепление теории, верстка учебных проектов №1 и №2
    Скачать и сверстать макеты фиксированного (№1) и резинового (№2) сайтов согласно техническим требованиям к верстке. Отправить в виде ZIP архива на почту info@unibix.ru (перед отправкой обязательно проверить на валидность и кроссбраузерность). Задание выполняется параллельно обучению, поэтому возможно, что некоторые моменты сложно будет выполнить, поэтому вопросы записывать в конце рабочей тетради, чтобы решить их на занятиях. Для выполнения задания поможет наше видео.
  2. ДЗ № 2 Верстка выпадающих меню
    Сверстать трехуровневое горизонтальное и вертикальное выпадаюее меню и отправить отчет на почту
  3. Дипломная работа. Закрепление теории, верстка полноценного сайта визитки.
    Установить денвер, создать локальный хост test50.loc, установить на него UserCMS, скачать макет, сверстать и прикрепить ее на движок, скачать контент и наполнить им сайт (создав необходимые страницы, приведя контент в порядок), выложить аккуратный, готовый к использованию сайт (без лишних ссылок, текста, фото и пр) в интернет на демо-домен (пароли получить у преподавателя, если пароли не получены - выслать архив сайта на почту info@unibix.ru)
  4. Экзамен. Проверка полученных знаний, выдача сертификата.
    Экзамен проходит в виде письменного теста, часть вопросов имеет от 2 до 4 вариантов ответа, на некоторые вопросы нужно ответит.

Материалы и ссылки для обучения:

  1. Статистика по браузерам
  2. Статистика по разрешениям мониторов
  3. Технические требования к макетам
  4. Технические требования к верстке
  5. Валидатор HTML
  6. Валидатор CSS
  7. Макет №1 и №2 для верстки
  8. Делаем простой сайт в GIMP быстрее и проще, чем в Фотошопе
  9. Рисуем стильное вертикальное меню в GIMP
  10. Плагин Save for Web
  11. Адаптивный и мобильный дизайн
  12. Наглядное и правдивое сравнение Гимп и Фотошоп
  13. Еще одно сравнение Гимп и Фотошоп

Как с нами связаться


Наш адрес
Гагарина 16г, офис 11А
+7 (4012) 33-55-81
center@unibix.ru
График работы
Пн - Пт: 1000 - 1900
Сб - по запросу
Вс: выходной
Мы в соцсетях
vk.com/unibix