В этом занятии мы научимся создавать интернет-страницу, в которою, в дальнейшем, будет встроена карта.
Для работы нам понадобится текстовый редактор (блокнот). Рекомендую вместо стандартного блокнота использовать программу Notepad++. Вначале создаем новый документ и во вкладке «Синтаксис» выбираем HTML. Теперь набираемый код будет подсвечиваться. Для автоматического закрытия скобок, кавычек и тегов можно воспользоваться функцией автозавершения: Опции-Настройки...-Автозавершение-Установить галочки напротив необходимых символов. Использовать кодировку UTF-8.
Для позиционирования элементов используются блоки (div-ы). Проектируемую страницу необходимо визуально разделить на прямоугольные блоки. Например, мы разбили страницу на три блока: заголовок, меню, карта.
Получим следующий html-код:
-
<html>
-
<head>
-
-
<style>
-
#header{
-
position: absolute;
-
background: #9FB6CD;
-
width: 100%;
-
height: 50px;
-
left: 0px;
-
top: 0px;
-
}
-
#menu{
-
position: absolute;
-
background: #B9D3EE;
-
width: 100px;
-
left: 0px;
-
top: 50px;
-
bottom: 0px;
-
}
-
#map{
-
position: absolute;
-
background: #C6E2FF;
-
left: 100px;
-
right:0px;
-
top: 50px;
-
bottom: 0px;
-
}
-
</style>
-
-
</head>
-
<body>
-
</body>
-
</html>
Каждому блоку присвоен соответствующий идентификатор (id). Параметры позиционирования и оформление блоков задаются с помощью команд CSS, которые вынесены в заголовок сайта и заключены в теге style. Связь блоков и стилей происходит посредством идентификаторов (в теге div id="идентификатор" соответствует стилю #идентификатор).
Положение блоков задается абсолютным позиционированием (position: absolute;), т.е. задаётся относительно краёв браузера или по ширине и высоте блока.
- width: 100%; // ширина блока; размер любого параметра может быть задан в пикселях (px), либо в процентах (в этом случае размеры будут зависит от разрешения экрана или от родительского блока)
- height: 50px; // высота блока
- left: 0px; // расстояние от левого края родительского элемента
- right:0px; // расстояние от правого края родительского элемента
- top: 0px; // расстояние от верхнего края родительского элемента
- bottom: 0px; // расстояние от нижнего края родительского элемента
Таким образом, ширину блока можно задать несколькими способами:
- Указать left и width - позиционирование блока относительно левой стороны
- Указать right и width - позиционирование блока относительно правой стороны
- Указать left и right - позиционирование блока относительно двух сторон, ширина вычисляется
Если указать одновременно все три параметра left, width и right, то параметр right будет игнорироваться браузером.
Аналогично можно записать правила для параметров высоты блока top, height и bottom.
Все отступы и размеры, указанные в процентах, отсчитываются от размеров и границ родительских элементов. Размеры блоков верхнего уровня (как в примере) рассчитываются относительно размеров всей страницы. Если один блок вложен в другой блок, то его размеру вычисляются уже относительно родительского блока, а не всей страницы.
Существует большое количество вариантов размещения блоков. Ниже приведено несколько примеров.