Пароли, адреса, явки

LearningApps Логин: stu11a66 Пароль: blatt36

пятница, 23 февраля 2018 г.

Графика в веб-дизайне

Сервисы для выбора фото и картинок:


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

https://thenounproject.com/ - сервис для создания и выбора пиктограмм

Free Digital Photos — большая база, разбитая по категориям. Все изображения можно использовать для образовательных, личных или предпринимательских целей

Free Images — большая галерея из более чем 35 тысяч снимков, разбитых по категориям и доступных для тематического поиска. Для скачивания понадобится авторизация. 

http://lenagold.ru/ - коллекция бесплатных клипартов, в том числе с прозрачным фоном

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

Designers Pics — сайт, собирающий бесплатные фотографии в высоком разрешении. Есть общая лента обновлений и отдельный раздел, где снимки разбиты по категориям. 

Freepik -www.freepik.com. Один из самых больших веб-сайтов, который предлагает сотни новых векторных изображений для личного и для коммерческого использования.

Vecteezy - www.vecteezy.com. Огромный «дом» векторной графики, изображений и всевозможных паттернов. Помимо бесплатных, есть доступные наборы только премиум-пользователям.




Обработка фотографий и картинок в PhotoShop

Как убрать белый фон?

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

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


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


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

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

Полезная команда для удаления каймы: Слой — Обработка краев — Убрать кайму.

Способ 2 Выделение фона при помощи инструмента Волшебная палочка.

Самое важное — не забыть разблокировать фоновый слой.

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

Теперь, выбрав Волшебную палочку, сделайте клик по фону. Остается лишь нажать клавишу Backspace. Появится вновь шахматный фон.


Как и с волшебным ластиком, обратите внимание на параметры допуска и смежных пикселов. Они работают аналогично.

Как обрезать часть фото?

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


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

Кадрирование фотографии

  1. Выберите инструмент «Рамка»  на панели инструментов. По краям фотографии появятся границы кадра.
  2. Нарисуйте новую область кадрирования или перетащите ручки угла и краев кадра на фотографии.
  3. (Необязательно) Укажите параметры инструмента «Рамка» на панели «Управление».


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

Параметры наложения
Выберите вид направляющих, задающих границы кадра изображения. Доступны следующие виды направляющих: «Правило 1/3», «Сетка» и «Золотое сечение». Чтобы просмотреть все параметры, нажмите «O».

Параметры инструмента «Рамка»
Выберите меню «Настройки» (значок шестеренки), чтобы указать дополнительные параметры инструмента «Рамка».

Использовать классический режим
Включите эту настройку, чтобы инструмент «Рамка» работал, как в предыдущих версиях Photoshop (CS5 и более ранних).

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

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

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


4. Нажмите клавишу Enter (в Windows), чтобы выполнить кадрирование фотографии.


Как уменьшить размер фотографии?

Размер файла изображения — это физический размер файла, в котором хранится изображение. Он измеряется в килобайтах (КБ), мегабайтах (МБ) или гигабайтах (ГБ). Размер файла пропорционален размерам изображения в пикселах. Чем больше количество пикселов, тем детальнее изображение, получаемое при печати. 

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

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

Photoshop поддерживает максимальные размеры изображения в пикселах, равные 300 000 по горизонтали и вертикали. Это ограничение определяет предельно допустимые размеры и разрешение изображения на экране и при печати.

Изменение размера изображения в пикселях

Изменение размеров изображения в пикселях влияет не только на его размер на экране, но и на качество изображения на экране и при печати, то есть на размеры отпечатка или на разрешение изображения.

  1. Выберите команду «Изображение» > «Размер изображения». Для сохранения текущего соотношения между высотой и шириной в пикселах выберите «Сохранить пропорции». Эта функция автоматически изменяет ширину при изменении высоты и наоборот.
  2. В полях «Размерность» введите значения для ширины и высоты. Для ввода значений в процентах от текущих размеров выберите в качестве единицы измерения проценты. Новый размер файла изображения появляется в верхней части диалогового окна «Размер изображения» (старый размер указывается в скобках).

Сохранение в формате JPEG

Kоманду «Сохранить как...» можно использовать для уменьшения размера изображений в формате JPEG (*.jpg). JPEG обеспечивает уменьшение размера файла путем выборочного удаления данных. С помощью команды Файл > Экспорт > Сохранить для Web (старая версия) изображение можно также сохранить как один или несколько JPEG-файлов.

Вызовите команду Файл -Сохранить как... и выберите «JPEG» в меню «Тип файлов».
В диалоговом окне «Параметры JPEG» выберите желаемые параметры и нажмите кнопку «ОК».

Параметры изображения
Задает качество изображения. Выберите параметр в меню «Качество», передвиньте всплывающий ползунок «Качество» или введите значение от 0 до 12 в текстовое поле «Качество».

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

понедельник, 19 февраля 2018 г.

Хостинг и продвижение сайта

Результаты практической работы "Выбор хостинга для интернет-магазина":

Фамилия, имя
Оценка
Иваненко
10
Кузнецова, Крячун
9
Кемарский
12
Лебидь, Коваль
11
Ясманович, Гунько
10
Петренко
11
Лоик, Дударь, Солоп
11













Откройте таблицу "Выбор хостинга для интернет-магазина" и загрузите себе копию.



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

Этапы создания веб-сайта:

  • Определение целей и функций сайта
  • Создание структуры (схемы) сайта
  • Подбор аппаратных и программных средств, необходимых для реализации сайта
  • Создание отдельных страниц
  • Тестирование
  • Публикация страниц на сервере
  • Реклама сайта
  • Поддержка и развитие сайта

На начальном этапе создания определяются:

  • Цель создания
  • Потенциальная аудитория
  • Функции сайта

На этапе подбора аппаратных и программных средств определяются:

  • Виды материального обеспечения (сервер) и прикладных программ для сайта (поисковые системы, интерфейс и т.д.)
  • Регистрация доменного имени
  • Выбор технологии доступа к базам данных (PHP, CGI  и т.д.)
  • Выбор инструментов написания HTML-кода
  • Выбор инструментов создания графики и анимации

Этап публикации страниц на сервере включает:

  • Перенос html-файлов, графики, анимации и т.д. на сервер
  • Создание структуры базы данных на сервере
  • Тестирование работы веб-сайта на сервере
  • Оценка скорости загрузки в различных режимах
  • Этап рекламы и продвижения сайта включает:
  • Регистрацию сайта в поисковых системах
  • Регистрацию в баннерных системах обмена. Для коммерческих ресурсов-  покупка баннерной рекламы
  • Обновление содержимого, модернизация графики, отслеживание посещаемости сайта

 Анализ серверов платного и бесплатного хостинга:


Платный хостинг
Бесплатный хостинг
Доменное имя 2-го уровня Sitename.ru
Доменное имя 3-го уровня Sitename.hostingname.ru
Надежный сервер
Возможны неполадки с серверов
Невозможно удаления сайта клиента из базы данных
Возможно удаление сайта клиента без объяснения причины
Оперативная служба поддержки
Медленная служба поддержки
Поддержка технологий PHP, MySQL, CGI и т.д.
Эти технологии поддерживаются не всегда


Здесь вы можете ознакомиться с рейтингами и обзорами самых популярных хостингов Украины, России и Европы:


Бесплатный хостинг с PHP и MySQL


Обзор 7 лучших бесплатных хостингов для своего сайта с PHP и MySQL

Создание сайта на Wix

Пройдите курс "Основы CSS" на сайте HtmlAcademy.

пятница, 16 февраля 2018 г.

Теги META. Поисковая оптимизация

Результаты практической работы "Метатеги":

Фамилия, имя
Оценка
Солоп, Безпалова
9
Кемарский Никита
11
Илона Соболь, Полина Брилевич, Антон Гунько
11
Кильчанов Познанский
11
Ханишин Борисевич
10
КузнецоваКрячун
11
Цыганов Петренко Федоренко
11
Похилова Лебидь Лоик Дударь
11
Натарова, Олейник
11
Іваненко Андрій
10

Поисковая оптимизация (search engine optimization, SEO) — комплекс мер по внутренней и внешней оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей с целью увеличения сетевого трафика (для информационных ресурсов) и потенциальных клиентов (для коммерческих ресурсов) и последующей монетизации (получения дохода) этого трафика.

Поисковые системы учитывают множество параметров сайта при вычислении его релевантности (степени соответствия введённому запросу):
  • плотность ключевых слов (сложные алгоритмы современных поисковых систем позволяют производить  анализ текста, чтобы отсеять поисковый спам, в котором ключевое слово встречается слишком часто)
  • индекс цитирования сайта («ИЦ»), зависящий от количества и авторитетности веб-ресурсов, ссылающихся на данный сайт; многими поисковиками не учитываются взаимные ссылки (друг на друга). Зачастую также важно, чтобы ссылки были с сайтов той же тематики, что и оптимизируемый сайт — тематический индекс цитирования (тИЦ)
  • водность текста — показатель, определяющий наличие малозначимых слов, которые не несут никакой полезной информации и служат для разбавления текста
  • поведенческие факторы (внутренние) — ряд всевозможных действий пользователей, которые они могут произвести на сайте: вход, просмотр страниц, клики на ссылки в тексте, меню.


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

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

Основное предназначение метатегов - представить несколькими словами содержание всего вашего сайта. Метатеги облегчают поиск поисковым машинам.


META-теги имеют два возможных атрибута:

  • <META HTTP-EQUIV="имя" CONTENT="содержимое">
  • <META NAME="имя" CONTENT="содержимое">

META-теги должны находиться в заголовке HTML-документа между <HEAD> и </HEAD> (особенно это важно для документов, использующих фреймы).

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


