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

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

И так, что я сегодня буду делать?

Первым делом нужно наши два элемента, а это рекламный блок и текст обвернуть в отдельные блоки div, каждый элемент обвернуть в свой блок. Ну и зададим первому блоку стили.

Для этого заходим в следующий раздел - Панель управления -> Дизайн -> Управление дизайном (шаблоны) -> на странице найдите раздел онлайн игры и зайдите в Страница материала и комментариев к нему.

Как раз в этом разделе мы и настраиваем страницу с игрой. Если вдруг не найдёте этот раздел, тогда зайдите в прошлый урок , и изучите.

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

Вот этот для текста.

Посмотрите пример как сделал это я.

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

Стили для блоков

Теперь давайте пропишем стили для блоков, для этого есть специальный раздел в котором хранятся стили css. Нажмите на кнопку дизайн, и управление дизайном (css) вы должны попасть в раздел где записаны все стили css.

Напомню что стили на сайте отвечают за вид сайта, то-есть за цвет ссылок, за размер шрифта, за размер картинок, за выравнивание элементов ну и многое многое другое.

Промотайте это страницу до самого низа, там в самом низу вставьте вот такой вот код и сохраните документ.

Block_google{
float:left;
}

Пример:

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

В моём случае правило такой float:left; Это обозначает что блок должен прижаться влево а другие блоки его могут обтекать справа. Двоеточие разделяет свойство:значение, точка с запятой разделяет правила между собой.

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

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

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

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

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

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

Итак, в этом уроке Вы узнаете, как делать ссылки в статье, помещать фотографии, менять шрифт текста и его размеры, делать выделения и многое другое, связанное с оформлением страницы сайта.

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

Ну, что, приступим? Предлагаю заполнить главную страницу сайта, на примере которой Вы уже потом сможете сами заполнить остальные страницы сайта. Зайдите в админку сайта и перейдите в раздел: Редактор страниц -> Управление страницами сайта.

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

Вкратце о каждом инструменте:

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

Кнопка в виде гаечного ключа позволяет редактировать код страницы.

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

Чтобы отредактировать главную страницу сайта, нажмите справа от названия «Главная страница» на кнопку в виде глаза . Мы перешли в раздел редактирования содержимого главной страницы сайта. Как видите, панель инструментов визуального редактора сайта очень схожа с панелью инструментов программы Microsoft Word. Давайте добавим текста в содержимое страницы. Среди файлов, которые Вы скачали на странице уроков по созданию сайта на UCOZ , есть файл «главная.txt». Скачайте файлы , если Вы этого ещё не сделали. Откройте файл «главная.txt», скопируйте весь текст и вставьте его в содержимое страницы.

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

Выделение цветом

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

Кнопка «Цвет фона» позволяет менять фон вокруг выделенного текста. Также выделяем сначала область текста, нажимаем на кнопку и выбираем нужный нам цвет фона.

Как сделать ссылку

Кнопка «Ссылка». С помощью данной кнопки мы можем делать ссылки на другие страницы нашего сайта, а также на страницы других сайтов, если это необходимо. Давайте сделаем несколько ссылок в статье. Для начала я покажу, как делать ссылку на главную страницу сайта. Выделите в первом абзаце адрес сайта http://katalogik.ucoz.ru и нажмите на кнопку (Ссылка). Перед нами появится окно, в котором указывается адрес ссылки.

1-й способ - указать полный адрес сайта. В правое поле мы указываем адрес сайта katalogik.ucoz.ru , в левом поле выбираем схему обращения к ресурсу. Если мы делаем обычную ссылку, то нужно выбрать протокол http:// . По такому же принципу делаются ссылки на другие сайты..ru, а слева также выбираем http://.

Это просто в правом поле поставить слеш «/ » с наклоном слева-направо. Левое поле , где нужно выбрать протокол, мы оставляем пустым в таком случае. Ещё раз повторюсь: когда мы указываем полный адрес, то в левом поле мы выбираем протокол http://, когда ссылка указывается без полного адреса, то левое поле должно оставаться пустым. Это правило важно всегда соблюдать, иначе ссылки будут некорректно показываться. Мы воспользуемся 2-м способом, поскольку он проще и удобнее.

Все значения мы ввели, нажимаем «Вставить», а затем «Ок».

Теперь давайте сделаем ссылку в заголовке «Как добавить сайт в каталог ». В предыдущих уроках мы создали уже данную страницу. Зайдите на наш сайт и перейдите в раздел «Как добавить сайт». В верхней строке браузера указана ссылка, которую нам нужно скопировать и указать в заголовке.

Опять же таки, есть два способа сделать ссылку на страницу:

1-й способ - это указать полный адрес ссылки (в моём случае — это katalogik.ucoz.ru/index/kak_dobavit_sajt_v_katalog/0−4 ) и выбрать протокол http:// .

2-й способ - это указать неполный адрес ссылки, начиная со слеша «/ ».

Как вставить изображение в текст

Кнопка «Изображение» позволяет нам вставлять картинки в текст. Поставьте курсор в самом начале первого абзаца. Нажмите на кнопку (Изображение). Перед Вами появится окно, где нужно указать ссылку на изображение. Но прежде чем это сделать, необходимо загрузить изображение на сайт. Чтобы загрузить картинку перейдите в папку в верхнем правом углу.

Для начала я предлагаю создать отдельную папку для наших картинок. Нажмите кнопку «Создать папку».

Введите img и нажмите на зелёную галочку, чтобы создать папку.

Перейдите в созданную папку и нажмите «Обзор». Нам нужно выбрать среди файлов, которые Вы скачали на странице уроков по созданию сайта на ucoz.ru , картинку katalogik.jpg . Загрузите её на сайт.

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

Заполним остальные поля.

В поле «Название» введите : Белый каталог сайтов . Это будет замещающий текст к картинке, который будет показываться в случае, если картинка по каким-то причинам не будет отображаться.

Выравнивание. Чаще всего, выравнивание устанавливается либо слева, либо справа. Остальные виды выравнивания Вы можете попробовать сами повыбирать. В данном случае мы поместим картинку справа от текста. Выбираем «вправо» .

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

Ширину и высоту можно не указывать, но если Вы считаете, что картинка слишком широкая то можно немного уменьшить её ширину и картинка уменьшится, сохранив свои пропорции.

Осталось указать отступы от текста. Установим отступ только слева в 15px .

Все поля мы заполнили, нажимаем «Вставить».

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

Форматирование текста

Нажав по полю «Абзац » , можно выбрать заголовки разных уровней (h1,h2,h3,h4,h5,h6), а также различные форматы текста. Чтобы установить формат заголовка, выделите текст и выберите требуемый размер.

Нажав по полю «Шрифт» , можно выбрать для определённой части текста свой шрифт.

Нажав по полю «Размер» , можно выбрать для определённой части текста размер.

Выделения

Выделяет текст жирным шрифтом .

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

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

Шаг 1. Регистрация в системе

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

Выберите удобный способ регистрации: через ввод e-mail и пароля или через социальные сети. Указывайте действующий e-mail, потому что на него придет письмо с подтверждением аккаунта.

После того, как введен действующий адрес e-mail и придуман сложный пароль (или вы авторизовались с помощью социальных сетей), нажимаем на кнопку «Продолжить» и попадаем на страницу под названием «Создание нового сайта». Заполняем все пустые поля и, ставя внизу галочку, соглашаемся с условиями использования uID сообщества. Нажимаем на кнопку «Регистрация».

Если все поля были заполнены корректно, откроется страница с информацией об успешной регистрации, а на указанный e-mail будет отправлено письмо. Теперь необходимо проверить свой почтовый ящик.

Найдите письмо с темой «uID - Добро пожаловать в наше сообщество!». Обратите внимание, что, в редких случаях, оно может попасть в папку «Спам». В полученном письме необходимо кликнуть на кнопку «Продолжить».

Шаг 2. Настройка безопасности аккаунта

Выполнив все действия, указанные выше, вы попадете на страницу с текстом «E-mail подтвержден!». Здесь вам необходимо ввести ваш номер мобильного телефона и задать секретный вопрос для безопасной работы с сайтом (например, сайт или модуль нельзя будет впоследствии удалить, не ответив на секретный вопрос). Также вам нужно придумать ещё один пароль: он будет использоваться для входа в панель администратора на нашем будущем сайте. Пароль, придуманный нами чуть ранее, относился к .

После того, как вы придумали ответ на секретный вопрос и задали пароль для панели администратора, нажимаем на кнопку «Приступить к созданию». Попадаем на страницу, где необходимо выбрать адрес сайта. Именно по данному адресу посетители будут видеть сайт в Интернете. Придумываем свободный адрес сайта, наилучшим образом описывающий ваш проект, выбираем для него доменную зону (ucoz.net, ucoz.org и т. д.) и нажимаем на кнопку «Создать сайт ».

Шаг 3. Создание и первичная настройка сайта

Успешно выполнив все инструкции, которые написаны чуть выше, вы окажетесь на странице настроек конфигурации сайта.

Укажите название сайта, выберите его дизайн и язык. Если вы сомневаетесь в выборе, нажмите на кнопку «Продолжить», позднее вы сможете изменить эти настройки в любой момент.

Далее перед вами появится страница с выбором модулей, которые вы хотите использовать на сайте. Нужно поставить галочки напротив тех модулей, которые вам необходимы. Если вы не уверены в том, какой именно модуль вам нужен, посмотрите или нажмите «Продолжить». После создания сайта вы сможете отключить или добавить на сайт любой модуль системы uCoz.

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

Обязательно сохраните данные, которые вам потребуются при работе над сайтом:

