Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Курсовая работа

Разработка интерактивных Web-приложений



Введение

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

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

Компьютерные технологии призваны стать неотъемлемой частью целостного образовательного процесса, значительно повышающей его эффективность.

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



1. Понятие информационных технологий

1.1 Этапы развития информационных технологий

информационный дистанционный обучение приложение

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

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

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

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

По виду задач и процессов обработки информации:

1-й этап (60-70-е гг.) - обработка данных в вычислительных центрах в режиме коллективного пользования. Основным направлением развития информационной технологии являлась автоматизация рутинных действий человека.

2-й этап (с 80-х гг.) - создание информационных технологий, направленных на решение стратегических задач.

По проблемам, стоящих на пути информатизации общества:

1-й этап (до конца 60-х гг.) - характеризуется проблемой обработки больших объемов данных в условиях ограниченных возможностей аппаратных средств.

2-й этап (до конца 70-х гг.) - связывается с распространением ЭВМ серии IВМ/360. Проблема этого этапа - отставание программного обеспечения от уровня развития аппаратных средств.

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

4-й этап (с начала 90-х гг.) - создание современной технологии меж организационных связей и информационных систем.

По преимуществу, которое приносит компьютерная технология:

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

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

3-й этап (с начала 90-х гг.) - связан с понятием анализа стратегических преимуществ в бизнесе и основан на достижениях телекоммуникационной технологии распределенной обработки информации. Информационные системы имеют своей целью не просто увеличение эффективности обработки данных и помощь управленцу. Соответствующие информационные технологии должны помочь организации выстоять в конкурентной борьбе и получить преимущество.



2. Понятие об Информационных системах

2.1 Общее понятие об - информационных системах

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

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

ИС является средой, составляющими элементами которой являются компьютеры, компьютерные сети, программные продукты, БД (база данных), люди, различного рода технические и программные средства связи и т.д.

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

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

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

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

2.2 Требования, предъявляемые к информационной системе

Информационная система должна соответствовать требованиям гибкости, надежности, эффективности и безопасности.

Гибкость

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

Надежность

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

Эффективность

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

Безопасность

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



3. Современные и перспективные информационные технологии в системе дистанционного обучения

3.1 Особенности информационных технологий в системе дистанционного обучения

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

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

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

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

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

По степени интерактивности все учебные технологии Дистанционного обучения делятся на не интерактивные (например, предоставление учебно-методических материалов в печатном виде, на аудио - и визуальных носителях, СD-RОМ) и интерактивные, компьютерные (например, видеоконференции, электронная почта и т.д.).

Учебное телевидение является одним из средств формирования личности учащегося и широко применяется во многих странах. Например, в Германии почти 30 лет действует обширная сеть школьных телевизионных программ. Учебные программы транслируются ежедневно по 30-60 мин. в день. Изучение курса заканчивается общим экзаменом, который официально признан и дает студенту право на получение высшего образования «Telekolleg». Более 50 000 чел. таким путем получили высшее образование в дополнение к профессиональной квалификации. В последние годы курсы Telekolleg обеспечиваются компьютерными программами. Также в Германии уже в течение 30 лет транслируются радиопрограммы для дополнительного образования преподавателей и других специалистов. В них используются 60-мин. радиопрограммы «Funkkolleg», печатные материалы и специальные лекции, читаемые в институтах дополнительного образования. Около 700.000 человек принимали участие в программе Funkkolleg, повышая при этом свою квалификацию. Курсы Funkkolleg также расширяются с помощью компьютерных сетей и соответствующего программного обеспечения.

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

Английская компания BBC выходит в эфир ежегодно с учебными телепрограммами объемом более 400 часов. Передачи смотрят практически во всех школах.

Во Франции государственные станции ведут с 70-х гг. систематические учебные и профориентационные образовательные передачи. С середины 60-х гг. работает «Национальный центр аудиовизуального обучения». В 1979 г. при Министерстве образования была создана группа, координирующая внедрение средств телевидения в учебных заведениях страны. На протяжении многих лет шел постоянный поиск возможностей стимулирования при помощи аудиовизуальных средств обучения, эмоциональной и интеллектуальной активности учащихся. В начале 80-х гг. опытной работой по аудиовизуальному обучению были охвачены все общественные средние школы страны.

3.2 Описание возможностей информационных систем

