МИНИСТЕРСТВО ОБРАЗОВАНИЯ
РЕСПУБЛИКИ МОРДОВИЯ
Региональный учебный округ
WEB-САЙТ КЛАССА
Егин Сергей
Большая Елховка
2004
Муниципальное общеобразовательное учреждение
"Большеелховская средняя
общеобразовательная школа"
Директор школы:
Афроськин Александр Михайлович
Почтовый адрес школы: 431503, Республика Мордовия, Лямбирский район
с. Большая Елховка, ул. Вакала, д.17.
Телефон школы: (241) 3-09-88
Автор работы:
Егин Сергей Петрович
Почтовый адрес автора: 431503, Республика Мордовия, Лямбирский район
с. Большая Елховка, ул. Фабричная, д.1,
кв.39 .
Телефон автора: (241) 3-02-22
Руководитель работы: Разумов Виктор Николаевич
АННОТАЦИЯ
Отличительной
особенностью работы Егина Сергея "Web-сайт класса" является ее телекоммуникационная
направленность, обеспечивающая общение между одноклассниками через Интернет.
Такая возможность становится особенно важной после завершения учебы в школе,
когда ребята разъедутся по разным уголкам нашей страны.
Для удобства общения на сайте предусмотрены гостевая книга, чат, форма для анкеты, персональные странички одноклассников, странички с последними новостями и электронными адресами.
Для разработки и размещения Web-сайта на одном из бесплатных серверов автор работы самостоятельно освоил в необходимом объеме такие программы, как Macromedia Dreamweaver 3, Adobe Photoshop 7, WS_FTP Pro, Anetto HTML Optimize и протестировал сайт в различных браузерах.
Нет сомнения, что данная работа будет интересна всем, кто с помощью Интернет хочет организовать общение между друзьями.
Разумов В.Н., учитель технологии и информатики
МОУ "Большеелховская средняя общеобразовательная школа"
Содержание
1.1. Web-сайты и Web-страницы.
1.2.1. Macromedia Dreamweaver 3
Глава 2. Описание структуры сайта
2.1. Интервью с одноклассником
Введение
Уже десятый год я учусь в школе, и скоро наступит момент прощания: прощания со школой, прощания с одноклассниками. У нас начнется совсем другая жизнь: кто-то будет учиться в университете, кто-то начнет работать, а кто-то, через год-два, пойдет в армию. У нас, конечно же, появятся новые друзья, а связь с одноклассниками, как часто бывает, начнет теряться: у нас появятся новые адреса, а у девочек и новые фамилии, и жить мы будем, скорее всего, не только в Мордовии. Но, по-моему, так не должно быть. Ведь не зря говорят: "Старый друг - лучше новых двух!" Как известно, родители в большинстве случаев собираются вместе с одноклассниками раз в 10 лет. Мы совершим большую ошибку, потеряв из виду на долгие годы, а иногда и навсегда, своих одноклассников. Поэтому я решил изменить эту недобрую традицию, создав свой сайт в Интернете, посредством которого мне и моим школьным друзьям можно будет общаться ежедневно, находясь в любом уголке России (или даже мира). Ведь каждому из нас интересна, а точнее, небезразлична, судьба одноклассников.
Я поставил перед собой цель – разработать и ввести в действие Web-сайт моего класса. Это будет вроде виртуального помещения, куда может зайти каждый и пообщаться с товарищами.
Для достижения цели необходимо выполнить следующие задачи:
1) разработать
структуру сайта;
2) разработать Web-странички, обеспечивающие удобное
общение с друзьями;
3) самостоятельно
освоить в необходимом объеме нужные программы;
4) оптимизировать
страницы для быстрой их загрузки;
5) подобрать
несложное, но приятное графическое оформление;
6) зарегистрировать
сайт на достаточно быстром сервере.
Глава 1. Создание Web-сайтов
1.1. Web-сайты и Web-страницы.
Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.
Сайт является интерактивным средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может зарегистрироваться на сайте, заполнить анкету и т.д.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.
Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги), в результате получаем Web-страницу. Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.
1.2. Программное обеспечение
Для создания Web-страниц используются простейшие текстовые редакторы, например, Блокнот - стандартное приложение Windows. Но чтобы создавать сайты в Блокноте, требуется знание языка HTML. Это наиболее сложный способ Web-дизайна. Фактически он сводится к программированию на языке HTML.
Для создания Web-страниц существует целый ряд инструментальных средств высокого уровня, например, Macromedia Dreamweaver, HomeSite и некоторые другие
В Интернет я нашел информацию, что новичкам проще освоить программу HomeSite, но оказалось, что сайт, написанный в этой программе, некорректно отображается некоторыми Интернет-браузерами, в частности Oper’ой.
Поэтому сайт разрабатывался в Macromedia Dreamweaver 3, имеющей стандартные команды, формы, скрипты, фреймы.
Кроме Macromedia Dreamweaver 3 при разработке сайта были использованы программы: Adobe Photoshop 7, WS_FTP Pro и Anetto HTML Optimize.
1.2.1. Macromedia Dreamweaver 3
Процесс создания и редактирования страницы в Macromedia Dreamweaver очень нагляден, так как производится в режиме WYSIWYG ("What You See Is What You Get" – "Что видишь, то и получаешь").
В общем виде интерфейс программы представлен на рис.1.
Рис. 1
На панели задач расположены основной набор функций, которые можно переключать, так как они сгруппированы по их характеру (рис.2).
Рис.2
С помощью панели окон можно вызвать теговый редактор (рис.3), чтобы что-то исправить "вручную", и проводник сайта (рис.4), то есть посмотреть все файлы.
Рис.3
Рис.4
При использовании панели настроек (рис.5) можно задавать для каких-либо объектов или для текста подробные настройки: размер, цвет, положение, ссылки и т.д.
Рис.5
1.2.2. Adobe Photoshop 7
Фотографии, для быстрой их загрузки в браузере, необходимо оптимизировать. Adobe Photoshop 7 – это самая известная офисная программа для работы с графикой. Для оптимизации фото необходимо в меню Файл выбрать "сохранить для WEB", изменить размер изображения и оптимизировать его (рис.6). При этом размер фотографии значительно уменьшается: например, вместо 726 Кб в формате jpg можно получить 12,5 Кб в формате gif (рис.7) – легко и просто…
Рис.6
Рис.7
1.2.3. Anetto HTML Optimize
Для оптимизации всего сайта использовалась программа Anetto HTML Optimize. Она достаточно хорошо оптимизирует страницы (рис.8).
Рис.8
В среднем скорость загрузки страничек увеличивается на 20 %, и это экономит, что немаловажно, до 3 секунд драгоценного времени в Интернет!
1.2.4. WS_FTP Pro
Программа WS_FTP Pro необходима для FTP-доступа к сайту в режиме On-line. Да, доступ можно иметь и непосредственно через сам хостинговый сервер, но это очень долго. А с помощью этой программы можно по паролю посмотреть все свои файлы на сервере и внести какие-то изменения. Внешне программа похожа на проводник в Windows. В ней так же можно копировать и удалять, вырезать и вставлять…
Глава 2. Описание структуры сайта
Сайт зарегистрирован на сервере www.newmail.ru, который достаточно быстр и надежен. Этот сервер предоставляет 20 Мб для частного сайта. К сайту можно осуществлять FTP-доступ, в частности с помощью программы WS_FTP Pro.
Сайт разделен на три фрейма: верхний, левый и центральный. Это сделано для более быстрого перехода на сайте со страницы на страницу, потому что верхний и левый фреймы, где находятся основные элементы графического оформления и основное меню, будут загружаться только один раз, а затем будет меняться лишь центральный фрейм. Также на левом фрейме находится форма для подписки на новости (рис.9). Подписавшись, пользователь будет получать подробные новости нашего сайта.
Рис.9
На главной странице сайта располагается фотография нашего класса, приветствие и список всех учеников (рис.1).
Удобство общения на сайте обеспечивается наличием разделов:
2.1. Интервью с одноклассником
В этом разделе находится анкета, которую заполняют все мои одноклассники, сообщая о своем хобби, любимом блюде, любимой музыке и др. Тот, кто ещё не отправил анкету администратору сайта или хочет изменить ее, может заполнить необходимую форму прямо на сайте.
Форма (рис.10) представляет собой два окошечка (в первом записывается фамилия пользователя, а во втором – информация о нем) и одну кнопку "Отослать". После отправки анкеты введенные данные обрабатываются системой "Form Sender", находящейся на сервере http://www.all4you.kiev.ua/, и отсылаются на мой почтовый ящик. После соответствующей обработки информация выставляется на сайте.
Рис.10
В программе Dreamweaver, которая использовалась для создания сайта, форма выглядит следующим образом (рис.11): вся она выделяется красным пунктиром, отображается окно настроек, где нужно ввести адрес файла, который обрабатывает эту форму (http://www.all4you.kiev.ua/cgi-bin/formsender.cgi)
Рис.11
Все остальные формы на сайте обрабатываются аналогично.
2.2. Поболтаем
При нажатии ссылки на этот раздел попадаем в гостевую книгу, где можно оставить сообщение для всех. Гостевая книга зарегистрирована на сайте http://xbase.ru/, а книга именно нашего сайта имеет ссылку http://xbase.ru/guestbook/?login=elhoschool
2.3. Чат
Без чата не может быть полноценного общения. Здесь можно вести виртуальный on-line разговор. Вход в чат (рис.12) осуществляется при заполнении своих данных: имени и пароля.
Рис.12
2.4. Наше фото
В данном разделе находятся ссылки на страничку каждого ученика, где можно найти фотографии, предоставленные ими администратору сайта. Так как сайт рассчитан на долгие годы использования, то со временем необходимо будет присылать новые фотографии. Это можно будет сделать довольно просто, прикрепив их к письму. На этой страничке сказано, чтобы фотографии присылали уже оптимизированными для Web.
2.5. Новости
В этом разделе можно посмотреть самые последние новости из жизни моих одноклассников. При желании каждый может поделиться своими новостями, заполнив соответствующую форму (рис.13).
Рис.13
2.6. Напиши другу
Здесь можно узнать все наши электронные адреса. Для добавления или замены адреса, его можно прислать на сайт, заполнив необходимую форму (рис.14), в которую входят имя, E-mail пользователя и кнопка "Отослать".
Рис.14
2.7. Учителя
В этом разделе находится информация о наших учителях. Персональные странички учителей ничем не отличаются от страничек учеников. На них будут представлены резюме, фотографии небольших размеров и ссылки на их увеличенные копии.
Надеюсь, что это будут самые посещаемые странички. Любимых учителей забывать нельзя!
Заключение
Я считаю, что при выполнении своей работы я достиг поставленной цели по разработке и введению в действие Web-сайта моего класса.
Все задачи мною решены:
ü
разработаны структура сайта и Web-странички, обеспечивающие
удобное общение с друзьями;
ü
в необходимом объеме самостоятельно освоены нужные
программы, а именно: Macromedia Dreamweaver 3, Adobe Photoshop 7, WS_FTP
Pro, Anetto HTML Optimize;
ü
страницы (размером не более 10 Кб) загружаются
достаточно быстро;
ü
оформление удовлетворяет основным требованиям
WEB-дизайна;
ü
сайт зарегистрирован на достаточно быстром сервере www.newmail.ru.
Сайт протестирован в различных браузерах и готов к использованию. Одноклассники уже сейчас приступили к его освоению.
Подобного сайта (или его описания) я еще не встречал. Надеюсь, что мой проект будет интересен всем, кто с помощью Интернет хочет организовать общение между друзьями.
В дальнейшем я хотел бы более подробно изучить программу Macromedia Dreamweaver 3, попробовать написать GGI-скрипты и встроить их в сайт для более простой и быстрой обработки поступающей информации.
Литература
1. Практический курс. Adobe Photoshop 4.0. – Пер. с англ. – М.:КУбК-а, 1997.
2. Семакин И.Г., Хеннер Е.К. Информатика. 10-й класс. - М.: Лаборатория Базовых Знаний, 2001.
3. Спейнауэр С., Экштейн Р. Справочник вебмастера. – Пер. с англ. – СПб: Символ-Плюс, 2001.
4. Угринович Н.Д. Информатика и информационные технологии. Учебник для 10-11 классов. – М.: Бином. Лаборатория Знаний, 2002.