Web-дизайн: курс лекций
Web-дизайн (курс лекций)
Данный курс лекций представляет материал по комплексному обучению веб-мастерингу в связке HTML+CSS+JavaScript+PHP+MySQL. Курс включает в себя изучение Adobe Dreamweaver, необходимый минимум по работе с Adobe Photoshop.
Лекции в формате MSWord (.doc) с примерами решения задач
Редактируемый текст, содержащий фрагменты готового кода примеров. Плюс примеры решения задач (код комментирован).
Лекция 1
Общие сведения о HTML • Зачем нужен язык разметки? • Об истории HTML и World Wide Web • Web-документы, Web-сайты, Web-серверы • Браузеры • Адресация документов в Web Принципы создания Web-страниц • Просмотр кода страниц • Редакторы HTML-файлов • Теговая модель • Парные и одиночные теги, контейнеры • Элементы HTML • Атрибуты тегов • Комментарии • Основные правила синтаксиса HTML Знакомство с программой Adobe Dreamweaver • Рабочая среда Adobe Dreamweaver • Настройка рабочей среды и панелей
Лекция 2
• Создание пользовательских клавиатурных комбинаций • Настройка программы для работы с русским текстом и параметров нового документа Общая структура HTML-документа • Информация о версии HTML • HTML-документ (элемент HTML) • Заголовочная часть документа (элемент HEAD) • Название документа (элемент TITLE) • Тело документа (элемент BODY) Создаем первые web-страницы • Создаем web-страницу • Вводим текст на главной странице Формирование абзацев и строк • Разбиение текста на абзацы (элементы Р) • Разрывы строк (BR, NOBR) • Выравнивание абзацев (атрибут align) • Разделы (элементы DIV) • Заголовки (элементы Нх) • Центрирование (элемент CENTER)
Лекция 3
• Сохраняем web-страницу • Открываем документ Горизонтальные линии в документе (элемент HR) Простейшие приемы форматирования текста • Предварительное форматирование текста (элемент PRE) Работа с шрифтами • Элемент FONT и его атрибуты • Относительные размеры шрифтов • Изменение основного шрифта (элемент BASEFONT) • Выбор гарнитуры шрифта (атрибут face) • Управление цветом шрифта и фона страницы • Задание начертания шрифта (элементы В, i, U)Форматируем текстСтили текстовой разметки • Элементы стиля шрифтов • Верхние и нижние индексы (элементы SUP и SUB)
Лекция 4
Списки • Структура маркированных и нумерованных списков • Маркированный список (элемент UL) • Нумерованный список (элемент OL) • Списки определенийСоздаем список Гиперссылки • Ссылки и закладки • Принципы создания ссылок • Создание ссылок на другие Web-узлы • Создание ссылок на объекты текущего Web-узла • Оформление ссылок • Помещаем на страницы ссылки, гиперссылки и почтовые ссылки Применение многоязычного текста Кодирование символов Направление чтения текста Понятие о листах стилей Поддержка листов стилей • Как записывается стиль • Определение встроенного стиля (атрибут style)
Лекция 5
Применяем стили CSS • Панель CSS Styles (Стили CSS) Формирование листа стилей • CSS-правила • Внутренние и внешние листы стилей • Введение заголовочного стиля (элемент STYLE) • Виды селекторов • Создаем таблицу стилей • Применяем и отменяем стили Стилевые свойства • Значения свойств • Свойства шрифтов • Свойства текста • Свойства цвета и фона • Свойства блока • Свойства списков • Другие группы стилевых свойств • Переопределяем теги HTML
Лекция 6
Внешние листы стилей • CSS-файлы • Обращение к внешнему листу стилей (элемент LINK) • Создаем внешнюю таблицу стилей • Подключаем внешнюю таблицу стилей Еще раз о записи CSS-правил • Построчная запись стилевых свойств • Сокращенная форма записи • Комментарии • Группирование селекторов и определений • Редактируем таблицу стилей Псевдоклассы и псевдоэлементы • Стили ссылок • Динамические псевдоклассы ссылок • Стили фрагментов текста Наследование и каскадирование • Правила наследования свойств • Селекторы потомков
Лекция 7
• Каскады стилей • Приоритеты стилей • Принцип каскадности Слои и позиционирование элементов • Свойство position • Абсолютное и относительное позиционирование (значения absolute и relative) • Размещение текстовых блоков в документе Визуальные эффекты • Вырезание области (свойство clip) • Обработка содержания за пределами видимой области элемента (свойство overflow) • Задание расположения слоев (свойство z-index) • Вывод элемента на экран (свойство visibility) О роли таблиц в Web-документах • Примеры Web-страниц с таблицами Создание таблиц • Строки (элемент TR) • Ячейки (элемент TD) • Заголовки (элемент ТН) • Название (элемент CAPTION)
Лекция 8
Добавляем на web-страницу таблицы • Создаем таблицы Задание общих параметров таблицы • Ширина таблицы (атрибут width) • Выравнивание таблицы в документе (атрибут align) • Вывод внешней рамки (атрибут border) • Параметры внешних и внутренних границ (атрибуты frame и rules) • Определение внешней рамки • Определение внутренних границ (атрибут rules) • Ширина границ таблицы (атрибут cellspacing) • Расстояние от содержимого ячейки до рамки (атрибут cellpadding) • Форматируем таблицы Форматирование строк и ячеек • Выравнивание содержимого • Задание ширины и высоты • Объединение ячеек таблицы
Лекция 9
Цвет в таблицах • Фон • Цвет внешней рамки • Цвет внутренних границ • «Объемная» рамка Группирование строки столбцов • Группы строк (элементы THEAD, TFOOT и TBODY) • Группы и подгруппы столбцов (элементы COLGROUP и COL) Наследование свойств выравнивания Компоновка таблиц и текста • Плавающие таблицы • Прерывание обтекания текста вокруг таблицы • Возможности табличного дизайна • Создаем дизайн страницы на основе таблицы • Используем шаблоны Общие сведения о графике для Web • Об использовании графической информации • Форматы графических файлов для WWW • О возможных источниках изображений и авторских правах
Лекция 10
Изображение и звук для web-страниц • Основные сведения о цифровых изображениях • Вставляем изображения на web-страницы Вставка изображения (элемент IMG) • Размеры изображения (атрибуты width и height) • Выравнивание изображения (атрибут align) • Отключение обтекания рисунка текстом • Рисунок в рамке (атрибут border) • Поля вокруг рисунка (атрибуты vspace, hspace и свойства margin) • Альтернативный текст (атрибут alt) • Некоторые другие атрибуты • Изменяем свойства изображений • Оптимизируем изображение Подготовка графики с помощью Adobe Photoshop • Знакомство с рабочим окном программы • Создание нового рисунка • Рисуем геометрические фигуры
Лекция 11
• Удаление объектов и отмена действий • Начинаем изготовление баннера • Текст для баннера • Создаем новые слои • Работаем со слоями • Эффекты тени и выпуклости • Обрабатываем фото • Выполняем тоновую коррекцию • Повышаем резкость изображения • Уменьшаем и обрезаем фото • Сохраняем фото для web • Создание фона • Текстуры • Разрезаем изображения и создаем изображения-карты Изображения-ссылки • Фоновые изображения (атрибут background) • Прозрачные изображения
Лекция 12
• Вставляем активные изображения • Вставляем баннер • Создаем графическое меню Озвучивание Web-страницы • О роли звука на Web-странице • Два способа обращения к мультимедиа-файлам • Форматы аудиофайлов • Звуковой фон (элемент BGSOUND) • Внедрение аудио (элемент EMBED) • Добавляем звук на web-страницу Вставка видео • Форматы видеофайлов • Внедрение видео (элемент EMBED) • Особенности Internet Explorer по воспроизведению видео (элемент IMG) • Гиперссылки на видео Анимация Flash и Shockwave • Возможности технологий Flash и Shockwave • Вставляем Flash-текст • Вставляем Flash-видео
Лекция 13
• Вставляем фильмы Flash и Shockwave • Вставляем Flash-кнопки Возможности фреймов Создание фреймов • Элемент задания фреймов FRAMESET • Содержимое фреймов (элемент FRAME) • Вложенные фреймы • Безфреймовая версия страницы (элемент NOFRAMES) Разбиваем страницу на фреймы • Что такое фреймы и для чего они нужны • Создаем набор фреймов • Добавляем фреймы Настройка фреймов • Атрибуты элемента FRAMESET • Атрибуты элемента FRAME • Изменяем свойства наборов и фреймов • Редактируем набор фреймов
Лекция 14
Ссылки и навигация • Целевые фреймы и элементы привязки • Пример панели навигации • Базовый фрейм (элемент BASE) • Специальные целевые фреймы • Сохраняем набор фреймов • Заполняем фреймы web-страницами сайта • Создаем гиперссылки меню навигации Плавающие фреймы (элемент IFRAME) О формах HTML • Пример формы HTML • Зачем нужны формы Задание формы (элемент FORM) • Имя формы (атрибут name) • Представление формы на сервер (атрибут action) • Передача данных (атрибут method) • Кодировка (атрибут enctype)
Лекция 15
Создание элементов управления • Атрибуты тега INPUT • Какие бывают элементы управления (атрибут type) • Текстовые поля • Флажки • Переключатели • Кнопки • Многострочные поля (элемент TEXTAREA) • Списки • Группирование элементов управления (теги FIELDSET, LEGEND) Отправка формы Начальные понятия JavaScript • JavaScript-интерпретируемый язык • Встраивание сценария в документ • Константы, переменные, идентификаторы • Зарезервированные слова • Разделители • Комментарии • Поддерживает ли ваш браузер язык JavaScript? • Escape-последовательности
Лекция 16
Типы данных • Числовой тип • Булевский (логический) тип • Строковый тип • Нулевой тип • Объявление переменных и отсутствие типизации Операции • Арифметические операции • Операции инкремента и декремента • Операции сравнения • Строковые операции • Логические операции • Операции присваивания • Прочие операторы • Приоритеты выполнения операций Инструкции • Инструкции выбора • Инструкции циклов
Лекция 17
Функции • Объявление функции • Инструкция return • Вызов функции • Функции преобразования типов данных Общие сведения об объектах • Свойства, методы, инкапсуляция • Операции со свойствами Встроенные объекты • Объект Date • Объект Math Массивы • Массивы в JavaScript • Массивы как объекты • Операторы цикла при работе с массивами • Методы массивов • Многомерные массивы
Лекция 18
Строки • Создание объекта String • Операции со строками • Строковые массивы Функции как объекты • Свойства функции • Локальные и глобальные переменные • Использование массива аргументов Специальные значения, функции, объекты • Infinity и NaN • Объект null • Значение undefined • Различие между undefined и null. Оператор typeoff События и обработчики событий • Всплывание событий в DHTML • Стандартные события DHTML • События объектов JavaScript
Лекция 19
Способы связывания событий • Введение событий в качестве атрибутов • Обработчики событий как функции • Динамическое связывание событий в сценарии • Асинхронность обработчиков событий Обработчики событий в теге SCRIPT • Атрибуты for и event • Если браузер не поддерживает связывание событий в SCRIPT • Один обработчик событий для нескольких элементов Использование объекта event • Свойства объекта event • Определение событий мыши События таймера • О событиях, не зависимых от пользователя • Периодические события таймера • Удаление таймера • Задержка времени точной длительности Объектная модель браузера • Dynamic HTML как спецификация объектной модели • Иерархия объектов
Лекция 20
Операции с окнами (объект window) • Создание нового окна браузера (метод open) • Присвоение имени окну (свойство name) • Перемещение окна браузера (методы moveTo, moveBy) • Изменение размеров окна (методы resizeTo и resizeBy) • Печать Web-страницы (метод Print) • Закрытие окна (метод close) Информация о документе и окне браузера (объект location) • Свойства объекта location • Получение данных URL • Перезагрузка и замена текущей страницы (методы объекта location) Управление строкой состояния (свойства status, defauItStatus) • Изменение содержимого строки состояния Переходы между Web-страницами (объект history) • Свойства и методы, применяемые для переходов • Создание кнопок Назад и Вперед
Лекция 21
Работа с диалоговыми окнами • Организация простых диалогов (методы alert, confirm и prompt) • Создание индивидуального диалогового окна • Обмен данными между диалоговым окном и документом Обработка событий окна • Событие onload для различных элементов • Проверка загрузки документа Объект document • Иерархическая структура и ссылки на элементы документа • Запись ссылок на объект document • Семейства, свойства и методы • Вывод свойств объекта document Работа с документом • Методы write и writein • Изменение содержания документа (методы open, close, write) • Задание цветов фона и текста (свойства bgColor и fgColor) • Задание цвета гиперссылок (свойства linkcolor, alinkColor и vlinkColor) • Изменение заголовка документа (свойство title) • Даты
Лекция 22
Динамическое содержание документа • Свойства динамического содержания • Создание элемента с помощью метода write Динамическое создание таблиц • Построение таблицы • Свойства и методы элемента ТАВLЕ • Заполнение таблицы данными Управление стилями CSS • Определение стиля текста (свойство cssText) Семейство styleSheets • Свойства owningElement и stylesheet • Отключение листа стилей (свойство disabled) • Изменение уровня детализации содержания документа Анимация текста • Текст с меняющимся цветом • «Мигающий» текст • «Резиновый» текст (свойство letterSpacing) • «Печатаемый» текст • «Неоновый» текст • Бегущая строка
Лекция 23
Анимация изображений • Замена изображения • Изменение размера изображения (пульсирующая картинка) Динамическое позиционирование • Информация воспроизведения элементов (свойства offsetParent, offsetTop и др.) • Управление областью вырезания (свойство clip) • Видимая часть содержания элемента (свойства clientHeight, ciientWidth, scrollHeightn др.) Семейства форм • Семейство forms • Семейство elements • Обращение к форме Свойства и методы объекта form • Стандартные свойства DHTML • Установка фокуса и выделение элемента (методы focus() select())
Лекция 24
Программирование списков и меню • Свойства элемента SELECT • Семейство опций options • Добавление элемента в список (метод add) • Удаление элемента списка (метод remove) Проверка ввода данных в форму • Проверка вводимых символов • Проверка при выходе из элемента управления • Проверка данных при отправке формы
Лекция 25
Теоретические основы сетей • Модель OSI • Документация RFC и протокол TCPIP • Адресация в ip-сетях • Интерфейс CGI • CGI-заголовок Основы работы с web-сервером Apache • Установка и настройка apache
Лекция 26
• Файл httpd.conf Подготовка к работе с PHP • Установка и настройка РНР • Файл php.ini • Установка и настройка MySQL • Полная отчетность по сайту • Работа с Web-формами
Лекция 27
Описание языка PHP • Комментарии • Типы данных и переменные • Массивы • Константы • Операции • Операторы и управляюгцие конструкции • Математические функции • Работа со строками
Лекция 28
• Работа с файлами и каталогами • Передача параметров сценариям • Работа с сокетами • Сессия • Работа на стороне сервера • Кодирование и декодирование URL • Написание собственных функций • Объектно-ориентированный подход и классы в РНР
Лекция 29
• Графика в РНР Безопасное программирование в WEB • Вывод информации об ошибке • Автоматическое создание переменных • Обработка введенных пользователем данных • Подключение внешних файлов через переменную • Файл robots. txt • Шифрование
Лекция 30
• Использование чужих скриптов Шифрование и хэширование • Понятия • Алгоритм MD5 Работа с MYSQL • Типы данных, используемые в базе данных MySQL • Создание базы данных MySQL • Удаление базы данных MySQL
Лекция 31
• Создание таблицы в базе данных MySQL • Удаление таблицы из базы данных MySQL • Изменение свойств таблицы • Поиск записей в таблице Планирование и создание сайта • Разработка структуры сайта • Сборка файлов Web-сайта • Выбор Web-сервера
Лекция 32
Публикуем сайт в Интернете • Выбираем службу хостинга • Создаем адрес сайта в Интернете • Настраиваем Dreamweaver для FTP-доступа к сайту • Копируем файлы сайта на удаленный сервер • Тестируем удаленный сайт
Лекция 33
Практика PHP • ЗАГРУЗКА ФАЙЛОВ НА СЕРВЕР • ОТПРАВКА ПИСЕМ • ДАТА И ВРЕМЯ • ИНФОРМАЦИЯ О КЛИЕНТЕ И СЕРВЕРЕ • СЧЕТЧИК ПОСЕЩЕНИЙ • КАЛЕНДАРЬ • КАЛЬКУЛЯТОР • РЕГИСТРАЦИЯ НА САЙТЕ • УЗНАЕМ СТРАНУ ПО IP-АДРЕСУ
Лекция 34
• ГОСТЕВАЯ КНИГА • ГАЛЕРЕЯ РИСУНКОВ • МАРКИРУЕМ ГРАФИКУ НА САЙТЕ • ЗАЩИТА ОТ СПАМА И ФЛУДА • ПОДСЧЕТ ОНЛАЙН-ПОСЕТИТЕЛЕЙ НА САЙТЕ • РАССЫЛКА НОВОСТЕЙ САЙТА
Лекция 35
Строки • Передача массива методом GET • Передача массива методом POST Регулярные выражения • Удаление всех тегов из HTML-страницы • Удаление изображений из HTML-страницы • Извлечение названия HTML-страницы • Проверка корректности ввода адреса электронной почты • Проверка корректности ввода чисел
Лекция 36
Файлы • Удаление каталога • Редактирование файла • Добавление записи в файл • Постраничная навигация • Система регистрации
Лекция 37
MySQL • Система регистрации • Хранение МРЗ-файлов в базе данных • Хранение изображений в базе данных • Загрузка данных из дампа базы данных Сессии и cookies • Пользователи OnLine
Лекция 38
Авторизация и аутентификация • Авторизация на файлах • Шифрование пароля • Защита текстовых файлов от просмотра в браузере • Авторизация при помощи cookie
Лекция 39
• Загрузка файлов • Изменение прав доступа Whois-сервис • Определение принадлежности IP-адресов • Следование реферальному серверу • Определение IP-адреса по сетевому адресу • Определение сетевого адреса по IP-адресу
Лекция 40 (экзамен, сдача дипломного проекта)
Защита дипломного проекта Необходимые материалы (дипломный проект) для сертификации учащегося Пакет web-дизайна Учащемуся выдается задание в течение всего периода обучения для проектирования сайта-визитки компании. Разработка web-сайта должна включать в себя: • оригинальный дизайн (цветовая палитра, графика, атрибуты фирменного стиля компании, включая логотип и собственный рекламный анимированный баннер); • одноуровневое навигационное меню, содержащее элементы интерактивного взаимодействия с пользователем, внутренние и внешние ссылки; • структурированный контент (от 5 до 10 страниц, для некоторых страниц возможен индивидуальный дизайн); • систему управления контентом сайта, состоящей из: • страницы авторизации администратора сайта; • панели управления для просмотра, загрузки и удаления файлов и папок на сервере; • механизма формирования меню сайта; • механизма управления метаинформацией сайта (название, ключевые слова, авторские права). Дипломный проект разрабатывается в течение всего времени обучения, а по окончании Школы учащемуся дается еще две недели на его доработку. В это время возможны консультации с преподавателями с согласованием у Администратора. В случае, если учащийся не сдает дипломный проект в срок, установленный администрацией школы, все последующие консультации с преподавателем будут расцениваться, как индивидуальное обучение. После доработки учащийся согласовывает дипломный проект с преподавателем, а после согласования дипломная работа передается директору школы на рассмотрение, и уже после его одобрения учащемуся выдается Сертификат.