ЦЕНТР КОМПЬЮТЕРНОГО ОБУЧЕНИЯ

Интернет-технологии все глубже проникают во многие сферы нашей деятельности и становятся важнейшим показателем качества жизни. Мы поможем интернет-пользователю перейти от использования контента к его созданию: разработать свою страницу, сайт, портал, освоить востребованную профессию HTML-верстальщика. Закончив наш курс, вы сможете профессионально создавать сайты на основе CSS-разметки, добавлять в них элементы интерактивности и мультимедиа, научитесь размещать свой ресурс в сети и выполнять работы по его сопровождению и поддержке.

Значительный опыт работы в данной области позволяет нам предлагать детям лучшие отработанные программы обучения. Мы ставим целью дать слушателям серьезные и разносторонние профессиональные навыки, не забывая при этом об увлекательности занятий. В течение курса ребята выполняют десятки практических уроков-упражнений, каждый из которых является завершенным проектом и представляет определенный этап создания веб-сайта от выбора дизайна до публикации в сети и сопровождения. При необходимости мы помогаем слушателям реализовать свои собственные веб-проекты, оказываем поддержку в решении технических вопросов, размещении на удаленном сервере и т. п. Закончив наш курс, слушатель сможет создать профессионально разработанный веб-ресурс, поделиться своей информацией с миллионами пользователей сети Интернет.

Преподаватели Центра по данным курсам имеют богатый практический и педагогический опыт, многие годы работают со школьниками разных возрастов. В группах создана атмосфера доброжелательности, уюта и непринужденности. Ребята приходят на занятия с энтузиазмом и воодушевлением, как на интересное развлекательное мероприятие, несмотря на то, что мы в основном занимаемся по выходным дням. Мы стремимся всячески стимулировать творческую активность детей, проводим ежегодные конкурсы лучших работ среди слушателей курсов, награждаем победителей ценными призами и скидками на обучение.

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

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

HTML5 и CSS3 для создания сайтов /36 часов/

Тема 1. Структура документа /1 час/

Введение. Как люди получают доступ к Всемирной Паутине. Как создаются сайты. Примеры структуризации страниц. Структурирование документов Microsoft Word. Использование языка HTML для описания структуры веб-страниц. HTML-элементы. Теги. Атрибуты. Элементы Body, Head, Title. Создание веб-страниц в операционных системах Windows и OS X. Код в системе управления контентом. Как создаются другие сайты.

Тема 2. Текст и списки /2 часа/

Заголовки. Абзацы. Полужирное и курсивное начертание. Подстрочные и надстрочные знаки. Пробелы. Перевод строк и горизонтальные линии. Визуальные редакторы и режим просмотра кода. Семантическая разметка. Важная информация и логическое ударение. Цитаты. Аббревиатуры и акронимы. Источники и определения. Информация о веб-дизайнере. Исправление контента. Упорядоченные списки. Неупорядоченные списки. Списки определений. Вложенные списки. 

Тема 3. Ссылки /1 час/

Структура ссылки. Ссылки на другие сайты. Ссылки на другие страницы вашего сайта. Структура директорий. Относительные URL-адреса. Ссылки на электронную почту. Открытие ссылок в новом окне. Ссылки на определенную часть страницы. Ссылка на определенную часть другой страницы.

Тема 4. Изображения /2 часа/

Выбор изображений для сайта. Размещение изображений на сайте. Добавление изображений. Высота и ширина изображений. Размещение изображений в коде. Устаревший прием: выравнивание изображений по горизонтали. Устаревший прием: выравнивание изображений по вертикали. Три правила создания изображений. Инструменты для редактирования и сохранения изображений. Формат изображений JPEG. Формат изображений GIF. Размеры изображения. Кадрирование изображений. Разрешение изображения. Векторная графика. Анимированный GIF. Прозрачность. Использование изображений во Всемирной Паутине. HTML5: иллюстрации и подписи.

Тема 5. Создание таблиц /1 час/

Что такое таблица? Базовая структура таблицы. Заголовки таблиц. Объединение столбцов. Объединение строк. Длинные таблицы. Старый код: ширина и промежуток. Старый код: границы и заливка.

Тема 6. Веб-формы /2 часа/

Элементы формы. Структура формы. Ввод текста. Ввод пароля. Текстовая область. Переключатели. Флажки. Раскрывающийся список. Список множественного выбора. Загрузка файлов на сервер. Кнопка подтверждения. Графическая кнопка. Кнопки и скрытые элементы форм. Метки элементов форм. Группировка элементов формы. HTML5: валидация данных формы. HTML5: ввод даты. HTML5: ввод URL-адреса и адреса электронной почты. HTML5: поле ввода поискового запроса.

Тема 7. Дополнительная разметка /1 час/

Эволюция языка HTML. Типы документов. Комментарии в HTML. Атрибут ID. Атрибут Class. Блочные элементы. Встроенные элементы. Группировка текста и элементов в блок. Группировка текста и элементов в строку. Плавающие фреймы. Сведения о странице. Специальные символы. 

Тема 8. Flash, видео- и аудиоконтент /2 часа/

Как работает технология Flash. Использование технологии Flash. Экскурс в историю: Flash, видео и аудиоконтент. Добавление Flash-контента на веб-страницу. Обзор видеоформатов и проигрывателей. Сайты видеохостинга. Подготовка Flash-контента для размещения на сайте. Добавление Flash-контента на страницу. HTML5: подготовка видеоконтента для добавления на страницу. HTML5: добавление видеоконтента для добавления на страницу. HTML5: несколько источников видеоконтента. HTML5: совместное использование технологий Flash и HTML5 для размещения видеоконтента. Добавление аудиоконтента на страницу. Добавление Flash-аудиопроигрывателя. HTML5: добавление аудиоконтента на страницу. HTML5: несколько источников аудиоконтента.

Тема 9. HTML для CSS /1 час/

HTML: прошлое и настоящее. Написание HTML-кода для CSS. Два HTML-тега, о которых не следует забывать. Осмысление тегов div  и span. Дополнительные теги в HTML5. Составление своего представления о макете страницы. О каких элементах HTML следует забыть. Важность doctype. Обеспечение использования самой последней версии Internet Explorer.

Тема 10. Создание стилей и таблиц стилей /2 часа/

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

Тема 11. Селекторы: определение элементов стилизации /2 часа/

Селекторы типов: дизайн страницы. Селекторы классов: точное управление. ID-селекторы: определение элементов веб-страниц. Стилизация групп тегов. Создание групповых селекторов. Универсальный селектор. Стилизация вложенных тегов. Дерево HTML. Создание селекторов потомков. Создание модулей. Псевдоклассы и псевдоэлементы. Стилизация ссылок. Стилизация фрагментов абзацев. Дополнительные псевдоклассы и псевдоэлементы. Селекторы атрибутов. Селекторы дочерних элементов. Селекторы типов дочерних элементов. Селекторы смежных элементов одного уровня. Селектор :not(). Обучающий урок: примеры использования селекторов. Создание групповых селекторов. Создание селекторов классов. Создание селекторов потомков. Создание ID-селекторов.

Тема 12. Механизм наследования стилей /1 час/

Что такое наследование? Упрощение таблиц стилей через наследование. Ограничения наследования. Обучающий урок: наследование. Одноуровневое наследование. Наследование для стилизации веб-страницы. Исключения механизма наследования.

Тема 13. Управление сложной структурой стилей: каскадность /1 час/

Каскадность стилей. Объединение унаследованных стилей. Превосходство близкого родительского элемента-предка. Преимущества непосредственно определенного стиля. Множество стилей для одного тега. Особенности механизма каскадности: какие стили имеют преимущество. Управление каскадностью. Изменение значимости. Выборочная отмена значимости. Как избежать войн значимости. Концепция обнуления стандартных стилей браузера. Обучающий урок: механизм каскадности в действии. Сброс стандартных стилей и создание стилей с чистого листа. Создание комбинированных стилей. Преодоление конфликтов. 

Тема 14. Форматирование текста /2 часа/ 

