Как сделать страницу сайта резиновой


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

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

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

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

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

А, допустим, блочный каркас имеет фиксированную ширину в 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%*/
    float: right;
}
#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 ему нужно задавать в процентах от значения по умолчанию.

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

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


Перемена


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

Каркас сайта (продолжение) < < < В раздел > > > Адаптивный сайт

 

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера