Логотип

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

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

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


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

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

В принципе все выше перечисленные сайты создаются по приблизительно одной и той-же схеме, которою я затрону в конце серии уроков по созданию сайта на 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; /*Задаёт сплошную рамку блоку*/
}

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

Подсказка:

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

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