HTML5. Основы разметки

Целью данного практического занятия является освоение базовых приемов создания веб - страниц средствами HTML, CSS и JavaScript и инструментальных средств WebMatrix.

Задание:

1. Подготовить рабочее место для выполнения практических занятий.
2. Создать веб - страницу, согласно следующему макету, на основе контейнерного дизайна:

Рис. 15.1. Макет веб - страницы

Контент Блока содержимого должен подгружаться в зависимости от выбранного пункта Блока навигации. HEADER и FOOTER должны содержать общую информацию о предоставляемомом контенте.

Ход работы

Установка WebMatrix

Сложностей с подготовкой рабочего места для выполнения практических занятий возникнуть не должно. С основами работы с WebMatrix можно ознакомиться по ссылке http://msdn.microsoft.com/ru-ru/magazine/gg983489.aspx. Процесс установки подробно изложен здесь: http://blogs.msdn.com/b/vyunev/archive/2011/10/27/webmatrix-1-webmatrix-asp-net.aspx.

Кратко рассмотрим основные шаги установки:

1. Загрузка установщика по ссылке http://www.microsoft.com/web/gallery/install.aspx?appid=webmatrix.
2. Запуск установщика.
3. Ознакомление с параметрами установки и устанавливаемыми компонентами.
4. Непосредственно установка.

Для дальнейшей работы создадим сайт на основе шаблона ( рис. 15.2), а именно на основе шаблона "Пустой сайт" ( рис. 15.3).

увеличить изображение
Рис. 15.2. Создание сайта на основе шаблона

увеличить изображение
Рис. 15.3. Создание сайта на основе пустого шаблона

После окончания процесса создания проекта сайта, перейдем к разделу Файлы ( рис. 15.4) и создадим папку для текущего практического занятия ( рис. 15.5).

увеличить изображение
Рис. 15.4. Переход к просмотру и изменению файлов сайта

Рис. 15.5. Создание новой папки