Последнее обновление: 3 Января 2022 г.

Резиновый макет для сайта

В последнее время адаптивная сборка стала очень актуальной. Фактически, адаптивная сборка сайта – это возможность. Скажем, Google обещает, что если сайт не оптимизирован для просмотра на мобильных устройствах, то его ранжирование в этой поисковой системе будет проводиться (при поиске с мобильных устройств) с учетом указанного фактора. Т.е. сайт для мобильных устройств пессимизируется (понижается в результатах поиска). Возможно, аналогичная политика проводится и Яндексом.

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

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

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

Вначале наметим общую структуру сайта. Пусть будет стандартно: сверху заголовочная часть ("шапка"), затем три колонки (две крайние для ссылок и прочей информации, средняя – для контента). После чего так называемый футер (или подвал сайта). Там можно разместить счетчики (посещаемости), указатели ТИЦ и PR, информацию об авторских правах, а также прочие дополнительные материалы, в частности, те, загрузка которых может быть необязательной. Т.е. ориентировочная структура будет таковой, как на рисунке. За каждый блок, естественно, отвечает "свой" div.

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

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

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

<head> …. <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=yes"> …. </head>

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

В принципе, некоторые вебмастера устанавливают user-scalable=no". При этом пользователь лишается возможности изменить масштаб страницы, в частности, путем вращения колесика мыши (правда, это относится только к рядовому пользователю; более опытный в течение 1...3 секунд ликвидирует этот запрет). Так вот, мы КАТЕГОРИЧЕСКИ не рекомендуем так делать. Все-таки, надо понимать, что пользователь пришел к Вам на сайт (да-да, к ВАМ, родному) - не в тюрьму, где ему будут навязывать правила поведения и распорядка, а, в основном, для того, чтобы что-то найти для себя полезное и интересное. А тут видит: его свобода уже ущемляется, начная с первой же секунды просмотра страницы... Дело тут, конечно, сугубо личное, но, к примеру, что касается лично меня (автора этой статьи), я тут же ухожу с сайта, как только обнаруживаю подобное, мягко говоря, навязывание и ограничение моих прав на просмотр информации. Это относится, в частности, и к разным мелькающим фавиконкам, всплывающим окнам (правда, за это, слава богу, поисковики пессимизируют сайты), не говоря уже о баннерах, отвлекающих внимание от прочтения контента страницы (хотя, с ними неплохо справляется AdBlock+, а также кое-какие наши авторские технологии - в тех нечастых случаях, когда, несмотря на наличие частей страницы, мешающих ее восприятию, все-таки необходимо ее прочитать). Так что, друзья, давайте уважать друг друга. Кстати, именно по этой причине дизайн нашего сайта минимален - в своем оформлении.

Любой человек должен понимать, что способ, при помощи которого удобно просматривать страницу, определяется именно ПОЛЬЗОВАТЕЛЕМ, но никак не вебмастером. Поэтому последний должен предоставить ему как можно больше возможностей для этого.

Далее нужно обозначить соответствующие блоки – в соответствии с выделенной схемой.

Верхняя часть (Top)

Контент

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

</div> <div id="right_column" style="position:absolute; top:0px; right:0px; border: 2px solid blue;"> Ссылка1 Ссылка2 Ссылка3 Ссылка4 … </div> </div> </div> <div id="footer" style="border: 2px solid gray;">А это подвал сайта. Здесь можно разместить ту дополнительную информацию, которой не нашлось места выше. Некоторые компании размещают свои реквизиты не в верхней части сайта, а именно – здесь, в подвале.</div>

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

Кстати, о браузере

В настоящее время есть ДВА браузера Firefox: обычный (оранжевый) , предназначенный для обычных пользователей, и "темный" , предназначенный для разработчиков. На самом деле, в "темном" вполне можно работать также и пользователям, просто он содержит некоторые функции, которые можно использовать при разработке сайта. В частности, у него есть опция "адаптивный дизайн". Поэтому будем тестировать полученный html-код в "темном" браузере Firefox (впрочем, ничего не мешает воспользоваться Microsoft Explorer, Opera, Safari…). В этих, как, впрочем, и вообще в любых браузерах можно также воспользоваться аналогом адаптивного дизайна.

Если что, скачать "темный" браузер можно с официального сайта mozilla.org. Вот как он выглядит, этот "темный" Firefox:

Окно темного Firefox

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

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

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

Изображение получилось странное, явно не соответствующее вышеприведенной схеме. Но, это и понятно – ведь мы не описали ни один из id; не указали ни одного класса или стиля (кроме рамок блоков div и свойства position:absolute для одного из блоков, обозначенного синим цветом). Поэтому остальные блоки расположились автоматически, т.е. по умолчанию. Потом, ссылки перечислили без абзацных отступов, вот в итоге они и получились расположенными в строчки – что слева, что справа.

Что же, опишем стили

Это можно сделать либо в заголовочной части html-кода, либо в специальном файле, имеющем расширение css. А можно прописать стили прямо в описаниях блоков div. Мы пойдем по третьему пути. Верхнюю часть сайта ("шапку") и нижнюю ("футер") форматировать не будем, для остальных блоков зададим стили. Вот какой код получится:

<div id="top">Это – верхняя часть сайта. Здесь обычно содержится его заголовок, название. Также могут присутствовать, например, интересные картинки, анимации, рекламные блоки и пр.</div> <div id="three_columns" style="border: 2px red solid; width:99%;"> <div id="left_column" style="border: 2px brown solid; width:170px; padding-bottom:10px; float:left;"> Ссылка1 Ссылка2 Ссылка3 … </div> </div> <div id="two_columns" style="border: 2px solid yellow; width:auto; position:relative; margin-left:173px; padding-bottom:10px;"> <div id="seredina" style="border: 2px solid purple;" >Контент. Здесь идет основное содержание html-страницы. Собственно, именно то содержание, ради которого она и создавалась. Эта часть сайта особенно важна для пользователя, поэтому эта страница должна быть удобно читаема, по возможности, с максимального количества устройств, способных отображать ее. </div> <div id="right_column" style="position:absolute; top:0px; right:0px; border: 2px solid blue;"> Ссылка1 Ссылка2 Ссылка3 Ссылка4 … </div> </div> <div id="footer" style="border: 2px solid gray;"> А это подвал сайта. Здесь можно разместить ту дополнительную информацию, которой не нашлось места выше. Некоторые компании размещают свои реквизиты не в верхней части сайта, а именно – здесь, в подвале.</div>

Итак, смотрим результат:

Резиновый макет (2)

Что изменилось?

Для удобства, будем далее называть в тексте блоки по их цветам на экране. В желтый блок добавилась ширина (width:auto), а также свойство position:relative. Ширина auto означает, что желтый блок будет растягиваться, автоматически подгоняясь под размер своего родителя (предка) – красного блока. Именно поэтому мы указываем, что ширина желтого блока устанавливается автоматически, а не, скажем, в пунктах (pt) или пикселях (px).

Такой момент: если мы укажем ширину не auto, а в процентах (скажем, равную 100%), то изображение несколько изменится (смотрите правый край):

Резиновый макет (3)

Видим, что в первом случае (когда width:auto) желтый блок растягивается так, чтобы касаться правой своей границей левую часть правой границы красного блока. Тогда как в случае width:100% правая граница желтого блока попросту накладывается на красный блок. В принципе, здесь особой разницы нет, но, на наш взгляд, лучше, если наложений не будет. Поэтому выбрано свойство auto.

Свойство position:relative для желтого блока необходимо для того, чтобы задать этот блок, как родительский для того блока, который, содержась в нем, будет позиционироваться абсолютно (речь идет про синий блок). Так, в отсутствии этого свойства синий блок будет позиционироваться относительно главного родителя (т.е. от всего экрана) и потому будет располагаться, начиная от правого верхнего угла ЭКРАНА (в соответствии с параметрами top:0px; right:0px;). Если же задать свойство position:relative для желтого блока, то, так как синий блок содержится ВНУТРИ него, то позиционироваться он будет относительно правого верхнего угла ЖЕЛТОГО БЛОКА, а не экрана.

Если же мы зададим свойство position:relative не желтому блоку, а допустим, серому или любому другому, в котором НЕ РАСПОЛОЖЕН синий блок, то последний опять-таки будет располагаться в правом верхнем углу ЭКРАНА, а не серого блока.

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

Присвоили желтому блоку свойство position:relative
Поместили синий блок внутрь желтого блока
Задали свойство позиционирования position:absolute (с параметрами) для синего блока

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

Кстати, почему ширина "ссылочного" коричневого блока должна быть выражена в пикселях? Дело в том, что шрифт ссылок у нас используется по умолчанию, т.е. тоже в пикселях. Потому и размер соответствующего блока должен быть установлен аналогично. Чтобы при масштабировании страницы ширина левой колонки со ссылками изменялась пропорционально изменению их размера шрифта. Понятно, что в дальнейшем придется переформатировать шрифты в относительных единицах; тогда и вместо 50px будет указано также соответствующее относительное значение.

Наконец, придадим коричневому блоку свойство float:left. Это означает, что этот блок будет обтекаться следующими элементами справа (т.е. сам блок будет находиться при этом слева – вплотную к правой границе своего родителя, т.е. красного блока).

Итак, вносим указанные изменения в код сайта

Для экономии места текстовую часть блоков опускаем:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Наш заголовок </title> <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">

Другие метатеги

<body> <div id="top">Это – верхняя часть сайта... </div> <div id="three_columns" style="border: 2px red solid; width:99%;"> <div id="left_column" style="border: 2px brown solid; width:50px; padding-bottom:10px; float:left;" > Ссылка1<br /> Ссылка2<br /> Ссылка3<br /> … </div> <div id="two_columns" style="border: 2px solid yellow; width:auto; position:relative; padding-bottom:10px;"> <div id="seredina" style="border: 2px solid purple;" > Контент. </div> <div id="right_column" style="border: 2px solid blue; position:absolute; top:0px; right:0px;"> Ссылка1<br /> Ссылка2<br /> Ссылка3<br /> Ссылка4<br /> … </div> </div> </div> <div id="footer" style="border: 2px solid gray;"> А это подвал сайта.</div> </body> </html>

Смотрим в браузере (разрешение можно увидеть слева вверху, для примера выбрано 1239х554, но можно взять и любое другое):

Резиновый макет (4)

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

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

Резиновый макет (5)

Видим, что:

Правый (синий) блок со ссылками приблизился к левому (коричневому).
Пурпурный (т.е. тот, в котором расположен основной контент) сузился, но, что важно, текст НЕ СРЕЗАЕТСЯ, а переносится автоматически. При этом ширина сайта стала уже, но зато выросла высота. А вот если бы ширина пурпурного блока была выражена в пикселях, пунктах или иных абсолютных единицах измерения, то текст в правой его части был бы СРЕЗАННЫМ. Т.е. часть контента попросту пропала бы.

Так как коричневый блок имеет свойство float:left, то текст основного контента (пурпурный блок) его обтекает

Итак, вроде уже лучше. Но есть недостатки:

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

Что же, придется внести дополнительные изменения в код. Задаем желтому блоку смещение на величину ширины коричневого блока (при этом левая граница пурпурного блока, ибо он вложен в желтый, будет начинаться с этого же смещения). Для этой цели используем левое поле (margin-left), равное 50px. Левый блок сдвинется на указанные 50 пикселей вправо. Впрочем, при просмотре на нешироких дисплеях тот факт, что основной контент обтекает желтый блок и в итоге заходит под него, будет, пожалуй, даже желательным. Поэтому величину левого поля желтого блока (margin-left) целесообразно задавать в CSS - в зависимости от ширины экрана, используя для этого, к примеру, @media.

Далее, ограничиваем пурпурный блок (основной контент) правым полем, равным также 50px, прописывая для него в стиле margin-right:50px. И вот что получается:

Резиновый макет (6)

Кстати, вместо margin-right можно было бы использовать и padding-right. Разница лишь в том, что правая граница пурпурного блока проходила бы в таком случае вплотную к правой границе желтого (а текст бы отстоял от нее на те же 50px).

Меняем разрешение и убеждаемся, что все хорошо – вплоть до таких (малых) разрешений, пока на экране может уместиться наиболее длинное слово из контента. Если же разрешение уменьшать и дальше, то синий блок будет наезжать на область текста контента (у нас получилось, что это произойдет при ширине, равной 378px)?

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

Здесь единственный выход – это масштабирование шрифтов. Оно может выполняться плавным (что сложнее и затратнее для браузера а, следовательно, нецелесообразно для устройств с малым размером экрана) либо ступенчатым. Например, средствами CSS можно задать другой (меньший) размер шрифта, если размер экрана устройства будет менее, чем 400px. Или - использовать переносы текста и/или слов, используя свойства CSS white-spase и overflow-wrap, word-wrap, word-break, line-break, hyphens, соответственно. Это можно сделать, к примеру, используя свойство @media{... }, указав там разрешение экрана, при котором необходимо использование переносов текста и/или слов.

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

Но обо всем этом поговорим попозже.

Комментарии:

Всего комментариев:0