Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17546 / 1636 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Практическая работа 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 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Дастан Атагулла
Дастан Атагулла
Казахстан
Елена Игнатко
Елена Игнатко
Россия, Москва