2.1. Разработка макета

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

Для начала необходимо определиться с типом макета, который будет использоваться на веб-страницах. В распоряжении разработчиков имеется большое количество различные макетов, несмотря на это, их возможно объединить по некоторым ключевым особенностям: по ширине, по числу колонок, по размещению объектов на экране. Наиболее используемые типы макетов – это макеты с определенной шириной и макеты с колонками [22].

Макеты по ширине, в свою очередь, делятся на следующие типы:

– макеты с заранее установленной шириной;

– макеты с гибкой шириной;

– адаптивные макеты;

– комбинированные макеты.

Макет с заранее установленной шириной за частую размещается по центру окна веб-браузера, хотя бывают случаи, когда подобный макет прижат к левому краю окна браузера. Ширина такого макета фиксируется заданными значениями в пикселях. Веб-браузеры к макетам данного типа имеют лояльное отношение, в следствие чего на верстку и отладку веб-сраниц уходит мало времени [22].

Макет с гибкой шириной охватывает все свободное пространство окна браузера. При этом, если изменять ширину окна веб-браузера или разрешение экрана, то резиновый макет будет подстраиваться под изменяющиеся условия. Веб-страницы, использующие макет с резиновой шириной, хорошо выглядят как на смартфонах или планшетах, так и на ноутбуках или настольных компьютерах [22].

Адаптивный макет имеет способность приспосабливаться к разрешению экрана и окна браузера. Такой макет, если потребуется может изменить свою ширину, число колонок, размер изображений и текста. Для реализации адаптивности создается некоторое количество стилевых файлов под различные разрешения. Выбор стилей совершается с помощью языка программирования JavaScript [24].

Комбинированный макет представляет из себя гибрид макетов с фиксированной и резиновой шириной. В комбинированном макете для отдельных объектов веб-страницы применяется разная ширина. Например, шапка и подвал в таком макете могут быть резиновыми, а область с информацией может иметь фиксированную ширину [24].

Макеты с колонками обычно создаются с двумя колонками на веб-странице. За частую в одной из колонок размещается навигация по сайту, а в другой, более широкой колонке, содержится информация. Количество колонок обусловлено только тем, какой объем информации будет представлен на сайте, и как эта информация будет организована [24].

В ходе изучения различных типов макетов было принято решение разрабатывать веб-страницы электронного учебно-методического комплекса по дисциплине «Разработка программных приложений» используя комбинированный макет.

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

Схематический макет электронного учебно-методического комплекса представлен на рисунке 2.1. Макет состоит из следующий блоков:

– горизонтальное меню с навигацией по сайту;

– вертикального меню с навигацией по сайту;

– блок с основной тематической информацией;

– подвал сайта с информацией об авторском праве.

Рисунок 2.1 – Макет веб-страницы

Макет в веб-браузере будет выглядеть следующим образом: горизонтальное меню будет растянуто на всю ширину окна веб-браузера; центральная часть макета и подвал располагаться будут по центру экрана; ширина для центральной части и подвала будет резиновой.