Разработка сайта на joomla

Заходим в верхнем меню административной панели в пункт  «Меню» и нажимаем создать меню (рисунок 36).

Рисунок 37 - Создания меню

Нажимаем на кнопку «Выбрать»  напротив "тип пункта меню", в  открывшемся окне из предложенного  списка находим Xmap и выбираем пункт "HTML Site map"( рисунок 37).

Рисунок 38  - Выбор типа пункта меню 

Заполнение обязательных полей

 «Заголовок меню» – Карта сайта.

«Состояние» –  не опубликовано (рисунок 38).

Рисунок 39 - Заполнение обязательных полей

Карта сайта создана.

10. Создание эффекта дразнящего уголка

Скачиваем javascript и анимацию которая нам понадобится с http://ruseller.com

  javascript  «peel» помещаем в корень сайта в папку  «JS». Анимацию помещаем в папку swf.

Для того что бы подключить его в файле  index.php прописываем

  <script src="js/peel.js" type="text/javascript"></script>

Далее открываем peel.jscript и указываем пути к картинкам и анимации.

Рисунок 40 - Эффект дразнящего уголка 1

 

Рисунок 41 - Эффект дразнящего уголка 2

 

ЗАКЛЮЧЕНИЕ

В курсовой работе была проделана  следующие действия: установка CMS Joomla , установка плагинов и шаблонов для Joomla, создание в Photoshop логотипа , редактирование php и css файлов, добавление новостей, создания эффекта дразнящего уголка, карты сайта.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Муртазин А.В. Пособие для начинающего разработчика сайтов // Образование: исследовано в мире [Электрон, ресурс] / Рос. акад.научных достижений. – М.: joomla.org, 2010–2014. – Режим доступа: http://joomla-master.org/
2. Пупочкин Д.С. Проектирование сайтов на Joomla // Образование: исследовано в мире [Электрон, ресурс] / Рос. акад. научных достижений. – М.: joomlaportal.ru/, 2010–2014. – Режим доступа: http://joomlaportal.ru/

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ПРИЛОЖЕНИЕ  A. Таблица стилей. editor.css

/* begin Page */

/* Created by Artisteer v3.1.0.48375 */

/* Compatibility rule for default TinyMCE skin (for td element): */

td {

   color: inherit;

   font-family: inherit;

   font-size: inherit;

   margin: inherit;

   padding: 2px;

   border: solid 1px #696969;

   vertical-align: top;

   text-align: left;

}

body, table

{

   font-family: Tahoma, Arial, Helvetica, Sans-Serif;

   font-style: normal;

   font-weight: normal;

   font-size: 13px;

}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li

{

   margin: 0;

   padding: 0;

}

body, table

{

   text-align: left;

}

body

{

   direction: ltr;

   color: #D1D1D1;

   background: #3C3C3C;

}

li,

table,

a,

a:link,

a:visited,

a:hover

{

   font-family: Tahoma, Arial, Helvetica, Sans-Serif;

}

p

{

   margin: 12px 0;

}

h1,

h1 a,

h1 a:link,

h1 a:visited,

h1 a:hover,

h2,

h2 a,

h2 a:link,

h2 a:visited,

h2 a:hover,

h3,

h3 a,

h3 a:link,

h3 a:visited,

h3 a:hover,

h4,

h4 a,

h4 a:link,

h4 a:visited,

h4 a:hover,

h5,

h5 a,

h5 a:link,

h5 a:visited,

h5 a:hover,

h6,

h6 a,

h6 a:link,

h6 a:visited,

h6 a:hover

{

   font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;

   font-style: normal;

   font-weight: bold;

   font-size: 22px;

   text-decoration: none;

}

a

{

   text-decoration: none;

   color: #8A8A8A;

}

a:link

{

   text-decoration: none;

   color: #8A8A8A;

}

a:visited

{

   color: #CFCFCF;

}

a:hover

{

   text-decoration: underline;

   color: #B8B8B8;

}

h1

{

   color: #B8B8B8;

   margin: 10px 0 0;

   font-size: 26px;

}

h1 a,

h1 a:link,

h1 a:hover,

h1 a:visited

{

 font-size: 26px;

}

h2

{

   color: #B8B8B8;

   margin: 10px 0 0;

}

h3

{

   color: #8A8A8A;

   margin: 10px 0 0;

   font-size: 18px;

}

h3 a,

h3 a:link,

h3 a:hover,

h3 a:visited

{

   font-size: 18px;

}

h4

{

   color: #D1D1D1;

   margin: 10px 0 0;

   font-size: 16px;

}

h4 a,

h4 a:link,

h4 a:hover,

h4 a:visited

{

   font-size: 16px;

}

h5

{

   color: #D1D1D1;

   margin: 10px 0 0;

   font-size: 14px;

}

h5 a,

h5 a:link,

h5 a:hover,

h5 a:visited

