Основы Web-дизайна (html/css)

course-overview

Сегодня Интернет посещают миллионы людей и только единицы создают Web-сайты. На наших курсах Вы научитесь создавать макеты сайтов, разрабатывать для них удобную навигацию, создавать и оптимизировать все графические элементы сайта, изучите возможности программ для создания web-страниц, сможете грамотно размещать информацию на сайте. В программе курса обучения – все, что необходимо знать и уметь начинающему разработчику Интернет — проектов, эксперту по разработке и поддержке web-сайтов, web-дизайнеру.
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 для печати страниц
  • Лабораторная работа: подготовка страницы к печати
  • Свойства курсора
  • Использование внешних объектов

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

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