Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

Разработка современного сайта библиотеки

Содержание:

Введение

Библиотеки, в последнее время, теряют свою актуальность, в следствии появления новых, более доступных, технологий, в том числе и web.

Для курсового проекта было взято задание по созданию сайта-визитки электронной библиотеки, который смог бы актуализировать реальную библиотеку для читателей.

Существует 2 направления электронных библиотек:

  1. Электронная библиотека, с содержанием реальной библиотеки, которая отражает пользователям реальную картотеку.
  2. Электронная библиотека, которая не имеет физического содержания, и вся ее картотека находится в открытом(\платном) доступе через web-сайт.

Для реализации был принят первый вариант, т.к. по заданию курсового проекта у нас имеется реальная библиотека, которую требуется сделать более удобной для читателя.

Из особенностей проекта, хотелось бы отметить:

  1. Автономность сайта – web-страница способна окупать стоимость своего размещения, т.к. на нем предусмотрено платное место для рекламы.
  2. Удобную и простую навигацию по сайту.
  3. Расширенный список контактов, в том числе и размещение физической библиотеки, с помощью отметки на карте.

Основная часть

Назначение программы

Целью данной работы является разработка веб-сайта «Электронная библиотека» с возможностью последующего размещением в сети Интернет.

Сайт должен обеспечивать реализацию следующих функций:

Информационная.

Сайт должен предоставлять доступ к информации о компании, картотеке, новостях кампании, а также размещать контактную информацию

Рекламная.

Сайт должен содержать информацию для читателя:

Как добраться до библиотеки, контактный номер телефона, часы работы, адрес, электронную почту, информацию о предоставляемой литературе.

Навигация по разделам и подразделам.

На данной странице осуществляется переход на различные разделы сайта.

Каждая страница выполнена в виде окна. С каждого окна предусмотрен переход на подразделы. С каждой страницы предусмотрен переход на начальную страницу.

Пользовательский интерфейс и описание контента

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

Контент блоке, где описан контент каждой страницы; блока рекламы, где размещается реклама.

Пользовательское меню представлено 4 страницами:

  • Новости(Главная страница) – эта страница отображает новости, которые библиотека хотела бы рассказать, сами новости реализованы XML-файлом.
  • О нас – страница с информацией о библиотеке
  • Каталог – Страница, где хранится каталог библиотеки, содержащий электронную копию ее картотеки(рис.1)
  • Контакты – Страница, где описывается контактная информация библиотека, а так же ее местоположение(рис.2)

рис.1

рис.2

Общие требования к сайту

Стилистическое оформление

Стилистическое оформление сайта, соответствует информационному стилю, но также имеет индивидуальные черты. В соответствие с этим стилистическое оформление сайта относится к гибридному стилю или же индивидуальному.

Основным шрифтом в стиле является: Comic Sans MS (Курсивный), для текста выбрано 2 основных цвета:

  • Золотой;
  • Серебрянный;

Данные два цвета хорошо вписываются в общую гамму сайта. Для заглавного текста ширина и высота по умолчанию стоит 24 пикселя, а для обычного текста 18 пикселей.

Требования к браузеру:

Сайт должен обеспечивать корректное отображение данных в следующих браузерах: Internet Explorer 8.0 и выше (Microsoft), Opera 12.0 и выше (Opera Software), Netscape 11.0 и выше (AOL Netscape).

Требования к верстке:

Сайт должен быть оптимизирован для просмотра при разрешении 1024*768, 1280*1024 без горизонтальной полосы прокрутки и без пустых (белых) полей для основных типов разрешения.

Мета-теги и контент сайта

На этапе изготовления сайта должны быть настроены с учетом требований поисковых систем, что обеспечить продвижение сайта по ключевым словам в руcскоязычных поисковых системах Yandex, Google.

Анализ исходных данных и выбора программного обеспечения

Анализ выбора программного обеспечения

Web Page Maker – это очень простой инструмент для создания WEB – страниц. С его помощью можно создать свою страничку даже не обладая никакими знаниями HTML. Просто перетаскивая мышкой на рабочее пространство программы изображения, текст, музыку и видео. Во время работы с лёгкостью можно передвигать объекты по всей странице. Web Page Maker содержит несколько высококачественных шаблонов, которые помогут начать работу. Также вместе с программой поставляются различные эскизы, Java - скрипты, таблицы, формы и т. д. В программу встроен FTP-менеджер, с помощью которого можно опубликовать свой сайт в интернете.

