WEB-дизайн,верстка сайта на HTML(HTML5),CSS(CSS3) - Учебный центр "ПрофАкадемия".

WEB-дизайн, вeрстка сайта - HTML (HTML5) CSS (CSS3)

Наименование курса: WEB-дизайн, верстка сайта (создание web-сайтов HTML, CSS)
Общая характеристика курса:
Специально для Вас разработана и улучшена специалистами профессиональная программа обучения Web-дизайну и вeрстке (HTML, CSS), для подготовки квалифицированных специалистов в области рекламы и дизайна, уверенно владеющего навыками работы на компьютере. Данный продвинутый курс, содержит разделы ознакомления с сетью Интернет через протоколы НТТР и FTP с помощью языка описания и оформления WEB-страниц (HTML, CSS). В результате изучения курса Web-дизайна, вeрстка сайта (HTML, CSS) Вы сможете составить свой собственный красивый и конкуренто способный WEB-сайт в Интернете, сумеете обмениваются необходимой информацией, и изучить основы рисунка и мультипликации.
Получаемые навыки:
Полученные знания после курсов Web-дизайна дают возможность выпускнику самостоятельно осуществлять заниматься созданием отдельных элементов оформления сайта (например, баннеров), так и создавать веб-страницы «под ключ».
Программа курса:
    Тема №1. Введение.
  1. Терминология.
  2. Примеры языков разметки.
  3. HTML.
  4. Кем был разработан HTML.
  5. Наиболее популярные браузеры.
  6. Что такое WEB.
  7. Версии HTML.
  8. Текстовые редакторы.
  9. HTML-разметка (элемент, тег).
  10. Структура HTML документа. Пример

    html>head{Служебная информация}+body{Содержание документа}

  11. Заголовок документа. Пример

    head>title{Мой первый документ}

  12. Комментарии. Пример

    head{<--! Это заголовок документа -->}>title{Мой первый документ}+body{<--! Содержимое документа -->}

  13. Заголовки. Пример

    h${Заголовок уровень $}*6

  14. Параграф (абзац). Пример

    p>lorem100

  15. Принудительный разрыв строки. Пример

    p>lorem50+br+lorem50+br+lorem50

  16. Атрибуты элемента. Пример

    hr[align=center width=500]

  17. Блочная цитата. Пример

    !>hr+p>lorem^+blockquote>hr+lorem+hr^p>lorem^+hr

  18. Авторское форматирование. Пример

    !>p>lorem^+pre{ *   **   ***    ****}+p{ *   **   ***    ****}

  19. Специальные символы.
    Тема №2. Структура страницы
  1. Правила оформления страницы, тегов, атрибутов.
  2. Форматирование текста.(strong, em, ins, del, cite, b, i, sup, sub). Пример

    !>{}+hr+p[align=center]>{Причина выделения}^+p>strong>{Очень важный текст}+br+lorem^^+p>em>{На этом тексте мы делаем акцент}+br+lorem^^+p>ins>{Этот текст мы добавили}+br+lorem^^+p>del>{А этот текст мы удалили}+br+lorem^^+p>cite>{Здесь мы кого-то процитировали}+br+lorem^^+hr+{}+p[align=center]>{Выделенно для вида}^+p>b>lorem^^+p>i>lorem^^+p>u>lorem^^+p>strike>lorem^^+p>s>lorem^^+br+hr+{3}+sup>{2}^+br+{H}+sub>{2}^+{O}

  3. Элементы HTML по валидации кода - NEW, DEPRECATED, OBSOLET.
  4. Блочные, строчные элементы HTML.
  5. Семантика элементов. (srong или b, em или i и.д.).
  6. Атрибуты HTML по валидации кода - REQUIRED, IMPLIED.
  7. Тип документа DTD.
  8. Проверка валидности кода - validator.w3.org.
  9. Структура документа, деление на смысловые элементы (id, class). Пример

    ![lang=ru]>#section>lorem^+#article>lorem^+#header>lorem^+#footer>lorem^+#aside>lorem^+#nav>lorem

  10. Новые семантические разделы (section, article, header, footer, aside, nav).Пример

    ![lang=ru]>section>{Какой-то раздел}^+article>{Самостоятельный раздел}^+header>{Верхняя часть блока}^+footer>{Нижняя часть блока}^+aside>{Дополнителный контент}^+nav>{Навигационное меню}

    Тема №3. Гиперссылки.
  1. Понятие гиперссылок в WWW.
  2. Виды гиперссылок (внутренняя, внешняя, смешанная).
  3. Адресация для атрибута href (абсолютна, относительная).
  4. Дополнителные атрибуты гиперссылок (открытие в новом окне).
    Тема №4. CSS. Каскадные таблицы стилей: основные свойства.
  1. Основные понятия CSS селекторы (rule-правило: declaration-декларация; propety-свойство; value-значение).
  2. Определение стилей (inline-вложение, embedding-встраивание, linking-связывание).
  3. Каскадирование правил.
  4. Наследование правил (родительские элементы, дочерние элементы).
  5. Единицы измерения (относительные, абсолютные).
  6. Цвет (задание по названию, шестнадцатеричное представление, формат RGB).
  7. Селекторы тега и класса.
  8. Селекторы ID. Селекторы элементов одного уровня (смежные селкторы).
  9. Селекторы потомков. Селекторы дочерних элементов.
  10. Группировка селекторов.
  11. Псевдо классы и псевдо элементы.
  12. CSS. Оформление шрифтов.
  13. CSS. Оформление текста.
  14. CSS. Оформление цвета и фона.
    Тема №5. Изображения.
  1. Основные графические форматы (gif, jpg, png).
  2. Исползование изображений (img, src, alt, width, heght, title).
    Тема №6. Списки.
  1. Неупорядоченный список (ul, li, list-style-type).
  2. Упорядоченный список (ol, li, list-style-type).
  3. Список определений (dl, dt, dd).
  4. CSS свойства для списков (list-style-position, list-style-image, list-style).
    Тема №7. Таблицы.
  1. Основные элементы таблицы (table, tr, td).
  2. CSS свойства элементов таблицы (border, width, heght, border-spacing, padding,
    border-collapse, empty-cells).
  3. Объединение ячеек (colspan, rowspan).
  4. Заголовок таблицы (caption, caption-side).
  5. Группировка по блокам (thead, tfoot, tbody, ).
    Тема №8. Фреймы.
  1. История создания и использования фреймов.
  2. Встраиваемый фрейм (iframe, name, scrolling, target, src).
  3. Ссылки на фрейм. Гиперссылки.
    Тема №9. Формы.
  1. Что такое вебформы.
  2. Элемент form (action, metod, enctupe).
  3. Текстовые поля и кнопки тег input (type: text; password (value, size, maxlenght); submit; reset; image; button;
    name, value, src).
  4. Элементы выбора input (type: checkbox (value, checked); radio(value:0||1); checkbox(name, id) ).
  5. Элемент label (for).
  6. Список и его элементы select[name, size, multiple] , option [name, value, selected], optgroup[label]
  7. Другие элементы textarea[name, cols, rows], input[type=file, type=hidden, name, value], fieldset>legend+input[type=text name=login]
    Тема №10. Использование CSS для макетирования.
  1. Позиционирование элементов
  2. Оформление границ элемента.
  3. Внутренние отступы элемента.
  4. Наружные отступы элемента.
  5. Размеры элемента.
  6. Плавающие элементы (float) и clearfix.
  7. Элементы flex.
  8. Отображает элемент в виде контейнера сетки уровня блока grid.
  9. Видимость элемента.
    Тема №11. Расширенные возможности HTML и CSS.
  1. Практическая работа для закрепления тем.
  2. Треугольники.
  3. Рамки.
  4. Закругленные углы (border-radius).
  5. Фон и множественные фоны.
  6. Спрайты.
  7. Градиенты.
  8. Трехмерный куб на CSS3.
  9. Медиа запросы (media queries).
  10. Многоколоночный текст.
  11. Плавные переходы (transition).
  12. тени (box-shadow).
  13. Трансформация (transform).
  14. Анимации (animation).
  15. Стили для различных типов носителей.
  16. Свойства курсора.
  17. Встраивание фудио и видео файлов.
    Тема №12. Мета информация на странице.
  1. Использование мета информации.
  2. Элемент meta и его атрибуты.
  3. Поясняющая мета информация.
  4. Мета информация для роботов.
  5. Эмуляция заголовков ответа сервера.
    Тема №13. Выбор хостинга и поддержка сайта.
  1. Хостинг.
  2. Поиск хостера.
  3. Услуги хостера.
  4. Использование FTP - клиент.
  5. Доступ к сайту через проводник Windows.
    Тема №14. Этапы следующего развития.
  1. Обзор HTML5 API.
  2. Тонкая настройка сайта на стороне сервера.
  3. Динамические элементы на странице.
  4. Динамическое создание контента на сервере.
  5. Современные способы предоставления информации.
Документ
об образовании:
Сертификат
Продолжительность обучения: Групповое до 40, индивидуальное до 60 часов
График занятий: Занятия в группах проводятся 2-3 раза в неделю по 4 академических часа (в утреннее, дневное и вечернее время).
Индивидуальные занятия – в любое время.

Записывайтесь на курсы и обучение в учебный центр "ПрофАкадемия"!

Наш адрес: Набережные Челны (423815), Новый город, пр. Московский, 153А (1/01А), офис №01
Тел. +7 (8552) 91-33-23, +7 927-404-88-77
Email: 913323@mail.ru