Пособие для чайников
Итак, вас можно поздравить с открытием собственного сайта в Интернете на хостинге MyLivePage! И все бы хорошо, но в силу особенностей хостинга и общего для всех сайтов движка пользователям предоставлено не очень много возможностей по изменению дизайна сайта. И поэтому получается, что большинство сайтов похожи друг на друга как близнецы. Ведь очень многие используют одни и те же готовые скины, а их совсем мало. В то же время, пользователям предоставлена возможность изменить дизайн сайта, изменив его шаблон. Проблема только в том, что начинающим сайтовладельцам это сделать немного затруднительно так как нет достаточно простого руководства или документации. Можно, конечно, изучить строение шаблона, его HTML-код, принципы построения CSS (каскадных таблиц стилей) и отредактировать шаблон, применив полученные знания. Вот только учить все это долго, а хочется придать сайту немного индивидуальности уже прямо сейчас :) Для помощи в таком случае я и составил это текст. Здесь вкратце описаны простейшие возможности по изменению внешнего вида сайта с помощью настройки шаблона.
В работе с шаблоном всего лишь небольшое структуры таблиц и изменение цветовой гаммы может привести к значительному изменению общего внешнего вида. Вот этим мы и займемся. Прежде всего, залогиньтесь на свой сайт и выберите в меню "Создать шаблон моего сайта". Вы увидите две составляющие дизайна вашего сайта - Текст шаблона и Текст CSS. Текст шаблона определяет структуру расположения блоков сайта. Раскладку блоков вы можете посмотреть здесь, особо добавить к этому нечего. Ну разве что, вы захотите изменить трехколоночную раскладку блоков на двух- или четырех-колоночную. Для этого вам придется изучить построение таблиц, например, по пособию на сайте Постройка.ру
Для наших учебных целей мы пока остановимся на привнесении небольших косметических изменений в существующий каркас. То есть, каркас оставим как есть и просто раскрасим имеющийся шаблон. Мы будем менять в основном Текст CSS, который и определяет внешний вид сайта. Но сначала проведем подготовительные работы. Прежде всего :
- создайте рабочую папку
- скопируйте содержимое окна Текст шаблона и вставьте его блокнотом в текстовый файл 0shablon.txt сохраните в рабочей папке, аналогично сохраните содержимое окна Текст CSS в файл 0css.txt.
Что еще нам понадобится - файл болванки, на которой мы будем отрабатывать дизайн, ну не на живом же сайте в онлайне нам все это делать 
. Для болванки просто возьмем и сохраним локальную копию страницы с начальным шаблоном в рабочей папке и там же держать все наши работы, заготовки и резервные копии (да-да!). Ну и, конечно же, нужен инструмент для правки страницы, так называемый HTML редактор. Если у вас уже есть такой - хорошо. Если нет, то для наших целей я посоветую в качестве редактора использовать браузер Opera 9. Кроме того, что это прекрасный браузер, там есть очень удобный инструмент для мелких правок. Откройте в нем вашу страницу, сохраните в файл в рабочей папке и откройте его. Теперь выберите в меню View - Source или нажмите Ctrl-F3 и вы увидите во второй вкладке код вашей страницы. Обратите внимание - все что находится между тэгами это и есть стиль вашей страницы, или CSS. Внесите в него необходимые изменения и нажмите кнопку Save, после чего перейдите на вкладку страницы и вы увидите как сработали внесенные изменения. По окончании работы с CSS вам нужно скопировать содержимое CSS этой локальной копии (то, что между тэгами ) и заменить им содержимое CSS в шаблоне. После замены CSS шаблона ваш сайт приобретет точно такой же вид, как и локальная копия.
Ну, давайте начнем работать. Посмотрите на снимок страницы, который я приготовил -
На нем вы видите сайт с задействованным шаблоном и мои желтые пометки на которых обозначены классы CSS, описывающие рядом лежащие структуры. Для примера описания взгляните на элементы, описанные классом .InnerHead , на картинке вы видите место, где он влияет, а в Тексте CSS вы видите как он описан.
.InnerHead {
BACKGROUND-COLOR:#E4DEBE;
COLOR: #000000;
}
Параметр BACKGROUND-COLOR: устанавливает цвет фона строки в значение #E4DEBE а параметр COLOR: #000000 описывает цвет шрифта (черный)
Аналогично и в описаниях других классов эти параметры зададут цвета фона и шрифта. Если вы опишите в классе другие параметры, то они также будут влиять на вид описываемого элемента. Кстати, класс в CSS обозначается словом, начинающимся с точки, а описание параметров класса находится между фигурными скобками. Теперь, изменив соответствующие значения описанных параметров класса, вы можете изменить цвета этой строчки. Аналогичным образом вы можете изменить и значения других элементов.
А вот эдесь самое время сделать лирическое отступление о выборе цветовой гаммы. Нисколько не сомневаясь в вашем вкусе, я все же отмечу, что существуют определенные правила выбора цветов и правила совместимости цветов. Этими серьезнейшими вещами занимаются обычно дизайнеры, но ведь вы сам себе дизайнер и покрасите все своими руками. Однако, если получится так, что ваш вкус не совпадет со вкусом ваших посетителей, вы рискуете остаться на своем сайте в гордом одиночестве, просто потому, что неприятная гамма цветов отталкивает людей с порога. И даже будь на сайте самая необходимая мне информация, я лично не смогу ее читать, если из глаз текут слезы. Есть уже ставший классическим пример сайта с отталкивающим дизайном , так вот - не делайте так!
А как же делать? спросите вы ... не учить же теперь всю дизайнерскую науку ...
Нет, это необязательно. Вы можете воспользоваться какими-либо готовыми разработками цветовой гаммы. Например, взгляните на разработки студии веб-дизайна "Антула", из нескольких десятков вариантов вполне возможно выбрать подходящий именно вам. Теперь остается только применить цвета выбранного варианта и для этого нам понадобится так называемая "пипетка". С ее помощью мы сможем получить коды цветов. Пипетку берем здесь, запускаем, кликаем на собс-но пипетку и подводим к нужному участку картинки. В окошке получаем код цвета, копируем его и вставляем в свой CSS. Просто, не так ли? Обратите внимание, коды цветов мы будем писать в шестнадцатиричном виде -
#000000; - этот код обозначает черный цвет. Точка с запятой обозначает конец описания параметра, ее надо ставить после каждого параметра в классе CSS (кроме последнего, да и там он не помешает), не забывайте об этом.
#FFFFFF; - а этот - белый. Обозначения цветов здесь приняты так : первая пара символов после решетки обозначает количество красного цвета (red = #FF0000;), вторая - зеленого (green = #00FF00;) и третья - синего (blue = #0000FF;), таким образом получаем код трехцветной системы. Смешав краски на палитре в некоторой пропорции, мы получим нужный цвет. В принципе, если вы сможете ограничиться использованием палитры из 256 цветов, то можно обойтись без цифрового кодирования, называя цвета именами. Тогда вместо обозначения #FF0000; можно написать просто red;.
Итак, немного подумав, я остановил свой выбор на следующих цветах :
| #63CFFF |
| #CEEFFF |
| #FFFBE7 |
| #F7F7DE |
| #FFFBFF |
| #E7E7FF |
| #ADEFEF |
Ну а теперь перейдем к делу, т.е. к нашему CSS. При подробном рассмотрении обнаруживается, что часть упомянутых классов не расписана, а часть вообще не упомянута. Но это не страшно, шаблон это довольно гибкая штука. Чего не хватает, дополним сами. Начнем с верхней строки. Находящееся в ней горизонтальное меню описывается классом .top_menu , но в CSS этот класс даже не упомянут. Придется его расписать. Для этого допишем в конце (почему в конце? да просто чтобы не запутаться и знать где наше творение, а где казенная форма) нашего CSS аналогичную классу .InnerHead запись, только поменяем там цвет фона на выбранный:
/* это класс верхней строчки */
.top_menu {
BACKGROUND-COLOR:#E4DEBE;
COLOR: #000000;
}Здесь следует отметить, что запись о цвете текста COLOR в данном меню не сработает, поскольку в нем текста не будет, а будут линки. А их цвет описывается особыми правилами.
Для себя я сделал пометку о том, что /* это класс верхней строчки */ и разместил ее между символами /* и */ чтобы все ( в основном, браузеры) поняли что это комментарий и его обрабатывать не надо.
Теперь область, подчиненная описанию top_menu будет отображаться на фоне указанного цвета. Сохраняем, просматриваем и упссс... оказывается, фон действует только под буквами а хотелось, чтобы фон приобрела вся строка. Очень просто - надо расширить область действия класса .top_menu на всю ячейку присвоением класса ячейке td (table data). Ищем в коде страницы это меню и находим его недалеко от верха страницы (логично, правда?) и видим такой код
<td><a class="top_menu" ... >здесь берем запись о присвоении класса class="top_menu" и вставляем его после td. Получаем вот такую запись :
<td class="top_menu"><a class="top_menu" target="_top" >
сохраняем и вуаля! теперь вся строчка с верхним меню приобрела красивый фон. Теперь надо эту же запись о классе внести в наш шаблон, ищем в шаблоне описание верхней строки
<td> @MLP_TOP_MENU@ </td>и добавляем туда класс
<td class="top_menu"> @MLP_TOP_MENU@ </td>Однако, это еще не все. Видите в коде страницы повторяющуюся запись a class="top_menu"? Она указывает то, что линки в меню должны отображаться особым способом, описанным в классе .top_menu, а этот способ там не описан, поэтому линки будут отображаться цветами по умолчанию. Если хотите задать для них свой, особенный цвет - вникайте сами в правила для линков и прописывайте их как вам угодно. Например, чтобы линк отображался зеленым цветом, надо добавить его описание A:link {color: green;} но если уж взялись, то надо расписать подробно цвета всех линков. Просто допишите в CSS описание поведения линков:
A:link {
text-decoration: none /* Убирает подчеркивание для ссылок */;
color: green; /* Цвет ссылки */
}
A:visited { text-decoration: none } /* это параметры посещенной ссылки */
A:active { text-decoration: none;
color: yellow; }
A:hover {
text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */
color: red; /* Цвет ссылки при наведении курсора*/
}
Вот в общих чертах и вся методика работы с шаблоном. Для того, чтобы задать свой стиль оформления, надо расписать свойства этого стиля в классе CSS и затем указать где именно этот класс надо применить.
Пользуясь этим методом, идем ниже. Здесь у нас есть строка и ячейки с аватаром - @MLP_PAGE_TOP_LEFT@ , с заголовком - @MLP_PAGE_TOP_CENTER_TITLE и пустая. Теперь смотрим в код страницы и ищем заданный для этих элементов класс ... не находим. Тогда смотрим в шаблон и ... снова не находим. Очень хорошо, меньше ограничений для фантазии, изобретем сами :) Можно покрасить строку как попугая, каждой ячейке td дать свой класс. А можно покрасить сразу всю строку, присвоением класса элементу tr (table row) и прописыванием в классе нужных свойств, пожалуй, так мы и поступим. Для этого, в код страницы там, где описывается эта строка
<table border="1" width="100%"> <tr valign="top" class="toprow"> <td width="20%"> <center>тут почикано неинтересное</center> </td> <td width="60%"> <b>Форум</b><br> <p>Это мой форум. Вы можете создавать темы и участвовать в их обсуждении. </p> </td> <td width="20%"> </td> </tr> </table>в параметр
<tr valign="top">впишем имя класса, например .toprow
<tr valign="top" class="toprow">сохраняем. Теперь в CSS надо расписать свойства этого класса. Добавляем выше конца CSS (т.е. выше части ) запись о новом классе toprow и задаем ему желаемые цвета фона и шрифта.
/* это строка с аватаром */
.toprow {
BACKGROUND-COLOR:#E4DEBE;
COLOR: #000000;
}
Кстати, если вам нечего положить в пустую ячейку справа в конце, то ее можно удалить, стерев строки кода
</td> <td width="20%"> </td>Только не забудьте при этом удаленные 20% ширины добавить ко второй ячейке - замените там 60% на 80% (и в шаблоне тоже не забывайте параллельно вносить изменения). Проверяем как эта строка выглядит ... отлично. Теперь эти изменения надо занести в соответствующие части шаблона. Открываем шаблон 1shablon.txt, находим нужный блок
<table width="100%" border=1> <tr valign="top"> <td width="20%"> @MLP_PAGE_TOP_LEFT @ </td> <td width="60%"> <b>@MLP_PAGE_TOP_CENTER_TITLE @</b></br> @MLP_PAGE_TOP_CENTER_CONTENT @ </td> <td width="20%"> </td> </tr> </table>и добавляем там уже не новый класс class="toprow"
<tr valign="top" class="toprow">Аналогично, в файл 1css.txt добавляем наш класс
/* это строка с аватаром */
.toprow {
BACKGROUND-COLOR:#E4DEBE;
COLOR: #000000;
}
Ну вот, теперь вы можете продвигаться дальше самостоятельно. Все необходимое у вас есть, и методика и инструменты. Смотрите на страницу, смотрите на ее снимок, смотрите на ее код и меняете его как хотите. Затем проверяете, вносите изменения в файлы шаблонов, когда все закончено - переносите ваши шаблоны на сайт (простым переносом содержимого ваших файлов 1shablon.txt и 1css.txt в соответствующие поля страницы "Создать шаблон моего сайта") и тщательно проверяете еще раз. Если все получилось - кричим Уррряяя!!! и зовем друзей полюбоваться на шедевр :) Ну а если нет - ищем ошибки и исправляем.
З.Ы.
Эксперименты по описанной методике я проводил, разумеется, не на своем сайте, у себя я поменял немного больше 
Результаты изменения дизайна именно по описанной методике вы можете посмотреть на сайте моего друга - http://comp.mylivepage.com/. И еще есть несколько сайтов с переделанным шаблоном, где можно много чему поучиться, непременно загляните к talisman, b109, 5nizza.
-----------------
Добавлено.
Посмотрите на строчку
* @ MLP_NAVIGATION_MENU_ITEM_CONTENT @
Видите в начале звездочку? Это та самая, которая будет видна в меню слева от каждого пункта. В моем меню вместо звездочки стоит знак § Вместо нее можно вставить картинку например, у ru стоит картинка 
Себе можете поставить другой символ псевдографики или любую картинку, загрузив ее в свою папку картинок и вставив линк на нее вместо звездочки :
<IMG src="http://image010.mylivepage.com/chunk10/30129/13/link.gif" alt=">"</IMG>
-----------------
Другие ресурсы о переделке местного лизайна:
Форум у 5nizza
Статья Conver-a
--------------------
Конструктивную критику пишите в комментах. Ну и конечно же, рассказывайте о своих находках и трюках