Разработка сайтов

3.6 Программа и ее описание

Набрав в адресной строке браузера www.tguk-tuimazy.narod.ru (сайт зарегистрирован на сервере www.narod.ru) мы попадаем на сайт Туймазинского государственного юридического колледжа. После насколько секунд загрузки мы видим главную страницу (Рис 1).

Рис 1. Главная страница

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

Первое впечатление о сайте и о его разработчике дает заголовок (или банер, как его еще называют)(Рис 2.).

Рис 2. Банер

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

              Для быстрой загрузки сайта я применил прием разделения, т.е один «большой» файл (который был 200 kB)  я поделил на 6 частей с разрешением *.jpg (каждый из которых 3-6 kB). (Рис. 3)

Рис 3.  Пример разделения одного файла на шесть частей

Кнопки выполнены в графическом редакторе AdobePhotoshop, что позволяет придать изображению эффект трехмерности

(Рис. 4). Кнопка сохранена с разрешением *.gif. Эти графические файлы стали первыми использоваться в Internet. Gif  настолько удобный формат, что

      позволяет сжать размер файла до байт. В моем случае

Рис 4. Кнопка.                  размер кнопки 813 байт.

На сайте кнопки расположены вертикально слева. Также каждая кнопка  прописана Ява скриптом (JavaScript)(Рис. 5), что позволяет при наведении курсора мыши выделяться другим цветом. В этом эффекте используется принцип замены, т.е. когда кнопка находится «в состоянии покоя» она отображает один файл (Рис. 5.1) и как только курсор мыши наводится на нее кнопка отображает другой файл (Рис. 5.2). 

              Рис 5.1. Отображения  файла

                            «в состоянии покоя»

                                      Рис 5.1. Отображения файла

                                                    при наведении кур-

                                                    сора мыши.

Рис 5. Пример использования JavaScript.

Рассмотрим код языка HTML который позволяет нам это осуществить:

abitur1=new Image();

abitur1.src="img/knop/kn_abitur.gif";

abitur2=new Image();

abitur2.src="img/knop/kn2_abitur.gif";

Мы видим, что здесь просто указывается событие abitur1.src="img/knop/kn_abitur.gif";, abitur2.src="img/knop/kn2_abitur.gif";.

Где оператору  abitur1 присваивается файл kn_abitur.gif, а оператору  abitur2 файл kn2_abitur.gif.

В случае если изображении кнопки не загрузится, то под кнопкой я раместил подсказку (Рис. 6). Что позволит посетителю сайта легко с ориентироваться.

Рис 6. Пример размещения подсказки под кнопку.

Для удобства пользователя имеются кнопки прокрутки «Назад» и «Следующая»(рис. 7). Прокрутка осуществляется в порядке расположения тем, т.е если я нахожусь в разделе «Абитуриенты» кнопка «Назад» вернет меня на главную страницу, а «Следующая» в раздел «Заочникам».

Рис 7. Кнопки прокрутки

По этому же принципу работают ссылки в низу страницы (рис. 8), но уже с конкретным указанием разделов.

Рис 8. Ссылки внизу страницы.

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

Рис. 9. Пример как скачать метод. пособие

После нажатия появляется окно  «Загрузка файла», для сохранения его на диске. (рис. 9.1)

Рис 9.1. Окно для сохранения файла на диске.

Посетитель сайта может задать интересующий его вопрос руководству колледжа. В разделе «Наш адрес» нажать на ссылку «e-mail: Юридический коллеж» (рис. 10).

Рис 10. Пример отправки e-mail руководству ТГЮК.

После нажатия появляется окно программы для отправки электронных писем Outlook Express (рис.10.1).

Рис. 10.1. Программа для отправки эл. писем Outlook Express.

46