Способы HTML верстки
Верстка – это процесс превращения графического макета картинки (обычно из psd-формата) в веб-страницу по определенным правилам. Другими словами – превращение картинки в специальный код (html-код), соблюдая оформление, экранное разрешение и требования браузеров.
В настоящее время можно выделить 4 способа верстки веб-страниц:
- Прямая верстка
- Фреймовая верстка
- Табличная верстка
- Блочная верстка
Прямая верстка
В первое время своего существования интернет был обычным набором документов, представляющих из себя самый простой набор заголовочных элементов, текста, рисунков и таблиц. Такие документы были не презентабельны, и по мере увеличения популярности WWW возникала задача управления внешним видом страницы. Вместо заголовочных элементов разработчики начали применять полужирные шрифты, чтобы создать желаемые визуальные эффекты на странице.
Табличная верстка
На смену прямой верстке пришла табличная верстка, которая применяется и по сегодняшний день. При прямой верстке таблицы применялись по своему прямому назначению – для отображения табличных данных (сводные таблицы, результаты матчей, прейскуранты цен, перечни товаров). При табличной верстке таблица поменяла свой прямой смысл – она стала фундаментом дизайна – элементы дизайна: логотип, фоновые картинки, кнопки, логотип, основной текст, меню и остальные элементы сайта, стали размещаться в ячейках таблицы, создавая внешне законченную структуру.
1 – показана обычная таблица с ячейками
2 – структурный вид макета, основанного на таблице
3 – с использованием структуры 2 сделана страничка сайта (границы таблицы являются невидимыми, что позволяет использовать таблицу как фундамент страницы)
Обычно в готовом html-документе одной таблицей все не заканчивается. Для создания сложных структур приходится определенным образом влаживать и другие таблицы в ячейки существующих таблиц, что приводит к сложности читаемости кода, трудности правки и, кроме того, увеличивается объем такой страниц, такую страницу тяжело затем программировать.
Чтобы проще управлять внешним видом документа (жирность слов, подчеркивание, курсив, выравнивание) были разработаны визуальные редакторы – WYSISYG инструменты (What You See Is What You Get, «что видишь, то и получишь»). К сожалению, вместо того, чтобы упростисть ситуацию визуальные редакторы, наоборот, ее усложнили – в документе появилось огромное количество избыточного кода, который стало понять еще труднее. И web-страница стала настолько сложной в понимании, что вручную ее редактировать стало практически невозможно, чтобы не разрушить код WYSISYG. Ситуацию спасла появившаяся на свет технология css (Cascading Style Sheets – каскадные таблицы стилей), при которой все визуальное оформление(жирность и цвет шрифтов и пр.) теперь находится во внешнем файле и который подключается к html странице, т.е. структура(фундамент) страницы находится в одном html файле, а визуальное оформление в другом – css файле. С появлением css появился новый блочный способ html-верстки.
Блочная верстка
При такой верстке графические макеты верстаются с помощью прямоугольных блоков (div). Такие блоки на странице можно располагать любым образом. Данный способ верстки лишен всех недостатков табличного подхода. Количество кода сокращается в разы, по сравнению с табличным способом.
При табличном подходе блок текста опишется так:
При блочной верстке тот же самый блок описывается так:
Код страницы читается легко и понятно (+ использование css позволяет вынести все оформление во внешний файл, что приводит к сокращению и легкой понимаемости самого html-кода).
Программистам работать с таким кодом очень приятно.
Блочный способ может комбинироваться с табличным – таблицы снова могут применятся по своемому прямому назначению, позволяя в удобном виде отображать информацию.
Таким образом, настоящее и ближайшее будущее за блочной версткой.
Кроме этого, в настоящее время уже вовсю используется язык разметки HTML5, в котором предлагается использование новых тегов для обозначения блочных и инлайновых элементов. Со списком новых тегов и аттрибутов, какая предлагается разметка страницы при использовании html5 можно ознакомиться в этой статье. А как правильно выбрать тот или иной тег и не сделать ошибки рассказывается в этой статье.
Фреймовая верстка
Фрейм (от англ. frame — рамка) — это отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.
Фреймы напоминают ячейки таблицы. В каждой такой ячейке может быть выведен отдельный html документ и они являются независимыми друг от друга. Фреймы совершенно по разному могут отображаться в разных браузерах, т.е. присутствует момент несовместимости. Использовать фреймы в современной сети можно, но не рекомендуется. Некоторые поисковые системы и каталоги отказывают в регистрации таким сайтам, где используются фреймы.
Резюме:
– Прямая верстка – использовалась в начале начал.
– Табличная верстка – громоздкая и неудобная, но простая в реализации.
– Блочная верстка – простая по структуре кода, но нуждается в определенных правилах исполнения, требует определенных навыков и является самым современным способом верстки веб-страниц.
– Фреймовая верстка – не реккомендуемый к использованию способ.
Источник
Определяем способ верстки
Здравствуйте уважаемый посетитель!
Сегодня рассмотрим существующие виды верстки и определим способы, которые будем использовать при разработке сайта.
Содержание
- Какие существуют виды верстки
- Табличная или блочная
- Фиксированная или резиновая
- Зачем нужна адаптивная верстка
- Семантическая верстка
- Выводы
Какие существуют виды верстки
Верстки по способу построения и особенностям работы сайта можно разделит на следующие основные виды, такие как:
- Табличная
- Блочная
- Фиксированная
- Резиновая
- Адаптивная
- Семантическая
Первые два вида (1,2) определяют способы построения веб-страниц, где, при табличном способе страницы строятся с помощью контейнеров, определяющих содержимое в виде таблиц (парный элемент языка HTML
| , обозначающий ячейку. Поэтому, для формирования структуры, состоящей всего лишь из одного блока веб-страницы понадобиться 6 элементов, описывающих 3 вышеуказанных парных тега. В блочном же варианте для этого понадобиться лишь 1 парный тег Конечно, в зависимости от конфигурации структуры, соотношение количества необходимых элементов будет различаться, но в любом случае, код, описывающий построение веб-страниц, основанный на блоках, будет всегда компактнее и проще, чем у табличного варианта. Для сравнения, ниже приведены примеры формирования структуры в табличном и блочном вариантах разметки страницы, состоящей из четырех блоков, расположенных по вертикали один под другим. Рис.1 Табличный вариант Рис.2 Блочный вариант Как видно из примеров, блочный вариант значительно компактнее, чем при использовании таблиц. Это приводит к существенному увеличению объема кода веб-страниц при использовании табличной верстки и, соответственно, к ухудшению такого параметра, как скорость загрузки. Другой, весьма существенный недостаток табличного варианта, это специфика отображения таблицы при загрузке браузером, а именно, таблица не отображается до тех пор, пока все ее ячейки не будут загружены. Это особенность таблиц негативно сказывается при таком варианте верстки на время отображения веб-страниц после начала загрузки. Можно отметить и другую особенность при использовании таблиц, а именно, неудобную работу с кодом ввиду его громоздкости. Кроме того, общеизвестно, что поисковые системы также не очень жалуют сайты с табличной версткой, что сказывается на их индексацию. Исходя из этого, можно сделать вывод, что при создании сайта лучше использовать блочную верстку, которая является наиболее оптимальным и современным вариантом разметки веб-страниц. Фиксированная или резиноваяНаверное, подробно рассказывать о том, что такое фиксированная верстка, нет необходимости, так как из самого названия понятно, что при таком способе строго определена ширина веб-страницы. Поэтому, в этом случае, при просмотре сайта с шириной страницы меньше ширины экрана (ширина страницы и экрана в пикселях), на экране будут присутствовать пустые незаполненные по ширине пространства. А при ширине страницы больше ширины экрана, часть страницы будет обрезана по ширине, и для просмотра всего содержимого потребуется пользоваться прокруткой. Конечно, такой режим работы не очень удобен, так как не всегда размер страницы соответствует размеру экрана устройства пользователя. Особенно, это стало заметно при появлении на рынке компьютерной техники мониторов с высоким разрешением экранов. Поэтому, сейчас очень широко применяется, специально разработанная для этих целей, техника резиновой верстки. При ее использовании можно добиваться того, что в большом диапазоне разрешения экранов мониторов, ширина страницы будет в полной мере укладываться в ширину экрана, что делает просмотр таких страниц более удобным для посетителей сайтов. Возникает вопрос, почему же тогда, все равно существует довольно большое количество сайтов с фиксированной шириной веб-страниц. Да, действительно, у фиксированного варианта разработки имеется преимущество, и оно в основном, на мой взгляд, заключается в том, что это самое простое решение. Оно не требует проведения многочисленных тестов сайта при разных условиях работы. В этом случае, все фиксировано, никаких дополнительных механизмов подстройки размера изображения делать не надо, все достаточно легко и просто. И, соответственно, время и стоимость для разработки таких сайтов будет требоваться куда меньше, чем в резиновом варианте. В остальном же, этот вариант имеет одни недостатки. Но, можно встретить в интернете в защиту этого варианта и такое мнение, что мол, при резиновой верстке на большом экране сайт расползается, пропорции внешнего вида нарушаются и на нем становиться неудобно читать текст. И что, такая верстка сама по себе хороша и ничего не надо больше мудрить. Не знаю, когда, я вижу такие утверждения, у меня всегда возникает вопрос, это от лени, или не способности, а может, действительно, на вкус и цвет товарищей нет, и что в любом месте всегда можно найти какие-либо другие, а зачастую, и противоположные точки зрения. Но, как говорится, лучше один раз увидеть, чем сто раз услышать. Поэтому, для наглядности, ниже приведены примеры использования фиксированной и резиновой верстки. В качестве примера взят данный реально работающий сайт «rabota-vinete.ru», с параллельно установленной копией тестового сайта на хосте «mysite.local» локального веб-сервера, находящегося на персональном компьютере. При этом, для чистоты эксперимента, перевод тестового сайта в фиксированный режим обеспечен лишь изменением необходимых параметров в таблице стилей CSS, а именно, установкой одинаковой минимальной и максимальной ширины страницы равной 1280px (в нормальном состоянии диапазон резиновой верстки сайта обеспечивает работу с мониторами со стандартными разрешениями от 1040px до 1920px, что с учетом округления, параметры этого режима установлены в диапазоне от 1000px до 2000px) На рис.3,4 показаны скриншоты вида веб-страницы в резиновом (слева) и фиксированном (справа) режимах на мониторе с разрешением экрана 1920px. Как видно на картинках, при резиновом варианте ширина страницы полностью совпадает с шириной экрана монитора, а при фиксированном, страница сжимается по ширине и образуются довольно значительные пустые незаполненные поля. Вид веб-страницы на мониторе с разрешением 1920px
Рис.3 Резиновая верстка (1000÷2000px)
Рис.4 Фиксированная верстка (1280px) На рис.5,6 показаны скриншоты вида веб-страницы при разрешении экрана монитора в 1040px. Можно увидеть, что в этом случае при резиновом варианте ширина страницы также полностью совпадает с шириной экрана монитора, а при фиксированном, теперь страница вышла за пределы экрана и появилась полоса прокрутки для возможности просмотра всего содержимого страницы. Вид веб-страницы на мониторе с разрешением 1040px
Рис.5 Резиновая верстка (1000÷2000px)
Рис.6 Фиксированная верстка (1280px) Как говорится, плюс резиновой верстки налицо. Поэтому, использование возможностей такой техники, по всей видимости оправдано, и диктуется требованиями к качеству современных сайтов. С резиновой версткой мы определились, и теперь можно перейти к адаптивной. Зачем нужна адаптивная версткаЧто касается, адаптивного способа разметки страниц, то его обычно используют при работе сайтов с мобильными пользовательскими устройствами, имеющими, в большинстве случаев, значительно меньшие размеры и разрешение дисплеев по сравнению со стационарными компьютерами. И если, не применять такой способ оптимизации к условиям работы с мобильными устройствами, то довольно часто будет возникать ситуация, когда изображение на дисплее будет недостаточно разборчиво, а зачастую вообще будет невозможно читать и управлять. Поэтому, для оптимизации сайтов к работе с такими устройствами применяется техника на основе специальных медиа запросов, с помощью которых автоматически определяется тип мобильного устройства, разрешение его дисплея и на основании полученных данных, производится корректировка необходимых параметров (размер шрифта, отступов, расположение элементов и т.п.). Если принять за разрешение дисплеев мобильных устройств величину от 320px и выше (разрешение менее 320px может встретиться лишь совсем у старых устройств, которых осталось очень незначительное количество), то логично задачи по адаптации веб-страниц отнести к диапазону с разрешением от 320px до минимального значения разрешения резинового режима (в нашем примере диапазон адаптивной верстки будет составлять от 320px до 1000px). Таким образом, адаптивная верстка совместно с резиновой обеспечит оптимальную работу сайта на подавляющем большинстве существующих пользовательских устройств сети интернет. Как и в случае с резиновой версткой, для того, чтобы наглядно убедиться в необходимости адаптивной, ниже приведены примеры работы реального и тестового сайта при разрешении дисплеев мобильных устройств в 320px. Здесь, аналогично с примерами резиновой верстки, адаптивный режим в тестовом сайте отключен соответствующими изменениями в коде веб-страниц. Вид веб-страницы на дисплее мобильных устройств с разрешением 320px
Рис.7 С адаптивной версткой
Рис.8 Без применения адаптивной верстки Как видно, в случае без адаптивной верстки, веб-страницу на дисплее мобильного устройства невозможно читать не увеличивая изображение с помощью сенсорного экрана. Это крайне неудобно, так как в таком случае при просмотре сайта придется прибегать к очень большому количеству лишних, утомительных действий. Понятно, что пользователи мобильных устройств с таких сайтов просто будут уходить. В примере с адаптивной версткой видно, что изображение оптимизировано к малому размеру экрана и текст хорошо виден. В данном случае, область контента преобразовалась из трех колоночного вида в одно колоночный, меню стало всплывающим, освободив довольно значительную часть экрана, а размер текста приведен в соответствие с размером экрана. Таким образом, при использовании техники адаптивной верстки, просмотр веб-страниц на мобильных устройствах становится достаточно удобным, что положительно сказывается и посещаемость пользователей таких устройств. Кроме того, поисковые системы постоянно проверяют адаптирован ли сайт для мобильных устройств, и если нет, то снижают его рейтинги в результатах мобильного поиска, о чем заранее предупреждают. В этом можно убедиться посмотрев приведенный ниже скриншот страницы Гугл консоли вебмастера, где видно, как Гугл сообщает о возникшей проблеме на одой из страниц сайта и уведомляет, к чему это может привести.
Исходя из вышесказанного, следует, что для создания качественного сайта необходимо делать адаптивную верстку. Семантическая версткаСуть семантической верстки в том, что используя смысловые значения элементов языка HTML представлять информацию для разработчиков, браузеров, поисковых систем о смысле и назначении конкретных частей содержимого веб-страницы. В предыдущих версиях языка возможности семантической верстки были несколько ограничены, по сравнению с 5-той версией. Хотя, и тогда использование соответствия тегов к информации, находящейся внутри них, широко применялось при верстке. В качестве примера, можно упомянуть, часто используемые теги заголовков , , . или тег , обозначающий ссылку и т.п. С приходом HTML5, появилась возможность обозначать и более существенные смысловые значения элементов веб-страниц. Например, можно одним тегом обозначить, что все, что находится внутри его, относится к шапке сайта, а то, что находится в контейнере , является основным содержанием документа, которое уникально и не может где-либо еще повторяться. И таких смысловых элементов языка теперь значительное количество, что дает большие возможности по использованию семантической верстки для создания хорошо структурированных, понятных и удобных веб-страниц, как для пользователей, так и поисковых систем. А это, в свою очередь повышает уровень качества таких сайтов. ВыводыИсходя из вышеизложенного, определим требования к верстке нашего сайта, которые в дальнейшем будем учитывать при его создании, а именно обязательное применение следующих видов: В следующей статье перейдем к созданию веб-страницы и размещению ее на локальном веб-сервере. Источник |
