Разработка web-сайта для Притокской средней общеобразовательной школы

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

3

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

Разработка web-сайта для Притокской средней

общеобразовательной школы

Содержание

Введение

Раздел I. Современные Интернет-технологии

1.1 World Wide Web

1.2 Web-страницы и web-сайты

1.3 Язык разметки гипертекстовых страниц HTML

1.4 Представление текста на web-страницах

1.5 Представление графики на web-страницах

1.6 Знакомство с Joomla 1.7

1.7 Преимущества Joomla 1.7

1.8 Функции Joomla 1.7

Раздел II. Реализация web-сайта с помощью Joomla 1.7

2.1 Общая структура сайта

2.2 Дизайн web-сайта

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

2.4 Описание установки Joomla 1.7

2.6 Создание Категории

2.7 Создание объекта содержимого

2.8 Создание меню

2.9 Установка Шаблона сайта

Заключение

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

Приложение

Введение

сайт программный информация

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

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

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

Каждый из нас уже сейчас может сделать свой вклад в развитие Internet. Для этого достаточно создать свой web-сайт и разместить его в Сети.

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

Тема моей курсовой работы: Разработка web-сайта для Притокской средней общеобразовательной школы.

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

Объект исследования: web-сайт Притокской школы.

Предмет - создание структуры web-сайта с помощью системы Joomla.

Цель - создание web-сайта школы.

Для этого необходимо решить следующие частные задачи:

- ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке;

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

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

- ознакомиться с основными правилами и рекомендациями по разработке и созданию web-сайтов с помощью программы Joomla;

- определиться со структурой web-страниц;

- представить пошаговую стратегию разработки web-сайта.

сайт программный информация

Раздел I. Современные Интернет-технологии

1.1 World Wide Web

World Wide Web - глобальная компьютерная сеть, на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в web-браузере отображается в виде web-страниц, которые являются основным элементом байтов WWW.

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

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

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

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

Распределенная информационная система: информация сохраняется на огромном великом множестве так называемых WWW-серверов (servers). То есть компьютеров, на которые установленное специальное программное обеспечение и которое объединенные в сеть Internet. Пользователи, которые имеют доступ к сети, получают эту информацию с помощью программ-клиентов, программ просмотра WWW-документов. При этом программа просмотра посылает по компьютерной сети запрос серверу, который сохраняет файл с необходимым документом. В ответ на запрос сервер высылает программе просмотра этот необходимый файл или сообщение об отказе, если файл по тем или иным причинам недоступен. Взаимодействие клиент-сервер происходит по определенным правилам, или, как говорят иначе, протоколам. Протокол, принятый в WWW, называется HyperText Transfer Protocol, сокращенно - HTTP.

Мультимедиа: информация включает в себя не только текст, но и двух- и трехмерную графику, видео и звук.

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

Такие ссылки называют гиперссылками или гиперсвязями. На экране компьютера в окне программы просмотра ссылки выглядят как выделенные каким-нибудь образом (например, другим цветом и/или подчеркиванием) участка текста или графики. Выбирая гиперссылки, пользователь программы просмотра может быстро перемещаться от одной части документа к другой, или же от одного документа к другому. При необходимости программа просмотра автоматически связывается с соответствующим сервером в сети и запрашивает документ, на который сделана ссылка. Кстати, идея гипертекстового представления информации должна уже быть хорошо знакома пользователям разных версий системы Microsoft Windows. Именно по этому принципу построена в Windows система подсказок (Help), с той лишь разницей, что гипертекстовая система подсказок Windows не является распределенной.

Итак, web-страница может содержать стилизованный и форматированный текст, графику и гиперсвязи с разными ресурсами Internet. Чтобы реализовать все эти возможности, был разработанный специальный язык, названная HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра.

1.2 Web-страницы и web-сайты

С технической точки зрения web-страница -- это обычный текстовый файл, который можно создать в любом текстовом редакторе, том же Блокноте, стандартно поставляемом в составе Windows. Этот файл содержит собственно текст web-страницы и различные команды форматирования этого самого текста. Команды форматирования называются тегами, а описывает их особый язык HTML (HyperText Markup Language, язык гипертекстовой разметки).

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

Но как web-обозреватель дает понять web-серверу, какая web-страница ему нужна? Очень просто -- он пересылает в составе клиентского запроса имя и полный путь файла, в котором она сохранена. Скажем, вот так: http://comp45.buh.department.ru/somepage.html

Этот запрос заставит web-сервер извлечь и отправить web-обозревателю файл somepage.html.

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

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

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

Когда web-обозреватель присылает web-серверу запрос вида: http://wvw.somesite.ru/somepage.html

Web-сервер ищет файл somepage.html в корневой папке сайта и, если находит, отправляет его web-обозревателю. Если же такого файла нет или web-сервер почему-то не может его загрузить, он отправляет web-обозревателю сообщение об ошибке.

1.3 Язык разметки гипертекстовых страниц HTML

сайт программный информация

Язык разметки гипертекстовых страниц (HTML - Hypertext Markup Language) представляет собой язык, разработанный специально для создания web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.

Стандарт HTML и другие стандарты для web разработаны под руководством консорциума W3C (World Wide Web Consortium).

На практике на стандарт HTML большое влияние оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Netscape Navigator. Эти теги в данный момент могут как входить, так и не входить в состав действующей спецификации HTML.

Информации о тегах HTML Compendium (краткое руководство по HTML) созданно Ron Woodall. Компендиум содержит список тегов и их атрибутов в алфавитном порядке, а также обновленную информацию о поддержке каждого из них со стороны браузеров.

1.4 Представление текста на web-страницах

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

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

Пропорциональный шрифт - иначе "шрифт переменной ширины" для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная "W" занимает больше места в строке по горизонтали, чем прописная "I". Такие гарнитуры, как: Times, Helvetica и Arial являются примерами пропорциональных шрифтов.

Web-браузеры для большинства текстов на web-странице, включая основной текст, заголовки, списки, цитаты и т. д., используют пропорциональные шрифты. Как правило, большие отрывки основного текста удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку большинство пользователей не имеют времени заменить шрифты, установленные по умолчанию, с большой вероятностью можно предположить, что текст на вашей странице будет отображен шрифтом Times размером 10 или 12 пунктов (по умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet Explorer). Но это всего лишь общее правило.

Шрифт с фиксированной шириной предоставляет одинаковое место для всех символов шрифта. Заглавная "W" занимает не больше места, чем прописная "I". Примерами шрифтов фиксированной ширины являются гарнитуры Courier и Monaco. В web-браузерах шрифты фиксированной ширины используются для отображения любого текста внутри следующих HTML-тегов: <рге>, <tt>, <code>, <kbd>,<samp>, <хтр>.

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

Размер шрифта. Обычно размер шрифта определяется в пунктах (72 пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не достаточно точно переводятся между платформами. Отчасти это происходит потому, что их операционные системы управляют дисплеями с различными разрешениями.

1.5 Представление графики на Web-страницах

На данный момент почти все изображения в web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее - краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов.

GIF. GIF - Grafic Interchange Format можно назвать традиционным форматом файлов web. Он был первым форматом файлов, который поддерживался web-браузерами, и по сей день продолжает оставаться основным графическим форматом web.

Его свойства состоят в следующем:

- поддерживает не более 256 цветов (меньше можно и часто нужно);

- использует палитру цветов;

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

- поддерживает чересстрочную развертку;

- является поточным форматом, т.е. показ картинки начинается во время перекачки;

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

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

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

А теперь немножко разъяснений - к чему эти свойства могут привести. Как мы написали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если у взять красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.

JPEG. Вторым наиболее популярным графическим форматом в web является JPEG - Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.

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

PNG. Есть еще третий графический формат, конкурирующий за постоянное использование в web. Это формат PNG - Portable Network Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в web. Именно поэтому он включен здесь в "большую тройку". PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).

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

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

1.6 Знакомство с Joomla

Изо всех подобных систем, которые можно встретить, Joomla мне понравилась больше всего. Joomla появилась на Web-арене в 2005 году. Однако она сразу завоевала доверие простотой развертывания и обслуживания. Используя Joomla, вы сразу избавитесь от плохо организованных web-интерфейсов.

С появлением Word Wide Web, любой желающий мог создать свою, пусть даже самую простую, Web-страничку, но для ее создания нужно было знать язык HTML. Различными компаниями были созданы редакторы HTML-кода вроде Adobe Dreamweaver и Microsoft FrontPage, упрощающие создание Web-страниц. Некоторые из таких редакторов позволяли управлять всеми этапами создания сайта - от написания HTML-кода до загрузки этого кода на сервер. При этом знание самого кода в большинстве случаев (для создания именно простых страниц) не требовалось - ведь редакторы предлагали визуальные средства создания страниц.

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

Чтобы решить проблему обновление сайта, а именно - автоматизировать само обновление, крупные информационные компании вроде Newsweek и TIME были вынуждены начать разработку нового типа программного обеспечения - систем управления контентом (CMS). CMS не только автоматизирует управление содержимым сайта, но и позволяет пользователям, не знакомым с различными техническими тонкостями, размещать свои материалы в системе непосредственно через интерфейс пользователя. Понятно, что теперь пользователям для размещения материалов на сайте не нужно знать ни HTML, ни вникать в технические подробности самого процесса обновления сайта.

CMS позволяет всем пользователям сконцентрироваться на выполнении именно их задач. Например, для web-дизайнера сайт - это набор визуальных шаблонов, определяющих представление содержимого сайта пользователю. Дизайнеру нужно изменить всего один шаблон, ему не нужно, как раньше, изменять дизайн всех страниц сайта. Когда автор материал на сайте, он будет автоматически «одет» в условленный Web-дизайнером шаблон дизайна, и новая страница будет выглядеть так же, как и все остальные страницы сайта.

В начале 1990-х, когда WWW еще только зарождался, CMS были доступны только крупным корпорациям. Ведь стоимость разработки и внедрения обходилось в сотни тысяч долларов. Согласитесь, не каждый пользователь может потратить 100-200 тыс. долларов на систему управления своей домашней страничкой. Кроме того, многие первые CMS были настолько сложны в использовании, что обслуживание сайта требовало пристального внимания со стороны эксперта по CMS. Поэтому многие отказались от CMS, даже если могли себе его позволить

Что же касается Joomla? То она не только бесплатна, но и одна из самых простых в использовании CMS. Практически каждый может загрузить, установить и загрузить Joomla на своем сервере. На все про все уйдет не более 20 минут. Поэтому Joomla доступна не только малым и средним организациям, но и обычным домашним пользователям.

1.7 Преимущества Joomla

Интересно, что, несмотря на наличие многих других CMS, Joomla используется не только частными лицами, но и общественными организациями и корпорациями.

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

Главное в Joomla - простой, интуитивно понятный интерфейс пользователя. А шаблоны оформления, разработанные профессиональными дизайнерами, позволяют в одно мгновение преобразовать любой сайт.

К тому же многие CMS требуют от пользователя некоторой квалификации для настройки и обслуживания сайта. Joomla, напротив, позволяет производить все операции по обслуживанию сайта через простую и изящную панель управления. А поскольку у панели управления web-интерфейс, то управлять своим сайтом можно с любой точки Земного шара.

1.8 Функции Joomla

Казалось бы, мощность и простота - не совместимы, в это трудно поверить. Однако сразу же обратим внимание на следующие особенности Joomla:

· полноценное управление сайтом через web-интерфейс;

· Web-интерфейс позволяет управлять основными элементами сайта - страницами, графикой, файлами и другими данными;

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

· иерархическое управление группами пользователей;

· автоматизированное управление меню сайта;

· возможность автоматической публикации и удаления материала по расписанию;

· защита пользовательских учетных записей;

Но более внушительно выглядят функции управления контентом (содержимым сайта) и возможность взаимодействия посетителей и CMS:

· встроенные WYSIWYG-редакторы (What You See Is What You Get), позволяющие создавать страницы сайта без знания HTML;

· автоматический поиск по сайту;

· полная поддержка новостных лент форматов RSS и Atom;

· встроенная возможность создание опроса (голосования);

· управление рекламными баннерами;

· плагины для организации интернет-магазинов

· многоязычность (полная поддержка русского языка и русских кодировок символов).

Но и это еще не все. В дополнение ко всему вышесказанному нужно отметить следующие особенности Joomla:

· полная открытость исходного кода - вы загружаете исходный код и имеете право его изменять;

· поддержка операционных систем Linux и Windows;

· поддержка кеширования страниц для повышения производительности сайта.

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

Раздел II. Реализация web-сайта с помощью Joomla 1.7

2.1 Общая структура сайта

На главной странице отображаются основная информация о школе.

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

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

Страница «Устав школы» содержит общие положения и основные задачи школы.

Страница «Для родителей» содержит советы для родителей.

2.2 Дизайн web-сайта

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

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

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

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

Разработка web-сайта велась в с помощью Joomla 1.7. Выбор данного пакета обоснован тем, что его освоение отнимает мало времени, во время разработки доступен предварительный просмотр каждой отдельно сделанной операции, доступно большое количество функций (организация интерактивных элементов сайта, создание гиперссылок в несколько кликов мышки и т.п.), пакет поддерживает большое количество технологий (HTML, PHP, ASP, Java, XML, XSLT, CSS и другие).

При создании сайта использовались стандартные шаблоны.

2.4 Описание установки Joomla 1.7

Для доступа к административной панели управления (Backend - бэк-енд, панель управления) Joomla используйте адрес Вашего веб-сайта (или полный путь до папки, в которую установлена Joomla) с добавлением в конце пути "/administrator". Например, если адрес веб-сайта www.mysite.ru, то доступ к панели управления возможен по адресу www.mysite.ru/administrator. После правильного ввода адреса, откроется страница авторизации



Рисунок 3 - Главная страница панели управления Joomla

При правильном вводе имени пользователя и пароля откроется главная страница администрирования системой, то есть будет открыта панель управления Joomla (Рисунок 4), которая предоставит управления всеми функциями и возможностями Joomla. Возвратиться на главную страницу панели можно в любое время при нажатии кнопки "Главная" в левом верхнем углу.

2.6 Создание Категории

Категория - это объект в иерархии структуры содержимого.

Для работы с категориями необходимо перейти на страницу "Управление категориями".

Можно нажать на главной странице панели кнопку "Менеджер категорий", или в основном меню выберите "Материалы", затем пункт "Менеджер категорий". Будет открыта страница "Управление категориями".



Рисунок 4 - Страница "Управление категориями"

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

На странице "Управление категориями", используя кнопки на панели инструментов, можно (перечисление справа налево):

Помощь - открыть в новом окне страницу описания поданному окну ("Управление категориями"). Нажмите кнопку "Помощь".

Создать новую категорию. Нажмите кнопку "Новый".

Изменить существующую категорию. Нажмите на название категории или отметьте нужную категорию и нажмите кнопку "Изменить".

Удалить существующую категорию. Отметьте нужную категорию и нажмите кнопку "Удалить".

Копировать существующую категорию. Отметьте нужную категорию и нажмите кнопку "Копия".

Перенести - переместить существующую категорию и все ее содержимое в другой раздел. Отметьте нужную категорию и нажмите кнопку"Перенести".

Скрыть (сделать неопубликованной) существующую категорию. Отметьте нужную категорию и нажмите кнопку "Скрыть".

Допустить (Опубликовать) существующую категорию. Отметьте нужную категорию и нажмите кнопку "Допустить".

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

2.7 Создание объекта содержимого

Объект содержимого - это основное содержание сайта и нижний объект в иерархии структуры содержимого. Другими словами объект содержимого - это ваша статья, которая должна содержаться в одной из ваших категорий (соответственно и раздела).

Для работы с объектами содержимого необходимо перейти на страницу "Менеджер Материалов".

Можно нажать на главной странице панели кнопку "Менеджер материалов" или в основном меню выберите "Материалы", затем пункт "Менеджер материалов". Будет открыта страница "Управление содержимым".

При создании нового объекта содержимого нужно будет выбрать раздел и категорию, в который должен войти новый объект. Опции фильтрации на странице доступны справа под панелью инструментов. Опции фильтрации (по разделам, по категориям) наследуются при создании нового объекта содержимого.

На странице "Менеджер материалов", используя кнопки на панели инструментов, можно (перечисление справа налево):

Создать новый материал. Нажмите кнопку "Создать".

Изменить существующий материал. Нажмите на название объекта или отметьте нужный объект и нажмите кнопку "Изменить".

Удалить существующий материал. Отметьте нужный объект и нажмите кнопку "В корзину".

Скрыть (сделать неопубликованным) существующие объекты содержимого. Отметьте нужные объекты и нажмите кнопку "Скрыть".

Допустить (Опубликовать) существующие объекты содержимого. Отметьте нужные объекты и нажмите кнопку "Допустить".

Отправить в архив существующие объекты содержимого. Отметьте нужные объекты и нажмите кнопку "В архив".

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

Далее доступны два окна HTML редактора, позволяющие разбить содержание статьи на две части: введение и все содержимое статьи. Разделение содержимого статей позволяет представить их в виде так называемого "Блога" или "Журнала", то есть списка краткого описания статей, с кнопками "Подробнее" на все содержимое статей.

Рисунок 6 - Страница редактирования «Материала»

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

Справа, после сохранения, доступны дополнительные параметры управления объектом содержимого. Последняя вкладка "Связь с меню" может настраиваться при создании меню.

Если необходимо поместить изображения в содержании, то нужно использовать специальную возможность вставки изображений. Нажмите кнопку "Вставить изображение". Указываем путь данного изображения, нажимае кнопку «Вставить». После этого в содержимое будет добавлено изображение. Чтобы увидеть изображение в тексте, нажмите кнопку "Просмотр" на панели инструментов.

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

На данной вкладке можно ввести описание объекта и ключевые слова.

Если использовать кнопку "Добавить (Раздел, Категория, Заголовок)", то будут добавлены в поле "Ключевые слова" названия раздела, категории и заголовок объекта.

2.8 Создание меню

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

Используя расширения Joomla легко создать меню для отображения на сайте. В данном руководстве рассматривается меню, построенное на стандартном модуле (установленном по умолчанию) mod_mainmenu. Данный модуль является по умолчанию главным для создания меню. Место вывода меню на сайте определяется в шаблоне сайта. Устанавливая дополнительные расширения, можно расширить возможности отображения стандартного меню или отобразить его в другом виде, например в виде выпадающего каскадного меню с подменю.

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

выбрать меню, в которое будет добавлен пункт (ссылка),

выбрать название пункта меню.

Нажмите кнопку "Связать с меню".

Примечание: На странице редактирования раздела или категории в дополнительном окне справа(для создаваемого раздела или категории данное окно будет доступно после сохранения - кнопка "Сохранить"). В данном окне необходимо:

выбрать меню, в которое будет добавлен пункт (ссылка),

выбрать тип меню, в котором виде будет отображаться раздел или категория,

выбрать название пункта меню.

Нажмите кнопку "Связать с меню".

Рисунок 6 - Доступ к странице "Управление меню"

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

Для работы с пунктами меню определенного меню (например, mainmenu) необходимо перейти на страницу "Управление меню [mainmenu]". В основном меню выбрать "Меню", затем пункт меню "mainmenu".

На странице "Управление меню [mainmenu]" (Рисунок 17) можно увидеть список уже созданных пунктов меню (по умолчанию без установки демонстрационных данных доступен только один пункт - "Главная").

