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

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

• Безопасность – инструменты для обеспечения безопасности сайта: можно сменить пароли к учетным записям и 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. Фотоальбом Мои успехи

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

Для того чтобы активизировать этот инструмент, необходимо зайти на сайт и авторизоваться. В админ-баре следует выбрать команду Конструктор -> Включить конструктор. После включения режима Конструктор страница будет разделена на две части двойной линией (рис. 2.27).

Рис. 2.27. Страница в режиме конструктора

Теперь можно изменить содержание блоков. Для этого надо щелкнуть на изображении шестеренки. В базе uCoz собрано большое количество различных гаджетов (рис. 2.28).

Рис. 2.28. Гаджеты, доступные для добавления в блок

Кроме того, в режиме конструктора можно изменить надпись в заголовке сайта «Мой сайт». Для этого щелкаем на надписи, затем пишем свой вариант и нажимаем клавишу Enter. В данном случае заменим стандартную надпись названием нашего сайта – «Мои рецепты». После выполнения всех операций вновь нажимаем кнопку Конструктор, а затем – Сохранить изменения.

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

Рис. 2.29. Включение редактора главной страницы

После запуска редактора отредактируем главную страницу, добавив текст и фотографию «шеф-повара». Выполнив все манипуляции, необходимо нажать кнопку Сохранить. После этого появится таблица с предложением перейти на главную страницу и посмотреть результат. Результат нашей работы показан на рис. 2.30.

Рис. 2.30. Главная страница сайта «Мои рецепты» www.moirecepty.ucoz.ru

Наш сайт трудно назвать шедевром, но и времени на его создание потребовалось совсем немного.

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

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

2.8. Стоит ли создавать сайты на бесплатном хостинге?

Если бы мы задали профессиональным веб-мастерам вопрос о перспективах создания сайтов на бесплатном хостинге, то в большинстве случаев услышали бы в ответ категорическое неприятие такой идеи. С другой стороны, многие интернет-пользователи, ищущие способ заработка на сайтах без особых материальных затрат, активно используют и «Народ», и uCoz для создания многочисленных веб-проектов.

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

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

Первый сайт называется «Мяу – все о кошках» (www.miaow7.narod.ru). Как вы понимаете, он посвящен братьям нашим меньшим. Что касается уникальности, то, увы, уникален только шаблон и то отчасти, так как фотографии для него взяты из Интернета (рис. 2.31).

Рис. 2.31. Сайт «Мяу – все о кошках»

Второй сайт нацелен на фанатов Гарри Поттера и размещен по адресу www.harry-potter-fan.narod.ru (рис. 2.32).

Рис. 2.32. Фан-сайт Гарри Поттера

Как и в первом случае, контент на 80 % неуникален. Как вы догадываетесь, сайты созданы детьми, в частности дочерьми одного из авторов книги. Совокупный доход с этих сайтов составляет около $50 в месяц. С одной стороны, сумма смехотворная, но, учитывая, что эти деньги практически падают с неба, очень даже неплохо. Сожалеть остается только о том, что таких сайтов лишь два, а не 100, ведь при таком раскладе «халявный» заработок превысил бы среднюю зарплату по Российской Федерации.

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

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

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

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

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

• В рекламную сеть «Яндекс.Директ» не берут сайты, расположенные на бесплатных хостингах, за исключением сайтов на «Народе».

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

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

Совет

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

2.9. Выводы

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

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

• В качестве бесплатной площадки для экспериментирования с динамическими сайтами вполне подойдет uCoz.

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

Развлекательно-познавательная часть повествования на этом заканчивается, и начинается подготовка к серьезной работе. Перед тем как перейти к теме создания «коммерческих» сайтов, настоятельно рекомендуем не пропускать следующую главу, посвященную HTML.

Глава 3

HTML и не только

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

3.1. Что такое HTML и стоит ли тратить время на его изучение?

Как мы уже сказали в главе 1, аббревиатура HTML определяет язык разметки гипертекста (Hyper Text Markup Language). По сути дела, гипертекст – это текст, описывающий особую разметку, которая указывает браузеру, где и в каком виде отображать содержимое веб-страницы. К примеру, браузер должен знать, что картинку надо выводить по центру, а текст под ней должен быть зеленого цвета.

Не стоит путать HTML с языками программирования. На языках программирования, таких как Java, C++, Pascal и т. д., пишутся программы, а с помощью HTML лишь размечается обычный текст, который после подобной разметки превращается в гипертекст.

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

Как увидеть гипертекст конкретной веб-страницы? Очень просто – необходимо щелкнуть правой кнопкой мыши на открытой веб-странице (но не на картинке) и выбрать команду для отображения исходного кода. Для браузера Google Chrome это команда Просмотр кода страницы, для Opera – Исходный код, а для Mozilla Firefox – Исходный код страницы.

Вот так, к примеру, выглядит HTML-код веб-страницы одного из сайтов, открытый в браузере Google Chrome (рис. 3.1).

Рис. 3.1. HTML-код веб-страницы

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

Это так называемые управляющие символы – tags, или «теги». Любой профессиональный веб-мастер знает HTML, как любой профессиональный музыкант знает нотную грамоту. Но стоит ли тратить время на изучение HTML начинающим веб-мастерам, если и без его знания можно создавать сайты? Действительно, создавая сайт на uCoz, мы обошлись без знания HTML, но только потому, что не меняли шаблон и не использовали сторонний HTML-код. Увы, в реальных условиях без этого не обойтись. Готовясь к серьезной работе, не стоит пропускать эту главу. Постарайтесь вникнуть в основы HTML, так как в дальнейшем это сократит время работы над вашими сайтами.

Перед тем как переходить к созданию веб-страницы, немного расскажем о картинках.

3.2. О картинках

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

Совет

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

Поскольку картинки – это далеко не последний элемент любой веб-страницы, стоит поговорить о них подробней.

Файл – это программа или данные, хранящиеся в долговременной памяти компьютера. У каждого файла есть имя, состоящее из двух частей, разделенных точкой. До точки пишется собственно имя файла, как правило, присваиваемое пользователем. После точки пишется расширение файла, по которому компьютер понимает, с файлом какого типа он имеет дело (в операционной системе Linux расширение файла может отсутствовать).

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

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

К основным типам растровых графических файлов относятся GIF, JPG (JPEG), PNG, BMP и TIF. При создании сайтов необходимо использовать только форматы GIF, JPG (JPEG) и PNG.

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

JPEG – «любимый» формат пользователей Интернета. Именно в нем, как правило, хранятся фотографии, выложенные на различных сайтах. Формат JPEG позволяет хранить изображение с большим количеством цветов – около 16 млн.

Конец бесплатного ознакомительного фрагмента.