Комплексный курс "Разработка и дизайн сайтов"

Блок Web-дизайн.

Тема №1. Введение и основные понятия. Анатомия страницы.

• Вступление.
• Кто такой веб-дизайнер. Что необходимо знать для успешной работы в этой профессии.
• Классификация веб-сайтов. Статические и динамические сайты.
• Способы создания веб-сайтов: верстка на языке HTML5, использование редактора, CMS, популярные сайты-конструкторы.
• Программы для работы с кодом HTML5. Виды и применение.
• Работа в визуальных редакторах типа WYSIWYG.
• Что такое WorldWideWeb. Виды языков гипертекстовой разметки. Знакомство с языком HTML. Версии и стандарты языка HTML. Последняя версия HTML 5 и её преимущества.
• Обзор программ (браузеров) для просмотра веб-сайтов. Их сходства и отличия. Война браузеров.
• Корневая папка сайта. Почему важно хранить все файлы сайта в одной папке. Что такое главная страница и её роль в построении сайта.
• Команды HTML5. Виды тегов.
• Создание страницы сайта. Структура страницы HTML5. Теги, обязательные для создания сайта. Объявление типа документа.
• Служебная и основная части страницы HTML5. Объявление темы (заголовка) страницы.
• Теги блочной верстки. Работа с текстом. Создание заголовков текста и их назначение. Создание абзацев. Перенос текста.
• Теги форматирования. Размер и имя шрифта.
• Что такое CSS. Стили CSS для форматирования текста. Внедрение стилей CSS в теги HTML5.
• Управление цветом в HTML5. Заливка.
• Создание горизонтальной линии.
• Практическая работа.
• Рекомендуемая литература по теме.

Тема №2. Списки. Изображения. Гиперссылки.

• Создание списков. Нумерованный и маркированный списки.
• Работа с изображениями. Виды и типы изображений, используемые в WWW. Программы для создания и подготовки изображений.
• Оптимизация размера изображений.
• Позиционирование изображений на странице сайта.
• Теги HTML5 для вставки изображений.
• Создание рамок и полей для изображений, страниц и блоков текста.
• Параметры и свойства для форматирования изображений.
• Гиперссылки и их виды.
• Теги HTML5 для создания гиперссылки.
• Особенности написания url – адреса в тегах. Картинки – гиперссылки. Гиперссылки для отправки электронной почты.
• Способы открытия гиперссылок в окнах.
• Свойства и параметры гиперссылок.
• Абсолютная и относительная адресация.
• Создание оглавления для перехода к различным частям одной страницы. Создание быстрой прокрутки в верхнюю часть страницы.
• Установка плавающих фреймов на странице.
• Практическая работа.
• Рекомендуемая литература по теме.

Тема №3. Таблицы. Формы.

• Создание таблиц, их роль в управлении тегами и текстом.
• Строки и столбцы таблиц.
• Параметры и свойства тегов для управления таблицей, столбцами и строками.
• Абсолютные и относительные размеры таблиц.
• Таблица внутри таблицы. Добавление в таблицы текста и изображений.
• Объединение ячеек таблицы.
• Способы группировки столбцов и строк. Стили CSS3, применяемые к группам столбцов и строк.
• Управление границами таблицы.
• Формы для введения пользователями информации на сайте. Их создание.
• Теги и параметры для создания форм.
• Взаимодействие форм с таблицами.
• Виды форм: многострочные и однострочные поля, списки, кнопки, переключатели и др.
• Надписи.
• Новые формы в HTML 5. Особенности их отображения в различных браузерах.
• Проверка полей, обязательных для заполнения.
• Активные и неактивные поля.
• Взаимодействие работы веб-дизайнера и веб-программиста для создания HTML-форм.
• Практическая работа.
• Рекомендуемая литература по теме.

Тема №4. Каскадные таблицы стилей: основные свойства

• Основные понятия CSS3.
• Способы определения стилей.
• Каскадирование и наследование.
• Единицы измерения в CSS3.
• Основные типы селекторов.
• Свойства шрифтов.
• Свойства текста.
• Свойства цвета и фона.
• Оформление границ элемента
• Внутренние отступы элемента
• Наружные отступы элемента
• Практическая работа.
• Рекомендуемая литература по теме.

Тема №5. Использование CSS3 для макетирования, создания плавающих окно, раскрывающихся списков, меню.

• Оформление фрагментов текста с помощью CSS3.
• Абсолютное и относительное позиционирование элементов на странице.
• Размеры элемента. Абсолютные и относительные размеры.
• Сочетание позиционирования и трёхмерности в CSS3.
• Псевдоклассы и псевдоэлементы в CSS3.
• Параметры наведения для гиперссылок.
• Создание декоративных эффектов в HTML5 (прозрачность, градиенты, скругленные уголки, тени, проч. возможности).
• Плавающие элементы. Обтекание элементов.
• Практическая работа.
• Рекомендуемая литература по теме.

Тема №6. Верстка сайта с помощью HTML5.

