Разработка Интернет-страницы преподавателя спецтдисцеплины

Седьмая позиция - модуль «Jsn imageshow pro» находиться ниже шестой позиции в левой части сайта. С помощью этого модуля я сделал слайд шоу переключающиеся автоматически. Слайд шоу состоит из четырех фотографий.

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

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

Десятая позиция - это меню второго столбика, находится между девятой и одиннадцатой позиции. Содержит в себе ссылки на статьи «Электронный учебник, Презентации и Сборка автомобиля "ОКА"».

Одиннадцатая позиция - это  меню третьего столбика, находится  там же, где и девятая позиция, только в правой части сайта. Содержит в себе две ссылки на статьи «Автомеханик-2011 и Автомеханик-2012» и ссылку на компонент «JoomTest»  для организации тестирования посетителей на сайте. Она позволяет создавать категории, которые могут содержать тесты из неограниченного количества вопросов, а так же задать последовательность вопросов. У пользователя есть возможность приостановить тест и продолжить его прохождение в любое удобное время. Для прохождения теста необходимо быть зарегистрированным пользователем.

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

Тринадцатая позиция - это модуль «Популярные новости», находится ниже десятой позиции. Здесь находятся ссылки на самые читаемые материалы на сайте.

Четырнадцатая позиция - это компонент «Apoll», находится ниже одиннадцатой позиции.  Тут находится опрос.  Если нажать кнопку «Ок» или «Итог»  то отобразиться результаты опроса  в виде анимированной круговой диаграммы.

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

В правом нижнем углу сайта  имеется кнопка «Наверх» для быстрого возвращения посетителей сайта  на начало страницы за это отвечает плагин «J2top».

Что бы просматривать PDF документы  необходимо, что бы на компьютере была установлена программа Adobe Reader.

Внизу после каждой статьи есть кнопки социальных сетей. За это отвечает плагин «Russian social bookmarks buttons», при нажатии кнопки можно поделиться с друзьями о понравившимся статье. Так же предлагается оставить комментарий к статье. Для этого достаточно ввести имя, email и сам комментарий, за это отвечает компонент JComments.

1.2 Обоснование выбранной структуры

Существует несколько  основных структур сайта:

1) Иерархическая - страницы разбиты по категориям и подкатегориям. Такая структура наиболее удобна.

2) Произвольная - страницы расположены в свободном порядке. Такая структура оправдана только для небольших сайтов.

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

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

• Каталог 1 (Раздел 1)
• Подкаталог 1.1 (подраздел 1.1).
• Подкаталог 1.1.1 (подраздел 1.1.1).
• Подкаталог 1.1.2 (подраздел 1.1.2).
• Подкаталог 1.2 (подраздел 1.2).
• Подкаталог 1.3 (подраздел 1.3).
• Каталог 2 (Раздел 2)
• Подкаталог 2.1 (подраздел 2.1).
• Подкаталог 2.2 (подраздел 2.2).
• Подкаталог 2.3 (подраздел 2.3).
• .....

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

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

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

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

Глава вторая

2.1 Средства, применяемые при создании страницы

Сайт я создавал на локальном  сервере «Denwer»» под системой управлением  сайтом «CMS Joomla 1.5». Потом перенес  сайт с Денвера на бесплатный хостинг  «Red Z».

Denwer - это набор дистрибутивов  и программная оболочка, предназначенные  для создания и отладки сайтов  на локальном ПК под управлением  ОС Windows. На Денвере я и создавал  мой сайт.

Joomla - система управления  содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных MySQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.

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

1) aiContactSafev.2.0.2.d.stable бесплатный  компонент создания форм обратной  связи. С помощью данного компонента  я создал контактную форму  обратной связи включающая в  себе четыре текстовых поля  и систему безопасности от  спама CAPTCHA. Она будет служить  для связи между администраторам сайта и пользователем. В компоненте много настроек и параметров. Можно создавать форму обратной связи в любом месте веб-страниц с любым количеством полей. Система безопасности CAPTCHA имеется для разных языков, а также с различным дизайном и цветами фона.