Параметры атрибута NAME

Параметр
Назначение
Пример
Комментарий
Description
Текстовое описание (краткая аннотация) конкретной страницы вашего сайта. Не стоит создавать слишком длинное и подробное описание вашего сайта, рекомендуется ограничиться текстом до 100 символов, поскольку поисковые машины, в большинстве случаев, имеют ограничение на количество индексируемых символов.
<META NAME="description" CONTENT="Сайт содержит информацию для любителей старинных автомобилей, на нем вы можете найти описание с фотографиями редких и эксклюзивных автомобилей">
Самый широко используемый тег. Практически все поисковые системы учитывают его при индексации.
Значение этого тега очень важно для раскрутки сайта, практически все поисковые системы опираются на этот
 тег и выводят содержимое этого тега в результатах поиска (Google).
Keywords
Список ключевых слов, как правило, через запятую, соответствующих содержимому Вашего сайта. Это те слова, которые ваши клиенты могут использовать в поисковом запросе. Здесь также рекомендуется ограничиться списком до 30 слов. Можно поместить и наиболее частые опечатки ключевых слов. Также вы можете здесь записать и английские слова, соответствующие содержимому сайта.
<META NAME="keywords" CONTENT="реклама, дизайн, полиграфия">
Учитывается большинством поисковых систем.
Author
Автор, создатель сайта. Вряд ли используется поисковыми системами, и нужен скорее всего чтобы можно было показать что сайт сделан именно определенной персоной или фирмой.
<META NAME="AUTHOR" CONTENT="www.neo-systems.ru">


К группе метатегов относят и не имеющие обозначения "meta" стандартные теги и некоторые атрибуты web-документов:
  • <title>...</title> . Название документа (сайта, раздела, страницы). Допускается использование от 60 до 100 символов.
  • <img src=“”...alt="..."> . Подписи к графическим элементам.
Откройте форму "Теги META" и выполните задание.


Также рекомендую вам статью "Десять SEO-ошибок":

воскресенье, 11 февраля 2018 г.

Цвета в web-дизайне

Пройдите курс "Знакомство с CSS" на сайте Htmlacademy.ru

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

Цветовая теория: основные принципы. Умение сочетать цвета


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

Рассмотрим цветовой круг.



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

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

Основные цвета

Есть три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.

Составные цвета

Есть также три основных: оранжевый (# ff9900 в HTML или # F90 в CSS), зеленый (# 00FF00 в HTML или # 0f0 в CSS) и фиолетовый (# FF00FF в HTML или # f0f в CSS). Вы можете получить их путем смешивания красного и желтого(оранжевого), желтого и синего (зеленый) и синего и красного (фиолетовый).

Третичные цвета

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

Дополнительные цвета

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

Аналогичные цвета

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

Давайте посмотрим, какие чувства может вызвать каждый цвет и посмотрим на некоторые готовые решения.

Красный


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

Голубой



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






Желтый


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



Оранжевый


Бодрость и творчество. Ассоциируется с дружелюбием, уверенностью, игривостью, мужеством, стойкостью.




Фиолетовый



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




Зеленый

Цвет гармонии, природы, исцеления, жизни, питания и здоровья. Кроме того, часто связан с деньгами.





Коричневый.

Цвет релаксации и уверенности. Коричневый означает приземленность, природу, долговечность, комфорт, надежность.





Серый




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




Розовый

Выражает нежность, романтичность, женственность, пассивность, привязанность, воспитание, слабость.


Черный

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





Белый


Белый связан с чистотой, простотой, свежестью, добротой, невинностью.






Если вы хотите, чтобы текстовое содержимое было легко читаемым, выбирайте контрастные цвета.

Оптимальное количество цветов. Не делайте из вашего сайта цирк.

Используйте необходимое количество цветов. Минимальное количество цветов может способствовать серости вашего сайта.

Если вам нужно привлечь посетителя, применяйте интенсивные цвета.


Тест на цветовосприятие:

http://xritephoto.com/cool-tools


Полезные ссылки по теме:



понедельник, 5 февраля 2018 г.

Проектирование структуры сайта

Результаты практической работы " Сайт "Гороскоп":
Фамилия, имя
Оценка
Иваненко
8
Олейник, Солоп
11
Лебидь, Кемарский
12
Ясманович, Гунько
10
Кузнецова, Лоик, Дударь
10
Натарова
10
Познанский, Кильчанов
9
Полухова, Петренко
10
Похилова, Прошинская, Вересова
8
Ханишин, Борисевич
9
Цыганов, Федоренко
11













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

Внутренняя и внешняя структура

Структуризация представляемой на сайте информации выполняется на двух уровнях: внутреннем и внешнем.

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

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

Типовые структуры

Линейная структура


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


Иерархия

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

«Паутина»

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

Решетка

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


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

Есть одно «но» - какая-бы структура сайта не закладывалась на этапе проектирования, реальность вносит свои коррективы.

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