Из чего состоит страница сайта

Из чего состоит страница сайта

Из чего состоит сайт?

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

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

Основные составляющие части сайта: дизайн, верстка, программная часть, контент.
Дизайн.

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

В каталоге дизайнов на этом сайте Вы найдете много хороших веб-дизайнов для своего сайта.
Верстка.

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

Программная часть.

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

Контент.

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

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

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

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

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

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

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

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

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

p, blockquote 1,0,0,0,0 —>

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

p, blockquote 2,0,0,0,0 —>

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

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

p, blockquote 3,0,0,0,0 —>

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

p, blockquote 4,0,0,0,0 —>

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

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

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

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

p, blockquote 6,0,1,0,0 —>

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

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

p, blockquote 7,0,0,0,0 —>

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

p, blockquote 8,0,0,0,0 —>

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

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

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

p, blockquote 10,0,0,0,0 —>

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

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

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

p, blockquote 12,0,0,0,0 —>

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

p, blockquote 13,1,0,0,0 —>

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

p, blockquote 14,0,0,0,0 —>

3 Сайдбар

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

p, blockquote 15,0,0,0,0 —>

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

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

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

p, blockquote 17,0,0,0,0 —>

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

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

p, blockquote 18,0,0,0,0 —>

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

p, blockquote 19,0,0,0,0 —>

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

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

p, blockquote 20,0,0,1,0 —>

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

p, blockquote 21,0,0,0,0 —>

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

p, blockquote 22,0,0,0,0 —>

p, blockquote 23,0,0,0,0 —>

p, blockquote 24,0,0,0,0 —>

p, blockquote 25,0,0,0,0 —>

p, blockquote 26,0,0,0,0 —> p, blockquote 27,0,0,0,1 —>

Строение сайта. Из чего он состоит?

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

• дизайн;
• верстка;
• программный код;
• серверная часть;
• клиентская часть;
• контент;
• система управления содержимым или CMS;
• доменное имя;
• хостинг.

Рассмотрим основные технические компоненты и строение сайта.

1. Дизайн сайта отвечает за визуальное представление и организацию информации, способствует взаимодействию ресурса с его посетителями. Отвечающим за создание дизайна специалистом обычно является веб-дизайнер. Именно он должен спроектировать логическую структуру всех страниц сайта, разработать способы подачи материала и проработать внешнее оформление ресурса. Для каждой страницы дизайн разрабатывается отдельно в зависимости от ее функций. Например, у сайта интернет-магазина есть страница, где представлен товар, а также страница с пользовательской корзиной. Естественно, что эти директории по логике своего оформления должны быть разными. Цель размещения корзины — способствовать быстрому и удобному совершению покупок, а страницы, представляющей товар, — ознакомление со свойствами продукта, сравнение его с другими товарами.
2. Верстка представляет собой процесс написания особого кода для браузеров. У такого файла расширение html, и отображается он только в браузерах. Нужно следить, чтобы сверстанный макет одинаково выглядел во всех браузерах, будь то Opera, Mozilla Firefox, Google Chrome или Internet Explorer. Дополнительно можно узнать о таком термине, как «валидность верстки» в специальной статье о ней.
3. Программирование составляет примерно 50-70% работы над сайтом. Программная часть ресурса – довольно обширное понятие. Программирование отвечает за то, чтобы многочисленные страницы сайта отображались с одинаковым дизайном, но разным содержимым. Также программный код ответственен за визуальные эффекты и многое другое. Благодаря ему сайт становится «живым» и динамичным.
4. Веб-сервер – это компьютер с установленным на нем программным обеспечением, которое предназначено для того, чтобы отвечать на запросы веб-клиента круглосуточно в режиме реального времени. Под веб-клиентом подразумевается браузер, который отправляет серверу запрос на определенную страницу, и если она доступна, то пользователь может увидеть ее. Чтобы пользователь увидел нужную ему страницу, его браузер должен получить от сервера соответствующий html-код. После чего код и все визуальные элементы распознаются и предстают перед пользователем в виде готовой понятной любому страницы.
5. Клиентская часть представляет собой код, загружаемый вместе с кодом html. Это может быть CSS, JavaScript, ActionScript.
6. Контент сайта, то есть все содержимое сайта. Сюда входят тексты, картинки, видео, flash и прочие файлы. Контент часто путают с элементами дизайна, но это совершенно разные вещи. Оформление сайта отвечает на вопрос «как разместить», а контент отвечает на вопрос «что разместить». Что касается текстового наполнения, то именно оно наполняет любой веб-ресурс смыслом, благодаря которому пользователи могут найти сам сайт в поисковых системах. Интересный контент – это ключ к увеличению посещаемости, читаемости и коммерческих показателей, таких как звонки, продажи или подписки на e-mail рассылки.
7. CMS тоже можно отнести к одному из элементов сайта. Система управления содержимым позволяет управлять всеми элементами ресурса через административную часть. Использование CMS не обязательно, однако оно необходимо всем, кто хочет самостоятельно контролировать и редактировать содержимое сайта. Существует целый ряд разнообразных CMS, отличающихся друг от друга удобством пользования, набором свойств и принципами работы.
8. Доменное имя и хостинг. Доменное имя – это уникальный адрес сайта в Сети (например, www.site.by). А хостинг – это услуга, которая предоставляется специальными компаниями, хранящими на своих серверах все необходимые для работы сайта данные. Без этих компонентов строение было бы неполным, а сам сайт — недоступен для пользователей и посетителей. Хостинг предполагает выделение свободного места на сервере для размещения и хранения какого-либо сайта. Чтобы владелец был уверен в том, что его сайт всегда виден пользователям Интернета, он обязательно должен обзавестись уникальным доменным именем, а также надежным хостингом. Чтобы выбрать правильный хостинг, предлагаем Вам прочитать нашу статью с более подробными рекомендациями.

Визуальные части сайта

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

Верхняя часть. Шапка. Что и зачем?

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

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

Боковые части. Левая или правая – как лучше?

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

Центр – лучшее место для контента

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

Нижняя часть – место для того, что не уместилось выше

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

Послесловие

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

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

Составные части сайта

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

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

Шапка

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

Главная часть

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

Подвал

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

Навигация

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

Меню

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

Навигация гиперссылок

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

Свяжитесь с нами

улица Лачплеша, д. 87,
город Рига, LV-1011, Латвия
+371 2893 6776
Отправить нам письмо