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

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

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

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

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

Вставка изображения на "чердак" странички

В заголовок (чердак) моего сайта я помещу название нашего садоводства. Название представляет собой рисунок (который я нарисовал в CorelDraw и сохранил в подпапке images папки I make site в файле lblSadovoe.jpg) и текст с адресом СНТ "Садовое". (Файл рисунка можно скопировать по адресу: sntsadovoe.ru/images/lblSadovoe.jpg).

Итак, в моём первом блоке <div>, в котором я поместил свои идеи и который я назову моей страничкой, я убрал из стиля атрибут background-color: #fcfadd; - и теперь фон моей странички будет не жёлтоватым, а определяться стилем родительского тега <body>, то есть будет синий, как ясное небо над головой.

Затем в моей страничке я ввёл (перед моими идеями) блок <div> - назову его блоком заголовка - и определил для него стиль. Для наглядности в нижеследующем тексте HTML-документа я показал этот новый блок на жёлтом фоне.


<html>
    <head>
       <title> Моя первая страница сайта </title>
    </head>
    <body style = "background-color: #557bac;">
<center>
<div style = "width: 1268px;">

<!-- Ниже на жёлтом фоне текст блока заголовка -->
<div style = " 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>

       <h1> Вот что я задумал сделать: </h1>
          <p style = "font-style: italic;"> 1. Сначала наверху страницы я помещу красиво оформленное название нашего садоводства (чердак страницы);</p>
          <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 style = "background-color: silver; width: 300px; margin-left: 200px; padding: 30px;">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. И на экране в окне браузера появилась моя первая страничка, с блоком заголовка.

Моя страничка с заголовком

В блоке заголовка у меня два тега - тег для вставки рисунка - <img> и тег абзаца - <p>. Блок заголовка <div> является родительским по отношению к ним, так как они находятся внутри его. Самому блоку заголовка я задал такие атрибуты стиля:

  1. Фон блок заголовка получил от своего "родителя" <body> - синий.
  2. Шрифт внутри блока заголовка полужирный bold, его размер равен 15px и цвет шрифта белый #fff - font-style: bold; font-size: 15px; color: #fff;
  3. Нижняя граница блока заголовка выделена сплошной линией solid жёлтоватого цвета #fff9bd и толщиной 2px - border-bottom-width: 2px; border-bottom-color: #fff9bd; border-bottom-style: solid;.

Стиль для тега <img>, с помощью которого указывается путь к файлу с рисунком, я задал в следующем виде:

  1. Ширина рисунка - width: 500px
  2. Поле справа от рисунка - padding-right: 40px;
  3. Блок, заданный тегом <img> выравнивается по левой стороне родительского блока, а другие элементы обтекают его справа - float: left.

Вот! Заголовок сайта я сделал и теперь вставлю рисунок в подвал сайта.

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