Лариса
Георгиевна
МЕЛИХОВА

Координатор Интернет-проектов Центра ТСО (технологий современного образования), СПб

Электронная почта:
mlarisa@spb.lanck.net

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


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

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

Простота — залог красоты

Обычно новичок, берущийся освоить премудрости веб-дизайна, проходит через три стадии:

  • 1 стадия. "Все так сложно, наверное, я никогда этого не освою."
  • 2 стадия. "Господи, да ведь это элементарно! Я уже все умею!"
  • 3 стадия. "Оказывается, на так все просто, еще есть чему поучиться…"

Впрочем, до третьей стадии доходят не все. Остановившись на второй, можно так и не понять, что создание сайта — это не просто работа в новом для вас HTML-редакторе; волей-неволей вы берете на себя функции дизайнера. А дизайнерская работа предполагает не только наличие художественных способностей и навыков — вкус, чувство меры, точный "глаз" (немного перестараешься, и уже некрасиво), — это еще и мелкий кропотливый труд, подбор и подгонка деталей, перебор множества вариантов. Да и HTML преподносит свои сюрпризы: стоит немного усложнить компоновку страницы, и вы можете столкнуться с совершенно неожиданными проблемами (например, вы добавляете лишнее слово в текст, помещаемый в правом нижнем углу — и вся ваша выверенная структура страницы вдруг разваливается).

Что же делать, если под рукой нет художника и HTML-верстальщика, способных не только придумать стиль оформления сайта, но еще и реализовать художественные идеи в виде грамотно скомпонованных HTML-страниц? Мой совет для такой ситуации, да и для многих других: будьте проще. Черный шрифт на белом фоне, простая структура страницы с минимумом графики и украшений смотрятся гораздо лучше, чем сложный, но неумело выполненный дизайн с плохо подобранными цветами и обилием графики, которая к тому же долго грузится. Пример такого простого дизайна — внутренние страницы сайта Ярославской школы 81: выглядит очень приятно, чего нельзя сказать об очень многих школьных веб-страницах, напоминающих помесь попугая с павлином. Обидно, конечно — вы, может быть, как раз научились всяким сложным трюкам, а получается, что нужно от всего отказаться. В утешение могу сказать, что простой дизайн (фактически, отсутствие дизайна) — вещь общепринятая для случая создания некоммерческих сайтов, когда нанимать профессионалов дорого и ни к чему, и имеет даже вполне солидное название: "академический стиль".

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

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

Стиль сайта

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

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

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

Условно можно выделить два вида стилевых решений школьного сайта:

  • Строгий стиль.

Четкая понятная структура, практически никаких излишеств. Страницы похожи одна на другую: это, может быть, несколько однообразно, зато удобно — и читать текст, и искать нужную информацию. Таков сайт Московской школы 218: www.mccme.ru/schools/218.

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

  • Насыщенный стиль.

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

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

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

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

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

Самая распространенная система представления цвета называется RGB (от англ. Red- Green- Blue, т.е. красный-зеленый-синий). Каждый оттенок представляется в виде комбинации "чистых" красного, зеленого и синего цвета.

В компьютерных графических программах применяется еще одна система представления цвета — HSV (от англ. Hue- Saturation- Value, т.е. тон-насыщенность-яркость). Эта система представляет собой абстракцию, моделирующую не физические свойства цвета, а его восприятие человеком.

  • Тон ( hue) из трех составляющих является собственно цветовым компонентом, представляет собой один из цветов радуги.
  • Насыщенность ( saturation) — это соотношение основного тона и равного ему по яркости бесцветного серого. Максимально насыщенный цвет не содержит серого вообще, а при нулевой насыщенности, наоборот, полностью отсутствует основной тон.
  • Яркость ( value) — общая яркость цвета. Максимальное значение этого параметра превращает любой цвет в белый, а минимальная — в черный.

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

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

При выборе цветовой гаммы для сайта стоит руководствоваться следующими принципами:

1. Выбирайте цвета, сочетающиеся между собой.

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

