Размещено на http://www.allbest.ru/

Введение

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

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

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

1. Описательная часть

1.1 Понятие Web-сайта и его типы

Веб-сайт (англ. Website, от web-паутина и site-«место»)-в компьютерной сети объединённая под одним адресом (Доменным именем или IP-адресом) совокупность документов частного лица или организации. По умолчанию подразумевается что сайт располагается в сети Интернет. Все веб-сайты Интернета в совокупности составляют Всемирную паутину. Для прямого доступа клиентов к веб-сайтам на серверах был специально разработан протокол HTTP. Веб-сайты иначе называют Интернет-представительством человека или организации. Когда говорят «своя страничка в Интернет», то подразумевается целый веб-сайт или личная страница в составе чужого сайта. Кроме веб-сайтов в сети Интернет так же доступны WAP-сайты для мобильных телефонов.

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

В большинстве случаев в Интернете одному веб-сайту соответствует одно доменное имя. Именно по доменным именам сайты идентифицируются в глобальной сети. Возможны иные варианты: один сайт на нескольких доменах или несколько сайтов под одним доменом. Обычно несколько доменов используют крупные сайты (веб-порталы) чтобы логически отделить разные виды предоставляемых услуг (mail.google.com, news.google.com, maps.google.com). Нередки и случаи выделения отдельных доменов для разных стран или языков. Например, google.ru и google.fr логически являются сайтом Google на разных языках, но технически это разные сайты. Объединение нескольких сайтов под одним доменом характерно для бесплатных хостингов. Иногда для идентификации сайтов в адресе после указания хоста стоит тильда и имя сайта: example.com/~my-site-name/, иногда используется доменное имя третьего уровня: my-site-name.example.com.

Аппаратные сервера для хранения веб-сайтов называются веб-серверами. Сама услуга хранения называется веб-хостингом. Раньше каждый сайт хранился на своём собственном сервере, но с ростом Интернета технологическим улучшением серверов на одном компьютере стало возможно размещение множества сайтов (виртуальный хостинг). Сейчас сервера для хранения только одного сайта называются выделенными (англ. dedicated).

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

Основной классификацией сайтов является деление на статичные и динамичные.

1.Статичные сайты

Создаются с применением языка HTML. Этот язык - Hyper Text Markup Language - язык гипертекстовой разметки.

К плюсам можно отнести:

- простота создания сайта (можно отформатировать и сохранить в виде HTML -страницы любой текстовый файл созданный в стандортном офисном приложении, добавить картинки и т.д.);

- сайты полностью функционален и является готовым продуктом.

К минусам можно отнести:

- внесении изменений в структуру сайта (добавление новой страницы, дополнение информации, изменение дизайна) требует вносить изменение во все страницы сайта;

- объём занимаемого сайтом дискового пространства достаточно велик;

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

Сайты динамичного исполнения:

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

У сайтов динамичного исполнения есть ряд недостатков и достоинств.

К недостаткам такого сайта относятся:

- сложность его создания, наличие специального программного обеспечения, а также наличие навыков программирования;

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

К положительным сторонам данных сайтов можно отнести:

- возможность изменения дизайна, не затрагивая большую часть страниц самого сайта;

- возможность изменения содержания сайта без дополнительного программного обеспечения;

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

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

1.2 Программы для создания

Показатель	CMS Joomla	Dreamweaver CC
Цена	0 рублей	от 14900 рублей
Функционал	система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL или другие индустриально-стандартные реляционные СУБД.
Язык	Английский/Русский	Английский/Русский
Удобство интерфейса	Интерфейс довольно прост и удобен в использовании	Сложный, но удобный в использовании
Совместимость	Программа совместима с Windows XP,Vista,7,8.	Windows и OS X
Минимальные системные требования	PHP 5.x или выше MySQL 4.1.x, 5.x Apache 1.3.x или выше	- Процессор Intel Pentium 4 - Microsoft Windows 7, 8 - 1 Гб оперативной памяти - 1 Гб свободного пространства на жестком диске - Разрешение монитора 1280 x 1024 с 16-разрядной видеокартой - Подключение к сети Интернет.
Вывод	Данная программа очень удобна и проста в использовании, есть бесплатная версия.	Программа сложна в использовании и дорогая.

1.3 Описание программы CMS Joomla

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

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

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

Функциональность можно увеличивать с помощью дополнительных расширений (компонентов, модулей и плагинов).

Имеется модуль безопасности для многоуровневой аутентификации пользователей и администраторов (используется собственный алгоритм аутентификации и «ведения» сессий).

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

Предусмотрены настраиваемые схемы расположения модулей, включая левый, правый, центральный и любое другое произвольное положения блока. При желании содержимое модуля можно включить в содержимое материала. Например, выражение {loadposition mod_fpslideshow} введенное (вместе с фигурными скобками) в произвольное место в статье выведет содержимое модуля, которому задана позиция вывода как «mod_fpslideshow».

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

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

Начиная с версии 1.6 встроена многоязычность.

Начиная с версии 2.5 расширена поддержка баз данных. Реализована поддержка Microsoft SQL Server, а с версии 3.0 --PostgreSQL. В дальнейшем планируется добавить поддержку Oracle, SQLite.

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

Для каждой динамической страницы можно создать своё описание и ключевые слова в целях повышения рейтинга в поисковых системах;

Начало и окончание публикации любых материалов можно запрограммировать по календарю;

Возможность ограничить доступ к определённым разделам сайта только для зарегистрированных пользователей, а с выходом Joomla 1.6 доступ как к разделу, так и к определённому материалу с точностью до конкретной связи материал-пользователь;

Настраиваемые схемы расположения элементов по областям шаблона;

Различные модули (последние новости, счётчик посещений, подробная статистика посещений, гостевая книга, форум и другие);

В версии 1.6 была сильно улучшена система установки и управления расширениями. Теперь возможно одновременно устанавливать несколько расширений, объединённых в один инсталляционный пакет. Более того, реализована возможность автоматического обновления установленных расширений (при условии, что разработчик расширения задействует этот механизм);

В версии 1.6 появилась возможность публикации содержимого на нескольких языках;

В версии 1.6 появилась возможность определить время начала и завершения публикации модулей. Так же в новой версии Joomla улучшены возможности по управлению отображением содержимого;

Возможность создания не одной, а нескольких форм обратной связи для каждого контакта;

Модуль приёма от удалённых авторов новостей, статей и ссылок;

Иерархия объектов;

Менеджер рассылки новостей. Поддержка более чем 360 служб рассылки новостей по всему миру;

Встроенный визуальный редактор TinyMCE;

ЧПУ -- «человекопонятный URL»

Более 10000 (по состоянию на 4 октября 2012) готовых модулей и компонентов

2. Проектная часть

2.1 Описание структуры проекта

Сайт имеет Древовидную структуру.

Структура всех страниц такова:

2.2 Алгоритм создания Web-сайта

динамический сайт программирование

2.2.1 Установка локального сервера Denwer

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

1)Место установки

На первом этапе вас спросят в какое место устанавливать локальный сервер. Вам сразу по умолчанию предложат установить denwer на диск C в папку WebServers. путь - C: \WebServers. Разработчики рекомендуют устанавливать комплекс в каталог первого уровня, то есть, C: \WebServers, а не, например, C: \Denwer\WebServers. тогда не возникнет проблем с установками пактов расширений. Я всегда ставил в корень диска, поэтому проблем не было. Нажимаете Enter.

2) Виртуальный диск

Далее вам предложат ввести имя виртуального диска, который будет связан с только что указанной директорией. Рекомендуем вам согласиться со значением по умолчанию (Z:). Важно, что диска с этим именем еще не должно содержаться в системе.

3) Запуск и установка комплекса

Затем вас спросят в каком режиме запускать Denwer по умолчанию стоит 1 режим, в котором установка виртуального диска происходит сразу с загрузкой Windows, загрузка серверов происходит по нажатию ярлыка как и во 2 режиме, но в котором виртуальный диск включается во время запуска сервером и отключение после остановки denwer. Некоторые ОС Windows не умеют правильно отключать диски требуют при этом перезагрузку. Всегда использовал 1 вариант, поскольку удобнее в качестве быстрого доступа к папкам и проблем с запуском виртуального диска не бывает. Нажимаете Enter.

Вот и все, локальная машина установлена.

Теперь рассмотрим структуру локального сервера:

Корневая папка:

в которой еще четыре папки:

В папке denwer находятся файлы эти файлы запуска, перезагрузки, остановки и др. В папке home будут ваши сайты, а также файлы администрирования в localhost. В папке tmp находятся временные файлы. В папке usr находятся файлы баз данных mysql, она сама php,bin, файлы apache и др.

2.2.2 Установка Joomla на локальный сервер Denwer

После скачевания Joomla потребуется:

Создать папку с именем www в папке Z:\home\localhost

После распаковать скачанный архив с Джумлой в папку Joom созданную в папке www.

Запустить Denwer-ярлык Run.

Процесс установки:

Для этого нужно набрать в адресной строке браузера URL вашего ресурса, например, http://localhost/mysite/ . В моём случае это http://localhost/joom/ В открывшемся окне выбираем нужный язык и нажимаем кнопку «Далее».

На следующей странице мастер установки производит проверку соответствия Web-сервера требованиям Joomla. Требования разделены на группы, обязательные и рекомендуемые. Несоответствующие требованиям параметры будет подсвечены красным. Главное, чтобы в области обязательных требований все было подсвечено зеленым.

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

В поле «Тип базы данных» оставляете MySql, в поле «Название хоста», указываем «localhost» имя пользователя «root» без пароля.

В следующем окне нам предложат настроить доступ по FTP к сайту нажимаем «Далее».

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

На этой же странице можно установить демо-данные для получения наглядного представления о возможных вариантах организации информации на вебсайте. Правда эти демо-данные потом придется удалять. Нажимаем «Далее».

Процесс установки завершен. Удаляем директорию INSTALLATION и Joomla готова к работе.

2.2.3 Создание верстки для шаблона

1. С помощью Блокнота верстаем разметку составляющих.

Для этого открываем Блокнот и прописываем следущие:

<!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="wrapper">

<div id="header">

<div id="logo">

<a href="#"><img src="images/logo.png" width="447" height="122" alt="#"></a>

</div>

<div id="loz">

</div>

</div>

<div id="nav">

<div id="menu">

</div>

</div>

<div id="container">

<div id="content">

<div id="all">

<div id="top">

<div id="top_back">

<div id="top_left">

<div id="top_right"></div>

</div>

</div>

</div>

<div id="sodergan">

<div id="text"></div>

<div id="news">

<div class="colon">

</div>

<div class="colon">

</div>

</div>

</div>

<div id="bot">

<div id="bot_back">

<div id="bot_left">

<div id="bot_right">

</div>

</div>

</div>

</div>

</div>

</div>

<div id="left_s"></div>

<div id="right_s"></div>

</div>

</div>

<div id="footer">

<span>2013 &copy; <a href="#">Кухня.рф.</a> Все права защищены.</span>

</div>

</body>

</html>

Сохраняем в папку «Верстка» под названием index с расширением .html.

2. С помощью Блокнота прописываем стили.

Для этого открываем Блокнот прописываем следущее:

@charset "utf-8";

/* CSS Document */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

background-color:#e5feff;

height:100%;

min-width:1250px;}

ol, ul {

list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;}

table {

border-collapse: collapse;

border-spacing: 0;}

html{height:100%;}

/*-------------------------------------------------*/

#wrapper{

height:100%;}

/*-------------------------------------------------*/

#header{

height:150px;

width:100%;

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

background-repeat:repeat-x;}

#logo{margin-left:2%;

margin-top:9px;

height:122px;

width:447px;

float:left;}

#loz{height:150px;

width:700px;

float:right;

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

background-repeat:no-repeat;

background-position:right;

color:#ffffff;

font-size:24px;

font-family:Verdana, Geneva, sans-serif;

font-style:italic;

font-weight:bold;

text-align:start;

text-height:140px;}

/*-------------------------------------------------*/

#nav{height:52px;

width:100%;

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

background-repeat:repeat-x;

margin-bottom:15px;}

#menu{

width:700px;

margin:0 auto;}

/*-------------------------------------------------*/

#container{

width:85%;

margin:0 auto;}

#content{

width:100%;

float:left;}

#all{margin:0 214px;}

#sodergan{

background-color:#ffffff;

border-left:3px solid #c3c3c3;

border-right:3px solid #c3c3c3;

overflow:hidden;}

#text{}

#news{

width:100%;}

.colon{

width:50%;

float:left;}

#top{

width:100%;}

#top_back, #top_left, #top_right{height:20px;}

#top_back{

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

background-repeat:repeat-x;}

#top_left{

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

background-repeat:no-repeat;}

#top_right{

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

background-repeat:no-repeat;

background-position:right;}

/*-------------------------------------------------*/

#bot_back, #bot_left, #bot_right{height:20px;}

#bot_back{

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

background-repeat:repeat-x;}

#bot_left{

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

background-repeat:no-repeat;}

#bot_right{

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

background-repeat:no-repeat;

background-position:right;}

/*-------------------------------------------------*/

#left_s{

width:204px;

float:left;

margin-left:-100%;}

/*-------------------------------------------------*/

#right_s{

width:204px;

float:left;

margin-left:-204px;}

/*-------------------------------------------------*/

#footer{

font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size:11px;

color:#7f7f7f;

width:100%;

clear:both;

height:20px;

margin-top:-20px;

text-align:center;}

#footer a, #footer a:visited{

color:#4a55ea;

text-decoration:none;}

#footer a:hover{

text-decoration:underline;}

Сохраняем в папку «Вёрстка» под названием style с расширением .css.

3. Создаём папку «images» в папке «Вёрстка» в неё помещаем изображения которые прописаны в файле style.css.

Получается следущее:



2.2.4 Создание шаблона для Joomla из Верстки

1. Создаем папку Z:\home\localhost\www\Joom\templates\joom

2. Перемещаем папку images, index.html в папку joom.

3. Создаем папку Z:\home\localhost\www\Joom\templates\joom\css в неё перемещаем фаил style.css и переименовываем его на template.css так как Joomla основные стили извлекает именно из файла с таким названием.

4. Так как Joomla работает с языком разметки PHP меняем у файла index расширение с .html на .php и добавляем следующии команды:

4.1 В первую страку ставим:

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

4.2 В тег <html> добавляем следущюю команду для извлечения стандартного языка:

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

4.3 В тег <head> добавляем команду:

<jdoc:include type="head" />

4.4 Удаляем <link rel="stylesheet" type="text/css" href="style.css"> и заместо этого ставим:

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

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

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

4.5 Удаляем

<a href="#"><img src="images/logo.png" width="447" height="122" alt="#"></a>

и заместо этого ставим:

<a href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->templates;?>/joom/images/logo.png" width="447" height="122" alt="#"></a>

4.6 В <div id="menu"> добавляем:

<jdoc:include type="modules" name="top" />

4.7 В <div id="text"> добавляем:

<jdoc:include type="component" />

4.8 В <div id="news"> добавляем:

<div class="colon">

<jdoc:include type="modules" name="left_l>

</div>

<div class="colon">

<jdoc:include type="modules" name="right_l" />

</div>

4.9 В <div id="left_s"> добавляем:

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

4.10 В <div id="right_s">

<jdoc:include type="modules" name="right" style="mystyle" />

5. В файле template.css так же нужно провести изменение перед ссылками на изображения добавить «../» пример: url(../images/nav.png).

6. Создаём файл templateDetails.xml со следующим содержанием:

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

<install version="1.5" type="template">

<name>joom</name>

<creationDate>13.12.2013</creationDate>

<author>Zreen</author>

<copyright>GPL</copyright>

<authorEmail>kazantzeff.gosha@yandex.ru</authorEmail>

<authorUrl>kazantzeff.com</authorUrl>

<version>0.1</version>

<description>Шаблон своими руками.</description>

<files>

<filename></filename>

<filename></filename>

</files>

<positions>

<position>top</position>

<position>left</position>

<position>left_l</position>

<position>right</position>

<position>right_l</position>

</positions>

<params>

<param></param>

<param></param>

</params>

</install>

7. В папке Z:\home\localhost\www\Joom\templates\joom создаем папку html в ней создаем файл modules.php со следующим содержанием:

<?php

/**

* @version$Id: modules.php 14401 2010-01-26 14:10:00Z louis $

* @packageJoomla

* @copyrightCopyright (C) 2005 - 2010 Open Source Matters. All rights reserved.

* @licenseGNU/GPL, see LICENSE.php

* Joomla! is free software. This version may have been modified pursuant

* to the GNU General Public License, and as distributed it includes or

* is derivative of works licensed under the GNU General Public License or

* other free or open source software licenses.

* See COPYRIGHT.php for copyright notices and details.

*/

// no direct access

defined('_JEXEC') or die('Restricted access');

/*

* xhtml (divs and font headder tags)

*/

function modChrome_mystyle($module, &$params, &$attribs)

{

if (!empty ($module->content)) : ?>

<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">

<?php if ($module->showtitle != 0) : ?>

<div class="verh"></div>

<h3><?php echo $module->title; ?></h3>

<?php endif; ?>

<?php echo $module->content; ?>

<div class="niz"></div>

</div>

<?php endif;}

?>

2.2.5 Создание контента

Для этого заходим Админпанель Joomla:

Вводим в строке браузера http://localhost/joom/administrator/ в окне «Вход в административный раздел» вводим данные: логин и пароль.

Выберем нами созданный шаблон для этого во вкладке «Расширения» нажмем «Менеджер шаблонов» выберем шаблон «joom» и нажмем «поумалчанию». При нажатии «просмотр» отобразится ровно то что отображалось у нас в верстке.

1. Создание разделов.

Для этого во вкладке «Материалы» выбираем пункт «Менеджер разделов»

Далее выбираем «Создать» и в графу «Заголовок» прописываем название раздела «Рецепты» и нажимаем «Сохранить».

По аналогии создаем второй раздел «Сложные рецепты»

2. Создание категорий

Для этого во вкладке «Материалы» выбираем пункт «Менеджер категорий»



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

По аналогии создаем остальные категории.

3. Создание статей

Для этого во вкладке «Материалы» выбираем пункт «Менеджер материалов»

Далее выбираем «Создать»

1) В графу «Заголовок» пишем название статьи

2)Выбираем раздел, к которому будет привязана статья в данном случае «Рецепты».

3)Выбираем категорию к которой будет привязана статья в данном случае «Американская кухня»

4)В поле для текста статьи вставляем часть текста, нажимаем кнопку «Подробнее» и вставляем остаток текста.

5) Нажимаем «Изображение» выбираем нужное изображение предварительно поместив его в папку Z:\home\localhost\www\Joom\images\stories.

По аналогии создаем остальные статьи

2.2.5 Создание горизонтального меню

1. Во вкладке «Все меню» выбираем «Менеджер меню» нажимаем «Создать» .

2. Прописываем в графу «Системное имя» «mainmenu» в графу «Заголовок» «Главное меню» в графу описание «Горизонтальное меню.

3. Заполняем его пунктами меню для этого во вкладке «Все меню» выбираем «Главное меню» и нажимаем «Создать».

1) В графу «Заголовок» вводим «Главная».

2) Выбираем показать в Главное меню .

3) Выбираем опубликовать да.



По аналогии создаем пункты меню «Об авторах» «Видео рецепты» «Секреты повара» «Сложные рецепты».

Пункты меню «Холодные закуски» и «Первое блюдо» создаются следующим образом так как они выпадают из пункта меню «Сложные рецепты» вних нужно указать родительский элемент «Сложные рецепты».

4.Для правильного отображения горизонтального меню требуется:

1) Во вкладке «Расширения» выбрать «Менеджер модулей»

нажать «Создать»

2)Выбирать модуль «Superfish Menu»

3)В настройках модуля «Superfish Menu»

3.1) Выбрать позицию «top»

3.2) В Поле «Custom Stylesheets» написать {mostemplate}/css/menu.css

4) Создать в папке

Z:\home\localhost\www\Joom\templates\joom\css файл menu.css со следующим содержанием:

@charset "utf-8";

/* CSS Document */

.sf-menu{

float:none;

margin-bottom:0;}

.sf-menu #curent{

background:none;}

.sf-menu #curent span{

color:#f2f4fc;}

.sf-menu li{

background:none;}

.sf-menu li:hover .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover{

background:none;}

.sf-menu span:hover{

color:#f2f4fc;

border-bottom:1px dotted #f2f4fc;}

.sf-menu a, .sf-menu a:visited{

border-left:none;

border-top:none;

font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;

font-size:16px;

color:#006393;

font-weight:bold;

margin-top:0.2em;}

sf-menu li li{background-color:#e6ebee;}

.psrent ul a{

font-size:11px !important;

color:#717270 !important;

border-bottom:1px solid #ffffff !important;

margin:0 10px !important;

padding:0.45em 0em !important;}

.parent ul apan:hover{

border-bottom:none;

text-decoration:underline;

color:#58a7d5;

background-color:#e6ebee;}

Результат:

2.2.6 Создание навигационных панелей

В левом блоке навигации будет распологатся «Главное меню» и «Популярные рецепты» в правом «Поиск по сайту».

1.Создание меню «Главное меню».

1.1. Создаем «leftmenu».

1) Во вкладке «Все меню» выбрать «Менеджер меню» нажать «Создать».

2) В графах «Системное имя» «Заголовок» «Описание» написать leftmenu. Нажимаем «Сохранить»

1.2. Создаем пункты меню.

1) Во вкладке «Все меню» выбрать «leftmenu» и нажать создать.

