Как я самостоятельно создавал этот сайт.
Принимаясь за дело, соберись с духом.
Козьма Прутков
Вставка изображения на "чердак" странички
В заголовок (чердак) моего сайта я помещу название нашего садоводства. Название представляет собой рисунок (который я нарисовал в 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> является родительским по отношению к ним, так как они находятся внутри его. Самому блоку заголовка я задал такие атрибуты стиля:
- Фон блок заголовка получил от своего "родителя" <body> - синий.
- Шрифт внутри блока заголовка полужирный bold, его размер равен 15px и цвет шрифта белый #fff - font-style: bold; font-size: 15px; color: #fff;
- Нижняя граница блока заголовка выделена сплошной линией solid жёлтоватого цвета #fff9bd и толщиной 2px - border-bottom-width: 2px; border-bottom-color: #fff9bd; border-bottom-style: solid;.
Стиль для тега <img>, с помощью которого указывается путь к файлу с рисунком, я задал в следующем виде:
- Ширина рисунка - width: 500px
- Поле справа от рисунка - padding-right: 40px;
- Блок, заданный тегом <img> выравнивается по левой стороне родительского блока, а другие элементы обтекают его справа - float: left.
Вот! Заголовок сайта я сделал и теперь вставлю рисунок в подвал сайта.