Хотя прародителем верстки web-страниц является верстка полиграфических материалов, между ними есть одно важное различие. Любая полиграфия вроде буклета, листовки или брошюры печатается на листах установленного размера и в пределах одного тиража имеет лишь незначительные или даже незаметные глазу различия. web-страница же запускается на компьютере под управлением клиентской программы называемой браузером. Понятно, что операционная система, ее настройки и собственно сам браузер отличается от компьютера к компьютеру. Из чего следует банальный вывод, что один и тот же файл с нашего сайта по-разному отображается у каждого пользователя.
Напрашивается вопрос, можно ли сделать так, чтобы web-страница отображалась одинаково? Учитывая, сколько придется принять во внимание разных неоднозначных факторов, следует сказать, что нет, нельзя. Поэтому задача верстки web-страниц формулируется так: сформировать файл, который бы корректно отображался с небольшими различиями на основных платформах и в браузерах. Корректно означает, что соблюден исходный замысел автора, воплощен требуемый дизайн объекта, и он показывается в браузере без Errors.
Чтобы реализовать указанную задачу надо понимать, как вообще происходит верстка web-страниц и соизмерять свои идеи с их исполнением. Далее описаны некоторые особенности, которые имеют большое значение при верстке файлов с нашего сайта.
Изначально разработчику с нашего сайта ширина окна браузера пользователя неизвестна, поскольку она может меняться в самых широких пределах. Ширина зависит от разрешения монитора, длины его диагонали, размера окна и еще некоторых варьируемых данных. Иными словами предугадать ее заранее простыми средствами не представляется возможным. С учетом этой особенности утвердилось два способа верстки: фиксированный и «резиновый».
В данном случае действуем от обратного и устанавливаем общую ширину макета жестко заданной и равной определенной величине. Если взять некоторую обобщенную статистику посетителей сайтов и посмотреть, какое разрешение монитора они преимущественно используют, то узнаем, что это 1024х768 пикселов. Возьмем за ориентир 1000 пикселов, тогда общая ширина макета за вычетом вертикальной полосы прокрутки и рамки браузера окажется 800x990 пикселов. На этот размер ориентируемся и устанавливаем ширину макета, например 900 пикселов.
Преимущество такой схемы следующее. Раз общая ширина макета точно известна, то мы можем легко подгонять под нее дизайн и делать Имаги уже известной ширины. В целом подобная верстка приближается к верстке печатного буклета, и в том и другом случае ширина носителя информации строго задана, за счет чего верстка хоть частично, но упрощается.
Недостаток, который инкриминируют этому виду верстки фактически один — недастаткова эффективное использование свободной площади. Действительно, для монитора с большо-о-о-й диагональю или высоким разрешением экрана файл будет смотреться по-другому, чем на предполагаемых 800 пикселах. На рис. 1 показано, как выглядит макет в таком случае.
Рис. 1. Макет фиксированной ширины с размещением по левоой стороне
Справа появляется широкая пустая полоска, размер которой зависит от разрешения экрана пользователя и диагонали его монитора. Чтобы хоть как-то уменьшить пустое пространство, макет обычно помещают по центру окна браузера (рис. 2).
Рис. 2. Макет фиксированной ширины с размещением по центру
Этот вид макета основывается на том, что в качестве одной из единиц измерения выступают проценты. Общая рабочая ширина окна браузера — 100%, и колонки макета в сумме не должны ее превышать, поэтому для удобства, как правило, везде применяют процентную запись. При изменении размеров окна происходит переформатирование данных страницы, чтобы они вписались в новую ширину (рис. 3).
Рис. 3. web-страница занимает всю отведенную ширину
Этот вид верстки набирает все большую популярность и практически все известные сайты выбрали именно его в силу того, что эффективно задействуется вся площадь web-страницы. Но следует сразу отметить некоторые особенности и недостатки присущие «резиновой» верстке.
Исторически сложилось, что пролистывание большого объекта на компьютере происходит сверху вниз. Для удобства листания предназначены вертикальные полосы прокрутки, клавиатурные комбинации, колесо прокрутки мыши. А вот перемещение по горизонтали происходит не так удобно, поэтому горизонтальной полосы прокрутки быть не должно. Из чего следует, что web-страница должна вписываться в окно браузера по ширине, но никак не по высоте, которая может изменяться в очень широком диапазоне. На рис. 4 видно, что реальная высота объекта не ограничена рамками браузера, но в окне показывается лишь часть страницы.
Рис. 4. Отображение объекта в окне браузера по высоте
В принципе, чем больше на странице информации, и, следовательно, больше высота объекта, тем сложнее находить нужные данные. Поэтому контент структурируют, разбивают на блоки и каждому из них дают свой заголовок, чтобы взгляду читателя было за что зацепиться.
Также следует учесть, что объем статей на сайте может дастаткова сильно различаться между собой. При этом будет меняться и высота страницы, поэтому следует заранее побеспокоиться о том, чтобы макет отображался без Errors, несмотря на различное значение высоты.
Все объекты на web-странице имеют прямоугольную форму. Этот простой постулат не всегда согласуется с тем, что мы видим в действительности, поэтому следует сделать пояснения. В отличие от традиционной верстки (речь идет о полиграфических материалах), где в файл можно вставлять любые объекты, в том числе и векторные фигуры произвольной формы, верстка web-страниц имеет ряд ограничений. К числу ограничений относится и то, что добавляемые объекты прямоугольны. Причем это относится к их форме, но не к содержимому, благодаря чему требуемый нам дизайн можно конструировать с помощью набора рисунков. На рис. 5 показана картинка весьма неправильной формы. Но из-за того, что фон у этого рисунка совпадает с фоном web-страницы, исходная прямоугольность Имаги не видна.
Рис. 5. Изображение на рисунке может иметь произвольную форму
Однако стоит добавляем вокруг рисунка рамку, как становится понятно, что изображение
все-таки прямоугольно (рис. 6). Например, если включить обтекание картинки
контентом, то он будет обходить ее именно по границе рамки.
Рис. 6. Но сам рисунок остается прямоугольным
Данная особенность породила некоторые техники связанные с версткой, которые перечислены далее.
Рисунки не только применяются для иллюстрации контента, но и выполняют на сайте много различных ролей, например, используются для разработки привлекательного дизайна, служат распоркой между ячейками таблицы, создают градиентные заливки, фоновые Имаги и т.д.
Один рисунок может занимать слишком большую исходную площадь. Разрезав его на прямоугольники, получим замечательный конструктор, в котором одни фрагменты Имаги допускается заменять контентом, другие анимацией, а третьи модифицировать «на лету». Таким образом, имеем в своем распоряжении средство для обхода прямоугольной природы рисунков, ведь в «склеенном» рисунке может недоставать некоторых фрагментов, уголков, например.
Фоновый рисунок удобен тем, что он может заполнять всю отведенную ширину или высоту под блоком. Это позволяет создавать линии или другие декоративные элементы, которые привязываются к ширине или высоте контента и не зависят от размеров окна. К тому же поверх фона можно накладывать контент, что также расширяет возможности по дизайну web-страниц.
Если средства верстки имеют определенные ограничения, то почему бы не создать контент в графическом редакторе и не вставить его в качестве картинки или Flash? Это гарантирует, что контент сохранит свой вид и начертание несмотря ни на какие внешние условия. Однако здесь имеется и оборотная сторона — рисунки занимают больший объем, чем рядовой контент, их сложнее править, они не индексируются поисковыми машинами, их показ пользователи могут отключить. В общем, недостатков масса, поэтому Имаги на сайте хотя и применяют вместо контента, но дастаткова ограниченно. Например, для заголовка с нашего сайта.
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект