Вступление

Уроки по созданию сайта

Вступление

Для начала хотелось бы сказать пару слов о самом курсе обучения.

Несколько лет назад, когда я только начинала учиться программированию и, в том числе, созданию сайтов, передо мной встала такая проблема – на просторах интернета нет ни одного бесплатного и хорошего курса обучения. Все, что я находила, выглядело, будто бы было рассчитано на тех, кто уже давно все знает, а теперь, ввиду отсутствия в библиотеке и интернете развлекательного чтива, решился заново перечитать старый добрый курс по созданию сайтов. Конечно, были и нормальные курсы, смущала только надпись вроде: купить за 50$ (да, да, такова сейчас средняя цена любого стоящего курса обучения). Пришлось учиться методом научного тыка. И вот, спустя несколько лет и кучу испорченных сайтов, я наконец-то умею их создавать! Грустная история, не правда ли? Так вот, недавно мне предложили написать свой курс обучения по созданию хороших, профессиональных сайтов, рассчитанный на людей, не имеющих никакого отношения к программированию. Вспомнив, как я сама мучилась, я решила, а почему бы и не попробовать…

Теперь о видах сайтов.

Разумеется, каждый, кто создает сайт, хочет, чтобы это был хороший, профессиональный проект, ничуть не уступающий остальным сайтам сети. А значит, там должны быть разделы с видео, картинками, форум, а ко всему этому еще и оригинальный стильный дизайн. Для новичка создать такой сайт с нуля невозможно. Поэтому, дабы облегчить новичкам работу (а также заработать) были созданы системы по созданию сайтов, предполагающие создание сайта на основе готовых шаблонов. Я работала с двумя такими системами. Это: narod.yandex.ru и ucoz.ru. Каждая из этих систем имеет свои плюсы и минусы, и, конечно же, рассчитана на разных пользователей.

Перед созданием сайта необходимо определить, где этот сайт создавать. Для новичков есть три варианта:

1) Создание сайта с нуля. Как я уже говорила, не рекомендую. Максимум, что может создать новичок с нуля – простенький чисто информационный сайт. Ни о каких фотоальбомах, видео, форумах и прочем можно даже не мечтать. Но если все-таки, Вы решили создавать сайт с нуля, то учите HTML. Найдите в интернете страницу с HTML кодами, напрягите фантазию и вперед!

2) Создание сайта на базе narod.yandex.ru. Народ – довольно-таки простая система, работе с которой даже учиться не стоит. На самом сайте системы все подробно расписано и показано. От Вас требуется лишь знание интернета на уровне пользователя. Однако все же Народ подходит скорее для информационных, либо персональных сайтов. Да и об оригинальном и качественном дизайне там можно только мечтать.

3) Создание сайта на базе ucoz.ru. Несомненно, самая продвинутая и качественная из ныне существующих бесплатных систем. Позволяет создавать сайты, ничуть не уступающие другим ресурсам сети. Однако и обращаться с ней гораздо сложнее. Требуется хотя бы начальное знание HTML и хорошее знание интернета. Но и сайты, созданные в этой системе, стоят времени и усилий, потраченных на них. Большая часть данного курса обучения посвящена именно этой системе.

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

1) Вы хотите создать…

А) персональный сайт (0 баллов)

Б) информационный сайт (1 балл)

В) сайт «по интересам» (2 балла)

2) Вам нужен фотоальбом?

А) да (1 балл)

Б) нет (0 баллов)

3) Вам нужны мультимедиа разделы (видео, музыка и т.п.)?

А) да (1 балл)

Б) нет (0 баллов)

4) Вам нужен форум?

А) да (3 балла)

Б) нет (0 баллов)

5) Вам нужен качественный дизайн?

А) да (3 балла)

Б) нет (0 баллов)

6) Вы хотите заработать на сайте?

А) да (5 баллов)

Б) нет (0 баллов)

7) Сколько часов в день вы можете уделять сайту?

А) менее часа (1 балл)

Б) от часа до двух (0 баллов)

В) более двух часов (3 балла)

Результаты:

От 0 до 5 баллов

Вам лучше создавать сайт «с нуля». В данном курсе обучения Вам стоит прочитать главу 1, посвященную HTML.

От 5 до 10 баллов

Вам подойдет система Narod. Создание сайтов в данной системе описано в главе 2.

От 10 до 18 баллов

Вам подойдет система Ucoz. Этот курс обучения для Вас!

Итак, определились? Тогда начнем!

Глава 1 - HTML

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

Итак, как уже было сказано, HTML – язык, на котором написаны все сайты. Как и любой язык, HTML имеет свои правила и свою структуру. Фактически, все HTML коды написаны на самом обычном английском. Так что тем, кто уже хотя бы средне знаком с этим языком, будет гораздо проще.

Одного урока не хватит, чтобы полноценно выучить HTML. Поэтому я распишу лишь основные правила.

Для начала рассмотрим оформление. HTML сам по себе – набор кодов, иначе тегов.

Пишутся теги так: <тег>

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

Конец тега: </тег>

Не буду объяснять конкретные примеры HTML кодов. Ниже находится список всех основных тегов. Большего знать не требуется. (Список лучше всего распечатать и иметь всегда под рукой. Читать и заучивать его не имеет смысла, в процессе работы над сайтом все нужные теги запомнятся сами)

Основные теги

<html></html> - Указывает программе просмотра страниц, что это HTML документ.

<head></head> - Определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.

<body></body> - Определяет видимую часть документа.

Теги оглавления

<title></title> - Помещает название документа в оглавление программы просмотра страниц.

Атрибуты тела документа

<body bgcolor=?> - Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.

<body text=?> - Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

<body link=?> - Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.

<body vlink=?> - Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.

<body alink=?> - Устанавливает цвет гиперссылок при нажатии.

Теги для форматирования текста

<pre></pre> - Обрамляет предварительно отформатированный текст.

<h1></h1> - Создает САМЫЙ БОЛЬШОЙ заголовок.

<h6></h6> - Создает самый маленький заголовок.

<b></b> - Создает жирный текст.

<i></i> - Создает наклонный текст.

<tt></tt> - Создает текст - имитирующий стиль печатной машинки. Используется для цитат, обычно наклонный текст.

<em></em> - Используется для выделения из текста слова (наклонный или жирный текст).

<strong></strong> - Используется для выделения наиболее важных частей текста (наклонный или жирный текст).

<font size=?></font> - Устанавливает размер текста в пределах от 1 до 7.

<font color=?></font> - Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки

<a xhref="URL"></a> - Создает гиперссылку на другие документы или часть текущего документа.

<a xhref="mailto:EMAIL"></a> - Создает гиперссылку вызова почтовой программы для написания письма автору документа.

<a name="NAME"></a> - Отмечает часть текста как цель для гипперссылок в документе.

<a xhref="http://www.cyberguru.ru/#NAME"></a> - Создает гиперссылку на часть текущего документа.

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

<p> - Создает новый параграф.

<p align=?> - Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center.

<br> - Вставляет перевод строки.

<blockquote></blockquote> - Создает отступы с обеих сторон текста.<dl></dl>Создает список определений.

<dt> - Определяет каждый из терминов списка.

<dd> - Описывает каждое определение.

<ol></ol> - Создает нумерованный список.

<li> - Определяет каждый элемент списка и присваивает номер.

<ul></ul> - Создает ненумерованный список.

<li> - Предваряет каждый элемент списка и добавляет кружок или квадратик.

<div align=?> - Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей.

Графические элементы

<img xsrc="name"> - Добавляет изображение в HTML документ.

<img xsrc="name" align=?> - Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle.

<img xsrc="name" border=?> - Устанавливает толщину рамки вокруг изображения.

<hr> - Добавляет в HTML документ горизонтальную линию.<hr size=?>Устанавливает высоту (толщину) линии.

<hr width=?> - Устанавливает ширину линии, можно указать ширину в пикселах или процентах.

<hr noshade> - Создает линию без тени.

<hr color=?> - Задает линии определенный цвет. Значение RRGGBB.

Таблицы

<table></table> - Создает таблицу.

<tr></tr> - Определяет строку в таблице.

<td></td> - Определяет отдельную ячейку в таблице.

<th></th> - Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом).

Атрибуты таблицы

<table border=#> - Задает толщину рамки таблицы.

<table cellspacing=#> - Задает расстояние между ячейками таблицы.

<table cellpadding=#> - Задает расстояние между содержимым ячейки и ее рамкой.

<table width=#> - Устанавливает ширину таблицы в пикселах или процентах от ширины документа.

<tr align=?> или <td align=?> - Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.

<tr valign=?> или <td valign=?> - Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.

<td colspan=#> - Указывает кол-во столбцов, которое объединено в одной ячейке (по умолчанию=1).

<td rowspan=#> - Указывает кол-во строк, которое объединено в одной ячейке (по умолчанию=1).

<td nowrap> - Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

Глава 2 - Система Narod, регистрация и краткое обучение

Система для создания сайтов Narod будет понятна любому среднестатистическому пользователю интернета. Так что разъясню лишь основы.

Итак, заходим на сайт по адресу: http://narod.yandex.ru/

Кликаем на «создайте свой сайт». Вас попросят зайти или зарегистрироваться. Даже если у Вас есть аккаунт на Яндексе, лучше зарегистрироваться заново.

Итак, регистрируемся.

Имя и фамилия. Полностью на Ваше усмотрение.

Логин. Не слушайте систему, которая будет предлагать вам логины на основе имени и фамилии. Логин впоследствии будет и адресом сайта, то есть при логине: mysite, адрес вашего сайта будет: mysite.narod.ru.

Выбрали логин? Идем дальше!

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

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

Другой Email и мобильный телефон. Эти строки заполнять не обязательно.

Контрольные цифры. Введите показанный на картинке цифровой код.

Выбираем «начать пользоваться сервисом»

Далее «создайте свой сайт»

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

Глава 3 - Система Ucoz. Регистрация и ознакомление с панелью управления.

Итак, начинаем знакомство с наиболее полной и качественной системой для создания сайтов – Ucoz.

Заходим на сайт http://www.ucoz.ru/. Нажимаем «регистрация».

Адрес сайта (логин): пишем желаемый адрес сайта. Система скажет, существует ли сайт с таким же адресом.

Пароль: пароль к сайту

Подобным образом заполняем остальные поля.

Зарегистрировавшись, заходим на сайт. Вводим логин, пароль и код подтверждения. Далее высветится: «Это ваш первый вход в систему, воспользуйтесь мастером настройки для конфигурации Вашего сайта».

Выбираем название сайта. Оно должно быть не слишком длинным и максимально содержательным.

Потом выбираем готовый шаблон для дизайна. Для примера выберем дизайн №971.

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

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

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

Далее. Высвечивается страница со страшным и непонятным текстом. Что ж, расшифрую.

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

Логин пользователя-администратора. Управление сайтом осуществляется через панель управления или через администратора непосредственно на сайте. Панель управления отвечает скорее за технические вещи: дизайн, модули, пользователей. Контроль же за материалами, размещенными на сайте, осуществляется через пользователя-администратора. Логином для него может служить Ваше имя или ник в том случае, если вы хотите также участвовать в жизни сайта, свободно общаться с другими пользователями и т.д. Если же пользователь Вам нужен только для управления материалами, то лучше всего ввести имя наподобие: admin.

Далее вводим пароль. Заметьте, что пароль надо вводить не такой же, какой вводился при регистрации сайта.

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

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

Нажимаем: «Начать работать с системой».

И вот мы находимся в панели управления.

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

Теперь подробнее о модулях.

Пользователи. Через этот модуль осуществляется управление пользователями сайта, их группами и правами.

Редактор страниц. Редактирует основные страницы сайта. Таких страниц можно создавать неограниченное количество. Однако и размещать на них можно только информацию.

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

Форум. Модуль для общения между пользователями и обсуждения различных тем.

Каталог статей. Статьи.

Каталог файлов. Этот модуль показывает загруженные на сайт файлы. Например, видео или музыку.

Фотоальбомы. Фотографии и просто картинки.

Почтовые формы. Модуль для связи пользователей и администрации сайта.

Опросы. Различные опросы пользователей.

Каталог сайтов. Ссылки на всякие полезные сайты.

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

Блог. Дневник. Часто используется при создании персональных сайтов.

Гостевая книга. Отзывы пользователей о Вашем сайте.

FAQ. Вопросы по сайту и ответы на них.

Поиск по сайту. Поисковик.

Мини-чат. Небольшое окошечко в углу для обмена мгновенными сообщениями между пользователями.

Статистика. Отображение статистики посещений Вашего сайта.

Теперь Вы более или менее знакомы с модулями сайта.

Возвращаемся в панель управления.

Выбираем «управление дизайном» и переходим к следующему уроку.

Глава 4 - Дизайн

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

При создании дизайна важно не столько знание HLML, сколько просто вкус человека, создающего сайт.

Я дам несколько советов, которые стоит учитывать при выборе дизайна:

1) Дизайн должен быть выполнен в одной цветовой гамме. Наилучшим выбором будет: любой цвет+черный/белый. И, разумеется, оттенки.

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

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

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

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

Открывается страница с названиями всех существующих на данный момент на сайте страниц. Не пугайтесь, я объясню, как быстро поставить дизайн на все страницы. А пока что выбираем: редактор страниц – страницы сайта.

А вот и всеми любимый HTML. Его не стоит бояться. Даже если Вы что-то напутаете, всегда можно вернуться к исходному дизайну! И вообще, главное, создавая сайт – не надо бояться его испортить. В любой момент можно создать другой сайт. А интернет от одного пробного испорченного сайта уж точно не умрет. И Вас убивать никто не будет!

Для начала разберемся в структуре страницы. Все страницы сайта написаны по принципу:

<html> с этого начинается любой HTML документ

<head>

<title>$Название сайта$ - $Название страницы$</title>

</head>

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

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

Логотип – в данном случае изображение сверху страниц сайта, служащее его символом.

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

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

На:

<tr>

<td width="70%" style="padding-left: 400px;"><span style="color: #EFD959;font:20pt bold Verdana,Tahoma;">Название сайта </span></td>

Далее…

</table>

<tr><td width="32"><img src="http://s27.ucoz.net/t/971/6.gif" border="0"></td><td style="background:url('http://s27.ucoz.net/t/971/7.gif') #B0E300;font-size:10px;" class="topLink"><a href="$HOME_PAGE_LINK$" title="Главная">Главная</a> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$" title="Мой профиль">Мой профиль</a><?else?> | <a href="$REGISTER_LINK$" title="Регистрация">Регистрация</a><?endif?><?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$" title="Выход">Выход</a><?else?> | <a href="$LOGIN_LINK$" title="Вход">Вход</a><?endif?><?endif?></td><td width="27"><img src="http://s27.ucoz.net/t/971/8.gif" border="0"></td><td align="right" class="topLink" style="padding-right:10px;font-size:10px;"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?>Вы вошли как <a href="$PERSONAL_PAGE_LINK$" title="Мой профиль"><b>$USERNAME$</b></a> | Группа "<u>$USER_GROUP$</u>"<?else?>Приветствую Вас <b>$Имя пользователя$</b><?endif?><?endif?> | <a href="$RSS_LINK$" title="RSS">RSS</a></td></tr>

</table>

</div>

<tr>

