Здравствуйте уважаемые начинающие
веб-мастера.
В этой статье рассмотрим, как блочный каркас сайта, созданный нами в предыдущей статье, сделать резиновым.
Сначала о том, что из себя представляет резиновый каркас сайта, и чем он отличается от простого блочного каркаса, и зачем он нужен.
Всё дело в том, что мониторы имеют самые разные размеры, от малюсеньких мобильных, до огромных домашних кинотеатров.
А, допустим, блочный каркас имеет фиксированную ширину в 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 id="wrapper">
<div id="header"></div>
<div id="sidebar1"></div>
<div id="sidebar2"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>Сделав эти изменения, попробуем уменьшить ширину экрана, и посмотрим, что произойдёт с нашим каркасом сайта.
Как видите, все блоки равномерно уменьшились, относительно размера окна браузера. Если это окно увеличить, то все блоки так же пропорционально увеличатся.
Высота блоков не учитывается, так как она зависит от содержания, и на читабельность не влияет.
Однако это утверждение не подходит для изображений. По умолчанию, размер картинок задаётся в пикселях. И, чтобы их размер так же менялся, как и у блоков, соответственно размеру экрана, его нужно задать в процентах, и ширину, и высоту.
Если высоту изображений не задать в процентах, то они, на разных мониторах будут вытягиваться в высоту.
То же самое относится к изображению в шапке сайта, и соответственно, к высоте блока header.
Если же шапка сайта украшена размноженным изображением, или фоновым цветом, то задавать ей высоту не нужно, так как она, по любому, определиться содержанием.
Для слишком маленьких и слишком больших мониторов есть смысл ввести в код ещё два свойства. Это
max-width — максимальная ширина сайта;
min-width — минимальная ширина сайта;
Минимальный размер устанавливается в тех пределах, когда дизайн сайта при уменьшении экрана, начинает катастрофически рушиться.
Чтоб до этого не доходило, и устанавливается min-width для блока wrapper.
max-width выбирается исходя из понятий оптимального восприятия.
Такие ограничения можно вводить для любого блока сайта.
Ещё один момент на который необходимо обратить внимание — это размер текста font-size
Размер текста в браузерах, обычно задаётся по умолчанию и составляет 100%. Но это относиться к тегам P и H1….H6, то есть к стандартному тексту, и стандартным заголовкам.
Если же Вам потребуется создать текст или заголовок (например в шапке сайта), какого либо нестандартного размера, то font-size ему нужно задавать в процентах от значения по умолчанию.
Я, конечно забегаю немного вперёд, но за то, когда Вы научитесь создавать шапку сайта, и заполнять каркас сайта текстом и изображениями, прочитав следующие за этой, статьи моего блога, то Вам уже будет ясно, как сделать шаблон, равномерно отображающийся в мониторах разных размеров.
Желаю творческих успехов.
Перемена
— Какую температуру вы предпочитаете на
отдыхе: сорок градусов по Цельсию, или по Фаренгейту?
— По Менделееву!
Каркас сайта (продолжение) < < < В раздел > > > Адаптивный сайт
В вашем коде в селекторе #sidebar2, нет закрывающих точки с запятой в свойстве width:20%. Будьте внимательнее и всё будет ОК.
Доброго время суток, Старый Перец.Я сделал то что вы указали в комментарии,каркас сайта и вправду получился «резиновым», если бы не одно»но».sidebar‘ы слились воедино, а контент вытеснили на другую строчку.
На вашем фото такой ошибки нет, значит она у меня или была изначальна,укажите на проблему??
ваш код с поправками, которые вы указали в комментариях:
заголовок
#wrapper{
width: 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: 20%;
float: left;
}
#sidebar2{
height:80px;
background-color: #2FF553;
margin-bottom: 10px;
width:20%
float: right;
}
#content{
height: 80px;
background: #9ef7af;
margin: 0 0 10px 20.5%;
width: 59%;
}
#footer{
height: 80px;
background: #41874e;
margin-bottom: 10px;
}
Вот в этом я к сожалению не волоку.
На этот вопрос ответит скорее всего только техподдержка хостинга. У них есть такой показатель как 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/. Кстати он резиновый, правда ещё не совсем доведённый, потому что я его уже начал переделывать на адаптивный.
Спасибо за отзыв!
В строке «Сайт», в комментариях, укажите Ваш сайт. Будет время загляну.
Доброго время суток. Безумно понравился ваш сайт. Все понятно и доступно. Супер!Огромный респект! Спасибо вам огромное. Очень интересно посмотреть на ваши другие сайты. Читала, что у вас есть сайт про строительство, но никак не могу найти адресс. Очень уж хочется посмотреть.:)Если можно, конечно.