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

                        Функциональные каталоги. Одним из способов организации сложных сайтов является следующий. В каждом из каталогов хранятся файлы, относящиеся к одной и той же функциональной части системы. На верхнем уровне, например, будет только главная.html и относящаяся к нему графика. В каталогах следующего уровня будут содержаться файлы, относящиеся к какому-либо разделу сайта: «описание больницы», «меню» и т.д. в каждом из каталогов могут быть собственно HTML-файлы и относящиеся к ним графические или мультимедиа-файлы.

                        Каталоги по типам файлов. Некоторые Web-дизайнеры предпочитают хранить в каждом из каталогов файлы одного типа, независимо от того, какой функциональной части сайта они принадлежат. В главном каталоге сайта при этом будет только index.html прочие каталоги могут содержать, например, все изображения сайта, HTML-странички, скачанные файлы и т.д. Главным достоинством такого подхода является то, что файлы при обновлении необходимо заменять только один раз. Например, если одна и та же картинка используется на нескольких страницах, достаточно будет заменить ее только в одном месте: там, где хранятся изображения. При этом все ссылки на всех страницах будут указывать на обновленный файл (надо, конечно, не забывать назвать его так же, как старый). 

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

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

2.3.2.     Структура программы

2.3. Разработка интерфейса сайта

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

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

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

Символьный интерфейс используется обычно при работе видеосистемы в текстовом режиме. Информация выводится на экран монитора посимвольно. До появления Windows все операционные системы, в том числе MS DOS  и ее оболочка Norton Commander, предоставляли пользователю символьный интерфейс. Он достаточно экономичен по потреблению ресурсов и способен обеспечить вполне комфортную работу пользователя. Исключение составляет интерфейс командной строки операционной системы MS DOS, который требует от пользователя знания синтаксиса команд.

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

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

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

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

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

Оформление Web-сайта.

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

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

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

Использование стилей.

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

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

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

2.4. Выбор и обоснование среды программирования

Для создания сайта может быть использовано несколько методов. Наиболее распространенные – текстовый редактор (блокнот), язык описания гипертекстовых документов HTML,  программа Microsoft FrontPage2003, специальные программы – скрипты, написанные на таких языках Microsoft VBScript или JavaScript.

При помощи Microsoft VBScript или JavaScript можно управлять форматированием, выводом изображений, воспроизведением мультимедиа – в этом скрипты похожи на программы, созданные при помощи других языков программирования. На сегодняшний день самым мощным средством, позволяющим управлять выполнением скриптов, является DHTML – Dynamic HTML (динамический HTML). DHTML позволяет создавать простые анимации и многие другие эффекты.

В HTML для определения содержания и формата гипертекстовых документов используются команды, называемые тегами (tags). Web-броузер преобразует эти команды в текст и графические изображения и располагает их нужным образом на экране компьютера.

Кроме описания формата текста и положения графики на странице язык HTML используется и для других целей. Гиперссылка дает команду Web-броузеру перейти к новой странице в Internet и отобразить ее содержимое на экране.

Данный сайт разработан с помощью программы FrontPage 2003.

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

FrontPage 2003 позволяет не только легко создавать Web-страницы и Web-сайты, но и управлять ими.

При помощь ярлычков можно выбирать различные режимы просмотра и редактирования Web-страниц.

Используя средства FrontPage 2003, можно отобразить Web-сайт в нескольких режимах просмотра. На панели Views (режимы просмотра) расположены значки, позволяющие выбрать тот или иной способ отображения или редактирования сайта.

В списке папок отображаются все папки и файлы, относящиеся к текущему Web-сайту, а в окне просмотра страниц Page отображается выбранная Web-страница.

FrontPage 2003– это симпатичный и сравнительно простой html редактор, который позволяет многое делать руками. Включает множество заранее подготовленных Java-апплетов. Есть практически все, что надо для нормальной работы. Удобная настройка интерфейса позволяет включать только те меню и функции, которыми приходится часто пользоваться.

2.5. Тестирование сайта

2.5.1. Понятие тестирования

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

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

Порядок проведения испытаний:

                   запуск сайта;

-         ссылка должны ввести на определенную ей страницу;

-         корректное отображение графических элементов;

-         корректное отображение сайта в различных пользовательских режимах;

-         функциональность и соответствие проекта поставленной задаче.

2.5.2. Виды и методы тестирования

Что бы проверить, как на самом деле выглядит созданная страница, имеет смысл воспользоваться Web-броузером. Почти любой из них может загружать Web-страницу с жесткого диска точно так же, как из Internet. Необходимо в меню броузера найти команды типа File (файл), Open File (открыть файл). Диалоговое окно команды Open File позволяет открыть нужный файл.

Для тестирования документа в броузере:

1.           выберите File  Save File, чтобы сохранить все изменения в редакторе. Перейдите на окно броузера и выберите File  Open File, чтобы открыть сохраненный элемент.

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

3.           перейдите обратно в окно текстового редактора и внесите все необходимые коррективы. Отредактированный файл необходимо сохранить.

4.           если страница уже открыта в броузере, то для того, чтобы увидеть проделанные изменения, нужно щелкнуть на кнопке «Обновить».

2.5.3. Процесс тестирования

Процесс тестирования проходит в несколько этапов:

1.           сохранение данных в редакторе с расширением html (расширение для просмотра Web-сайтов) и открытие этого документа в Internet Explorer (окно броузера).

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