Опубликовано 2013-05-14 автором stariс
Продолжим работу с каркасом сайта, и узнаем, как делается подвал (footer) сайта.
Ещё раз посмотрим на заготовку.
Напомню, что блоку сайдбар мы придали свойство ”float”, и он стал как бы наплывающим на другие элементы. Даже лучше сказать он приподнялся, и освободил место для других элементов.
Теперь представим, что произойдёт, когда мы начнём наполнять его содержанием. Блок sidebar начнёт увеличиваться в высоту, наплывёт на блок footer, и дальше станет раздвигать рамку оболочки.
Что бы этого не произошло, нужно запретить блоку “sidebar”, да и «content» тоже, наплывать на блок “footer”. Делается это следующим образом.
В таблице стилей создаётся новый класс clear (очистить). Свойство так же назовём “clear”, а значение дадим “both”(всё). Существуют ещё значения “right” и “left” для тех случаев, когда запретить наплыв нужно справа или слева.
.clear{ clear: both;}Затем, в селекторах “content” и “sidebar”, убираем заданную им высоту (height:80px), так как будем наполнять их текстом.
После этого, перед блоком <div id=footer>, пропишем ещё один блок <div>, и вставим в него только что созданный класс ”clear”, который запретит другим блокам наплывать на <footer>.
<body> <div id="wrapper"> <div id="header"></div> <div id="sidebar"></div> <div id="content"></div> <div class="clear"></div> <div id="footer"></div> </div>Теперь скопируем несколько любых абзацев текста и вставим их в блоки ”content” и “sidebar”. В первый побольше, во второй поменьше, соответственно их размерам.
<body> <div id="wrapper"> <div id="header"></div> <div id="sidebar">Напомню, что блоку сайдбар мы придали свойство ”float”, и он стал как-бы наплывающим на другие элементы.Даже лучше сказать он приподнялся, и освободил место для других элементов.
Теперь представим что произойдёт когда мы начнём наполнять его содержанием. Блок начнёт увеличиваться
в высоту, наплывёт на блок “footer” и дальше станет раздвигать рамку оболочки. </div> <div id="content">Как сделать колонки одной высоты в CSS. Тема эта не простая так как прежде чем рассматривать её
Для этого зададим селекторам “sidebar” и “content” внутренний отступ 10px и убавим
ширину обоих блоков на 20px у каждого т.к. внутренний отступ у нас составит по 10 с двух сторон,
всего 20, и если этого не сделать этот отступ раздвинет блоки и они налезут друг на друга.
Ну вот, текст разместился и подвал отодвинулся, правда разместился текст как-то уж больно близко к краям
блоков поэтому давайте его немного подправим. Как сделать колонки одной высоты в CSS. Тема эта
не простая так как прежде чем рассматривать её Для этого зададим селекторам “sidebar”
и “content” внутренний отступ 10px и убавим ширину обоих блоков на 20px у каждого
т.к. внутренний отступ у нас составит по 10 с двух сторон, всего 20, и если этого не сделать этот
отступ раздвинет блоки и они налезут друг на друга. </div> <div id="clear"></div> <div id="footer"></div> </div>
И смотрим, что получилось.
Ну вот, текст разместился и подвал отодвинулся, правда разместился текст, как-то уж больно близко к краям блоков, поэтому давайте его немного подправим.
Для этого зададим селекторам “sidebar” и “content” внутренний отступ 10px, и убавим ширину обоих блоков на 20px у каждого, так как внутренний отступ у нас составит по 10 с двух сторон, всего 20, и если этого не сделать, этот отступ раздвинет блоки, и они налезут друг на друга.
Посмотрим.
Вот так гораздо приятнее глазу, не правда-ли. Теперь давайте обобщим то, что связано с каркасом сайта и посмотрим, как выглядит полностью код каркаса сайта в html файле.
Как видите таблица стилей может подключаться прямо на странице, а можно создать для неё отдельный файл.
В этой статье рассмотрим, как блочный каркас сайта, созданный нами в предыдущей статье, сделать резиновым.
Сначала о том, что из себя представляет резиновый каркас сайта, и чем он отличается от простого блочного каркаса, и зачем он нужен.
Всё дело в том, что мониторы имеют самые разные размеры, от малюсеньких мобильных, до огромных домашних кинотеатров.
А, допустим, блочный каркас имеет фиксированную ширину в 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 ему нужно задавать в процентах от значения по умолчанию.
Я, конечно забегаю немного вперёд, но за то, когда Вы научитесь создавать шапку сайта, и заполнять каркас сайта текстом и изображениями, прочитав следующие за этой, статьи моего блога, то Вам уже будет ясно, как сделать шаблон, равномерно отображающийся в мониторах разных размеров.
Адаптивный сайт
Здравствуйте уважаемые начинающие веб-мастера. После того, как мы научились создавать резиновый шаблон сайта, самое время узнать, как делается адаптивный дизайн.
Сначала разберём его особенности. Адаптивность классно дополняет резиновый дизайн. Ведь посмотрите, что происходит, если шаблон чисто резиновый.
Допустим на странице, по горизонтали у Вас расположено два, или даже больше блоков, или изображений.
При уменьшении экрана блоки уменьшаются в соответствии с ним, так как их размер задан в процентах, и при достижении ширины в 320 — 240 px (мобила), они становятся такими маленькими, что понять их содержимое, становиться практически невозможно.
Вот тут и приходит на выручку адаптивный дизайн.
С его помощью можно задать блокам минимальную ширину в те же 320 пикселей, и присвоить им дополнительные свойства, которые на маленьком экране, расположат их не горизонтально, а друг под другом.
Тем самым мы избавляем пользователя от, так им не любимой, горизонтальной прокрутки, и сохраняем читабельный размер блоков.
То есть суть адаптивного дизайна заключается в том, чтоб при уменьшении экрана до определённого размера, элементы контента меняли свое изначально заданное положение так, чтоб они были хорошо видны, и не создавали при этом полосы горизонтальной прокрутки.
Таким способом можно на маленьком экране, расположить в один столбик вообще весь контент.
То есть сначала будет идти текст, после него боковые колонки, или сначала какой либо блок меню, потом текст, потом sidebar, и так далее.
Окончательный вариант выбирать Вам, в зависимости от задач, которые Вы ставите перед сайтом.
Суть, думаю ясна, перейдём к технике исполнения.
Присвоение свойств адаптивности выполняется при помощи медиазапроса. Выглядит он так (синтаксис):
@media screen and (min-width: X px){ selector{ property: value; }}Где screen — экран;
(min-width: X px) — свойства экрана, то есть ширина;
selector — селектор того элемента, который будет перемещаться;
property — свойство этого элемента;
value — новое значение этого свойства;
Пользователям WordPress, и не только, эта конструкция должна быть знакома, так как присутствует в 90% шаблонов, в файле style.css.
Вопрос только — каким элементам, какие свойства там заданы.
Думаю не лишним будет указать Вам самые популярные размеры экранов, существующие на данный момент.
1280 х 800 — ноутбук;
600 х 1024 — планшет в книжном формате
1024 х 600 — планшет в альбомном формате
320 х 480 — смартфон в книжном формате
480 х 320 — смартфон в альбомном формате
240 х 320 — мобильный телефон в книжном формате
320 х 240 — мобильный телефон в альбомном формате
Для чего они нужны? Дело в том, что именно на эти размеры экранов, нужно ориентироваться при адаптивной вёрстке.
Если вдруг у пользователя зашедшего на Ваш сайт, окажется экран чуть другого размера, то в этом случае сработает свойство резиновости.
А вот выше приведённые размеры, являются точками перелома, к которым и нужно адаптировать дизайн.
Вообще-то для ноутбука будет достаточно задать минимальную ширину, и не грузиться перестановкой элементов, так что начинать можно с ширины в 600 или 480 px.
Но это, опять же, в основном зависит от дизайна исходника. То есть, сколько у вас боковых колонок, что присутствует на странице, и так далее.
Ведь какой-то сайт можно сжать побольше, без потери читабельности, а какой-то нет.
Для рассмотрения на примере, возьмём резиновый каркас, созданный в предыдущей статье.
Только в блок content я добавлю несколько блоков, расположенных горизонтально, которые могут быть и картинками, чтоб нагляднее представить процесс адаптации.
<!DOCTYPE html><html lang="ru"> <head> <meta charset="utf-8" /> <title>Адаптивный дизайн</title><style>#wrapper{ width: 100%; outline: 1px solid #787274; padding: 5px; margin: 0 auto; position: relative;}.header{ height: 80px; background: #25b33f; margin-bottom: 5px;}.sidebar1{ height: 120px; background-color: #2ff553; margin-bottom: 10px; width: 20%; position: absolute; top: 90px; left: 5px;}.sidebar2{ height: 120px; background-color: #2FF553; margin-bottom: 10px; width: 20%; position: absolute; top: 90px; right: 5px;}.content{ height: 120px; background: #9ef7af; margin: 0 auto; width: 59%;}.blok1,.blok2,.blok3,.blok4{ float: left; margin: 3px 3px 3px 5px; width: 22%; height: 25%; padding: 5px; text-align: center; border: 2px solid;}.footer{ height: 80px; background: #41874e; margin: 5px 0 0 0;}</style></head><body><div id="wrapper"> <div class="header"></div> <div class="content"> <div class="blok1">Блок 1</div> <div class="blok2">Блок 2</div> <div class="blok3">Блок 3</div> <div class="blok4">Блок 4</div> </div> <div class="sidebar1"></div> <div class="sidebar2"></div> <div class="footer"></div></div></body></html>Получился у нас весь резиновый каркас, который будет сжиматься до размеров самого маленького экрана, вместе со всем содержимым.
Рассмотреть содержимое в таком случае будет очень трудно. Да Вы и сами можете в этом убедиться.
Вставьте данный код в Notepad++, откройте картинку в браузере, и попробуйте уменьшать ширину экрана.
Не очень-то, правда? Давайте адаптировать.
Сначала маленький совет. Чтоб было удобнее контролировать ширину экрана в браузере Chrome, нажмите клавишу F12, появится веб-инспектор.
Его можно перетащить до предела вниз, чтоб не мешал, зато теперь, если Вы будете уменьшать ширину экрана, то в правом верхнем углу будет появляться счётчик, показывающий размер в пикселях.
Итак, начнём с размера экрана в 480 px. Первым делом отменим позиционирование боковых колонок, чтоб они заняли своё, определённое в html коде, место под контентом.
И зададим им ширину так, чтоб они потом, с учётом отступов, разместились рядом друг с другом.
Для этого в тег style, в самом конце добавляем медиазапрос:
@media screen and (min-width: 480px){.sidebar1,.sidebar2{ position: static; width: 49.5%; }}Уменьшаем экран до 480 px.
Теперь пере определяем ширину основного контента. В этот же медиазапрос добавляем для него новые свойства, а именно ширину на весь экран, и отступ снизу.
.content{ width:100%; margin-bottom:5px; }
Осталось выровнять боковые колонки, и блоки в контенте. Добавляем туда же стили и для них.
.sidebar1{ float:left; }.sidebar2{ margin:0 0 0 50.5%; }.blok1,.blok2,.blok3,.blok4{ width:45%; }
Вот такой у меня получился макет.
Для следующего размера, создаётся ещё один медиазапрос, и так далее.
Конструкцию макета можно собрать любую. Главное принцип, я думаю, вам понятен, а уж какой элемент куда переместить, решается для каждого случая индивидуально.
Что тут можно ещё добавить. При работе с каким либо элементом, обязательно нужно принимать во внимание те свойства, которые ему заданы в основных стилях.
Если какое либо из них не переопределяется в медиазапросе, подумайте: не повлияет ли оно на выполнение стилей на маленьком экране.
Если повлияет, то нужно это свойство отменить в запросе.
Если Вы возьмётесь адаптировать готовый сайт, то в тег <head> нужно поместить мета-тег запрещающий масштабирование браузеру пользователя, если его там ещё нет. Вот он:
<meta name="viewport" content="width=device-width, initial-scale=1">
Пока всё. Адаптивный дизайн только набирает обороты, и по этой теме постоянно появляется что-то новенькое.
Я Вам показал только основные принципы, чтоб понимать, как это делается, а уж оттачивать мастерство нам предстоит самостоятельно.
Как сделать шапку сайта
Опубликовано 2013-05-14 автором stariс
В этой статье рассмотрим, как сделать шапку сайта, и расположить на ней заголовок, и описание сайта
Первым делом для шапки сайта нужна картинка. Её лучше всего сделать в фотошопе.
А тем, кто не владеет этим редактором, я предлагаю самый простой способ изготовления картинки для шапки сайта, в имеющимся на всех Windows по умолчанию Paint.
Ширину картинки сделаем 900px, по ширине сайта, высоту — 200px. У Вас конечно могут быть свои размеры, лишь бы ширина картинки совпадала с шириной сайта (оболочка wrapper), высота на Ваше усмотрение.
Как только картинка будет готова, и размещена в папке images каталога сайта, возьмём каркас сайта, созданный на предыдущей странице, и приступим к установке шапки на сайт.
СSS:
В селекторе #header убираем заданную ему высоту, и прописываем ширину и высоту сделанной картинки.
#header{ width: 900px; - ширина height: 200px; - высота background-color: #25B33f; - фон margin-bottom: 10px; - отступ снизу}Затем вставляем саму картинку.
#header{ width: 900px; height: 200px; background-color: #25B33f; margin-bottom: 10px; background-image: url(images/i8.png) - картинка}Свойство background-color указывается на тот случай, если картинка вдруг, в каком либо браузере посетителя, не отобразится.
Если картинка разместилась с каким-либо смещением, и нужно её подправить, то сюда же добавляется свойство background-position
HTML
Теперь дошла очередь до заголовка и описания сайта. Для этого прописываем в теге body блок div с идентификатором id="header", и в нём два заголовка h1 и h3, в которые и вставляем название сайта и его описание
<div id="header"> <h1>Шапка сайта<h1> <h3>Как сделать шапку для сайта с заголовком и описанием</h3></div>Посмотрим, что у нас получается.
Теперь, придадим вид заголовку и описанию. Создаём для них два селектора, и прописываем следующие свойства:
h1{ color: #ffee00; - цвет заголовка font: 40px Georgia; - шрифт margin-left: 300px; - отступ слева}h3{ width: 200px; - ширина color: #ffee00; - цвет font-style: italic; - курсив margin: 70px 0 0 30px; - расположение}Для h3 зададим ширину в 200 пикселей, чтоб он не растянулся на всю картинку. Отступами можно манипулировать в зависимости от того, в каком месте шапки будет удобнее разместить текст.
Посмотрим результат.
По моему, очень даже симпатично.
Обобщим код этой страницы.
<!DOCTYPE html><html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title><style>#wrapper{ width: 900px; outline: 1px solid #787274; padding: 10px; margin: 0 auto;}#header{ width: 900px; height: 200px; background-color: #25B33f; margin-bottom: 10px; background-image: url(images/i8.png)}#sidebar{ background-color: #2FF553; margin-bottom: 10px; width: 180px; padding: 10px; float: right;}#content{ background-color: #9EF5AF; margin-bottom: 10px; width: 670px; padding: 10px;}#footer{ height:80px; background-color: #41874E; margin-bottom: 10px;}.clear{ clear: both;}h1{ color: #ffee00; font: 40px Georgia; margin-left: 300px;}h3{ width: 200px; color: #ffee00; font-style: italic; margin: 70px 0 0 30px;}</style></head><body> <div id="wrapper"> <div id="header"> <h1>Шапка сайта</h1> <h3>Как сделать шапку для сайта с заголовком и описанием</h3> </div> <div id="sidebar">Здравствуйте уважаемые будущие веб-мастера!Мне 55 лет и я рад приветствоватьВас на своём сайте.Этот сайт первый, который я разработал самостоятельно,а до этого умел только входить в интернет. </div> <div id="content">А мне, учитывая возраст и «опыт», было не простопонять как раз эти нюансы, они отнималибольше всего времени.И я решил написать свой материал, так что-бы другим было легчесориентироваться в потоке новой информации.Здесь «разжеваны» все мелочи сопровождающие создание сайта,мимо которых обычно проскакивают другие авторы. </div> <div class="clear"></div> <div id="footer"></div> </div></body></html>Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок <div id="header"> перед заголовком <h1> (к примеру, адрес моей картинки
<img src="https://trueimages.ru/img/0b/d0/06bb1a05753316ac3c567d047ba.png">В таком случае, в селекторе #header убираем свойство background-image: (../images/position.png);, и прописываем position: relative.
А в селекторах тегов h1 и h3, прописываем свойство position: absolute;.
При этом необходимо будет изменить отступы для заголовков. Подробнее о том, почему так делается, можно прочитать в статье Относительное позиционирование
#header{ width: 900px; height: 200px; background-color: #25B33f; margin-bottom: 10px; position:relative;} h1{ position: absolute; color: #ffee00; font: 40px Georgia; left: 300px;} h3{ position: absolute; width: 200px; color: #ffee00; font-style: italic; top: 70px; left:30px;}Всё остальное остаётся без изменения.