Обо всём мне близком и далёком
Лучше скажи мало,но хорошо. Козьма Прутков
Как я самостоятельно создавал этот сайт.
Принимаясь за дело, соберись с духом. Козьма ПрутковВставка изображения в "подвал" странички
Вставляю рисунки
Центрирование блока <div>Заголовок (чердак) странички
Низ (подвал) странички
Подробнее о блоках
В подвал моего сайта (в самом низу странички) я помещу летнюю фотографию поля и живописных холмов, расположенных недалеко от СНТ "Садовое". Эту фотографию я сохранил в подпапке images папки I make site в файле site_bottom1300.jpg. (Файл рисунка можно скопировать по адресу: sntsadovoe.ru/images/site_bottom1300.jpg).
Чтобы поместить рисунок, как фон блока, в стиле моего первого блока <div> (в моей страничке) я добавил атрибуты background-image: url('images/site_bottom1300.jpg'); - путь к рисунку, background-repeat: no-repeat; - повторить рисунок только один раз, background-position: center bottom; - поместить этот рисунок по центру блока внизу. И ещё я задал высоту моей странички равной 97% от высоты окна браузера height: 97% Эти новые атрибуты блока в тексте 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>
nbsp; <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. И на экране появилась моя первая страничка, с блоком заголовка.
Чудесно!!
Теперь надо остановиться, уточнить и закрепить свои знания о блоках на примере блока <div> или начать создавать главное меню сайта.
Ленинградская область, Всеволожский район, Лесколовская волость, район деревни Верхние Осельки, ж/с Пери
Плагиат не преследуется!