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

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

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

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

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

Структура блока

Вставляю рисунки

Центрирование блока
Заголовок (чердак) странички
Низ (подвал) странички
Подробнее о блоках

Попробую привести в порядок свои знания о блоках. Для этого я заключил свои идеи по оформлению странички сайта в блок <div> со следующими атрибутами стиля:

  1. Ширину блока установил равной width: 900px;
  2. Цвет фона блока задал как background-color: green;
  3. Окаймил блок рамкой жёлтого цвета border-color: #ff0; в виде сплошной линии border-style: solid; и толщиной border-width: 40px;
  4. От левой внутренней границы рамки до границы содержимого установил расстояние (отступ, поле), равное padding-left: 20px;, а от правой внутренней границы рамки до границы содержимого - отступ, равный padding-right: 40px;

Кроме того, в стилях некоторых абзацев этого блока я тоже сделал дополнения:

  1. В стиле тега <h1> я указал фон background-color: #227b99, поле под рамкой блока margin-bottom: 40px, а рамку вокруг содержимого тега задал сплошной линией border-style: solid; белого цвета border-color: #fff; и шириной border-width: 5px;
  2. В стиль первого абзаца я добавил его фон background-color: #227b99; и ширину width: 400px, а также рамку жёлтого цвета border-width: 5px; border-color: #ff0; border-style: solid;
  3. Во втором абзаце я в стиль добавил атрибут margin-left: 30px;. Этот атрибут указывает расстояние от рамки содержимого элемента, в данном случае содержимого абзаца, до левой рамки родительского тега. Кстати, рамка может быть и невидимой, если задать её толщину, равной border-width: 0px; (по умолчанию она и равна 0).
  4. В третьем абзаце я в стиль добавил атрибут margin-bottom: 40px; - расстояние от нижней рамки абзаца до верхней рамки следующего блока (абзаца), margin-right: 50px; - расстояние от правой рамки абзаца до правой правой рамки родительского блока (или левой рамки блока,находящегося справа), padding-left: 30px; - отступ от левой границы рамки до содержимого (текста, рисунка), padding-top: 20px; - отступ содержимого от верхней границы рамки, padding-right: 100px; - отступ содержимого от правой границы рамки и padding-bottom: 0px; - отступ содержимого абзаца от нижней границы его рамки.
  5. Четвёртый абзац я окаймил красной рамкой border-color: #f00; в виде сплошной линии border-style: solid; толщиной border-width:5px; и задал слева от рамки абзаца поле margin-left: 20px; до рамки родительского блока.
  6. В пятом абзаце я только изменил значение атрибута ширины содержимого блока width: 250px; и поле слева от рамки сделал равным margin-left: 0px;

Все дополнения, которые я внёс в текст странички моего 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: green; width: 900px; border-width: 40px; border-color: #ff0; border-style: solid; padding-left: 20px; padding-right: 40px;">
       <h1 style = "background-color: #227b99; margin-bottom: 40px; border-width: 5px; border-color: #fff; border-style: solid;"> Вот что я задумал сделать: </h1>
          <p style = "background-color: #227b99; width: 400px; margin-top: 0; margin-bottom: 0; border-width: 5px; border-color: #ff0; border-style: solid; font-style: italic;"> 1. Сначала наверху страницы я помещу красиво оформленное название нашего садоводства (чердак страницы);</p>
          <p style ="margin-left: 30px; background-color: silver; font-weight: bold; text-decoration: underline;"> 2. Ниже горизонтальное меню для перехода на страницы главных разделов сайта;</p>
          <p style ="background-color: pink; margin-bottom: 40px; margin-right: 50px; padding-left: 30px; padding-top: 20px; padding-right: 100px; padding-bottom: 0px; font-size: 15pt; font-family: Arial;"> 3. Ещё ниже вертикальное меню для перехода на страницы внутри раздела сайта и справа от вертикального меню само содержание страницы, ради чего она и создавалась;</p>
          <p style ="background-color: silver; width: 250px; color: red; margin-left: 20px; border-width:5px; border-color: #f00; border-style: solid; float: left"> 4. Ещё ниже - нижнее меню, и наконец,</p>
          <p style = "background-color: silver; width: 250px; margin-left: 0px; padding: 30px; ">5. В самом низу опять же <span style ="font-weight: bold; font-style: italic; color: green;"> красиво </span> оформленный "подвал".</p>
    </div>

    </div>
</center>
    </body>
</html>


Я сохранил этот текст, как обычно, в файле make_site_how.html, в меню Notepad++ выбрал пункт Запуск, а в выпавшем меню пункт Launch in Firefox. И на экране появилась моя первая страничка.

На рисунке ниже я отметил, как "отреагировал" браузер на атрибуты блока <div> с моими идеями.

Структура блока

А на следующем рисунке показано, что сделал браузер с содержимым блока с идеями.

Структура блока

Да, трудноватый пункт... Но теперь на очереди главное меню сайта. Первый и последний пункт моих идей я выполнил, и я исключаю их из блока моих идей.

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