|
|
Блоки DIV в HTML
Дата: 25/10/2014
Привет всем! В этой статье, как и обещал раньше, я расскажу о блоках DIV.
Блоки DIV в последнее время очень часто используются в сайтостроительстве, особенно на динамических страничках. Блоками DIV легко управлять, как в CSS, так и при помощи JAVASCRIPT и PHP.
У вас может возникнуть законный вопрос, почему? Отвечу вам просто, без рассуждений, потому что блокам DIV можно присваивать ID, которым в последствии можно манипулировать, как вам вздумается!
Также блоками можно легко выстраивать сам сайт, как в конструкторе: пару кирпичиков слева, пару - справа, два - сверху, один - внизу.
Создание блока DIV
Сам блок создаётся просто, как вы уже поняли, тегом <div> и закрывающим </div>. Давайте создадим три блока, в которых что-нибудь разместим!
<document HTML>
<html>
<head>
<title>
Блоки DIV в HTML
</title>
</head>
<body>
<div>
Вставьте сюда баннер своего сайта или меню.
</div>
<div>
Сделайте в этом блоке табличную разметку и вставьте информацию о сайте!
</div>
<div>
Здесь разместите ваши счётчики, рекламу.
</div>
</body>
</html>
Если вы сделали всё, как надо, на вашей страничке сверху появится баннер или меню, посередине - ваша информация, а снизу - счётчики и реклама. Прошу вас заметить, что ваши блоки будут растягиваться по высоте автоматически, а по ширине - иметь постоянную длину во весь экран. Вы можете менять свойства блоков, делая их или ризиновыми, или фиксированными, об этом я писал в статье
Резиновый или фиксированный сайт на HTML.
Управление блоками DIV
Лучше всего управлять блоками DIV через каскадные таблицы CSS, поэтому мы и начинаем знакомиться с атрибутом STYLE, который является частью CSS. Прошу вас не спешить изучать пока CSS, а постепенно переходить на него в процессе познания HTML. Я на собственном опыте чуть не запутался и поэтому даю дельный совет на этот счёт!
Вы сами потом поймёте, что CSS не так сложен, как кажется, и даже очень похож на HTML своими атрибутами и свойствами, только запись в CSS отличается от HTML, и, плюс ко всему, у него много дополнительных атрибутов, о которых со временем вы узнаете. А теперь давайте я вам продемонстрирую пример управления блоками див и создам простенький шаблон из четырёх блоков.
Пример сайта из блоков DIV
<document HTML>
<html>
<head>
<title>
Пример web-странички из блоков DIV
</title>
</head>
<body>
<div style="position: fixed; left:0%; top:0%; right:80%; bottom:0%; border:5px;"> - блок под меню сайта расположен слева по всей высоте и по ширине на 20%.
Меню сайта.
</div>
<div style="position: absolute; left:20%; top:0%; right:0%; bottom:90%; border:5px;"> - верхний блок div справа от блока под меню. Занимает 80% экрана по ширине и 10% по высоте вверху.
Блок под баннер.
</div>
<div style="position: absolute; left:20%; top:10%; right:0%; bottom:10%; border:5px;"> - блок под контент. Расположение справа от меню и ниже от верхнего блока.
Блок под контент.
</div>
<div style="position: absolute; left:20%; top:90%; right:0%; bottom:0%; border:5px;"> - блок под счётчики. Расположен внизу экрана под блоком для контента.
Блок под контент.
</div>
</body>
</html>
Скопируйте этот пример в свой HTML-файл и посмотрите на результаты. Заполните контентный блок так, чтобы он уходил вниз и скрывал блок с счётчиками. Затем сделайте прокрутку вниз и обратите внимание, что блок для меню не двигается. Это из-за параметра position и свойства fixed, делающие блок фиксированным. Как видите, блоками управлять достаточно легко, зная некоторые правила и параметры. Первое правило, которое вы должны запомнить - это то, что блоки должны выстраиваться слева направо. Второе правило - это касается правила позиционирования. Расстановка свойств начинается по кругу слева и заканчивается внизу, а отступы делаются от края, то есть, поглядите на пример и заметьте, что блок с меню имеет значение
left: 0%; - отступ от левого края, левой стороны блока имеет значение ноль, top: 0%; - верхняя сторона блока имеет нулевое значение от верхнего края окна браузера, right: 80%; - правая сторона блока располагается от правого края на 80%, bottom:0%; - и нижняя сторона блока, без отступа от нижнего края, принимает значение, как и верхняя сторона блока, ноль процент. Можно запутаться, но вы поэкспериментируйте, делая разные отступы, и вы быстро сориентируетесь, что - да как! Но чтобы вам было понятнее, что происходит, скажу более наглядно. Представьте, что у вас со всех сторон экрана невидимые прессы, и они сжимают ваш блок слева, сверху, справа и снизу. Вот и вся премудрость!
Теперь немного о border:5px;, как вы уже, наверное, догадались этот параметр задаёт нам границы блоков, чтобы они исчезли, нужно сделать значение 0 или вовсе убрать это свойство из записи. О других параметрах и свойствах я напишу позже в статьях о CSS. Это отдельная тема и очень обширная, поэтому здесь её затрагивать не буду.
В завершение этой статьи хочу вам дать небольшие советы о блоках DIV. Помните, что порой некоторые люди специально или по неаккуратности отключают стили в браузерах, и страничка сразу становится не приглядной, поэтому лучше всего блоки DIV делать, не забывая об этом. Сайты, сделанные из блоков, получаются красивыми, но лучше делать сперва табличную разметку, и помещать блоки уже внутри таблицы, чтобы избежать стилевых изменений. На этой ноте я завершу эту статью, и уже в другой раз расскажу вам, в следующей статье, о формах HTML, без которых не обходится ни один сайт!
С уважением, Администратор!
предыдущая
Список статей по теме...
|
|
