Серия сообщений "начинающий ЛиРу-шник":
Часть 1 - Всё, что вы хотели знать о ЛиРу, но... (Самый полный FAQ по ЛиРу).
Часть 2 - Шаблоны для ваших дневников
...
Часть 4 - Ваш компьютер мальчик или девочка?
Часть 5 - Как не потерять закладки, пароли и всё остальное
Часть 6 - Календарь в помощь.

Серия сообщений "Для дома/разное":
Часть 1 - 10 оригинальных способов использования микроволновки, о которых вы, скорее всего, даже не подозревали.
Часть 2 - Коллекция рецептов для микроволновой печи
...
Часть 22 - МОИ ЛЮБИМЫЕ ПЕСНИ...ДЛЯ ДУШИ....
Часть 23 - Вячеслав Добрынин!! Вспомним песни!
Часть 24 - Музыка для души
Часть 25 - Вечный православный календарь на каждый день
Часть 26 - "***БЛЮДА ИЗ АРМЯНСКОГО ЛАВАША***"

Мы вставили свою картинку. Теперь можно изменить цвет шрифта и его начертание.
Чуть ниже строки, где мы вставили путь к картинке, мы видим:
#site_logo td {
vertical-align: middle;
font: 40px 'Tahoma';
color: #000000;

Вот это и есть шрифт, которым написано ваше название.
Измените color, например, на B8860B, этот цвет больше гармонирует с выбранным дизайном.
Тип шрифта сложнее, не все компьютеры его поддерживают. Но попробуем заменить 'Tahoma' на какой-нибудь другой. Предположим, мы хотим Times New Roman. Вставим вместо 'Tahoma' тот шрифт, который мы выбрали Times New Roman. Получилось?
Так же можно изменить и размер шрифта.
Если у вас не происходит изменений, возможны такие ошибки:
- при вводе вы «зацепили» другие знаки – будьте внимательны при вводе!
- после изменений вы не нажали клавишу внизу «Сохранить» - ваши изменения не приняты к исполнению.
- вы не обновили страницу вашего сайта – изменения внесены, но сайт ваш их еще не принял.

И так можно экспериментировать со всеми font: (шрифт), color (цвет), background (цвет фона).
Например, вместо
background: url(/.s/t/792/2.png)
вставим
background-color: #ffffff
и мы получим белый цвет фона.

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

5 урок
Поговорим о дизайне.
Разберем его на примере дизайна
Войдем в панель управления и выберем «настройки» - «Общие настройки».
В них можно в строке «Выбрать дизайн» - выбрать дизайн нашего сайта.
Возьмем простой номер 792.
Прокрутим страницу до конца и нажмем «Сохранить».
Полюбуемся на наш сайт. Для этого в меню выберем «Общее» и Название нашего сайта.
Красиво?
Но в общем это не то, чего мы хотели. Девушка красивая, но я ее не знаю. Цвета пока трогать не будем.
И я не вижу НАЗВАНИЯ моего сайта.
Проще справиться с названием.

На панели Управления выберем «Дизайн» - «Управление дизайном (шаблоны».
И выберем строчку «Глобальные блоки» под ней «Верхняя часть сайта».
В окне с кодами страницы найдите слова «Мой сайт» - примерно 5-8 строки. Введите вместо них название своего сайта! Например «Школа № 18. Город Качалов».
Нажмем под этим окном с кодами «Сохранить».
Теперь сайт имеет свое название.

Как изменить картинку?
Попробуем нажать на картинку правой клавишей и «Открыть фоновое изображение». Оно откроется в том же окне!
Мы примерно видим, что нам нужно создать или подобрать. Обратите внимание на название открывшейся вкладки – «4.jpg». Остается найти эту «4.jpg» и заменить ее на нашу.
Ищем рисунок в «Таблице стилей». Можно искать в Общих стилях (General styles), а можно через Поиск – нажать Ctrl+F и ввести «4.» .
Нашли? Давайте рассмотрим, какую информацию можно видеть:
#image {
float: left;
width: 291px;
height: 152px;
background: url(/.s/t/792/4.jpg);

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

Мы определились с модулями, выяснили, какие папки у нас соответствуют страницам.
Создаем сайт!
Зайдите по ссылке
http://www.ucoz.ru/

Выбираем «Создать сайт» и отвечаем на вопросы. Тут трудностей нет.
Сначала регистрируемся.
Укажите ваш почтовый ящик, на который придет сообщение о том, что ваш сайт зарегистрирован.
Пароль вводите для входа на сайт. Это не пароль от вашего ящика!
Никнейм – ваш псевдоним, по которому вы будете входит на сайт, используя пароль для сайта. Можете вести свой ящик.
Под окошками ввода есть маленькая надпись все. Если нажать на нее, то вы можете выбрать – кто будет видеть ваши данные.
И «Код безопасности» - введите цифры с картинки, чтобы подтвердить, что вы не робот. Если цифры плохо видны (а это частое явление – юкоз почему-то дает очень плохую картинку) – нажмите возле картинки кружочек для ее обновления и так делайте до тех пор, пока цифры не станут различимыми.
«Условия использования» - поставьте галочку «Подтверждаю условия использования». Можете посмотреть эти условия нажав на ссылку условия использования. Хотя обычно на «ознакомление» с этими условиями уходит полсекунды.

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

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

«И увидел я, что это хорошо и решил отдохнуть!»

Сайт есть!
Пока он пустой, но мы им можем управлять. Это наш сайт. Будем о нем заботиться и растить его.

Пора подумать о структуре и названии сайта.
Bibliotekar (библиотекарь) или bibliotekar
Homeowner (хозяин в доме) или hozaindoma
Goodgrandmather (хорошая бабушка) или horoshajababula, horoshajababula
Первое – перевод на английский вашей темы. Название сайта должно быть только латинскими буквами. Сейчас есть сайты, название которых можно писать русскими буквами, но юкоз пока это не предоставляет.
Второе – то же название, но по-русски, правда пишется латинскими буквами. Выбирайте, как вам больше нравится. Желательно, чтобы название сайта отражало его содержание.
Пробелы и точки в названии сайта не ставьте!
По этой ссылке вы можете перевести слова с русского на английский.
http://translate.google.ru/?hl=ru&tab=wT#

Поговорим о структуре сайта

Разделы на стандартном сайте от юкоза (их называют модули)
Главная страница – без нее не обойтись. На ней вы разместите информацию о том, что вы скажете посетителям.
Новости сайта – эта страница будет выглядеть, как накопитель новостей. Если вы хотите отслеживать какое-то событие, она пригодится. Пользоваться ей (да и оформлять) не очень удобно. Количество новостей на странице примерно десять, затем создается новая страница и так далее. На странице краткая аннотация десяти новостей, по ним посетитель выбирает ту новость, которую он хочет прочитать более подробно. Без нее сайт обойдется.
Форум – я считаю его необходимым. Возможно, посетитель задаст вопросы, возможно, кто-то захочет дать свое видение какого-то процесса.
Доска объявлений – ее можете оставить. Эта доска похожа на дверь подъезда, оклеенную листочками «куплю-продам». Страница для рекламных объявлений.
Блог – ваш дневник. Если вы хотите, чтобы посетители знали ваши мысли и настроения оставьте этот модуль.
Фотоальбомы – мое мнение такое – на деловом сайте это ни к чему. Пусть пару ваших знакомых захотят увидеть ваше лицо, вашу семью. Но большинству посетителей это ни к чему.
Но если вы художник, строитель, архитектор, рекламист, дизайнер, этот раздел необходим – это будет ваше портфолио.
Гостевая книга – здесь обратная связь с посетителями. Они задают вопросы или пишут пожелания. Эти пожелания и вопросы можно учесть в дальнейшей работе – и доработать информацию на страницах сайта в соответствии с пожеланиями.
FAQ (вопрос/ответ) – сайт с таким разделом считается крутым и серьезным. Но в начале создания сайта этот модуль вполне можно убрать. Появится много типовых вопросов – вы всегда можете установить этот модуль..
Поиск по сайту – не занимает отдельного места на странице. Оставим.
Мини-чат – наверное, модно иметь свой чат. Но поищите в Поиске «чат», посмотрите, сколько в нем участников. Убираем.
Почтовые формы – посетитель может послать вам письмо с вопросом или предложением. Оставьте для оперативной связи.
Статистика сайта – вам ведь интересно, сколько у вас посетителей? Оставляем.
Каталог сайтов – этот модуль похож на библиотеку. Здесь ссылки на те сайты, которые вам кажутся интересными и полезными. Если вы считаете, что таких сайтов много – оставьте. Я обхожусь без него - даю ссылки на сайты в своих страницах.
Каталог файлов – примерно то же, но ссылки на файлы. Тоже не нужен.
Он лайн игры – некоторые создатели думают, что играми они привлекают посетителей. Возможно, в этом есть смысл. Но мне по душе Информация, а не игры. Если вы делаете сайт для молодежи или подростков – можете оставить.
Тесты – мое отношение такое же, как и к играм. Есть посетители, которые любят тестировать себя и делать из этого выводы или прогнозы. Если вы ожидаете таких посетителей – оставьте.
Опросы – вы можете здесь организовать опрос по разным направлениям. Я не активирую модуль.
Интернет-магазин – если вы собираетесь торговать оставьте этот модуль. Но в этом случае я не могу помочь – ищите в Интернете, как создать свой Интернет-магазин. У вас большой ассортимент товаров?
Страницы сайта – на этом модуле построен ваш сайт. Без него сайт не может существовать!

Определимся с теми модулями, какие нам нужны. Если вы их не активируете, сделаете это позже.
Мы создали для сайта папки. Все они будут находится на Страницах сайта. Остальные модули – пока находятся в теории. Их мы будем создавать уже после создания сайта.

Сайт создадим на следующем уроке.

Серия сообщений "сайт своими руками":
Часть 1 - Делаем сайт. Урок 6
Часть 2 - 4 Урок. Название и структура сайта

Подготовка информации для размещения на сайте.
1.Создаем Страницы (пока их делаем и размещаем на компьютере) и готовим их для размещения на сайте.
Пишем текст, который мы хотим увидеть на странице. В процессе написания понимаем, что понадобятся и картинки, и ссылки. Например, «Об этом вы можете почитать в Книге…». «Книга …» оформим ссылкой. Но где-то эта книга должна быть!

Отступление.
Создание файлов, на которые вы будете ссылаться (создание Книг). Книгу можно разместить на вашем сайте. Возможно, придется делать ссылку на другую страницу сайта. Пометьте и эту ссылку. Все ссылки пока условные – для ориентира, выделите их другим цветом, чтобы не забыть.
Реальные ссылки мы научимся делать потом.
Например:
«Об этом вы можете прочитать в статье (ссылка)»

Как создать Книгу удобную для размещения на сайте.
Понятно, что книги будут в виде документа с расширением «doc» или «txt». Но есть еще хитрый формат «docx» - это для Ворда более старших версий. Старайтесь его не использовать – не у всех установлен Ворд-2003. Но если вы сохранили или раздобыли такой документ – переименуйте это расширение просто убрав букву «х» – работает!
Документы в формате «txt».при их открытии по ссылкам выглядят нечитаемо. Да и зачем их добавлять в ссылки, если можно просто вставить в страницу?
Как сделать читаемыми такие документы, мы поговорим, когда переедем на сам сайт.
Итак, мы создали документ (мы его называем Книгой). Название должно быть латинскими буквами. Юкоз-то переименует, а вот depositfiles принимает файлы только с латинскими буквами.

Итак, мы написали текст для страницы сайта, написали Книгу. Теперь вставим текст в нашу страницу!

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

В левом боковом меню выбираем «Редактор страниц» и откроем его.
Нажмем «Добавить страницу».
Откроется новое окно для формирования страницы.
Введем заголовок, например, «Дети от трех до пяти лет».
Теперь нажмите справа пониже «Панель ВВ кодов». У вас появится новая функция «Визуальный редактор». Нажмем на эту надпись.
Работа не очень отличается от работы в документе Ворд.
Нажмем Ентер – чтобы заголовок не был по самому срезу верха страницы. Введем заголовок страницы и затем несколько раз нажмем Ентер – оставим пустые строки..
В принципе страница создана. Но пока на ней нет информации.

Вставим Таблицу в одну ячейку. Ширину таблицы определите опытным путем. Примерно 500-520 пикселей. Зачем это нужно? Чтобы текст не расползался по всей странице. Таблица задает нашему тексты границу!
Пока оставим наше окно и откроем документ, из которого будем вставлять информацию. Скопируем текст и вставим этот текст в новый документ с расширением txt.
В документе txt выделим весь текст и скопируем его в таблицу.
Для чего такие сложности?
Ну, попытайтесь вставить информацию после копирования ее из документа Ворд – убедитесь сами, что при вставке в нашу страницу появляется очень много «мусора».
ТЕСКТ НАДО ВСТАВЛЯТЬ ТОЛЬКО ИЗ ДОКУМЕНТА С РАСШИРЕНИЕМ .ТХТ!
Теперь можно украсить наш текст всякими наворотами. Например, отформатировать его по центру или по ширине. Можно выделить слова жирным шрифтом. Вы можете изменить размер шрифта и выбрать его начертание. Все это делается в Визуальном редакторе.
Недостаток визуального редактор в том, что он не понимает команду абзаца. Все отступы приходится делать тупой долбежкой клавиши пробела.
Но все же возможности редактора неплохие.

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

А сейчас внизу нажмем «Сохранить» и ответим «Перейти на страницу».

Вот она страница, созданная своими руками! Есть чем гордиться! Теперь все посетители увидят, что вы создали свой сайт и на нем красивую страницу!

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

Начнем справляться со ссылками.
Вверху страницы сайта в Меню нажмите «Управление» и выберите «Файловый менеджер». Он загружает файлы на ваш сайт.
Внизу Файлового менеджера нажмем «Обзор» и найдем Книгу, на которую вы хотите перейти по вашей ссылке. Затем нажмем «Загрузить файл». После загрузки нажмите кнопку (і) возле названия загруженного файла и скопируйте эту ссылку.
Обратите внимание, что можно загружать фалы не более 5 Мб! Файловый менеджер вам ничего не скажет, а будет терпеливо якобы грузить и грузить файл весом свыше 5 Мб. Пока вам не надоест.
Об том, как загрузить большие файлы мы поговорим позже.

Вернемся к созданной странице. Внизу текста, который вы вставили, на странице есть три значка:
«Редактировать в визуальном редакторе», «Редактировать HTML код», «Удалить страницу». Название подсвечивается при наведении мышки.
Выберем средний значок – «Редактировать HTML код». Откроется новая вкладка. Кстати, при редактировании страницы несколько раз количество новых вкладок будет увеличиваться. Не забывайте их закрывать!
Перед нами стоит задача одна – вставить грамотно ссылку. Поэтому мы не переходим в визуальный редактор, а ищем среди текста вперемешку с «мусором» («мусор» - условно, потому что все символы нужны, и мы к этому добавим еще символы) текст «переходим к ссылке» или то, как вы обозначили ваши ссылки.

Так вот вместо нашего «Вставим ссылку» вставим такую строку (или, если угодно, код):

<p><a href="http://compancommand.3dn.ru/literatura/glava-01.doc" target="_blank">Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1.</a></p>

Скопируйте эту строку, вставьте ее в текстовый документ, скопируйте оттуда и вставьте в редактор страниц.
Вместо «Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1» вставьте тот текст, который будет видеть читатель.
Вместо «http://compancommand.3dn.ru/literatura/glava-01.doc» вставьте ту ссылку, которую мы скопировали.
Такая ссылка откроется в НОВОМ окне.

И немного о «мусоре». Кроме текста вы видите символы, которые являются кодами.
Достаточно знать некоторые из них. Сейчас мы познакомимся с двумя:
<br> Этот символ появляется если вы нажали клавишу Ентер. То есть всего-навсего – Перевод строки. Если таких символов несколько подряд – у вас появляются дополнительные строки. Если строки не нужны – можете просто убрать лишние символы.

А вот символ
<p>
Связан с символом
</p>

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

<p><a href="http://compancommand.3dn.ru/literatura/glava-01.doc" target="_blank">Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1.</a></p>

Создает ссылку в новом окне. Обратите внимание на знакомые знаки

<p> и </p>

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

  </p>

будет работать так, словно мы нажали клавишу Ентер.
Но если вставить текст после <p> или до </p> этот текст будет находиться на той же строке.

Вот два примера:

<p><a href="http://compancommand.3dn.ru/literatura/glava-01.doc" target="_blank">Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1.</a></p>

На странице выглядит:
Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1.
То есть это та ссылка, на которую нажимаем мышкой.

Второй пример:

<p>Книга <a href="http://compancommand.3dn.ru/literatura/glava-01.doc" target="_blank">Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1.</a> – руководство для командира.</p>

Мы вставили текст до и после <p> и получим на странице:

Книга Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1. – руководство для командира.

И, наконец третий пример для лучшего понимания команд (они называются тегами):

<p><a href="http://compancommand.3dn.ru/literatura/glava-01.doc" target="_blank">Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1.</a></p> является книгой необходимой каждому командиру.

А на странице это будет так:

Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1.

является книгой необходимой каждому командиру.

Последняя фраза будет напечатана на новой строке!

Еще попробуем поработать с кодом HTML. Наберем в Редакторе страниц :

<p>
<a href="http://compancommand.3dn.ru/literatura/glava-01.doc"

target="_blank">Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1.</a>
</p>


Ну, удобно мне выделить начало и конец моей ссылки! Как это повлияет на код?
А никак. Если вы дадите команду «Сохранить» - внизу страницы и «Перейти на страницу», вы не заметите тех строк, которые вставляли в коды. То есть в кодах можно вставлять абзацы для удобвства понимания кодов. И это не влияет на код страницы!

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

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

Для этого служит команда

<p><a href="http://compancommand.3dn.ru/literatura/glava-01.doc"> Боевой устав Сухопутных войск. Часть третья. ВЗВОД, ОТДЕЛЕНИЕ, ТАНК. Глава 1.</</a></p>

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

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

Серия сообщений "сайт своими руками":
Часть 1 - Делаем сайт. Урок 6
Часть 2 - 4 Урок. Название и структура сайта