Создание сайта в программе Front Page

Министерство образования и науки республики Бурятия

МКУ «Районное управление образования»

Администрации МО «Кабанский район»

Республики Бурятия

МБОУ «Кабанская СОШ»

Разработка алгоритма создания сайта «Magicclass»

Выполнил: Щепин Евгений,

ученик 9 б класса

Руководитель: Кречман Ольга Алексеевна,

учитель информатики

Кабанск, 2014 год

ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ

Исследуя информацию о фокусах в поисковых системах Google, Rambler и Yandех в Интернете, нами было обнаружено 3 630 000 страниц, содержащих слово «фокус». Но, зайдя на эти страницы, наш интерес остался не удовлетворен полученной информацией. Слишком мало информации о секретах исполнения интересных фокусов, а также о великих фокусниках. Свои сайты имеют фирмы с 2003 года, но многие из них англоязычные, и  невозможно выйти на эти сайты.

Мы провели небольшое социологическое исследование среди учеников нашей школы. Было задано 3 вопроса. 1) Интересует ли вас тема сайтостроения и веб-дизайн? 2) Имеете ли вы возможность выходить в Интернет дома или в школе на сайт школы? 3) С какой целью вы будете пользоваться представленной информацией на сайте, посвященной фокусникам и секретам исполнения фокусов?

Результаты показали, что 75% ответили на первый вопрос, что «Да, интересует». На второй вопрос было получено 35% положительных ответов. Третий вопрос было много вариантов ответа. Вот некоторые из них: получить информацию о фокусах и фокусниках вообще, узнать о новых фокусах и секретах их исполнения; чтобы научиться ловкости рук и т.п.

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

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

Задачами нашей работы мы видим:

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

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

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

Создание web-сайта в редакторе web-страниц Front Page.

Исследуя литературу по данной проблеме, мы выяснили, что «... в последние несколько лет в программировании (особенно для операционной среды Windows) наметился так называемый визуальный подход». (1)

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

Эти языки создавались для различных целей, что обусловило ряд фундаментальных различий между ним. Системные разрабатывались для построения структур данных и алгоритмов "с нуля", начиная от таких примитивных элементов, как слово в памяти компьютера. В отличие от этого, языки описания сценариев создавались для связывания готовых программ. Их применение подразумевает наличие достаточного ассортимента мощных компонентов, которые требуется только объединить друг с другом (2). Языки системного уровня используют строгий контроль типов данных, что помогает разработчикам приложении справляться со сложными задачами. Языки описания сценариев не используют понятие типа, что упрощает установление связей между компонентами, а также ускоряет разработку прикладных систем.

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

Наш сайт выполнен с использованием такого языка Front Page.

Система Windows имеет все необходимое для того, чтобы создавать и размещать в Интернете собственные несложные web-страницы.

Программа Front Page - это инструментальное средство для создания we6-страниц, входящих в состав Windows.(4)

Изучив дополнительную литературу по созданию web-сайтов, мы пришли к выводу и узнали, как быстро создать web-сайт, используя один из мастеров программы Front Page. Кроме того программу эту можно использовать для редактирования готовой страницы или сайта.

Приведем алгоритм и некоторые подробности создания Web-узла.

Алгоритм «Создание сайта «Magicclass»»

1. Запустите редактор FRONTPAGE: Пуск, Все программы, Microsoft Office, Microsoft FrontPage. 
2. В меню Файл выберите команду Создать. В правой части окна на панели выберите Одностраничный веб-узел, в диалоговом окне выбрать Личный веб-узел, нажать ОК.
3. В правой части рабочей области появятся много файлов, среди которых найдите Домашняя страница с названием Index. htm. 

4. Открыть Главную – Домашнюю страницу Index.htm в виде изображения Домик. Для этого два раза нажмите клавишу Enter или щелкните два раза левой кнопкой мыши. 
5. В верхней части страницы увидите две ячейки-клетки таблицы, которые надо выделить (левой кнопкой мыши нажать, не отпускать, тянуть) Когда эти клетки изменят свой цвет на черный, затем нажать правую кнопку мыши (ПКМ), выбрать команду Объединить ячейки.
6. На месте объединенных ячеек вставим бегущую строку. Для того, чтобы вставить бегущую строку, надо нажать в Главном меню Вставка – Веб-компонент – Бегущая строка – Готово. Наберите текст: “Добро пожаловать на мой сайт» (укажите название вашего сайта) Установите следующие параметры: Ширина - 400, В точках, Цвет фона - голубой. Нажать ОК. 

7.Выделите Ячейки слева Домашняя, О себе, и т.д. Удалите их кнопкой Delete.
На этом месте поставим 6 кнопок. Для того, чтобы вставить кнопки, нужно нажать Вставка – Веб компонент – Интерактивная кнопка. Готово. Выберите вид кнопки, напишите текст на Кнопке, отрегулируйте ширину кнопки, чтобы текст был виден полностью.
8. Создайте 6 кнопок и на каждую кнопку создайте чистую страницу. 

9. Чтобы создать чистую страницу, щелкните ЛКМ (левой кнопкой мыши) на изображение страницы над панелью Список папок. 

Нажмите на панели инструментов значок в виде Белого листа с загнутым верхним краем (Создать страницу). Сохраните изменения: щелкните ПКМ на названии страницы, в диалоговом окне выбрать Сохранить. Если необходимо закрыть лишние страницы, то выбрать Закрыть. 

10. Создайте гиперссылки с Домашней страницы через Кнопку Новости на страницу “Новости”. Для этого в режиме Конструктор Нажать ПКМ на кнопку Новости Выбрать команду Гиперссылка и указать путь к странице Новости - ОК. 
Создайте Кнопку Назад: с текста страницы “Новости ” на Домашнюю страницу. Сохраните изменения. 

11.Вставка изображений, символов, фото на странице. Программа позволяет изменить дизайн страниц сайта (Формат – Тема – Выберите дизайн), вставив дополнительные объекты. Для этого используют меню Вставка или панель Рисования. 

12.Вставка символа Знак собственности (Copyright): в меню Вставка выбрать Символ, выбрать нужный ©, нажать Вставить. Символ форматируется как обычно. 
13. Вставка фото: Вставка, Рисунок, Из файла. Указать в диалоговом окне Рисунок папку, где оно находится, выбрать фото, нажать Вставить. Фото форматируется: щелкнуть два раза на фото, вызвать диалоговое окно в нем указать обтекание, положение, размер нажать ОК. 
14. Вставка картинок: выбрать Вставка, Рисунок, Картинки. На правой Панели свойств выбрать Упорядочить картинки. Выбрать в диалогов окне Коллекции картинок в поле Список коллекций щелкнуть на “+” Коллекции Microsoft Office, выбрать нужную картинку, скопировать, вставить на страницу. Картинки форматируются: задается обтекание, размер, положение, нажать ОК. 

15. Вставка объекта Word Art: выбрать Вставка, Рисунок, объект Word Art, в коллекции выбрать нужное, нажать ОК. Написать текст, нажать ОК. Объект форматируется как обычно. 
16. Вставка автофигуры: выбрать Вставка, Рисунок, Автофигуры. Выбрать нужную. Выполнить. Форматируются как обычно: выделяется, изменяется размер, заливается, изменяется контур: цвет, тип линии. Тень. 

17. Вставка видео: выбрать Вставка, Рисунок, Видеозапись. Указать нужное, нажать вставить. 
18. Нам осталось открывать каждую страницу и наполнять содержанием (текстом о великих фокусниках, секреты фокусов, «Иллюзии»,  рисунками и т.п.). 

Web-дизайн

Рассмотрим один из немаловажных вопросов дизайна, как подбор цвета. При создании сайта надо иметь ввиду следующее:

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

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

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

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

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

Фиолетовый — цвет художников и духовенства, символизирует таинственное, иррациональное, волшебное, он навевает мечты, фантазии.

Серый — цвет пассивности, нейтралитета, конформизма, скромности.

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

Черный — цвет выражает идею «ничто». Это цвет максимализма, критики, протеста, отрицания.

Рассмотрим далее КОМПОНОВКУ и стили страниц.

Главная страница index.htm может быть разбита на фреймы (кадры)

1. заголовок сайта
2. поиск по сайту или детализированный указатель

1. элементы навигации

3. информация о разработчиках сайта

2. электронная почта

4. список лучших посетителей

3. счетчик посетителей сайта

5. дополнительные ресурсы.

Организация навигационной панели

1. навигация понятна
2. легко узнаваема

1. навигацию легко найти

3. удобна в использовании

2. ссылок не очень много

6)         быстро загружается

7)         пользователь знает свое местоположение

Организация гипертекстовых переходов: Вставка Гиперссылки, указать путь к веб-странице.

При ознакомлении с Интернет-ресурсом пользователю видны используемые в сайте виды образовательных ресурсов. Ниже приведен перечень используемых видов образовательных ресурсов:

1. информационные страницы
2. иллюстрации
3. программные модули
4. базы данных
5. средства обмена сообщениями и обратной связи.

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

ЗАКЛЮЧЕНИЕ

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

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

1. Артур Рим. Современные системы управления контентом.- СПб. и др. : Питер , 2009. - 152 с. 
2. Левин А.С., Internet для чайников. СПб: Санкт-Петербург, 2011. - 398с. 
3. Методы и средства поиска информации в Интернет: Метод.указания к практ. занятиям и самостоят. работе / Моск.ун-т потреб.кооп. Чебоксар. кооп. ин-т; Сост.А.В.Картузов; Отв.ред. Николаев В.Н..-Чебоксары: Салика, 2012. - 61с. 
4. Основы Web-технологий: Курс лекций / П. Б. Храмцов и др., 2010. 380с. 
5. Хеслоп Х.А., HTML с самого начала, СПб: Санкт-Петербург, 2009
6. Kevin Werbach. Перевод: Станислав Малишев. - Краткое пособие по HTML, Москва 2009. - 278с.