5 техник резиновой верстки сайта

Содержание материала:

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

Видеокурсы Алексея Захаренко

Миникурс по дизайну сайта с нуля за 2 часа

Миникурс по тех.дизайну

Миникурс по фрилансу (заработку на веб-дизайне)

Миникурс по фотошопу

Видеокурсы Михаила Русакова

Создание сайта от начала и до конца

Бесплатный курс по основам HTML

Инструкция по заработку на создании сайтов под заказ

HTML5 и CSS3 для начинающих

Бесплатные уроки по созданию Интернет-магазина с нуля

Основы JavaScript, jQuery и Ajax

Бесплатный мини-курс по вёрстке сайта

Создание движка на PHP для начинающих

Бесплатный курс по основам PHP

Пример создания блога на WordPress 4

Видеокурсы WebforMyself

Корпоротивный сайт под ключ

Курс ПО Web-дизайну

Шаблон на CMS Joomla с нуля

Курсы по WordPress

5 техник резиновой верстки сайтов

Практика по оптимизации сайта

Уроки по основам адаптивной верстки

Курс по созданию интернет-магазина

Видеокурсы Евгения Попова

Уроки по основам CSS

Уроки по основам HTML

Блог на Drupal c нуля

Joomla ваш первый сайт

Уроки по основам Dreamweaver

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

Платные видеокурсы

Видеокурсы Алексея Захаренко

Формула супер-эффективности для ленивого дизайнера

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 16. Блочная верстка сайта: резиновый дизайн

Резиновый дизайн и необходимые свойства CSS

Резиновый дизайн сайта означает, что при изменении размеров окна браузера все слои масштабируются согласно текущей ширине. Это и есть основное преимущество резинового дизайна: независимо от размеров экрана, вся его область будет занята, при этом не возникают лишние полосы прокрутки при использовании «маленького» монитора.

«Резиновость» достигается за счет того, что определенные слои макета не имеют фиксированную ширину, приспосабливая свои размеры под размеры окна браузера.

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

Две колонки в резиновой дизайне

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

Свойство float для создания эффекта плавающего элемента

Рассмотрим пример, в котором присутствуют следующие блоки, изображенные на рис. 1: шапка (бордовый), меню (светло-серый), контент (белый), подвал (темно-серый).

Рис. 1. Резиновый дизайн сайта в две колонки

Левую колонку выполним с фиксированным размером, а правая колонка будет занимать остальную ширину окна, что и обеспечит «резиновость» дизайна.

1. «Разбиваем» все основные элементы страницы на блоки следующим образом:

Заголовок

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

2. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

3. Для правой колонки обязательным является свойство, определяющее внешний отступ от левого края окна браузера ( margin-left ). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:

Все остальные свойства зависят от оформления сайта.

Весь код CSS будет выглядеть так:

Результат:

Рис. 2. Левая колонка с фиксированной шириной в резиновом дизайне

Рассмотрим пример, когда фиксированной шириной обладает не левая, а правая колонка.

Код html-структуры остается прежним, меняются лишь CSS-свойства.

1. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

2. Для правой колонки задаем свойство, определяющее внешний отступ от правого края окна браузера ( margin-right ). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:

Результат:

Рис. 3. Правая колонка с фиксированной шириной в резиновом дизайне

Применение позиционирования в резиновом дизайне

При использовании данного варианта дизайна для левой или правой колонки устанавливается абсолютное позиционирование с заданием координат.
Например:
Левая колонка:

position:absolute; width: . px; left: . px; top: . px;

Правая колонка:

margin-left: . px; /* отступ слева, равный ширине первой колонки */

«Резиновость» достигается в данном случае за счет правой колонки, у которой нет определенной ширины.

Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

Результат:

Рис. 4. Резиновый дизайн сайта с позиционированием

Одинаковая высота колонок

На рис. 4 результат показывает, что колонки имеют неодинаковую высоту. Для того, чтобы колонки приобрели одинаковую высоту есть несколько вариантов использования дополнительных свойств, одним из которых является добавление границы ( border ).

Ссылка 1
Ссылка 2
Ссылка 3

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

Резиновая верстка сайта

В сайтостроении используется такой термин, как резиновая верстка. Попробуем разобраться, что он означает.

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

Для решения этих задач веб-дизайнер еще на этапе проектирования должен выбрать тип верстки сайта . Какой же она может быть для данного вида сайта?

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

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

А вот способ отображения важен для посетителя сайта. По этому признаку верстка бывает:

  • Фиксированная (статическая);
  • Резиновая (тянущаяся);
  • Гибридная;
  • Респонсивная (адаптивная).

В этой статье подробнее остановимся на резиновой верстке сайта, ее достоинствах и недостатках.

При резиновой верстке сайт масштабируется в зависимости от ширины окна браузера. Такой способ верстки появился в связи с ростом размеров мониторов и их разрешения. Первые массовые мониторы имели разрешение 640*480, потом активно начали внедряться мониторы с разрешением 800*600 и 1024*768. Возникла необходимость делать сайты, ширина которых менялась с изменением ширины окна браузера, так как сайты с фиксированной шириной не всегда адекватно отображались на различных мониторах. С одной стороны, разработчик сайта стремится использовать всю площадь больших экранов для размещения информации, с другой стороны, ему нужно учесть возможности тех пользователей, которые имеют старые мониторы с небольшим разрешением. В настоящее время размеры мониторов выросли еще больше, и никого не удивишь разрешением 2048*1152.

Технически выполнить резиновую верстку можно как с помощью таблиц, так и используя блочную структуру. Используется она и на сайтах, работающих на движках WordPress, который применяется для создания блогов, Joomla! и других. Как это сделать, в одной статье не объяснить, для этого существуют различные курсы .

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

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

Web-страница состоит из элементов различных типов, которые масштабируются по-разному. Например, текстовые блоки можно легко растягивать по горизонтали. Именно в них содержится обычно большая часть информации, а, значит, при резиновой верстке экран будет максимально информативен. Но растягивать бесконечно страницу нельзя, ее будет трудно читать. Считается, что оптимальная ширина текста должна составлять около 45 символов. Глаз должен охватывать всю строку целиком, тогда при чтении утомляемость будет минимальной. Если же текст на странице резинового сайта растянуть на всю ширину монитора размером, например, 27”, то при чтении придется даже поворачивать голову. В этом случае текст можно располагать колонками, но такое решение возможно, если контент состоит из отдельных не связанных друг с другом коротких блоков. Если же расположить колонками большой непрерывный текст, его придется прокручивать сначала вниз, а потом – вверх, на начало следующей колонки, что неудобно для пользователя.

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

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

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

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

Таким образом, резиновая верстка сайта имеет как плюсы, так и минусы. Растяжение ширины страницы позволяет увеличить ее информативность, но тянуть бесконечно нельзя, как и сжимать.

Эти противоречия можно решить, используя так называемую «полурезиновость», когда растяжение происходит до определенных пределов.

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

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

Для освоения возможностей верстки сайта рекомендую единственный в своем роде курс «Верстка-Мастер. От теории до верстки популярных шаблонов» .

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Проголосуйте за статью, нажмите кнопку социальной сети.

Адаптивная вёрстка

17 августа 2020

В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? — спрашивают наши зрители Екатерина и Константин — как правильно их применять? Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.

Когда мобильного веба не было даже в самых смелых фантазиях, весь интернет был на десктопных компьютерах с небольшими экранами. Оптимизирован для разрешения 1024 на 768 и браузера Internet Explorer 5! — гордо писали тогда на сайтах. Но прошло время, экраны подросли и пришлось к этому как-то подстраиваться. Сначала это были просто резиновые таблицы: колонки по 25%, содержимое 50%, а в отдельной строке colspan=3 и распорка для минимальной ширины. Надеюсь, вы не поняли о чём я сечас говорил.

Топ-пост этого месяца:  Как переписывать пользовательские ссылки в OpenCart

Резиновая вёрстка — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины. Высоту в вебе в принципе не принято задавать — обычно она подстраивается под содержимое. Фикс или резина? — спрашивали верстальщики 2000-х про макет и втайне надеялись на второе, поинтереснее. Сейчас сложно представить, но когда-то это было прорывной идеей, которая усложнила вёрстку, но сделала первый шаг в правильном пути.

Таблицы для раскладки ушли, а резиновая вёрстка осталась. Если у вас эластичные флоаты, флексы… да хоть гриды! — это всё равно резиновая вёрстка. Но если ширина внешнего контейнера зафиксирована — это уже фикс, сколько бы ни было резины внутри. Чуть более универсальный фикс, но всё равно. В общем, главное чтобы сайт двигался так или иначе вместе с окном, а не торчал кирпичом где-то в центре или с краю.

Когда расширился круг устройств с интернетом и появились первые мобильные браузеры — встала задача как-то подстраиваться под них. Простая резина здесь уже не справлялась — нужно было переписывать стили. Одной из первых, в 2006 году появилась техника адаптивной раскладки Марка ван ден Доббельстина. В статье на A List Apart Марк предложил добавлять классы при загрузке или ресайзе окна и на каждый диапазон вешать стили. До первой реализации медиавыражений в Safari оставалось два года.

Когда в начале десятых годов появилось для чего адаптировать и чем адаптировать — мобильные браузеры и медиавыражения — вышли книги, давшие названия подходам: «Адаптивный веб-дизайн» Аарона Густавсона и «Отзывчивый веб-дизайн» Итана Маркота. Подходы Аарона и Итана продолжали идеи Марка, но с более современными технологиями и несколько отличались направлением мысли.

«Адаптивный веб-дизайн» Аарона предлагал гибко адаптировать сайты к возможностям устройств и браузеров. Важной частью этой философии был ненавязчивый JavaScript с прогрессивным улучшением — и всё это поверх семантической разметки. Хотя Аарон писал не совсем об этом, сегодня принято считать, что главное в адаптивной вёрстке — привязка к конкретным разрешениям и устройствам. Стили переключаются от одного брейкпоинта к другому, то есть у вас есть фиксированные макеты для iPad и iPhone, а то, что между ними вас не волнует.

«Отзывчивый веб-дизайн» Итана ставил во главу три вещи: резиновый макет, гибкие картинки и медиавыражения. Все размеры и отступы Итан предлагал указывать в процентах с сумасшедшими дробями для точности. Отличительной чертой подхода стало плавное изменение сайта, с ориентацией не на конкретные устройства, а на содержимое. То есть ваш резиновый макет хорошо выглядит не только на iPhone и iPad, но и в любой точке между ними.

Чуть позже Итан сформулировал ещё один важный принцип в книге «Сначала мобильные». Если до тех пор отправной точкой для адаптации вёрстки служила десктопная версия, то он предложил перевернуть схему и начинать с мобильной версии, а потом её улучшать. Почему так? Потому, что усложнять простое проще, чем упрощать сложное. Вдуматесь! А ещё потому, что нет соблазна просто спрятать сложно адаптируемое и обделить мобильных пользователей.

Ну как, стало понятно? Вот адаптивная, вот отзывчивая… М-м, нет, не очень. Из-за путаницы между техникой адаптивной раскладки и философией адаптивного веб-дизайна, из-за того, что все эти подходы прекрасно сочетаются и уже не проследить чёткую границу между ними — из-за всего этого, я плюнул на терминологическую чистоту и стал называть всё это адаптивным дизайном или адаптивной вёрсткой. Это понятие всегда было достаточно широким, чтобы вместить все остальные способы.

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

Ну и как теперь верстать? Просто! Сначала делаете мобильный резиновый макет, который хорошо вписывается в небольшие устройства. А когда размеры экрана или окна начинают расти — начинаете использовать появившееся пространство для улучшения интерфейса. Появляется боковая колонка, вторая, растут размеры картинок и подгружаются новые разрешения и так далее. То есть медиавыражения меняют стили не когда вы дошли до экрана самого модного телефона, а когда это нужно для содержимого сайта и удобства пользователя. Мы именно так и учим делать на интенсиве по продвинутой вёрстке.

Чтобы сделать хороший адаптивный сайт, нужно понимать много нюансов: вьюпорт, медиавыражения, адаптивные картинки и другое. Сегодня мы сделали первый шаг и разобрались с подходами: он оказывается всего один. Про остальное ещё поговорим!

5 техник резиновой верстки сайта. #[email protected] Техника 1

Ширина элемента и свойство float
Техника 2. Создание резинового меню, используя списки
Техника 3. Выстраиваем элементы позиционированием
Техника 4. Центрирование элемента переменной ширины
Техника 5. Выравнивание по ширине резинового блока

Техника 1. Ширина элемента и свойство float — видео смотреть онлайн

Техника 2. Создание резинового меню, используя списки — видео смотреть онлайн

Техника 3. Выстраиваем элементы позиционированием — видео смотреть онлайн

Техника 4. Центрирование элемента переменной ширины — видео смотреть онлайн

Техника 5. Выравнивание по ширине резинового блока — видео смотреть онлайн

Комментарии (12)

Андрей Соколов

Антон, уроки датированы 24 окт. 2012. Что тут говорить.

Александр Морозов

Михаил, я думаю верстать в блокноте — такой себе повод для гордости)

Михаил Савченко

Александр, да вобщем то вы правы, скорее уж повод для насмешок.. ну и сказано было посмеяться больше. хотя я бы и не стал смеяться. всё таки верстка в хтмл не так сложна на самом деле. много копипастом делается, как и в случае с более сложными языками между прочим..

Александр Морозов

Михаил, извиняюсь, если задел, но как-то нет повода отказываться от хорошего, если оно есть

Михаил Савченко

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

Roma Makarow

Антон, А ты флексом пользуешься в каких то определенных местах/модулях, или повсеместно? Серьёзные проекты? Запариваетесь ли над тем, чтобы дать обычную верстку, если клиент не поддерживает флекс?

Владимир Черкасов

Михаил, а что их знать, обычно они сами тебя находят ))

Михаил Савченко

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

Антон Иванов

Roma, в большинстве случаев. Проекты средние. IE10+ поддержка, autoprefixer

Делаем разметку области контента с использованием резиновой верстки

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

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

Содержание

  • Выбор способа резиновой верстки для блока ротатора
  • Разметка блока ротатора
  • Выбор способа резиновой верстки блока основного содержания и сайдбара
  • Разметка блока основного содержания
  • Разметка блока сайдбара
  • Исходные файлы сайта

Выбор способа резиновой верстки для блока ротатора

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разметка блока ротатора

Исходя из этого, представим структуру HTML-кода ротатора в следующем порядке:

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

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

src = «images/photo_1.jpg» alt = «Маркировка автомобиля, картинка 1» >

Резиновая верстка сайта

5 техник резиновой верстки сайтов

  • Автор: Андрей Бернацкий
  • Год издания: 2020
  • Язык: Русский
  • Жанр: Обучающие видеоуроки
  • Формат: MP4

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

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

Соответственно верстку своих проектов вы сможете исполнять по самым высоким стандартам, каким бы сложным не был дизайн вашего «детища». Современные «резиновые» сайты дадут вам фору перед конкурентами — они более эффективны и прибыльнее.

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

Еще по теме создания сайтов:

Создание сайта с нуля (PDF)

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

Курсы Евгения Попова

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

Верстка сайта на HTML и CSS

Перед вами уроки по верстке сайтов на HTML и CSS. Это незаменимое руководство для новичков, планирующих делать востребованные и современные сайты, как для себя, так и на заказ.

Заработок на создании сайтов под заказ

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

Верстка сайта на HTML5 и CSS3

Видеокурс по изучению технологий верстки адаптивных сайтов. Основанием всех современных сайтов являются «два кита»: новейшие версии веб-языков HTML5 и CSS3.

Создание одностраничных сайтов под ключ

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

Интернет-магазин Opencart 2.0 в примерах

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

SEO раскрутка (PDF)

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

Всё о вёрстке в помощь начинающему разработчику

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

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

Типы отображения:

  • Фиксированный;
  • Резиновый;
  • Адаптивный;

Фиксированная вёрстка (также она называется статической) представляет собой такой вид дизайна страницы, в котором размеры указываются точно в пикселях (px) и являются статичными вне зависимости от размеров экрана.

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

Резиновую вёрстку выполнить сложнее, нежели фиксированную. Здесь размеры принято задавать в процентах от ширины экрана, на котором выполнено открытие страницы. Такая страница с резиновым дизайном займёт всю ширину окна браузера и, казалось бы, всё хорошо, но! На широких мониторах сайт расплывётся, хотя, к примеру, на квадратном может быть всё красиво.

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

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

Под эту верстку обычно создаётся несколько макетов под основные разрешения девайсов. Для реализации подобной вёрстки под каждый размер экрана прописывают свои стили CSS и правила @media.

Принципы создания вёрстки

Существует табличный и блочный принцип вёрстки.

Табличная верстка считается устаревшей, хотя элемент «таблица» входит в спецификацию HTML5 и не помечен как устаревший. Но вот верстать таблицу, внутри ячейки которой содержится другая таблица — является устаревшим методом. В отображении же табличных данных в таблице нет ничего плохого. Весомым недостатком в случае использования таблиц будет задержка вывода страницы: пока браузер полностью не загрузит таблицу на локальную машину – содержимое не будет отображено; браузер видит таблицу как отдельный объект.

При блочной вёрстке особое внимание уделено тегу

Какой же метод использовать

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

Домашнее задание читателям: с помощью какого метода верстки был создан дизайн данного портала и какой принцип вёрстки использовался?

Лучшее — людям: профессия «Верстальщик».

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

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

Типы отображения:

  • Фиксированный;
  • Резиновый;
  • Адаптивный;

Фиксированная вёрстка (также она называется статической) представляет собой такой вид дизайна страницы, в котором размеры указываются точно в пикселях (px) и являются статичными вне зависимости от размеров экрана.

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

Резиновую вёрстку выполнить сложнее, нежели фиксированную. Здесь размеры принято задавать в процентах от ширины экрана, на котором выполнено открытие страницы. Такая страница с резиновым дизайном займёт всю ширину окна браузера и, казалось бы, всё хорошо, но! На широких мониторах сайт расплывётся, хотя, к примеру, на квадратном может быть всё красиво.

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

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

Под эту верстку обычно создаётся несколько макетов под основные разрешения девайсов. Для реализации подобной вёрстки под каждый размер экрана прописывают свои стили CSS и правила @media.

Принципы создания вёрстки

Существует табличный и блочный принцип вёрстки.

Табличная верстка считается устаревшей, хотя элемент «таблица» входит в спецификацию HTML5 и не помечен как устаревший. Но вот верстать таблицу, внутри ячейки которой содержится другая таблица — является устаревшим методом. В отображении же табличных данных в таблице нет ничего плохого. Весомым недостатком в случае использования таблиц будет задержка вывода страницы: пока браузер полностью не загрузит таблицу на локальную машину – содержимое не будет отображено; браузер видит таблицу как отдельный объект.

При блочной вёрстке особое внимание уделено тегу

Какой же метод использовать

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

Домашнее задание читателям: с помощью какого метода верстки был создан дизайн данного портала и какой принцип вёрстки использовался?

Резиновая верстка сайта

В сайтостроении используется такой термин, как резиновая верстка. Попробуем разобраться, что он означает.

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

Для решения этих задач веб-дизайнер еще на этапе проектирования должен выбрать тип верстки сайта . Какой же она может быть для данного вида сайта?

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

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

А вот способ отображения важен для посетителя сайта. По этому признаку верстка бывает:

  • Фиксированная (статическая);
  • Резиновая (тянущаяся);
  • Гибридная;
  • Респонсивная (адаптивная).

В этой статье подробнее остановимся на резиновой верстке сайта, ее достоинствах и недостатках.

При резиновой верстке сайт масштабируется в зависимости от ширины окна браузера. Такой способ верстки появился в связи с ростом размеров мониторов и их разрешения. Первые массовые мониторы имели разрешение 640*480, потом активно начали внедряться мониторы с разрешением 800*600 и 1024*768. Возникла необходимость делать сайты, ширина которых менялась с изменением ширины окна браузера, так как сайты с фиксированной шириной не всегда адекватно отображались на различных мониторах. С одной стороны, разработчик сайта стремится использовать всю площадь больших экранов для размещения информации, с другой стороны, ему нужно учесть возможности тех пользователей, которые имеют старые мониторы с небольшим разрешением. В настоящее время размеры мониторов выросли еще больше, и никого не удивишь разрешением 2048*1152.

Технически выполнить резиновую верстку можно как с помощью таблиц, так и используя блочную структуру. Используется она и на сайтах, работающих на движках WordPress, который применяется для создания блогов, Joomla! и других. Как это сделать, в одной статье не объяснить, для этого существуют различные курсы .

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

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

Web-страница состоит из элементов различных типов, которые масштабируются по-разному. Например, текстовые блоки можно легко растягивать по горизонтали. Именно в них содержится обычно большая часть информации, а, значит, при резиновой верстке экран будет максимально информативен. Но растягивать бесконечно страницу нельзя, ее будет трудно читать. Считается, что оптимальная ширина текста должна составлять около 45 символов. Глаз должен охватывать всю строку целиком, тогда при чтении утомляемость будет минимальной. Если же текст на странице резинового сайта растянуть на всю ширину монитора размером, например, 27”, то при чтении придется даже поворачивать голову. В этом случае текст можно располагать колонками, но такое решение возможно, если контент состоит из отдельных не связанных друг с другом коротких блоков. Если же расположить колонками большой непрерывный текст, его придется прокручивать сначала вниз, а потом – вверх, на начало следующей колонки, что неудобно для пользователя.

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

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

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

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

Таким образом, резиновая верстка сайта имеет как плюсы, так и минусы. Растяжение ширины страницы позволяет увеличить ее информативность, но тянуть бесконечно нельзя, как и сжимать.

Эти противоречия можно решить, используя так называемую «полурезиновость», когда растяжение происходит до определенных пределов.

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

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

Для освоения возможностей верстки сайта рекомендую единственный в своем роде курс «Верстка-Мастер. От теории до верстки популярных шаблонов» .

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Проголосуйте за статью, нажмите кнопку социальной сети.

Резиновый сайт

Здравствуйте уважаемые начинающие веб-мастера.

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

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

Всё дело в том, что мониторы имеют самые разные размеры, от малюсеньких мобильных, до огромных домашних кинотеатров.

А, допустим, блочный каркас имеет фиксированную ширину в 900 px.

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

А на мониторе шириной более 2000 px, наши 900, будут смотреться как тонкая полоска. А ведь, обычно, большие экраны устанавливаются, на значительном расстоянии от пользователя.

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

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

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

Для примера возьмём каркас с двумя колонками, расположенными справа и слева от контента.

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

Итак, блочный каркас сайта с двумя боковыми колонками.

Теперь возьмём код этого каркаса, и посмотрим, что в нём нужно изменить. А изменять будем, в основном, единицы измерения в свойстве width .

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

И проценты эти будут браться от ширины экрана, а так как экраном у нас является тег body , то он, по умолчанию, будет составлять 100%.

Сделав эти изменения, попробуем уменьшить ширину экрана, и посмотрим, что произойдёт с нашим каркасом сайта.

Как видите, все блоки равномерно уменьшились, относительно размера окна браузера. Если это окно увеличить, то все блоки так же пропорционально увеличатся.

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

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

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

То же самое относится к изображению в шапке сайта, и соответственно, к высоте блока header .

Если же шапка сайта украшена размноженным изображением, или фоновым цветом, то задавать ей высоту не нужно, так как она, по любому, определиться содержанием.

Для слишком маленьких и слишком больших мониторов есть смысл ввести в код ещё два свойства. Это

max-width — максимальная ширина сайта;

min-width — минимальная ширина сайта;

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

Чтоб до этого не доходило, и устанавливается min-width для блока wrapper .

max-width выбирается исходя из понятий оптимального восприятия.

Такие ограничения можно вводить для любого блока сайта.

Ещё один момент на который необходимо обратить внимание — это размер текста font-size

Размер текста в браузерах, обычно задаётся по умолчанию и составляет 100%. Но это относиться к тегам P и H1….H6 , то есть к стандартному тексту, и стандартным заголовкам.

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

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

Желаю творческих успехов.


— Какую температуру вы предпочитаете на
отдыхе: сорок градусов по Цельсию, или по Фаренгейту?
— По Менделееву!

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

Вот в этом я к сожалению не волоку.

На этот вопрос ответит скорее всего только техподдержка хостинга. У них есть такой показатель как CP — величина, характеризующая время, затраченное центральным процессором на выполнение процессов пользователя (например, обработку http-запросов web-сервером, выполнение php-скриптов, выполнение задач через crontab), другими словами допустимая нагрузка.

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

Спасибо! Вы мне очень помогли в создании небольшого сайта.
Я хотел задать вопрос, правда не по теме. Сколько клиентов способен выдержать сайт на чистом html?
Дело в том, что я жадный))) и не хочу платить за хостинг, поэтому выбираю бесплатный.
Тот, который я выбрал имеет ограничение по трафику 5 Гб/мес. Скорость почему-то 250 мбит/с, наверное для всего хостинга.
Мне интересно сколько клиентов выдержит такой сайт
1. Чистый html.
2. Все картинки, используемые сайтом, находятся на pixabay как thumbs.
3. Средний размер страницы 60 кб.
4. Используемое ОЗУ: 70 мегабайт максимум (условия хостинга но не бегет правда а другого)
5. Процессор неизвестно. Около 100 мгц. Судя по озу.
6. Количество страниц сайта 10 максимум.
7. Максимальный размер сайта 1 мегабайт.
Мне нужно хотя бы 1000 клиентов в минуту. Чтобы не падал.

Здравствуйте Евгений.
1. table я использую строго по назначению, т.е. для создание таблиц, а табличная вёрстка, которую я показал — это старинный и простейший вариант из тех времён, когда небыло ни планшетов ни смартфонов, и ни о какой адаптации слыхом не слыхивали. А свойства css flex, inline-block применяются в тех случаях, когда они более уместны. Нет такого, что лучше, а что хуже. Всё зависит от задачи, а уж как её лучше реализовать — это сугубо индивидуально для каждого случая.

2. Без @media screen обойтись нельзя, так как экранов разных размеров много, и для каждого диапазона нужно подбирать позиционирование форму и размер элементов, а так-же размеры шрифтов. Сайдбары до возможной читабельности сохраняются на своём месте, а потом переносятся в конец статьи. Для вызова инфы из них, можно сделать меню вверху страницы, которое появляется тогда, когда сайдбар уходит вниз. Зачастую, для мобильных размеров, вверх страницы выводится несколько меню — меню страниц, меню рубрик, меню записей, меню блоков сайдбара. Можно, для экономии места одно раскрывающееся меню, в несколько уровней, в котором будут последовательно открываться все эти меню со своими пунктами во втором уровне. Всё зависит от важности того что вы хотите показать. Короче поле для творчества.

Этот сайт у меня толком не адаптирован, так как посещений с мобил почти нет, но вот пример другого https://sekretymastera.ru, в котором мне кажется удалось неплохое меню сайдбара в самом верху страницы. Появляется при экране 700 пикселей. Сайт ещё в стадии создания, поэтому в меню много свободного места.

Доброго времени суток! Помогите спасите! уже давно увлекся созданием сайтов и понял что это идеальная для меня работа и вам за это отдельное спасибо! Но я не могу никак найти ответы на вопросы который как по мне одни из самых важных:
1) Я часто замечал что при верстке сайта вы используете тег table. Скажите, при верстке адаптивного сайта что является лучшим инструментом: flex, inline-block или как у вас table? и из этого вытекает следующий вопрос:
2) при верстке адаптивного сайта, можно ли совсем обойтись без @media: например если у меня два sidebar или пусть даже один в мобильной версии он/они смотрится ужасно(текст маленький, нечитабельный). Можно ли и (и собственно куда) убирать сайдбары при разрешении в котором они становятся нечитабельны и некрасивы?
Заранее огромное спасибо!

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

Здравствуйте!
Статья очень понравилась, хотелось бы поинтересоваться, сколько будет стоить заказать у вас мобильную версию сайта?

Большое спасибо, долгое время не мог найти толковый ответ на этот вопрос. Хороший ресурс)

полезная статья. понравилось

Я то этим не озадачивался, но могу дать Вам классную наколку. Есть такая соц. сеть «Страна Пенсионерия». К сожалению ссылка не сохранилась. Я когда-то в ней активно участвовал под ником Мастер. Там есть модератор Леди Ди, большая специалистка по самописным сайтам. Как-то я задавал ей такой же вопрос, и она сказала, что есть маленький скрипт для этого.

Найдите в Гугле эту сеть, она живая, и обратитесь к Леди Ди. Можно передать привет от меня. Должна помочь. Хороший человек.

Очень интересно! У меня сайт статистический на HTML4.Страниц не мало. И возникает вопрос: 1.Возможно ли дизайн моего сайта сделать резиновым?
2. Изменения на всех страницах делать вручную?
Спасибо
С уважением
Владимир

Конечно можно. Правда он больше информативный, чем дизайнерский, и в нём еще всего 9 страниц. Времени не хватает — строимся, но пишу помаленьку.
Милости прошу — http://sekretymastera.ru/nowosti/stenyi-iz-keramzita/. Кстати он резиновый, правда ещё не совсем доведённый, потому что я его уже начал переделывать на адаптивный.
Спасибо за отзыв!
В строке «Сайт», в комментариях, укажите Ваш сайт. Будет время загляну.

Доброго время суток. Безумно понравился ваш сайт. Все понятно и доступно. Супер!Огромный респект! Спасибо вам огромное. Очень интересно посмотреть на ваши другие сайты. Читала, что у вас есть сайт про строительство, но никак не могу найти адресс. Очень уж хочется посмотреть.:)Если можно, конечно.

Топ-пост этого месяца:  Как удалить комментарий и с ним все его дочерние или удаляем комментарии в WordPress ветками
Добавить комментарий