• Адрес сайта и ссылка для входа в панель управления (http://ваш_сайт/admin )
• Пароль для входа в панель управления (Пароль от ПУ, не путайте его с uID)
• Ответ на секретный вопрос

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

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

Инструкция по созданию сайта

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

Чтобы начать работу, нужно зайти на страничку http://www.ucoz.ru/register/ и зарегистрироваться через . Также есть возможность регистрации через социальные сети. Тогда процесс будет быстрее. Для этого справа нажимаете на ту иконку сети, через которую хотите зайти и далее следуете инструкции.

По опыту знаю, что лучше регистрироваться через эл. почту. Личные данные, которые вводятся, должны соответствовать правде. А мы иногда в соц. сетях используем вымышленное имя, ник или девичью фамилию (если вы женщина). Поэтому при регистрации вводим правдивую информацию.

Обязательно указывайте почтовый ящик, которым пользуетесь, так как в будущем туда будет поступать разная информация и уведомления. Придумайте надежный пароль. Желательно, чтобы он не совпадал с паролем электронной почты.

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

Если все заполнено правильно, тогда осуществится процесс регистрации, о чем вы будете уведомлены по электронной почте. Далее проверяем свой E-mail. Там должно быть письмо, которое сообщает, что вы приняты в uID-сообщество и должны пройти по указанной ссылке.

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

Важным пунктом является дизайн сайта. Именно его первым видят посетители. И от этого зависит первое впечатление человека. Например, я часто даже не начинаю читать информацию, если мне не нравится оформление страницы. Конструктор предлагает некоторые варианты (шаблоны), которые могут подойти именно вам. Когда выбор будет осуществлен, нажимаете на нужный шаблон, окно закрывается, а вы продолжаете дальше оформление.

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

Можете зайти на свой сайт и посмотреть, как он выглядит:

Осталось немного настроить интернет-сайт и можно приступит к его наполнению авторскими текстами. В верху экрана необходимо зайти в «Конструктор» и активировать его. Здесь можно редактировать сайт (создать название или «шапку», добавлять новости, материалы, управлять различными блоками).

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

Также справа будет много блоков, которые появились, когда вы активировали «Конструктор». Сама эта функция универсальна, поэтому будут отображаться как активные, так и неактивные блоки вашего ресурса. Всеми ими можно легко управлять и устанавливать те, которые нужны именно вам. Главное, не забывайте сохранять то, что нужно.

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

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

Скажу честно, я сторонник того, чтобы создавать свой интернет ресурс на платном домене и хостинге. Мой блог тому пример. Но движок я использую бесплатный — WordPress. Хотите узнать больше о процессе создания блога на Вордпресс? Если да, то вам сюда.

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

С уважением! Абдуллин Руслан

Здравствуйте, друзья! В этой статье мы с вами займемся помещением статей в созданный только что .

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

Таким образом, в uCoz реализованы средства иерархического структурирования материалов: на верхнем уровне находятся разделы, включающие в себя категории, а в категориях хранятся сами статьи.

Все это напоминает файловую систему Windows, в которой все файлы хранятся в папках, которые могут входить в другие папки, и т. д. Однако в uCoz количество уровней иерархии ограничено двумя. Статьи можно размещать исключительно в категориях, но не в разделах.

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

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

Таким образом, мы начнем с создания структуры разделов и категорий, выполнив следующие шаги.

Создаем раздел для Ucoz

3. Как видно из скриншота выше, в нашем каталоге пока имеется всего одна категория «Мои статьи», установленная по умолчанию. Нажмите кнопку «Добавить раздел», чтобы открыть одноименное окно.

4. Введите в поле «Название раздела», например, «Мой раздел», а в поле «Описание раздела» - произвольную информацию о созданном разделе.

5. Настройте доступ к разделу, устанавливая или снимая флажки в области окна группы, имеющие доступ к разделу. Например, снимем флажок «Гости», чтобы со статьями раздела могли знакомиться только зарегистрированные посетители сайта.

Итак, раздел для Ucoz создан. Для работы с ним предоставляет стандартный набор инструментов для настройки (кнопка «Изменить» 1) и удаления (кнопка «Удалить» 2), отображенные в строке «Мой раздел».

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

Создаем категорию в разделе «Мой раздел»

2. Выберите, если это еще не сделано, в раскрывающемся списке «Раздел», в который входит категория созданный нами «Мой раздел».

3. В поле «Название категории» введите название для создаваемой категории, например «Моя категория».

4. В поле «Описание категории» добавьте произвольную информацию о создаваемой категории.

5. В области «Группы», имеющие доступ к категории настройте права на чтение материалов в создаваемой категории, устанавливая или снимая соответствующие флажки.

6. В области «Группы», имеющие возможность добавлять материалы таким же образом настройте права на добавление материалов в данную категорию.

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

Итак, мы создали структуру разделов и категорий каталога и теперь можем помещать в него свои материалы.