Учебный центр "Стади"

Программа курса:
Модуль 1. Введение в web-технологии.

Введение в предмет.

Введение в языки разметки. Язык разметки гипертекста HTML.

Развитие HTML, спецификации. Вопросы межброузерной совместимости. W3C.

Структура XHTML-документа. Основные элементы и их назначение.

Практика: создание простейшей web-страницы.

Модуль 2. Форматирование текста (часть 1).

Правила записи тегов и их атрибутов в стандарте XHTML. Синтаксические отличия HTML 4 от XHTML Strict.

Классификация тегов: линейные и блочные элементы.

Модель форматирования текста: заголовки и абзацы. Элементы <p>, <h1>...<h6>. Выравнивание текста в блочных элементах: атрибут align

Модуль 3. Форматирование текста (часть 2).

Классификация тегов: логическое и физическое форматирование.

Теги физического форматирования: <b>, <i>. Отличие от тегов логического форматирования <strong>, <em>.

Теги физического форматирования <font>, <u>, <sub>, <sup>.

Стиль элемента: атрибут style.

Цвет в HTML и CSS. Web-палитра. Подбор цветов для веб-страницы с использованием Photoshop.

Изменение цвета фона и цвета текста на странице.

Модуль 4. Списки.

Неупорядоченные списки: элементы <ul>, <li>. Упорядоченные списки: элементы <ol>, <li>.

Неупорядоченные списки: атрибут type. Упорядоченные списки: атрибуты type, value, start. Стилевое форматирование списков.

Списки определений: элементы <dl>, <dd>, <dt>.

Вложенные списки.

Форматированиесписков: атрибуты list-style-type, list-style-image, list-style-position, list-style.

Практика по спискам.

Модуль 5. Мета-теги.

Кодировки и символьные подстановки.

Указание кодировки текста при помощи тега <meta>

Мета-теги: управление принудительным обновлением web-страницы.

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

Модуль 6. Графика в web-дизайне. Особенности форматов. Оптимизация графики.

Форматы графических файлов в Internet. Оптимизация.

Тег <img /> и его атрибуты (src, alt, width, height, border).

Выравнивание изображений на странице: атрибуты align, valign, hspace, vspace.

Практика: проектирование web-страниц с использованием графики

Модуль 7. Гиперссылки. Принципы навигации web-сайта.

Общие сведения о гиперссылках. Тег <a> и его атрибуты (href, target). Эргономика, удобство навигации

Абсолютная и относительная адресация. Организация внешних ссылок

Организация внутренних ссылок, атрибут HTML-элементов id. Организация внутренних ссылок с помощью элемента <a>. Атрибут name.

Организация "смешанного" перехода (на указанный элемент во внешнем HTML-документе). Графические ссылки.

Практическая работа по разработке галереи изображений.

Модуль 8. Карты ссылок.

Общие понятия

Классификация и форматы карт ссылок: клиентский и серверный варианты.

Построение клиентского варианта карт ссылок: теги <map>, <area> и их атрибуты

Создание карт ссылок в Photoshop и ImageReady

Практическое применение карт ссылок

Модуль 9. Таблицы (часть 1).

Создание простейшей таблицы

Атрибуты тегов <table>, <tr> и <td>:

border, cellspacing cellpadding.

Указание ширины и высоты ячейки: атрибуты width, height.

Выравнивание данных в таблице: атрибуты align и valign.

Управление цветом фона и цветом рамок таблицы (отдельной строки, отдельной ячейки).

Использование изображений в качестве фона таблицы (отдельной строки, отдельной ячейки).

Модуль 10. Таблицы (часть 2).

Объединение ячеек: атрибуты colspan, rowspan.

Теги логического структурирования таблиц: <thead>, <tbody>, <tfoot>. Теги логического группирования столбцов: <colgroup>, <col>.

Управление рамками таблицы: атрибуты frame, rules.

Модуль 11. Таблицы (часть 3).

Практика: макетирование web-страниц с использованием таблиц.

Модуль 12. Фреймы.

Организация взаимодействия между фреймами при помощи атрибута target элемента <a>.

Зарезервированные (специальные) имена фреймов: _top, _parent, _blank, _self. Тег <base>.

Практическое применение фреймов: примеры и рекомендации.

Модуль 13. Каскадные таблицы стилей (часть 1).

Введение в таблицы стилей. Возможности таблиц стилей. Спецификации CSS.

Применение таблиц стилей: способы внедрения стилей в документ, каскадность. Селекторы, типы селекторов: классы, селекторы-потомки, идентификаторы, псевдоклассы  etc. Псевдоклассы ссылок: hover, active, visited. Атрибут cursor.

Практика:  создание многоуровневых списков с использованием контекстных селекторов.

Модуль 14. Каскадные таблицы стилей (часть 2).

Основы шрифтового дизайна. Правила форматирования текста: атрибуты color, font-size, font-style, font-weight, font-family etc. Обобщенныйатрибут font.

Атрибутыблочныхэлементовтекста: text-indent, text-align, text-justify,  line-height, letter-spacing, word-spacing etc.

Блочные элементы: Форматирование границ. Отступы margin, padding. Атрибуты стиля display, visibility, float, overflow.

Практика: проектирование сайта без использования графики.

Модуль 15. Каскадные таблицы стилей (часть 3).

Управление фоновым цветом и рисунком. Практическое задание - разметка страницы с навигационной панелью.

Модуль 16. Каскадные таблицы стилей (часть 4).

Относительное и абсолютное позиционирование. Атрибуты position, left, top, right, bottom.

Практика по абсолютному позиционированию.

Модуль 17. Публикация web-сайтов.

Хостинг, регистрация доменного имени

Размещение сайта в Internet. Работа с FTP-клиентами

Регистрация в поисковых системах и каталогах. Размещение счетчика на web-странице

Модуль 18. Табличная верстка веб-сайтов (теория).

Принципы табличной верстки.

Практическая работа: верстка web-страницы по готовому эскизу в Photoshop или Illustrator.

Модуль 19. Верстка сайтов с использованием CSS (практика).

Принципы верстки с использованием исключительно CSS.

Интерпретация свойств CSS различными броузерами.

“CSS-hacks”.