Резиновый сайт
Здравствуйте уважаемые начинающие
веб-мастера.
В этой статье рассмотрим, как блочный каркас сайта, созданный нами в предыдущей статье, сделать резиновым.
Сначала о том, что из себя представляет резиновый каркас сайта, и чем он отличается от простого блочного каркаса, и зачем он нужен.
Всё дело в том, что мониторы имеют самые разные размеры, от малюсеньких мобильных, до огромных домашних кинотеатров.
А, допустим, блочный каркас имеет фиксированную ширину в 900 px.
На мобильном мониторе у сайта появится полоса горизонтальной прокрутки, и просмотреть сайт, можно будет только передвигая прокрутку, то есть частями, умещающимися в окне экранчика.
А на мониторе шириной более 2000 px, наши 900, будут смотреться как тонкая полоска. А ведь, обычно, большие экраны устанавливаются, на значительном расстоянии от пользователя.
И в том и в другом случае, просмотр сайта с фиксированной шириной, будет очень неудобен.
Поэтому и нужен так называемый резиновый каркас, чтоб пользователи с экранами любых размеров, могли комфортно просматривать Ваш ресурс.
Давайте подробно рассмотрим, как создать резиновый каркас сайта из блочного каркаса, который мы создали в двух предыдущих статьях.
Для примера возьмём каркас с двумя колонками, расположенными справа и слева от контента.
Наша задача сделать так, чтоб все элементы пропорционально и корректно меняли свой размер, в зависимости от размера монитора, и не становились похожими на картинку, расположенную в начале поста.
Итак, блочный каркас сайта с двумя боковыми колонками.
Теперь возьмём код этого каркаса, и посмотрим, что в нём нужно изменить. А изменять будем, в основном, единицы измерения в свойстве width.
В этом коде они заданы в пикселях, и ширина блоков, таким образом, является фиксированной. Мы же будем задавать их в процентах.
И проценты эти будут браться от ширины экрана, а так как экраном у нас является тег body, то он, по умолчанию, будет составлять 100%.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#wrapper{
width: 900px; /*Меняем на 80%*/
outline: 1px solid #787274;
padding: 10px;
margin: 0 auto;
}
#header{
height: 80px;
background: #25b33f;
margin-bottom: 10px;
}
#sidebar1{
height: 80px;
background-color: #2ff553;
margin-bottom: 10px;
width: 200px; /*Меняем на 20%*/
float: left;
}
#sidebar2{
height:80px;
background-color: #2FF553;
margin-bottom: 10px;
width: 200px; /*Меняем на 20%*/
}
#content{
height: 80px;
background: #9ef7af;
margin: 0 0 10px 210px; /*Меняем 210 на 20.5%*/
width: 480px; /*Меняем на 59%*/
}
#footer{
height: 80px;
background: #41874e;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Сделав эти изменения, попробуем уменьшить ширину экрана, и посмотрим, что произойдёт с нашим каркасом сайта.
Как видите, все блоки равномерно уменьшились, относительно размера окна браузера. Если это окно увеличить, то все блоки так же пропорционально увеличатся.
Высота блоков не учитывается, так как она зависит от содержания, и на читабельность не влияет.
Однако это утверждение не подходит для изображений. По умолчанию, размер картинок задаётся в пикселях. И, чтобы их размер так же менялся, как и у блоков, соответственно размеру экрана, его нужно задать в процентах, и ширину, и высоту.
Если высоту изображений не задать в процентах, то они, на разных мониторах будут вытягиваться в высоту.
То же самое относится к изображению в шапке сайта, и соответственно, к высоте блока header.
Если же шапка сайта украшена размноженным изображением, или фоновым цветом, то задавать ей высоту не нужно, так как она, по любому, определиться содержанием.
Для слишком маленьких и слишком больших мониторов есть смысл ввести в код ещё два свойства. Это
max-width — максимальная ширина сайта;
min-width — минимальная ширина сайта;
Минимальный размер устанавливается в тех пределах, когда дизайн сайта при уменьшении экрана, начинает катастрофически рушиться.
Чтоб до этого не доходило, и устанавливается min-width для блока wrapper.
max-width выбирается исходя из понятий оптимального восприятия.
Такие ограничения можно вводить для любого блока сайта.
Ещё один момент на который необходимо обратить внимание — это размер текста font-size
Размер текста в браузерах, обычно задаётся по умолчанию и составляет 100%. Но это относиться к тегам P и h2….H6, то есть к стандартному тексту, и стандартным заголовкам.
Если же Вам потребуется создать текст или заголовок (например в шапке сайта), какого либо нестандартного размера, то font-size ему нужно задавать в процентах от значения по умолчанию.
Я, конечно забегаю немного вперёд, но за то, когда Вы научитесь создавать шапку сайта, и заполнять каркас сайта текстом и изображениями, прочитав следующие за этой, статьи моего блога, то Вам уже будет ясно, как сделать шаблон, равномерно отображающийся в мониторах разных размеров.
Желаю творческих успехов.
Перемена
— Какую температуру вы предпочитаете на
отдыхе: сорок градусов по Цельсию, или по Фаренгейту?
— По Менделееву!
Каркас сайта (продолжение) < < < В раздел > > > Адаптивный сайт
Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster
Резиновый макет сайта. | Веб-мастерская Ларисы Ворониной
Резиновый макет сайта от фиксированного отличается тем, что ширина колонок может меняться в зависимости от разрешения экрана.
HTML разметка резинового макета.
Файл index.html представляет собой блочную верстку.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<link rel=»stylesheet» type=»text/css» href=»style.css» />
</head>
<body>
<div>
<div>
<h2>Шапка сайта</h2>
</div>
<div>
<h3>Сайдбар</h3>
</div>
<div>
<h3>Контент</h3>
</div>
<div>
<h3>Рекламный блок</h3>
</div>
<div>
<h3>Подвал</h3>
</div>
</div>
</body>
</html>
CSS стили резинового макета.
В файле style.css пишем стили.
html, body {
height: 100%;
background: #000;
}
.wrapper {
width: 90%;
max-width: 1200px;
height: 100%;
overflow: hidden;
}
.head {
width: 100%;
height: 100px;
text-align: center;
background: #ccc;
margin: 0.5% 0;
}
.sidebar {
float: left;
width: 20%;
height: 70%;
text-align: center;
background: #ccc;
margin: 0.5% 0.5% 0.5% 0;
}
.content {
background: #ccc;
width: 58%;
float: left;
margin: 0.5%;
height: 70%;
text-align: center;
}
.advert {
background: #ccc;
width: 20%;
float: right;
margin: 0.5% 0 0.5% 0.5%;
height: 70%;
text-align: center;
}
.footer {
background: #ccc;
margin: 0.5% 0;
height: 70px;
float: left;
overflow:hidden;
width: 100%;
text-align: center;
}
Обратите внимание, что ширину и высоту блоков в большинстве случаев мы указываем в процентах.
Проверка и тестирование на «резиновость».
Открываем макет в любом браузере, сворачиваем окно браузера нажав на значёк в правом верхнем углу.
И с помощью мыши меняем размер окна браузера. Макет при этом будет «адаптироваться» под размеры окна браузера.
Как сделать фиксированный макет сайта читайте здесь.
Резиновый дизайн. Двухколонный макет | htmlbook.ru
«Резиновым дизайном» будем называть структуру веб-страницы, которая автоматически приспосабливается под определенную ширину окна браузера пользователя. Такой макет имеет несколько преимуществ:
- используется все доступное пространство браузера;
- у пользователей с «маленькими» мониторами не возникает горизонтальных полос прокрутки;
- пользователи «больших» мониторов могут порадоваться, как эффективно используется вся площадь экрана, а значит деньги на монитор были потрачены не зря;
- веб-страницы удобно печатаются на бумаге любого формата.
Среди недочетов можно отметить придирчивость разных браузеров к «резиновому» макету и большая вероятность появления ошибок. В связи с чем повышается сложность верстки веб-страниц.
При верстке веб-страниц наиболее популярным является двухколонный макет, при этом одна колонка содержит набор ссылок для навигации по сайту, а вторая, более широкая — контент. Впрочем, хотя такая схема и представляет собой устоявшуюся традицию, это не значит, что обязательно ее следует придерживаться. Использование всей ширины окна позволяет более эффективно задействовать площадь веб-страницы. Так что можно добавить три, и даже четыре колонки. Это зависит исключительно от имеющегося объема информации. Учтите и обратный эффект — чем больше материала, тем больше рассеивается внимание посетителя, и ему сложнее становится ориентироваться на сайте.
На рис. 1 приведены типичные схемы размещения колонок. Красным цветом выделен заголовок страницы, светло-серым — область для навигации, рекламы, небольших текстовых вставок и т.д., а белым цветом — место для основного контента. Нижняя часть страницы, как правило, отводится для контактной информации, баннеров, кнопочек и других не самых существенных элементов.
| а. две колонки | б. три колонки | в. четыре колонки |
Рис. 1. Варианты размещения колонок
Для создания двухколонного макета применяется два способа. Первый подход использует свойство float, позволяющее состыковывать один слой с другим по горизонтали, а второй основан на задании положения слоев через позиционирование. Несмотря на некоторые недочеты, оба подхода имеют место быть в арсенале верстальщика и их надо знать для лучшего понимания принципов работы со слоями.
Использование плавающих элементов
Термин «плавающий элемент» не очень удачен, тем не менее, порой встречается в литературе. Надо понимать, что никто никуда не плавает, так называют элемент, обтекаемый с разных сторон текстом или другими объектами веб-страницы. Свойство float определяет, по какой стороне будет выравниваться слой, при этом остальные элементы будут обтекать его с других сторон.
Рассмотрим вариант, когда левая колонка имеет определенный размер, а ширина правой колонки устанавливается автоматически, исходя из ширины окна браузера. При этом ширина левой колонки может задаваться в пикселах или процентах. В табл. 1 приведены основные стилевые параметры для формирования двух колонок.
| Для левого слоя шириной 20% | |
|---|---|
| Слой 1 float: left width: 20% | Слой 2 margin-left: 21% |
| Для левого слоя шириной 200px | |
| Слой 1 float: left width: 200px | Слой 2 margin-left: 210px |
Для первого слоя требуется всего два свойства: float — заставляет второй слой располагаться рядом по горизонтали с первым слоем и width, которое устанавливает ширину колонки. Вторая колонка будет занимать все оставшееся место, поэтому для нее указывать width не нужно.
Правый слой характеризуется лишь одним свойством — margin-left, оно смещает левый край колонки на ширину левого слоя, плюс задает отступ между колонками. Поэтому величина этого свойства в табл. 1 указана 21%, где 20% сама ширина первого слоя, а на один процент приходится расстояние между колонками. В случае задания ширины одной из колонок в пикселах, код останется прежним, но поменяются единицы измерения.
В примере 1 приводится код веб-страницы, на которой содержится: заголовок, две колонки и контактная информация. Ширина первой колонки с именем menu фиксирована и установлена как 100 пикселов, оставшееся пространство занято колонкой с именем content.
Пример 1. Код для создания двух колонок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Две колонки</title>
<style type="text/css">
BODY {
font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт на странице */
}
#top { /* Верхняя часть с заголовком страницы */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
padding: 15px 0 15px 10px; /* Поля вокруг текста */
margin-bottom: 15px; /* Расстояние между заголовком и колонками */
font-size: 24px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
color: black; /* Цвет символов */
}
#menu { /* Навигация по сайту */
width: 100px; /* Ширина меню */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
float: left; /* Состыковка с другим слоем по горизонтали */
padding: 3px; /* Поля вокруг текста */
}
#menu A { /* Ссылки в меню */
font-size: 90%; /* Размер текста */
}
#content { /* Основное содержание страницы */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
margin-left: 115px; /* Отступ слева */
margin-bottom: 15px /* Отступ снизу */
}
#bottom { /* Нижняя часть */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
font-size: 90%; /* Размер шрифта */
padding: 3px; /* Поля вокруг текста */
}
h2 { /* Заголовок страницы */
text-align: center; /* Выравнивание по центру */
font-size: 210%; /* Размер шрифта */
font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
font-weight: normal; /* Нормальное начертание */
color: black; /* Цвет текста */
padding: 0; /* Убираем значение полей */
margin: 0; /* Обнуляем значения отступов */
}
#content P {
font-size: 90%; /* Размер шрифта */
text-align: justify; /* Выравнивание по ширине */
padding: 10px; /* Поля вокруг текста */
margin: 0 /* Обнуляем отступы */
}
</style>
</head>
<body>
<div>Заголовок сайта</div>
<div>
<a href="link1.html">Ссылка 1</a><br>
<a href="link2.html">Ссылка 2</a><br>
<a href="link3.html">Ссылка 3</a><br>
<a href="link4.html">Ссылка 4</a><br>
</div>
<div>
<h2>Lorem ipsum dolor sit amet</h2>
<p>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.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat
nulla facilisi.</p>
<p>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. Duis autem dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
</body>
</html>Результат данного примера показан на рис. 2.
Рис. 2. Результат создания двухколонного макета
Для формирования колонки заданной ширины справа, а не слева, код незначительно модифицируется. В табл. 2 показаны стилевые свойства, которые требуются для этого случая.
| Для правого слоя шириной 20% | |
|---|---|
| Слой 1 float: right width: 20% | Слой 2 margin-right: 21% |
| Для правого слоя шириной 200px | |
| Слой 1 float: right width: 200px | Слой 2 margin-right: 210px |
Расположение слоев в коде остается прежним, но значение свойства float меняется на right, а отступа на margin-right. Более никаких изменений не предполагается, поэтому пример 1 останется прежним и в нем только следует заменить стиль слоев menu и content на тот, что показан в примере 2.
Пример 2. Стиль для добавления меню справа
#menu { /* Навигация по сайту */
width: 100px; /* Ширина меню */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки вокруг */
float: right; /* Состыковка с другим слоем по горизонтали */
padding: 3px; /* Поля вокруг текста */
}
#content { /* Основное содержание страницы */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
margin-right: 115px; /* Отступ справа */
margin-bottom: 15px /* Отступ снизу */
}Заметьте, что положение слоев в коде HTML не меняется, вначале идет слой с именем menu, а потом уже content. Причем это правило действует всегда, независимо от того, как будут отображаться на веб-странице колонки — меню слева от контента или наоборот, справа. В любом случае модифицируется только код CSS.
Применение позиционирования
При формировании двухколонного макета левая или правая колонка устанавливается в заданное место через абсолютное позиционирование, а соседняя колонка освобождает для нее место за счет применения отступов. Для лучшего понимания рассмотрим пример, когда левая колонка имеет заданную ширину 200 пикселов, а ее положение определяется от левого верхнего угла окна браузера. Стиль для таких колонок приведен в примере 3.
Пример 3. Абсолютное позиционирование колонки
#leftcol { /* Левая колонка */
position: absolute; /* Абсолютное позиционирование */
width: 200px; /* Ширина слоя */
left: 0; /* Положение от левого края окна */
top: 20px; /* Положение от верхнего края окна */
background: #fc0; /* Цвет фона левой колонки */
}
#rightcol { /* Правая колонка */
margin-left: 210px; /* Отступ слева */
background: #ccc; /* Цвет фона правой колонки */
}Значение absolute свойства position позволяет задавать положение слоя относительно края окна браузера независимо от наличия и местоположения других слоев. Сами координаты устанавливаются с помощью left, top, right и bottom, которые соответственно определяют расстояние от левого, верхнего, правого и нижнего края окна. Чтобы левая и правая колонка не накладывались друг на друга, следует добавить отступ слева (margin-left) для слоя rightcol, как показано в данном примере. Значение этого отступа включает расстояние от левого края (свойство left) и ширину левой колонки (width) плюс дистанция между колонками.
В любом браузере уже заложены отступы между краем окна и отображаемым в окне контентом. Поскольку значения отступов в разных браузерах могут различаться, то это влияет на вид и положение колонок макета. В подобных случаях лучше принудительно установить отступы с помощью свойства margin, добавляя его к селектору BODY (см. пример 4).
Окончательный код для создания двух колонок с помощью позиционирования приведен в примере 4.
Пример 4. Двухколонный макет
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Две колонки</title>
<style type="text/css">
BODY {
padding: 0; /* Отступы для браузера Opera */
margin: 0; /* Обнуляем значения отступов на веб-странице */
}
#leftcol {
position: absolute; /* Абсолютное позиционирование */
width: 190px; /* Ширина слоя */
left: 0; /* Положение от левого края окна */
background: #800000; /* Цвет фона левой колонки */
padding: 5px; /* Поля вокруг текста */
}
#leftcol A {
color: white; /* Цвет ссылок */
}
#rightcol {
margin-left: 200px; /* Отступ слева */
background: #e0e0e0; /* Цвет фона правой колонки */
padding: 10px; /* Поля вокруг текста */
}
h2 {
margin: 0; /* Убираем отступы */
}
</style>
</head>
<body>
<div>
<a href="link1.html">Ссылка 1</a><br>
<a href="link2.html">Ссылка 2</a><br>
<a href="link3.html">Ссылка 3</a><br>
<a href="link4.html">Ссылка 4</a><br>
</div>
<div>
<h2>Lorem ipsum dolor sit amet</h2>
<p>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.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat
nulla facilisi.</p>
</div>
</body>
</html>При использовании позиционирования примите во внимание следующие моменты.
- Слой с абсолютным позиционированием располагается поверх остальных слоев, поэтому если в макет предполагается добавить «шапку» или «подвал», убедитесь, что все слои отображаются корректно, без наложения. Это правило особенно важно в том случае, если в колонке, координаты которой заданы абсолютно, располагается много информации, что приводит к увеличению ее высоты.
Браузер к ширине слоя, которая определяется свойством width, добавляет значение полей и отступов. Суммарное их значение должно быть меньше или равно значению margin-left для правой колонки.
Блочная верстка для резинового дизайна сайта
Цель урока: Знакомство с принципами блочной верстки для резинового дизайна сайта. Изучение основных свойств для построения резинового макета
Резиновый дизайн и необходимые свойства CSS
Резиновый дизайн сайта означает, что при изменении размеров окна браузера все слои масштабируются согласно текущей ширине. Это и есть основное преимущество резинового дизайна: независимо от размеров экрана, вся его область будет занята, при этом не возникают лишние полосы прокрутки при использовании «маленького» монитора.
«Резиновость» достигается за счет того, что определенные слои макета не имеют фиксированную ширину, приспосабливая свои размеры под размеры окна браузера.
Минусом данного типа дизайна являются «разногласия» между браузерами, необходимость применять «хитрости» css-стилей, для того чтобы достичь необходимой кроссбраузерности.
Две колонки в резиновой дизайне
Дизайн CSS две колонки, пожалуй, самый популярный. Создать страницу с таким расположением колонок можно двумя способами, рассмотрим каждый отдельно.
Свойство float для создания эффекта плавающего элемента
Рассмотрим пример, в котором присутствуют следующие блоки, изображенные на рис. 1: шапка (бордовый), меню (светло-серый), контент (белый), подвал (темно-серый).
Рис. 1. Резиновый дизайн сайта в две колонки
Левую колонку выполним с фиксированным размером, а правая колонка будет занимать остальную ширину окна, что и обеспечит «резиновость» дизайна.
Основные свойства
1. «Разбиваем» все основные элементы страницы на блоки следующим образом:
<div>Заголовок сайта</div> <div> Ссылка 1<br> Ссылка 2<br> Ссылка 3<br> Ссылка 4<br> </div> <div> <h2>Заголовок</h2> <p>Контент. 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. </p> </div> <div> Подвал </div> |
<div>Заголовок сайта</div> <div> Ссылка 1<br> Ссылка 2<br> Ссылка 3<br> Ссылка 4<br> </div> <div> <h2>Заголовок</h2> <p>Контент. 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. </p> </div> <div> Подвал </div>
2. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:
#menu{
float: left;
width: 20%;
} |
#menu{ float: left; width: 20%; }
2 вариант:
#menu{
float: left;
width: 200px;
} |
#menu{ float: left; width: 200px; }
3. Для правой колонки обязательным является свойство, определяющее внешний отступ от левого края окна браузера (margin-left). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:
#content{
margin-left: 21%;
} |
#content{ margin-left: 21%; }
2 вариант:
#content{
margin-left: 210px;
} |
#content{ margin-left: 210px; }
Все остальные свойства зависят от оформления сайта.
Весь код CSS будет выглядеть так:
#top { /* Шапка с заголовком страницы */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
padding: 10px 0 10px 10px; /* Поля вокруг текста */
margin-bottom: 5px; /* Расстояние между шапкой и колонками */
font-size: 24px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
}
#menu { /* Меню сайта */
width: 200px; /* Ширина меню */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
float: left; /* Состыковка со слоем контента по горизонтали */
padding: 3px; /* Внутренние поля */
}
#content { /* Основное содержание */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
margin-left: 210px; /* Отступ слева с учетом ширины левой колонки */
margin-bottom: 5px /* Отступ снизу */
}
#content p{
padding: 3px; /* Внутренние поля контента*/
}
#bottom { /* Подвал */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
padding: 3px; /* Поля вокруг текста */
} |
#top { /* Шапка с заголовком страницы */ background: #e3e8cc; /* Цвет фона */ border: solid 1px black; /* Параметры рамки */ padding: 10px 0 10px 10px; /* Поля вокруг текста */ margin-bottom: 5px; /* Расстояние между шапкой и колонками */ font-size: 24px; /* Размер шрифта */ font-weight: bold; /* Жирное начертание */ } #menu { /* Меню сайта */ width: 200px; /* Ширина меню */ background: #e3e8cc; /* Цвет фона */ border: solid 1px black; /* Параметры рамки */ float: left; /* Состыковка со слоем контента по горизонтали */ padding: 3px; /* Внутренние поля */ } #content { /* Основное содержание */ background: #e3e8cc; /* Цвет фона */ border: solid 1px black; /* Параметры рамки */ margin-left: 210px; /* Отступ слева с учетом ширины левой колонки */ margin-bottom: 5px /* Отступ снизу */ } #content p{ padding: 3px; /* Внутренние поля контента*/ } #bottom { /* Подвал */ background: #e3e8cc; /* Цвет фона */ border: solid 1px black; /* Параметры рамки */ padding: 3px; /* Поля вокруг текста */ }
Результат:
Рис. 2. Левая колонка с фиксированной шириной в резиновом дизайне
Рассмотрим пример, когда фиксированной шириной обладает не левая, а правая колонка.
Правая колонка с фиксированной шириной: основные свойства
Код html-структуры остается прежним, меняются лишь CSS-свойства.
1. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:
#menu{
float: right;
width: 20%;
} |
#menu{ float: right; width: 20%; }
2 вариант:
#menu{
float: right;
width: 200px;
} |
#menu{ float: right; width: 200px; }
2. Для правой колонки задаем свойство, определяющее внешний отступ от правого края окна браузера (margin-right). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:
#content{
margin-right: 21%;
} |
#content{ margin-right: 21%; }
2 вариант:
#content{
margin-right: 210px;
} |
#content{ margin-right: 210px; }
Результат:
Рис. 3. Правая колонка с фиксированной шириной в резиновом дизайне
Применение позиционирования в резиновом дизайне
При использовании данного варианта дизайна для левой или правой колонки устанавливается абсолютное позиционирование с заданием координат.
Например:
Левая колонка:
position:absolute; width: ...px; left: ...px; top: ...px; |
position:absolute; width: …px; left: …px; top: …px;
Правая колонка:
margin-left: ...px; /* отступ слева, равный ширине первой колонки */ |
margin-left: …px; /* отступ слева, равный ширине первой колонки */
«Резиновость» достигается в данном случае за счет правой колонки, у которой нет определенной ширины.
Пример: Создать веб-страницу в формате резинового дизайна. Для левой колонки задать абсолютное позиционирование с координатами от левого и верхнего края окна браузера
Выполнение:
1. Расположим основные html-элементы страницы следующим образом:
<div> <p> Ссылка 1<br> Ссылка 2<br> Ссылка 3<br> Ссылка 4<br> </p> </div> <div> <p>Контент. 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. </p> </div> |
<div> <p> Ссылка 1<br> Ссылка 2<br> Ссылка 3<br> Ссылка 4<br> </p> </div> <div> <p>Контент. 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. </p> </div>
2. Для левой колонки задаем свойства, обязательные при использовании позиционирования в резиновом дизайне — position, width, left и top:
#col1 { /* Левая колонка */
position: absolute; /* Абсолютное позиционирование */
width: 190px; /* Ширина блока*/
left: 0px; /* Координата от левого края окна */
top: 0px; /* Координата от верхнего края окна */
background: #800000; /* Цвет фона левой колонки */
padding: 5px; /* Поля вокруг текста */
} |
#col1 { /* Левая колонка */ position: absolute; /* Абсолютное позиционирование */ width: 190px; /* Ширина блока*/ left: 0px; /* Координата от левого края окна */ top: 0px; /* Координата от верхнего края окна */ background: #800000; /* Цвет фона левой колонки */ padding: 5px; /* Поля вокруг текста */ }
3. Задаем свойства для правой колонки, обязательные при использовании позиционирования в резиновом дизайне — margin-left:
#col2 { /* Правая колонка */
margin-left: 200px; /* Отступ слева=ширине левой колонки + padding */
background: #e0e0e0; /* Цвет фона правой колонки */
padding: 5px; /* Поля вокруг текста */
} |
#col2 { /* Правая колонка */ margin-left: 200px; /* Отступ слева=ширине левой колонки + padding */ background: #e0e0e0; /* Цвет фона правой колонки */ padding: 5px; /* Поля вокруг текста */ }
4. Удаляем лишние отступы браузера по умолчанию:
body {
padding: 0; /* Отступы для браузера Opera */
margin: 0; /* Обнуляем значения отступов на веб-странице */
} |
body { padding: 0; /* Отступы для браузера Opera */ margin: 0; /* Обнуляем значения отступов на веб-странице */ }
Результат:
Рис. 4. Резиновый дизайн сайта с позиционированием
Одинаковая высота колонок
На рис. 4 результат показывает, что колонки имеют неодинаковую высоту. Для того, чтобы колонки приобрели одинаковую высоту есть несколько вариантов использования дополнительных свойств, одним из которых является добавление границы (border).
1. Обе колонки заключаются в слой-контейнер:
<div> <div> <p> Ссылка 1<br> Ссылка 2<br> Ссылка 3<br> </p> </div> <div> <p>Контент. 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. </p> </div> </div> |
<div> <div> <p> Ссылка 1<br> Ссылка 2<br> Ссылка 3<br> </p> </div> <div> <p>Контент. 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. </p> </div> </div>
2. Для левой колонки устанавливаем ширину, абсолютное позиционирование, координаты от верхнего левого угла браузера, внешний отступ слева отрицательного значения (!), равный ширине блока, и внутреннее поле слева, равное также ширине блока:
#col1 { /* Левая колонка */
position: absolute; /* Абсолютное позиционирование */
width: 200px; /* Ширина слоя */
left: 0px; /* Положение от левого края окна */
top: 0px; /* Положение от верхнего края окна */
margin-left: -200px; /* внешний левый отступ отрицательного значения */
padding-left: 200px; /* внутренне левое поле */
background: #800000; /* Цвет фона левой колонки */
} |
#col1 { /* Левая колонка */ position: absolute; /* Абсолютное позиционирование */ width: 200px; /* Ширина слоя */ left: 0px; /* Положение от левого края окна */ top: 0px; /* Положение от верхнего края окна */ margin-left: -200px; /* внешний левый отступ отрицательного значения */ padding-left: 200px; /* внутренне левое поле */ background: #800000; /* Цвет фона левой колонки */ }
3. Для правой колонки никакие свойства позиционирования не устанавливаются, но можно задать свойства для оформления колонки:
#col2 { /* Правая колонка */
background: #e0e0e0; /* Цвет фона правой колонки */
padding: 5px; /* Поля вокруг текста */
} |
#col2 { /* Правая колонка */ background: #e0e0e0; /* Цвет фона правой колонки */ padding: 5px; /* Поля вокруг текста */ }
4. Для слоя контейнера необходимо задать границу, ширина которой должна совпадать с шириной левой колонки, а цвет — с цветом левой колонки:
#container {
border-left: 200px solid #800000;
} |
#container { border-left: 200px solid #800000; }
Результат:
Рис. 6. Колонки одинаковой высоты
Как сделать сайт резиновым html: примеры резина
Пример — резина
Cтраница 1
Примеры резин с достаточно высоким сопротивлением многократному изгибу, содержащие дифенилгуа-нидин, приведены в табл. 4.15. При каждом значении модуля или степени поперечного сшивания у резин с ДФГ наблюдалось наибольшее сопротивление утомлению. [1]
На примере резин для боковин шин показано, что методы ДСК и ДТГ при разложении образцов в среде азота дают наилучшие результаты при идентификации композиций НК, БСК, СКЭПТ и галобу-тилкаучука.
При разложении в среде кислорода кривые не столь информативны, но согласуются с кривыми, полученными в среде азота. [2]
Рассмотрим эти эффекты на примере резин на основе кристаллизующихся каучуков, где они проявляются наиболее наглядно. [4]
В работе К. А. Керимова ( 1965) на примере резины и поливинила было показано, что динамические кривые напряжение — деформация, близкие к прямым, лежат выше статических, причем в области напряжений, близких к нулю, остаточные деформации от динамических нагрузок могут втрое превышать статические. [5]
Влияние влаги на химические реакции при озонном растрескивании должно было бы проявиться одинаково на резинах из каучуков сходной химической структуры, между тем этого не наблюдается, как видно на примере резин из НК и СКИ.
Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы
[7]
Большое принципиальное значение имеют результаты, полученные П. А. Ребиндером и В. В. Маргаритовым о влиянии природы поверхности зерен наполнителя на его упрочняющее действие. На примере резины они показали, что наполнители разделяются на три группы по молекулярной природе поверхностей. [8]
К резинам предъявляются различные требования. Рассмотрим в качестве примера резины, используемые в буровом и нефтепромысловом оборудования. [9]
Однако разный характер межмолекулярных сил взаимодействия полимера и растворителей может привести к совершенно различному набуханию полимера при близких значениях параметров растворимости для этих сред. Наиболее подробно этот вопрос изучен на примере резин. [10]
Примеси и наполнители могут составлять значительную часть общего веса, а нередко вообще превышают вес самого каучука. Как многообразны и сложны могут быть примеси, добавляемые в каучук-сырец, видно на примере резины для автомобильных шин. [11]
Для увеличения стойкости полимеров к химически активным средам поперечные связи должны быть стойкими к этим средам. Наиболее стойкими из используемых в настоящее время являются поперечные связи типа С-С, как это показано на примере резин из фторкаучука и хлоропренового каучука ( см. гл. [12]
Важной характеристикой процесса износа резины, скользящей по металлической поверхности с большими скоростями, является критическая температура ее разрушения при трении. При скольжении резины по металлической поверхности в условиях высоких температур воздействия ( 200 — 400 С) возможны следующие основные виды ее разрушения: возникновение трещин на поверхности трения, образование на обоих контактирующих поверхностях пары трения слоев наволакивания резины и протекание процесса катастрофического износа. На примере резин на основе бу-тадиен-нитрильного и эти-лен-пропиленового каучуков разберем причины, вызывающие разрушение этих материалов. [14]
Введение наполнителей увеличивает эффект размягчения резин. Вывод о том, что эффект размягчения больше в присутствии наполнителя, — кажущийся и связан только с тем, что сравнение резин производится при разных фактических деформациях каучуковой фазы, носит частный характер. Такое заключение базируется [29-31] на обширном материале, собранном при исследовании резин из НК. Однако более детальный анализ на примерах резин из других каучуков показывает другое. [15]
Страницы: 1
что это такое, примеры, сравнение резинового и адаптивного дизайна
От автора: приветствую дорогих читателей моего блога! Наверняка многие из вас уже слышали легенды о драконах, Санта-Клаусе и непонятном звере под названием резиновый веб-дизайн, который способен менять свою форму. О первом персонаже вам поведают рукописи Джона Толкина, о втором родители, а вот информацию о третьем я беру на себя. Как бы странно это не звучало, однако, в этой статье я постараюсь разжевать резиновый веб-дизайн и расскажу о его преимуществах и недостатках.
При разработке сайта веб-мастер, в первую очередь, должен отталкиваться от целей проекта. Если заказчику важно, чтобы веб-страница могла подстраиваться под любой экран монитора, то здесь на помощь придет резиновый (адаптивный) дизайн.
Свое название данный формат получил благодаря тому, что его ширина устанавливается не в пикселях, а в процентном соотношении. С его помощью страница будет открываться на весь экран монитора независимо от разрешения.
Чтобы ваша карьера веб-дизайнера стремительно развивалась, в обязательном порядке необходимо изучить это направление. Многие заказчики с уже собранной лояльной базой клиентов особенно требовательны к данному моменту, ведь они хотят обеспечить своим пользователям максимальное удобство.
Зарождение резинового веб-дизайна
В качестве интересного наблюдения можно отметить тот факт, что в нашей стране «резиновый» веб-дизайн специалисты начали воспринимать с позитивной точки зрения раньше, чем на западе. Дело в том, что там при зарождении веб-направления в эту сферу пришло большое количество узкомыслящих полиграфистов.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееЗарубежные специалисты попросту не осознавали возможности создания нефиксированных графических разработок. А вот к нам понятия «веб» и «дизайн» пришли практически равномерно, вследствие чего подобная визуальная гибкость изображения воспринималась разработчиками как обычная творческая свобода.
Резиновый и адаптивный веб-дизайн — это одно и то же?
Зачастую люди путают эти два понятия, однако, они не являются чистокровными синонимами друг друга. Адаптивный веб-дизайн подразумевает работу с различными макетами сайта в целях создания максимального удобства их использования на всевозможных типах устройств, учитывая всевозможные разрешения экранов.
Он «разумно» подгоняет общую картинку под экран в зависимости от размера дисплея на аппарате. Ну а резиновый дизайн — это, по сути, один из элементов адаптивного веб-дизайна. Он, в свою очередь, лишь вносит изменения в пропорции веб-страницы.
Таким образом, можно прийти к выводу о том, что адаптивный веб-дизайн представляет собой комбинацию из резинового, а также прочих прогрессивных улучшений. Хотя из-за близких по духу определений порой и может возникать путаница. Особенно неприятно, когда разногласия в этом плане происходят с заказчиком, поэтому будьте внимательны и всегда уточняйте, что клиент имел ввиду, говоря о резиновом дизайне сайта.
Преимущества резинового веб-дизайна
Благодаря резиновому дизайну css у вас есть возможность разработки веб-страницы, которая бы заполняла все свободное пространство браузера вне зависимости от размеров экрана. Если произойдут какие-либо изменения параметров, связанные с разрешением, вся структура сайта вновь подстроится под обновленные условия. Чудеса и волшебство, не правда ли?
Подобная особенность гарантирует тот факт, что веб-страница полностью займет браузерное окно независимо от того, отображается картинка на малютке HTC или на 20-ти дюймовом широкоформатном мониторе. Именно это и можно отнести к основному преимуществу резинового дизайна.
Те пользователи, которые обладают маленькими мониторами, не испытывают проблем с горизонтальными полосами прокрутки, а вот владельцев больших широкоформаток они порою тревожат. Следовательно, в этом плане вторые смогут сполна насладиться картинкой, ведь вся площадь дисплея будет эффективно задействована.
Если рассматривать вопрос того, для каких сайтов подойдет резиновый веб-дизайн, то здесь все зависит опять же от целей заказчика. Данная визуальная гибкость будет хорошо смотреться на тех сайтах, у которых приоритетной задачей является размещение на одной веб-странице максимального количества контента, а эстетические нормы отходят на второй план.
Именно исходя из этого резиновый веб-дизайн широко применяется при создании новостных порталов, блогов, а также всевозможных информационных сайтов. В этих случаях его применение наиболее целесообразно.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееНедостатки резинового веб-дизайна
Помимо положительных моментов, подобный веб-дизайн обладает и некоторыми специфическими минусами. Один из них заключается в том, что, по сути, итоговый результат «автоподстраивания» страницы под определенные условия разрешения экрана непредсказуем. Некоторые графические элементы на сайте могут внезапно оказаться на другом месте, так как их вытеснили соседние коллеги.
Еще одним недостатком подобной «резины» является тот факт, что загрузка страницы с ним может увеличиться в 2–3 раза по сравнению со стандартной длительностью. Случается это по причине придирчивости некоторых браузеров к макетам страниц данного формата. Они тяжело справляются с задачей отображения элементов переменной ширины, вследствие чего также повышается риск возникновения визуальных ошибок.
Примеры резинового и адаптивного веб-дизайна
Для наглядности я хочу продемонстрировать вам несколько удачных примеров резинового и адаптивного дизайнов от достаточно успешных разработчиков.
1. http://www.simplebits.com/
Для начала рассмотрим резиновый сайт одного американского блогера, занимающегося параллельно веб-разработками. Полная версия сайта:
Мобильная версия сайта:
Как видим, в этом случае картинка лишь подстраивается под размеры устройства, а общая структура сайта остается неизменной.
2. http://www.fork-cms.com/
Теперь же предлагаю ознакомиться с веб-сайтом, который адаптируется под определенное устройство и в зависимости от его размеров перестраивает полностью собственную структуру. Полная версия сайта:
Мобильная версия сайта:
Вот так-то. Надеюсь, сегодняшний материал был интересен, и вы не зря потратили свое время. Если это так, то оставляйте комментарии по этому поводу и делитесь собственным мнением. Мне приятны как позитивные отзывы, так и экспертные заключения мастеров веб-дизайна 2.0. Подписывайтесь на блог, чтобы не пропустить дальнейшую интересную и полезную информацию.
На этом у меня все, скоро увидимся!
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнее
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!
Смотреть видео5 техник резиновой верстки сайта
- Тема: HTML&CSS
- Время ролика: 00:22:38
- Cложность: средняя
- Прикладные программы: Dreamweaver CS4
- Автор: Бернацкий Андрей
В этом уроке мы досконально разберем все подводные камни такого, казалось бы, простого понятия, как ширина элемента. Поймем, из чего она складывается и что представляет на самом деле. Так же рассмотрим работу свойства float. Рассмотрим на примере, почему плавающие элементы при изменении ширины окна браузера съезжают на новую строку, и решим данную проблему. Рассмотрим и решим проблему схлопывания границ блока.
- Тема: HTML&CSS
- Время ролика: 00:16:13
- Cложность: средняя
- Прикладные программы: Dreamweaver CS4
- Автор: Бернацкий Андрей
Навигация — это, пожалуй, самая главная часть сайта. И у резинового сайта, как правило, навигация тоже резиновая. Создать резиновое меню, используя таблицы, труда не составит. Но когда речь заходит о создании такого меню, используя списки, возникает много вопросов. В уроке мы как раз создадим резиновое меню, используя списки. Разберемся с теорией создания такого меню. Выявим и решим возможные проблемы.
- Тема: HTML&CSS
- Время ролика: 00:23:39
- Cложность: средняя
- Прикладные программы: Dreamweaver CS4
- Автор: Бернацкий Андрей
Часто возникают ситуации, когда нужно сделать перекрытие элементов. Или заставить элемент располагаться, например, в правом нижнем углу, независимо от того, как расположены окружающие блоки. Данную проблему лучше всего решает свойство position. В уроке мы разберемся с позиционированием элементов. Поработаем над перекрытием элементов с помощью свойства z-index. Выясним необходимое условие для работы свойства z-index.
- Тема: HTML&CSS
- Время ролика: 00:11:45
- Cложность: средняя
- Прикладные программы: Dreamweaver CS4
- Автор: Бернацкий Андрей
При верстке резиновых макетов, часто возникает ситуация, когда необходимо центрировать элемент. Когда известна ширина центрируемого элемента, то проблем не возникает. Все становиться сложнее, когда ширина блока, который нужно расположить по центру, не известна или она может меняться. В уроке мы рассмотрим пример центрирования блока переменной ширины, на примере создания постраничной навигации.
- Тема: HTML&CSS
- Время ролика: 00:16:00
- Cложность: средняя
- Прикладные программы: Dreamweaver CS4
- Автор: Бернацкий Андрей
Иногда возникает задача, когда нужно расположить несколько блоков по всей ширине родительского блока. То есть первый блок должен быть у самого левого края, последний блок должен быть у правого края. А расстояния между остальными элементами чтобы было одинаковым. Такого несложно добиться при верстке макета фиксированной ширины. Но мы усложним задачу и решим ее в уроке для резинового блока.