Подход к созданию веб-сайта (начало)

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

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

Для формирования сайта необходимо определить его структуру в виде макроинформационных блоков и коммуникационных связей между ними. Например, в сайте “Производство изделий с криволинейной поверхностью” можно выделить взаимосвязанные макроинформационные блоки: “Начало”, “Метод”, “Алгоритм”, “Модель”, “Твердое тело”, “Инструмент”, “Изделие”, которые описывают основные этапы технологии производства изделия от постановки задачи до его изготовления. Каждому макроинформационному блоку ставится в соответствие страница сайта. Полная информационная структура сайта может быть представлена в виде сети, основное достоинство которой — доступность необходимой страницы при минимальном количестве переходов; основной недостаток — сложность программного кода страниц.

Рис. 1. Полная информационная структура сайта

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

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

и с различными связями (б) между страницами

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

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

Рис. 3. Рациональная комбинированная информационная с рук ура сайта

Комбинированная структура — компромисс между полной информационной структурой и структурой типа “звезда”.

После разработки информационной структуры сайта необходимо выполнить эскизы страниц, например, с помощью системы растровой графики Adobe Photoshop или системы векторной графики Corel Draw.

Создается эскиз титульной страницы “Начало” сайта с помощью системы растровой графики Adobe Photoshop.

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

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

Эскиз титульной страницы был разбит на фрагменты: 11.gif, 21.gif, 31.gif, 32.gif, 41.gif, 51.gif, 61.gif, 71.gif, 81.gif, 91.gif, 101.gif, 23.gif, каждый из которых является плоской фигурой и представляет собой цельный информационный блок, легко воспроизводимый на компьютере. Границы геометрических фрагментов эскиза совпадают с вертикальными и горизонтальными линиями таблицы. Причем, геометрический фрагмент, с помощью которого осуществляется переход на другую страницу, обязательно является отдельной ячейкой таблицы. Таким образом, вертикальные и горизонтальные линии таблицы являются шаблоном, по которому эскиз делится на плоские графические фрагменты.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

%d такие блоггеры, как: