[Специалист] Комплексная программа «Верстальщик Web» - 2 курса

Информация:
Тема в разделе "Курсы по программированию", создана пользователем Collab_Bot, 18 сен 2016.
Этап:
Набор участников
Цена:
254.00 RUB
Участников:
0 из 10
Организатор:
Отсутствует
0%
Расчетный взнос:
34 RUB
  • (Основной список пока пуст)

  1. Collab_Bot

    Collab_Bot Бот рескладчин Бот форума
    • 3063/3811

    Сообщения:
    80.967
    Репутация:
    0
    Отдано:
    1 ГБ
    Скачано:
    0 байт
    Рейтинг:
    -


    HTML и CSS — основные языки разметки и стилей, с помощью которых разрабатываются веб-страницы. На курсе Вы изучите основы языка разметки HTML, способы применения CSS, основы построения сайтов для сети Интернет. Вы получите необходимые навыки для построения сайтов с помощью статических страниц в сети Интернет. Успешное обучение на этом курсе даст Вам прочную базу для дальнейшего изучения Веб-технологий.

    Курс HTML рекомендуется всем, кто планирует в дальнейшем изучать другие курсы по теме «Интернет и Web-технологии». Вы получите необходимые навыки для построения сайтов и статических страниц в сети Internet. Успешное обучение на этом курсе даст Вам прочную базу для дальнейшего изучения web-технологий, может стать первым шагом на пути к овладению профессиями Web-дизайнер, Web-мастер.

    По окончании курса Вы будете уметь:
    • создавать web-страницы, содержащие все необходимые компоненты: текстовое наполнение, гиперссылки, графическое наполнение;
    • самостоятельно создавать полноценный сайт путем определения иерархии взаимодействия web-страниц между собой;
    • грамотно разрабатывать интерактивные формы для взаимодействия пользователя с web-сервером;
    • эффективно использовать возможности каскадных таблиц стилей CSS для повышения функциональности и улучшения оформления web-сайта;
    • использовать технологию фреймов;
    • узнаете о новых возможностях HTML 5 и CSS 3;

    Продолжительность курса - 32 ак. ч.

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

    Модуль 1. Введение и основные понятия
    • Что такое web-сервер, web-сайт, web-страница
    • Основные сведения о языках разметки:
    • Эволюция языков разметки.
    • Цели и задачи языка HTML.
    • HTML-разметка: Элементы
    • Тэги
    • Структура HTML-документа. Основные элементы разметки.
    • Раздел head и заголовок документа
    • Использование комментариев
    • Атрибуты элементов
    • Специальные символы
    • Лабораторная работа: создание HTML-документа

    Модуль 2. Анатомия страницы
    • Регистр букв, закрытие тегов, использование кавычек в атрибутах
    • Типы HTML-документов
    • Валидация HTML-документа, валидатор W3C.
    • Лабораторная работа: валидация разметки
    • Структурные элементы разметки
    • Текстовые элементы разметки
    • Лабораторная работа: добавление типа документа

    Модуль 3. Гиперссылки
    • Понятие гиперссылок в WWW
    • Внешние и внутренние гиперссылки
    • Типы адресов в WWW
    • Дополнительные атрибуты гиперссылок
    • Лабораторная работа: создание навигационного меню

    Модуль 4. Изображения
    • Типы изображений используемые в WWW
    • Вставка изображений на страницу
    • Атрибуты элемента img
    • Новые элементы для изображений в HTML5
    • Лабораторная работа: использование изображений на странице

    Модуль 5. CSS. Каскадные таблицы стилей: основные свойства
    • Основные понятия CSS
    • Способы определения стилей
    • Каскадирование
    • Наследование
    • Единицы измерения в CSS
    • Селекторы
    • Псевдоклассы и псевдоэлементы
    • Лабораторная работа: базовое оформление страницы с помощью стилей
    • Свойства шрифтов
    • Свойства текста
    • Свойства цвета и фона
    • Лабораторная работа: окончательное оформление страницы с помощью стилей

    Модуль 6. Списки
    • Структурирование информации на WEB-странице при помощи списков.
    • Маркированный список
    • Нумерованный список
    • Список определений
    • Смешанные списки
    • CSS свойства для списков
    • Лабораторная работа: оформление навигационного меню в виде списка

    Модуль 7. Таблицы
    • Основные элементы таблицы
    • Структура таблицы на странице
    • Объединение ячеек. Типичные ошибки при работе с таблицами
    • CSS свойства элементов таблиц
    • Дополнительные элементы таблицы
    • Лабораторная работа: оформление табличных данных

    Модуль 8. Фреймы
    • История фреймов
    • Вложенные фреймы (iframe)
    • Фреймы и гиперссылки
    • Лабораторная работа: добавление на страницу плавающего фрейма

    Модуль 9. Формы
    • Что такое веб-формы?
    • Элемент form
    • Текстовые поля и кнопки
    • Элементы выбора
    • Списки
    • Атрибуты элементов формы
    • Лабораторная работа: создание веб-формы обратной связи
    • Элементы и их атрибуты в HTML 5

    Модуль 10. Использование CSS для макетирования
    • Оформление границ элемента
    • Внутренние отступы элемента
    • Наружные отступы элемента
    • Размеры элемента
    • Позиционирование элемента
    • Видимость элемента
    • Лабораторная работа: позиционирование элементов

    Модуль 11. Дополнительные возможности HTML и CSS
    • Импорт CSS
    • Стили для различных типов носителей
    • Свойства CSS для печати страниц
    • Лабораторная работа: подготовка страницы к печати
    • Свойства курсора
    • Использование внешних объектов
    • Встраивание аудио- и видео-файлов с помощью элементов HTML5
    • Обзор возможностей HTML 5 (Canvas, WebStorage, Drag-&-Drop)

    Модуль 12. Мета-информация на странице
    • Использование мета-информации
    • Элемент meta и его атрибуты
    • Поясняющая мета-информация
    • Мета-информация для роботов
    • Эмуляция заголовков ответа сервера

    Модуль 13. Выбор хостинга и поддержка сайта
    • Хостинг
    • Поиск хостера
    • Услуги хостера
    • Использование FTP-клиента
    • Доступ к сайту через проводник Windows

    Модуль 14. Что дальше?
    • Тонкая настройка сайта на стороне сервера
    • Динамические элементы на странице
    • Динамическое создание контента на сервере
    • Современные способы предоставления информации
    Рассматриваются продвинутые технологии вёрстки веб-страниц и специальные эффекты, в том числе с использованием абсолютного и относительного позиционирования, переполнения и обрезки блоков, внедрённых объектов, изображений в CSS. Также рассматриваются вопросы профессиональной разработки кода: настройка инструментов разработки, организация технического процесса, разработка технических требований, проектирование макетов, тестирование и контроль качества веб-страниц.

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

    По окончании курса Вы будете уметь:
    • Cамостоятельно выбирать программные средства разработки в соответствии со своими задачами
    • Грамотно проектировать веб-страницы и эффективно организовывать разработку кода
    • Разрабатывать код HTML и CSS в соответствии со стандартами Консорциума W3C
    • Создавать веб-страницы в соответствии с основными принципами практичности (usability) и доступности (accessibility) для пользователей
    • Разрабатывать веб-страницы, совместимые с распространёнными браузерами: Internet Explorer 6 и выше, Firefox, Opera 7 и выше
    • Верстать веб-страницы с применением современных технологий HTML и CSS: бестабличная и комбинированная вёрстка, абсолютное и относительное позиционирование, переполнение и обрезка блоков, внедрение внешних объектов, изображения в CSS
    • Оптимизировать веб-страницы для печати и для просмотра на наладонных устройствах
    • Тестировать веб-страницы, выполнять контроль качества

    Продолжительность курса - 32 ак. ч.

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

    Модуль 1. Веб-стандарты и их поддержка в программных продуктах
    • Консорциум W3C и его роль в развитии веб-технологий. Деятельность Консорциума W3C по стандартизации языков HTML (XHTML) и CSS.
    • Как пользоваться документацией Консорциума W3C. Спецификации HTML 4.01, XHTML 1.0, CSS 2.1.
    • Какие источники информации про HTML (XHTML) и CSS заслуживают доверия. Справочная информация о поддержке стандартов на официальных сайтах популярных браузеров.
    • Определение типа документа (DTD). Пролог документа HTML (XHTML) и объявление типа документа (DOCTYPE). Объявление XML (XML declaration).
    • Переключение DOCTYPE в браузере Internet Explorer. Режим стандартов (standards-compliant mode) и режим совместимости (compatibility mode). Примеры полезных эффектов, доступных только в режиме стандартов: оформление элемента html, горизонтальное центрирование таблиц, внутренние отступы (padding) для изображений и др.
    • Переключение DOCTYPE в браузере Firefox и родственных браузерах. Режим полной поддержки стандартов (full standards mode), частичной поддержки стандартов (almost standards mode), режим уловок (quirks mode). Переключение DOCTYPE в браузере Opera.
    • Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах.

    Модуль 2. Эффективное использование инструментов разработки веб-страниц
    • Инструментарий разработчика: настройки операционной системы, файловый менеджер, клиент FTP, текстовый редактор, графический редактор, среды разработки сайтов, вспомогательные программы. Как установить и настроить программные средства, чтобы они эффективно взаимодействовали друг с другом.
    • Эффективная работа с текстовым редактором. Грамотное использование клавиатуры при работе с кодом HTML и CSS. Свойства текстового редактора: нумерация строк, работа с различными кодировками, синтаксическая подсветка, выделение специальных символов, сочетания клавиш, шаблоны, макросы, автоматизация действий и др.
    • Настройка клиента FTP для удобной синхронизации файлов на локальном компьютере и на веб сервере. Технология SSH, синхронизация с помощью rsync.
    • Стиль кодирования. Комментарии. Полезные приёмы разработки и комментирования кода, принципы присвоения имён файлам и компонентам кода. Организация рабочего пространства для продуктивной работы.
    • Панель инструментов IE Developer Toolbar. Использование IE Developer Toolbar для анализа веб страниц и управления некоторыми свойствами браузера. Панель инструментов Web Developer для Firefox и родственных браузеров.
    • Составление и анализ технических требований к вёрстке веб-страниц. Проектирование макетов. Тестирование веб-страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта. Контроль качества веб страниц, технические критерии качества

    Модуль 3. Эргономика, практичность и удобство использования сайта (usability) и доступность (accessibility) сайтов
    • Практичность (usability) сайтов. Цели и задачи пользователей. Общие принципы разработки интерфейсов в применении к сайтам. Псхологические аспекты взаимодействия пользователя с сайтом. Тестирование практичности.
    • Доступность (accessibility) сайтов. Обзор различных технических устройств для просмотра сайтов. Технические аспекты взаимодействия пользователя с сайтом. Ограниченные возможности пользователей.

    Модуль 4. Совместимость веб-страниц с различными браузерами
    • Какие браузеры распространены сейчас и будут распространены в ближайшем будущем. Как загрузить, установить и настроить эти браузеры, чтобы тестировать в них веб-страницы.
    • Основные особенности популярных браузеров. Важные различия между IE 6 и IE 7. Характерные свойства Firefox (и родственных браузеров) и Opera.
    • Неполная поддержка стандартов Консорциума W3C в современных браузерах. Характерные примеры кода, который поддерживается в одних браузерах и не поддерживается в других: фуригана (ruby annotation), значения свойства display в CSS, псевдоклассы :before и :after, автоматическая нумерация и др.
    • Характерные примеры кода, который по-разному обрабатывается в разных браузерах: атрибуты alt и title, оформление перечней, оформление форм, псевдокласс :hover и др.
    • Распространённые ошибки в браузерах. "Классические" ошибки в IE 6: "гильотина", "pekaboo" и др. Ошибки в Firefox и родственных браузерах: неполная поддержка элементов col и colgroup, оформление элемента caption, неправильное подчёркивание ссылок и др. Ошибки в Opera: неполная поддержка Unicode, неправильное подчёркивание ссылок и др.
    • Способы сокрытия кода от отдельных браузеров ("фильтры"). "Трюки" со сложными селекторами для IE (с учётом особенностей IE 7). Условные комментарии (conditional comments). Примеры разработки "кросс-браузерного" кода с использованием неполной поддержки стандартов, ошибок и "фильтров"

    Модуль 5. Продвинутые технологии HTML (XHTML) и CSS
    • Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление "подвала" внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование и в каких браузерах оно поддерживается.
    • Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание "фреймообразной" вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y.
    • Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание "фреймообразной" вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат.
    • Улучшение доступности форм. Элемент label. Атрибуты tabindex и accesskey. Особенности оформления форм средствами CSS.
    • Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах.
    • Особенности печати в различных браузерах. Разработка таблиц стилей для печати (print) и портативных устройств (handheld). Альтернативные таблицы стилей.
    • Использование элемента link для браузерной навигации. Поддержка браузерной навигации в различных браузерах

    Модуль 6. Специальные эффекты в HTML (XHTML) и CSS
    • Расширенные средства работы с текстом. Использование специальных знаков: ударения, переносы, неразрывные пробелы и дефисы. Свойство white-space.
    • Оформление текста в CSS. Промежуточная насыщенность (значение 600 для свойства font weight). Свойство text-transform. Свойства line-height и vertical-align. Оформление буквиц.
    • Особенности блочной модели в CSS. Использование отрицательных значений margin. Свойства min-width, min-height, max-width, max-height: их практическое применение и поддержка в браузерах.
    • "Фоновые" изображения в CSS. Характерные эффекты изображений в CSS: узоры и орнаменты, "масштабируемые" растровые изображения, красивые рамки, "подсветка" гиперссылок (rollover) и др. Сочетание изображений в CSS с элементом img, рамками и цветом фона CSS.
    • Особенности формата PNG. Эффектные примеры использования полупрозрачности (альфа-канала) в PNG (для IE 7, Firefox, Opera). Как обеспечить альтернативное изображение для IE 6.
    • Перспективы дальнейшего развития HTML (XHTML) и CSS. Стандарт CSS 3, примеры его частичной поддержки в существующих браузерах. Общее представление о XHTML 2.0. Дальнейшее существование HTML (XHTML) и CSS в контексте общего развития Интернета и веб-технологий
    Модуль 7. Совместимость веб-страниц с различными браузерами
    • Условные комментарии.
    • Скрипты для поддержки селекторов и изменения поведения старых браузеров.
    • Программы эмуляторы старых версий IE.
    • Фильтры.
    Практическая работа: использование кроссбраузерной верстки

    Модуль 8. Использование свойств CSS2 и CSS3
    • Градиенты, анимация, трансформация (2D и 3D), переходы
    • Медиа-запросы (построение мобильных версий сайтов, адаптивная верстка)
    • @font-face (веб-шрифты), текстовые эффекты,
    • Многоколоночная верстка,
    • Работа с фоном (+градиенты)
    • Закругление углов, модель Flex-блоков.
    • Определение технологий, поддерживаемых браузером.
    Практическая работа: построение выпадающего меню средствами HTML5 и CSS3

    Модуль 9. Верстка макета
    • Принципы нарезки макета из psd-файла.
    • Выбор размеров и вариантов верстки.
    • Верстка.
    Практическая работа: нарезка макета страницы

    Практическая работа: верстка страницы по заданному макету.

    Модуль 10. Типовые решения
    • CSS-фреймворки.
    • Динамический CSS (на примере LESS).
    • Шаблоны CMS
    • Решения на JavaScript.


    Это рескладчина на
    Ознакомьтесь с правилами проведения и участия в рескладчинах!
     
    Загрузка...