Логотип

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

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

Как настроить главную страницу на ucoz, добавляем текст


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

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

Картинка

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

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

Картинка

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

Картинка

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

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

Картинка

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

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

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

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

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

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

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

Картинка:

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

Картинка:

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

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

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

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

Картинка:

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

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

Код:

<div class="text_home">Сюда вставить текст</div>

Картинка:

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

Картинка:

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

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

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

Картинка:

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

Код:

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

Пример:

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

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

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

Код:

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

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

Здесь мы обращаемся к тегам <p>, в которые обвернули наши куски текста. Первая строчка кода 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;
}

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

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

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

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

Код:

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

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

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

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

Задай свой вопрос в комментариях? или в специальном разделе.
Подсказка:

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

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