Внешний вид проекта

4. Внешний вид проекта

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

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

Внешний вид сайта отличается выбранной цветовой гаммой соответствующей теме. Для его создания я сконструировала несколько видов фонов в графическом редакторе Adobe Photoshop CS для того, чтобы максимально «сблизить сайт с понятием дикой природой».

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

4.1 Фрейм

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

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

а. Баннер

В верхней части страницы (фрейма) размещается баннер, который изображает и указывает на то, на какой странице вы находитесь в данный момент.

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

В моем случае баннер представляет собой стилевую окраску страницы.

На главной странице размещен баннер с мультипликацией. Он так же был сделан в Adobe Photoshop CS как и остальная графика проекта, но при этом обработан в приложении COFEE CUP GIF ANIMATOR 7.5, что позволило создать в нем движение. Все баннеры имею формат «.jpg», кроме анимированного, имеющего формат «.gif».

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

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

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

в. Меню

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

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

Для того чтобы кнопка поменяла цвет, был использован специальный скрипт, написанный на языке JavaScript.

 

4.2 Скрипты

  Скрипт - программа, содержащая набор инструкций для некоторых приложений или утилит. Семантика и синтаксис инструкций в скриптах определяются соответствующими приложениями. Обычно язык скриптов включает простые структуры управления: линейные последовательности, циклы и условные выражения. Скрипт-язык - в Интернет - интерпретируемый (объектно ориентированный) алгоритмический язык, предназначенный для генерации динамических веб-страниц. Различают скрипт-языки: - исполняемые на стороне клиента: JavaScript и VBScript; и - исполняемые на стороне сервера: ASP, Perl, PHP и др. JAVAScript - язык программирования, основанный на объектном представлении браузера. Текст программы встраивается непосредственно в HTML-документ и интерпретируется самим браузером. JAVAScript применяется для придания пользовательскому интерфейсу большей интерактивности по сравнению со статическим HTML, он позволяет реализовать: бегущую строку, изменяемые рисунки и т.д. Главный принцип работы меню – гиперссылка. Гиперссылки позволяют перейти к другому разделу текущего документа или Web-страницы, к другому документу Word или к другой Web-странице или к файлу, созданному в другой программе. С помощью гиперссылок можно переходить также к файлам мультимедиа, в том числе звукозаписям и видеозаписям. Гиперссылки можно делать на закладки, помещенные в данном или другом документе. Это позволяет перейти на нужный раздел, не перелистывая документ. Место назначения гиперссылки, например Web-страница, может располагаться на жестком диске того же компьютера, в сети Интернет или в Интернете.

5. Особенности оформления

5.1 Галерея фотографий

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

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

Помимо этого сайт «дает советы» посетителям сайта в зависимость от дня недели, это приятно удивляет посетителей

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

Заключение

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

 

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

 

1.  Э. Крамер. HTML – Наглядный курс Web-дизайна. М.-Спб.-Киев: Диалектика, 2001;

2.  Пол Макфедрис. Создание Web-страниц. М.: АСТ Астрель, 2005;

3.  Интернет – ресурсы: