Создание и отладка сайта посвященного Правилам Дорожного Движения

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

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

1. ИССЛЕДОВАТЕЛЬСКАЯ ЧАСТЬ

1.1 Постановка задачи

1.2 Анализ требований поставленной задачи

2. КОНСТРУКТОРСКО-ТЕХНОЛОГИЧЕСКАЯ ЧАСТЬ

2.1 Проектирование программного продукта

2.2 Выбор среды разработки

2.3 Разработка программного продукта

2.4 Тестирование и отладка программного продукта

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Приложение

ВВЕДЕНИЕ

В этом курсовом проекте рассматривается довольно новая, перспективная и интересная тематика, связанная с технологиями будущего, а именно, с Интернетом.

Не секрет, что интернет вошел в жизнь большинства из нас и стал частью нашей жизни, во многом ее облегчив.

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

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

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

Многие сайты размещены в сети с целью ознакомления пользователей с определённой развлекательной или справочно-правовой информацией.

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

Раздел 1. ИССЛЕДОВАТЕЛЬСКАЯ ЧАСТЬ

1.1 Постановка задачи

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

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

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

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

Все это дает нам использование веб-сайта. А благодаря растущей популярности сети Интернет среди населения вопросы создания веб-сайта становятся все более актуальными.

Итак, определимся с целями и задачами.

Объект исследования - веб-сайт посвященный вопросам Дорожного движения.

Предмет исследования - методика создания и поддержки веб-сайта о дорожном движении.

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

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

Ш выявить функциональные возможности веб-сайтов и их применение;

Ш спроектировать сайт;

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

Ш разработать веб-сайт;

Ш протестировать и отладить веб-страницу.

1.2 Анализ требований поставленной задачи

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

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

Целевая аудитория сайта

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

Предполагается, что целевой аудиторией веб-сайта о дорожном движении являются:

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

Ш учащиеся авто школ - подготовка к экзаменам в ГИБДД, изучение законов, правил и ответственности за нарушение оных.

Ш учителя авто школ, инструкторы, опытные водители - информирование о себе, обмен опытом, отвечают на вопросы на форуме.

Ш администрация - управление сайтом, официальные объявления, модерирование на форуме.

Ш спонсоры - материальная поддержка сайта.

Ш авто школы - для них сайт источник кадров (студентов), реклама, предложение своих услуг.

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

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

Сделать это можно следующими способами:

1. используя контекстную справку - пользователь подводит курсор мыши к неизвестному слову и во всплывающей подсказке видит его определение;

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

Рекомендую использовать эти способы в комплексе: технологию контекстной справки использовать там, где определение может уместиться в 1-2 коротких предложения, а гипертекст - там, где определение состоит из объемного текста и использует графику.

Учёт индивидуально-личностных особенностей пользователей

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

Настоятельно рекомендуется использовать стандартный шрифт и размер шрифта. Для русских шрифтов это Arial и Time new Roman и размер от 12 до 14. Использование нестандартных шрифтов и маленьких или больших размеров шрифтов вызывает у пользователя дискомфорт, затрудняет чтение текста и отвлекает от понимания прочитанной информации. С технической точки зрения это тоже плохо - не все браузеры смогут правильно определить кодировку нестандартного шрифта, в результате вместо текста пользователь увидит бессмысленную последовательность непонятных ему символов.

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

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

Наполнение веб-сайта о дорожном движении

Давайте определился, что может содержать веб-сайт о ДД, учитывая намеченную нами целевую аудиторию и специфику:

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

Ш учебные билеты - для подготовки к экзаменам в ГИБДД.

Ш дорожные знаки - таблица со всеми знаками и их описанием.

Ш документы - описание, примеры оформления доверенностей путевой лист и т.д.

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

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

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

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

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

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

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

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

Раздел 2. КОНСТРУКТОРСКО-ТЕХНОЛОГИЧЕСКАЯ ЧАСТЬ

2.1 Проектирование программного продукта

Задачи веб-сайта:

Итак, сформируем задачи автомобильного веб-сайта:

Ш информационные - расширение информационной базы за счет свободного доступа к информации;

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

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

Разработка структуры сайта

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

Для написания HTML кода (основу HTML можно изучить по следующей ссылке: http://postroika.ru/html) можно воспользоваться обычным текстовым редактором (Блокнот, WordPad), либо специализированным HTML-редактором (например Macromedia DreamWeaver, учебник по редактору можно найти по адресу: http://www.blaga.ru/dmx/).

Для этого возьмите лист бумаги и напишите основные идеи сайта:

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

Ш сгруппируем идеи по содержанию.

Ш сгруппируем идеи по возможностям.

Ш определим приоритет каждой из идей.

Создание карты сайта

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

Тематические разделы

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

Навигация

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

Содержание сайта и оформление

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

Дизайн веб-сайта

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

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

Композиция

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

Цветовая гамма

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

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

Шрифты

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

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

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

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

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

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

Графика

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

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

Размещение веб-сайта в сети Интернет

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

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

Реклама сайта

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

2.2 Выбор среды разработки

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

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

1. программы, имеющие в своем составе визуальные редакторы (design-based editor) -- средства, которые автоматически формируют необходимый HTML-код, позволяя разрабатывать Web-страницы в режиме WYSIWYG (What You See Is What You Get -- что вижу, то и получаю);

2. программы-редакторы (code-based editors), которые предоставляют редактор и вспомогательные средства для автоматизации написания кода.

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

Отметим, наконец, что есть и компромиссные решения: большинство мощных редакторов, обладающих визуальными конструкторами (Microsoft FrontPage, Macromedia Dreamveawer, Adobe Golive), имеют не только визуальные средства, но и весьма развитые редакторы кода. Например, в последней версии FrontPage реализован даже сдвоенный режим, в котором пользователь может наблюдать, как действия визуального редактора приводят к изменению кода.

При этом очевидно, что чем выше профессионализм пользователя, тем меньше готовых шаблонов, макетов и подсказок ему требуется. Это справедливо не только для построения сайтов, но и для строительства домов. Из кирпичей можно построить больше типов зданий, чем из панелей с готовыми проемами под окна и двери, но это и усилий требует больших. Таким образом, простой текстовый редактор -- это полезное средство для Web-дизайнера, досконально знающего HTML, но малополезное для человека, который не собирается изучать HTML. Однако излишний аскетизм тоже плох. И на мой взгляд, странно, что некоторые называют лучшим HTML-редактором Notepad. Ни один, даже самый грамотный, пользователь не может помнить всего и не должен все писать сам, поэтому всегда полезна справка по HTML и другим языкам, а также библиотеки Java-скриптов, форм, меню и других элементов. Впрочем, разработчики постарались учесть пожелания и вкусы самых разных категорий пользователей.

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

FrontPage

Разработчик: Microsoft

Сайт программы: www.microsoft.com/frontpage

Условия распространения: ориентировочная цена -- 155 долл.

Microsoft FrontPage -- это простой в освоении и удобный Web-редактор для проектирования, подготовки и публикации Web-сайтов (рисунок 1). Благодаря интеграции с семейством продуктов MS Office, привычному интерфейсу и обилию шаблонов программа позволяет быстро освоить работу даже начинающим пользователям, знакомым с основами работы в MS Word. При этом FrontPage нельзя назвать решением для «чайников»: программа предоставляет широкие функциональные возможности и разнообразные средства оптимизации коллективной разработки, позволяет быстро создавать динамические комплексные Web-узлы практически любой сложности.

Последняя версия продукта (FrontPage 2003) появилась в конце этого года и порадовала многих поклонников данной программы обилием усовершенствований. Улучшенная поддержка графики упрощает работу во FrontPage 2003 с изображениями из других приложений. Например, FrontPage 2003 поддерживает написание сценариев для Flash-объектов, а для включения в Web-узел объекта Macromedia Flash достаточно всего лишь перетащить его в рабочую область FrontPage.

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

FrontPage удачно сочетает возможности использования визуального конструктора и средства редактирования кода. В новой версии программы появилось разделенное окно (режим Split), которое состоит из двух областей -- «Конструктор» (Design) и «Код» (Code). В окне Design ведется разработка в режиме WYSIWYG, а в окне Code идет автоматическое обновление кода при внесении изменений в макет.



Рисунок 1 - Интерфейс FrontPage

Комплексные средства проектирования позволяют повысить качество создаваемого кода и усовершенствовать навыки программирования.

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

Функция интеллектуального поиска и замены осуществляет поиск и замену атрибутов или тэгов на заданных страницах. При этом можно указывать сложные правила поиска и замены, что позволяет быстро выполнять обновления Web-узла. FrontPage предоставляет возможность оптимизации HTML-кода, написанного в других приложениях за счет удаления избыточных тэгов, пробелов и т.п. Технология Microsoft IntelliSense позволяет уменьшить вероятность ошибок при написании программного кода благодаря автоматическому завершению операторов и показу параметров, доступных для набираемого кода. Данная функция используется для HTML, CSS, XSL, JScript, VBScript, JavaScript и ASP .NET. Разработчик JScript позволяет добавлять функцию интерактивности, не требуя писать ни одной строки кода: достаточно выбрать из списка предлагаемых так называемых функций поведения любую вам понравившуюся -- все остальное делается автоматически. Усовершенствованные функциональные возможности публикации FrontPage 2003 ускоряют размещение создаваемых Web-страниц в Интернете.

Adobe GoLive CS

Разработчик: Adobe

Сайт программы: www.adobe.com/products/golive/main.html

Условия распространения: триал-версия, цена -- 399 долл., апгрейд -- 169 долл.

Adobe GoLive CS -- это универсальное многофункциональное профессиональное средство для создания, построения и управления Web-сайтами от компании -- производителя популярнейшего графического пакета Photoshop (рисунок 2). Последняя версия Adobe GoLive получила название Adobe GoLive CS, поскольку вместе с другими ключевыми продуктами Adobe (Photoshop CS, Illustrator CS и InDesign CS) входит в комплект программ Creative Suite, что и обозначает аббревиатура «CS».

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



Рисунок 2 - Интерфейс Adobe GoLive

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

В GoLive реализованы автоматическая проверка синтаксиса HTML-кода и его совместимости с различными версиями Internet Explorer и Netscape Navigator. При обнаружении тэгов, которые не поддерживаются тем или иным браузером, программа сообщает об этом.

В программе также имеется функция автоматического распознавания и завершения написания операторов (code-completion engine), которая действует для CSS, JavaScript, PHP, SMIL, SVG и XML.

Помимо этого доступны такие функции, как настраиваемая подсветка синтаксиса, редактор библиотеки тэгов (чтобы редактировать и индивидуализировать библиотеки тэгов), средства сравнения кодов (Source code difference checking) и средство оптимизации (очистки) кода.

Что касается мультимедиа, то в последней версии GoLive CS произведен целый ряд усовершенствований, включая поддержку QuickTime, XHTML, более совершенную работу с PDF-файлами. Поддержка XHTML позволяет конвертировать существующие HTML-файлы в рабочие XHTML-страницы для Web и мобильных устройств.

Технология Smart Objects обеспечивает интеграцию (возможность открывать, редактировать и помещать) файлов Adobe Photoshop, Illustrator и Adobe Portable Document Format (PDF) в среду GoLive. Предоставляется возможность импорта многослойных Photoshop-файлов (PSD) непосредственно в GoLive и интеграции ролловеров (rollovers), созданных в многослойных Photoshop-файлах.

В Adobe GoLive CS используются такие опробованные Adobe-технологии, как цветовая совместимость на основе общего ядра Adobe Color Engine и точное масштабирование до 1600% с визуальным отображением.

Программа обеспечивает возможность создания, просмотра и добавления ссылок на Adobe PDF-файлы непосредственно из среды GoLive, позволяет быстро конвертировать Web-материалы в Adobe PDF-файлы для обмена с соразработчиками или для представления их заказчику. Adobe GoLive CS содержит развитые средства планирования архитектуры и структуры контента с возможностью построения диаграмм, а также совершенные средства визуальной разработки, обеспечивает двойной режим отображения (кода и результирующего вида).

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

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

Пожалуй, единственным недостатком Adobe GoLive CS является довольно высокая цена.

Macromedia Dreamweaver MX 2004 v7.0

Разработчик: Macromedia (www.macromedia.com)

Сайт программы: www.macromedia.com/software/dreamweaver/

Условия распространения: триал-версия, цена -- 399 долл.

Dreamweaver всегда считался инструментом скорее дизайнера, чем программиста. Однако в последней версии имеется полный набор средств как для визуального конструирования, так и для кодирования (рисунок 3). Dreamweaver MX 2004 v7.0 -- это приложение, в котором разработчик может работать в одной среде, быстро создавая, развивая и обслуживая Web-сайт и Интернет-приложения с помощью средств визуального редактирования, разработки приложений и быстрого написания кода, реализованных в едином интегрированном решении. Разработчики могут использовать Dreamweaver с различными серверными технологиями и создавать мощные Интернет-приложения, которые обеспечивают пользователям доступ к базам данных и Web-сервисам.



Рисунок 3 - Интерфейс Macromedia Dreamweaver

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

Одним из важных нововведений в Dreamweaver MX 2004 v7.0 является кросс-браузерный валидатор (cross-browser validator) -- средство, позволяющее автоматически проверять корректность тэгов и CSS-правил на совместимость для различных Web-браузеров.

Dreamweaver MX 2004, вне всякого сомнения, лучшее приложение в своем классе, однако он требует существенных системных ресурсов и является достаточно дорогим продуктом.

HomeSite 5.0

Разработчик: Allaire (www.allaire.com)

Сайт программы: www.macromedia.com

Условия распространения: бесплатная триал-версия на 60 дней, цена -- 99 долл.

В качестве разработчика мы указали компанию Allaire, однако с 2001 года продукт дорабатывался компанией Macromedia, объединившейся в марте того же года с Allaire; при этом продуктовые линейки обеих компаний удачно дополнили друг друга. В то время как Dreamweaver -- это прежде всего визуальный редактор, программа HomeSite предназначена для разработчиков, которые предпочитают работать с исходными кодами и обычно используют не только HTML (рисунок 4). Macromedia удалось усовершенствовать данный редактор для работы с большими сайтами.

Рисунок 4 - Интерфейс HomeSite

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

Еще одним плюсом HomeSite является интуитивно понятный, удобный интерфейс, который позволяет редактировать несколько документов одновременно. Имеется FTP-менеджер, интегрированный с Windows Explorer. Auto-Backup-функция дает возможность регулярно сохранять материалы в backup-папке, так что к предыдущим версиям всегда можно вернуться. Удобные средства предоставляются разработчикам, управляющим большим сайтом и работающим с графикой. Новая система размещения проекта (project-deployment system) автоматизирует процесс публикации файлов на один или несколько удаленных серверов.

Программа имеет встроенные средства проверки кода, предоставляет подсказки тэгов (tag help), обеспечивает проверку и оптимизацию кода, поддерживает XHTML, DHTML, JavaScript, ASP, CFML, Perl и VBScript.

CuteSite Builder 4.0

Разработчик: globalscape

Сайт программы: www.globalscape.com

Условия распространения: триал-версия, цена -- 70 долл.

CuteSite Builder -- хорошая программа для начинающих пользователей. Она позволяет легко и быстро создавать Web-сайты профессионального уровня, выбирать определенный дизайн на основе готовых темплейтов (рисунок 5). Пользователь может добавить свой контент и опубликовать сайт одним щелчком мыши, при обновлении сайта идет загрузка только модифицированных страниц. Функция Custom Form Wizard Fields позволяет сформировать до 12 полей в формах обратной связи. Автоматически генерируемые формы удобно использовать для получения информации от посетителей вашего сайта. Функция визуального редактирования (WYSIWYG Editing) обеспечивает просмотр текстового форматирования и картинок в том виде, в каком они отображаются на сайте. Мощный редактор таблиц позволяет легко выбирать размеры ячеек, фон и другие параметры таблиц. Функция Photo Sequence Wizard предоставляет возможность автоматически создавать слайд-шоу с элементами навигации и описания. С помощью функции Site Map графически отображается структура Web-сайта.



Рисунок 5 - Интерфейс CuteSite Builder

Namo WebEditor 5.5

Разработчик: NAMO

Сайт программы: www.namo.com

Условия распространения: триал-версия, цена -- 99 долл.

В первую очередь программу можно порекомендовать начинающим пользователям. Namo WebEditor 5.5 предоставляет удобные инструменты разработки; имеется как редактор кода, так и визуальный редактор, работа в котором практически не отличается от работы в Word (рисунок 6).

Рисунок 6 - Интерфейс WebCanvas

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

CoffeeCup HTML Editor 9.5

Разработчик: CoffeeCup Software

Сайт программы: www.coffeecup.com

Условия распространения: триал-версия на 45 дней, цена -- 49 долл.

Программой уже пользуются более 8 млн. человек из 79 стран мира, -- это одна из наиболее часто скачиваемых в Интернете программ (рисунок 7). CoffeeCup не имеет визуальных средств редактирования, но, как редактор кода, снабжена очень удачным набором функций. Следует отметить, что компания CoffeeCup Software не новичок на рынке Интернет-программ и предлагает еще около 20 различных программ для создания Web-сайтов, в том числе CSS-редактор, GIF-аниматор и Flash-редактор.

Рисунок 7 - Интерфейс CoffeeCup HTML Editor

CoffeeCup HTML Editor 9.5 предоставляет следующие возможности:

· помощники по таблицам, формам, шрифтам и т.п.

· 125 Java-скриптов

· многочисленные графические заготовки

· 40 встроенных Web-шаблонов

· средства опубликования материалов на вашем сайте

· Project Manager, который позволяет хранить все необходимые файлы вместе

· функция FTP-загрузки на ваш сайт (доступная по щелчку на правой кнопке мыши)

· подсветка синтаксиса тэгов HTML

· встроенный оптимизатор HTML-кода

· настраиваемый под индивидуального пользователя интерфейс и многое другое

1stPage 2000 2.0

Разработчик: EVRSoft

Сайт программы: www.evrsoft.com

Условия распространения: бесплатно

1stPage 2000 2.0 -- это HTML-редактор с огромным количеством функций (с различными подсказками, справочниками, многоцветной подсветкой синтаксиса и т.п.) и при этом не занимающий много места -- размер дистрибутива менее 5 Mбайт (рисунок 8).



Рисунок 8 - Интерфейс 1st Page

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

Arachnophilia 5.2 build 1934

Разработчик: P.Lutus

Сайт программы: http://www.arachnoid. com/arachnophilia/

Условия распространения: CareWare

Прежде чем покупать коммерческий продукт, имеет смысл обратиться к программе Arachnophilia. Она распространяется как CareWare, то есть каждый может скачать ее без ограничений и помочь разработчику, если захочет (рисунок 9).



Рисунок 9 - Интерфейс Arachnophilia

Arachnophilia 5.2 -- это HTML-редактор, построенный на основе Java от Sun Microsystems. Несмотря на бесплатность, программа обладает всеми необходимыми для html-редактора функциями, включая возможность предварительного просмотра в выбранном браузере и загрузку страниц по ftp. Дистрибутив программы занимает всего 1,7 Мбайт, так что в любом месте, где есть доступ в Интернет, можно быстро скачать такое приложение и начать работу.

HotDog Professional 7.03

Разработчик: Sausage Software

Сайт программы: http://www.sausage. com/professional/overview.html

Условия распространения: триал-версия на 30 дней, цена -- 99,95 долл.

HotDog Professional -- это один из первых HTML-редакторов (рисунок 10). Программа развивается с 1994 года, и с ней работают уже миллионы пользователей. По возрасту и по популярности с HotDog Professional может сравниться, пожалуй, только HomeSite. Программа продолжает успешно развиваться: последняя версия (HotDog Professional 7.03) появилась 1 октября этого года и получила множество высоких оценок, в частности пять звезд в рейтинге Tucows.

Рисунок 10 - Интерфейс HotDog Professional

HotDog Professional 7.03 -- это профессиональный HTML-редактор, поддерживающий работу с HTML, JavaScript, CSS, PHP, ASP, VBScript и предоставляющий полный набор функций для разработки Web-сайтов профессионального уровня. Программа имеет встроенные средства управления Web-сайтом, средства просмотра навигации, встроенный FTP-менеджер и многое другое. В последней версии появился FlashWizard -- удобное средство, позволяющее вставлять flash-файлы (.swf).

CSE HTML Validator Pro 6.0

Разработчик: AI Internet Solutions

Сайт программы: www3.htmlvalidator.com

Условия распространения: цена профессиональной версии -- 129 долл., стандартной -- 69 долл., облегченная версия -- бесплатно

CSE HTML Validator -- это одновременно и средство проверки правильности кода HTML-страниц, и средство их написания (рисунок 11). Программа включает полнофункциональный HTML/текстовый редактор и не менее функционально насыщенный валидатор -- «проверяльщик» html-страниц на ошибки в коде, выдающий после проверки рекомендации по устранению ошибок.

Ошибки допускают не только новички, но и Web-дизайнеры со стажем. Ошибки свойственны не только человеку -- иногда, работая с WYSIWYG-редакторами, можно допустить возникновение ситуации, которая приводит к некорректной работе программы. CSE HTML Validator Pro -- это мощное интерактивное приложение, которое поможет устранить подобные ошибки Web-разработчикам, пишущим код на HTML, XHTML и WML. Программа отслеживает, чтобы конечный текст был доступен не только для пользователей Internet Explorer, но также для пользователей Navigator или WebTV.

Рисунок 11 - Интерфейс CSE HTML Validator Pro

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

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

2.3 Разработка программного продукта

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

При создании дизайна веб-сайта рекомендуется воспользоваться готовыми пакетами работы с графикой. Например, популярным растровым редактором изображений Adobe Photoshop (рисунок 12).

Рисунок 12 - Интерфейс Adobe Photoshop

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

Рисунок 13 - разбивка на несколько частей

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



Рисунок 14 базовая геометрия

Далее заполняем стартовую страничку различной информацией, базовыми ссылками (рисунок 15) .

Рисунок 15 - Интерфейс стартовой страницы

Для программирования HTML-кода веб-сайта использовался редактор веб-страниц Macromedia Dreamweaver(рисунок 16). Благодаря возможности визуального программирования можно сразу же после введения даже строчки кода наблюдать, как выглядит наш сайт. Единственным недостатком данной программы является добавления «лишнего кода».

Рисунок 16 - окно редактора

А благодаря поддержки визуального программирования можно без знания HTML тэгов создавать приятных сайты. Главное окно редакторая состоит из двух частей: верхняя часть представляет собой редактор HTML-кода с подсветкой синтаксиса; нижняя представляет собой визуальный редактор HTML, на котором сайт отображается так, как он будет выглядеть в окне браузера. Также данный редактор позволяет осуществить предпросмотр в различных браузерах, в данном случае это internet explorer 8 и Mozilla firefox (рисунок 17)

Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome и Opera

Рисунок 17 - возможность предпросмотра

Сразу можно заметить разницу в отображении одной и той же страницы между этими браузерами… (рисунок 18)



Рисунок 18 - разница в отображении

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

Рисунок 19 - создание копии страницы

Далее используя технологию гиперссылок связываем эти две страницы (рисунок 20):

Для определения ссылки в HTML используется тег <a>, структура которого имеет вид <a href="filename">Текст ссылки</a>, где «filename» -- имя файла или адрес в Интернете, на который необходимо сослаться, а «Текст ссылки» -- текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе.

Например, гипертекстовая ссылка:

· <a href="my_work.html">Мои работы</a> -- ссылается на документ my_work.html, образуя гипертекстовую ссылку в виде слова «Мои работы»;

· <a href="photo/my_photo.html">Мои фото</a> -- ссылается на файл my_photo.html, расположенный в каталоге photo, и образует ссылку в виде текста «Мой фотоальбом»;

· <a href="http://www.site.com"> -- ссылается ресурс, расположенный на удаленном сервере.

Рисунок 20 - гиперссылка в коде страницы

Таким образом создаем и связываем все базовые страницы : ПДД, нарушения, нормативные акты, форум и т.д.

Далее заполняем каждую страницу необходимой информацией, в данном случае информацию о штрафах берем с официально сайта ГИБДД РФ.

Информация о штрафах размещена в виде таблицы для отображения таблицы в html используется элемент <table> (рисунок 21) - служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

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

Синтаксис

<table>

<tr>

<td>...</td>

</tr>

</table>

<table>

<tr>

<td>...</td>

</tr>

</table>



Рисунок 21 - таблицы в html

Далее переходим к разделу дорожные знаки, в Российской Федерации дорожные знаки подразделяют на 8 групп :

1. предупреждающие знаки

2. знаки приоритета

3. запрещающие знаки

4. предписывающие знаки

5. знаки особых предписаний

6. информационные знаки

7. знаки сервиса

8. знаки дополнительной информации (таблички)

Соответственно создаем 8 html страниц, называя их также как и соответствующую группу знаков, далее заполняем страницы информацией об этих знаках (рисунок 22).



Рисунок 22 - заполнение страницы знаков приоритета

Заполнив все разделы касающиеся дорожных знаков переходим к разделу - Правила Дорожного Движения.

Данный документ довольно большой по объему, поэтому для удобства пользователя разметим его специальными «якорями» на которые разместим гиперссылки прямо в списке разделов (рисунок 23)

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



Рисунок 23 - использование «якорей»

В коде страницы это выглядит так (рисунок 24)

Рисунок 24 - ссылки через якоря в коде страницы

2.4 Тестирование и отладка программного продукта

Без тестирования не проходит создание ни одной информационной системы, в том числе веб-сайта. Начнем проверку данного ресурса с отображения его в различных браузерах: firefox, explorer8 (рисунок 25)

Рисунок 25 - проверка работоспособности

После проведенной отладки была устранена проблема с отображение картинок в Internet Explorer.

Далее следует так называемый тест на usability, т.е. проверка всех ссылок кнопок и т.д.

Также тестирования сайта включает в себя проверку соответствия полученного результата, проекту сайта.

дорожный движение пользователь сайт

ЗАКЛЮЧЕНИЕ

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

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

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

Использование веб-сайта о Дорожном движении предоставляет следующие возможности:

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

Возможность узнавать новости в режиме реального времени.

Возможность размещения и просмотра тематических статей и журналов.

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

Возможность просмотра комментариев официальных лиц.

Возможность публикации фотографий и видеозаписей.

Возможность создания форума, где посетители будут обмениваться информацией и мнениями.

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

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

http://www.gibdd.ru/ - нормативные документы

http://ru.wikipedia.org/ - справочная информация по всем вопросам

http://www.gai.ru/PermisDeConduire/pddrf/ - информация по ПДД

http://www.google.ru/ - все остальные вопросы

ПРИЛОЖЕНИЕ

Программный код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Сайт о дорогах и людях</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<link rel="stylesheet" type="text/css" href="Templates/styles.css" />

<style type="text/css">

<!--

.стиль1 {font-size: 14px}

.стиль2 {font-size: 14}

-->

</style>

</head>

<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor="#fcf0e2">

<table cellpadding="0" cellspacing="0" height="100%" width="100%">

<tbody><tr>

<td background="Templates/d_05.gif" height="47"><table class="Title" cellpadding="0" cellspacing="0" height="47" width="100%">

<tbody><tr>

<td width="295"><img ilo-full-src="ilo-full-src" src="Templates/logo_1.jpg" border="0" height="47" width="295" /></td>