WebSite X5 Evolution - полноценная программа для создания web-сайтов, за несколько шагов пользователь сможет создавать и опубликовывать профессиональные веб-сайты и онлайн-магазины. Не требует знаний программирования, имеет более 1000 готовых шаблонов веб-сайтов, проста в использовании, по сравнению с другими программами по визуальному проектированию сайтов. Web-страницы созданные в данной программе совместимы с разными интернет-браузерами, могут просматриваться с мобильных телефонов и индексируются поисковыми системами. Программой могут пользоваться пользователи, которым нужно простое и быстрое создание собственного веб-сайта или веб-галереи. Бизнесмены могут использовать данную программу для профессионального создания корпоративных веб-сайтов или онлайн-магазинов. Данная программа не имеет никаких ограничений по количеству создаваемых страниц и веб-сайтов.

HTML - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

В выше перечисленных программах есть такие недостатки как:

Работа с таблицами. В программах имеется отдельная утилита для редактирования таблиц (Table Editor), но она не интегрирована в главную программу и требует экспортирования таблиц в виде графического объекта, что затрудняет работу с ним.

Требования к аппаратным и программным средствам при установке программы.

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

Не во всех программах включены в библиотеку различные заготовки: библиотек Java - скриптов, таблиц, форм, фреймов, изображений и множества дополнительных функций.

Не во всех программах содержится несколько высококачественных шаблонов, которые ещё больше упростят задачу по созданию собственного сайта.

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

Так же для реализации понадобилась технология AJAX использующаяся в jQuery. AJAX, или, более длинно, Asynchronous Javascript And Xml - технология для взаимодействия с сервером без перезагрузки страниц.

Для удобства верстки были использованы CSS, которые позволяют описывать блоки стилей, и подключать их внутри HTML-тэгов.

Для облегчения структуры web-страницы и редактирования контента использовалась XML-технология, которая подключалась с помощью фреймворка jQuery.

В качестве HTML-редактора был взят Sublime text 3, который представляет наиболее удобный интерфейс работы с HTML-Разметкой.

Анализ исходных данных

Из собранных исходных данных для создания сайта «Электронной библиотеки» можно выделить собранные из интернета новости, которые размещены на странице «Новости». Собранный каталог книг, имитирующий картотеку библиотеки занесенный в раздел сайта «Каталог» в виде таблицы. Контакты и адрес существующей библиотеки для реализации раздела «Контакты». Так же была подготовлена статья об истории создания библиотеки для презентационного раздела «О нас».

Разработка приложения

Разработка структуры web-страницы

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

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

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

Рисунок 3 Главная страница сайта.

На странице «О нас» размещена история создания библиотеки, краткое описание ее фонда, и описание отраслей, в которых участвует библиотека. Блок «О нас» представлен на рисунке 4.

Рисунок 4. О нас.

На странице «Каталог» будет представлена таблица картотека которая отображает книжный фонд библиотеки и состоит из:

  • Номера книги
  • Названия
  • Жанра
  • Авторов

Страница «Каталог» показана на рисунке 5.

Рисунок 5. Страница Каталог.

Страница «Контакты» будет реализована из 2 блоков:

  • Таблица, содержащая в себе контактную информацию библиотеки
  • Яндекс карта, где отмечено местонахождение библиотеки

Страница контакты показана на рисунке 6.

Рисунок 6. Страница контакты.

Описание процесса создания сайта

Каждый html-документ начинается с объявления типа документа, в нашем случае это было реализовано с помощью html-тэга <!DOCTYPE html>, который указывает, на тип открываемого документа.

<head></head>(Далее Хедер) - это тэг, который объявляет титульную часть html-документа. Пример показан на рисунке 7.

Рисунок 7. Пример использования html-тэга <head></head>

Внутри хедера у нас находится объявление <title></title>, который используется для объявления заголовка страницы. Далее идет <meta/>-тэг, который позволяет нам добавлять в него мета-тэги или файл содержащий их, а так же указать кодировку страницы. Мета-тэги используются для поиска внутри поисковых систем.

Рисунок 8. Мета-тэги.

Далее представлена ссылка на .css файл, в котором содержатся стили блоков, согласно их классам.

Ниже представлено подключение jQuery фреймворка c помощью тэга <script>.

Рисунок 9. Подключение фреймоворка.

Далее мы объявляем скрипта Javascript:

Рисунок 10. Функция на JavaScript языке

Первая функция(показана на рисунке 11), в которой мы ожидаем конца загрузки файла с помощью процедуры .ready, после чего выполняем функцию, которая получает на вход запрос типа GET, по адресу(URL), и если тип файла совпадает с xml, то ждем успешного завершения следующей функции – xmlParser(показана на рисунке 12), которая получает на вход xml-файл, загружает его и проходит по каждой его строке, в результате чего, добавляет в него html-тэги и размещает в классе content.

Рисунок 11. Первая функция

Рисунок 12. Функция xmlParser

Тэг <body></body>(Далее Тело(Показано на рисунке 13.)) – служит для описания блоков страницы, их стили описаны в .css файле. Каждый блок

Рисунок 13.

<div></div>, который делит страницу на основные контент-блоки,

принадлежит определенному стилю, на что указывает тэг id, каждый класс которого описан в .css файле(см. Приложения)

Примеры использования <div></div> с указанием принадлежности их к классам показана на рисунках ниже:

Меню на сайте реализовано <div></div> блоком, класса menu, где расположены ссылки на другие страницы сайта(см. Рисунок 14.).

Рисунок 14. Ссылки меню сайта.

Для реализации таблиц используется тэг <table></table>, где <tr> - это область таблицы, а <td></td> - это строки таблицы. Пример использования таблицы показан на рисунке 15.

Рисунок 15. Таблица и ее реализация

Так же на веб-странице присутствует использование стороннего API Яндекса, оно реализовано с помощью ссылки на API, с сохраненным гео-тэгом, внутри контейнера <iframe></iframe>, который соответствует местоположению библиотеки. Реализация данной технологии показана на рисунке 16.

Рисунок 16. Пример использования стороннего API.

Полный исходный код всех страниц, а так же .css файл находятся в Приложении

Заключение

Библиотекам, в нынешнее время, приходится адаптироваться к современным технологиям, а следственно, предоставлять информацию о себе в новых форматах, например, таких, как web-страница.

При написании данного курсового проекта были проанализированы существующие языки и редакторы создания сайта, рассмотрены источники по теме работы, разработан сайт по теме «Электронная библиотека», а также разработано руководство пользователя.

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

Таким образом, можно сказать, что цель работы достигнута, а поставленные задачи выполнены.

Список источников и литературы

Литература

Дуванов А. А. Web-конструирование. – Петербург: 2009. - 384 с.

Едомский Ю. Е. Техника Web-дизайна для студента. – Петербург: 2010. - 491 с.

Крамер Э. HTML: наглядный курс Web-дизайна. - Киев: 2009. - 304 с.

Леонтьев Б. Web-дизайн. Руководство пользователя. - Киев: 2011. - 384 с.

Печников В. Н. Создание Web-страниц и Web-сайтов. - М.: Триумф: 2010. - 370 с.

Роббинс Д. Web-дизайн. Справочник. - "КУДИЦ-ПРЕСС": 2009. - 816 с.

Смирнова И. Е. Начала web-дизайна. –Петербург: 2010. - 491 с.

Интернет-ресурсы

HTML и Web дизайн для начинающих: [Электронный ресурс]. -http://sovet.h1.ru (дата обращения: 29.03.2014)

Основы CSS и HTML: [Электронный ресурс]. - http://www.web-lesson.ru (дата обращения: 1.03.2014)

Создание сайтов: HTML: [Электронный ресурс]. - http://www.codeharmony.ru (дата обращения: 15.05.2014)

Создание страниц сайта с помощью HTML: [Электронный ресурс]. -http://roumik.ru (дата обращения 31.03.2014)

Создание шаблона сайта с помощью CSS: [Электронный ресурс]. -http://ruseller.com (дата обращения 1.05.2014)

Приложение

Исходный код

Главная страница(Новости)

<!DOCTYPE html>

<html>

<head>

<title>Новости</title>

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

<link rel="stylesheet" href="style.css">

<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>

<script type="text/javascript">

$(document).ready(function () {

$.ajax({

type: "GET",

url: "xml/news.xml",

dataType: "xml",

success: xmlParser

});

});

function xmlParser(xml) {

$('#load').fadeOut();

$(xml).find("new").each(function () {

$(".content").append('<div id=\"genContentMain\"><table><tr><td><img src=\"img/news/' + $(this).find("img").text() + "\" width=\"200\" height=\"200\">" + '</td><td><center><h1>' + $(this).find("title").text() + '</h1></center><hr>Дата добавления: '+ $(this).find("data").text() + '<hr><br><p>' + $(this).find("text").text() + '</p></td></tr></table></div><br>');

});

}

</script>

</head>

<body>

<div id="top">

Московская областная государственная научная библиотека им. Н.К. Крупской

</div>

<div id="menu">

<a href="index.html">Новости</a><br>

<a href="index_about.html">О нас</a><br>

<a href="index_catalog.html">Каталог</a><br>

<a href="index_contacts.html">Контакты</a>

</div>

<div id="content" class="content">

<h1>Главная страница</h1>

<hr>

<h1>Информация о сайте</h1>

<p>Сайт посвященный Электронной библиотеке, созданной Артуром Стахеевым, для курсового проекта за 3 курс<br>

На сайте имеется 4 страницы следующего содержания:

<br>-Новости, содержащая информацию о контенте web-страницы и последние новости сайта.

<br>-О нас, страница с информацией о кампании, которая предоставляет услуги библиотеки.

<br>-Каталог, собственно сами книги библиотеки.

<br>-Контакты, номер телефона кампании, адрес, а так же электронная почта кампании.

</p>

<hr>

<br>

</div>

<div id="money">

<h1>

Здесь может быть ваша реклама!!!

</h1>

</div>

<div id="foot">

<p>© Оформление сайта. «Электронная библиотека» для курсового проекта, 2017<p>

</div>

</body>

</html>

Страница «О нас»

<!DOCTYPE html>

<html>

<head>

<title></title>

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

<link rel="stylesheet" href="style.css">

</head>

<body>

<div id="top">

Московская областная государственная научная библиотека им. Н.К. Крупской

</div>

<div id="menu">

<a href="index.html">Новости</a><br>

<a href="index_about.html">О нас</a><br>

<a href="index_catalog.html">Каталог</a><br>

<a href="index_contacts.html">Контакты</a>

</div>

<div id="content">

<h1>О нас</h1>

<hr>

<h1>История создания библиотеки</h1>

<p>

ГАУК МО «Московская областная государственная научная библиотека им. Н.К. Крупской» является центральной государственной библиотекой области, научно-исследовательским и организационно-методическим центром по библиотечному обслуживанию, обеспечивающим развитие библиотечного дела, взаимодействие библиотек в создании и использовании библиотечных ресурсов на территории Московской области.

Книжный фонд «МОГНБ им. Н. К. Крупской» составляет 2,6 млн. единиц хранения по различным отраслям знаний. Это одно из самых крупных книжных собраний Центрального Федерального округа. Областная научная библиотека формирует фонды краеведческой и местной печати, изданной на территории области, является центром краеведческой библиографии. Как информационный и научно-методический центр для библиотек области МОГНБ является разработчиком и проводником региональной библиотечной политики, проводит текущий библиотечный мониторинг, принимает участие в разработке краткосрочных и долгосрочных библиотечных программ, региональных нормативно-законодательных документов, проводит самостоятельно и участвует в исследованиях под руководством республиканских библиотек.

1 января 2009 года Государственному автономному учреждению культуры Московской области «Московская областная государственная научная библиотека им. Н.К. Крупской» исполнилось 90 лет.

</p>

<table>

<tr>

<td>

<img src="img/pokrovskii.jpg">

</td>

<td>

<p>

У истоков создания в декабре 1918 года Московской Центральной губернской библиотеки, которая с первых шагов стала методическим центром для библиотек Москвы и Московской губернии, стоял видный библиограф и библиотековед Александр Александрович Покровский.

Он заведовал библиотекой с декабря 1918 по ноябрь 1927 г. В 1924 году в Московской центральной библиотеке было предпринято впервые в практике массовых библиотек создание предметного каталога. В 1925 году в Московскую Центральную губернскую библиотеку вливается Центральная справочная библиотека, в помещении которой и размещается новая объединенная библиотека. В феврале 1926 года при Губполитсовете создаётся «Кабинет деревенского библиотекаря», который вскоре вливается в методический отдел губернской библиотеки, что еще больше повысило ее роль в оказании методической и практической помощи сельским библиотекам.

</p>

</td>

</tr>

</table>

</div>

<div id="money">

<h1>

Здесь может быть ваша реклама!!!

</h1>

</div>

<div id="foot">

<p>© Оформление сайта. «Электронная библиотека» для курсового проекта, 2017<p>

</div>

</body>

</html>

Страница «Каталог»

<!DOCTYPE html>

<html>

<head>

<title></title>

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

<link rel="stylesheet" href="style.css">

<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>

<script type="text/javascript">

$(document).ready(function () {

$.ajax({

type: "GET",

url: "xml/books.xml",

dataType: "xml",

success: xmlParser

});

});

function xmlParser(xml) {

$('#load').fadeOut();

var i = 1;

$(xml).find("book").each(function () {

$(".table_dark").append('<tr><td>'+i+'</td><td>' + $(this).find("name").text() + '</td><td>' + $(this).find("type").text() + '</td><td>'+ $(this).find("author").text()+'</td></tr>');

i = i +1;

});

}

</script>

</head>

<body>

<div id="top">

Московская областная государственная научная библиотека им. Н.К. Крупской

</div>

<div id="menu">

<a href="index.html">Новости</a><br>

<a href="index_about.html">О нас</a><br>

<a href="index_catalog.html">Каталог</a><br>

<a href="index_contacts.html">Контакты</a>

</div>

<div id="content">

<h1>Каталог книг</h1>

<hr>

<center>

<table class="table_dark">

<tr>

<td>

<h1>

</h1>

</td>

<td>

<h1>

Название:

</h1>

</td>

<td>

<h1>

Жанр:

</h1>

</td>

<td>

<h1>

Авторы:

</h1>

</td>

</tr>

</table>

</center>

</div>

<div id="money">

<h1>

Здесь может быть ваша реклама!!!

</h1>

</div>

<div id="foot">

<p>© Оформление сайта. «Электронная библиотека» для курсового проекта, 2017<p>

</div>

</body>

</html>

Страница «Контакты»

<!DOCTYPE html>

<html>

<head>

<title></title>

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

<link rel="stylesheet" href="style.css">

</head>

<body>

<div id="top">

Московская областная государственная научная библиотека им. Н.К. Крупской

</div>

<div id="menu">

<a href="index.html">Новости</a><br>

<a href="index_about.html">О нас</a><br>

<a href="index_catalog.html">Каталог</a><br>

<a href="index_contacts.html">Контакты</a>

</div>

<div id="content">

<h1>Контактная информация</h1>

<hr>

<center>

<table class="table_dark">

<tr>

<td>

Адрес

</td>

<td>

Телефоны

</td>

<td>

E-mail

</td>

</tr>

<tr>

<td>

141077, Московская область, г. Королёв, пр-т Королёва, д. 24

</td>

<td>

(495) 511 05 46, 511 30 25,511 01 36

</td>

<td>

vopros@mognb.ru

</td>

</tr>

<tr>

<td>

141207, Московская область, г. Пушкино, ул. Тургенева, д. 24

</td>

<td>

(496) 539 60 66, (496) 539 60 77

</td>

<td>

rc@mognb.ru

</td>

</tr>

</table>

<center>

<h1>Расположение в городе Королеве<h1><hr><br>

<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A07fe287e5c4e7e56bb112271a9c5b9d6b5dc44727be325b173e573a014fc4101&amp;source=constructor" width="500" height="400" frameborder="0"></iframe>

</center>

</center>

</div>

<div id="money">

<h1>

Здесь может быть ваша реклама!!!

</h1>

</div>

<div id="foot">

<p>© Оформление сайта. «Электронная библиотека» для курсового проекта, 2017<p>

</div>

</body>

</html>

Исходный код файла со стилями

*{

padding: 0px;

margin: 0px;

font-size: 18px;

color: rgb(220, 220, 220);

font-family: "Comic Sans MS", cursive;

}

body {

background-color: rgba(26,26,26,1);

}

#genContentMain{

border: 2px solid rgb(255, 220, 51);

}

.table_dark {

font-family: "Comic Sans MS", cursive;

font-size: 14px;

width: 640px;

text-align: left;

border-collapse: collapse;

background: rgba(26,26,26,1);

margin: 10px;

}

.table_dark th {

color: rgb(220, 220, 220);

padding: 12px 17px;

}

.table_dark td {

color: rgb(220, 220, 220);

border: 1px solid rgb(255, 220, 51);

padding: 7px 17px;

}

h1{

color: rgb(255, 220, 51);

font-size: 25px;

text-align: center;

}

p{

text-indent: 20px;

padding-left: 10px;

padding-right: 10px;

text-align: justify;

font-size: 18px;

color: rgb(220, 220, 220);

}

a {

width: 30%;

text-decoration: none;

outline: none;

display: inline-block;

margin: 10px 20px;

padding: 10px 30px;

position: relative;

border: 2px solid #f1c40f;

color: #f1c40f;

text-align: center;

font-size: 14px;

font-family: 'Montserrat', sans-serif;

transition: .2s;

}

a:after {

content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

width: 100%;

height: 100%;

margin: auto;

font-size: 14px;

border: 2px solid rgba(0,0,0,0);

transition: .2s;

}

.button-container a:hover:after {

border-color: #f1c40f;

width: calc(100% - 10px);

height: calc(100% + 10px);

}

#top{

color: rgb(0, 0, 0);

font-size: 30px;

width:100%;

height: 45px;

background-color: rgb(201, 192, 187);

border-bottom: 2px outset rgb(244,196,48);

text-align: center;

/*background-color: red;*/

}

#menu{

text-align: center;

float: left;

margin-top: 5px;

width: 10%;

height: 600px;

background-color: rgba(21, 23, 25, 0.3);

border: 2px outset black;

border-collapse: 10px;

}

#content{

float: left;

margin-top: 5px;

margin-left: 0.5%;

/*padding-left: 1%;*/

width: 76%;

min-height: 900px;

background-color: rgba(21, 23, 25, 0.3);

border: 2px outset black;

border-collapse: 10px;

text-align: left;

font-family: "Times New Roman", Georgia, Serif;

font-size: 20px;

}

#money {

float: left;

margin-top: 5px;

margin-left: 0.5%;

width: 12%;

height: 700px;

background-color: rgba(21, 23, 25, 0.3);

border: 2px outset black;

border-collapse: 10px;

}

#foot{

float:left;

width:100%;

background-color: rgb(0, 0, 0);

border-top: 2px outset rgb(244,196,48);

height: 40px;

margin-top: 5px;

font-size: 22px;

}

Исходный код подключаемого xml-файла

Файл с контентом новостей

<?xml version="1.0" encoding="utf-8"?>

<list>

<new>

<img>1.jpg</img>

<title>Стало известно главное слово 2017 года</title>

<data>12.12.2017</data>

<text>В топ-10 словаря Merriam-Webster оказались слова, связанные с Трампом и премией "Оскар".</text>

</new>

<new>

<img>2.jpg</img>

<title>В 36 лет известный хореограф впервые стал отцом.</title>

<data>11.12.2017</data>

<text>Жена-итальянка родила долгожданную дочь Евгению Папунаишвили</text>

</new>

<new>

<img>3.jpg</img>

<title>Пострадавшую во время пожара Леру Массква госпитализировали в Москве</title>

<data>10.12.2017</data>

<text>Пострадали также сын и муж исполнительницы.</text>

</new>

<new>

<img>4.jpg</img>

<title>В Москве сорвали показ резонансного фильма про Донбасс "Полет пули"</title>

<data>07.12.2017</data>

<text>Протестовавших из кинозала вывели полицейские - под аплодисменты посетителей фестиваля "Артдокфест".</text>

</new>

</list>

Файл с информацией о книгах

<?xml version="1.0" encoding="utf-8"?>

<books>

<book>

<name>Когда рыдают девы</name>

<type>Исторический детектив, Исторические любовные романы</type>

<author>Кэндис Проктор</author>

</book>

<book>

<name>Жили люди на Бикини, жили люди на Атту</name>

<type>Научная Фантастика</type>

<author>Уильям Тенн</author>

</book>

<book>

<name>Теплый дождь</name>

<type>Проза для детей</type>

<author>Альберт Лиханов</author>

</book>

<book>

<name>Милый друг</name>

<type>Классическая проза</type>

<author>Ги Мопассан</author>

</book>

<book>

<name>Бабилей (сборник рассказов)</name>

<type>Советская классическая проза</type>

<author>Федор Абрамов</author>

</book>

<book>

<name>Уйти по воде</name>

<type>Современная русская и зарубежная проза</type>

<author>Нина Федорова</author>

</book>

</books>