{

   font-size: 14px;

}

h6

{

   color: #B8B8B8;

   margin: 10px 0 0;

   font-size: 13px;

}

 

h6 a,

h6 a:link,

h6 a:hover,

h6 a:visited

{

   font-size: 13px;

}

ul

{

   list-style-type: none;

   margin: 1em 0 1em 2em;

   padding: 0;

}

ol

{

   list-style-position: inside;

   margin: 1em 0 1em 2em;

   padding: 0;

}

/* end Page */

/* begin Box, Post */

/* set background fot correct editing in administrator: */

a img

{

   border: 0;

}

img

{

   border-color: #454545;

   border-style: solid;

   border-width: 0;

   margin: 10px 10px 10px 10px;

}

table

{

   border-collapse: collapse;

   margin: 1px;

}

th{

   border: solid 1px #696969;

   text-align: center;

   vertical-align: middle;

   padding: 7px;

}

pre

{

   overflow: auto;

   padding: 0.1em;

}

/* end Box, Post */

/* begin PostBullets */

li

{

   font-size: 13px;

   color: #A3A3A3;

   margin: 3px 0 0 -15px;

   padding: 0 0 0 10px;

}

li ol, .za-post li ul

{

   margin: 0.5em 0 0.5em 2em;

   padding: 0;

}

ol>li

{

   background: none;

   padding-left: 0;

   /* overrides overflow for "ul li" and sets the default value */

  overflow: visible;

}

ul>li

{

   background-image: url('../images/postbullets.png');

   background-repeat: no-repeat;

   background-position: top left;

   padding-left: 10px;

   /* makes "ul li" not to align behind the image if they are in the same line */

  overflow-x: visible;

   overflow-y: hidden;

}

/* end PostBullets */

/* begin PostQuote */

blockquote,

blockquote a,

blockquote a:link,

blockquote a:visited,

blockquote a:hover

{

   color: #080808;

   font-style: italic;

   font-weight: normal;

   text-align: left;

}

blockquote p

{

   margin: 0;

   margin: 5px 0;

}

blockquote

{

   margin: 10px;

   padding: 4px;

   background-color: #828282;

   margin-left: 50px;

   padding-left: 41px;

   background-image: url('../images/postquote.png');

   background-position: left top;

   background-repeat: no-repeat;

   /* makes block not to align behind the image if they are in the same line */

  overflow: auto;

   clear:both;

}

/* end PostQuote */

 

 

 

 

 

 

 

 

 

 

ПРИЛОЖЕНИЕ Б Index.php:

<?php

defined('_JEXEC') or die;

/**

* Template for Joomla! CMS, created with Artisteer.

* See readme.txt for more details on how to use the template.

*/

require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';

 

// Create alias for $this object reference:

$document = & $this;

 

// Shortcut for template base url:

$templateUrl = $document->baseurl . '/templates/' . $document->template;

 

// Initialize $view:

$view = $this->artx = new ArtxPage($this);

 

// Decorate component with Artisteer style:

$view->componentWrapper();

?>

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

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

<head>

<jdoc:include type="head" />

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

<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" media="screen" />

<!--[if IE 6]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie6.css" type="text/css" media="screen" /><![endif]-->

<!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->

<script type="text/javascript">if ('undefined' != typeof jQuery) document._artxJQueryBackup = jQuery;</script>

<script type="text/javascript" src="<?php echo $templateUrl; ?>/jquery.js"></script>

<script type="text/javascript">jQuery.noConflict();</script>

<script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>

<script type="text/javascript">if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;</script>

<script src="js/peel.js" type="text/javascript"></script>

</head>

<body>

<div id="za-main">

    <div class="cleared reset-box"></div>

<div class="za-box za-sheet">

    <div class="za-box-body za-sheet-body">

<div class="za-header">

<a href="index.php" style="height: 100%; display: block"></a>

<?php if ($view->containsModules('position-1', 'position-28', 'position-29')) : ?>

<a href="index.php" style="height: 100%; display: block"></a>

<div class="za-bar za-nav">

<div class="za-nav-outer">

<div class="za-nav-wrapper">

<div class="za-nav-inner">

<?php if ($view->containsModules('position-28')) : ?>

<div class="za-hmenu-extra1"><?php echo $view->position('position-28'); ?></div>

<?php endif; ?>

<?php if ($view->containsModules('position-29')) : ?>

<div class="za-hmenu-extra2"><?php echo $view->position('position-29'); ?></div>

<?php endif; ?>

<?php echo $view->position('position-1'); ?>

</div>

</div>

</div>

</div>

<div class="cleared reset-box"></div>

<?php endif; ?>

<div class="za-logo">

<h1 class="za-logo-name"><a href="<?php echo $document->baseurl; ?>/"><?php echo $this->params->get('siteTitle'); ?></a></h1>

</div>

 

</div>

<div class="cleared reset-box"></div>