Разделы веб-страницы


Содержание

Структура веб-страницы

Веб-страница — гипермедиа документ

Тема 8. Создание Web-страниц (в формате HTML).

WWW состоит из множества взаимосвязанных документов — веб-страниц. Связь осуществляется при помощи гиперссылок (или короче — ссылок). При наведении курсора мыши на ссылку, он принимает вид “выбор ссылки” (указующий перст) и в строке состояния Internet Explorer отображается URL документа, к которому будет произведен переход. Щелчок мыши по ссылке активизирует ее, то есть происходит переход по этому адресу.

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

Веб-страницы представляют собой файлы, которые создаются с использованием языка HTML (Hyper Text Markup Language -язык гипертекстовой разметки документов) и имеют одноименный формат — HTML. Документ формата HTML может содержать помимо текста, графики и ссылок еще и мультимедийные объекты: анимацию, видео, звук, то есть он строится на основе технологии гипермедиа.

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

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

Гипертекст — это способ структурирования документов путем размещения ссылок внутри одного документа или между документами.

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

Для создания веб-страниц используется гипертекстовый язык описания документов — HTML (Hyper Text Markup Language).

Это язык программирования, имеющий свой набор команд.

Каждый веб-документ представляет собой программу, написанную на этом языке (HTML-код).

Команды HTML называются тегами(от англ. tag — ярлык, метка). Чтобы отличить теги от текста документа их заключают в угловые скобки. Например, тег
означает команду “начало новой строки”. Теги могут быть как одиночными, так и парными. Одинарные задают действие на один раз. Парные теги указывают начало иокончание действия команды. Тег, указывающий на окончание, помечается символом слеш (/).

Структура веб-страницы задается следующими парными тегами:

· Пара и указывает формат страницы и отмечает его границы

· Пара и указывает на начало и конец заголовка. Включают описание документа, ключевые слова (keywords) для поиска, название документа идругую информацию идентифицирующую страницу.

· Пара и указывает имя страницы.

Веб-страница

Что такое web страница ? Это документ, написанный на языке разметки гипертекста ( HTML ), который можно просмотреть с помощью браузера. Доступ к веб-странице осуществляется путем ввода URL-адреса .

Веб-страница может содержать текст, графику и гиперссылки на другие страницы и файлы.

Как открыть веб-страницу

Для просмотра веб-страницы требуется браузер ( например, Internet Explorer , Edge , Safari , Firefox или Chrome ). В браузере можно открыть веб-страницу, указав в адресной строке URL-адрес . Например, введя « https://www.computerhope.com/esd.htm », вы откроете страницу ESD Computer Hope .

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

Когда была создана первая веб-страница?

Первая веб-страница была создана в CERN Тимом Бернерсом-Ли 6 августа 1991 года. Перед тем, как создать web страницу, вы можете посетить и просмотреть первый сайт и первую веб-страницу по адресу http://info.cern.ch/ .

В чем разница между сайтом и веб-страницей?

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

В приведенном выше примере URL-адреса «url.htm» — веб-страница, это всегда последняя часть URL-адреса . Для URL , которые не имеют окончаний .htm , .html , .php , .cgi , .pl или другого расширения файла, сервер загружает веб-страницу index.htm по умолчанию. Например, для URL-адреса страницы контактов нет веб-страницы. В этом случае загружается индексный файл по умолчанию из каталога / contact .

Примеры веб-страницы

Мы уже упоминали, что для просмотра web страниц используются браузеры. Веб-страница состоит из нескольких элементов, включая CSS , изображения и JavaScript . Тело веб-страницы создается с использованием HTML . Этот код может быть создан с использованием HTML-редактора, написан человеком или сгенерирован с использованием серверных скриптов. Обычно веб-страница, созданная человеком, заканчивается расширением .htm или .html . Например, эта страница имеет имя файла « webpage.htm ». Страницы, сгенерированные скриптом, могут заканчиваться на .cgi , .php , .pl и т.д.

Какие элементы содержит веб-страница?

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

  1. Название сайта, логотип или название компании почти всегда находятся в верхнем левом углу каждой веб-страницы. Также неплохо использовать слоган или краткое описание страницы, чтобы дать новым посетителям представление о сайте. Этот элемент веб-страницы обычно является ссылкой, которая ведет на главную страницу;
  2. Панель поиска позволяет посетителям быстро найти веб-страницу. Она должна присутствовать на каждой странице;
  3. Панель или меню навигации обычно находится в верхней или левой части каждой веб-страницы. Она и должна включать в себя ссылки на каждый из основных разделов сайта;
  4. Рекламные баннеры могут отображаться в разных местах на веб-странице. Обычно они отображаются в верхней, левой, правой или нижней части веб-страницы или включены в основной контент;
  5. Социальные кнопки позволяют посетителям делиться ссылкой на веб-страницу на сайтах социальных сетей;
  6. В созданных web страницах хлебные крошки помогают посетителю понять, где он находится, а также перейти к другим разделам сайта;
  7. Заголовок должен находиться в верхней части каждой веб-страницы. Он создается с использованием HTML-тега

.
  • Начальный абзац является одним из наиболее важных элементов веб-страницы. Он должен заинтересовать посетителя ознакомиться с содержимым веб-страницы. Один из способов привлечь внимание посетителей — вставить изображение рядом с начальным абзацем;
  • Каждая веб-страница должна быть разбита на заголовки более низкого уровня, которые позволяют посетителю легко просматривать контент и находить на странице то, что ему наиболее интересно. При создании веб-страницы это можно сделать с помощью HTML-тегов
  • ;
  • Хорошая идея — предоставить посетителям ссылку или кнопку, перенаправляющую на форму обратной связи, чтобы они могли сообщить, была ли полезна им данная веб-страница или нет;
  • Дополнительная информация и инструменты, такие как кнопка для вывода страницы на печать, также могут быть полезны для пользователей;
  • Футер должен включать в себя дополнительную информацию, которая важна для компании или сайта. А также ссылки на другие веб-страницы;
  • Копирайт и любое юридическое или конфиденциальное уведомление также должны быть размещены на всех веб-страницах. В основах проектирования web страниц этот элемент не только может ссылаться на соответствующую юридическую информацию. Он также указывает, что посетители достигли конца веб-страницы;
  • Кнопка « Вверх страницы » может помочь посетителям быстро вернуться к верхней части веб-страницы, чтобы получить доступ к ссылкам меню.
  • Что пользователи могут сделать на веб-странице?

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

    Данная публикация представляет собой перевод статьи « Web page » , подготовленной дружной командой проекта Интернет-технологии.ру

    Структура страницы сайта

    Приветствую вас, уважаемые читатели ��

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

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

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


    Структура страницы сайта — терминология

    Для начала, как и при рассмотре основ создания сайтов, давайте разберёмся с терминами.

    Структура веб-ресурса представляет собой его план. В свою очередь, она разделяется на внутреннюю и внешнюю.

    Внутренняя структура сайта определяет, из каких страниц будет состоять веб-проект и порядок их вложенности (категория-подкатегория-сущность).

    В то время как внешняя структура сайта предусматривает вид отдельных страниц в зависимости от размещаемой на них информации. То есть внешняя структура – это как раз и есть структура страницы сайта.

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

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

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

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

    Даже если вы решили заказать сайт и читаете эти строки только в целях самообразования — ваше время не будет потрачено зря ��

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

    А это кстати, немаловажно, т.к. благодаря чёткой постановке задачи можно сэкономить не только на времени, но и на стоимости дизайна страницы сайта, которая колеблется в пределах от 50 до 500$.

    Необходимость разработки структуры страницы сайта

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

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

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

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

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

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

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

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

    Структура страницы сайта – это что?

    Что касается требований к внешней структуре сайтов, то, как уже говорилось ранее, она должна быть едина. Т.е. все структурные элементы должны соответствовать единому шаблону.

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

    В качестве наглядного примера мы возьмём OZON.ru, крупнейший сетевой торговый ресурс России, сайт которого является ярким представителем семейства Интернет-магазинов.

    Структура страницы сайта у OZON.ru соответствует критерию единости. Именно поэтому мы не будем рассматривать каждую из них отдельно.

    Возьмём для образца первое, что видит пользователь при переходе на любой ресурс – структуру главной страницы сайта. С дизайном внутренних страниц сайта мы познакомимся при обзоре внутренней структуры страниц сайтов различных типов в будущих публикациях.

    На OZON.ru она имеет разный вид (различный контент) в зависимости от того, произведён ли вход пользователя на сайт или нет. Поэтому для просмотра полного содержимого настоятельно рекомендую зарегистрироваться.

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

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

    Прошу прощения за маленькое лирическое отступление ��

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

    Условно её можно разделить на следующие блоки.

    1. Шапка или хедер (область вверху)

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

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

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

    Помимо всего перечисленного здесь также размещается поиск по сайту.

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

    2. Подвал или футер (область внизу)

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

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

    На OZON.ru разработчики решили разместить в футере ещё и ссылки на сообщества в социальных сетях, которые в обязательном порядке должны присутствовать для привлечения новых посетителей.

    Располагать их так же лучше в фиксированном месте. Именно поэтому на большинстве ресурсов они расположены в футере или хедере.

    Помимо этого здесь также часто расположены ссылки на сайты партнёров, информация о годе основания ресурса с контактами его разработчиков и баннеры статистики (например, LiveInternet, HotLog, Яндекс.Метрика и др.)

    3. Зона контента (информация, расположенная между хедером и футером)

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

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

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

    Разработчики OZON.ru вновь продемонстрировали оригинальный подход при разработке дизайна данного блока сайта.

    Он заключается в размещении левого сайдбара, блока с промо-акциями и правого сайдбара в лестничном порядке.


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

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

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

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

    Кстати, такой вариант дизайна страниц сайта является проверенным временем и универсальным.

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

    Иногда создатели веб-ресурсов наполняют сайдбары различным контентом, в зависимости от содержимого. Ярким подтверждением тому являются Интернет-магазины и, в частности, OZON.ru.

    На странице со смартфонами в левом сайдбаре (рисунок вверху) выводятся параметры, характерные для этой категории (версия операционной системы, количество SIM-карт, типы беспроводных подключений и т.д.)

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

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

    На этом наша статья, в которой нами была рассмотрена структура страницы сайта, объявляется закрытой ��

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

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

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

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

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

    Жду ваших содержательных комментариев по поводу что понравилось/не понравилось и какую информацию вы бы ещё хотели увидеть на страницах данного блога.

    Обещаю, что ваше мнение не останется незамеченным.

    Следите за обновлениями! До встречи ��

    P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.

    Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.

    Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email cccpblogcom@gmail.com.

    И с друзьями не забудьте поделиться ��

    Элементы web-страницы

    Читайте также:

    1. Банковская система и ее элементы. Основные принципы банковской системы. Банковские операции и банковская деятельность
    2. Бетонные отопительные панели могут иметь обетонированные нагревательные элементы змеевиковой или регистровой формы из стальных труб диаметром 15 и 20мм.
    3. Биогенные элементы
    4. Браузер Internet Explorer. Последовательность открытия Web-страницы в Internet Explorer.
    5. Бухгалтерский баланс предприятия: понятие, основные элементы.
    6. В противном случае конструктор обязан оговорить абсолютно все допуски на абсолютно все элементы (включая, например, допуски на углы фасок).
    7. Вакуумные системы доильных установок и элементы их расчета.
    8. Вакуумные системы доильных установок и элементы их расчета.
    9. Вопрос 17. Сущность заработной платы, принципы и элементы ее организации
    10. Вопрос 19. Тарифная система оплаты труда: сущность, элементы, область применения
    11. Вопрос 2. Элементы и признаки внешнего облика человека, их понятие и система.
    12. Геометрические элементы стрелочного перевода

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

    · изменение имиджа и поднятие престижа компании;

    · продвижение торговой марки;

    · доступность информации о продукции и ценах для клиентов;

    · поддержка дилерской сети, доступность информации о продукции и ценах для дилеров;

    · прямая продажа продукции в Internet, организация Web-магазина;

    · доступность внутренней информации для сотрудников, работающих вне офиса.

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

    И последний вариант — когда вы считаете необходимым разместить в Internet свою личную страницу.

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

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

    Типичная структура Web-узла фирмы обычно представлена так:

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

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

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

    Новости. Проинформируйте клиентов о новых товарах и услугах, предоставляемых фирмой, опубликуйте пресс-релизы и т.п.

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

    При наполнении Web-узла всегда нужно помнить два принципа: уникальность и достоверность публикуемых материалов.

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

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

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

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

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

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

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


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

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

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

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

    Часто возникает вопрос о размерах документа: какое число страниц является оптимальным? Ответ на первый взгляд может показаться странным: одна экранная страница или вообще никаких ограничений. Многочисленные исследования показали, что пользователи не любят работать с полосами прокрутки браузеров. Больше всего им нравятся документы, которые размещаются на одной экранной странице. Так и в WWW — вы никоим образом не сможете дать пользователю больше информации, чем в концентрированном изложении на одной странице. Если все-таки вы не укладываетесь в эти рамки, создайте еще один документ.

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

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

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

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

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

    На что следует обратить внимание при выборе провайдера, размещающего ваш Web-узел на своем сервере?

    Пропускная способность каналов. Чтобы вашим посетителям не пришлось слишком долго ждать загрузки страниц, провайдер должен обладать надежным высокоскоростным соединением порядка 1-2 Мбит в секунду.

    Поддержка сервером провайдера SSI (Server Side Includes, вставки на стороне сервера). Использование SSI позволяет Web-серверу вставлять небольшие объемы динамических данных непосредственно в пересылаемый пользователю HTML-документ. Запрошенная HTML-страница «просматривается» в поисках элементов SSI. Обнаружив такой элемент, сервер вставляет требуемую динамическую информацию. С помощью SSI можно включать один файл в состав другого, исполнять CGI-сценарии и передавать другую информацию. Необходимо уточнить, какие именно функции SSI поддерживаются на сервере провайдера.

    Поддержка сервером провайдера CGI-сценариев. CGI (Common Gateway Interface, общий шлюзовой интерфейс) — спецификация, позволяющая Web-серверу выполнять произвольные прикладные программы. В результате работы таких программ (сценариев, или «скриптов») создаются HTML-документы. С помощью CGI-сценариев могут приниматься данные от пользователя, они позволяют организовать диалог на Web-страницах, запросы к базам данных и т.д. Создать CGI-сценарий можно с помощью любого популярного языка программирования: Perl, Basic, C, C++, Pascal и т.п.

    Поддержка моментальной перекодировки. К сожалению, для русского языка в Internet при работе на разных платформах (Windows, Mac, Unix и т.д.) приняты различные кодировки. Чтобы пользователю было легко просматривать страницы, Web-сервер провайдера должен уметь автоматически перекодировать документы в зависимости от поступившего запроса. В противном случае либо содержание вашего Web-узла для некоторых посетителей будет нечитаемым, либо придется обеспечивать несколько копий Web-узла — по одной на каждую поддерживаемую кодировку.

    Способ обновления страниц. Обычно страницы обновляются по протоколу FTP (File Transfer Protocol, протокол передачи файлов). Некоторые FTP-клиенты позволяют работать с файлами на компьютере провайдера так же, как с собственным диском, — копировать, удалять, переименовывать и т.п.

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

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

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

    Первым элементом web-страницы, который нам предстоит рассмотреть, является ее заголовок. Он может быть выполнен как в текстовом, так и в графическом варианте, однако и в том и в другом случае он должен располагаться в верхней части документа. Иногда с заголовком совмещают меню выбора кодировки кириллицы и кнопки для перехода с русскоязычной на англоязычную версию сай- та, если данный web-ресурс представлен на двух языках. Непосредственно подзаголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера именно в верхнюю часть web-страницы в большинстве случаев является обязательным условием регистрации сайта в службах баннерного обмена — системах, рекламирующих созданный вами ресурс в обмен на показ на страницах вашего сайта рекламы других участников баннерообменной сети. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468×60 точек. Если вы используете статический принцип компоновки страницы, ширина заголовка вашего документа будет составлять приблизительно 640 пикселов: это значение обусловлено, прежде всего, необходимостью обеспечить корректное отображение документа на мониторах с экранным разрешением 640×480 точек и избежать появления горизонтально полосы прокрутки, затрудняющей его просмотр. Очевидно, что ширина баннера в этом случае будет значительно меньше ширины заголовка, благодаря чему в той части страницы, где вы планируете отвести место под рекламу, образуется незанятое пространство, которое можно заполнить логотипом компании-владельца данного сайта или ссылкой на сервер, осуществляющий web-хостинг. Разумеется, логотип необходим далеко не всегда: как правило, он включается в состав web-страницы лишь в случае, если сайт имеет коммерческую направленность.

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

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

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

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

    Рис. 5. Пример компоновки web-страницы с левым позиционированием элементов навигации

    На практике часто встречаются web-сайты, в дизайне которых элементы навигации позиционированы по правой границе экрана. В этом случае текстовое поле смещается налево, остальные компоненты документа располагаются, исходя из принципа максимальной эстетичности их сочетания. Пример такого исполнения сайта показан на рис. 6.

    Рис. 6. Пример компоновки web-страницы с правым позиционированием элементов навигации

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

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

    Рис. 7. Пример компоновки web-страницы с верхним позиционированием элементов навигации

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

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

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

    Рис. 8. Пример «смешанной» компоновки web-страницы

    РАЗДЕЛЫ САЙТА

    ГЛАВНАЯ СТРАНИЦА: Страничка, которая открывается сразу, после того, как пользователь вводит адрес сайта в строке состояния.

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

    ГОСТЕВАЯ КНИГА: Возможность для любого пользователя оставить свой комментарий на выделенной для этого страничке без регистрации. Комментарии не разделяются по темам и идут друг за другом по мере появления.

    ФОРУМ: Сложная система общения и обменивания информацией, имеющая несколько уровней доступа и настройки пользователей. Каждый пользователь имеет свой собственный аккаунт, имеются администраторы, модераторы и суперадминистраторы. Все темы чётко разделены на разделы, у каждого из них может быть свой администратор. Часто, один только Форум может представлять из себя сайт полностью и должен быть установлен на мощный сервер, выдерживающий нагрузку одновременного доступа многих пользователей.

    | следующая лекция ==>
    Динамическая компоновка страницы | Инструментальные средства Web-дизайна

    Дата добавления: 2014-01-04 ; Просмотров: 2291 ; Нарушение авторских прав? ;

    Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

    Из чего состоит сайт, или основные структурные блоки сайта

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

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

    1 Шапка для сайта

    Самый верхний блок часто называют шапкой сайта, либо заголовок сайта, либо хедер от англ. header. Место, в котором обычно располагается хедер – верхняя часть страницы. Ориентация хедера – альбомная.

    Как правило, в данном блоке размещается


    • название сайта,
    • логотип,
    • а также главное или второстепенное меню. Рис. 1 Структура интернет сайта

    Меню сайта на рис. 1 выделено красной полоской. В меню сайта обычно входит:

    • Кнопка «Главная» (англ. «Home») Кликнув по этой кнопке, всегда можно вернуться на главную страницу на любом сайте.
    • «Карта сайта» Щелкнув по этой кнопке, можно посмотреть содержание всего сайта, всех рубрик и всех статей в рубриках.
    • «О себе» – здесь обычно автор сайта пишет немного о себе.
    • «Услуги» – если есть услуги, то здесь приводится их список и пояснения.
    • «Контакты» – приводится форма для отправки сообщения администратору сайта, либо написан e-mail для связи, либо номер телефона, при необходимости может быть карта проезда в офис.
    • И т.п.

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

    6,0,1,0,0

    2 Основная область сайта (область основного контента)

    Что такое контент сайта? Контент происходит от английского «content» – содержание.

    Зачастую это самая большая по площади и наиболее важная для посетителей сайта часть страницы.

    По названию не трудно догадаться, что в данном блоке размещается

    • весь текстовый,
    • графический,
    • аудио и
    • видеоконтент сайта.

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

    Также довольно часто в этой области размещают рекламу:

    • контекстную,
    • баннерную,
    • тизерную,
    • простую ссылочную.

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

    Ширина области основного контента может варьироваться в довольно широких пределах – тут все зависит от типа макета сайта (жесткий или резиновый). Резиновый макет позволяет менять ширину блока в зависимости от разрешения монитора, с которого пользователь просматривает сайт. Жесткий макет этого сделать не позволяет.

    13,1,0,0,0

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

    3 Сайдбар

    Что такое сайдбар на сайте? Понятие «сайдбар» происходит от английского термина “sidebar”, где “side” — сторона, “bar” — полоса. Обычно сайдбаром называют боковую колонку сайта, которая размещается справа или слева от области основного контента. В некоторых случаях на сайте могут располагаться сразу два сайдбара (первый – слева от основной области, а второй – справа).

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

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

    Ширина сайдбара, как правило, четко фиксирована и не зависит от типа макета сайта.

    4 Футер сайта (или подвал)

    Слово «Футер» (или подвал) произошло от англ. «Footer». Обычно футером называют область сайта, которая расположена в самом низу (под всеми остальными блоками). По аналогии с хедером (шапкой сайта), футер также имеет альбомную ориентацию, то есть, он продольно вытянут. Ширина футера также может меняться в зависимости от разрешения монитора пользователя (конечно, если макет является резиновым).

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

    5 Фон сайта (фоновая область)

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

    20,0,0,1,0

    Чем больше будет разрешение, тем больше места будет занимать фон для сайта. Фоновая область может заполняться определенным цветом (посредством CSS-атрибута background-color), а также одной большой или несколькими маленькими симметричными изображениями (которые будут равномерно заполнять собой все свободное пространство).

    P.S. Интернет-грамотность по сайтам:

    27,0,0,0,1

    Основные элементы веб-страницы сайта.

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

    Я думаю, что именно с этой точки зрения следует смотреть на доступные нам в Интернете «строительные кирпичики». Они не ограничивают ваш творческий потенциал; это всего лишь компоненты, из которых создаются сайты.


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

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

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

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

    С шапкой обычно связаны следующие вещи:

    Top-Line Branding. Здесь, как правило, располагаются сведения об основной торговой марке. В этой области часто помещается суббренд или строка тегов. Логотип чаще всего занимает верхний левый угол, но это не обязательное правило, а лишь распространенный эталон, к которому привыкло большинство пользователей.

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

    Вспомогательная система навигации. Сайты часто имеют отдельную вторичную систему навигации, в которую входят элементы, не являющиеся ключевыми для процесса продаж. Сюда часто попадают такие разделы, как About Us (о компании) и Contact Us (контакты).

    Поиск. Поле поиска чаще всего располагается в шапке. Это вполне логично, ведь именно здесь находится основная система навигации.

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

    Навигация/Меню. Хотя я упомянул о системе навигации при перечислении элементов шапки, это вполне самостоятельный компонент. Существует три основные системы навигации на основе меню. Все остальные варианты в той или иной мере являются их побочным продуктом.

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

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

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

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

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

    Нижний колонтитул. Нижние колонтитулы (footers) обычно относятся к одной из двух категорий. Это могут быть как функциональные навигационные инструменты, направляющие пользователя к дополнительному контенту, так и место для той информации, которая обязана присутствовать на сайте, но которую никто не хочет видеть. Но даже в первом случае вы все равно рано или поздно обнаружите, что часть нижнего колонтитула будет содержать информационный «мусор». Впрочем, беспокоиться тут не о чем; подобно номерному знаку на автомобиле, это важный элемент, с которым нам просто нужно научиться работать.

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

    Распространенные элементы нижних колонтитулов. В нижний колонтитул часто помещают:

    – Сведения об авторских правах и ссылки на правовую информацию, например политику конфиденциальности.

    – Копию основной системы навигации сайта.

    – Полную или частичную карту сайта.

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

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

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

    Использование разделов и создание структуры HTML документа

    На этой странице

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

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

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

    Структура документа, т. е. семантическая структура контента, заключенного в теги и

    Структура страницы сайта

    Приветствую вас, уважаемые читатели ��

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

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

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

    Структура страницы сайта — терминология

    Для начала, как и при рассмотре основ создания сайтов, давайте разберёмся с терминами.

    Структура веб-ресурса представляет собой его план. В свою очередь, она разделяется на внутреннюю и внешнюю.

    Внутренняя структура сайта определяет, из каких страниц будет состоять веб-проект и порядок их вложенности (категория-подкатегория-сущность).

    В то время как внешняя структура сайта предусматривает вид отдельных страниц в зависимости от размещаемой на них информации. То есть внешняя структура – это как раз и есть структура страницы сайта.

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

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

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

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

    Даже если вы решили заказать сайт и читаете эти строки только в целях самообразования — ваше время не будет потрачено зря ��

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

    А это кстати, немаловажно, т.к. благодаря чёткой постановке задачи можно сэкономить не только на времени, но и на стоимости дизайна страницы сайта, которая колеблется в пределах от 50 до 500$.

    Необходимость разработки структуры страницы сайта

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

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


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

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

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

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

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

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

    Структура страницы сайта – это что?

    Что касается требований к внешней структуре сайтов, то, как уже говорилось ранее, она должна быть едина. Т.е. все структурные элементы должны соответствовать единому шаблону.

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

    В качестве наглядного примера мы возьмём OZON.ru, крупнейший сетевой торговый ресурс России, сайт которого является ярким представителем семейства Интернет-магазинов.

    Структура страницы сайта у OZON.ru соответствует критерию единости. Именно поэтому мы не будем рассматривать каждую из них отдельно.

    Возьмём для образца первое, что видит пользователь при переходе на любой ресурс – структуру главной страницы сайта. С дизайном внутренних страниц сайта мы познакомимся при обзоре внутренней структуры страниц сайтов различных типов в будущих публикациях.

    На OZON.ru она имеет разный вид (различный контент) в зависимости от того, произведён ли вход пользователя на сайт или нет. Поэтому для просмотра полного содержимого настоятельно рекомендую зарегистрироваться.

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

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

    Прошу прощения за маленькое лирическое отступление ��

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

    Условно её можно разделить на следующие блоки.

    1. Шапка или хедер (область вверху)

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

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

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

    Помимо всего перечисленного здесь также размещается поиск по сайту.

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

    2. Подвал или футер (область внизу)

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

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

    На OZON.ru разработчики решили разместить в футере ещё и ссылки на сообщества в социальных сетях, которые в обязательном порядке должны присутствовать для привлечения новых посетителей.

    Располагать их так же лучше в фиксированном месте. Именно поэтому на большинстве ресурсов они расположены в футере или хедере.

    Помимо этого здесь также часто расположены ссылки на сайты партнёров, информация о годе основания ресурса с контактами его разработчиков и баннеры статистики (например, LiveInternet, HotLog, Яндекс.Метрика и др.)

    3. Зона контента (информация, расположенная между хедером и футером)

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

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

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

    Разработчики OZON.ru вновь продемонстрировали оригинальный подход при разработке дизайна данного блока сайта.

    Он заключается в размещении левого сайдбара, блока с промо-акциями и правого сайдбара в лестничном порядке.

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

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

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

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

    Кстати, такой вариант дизайна страниц сайта является проверенным временем и универсальным.

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

    Иногда создатели веб-ресурсов наполняют сайдбары различным контентом, в зависимости от содержимого. Ярким подтверждением тому являются Интернет-магазины и, в частности, OZON.ru.

    На странице со смартфонами в левом сайдбаре (рисунок вверху) выводятся параметры, характерные для этой категории (версия операционной системы, количество SIM-карт, типы беспроводных подключений и т.д.)

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

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

    На этом наша статья, в которой нами была рассмотрена структура страницы сайта, объявляется закрытой ��

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

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

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

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


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

    Жду ваших содержательных комментариев по поводу что понравилось/не понравилось и какую информацию вы бы ещё хотели увидеть на страницах данного блога.

    Обещаю, что ваше мнение не останется незамеченным.

    Следите за обновлениями! До встречи ��

    P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.

    Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.

    Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email cccpblogcom@gmail.com.

    И с друзьями не забудьте поделиться ��

    Базовые страницы ASP.NET Web Parts

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

    Ниже перечислены основные шаги по созданию страницы веб-частей:

    Создайте в Visual Studio простую страницу ASP.NET обычным образом. Какой-то специальный тип страниц не понадобится — это должна быть просто страница .aspx, подобная любой другой. Прежде чем продолжить, можно структурировать компоновку страницы, используя таблицы HTML, чтобы создать, например, страницу с областью навигации, главной областью и боковой панелью для дополнительной информации (подобно странице MSN, показанной в предыдущей статье). Эта страница может быть мастер-страницей для обеспечения согласованного внешнего вида во всех страницах.

    Добавление элемента управления WebPartManager.

    Далее добавьте на страницу элемент управления WebPartManager. Он доступен в панели инструментов Web Parts среды Visual Studio, когда открыт визуальный конструктор страниц ASP.NET. Это невидимый элемент управления, который осведомлен обо всех доступных веб-частях на странице и управляет персонализацией. WebPartManager должен быть первым элементом управления, создаваемым на странице веб-частей, поскольку от него зависят все остальные элементы управления, имеющие отношение к веб-частям.

    Добавление элементов управления WebPartZone.

    Каждый раздел на странице, который должен отображать специальные веб-части, инкапсулируется в экземпляр элемента управления WebPartZone. Добавьте элемент WebPartZone в каждый раздел страницы, который должен содержать веб-части и должен быть настраиваемым.

    Можно применять простые пользовательские элементы управления, готовые пользовательские элементы управления, специальные серверные элементы управления либо элементы управления, унаследованные непосредственно от класса WebPart. Все эти элементы можно поместить в зону веб-части с помощью визуального конструктора Visual Studio, написав код дескрипторов вручную либо написав специальный код. Все остальное инфраструктура ASP.NET сделает автоматически.

    Добавление предварительно построенных зон и частей.

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

    После завершения всех этих шагов страница веб-частей готова к использованию. Чтобы платформа могла сохранять персонализованную информацию для каждого пользователя отдельно, в приложении должна быть включена аутентификация (либо с помощью форм, либо Windows). По умолчанию эта информация хранится в файловой базе данных ASPNETDB.MDF, которая автоматически создается в каталоге App_Data, если установлена версия SQL Server Express. В противном случае понадобится создать базу данных в полной версии SQL Server с помощью утилиты aspnet_regsql.exe, информация о персонализации сохраняется в той же базе данных, что и информация о пользователях.

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

    Разработка дизайна страницы

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

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

    Компоновка страницы показана на рисунке ниже:

    Элементы управления WebPartManager и WebPartZones

    После определения дизайна веб-страницы можно приступать к добавлению первых элементов управления — веб-частей. Эти элементы собраны в разделе Web Parts панели инструментов Visual Studio. В данном примере первым элементом, добавленным в верхнюю часть страницы, будет WebPartManager. Элемент WebPartManager работает со всеми добавленными н веб-странице зонами и знает обо всех доступных веб-частях страницы. Он управляет персонализацией и обеспечивает настройку веб-страницы для текущего зарегистрированного пользователя. В следующем фрагменте кода показана модифицированная часть кода страницы:

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

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

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

    Добавление веб-частей на страницу

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

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

    В предыдущем примере показана зона веб-частей (WebPartZone), которая была добавлена ранее для правого раздела страницы. Эта зона теперь содержит два элемента управления: стандартный элемент управления Calendar и элемент управления FileUpload. На рисунке ниже можно видеть страницу в визуальном конструкторе Visual Studio после добавления этого шаблона зоны:

    Можно создать один или более пользовательских элементов управления и добавить их к одной из зон веб-частей. Например, добавьте новый пользовательский элемент управления к решению (Website Add New Item Web User Control), откройте тестовую базу данных Northwind в проводнике Server Explorer и перетащите таблицу Customer из Server Explorer на элемент управления ASP.NET. Визуальный конструктор автоматически создает источник данных, а также элемент управления GridView, отображающий данные. (Не включайте автоматическое форматирование GridView; это произойдет автоматически позже, на основе элементов управления WebPartZone.)

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

    В конце можно добавить особую веб-часть к ранее добавленному элементу управления CatalogZone. Поскольку эта зона служит для отображения каталогов веб-частей, в нее можно помещать только особые элементы управления, такие как PageCatalogPart. Особые элементы управления добавляются точно так же, как и обычные элементы управления WebPartZone — через ZoneTemplate:

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

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

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

    Поскольку метод аутентификации пока еще не конфигурировался, по умолчанию приложение использует аутентификацию Windows. Таким образом, можно настроить страницу веб-частей в отношении сворачивания и закрытия отдельных частей. Без каких-либо дополнительных усилий то же касается и аутентификации с помощью форм (как с использованием API-интерфейса Membership, так и без него). Пока что нет возможности перемещать веб-части из одной зоны в другую. Чтобы сделать это, необходимо переключиться в специальный режим страницы, о котором речь пойдет в следующем разделе. Когда вы закрываете браузер и запускаете другой его сеанс, страница появляется в той же компоновке, в которой она была оставлена. Это объясняется тем, что WebPartManager сохраняет изменения в хранилище персонализации.

    Опять-таки, по умолчанию эти настройки сохраняются в базе данных ASPNETDB.MDF для SQL Server Express, которая находится в каталоге App_Data, если параметры конфигурации не изменились. Такое поведение по умолчанию можно поменять, создав базу данных на сервере по своему выбору с помощью утилиты aspnet_regsql.exe, (Этот инструмент работает только с SQL Server; для других баз данных потребуется создать собственный поставщик.) Сконфигурировать поставщика с этой базой данных можно следующим образом:

    В раздел конфигурационного файла понадобится добавить строну соединения (в рассматриваемом примере — «aspnetdb»), которая должна указывать на базу данных, созданную aspnet_regsql.exe.

    Настройка страницы

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

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

    Режимы отображения DisplayMode страницы веб-частей

    Режим по умолчанию; используется для отображения содержимого страницы веб-частей

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


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

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

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

    Теперь добавим в первую строку таблицы компоновки элемент управления Menu, как показано ниже:

    Затем внутри страницы можно написать код, который наполняет меню доступными режимами отображения для WebPartManager. Для этого необходимо выполнить итерацию по свойству DisplayModes, которое представляет собой коллекцию элементов WebPartDisplayMode, и проверить, включен ли каждый из режимов. Это необходимо, потому что определенные режимы доступны только при включенной персонализации. Если же персонализация отключена, а режим требует ее включения, это свойство возвращает false, и такой режим отображения использовать нельзя.

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

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

    Теперь, когда пользователь выберет в меню режим Catalog, зона CatalogZone с веб-частью PageCatalogPart станет видимой, и к странице снова можно будет добавлять ранее закрытые веб-части:

    Настройка страницы посредством перетаскивания использует специальные средства DHTML браузера Internet Explorer и потому работает только в этом браузере. Все прочие средства, такие как добавление персонализации, сворачивание и разворачивание окон, а также добавление веб-частей из каталога в определенные зоны, работают с любыми другими браузерами.

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

    Разделы веб-страницы

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

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

    Главная страница сайта

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

    • На главной странице не должно быть кнопки “На главную”, так как не очень-то приятно нажимать на кнопку для того, чтобы попасть на ту же самую страницу.
    • На главной странице обычно представлен более крупный логотип компании, ее название и название сайта.

    Первая непосредственная цель любой главной страницы ответить на вопросы: “Где я нахожусь?” и “Что делает этот сайт?”
    Оба они требуют прямого указания полного имени. Лучше, если и по дизайну будет понятно, какой цели может служить этот сайт для нового пользователя. Для нового пользователя, вероятно, самая важная функция первой страницы это ответ на вопрос “Что же этот сайт делает?”, а для большинства остальных первая страница отправная точка для навигации по сайту.
    Первая страница это также место для представления новостей или специальных предложений, которыми вы хотите привлечь внимание всех посетителей.
    Возможность поиска необходима на первых страницах, так как многие пользователи не хотят бесконечно ходить по ссылкам, чтобы попасть туда, куда им нужно.
    Итак, главная страница должна предоставлять три следующие возможности:

    • каталог основных содержательных разделов сайта (возможность навигации),
    • краткую сводку основных новостей или специальных предложений,
    • возможность поиска.

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

    Элементы web-страницы

    Основные элементы web-страницы

    1. Заголовок/Логотип (Шапка)
    2. Поиск
    3. Рекламный Баннер
    4. Контент /Содержание (Текстовое поле)
    5. Элементы навигации
    6. Информация о разработчиках сайта
    7. Счетчик посещаемости

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

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

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

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

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

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

    Основную часть документа занимает так называемое Текстовое поле — участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации.
    Перечисленные элементы еще называют «Контент» (от англ, content — Содержание).
    Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа.

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

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

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

    Итак, мы разобрали все основные компоненты web-страницы. Пример компоновки сайта, содержащего набор описанных выше составляющих, показан на Рис. 1 и Рис. 2

    Рис. 1
    Пример компоновки web-страницы с левым позиционированием элементов навигации

    Рис. 2
    Пример компоновки web-страницы с правым позиционированием элементов навигации

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

    Режим Описание
    BrowseDisplayMode
    DesignDisplayMode
    CatalogDisplayMode
    ConnectDisplayMode
    EditDisplayMode
    Рис. 3
    Пример компоновки web-страницы с верхним позиционированием элементов навигации
    Рис. 4
    Пример «смешанной» компоновки web-страницы

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

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

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

    Поэтому перед тем как приступить к созданию своего сайта очень ответственно подойдите к проблеме компоновки элементов страниц.

    В общем случае веб-страница делится на контент страницы, навигацию и сопутствующую информацию. Эти элементы в свою очередь делятся на более мелкие элементы.

    Логическая и физическая структура сайта

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

    ПРИМЕЧАНИЕ!

    Такое имя файла рекомендуется присваивать всем стартовым документам сайта, поскольку в противном случае при обращении к какому-либо разделу посредством сокращенного URL без указания названия стартовой страницы (например, http://www.mysite.ru/photos/ вместо http://www.mysite.ru/photos/startpage.html) браузер отобразит не саму web-страницу, а перечень хранящихся в данной папке файлов или ошибку.
    Подобный набор тематических рубрик с распределенными по соответствующим разделам документами и заранее спроектированными гиперсвязями между всеми страницами ресурса и называется Логической структурой сайта.


    Физическая структура подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт.
    Пример сравнения логической и физической структур одного и того же ресурса Интернета показан на рис. 5

    Рис. 5
    Сравнение логической и физической структуры сайта

    Очевидно, что логическая и физическая структуры могут не совпадать, поскольку в общем случае физическая структура ресурса разрабатывается, исходя из удобства размещения файлов. Однако более или менее точное сохранение порядка следования логических разделов в физической структуре сайта позволит вам избежать путаницы при последующем дополнении и обновлении материалов.
    СОВЕТ!
    Рекомендуется размещать все графические изображения, являющиеся элементами проекта, в отдельной папке с названием «Images», “img” или “pic”, расположенной в корневой директории сайта. Такой подход позволит обновлять хранящиеся в других тематических разделах документы HTML без переноса графики, использовать одни и те же графические файлы во всех разделах сайта и при необходимости удалять целые директории.
    Для того чтобы все гиперссылки на вашей домашней страничке или web-сайте работали корректно, все документы открывались правильно и браузер не выдавал ошибок при обращении к каким-либо разделам ресурса, при создании его физической структуры следует соблюдать несколько простых правил.

    1. Назначайте имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре.
    2. Старайтесь, чтобы имена созданных вами файлов и директорий не превышали по длине восьми символов.
    3. При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена были «смысловыми»: впоследствии вы легко можете забыть содержимое и назначение какой-либо web-страницы, если имена файлов будут выглядеть, например, как 1.htm, 2.htm, 3.htm и т. д.

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

    1. Постановка целей и определение основных задач.
    2. Создание списка будущих тематических разделов.
    3. Разработка логической и физической структуры ресурса.
    4. Подготовка эскиза дизайна, компоновки сайта, невидимой верстальной таблицы.
    5. Подготовка текстовых материалов.
    6. Подготовка графических материалов в векторной форме.
    7. Экспорт векторных рисунков в растровый формат.
    8. Оптимизация всех изображений.
    9. Создание шаблонов web-страниц.
    10. Сборка web-страниц и отладка кода.
    11. Проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой и различных браузерах.

    Названия страниц

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

    Во многих из перечисленных ситуаций названия web-страниц рассматриваются в отрыве от основного контекста. Таким образом, необходимо, чтобы названия страниц были достаточно информативными и позволяли правильно судить о характере содержащихся на этих страницах материалов. С другой стороны, слишком длинные названия также неудобны.
    Название страницы также можно отнести к разряду информационного наполнения web-пространства. Каждое название должно представлять собой образец четкости формулировки. Автор должен объяснить потенциальному посетителю, какую информацию можно найти на соответствующей странице.
    Каждая из страниц должна иметь уникальное название. Представьте себе ситуацию, когда вы посетили, скажем, семь страниц с одинаковыми названиями, а затем пытаетесь вернуться к одной из них, используя список посещенных страниц. Кроме того, серьезные неудобства возникают при создании закладок на несколько различных страниц подобного узла, поскольку при этом меню закладок (избранных страниц) будет содержать несколько идентичных элементов.
    И наконец, названия должны быть приспособлены для беглого ознакомления. С этой целью следует помещать наиболее информативные фразы в начало названия, причем предпочтительнее всего начинать название со слова, которое с наибольшей вероятностью будет отражать потребности потенциального посетителя. Весьма часто встречается, когда в качестве названия используются такие фразы, как “Добро пожаловать на узел XXX”. Гораздо лучшим вариантом было бы использование в качестве названия просто “XXX”. Названия не обязательно должны представлять собой законченные грамматические структуры, скорее они должны быть выдержаны в духе рекламных слоганов.
    При создании заголовков в Интернете необходимо руководствоваться приводимыми ниже принципами:

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

    Каждая страница должна иметь название и в дизайне

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

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

    Обратите внимание на пример страницы сотовой компании ЕТК. Вы без труда определите, в каком разделе сайта вы находитесь, название страницы.

    Удобочитаемость

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

    1. Фон и текст страницы должны быть оформлены контрастными цветами. Наилучшая разборчивость обеспечивается при использовании черных символов на белом фоне (так называемого позитивного текста). Также хорошо воспринимается белый текст на черном фоне (негативный текст). Несмотря на то, что уровень контрастности в последнем случае аналогичен позитивному тексту, негативная цветовая схема способствует некоторому рассеянию внимания читателя и очень замедляет чтение. Разборчивость еще больше страдает, если цвет текста несколько светлее черного, в особенности, если при этом фоновый цвет несколько темнее белого. Наиболее неудобны для чтения такие цветовые схемы, как розовый цвет на зеленом фоне: эта схема характеризуется слишком низкой контрастностью и, кроме того, не позволяет читать текст пользователям, страдающим нарушением восприятия красного и зеленого цветов.
    2. В качестве фона страницы следует использовать либо однотонный цвет, либо узор, имеющий минимальную контрастность. Фоновые изображения затрудняют распознавание текста глазом человека.
    3. Текст должен быть набран достаточно крупным шрифтом, чтобы его могли читать даже пользователи с ослабленным зрением.
    4. Текст должен быть статичным. Движущийся, мерцающий или изменяющийся в размерах текст воспринимается значительно хуже, нежели статичный.
    5. В большинстве случаев текст должен быть выровнен по левому краю или по ширине. Если начало всех строк находится на одном уровне по горизонтали, чтение текста значительно ускоряется в сравнении с текстом, выровненным по центру или по правому краю. Конечно, выравнивание по правому краю или по центру отдельных небольших фрагментов текста вполне допустимо, однако основной текст должен быть выровнен по левому краю или по ширине.
    6. Аналогично, восприятие списков значительно облегчается при выравнивании первого слова каждого из элементов списка по левому краю вдоль одной линии.
    7. Поскольку современные мониторы имеют сравнительно низкую разрешающую способность, текст, набранный мелким шрифтом, воспринимается значительно лучше при оформлении его с использованием рубленых шрифтов, таких как Verdana. Для четкого отображения засечек шрифта размером 10 пунктов попросту не хватает пикселов. В то же время, большинство людей предпочитает читать текст, набранный шрифтами с засечками, таким образом, мы оказываемся перед лицом своего рода парадокса. Разборчивость должна быть определяющим критерием в случае очень мелких шрифтов (9 пунктов и менее). Такой текст должен набираться с использованием рубленого шрифта.
    8. Не следует набирать текст ПРОПИСНЫМИ БУКВАМИ. Чтение такого текста выполняется примерно на 10% медленнее, чем текста, набранного с использованием строчных букв, поскольку восприятие символов, имеющих одинаковую высоту, затруднено. Этого следует избегать.

    Разработка информационного наполнения

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

    1. Следует соблюдать лаконичность. На странице: должно размещаться не более 50% текста, который может быть использован для передачи того же материала в печатном издании.
    2. Текст должен быть удобным для беглого ознакомления. Не следует заставлять посетителя читать крупные абзацы текста. Вместо этого лучше использовать небольшие абзацы, подзаголовки и маркированные списки.
    3. Информацию значительного объема следует разбивать на несколько страниц, связанных между собой гиперссылками.

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

    Рисунки и фотографии

    1. Количество графической информации на web-страницах необходимо максимально ограничивать, поскольку загрузка графики требует значительного времени. От излишней графики следует попросту отказаться. В разряд такой графики попадает любая текстовая информация, представленная в графическом формате, за исключением текста, тесно связанного с общей концепцией оформления сайта, включение которого в состав изображения обусловлено необходимостью.
    2. Несмотря на это, пользователям нужно видеть фотографии образцов предлагаемой продукции, поскольку это является единственным способом познакомиться с ней воочию. На персональной странице целесообразно помещать фотографию или текст, говорящие о личности автора. Устранить противоречия между этими двумя требованиями помогают гипертекстовые возможности Сети. Количество графической информации на страницах верхних уровней следует сводить к минимуму. При просмотре этих страниц пользователь еще не успевает выбрать материалы, которые представляют для него интерес и нуждаются в иллюстрациях. На страницах, посвященных более узким вопросам, количество иллюстративного материала может быть увеличено.
    3. На странице верхнего уровня, посвященной определенной продукции, можно поместить небольшую фотографию образца этой продукции, однако основной объем информации по-прежнему должен быть представлен текстом и табличными данными. Если пользователь действительно заинтересовался описываемым образцом, он может воспользоваться ссылками на странице описания для просмотра других фотографий этого образца. Эти фотографии должны быть достаточно крупными, чтобы давать потенциальному покупателю максимально полное представление о предлагаемой продукции.

    Уменьшение размера изображения

    Традиционным способом создания небольших версий изображений является уменьшение исходного изображения в графическом редакторе. К сожалению, при изменении масштаба изображения уменьшаются настолько, что становятся абсолютно неразборчивыми. Применение кадрирования (обрезки краев изображения) позволяет сохранить детализацию на исходном уровне, однако при этом утрачивается определенная часть содержащейся в изображении информации. Оптимальным выходом в данной ситуации может стать совместное использование обоих указанных методов. Например, для получения уменьшенного образца, размер которого составляет 10% от размера исходного изображения, вначале следует обрезать изображение до 32% относительно исходного текста, расположенного в центре страницы, если в верхнем углу помещен переливающийся логотип.
    Анимированные изображения имеют право на существование в web-дизайне, однако в общем случае использование анимации лучше всего ограничивать. Задайте себе вопрос: можно ли достичь той же цели без применения анимации? Если ответ на этот вопрос окажется положительным, избавляйтесь от анимации без малейшего сожаления.
    Кроме того, нельзя допускать воспроизведения анимации в бесконечном цикле достаточно, чтобы она воспроизводилась всего несколько раз. Отдельные пользователи полагают, что анимированные изображения выглядят эффектно и являются показателем труда, вложенного в разработку сайта. Тем не менее, большинство пользователей отмечает, что анимация раздражает их. В частности, практически все не переносят движущийся текст и бегущие строки.
    Применение анимации имеет семь целей:

    1. для передачи переходных процессов;
    2. для указания направленности действия;
    3. для передачи изменений, происходящих с течением времени;
    4. для смены, отображаемой в отдельной области страницы информации;
    5. для обогащения графического представления;
    6. для визуализации объемных структур;
    7. для привлечения внимания.

    Описания ссылок

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

    • Структурные ссылки или ссылки на элементы навигации. Эти ссылки задают структуру информационного пространства, и по ним пользователь переходит к другим разделам сайта. Типичный пример кнопка возврата на начальную страницу и ссылки на подчиненные страницы.
    • Ассоциативные ссылки внутри страницы. Чаще всего это подчеркнутые слова в тексте (хотя это могут быть и изображения), указывающие на страницы, где можно найти подробную информацию о слове, играющем роль ссылки.
    • Списки типа “смотрите также”. Эти ссылки нужны для того чтобы помочь пользователю найти то, что он хочет, но чего нет на данной странице. Учитывая сложность навигации в Интернете, хорошо составленные списки “смотрите также” могут сильно облегчить жизнь пользователю.

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

    Заголовки ссылок

    Начиная с броузера Internet Explorer 4.0 поддерживается возможность выводить всплывающие подсказки с описанием ссылки. Это помогает узнать, куда приведет ссылка, и улучшает возможности навигации.
    Описание ссылки называется заголовкомссылкии его очень легко закодировать.
    Если вы поместите указатель мыши в вашем браузере над этой ссылкой, то примерно через секунду появится всплывающая подсказка.
    Цель заголовков помочь пользователям предугадать, что произойдет, если они перейдут по ссылке. В качестве заголовка для ссылки можно включать следующую информацию:

    • Название сайта, на который ведет ссылка (если это не текущий сайт).
    • Название подраздела сайта, на который ведет ссылка (если она не выводит за пределы сайта).
    • Дополнительные сведения об информации той страницы, на которую указывает ссылка, или о том, как она связана с текстом ссылки и содержимым текущей страницы.

    Заголовки ссылок должны быть меньше 80 символов, но они редко превышают даже 60 символов. Чем короче заголовок, тем лучше.
    Кроме того, вы не должны придумывать заголовки для всех ссылок. Если из текста ссылки и контекста понятно, куда она ведет, то ее заголовок только уменьшит удобство использования сайта, так как это будет лишний элемент, на который должен будет посмотреть пользователь. Излишне просто повторять текст ссылки в заголовке.
    Не думайте, что заголовок ссылки будет выглядеть одинаково для всех пользователей. На самом деле браузеры с голосовым интерфейсом прочитают заголовок ссылки вслух, а не отобразят ее на экране.
    И наконец, имейте в виду, что использование заголовков ссылок не заменяет сами ссылки. Текст ссылки и контекст, в котором она приводится, должны быть понятны, даже если пользователь и не посмотрит на ее заголовок.

    Сделайте ссылки цветными

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

    Ожидание от перехода по ссылке

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

    Структура сайта

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

    Сайт из 10 страниц («визитная карточка» базовый вариант)

    Такой сайт может включать в себя до 25 страниц текста формата А-4 и до 50 фотографий (рисунков), выполненных с предпросмотром.
    Здесь: