Логотип

Как создать сайт

Всё что нужно для создания сайта!

Вид новостей для сайта ucoz, создаём своими руками


Последние пару дней я работал над видом новостей для сайта ucoz, если быть точнее над видом игр которые отображаются на главной странице. Так вот, методом проб и ошибок, мне удалось создать очень даже неплохой вид для отображения игр, как для категорий так и для главной страницы сайта.

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

Когда не знаешь с чего начать, сделай первый шаг!

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

Вот скриншот:

По началу я хотел оставить старый вид для игр, то-есть настроить его аккуратно и красиво под себя. Но потом как то само получилось что получилось, дальше вы сами увидите что получилось))

Приступим к созданию кода, для этого первым делом зайдите в панель управления и нажмите на кнопки дизайн, управление дизайном (Шаблоны).

Картинка

Следующею страницу промотайте до нужного вам модуля, в нашем случае это онлайн игры (Это для тех кто создаёт со мной сайт), и у этого модуля нажмите на ссылку вид материалов.

Далее откроется страница с кодом, выделите весь код и удалите. Он нам больше не понадобится, так как мы пропишем свой.

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

Код:

<div class="post_home"></div>

У меня это будет выглядеть вот так:

Разберём немного код. Это обычный блок див, его ещё называют контейнер или блок div, пишется он вот так <div>Содержимое блока</div>. Так вот, в его открывающий тег <div> я поместил атрибут class с названием post_home и теперь при помощи этого названия мы можем управлять нашем блоком, именно этим тегом через стили css. Закрывающий тег пишется всегда с косой чертой </div>.

Разобрались.

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

Вот код:

<div class="panel">$MODER_PANEL$</div>

Вот так у меня:

Этот блок играет точно такую-же роль как и предыдущий, в него мы помещаем между открывающим и закрываю тегом переменный код панельки $MODER_PANEL$, и при помощи этого блока мы сможем расположить эту панельку на сайте там где нам нужно. Управлять мы этим блоком будем в css, через его имя panel.

Панелька выглядит так:

Следующий код это заголовок игры, то-есть то название которые мы дали каждой игре.

<h2><a href="$ENTRY_URL$">$TITLE$</a></h2>

Поместить его можно сразу после панельки:

Здесь уже теги поменялись, появился тег <h2>Содержимое</h2>. Который сообщает браузеру, что этот текст который помещается как содержимое тега, есть заголовок. Цифра два у тега, сообщает браузеру что это заголовок второго уровнять. Всего есть 6 уровней, самый главный это с цифрой 1 самый не важный это с цифрой 6.

Пример:

  1. <h1>Заголовок</h1>
  2. <h2>Заголовок</h2>
  3. <h3>Заголовок</h3>
  4. <h4>Заголовок</h4>
  5. <h5>Заголовок</h5>
  6. <h6>Заголовок</h6>

В данный тег <h2></h2> я поместил ссылку и название игры. Ссылка у нас начинается с тега <a> и кончается закрывающим тегом </a>. В открывающий тег <a> я поместил атрибут href со значением переменного кода $ENTRY_URL$, который подгружает за место себя адрес на страницу с игрой. Между открывающим и закрывающим тегом A, <a>ТО-ЕСТЬ ЗДЕСЬ</a> я поместил переменный код который загружает имя игры. В общем вся это конструкция есть ссылка с названием игры.

Пример как это выглядит на сайте:

Последнее что нам осталось вставить, это картинку с игрой. Эта картинка будет ссылкой на страницу с игрой, то-есть если кликнуть на картинку, то попадёшь на страницу с игрой.

<a href="$ENTRY_URL$"><img src="$IMG_URL1$"></a>

Пример:

Здесь код точно такой -же как и выше в заголовке игры, за исключением что между открывающим тегом <a> и закрывающим </a> я поместил не название игры, а код картинки <img> у которого за место адреса картинки, в атрибуте src стоит переменный код на картинку игры $IMG_URL1$, то-есть этот переменный код будет подгружать для каждой игры свой уникальный адрес картинки.

Сохраните документ и давайте посмотрим что получилось на сайте:

Но это ещё не всё. С html кодом мы разобрались, теперь осталось поработать с css стилями, для того чтобы наш вид игр получился вот такой.

Пример со стилями:

Но это уже в следующим уроке, сегодня и так проделали большую работу. Кстати совсем забыл, для своего сайта с играми я делаю картинки 320 шириной на 180 высотой, желательно что-бы они у вас были точно такими же. Всё пока до нового урока.

Подсказка:

Молодой сайт лучше начинать раскручивать с низкочастотных ключевых запросов.

Курс ещё не готов, но подписчики получат его первыми - как только работа будет закончена. На данный момент 22.10.2018 записано 19 теоретических уроков и 0 практических. Теоретический курс Готов! "Как создать, настроить, наполнить и раскрутить сайт на uCoz"