Веб-верстка (HTML, CSS)

Учебная программа:

Основы разработки web-ресурсов:

• Модели информационной архитектуры;

• Основные принципы «юзабилити»;

• Понятие web-интерфейса;

• Основные элементы web-страницы и способы их компоновки;

• Обзор форматов web-графики: форматы GIF, PNG, JPEG. Конвертирование форматов

Спецификация и создание действительных документов:

• Консорциум W3C;

• Элемент DOCTYPE;

• Определение действительности в HTML и XHTML;

• Кодировка документа, определение ее вида;

• Валидация документа

Глобальная структура и синтаксис документа:

• Структура документа;

• Элементы html, head, body;

• Синтаксис документа: разновидности тегов;

• Атрибуты и значения атрибутов элементов

Верстка документа. Таблицы:

• Таблицы: назначение и элементы таблицы;

• Атрибуты таблицы и выравнивание содержимого в таблице

Работа с текстом и списками:

• Структурирование текста;

• Абзацы и новые строки;

• Заголовки;

• Стили текста;

• Выравнивание текста;

• Списки: маркированные, нумерованные и списки определений;

• Эффективная работа со списками: вложение списков и атрибуты списков;

• Определение цвета, кегля, гарнитуры, интерлиньяжа текста;

• Добавление горизонтальных линеек

Гипертекст и связывание:

• Якорный элемент: абсолютное и относительное связывание;

• Связывание изображений;

• Внутренние и почтовые ссылки

Формы:

• Синтаксис форм: элементы и атрибуты форм, типы элементов управления;

• Построение формы. Добавление поля ввода, флажков и переключателей;

• Добавление на страницу раскрывающихся списков и окон списков;

• Добавление текстовой области;

• Добавление кнопок передачи и сброса данных формы;

• Практика web-дизайна: использование атрибутов method, action

Работа с блоками:

• Определение и основные свойства;

• Создание слоев: теги div и span;

• Особенности разработки макетов для блочной верстки;

• Использование свойства float: выравнивание слоев, изображений

Изображения, мультимедиа и встраивание объектов:

• Встраивание и оптимизация web-графики. Добавление изображения на страницу;

• атрибуты alt, title;

• Связывание изображений;

• Технология Flash;

• Внедрение объектов с помощью тега object. Добавление аплетов;

Использование листов стилей в XHTML 1.1:

• Основы листов стилей: разделение представления и структуры;

• Каскадирование и наследование;

• Методы применения листов стилей: встроенные, внедренные стили и связанные листы стилей;

• Тег link: связывание документа с листом стилей;

• Синтаксис листов стилей. Селекторы.

• Классы и группирование;

• Применение стиля к тексту: определение семейства гарнитур шрифта, размера, цвета, начертания, наклона и интерлиньяжа;

• Оформление списков;

• Использование изображений для оформления фона страницы;

• Позиционирование элементов web-страницы c помощью CSS. Способы позиционирования;

• Абсолютное и относительное позиционирование;

• Точное размещение блочных элементов HTML-разметки в окне браузера: размеры блока, абсолютные и относительные координаты;

• Наложение и вложение слоев, свойство z-index;

• Управление видимостью слоя и видимостью содержимого слоя;

• Создание макета сайта с фиксированными и масштабируемыми колонками;

• Оформление форм с использованием CSS-свойств;

• Создание выпадающего меню (Pop-Up Menu)