Считается, что теплые цвета (красный, зеленый и желтый) приближают объект, делают его визуально больше и активнее, привлекают к нему внимание. Тогда как холодный цвет (синий, голубой, фиолетовый) отдаляет, успокаивает, переводит объект на задний план композиции. Например, на сайте тоснинской гимназии 2 http://tosno-gim2.narod.ru холодный серо-голубой фон левой панели вместе с изображением справа, выполненным в тех же тонах, создает ощущение прохлады и удаленности, одновременно оттеняя и выделяя теплый темно-желтый шрифт заголовка.

2. Текст должен легко читаться на фоне страницы.

Все ваши дизайнерские изыски ничего не стоят, если текст трудно будет читать. Основных вариантов два: темный текст на светлом фоне или светлый текст на темном фоне. Но подобрать сочетающиеся цвета — дело сложное и хлопотное: между цветом фона и текста должен быть достаточный контраст, обеспечивающий возможность комфортного, неутомительного чтения, и в то же время эта цветовая гамма должна быть приятной для глаз. Самое простое — использовать разные оттенки одного цвета, как это сделано, например, на сайте 192 Московской школы http://sch192.ru.

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

3. Используйте ограниченное число цветов.

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

4. Используйте безопасную палитру цветов

"Безопасной палитрой" или "веб-палитрой" называется набор из 216 цветов, одинаково отображаемых на всех типах мониторов. Дело в том, что при просмотре сайта на мониторе, способном отображать только 256 цветов, возможно искажение цвета: компьютер сам пытается имитировать недостающие цвета с помощью смешения (dithering), в результате картинка выглядит зернистой. Это особенно заметно на больших пространствах — например, цвет фона. Учитывая, что посетители школьного сайта могут пользоваться 256-цветными мониторами, стоит использовать безопасную палитру, по крайней мере, для фона страницы. Последние версии графических и HTML-редакторов включают возможность выбора цвета из безопасной палитры.

5. Будьте осторожны в использовании графического фона.

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

Форматирование текста

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

Сформулируем основные принципы компоновки и форматирования текста:

1. Распределяйте длинный текст на несколько страниц

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

2. Разбивайте текст на фрагменты.

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

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

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

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

3. Используйте выравнивание текста

Начинающие дизайнеры часто увлекаются выравниванием по центру. На самом деле, это далеко не лучший прием: строчки разной длины создают ощущение неряшливости (как на странице с официальной информацией, приведенной выше). Даже для заголовков выравнивание по центру не всегда является лучшим вариантом. Посмотрите, например, как элегантно смотрится страница гимназии 157 Петербурга www.gym157.spb.ru/rus/index.htm: все заголовки выровнены по левому краю, текст выровнен по ширине. Небольшое меню в правом верхнем углу страницы, выровненное по правому краю, служит в качестве "уголка", обрамляющего текст, это создает ощущение завершенности. Попробуйте мысленно передвинуть заголовки и поместить картинку по центру — страница потеряет половину своего очарования.

4. Обратите внимание на заголовок

Заголовок важен для восприятия всей страницы. Для того чтобы заголовок смотрелся красиво, он должен РАЗИТЕЛЬНО отличаться от остального текста. Какой-то мудрец сказал: "Сходство обезьяны с человеком делает ее отвратительной". Если вы хотите выделить фрагмент текста, не делайте его шрифт немножко больше, чем шрифт основного текста: это будет восприниматься глазом как ошибка, случайное увеличение шрифта. Выберите для выделенного фрагмента строки совсем другой размер и начертание шрифта, тогда страница будет смотреться красиво.

Коротко о шрифтах

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

Единственное, что можно делать безбоязненно — это использовать какой-нибудь красивый шрифт в графическом элементе (заголовок, меню). Что касается текста, то самое простое решение для начинающего веб-дизайнера — не задавать название конкретного шрифта; в этом случае весь текст будет отображаться шрифтом, заданным по умолчанию в браузере пользователя — как правило, это какой-нибудь простой и удобный для чтения шрифт вроде Times New Roman.

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

Существует две основных разновидности шрифтов: шрифты с засечками (англ. serif ), и без засечек, или рубленые (англ. sans serif ). Шрифты с засечками удобны для длительного чтения (засечки "ведут" взгляд по строке, не позволяя ему сбиться), поэтому их обычно используют для основного текста страницы. Рубленые же шрифты лучше смотрятся в заголовках.

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

  • Задавайте общеупотребительные шрифты. Самый распространенный представитель шрифта с засечками - Times New Roman; рубленого шрифта — Arial; практически невероятно, чтобы их не оказалось у пользователя.
  • Если вы хотите выбрать не самый общеупотребительный шрифт, задайте несколько вариантов, например: Verdana, Tahoma, Arial. Все эти шрифты относятся к одной группе (рубленые). Если первых двух шрифтов у пользователя не окажется, то уж третий — Arial — будет наверняка.
  • Если все же необходимо написать фразу определенным шрифтом, — не мудрствуя лукаво, сделайте ее в виде картинки. Только не увлекайтесь: много картинок украсят вашу страницу, но сделают ее менее доступной для пользователей с медленной связью — см. следующий раздел.
Использование графики

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

Форматы графических файлов

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

  • GIF ( Graphic Interchange Format): осуществляет сжатие без потерь и сохраняет изображение в 256-цветной палитре. Применяется для хранения изображений, в которых участвуют плоскости ровного цвета, четкие линии и границы. Обычно это - искусственные изображения, созданные с помощью компьютера: логотипы, надписи, заголовки.
  • JPEG (от названия организации Joint Photographic Experts Group): сохраняет изображение с 16 миллионами цветов ( true color), достигает высокого уровня сжатия за счет потери качества изображения. Используется для хранения фотографических изображений с плавными полутонами, где снижение качества практически незаметно.
  • PNG ( Portable Network Graphics , читается "пинг") — был задуман как альтернатива формату GIF : также осуществляет сжатие без потерь, но при этом может хранить изображение как в 256-цветной палитре, так и true color с 16 миллионами цветов. Несмотря на преимущества, этот формат пока мало популярен, — в частности потому, что его поддерживают только самые последние версии основных браузеров.

Компьютерный рисунок в формате GIF и фотография в формате JPEG

Формат GIF обладает преимуществами по сравнение со JPEG: он поддерживает прозрачный фон и анимацию. Однако, при сохранении фотографии в формате GIF вам вряд ли удастся достичь приличного качества изображения (не говоря о хорошем): после урезания палитры до 256 цветов плавная игра светотени заменится на четко ограниченные площади близких по тону, но все-таки различных цветов. В то же время, если вы попытаетесь сохранить логотип с четкими и контрастными цветовыми границами в формате JPEG, то изображение будет выглядеть неряшливо: на нем появятся размытые области и рябь.

Забота о пользователе

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

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

  • При работе с форматом JPEG уменьшение размеров достигается с помощью уменьшения параметра "уровень качества" ( quality), определяющего степень сжатия. Как правило, чем более плавными и размытыми являются цветовые переходы, тем меньшим может быть этот параметр, то есть тем большей степени сжатия можно достичь при сохранении приемлемого качества.
  • При работе с форматом GIF размер изображения можно регулировать с помощью выбора палитры. Рисунок в формате GIF может иметь любое количество цветов от 2 до 256; например, для отображения однотонного текста на одноцветном фоне может хватить палитры из 8, а при небольших размерах — даже 4 цветов.

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

  • Создавайте уменьшенные изображения

Если картинка получается большого размера и урезать ее жалко, лучше поместить на странице уменьшенную копию, ссылка с которой будет вести на полномасштабное изображение. Для размещения нескольких картинок на странице можно сделать маленькие копии (иногда совсем крошечные "изображения величиной с ноготь" — thumbnails), с каждого из которых при щелчке мышкой вызывается крупная картинка — см. фотоальбом школы Ангарска http://school27.chat.ru/fvpmay.htm.

  • Не ленитесь писать альтернативный (alt) текст для каждой картинки.

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

  • Старайтесь перемежать картинки текстом

Текст передается по сети гораздо быстрее графики, поэтому нежелательно делать страницу из одних картинок: пока грузится графический файл, пользователь может почитать текст. Чтобы текст удобно было читать во время загрузки изображения, всегда задавайте ширину и высоту изображения (атрибуты width и height тега IMG): в этом случае браузер в начале загрузки страницы резервирует место для картинки, и текст сразу отображается на отведенном для него участке.

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

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

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

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

Вернуться к началу текущей статьи