Логотип

Нищенко.ру

Помогу чем смогу!

Создание сайта на ucoz, продолжаем пошаговую настройку своего сайта


Создание сайта на ucoz это не простой путь для новичка, который только начал изучать систему ucoz. Я вспоминаю свои десятки сайтов, тех сайтов которые создал методом тыка в этой системе, и по настоящему создать нормальный сайт мне удалось после многих неудачных попыток.

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

Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.


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

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

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

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

Быть полезным это пожалуй самый важный пункт, хотя я встречал сайты очень полезные но не посещаемые, потому-что они были плохо настроены и выглядели ужасно. Так-что все три пункта которые я перечислил ранее, не могут существовать на хорошем сайте друг без друга, на плохом могут, на хорошем нет!

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

Желательно:

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

Во всех последних уроках включая этот я говорил о:

  1. Выборе ниши
  2. Настройки дизайна
  3. Настройки сайта (его функциональность)
  4. Полезность
  5. Уникальность (К примеру текст который Вы написали и его нету на других сайтах, считается уникальным, так-же это может быть картинка которую вы нарисовали, игра которую вы создали, и так далее что создано лично вами или на заказ и не у кого другое в интернете этого нет.)

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

Создание сайта на ucoz не обходится без настройки дизайна

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

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

Практика

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

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

Я туда добрался. Следующие что нужно сделать это определится где будет выводится текст к игре. есть два варианта, это под самим плеером игры, в том-же блоке где находится игра, или немного ниже?

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

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

В моём случае я код установил на строчке 40.

Если зайти на сайт, получилось вот что.

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

Вот код: Этот код вставляет картинку

<img src="http://games-vames.ucoz.net/2017-03-07_03-41-21.png" alt="google">

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

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

Как видим что я хотел того я и добился, но всё же чего-то не хватает, а не хватает у нас заднего фона! Зайдите на сайт или посмотрите на картинке выше, там где у нас открыт плеер игры, за этим плеером есть белый фон, как раз мы его и возьмём для нашего текста с баннером.

Промотайте документ с кодом на верх до 23 строчке, и скопируйте открывающий блок див, как раз этот блок и задаёт задний фон для плеера игры.

После того как скопировали блок, промотайте документ обратно в низ до нашего кода с баннером и текстом, и обверните эти оба кода нашим скопированным блоком див. То-есть ту часть которую мы скопировали <div class="post"> вставьте над баннером рекламы, а второю часть кода </div> допишите сами, после кода который вставляет текст и сохраните документ.

Давайте посмотрим что получилось.

Вот таким не хитрым способом мы нашему тексту и рекламному баннеру добавили задний фон.

Если хотите можете ознакомится со стилями данного кода который мы вставили для нашего текста и баннера.

.post {
padding: 25px; /*Внутренние отступы от рамки блока*/
overflow: hidden; /*Запрещает выводит содержимое блока за его рамки*/
background: #fff; /*Задаёт задний фон блоку*/
border: 1px solid #d4d4d4; /*Задаёт сплошную рамку блоку*/
}

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

Важно! Если вдруг у вас получилось настроить сайт с помощью моих уроков, и вам уже не в первый раз он помогает разобраться с разными задачами, тогда не забудьте поблагодарить Автора в комментариях! После благодарности Автор знает что труд был ценен и полезен, а то время которое было затрачено на урок, не потрачено в пустую и пригодилось хорошим людям.
Спасибо за внимание и понимание.
Реклама:

  1. Благодарность бывает разная, поддержка проекта в денежном выражении.
  2. Поделится ссылкой, на пример на своём сайте или в соц сетях.
  3. Оставить комментарий на сайте.

Есть много разных вариантов как отблагодарить Автора.

Подсказка:

Если хочешь иметь популярный сайт, делайте его полезным для людей!

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