100701

Разработка веб-сайта департамента культуры Брянской области

Реферат

Информатика, кибернетика и программирование

Интерактивность на сайтах добавляется путем добавления в разметку html страниц скриптов программных модулей специально разработанных для этих целей. С помощью каскадных таблиц стилей в разметку можно добавлять элементы текстового или графического оформления сайта анимацию или звуковое сопровождение что способствует проявлению интереса пользователей к ресурсу а для разработчиков иметь внешне оригинальный в зависимости от конкретных задач сайт. Цель курсового проекта: разработка веб-сайта департамента культуры Брянской области.0 стала...

Русский

2018-02-05

172 KB

0 чел.

Содержание

Введение 6

1 Выбор программных и аппаратных средств 8

1.1 ИсторияHTML 8

1.2 Структура документа 11

1.3 Списки 12

1.4 Графика 13

1.5Таблицы в HTML 14

1.6 Карты-изображения 17

2 Разработкаweb–приложения 19

2.1 Вступление 19

2.2 Информация (разделы, подразделы) 19

2.3 Дизайн 22

2.4 Выбор платформы системы управления сайтом 22

2.5 Разметка структуры главной и внутренних страниц 25

2.6 Возможности визуального редактора TinyMCE 30

2.7 Добавление новой информации 30

Заключение 33

Список используемой литературы 34

Приложение 35

Введение

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

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

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

Набор HTML (аббревиатура от английского HyperText Markup Language – язык гипертекстовой разметки) страниц, собственно, и является тем самым сайтом в привычном его понимании. Возможность просматривать сайт, обращаться от одной странице к другой и возвращаться обратно осуществляется с помощью браузера (веб-обозреватель), дополнительной программе просмотра веб-страниц.

Интерактивность на сайтах добавляется путем добавления в разметкуhtml страниц скриптов – программных модулей, специально разработанных для этих целей. Взаимодействие пользователей и сайтов предоставляет возможность их разработчикам вывести на новый уровень обслуживания, предоставление и обработка  информации, которая впоследствии используется в различных сферах деятельности: сбор данных, маркетинговые исследования, реклама и другие.

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

Для хранения больших объемов данных и возможность ими оперировать, был разработан сервис PhpMyAdmin – веб-приложение с открытым кодом, написанное на языке PHP и представляющее собой веб-интерфейс для администрирования СУБД – система управления базами данных, она позволяет через браузер осуществлять администрирование сервера.

Цель курсового проекта: разработка веб-сайта департамента культуры Брянской области.

Задача: описать работу программного модуля «CMS Joomla».

Задача: разработать веб-сайт департамента культуры Брянской области.

1 Выбор программных и аппаратных средств

1.1 ИсторияHTML

HTML не является языком программирования, как полагают многие пользователи интернета, не имеющие опыта разработки веб-ресурсов. HTML (HyperText Markup Language) – это язык разметки документов в интернете, считывая который, браузер отображает веб-страницы.

Практически все веб-страницы содержат описание разметки и расстановки блоков на языке HTML или XHTML (Extensible HyperText Markup Language – расширяемый язык гипертекстовой разметки). В случае если код веб-ресурса написан на другом языке, он все равно преобразуется в HTML, чтобы веб-браузер смог его считать и отобразить как веб-страницу. В коде HTML страниц содержатся тексты, текстовые ссылки, ссылки на изображения, разметки таблиц, блоков, кнопок и форм, которые видны на сайте в окне браузера компьютера, планшета, ноутбука или мобильного телефона.

Язык гипертекстовой разметки HTML вместе с протоколомHTTP (HyperText Transfer Protocol – протокол передачи гипертекста) запатентовалТим Бернсом-Ли (Tim Berners-Lee)  с 1991 по 1993 год. Параллельно с этим, независимо от Тима Бернса, идею гипертекста предложил Роберт Кайо, в своих разработках CERN. Эти технологии вошли в основу концепции всемирной сети интернет, и используются по сей день. Изначально язык HTML был задумал для обмена информацией в электронном виде, между учеными университетов различных высших учебных заведений. Однако в результате он стал основой для всемирной сети интернет и получил больший успех, чем мог ожидать Тим Бернс.

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

Чуть позже, в марте 1995-го появилась версия 3, предложенная консорциумомW3C (World Wide Web Consortium, Консорциум Всемирной Паутины). В третьей версии уже появилась возможность создания таблиц, обтекание изображений текстом, отображение сложных математических формул, поддержка изображений в формате gif и множество других новых возможностей. ПроблемаHTML 3.0 была в том, что он не поддерживался многими браузерами того времени. Версия HTML 3.1 формально не существовала и была, скорее переходной к более стандартизированнойHTML версии 3.2. В ней были все нововведения HTML 3.0 и добавлены нестандартные элементы браузеров того времени – Masaic и Netscape Navigator.

Попутно с HTML, развивался и CSS (Cascade Style Sheets – каскадные таблицы стилей) – язык описания внешнего вида документа, стилей шрифтов, обрамления таблиц и блоков. В связи с этим, HTML пошел по пути упрощения и стал выполнять функцию разметки страницы, а настройки отображения веб-страниц стали храниться в отдельных файлах формата *.CSS.

Первым глобальным шагом такого упрощения в веб-интерфейсах стало появлениеHTML 4.0. Четвертая версия HTML была максимально очищена от архаизмов того времени. Скажем, из нее вычистили лишние теги, в частности, <font>, которые теперь заменяла технология CSS. Множество старых тегов разметки получили статус «нерекомендованные» (deprecaded). 

Одной из ветвей развития HTML 4 в 1998 году стало появление HTML с синтаксисом XML, который получил название XHTML 1.0.  Спецификация первой версии была утверждена 26 января 2000 года. Вторая версия XHTML должна была исключить совместимость с предыдущим XHTML 1.0 и предыдущими версиями HTML, однако разработка стандарта XHTML 2.0 была приостановлена в июле 2009 года.

Тем временем, HTML версии 4.0 развился в «HTML5». Первые черновые варианты HTML версии 5.0 появились в сети 20 ноября 2007 года, а спецификацияHTML 5.0 была утверждена 28 октября 2014 года. Она упростила жизнь и веб-разработчикам, и поисковым системам, а также в ней был сделан упор на разработку мобильных версий сайтов. В HTML 5.0 стала проще и понятнее структура документа, разметка страницы, стандартизировались блоки меню, «шапки» сайта, «подвала» (footer), панелей навигации, содержимого сайта. Следующая версия HTML – 5.2 (промежуточная 5.1 уже была и дорабатывается)  увидела свет в 2016 году и, в ней сделан больший упор на мобильные версии веб-сайтов.

В HTML5 реализовано множество новых синтаксических особенностей, например, добавлены элементы <video>, <audio> и <canvas>, а также возможность использованияSVG (Scalable Vector Graphics – масштабируемая векторная графика) иматематических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования стороннихAPI (Application Programming Interface – интерфейс прикладного программирования) и плагинов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы) и упрощать поиск документов в сети.

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

1.2 Структура документа

Любой HTML документ (веб-станица) должен иметь определенную структуру. Это позволит избежать возможных проблем при открытии страниц в браузерах. Основные теги, назовем их служебными, используются для понимания браузером, что им был открыт именноhtml документ, здесь браузер считывает основные параметры для корректного отображения веб-страницы.

Первое, что идет в документе HTML — указание версии (первая строка). Для корректной работы следует указывать данную строку в начале разметки: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Далее идет тег <html>, в конце страницы этот тег нужно закрыть, поставив </html>.

Затем идет область для верхней части сайта (шапки). Для этого служит тег <head>. В шапке мы указываем название нашей страницы, помещая заголовок страницы между тегами <title> и </title>. Далее в шапке указывается кодировка HTML документа <meta charset="utf-8">, указывать кодировку необходимо для правильно отображения русских символов в браузере, на сегодняшний день, для большинства случаев, рекомендовано использовать кодировкуutf-8. Закрываем область шапки тегом </head>.

Мета-тег <meta description …> – краткое содержание страницы (описание). Тег предназначен для поисковых систем, выдача документов по запросам пользователей, также основано на содержании текста этого тега.

Мета-тег <meta keywords…> – ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковых систем, чтобы не запутать пользователей. Используется для  релевантной (соответствующему предполагаемому запросу пользователя) выдачи документа, поскольку на различных страницах в интернете могут встречаться синонимы,  например: соединители для труб, соединители электрические, что, в конечном счете, не запутает пользователей, и они получат желаемый результат.

Тело страницы открывается тегом <body> и закрывается, соответственно, тегом </body>. В теле веб-страницы размещается, основной контент (содержание, то, что видит пользователь на экране монитора в браузере) — текст, изображение, видео,аудио и другая информация.

1.3 Списки

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

Любой список представляет собой контейнер <ul>, который устанавливает маркированный список, или <ol>, определяющий список нумерованный. Заканчиваются маркированные и нумерованные списки тегами: </ul> и </ol>. Каждый элемент списка должен начинаться с тега <li> и заканчиваться тегом </li>.

Пример маркированного списка:

<ul>

 <li>Первое значение;</li>

 <li>второе значение.</li>

 <!-- … и так далее. -->

</ul>

Пример нумерованного списка:

<ol>

 <li>Первое значение;</li>

 <li>второе значение.</li>

 <!-- … и так далее. -->

</ol>

Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера <dl></dl>, термин — тегом <dt></dt>, а его определение — с помощью тега <dd></dd>. Вложение тегов для создания списка определений продемонстрировано в примере:

<dl>

 <dt>Термин 1</dt>

<dd>Определение 1.</dd>

 <dt>Термин 2</dt>

  <dd>Определение 2.</dd>

 <!-- … и так далее. -->

</dl>

1.4 Графика

Для вставки графических элементов служит тэг <img>. Графика должна быть подготовлена предварительно в каком-либо графическом редакторе, либо получена с помощью цифрового аппарата или сканера, а можно просто взять уже готовое изображение.

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

Графика должна быть представлена в виде файлов с расширениями .jpg, .gif, .png – в частности, позволяет добавлять в изображение прозрачность.

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

Чтобы вставить графику в текст html-страницы надо указать имя и место хранения соответствующего файла. Если файл находится в той же папке, что и страница, то достаточно указать имя файла с расширением. Если графический файл находится в другой папке, то, помимо имени файла с расширением необходимо указывать путь к этому файлу, например, <imgsrc=”img/logo.jpg” />. Для перехода на родительскую папку в адресе пути к файлу добавляется «двоеточие» – исполненное точкой, например, <img src=”../img/picture1.jpg” />.

С помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном. По умолчанию, браузер автоматически размещает копии изображения таким образом, чтобы заполнить всю страницу или необходимую область.

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

Рамка придает изображению четкость и определенность. Для создания рамки служит атрибут BORDER тэга <IMG>. Используя этот атрибут можно указать толщину линии рамки в пикселях. Если указать нулевое значение, то рамка отображаться не будет. Пример: <imgsrc=”img/logo.jpgborder=”1” />.

1.5 Таблицы вHTML

Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

Заголовок для таблицы используем в контейнере <THEAD></THEAD>, для определения собственных стилей и поисковой оптимизации. А в контейнере <TBODY></TBODY> размещаем остальные данные. Чтобы структура разметки была более понятной.

Каждая строка начинается тэгом <TR> (Table Row – строка таблицы) и завершается тэгом </TR>. Отдельная ячейка в строке обрамляется парой тегов <TD> и </TD> (Table Data – данные таблицы) или <TH> и </TH> (Table Header – заголовок ячейки таблицы). Тег <TH> используется обычно для ячеек – заголовков таблицы, а <TD> – для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Ячейки, определенные тэгом <TD> по умолчанию отображают данные.

Для более сложных таблиц, где ячейка может захватывать несколько строк, используем атрибутROWSPAN, например, <tdrowspan=”2”>1.</td>. В строке, где ячейки захватывают более одного столбца, применяем атрибутCOLSPAN, например, <tdcolspan=”2”>2.</td>.

Тэги <TD> и <TH> не могут появляться вне описания строки таблицы <TR>. Завершающие теги </TR>, </TD> и </TH> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тег таблицы </TABLE> не может быть опущен.

Количество строк в таблице определяется числом открывающих тегов <TR>, а количество столбцов — максимальным количеством <TD> или <TH> среди всех строк. Часть ячеек могут не содержать никаких данных, такие ячейки описываются парой следующих подряд тегов — <TD>, </TD>. Если одна или несколько ячеек, располагающихся в конце какой-либо строки, не содержат данных, то их описание может быть опущено, а браузер автоматически добавит требуемое количество пустых ячеек. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается.

Таблица может иметь заголовок, который заключается в пару тегов <CAPTION> и </CAPTION>. Описание заголовка таблицы должно располагаться внутри тегов <TABLE> и </TABLE> в любом месте, однако вне области описания любого из тегов <TD>, <TH> или <TR>. Согласно спецификации языка HTML, расположение описания заголовка регламентировано более строго: оно должно располагаться сразу же после тега <TABLE> и до строки <TR>.

Пример разметки простой таблицы, размером 3×3 ячейки, где первая строка это заголовки столбцов:

<table>

<thead>

<tr>

 <th>Столбец 1.Заголовок 1</th>

<th>Столбец 2. Заголовок 2</th>

<th>Столбец 3.Заголовок 3</th>

  </tr>

 </thead>

 <tbody>

<tr>

 <td>Строка 1.Столбец 1</td>

<td>Строка 1. Столбец 2</td>

<td>Строка 1. Столбец 3</td>

  </tr>

<tr>

 <td>Строка 2. Столбец 1</td>

<td>Строка 2. Столбец 2</td>

<td>Строка 2. Столбец 3</td>

  </tr>

 </tbody>

</table>

1.6 Карты-изображения

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

В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.

Для указания браузеру, что изображение является картой, применяется атрибут USEMAP. Он является ссылкой на описание конфигурации карты, которая задается тегом <MAP>. Значение атрибута NAME данного тега должно соответствовать имени в USEMAP. Для задания активной области, являющейся ссылкой на HTML-документ, используется тег <AREA>.

Атрибуты тега AREA:

  • SHAPE определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
  • ALT добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран выводится только при наведении курсора на нее.
  • COORDS задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе – по вертикали. Список координат зависит от формы области.

Для окружности задаются три числа – координаты центра круга и радиус. Например, <area shape="circle" coords="230,340, 100" href="circle.html">.

Для прямоугольника — координаты левого верхнего и правого нижнего угла. Например, <area shape="rect" coords="24,18, 210,56" href="rect.html">.

  • HREF определяет адрес ссылки для области. Правила записи такие же, как и для тега <A>.

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

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

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

2.1 Вступление

На сегодняшний день компьютер, с подключением к интернету есть практически в каждом доме, при этом увеличилась доступность к коммерческим и другим некоммерческим сервисам. В связи этой с растущей компьютеризацией в стране, в структурах государственной власти назрело решение о создании официальных интернет сайтов для государственных структур: Статья 10. Организация доступа к информации о деятельности государственных органов и органов местного самоуправления, размещаемой в сети «Интернет» (в редакции Федерального закона от 11.07.2011 №200-ФЗ).

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

2.2 Информация (разделы, подразделы)

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

Основные разделы сайта для навигации меню:

«Главная» – главная страница представляет собой краткий перечень материалов из категорий для показа наиболее важной, в том числе последней информации: произошедшие события, анонсы будущих событий, афиша праздничных мероприятий, ссылки на дополнительные материалы и сторонние публикации, а также ссылки на сайты государственных структур.

«Структура» – раздел представляет собой график, на котором расположена иерархия структуры департамента культуры Брянской области.

«Для СМИ» – в данном разделе публикуется информация для средств массовой информации: приглашения принять участие в пресс-конференциях, выставках, других мероприятиях, промо-материалы.

«Афиша» – этот раздел состоит из двух подразделов, где в основном разделе публикуется информация о всех мероприятиях проводимых государственными автономными учреждениями культуры  по всей Брянской области; второй подраздел – «Афиша/Архив» содержит материалы публикуемые, учреждениями культуры города Брянска, данный раздел отображается на главной странице.

«Учреждения» – раздел содержит перечень учреждений культуры Брянской области, контактная информация: фактические адреса,  телефоны; фотографии, имена руководителей данных учреждений.

«Контакты» – в разделе находятся контактные данные должностных лиц входящих в структуру департамента по отделам.

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

Дополнительные разделы сайта:

  • «Государственные услуги» – содержит материалы с информацией о государственных услугах учреждений культуры Брянской области;
  • «Государственные задания» – содержит материалы с отчетами о выполнении государственных заданий учреждениями культуры Брянской области;
  • «Нормативная база» – содержит материалы с информацией об административных регламентах, приказами и постановлениями;
  • «Противодействие коррупции» – содержит материалы, памятки, административные регламенты и планы мероприятий, направленные на борьбу с коррупцией;
  • «Проекты документов» – содержит материалы с проектами приказов, проектами постановлениями и административными регламентами;
  • «Независимая оценка» – содержит материалы о проведении независимой оценке качества предоставления услуг учреждениями культуры Брянской области;
  • «Конкурсы» – содержит материалы о проводимых конкурсах, учрежденных департаментом культуры Брянской области и иными, в том числе коммерческими организациями;
  • «Туризм» – содержит материалы, посвященные популяризации туристической деятельности Брянской области, материалы размещает отдел туризма Брянской области;
  • «Реализация указа» – содержит материалы: отчеты, приказы, касающиеся исполнения указов президента Российской Федерации.

2.3 Дизайн

Для внешнего оформления дизайна страниц было выбрано три основных цвета: оттенок серого, оттенок красного, черный. Изображения (фотографии) на страницах сайта являются продолжением базового дизайна.

Цвет текста: оттенок серого, цвет заголовков, ссылок, выделенного жирным шрифтом: черный. Цвет заголовков разделов: оттенок красного.

2.4 Выбор платформы системы управления сайтом

В качестве платформы системы управления сайтом (CMSContentManageSystem) была выбранаJoomlaCMS из общего перечня популярных систем управления сайтом: Drupal, WordPress, 1с-Битрикс и ряд других.

Joomla! представляет собой бесплатную систему для создания веб-сайтов.  Это проект с открытым исходным кодом, который, как и большинство подобных проектов, не стоит на месте. Он очень успешно развивается, в течение вот уже семи лет, и пользуется популярностью у миллионов пользователей по всему миру.

