Высшая инженерная школа Санкт-Петербургского государственного политехнического университета (ВИШ СПбГПУ)

Программа курса
Занятие 1

Основы разработки web-ресурсов.
Модели информационной архитектуры.
Принципы «юзабилити».
Понятие web-интерфейса. Основные элементы web-страницы и способы их компоновки.
Разработка структуры сайта и системы навигации.
Обзор форматов web-графики.

Возможности программы Adobe Dreamweaver.
Основы работы.
Управление web-сайтом.
Редактирование html-кода (Quick Tag, диалоговое окно Edit Tag).
Команды Insert Tag и Tag Chooser.
Практическая работа: Определение сайта, создание web-страницы, размещение содержания и редактирование средствами Dreamweaver.
Занятие 2

Стандарты HTML и CSS .
Стандарты разработки HTML-документов.
Meta-теги, keywords (элементы поисковой оптимизации).
Методы верстки web-страниц.
HTML-элементы: виды, параметры.
CSS-селекторы.
CSS-свойства: определение, способы задания, единицы измерения, использование для оформления html-элементов.
Практическая работа: Пример табличной верстки (использование элементов, подготовленных в графическом редакторе, для верстки web-страницы).
Занятие 3

Использование CSS-свойств.
Особенности отображения текста на web-странице.
CSS-свойства, используемые для оформления текста.
Блочная модель.
Управление типами элементов – свойство display.
Создание и управление таблицами стилей в программе Dreamweaver (панель CSS Styles, панель Tag Inspector).
Практическая работа: создание и редактирование таблицы стилей.
Занятие 4

Слои в HTML.
Определение, основные свойства.
Создание слоев в Dreamweaver. Элементы DIV и SPAN.
Особенности разработки элементов макетов для блочной верстки.
Использование свойства float: выравнивание изображений, реализация эффекта таблицы.
Псевдостили гиперссылок.
Реализация эффекта ролловера средствами CSS.
Практическая работа: Позиционирование элементов макета с использованием свойства float.

Использование изображений на web-cтранице.
Создание панели навигации (использование Navigation Bar).
Занятие 5

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

Схемы css-позиционирования.
Способы позиционирования элементов.
Абсолютное и относительное позиционирование.
Точное размещение блочных элементов HTML-разметки в окне браузера: размеры блока, абсолютные и относительные координаты.
Наложение и вложение слоев, свойство z-index.
Управление видимостью слоя и видимостью содержания слоя.
Использование трафаретного изображения при разметке. Панель AP Elements.
Практическая работа: Использование css-позиционирования при разработке элементов макета web-страницы.
Занятие 7

Разработка макета web-страницы на основе css-позиционирования.
Используемые приемы. Особенности оформления.
Управление шириной слоя, полями и отступами.
Создание и редактирование макета с фиксированными и масштабируемыми колонками.
Рекомендации по использованию css-позиционирования.
Практическая работа: Создание макетов фиксированного и масштабируемого дизайна с использованием различных схем позиционирования.
Занятие 8

HTML-формы.
Элементы формы.
Юзабилити форм.
Средства HTML и CSS для определения визуального отображения элементов форм
Примеры использования css-алгоритмов. Центрирование страницы средствами css.
Алгоритм «раздвижные двери».
CSS-спрайты.
Кроссбраузерная верстка, использование условных комментариев.
Практическая работа: Создание и оформление HTML-форм с использованием css-свойств.
Занятие 9

Средства автоматизации Dreamweaver.
Использование панели Assets.
Использование панели Snippets для хранения и вставки фрагментов кода.
Использование трассирующего изображения.

Дополнительные сведения.
Занятие 10

Экзамен.