Особенности верстки интернет-страниц

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

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

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

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

Ширина страницы

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

Фиксированный макет

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

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

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

«Резиновый» макет

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

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

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

Высота макета

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

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

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

Все объекты на интернет-странице прямоугольны

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

исходное изображение

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

прямоугольное изображение

Эта особенность вызвала отдельные приемы верстки.

Активное применение рисунков

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

Использование фонового рисунка

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

Наверх

Понравилась статья? Поделиться с друзьями:

Отправить ответ

Оставьте первый комментарий!

Уведомить
avatar
wpDiscuz