2) Apoll бесплатный компонент, менеджер опросов, который отображает результаты в виде анимированной круговой диаграммы. С помощью этого компонента я организовал опрос «Оцените мой сайт» на данный момент 15 пользователей уже проголосовало показав следующую статистику 80% считают что сайт сделан на отлично.

3) Компонент JComments позволяет посетителям сайта оставлять комментарии к различным материалам, размещенным на сайте.

4) JoomlaPack компонент для резервного копирования сайта. Компонент создает полную резервную копию (backup) сайта вместе с дампом базы данных в одном архиве, прямо из административной панели Joomla. Архив бэкапа может быть неограниченного размера, или разбит по частям. Кроме того, можно сделать резервную копию только файлов сайта или базы данных.

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

6) PhocaGallery - это галерея изображений. Она включает в себя компонент, модули и плагины, и позволяет пользователям просматривать изображения или видео Youtube в самых разных стилях. Изображения, по-умолчанию, отображаются только внутри компонента. Необходимо использовать PhocaGallery Plugin для отображений изображения в статьях (и Phoca Gallery кнопки плагина - для более легкого добавления изображений в статьи). Изображения могут отображаться в виде слайд-шоу в статьях с помощью плагина Phoca Галерея Слайд-шоу или они могут быть выведены в различных позициях для модулей.

7) Russian social bookmarks buttons это плагин, который добавляет в статью кнопки, для опубликования статьи или ссылки в популярных социальных сетях. Плагин вставляет кнопки автоматом, можно вставлять и вручную с помощью специального тега, в любое место статьи.

8) J2top - плагин, который добавляет  на сайт кнопку для быстрого  возвращения посетителей сайта на начало страницы. Имеет массу настроек такие как размер кнопки, цвет, размер шрифта, отступы, позиция слева или справа и т.д.

Я так же подключил на сайт средство веб-аналитики Google Analytics. Эта служба позволяет оценить трафик на веб-сайт и эффективность различных маркетинговых мероприятий. Мощные, гибкие и очень простые в использовании функции.

Мой сайт расположен на бесплатном хостинге «Red Z». Адрес сайта www.ulpig.jr1.ru что бы зайти в административную панель сайта необходимо набрать в адресной строке www.ulpig.jr1.ru/administrator и ввести логин и пароль. Хостинг «Red Z» я выбрал потому что он соответствует всем требованиям современных хостингов. Хостинг бесплатный берется только плата за отключение рекламы на сайте и увеличение дискового пространства на сервере на данный момент плата составляет 20 рублей в месяц. Предоставляется домен третьего уровня бесплатно, так же есть дополнительная возможность подключение домена второго уровня, что немало важно для сайта.

2.2 Создание Web-страницы с помощью языка HTML

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.

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

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

<p>Информация</p>

Здесь стартовым тегом  является тег <P>, а завершающим - </P>. Завершающий тег отличатся  от стартового лишь тем, что у него перед текстом в скобках <> стоит символ '/' (слэш).

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

A) Объявление HTML;

B) Заголовочная часть;

C) Тело документа. 

A) Объявление HTML

<HTML> и </HTML>. Пара  этих тегов сообщает программе  просмотра (браузеру) что между  ними заключен документ в формате  HTML, причем первым тегом в документе  должен быть тег <HTML> (в самом  начале документа), а последним  - </HTML> (в самом конце документа).

<HTML>

.

.

.

</HTML>

B) Заголовочная часть. 

<HEAD> и </HEAD>. Между  этими тегами располагается информация  о документе (название, ключевые  слова для поиска, описание и  т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE>.

<HTML>

<HEAD>

<TITLE>Моя первая страница</TITLE>

</HEAD>

</HTML>

C) Тело документа. 

Третьей главной частью документа  является его тело. Оно следует  сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй - перед тегом </HTML>. Тело HTML-документа - это место, куда автор помещает информацию, отформатированную средствами HTML.

<HTML>

<HEAD>

<TITLE> Моя первая страница</TITLE>

</HEAD>

<BODY>

......................................

</BODY>

</HTML>

Теперь мы можем написать HTML-код нашей странички:

<HTML>

<HEAD>

<TITLE>Моя первая страница</TITLE>

</HEAD>

<BODY>

Здесь будут мои страницы!

</BODY>

</HTML>

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