Последние пару дней я работал над видом новостей для сайта ucoz, если быть точнее над видом игр которые отображаются на главной странице. Так вот, методом проб и ошибок, мне удалось создать очень даже неплохой вид для отображения игр, как для категорий так и для главной страницы сайта.
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.
В этом интересном уроке я расскажу как сделать на свой сайт точно такой-же вид для игр, как у меня, а главное подробно расскажу за что отвечают коды которые мы напишем в css и html файле.
Когда не знаешь с чего начать, сделай первый шаг!
Наверное перед тем как приступать к разработке, давайте вспомним как выглядят игры у нас на главной странице.
Вот скриншот:
По началу я хотел оставить старый вид для игр, то-есть настроить его аккуратно и красиво под себя. Но потом как то само получилось что получилось, дальше вы сами увидите что получилось))
Приступим к созданию кода, для этого первым делом зайдите в панель управления и нажмите на кнопки дизайн, управление дизайном (Шаблоны).
Картинка
Следующею страницу промотайте до нужного вам модуля, в нашем случае это онлайн игры (Это для тех кто создаёт со мной сайт), и у этого модуля нажмите на ссылку вид материалов.
Далее откроется страница с кодом, выделите весь код и удалите. Он нам больше не понадобится, так как мы пропишем свой.
Начнём пожалуй с главного блока в котором будут находится все остальные элементы, такие как картинка, ссылка с названием на игру и панелька управления для материала. Добавьте этот код за место того что удалили.
Код:
У меня это будет выглядеть вот так:
Разберём немного код. Это обычный блок див, его ещё называют контейнер или блок div, пишется он вот так Содержимое блока. Так вот, в его открывающий тег я поместил атрибут class с названием post_home и теперь при помощи этого названия мы можем управлять нашем блоком, именно этим тегом через стили css. Закрывающий тег пишется всегда с косой чертой .
Разобрались.
Теперь внутрь этого блока помещаем другой блок, с другим названием у класса и с содержимым.
Вот код:
$MODER_PANEL$
Вот так у меня:
Этот блок играет точно такую-же роль как и предыдущий, в него мы помещаем между открывающим и закрываю тегом переменный код панельки $MODER_PANEL$, и при помощи этого блока мы сможем расположить эту панельку на сайте там где нам нужно. Управлять мы этим блоком будем в css, через его имя panel.
Панелька выглядит так:
Следующий код это заголовок игры, то-есть то название которые мы дали каждой игре.
$TITLE$
Поместить его можно сразу после панельки:
Здесь уже теги поменялись, появился тег
Содержимое
. Который сообщает браузеру, что этот текст который помещается как содержимое тега, есть заголовок. Цифра два у тега, сообщает браузеру что это заголовок второго уровнять. Всего есть 6 уровней, самый главный это с цифрой 1 самый не важный это с цифрой 6.
Пример:
-
Заголовок
-
Заголовок
-
Заголовок
-
Заголовок
-
Заголовок
-
Заголовок
В данный тег
я поместил ссылку и название игры. Ссылка у нас начинается с тега и кончается закрывающим тегом . В открывающий тег я поместил атрибут href со значением переменного кода $ENTRY_URL$, который подгружает за место себя адрес на страницу с игрой. Между открывающим и закрывающим тегом A, ТО-ЕСТЬ ЗДЕСЬ я поместил переменный код который загружает имя игры. В общем вся это конструкция есть ссылка с названием игры.
Пример как это выглядит на сайте:
Последнее что нам осталось вставить, это картинку с игрой. Эта картинка будет ссылкой на страницу с игрой, то-есть если кликнуть на картинку, то попадёшь на страницу с игрой.
Пример:
Здесь код точно такой -же как и выше в заголовке игры, за исключением что между открывающим тегом и закрывающим я поместил не название игры, а код картинки у которого за место адреса картинки, в атрибуте src стоит переменный код на картинку игры $IMG_URL1$, то-есть этот переменный код будет подгружать для каждой игры свой уникальный адрес картинки.
Сохраните документ и давайте посмотрим что получилось на сайте:
Но это ещё не всё. С html кодом мы разобрались, теперь осталось поработать с css стилями, для того чтобы наш вид игр получился вот такой.
Пример со стилями:
Но это уже в следующим уроке, сегодня и так проделали большую работу. Кстати совсем забыл, для своего сайта с играми я делаю картинки 320 шириной на 180 высотой, желательно что-бы они у вас были точно такими же. Всё пока до нового урока.
Предыдущий урок | Как создать сайт — Оглавление | Следующий урок