Исследование гидрологического состояния памятника природы города Миасса – речки Куштумги, создание информационно – образовательного сайта, посвященного изучению памятников природы Челябинской области.
творческая работа учащихся (информатика и икт, 9 класс) по теме

Научно-практическая конференция учащихся

Миасского городского округа

Исследование гидрологического состояния памятника

природы города Миасса – речки Куштумги,

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

Авторы: Синяшкина Юлия, Харина Оля, Мелехина Екатерина, Гатауллина Мария

учащиеся 9 – А класса МОУ «Средняя

общеобразовательная школа№4»

Научный руководитель: Федорова Елена Александровна

Учитель информатики МОУ «Средняя

общеобразовательная школа №4»

г.Миасс

2008г.

Содержание

Введение…………………………………………………………………………5

Глава I.  Теоретические основы сайтостроения.

1.1.     Обзор Web-технологий и языков программирования………………9

2. Виды и структуры Web-сайтов…………………………………………13

Глава II. Описание практического применения теоретических основ сайтостроения.

1. Анализ и создание логической структуры Web-сайта……..………..15
2. Подготовка дизайна………..……………………………………………20
3. Инструкция по пополнению и модернизации Web-сайта…………...28

Заключение……...………………………………………………………………30

Библиография……...……………………………………………………………31

Приложение А.  Логическая структура………………………………………32

Приложение Б.  Физическая структура………………………………………33

Приложение В.  Главная страница……………………………………………34

ведение

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

Число тех, кто хотел бы отметиться на просторах Интернета самостоятельно построенным сайтом, растет с каждым днем. Об этом свидетельствуют результаты опросов, проводимых на выставках, и письма читателей. Одной из самых распространенных служб Интернета (наряду с электронной почтой) является World Wide Web (WWW) — самая мощная информационная система, связывающая между собой миллионы документов (Web-страниц), размещенных на Web-серверах по всему миру. В расширении этой системы могут принимать участие практически все пользователи, имеющие доступ в Интернет. Объем информации размещенной в глобальной сети огромен. Кажется, там можно найти все, что Вас интересует. Но наше исследование показало, что информации о конкретных регионах, в частности о памятниках природы интересных значимых местах нашей глубинки просто нет.

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

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

Цель работы – на основе анализа теоретических основ и осуществления химического анализа  проб воды, показать ее значимость историческую, социальную, экономическую, экологическую, что позволит объективно обозначить ее место  в природоохранном комплексе Челябинской области,  посредством создания сайта учащимися 9 класса. На основе полученных данных разработка физической и логической структуры сайта, посвященного изучению памятников природы.

Объектом исследования является сайт, посвященный памятникам природы, на примере реки Куштумга.

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

Для достижения цели в работе были поставлены следующие задачи:

1. Провести сравнительный анализ качества воды реки Куштумги и реки Миасс.

2. Проверить индекс загрязненности воды (ИЗВ) в реке Куштумге.

3. Определить класс качества воды реки Куштумги.

4. Проанализировать страницы сайтов в Интернет и определить количество страниц, посвященных памятнику природы – реке Куштумга.

5. Получить навыки научно-исследовательской работы.

Теоретическими основами исследования являются публицистическая литература по географии, экологии, информатике и ресурсы Интернет.

В данном исследовании использованы следующие методы:

- анализ всевозможной информации по теме исследования;

- сравнение полученных результатов;

- выявление сайтов по теме;

- изучение навигации и юзабилити этих сайтов;

-абстрагирование на одной реке.

Новизну и практическую значимость работы характеризуют:

1. Обобщены теоретические и информационные подходы к исследованию Куштумги;
2. Разработана и апробирована  программа по сравнению результатов исследования;
3. Интегрирование предметов школьной программы, что позволяет повысить интерес  школьников к выполнению поставленных задач;
4. Разработан информационный источник, ориентированный на широкий круг пользователей Интернет: школьники при изучении географии, научно-исследовательские центры в качестве первоисточников, экологи.

Для того чтобы создать web-сайт, необходимо сначала определить цель и роль сайта, т.е. для чего он нужен и какие задачи будет решать.

Основными целями и задачами нашего сайта являются:

1. Сбор, систематизация и распространение информации о памятнике природы – реке Куштумга.
2. Привлечение внимания  к водоемам такого типа;
3. воспитание патриотизма и любви к окружающей природе, через создание сайта и размещение его в сети Интернет.

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

Глава I  Теоретические основы сайтостроения.

1.1. Обзор Web-технологий и языков программирования.

 При создании современных интернет-страниц, часто возникает необходимость организовать диалог с пользователем на высоком уровне. Примером тому может служить интернет-магазин, где пользователь выбирает товар и помещает его в корзину. Ваш ресурс при этом должен отслеживать не одного, а многих покупателей одновременно, записывать сделанный ими выбор, а также по требованию производит подсчет и т. д. Для таких целей служат различные Web-языки программирования. К ним относятся: VB-script, HTML, PHP, Perl. Два последних наиболее часто используются в последнее время. VB-script практически не используется.

 Script, в переводе с английского, означает сценарий. Таки образом при использовании Web-языков программирования мы описываем сценарий действия компьютера. Особенностью скриптовых языков является то, что программы (скрипты), написанные на них исполняются не на сервере, а на самом компьютере пользователя. За их загрузку и исполнение отвечает сам Интернет-браузер.[1]

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

1. HTML

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов (размечаемых «тегами»), служащих для создания относительно простых, но красиво оформленных документов. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащенностью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако, современное применение HTML очень далеко от его изначальной задачи. Например, тег

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

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

Язык HTML позволяет размечать в тексте:

1. Смысловую роль текстового блока (например: логическое ударение, заголовок (от первого до шестого уровня), параграф, пункт списка и др.), который обрабатывается браузером в соответствии со смыслом (например, в голосовых браузерах — изменение интонации, в графических — выделением курсивом, и т. п.) или настройками пользователя.
2. Гипертекстовые ссылки, которые значительно упрощают чтение множества связанных документов, ибо позволяют запросить документ с адресом, указанным в коде ссылки, простым щелчком мыши.
3. Гарнитуру, кегль, начертание, цвет шрифта для визуального вывода.
4. Специальные символы (выходящие за рамки ASCII символы пунктуации, математические символы, греческие и готические буквы, стрелки и т. п.)
5. .Формы для введения пользователем данных, которые позднее подвергаются обработке. Формы и другую информацию можно обрабатывать с помощью специальных серверных программ (например, на языках PHP или Perl).
6.  Открытие мультимедийных файлов, выводимых как непосредственно браузером (например, изображения в форматах JPEG, GIF или PNG; аудиофайлы MIDI и др.), так и внешними приложениями, «встраиваевыми» в окно браузера (Flash-анимация и прочее).

1.1.2.  PHP

В 1994 году датский программист (ныне живущий в Канаде) Расмус Лердорф (Rasmus Lerdorf) написал набор скриптов на Perl/CGI для вывода и учёта посетителей его онлайн-резюме, обрабатывающий шаблоны HTML-документов. Лердорф назвал набор Personal Home Page (Личная Домашняя Страница). Вскоре функциональности и быстроты Perl — интерпретатора скриптов перестало хватать, и Лердорф написал на языке C новый интерпретатор шаблонов PHP/FI (англ. Personal Home Page / Forms Interpreter — «Личная Домашняя Страница / Интерпретатор форм». PHP/FI включал базовую функциональность сегодняшнего PHP: оформление переменных в стиле Perl ($имя_переменной для вывода значения), автоматическую обработку форм и встраиваемость в HTML-текст и многое другое. Новорожденный язык отличался от своего прародителя более простым и ограниченным синтаксисом.

PHP - язык программирования, используемый на стороне WEB-сервера для динамической генерации HTML-страниц. Об этом говорит и расшифровка его названия: PHP - Personal HyperText Processor.

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

Очень приятная особенность PHP - то, что его команды включаются в обычные HTML-страницы с помощью специальных тегов, которые и заставляют PHP-машину выполнять на сервере нужные действия. Программам на PHP не нужны специальные CGI-директории с особыми правами доступа. Более того, на одной страничке можно произвольно чередовать "простой" HTML и PHP-код.

PHP не зависит от платформы. PHP прекрасно интегрируется во все популярные веб-серверы: Apacce и IIS, Zens и Netscape Enterprise Server, работает под Windows и OS/2, MacOS и практически всеми UNIX-подобными системами. Как следствие - PHP работает практически у всех хостеров, разрешающих собственные выполняемые скрипты.

Замечательная особенность PHP - его интегрированность практически со всеми современными интернет-технологиями. PHP поддерживает большинство современных веб-протоколов: IMAP, FTP, POP, XML, SNMP и другие. PHP прекрасно работает с базами данных. Трудно найти СУБД, поддержка которой не была бы реализована в PHP. MySQL и MS SQL Server, PostgreSQL и Oracle, Sybase и Interbase... Один только перечень баз данных, поддерживаемых PHP, займет, наверное, целый экран.

PHP включает в себя огромное количество встроенных функций: обработки строк и массивов, работы с файловой системой и с HTTP, электронной почтой, датой и временем, кириллицей и другими национальными алфавитами... Когда я впервые начал программировать на PHP, то был просто поражен обилием встроенных функций! Благодаря им многие алгоритмы, требующие в большинстве языков написания программного кода размером в несколько экранов, реализуются на PHP одной командой (точнее, вызовом одной функции).

Современные тенденции развития языков программирования не обошли стороной и PHP. Средства объектно-ориентированного программирования появились еще в PHP3. А в объектной модели PHP4 в полном объеме реализованы классические понятия объектно-ориентированного программирования: наследование, инкапсуляция и полиморфизм.

 

1.2. Виды и структуры Web-сайтов.

1.2.1 Сайт-визитка

Сайт имеет информационный и имиджевый характер. Это Ваша визитная карточка в Internet, которую могут увидеть тысячи посетителей сайта. Сайт предлагает расширенную информацию о Ваших товарах или услугах, существенно снижает Ваши расходы на традиционную рекламу и повышает ее эффективность за счет дополнительной информации. Содержит 10-15 страниц с текстом, иллюстрациями и графикой. Как правило, грамотно спланированные и хорошо оформленные сайты такого типа дают положительное представление о компании и побуждают пользователя обратиться к ее услугам. Сегодня же сайт такого типа скорее всего подойдет для небольшой компании, продвигающей на рынок ограниченное количество услуг. На сайты, как и на одежду, существует своя мода, и информационное представительство можно смело окрестить «писком моды» позапрошлогоднего виртуального сезона.[2]

1.2.2 Корпоративный сайт.

Новинка последнего времени – бизнес-сайт - прочно удерживает пальму первенства среди представителей крупного бизнеса. Это удивительное изобретение времени: - виртуальный офис компании в Internet работает 24 часа в сутки! В то время, когда вы обедаете, спите или отдыхаете на природе с друзьями, ваш web-сайт рекламирует товар, проводит маркетинговый опрос посетителей, заполняет заказ-наряды на доставку грузов, бронирует места в гостиницах, проводит конференции по нужной вам теме, отвечает на вопросы клиентов - одним словом, активно участвует в процессе бизнеса. И тем самым отрабатывает затраты на свое "содержание" в Internet. Посчитайте сами, как разгружается расчетный отдел компании, если хотя бы половина клиентов перестанет приходить в офис и начнет производить расчеты с вами со своего рабочего или домашнего компьютера. Другой пример - ваши сотрудники "захлебываются" в потоке клиентов, из-за чего не могут уделить каждому из них должного внимания. Переадресуйте часть этого потока в виртуальный офис - и проблема решится с плюсом в вашу пользу. Таким образом, сайт решает задачу по общению с клиентом, принятию заказа, его оплате, высвобождая реальное время реальных сотрудников. Если Вы твердо убеждены, что Вам нужен сайт - "работяга", то лучше остановить свой выбор на бизнес-сайте. Сайт содержит часто обновляемую информацию, хранящуюся в базе данных на сервере. Вы сами можете изменить в любой момент информацию (новые товары и услуги, прайс-листы, новости, акции и пр.) в специальном разделе сайта, защищенном паролем и доступном только администрации сайта. Работа с системой управления сайта похожа на работу в Word и не требует никаких специальных навыков. Сайт может включать средства интерактивного взаимодействия с посетителями (голосования, опросы, гостевые книги, рейтинги) для проведения маркетинговый исследований. Сайт ориентирован на B2C (business to consumer, взаимодействие с клиентами). Содержит от 50 страниц с текстом, иллюстрациями, прайс-листами, электронным каталогом товаров, интерактивной графикой и снабжен системой поиска.[2]

1.2.3 Бизнес – сайт.

Поскольку мы ведем речь о создании бизнес-сайта, подумайте, какие функции он сможет выполнять, чтобы помогать вам вести свой бизнес. Это может быть, переадресация потока звонков из реального офиса в виртуальный. Если вы проанализируете наиболее часто задаваемые вопросы и ответы на них разместите в Интернет, как правило, звонки сократятся на треть – у клиентов отпадет необходимость звонить. Особенно за это будут благодарны ваши клиенты из регионов – они здорово сэкономят на международных звонках. Далее, вы можете перенаправить поток заказов товаров из реального офиса в виртуальный. Достаточно лишь разместить на сайте хорошо продуманную форму заполнив которую, клиент ответит на все интересующие вас вопросы: как называется его фирма, кто он по должности, как его зовут, какой товар и к каком количестве ему нужен, адрес доставки и т.д. На сайте одной транспортной компании форма заказа содержала более 20 полей. Зато после того, как она приходила на электронный адрес ответственному менеджеру, тому в принципе не надо было перезванивать клиенту и задавать дополнительные вопросы. Таким образом, значительно экономится время сотрудников компании. Сайт содержит большое количество данных, имеющих сложную информационную структуру. Для изменения данных сайт содержит специальный раздел, защищенный паролем и доступный только администрации сайта. Работа с системой управления сайта похожа на работу в Word и не требует никаких специальных навыков. Имеются средства разграничения доступа к информации и система безопасности. Сайт является полноценным инструментом сегмента B2B (business to business, взаимодействие с деловыми партнерами) для работы с дилерами, поставщиками, корпоративными клиентами. Содержит электронный каталог товаров с дополнительными возможностями, системы проведения маркетинговых исследований, расширенные системы поиска, управления сайтом, безопасности и аудита. Часто такие сайты интегрируются с off-line приложениями (1C, Excel, SQL Server, Oracle и пр.).

1.2.4 Internet магазин.

Сайт представляет собой средство для on-line коммерции и будет прекрасным дополнением Вашего бизнеса. Содержит каталоги товаров, средства для просмотра характеристик товара, операции с корзиной, просмотр состояния заказа, аудит работы магазина, системы обслуживания заказов и выявления маркетинговых особенностей и тенденций рынка, помощь покупателям. Подобные системы могут интегрироваться с корпоративными программами и базами данных предприятий (1C, Excel, SQL Server, Oracle и пр.).

1.2.5. Информационный сайт

Сайт предназначен для:

                Организации учебного процесса (подготовки расписаний, электронных документов, баз данных по школьникам, учителям, родителям и т.д.);

                Подготовка учебных пособий;

                Обучение пользователей ПК для решения прикладных задач, обучение основам программирования, дизайна, компьютерному моделированию;

                Компьютерное обучение основам наук с помощью специально разработанных программ и образовательных сайтов;

                Компьютерный контроль знаний учащихся. Контролирующие программы совмещаются с обучающимися;

                Использование компьютера для получения и работы с информацией из сети Интернет;

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

1.3 Структуры Web-сайтов.

1.3.1 Плоская структура

Эту структуру еще называют звездной или полносвязной. Она имеет следующий вид: имеется головной документ (домашняя страница), который имеет ссылки на все остальные документы узла. Зачастую в этих документах также есть ссылки на все остальные документы узла, включая, головной.

Такую структуру имеют многие домашние страницы и корпоративные узлы "визитки". Под узлом "визиткой" подразумевается некий узел, имеющий типичные страницы: "о компании", "наши услуги", "как с нами связаться", "наши партнеры", "наши клиенты". Из вышесказанного ясно, что такая структура имеет смысл для узла, насчитывающего не более 5-9 документов.

1.3.2 Линейная структура

Эту структуру также называют последовательной. Она представляет собой серию последовательно связанных документов, в каждом из которых имеются только ссылки вперед (дальше) и назад.

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

Приведем грубые примеры. Представьте, что вы последовательно объясняете решение некоего уравнения. Поймет ли что-нибудь человек, если сразу попадет на страницу, со следующим текстом: "Запомним результат, полученный нами на предыдущем этапе, и найдем, второй корень уравнения, уже описанным нами методом". А теперь представьте презентацию товара, где человек может сразу попасть на одну из последних страниц, имеющую текст: "Именно из-за этих качеств наш продукт стоит в два раза больше имеющихся на рынке аналогов". Захочет ли он узнать, за что он должен столько переплачивать?

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

1.3.3 Древовидная структура

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

1.3.4 Комбинированная структура

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

На верхнем уровне организуется плоская структура документов. В нее входит домашняя страница, а также в зависимости от направленности узла группа вспомогательных документов и/или индексы разделов. Очень часто все они имеют полные или частичные взаимосвязи друг с другом. А из этих разделов или прямо из домашней страницы свисают "гроздья" документов древовидных структур, часто имеющих ссылки только на своих прямых и прародителей. Листьями этих деревьев могут быть отдельные документы, плоские или линейные структуры.

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

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

Глава II. Описание практического применения теоретических основ сайтостроения.

2.1. Анализ и создание логической структуры web-сайта.

Под структурой сайта понимают, как правило, построение разделов и их совместная роль и расположение.

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

Так как на страницах сайта всегда будет располагаться текстовая информация, то необходимо соблюдать некоторые правила:

1. Текст на страницах должен быть набран простым и понятным языком для пользователя и не очень мелкого и большого размера, иначе никто не будет читать. Если всё–таки информации достаточно много, то лучше поступить так: на первых страницах (определяющих) сделать заголовок или небольшой абзац конкретной темы, а остальную часть информации вынести на отдельную страницу, и если необходимо пользователь её прочтёт.
2. В текстах лучше писать открыто, так, как будто Вы с пользователем разговариваете в “живую”.

Разрабатываемый Web–сайт должен содержать основные рубрики:

1. Памятники природы – информация о памятниках природы;
2. Куштумга – информация о реке, добытая учащимися 9 А;
3. Исследования – результаты исследований проб воды, которые проведены промышленно-санитарной лабораторией отдела экологии ОАО АЗ «Урал», СЭС города Миасс;
4. Презентации – на этой странице мы разместили презентации ребят нашей школы, разработанные по данной теме;
5. Дневник – на этой странице мы опубликовали свои впечатления о поездках на Куштумгу и тех исследованиях, которые мы провели;
6. Фотоальбом – красивейшие места запечатлели на фотоаппарат ;

Логическая структура Web–сайта содержит информацию о навигации, и приведена в Приложении А. Физическая структура Web–сайта содержит информацию о файлах, и приведена в Приложении Б. Главная страница сайта в Приложении В.

2.2.  Подготовка дизайна

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

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

Дизайн неразрывно связан с целью сайта:

1. сайт научного или академического содержания (работа в неграфическом браузере);
2. сайт, предназначенный для потребителей (скорость загрузки и внешний вид);
3. сайт для контролируемого окружения, например корпоративной (способности браузера, включая звуковые эффекты, собственные разработки);
4. сайт для любителей, например, сайт компьютерных игр.

Главная задача при создании сайта - сделать содержимое страницы привлекательным для максимального количества пользователей. Для этой цели одинаково важны и использование новых технологий, и эксперимент и чувство прекрасного.[3]

Элементы

Каждая страница сайта должна иметь постоянные элементы, которые крепко держат своё место на экране при листании страниц:

1. Логотип. Как правило, расположен в левом верхнем углу. На внутренних страницах логотип является ссылкой на главную страницу.
2. Заголовок сайта. Расположен в самом верху страницы.
3. Главное меню сайта со ссылками на страницы, являющиеся прямыми потомками начальной страницы. Начальная страница традиционно также включается в состав главного меню. Главное меню расположено горизонтально под заголовком и/или слева, образуя вертикальный ряд.

Логотип и заголовок сайта на каждой странице позволяют пользователю однозначно определить его положение во Всемирной сети. Листая страницы, пользователь «цепляется взглядом» за заголовок и логотип, как за дорожные знаки, указывающие на то, что он находится внутри одного информационного узла.[3]

Заголовки

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

Заголовок окна должен буквально повторять заголовок страницы. Это очень удобно, когда окно с сайтом свёрнуто в кнопку на Панели задач: на этой кнопке пользователь видит заголовок текущей страницы.

В любом случае, заголовок окна — дополнительная подсказка пользователю о его текущем положении на сайте.

Главное меню

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

Присутствие записи, указывающей на текущую страницу, преследует две цели:

1. Позволяет выводить одно и то же меню на всех страницах. Если этого не делать, пользователь быстро запутается и перестанет понимать, на каких страницах он был, а на каких ещё нет. Цвет посещённых ссылок не поможет при многократном листании одних и тех же страниц.
2. Запись, указывающая на текущую страницу, отличаясь от остальных тем, что она не является ссылкой, дополнительно подсказывает пользователю его текущее положение на сайте.

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

Недопустимо растягивать один пункт на 2-3 строки. Пользователю будет казаться, что он видит не одну, а 2-3 ссылки.

Главное меню должно повторяться на концах страниц.

Меню в начале страницы удобно, когда сайт просматривают. Обычно пользователи так и поступают: листают сайт, пока не встретят интересную страницу, которую прочитают.

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

Навигация. Обычная навигация.

Если сайт имеет третьи, четвёртые и более глубокие по иерархии страницы, то на каждой такой странице должны присутствовать:

1. Главное меню сайта (корень и список прямых потомков). В этом меню предок текущей страницы (это ссылка) должен быть как-то дополнительно выделен.
2. Меню текущей страницы. В это меню записывают страницы-сёстры, т. е. страницы, имеющие общего прямого предка с текущей страницей. В этом меню запись на текущую страницу обязательно присутствует, но не является ссылкой.
3. «Хлебные крошки». Это запись-меню, показывающая путь к текущей странице от главной по иерархической схеме сайта. Пункты этого меню отделяются друг от друга каким-либо направленным знаком. Последняя запись (указание на текущую страницу) ссылкой не является.

Навигация, основанная на метафоре.

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

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

Чувствительные области не всегда очевидны для пользователя. Вот он,

бедолага, и ищет курсором, как миноискателем, ссылки среди причудливых метафор.

Лучше уж привычное: синее и подчёркнутое. Сразу понятно — это ссылка.

Из общего негативного отношения к навигационным метафорам есть одно исключение — вкладки, хорошо знакомые по интерфейсам обычных компьютерных программ. Соответственно, и на сайте с вкладками пользователь не будет сомневаться в том, что перед ним навигационное меню, и не будет раздумывать над тем, как «войти» в раздел — он привычно щёлкнет на нужном ярлыке.[3]

Авторская подпись. На каждой странице должна быть авторская подпись с адресом электронной почты, прописанном в явном виде. Эта запись может располагаться в начале странице или в её конце.

1. Авторство всегда интересует пользователя.
2. Адрес электронной почты позволит пользователю написать письмо автору сайта.
3. Адрес электронной почты, приводимый на каждой странице, позволит написать письмо тогда, когда появится желание. Пользователю лень куда-то идти за адресом, а когда адрес под рукой, лень отступает.
4. Адрес электронной почты в явном виде можно скопировать к себе через буфер обмена операционной системы, когда требуется сделать ссылку.
5. Кроме того, адрес электронной почты иногда может подсказать географические координаты автора или его приверженность к той или иной системе бесплатной почтовой службы.

Внешние ссылки.

На странице обязательно должны быть внешние ссылки, иначе сайт — тупик.

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

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

Текст на сайте. Текст нужно разбивать на небольшие абзацы, т. к. читать большие абзацы с экрана трудно. Не рекомендуется записывать абзацы длиннее 4-5 строк в расчёте на 80-символьные строки.Абзацы должны отделяться друг от друга пустыми строками. Красные строки используйте лишь тогда, когда текст выровнен по ширине. Хотя само выравнивание по ширине из-за того, что браузер не умеет переносить слова по слогам, сомнительно — в нешироких окнах в тексте появляются пустоты. Нельзя центрировать строки большого текста (от центрирования лучше вообще отказаться). Текст на странице должен комфортно читаться. Это закон. Если вам необходим фон, различить текст, на котором невозможно, поместите на этот фон одноцветные фрагменты, возможно в виде фигур, поддерживающих тему сайта, и записывайте текст на них.Нельзя фиксировать размер шрифта на сайте. Пользователь должен иметь возможность управлять размером шрифта при помощи браузера. Одни любят мелкий текст, у других — плохое зрение. Зафиксировать размер шрифта можно при помощи CSS-свойства font-size, использовав абсолютные размерные значения:

1. Типографские значения: pt (пункты), pc (пики).
2. Экранное значение: px (пикселы).
3. Геометрические значения: in (дюймы), cm (сантиметры), mm (миллиметры).

Нельзя записывать основной текст увеличенным размером шрифта и, тем более, жирным или курсивным начертанием.

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

1. Фактура фона, цвета текста и фона таковы, что нормальный текст читать невозможно. Однако в этом случае жирность или увеличенный размер не приводят к успеху, чтение по-прежнему затруднено и быстро утомляет.
2. Автору хочется подчеркнуть важность текста, заставить его читать. На деле получается наоборот — жирный или курсивный текст быстро утомляет глаза.

Нужно использовать шрифт по умолчанию.

Необходимо структурировать текст, используя иерархию заголовков и абзацное деление.

Необходимо конструировать текст по принципу перевёрнутой пирамиды — сначала вывод, затем подробности.

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

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

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

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

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

Смешанный. Это обычно комбинация остальных четырех типов. Дизайн главной страницы представлен в Приложении В.

2.1. Инструкция по пополнению и модернизации Web-сайта.

Для того чтобы пополнить или модернизировать сайт, необходимо внести изменения в нужную страницу сайта. Для этого необходимо открыть Web-страницу через программу Front Page в закладке «Дизайн» или «Код», представленных на рисунке 1.

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

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

Рисунок 1-Программа Front Page

Заключение

В процессе выполнения данного проекта, нами был разработан информационно-образовательный Web–сайт “Памятниках природы”.

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

 Для этого:

1. Проанализировали страницы сайтов в Интернет и выявили, что информация посвященных памятнику природы – реке Куштумга в Интернете отсутствует.

2. Провели сравнительный анализ качества воды на территории Миасского городского округа (реки Куштумга и Миасс)

3.Использовали в работате виртуальные карты Google, программы Power Point, Excel; Macromedia Dreamweaver 8; Adobe PhotoShop, разработали физическую и логическую структуру сайта.

4. Разместили на сайте созданную нашим творческим коллективом.

Кроме того, мы доказали, что река Куштумга относится ко второй категории «Чистая» река, но она и многие другие малые реки нуждаются в нашем внимании и защите.

Библиография:

1. Дуванов, А.А. Web-конструирование. Элективный курс. – СПб.: БВХ – Петербург, 2006. – 432 с.: ил.
2.  М.С. Мержанова, преподаватель и web–мастер учебного центра «Микроинформ», 2005.
3.  В.Г. Вязьмин, «Стиль web–сайтов»  М.:2004.
4.  А.А. Коноплёв, «Основные задачи дизайна сайтов», учитель гимназии №7, М.:2003.
5.  П.Н. Смирнов, «Техника безопасности»  СПб.: 2002.
6.  А.А. Алимов «Социальная экология: наука, образование, культура»  СПб.: 1996.
7. Усенков, Д.Ю. Уроки Web – мастера. 2-е изд., испр. и доп. – М.: БИНОМ. Лаборатория знаний, 2004 – 507 с.:ил.