2.1. Разработка макета
Первым этапом создания электронного учебно-методического комплекса по дисциплине «Разработка программных приложений» будет проектирование макета веб-страниц комплекса.
Для начала необходимо определиться с типом макета, который будет использоваться на веб-страницах. В распоряжении разработчиков имеется большое количество различные макетов, несмотря на это, их возможно объединить по некоторым ключевым особенностям: по ширине, по числу колонок, по размещению объектов на экране. Наиболее используемые типы макетов – это макеты с определенной шириной и макеты с колонками [22].
Макеты по ширине, в свою очередь, делятся на следующие типы:
– макеты с заранее установленной шириной;
– макеты с гибкой шириной;
– адаптивные макеты;
– комбинированные макеты.
Макет с заранее установленной шириной за частую размещается по центру окна веб-браузера, хотя бывают случаи, когда подобный макет прижат к левому краю окна браузера. Ширина такого макета фиксируется заданными значениями в пикселях. Веб-браузеры к макетам данного типа имеют лояльное отношение, в следствие чего на верстку и отладку веб-сраниц уходит мало времени [22].
Макет с гибкой шириной охватывает все свободное пространство окна браузера. При этом, если изменять ширину окна веб-браузера или разрешение экрана, то резиновый макет будет подстраиваться под изменяющиеся условия. Веб-страницы, использующие макет с резиновой шириной, хорошо выглядят как на смартфонах или планшетах, так и на ноутбуках или настольных компьютерах [22].
Адаптивный макет имеет способность приспосабливаться к разрешению экрана и окна браузера. Такой макет, если потребуется может изменить свою ширину, число колонок, размер изображений и текста. Для реализации адаптивности создается некоторое количество стилевых файлов под различные разрешения. Выбор стилей совершается с помощью языка программирования JavaScript [24].
Комбинированный макет представляет из себя гибрид макетов с фиксированной и резиновой шириной. В комбинированном макете для отдельных объектов веб-страницы применяется разная ширина. Например, шапка и подвал в таком макете могут быть резиновыми, а область с информацией может иметь фиксированную ширину [24].
Макеты с колонками обычно создаются с двумя колонками на веб-странице. За частую в одной из колонок размещается навигация по сайту, а в другой, более широкой колонке, содержится информация. Количество колонок обусловлено только тем, какой объем информации будет представлен на сайте, и как эта информация будет организована [24].
В ходе изучения различных типов макетов было принято решение разрабатывать веб-страницы электронного учебно-методического комплекса по дисциплине «Разработка программных приложений» используя комбинированный макет.
Перед началом верстки веб-страниц необходимо выбрать тип верстки. Существуют следующие типы верстки: блочная и табличная. В итоге, дальнейшая верстка макета с помощью языка гипертекстовой разметки или HTML и каскадной таблицы стилей или CSS будет осуществляться с помощью блочной верстки.
Схематический макет электронного учебно-методического комплекса представлен на рисунке 2.1. Макет состоит из следующий блоков:
– горизонтальное меню с навигацией по сайту;
– вертикального меню с навигацией по сайту;
– блок с основной тематической информацией;
– подвал сайта с информацией об авторском праве.
Рисунок 2.1 – Макет веб-страницы
Макет в веб-браузере будет выглядеть следующим образом: горизонтальное меню будет растянуто на всю ширину окна веб-браузера; центральная часть макета и подвал располагаться будут по центру экрана; ширина для центральной части и подвала будет резиновой.
- По дисциплине
- 1. Анализ предметной области
- 1.1. Обзор литературы
- 1.2. Обзор рабочей программы
- 1.3. Постановка задачи
- 1.4. Определение требований к системе
- 1.5. Программные средства для разработки
- 2. Разработка электронного учебно-методического
- 2.1. Разработка макета
- 2.2. Разработка дизайна
- 2.3. Верстка веб-страниц
- 2.4. Структура электронного комплекса
- 3. Результаты разработки электронного учебно-методического комплекса по дисциплине
- 3.1. Содержание лекций
- 3.2. Содержание лабораторных работ
- 3.3. Пример веб-страниц электронного комплекса
- 3.4. Лекция №16. Разработка справочной системы
- 3.5. Лабораторная работа №3. Разработка справочной системы