32

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

«БЕЛГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ»

(НИУ «БелГУ»)

ИНСТИТУТ ИНЖЕНЕРНЫХ ТЕХНОЛОГИЙ И ЕСТЕСТВЕННЫХ НАУК

КАФЕДРА МАТЕМАТИЧЕСКОГО И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИНФОРМАЦИОННЫХ СИСТЕМ

Методы и средства программирования для Интернет

Отчет по лабораторной работе №6

студента 2 курса группы 07001402

Черноморец Дарьи Андреевны

URL для запуска сайта на выполнение:

Проверили:

Михелев Владимир Михайлович

Кузнецов Константин Владимирович

Белгород 2015

Предметная область: Мониторинг малых рек Белгородской области.

Тема работы: Каскадные таблицы стилей.

Задание

1. Изучить основы синтаксиса CSS.

2. Изучить Bootstrap — это CSS/HTML фреймворк для создания сайтов.

3. Выполнить примеры.

4. Выполнить индивидуальное задание (смотри ниже) по теме курсовой работы. Можно использовать в качестве основы сайт разработанный при выполнении предыдущей лабораторной работы (продолжить разработку сайта).

• реализовать 3 способа использования CSS.

• реализовать использование фреймворка Bootstrap.

5. Составить электронный отчет о проделанной работе.

Теоретическая часть

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

Подключить таблицы стилей можно следующими способами:

1. Inline-описание

2. Описание в секции заголовка

3. Внешний файл

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

Самое просто - это inline-описание, или описание, встроенное в тег при помощи style.

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

Его действие распространяется на всю страничку. Происходит это при помощи классов.

Также можно переопределять стандартные теги.

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

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

Основное отличие между классами элементов и идентификаторами элементов в том, что в документе какой-нибудь класс может быть присвоен сразу нескольким элементам, а идентификатор — только одному. Также отличие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.

Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе.

Bootstrap — это CSS/HTML фреймворк для создания сайтов. Другими словами, это набор инструментов для вёрстки. В нём есть ряд преимуществ, благодаря которым BS считается самым популярным из себе подобных. Преимущества бутстрапа:

1. Скорость работы — благодаря множеству готовых элементов вёрстка с бутстрапом занимает значительно меньше времени;

2. Масштабируемость — добавление новых элементов не нарушает общую структуру;

3. Лёгкая настраиваемость — редактирование стилей производится путём создания новых css-правил, которые исполняются вместо стандартных. При этом не требуется использовать атрибуты типа «!important»;

4. Большое количество шаблонов — о шаблонах Bootstrap я напишу далее;

5. Огромное сообщество разработчиков;

6. Широкая сфера применения — Bootstrap используется в создании тем для практически любой CMS (OpenCart, Prestashop, Magento, Joomla, Bitrix, WordPress и любые другие), в том числе для одностраничных приложений.

Bootstrap использует 12-ти колончатую разметку.

Имеет основные инструменты:

1. Сетки

2. Шаблоны

3. Типографи

4. Медиа

5. Таблицы

6. Формы

7. Навигация

8. Алерты

Например, можно изменять форму изображений при помощи классов:

<img src="..." alt="..." class="img-rounded"> – квадрат с закруглёнными углами

<img src="..." alt="..." class="img-circle"> – окружность

<img src="..." alt="..." class="img-thumbnail"> – квадрат в рамке

Выполнение работы

Разработанный код сайта:

Главная:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>Мониторинг малых рек</title>

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>

<div id="line">

<table class="tfirst">

<tr style="background-image:url(радуга.jpeg)">

<td class="bold24" width="160" height="47"><a href="Мониторинг малых рек главная.html" title="Главная">Главная</a></td>

<td class="bold24"><a href="Music Belgorod.html" title="Песня Белый город">Музыка</a>

</td>

<td class="bold24"><a href="Video river.html" title="Видео">Видео</a>

</td>

<td class="bold24"><a href="Список методов анализа.html" title="Список">Теория</a>

</td>

<td class="bold24" width="270"><a href="Map.html" title="Карта">Навигационная карта</a>

</td>

</tr>

</table>

</div>

<div id="line">

<table class="tfirst">

<tr style="background-image:url(лист.jpeg)">

<td width="100%" height="200"> <h1> Малые реки Белгородской области </h1> </td>

</tr>

</table>

</div>

<p>Белгородская область занимает площадь 21 134 км^{<small>2</small>}. Среднегодовая температура Белгородской области в целом +6,4&degC. Реки Белгородской области - типично равнинные, отличающиеся плавным продольным профилем, малыми уклонами, хорошо разработанными долинами с широкими поймами. Преобладающая часть рек данной области относится к категории малых, имеющих протяженность от 10 до 100 км. К ним относятся:</p>

<ul class=square>

<li><a href="#Везёлка" title="переход по странице вниз">Везелка</a>;</li>

<li><a href="#Нежеголь" title="переход по странице вниз">Нежеголь</a>;</li>

<li><a href="#Лопань" title="переход по странице вниз">Лопань</a> и другие.</li>

</ul>

<a name="Везелка"></a>

<h2>р.Везёлка</h2>

<p><img src="Везёлка.jpg" alt="Везёлка" class="leftimg" />

<strong>Везёлка</strong> (<em>Везеница, Болховец</em>) — река в Белгородской области. Является правым притоком реки Северский Донец и протекает по центральной части города Белгород. Имеет притоки:&nbspИскринка (левый приток, впадает возле села Стрелецкое) и Гостёнка (правый приток, впадает на окраине Белгорода). Длина Везёлки достигает 21 км.</p>

<p><blockquote class="kursiv">На берегах неширокой Везелки<br>

Растут деревья чудной красоты:<br>

Здесь тополя, березы, елки<br>

И ивы опустили ветви до воды.

<pre> Тамара Ивашкевич</pre></blockquote></p>

<a name="Нежеголь"></a>

<h2>р.Нежеголь</h2>

<p><img src="Нежеголь.jpg" alt="Нежеголь" class="rightimg"/>

<strong>Нежеголь</strong> — небольшая река Белгородской области России, приток Северского Донца. Устаревшее название: Нежегаль. Длина реки составляет 75 км, площадь бассейна 2878 км ^{<small>2</small>}. На реке Нежеголь в 5 километрах от её устья расположен город Шебекино.Питание реки преимущественно снеговое, первые несколько километров реки от истока пересыхают в летнее время.</p>

<a name="Лопань"></a>

<h2>р.Лопань</h2>

<p><img src="Лопань.png" alt="Лопань" class="leftimg"/>

<strong>Лопань</strong> — река в Харьковской области Украины и Белгородской области России, левый (самый крупный) приток реки Уды. Происхождение названия реки таково: Лопань — древнее славянское слово, означает «бьющая наружу, прорывающаяся вода» либо «колодец на болоте». Согласно В. И. Далю, это «колодезь на топи, на болоте».</p>

</body>

</html>

Музыка:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>Песня</title>

<style type="text/css">

body {background-image:url(небо.jpeg)!important}

.pnew{

text-align: center;

font-size:20px;

font-family: Times New Roman, Arial;

}

.h1new {

text-align: center;

font-family: Monotype Corsiva, Arial;

color: #0565BF;

font-style: italic;

}

</style>

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>

<div id="line">

<table class="tfirst">

<tr style="background-image:url(радуга.jpeg)">

<td class="bold24" width="160" height="47"><a href="Мониторинг малых рек главная.html" title="Главная">Главная</a></td>

<td class="bold24"><a href="Music Belgorod.html" title="Песня Белый город">Музыка</a>

</td>

<td class="bold24"><a href="Video river.html" title="Видео">Видео</a>

</td>

<td class="bold24"><a href="Список методов анализа.html" title="Список">Теория</a>

</td>

<td class="bold24" width="270"><a href="Map.html" title="Карта">Навигационная карта</a>

</td>

</tr>

</table>

</div>

<div id="line">

<table class="tfirst">

<tr style="background-image:url(лист.jpeg)">

<td width="100%" height="200"> <h1> Малые реки Белгородской области </h1> </td>

</tr>

</table>

</div>

<h1 class="h1new">"Белый город"</h1>

<p class="pnew"><audio src="Belgorod.mp3" controls autoplay="autoplay"> </audio></p>

<pre>

<p class="pnew">

Белый, белый, белый, белый город,

Он душой и сердцем всегда молод.

Белгород. День первого салюта,

Для всей России свята та минута.

Низкий поклон,

Вам, ветераны войны,

Вы защищал

Каждую пядь земли.

Ивы плакучие,

Склоняясь над тихой рекой,

Шептали, молили -

Живыми вернитесь домой.

Белый, белый, белый, белый город,

Он душой и сердцем всегда молод.

Белгород. День первого салюта,

Для всей России свята та минута.

Прохоровское поле –

Эхо прошедшей войны,

Памяти павших стали

Достойны сыны.

Афган и Чечня,

Белгородские парни в бою,

Они, как отцы,

Остаются в почётном строю.

Белый, белый, белый, белый город,

Он душой и сердцем всегда молод.

Белгород. День первого салюта,

Никто не забыт и ничто не забыто.

Белый, белый, белый, белый город,

Он душой и сердцем всегда молод.

Белгород. День первого салюта,

Для всей России свята та минута.

Белый, белый, белый, белый город,

Он душой и сердцем всегда молод.

Белгород. День первого салюта,

Для всей России свята та минута.

</p>

</pre>

</body>

</html>

Видео:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>Видео</title>

<style type="text/css">

body {background-image:url(маки.jpg)!important}

</style>

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>

<div id="line">

<table class="tfirst">

<tr style="background-image:url(радуга.jpeg)">

<td class="bold24" width="160" height="47"><a href="Мониторинг малых рек главная.html" title="Главная">Главная</a></td>

<td class="bold24"><a href="Music Belgorod.html" title="Песня Белый город">Музыка</a>

</td>

<td class="bold24"><a href="Video river.html" title="Видео">Видео</a>

</td>

<td class="bold24"><a href="Список методов анализа.html" title="Список">Теория</a>

</td>

<td class="bold24" width="270"><a href="Map.html" title="Карта">Навигационная карта</a>

</td>

</tr>

</table>

</div>

<div id="line">

<table class="tfirst">

<tr style="background-image:url(лист.jpeg)">

<td width="100%" height="200"> <h1> Малые реки Белгородской области </h1> </td>

</tr>

</table>

</div>

<h1 style="color:black">Видео "Красота Белгородской области" <h1>

<p style="text-align: center"><video src="Красота Белгородской области.mp4" controls="controls" width="80%" height="70%">

</video>

</body>

</html>