Как я самостоятельно создавал этот сайт.
Принимаясь за дело, соберись с духом.
Козьма Прутков
Главное меню
С помощью главного меню я собираюсь переходить от одного раздела сайта к другому, а с помощью вертикального к страницам внутри выбранного раздела. Разделы я назвал так: "О товариществе", "Законодательство", "Помощь садоводу" и "Интересные ссылки".
Я вставил на мою страничку после блока заголовка, блок главного меню (тег <div>), а внутрь этого блока поместил ещё четыре блока (те же теги <div>). Вот какую конструкцию я вставил после блока заголовка:
<div >
<div>О товариществе<div>
<div>Законодательство</div>
<div>Помощь садоводу</div>
<div>Интересные ссылки</div>
</div>
Этим блокам <div> я задал стили и текст моего Web-документа стал выглядеть следующим образом:
<html>
<head>
<title>
Моя первая страница сайта
</title>
</head>
<body style =
"background-color: #557bac;">
<center>
<div style =
"width: 1268px; height: 97%;
background-image: url('images/site_bottom1300.jpg');
background-repeat: no-repeat;
background-position: center bottom;">
<div style =
"background-color: #557bac;
font-style: bold; font-size: 15px; color: #fff;
border-bottom-width: 2px; border-bottom-color: #fff9bd; border-bottom-style: solid;">
<img style =
"width: 500px; padding-right: 40px;
float: left;"
src="images/lblSadovoe.jpg" alt="Заголовок сайта">
<p style =
"padding-top: 2px;">Ленинградская область, Всеволожский район, Лесколовская волость, район деревни Верхние Осельки, ж/с Пери
</p>
</div>
<!-- Ниже на жёлтом фоне текст главного меню -->
<div style = "background-color: red; margin-top: 10px; height: 36px; width: 758px;">
<div style = "background-color: green;
margin-left: 10px; margin-right: 10px; margin-top: 2px; margin-bottom: 2px;
width: 165px; height: 30px;
border-left-width: 2px; border-left-color: #fff9bd; border-left-style: solid;
border-right-width: 2px; border-right-color: #fff9bd; border-right-style: solid;
float: left; ">О товариществе</div>
<div style = "background-color: green;
margin-left: 10px; margin-right: 10px; margin-top: 2px; margin-bottom: 2px;
width: 165px; height: 30px;
border-left-width: 2px; border-left-color: #fff9bd; border-left-style: solid;
border-right-width: 2px; border-right-color: #fff9bd; border-right-style: solid;
float: left; ">Законодательство</div>
<div style = "background-color: green;
margin-left: 10px; margin-right: 10px; margin-top: 2px; margin-bottom: 2px;
width: 165px; height: 30px;
border-left-width: 2px; border-left-color: #fff9bd; border-left-style: solid;
border-right-width: 2px; border-right-color: #fff9bd; border-right-style: solid;
float: left; ">Помощь садоводу</div>
<div style = "background-color: green;
margin-left: 10px; margin-right: 10px; margin-top: 2px; margin-bottom: 2px;
width: 165px; height: 30px;
border-left-width: 2px; border-left-color: #fff9bd; border-left-style: solid;
border-right-width: 2px; border-right-color: #fff9bd; border-right-style: solid;
float: left; ">Интересные ссылки</div>
</div>
<h1> Вот что я задумал сделать:
</h1>
<p style =
"background-color: silver; font-weight: bold; text-decoration: underline;">
2. Ниже горизонтальное меню для перехода на страницы главных разделов сайта;
</p>
<p style =
"background-color: pink; padding: 30px; font-size: 15pt; font-family: 'Arial';">
3. Ещё ниже вертикальное меню для перехода на страницы внутри раздела сайта и справа
от вертикального меню само содержание страницы, ради чего она и создавалась;
</p>
<p style =
"background-color: silver; width: 250px; color: red;">
4. Ещё ниже - нижнее меню, и наконец,
</p>
<p>5. В самом низу опять же
<span style =
"font-weight: bold; font-style: italic; color: green;"> красиво
</span> оформленный "подвал".
</p>
</div>
</center>
</body>
</html>
Я сохранил этот текст, как обычно, в файле make_site_how.html, в меню Notepad++ выбрал пункт Запуск, а в выпавшем меню пункт
Launch in Firefox. И на экране появилась моя первая страничка, с пунктами главного меню. Я специально задал различный фон всем элементам меню, чтобы понять, как это всё работает.
Что же я сделал?
Я для главного меню создал блок <div> высотой height: 36px; и шириной width: 758px;, задал ему красный фон background-color: red; (временно, пока разбираюсь, что к чему! на самом деле я хочу, чтобы фон блока меню был такой же, как фон моей страницы) и задал расстояние от блока заголовка, равное 10px - margin-top: 10px. Под действием тега <center> этот блок в окне браузера отцентрировался по горизонтали.
Атрибуты width: и height: задают область внутри блока <div>, в которой размещается содержимое этого блока. Это содержимое можно окантовать рамкой заданной толщины с помощью атрибута border:, например, border: 2px. По умолчанию эта рамка вплотную, без отступов, охватывает содержимое (или по-программистски, "контент"). Но рамку можно раздвинуть (при этом размеры содержимого width: и height: не меняются!), указав отступы padding от содержимого до сторон рамки, например, слева padding-left: 5px; , справа padding-right: 10px;, сверху padding-top: 7px; и снизу padding-bottom: 15px;.
Значит, размеры блока <div> больше, чем размеры, заданные атрибутами width: и height: на величину, заданную атрибутами padding:.
На самом деле размеры самого блока будут ещё больше, если с внешних сторон рамки задать поля margin. Кажется, всё просто, но лучше разобраться со структурой блока подробнее.
В блок главного меню я вставил четыре блока - пункты меню - и задал им одинаковые стили оформления:
- Фон пунктов меню background-color: green; - зелёный (этот фон я тоже задал, чтобы увидеть, что у меня получается, на самом деле я хочу, чтобы фон пункта меню был такой же, как фон моей страницы),
- Высота пунктов height: 30px; ширина - width: 165px;
- Границы рамки вокруг контента я выделили только слева border-left-width: 2px; border-left-color: #fff9bd; border-left-style: solid; и справа border-right-width: 2px; border-right-color: #fff9bd; border-right-style: solid; сплошными линиями жёлтого цвета шириной в 2px;
- Вокруг рамки я установил поля слева margin-left: 10px; справа margin-right: 10px; сверху margin-top: 2px; и снизу margin-bottom: 2px;.
- И указал атрибут float: left;, чтобы блок выравнивался по левой строне, а другие элементы (у меня остальные пункты меню) обтекали его справа.
Рамка первого пункта меню у меня отступила на 10px от левой границы рамки блока меню margin-left: 10px;, левая рамка второго пункта находится в 20px от правой рамки первого пункта, так как правое поле первого пункта меню margin-right: 10px; и левое поле второго пункта меню margin-left: 10px; в сумме дают 20px.
Стили пунктов меню оказались у меня одинаковыми и длинными. Это потому, что я определение стиля style встраивал в каждый тег. Нельзя ли описывать одинаковые элементы только один раз? Можно! Для этого некоторые или все определения стилей нужно собрать в одном месте в парном теге <style>, а сам этот тег должен быть размещён в разделе <head> HTML-документа.
Встраивание стилей в заголовок HTML-документа