Блочная верстка с нуля. Урок 2
Приветствую всех читателей блога!
В прошлом уроке по верстке сайта мы рассмотрели как сделать основной каркас для любой страницы. В этом уроке я планирую сверстать простой макет и детально рассказать все теги и свойства, которые я буду применять.
Напомню наш макет, который я привел в предыдущем уроке:
Перед тем как начать верстку, давайте разберем теорию:
<div> — это тег, он является блочным (кстати, по поводу блочных элементов я скоро напишу отдельную статью, а пока не будем забегать наперед). Ему, как и любому тегу, можно присваивать класс (class) или идентификатор (id). Делается это так:
- присвоим класс для блока — <div class=»myclass»>какой-то контент</div>
- присвоим идентификатор для блока — <div id=»myid»>какой-то контент</div>
Класс или идентификатор может иметь любое имя, используя буквы латинского алфавита (вобщем в верстке мы работает только с переключенным языков на английский, русский не используется). Начинать класс или идентификатор с цифр или других символов, кроме букв — нельзя!
Имя класса может сколько угодно раз повторяться на одной странице, а вот имя идентификатора должно быть уникально в пределах одной html страницы. Например, <div class=»myclass»></div> может встречаться на странице много раз, это очень удобно, если у нас есть одинаковые блоки по своему оформлению, а вот если мы уже 1 раз использовали <div id=»myid»></div>, то 2-ой раз на странице мы его не можем использовать, для этого нужно придумать какое-то другое имя для идентификатора.
ID принято использовать для глобальных блоков, в которых находятся все остальные блоки, но это не главное правило, здесь уже на усмотрение верстальщика. Я очень редко использую id в своей верстке, отдаю предпочтение только классам, чтобы избегать ошибок — повторения id.
Открываем наш файл index.html с помощью любого текстового редактора, я использую sublime text и делаем такую разметку. Вот, что у нас должно получиться в html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок страницы</title> </head> <body> <div class="wrapper"> <div class="header">Header</div> <div class="left-sidebar">Sidebar</div> <div class="content"> Какой-то текст, много текста, какой-то текст, много текста, произвольный текст, много текста, какой-то текст, много текста, </div> <div class="footer">Footer</div> </div> </body> </html> |
Теперь рассмотрим всю верстку детальней, которая находится в между тегами <body></body>.
Я создал класс под названием wrapper, а в него вложил 4 блока с разными классами: header, left-sidebar, content, footer. Имена классов соответствуют названию блоков в нашем макете, написал им контент, чтобы было понятно, какой класс к какому блоку относится. Давайте теперь посмотрим в браузере как выглядит наша верстка, кликнем 2 раза на наш файл index.html.
Как видно, верстка очень не сходится с нашем макетом:) А все потому что цвета, отступы, ширина, высота блоков верстке задается с помощью CSS (англ. Cascading Style Sheets — каскадные таблицы стилей).
В 6-ой строке у нас как раз подключается файл style.css, в котором мы напишем вот такие стили. Его также нужно открыть удобным для вас текстовым редактором. Напомню, что в href=» » должно быть имя файла стилей, которое у вас в директории. Т.е. если у вас лежит фала main.css, тогда подключение этого файла будет выглядеть вот так — href=»main.css».
|
1 |
<link rel="stylesheet" type="text/css" href="style.css"> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
body, html { width: 100%; min-width: 1000px; height: 100%; margin: 0; padding: 0; font-family: Tahoma; background: #ffffff; color: #ffffff; } .wrapper{ width: 1000px; margin: 0 auto; } .header{ background: #009e9d; padding: 50px 0; font-size: 20px; line-height: 24px; text-align: center; text-transform: uppercase; } .left-sidebar{ background: #0010d5; float: left; width: 250px; text-align: center; text-transform: uppercase; } .content{ background: #97969b; float: left; width: 750px; text-align: center; text-transform: uppercase; } .footer{ background: #28282a; padding: 100px 0; padding: 50px 0; font-size: 20px; line-height: 24px; text-align: center; text-transform: uppercase; } |
Теперь давайте посмотрим, что же у нас получилось после того, как мы добавили файл стилей c его содержимым.
Уже более похоже на наш мокап, но почему-то футер не на своем месте и правый блок с контентом поверх футера. Это все потому что мы применили для блоков left-sidebar и content свойство float:left. Это свойство определяет по какому краю будет выравниваться наш блок и при этом следующие за ним элементы будут обтекать блок с других сторон. Чтобы футер стал на свое место, мы после блоков, у которых применено свойство float:left, должны добавить блок с классом clear, это еще называется «очистить поток».
Css свойство clear
Чтобы определить, должен ли контент, который «обтекает» float-блок, быть сброшен вниз, мы используем свойство clear. Список возможных значений свойства:
- left – не допускает обтекание «float» блока слева
- right – запрещает обтекание блока справа
- both – запрещает обтекание блока с двух сторон, т.е. и слева, и справа
- none – разрешено обтекание
Итак, теперь в файл style.css добавим изменения, а именно после .content добавим класс clear с таким свойством.
|
1 2 3 |
.clear { clear: both; } |
А в index.html добавим после <div class=»content»></div> наш блок с классом clear. После изменений наш конечный варианта html-файла будет выглядеть вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок страницы</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <div class="header">Header</div> <div class="left-sidebar">Sidebar</div> <div class="content"> Какой-то текст, много текста, какой-то текст, много текста,<br> Какой-то текст, много текста, какой-то текст, много текста,<br> Какой-то текст, много текста, какой-то текст, много текста,<br> </div> <div class="clear"></div> <div class="footer">Footer</div> </div> </body> </html> |
А если мы посмотрим, что же у нас получилось в браузере, то увидим, что наше свойство clear сделало очистку флоатов и теперь footer действительно на своем месте.
Отлично! Теперь давайте немного подпилим наши контентные блоки, добавим им одинаковую высоту, чтобы наша верстка была похожа на мокап. Добавляем свойство height для класса left-sidebar и content — высота блока, указывается в пикселях. После всех изменений вот как выглядит наш конечный файл style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
body, html { width: 100%; min-width: 1000px; height: 100%; margin: 0; padding: 0; font-family: Tahoma; background: #ffffff; color: #ffffff; } .wrapper{ width: 1000px; margin: 0 auto; } .header{ background: #009e9d; padding: 50px 0; font-size: 20px; line-height: 24px; text-align: center; text-transform: uppercase; } .left-sidebar{ background: #0010d5; float: left; width: 250px; height: 300px; text-align: center; text-transform: uppercase; } .content{ background: #97969b; float: left; width: 750px; height: 300px; text-align: center; text-transform: uppercase; } .clear { clear: both; } .footer{ background: #28282a; padding: 100px 0; padding: 50px 0; font-size: 20px; line-height: 24px; text-align: center; text-transform: uppercase; } |
Теперь посмотрим что же нам показывает браузер:
Мы справились с нашей задачей, текст выравнивать по центру по вертикали в сайдбаре и контенте в этом уроке мы не будем. Этому будет посвящена отдельная большая статья, в которой я расскажу несколько вариантов, как выровнять текст по центру.
Подведем итоги урока и я расскажу о css свойствах, которые мы использовали для данного мокапа.
- width: 1000px; — это ширина 1000 px у блока;
- margin: 0 auto; — блок будет выровнен по центру относительно родительского блока. В нашем случае родительским блоком выступает body и html, т.е. весь документ;
- padding: 20px 0; — внутренние отступы у нашего блока по 20 пикселей;
- margin: 0; — внешние отступы нашего блока от других соседних;
- color: #ffffff; — цвет текста, в данном случае мы указали 16-ричный цвет. #ffffff — белый;
- background: #ffffff; — цвет фона блока, белый;
- font-size: 20px; — размер шрифта в пикселях;
- line-height: 24px; — высота линии текста;
- text-transform: uppercase; — все буквы большие.
Ниже приведу скрин, который показывает на примере, что такое padding и margin. Переписывать htmlbook.ru нет смысла, более детально со всеми свойствами вы можете ознакомиться именно там.
Спасибо, если дочитали статью до конца. Надеюсь она была интересной и познавательной. Чтобы не пропустить следующую статью — подписывайтесь на сайт и добавляйтесь в группу.
Была проблема в момент добавления стилей. Не сразу вспомнила, что href — -название файла, а т.к. назвала его не так, как автор… Ну, сами понимаете. Урок не плохой, но сводится, в основном, к тупому переписыванию (а у нек-х, думаю, и к копипасту) кода. И фиг потом докажешь, что это они дураки, что не вникают, а не Вы не все до конца рассказали. Данная статья не совсем для новичков, мне помогла небольшая практика в написании на html в универе.
Попробую полазить по сайтам, что предлагались на рассмотрение выше, может, будут идеи насчет вынесения оттуда информации в Ваш блог. Народ у нас ленивый, сам не пойдет вычитывать, а просто станет искать дальше, где все разжевано и в рот положено. Сообщите, если нужна в данном вопросе помощь.
Кстати, советую либо заняться вычиткой текста, либо попросит кого-то со стороны — проскакивали ошибки и очепятки. Да, это не главное, но зануд, как я, достаточно много в этом мире.
P.S. Не до конца понятна и вот эта строка: » «. Подскажите, на каком сайте лучше посмотреть ее расшифровку?
Спасибо за столь подробный комментарий! 🙂
Да, возможно мне стоило еще более детальней расписать кое-какие моменты, буду иметь ввиду. Так и есть, что можно скопипастить html и css с этого урока и на основе его можно просто изменять стили, и смотреть что будет получаться – это лучшая практика для начинающего.
P.S. Не до конца понятна и вот эта строка: ” “. Подскажите, на каком сайте лучше посмотреть ее расшифровку? – этот вопрос я не совсем понял )
Вообще кавычки нужны для того, чтобы заключить в них имя файла, к примеру.
О, насчет строки — извините, не заметила, что не скопировалось. Первая строка в index.html. Не все ее составляющие для меня ясны.
Это доктайп, о нем я писал в предыдущей статье
http://freelancerblog.ru/blochnaya-verstka-sajta-s-nulya-urok-2/
В общих чертах я поняла смысл этой строки. Меня интересуют ее составляющие.
Спасибо! Отличный и доступный материал!
Пожалуйста! И вам спасибо за приятный комментарий! 🙂