Joomla! написана на языках PHP и JavaScript, использующая в качестве хранилища – системы управления базами данных (СУБДMySQL или другие стандартные промышленные реляционные СУБД. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.

Основные возможностиJoomla!:

  • функциональность можно увеличивать с помощью дополнительных расширений (компонентов, модулей и плагинов);
  • имеется модуль безопасности для многоуровневой аутентификации пользователей и администраторов (используется собственный алгоритм аутентификации и «ведения» сессий);
  • система шаблонов позволяет легко изменять внешний вид сайта: расположение модулей, шрифты и другое. Можно выбрать одно из нескольких отображений шаблонов, для конкретных разделов свой шаблон. В сети существует огромный выбор готовых шаблонов, как платных, так и бесплатных. Также существует программное обеспечение для самостоятельного создания оригинальных шаблонов;
  • предусмотрены настраиваемые схемы расположения модулей, включая левый, правый, центральный и любое другое произвольное положения блока. При желании содержимое модуля можно включить в содержимое материала. Например, выражение {loadposition mod_fpslideshow}, введенное (вместе с фигурными скобками) в произвольное место в статье, выведет содержимое модуля, которому задана позиция вывода как «mod_fpslideshow»;
  • к преимуществам системы можно отнести то, что все компоненты, модули, плагины и шаблоны можно написать самому, разместить их в структурированном каталоге расширений или отредактировать существующее расширение по своему усмотрению;
  • происходит регулярный выход обновлений. Существует публичный «баг-трекер» – система отслеживания ошибок. Существуют также «трекеры» миграции со старых версий Joomla!, «трекер» пожеланий расширения функциональности и так далее, где пользователи Joomla! могут оставлять замечания по поводу работы CMS, которые впоследствии изучаются её разработчиками, при необходимости включающими в очередное обновление Joomla! исправления, решающие те или иные проблемы.

Возможности администрирования:

  • для каждой динамической страницы можно создать своё описание и ключевые слова в целях повышения рейтинга в поисковых системах;
  • начало и окончание публикации любых материалов можно запрограммировать по календарю;
  • возможность ограничить доступ к определённым разделам сайта только для зарегистрированных пользователей, а начиная с версии Joomla! 1.6, доступ как к разделу, так и к определённому материалу;
  • настраиваемые схемы расположения элементов по областям шаблона;
  • различные модули (последние новости, счётчик посещений, подробная статистика посещений, гостевая книга, форум и другие возможности);
  • имеется возможность одновременно устанавливать несколько расширений, объединённых в один инсталляционный пакет. Более того, реализована возможность автоматического обновления установленных расширений (при условии, что разработчик расширения задействует этот механизм);
  • возможность публикации содержимого на нескольких языках;
  • возможность определить время начала и завершения публикации модулей;
  • возможность создания нескольких форм обратной связи для каждого контакта;
  • модуль приёма от удалённых авторов новостей, статей и ссылок;
  • иерархия объектов;
  • менеджер рассылки новостей. Поддержка более чем 360 служб рассылки новостей по всему миру;
  • встроенный визуальный редактор TinyMCE.

В связи с имеющимся большим опытом работы сJoomla!CMS, в конечном счете, выбор платформы был очевиден.

2.5 Разметка структуры главной и внутренних страниц

Базовая разметка главной, а также внутренних страниц определяется в одном файле index.php установленного шаблона, находящегося в папке templates, дистрибьютива. Файл index.php – самый важный в шаблоне Joomla. Он определяет визуальное расположение элементов сайта и сообщает CMS Joomla в какой блок поместить различные компоненты и модули. Файл является комбинацией PHP и HTML.

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

Служебные переменные, отвечающие за работоспособность системы управления сайтом, дополнительных модулей, плагинов и ряда настроек отображения веб-страницы (глобальная конфигурация), хранятся в служебныхPHP иXML файлах. Переменные, хранящие данные, которые можно редактировать в панели управления сайтом, хранятся в базе данныхMySQL.

Примеркодазаголовка:

<?php

defined('_JEXEC') or die;

JHtml::_('behavior.framework', true);

$app = JFactory::getApplication();

?>

DOCTYPE – это очень важный параметр, на основании которого браузер решает, как ему отображать эту страницу и как интерпретировать CSS, пример кода:

<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

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

Примеркода:

<head>

<jdoc:include type="head" />

Далее идут ссылки на стили шаблона. На каждый файл CSS, имеющийся в шаблоне, пример кода:

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

Следующий фрагмент кода позволяет «выключать» колонку автоматически или «свертывать» ее, если она не содержит основной блок с материалом (component – служебная переменная для вывода контента). Если в позициях «left» и «right» не расположено ни одного модуля, то они не отображаются и колонка контента занимает  100% ширины страницы.  Если включена только одна колонка, то контент занимает 80%. При двух включенных колонках на контент приходится 60% ширины страницы.

<?php

if($this->countModules('left and right') == 0) $contentwidth = "100";

if($this->countModules('left or right') == 1) $contentwidth = "80";

if($this->countModules('left and right') == 1) $contentwidth = "60";

?>

Заголовок закрываем тегом </HEAD>.

Тегом <BODY> открываем тело документа веб-страницы, где будет располагаться «шапка» сайта, основное, в том числе динамическое содержимое веб-страниц и «подвал» (футер).

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

Каждый модуль, представляет из себя контейнер <DIV></DIV>, внутри которого размещается информация. В каждый модуль (контейнер) можно вставить собственные стили оформления, поэтому разграничиваться блоки между статичными и динамическими частями страниц будут, используя один контейнер <DIV></DIV>. В «шапке» сайта используем его с идентификаторомHEAD.

Пример кода:

<div id="head">

<jdoc:include type="module" name="logo" />

<jdoc:include type="module" name="search" />

<jdoc:include type="module" name="address" />

<jdoc:include type="module" name="menu" />

</div>

Дополнительная навигация представляет собой «путь» из ссылок от «ГЛАВНОЙ» страницы к внутренним страницам, находящихся в данной категории. Такой путь называется «хлебные крошки» (от английскогоbreadcrumbs), что в определенной степени помогает пользователям легко находить информацию. Для определения стилей, присвоим данному контейнеру идентификаторBREADCRUMBS.

Пример кода вывода модуля «хлебные крошки»:

<div id="breadcrumbs">

<jdoc:include type="module" name="breadcrumbs" />

</div>

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

В панели управления, один модуль можно вывести одновременно в нескольких категориях, при этом он будет отображаться в материалах этой категории. Модули выводятся на страницах сайта по мере необходимости, Для этого используем блок вывода кода с условием.

Пример кода вывода левой колонки:

<?php if ($this->countModules('left')) : ?>

<div id="left">

<jdoc:include type="modules" name="left" style="xhtml" />

</div>

<?phpendif; ?>

Пример кода вывода правой колонки:

<?php if ($this->countModules('left')) : ?>

<div id="left">

<jdoc:include type="modules" name="left" style="xhtml" />

</div>

<?php endif; ?>

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

Данный компонент обязательно должен присутствовать на главной странице сайта. Динамический идентификатор определяет ширину, которую он может занимать, это: 100% ширины страницы,  80% и 60%, в зависимости от количества включенных колонок.

Пример кода вывода компонента:

<div id="content<?php echo $contentwidth; ?>">

<jdoc:include type="component" style="xhtml" />

</div>

Заключительной частью разметки сайта является «подвал» или «footer» (футер). Как и все предыдущие модули, он выводится отдельным блоком на странице по условию, если есть в нем необходимость отображения. Здесь размещается информация об авторских правах, дополнительные ссылки на материалы департамента, а также других учреждений культуры Брянской области.

Пример кода вывода «подвала» сайта:

<?php if ($this->countModules('footer')) : ?>

<div id="footer">

<jdoc:include type="modules" name="footer" style="xhtml" />

</div>

<?php endif; ?>

Закрываем телоHTML документа страницы сайта и весь код:

</body>

</html>

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

2.6 Возможности визуального редактораTinyMCE

Пожалуй, самый популярный визуальный редактор Joomla. Главное его достоинство — это возможность работать с материалами Joomla не используя разметкуHTML. ПрограммуMicrosoft Word знает большинство пользователей, работающих на компьютере, интерфейс которой во многом копирует TinyMCE.

Функционал TinyMCE очень велик, поэтому пользователи совершенно не знакомые сHTML не будут чувствовать себя стесненными при форматировании текста материалов.

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

По интерфейсу и принципу работы TinyMCE напоминает текстовые редакторы, самые популярные из которых Microsoft Word и его бесплатный аналог OpenOffice Word.

2.7 Добавление новой информации

Для структурирования информации в Joomla используются категории, подкатегории и материалы. Единицей контента считается материал (статья). Обычно большинство материалов сайта принадлежат к определенной подкатегории, которая в свою очередь принадлежит определенной категории. Помимо этого, материалы могут быть и самостоятельными, то есть не принадлежать никаким категориям. Как правило, такие материалы используют для страниц сайта, для которых трудно определить принадлежность к какой-либо категории.

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

Чтобы разложить материалы по подкатегориям, необходимо создать минимум одну категорию, либо добавить материалы прямо в эту категорию (родительскую). Вся эта структуризация сайта необходима для того, чтобы можно было в конкретном месте сайта показать только статьи определенной категории или подкатегории.

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

Для создания первого материала (статьи) в панели администратора в верхнем меню «Материалы» и из выпадающего списка выбираем «Менеджер материалов». Справа вверху нажимаем «Создать».

Для начала необходимо заполнить два пустых обязательных поля. Поле заголовок – назовем «Пробная статья». Следующее поле – псевдоним. Это поле заполняется латинскими буквами автоматически при сохранении статьи и является отображением названия нашей статьи в адресе страницы (URL) с данной статьей. 

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

Далее идет поле для ввода текста, который можно форматировать при помощи визуального редактора TinyMCE.

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

Модуль «Меню» является стандартным функционаломJoomla!. Здесь из списка созданных пунктов меню, выбираем, созданный ранее, «Список материалов». После чего на сайте отобразится: меню. Перейдя в меню, откроется категория, где списком будут отображаться материалы.

Заключение

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

При этом мною были решены следующие частные задачи:

  • ознакомление с современными Интернет-технологиями и использование их в своей разработке;
  • изучение одной из платформ, применяемых для разработки и создания веб-сайтов;
  • ознакомление с методами и способами представления на Web-страницах различных видов информации (текстов и изображений);
  • ознакомление с основными правилами и рекомендациями по разработке и созданию веб-сайтов, и использование их на практике;
  • определение структуры веб-страниц;
  • предоставление пошаговой стратегии разработки веб-сайта;

В результате проведенных работ на базе выбранных технологий был создан современный веб-сайт.

Список используемой литературы


 

А также другие работы, которые могут Вас заинтересовать

26469. Роговые образования кожного покрова 37 KB
  Роговые образования кожного покрова МЯКИШИ torus упругие утолщения кожного покрова которые служат для опоры конечности о землю и обеспечивает амортизацию обладают большой чувствительностью осязание имеют хорошо развитый подкожный слой липоциты эласт. волокна располагаются на автоподиях Лошадь запястье пальмарно заплюсна плантарно каштаны пясть плюсна шоры пальцевый мякиш стрелка внутри копыта Собака на грудной запястные пястные пальцевые на тазовой плюсневые пальцевые Свинья КРС ...
26470. Фило-онтогенез кожного покрова 20 KB
  Филоонтогенез кожного покрова Филогенез: ланцетник однослойный цилиндрический эпителий рыбы появляются производные кожного покрова чешуя амфибии двуслойный эпителий 2ой слой соединительнотканный в связи с выходом на сушу рептилии 34слойный эпидермис в соединительной ткани коллагеновые и эластические волокна роговые образования птицы млекопитающие 5 слоёв эпителия 2слоя в дерме подкожный; роговые образования железы у птиц перья копчиковая железа онтогенез: У эмбриона кожа состоит из эпителия эктодермального...
26471. Фило-онтогенез скелета 25 KB
  Внутренний развивался в филогенезе как каркас опорная конструкция на которой закрепляются мягкие ткани. в промежуточном вве костной ткани кроме коллагеновых волокон и клеток откладываются мин. Пресмыкающиеся и тд скелет из пластинчатой костной ткани коллагеновые волокна расположены упорядоченно . ткани перепончатого скелета коллагеновые волокна расп.
26472. Анатомическая терминология. Плоскости и направления, принятые в анатомии 28.5 KB
  латеральное направление наружу медиальное направление вовнутрь Сегментальная поперечная вертикальная проходящая поперёк тела и делящая его на переднюю и заднюю половины. краниальное направление к голове cranium череп каудальное направление к хвосту cauda хвост Фронтальная горизонтальная делит тело на верхнюю и нижнюю половины. дорсальное направление вверх dorsum спина вентральное направление вниз ventor живот На голове: дорсальное направление...
26473. Биоморфологические закономерности строения и развития организмов 27 KB
  Биоморфологические закономерности строения и развития организмов Организм целостная живая система для которого прежде всего характерны целостность и дискретность. Общие принципы строения тела животного: биполярность билатеральность сегментарность закон трубкообразного строения большинство непарных органов расположены вдоль главной оси тела Основные законы биологического развития: Закон исторического филогенетического развития Шмальгаузен: в процессе развития постоянно происходит дифференцировка разделение функций клеток и тканей...
26474. Железы кожного покрова 45 KB
  На коже вымени: между бёдрами молочное зеркало planum lactiferum или надвыменная область regio supramammaria Под кожей поверхностная фасция вымени беловатая пластинка из плотн. ткани соединительнотканная собственная оболочка долей вымени соединённая прослойками ткани внутри долей вымени стромой stroma gl. mammaria между правой и левой половинами подвешивающая связка вымени lig. suspensorium mammarium на месте связки снизу вымени серединный жёлоб sulcus intermammarius.
26475. Классификация костей 23.5 KB
  Классификация костей Оs longum длинные дугообразные рёбра трубчатые плечевая бедренная общий план строения: биэпифизарные дистальный эпифиз проксимальный эпифиз между эпифизами тело кости диафиз. Зона роста кости в длину проксимальный и дистальный метафиз между эпифизом и диафизом. Os longum короткие равны по длине высоте ширине состоят из компактного и губчатого вещества кости запястья и заплюсны основная функция амортизация Os planum плоские или пластинчатые Имеют обширные...
26476. Кость как орган и её остеогенез 33.5 KB
  соли в кости меняется: Молодость: 1:1 Зрелость: 1:2 Старость: 1:7 кости твёрдые хрупкие С поверхности кость покрыта надкостницей periosteum: Наружный фиброзный слой защитная функция из плотной соединительной ткани содержит много коллагеновых волокон. продольно по отношению к главной оси кости. Костные перегородки остеоны расположены плотно что придаёт кости прочность сравнимую с прочностью гранита. Особо толстый слй компакты там где велики нагрузки кости на излом.
26477. Морфофункциональная характеристика волоса 35.5 KB
  Морфофункциональная характеристика волоса Волосы pili производные эпидермиса тонкие эластичные ороговевающие нити из ороговевшего или ороговевающего эпителия. волосы покрывают почти всё тело Фции: защита терморегуляторная орган осязания Волос состоит из: волосяная нить: стержень scapus pili видимая часть корень radix pili находится в толще кожного покрова корень переходит в луковицу волоса. волосяная сумка чехол в сумку открываются протоки сальных желёз Утолщение корня...