> Обо всём мне близком и далёком  >  Как я создавал этот сайт  >  Навигация по сайту  > Ссылки на главные страницы

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

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

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

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

Главные страницы сайта

Навигация по сайту

Главные страницы сайта
Таблица стилей в отдельном файле
Страница "О товариществе"
Страница "Законодательство"
Страница "Помощь садоводу"
Страница "Интересные ссылки"
Страница "Главная"

На моём сайте будет пять разделов, которые соответствуют пунктам (страницам) главного меню:

  1. "О товариществе" - текст этой страницы буду хранить в файле main.html,
  2. "Законодательство" - текст этой страницы буду хранить в файле lows.html,
  3. "Помощь садоводу" - текст этой страницы - в файле help.html,
  4. "Интересные ссылки" - в файле ssilki.html и
  5. "Главная" - в файле index.html.

Знак привлечения внимания Текст страницы "Главная" хранится в обязательном файле с именем index.html. Если мы заходим на какой-либо сайт, например, на сайт СНТ "Садовое", то с сервера провайдера интернета в наш браузер сначала передаётся именно этот файл.

Итак, в тексте моего HTML-документа в каждый пункт главного и нижнего меню я вставил теги-ссылки <a>, в которых с помощью параметра href указал на какой файл нужно перейти после нажатия кнопки мышки. Тег <a> следует устанавливать внутри блочного тега, например, <div>, <p> или в других блоках. Добавленные ссылки в главном и нижнем я выделил жёлтым фоном.


<html>
    <head>
       <title> Моя первая страница сайта </title>
       <style type= "text/css">
           body {background-color: #557bac;}
           .page {width: 1268px; height: 97%; background-image: url('images/site_bottom1300.jpg');
                background-repeat: no-repeat; background-position: center bottom;}
           .chief_menu {margin-top: 10px; padding-top: 2px; height: 36px; width: 758px;}
           .chief_menu_item {margin-left: 10px; margin-right: 10px; margin-top: 2px; margin-bottom: 2px;
                width: 165px; height: 30px; padding-left: 0px; color: #fff; 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;}
       .aux_menu {margin-top: 3px; margin-bottom: 3px; height: 28px; padding-left: 0px;
                padding-top: 4px; padding-bottom: 3px; font-style: italic; color: #fff9bd;
                text-align: left;}
           .aux_menu div {padding-top: 1px;
                padding-bottom: 1px; float: right; position: relative; top: -4px;}
           .home {margin-left: 4px; margin-right: 10px; padding-left: 10px; padding-right: 10px;
                background-position: left; background-image: url("images/home.jpg" );
                background-repeat: no-repeat; }            .vertical_menu { width: 20%; float: left;}
           .vertical_menu_item {background-color: #fff9bd; margin-bottom: 4px; height: 26px;
              color: #3f5c97; text-decoration: none; border: 1px;
              border-color: #fff9bd; border-style: solid; border-radius: 9px; }
           .content { background-color: #fcfadd; margin-left: 21%; width: 76.5%; height: 68%; border: 1px;
                border-color: #719cbf; border-style: solid; border-radius: 10px;
                box-shadow: 3px 3px 5px 0px #719cbf; font-family: 'Times New Roman', Times, serif; }
           .bottom_menu { margin-top: 3px; height: 25px; color: #fff9bd; }
           .bottom { color: 0; }
      </style>
    </head>
    <body>
    <center>
       <div class = "page">

<!-- Чердак (заголовок) моей первой странички -->
<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 class = "chief_menu">
          <div class = "chief_menu_item"> <a href = "main.html">О товариществе</a> </div>
          <div class = "chief_menu_item"> <a href = "lows.html">Законодательство</a> </div>
          <div class = "chief_menu_item"> <a href = "help.html">Помощь садоводу</a> </div>
          <div class = "chief_menu_item"> <a href = "ssilki.html">Интересные ссылки</a> </div>
   </div>

<!-- Вспомогательное меню -->
<div class ="aux_menu">
          <a class = "home" href = "index.html"> </a> > Всё о товариществе 
          <div>
<!-- Cчётчик посещений страницы -->
!!! Здесь будет счётчик !!!
          </div>
     </div>
<!-- Вертикальное меню -->
<div class = "vertical_menu">
          <div class = "vertical_menu_item">Учредительные документы</div>
          <div class = "vertical_menu_item">Протоколы</div>
          <div class = "vertical_menu_item">Доска информации</div>
          <div class = "vertical_menu_item">План СНТ</div>
          <div class = "vertical_menu_item">Электросеть СНТ</div>
          <div class = "vertical_menu_item">Дороги СНТ</div>
          <div class = "vertical_menu_item">Водопровод</div>
          <div class = "vertical_menu_item">Реквизиты</div>
   </div>

<!-- Содержание с моими идеями (контент) -->
<div class = "content">
       <h1> Вот что я задумал сделать: </h1>
   <div class = "one_column">
          <p style ="background-color: pink; padding: 30px; font-size: 15pt; font-family: 'Arial';"> 3. Ещё ниже вертикальное меню для перехода на страницы внутри раздела сайта и справа от вертикального меню само содержание страницы, ради чего она и создавалась;</p>
    </div>
</div>

<!-- Нижнее меню -->
<div class = "bottom_menu">
|  <a href = "index.html">Главная</a>  |  
|  <a href = "main.html">О товариществе</a>   |  
|  <a href = "lows.html">Законы о СНТ</a>   |  
|  <a href = "help.html">Помощь садоводу</a>   |  
|  <a href = "ssilki.html">Интересные ссылки</a>  |
</div>
<!-- Подвал странички -->
<div class = "bottom">
Сайт основан в августе 2012 - 2015 г. © Все права на материалы сайта принадлежат Правлению СНТ «Садовое».
Плагиат не преследуется!
</div>

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

Я сохранил этот текст, как обычно, в файле make_site_how.html, и открыл этот файл в браузере Firefox. На экране появилась моя первая страничка. Если на этой страничке установить курсор на пункте главного или нижнего меню, то он изменит свой вид со стрелки на "руку".

Теперь я сохраняю в папке I make site мой последний файл make_site_how.html пять раз, но c разными именами:

  1. main.html для страницы "О товариществе",
  2. lows.html для страницы "Законодательство",
  3. help.html для страницы Помощь садоводу",
  4. ssilki.html для страницы "Интересные ссылки" и
  5. index.html для главной страницы.

Эти пять страничек будут отличаться содержимым, у них будут другие пункты в вертикальном меню, но тег <style> у них одинаковый. Нельзя ли все определения стилей этого тега сохранить в каком-нибудь файле и потом подключать этот файл к каждой страничке? Можно! Для этого таблица стилей помещается в отдельный файл с любым именем, например, my_style, но с расширением .css.

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