Текст книги "Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете"

Автор книги: Евгений Мухутдинов

сообщить о нарушении

Текущая страница: 3 (всего у книги 15 страниц) [доступный отрывок для чтения: 6 страниц]

2.5. О доменах

У каждого компьютера, подключенного к Интернету, есть уникальный адрес, который называется IP (Ай-Пи). Серверы, на которых размещаются сайты, тоже имеют свои IP-адреса, соответственно, добраться до сайта можно по IP-адресу. Но как человеку запомнить эти самые IP-адреса, например такой: 213.180.204.11?

Для облегчения запоминания была введена Доменная Система Имен, больше знакомая по аббревиатуре DNS (Domains Name System). Смысл очень прост: к IP-адресу «привязывается» доменное имя, которое, как и IP-адрес, является уникальным. Другими словами, не может быть двух одинаковых доменных имен, иначе возникнет путаница, ведь будет неизвестно, какой из сайтов загружать.

Указанный выше IP-адрес связан с доменным именем поисковой системы «Яндекс», то есть попасть на «Яндекс» можно введя в адресную строку 213.180.204.11 вместо yandex.ru. Согласитесь, проще запомнить доменное имя, чем IP. Когда мы вводим в адресной строке браузера www.yandex.ru, DNS-сервер ищет, где находится сайт с таким именем, и отправляет нас по IP-адресу 213.180.204.11.

Система доменных имен имеет иерархическую структуру:

• www.ru – домен верхнего уровня, принадлежащий России;

• www.pcbee.ru – домен второго уровня;

• www.proba.pcbee.ru – домен третьего уровня.

Доменные имена третьего уровня можно использовать бесплатно, а вот за использование имен второго уровня, как правило, надо платить. На данный момент российские веб-мастера используют для своих сайтов несколько доменных зон: ru, рф, com, реже net и su.

По количеству купленных российскими пользователями доменных имен лидирует кириллическая зона РФ, свободная регистрация доменов в которой началась 11 ноября 2010 г. в 12.00. Мы не случайно так хорошо помним дату и время начала свободной регистрации в зоне РФ, так как и сами поучаствовали в этом мероприятии, пытаясь приобрести пару звучных имен для своих проектов. Нашу деятельность на этом поприще успешной назвать нельзя, но в книге мы все же используем купленный нами домен в зоне РФ: www.строюсам.рф.

Для начала мы все же расскажем о бесплатном сыре в виде бесплатных доменных имен и хостинге.

2.6. Постройте свой сайт за 60 секунд!

Услуги по предоставлению бесплатного хостинга оказывают многие интернет-компании. На протяжении долгих лет в списке самых популярных бесплатных хостингов присутствует www.narod.yandex.ru, или просто «Народ». Эта площадка вполне подойдет для экспериментов со статическими сайтами.

«Постройте свой сайт за 60 секунд» – именно такой лозунг красовался на сайте «Народ» несколько лет назад. В наших архивах сохранился скриншот, датированный 2007 г. и подтверждающий достоверность наших слов (рис. 2.3).

Рис. 2.3. Несколько лет назад на «Народе» предлагалось создать свой сайт за 60 секунд

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

За прошедшие годы на «Народе» произошли определенные изменения в лучшую сторону. Хотя возможности создания динамических сайтов до сих пор нет, в помощь начинающим веб-мастерам создан конструктор сайтов. Его функции нельзя назвать исчерпывающими, но он дает простор для творчества. К примеру, можно выбрать подходящий макет для сайта (рис. 2.4).

Рис. 2.4. Конструктор сайтов на «Народе» предлагает различные макеты для вашего сайта

Учитывая, что сервис бесплатный, провести несколько экспериментов на «Народе» вы можете самостоятельно. Для этого нужно лишь зарегистрироваться на сервисе, пройдя по ссылке http://narod.yandex.ru/.

Примечание

Если у вас есть почтовый ящик на «Яндексе», например myname@ yandex.ru, то за вами автоматически закрепилась площадка myname.narod.ru. Если вас устраивает такое имя сайта и вам удалось зайти в мастерскую под логином myname и паролем от ящика, то нет необходимости создавать новую учетную запись.

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

2.7. Создание сайтов на бесплатном сервисе uCoz

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

Рис. 2.5. Главная страница uCoz

На главной странице uCoz есть слайдер, в котором показаны варианты сайтов, созданных с использованием этого конструктора. К примеру, на uCoz создан довольно известный среди учителей сайт http://pedsovet.su.

Знакомство с uCoz

Прежде чем приступать к созданию сайта, разберемся, что же такое uCoz.

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

Модули – это веб-приложения. Модули можно сравнить с деталями конструктора «Лего» – выбирая нужные детали, получаем задуманную конструкцию. Благодаря этому можно создать сайт любой сложности: от персональной страницы до новостного портала.

Список модулей uCoz довольно обширен:

• форум;

• интернет-магазин;

• новости сайта;

• сетевой дневник (блог);

• каталог статей;

• каталог файлов;

• каталог ссылок;

• мини-чат;

• доска объявлений;

• фотоальбом;

• онлайн-игры;

• опросы;

• гостевая книга;

• FAQ (вопрос/ответ);

• почтовые формы;

• редактор страниц сайта;

• статистика посещений.

Основные возможности:

• неограниченное дисковое пространство (хостинг);

• удобная работа с файлами по FTP-доступу;

• создание и управление базами пользователей;

• встроенный визуальный редактор HTML;

• различные шаблоны;

• поддержка JavaScript – языка программирования сценариев, на котором создаются разные «примочки» для сайтов типа часов и всплывающих окон.

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

Регистрация учетной записи

Сначала необходимо пройти стандартную процедуру регистрации в системе Unet.

Система Unet – это глобальная учетная запись в системе uCoz. Она дает возможность без дополнительной регистрации заходить на все созданные вами сайты uCoz, используя единую учетную запись. Кроме того, Unet – это что-то вроде панели сведений обо всех созданных вами сайтах. Процедуру регистрации учетной записи мы рассмотрим пошагово.

Шаг 1. Переходим на сайт uCoz и в верхнем меню щелкаем на ссылке Регистрация. В результате откроется страница с формой регистрации, которую необходимо заполнить (рис. 2.6).

Рис. 2.6. Страница с формой регистрации

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

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

Шаг 3. Мы попадаем в вебтоп. Вебтоп (WebTop) – это оболочка учетной записи uNet, которая предназначена для установки и применения пользователем приложений (программного обеспечения), работы со своими данными, контактами и сайтами. Для входа необходимо заполнить данные учетной записи администратора (рис. 2.7).

Рис. 2.7. Получение доступа к вебтоп

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

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

Подбор доменного имени

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

Шаг 1. В открывшемся окне (рис. 2.8) в поле Адрес сайта вводим вариант устраивающего нас доменного имени. Может случиться так, что желаемый домен уже занят. Тогда придется придумать другое имя.

Рис. 2.8. Окно для подбора адреса сайта

Подбирая свободное доменное имя, мы остановили свой выбор на варианте moirecepty.ucoz.ru (см. рис. 2.8).

Совет

Если не удается подобрать походящее имя сайта, то можно попробовать сменить доменную зону. Выбор довольно большой – 18 зон. Если имя mysite.ucoz.ru (зона ru) занято, можно проверить mysite. ucoz.com (зона com).

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

Шаг 3. Если все сделано правильно, должно открыться окно с уведомлением о создании сайта, в котором остается нажать кнопку Панель управления сайтом. После этого можно приступать к настройкам сайта.

Начальные настройки сайта

После того как стала доступна панель управления сайтом, можно выполнить начальные настройки (рис. 2.9).

Рис. 2.9. Панель управления сайтом

Шаг 1. Заполняем поле с названием сайта. Как мы и договаривались, наш сайт будет называться «Мои рецепты». Ваш сайт может носить любое имя – это зависит только от вас.

Шаг 2. Кроме того, здесь мы можем выбрать дизайн из готовой коллекции шаблонов. Для этого нажимаем кнопку Выбрать дизайн – перед нами открывается страница с большой коллекцией шаблонов. Для удобного поиска все шаблоны распределены по категориям (рис. 2.10).

Рис. 2.10. Коллекция шаблонов uCoz

Мы выбрали дизайн из категории Еда под номером 921. При желании можно выбрать язык сайта. Естественно, мы оставляем русский язык. Нажимаем кнопку Продолжить.

Шаг 3. В следующем окне нас просят выбрать необходимые для сайта модули (рис. 2.11).

Рис. 2.11. Окно выбора модулей

Примечание

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

Для проекта мы выбрали следующие модули:

• Редактор страниц;

• Фотоальбомы;

• Гостевая книга;

• Каталог статей;

• Опросы;

• Почтовые формы.

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

После применения параметров в панели управления появится вся необходимая информация и инструменты для дальнейшей настройки и редактирования сайта (рис. 2.12).

Рис. 2.12. Панель управления сайтом со всей необходимой информацией и инструментами

Теперь можно осмотреться и познакомиться с панелью управления сайтом.

Панель управления сайтом

Знакомство с панелью управления начнем с верхнего меню под названием админ-бар (рис. 2.13).

Рис. 2.13. Админ-бар

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

• Общее – общая информация о сайте, ссылка на сайт и на главную страницу панели.

• Настройки – из названия понятно, что эта вкладка содержит все основные настройки. Вот некоторые из них: редактор названия сайта, смена дизайна и языка сайта, отключение сайта и т. д.

• Дизайн – на этой вкладке собраны все инструменты для настройки шаблона сайта. Если вы преуспели в изучении HTML, то можете самостоятельно изменить внешний вид сайта или установить сторонний шаблон.

• Инструменты – настройки, которые не вошли в предыдущие вкладки. Кроме того, здесь есть несколько крайне важных инструментов, которыми мы будем пользоваться. Один из них – файловый менеджер. С его помощью мы будем загружать нужные файлы на хостинг.

• Безопасность – инструменты для обеспечения безопасности сайта: можно сменить пароли к учетным записям и FTP, а также настроить другие параметры.

• Помощь – полезные советы по раскрутке сайта, ссылка на официальный форум uCoz и службу поддержки.

Примечание

Мы намеренно не стали описывать вкладку Платные услуги, так как в наши планы не входит использование платных услуг. Дело в том, что цена на них «кусается» и проще купить хостинг на другой площадке, чем создавать коммерческий проект на uCoz.

Следующая часть, которую мы рассмотрим, – меню модулей (рис. 2.14).

Рис. 2.14. Меню модулей

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

Центральная часть панели управления разделена на две области: нижнюю и верхнюю (рис. 2.15).

Рис. 2.15. Центральная часть панели управления

В верхней области отображаются имя пользователя, адрес сайта, доступное дисковое пространство (с очень интересной кнопкой Изменить), а также различные предупреждения. В гордом одиночестве в правой области находится ссылка с не менее интересным названием Стать Премиум пользователем. За этими «интересными» названиями прячутся платные услуги, из чего можно сделать вывод, что uCoz – это своеобразная «завлекалочка» для доверчивых пользователей. Внизу размещены ссылки для доступа ко всем основным инструментам.

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

Создание категорий

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

За вывод статей на сайт отвечает модуль Каталог статей. В нем можно не только создавать статьи, но и распределять их по категориям. Система uCoz поддерживает двухуровневое деление на разделы и категории. При большом количестве статей (в нашем случае – рецептов) разделы и категории сделают структуру сайта более прозрачной. Для примера создадим раздел под названием Горячие блюда, в котором будут категории Блюда из мяса, Блюда из птицы. В этом случае пользователю проще будет найти тот или иной рецепт, да и нам станет легче ориентироваться при поиске необходимой статьи.

Шаг 1. Заходим в панель управления сайтом. В меню модулей выбираем пункт Каталог статей, после чего становится доступной панель управления модулем (рис. 2.16).

Рис. 2.16. Панель управления модулем Каталог статей

Выбираем пункт Управление категориями.

Шаг 2. На панели Управление категориями отображаются все разделы и категории модуля. В нашем случае видна только одна категория Мои статьи (рис. 2.17).

Рис. 2.17. Панель Управление категориями

Кроме того, здесь есть две кнопки: Добавить раздел и Добавить категорию.

Шаг 3. Нажимаем кнопку Добавить раздел, в результате чего открывается соответствующее окно (рис. 2.18).

Рис. 2.18. Окно Добавить раздел

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

Далее есть два пути добавления категорий.

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

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

Мы пойдем по второму пути. Переходим по ссылке Добавить категорию. Заполняем необходимые поля и сохраняем изменения.

Для примера мы добавили две категории в раздел Горячие блюда: Блюда из мяса и Блюда из птицы. После всех манипуляций окно с категориями и разделами стало выглядеть так, как показано на рис. 2.19.

Рис. 2.19. В разделе Горячие блюда теперь есть две категории

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

Добавление статей

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

Шаг 1. Заходим в каталог статей.

Шаг 2. С правой стороны находится ссылка для создания материала, которая называется Добавить материал. Щелкаем на ней, и система отправляет нас на сайт, где нужно авторизоваться для продолжения добавления новостей.

Шаг 3. Щелкаем на ссылке Вход, и во всплывающем окне вводим адрес электронной почты и пароль учетной записи uNet. При правильном вводе появляется редактор статей (рис. 2.20).

Рис. 2.20. Редактор статей

Шаг 4. Выбираем категорию, в которую хотим добавить нашу статью. Мы выбрали категорию Блюда из птицы, так как сейчас решили разместить рецепт блюда из курицы.

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

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

Шаг 7. Для добавления картинки в статью на панели инструментов редактора для полного текста нажимаем кнопку Изображение, после чего появляется соответствующее окно (рис. 2.21).

Рис. 2.21. Окно выбора изображения

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

Рис. 2.22. Окно файлового менеджера

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

Шаг 8. После загрузки картинки на хостинг нужно щелкнуть на названии файла с картинкой и задать ее настройки:

– название;

– выравнивание;

– рамку;

– ширину и высоту;

– отступ.

Заполняем нужные параметры и нажимаем кнопку Вставить.

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

Создание фотоальбома

Добавим на наш сайт фотоальбом, в котором будут запечатлены кулинарные «шедевры».

Шаг 1. В меню модулей выбираем пункт Фотоальбомы. Панель управления модулем Фотоальбом мало чем отличается от панели управления модулем Каталог статей (рис. 2.23).

Рис. 2.23. Панель управления модулем Фотоальбом

Система создания разделов и категорий здесь точно такая, как и в каталоге статей.

Шаг 2. Переходим в Управление категориями и видим, что у нас уже есть две категории по умолчанию: Мои фотографии и Моя семья (рис. 2.24).

Рис. 2.24. Панель Управления категориями для фотоальбома

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

Шаг 3. Заходим в категорию Мои успехи. На данный момент здесь пусто, поэтому будем добавлять фотографии. Для этого нажимаем кнопку Добавить материал. После авторизации мы попадаем на страницу добавления материала в фотоальбом (рис. 2.25).

Рис. 2.25. Страница добавления материала в фотоальбом

Доступны два способа добавления фотографий в фотоальбом.

• Добавление архивом – позволяет загрузить много фотографий сразу. Можно запаковать их в ZIP-архив и выгрузить на сайт. Главное, чтобы архив не превышал максимально допустимого размера 40 Мбайт.

• Обычное добавление – добавление по одной фотографии в альбом на сайте.

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

Сразу после загрузки архив с фотографиями окажется в разделе сайта Фотоальбомы (рис. 2.26).

Рис. 2.26. Фотоальбом Мои успехи