Электронная почта (e-mail) (асинхронная телекоммуникация) позволяет практически моментально передавать адресату, удаленному на сколь угодно большое расстояние, текст, графику, звук, изображения, в том числе программные продукты. Электронная почта может использовать локальные компьютерные сети и телефонную сеть общего назначения. С ее помощью целесообразно создавать «распределенные» по интересам ученические коллективы, участники которых, находясь в разных точках страны (стран), могут проводить совместные работы учебного, поискового или исследовательского характера. При применении почты преобладающей организационной формой работы обучаемых является метод проектов. Преимущество реализации метода проектов с использованием возможностей электронной почты для сферы образования заключается в доступности и простоте средств и способов получения и отправления информации, представленной в самом разнообразном виде.

Списки рассылки (mailing lists) позволяют пользователю (абоненту) регулярно получать интересующую его информацию в свой электронный почтовый ящик. Для сферы образования этот вид использования ресурсов телекоммуникационных сетей включает регулярную рассылку и получение на местах инструктивно-нормативной документации от соответствующих управленческих органов образования; регулярное оповещение о конференциях, съездах, семинарах, проводимых из регионального центра или институтами повышения квалификации учителей; регулярную рассылку методических материалов как из регионального центра или института повышения квалификации учителей, так и между отдельными учителями, группами учителей.

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

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

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

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

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

WAIS (Wide Area Information Search) позволяет осуществлять поиск необходимых ресурсов по ключевым словам в рамках всей сети Интернет. Такой поиск облегчает выборку необходимых данных или сведений из огромного потенциала Интернет, обучает пользователя выделять существенные признаки необходимой ему информации.

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

Ч умений в сжатой форме представлять в различном виде (в том числе и аудиовизуальном) передаваемую информацию;

Ч составлять краткие, информационно емкие сообщения, выражающие суть передаваемой информации;

Ч выявлять существенные признаки содержательного аспекта информации;

Ч отсортировывать по определенным признакам необходимую информацию;

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

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

В условиях Дистанционного обучения необходима адаптация учебных программ под конкретного преподавателя или аудиторию, что предъявляет абсолютно новые требования к выпуску учебной литературы, которые включают в себя:

Ч возможность оперативной печати;

Ч быстрое внесение изменений в публикуемые материалы;

Ч расширение и упрощение доступа к системе заказа литературы;

Ч повышение экономической эффективности;

Ч интеграция в информационную инфраструктуру учебного заведения;

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

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

Ч компьютерная визуализация учебной информации об объектах или закономерностях процессов, явлений, как реально протекающих, так и «виртуальных»;

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

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

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

Ч незамедлительная обратная связь;

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

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

Ч интерактивный диалог - взаимодействие пользователя с программной (программно-аппаратной) системой, при котором обеспечивается возможность выбора вариантов содержания учебного материала, режима работы;

Ч управление реальными объектами (например, учебными роботами, имитирующими промышленные устройства или механизмы);

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

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



4. Инструментальные системы разработки интернет-приложений

4.1 Описание системы на примере Instant CMS

Возможности Instant CMS

Instant CMS - система управления содержанием, написанная на языке PHP и использующая MySQL. Instant CMS является свободным программным обеспечением и включает в себя различные инструменты для изготовления веб-сайта. Важной особенностью системы является минимальный набор инструментов при начальной установке, который обогащается по мере необходимости.

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

Характеристики Instant CMS:

Ч полностью основанный на БД движок с использованием PHP/MySQL;

Ч модуль безопасности для многоуровневой аутентификации пользователей / администраторов;

Ч полностью настраиваемые схемы расположения элементов;

Ч закачка изображений при помощи браузера в собственную библиотеку - для последующего использования с любого места сайта;

Ч Форум / Опросы/ для эффективной обратной связи;

Возможности администрирования:

Ч возможность создавать неограниченное количество страниц;

Ч четкая организация структуры сайта;

Ч для каждой динамической страницы можно создать свое описание и ключевые слова в целях повышения рейтинга в поисковых системах;

Ч возможность ограничить доступ к определенным разделам сайта только для зарегистрированных пользователей;

Ч секции новостей, продукции или услуг легко редактируемы и управляемы;

Ч полностью настраиваемые схемы расположения элементов по областям, что позволяет сделать оригинальный дизайн;

Ч закачка изображений при помощи браузера в вашу собственную библиотеку - для последующего использования с любого места сайта;

Ч опросы и голосования для эффективной обратной связи;

Ч возможность создания не одной, а нескольких форм обратной связи для каждого контакта;

Ч библиотека изображений позволит хранить все GIF- и JPEG-файлы под рукой для лёгкого доступа;

Ч менеджер рассылки новостей. Можно выбрать более чем 360 служб рассылки новостей по всему миру;

Ч выбор из 3 визуальных редакторов, что упрощает редактирование материалов до уровня редактирования текста в программе Word;

Ч экономное использование места на сервере за счет использование базы данных MYSQL;

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

Конечно, взлом, ошибки и уязвимости кода возможны и для сайтов, которые написаны «от руки», но шанс быть взломанным снижается, если разработкой занимался опытный веб-мастер. Нестандартная структура кода потребует у недоброжелателя больше времени и сил для взлома, поэтому он может бросить эту затею и пойти на сайт Вашего конкурента, который завел себе сайт на одной из известных и бесплатных CMS.

4.2 Описание Adobe Photoshop CS

Adobe Photoshop - многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. В основном, работает с растровыми изображениям, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe.

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

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

При помощи команды View - New guide (Показать-Новые направляющие) можно разметить страницу в соответствии с модульной сеткой. Это позволяет добиться точного совпадения размеров эскиза и конечного документа. Кроме того, можно воспользоваться уже готовыми сетками, разработанными под разные разрешения мониторов. Как правило, такие сетки предлагаются авторами совершенно бесплатно.

Фон страницы может быть однотонным, для этого при помощи команды Paint Bucket Tool (Заливка) с установленным значением Foreground (Фоновый цвет) следует заполнить пространство документа выбранным цветом. Кроме того, фоном может служить какое-либо изображение или же узор. Узором пространство макета также заполняется при помощи команды Paint Bucket Tool, но с установленным значением Pattern (Узор).

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

Создать необходимое прямоугольное выделение можно при помощи инструмента Rectangular Marquee Tool (Прямоугольное выделение). Изменяя параметр Feather этого инструмента можно задать необходимое скругление для углов.

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

Отдельным шагом можно выделить создание кнопок и иконок для дизайна сайта. В зависимости от идеи дизайна, они могут быть строгими деловыми или же, наоборот, веселыми. Кнопки, как правило, создаются при помощи все того же Rectangular Marquee Tool. Задать кнопкам другую, непрямоугольную форму, можно с помощью инструмента Pen Tool (Перо). С помощью Pen Tool можно создавать и различные иконки произвольной формы.

Надписи на кнопках и иконках выполняются при помощи инструмента Horizontal Type Tool (Горизонтальный текст) или Vertical Type Tool (Вертикальный текст). В настройках инструмента можно задать любую необходимую гарнитуру шрифта и его размер, задать выравнивание текста.

Для дальнейшей работы над дизайном сайта, готовый шаблон необходимо разрезать на части. Это нужно для того, чтобы поместить шаблон в ячейки таблицы при html-верстке страницы. Разрезать шаблон следует с помощью инструмента Slice Tool (Раскройка). Кусочки изображения (slices) по размерам должны соответствовать элементам будущей html-страницы.

С помощью команды Save for Web&Devices необходимо сохранить разрезанное изображение. В диалоговом окне следует выбрать тип файлов HTML&images и сохранить файл с именем «index.htm» или «index.html». Теперь шаблон дизайна сайта состоит из файла index.html и каталога images, в котором находятся нарезанные кусочки макета. С помощью «Блокнота» или любого html-редактора файл index.html редактируется при необходимости.

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

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

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

Как изменить дизайн сайта?

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

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

4.3 Описание Adobe Dreamweaver CS4

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

Adobe Dreamweaver CS4 включает множество инструментов, позволяющих использовать каскадные таблицы стилей (CSS) при создании стилей и макетов веб-страниц.

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

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

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

CSS состоит из двух частей - селектора и объявления (или в большинстве случаев блока объявлений). Селектором является термин (например, p, h1, имя или идентификатор класса), который определяет форматируемый элемент, а блок объявлений задает свойства стиля

Каскадные таблицы стилей также могут использоваться для форматирования и расположения блоков на веб-странице. Блоковым элементом называется автономная часть содержимого, обычно отделенная новой линией в HTML и представленная внешне как блок. Например, теги h1, p и Div отделяют блоки веб-страницы. Для блоковых элементов можно задавать поля и границы, определять их местоположение, добавлять цвет фона, задавать свойства обтекания текста и т.д. Управление блоками - это основополагающий момент макетирования страницы с помощью CSS.

Теги Div можно использовать для создания блоков макета CSS и расположения их в документе. Это удобно, если существует таблица стилей СSS со стилями позиционирования, прикрепленная к документу. Dreamweaver позволяет быстро вставлять теги Div и применять к ним существующие стили.

Adobe Dreamweaver CS4 - это инструмент визуального конструирования, а также мощный редактор кода, который имеет функции подсказок к коду, свертывания кода, отладки кода и другие средства редактирования кода.

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

HTML

XHTML

CSS

JavaScript

ColdFusion Markup Language (CFML)

VBScript (для ASP)

C# и Visual Basic (для ASP.NET)

JSP

PHP

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

Шаблоны удобно использовать в тех случаях, когда создается много страниц с одинаковым оформлением или требуется создать области страницы, доступные для редактирования пользователям. В Adobe Dreamweaver CS4 предусмотрено множество инструментов для создания шаблонов и управления ими.

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

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

Созданный на основе шаблона документ остается связанным с этим шаблоном (если документ не отсоединен позднее). Можно изменить шаблон и немедленно обновить оформление всех документов на основе нового шаблона. Шаблон Dreamweaver по умолчанию является фиксированным (недоступным для редактирования).

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

Есть четыре типа областей шаблона:

Редактируемая область - незаблокированная область документа на основе шаблона - раздел, доступный для редактирования. Автор может сделать любую область шаблона доступной для редактирования. Чтобы шаблон был эффективен, он должен содержать хотя бы одну редактируемую область.

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

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

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

Adobe Dreamweaver имеет три системы отображения файлов: «Код», «Раздельно», «Дизайн». Во вкладке «Код» пользователю виден только код HTML-страницы. Вкладка «Раздельно» отображает сверху окна HTML-код, а внизу дизайн страницы. Таким образом, не переключаясь можно одновременно редактировать код и наблюдать за изменениями в дизайне сайта. Вкладка «Дизайн» отображает графическое представление страницы сайта.

4.4 Верстка сайта в Adobe Dreamweaver

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

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

Контейнер - это особый тег (особая команда) HTML, служащий как бы «упаковкой» для других тегов. К содержимому контейнера можно применять стили css.

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

Открывающий тег <div> - верхняя часть контейнера, закрывающий </div> - нижняя часть контейнера.

Создание внешнего контейнера. Для этого в инструментарии объектов активируем пункт Макет и щелкнем кнопку Вставить тег div (Insert Div Tag). В открывшемся окошке выбираем Вставить (Insert): В точке вставки (At insertion point) и жмем ОК. На экране появляется узкий, штриховой прямоугольник.

Далее вставляется второй контейнер и тоже в режиме - Вставить (Insert): В точке вставки (At insertion point).

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

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

В нижней части панели щелкнем на значке

В настройках задается имя css файла (рисунок 1).

Рисунок 1 - Создание страницы CSS

Далее создаются правила для стилевого выбранного класса и сохраним этот класс в таблице css стилей (рисунок 2).

Рисунок 2 - Задание параметров

В разделе Категория (Category) имеются следующие параметры:

Ч Тип (Туре) - здесь задаются параметры шрифта, которым набран текст

Ч Фон (Background) - здесь задаются параметры фона элемента страницы

Ч Блок (Block) - здесь задаются параметры текстового абзаца

Ч Рамка (Box) - здесь задаются параметры, задающие размеры и размещение элемента страницы

Ч Граница (Border) - здесь задаются параметры, которые задают цвет и толщину рамки вокруг какой-либо составной части страницы

Ч Список (List) - здесь задаются параметры, устанавливающие вид маркеров списка

Ч Положение (Position) - здесь задается местонахождение маркера или нумерации

Таким образом создаются стили для каждого тега div. Созданный шаблон упаковывается. После чего его можно использовать для дальнейшего редактирования и наполнения содержимым в Instant CMS.

Рисунок 3 - Пример работы с программой Adobe Dreamweaver.

На Рисунке 3 изображен основной и, пожалуй, самый главный файл, под названием «template.php» в нем реализованы содержание HTML кода и прочих языков web программирования, редактируя код или внесение дополнительного кода, выносит наш сайт на новый уровень дизайна и интерфейса.



5. Практическая реализация внедрения формы

5.1 Создание активной страницы «регистрация на сайте

Автоматизированной системе контроля знаний»

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

Рисунок 4 - Добавить статью

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

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



Рисунок 5 - Настройка доступа

Наша страница со всеми необходимыми условиями создана.

5.2 Создание формы для регистрация на сайте «Автоматизированной системе контроля знаний»

Выбираем в панели управления - в горизонтальном меню админпанели - пункт - компоненты - ниспадающее меню - выбираем - конструктор форм;

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

Рисунок 6 - Форма для отправки администратору



Далее создаем поля формы, для этого заходим в соседний раздел - Поля формы.

Создаем первую строку, в ней пользователь будет указывать свои данные «Ф.И.О.»

Во второй строке, пользователь указывает «Название своей группы»

В третьей строке, ниспадающей список преподавателей. Сохраняем получившуюся форму.

Рисунок 7 - Форма регистрации на Автоматизированной системе контр

5.3 Внедрение формы регистрации на страницу

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

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

1.1 

Рисунок 8 - Форма для отправки

В «форме» - выбираем раздел «Регистрация на Автоматизированной системе контроля знаний».

Рисунок 9 - Форма «Регистрация на Автоматизированной системе контроля знаний»

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



Рисунок 10 - Конечный вид страницы с формой

5.4 Пользовательская часть проекта

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

Чтобы добиться «дружелюбного» интерфейса необходимо соблюдать следующие правила:

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

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

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

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

Сайт состоит из следующих разделов:

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

Ч Книги. Содержат небольшое количество литературы по данному курсу.

Ч Лаб. работы. В этом разделе содержатся методический материалы необходимые для выполнения лабораторных работ.

Ч Задачи. Находятся контрольные работы и задачи для самостоятельного решения.

Ч Анимация. Здесь располагаются анимированные модели атомов различных соединений.

Ч Презентация. В этом разделе находятся работы студентов, они служат образцом для оформления рефератов, сурсов.

Ч Обратная связь. Форма, где можно связаться с администратором или преподавателем.

Ч Форум. Здесь вынесены ответы на часто задаваемые вопросы.

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

Ч Регистрация на тест. Раздел, в котором могут регистрироваться учащихся Гомельского государственного университета им. Ф. Скорины на сайте «Автоматизированная система контроля знаний».



Заключение

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

В ходе проектирования были выполнены следующие действия:

Ч Разработан дизайн шаблона сайта в графической среде Adobe Photoshop;

Ч Доработан шаблон на Instant CMS;

Ч Добавлены и настроены необходимые категории (лекции, презентации, обратная связь, анимация и др.);

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

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

Цветовые тона, акцентируют внимание на информации содержащейся на сайте.

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

Список использованных источников

информационный дистанционный обучение приложение

1. Информационные технологии и средства дистанционного обучения: учебное пособие для студентов и вузов. /Автор: Ибрагимов. И.М. /М. Академия, 2005 336 с.

2. Методические рекомендации по созданию курса дистанционного обучения через Интернет [Электронный ресурс] - 2011. - Режим доступа: (http://www.curator.ru/method.html/ - Дата доступа: 13.05.2011.

3. Компьютерные технологии в системе дистанционного обучения /Автор: Пидкасистый П.И./ Тыщенко О.Б. /Издательство: Педагогика, 2000 305c.

4. Основы Photoshop CS2 / Автор: Д.Ф. Миронов. / Издательство: Питер, 2005 384 с.

5. О системе - InstantCMS Community [Электронный ресурс] - 2011. - Режим доступа: http://www.instantcms.ru/ - Дата доступа: 26.05.2011.

6. HTML. Популярный самоучитель /Автор: А. Чиртик /Издательство: Питер, 2006 224 с.

7. Web-конструирование./ Автор: Дуванов Александр Александрович / Издательство: BHV, 2003 336 c.

8. Macromedia Dreamweaver MX 2004. Наиболее полное руководство./ Автор: Владимир Дронов/ Издательство: БХВ-Петербург, 2004 736 с.

9. Вопросы общей, педагогической, инженерной психологии / Б.Ф. Ломов/ Издательство: Педагогика, 1991. 302c.

10. Эффективный самоучитель по креативному Web-дизайну/ Автор: Крис Джамса, Конрад Кинг, Энди Андерсон / Издательство: ДиаСофтЮП/, 2005 672 с

11. Создание Web-страниц: искусство верстки / Автор: Дубаков М./, 2004 287 с.