Этапы разработки Web-сайта

Выделяют следующие этапы разработки Web-сайта:

· планирование,

· реализация,

· публикация,

· продвижение,

· поддержка.

На стадии планирования определяется следующее:

• цели создания Web-сайта (Зачем? Какие задачи он должен выполнять и на какую аудиторию он рассчитан?)

• характер содержимого;

• структура (Юзабилити – удобство пользования);

• особенности оформления (определяется структура каждой страницы и разрабатывается графика).

Любую страницу можно оценить по трем параметрам:

· контенту,

· внешнему виду

· и навигации.

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

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

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

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

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

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

Таким образом, размещение собственных материалов в Интернете включает два этапа: подготовку материалов и их публикацию. Подготовка материалов состоит в создании документов, имеющих формат, принятый в Интернете, то есть Web-страниц, написанных на языке HTML. Для создания Web-документов используется язык HTML (HyperText Markup Language - язык разметки гипертекста). Гипертекст, то есть расширенный текст, включает дополнительные элементы: иллюстрации, ссылки, вставные объекты.

Элементы HTML

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

Значки “<” и “>”. Эти элементы в угловых скобках называются HTML-дескрипторами или HTML-тегами.

Именно дескрипторы сообщают Web-браузеру информацию о структуре и особенностях форматирования Web-страницы. Большинство дескрипторов являются парными, т.е. состоят из открывающей и закрывающей частей и воздействуют на текст, помещенный между ними. Обратите внимание, что признак закрывающего дескриптора — обратная косая черта ” / “.

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

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

Структура документа HTML

Согласно спецификациям HTML 4.01, разработанным W3C, для всех документов HTML обязательны следующие условия.

В документе должна присутствовать директива (или пролог, как его иногда называют) DOCTYPE (Document Type Declaration). Пролог содержит объявление, информирующее о том, какая именно версия HTML использовалась при составлении Web-cтраницы, и указывает Web-браузеру, каким образом обрабатывать данный документ.

Пролог представляет собой одиночный дескриптор специального вида. Данный дескриптор всегда вставляется в самом начале HTML-документа перед открывающим дескриптором <html>.

(На рис. 2.6 —<I DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>.)

Запомните, что <! doctype — единственный дескриптор, который пишется прописными буквами Все остальные дескрипторы нужно набирать только строчными буквами!

HTML-документ всегда должен начинаться открывающим дескриптором <html> и заканчиваться закрывающим дескриптором </html>
Далее следуют два дескриптора заголовка <head> и </head>. Между этими дескрипторами обычно находится пара дескрипторов <title> и </title>, определяющих название страницы. Обратите внимание: именно это название отображается в заголовке окна Web-браузера.

Далее следует пара дескрипторов содержимого документа <body> и </body>. Между этими дескрипторами и размещают всю информацию, которая планируется быть представленной на Web-странице.

Добавление комментариев

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

Комментарии не отображаются Web-браузерами на экране, но нужно помнить, что любой пользователь может прочесть данные комментарии.
Для добавления комментариев используют специальные парные дескрипторы — открывающий <!— и закрывающий —>.

Чтобы внести в HTML-код Web-страницы текстовую конструкцию комментариев, выполните такие действия.

1. Введите дескриптор <!— в месте начала текста комментария. Наберите собственно требуемый текст комментария. Завершите блок комментария закрывающим дескриптором —>, например

<!— А в это место Web-страницы нужно вставить красивые картинки или фотографии. Не забыть!—>

2.
Как обычно, сохраните текст, вернитесь в окно Web-браузера и обновите изображение открытой Web-страницы. Обратите внимание, что на Web-странице текст комментариев не отображается.

Текст комментариев можно отделять дополнительными пробелами от разделительных дескрипторов, чтобы HTML-код было проще читать.

Основные теги

Понятие тегов, их виды, правила записи

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

Теги – это определенные последовательности символов, заключенные между знаками < (меньше) и > (больше). Прописные и строчные буквы в написании тегов значения не имеют.

Теги бывают парные (например, <TITLE> и </TITLE>) и непарные (например, <BR>), открывающие и закрывающие. Отличительным признаком закрывающего тега является символ /.

Структура документа HTML

Документ HTML всегда должен начинаться с тега <HTML> и заканчиваться соответствующим закрывающимся тегом </HTML>. Внутри документа выделяются два основных раздела: раздел заголовков и тело документа. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD> и </HEAD>. В частности, раздел заголовков должен содержать название web-страницы, которое при просмотре в броузере появится в заголовке окна документа. Название web-страницы располагается между тегами <TITLE> и </TITLE>.

Например,

<TITLE> Моя страничка </TITLE>

Основное содержание размещается в теле документа, которое ограничивается парным тегом <BODY>.

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

<HTML>

<HEAD><TITLE>Заголовок документа</TITLE></HEAD>

<BODY>

Содержание документа

</BODY>

</HTML>

Основные теги HTML и их возможные параметры приведены в приложении А.

Создание фреймов

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

Каждый фрейм имеет собственное имя (параметр NAME), позволяющий переходить к нему из другого фрейма. Фреймы могут использоваться

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

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

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

– для создания формы типа «мастер-деталь» для Web-приложений, обслуживающих базы данных.

Фрейм-документ - это специфичный вид HTML-документа. Его структура не содержит тега <BODY> и, соответственно, не несет информационной нагрузки. Он описывает только подокна (фреймы), которые будут содержать информацию.

Структура HTML-документа, описывающего фреймы, следующая:

<HTML>

…

</FRAMESET>

</HTML>

Тег <FRAMESET> описывает все фреймы, на которые делится экран. Можно разделить экран на несколько вертикальных или горизонтальных фреймов.

Параметр тега <FRAMESET> ROWS определяет горизонтальные подокна, а COLS - вертикальные подокна.

Описания подокон разделяются запятыми. Для описания подокон используется:

– Простое числовое значение, определяет фиксированную высоту (ширину) подокна в пикселах;

– Значение величины подокна в процентах от 1 до100;

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

Примеры

<FRAMESET COLS=”50, *,50” > - описывает три фрейма, два по 50 пикселов справа и слева, и один внутри этих полос.

<FRAMESET ROWS =”20%,3*,*” > - описывает три фрейма, первый из которых занимает 20% площади окна броузера сверху, второй - 3/4 оставшегося от первого фрейма места, т.е 60% всей площади окна.

В теге <FRAME> задаются параметры для каждого фрейма в отдельности.

Параметр SRC задает имя файла, который загрузится в этом фрейме. Параметр NAME задает имя данного фрейма. Имя фрейма может быть использовано для определения действия с данным фреймом из другого HTML-документа или фрейма (как правило, из соседнего фрейма того же документа). Имя обязательно должно начинаться с символа.

Например

Имя фрейма необходимо задавать для того, чтобы впоследствии указать, к какому фрейму использовать гиперссылку. В документе HTML, в этом случае, в теге <A HREF> (описание гиперссылки) должен присутствовать параметр TARGET. Этот параметр определяет фрейм, в котором показывается содержимое Web-страницы. Например,

В этом случае, после выбора гиперссылки file, во фрейме с именем frame1 будет показано содержимое документа file.htm.