Смекни!
smekni.com

Создание сайта "Дикие кошки" (стр. 2 из 2)

Для начала новой строки используется тег <BR> (сокр. от англ. break - прервать). Этот тег приводит к отображению браузером дальнейшего текста сначала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз.

Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <P> (англ. paragraph -абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка.

Внутри скобок тега кроме его названия могут размещаться также атрибуты <A>(англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя _атрибута ="значение".Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выровнен влево ALIGN="left". Возможны также выравнивания вправо ALIGN="right" и по центру ALIGN="center". При использовании
атрибутов, после форматируемого текста следует использовать закрывающий тег </A>

В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег <HR> выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег <HR> может содержать несколько атрибутов. и дают контурную линию с трехмерным эффектом углубления. дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселах. Например, 50% - половина ширины страницы, 400 - ширина в 400 пикселов.

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. Интернет – ресурсы: