Блог об инвестировании в форекс, ДУ, хайпы

Встраиваем шаблон в сайт

Автор: Владимир Дроздов
Источник: Халявы НЕТ

Итак, после того как я скачал и установил движок сайта, необходимо придать ему какой-то особенный вид. То есть оформить его под свой вкус. Для этого я выбрал себе один из шаблонов, который предварительно скачал на сайте... по-моему, на этом http://free-templates.ru/. Этот шаблон Вы можете посмотреть на картинке в предыдущей статье.

Итак, теперь его нужно как-то встроить в мой будущий сайт (хотя сайт конечно уже давно готов Улыбаюсь). Сразу скажу, что все оказалось не так просто, как я думал вначале. Пришлось изрядно попотеть, чтобы все отображалось правильно и красиво Улыбаюсь

Ну, начну по порядку. Что мне оттуда нужно взять. Во-первых картинки. Картинки я беру из папки images, которая присутствует в шаблоне. Если Вы не в курсе, то поясню: чаще всего шаблон включает в себя несколько файлов. Обычно это несколько страниц html, таблица стилей css, ну и картинки, как я уже сказал, бывают еще и различные скрипты, как попались и в моем шаблоне, но об этом позже.

Картинки, которые я буду использовать в дизайне своего сайта, я отметил красным крестом - изображение ниже.

Картинки из шаблона сайта

Дальше захожу в файловый менеджер и загружаю их в папку UserFiles/Image/

Файловый менеджер

Думаю с этим все должно быть понятно. Так же просто как вы загружаете фотографии вконтакте.

А тут Вы спросите, как понять, какие картинки будут использоваться, а какие нет? Для этого нужно открыть код одного из html файлов с помощью обычного блокнота и посмотреть, что же там прописано.

 

1. Возьму в качестве примера шапку сайта или хедер (header). Вот какой код я нашел:

<!-- header -->

  <div id="header">

    <div class="row-1">

      <div class="fleft"><a href="home.html"><img src="images/logo.gif" alt="" /></a>

      </div>

      <div class="fright">

      <ul>

      <li><a href="home.html"><img src="images/pic1.gif" alt="" /></a></li>

      <li><a href="sitemap.html"><img src="images/pic2.gif" alt="" /></a></li>

      <li class="last"><a href="contact-us.html"><img src="images/pic3.gif" alt="" /></a></li>

      </ul>

      </div>

    </div>

    <div class="row-2">

      <div class="wrapper">

        <div class="col-1">

        <ul>

        <li><a href="home.html">Home</a></li>

        <li><a href="about-us.html">About Us</a></li>

        <li><a href="articles.html">Articles</a></li>

        <li><a href="contact-us.html">Contact Us</a></li>

        <li><a href="sitemap.html">Site Map</a></li>

        </ul>

        </div>

        <div class="col-2"><span><img src="images/slogan.jpg" alt="" /></span>

        <ul>

        <li><a href="#">To Rent</a></li>

        <li><a href="#">To Purchase</a></li>

        <li class="last"><a href="#">Daily Rent</a></li>

        </ul>

        </div>

      </div>

    </div>

  </div>

Из кода видно, какие картинки используются, я их выделил красным. Хотя нужны ли все они или нет, посмотрю по ходу дела. Еще картинки могут быть прописаны в коде файла CSS - таблицы стилей. Вот кусок кода из файла style.css:

#header {height:386px;background:url(images/header-top.gif) no-repeat left top}

Картинка, как Вы догадались, выделена красным.

Теперь код, прописанный выше нужно вставить в мой хедер. Как это сделать? Да все так же через управление файлами. Находим там шапку сайта и вставляем код, причем старый нужно удалить. Он мне совершенно не подходит.

После этого в коде нужно подправить путь до изображений:

Вместо <img src="images/pic2.gif" alt="" /> указываю правильный

<img src="UserFiles/Image/pic2.gif" alt="" />.

Но, кстати, на своем сайте я решил эти картинки не использовать, и ненужные куски кода я удалил. Далее подправил ссылки и вот код, который в итоге получился:

<!-- header -->

  <div id="header">

    <div class="row-1">

    </div>

    <div class="row-2">

       <div class="wrapper">

          <div class="col-1">

          <ul>

          <li><a href="http://kak-postroit-dom.ru">Домой</a></li>

          <li><a href="products.phtml">Продукты</a></li>

          <li><a href="category-post-0.html">Публикации</a></li>

          <li><a href="mail.html">Контакты</a></li>

          <li><a href="map.html">Карта сайта</a></li>

          </ul>

          </div>

          <div class="col-2">

            <div class="title"><span> <a href="http://kak-postroit-dom.ru">Как построить дом своими руками</a></span>

            </div>

          <ul>

          <li><a href="http://kak-postroit-dom.ru">Главная</a></li>

          <li><a href="mail.html">Контакты</a></li>

          <li class="last"><a href="map.html">Карта</a></li>

          </ul>

          </div>

        </div>

      </div>

    </div>

Вот так по кусочкам кода и вписывается шаблон в сайт. Отдельные куски находим для блоков слева и для подвала или футера (footer).

Далее нужно подключить новую таблицу стилей.

Не знаю, описывать ли этот процесс в следующем посте. Совсем зеленому новичку в сайтостроении описанное выше может показаться полным бредом, и он ничего не поймет. Хотя обучать чему-то я целью эксперимента не ставил. Напомню, что цель эксперимента - создание сайта коммерческой тематики и получение прибыли за счет размещения на нем контекстной рекламы в размере около 15 тыс. руб. через год не очень напряжной работы. В общем, если очень захотеть, во всем можно разобраться, нужно только иметь терпение и немного усидчивости.

Продолжение следует... Читать далее


Понравилась статья? Не забудьте подписаться на получение новых публикаций сайта с помощью RSS-ленты или сразу на E-mail:
RSS Feed

Комментарии (4)

Добавлено: 07.12.2012 | Автор: Алехнович

Владимир! Супер просто! Так держать! Будим ждать прибыли )))

Добавлено: 07.12.2012 | Автор: Admin

Спасибо, Константин! Уже ждем с нетерпением))))

Добавлено: 15.03.2013 | Автор: Филька

Ну и как, прибыль есть уже? интересно узнать)))

Добавлено: 18.03.2013 | Автор: Admin

Филька, на сайт пока контекстную рекламу не размещал, так как пока Яндекс держит его под фильтром, о чем писал здесь.
Поэтому и прибыли соответственно нет, нужно сначала заслужить доверие Яши, а потом уже и монетизировать.


Добавить комментарий

Ваше имя/ник (не менее 4 символов):

Ваш E-mail (защищен от спама):

Сообщение (30 - 700 символов, только текст):

Защита от спама
(введите текст с картинки):


Другие статьи по теме: