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

Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.

Рекомендую почитать:

Как поменять адрес сайта на ucoz Всего за 200р.

Так вот, работая над курсом, я взял в пример наш сайт с флеш играми и на его примере показал как нужно настроить сайт под поисковые машины, по этому на самом сайте мне пришлось внести некоторые изменения. К примеру на главную страницу добавил текст в 3000 символов, и название страницы поменял.

Картинка

Проверяем переменную:

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

Картинка

Перед тем как менять название главной страницы, зайдём в раздел шаблона главного модуля и проверим код, при помощи которого выводится название модулей. Для этого зайдите в панель управления, далее дизайн и управление дизайном.

Картинка

Откроется страница на которой найдите модуль, тот модуль который открывается на главной странице и у этого модуля нажмите главная страница модуля.

Здесь можно посмотреть, как любой модуль открывать на главной странице.

Картинка

На следующей странице откроется код, в нем нужно найти тег title в котором должен быть переменный код $MUDULE_NAME$. Этот переменный код после загрузки сайта подгружает имя для главной странице. Имя задаётся в другом месте ниже мы рассмотрим где.

Картинка переменный код:

Если у вас переменный код настроен точно так-же как у меня, тогда можно переходите к добавлению названия. Страницу пока не закрывайте она нам пригодится.

Добавляем новое название:

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

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

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

Картинка:

Откроется страница на которой можно настраивать модуль. В самом верху найдите строчку название модуля и в поле напротив впишите новое название. После промотайте страницу в низ и нажмите сохранить.

Картинка:

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

Добавим текст:

Первым делом подготовьте текст. Я свой текст заказывал у копирайтера, он мне обошёлся в 30 рублей. В тексте выделите заголовки первого и второго уровня тегами

и

. Заголовок второго уровня не обязательно добавлять.

Далее разбейте текст на абзацы при помощи тега

.

Картинка:

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

Промотайте страницу с кодом до строчки примерно 37, и вставьте в неё следующий тег div. У каждого дизайна это может быть индивидуальный код, по этому ориентируйтесь по страницам который мы вставили в одном из прошлых уроков.

Код:

Сюда вставить текст

Картинка:

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

Картинка:

Всё текст добавили осталось подключить стили.

Оформляем текст:

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

Картинка:

Откроется страница с кодом, которую промотайте до самого конца. В самый конец вставьте следующий код.

Код:

.text_home{ background:#fff; padding:30px; box-shadow: 0px 0px 22px -7px #000 inset;

}

Пример:

Разберём код:

Первая строчка background, задаёт нашему блоку в который мы поместили текст Текст Задний фон. В данном случае он белого цвета. Вторая строчка padding задаёт внутренний отступ, в нашем случае по 30 пикселей. Ну и последняя строчка задаёт внутреннею тень для блока. Если поменять цифры у кода поменяется размер тени.

Далее ниже в том же файле вставляем следующий css код.

Код:

.text_home p{ font:15px BART; line-height:20px;

}

Разберём код:

Здесь мы обращаемся к тегам

, в которые обвернули наши куски текста. Первая строчка кода font:15px BART; задаёт размер текста и шрифт текста. Вторая строчка задаёт отступ между строчками. В нашем случае это 20 пиксеслей.

Продолжаем.

Ниже вставленных кодов вставляем ещё один:

Код:

.text_home h1{ font: 20px ‘segoe print’; margin: 0; background: #00a0e8; padding: 4px 34px; position: relative; width: 107%; margin-left: -35px; margin-top: -10px; margin-bottom: 20px; color: #fff; font-weight: bold;

}

Разберём код:

Здесь мы уже обращаемся к заголовку текста с первым уровнем. Заголовок мы поместили в тег

.  В первой строчке кода говорится что нужно для заголовка задать размер и шрифт. Вторая строчка margin обнуляет все отступы вокруг заголовка. Строчка три задаёт задний фон background, в нашем случае это синий цвет. Следующая строчка padding задаёт внутренние отступы. Строчка position позволяет тег первого уровня двигать в любом направлении. width задаёт блоку ширину, в нашем случае это 107 процентов. Следующие три строчки задаёт отступы, слева, сверху и снизу. Код color задаёт цвет для текста, белый. И последняя строчка делает текст заголовка жирным.

Итог заголовка:

Последний код который нужно вставить в файл.

Код:

.text_home h2{ margin-top:5px; margin-bottom:-11px;

}

Разберём код:

Здесь мы обращаемся к заголовку второго уровня. Первой строчкой делаем верхний отступ от заголовка в 5 пикселей. Вторая строчка отступает от заголовка снизу.

Если коды все были вставлены в файл, сохраните файл и перейдите на сайт что-бы посмотреть что получилось. В верху вы уже должны были видеть результат, если хотите можете перейти на сайт 999game.ru и там посмотреть пример. На этом всё до нового урока.

Предыдущий урок | Как создать сайт — Оглавление | Следующий урок