Эта часть отвечает за верхнюю часть сайта. Там расположены ссылки для регистрации, входа, а также приветствие. Сама по себе эта часть выглядит как длинная узкая полоса. Вышеуказанный код задает ее дизайн и содержимое. Ссылки на картинки задают фон этой полосы (на всякий случай объясню – ссылка на картинку выглядит так: http://s27.ucoz.net/t/номер дизайна/номер изображения. расширение:gif или jpg). Так же жирным шрифтом указаны информационные данные.

<tr><td height="21" style="background:url('http://s27.ucoz.net/t/971/9.gif') #D4DFF7;padding-left:30px;"><b>Меню сайта</b></td></tr>

</table>

<?if($Категории (появятся на других страницах сайта, вроде фотоальбома)$)?>

<tr><td height="21" style="background:url('http://s27.ucoz.net/t/971/9.gif') #D4DFF7;padding-left:30px;"><b>Разделы новостей</b></td></tr>

<tr><td style="background:#F1F1F1;padding:5px;border:1px solid #A7A6A6;">$CATEGORIES$</td></tr>

</table>

<?endif?>

<?if($Мини-чат$)?>

</table>

<?endif?>

<?if($Опросы$)?>

<tr><td height="21" style="background:url('http://s27.ucoz.net/t/971/9.gif') #D4DFF7;padding-left:30px;"><b>Наш опрос</b></td></tr>

</table>

<?endif?>

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

</td>

<table border="0" cellpadding="10" cellspacing="0" width="100%" style="border:1px solid #D7D7D7;"><tr><td style="background:#F8F8F8;">$Здесь будет находиться содержимое страницы $</td></tr></table>

</td>

Блок с основным содержимым страницы.

<?if($Форма входа на сайт$)?>

<tr><td height="21" style="background:url('http://s27.ucoz.net/t/971/9.gif') #D4DFF7;padding-left:30px;"><b>Форма входа</b></td></tr>

<tr><td align="center" style="background:#F1F1F1;padding:5px;border:1px solid #A7A6A6;">$LOGIN_FORM$</td></tr>

</table>

<?endif?>

<?if($Календарь новостей$)?>

<tr><td height="21" style="background:url('http://s27.ucoz.net/t/971/9.gif') #D4DFF7;padding-left:30px;"><b>Календарь новостей</b></td></tr>

<tr><td align="center" style="background:#F1F1F1;padding:5px;border:1px solid #A7A6A6;">$NEWS_CALENDAR$</td></tr>

</table>

<?endif?>

<?if($Форма поиска$)?>

<tr><td height="21" style="background:url('http://s27.ucoz.net/t/971/9.gif') #D4DFF7;padding-left:30px;"><b>Поиск</b></td></tr>

<tr><td align="center" style="background:#F1F1F1;padding:5px;border:1px solid #A7A6A6;">$SEARCH_FORM$</td></tr>

</table>

<?endif?>

<tr><td height="21" style="background:url('http://s27.ucoz.net/t/971/9.gif') #D4DFF7;padding-left:30px;"><b>Друзья сайта</b></td></tr>

<tr><td style="background:#F1F1F1;padding:5px;border:1px solid #A7A6A6;">$GLOBAL_FRIENDS$</td></tr>

</table>

<?if($Пользователи$ || $Пользователи онлайн$)?>

<tr><td height="21" style="background:url('http://s27.ucoz.net/t/971/9.gif') #D4DFF7;padding-left:30px;"><b>Статистика</b></td></tr>

<tr><td align="center" style="background:#F1F1F1;padding:5px;border:1px solid #A7A6A6;">$COUNTER$<?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$$ONLINE_USERS_LIST$<?endif?></td></tr>

</table>

<?endif?>

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

</td>

</tr>

</table>

</td></tr></table>

<tr><td align="center" height="23" style="background:url('http://s27.ucoz.net/t/971/10.gif') #CCCCCC;">Copyright MyCorp © $YEAR$</td></tr>

<tr><td align="center" height="45" style="background:#B5DC54;">$POWERED_BY$</td></tr>

</table>

</body>

</html>

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

Далее остаются лишь детали.

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

Глава 5 - Надписи, названия, меню

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

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

Открываем раздел, в котором хотим поменять названия, например, «Названия модулей».

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

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

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

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

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

</td>

<tr>

<td width="80%"><a href="$HOME_PAGE_LINK$">Главная</a> » Статьи</td>

<td align="right" style="white-space: nowrap;"><?if($ADD_ENTRY_LINK$)?>[ <a href="$ADD_ENTRY_LINK$">Добавить статью</a> ]<?endif?></td>

</tr>

</table>

<hr />

<tr>

<td width="60%">Всего материалов в каталоге: <b>$NUM_ENTRIES$</b><?if($NUM_SHOWN$)?><br />Показано материалов: <b>$NUM_SHOWN$</b><?endif?></td>

<td align="right"><?if($PAGE_SELECTOR$)?>Страницы: $PAGE_SELECTOR$<?endif?></td>

</tr>

</table>

<hr />

$BODY$

<?if($PAGE_SELECTOR1$)?><div style="text-align:center;">$PAGE_SELECTOR1$</div><?endif?></td></tr></table>

</td>

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

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

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

Глава 6 - Страницы сайта

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

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

Итак, некоторые страницы сайта создаются автоматически. Они были перечислены выше.

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

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

Теперь заполняем страницу содержимым. Можно добавлять текст и картинки.

Текст редактируется, как во всем известном Microsoft Word. Можно выбрать шрифт, размер, подчеркнуть текст, сделать его жирным и т.д.

Чтобы добавить картинку, надо найти в верхнем ряду иконку с горами и солнцем. Она расположена над кнопкой жирного текста. Даем ссылку на картинку и нажимаем «вставить». Ссылка на картинку готова.

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

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

Глава 7- Доска объявлений, статьи, фотоальбомы, видео

Теперь переходим к другим модулям. На этом уроке мы рассмотрим работу с доской объявлений, разделом статей, фотоальбомом и видео.

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

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

Итак, работаем с доской объявлений. Дизайн мы уже создали, так что переходим к настройке модуля.

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

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

Сортировка полей. Здесь выводятся все поля, которые надо расставить в удобном для Вас порядке. На поля, которые Вы галочкой не отметили, не стоит обращать внимания – они не имеют никакого значения.

Выбираем остальные настройки и нажимаем «сохранить».

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

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

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

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

Глава 8 - Тесты, опросы, форум

Теперь переходим к созданию тестов, опросов и форума. Эти модули совсем разные, потому про каждый из них я напишу отдельно.

Опросы. Начнем с самого простого – с опросов. При включении этого модуля автоматически появляется первый опрос с просьбой оценить сайт. Впоследствии его можно будет удалить. Зато теперь можно создавать свои опросы. Их количество неограниченно и выводиться на сайте они будут в случайном порядке.

Итак, чтобы создать опрос, открываем модуль «опросы – управление опросами». Нажимаем «добавить опрос». Вводим вопрос и варианты ответов. Выбираем параметры и нажимаем «добавить». Опрос создан.

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

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

Открываем модуль: тесты. Для тестов можно создавать категории. Создаются они так же, как категории к «доске объявлений» или «статьям».

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

Форум. Форум нужен для общения с читателями сайта и обсуждения важных (или не очень) тем.

На форуме есть разделы, в каждом из них по нескольку форумов, а в каждом форуме по нескольку тем. Разделы и форумы создаются так же, как в «статьях» и т.п. А темы создаются непосредственно на сайте.

Глава 9 - Другие возможности

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

Перенос домена. Адрес только что созданного сайта выглядит как: http://mysite.ucoz.ru/. Однако можно превратить его в http://mysite.ru/. Опция эта (к сожалению) не бесплатна, но вполне возможно, что в скором времени окупится. Чтобы перенести домен, нужно нажать на «перенос домена» в главном меню панели управления и следовать инструкциям на сайте.

Редактор смайлов. Здесь можно создавать собственный набор смайлов для сайта.

Настройка баннера и копирайта ucoz. Здесь можно настраивать рекламу юкоз на Вашем сайте.

Резервное копирование. Создание резервной копии Вашего проекта.

Файловый менеджер. Загрузка картинок, видео, смайлов и т.д. на Ваш сайт.

Глава 10 - Раскрутка и продвижение

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

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

Но даже на оригинальный сайт народ сразу не побежит. Почему? Да потому что просто не будет о нем знать. Теперь все дело в правильной рекламе.

Сейчас есть множество способов рекламы.

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

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

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

Итак, плюсы и минусы платной рекламы:

+ ваш сайт посетит большое количество людей

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

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

Глава 11 - Реклама

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

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

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

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

2 способ. В интернете есть специальные системы, которые платят «за клики». То есть за переход по размещенной ссылке. Заработок от них будет не такой большой, но зато 100% будет.