Рисунок 7 - Страница "Управление меню [mainmenu]"

Для добавления нового пункта меню необходимо перейти на страницу "Новый пункт меню". Нажмите кнопку "Создать" на странице "Управление меню [mainmenu]" для добавления нового пункта меню в меню mainmenu.

Когда выбран тип нового пункта меню, необходимо перейти на страницу "Добавление -новый пункт меню: XXX": Шаг 2 (тремя Х-ми заменено название типа нового пункта меню). На этой странице необходимо выбрать и заполнить основные параметры и поля нового пункта меню. Параметры и поля отличаются в зависимости от выбранного типа нового пункта меню. Нажмите на кнопку "Далее" или на выбранный тип пункта меню.

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

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

Просмотр в новом окне браузера.

Просмотр в этом же окне с открытой панелью администратора.

Просмотр с показом позиций расположения моделей в шаблоне в этом же окне с открытой панелью администратора.

2.9 Установка Шаблона сайта

Если вы сами непосредственно устанавливаете и настраиваете Joomla, то одним из первых действий по настройке является установка шаблона сайта для вашего проекта. Есть много свободно распространяемых шаблонов для Joomla 1.7 и установка нового шаблона не является сложной процедурой. Шаблоны сайта для Joomla обычно распространяются (так же как и расширения) в виде .zip файлов(или также .tar.gz файла).Для использования таких файлов необходимо сохранить файл шаблона и далее перейти на страницу "Установка нового шаблона сайта" (Рисунок 9).

Рисунок 9 - Доступ к странице "Установка нового шаблона сайта"

На странице "Установка нового шаблона сайта" необходимо выбрать нужный файл для установки. Нажмите кнопку "Обзор" для выбора файла шаблона сайта и нажмите кнопку "Загрузить и установить".

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

Рисунок 10 - Доступ к странице "Управление шаблонами сайта"

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

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

Заключение

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

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

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

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

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

1. Движок сайта: Denver. http://www.denwer.ru/

2. Материал из Википедии -- свободной энциклопедии о системах управления сайтом. http://ru.wikipedia.org/wiki/CMS

3. Самоучитель Joomla Д. Рамел. Санкт-Петербург 2009 г

4. Content management system http://www.brutto.ru/informacija/uznat-bolshe/content-management-system

5. Joomla! CMS по-русски. http://joomlaportal.ru

6. Joomla-инструменты. http://docs.joom.ru/!;C651=0O:Categories

Приложение

Исходный код главной страницы:

<!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="ru-ru" lang="ru-ru" dir="ltr" >

<head>

<base href="http://www.mysite.ru/" />

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

<meta name="robots" content="index, follow" />

<meta name="keywords" content="Школьный сайт, Притокская школа, Александровский район, сайт школы" />

<meta name="rights" content="Сергей Петрушин" />

<meta name="generator" content="Joomla! 1.7 - Open Source Content Management" />

<title>Главная</title>

<link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />

<link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />

<link href="/templates/themza_j17_06/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

<link href="http://www.mysite.ru/index.php/component/search/?format=opensearch" rel="search" title="Искать Сайт МОУ Притокская СОШ" type="application/opensearchdescription+xml" />

<script src="/media/system/js/core.js" type="text/javascript"></script>

<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>

<script src="/media/system/js/caption.js" type="text/javascript"></script>

<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="/templates/themza_j17_06/js/jquery.nivo.slider.js"></script>

<script type="text/javascript">var sliderVars = new Array();sliderVars['effect']='random';sliderVars['animSpeed']='1000';sliderVars['pauseTime']='3000';sliderVars['directionNav']=true;sliderVars['directionNavHide']=true;sliderVars['controlNav']=true;sliderVars['keyboardNav']=true;sliderVars['pauseOnHover']=true;</script>

<script type="text/javascript" src="/templates/themza_j17_06/js/template.js"></script>

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />

<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="/templates/themza_j17_06/css/nivo-slider.css" type="text/css" />

<link rel="stylesheet" href="/templates/themza_j17_06/css/template.css" type="text/css" />

<link rel="stylesheet" href="/templates/themza_j17_06/css/blue.css" type="text/css" />

<!--[if lte IE 6]>

<link href="/templates/themza_j17_06/css/ieonly.css" rel="stylesheet" type="text/css" />

<![endif]-->

</head>

<body id="page_bg">

<a name="up" id="up"></a>

<div id="main_bg" class="banner1">

<div id="h_area"><img src="/templates/themza_j17_06/images/logo1.gif" align="left" alt="Company Logo" /><a href="/index.php" class="logo">МОУ &quot;Притокская СОШ&quot;</a>

<div id="position0"><form action="/index.php" method="post">

<div class="search">

<label for="mod-search-searchword">Искать...</label><input name="searchword" id="mod-search-searchword" maxlength="20" class="inputbox" type="text" size="20" value="Поиск..." onblur="if (this.value=='') this.value='Поиск...';" onfocus="if (this.value=='Поиск...') this.value='';" /> <input type="hidden" name="task" value="search" />

<input type="hidden" name="option" value="com_search" />

<input type="hidden" name="Itemid" value="101" />

</div>

</form>

</div> <br clear="all" />

<div id="top_menu"><div id="topnav"></div></div>

<div id="slider" class="nivoSlider">

<img src="/templates/themza_j17_06/images/slide1.jpg" title="" alt="slide 1" />

<img src="/templates/themza_j17_06/images/slide2.jpg" title="" alt="slide 2" />

<img src="/templates/themza_j17_06/images/slide3.jpg" title="" alt="slide 3" /></div></div>

<div id="leftcolumn">

<div class="moduletable_menu">

<h3>Главное меню</h3>

<ul class="menu">

<li class="item-101 current active"><a href="/" >Главная</a></li><li class="item-472"><a href="/index.php/inf-school.html" >Информация о школе</a></li><li class="item-473"><a href="/index.php/программа-развития-школы.html" >Программа развития школы</a></li><li class="item-474"><a href="/index.php/устав-школы.html" >Устав школы</a></li><li class="item-476"><a href="/index.php/для-родителей.html" >Для родителей</a></li></ul>

</div>

<div class="moduletable">

<h3>Наша школа</h3>

<div class="random-image">

<img src="/images/photo_sh//86.jpg" alt="86.jpg" width="146.666666667" height="110" /></div> </div>

<div class="moduletable">

<h3>Баннеры</h3>

<div class="bannergroup">

div class="banneritem">

<center><!--Openstat-->

<span id="openstat2227420"></span>

<script type="text/javascript">

var openstat = {counter: 2227420, image: 87, color: "458efc", next: openstat };

(function(d, t, p) {

var j = d.createElement(t); j.async = true; j.type = "text/javascript";

j.src = ("https:" == p ? "https:" : "http:") + "//openstat.net/cnt.js";

var s = d.getElementsByTagName(t)[0]; s.parentNode.insertBefore(j, s);

})(document, "script", document.location.protocol);

</script>

<!--/Openstat--></conter> <div class="clr"></div>

</div>

</div>

</div>

</div>

<div id="maincolumn_middle">

<div class="path">

<div class="breadcrumbs">

<span class="showHere">Вы здесь: </span><span>Home</span></div>

</div>

<div id="system-message-container">

</div>

<div class="blog-featured">

<div class="items-leading">

<div class="leading-0">

<p style="text-align: center;"><span style="color: #00ccff; font-size: 24pt;"></span><span style="background-color: #3366ff;"></span><span style="color: #3366ff; font-family: times new roman,times; font-size: 24pt;">Историческая справка</span> <span style="font-family: times new roman,times; font-size: 24pt; color: #3366ff;">МОУ «Притокская средняя </span></p>

<p style="text-align: center;"><span style="font-family: times new roman,times; font-size: 24pt; color: #3366ff;"><br /></span></p>

<p style="text-align: center;"><span style="font-family: times new roman,times; font-size: 24pt; color: #3366ff;">общеобразовательная школа»</span></p>

<p style="text-align: left;"><span style="font-family: times new roman,times; font-size: 14pt;"><br /></span></p>

<p style="text-align: justify;"><span style="font-family: times new roman,times; font-size: 14pt;"><img style="margin-right: 10px; margin-top: 3px; float: left;" src="/images/s20229.jpg" height="289" width="439" /><span style="font-size: 12pt;">В&nbsp;&nbsp; 1911&nbsp; году в Оренбургскую губернию приехали переселенцы из Украины. Здесь они купили у помещика Зубарева землю за 40 рублей. Это и стало началом земли Романовской. Выстроили они свои хаты всего в один ряд. Развели сады. Два из них были самые большие: яблоневый&nbsp; и вишнёвый. Сеяли пшеницу, ячмень, нанимали из окрестных сел сезонных работников. И закипела жизнь в деревне. А называться стала та деревня Романовка.</span></span><br /><span style="font-family: times new roman,times; font-size: 12pt;"></span></p>

<p style="text-align: justify;"><span style="font-family: times new roman,times; font-size: 12pt;">В 1932 году основатели села, не пожелав вступать в совхоз, уезжают на хутора: Кашкино,&nbsp; Зеленино. Оставляют они свои пустые избенки. Недолго пришлось пустовать этим избам. Стали занимать их приезжающие сюда башкиры, татары, мордва, русские, киргизы. Новые люди восстановили жизнь на селе. С 1933 по 1937 годы директором совхоза был&nbsp; двадцатипятитысячник Матвей Михайлович Литвинцев. И пошли дела в гору. Основали начальную школу. Первым учителем стал Пажетных Василий Иванович.</span><br /><span style="font-family: times new roman,times; font-size: 12pt;"></span></p>

<p style="text-align: justify;"><span style="font-family: times new roman,times; font-size: 12pt;">После войны было построено другое здание школы (на месте дома Пажетных Сергея). Школа стала восьмилетней в 1960 году, здание школы было одноэтажное. В 1964 году к зданию школы пристроили мастерскую и один кабинет. С начала основания восьмилетней школы директором была Батрак Антонина Тихоновна, она преподавала географию. Ёе сменила Логинова Валентина Ивановна, преподававшая историю и немецкий язык. После Логиновой директором стала Софонова Александра Алексеевна. В 1962&nbsp; году директором становится Набатчиков Анатолий Владимирович. </span><br /><span style="font-family: times new roman,times; font-size: 12pt;"></span></p>

<p style="text-align: justify;"><span style="font-family: times new roman,times; font-size: 12pt;">Современное здание школы было построено в 1970 году. А в 1972 году к зданию был пристроен спортивный зал. С 1978 года коллектив возглавлял Евстафьев Дмитрий Георгиевич. Школа становится средней в 1984 году. В настоящее время директором школы является Ленкова Татьяна Раильевна</span></p>

<p class="readmore">

<a href="/index.php/2-uncategorised/3-моу-притокская-сош-александровского-района-оренбургской-области.html">

Подробнее: МОУ "Притокская СОШ" Александровского района Оренбургской области</a>

</p>

<div class="item-separator"></div>

</div>

</div>

</div>

</div>

<br clear="all" /><br />

</div>

<div id="f_area">

<div class="box box1"> </div>

<div class="box box2"> </div>

<div class="box box3"> </div>

<br clear="all" />

</div>

<p id="power_by" align="center">

Powered by <a href="http://www.joomla.org/" target="_blank">Joomla!&#174;</a>.

Designed by: <a href="http://www.joomla-free-templates.info" title="" target="_blank">joomla templates</a> <a href="http://www.dedicatedaffiliateresellerhosting.com/" title="" target="_blank">dedicated reseller hosting</a>&nbsp;Valid <a href="http://validator.w3.org/check/referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.

...