Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Практическая работа 1:

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

< Лекция 15 || Практическая работа 1: 1234 || Лекция 16 >
Аннотация: В рамках данного практического занятия нами будет рассмотрен пример создания простого сайта, с подгружаемым содержимым.
Ключевые слова: контент, навигация, тег, css

Целью данного практического занятия является освоение базовых приемов создания веб - страниц средствами 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. Создание новой папки
< Лекция 15 || Практическая работа 1: 1234 || Лекция 16 >
Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Евгений Зиновьев
Евгений Зиновьев
Россия, Белгород, Белгородский государственный технологический университет им. В.Г. Шухова, 2005