> Обо всём мне близком и далёком  > Как я создавал этот сайт  > Первая страничка  > Главное меню

Обо всём мне близком и далёком

Лучше скажи мало,
но хорошо.
Козьма Прутков

Как я самостоятельно создавал этот сайт.

Принимаясь за дело, соберись с духом. Козьма Прутков

Главное меню

С помощью главного меню я собираюсь переходить от одного раздела сайта к другому, а с помощью вертикального к страницам внутри выбранного раздела. Разделы я назвал так: "О товариществе", "Законодательство", "Помощь садоводу" и "Интересные ссылки".

Я вставил на мою страничку после блока заголовка, блок главного меню (тег <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. Кажется, всё просто, но лучше разобраться со структурой блока подробнее.

В блок главного меню я вставил четыре блока - пункты меню - и задал им одинаковые стили оформления:

  1. Фон пунктов меню background-color: green; - зелёный (этот фон я тоже задал, чтобы увидеть, что у меня получается, на самом деле я хочу, чтобы фон пункта меню был такой же, как фон моей страницы),
  2. Высота пунктов height: 30px; ширина - width: 165px;
  3. Границы рамки вокруг контента я выделили только слева 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;
  4. Вокруг рамки я установил поля слева margin-left: 10px; справа margin-right: 10px; сверху margin-top: 2px; и снизу margin-bottom: 2px;.
  5. И указал атрибут float: left;, чтобы блок выравнивался по левой строне, а другие элементы (у меня остальные пункты меню) обтекали его справа.

Рамка первого пункта меню у меня отступила на 10px от левой границы рамки блока меню margin-left: 10px;, левая рамка второго пункта находится в 20px от правой рамки первого пункта, так как правое поле первого пункта меню margin-right: 10px; и левое поле второго пункта меню margin-left: 10px; в сумме дают 20px.

Знак привлечения внимания

Стили пунктов меню оказались у меня одинаковыми и длинными. Это потому, что я определение стиля style встраивал в каждый тег. Нельзя ли описывать одинаковые элементы только один раз? Можно! Для этого некоторые или все определения стилей нужно собрать в одном месте в парном теге <style>, а сам этот тег должен быть размещён в разделе <head> HTML-документа.

Встраивание стилей в заголовок HTML-документа

Сайт основан в августе 2012 - 2024 г. © Все права на материалы сайта принадлежат Правлению садоводческого некоммерческого товарищества «Садовое».
Ленинградская область, Всеволожский район, Лесколовская волость, район деревни Верхние Осельки, ж/с Пери
Плагиат не преследуется!