Лекции

Лекция 1

Основы работы сети Интернет

• Подключение к Интернет. Способы подключения, поставщики услуг Интернет (провайдеры). Сравнение способов подключения к Интернет.
• Понятие гипертекста, принцип гипертекста. Гипертекстовый документ, гипертекстовая ссылка.
• Адресация ресурсов в Интернет, назначение и структура URL адреса. Документ по умолчанию. Понятие Web-сайта, размещение сайта на сервере. Относительная и абсолютная адресация. Применение различных видов адресации при создании гиперссылок. Применение различных видов адресации при создании гиперссылок.

Основы языка HTML

• История развития HTML. Назначение и использование. Стандарты и организация W3C.
• Гипертекстовый документ, содержимое и структура. Объявления типов документов. Основные объекты языка HTML: элементы, атрибуты элементов и их значения, комментарии. Структура HTML-документа.

Основные структурные элементы

• Назначение и содержимое секций заголовка и тела HTML-документа.
• Метаинформация о документе, элемент META.
• Заголовок документа, его назначение.

Лекция 2

Форматирование HTML-документа

• Разметка представления и содержания.
• Встраивание специальных символов в документ.
• Задание цвета в HTML.
• Разбиение документа на абзацы, их форматирование.
• Заголовки.
• Создание списков в документе. Виды списков, настройка и форматирование списков.
• Встраивание и настройка изображений. Особенности выравнивания изображений на странице, обтекание текстом.
• Гипертекстовые ссылки. Создание и настройка. Создание якорей (именованных областей) на странице. Ссылки на именованные области и идентификаторы.

Лекция 3

Таблицы

• Назначение и использование таблиц в HTML.
• Элементы разметки, определяющие таблицу. Создание сложных таблиц.
• Табличная верстка. Резиновый, фиксированный и гибридный дизайн страницы. Применение различных видов табличной верстки. Принципы табличной верстки.

Каскадные таблицы стилей

• Недостатки стандартного HTML. Назначение CSS. Преимущества оформления страниц при помощи стилевых описаний.
• Синтаксис: селекторы и правила. Виды селекторов, особенности применения различного вида селекторов. Единицы измерения.
• Встраивание стилевых описаний в документ – встроенные стили, глобальные стили, стилевой файл.
• Наследование.
• Каскадирование.

Лекция 4

Цели информационного дизайна

• Понятие информационного дизайна.
• Основные задачи информационного дизайна.
• Критерии оценки качества информационного дизайна.

Определение целей и типа сайта

• Формирование списка целей сайта.
• Типы сайтов в Интернет. Определение типа сайта.

Аудитория сайта

• Определение целевой аудитории.
• Составление списка типичных пользователей.
• Определение целей каждого из типов пользователей по отношению к сайту.
• Разработка алгоритмов взаимодействия каждого типа пользователя с сайтом.

Проектирование содержания сайта

• Обзор типовых страниц сайтов.
• Разбиение информации на блоки при формировании информационных страниц.
• Рекомендации по разбиению информации на страницы.
• Группировка списка страниц по разделам.

Правила оформления текстов для web

• Удобочитаемость и удобство беглого ознакомления.
• Ограничения по объёму текста и графики.

Разработка системы навигации

• Проблемы web-навигации.
• Задачи навигации.
• Требования к системе навигации.
• Глобальная и локальная навигация.
• Способы реализации навигации.
• Общий алгоритм построения системы навигации.

Проектирование структуры страницы

• Этапы разработки визуального дизайна: определение типовых страниц, расположение глобальной и локальной навигации, размер и положение логотипа, местоположение содержимого на странице, рисование эскизов страниц.
• Типовые элементы визуального дизайна: верхний колонтитул, содержимое, нижний колонтитул.
• Типовое содержимое каждой из частей страницы.
• Практические рекомендации по созданию визуального дизайна.

Тестирование удобства работы с сайтом

• Причины необходимости тестирования.
• Подготовка тестирования.
• Методы тестирования.
• Анализ результатов тестирования.

Практические работы

Практика 1

Введение в HTML

• Использование текстового редактора Notepad++ для создания гипертекстовых документов.
• Встраивание HTML тегов. Основные структурные теги, метаинформация, заголовок документа.
• Форматирование и разметка документа.
• Создание гипертекстовых ссылок.
• Встраивание изображений.
• Создание списков: упорядоченные, неупорядоченные, списки определений.

Домашнее задание №1

Практика 2

Использование Dreamweaver для создания гипертекстовых документов

Введение в CSS

• Оформление структурных элементов.
• Свойства текста, выравнивание.
• Свойства ссылок.

Работа с формами

Домашнее задание №2

Практика 3

Работа с таблицами

• Создание простейших таблиц. Основные структурные элементы таблиц.
• Создание сложных таблиц: объединение строк, столбцов, выравнивание внутри таблицы. Создание вложенных таблиц.
• Оформление таблиц с помощью CSS.

Домашнее задание №3

Практика 4

• Создание сайта, выполненного в технике табличной вёрстки.
• Получение зачета.