• Создание макета сайта. Виды макетов.
• Фиксированные и резиновые макеты.
• Юзабилити.
• Семантические теги HTML 5, упрощающие верстку макетов.
• Верстка трёх-колоночного макета сайта.
• Создание верхней части страницы: логотип, панель навигации.
• Создание правого и левого блоков сайта. Размещение ленты новостей в правом блоке. Размещение навигации и рекламных ссылок в левом блоке.
• Формирование центральной части сайта, добавление контента.
• Создание нижней части сайта. Добавление информации об авторских правах на сайт.
• Где взять готовые шаблоны сайтов.
• Как создать красивое раскрывающееся меню со ссылками онлайн.
• Практическая работа.
• Рекомендуемая литература по теме.

Тема №7. Анимация в CSS3.

• Знакомство с анимацией в CSS3. Возможности CSS3 в создании анимации.
• Ключевые кадры.
• Особенности построения ключевых кадров.
• Имя анимации.
• Количество повторов и зацикливание анимации.
• Время проигрывания анимации.
• Задержка в проигрывании анимации.
• Способы проигрывания анимации (с конца, линейное, с замедлением, с ускорением).
• Вращение в анимации.
• Различные эффекты и способы анимации.
• Практическая работа.
• Рекомендуемая литература по теме.

Тема №8. Вставка в страницу элементов видеои аудио-записи. Выгрузка сайта в Интернет. Кроссбраузерность

• Теги для вставки на страницу сайта аудиои видеоконтента.
• Понятие и использование кроссбраузерности сайта
• Использование мета-информации.
• Элемент meta и его атрибуты.
• Поясняющая мета-информация.
• Мета-информация для роботов.
• Эмуляция заголовков ответа сервера.
• Понятие доменного имени. Покупка доменного имени.
• Понятие хостинга.
• Поиск хостера.
• Услуги хостера.
• Использование FTP-клиента
• Доступ к ftp-серверу.
• Полезная информация для «раскрутки» сайта.
• Практическая работа.
• Рекомендуемая литература по теме.

Блок Web-программирование.

Тема №9. Введение в веб-программирование.

• Что такое динамическое содержание страницы.
• Установка сервера, предназначенного для разработки.
• Введение в PHP. Преимущество использования PHP.
• Включение PHP в HTML5
• Переменные и операторы. Присваивание значений переменным. Типы переменных.
• Константы. Предопределенные константы.
• Функции.
• Создание функции. Функции, предопределенные в PHP.
• Операторы сравнения. Логические операторы.
• Условия if – else, switch.
• Организация циклов. Циклы for, while, do … while.
• Прекращение работы циклов.
• Практическая работа. Математические и сравнительные операции с переменными. Построение таблицы с помощью цикла. Упражнения с функциями, циклами, условиями.

Тема №10. Массивы, строки, дата и время в PHP

• Массивы в PHP: массивы с числовой индексацией, ассоциативные, многомерные.
• Цикл foreach … as.
• Другие функции для работы с массивами.
• Взаимодействие PHP с формами HTML5.
• Методы передачи данных POSTи GET.
• Глобальные предопределенные переменные для получения данных из форм HTML5.
• Понятие строки.
• Функции работы со строкой.
• Получение длины строки, проверка длины строки, проверка строк на совпадения, проверка наличия или отсутствия определенных символов.
• Проверка пароля.
• Преобразование строки в массив.
• Удаление пробелов из строки.
• Функции работы с датой и времени.
• Практическая работа. Создание формы для регистрации на сайте. Проверка заполненной Пользователем формы регистрации на сайте на наличие ошибок, проверка пустых полей, символов.

Тема №11. Шаблоны и работа с сессиями

• Построение шаблонов сайтов с помощью PHP.
• Внедрение информации из файлов.
• Что такое cookie.
• Установка cookie. Доступ к cookie. Удаление cookie.
• Что такое сессии.
• Передача сессии.
• Начало сессии. Завершение сессии.
• Безопасность сессии.
• Практическая работа. Регистрация пользователя на сайте и управление аккаунтом пользователя с помощью сессий и cookie.

Тема №12. Введение в системы управления базами данных

• Разновидности системы управления базами данных (СУБД). Сравнение и характеристика, области применения.
• Использование СУБД для работы с вебсерверами.
• Создание баз данных и таблиц внутри баз данных.
• Заполнение таблиц баз данных. Добавление строк, столбцов, удаление, перемещение, копирование.
• Удаление таблиц и баз данных.
• Язык SQL, его основы. Основные команды на языке SQL.
• Практическая работа. Создание базы данных для регистрации пользователей на сайте и гостевой книги.

Тема №13. Взаимодействие PHP и СУБД

• Взаимодействие PHP и MYSQL. Доступ к MYSQL с использованием PHP.
• Подключение к MYSQL. Команды PHP MYSQL для соединения с сервером и базой данных.
• Команды PHP MYSQL для создания запроса на языке MYSQL и выполнения запроса.
• Добавление информации в базу данных прямо со странички с кодом HTML5. Поиск по Базе Данных MYSQL.
• Вывод информации из Базы Данных с помощью простых и ассоциативных массивов.
• Практическая работа. Продолжение работы с базами данных. Создание регистрации и авторизации пользователя, добавление сообщений в гостевую книгу, созданных на базе MYSQL.