Создание сайта на ucoz это не простой путь для новичка, который только начал изучать систему ucoz. Я вспоминаю свои десятки сайтов, тех сайтов которые создал методом тыка в этой системе, и по настоящему создать нормальный сайт мне удалось после многих неудачных попыток.
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.
Это теперь я понимаю и знаю чёткий пошаговый путь, который мне пришлось проходить не один десяток месяцев, для того что бы понять как создаются правильные сайты для заработка, для популярности, для бизнеса, для продаж в общем для достижения каких-либо поставленных целей.
В принципе все выше перечисленные сайты создаются по приблизительно одной и той-же схеме, которою я затрону в конце серии уроков по созданию сайта на ucoz, когда будем подводить итоги. После практики вам будет легче понять суть описанного.
Сейчас-же просто имейте введу что мы на этапе настройки дизайна и учимся работать на сайте ucoz, и настраивать сайт для приёма на него посетителей из поисковых систем.
У сайта что-бы быть сайтом, есть три главные задачи, первым делом сайт должен выглядеть привлекательно для посетителей, вторым правильно настроенным, третьим быть полезным!
Быть полезным это пожалуй самый важный пункт, хотя я встречал сайты очень полезные но не посещаемые, потому-что они были плохо настроены и выглядели ужасно. Так-что все три пункта которые я перечислил ранее, не могут существовать на хорошем сайте друг без друга, на плохом могут, на хорошем нет!
По крайне мере это три основных задачи которые вы должны запомнить и постоянно держать в голове, всё остальное то-же не мало важно, но уже идёт после этих трёх задач. Все основные тонкости, вы уловите на практике по ходу создания сайта в месте со мной, ну а в конце подробно поговорим о них.
Желательно:
Советую вам помечать о чём я пишу, в свой блокнот. Помечайте главные пункты которые необходимо знать для создания хорошего сайта.
Во всех последних уроках включая этот я говорил о:
- Выборе ниши
- Настройки дизайна
- Настройки сайта (его функциональность)
- Полезность
- Уникальность (К примеру текст который Вы написали и его нету на других сайтах, считается уникальным, так-же это может быть картинка которую вы нарисовали, игра которую вы создали, и так далее что создано лично вами или на заказ и не у кого другое в интернете этого нет.)
Записывайте, в конце буду пояснять что и зачем и как нужно делать, что-бы создать полезный, настроенный и красивый сайт.
Создание сайта на ucoz не обходится без настройки дизайна
Как вы знаете в системе ucoz есть масса стандартных шаблонов, а так-же на свои сайты можно устанавливать не стандартный шаблон, что мы кстати и сделали в одном из прошлых уроков. Так вот, каждый такой шаблон будь он стандартный, будь он не стандартный, приходится на страивать под себя.
В прошлом уроке я подробно рассказал о некоторых языках которые пригодятся для настройки своего сайта, кто не читал обязательно прочитайте и намотайте на ус что без этих знаний настроить дизайн будет очень сложно. В уроке я дал две ссылки на бесплатные курсы этих языков, освоить их можно за пару недель.
Практика
Хватит болтать пора переходить к делу. На этот раз давайте выведем текст к нашей игре, так как под плеером его не видать, хотя из предыдущих уроков вы должны помнить что я его добавлял на сайт.
Для начало давайте попадём в тот раздел в панели управления где мы настраиваем страницу с игрой и комментарием к нему. Если вдруг запамятовали, то всегда можно вернутся в тот урок, где я показывал как туда добраться, вот здесь нажмите.
Я туда добрался. Следующие что нужно сделать это определится где будет выводится текст к игре. есть два варианта, это под самим плеером игры, в том-же блоке где находится игра, или немного ниже?
Я зашёл на другие сайты в интернете и мне понравился один вариант там где внизу под игрой расположено описание, а слева от него рекламный баннер, вот примерно мы сделаем так-же.
Первым делом давайте вставим описание нашей игры, для этого выберите место где хотите что игра выводилась, и вставьте туда вот это код- $BRIEF$ Этот код за место себя будет подгружать описание игры.
В моём случае я код установил на строчке 40.
Если зайти на сайт, получилось вот что.
Всё хорошо текст выводится но чего-то не хватает, как то пусто мне кажется, так что сверху над текстом давайте установим рекламный код с баннером от google. Но, пока что это не будет сам рекламный код, а простая картинка этого баннера.
Вот код: Этот код вставляет картинку
Данный код я поместил на строчку 39, перед кодом который выводит текст. Кстати неважно какая это строчка, нумерация строчек просто нужна для удобства работы с кодом, а вот расположение выше или ниже другого кода, здесь играет важную роль. Я хочу что-бы мой баннер выводился над текстом, по этому в коде я размещаю его выше.
Сохраняю документ и давайте посмотрим что у меня получилось на сайте.
Как видим что я хотел того я и добился, но всё же чего-то не хватает, а не хватает у нас заднего фона! Зайдите на сайт или посмотрите на картинке выше, там где у нас открыт плеер игры, за этим плеером есть белый фон, как раз мы его и возьмём для нашего текста с баннером.
Промотайте документ с кодом на верх до 23 строчке, и скопируйте открывающий блок див, как раз этот блок и задаёт задний фон для плеера игры.
После того как скопировали блок, промотайте документ обратно в низ до нашего кода с баннером и текстом, и обверните эти оба кода нашим скопированным блоком див. То-есть ту часть которую мы скопировали вставьте над баннером рекламы, а второю часть кода допишите сами, после кода который вставляет текст и сохраните документ.
Давайте посмотрим что получилось.
Вот таким не хитрым способом мы нашему тексту и рекламному баннеру добавили задний фон.
Если хотите можете ознакомится со стилями данного кода который мы вставили для нашего текста и баннера.
.post { padding: 25px; /*Внутренние отступы от рамки блока*/ overflow: hidden; /*Запрещает выводит содержимое блока за его рамки*/ background: #fff; /*Задаёт задний фон блоку*/ border: 1px solid #d4d4d4; /*Задаёт сплошную рамку блоку*/
}
Думаю пока что на сегодня хватит, в следующем уроке будем писать стили самостоятельно для текст и для рекламного баннера.
Предыдущий урок | Как создать сайт — Оглавление | Следующий урок