- Создание сайта на Adobe Dreamweaver
- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- CSS
- Работа с текстом и изображениями в CSS
- Блочная верстка
Если в языке html использовали табличную верстку сайта, то в языке css для разметки и верстки страницы используют блочные элементы (div). Блочный элемент служит для разметки страницы, в который помещают содержание страницы (контент). Блочные элементы могут вкладываться друг в друга (также как и таблицы в html).
Блок (div) имеет форму прямоугольника с такими свойствами:
Высота (height), ширина (width).Эти параметры можно задавать в пикселях (рх), процентах (%) или в условных единицах (em).
Кроме этого можно задать видимость границы блока с помощью параметра border.
Описывается этот параметр так:
border : толщина_границы вид_границы цвет_границы;
Например:
border:2px solid white;
Т.е. мы задали толщину границы в 2 пикселя, тип заливки- сплошная линия, цвет границы — белый. Более подробно как задавать границы блока можно посмотреть в различных справочниках по css.
Также блок имеет свойства разметки : padding и margin.
Padding- это отступ от границы блока до контента.
Margin – это отступ от границы блока до границы внешнего блока.
Эти свойства могут иметь такие атрибуты:
Left (margin-left, padding-left) — отступ слева
Right (margin-right, padding- right) – отступ справа
Top (margin-top, padding- top)- отступ сверху
Bottom (margin-bottom, padding- bottom)- отступ снизу.
Если отступы используются без атрибутов, то это значит, что они применимы для всех сторон блока.
Давайте для примера создадим блок шапки нашего сайта.
В файле style.css добавим такую запись:
#header {
width: 100%;
height: 100px;
border :2px solid white;
}
Теперь создадим новый файл site2.html
Разместим там наш блок хедера:
<html> <head> <title>Site2</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> </div> </body> </html>
Блоки разметки можно позиционировать на странице с точностью до пикселя. Позиционирование бывает относительное и абсолютное. При абсолютном позиционировании точка отсчета начинается в левом верхнем углу экрана. Ось х идет слева направо, ось у сверху вниз. При относительном позиционировании точка отсчета начинается относительно родительского элемента. Позиционирование задается командой position.
Давайте внутри хедера сделаем блок для логотипа. В файле style.css напишите код:
#logo {
position:absolute;
width: 156px;
height: 35px;
left: 28px;
top: 65px;
border :2px solid white;
}
А в файле site2.html вложим в блок header блок logo
<body> <div id="header"> <div id="logo"> </div> </div> </body>
Сохраните и посмотрите в браузере что получилось. У нас внутри блока хедера разместился блок логотипа. В следующем уроке мы научимся верстать страницы на основе блоков.