Использование шрифтов. Выбор обычного шрифта. Использование веб-шрифтов. Типы файлов шрифтов. Правовые вопросы использования веб-шрифтов. Поиск веб-шрифтов. Создание нескольких форматов шрифтов. Использование директивы @font-face. Создание стилей с использованием веб-шрифтов. Работа с полужирными и курсивными вариантами. Простой способ добавления полужирного и курсивного вариантов. Добавление полужирного и курсивного вариантов и поддержка Internet Explorer 8. Google web fonts. Поиск и выбор шрифтов. Использование шрифтов Google. Придание тексту цветового оформления. Шестнадцатеричное представление цвета. RGB. RGBA. HSL и HSLA. Установка размера шрифта. Пикселы. Ключевые слова, проценты и единица измерения em. Форматирование символов и слов. Курсив и полужирный шрифт. Прописные буквы. Украшение текста. Межсимвольный и межсловный интервал. Добавление текстовых теней. Форматирование абзацев текста. Установка междустрочного интервала. Выравнивание текста. Отступ первой строки абзаца и удаление полей абзацев. Форматирование первой буквы, первой строки абзаца. Стилизация списков. Типы списков. Позиционирование маркеров и нумерации списков. Графические маркеры. Обучающий урок: форматирование текста в действии.

Тема 15. Поля, отступы, границы /2 часа/

Понятие блочной модели. Управление размерами полей и отступов. Сокращенный набор свойств margin и padding. Конфликты полей. Удаление пустых полей с помощью отрицательных значений. Отображение встроенных и блочных элементов. Добавление границ. Сокращенный набор свойства border. Форматирование отдельных границ.Установка цвета фона. Создание скругленных углов. Добавление теней. Определение параметров высоты и ширины. Вычисление фактических размеров блочных элементов. Переопределение ширины блока с помощью box-sizing. Задание максимальных и минимальных значений высоты и ширины. Управление поведением блочных элементов с помощью свойства overflow. Управление обтеканием содержимого плавающих элементов. Фон, границы и плавающие элементы. Отмена правил обтекания. Обучающий урок: поля, фоновые параметры, границы.

Тема 16. Добавление графики на веб-страницы /2 часа/

CSS и тег . Фоновые изображения. Управление повтором фоновых изображений. Позиционирование фоновых изображений. Ключевые слова. Точные значения. Процентные значения. Фиксация изображения на месте. Определение начальной позиции фонового изображения и порядка его отсечения. Масштабирование фоновых изображений. Сокращенный вариант свойства background. Использование нескольких фоновых изображений. Использование градиентных фонов. Линейные градиенты. Цветовые опорные точки. Префиксы производителей и поддержка Internet Explorer. Повторяющиеся линенйные градиенты. Радиальные градиенты. Повторяющиеся радиальные градиенты. Применение градиентов, создаваемых с помощью Colorzilla. Обучающий урок 1: совершенствуем изображения. Обучающий урок 2: создание фотогалереи. Обучающий урок 3: использование фоновых изображений.

Тема 17. Работа с навигацией сайта /2 часа/

Выборка стилизуемых ссылок. Понимание состояний ссылок. Выборка отдельных ссылок. Группирование ссылок с помощью селекторов потомков. Стилизация ссылок. Подчеркивание ссылок. Создание кнопок. Использование изображений. Создание панелей навигации. Использование маркированных списков. Вертикальные панели навигации. Горизонтальные панели навигации. CSS-стиль для предварительной загрузки ролловеров. Стилизация отдельных видов ссылок. Ссылки на другие сайты. Ссылки на адреса электронной почты. Ссылки на определенные типы файлов. Обучающий урок 1: стилизация ссылок. Обучающий урок 2: создание панели навигации.

Тема 18. Осуществление преобразований, переходов и анимации с помощью CSS /2 часа/

Преобразования. Вращение. Масштабирование. Перемещение.  Наклон. Множественные преобразования. Исходная точка. Переходы. Добавление перехода. Распределение скорости выполнения перехода по времени. Задержка начала перехода. Краткая запись свойства transition. Анимация. Определение ключевых кадров. Применение анимации. Распределение скорости выполнения анимации по времени. Завершение анимации. Краткая запись свойства animation. Приостановка анимации. Анимация при проходе указателя мыши над элементом. Обучающий урок.

Тема 19. Форматирование таблиц и форм /2 часа/

Правильное использование таблиц. Создание стилей для таблиц. Добавление отступов. Настройка горизонтального и вертикального выравнивания. Создание границ. Применение стилей к строкам и столбцам. Создание стилей для форм. Элементы HTML-форм. Компоновка форм с помощью CSS. Обучающий урок 1: создание стилей для таблиц. Обучающий урок 2: создание стилей для форм.

Тема 20. Макет страницы /4 часа/

Типы разметок веб-страницы. Как работает CSS-разметка. Элементы секционирования в HTML5. Технология разметки CSS. Стратегии разметок.
Основы плавающих разметок. Использование плавающих элементов в разметках. Перемещение всех столбцов. Плавающие элементы внутри плавающих элементов. Решение проблем плавающих элементов. Отмена и установка перемещения для элементов. Создание столбцов на всю высоту. Предотвращение выпадений плавающих элементов. Предотвращение выпадений плавающих элементов с помощью свойства box-sizing. Обучающий урок: многоколоночная разметка. Структурирование HTML. Создание стилей разметки. Добавление еще одного столбца. Добавление разрядки. Фиксация ширины. Смешаный свободный и фиксированный дизайн. 
Макетные сетки. Пример сетки. Возможные макеты: сетка шириной в 960 пикселов, состоящая из 12 колонок. CSS-фреймворки. Использование сетки 960.GS.Макет на основе сетки 960.GS.

Тема 21. Процесс разработки. Практическая информация /2 часа/

Для кого предназначен сайт. Почему люди посещают ваш сайт. Чего хотят добиться ваши посетители. Какая информация требуется вашим посетителям. Как часто люди будут посещать ваш сайт. Карта сайта Структурные схемы. Передача сообщения посредством дизайна. Визуальная иерархия. Группировка и подобие. Разработка навигации.
Понятие поисковой оптимизации (SEO). Поискова оптимизация on-page. Как выбрать ключевые слова и фразы. Аналитика: изучение аудитории сайта. Сколько людей посещает ваш сайт? Что именно просматривают посетители вашего сайта? Откуда приходят ваши посетители? Доменное имя и хостинг. FTP и инструменты сторонних разработчиков.

Разработка веб-сайтов в программе Adobe Dreamweaver CС /20 часов/

Тема 22. Настройка рабочего пространства приложения Adobe Dreamweaver CС /1 час/

Подготовка учебных файлов. Экскурсия по рабочему пространству.

Переключение и разделение представлений. Представление Design. Представление Code. Представление Split. Представление Live. Представление Live Code.

Работа с панелями. Минимизация. Создание плавающей панели. Перемещение. Создание группы и дока панелей. Выбор схемы рабочего пространства. Открытие панелей инструментов. Персонализация установок. Создание пользовательских сочетаний клавиш. 

Использование инспектора Properties (Свойства). Использование вкладки HTML. Использование вкладки CSS. Свойства изображения. Свойства таблицы.

Использование метода CSS Designer.

Тема 23. Создание макета страницы в Adobe Dreamweaver (3 часа)

Основы теории и стратегии дизайна веб-страниц. Какова цель веб-сайта? Кто является посетителями сайта? Как посетители попадают на сайт? Понятие адаптивного веб-дизайна. Сценарий.

Создание блок-схем и эскизов. Создание блок-схемы. Создание дизайна страницы. Создание эскизов. 

Определение сайта Dreamweaver. Использование Welcome Screen. Предварительный просмотр итогового файла. 

Изменение существующего CSS-макета. Добавление фонового изображения в верхний колонтитул. Добавление новых элементов. Добавление элементов навигации. Изменение выравнивания элементов. Изменение ширины и цвета фона страницы. Изменение существующего контента и форматирование. Вставка заполнителя изображения. Вставка заполнителя текста. Изменение нижнего колонтитула. Проверка совместимости с браузерами.

Тема 24. Работа с каскадными таблицами стилей (4 часа)

Предварительный просмотр итогового файла.

Работа с CSS Designer. Работа со шрифтами. Выбор группы шрифтов. Использование веб-шрифтов Edge. Создание шрифтовых наборов с использованием веб-шрифтов. Изменение размера шрифта.

Использование изображений для создания графических эффектов.

Работа с классами, идентификаторами и порожденными селекторами. Создание пользовательских классов. Создание пользовательских ID.

Создание интерактивного меню. Преодоление конфликтов CSS. Создание порожденных селекторов. Создание динамических эффектов гиперссылок с помощью CSS. Изменение поведения гиперссылки. Изменение поведения существующей гиперссылки. Добавление привлекательности меню.

Создание искусственных колонок. Окончательная настройка. Экспортирование правил во внешнюю таблицу стилей. Создание таблиц стилей для других типов носителей. Конвертирование для печати существующей таблицы стилей. Сокрытие нежелательных областей страницы. Удаление нежелательных стилей.

Тема 25. Работа с шаблонами страницы (3 часа)

Предварительный просмотр итогового файла. Создание шаблона из существующего макета. Вставка редактируемых областей. Создание дочерних страниц. Обновление шаблона.

Использование элементов библиотеки. Создание элементов библиотеки. Обновление элементов библиотеки.Создание, включение и обновление серверных включений.

Тема 26. Работа с текстом, списками и таблицами (3 часа)

Создание и стилизация текста. Импорт текста. Создание семантических структур. Создание заголовков. Создание списков. Создание текста с отступом.

Создание и форматирование таблиц. Создание новой таблицы. Копирование и вставка таблиц. Форматирование таблиц с помощью правил CSS. Форматирование ячеек таблицы. Управление шириной столбца. Вставка таблиц из других источников. Настройка вертикального выравнивания. Добавление и форматирование элементов.

Проверка орфографии на веб-страницах. Поиск и замена текста.

Тема 27. Работа с изображениями (2 часа)

Основные сведения о графике в Интернете. Векторная графика. Растровая графика. Разрешение. Размер. Цвет. Форматы растровых изображений.

Предварительный просмотр итогового файла. Вставка изображений. Настройка положения изображений с помощью классов CSS. Работа с панелью Insert. Использование приложения Bridge для вставки изображений. Вставка несовместимых с Интернет типов данных. Использование смарт-объектов программы Photoshop. Копирование и вставка изображений из приложения Photoshop. Вставка изображений перетаскиванием. Оптимизация изображений с помощью инспектора Properties.

Дополнительное упражнение: завершение страницы с новостями.

Тема 28. Работа с навигацией (3 часа)

Основные сведения о гиперссылках. Внешние и внутренние гиперссылки. Относительные и абсолютные гиперссылки. Предварительный просмотр итогового файла. Создание текстовых ссылок на страницы в пределах сайта. Создание изображения-ссылки. Создание ссылок на страницы другого сайта. Создание ссылок на адрес электронной почты. Создание ссылки на элемент страницы. Создание именованной привязки. Создание ссылки с помощью атрибута ID. Добавление атрибута ID в таблицу HTML. Проверка страницы.

Тема 29. Добавление интерактивности (2 часа)

Рассмотрение функциональных возможностей Web 2.0. Поведения Dreamweaver. Работа с поведениями Dreamweaver. Применение поведения. Применение поведения Swap Image Restore. Удаление примененных поведений. Добавление поведений к гиперссылкам. 

Работа с виджетом jQuery Accordion. Вставка виджета jQuery Accordion. Настройка jQuery Accordion.

Тема 30. Работа с веб-анимацией и видео (1 час)

Знакомство с анимацией и видеороликами во Всемирной паутине. Предварительный просмотр итогового файла. Добавление веб-анимации на страницу. Добавление видео на страницу. Опции видео в HTML5.

Тема 31. Публикация в Интернете (1 час)

Удаленный сайт. Настройка удаленного сайта FTP. Установка удаленного сайта на локальный или сетевой веб-сервер. Сокрытие папок и файлов. Создание домашней страницы. Обновление ссылок. Размещение сайта в режиме реального времени. Синхронизация локальных и удаленных сайтов.

Вернуться в начало раздела

Некоторые примеры работ, выполняемых в ходе изучения курса