Создание сайта "Дикие кошки"

Создание сайта "Дикие кошки"

5

МОУ Гимназия №17

Сайт «Дикие кошки»

Аттестационная работа по информатике и ИКТ

Королев 2007

План:

1. Введение

2. Интернет, WWW.

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

Структура HTML документа

Форматирование текста

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

Фреймы

Скрипты

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

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

Интересные решения

6. Заключение

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

1. ВСТУПЛЕНИЕ

В настоящее время люди все чаще и чаще обращаются по различным причинам к такому источнику информации как Глобальная Компьютерная Сеть (World Wide Web).

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

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

Internet - это самая большая мировая компьютерная сеть. Теперь Internet имеет приблизительно 150 миллионов пользователей более чем в 50 странах. WWW доступен в основном через Internet; но говоря WWW и Internet мы подразумеваем не одно и то же. WWW можно отнести к внутреннему содержанию, то есть это какой- либо абстрактный мир знаний, в то время как Internet является внешней стороной глобальной сети в виде огромного количества кабелей и компьютеров.

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

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

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

2. ИНТЕРНЕТ, WWW

Так что же такое World Wide Web, или, как говорят в просторечии, WWW, the Web? WWW - это распределенная информационная система мультимедиа, основанная на гипертексте.

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

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

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

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

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

- навигации и просмотра Веб - ресурсов;

- скачивания файлов и т.п.

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

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

Что же такое Web- сайт и для чего он нужен?

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

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

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

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

Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными броузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

3.1 Структура HTML документа

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

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

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

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

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

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

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

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

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

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

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

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

3.2 Форматирование текста

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

Для начала новой строки используется тег <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. Интернет - ресурсы: