logo
диплом эумкд рпп

2.3. Верстка веб-страниц

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

Описание блоков, из которых состоит макет комплекса:

– nav class = navbar navbar-inverse navbar-fixed-top role = navigation –блок навигации, который будет растянут по ширине экрана и будет всегда располагаться в верхней части веб-страницы;

– div class = container head_site – блок с пунктами горизонтального меню, распологается в блоке навигации;

– div class = container mid_site – центральный блок, который с помощью фреймворка Bootstrap разделен на две колонки; в узкой колонке будет располагаться вертикальное меню, а в широкой колонке будет находиться текстовое и функциональное содержание электронного комплекса;

– div class = col-md-3 left_menu – блок с вертикальной навигацией; в этом блоке будет размещена навигация по разделам и лабораторным работам дисциплины «Разработка программных приложений»;

– div class = col-md-9 content_area – блок, в котором будет отображаться содержание главной страницы учебно-методического комплекса, а также в этом блоке будут находиться ссылки на лекции и лабораторные работы;

– div class = container bottom_site – блок, в котором будет находиться подвал сайта или нижняя часть сайта;

– footer – подвал сайта; блок, в котором будет находиться информация о разработчике электронного учебно-методического комплекса.

Разработку электронного учебно-методического комплекса необходимо начать с создания папки «sedo-pages» на локальном сервере. Далее в этой папке желательно создать следующие папки:

– папка «css» – в этой папке будут находиться файлы стилей;

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

Следующим шагом в разработке будет создание файла «index.html». Создается данный файл следующим образом: в стандартном текстовом редакторе Notepad нужно нажать на кнопку главного меню «File»; затем выбрать пункт «Save As»; откроется диалоговое окно сохранения файла; в строке имени файла нужно написать имя файла с расширением .html; в строке типа файла в выпадающем списке нужно выбрать «All Files»; в выпадающем списке кодировок нужно выбрать UTF-8, делается это для того, чтобы кириллица корректно отображалась на веб-страницах.

После создания файла «index.html» в нем необходимо прописать HTML-код структуры веб-страницы с использованием блочного тега <div>. HTML-код макета электронного учебно-методического комплекса по дисциплине «Разработка программных приложений» будет выглядеть так, как показано в листинге 2.1.

Листинг 2.1:

<html>

<head>

<title></title>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="container head_site">

</div>

</nav>

<div class="container mid_site">

<div class="row">

<div class="col-md-3 left_menu">

<div class="list-group discipline_list_sections">

</div>

<div class="list-group discipline_list_labs">

</div>

</div>

<div class="col-md-9 content_area">

<div class="thumbnail">

<p class="list-group-item active top_title"></p>

<h4></h4>

<div class="caption-full">

</div>

<hr>

</div>

</div>

</div>

</div>

<div class="container bottom_site">

<footer>

<div class="row">

<div class="col-lg-3 empty_area">

</div>

<div class="col-lg-9 copyright_area">

<hr>

</div>

</div>

</footer>

</div>

</body>

</html>

В папке «css» необходимо создать файл с именем «style.css». Создается этот файл точно также, как и файл «index.html». Единственное, что изменится, это расширение сохраняемого файла. В данном случае файлу нужно указать расширение .css. Файл «style.css» будет содержать описание визуального представления блочных элементов и дизайн отдельных тэгов электронного учебно-методического комплекса.

Большая часть описания стилей классов, которые используются при верстке макета, находится в файле «bootstrap.min.css». Этот файл является частью фреймворка Bootstrap. В данном случае для разработки макета веб-страниц электронного учебно-методического комплекса была использована сеточная система. Данная система основывается на следующих компонентах:

– контейнеры – блоки, которые имеют класс .container;

– ряды – блоки, которые описываются классом .row;

– адаптивные блоки – блоки, в которых располагаются колонки, например, col-md-9.

Контейнеры – это блоки, которые являются фундаментом разметки, то есть ряды и адаптивные блоки никак не могут быть расположены вне области контейнера. Во фреймворке Bootstrap существует два вида контейнеров: адаптивно-фиксированый и адаптивно-резиновый контейнеры [29].

Ряды – это блоки, которые предназначены для расположения в них адаптивных блоков. Ряды содержат в себе колонки, а также их разрешается помещать в контейнеры и адаптивные блоки [29].

Адаптивные блоки – это главные элементы адаптивного макета. Именно эти блоки решают, как будет отображаться макет веб-страниц на различных устройствах и при разных разрешениях экрана. Адаптивные блоки размещаются друг за другом строками. Одна строка может содержать такое число адаптивных блоков, сумма колонок которых не превышает число двенадцать. Блоки, которые не поместились в одну строку, располагаются на следующей строке [29].

Описание классов .container, .row, .col-md-3, .col-md-9 и многих других классов, а также описание правила @media для различных ситуаций содержится в файле «bootstrap.min.css». Фрагмент кода, содержащийся в файле «bootstrap.min.css», представлен в листинге 2.2.

Листинг 2.2:

.nav {

display: block;

}

.navbar {

position: relative;

min-height: 50px;

margin-bottom: 20px;

border: 1px solid transparent;

}

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

@media (min-width:992px) {

.container {

width: 970px;

}

}

.row {

margin-right: -15px;

margin-left: -15px;

}

.col-md-3 {

width: 25%;

position: relative;

min-height: 1px;

padding-right: 15px;

padding-left: 15px;

}

.col-md-9 {

width: 75%;

position: relative;

min-height: 1px;

padding-right: 15px;

padding-left: 15px;

}

@media (min-width:992px) {

.col-md-3, .col-md-9 {

float: left;

}

}

Чтобы применить стили для веб-страницы необходимо файл «style.css» подключить к файлу «index.html». Для этого в HTML-файле, между тегами <head> и </head> необходимо добавить следующие строчки кода, как показано в листинге 2.3.

Листинг 2.3:

<link href="css/sode-pages.style.css" rel="stylesheet">

Теперь необходимо установить фреймворк Bootstrap. Для этого необходимо файлы «bootstrap.min.css» и «bootstrap.min.js» подключить к файлу «index.html». Делается это аналогичным образом, как и с файлом «style.css»: между тегами <head> и </head> необходимо прописать следующие строчки кода, как показано в листинге 2.4.

Листинг 2.4:

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<link href="css/bootstrap.min.css" rel="stylesheet">

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

Рисунок 2.2 – Сверстанная веб-страница

Сверстанный макет электронного учебно-методического комплекса по дисциплине «Разработка программных приложений», благодаря фреймвору Bootstrap, является адаптивным [29]. Дизайн веб-страницы электронного комплекса будет изменяться в зависимости от размера окна браузера или разрешения экрана. Это означает, что содержание веб-страницы всегда будет находиться в видимой области окна веб-браузера, то есть горизонтальная прокрутка будет отсутствовать. Отсутствие горизонтальной прокрутки является одним из требований, предъявляемых при разработке к электронному учебно-методическому комплексу [28].