В прошлой лекции мы узнали как работает табличная верстка сайта. На сегодняшний день, это не актуальная разметка страницы и была показана для теоретической базы.
Почему не актуальна, - давайте переведем браузер в режим окна и попробуем изменять его размеры, растягивая влево и вправо.
Мы увидим, что наша страница имеет статичную минимальную ширину, а при растягивании окна браузера контент (содержимое) расползается на всю ширину блока.
В результате получается некрасивая нечитабельная разметка контента. Если открыть такую страницу на мобильном устройстве, вряд ли вы сможете что-то на ней разглядеть без увеличения масштаба. Согласитесь, - это не удобно. Как пользователь, я бы сразу покинул такую страницу.
Что же делать в таком случае?!
Сегодня мы узнаем про блочную верстку
Современные технологии программирования позволяют нам использовать связки языков программирования, - это очень удобно.
Начнем с комбинации HTML + CSS. Про HTML мы уже немного знаем, - это язык разметки страницы, а CSS (Cascading Style Sheets — каскадные таблицы стилей) - это язык стилей, а точнее правила стилей. Эти правила мы будем использовать для нашего HTML.
CSS можно писать прямо внутри нашей страницы, делается это следующим образом (откроем страницу в Notepad++):
<html>
<head>
<style type="text/css">
p {
font-size: 24px; /* Размер шрифта */
color: #ff0000; /* Цвет текста */
}
</style>
</head>
<title>Easy Dev - Создание сайтов от А до Я</title>
<body>
Сохранимся и посмотрим как изменилась наша страница:
Для того, чтобы HTML понимал, что ему необходимо задействовать CSS, обязательно наличие тега <head> и обязательно его расположение до тега <body>.
<style type="text/css"> - сообщаем HTML о том, что будут использоваться стили CSS.
p {
font-size: 24px; /* Размер шрифта */
color: #ff0000; /* Цвет текста */
}
Данная запись говорит о том, что все параграфы, то есть содержимое тегов <p>, будет иметь размер шрифта 24 пикселя и будет красного цвета.
Вот так выглядит синтаксис CSS. С этого момента все параграфы будут иметь единый стиль. Согласитесь, - это удобно.
Ранее нам приходилось для каждого параграфа задавать одни и те же правила несколько раз:
Представьте, что на странице будет находится огромная статья с кучей абзацев и нам, вдруг, понадобится сделать выравнивание текста, скажем, по правому краю, - нам придется в каждом теге менять параметр align.
Давайте посмотрим на то, как мы можем упростить себе работу. Уберем в исходном коде совершенно все параметры у каждого параграфа. Вместо этого мы добавим стиль параграфа:
p {
font-size: 24px; /* Размер шрифта */
text-align: left; /* Выравнивание текста */
color: #ff0000; /* Цвет текста */
}
Синтаксис отличается от HTML, но не пугайтесь, - через пару лекций вы привыкнете к нему. Все, что нужно пока запомнить: набор параметров стилей помещается { здесь }, а так же каждый параметр закрывается точкой с запятой.
Ах, да, - содержимое тега /* является комментарием и совершенно не влияет на работу кода. Не забывайте его закрывать */ В HTML комментарий помещается <!-- сюда -->
DIV
С этого момента мы очень часто будем работать с тегом <div>, - он является самым основным элементом в верстке. Каждый <div> - это отдельный блок, который можно расположить в любое место страницы. Метод разметки страницы при помощи блоков называется блочной версткой.
Чтобы вы понимали о чем идет речь, перейдем сразу к практике. Заменим всю нашу таблицу блоками (ctrl+c/ctrl+v):
<html>
<head>
<style type="text/css">
p {
font-size: 24px; /* Размер шрифта */
text-align: left; /* Выравнивание текста */
color: #ff0000; /* Цвет текста */
}
</style>
</head>
<title>Easy Dev - Создание сайтов от А до Я</title>
<body>
<div>
<h1>Easy Dev</h1>
</div>
<div>
<p>Левый сектор</p>
<p>Текст в левом секторе. Резервируем место.</p>
</div>
<div>
<p>Создание сайтов от А до Я. Делать сайты может каждый! Это легче, чем кажется! Я вас научу!</p>
</div>
<div>
<p>Правый сектор</p>
</div>
<div>
<p>Подвал страницы Easy Dev</p>
</div>
</body>
</html>
Сохранимся и посмотрим результат:
Что случилось с нашей красивой страницей? Не отчаивайтесь! Сейчас мы сделаем ее еще лучше, а главное - намного быстрее, чем в первый раз!
Все объекты и элементы в программировании принято как-то называть (задавать имя). Это необходимо для их распределения по классам. Посмотрите на наш код, - как мы будем понимать какой из этих div'ов нам нужен? А как мы к нему обратимся, когда захотим его изменить?
Все просто - мы дадим им логические имена так, чтобы не запутаться:
<html>
<head>
<style type="text/css">
p {
font-size: 24px; /* Размер шрифта */
text-align: left; /* Выравнивание текста */
color: #ff0000; /* Цвет текста */
}
</style>
</head>
<title>Easy Dev - Создание сайтов от А до Я</title>
<body>
<div class="container">
<div class="logo">
<h1>Easy Dev</h1>
</div>
<div class="left-sector">
<p>Левый сектор</p>
<p>Текст в левом секторе. Резервируем место.</p>
</div>
<div class="content">
<p>Создание сайтов от А до Я. Делать сайты может каждый! Это легче, чем кажется! Я вас научу!</p>
</div>
<div class="right-sector">
<p>Правый сектор</p>
</div>
<div class="footer">
<p>Подвал страницы Easy Dev</p>
</div>
</body>
</div>
</html>
Классам необходимо задавать имена, связанные с логикой кода. Например, класс левого сектора я назвал left-sector, а не qwerty. Это будет помогать вам, поэтому задавайте для классов обдуманные имена.
Таким образом, мы разметили нашу страницу, подобно таблице, только теперь мы можем изменять разметку так, как нам потребуется.
Теперь к каждому классу у нас есть доступ из CSS. Давайте скорее посмотрим как эта связка работает:
<style type="text/css">
p {
font-size: 14px; /* Размер шрифта */
text-align: left; /* Выравнивание текста */
color: #00000; /* Цвет текста */
}
div {
border: 1px solid; /* граница всех блоков */
}
.logo {
width: 100%; /* длина блока с лого */
}
.left-sector, .right-sector, .content, .footer { /* через запятую указываем все классы, к которым необходимо применить правила */
text-align: left;
float: left; /* обтекание блока */
display: inline-block; /* блоки в линию */
}
.content {
width: 500px;
color: #555000;
}
.left-sector {
width: 250px;
color: #555000;
}
.right-sector {
width: 250px;
color: #555000;
}
.footer {
width: 100%;
text-align: right;
}
.container {
width: 1200px;
right: 25%; /* отступ справа */
left: 25%; /* отступ слева */
position: relative; /* положение от исходной точки */
}
</style>
Сохраняемся и смотрим результат:
Хочу обратить ваше внимание на то, что div'ы не зависят друг от друга, отлично от таблицы и поэтому являются более удобными и практичными в разметке сайта.
Для наглядности я показал границы каждого блока и мы видим независимость блоков.
Непосредственно про CSS и его возможности я рекомендую почитать в сети: есть куча уроков и примеров, а так же официальная документация.
Еще немного CSS-магии и мы получаем картину, похожую на настоящий сайт:
<style type="text/css">
p {
font-size: 14px; /* Размер шрифта */
text-align: left; /* Выравнивание текста */
color: #00000; /* Цвет текста */
}
div {
border: none;
}
.logo {
width: 100%;
}
.left-sector, .right-sector, .content, .footer {
text-align: left;
float: left;
display: inline-block;
}
.content {
background: #f1f1f1;
width: 600px;
height: 1000px;
color: #555000;
margin-left: 4%;
}
.left-sector {
background: #fffbd4;
width: 250px;
color: #555000;
}
.right-sector {
background: #eaf6ff;
width: 250px;
color: #555000;
float: right;
}
.footer {
width: 100%;
text-align: right;
}
.container {
background: #f7f7f7;
width: 1200px;
right: 25%;
left: 25%;
position: relative;
}
</style>
Глядя на страницу, хочется ее чем-то наполнить. Давайте подготовим еще несколько блоков для следующего урока, а так же оформим их немного (весь код файла, конечный):
<html>
<head>
<style type="text/css">
p {
font-size: 14px; /* Размер шрифта */
text-align: left; /* Выравнивание текста */
color: #00000; /* Цвет текста */
}
div {
border: none;
}
.logo {
width: 100%;
}
.low-sector-left, .low-sector-right {
padding: 5px;
margin-bottom: 5px;
}
.low-sector-left {
background: #fffbd4;
}
.low-sector-right {
background: #eaf6ff;
}
.left-sector, .right-sector, .content, .footer {
text-align: left;
float: left;
display: inline-block;
}
.content {
padding: 5px;
background: #f1f1f1;
width: 600px;
height: 1000px;
color: #555000;
margin-left: 4%;
}
.left-sector {
width: 250px;
color: #555000;
}
.right-sector {
width: 250px;
color: #555000;
float: right;
}
.footer {
background: #dedddd;
width: 100%;
}
.container {
float: left;
background: #f7f7f7;
width: 1200px;
right: 25%;
left: 25%;
position: relative;
}
</style>
</head>
<title>Easy Dev - Создание сайтов от А до Я</title>
<body>
<div class="container">
<div class="logo">
<h1>Easy Dev</h1>
</div>
<div class="left-sector">
<div class="low-sector-left">
<p>Левый сектор</p>
<p>Текст в левом секторе. Резервируем место.</p>
</div>
<div class="low-sector-left">
<p>Левый сектор 2</p>
<p>Текст в левом секторе. Резервируем место.</p>
</div>
<div class="low-sector-left">
<p>Левый сектор 3</p>
<p>Текст в левом секторе. Резервируем место.</p>
</div>
</div>
<div class="content">
<p>Создание сайтов от А до Я. Делать сайты может каждый! Это легче, чем кажется! Я вас научу!</p>
</div>
<div class="right-sector">
<div class="low-sector-right">
<p>Правый сектор</p>
</div>
<div class="low-sector-right">
<p>Правый сектор</p>
</div>
</div>
<div class="footer">
<p>Подвал страницы Easy Dev</p>
</div>
</div>
</body>
</html>
Подведем итоги
Имея в своем распоряжении такой код, можно сверстать практически любую страницу практически любого сайта. Мы базово заложили тело страницы, подготовили место для шапки, у нас есть два сайдбара и подвал. Эти элементы 100% есть на всех сайтах, так будет и у нас.
Возможно, в этой статье очень много не знакомой информации. Не стесняйтесь искать объяснения и примеры в интернете.
Рекомендую начать с HTML BOOK тут есть все то, о чем мы говорим и что делаем.
В сегодняшнем материале помогут глубже разобраться статьи про DIV и базовый синтаксис CSS.
Напишите в комментариях:
1. Что мы пропустили?
2. Как можно это исправить?
3. Добавьте в подвал страницы еще один блок, который будет расположен справа, на одном уровне с имеющимся текстом.
