Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

895

Вся правда о заработке на блогах

Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Картинка 3D коробки

    Узнать больше

    895

    Вся правда о заработке на блогах

    Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

    Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Узнать больше

    899

    Как заработать в интернете продавая информацию

    Этот БЕСПЛАТНЫЙ обучающий курс по заработку в интернете для тех, кто хочет работать, используя свои знания и опыт.

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

  • Узнать больше

    890

    Как заработать чайнику?

    Многие задаются вопросом, как зарабатывать в интернете? Как начать работать на себя, а не на дядю?

    В БЕСПЛАТНОМ видеокурсе "Как заработать чайнику?", вы найдете много ответов на эти вопросы, которые получите от успешного практика в этой области.

  • Узнать больше

    903

    Создать сайт за 1 час!

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

    Из БЕСПЛАТНОГО видеокурса "Как создать сайт за 1 час" вы узнаете, как можно достаточно быстро сделать бесплатный сайт несложным способом с нуля.

  • Узнать больше

    904

    Как начать зарабатывать на партнерских программах

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

    БЕСПЛАТНЙ видеокурс "Как начать зарабатывать на партнерских программах" поможет вам освоить этот интересный и эффективный способ работы в интернете.

  • Узнать больше

    905

    ИНФОБИЗНЕС по модели Евгения Попова

    Этот БЕСПЛАТНЫЙ обучающий курс предназначен для тех, кто хочет познакомиться с одним из лучших видов заработка в интернете.

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

  • Узнать больше

    922

    HTML базовый курс

    БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

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

  • Узнать больше

    924

    CSS базовый курс

    Этот БЕСПЛАТНЫЙ обучающий курс поможет разобраться в вопросах сайтостроения при создании своего сайта.

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

  • Узнать больше

    926

    Домен и хостинг

    В этом БЕСПЛАТНОМ обучающем курсе рассказывается как разместить в сети свой вновь созданный интернет-ресурс.

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

  • Узнать больше

    927

    Фотошоп для начинающих (бесплатная версия)

    Этот БЕСПЛАТНЫЙ обучающий курс будет полезен тем, хочет освоить работу с графическим редактором "Фотошоп".

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

  • Узнать больше

    929

    Видеосамоучитель GIMP

    Данный видеокурс поможет освоить работу с дизайном сайта при использовании БЕСПЛАТНОГО графического редактора GIMP.

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

Бесплатные видеокурсы!

Хотите узнать как зарабатывать в интернете и как бесплатно сделать сайт для своей работы, ничего не потратив на обучение?

Здесь Вы можете познакомиться с проверенными способами работы в интернете в БЕСПЛАТНЫХ обучающих курсах по заработку и сайтостроению в разделе Бесплатные Сборника видеокурсов.

Вы здесь: Главная → Как сделать сайт → Верстка → Определяем способ верстки

Знак папки 2Текущее состояние создаваемого сайта

Свернуть

Знак папки 1 Все статьи cборника "Сделай сайт своими руками с нуля бесплатно"


Автор: / Дата:

Определяем способ верстки

Здравствуйте уважаемый посетитель!

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

Содержание


  • Какие существуют виды верстки
  • Табличная или блочная
  • Фиксированная или резиновая
  • Зачем нужна адаптивная верстка
  • Семантическая верстка
  • Выводы

Какие существуют виды верстки


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

  • Табличная
  • Блочная
  • Фиксированная
  • Резиновая
  • Адаптивная
  • Семантическая

Первые два вида (1,2) определяют способы построения веб-страниц, где, при табличном способе страницы строятся с помощью контейнеров, определяющих содержимое в виде таблиц (парный элемент языка HTML <table>), а при блочном варианте, конструкцией страниц обычно являются блочные элементы, например, универсальный элемент<div>.

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

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

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

Здесь, для общего понимание основных видов верстки приведены лишь их общие характеристики. Далее, перейдем к более детальному их рассмотрению.

Табличная или блочная


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

Как известно тег <table>, представляющий контейнер для содержимого таблицы, состоит из трех элементов:

  • парный тег <table>, обозначающий начало и конец контейнера;
  • парный тег <tr>, обозначающий строку;
  • парный тег <td>, обозначающий ячейку.

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

В блочном же варианте для этого понадобиться лишь 1 парный тег <div>, состоящий из 2 элементов, что в сравнении с таблицей, значительно проще.

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

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

  1. <table>

  2. <tr>

  3. <td>1</td>

  4. </tr>

  5. <tr>

  6. <td>2</td>

  7. </tr>

  8. <tr>

  9. <td>3</td>

  10. </tr>

  11. <tr>

  12. <td>4</td>

  13. </tr>

  14. </table>

Рис.1 Табличный вариант

  1. <div>

  2. <div>1</div>

  3. <div>2</div>

  4. <div>3</div>

  5. <div>4</div>

  6. </div>

Рис.2 Блочный вариант

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

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

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

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

Фиксированная или резиновая


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

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

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

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

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

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

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

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

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

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

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

При этом, для чистоты эксперимента, перевод тестового сайта в фиксированный режим обеспечен лишь изменением необходимых параметров в таблице стилей CSS, а именно, установкой одинаковой минимальной и максимальной ширины страницы равной 1280px (в нормальном состоянии диапазон резиновой верстки сайта обеспечивает работу с мониторами со стандартными разрешениями от 1040px до 1920px, что с учетом округления, параметры этого режима установлены в диапазоне от 1000px до 2000px)

На рис.3,4 показаны скриншоты вида веб-страницы в резиновом (слева) и фиксированном (справа) режимах на мониторе с разрешением экрана 1920px. Как видно на картинках, при резиновом варианте ширина страницы полностью совпадает с шириной экрана монитора, а при фиксированном, страница сжимается по ширине и образуются довольно значительные пустые незаполненные поля.

Вид веб-страницы на мониторе с разрешением 1920px

Способы верстки сайта, картинка 3

Рис.3 Резиновая верстка (1000÷2000px)

Способы верстки сайта, картинка 4

Рис.4 Фиксированная верстка (1280px)

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

Вид веб-страницы на мониторе с разрешением 1040px

Способы верстки сайта, картинка 5

Рис.5 Резиновая верстка (1000÷2000px)

Способы верстки сайта, картинка 6

Рис.6 Фиксированная верстка (1280px)

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

С резиновой версткой мы определились, и теперь можно перейти к адаптивной.

Зачем нужна адаптивная верстка


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

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

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

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

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

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

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

Вид веб-страницы на дисплее мобильных устройств с разрешением 320px

Способы верстки сайта, картинка 7

Рис.7 С адаптивной версткой

Способы верстки сайта, картинка 8

Рис.8 Без применения адаптивной верстки

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

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

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

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Способы верстки сайта, картинка 9

Рис.9

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

Семантическая верстка


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

В предыдущих версиях языка возможности семантической верстки были несколько ограничены, по сравнению с 5-той версией. Хотя, и тогда использование соответствия тегов к информации, находящейся внутри них, широко применялось при верстке. В качестве примера, можно упомянуть, часто используемые теги заголовков <Η1>, <Η2>, <Η3> ..., или тег <a>, обозначающий ссылку и т.п.

С приходом HTML5, появилась возможность обозначать и более существенные смысловые значения элементов веб-страниц. Например, можно одним тегом <header> обозначить, что все, что находится внутри его, относится к шапке сайта, а то, что находится в контейнере <main>, является основным содержанием документа, которое уникально и не может где-либо еще повторяться.

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

Выводы


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

  • блочной;
  • резиновой;
  • адаптивной;
  • семантической.

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

С уважением, Николай Гришин

Читать дальше


Подписка


Здесь вы можете подписаться на получение уведомлений о выходе новых статей блога.

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

Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments

Социальные сети


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

Другие статьи из рубрики "Как сделать сайт"


Показать больше


  • Google+ Опубликованные статьи можно также смотреть в подборках Google+