Лекции

Лекция 1. Общие сведения о разработке веб-узлов

• История развития индустрии создания веб-узлов в России и в мире. Основные факторы, определяющие развитие индустрии.
• Классификация современных веб-сайтов. Особенности разработки сайтов различных типов
• Интернет-, интранет- и оффлайн ресурсы
• Участники разработки сайта и круг решаемых ими задач.
• Этапы разработки сайта — общий обзор.
• Опреденение проекта: цели и задачи, целевые аудитории, бюджет и сроки. Формирование технического задания.
• Разработка логической структуры: категоризация содержимого, определение основных и дополнительных сервисов, определение шаблонов поведения пользователей. Формирование карты сайта.
• Профили пользователей: формирование и применение.
• Аудит контента: классификация содержимого по типам, определение степени готовности, сроков и порядка поставки контента.

Лекция 2. Разработка html-макетов

• Планирование и создание файловой структуры сайта. Варианты категоризации файлов различных типов.
• Элементы соглашения об именовании документов применительно к разработке веб-узлов.
• Понятие валидности и кроссбраузерности. Причины необходимости написания валидного html и css кода.
• Минимальный, стандартный и расширенный наборы браеузеров для тестирования.
• Полнота поддержки спецификаций различными браузерми.
• Qirks и Strict mode. Super Standards Mode в Internet Exporer 8. Элементы разметки и оформления, зависящие от режима работы брауера.

Лекция 3. Разметка и оформление html-макетов

• Форма представления элемента: строковый, блочный, табличный уровни. Специфика отображения элементов различного уровня. Преобразование уровней представления.
• Разметка каркаса страницы. Принцип модульности
  • Использование таблиц
  • Плавающая модель
  • Позиционирование элементов
• Распространённые ошибки обработки плавающей модели в браузерах. Способы нейтрализации ошибок и пути их предотвращения
• Распространённые ошибки обработки абсолютного позиционирования. Способы нейтрализации ошибок и пути их устранения
• Оформление текстового содрежимого
• Работа с графикой
• Использование фоновых изображений. Создание ролловеров. CSS-спрайты

Лекция 4. Тестирование сайта и публикация

• Способы эмуляции отображения страниц в различный браузерах и операционных системах: специализированные приложения, интернет-ресурсы, виртуальные машины
• Расширения для браузеров, упрощающие работу с разметкой и поиск ошибок
• Этапы тестирования сайта
• Доменные имена. Регистрация и администрирование
• Хостинг. Типы хостинга. Рекомендации по выбору в зависимости от задач сайта
• Размещение сайта на сервере. Обновление и синхронизация
• Поддержка сайта. Обзор систем управления контентом

Практические занятия

Практика 1. Adobe Dreamweaver. Разметка текстового содержимого

• Интерфейс программы Adobe Dreamweaver
• Первоначальные настройки программы Adobe Dreamweaver
• Режимы работы программы: Design, Code, Split. Рекомендации по выбору режима в зависимости от решаемых задач
• Форматирование текста: параграфы, заголовки, списки
• Создание ссылок
• Размещение изображений
• Оформление текста при помощи CSS. Способы работы с CSS в Adobe Dreamweaver

Домашнее задание. Форматирование и оформление памятки по html-элементам

Практика 2. Разметка каркаса страницы

• Карта ссылок (Image Map). Создание. Область примения
• Создание макета в две колонки
  • Создание блочных элементов в Adobe Dreamweaver
  • Разметка с использованием плавающей модели
  • Запрет обтекания элементов
• Создание макета в три колонки
  • Разметка для тривиального случая
  • Разметка с использованием отрицательных полей
• Работа с элементами форм

Домашнее задание: создание шаблона многоколонной страницы

Практика 3. Работа с таблицами

• Область применения таблиц: размещение данных и создание каркаса страницы
• Создание таблицы средствами Adobe Dreamweaver
• Управление свойствами таблицы, строки и ячейки
• Элементы столбцов
• Оформление табличных элементов средствами CSS. Уровни таблицы и свойства, работающие на различных уровнях
• Использование таблиц для создания каркаса страницы.
• Особенности оформления элементов таблиц
• Механизм поиска и замены

Домашнее задание: иморт и стилевое оформление прайс-листа. Создание заготовки «шапки» для сайта

Практика 4. Создание сайта «Tokkary Land»

• Цели и задачи сайта. Формирование логической и физической структур сайта
• Определение сайта в Adobe Dreamweaver
• Сброс стилевых описаний браузера. Задание базовых стилевых описаний проекта
• Выделение логических блоков в графическом шаблоне страницы. Преобразование их в html-разметку
• Расположение структурных элементов каркаса на странице средствами CSS
• Использование фоновых изображений в оформлении страницы
• Создание меню при помощи техники «раздвигающиеся двери»
• Создание графических-ссылок, реагирующих на действия пользователей

Домашнее задание: создание панели навигации с применением неупорядоченных списков

Практика 5. Формирование шаблона страницы

• Использование абсолютного позиционирования для оформления страницы
• Размещение графики в формате png-24
• Создание шаблона внутренне страницы
• Понятие шаблона станицы в Adobe Dreamweaver
• Создание редактируемых областей
• Создание страниц на основе шаблона

Домашнее задание: размещение информации на внутренних страницах сайта

Практика 6. Сложное форматирование содержимого

• Версия для печати средствами CSS
• Создание станицы прайс-листа. Иморт данных из MS Excel
• Оформление графических изображений
• Создание многоколонной страницы
• Управление обтеканием текста

Домашнее задание: создание страниц фотогалереи

Практика 7. Тестирование и публикация сайта

• Средства Adobe Dreamweaver для проверки корректности разметки
• Тестирование страниц на совместимость с браузерами
• Проверка ссылочной целостности сайта
• Формирование детального отчёта по сайту
• Настройка соединения с серверной копией сайта. Синхронизация

Зачёт