Элементы страницы веб сайта. Создание сайта


Элементы страницы веб сайта

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

Заголовок

Заголовок может быть создан как в текстовом, так и в графическом варианте, однако и в том и в другом случае он должен располагаться в верхней части документа. Иногда с заголовком совмещают меню выбора кодировки кириллицы и кнопки для перехода с русскоязычной на англоязычную версию сайта, если данный веб ресурс представлен на двух языках. Непосредственно под заголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера именно в верхнюю часть страницы веб сайта в большинстве случаев является обязательным условием регистрации его в службах баннерного обмена — системах, рекламирующих созданный вами ресурс в обмен на показ на страницах вашего сайта рекламы других участников баннерообменной сети. Стандартный размер баннеров составляет обычно 728х90, 468х60, 120х60, 100х100 и 400х50 точек. Если вы, при создании веб сайта, используете статический принцип компоновки страницы, ширина вашего баннера,как правило, будет значительно меньше ширины заголовка, благодаря чему в той части страницы, где вы планируете отвести место под рекламу, образуется незанятое пространство, которое можно заполнить логотипом владельца данного сайта или ссылкой на сервер, осуществляющий веб хостинг. Разумеется, логотип необходим далеко не всегда: как правило, он включается в состав веб страницы лишь в случае, если сайт имеет коммерческую направленность.

Текстовое поле

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

Элементы навигации веб сайта

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

Нижняя часть веб страницы

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

Пример компоновки

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

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

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

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

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

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

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

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

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

Рис. 3. Пример компоновки страницы веб сайта с верхним позиционированием элементов навигации

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

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

Рис. 4. Пример смешанной компоновки страницы веб сайта

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

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

Элементы веб-дизайна сайта.

Элементы дизайна сайта играют важную роль в восприятии посетителями. Известно, что человек способен одновременно воспринять 5-9 однотипных элементов. Соответственно, наиболее понятным станет меню, состоящее из оптимальных 5-7 элементов. Можно увеличить до 9, но это максимум, рекомендовать который, мы бы не стали. Именно такое количество пунктов меню даст посетителю возможность быстро запомнить их названия, адаптироваться к графике, и в этом случае стать постоянным пользователем вашего сайта.
Какие элементы веб-дизайна влияют на первое впечатление и установление доверительных отношений между посетителем и сайтом?

Логотип

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

Шрифт

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

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

Фотографии.

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

Скорость загрузки сайта.

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

Второстепенные данные.

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