Реализация проекта с помощью выбранного языка разметки гипертекста HTML

Ознакомительный Сайт «Жизнь и творчество Эдгара По» реализован с помощью CMS системы Joomla. CMS Joomla! включает в себя различные инструменты для разработки веб-сайта. Важной особенностью системы является минимальный набор инструментов при начальной установке, который дополняется по мере необходимости. Это снижает загромождение административной панели ненужными элементами, а также снижает нагрузку на сервер и экономит место на хостинге.

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

При реализации сайта были добавлены несколько подобных элементов JavaScript:

<div

skinpart="image" class="wysiwyg_viewer_skins_gallerymatrix_MatrixDisplayerDefaultSkinmg3-image skins_core_ImageSkin

" skin="skins.core.ImageSkin" comp="core.components.Image" id="mg1" style="visibility: visible; position: relative; overflow: hidden; width: 100%; height: 100%; background-image: url(http://static.wix.com/media/4229d7_720fc2c1a6f6d95417b4eba6848537f1.jpg_srz_245_293_85_22_0.50_1.20_0.00_jpg_srz); background-size: 245px 293px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; " styleid="" state="loaded"><div skinpart="loadingAnimation"></div><img skinpart="image" style="position: absolute; width: 245px; height: 293px; top: 0px; left: 0px; visibility: hidden; " alt="" src="http://static.wix.com/media/4229d7_720fc2c1a6f6d95417b4eba6848537f1.jpg_srz_245_293_85_22_0.50_1.20_0.00_jpg_srz"></div> <a skinpart="link" class="wysiwyg_viewer_skins_gallerymatrix_MatrixDisplayerDefaultSkinmg3-link" style="display: block; cursor: pointer; " href="http://www.lib.ru/INOFANT/POE/maska.txt" target="_blank">Go to link</a>

Выше приведен один из элементов JavaScript, создающий "коллекцию" с гиперссылкой.

Так же в сайт добавлены фото Эдгара По:

src="http://static.wix.com/media/4229d7_720fc2c1a6f6d95417b4eba6848537f1.jpg_srz_245_293_85_22_0.50_1.20_0.00_jpg_srz">(код вставки изображения)

Рис. 3.Фото Эдгара По

Рис. 4. Сборник стихотворений

Также на первой станице сайта можно увидеть слайд шоу (ниже приведен код реализующий показ слайдов):

<div style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; "><div skinpart="imageItem" comp="wysiwyg.viewer.components.Displayer" skin="wysiwyg.viewer.skins.displayers.SlideTextOverlayDisplayer" dataquery="#image8fe" style="min-height: 555px; zoom: 1; opacity: 1; width: 585px; height: 555px; top: 0px; visibility: visible; left: 0px; position: static; " id="Dsplyrkw" styleid="ssg2" class="wysiwyg_viewer_skins_displayers_SlideTextOverlayDisplayerssg2 " state="normal noTransition noLink"><div skinpart="imageWrapper" style="width: 585px; height: 555px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; "><div skinpart="zoom" class="wysiwyg_viewer_skins_displayers_SlideTextOverlayDisplayerssg2-zoom" style="cursor: pointer; "><div skinpart="image" class="wysiwyg_viewer_skins_displayers_SlideTextOverlayDisplayerssg2-image skins_core_ImageSkin " skin="skins.core.ImageSkin" comp="core.components.Image" id="mgkz" style="position: relative; overflow-x: hidden; overflow-y: hidden; visibility: visible; width: 100%; height: 100%; background-image: url(http://static.wix.com/media/4229d7_1d86a1445055f300f1a1a7086182812c.jpg_srz_740_555_85_22_0.50_1.20_0.00_jpg_srz); background-size: 740px 555px; background-position: -77px 0px; background-repeat: no-repeat no-repeat; " styleid="" state="loaded"><div skinpart="loadingAnimation"></div><img skinpart="image" style="position: absolute; width: 740px; height: 555px; top: 0px; left: -77px; visibility: hidden; " alt="" src="http://static.wix.com/media/4229d7_1d86a1445055f300f1a1a7086182812c.jpg_srz_740_555_85_22_0.50_1.20_0.00_jpg_srz"></div></div><div class="pnl wysiwyg_viewer_skins_displayers_SlideTextOverlayDisplayerssg2-panel" skinpart="panel"><h3 skinpart="title" class="wysiwyg_viewer_skins_displayers_SlideTextOverlayDisplayerssg2-title" style="overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; "></h3><p skinpart="description" class="wysiwyg_viewer_skins_displayers_SlideTextOverlayDisplayerssg2-description" style="overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; "></p><a skinpart="link" class="wysiwyg_viewer_skins_displayers_SlideTextOverlayDisplayerssg2-link" style="cursor: default; display: none; ">Go to link</a></div></div></div></div>

В соответствии с этим кодом получаем элементы слайд шоу на главной странице.

Рис. 5. Один из слайдов

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