2) Выбрать Материалы->Категории->Шаблон блога категории.

3) В графе «Заголовок» написать названия пункта, в графе «Категория» выбрать категорию на которую будет ссылаться пункт, в графах «Вступление» «Ссылки» прописать «0», в графе «Колонки» написать «1». Нажимаем «Сохранить».

По аналогии создать остальные пункты меню.

1.3. Создаём модуль «Главное меню»

1) Во вкладке «Расширения» выбираем «Менеджер модулей» нажимаем «Создать».

2) Выбираем модуль «Меню».

3) В графе «Заголовок» пишем «Главное меню», выбираем позицию «left», выбираем Название меню «leftmenu». Нажимаем «Сохранить».

2. Создание меню «Популярные рецепты».

2.1. Создаем модуль «Популярные рецепты»

1) Во вкладке «Расширения» выбираем «Менеджер

модулей» нажимаем «Создать».

2) Выбираем модуль «Самое четаемое»

3) В графе «Заголовок» пишем «Популярные рецепты», выбираем позицию «left». Нажимаем «Сохранить».

3. Создание «Поиск по сайт»

3.1 Создаем «rightmenu».

1) Во вкладке «Все меню» выбрать «Менеджер меню» нажать

«Создать».

2) В графах «Системное имя» «Заголовок» «Описание» написать rightmenu. Нажимаем «Сохранить».

3.2. Создаем модуль «Поиск по сайту»

1) Во вкладке «Расширения» выбираем «Менеджер

модулей» нажимаем «Создать».

2) Выбираем модуль «Поиск»

3) В графе «Заголовок» пишем «Поиск по сайту», выбираем позицию «right». Нажимаем «Сохранить».

Для того что бы все панели навигаций отображались в нужном формате добавляем в стилевой файл template.css следующие:

.moduletable{

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

background-repeat:repeat-y;

margin-bottom:10px;}

.verh{

height:8px;

width:200px;

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

background-repeat:no-repeat;}

.niz{

height:8px;

width:200px;

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

background-repeat:no-repeat;}

.moduletable h3{

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

background-repeat:no-repeat;

height:25px;

width:200px;

font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;

font-size:14px;

color:#FFF;

font-weight:bold;

text-align:center;

padding:7px;}

.moduletable .menu{

padding-left:35px;

font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;

font-size:15px;

color:#00F;}

.moduletable .menu li a, .moduletable .mostread li a{

color:#00F;

text-decoration:none;}

.moduletable .mostread{

padding-left:5px;

font-size:14px;}

.moduletable .menu li, .moduletable .mostread li{

margin-bottom:5px;}

.search{

text-align:center;

margin-bottom:7px;}

2.3 Руководство пользователя сайта

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

Также в левой колонке имеется меню «Популярные рецепты» там выводятся ссылки на самые читаемые рецепты нажав на любую из них вы в центральной колонке выведется выбранный вами рецепт. В горизонтальном меню имеются ссылки «Главная» «Об авторах» «Сложные рецепты» «Видеорецепты» и «Секреты повара».Нажав на ссылку «Главная» вы перейдёте на главную страницу, нажав на ссылку «Об авторах» вы перейдете на страницу с информацией об авторах рецептов. Все остальные ссылки действуют по аналогии, кроме «Сложные рецепты» наведя на эту ссылку выподит дополнительное меню с подразделами нажав на которые вы перейдете на страницу со соответствующими статьями. Так же на сайте присутствует поиск он находится в правой колонке, там имеется поле ввода, введите туда название нужного вам рецепта нажмите на клавиатуре клавишу «Enter» и он вам найдет нужный вам рецепт конечно же если таковой имеется на сайте. Логотип в верхней части сайта (так называемой «Шапке») кликабельный, находясь на любой странице сайта, кликнув на него, вам отобразится главная страница.

Заключение

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

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

При разработке сайта были использованы современные веб-технологии, позволяющие создавать интерактивные веб-страницы Joomla 1.5.25.

Литература

1. Описание программы CMS Joomla http://ru.wikipedia.org/wiki/Joomla

2. Словарь html тегов http://web-first-step.ru/publ/html_css/slovar_html_tegov/21-1-0-51

Размещено на Allbest.ru