FAQ Частые Вопросы и ответы по ucoz - Уникальные шаблоны и дизайн - веб дизайн

Главная » FAQ » FAQ по сайту


я выложил генератор для этого.. для всех групп смотри тут
генератор цвета групп


генератор цвета стилей

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

1. Панель управления >> Пользователи;
2. Кнопка вверху "поиск", а также "полный список";
3. Найдя нужного вам пользователя нажимаете на иконку "Редактировать" <img src="http://src.ucoz.ru/img/ma/edt.gif" alt="редактировать">;
4. Выбираете новую группу пользователя.
5. Чтобы изменения переноса вступили в силу, пользователю нужно перелогиниться (выйти и зайти).

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

Цвета групп

Если вы используете стандартные таблицы стилей то Админы -красные, Модераторы - синие, Проверенные -зелёные и задаётся это следующими строками:

Code

/* User Group Marks */     
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:blue;}     
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:red;}     
a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:green;}     
/* ---------------- */

Группа Пользователи здесь не указывается и её цвет задаётся первыми строками таблицы стилей, то есть это цвет общих ссылок. Если вы хотите ввести для Пользователей свой цвет, то добавляете строчку для groupUser.

Code
/* User Group Marks */     
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:blue;}     
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:red;}     
a.groupUser:link,a.groupUser:visited,a.groupUser:hover {color:#A8C9E2;}     
a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:green;}     
/* ---------------- */

Каждая новая добавленная вами группа получает обозначение groupOther(1-10), так как добавить можно 10 групп. Номер группы в этом случае очерёдность добавления.

Code
/* User Group Marks */     
a.groupModer:link,a.groupModer:visited,a.groupMo der:hover {color:blue;}     
a.groupAdmin:link,a.groupAdmin:visited,a.groupA dmin:hover {color:red;}     
a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:green;}     
a.groupOther1:link,a.groupOther1:visited,a.groupOther1:hover {color:Yellow;}     
a.groupOther2:link,a.groupOther2:visited,a.groupOther2:hover {color:DarkCyan;}     
и т.д. аналогично     
/* ---------------- */

Цвет можно назначать как названием на английском так и шестнадцатиричным кодом RGB.

Может ли группа "Пользователи" использоват html-коды?
Нет, такая возможность есть только для групп, в которые администратор САМ перемещает пользователей. Иначе вам быстро взломают сайт.

Как сделать, чтобы имена отображались жирным шрифтом в "кто онлайн на сайте и форуме"?

Code
/* User Group Marks */     
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:blue;[b]font-weight:bold;[/b]}     
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:#bf0577;font-weight:bold;}

Цвет прописан, результата - нет

Я создал группу VIP и прописал код:

Code
a.groupOther1:link,a.groupOther1:visited,a.grou pOther1:hover {color:Yellow;}

но результата нет. Что я не так сделал?
Варианта два:
1. Ваша VIP-группа не Other1
2. В шаблоне ссылка не на тот файл стилей, который вы меняли.
Я создал группу VIP и поставил цвет:
Code
a.groupVIP:link,a.groupVIP:visited,a.grou pVIP:hover {color:DarkCyan;}

Однако он не выводится.
Должно быть так:
Code
a.groupOther1:link,a.groupOther1:visited,a.groupOther1:hover {color:DarkCyan;}

Блокирование пользователя

Как сделать, чтобы пользователь больше никогда не смог зайти на сайт?

На главной странице после </head> поставить скрипт:

Code
<?if($USERNAME$='Имя нарушителя')?><input type="button" value="Разбаниться" onClick="window.close()">$BODY$</?endif?>

Но здесь есть один минус - если пользователь вылогинился, то он сможет просто перерегистрироваться...

Вместо имени пользователя можно поставить бан-группу:

Code
<input type="button" value="Разбаниться" onClick="window.close()">$BODY$</?endif?>

ID - номер группы

или IP:

Code
<input type="button" value="Разбаниться" onClick="window.close()">$BODY$</?endif?>

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

Цвета ников в сообщениях

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

Идём в шаблон "Вид материалов" форума, находим строчку:

Code
<tr><td width="23%" class="postTdTop" align="center"><a class="postUser" href="javascript://" onClick="emoticon('[b]$USERNAME$[/b],');return false;">$USERNAME$</a></td>

заменяем на:

Code
<tr><td width="23%" class="postTdTop" align="center"><a class="postUser$GROUP_ID$" href="javascript://" onClick="emoticon('[b]$USERNAME$[/b],');return false;"><span class="forum_nik$UID$">$USERNAME$</span></a></td>

cохраняем шаблон, дальше идём в "Таблицу стилей (CSS)" и вписываем там следующие строчки:

Code
a.postUser1 {color:#000000;} - цвет группы 1     
a.postUser2 {color:#00FF00;} - цвет группы 2     
a.postUser3 {color:#0000FF;} - цвет группы 3     
a.postUser4 {color:#FF0000;} - цвет группы 4

Ну и так далее для каждой группы (если у Вас больше четырёх).

Дальше ставим определённый цвет ника определённому пользователю, там же, в CSS пишем:

Code
.forum_nik1 {color:#F6F6F6;} - цвет ника для пользователя с ID=1     
.forum_nik6 {color:#F7F7F7;} - цвет ника для пользователя с ID=6     
.forum_nik7 {color:#F9F9F9;} - цвет ника для пользователя с ID=7     
.forum_nik4 {color:#A6A6A6;} - цвет ника для пользователя с ID=4

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

Прочие обозначения цветов пользователей.

На Главной форума:
1. Приветствуем нового участника - class="lastUserLink" (если не задан, то имеет цвет общей ссылки)
2. Поздравляем с Днем Рождения! - class="userBirthdayLink" (аналогично)
3. Модератор форума - class="forumModer" (аналогично)
4. Автор темы - class="lastPostUserLink" (аналогично)
Внутри форума на странице разделов и форумов п.п. 3 и 4 те же классы.

На странице с сообщениями:
1. Модератор форума - тот же class="forumModer"
2. Ник пользователя - class="postUser"
3. Название группы - class="postUserGroup" ('то не ссылка, а простой текст и класс распространяется на оба слова - например, группа: Модераторы)

На сайте названия групп также определяются классами groupModer, groupAdmin, groupUser и т.д.
Если вы хотите внизу форума сделать расшифровку цифрового обозначения групп, то поместите в шаблоне внизу под $BODY$ следующий код

Code
<font color="Red">Администратор</font> <font color="Blue">Модератор</font> <font color="#948549">Пользователь</font> <font color="Green">Проверенный</font> <font color="DarkCyan">Ваша_группа1     
</font><font color="#9966FF">Ваша_группа2</font>

Администратор Модератор  Пользователь   Проверенный  Ваша_группа1

Ваша_группа2

(цвета в примере случайные)

И самое главное - меняя цвета групп озаботьтесь проверкой, указан ли в шаблоне страницы адрес именно того файла в который вы вносите коррекции?
В шаблоне должна быть строчка:

Code
<link type="text/css" rel="StyleSheet" href="http://АДРЕС_ВАШЕГО_САЙТА/_st/my.css" />




этот скрипт на js старый называется он glossy
единственный его недостаток скожу по секрету то что он изменят и вес фото.. для нормальной работы вес картинки не должен привышать 30-40 кб.. иначе грузится долго,по тому что картинка веси если созранить ее в 2-3 раза больше и за этих прибамбасов

вот картинка оригинал весит 33.56 КБ

а вот что с неи делает скрипт и весит 120 кб

для создания этого вам нужно вставить на странице в вот это js скрипт

Code
<script type="text/javascript" src="http://kinostop.ucoz.ru/desing/js/glossy.js"></script>

а в вид новостей вставить картинку в класс
Code
<img class="glossy" src="$IMG_URL1$" vspace="5" width="180" align="left" border="1" hspace="10">

где width="180" ширина картинки


Ну у нас например вот как

Code
<?if($OTHER2$)?><?if($GROUP_ID$="0")?><a href="javascript://" onclick="openLayerB('Download',0,'/Download.xml','Ошибка',500,100,'1','','',1,'justify'); return false;" title="Скачать удаленно $TITLE$"><img alt="" src="ссылка на картинку.png" align="" border="0"></a> <?else?><a href="$HOME_PAGE_LINK$url/?links=$OTHER2$" target="_blank"><img alt="" src="ссылка на картинку.png" align="" border="0"></a> <?endif?><?endif?>

<?if($OTHER4$)?><?if($GROUP_ID$="0")?><a href="javascript://" onclick="openLayerB('Download',0,'/Download.xml','Ошибка',500,100,'1','','',1,'justify'); return false;" title="Скачать с зеркала $TITLE$"><img alt="" src="ссылка на картинку.png" align="" border="0"></a> <?else?><a href="$OTHER4$" target="_blank"><img alt="" src="ссылка на картинку.png" align="" border="0"></a> <?endif?><?endif?>

гле $OTHER2$ дополнительное поле №2
и выглядит вот так вот


Для простых изменений достаточно знать теги стилей.Смотрим что имеем на примере скриншота.

Пример CSS календаря (201 дизайн)

Code

/* News/Blog Calendar Style */
.calMonth {text-align:right;font-weight:bold;}
.calWday {color:#FFFFFF; border:1px solid #42AE3C; background:#65C860; width:18px;}
.calWdaySe {color:#FFFFFF; border:1px solid #42AE3C; background:#65C860; width:18px; font-weight:bold;}
.calWdaySu {color:#FFFFFF; border:1px solid #42AE3C; background:#5A84E4; width:18px; font-weight:bold;}
.calMday {background:#FFFFFF; border:1px solid #42AE3C;}
.calMdayA {background:#EEEEEE; border:1px solid #42AE3C; font-weight:bold; width:18px;}
.calMdayIs {background:#FF8C2F; border:1px solid #42AE3C; font-weight:bold; width:18px;}
.calMdayIsA {background:#FF8C2F; border:1px solid #42AE3C; font-weight:bold; width:18px;}
a.calMonthLink:link {text-decoration:none; color:#FC7200;}
a.calMonthLink:visited {text-decoration:none; color:#FC7200;}
a.calMonthLink:hover {text-decoration:underline; color:#5A84E4;}
a.calMonthLink:active {text-decoration:underline; color:#5A84E4;}
a.calMdayLink:link {text-decoration:none; color:#FFFFFF;}
a.calMdayLink:visited {text-decoration:none; color:#FFFFFF;}
a.calMdayLink:hover {text-decoration:underline; color:#FFFFFF;}
a.calMdayLink:active {text-decoration:underline; color:#FFFFFF;}
/* ------------------------ */

Таблица с курсорами для сайтов

для картинок где в место cursor.cur вставляем свою иконку курсора то есть ссылку на нее
Code
style="cursor: url(cursor.cur), text;"

Это для простого курсора создаем стиль текста help заменяем на любои из таьлицы нужный курсор

Code
style="cursor: help;"

как вставлять стиль в текст..

Code
<div style="cursor: help;"> сам текст</div>
или так в таблицу
Code
<td style="cursor: text;" align="center">сам текст</td>
или так
Code
<span style="cursor: text;">сам текст</span>

Применять можно для картинок также кликабельных
Автор материала ucozon.ru

Таблицы

Если размеры ячеек таблиц изначально не заданы, они "подстраиваются” под объем содержимого ячеек.
По умолчанию границы таблиц не отображаются (border=0), чтоб назначить минимальную окантовку, нужно задать border=1.


Столбец 1 Столбец 2 Столбец 3


<table border=1>
<td> Столбец 1 </td>
<td> Столбец 2 </td>
<td> Столбец 3 </td>
</table>


Первая ячейка 1-й строкиВторая ячейка 1-й строки
Первая ячейка 2-й строкиВторая ячейка 2-й строки


<table border=1>
<tr>
<td>Первая ячейка 1-й строки</td>
<td>Вторая ячейка 1-й строки</td>
</tr>
<tr>
<td>Первая ячейка 2-й строки</td>
<td>Вторая ячейка 2-й строки</td>
</tr>
</table>


Рамки таблиц рельефно-двойные. так как по умолчанию атрибут cellspacing=2
Зададим cellspacing=0
Заголовок 1Заголовок 2
Содержание 1Содержание 2


<table border=1 cellpadding=8 cellspacing=0 bordercolor=black>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Содержание 1</td>
<td>Содержание 2</td>
</tr>
</table>


ГородНаселение
Москва10.000.000


<table cellpadding="5" cellspacing="5">
<tr>
<th bgcolor="#CCCCCC">Город</th>
<th bgcolor="#CCCCCC">Население</th>
</tr>
<tr>
<td>Москва</td>
<td>10.000.000</td>
</tr>
</table>



Для плавного обтекания таблицы текстом:
ГородНаселение
Москва10.000.000

Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam…

в первый тег table нужно добавить
style="float: left; margin: 0 5px 2px 0;"
для аналогичного обтекания текстом справа:
style="float: right; margin: 0 0 2px 5px;"


Поместить несколько таблиц в ряд, например:
ГородНаселение
Москва10.000.000
ГородНаселение
Минск2.000.000
ГородНаселение
Киев2.000.000

Код:

<table>
<td> Таблица 1 </td>
<td> Таблица 2 </td>
<td> Таблица 3 </td>
</table>


ГородНаселение
Москва10.000.000
Минск2.000.000
Киев2.000.000


<table cellspacing="5" cellpadding="5">
<tr bgcolor="#aaaaff">
<th>Город</th><th>Население</th>
</tr>
<tr bgcolor="#dddddd">
<td>Москва</td><td>10.000.000</td>
</tr>
<tr bgcolor="#dddddd">
<td>Минск</td><td>2.000.000</td>
</tr>
<tr bgcolor="#dddddd">
<td>Киев</td><td>2.000.000</td>
</tr>
</table>


Заголовок 1Заголовок 2Заголовок 3
РЯД 2РЯД 2РЯД 2
РЯД 3РЯД 3РЯД 3
РЯД 4РЯД 4РЯД 4


<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</th>
<tr>
<td>РЯД 2</td>
<td>РЯД 2</td>
<td>РЯД 2</td>
</tr>
<tr>
<td>РЯД 3</td>
<td>РЯД 3</td>
<td>РЯД 3</td>
</tr>
<tr>
<td>РЯД 4</td>
<td>РЯД 4</td>
<td>РЯД 4</td>
</tr>
</table>


Цветная ячейка 1Цветная ячейка 2
Цветная ячейка 3Цветная ячейка 4


<table border="8">
<tr>
<td bgcolor="#00CCFF">Цветная ячейка 1</td>
<td bgcolor="#CC00FF">Цветная ячейка 2</td>
</tr>
<tr>
<td bgcolor="#00FF00">Цветная ячейка 3</td>
<td bgcolor="#FFFF00">Цветная ячейка 4</td>
</tr>
</table>


Цветная ячейка 1Цветная ячейка 2
Цветная ячейка 3Цветная ячейка 4


<table border="0" cellspacing="5">
<tr>
<td bgcolor="#00CCFF">Цветная ячейка 1</td>
<td bgcolor="#CC00FF">Цветная ячейка 2</td>
</tr>
<tr>
<td bgcolor="#00FF00">Цветная ячейка 3</td>
<td bgcolor="#FFFF00">Цветная ячейка 4</td>
</tr>
</table>


БлогсервисыЖЖЛи.ру
ДиариЯ.ру


<table border=5 bordercolor=#FAD0D0 cellpadding=7 width=40%>
<tr>
<td rowspan=2 align=center><b>Блогсервисы</b></td>
<td>ЖЖ</td>
<td>Ли.ру</td>
</tr>
<tr>
<td>Диари</td>
<td>Я.ру</td>
</tr>
</table>


Блогсервисы
ЖЖЛи.руДиариЯ.ру


<table border=5 bordercolor=99CCFF cellpadding=7 width=40%>
<tr>
<td colspan=4 align=center><b>Блогсервисы</b></td>
</tr>
<tr>
<td>ЖЖ</td>
<td>Ли.ру</td>
<td>Диари</td>
<td>Я.ру</td>
</tr>
</table>


Табличным кодом можно задать цветной фон поста:

Теги… Все эти кавычечки, буквочки и скобочки - как узоры следов на снегу. Сначала - неизвестная азбука, а потом, когда вникнешь - книга, прочтение которой не вызывает затруднений. Упоительнейшее занятие - пишешь слово, затем оборачиваешь его замысловатыми иероглифами, кутаешь в слои черно-белых символов и получаешь восхитительнейший результат. © singita


<table bgcolor="teal" cellpadding="5">
<tr>
<td><font color="white"> TEXT </font></td>
</tr>
</table>


Можно фоном поста сделать картинку:

Спокойной ночи, дорогие друзья мои…


<table cellpadding=30>
<tr>
<td background=URL картинки><font color=white>TEXT</font></td>
</tr>
</table>

Параметр cellpadding задает оступ текста от границ картинки. Если объем текста превышает размеры картинки, она будет автоматически продублирована нужное число раз (в примере выше 2 раза)


Таблицей можно сделать рамку картинки:

ЗАКАТ


<center><table border="20" bgcolor="brown">
<caption align=bottom>ВАША ПОДПИСЬ</caption>
<tr><td>
<table border="12" bgcolor="brown">
<tr><td><img src=АДРЕС КАРТИНКИ></td></tr>
</table></td></tr>
</table></center>

Размер картинки любой - рамка сама "подгонится”


Быстро наложить текст на картинку без графических редакторов:

Закат на даче


<table border="0" cellpadding="0" cellspasing="0">
<tr>
<th width=.. height=.. background="URL КАРТИНКИ" valign="bottom">
<font color="yellow">ВАШ ТЕКСТ</font></th>
</tr>
</table>

В значения width и height вместо многоточий ставятся размеры картинки (их можно узнать из пункта "Свойства” вашей картинки)


Разделить пост на две части можно так:
 Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis …


<table width="100%" cellpadding="0" cellspacing="10" border="0">
<tr>
<td> TEXT1</td>
<td width="2" bgcolor="#000000"></td>
<td> TEXT2</td>
</tr>
</table>

В качестве разделителя служит пустой столбец
<td width="2" bgcolor="#000000"></td> , меняя width и bgcolor , меняем цвет и толщину разделителя


Делаем галереи картинок с помощью таблиц:
(здесь использованы кликабельные превьюшки. что и вам советую)
free image hostfree image
host
free image hostfree image
host
free image hostfree image
host

Ее код:

<table cellspacing=8>
<tr>
<td>картинка-один</td>
<td>картинка-два</td>
</tr>
<tr>
<td>картинка-три</td>
<td>картинка-четыре</td>
</tr>
<tr>
<td>картинка-пять</td>
<td>картинка-шесть</td>
</tr>
</table>

Или так:

free image hostfree image hostfree image
host
free image hostfree image hostfree image
host

Код:

<table cellspacing=8>
<tr>
<td>картинка-один</td>
<td>картинка-два</td>
<td>картинка-три </td>
</tr>
<tr>
<td>картинка-четыре</td>
<td>картинка-пять</td>
<td>картинка-шесть</td>
</tr>
</table>

Думаю, принцип понятен. Атрибут cellspacing=8 здесь задает расстояние между картинками, равное 8 пикселов


Линии Оформление саита и для этого типы линий и как их создавать

Линии можно применять, например, для того, чтобы делить пост на логические разделы, отделять друг от друга цитаты, мысли, афоризмы.
Замечу, что цветные линии отображаются на 100% корректно только в IE

Вот она, линия:


ее код:

Далее:

По умолчанию линия имеет толщину 2 пиксела и некоторую объемность.

Необъемная линия:










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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

оформленные в виде текстового абзаца:

Можно выпендриться как-нибудь эдак:

эдак:

эдак:

или эдак:

Эти линии представляют собой картинки (и их должны корректно отображать все браузеры)
Собраний таких картинок в сети сейчас пруд пруди.

Наберите в поисковике divider - и вперед
Если нужно прижать линию к левой кромке записи, вместо align=center ставьте align=left
к правой - align=right


несколько типов переадресации.
1. Простой location.href:

Ставим куда душа пожелает:

Code
<script type="text/javascript">document.location.href='http://1x.do.am'</script>

http://1x.do.am - ссылка на сайт на который переходить.

2. Метод Http-Equiv:

Ставим в <head>:

Code
<meta http-equiv="refresh" content="1; url=http://1x.do.am">

1 - задержка в секундах
http://1x.do.am - ссылка на сайт на который переходить.

3. location.replace

Code
<script type="text/javascript">location.replace('http://1x.do.am')</script>

http://1x.do.am - ссылка на сайт на который переходить.

4. Универсальной решение
1 и 2 способ работают на Javascript, у некоторых он может быть выключен, для этого есть универсальное решение:

Quote

Code
<script type="text/javascript">location.replace('http://1x.do.am')</script><noscript><meta http-equiv="refresh" content="1; url=http://ucoz.com"></noscript>

Если у посетителя включен Javascript, его перенаправляет 3 способом, если Javascript отключен, его перенаправляет 2 способом с задержкой в 1 секунду.

5. Переадресация на Javascript с задержкой

Code
<script type="text/javascript">setTimeout("location.replace('http://1x.do.am')", 1000)</script>

http://1x.do.am - ссылка на сайт на который переходить.
1000 - задержка в милисекундах.

Что такое <head>  </head> задаются многий новички этим вопросом, если сказать простыми словами в HTML языке это теги в которые заключаются все библиотеки и стили необходимые для работы данной страницы, так же скрипты тоже для этой же страницы.
  Находится этот тег в верху кода после тега <html> и всегда находится там, иначе и не может быть, Смотрите на скрине фото

<html>
   <head>
Сюда стили и скрипты
  </head>
            <body>
Сюда сам контекст страницы
           </body>
</html>

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

Для этого можно воспользоваться простым способом через onmouseover
То есть существуют 2 картинки которые одинаковых размеров и при наведение плавная смена на другую с эффектом hover
используем ниже приведенный код
Code
<a href="ссылка пример/forum/" onmouseover="document.mypic.src='/img1.png'" onmouseout="document.mypic.src='/img2.jpg'"><IMG SRC="/img2.jpg" NAME=mypic BORDER=0></a>

где:
ссылка пример/forum/ -ссылка самой кнопки
/img1.png ссылка на картинку №1
/img2.png ссылка на картинку №2
Вот в принципе и все, для выравнивания можно добавить стиль , но это уже в другой раз


Теперь другой способ уже с помощью стиля
работает вот таким способом

Создаем 2 картинки a и b разных цветов
a http://1x.do.am/TV/img/1a.gif
b http://1x.do.am/TV/img/1b.gif
далее
этот код скрипта вставляем между head ...... /head

Code

<script language="Java Script">
image1()=newImage;
image1.src="1a.gif";
image2()=newImage;
image2.src="1b.gif";
function change(x,y){
if(document.images)
document.images[x].src=eval(y+".src");}
</script>

а это вставляем в то место где должна быть картинка на той же странице
Code
<img src="КАРТИНКА 1a.gif" alt="Картинка" onmouseover="this.src='КАРТИНКА 1b.gif';" onmouseout="this.src='КАРТИНКА 1a.gif';"/>

обратите внимание на то что если вставляем формат jpg то всё изменяем на формат jpg

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

 Простая верстка div 3 колонки, хэдэр и футер
Простая верстка div 3 колонки, хэдэр и футер



2 колонки (вид блога) и хэдэр
2 колонки div



2 колонки (вид блога) и хэдэр
2 колонки div верстка

Многие спрашивают как создать такой вид материалов на странице материала и комментария.
Как сделать картинку с обтеканием текста вокруг ?

не чего сложного, создаем div массив на картинку и текст отдельный со стилями для картинки отходом от края в 8 pxс указанием что это блок display: block;
Сам текст $MESSAGE$ так же вставляем и прилагаем стиль с отступом от картинки в 8px,
копируем код и заменяем на свое тег $OTHER1$ - ссылка на картинку
Code
<div style="margin: 0pt 8px 0pt 0pt; text-align: left; float: left; display: block;">
<img src="$OTHER1$" width="130px" alt="$TITLE$">
</div>

<div style="text-align: left; display: block; margin-right: 8px;">
$MESSAGE$
</div>

Все готово, смотрим результат и редактируем расстояния

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

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

3. Заходим в панель управления сайтом (http://www.ваше_название_сайта.ucoz.ru/admin): Главная » Управление дизайном » Конструктор шаблонов.

4. В скачанном архиве убеждаемся, что есть: tmpl.txt (основной код шаблона или просто название "код шаблона"), styles.css (таблица стилей-CSS которую нужно заливать и проверять на все ссылки картинок что бы были рабочими в ней), и папка img (где находятся все использованные рисунки шаблона, желательно смотреть в шаблоне ссылки на картинку, по умолчанию название папки такое же как вложено в шаблоне.).

5. Открываем tmpl.txt (например с помощью блокнота), копируем весь текст (ctr+A, ctr+C), и вставляем в конструкторе шаблонов.

6. В панели управления заходим: Главная » Управление дизайном » Редактирование шаблонов » Таблица стилей (CSS). Открываем styles.css (например с помощью блокнота), копируем весь текст (ctr+A, ctr+C), и вставляем в открытом окне в панели управления.

7. Закачиваем с помощью: Главная » файловый менеджер; или с помощью FTP-менеджера, все рисунки, которые находятся в папке img! внимание что бы не создавать бардак на сайте необходимо определить 1 папку которая будет касаться дизайна сайта, всех его скриптов. не создавайте многочисленное число папок

8. Вот и все, теперь наслаждаемся, новым дизайном сайта!))

P.S. Если вы скачали какойто шаблон и там есть папка css, а в ней два файла, то эту папку надо тоже загружать в корень сайта


Вопрос заведения красивого почтового ящика вида @mysite.ru всё более и более актуализируется. И сейчас такую возможность предлагает реализовать Яндекс, а именно новые технологии Яндекс.Почты.

Приведу инструкция создания почтового ящика name@yousite.ru при помощи Яндекс.Почты. В процессе повествования я буду сопровождать текст скриншотами для лучшего восприятия материала. Весь процесс опишу по шагам:

Шаг 1. Зайдите на Доступно только для пользователейВ самом низу в специальное поле введите имя Вашего сайта (Ваше доменное имя), например, promultiki.ru, и нажмите Подключить домен:


На этой же страницы ниже появятся новые инструкции.

Шаг 2. Для подтверждения Вашего владения доменом в корневой каталог Вашего сайта загрузите указанный в приведённой инструкции файл:


После этого нажмите на Подключить домен.

Шаг 3. В Панели управления Вашего сайта войдите в раздел Перенос домена, а затем кликните по пункту Редактировать записи домена в РЕЖИМЕ ЭКСПЕРТА. Далее Вам нужно работать с частью открывшейся страницы, озаглавленной Изменяемые записи. Необходимо заполнить одну из пустых строк. Для этого в поле столбца Поддомен введите символ @; в выпадающем списке столбца Тип выберите MX; в поле столбца Значение введите 10 mx.yandex.ru. (точка в конце обязательна!):


Затем внизу страницы нажмите кнопку Сохранить.

Шаг 4. Теперь Вам остаётся лишь дождаться, когда изменения вступят в силу. Наберитесь терпения - на это может потребоваться до 6-и часов. Как только это произойдёт, на странице Доступно только для пользователей Яндекс.Почты Вы увидите зелёную надпись Домен подключён:


Теперь Вы можете непосредственно из интерфейсаДоступно только для пользователей создавать почтовые ящики. Обратите внимание, что на данный момент Яндекс.Почта позволяет создать до 100 почтовых ящиков в Вашем домене.

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

© Giryaev.com (Инструкция скопирована из блога)

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

На страницах, где будет использован данный скрипт (Можно в глобальный блок), вставляйте:

Code

<link id="dyncss" rel="stylesheet" type="text/css" href="">  
<script type="text/javascript">  
function setDynCSS(url) {  
if (!arguments.length) {  
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];  
if (!url) return '';  
}  
document.getElementById('dyncss').href = url;  
var d = new Date();  
d.setFullYear(d.getFullYear() + 1);  
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');  
return url;  
}  
setDynCSS();  
</script>

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

Code

<img style="cursor:pointer;" src="Ссылка на картинку 1" onclick="setDynCSS('Ссылка на стиль 1.css')">  
<img style="cursor:pointer;" src="Ссылка на картинку 1" onclick="setDynCSS('Ссылка на стиль 2.css')">

Используется следующим образом:
Включение BB-кодом:

Code
[audio] [/audio]

то есть введя

Code
[audio] http://top-wan.at.ua/Mp3/DJ_Next-Stop_it_in_my_life.mp3[/audio]

получаем:

Так же можно вставлять плеер с помощью JS-кода.
Что бы его получить можно воспользоваться Мультимедия - > Подключить аудио (mp3)
Либо Мультимедия - > Загрузить аудио (mp3) [там после загрузки напротив интересующего файла нажать JS-code]

Code
<script src="http://ucozon.ru/media/?auto=0;small=0;color=0055e9;loop=0;textoff=0;t=audio;f=http%3A%2F%2Ftop-wan.at.ua%2FMp3%2FDJ_Next-Stop_it_in_my_life.mp3" type="text/javascript"></script>

Его так же можно вставить в любое место сайта. При этом, в нем есть управляемые параметры (настройки), о которых ниже.

Code
auto=0;small=0;color=0055e9;loop=0;textoff=0

Значения выделенные жирным и можно поменять, с нуля на единицу. Тем самым их включив. Ну и color - указать цвет кода.
То есть, если в коде
auto=0 меняем на auto=1 - песня начинает проигрываться автоматом. Как это сделано в этом топике (аккуратней с этой функцией, думайте о тех у кого медленный интернет, платный трафик.

small=1 - выведит маленький преер из двух кнопок. Вот так вот:

loop=1 - файл будет проигрываться по кругу без отсановки (пока не нажать стоп)

textoff=1 - уберет текст (в пример выше текст DJ_Next-Stop_it_in_my_life.mp3, вот его и не будет)

color=0055e9 (управление цветом плеера) - вместо 0055e9 пишем код желаемого цвета. То есть после = вставляем код цвета. Коды можно узнать из таблиц, или в фотошопе нажав на цвет.
Пример. Берем код черного - 000000

Code
<script src="http://ucozon.ru/media/?auto=0;small=0;color=000000;loop=0;textoff=0;t=audio;f=http%3A%2F%2Ftop-wan.at.ua%2FMp3%2FDJ_Next-Stop_it_in_my_life.mp3" type="text/javascript"></script>


Вот несколько пользователей обращались с тем что бы изменить размер области вывода мини чата то есть сообщений, ну самый простой способ это сделать можно вот таким образом /Поискав в интернете что либо по этому поводу я не нашел, и решил использовать id имя для импортации размера.
Как изменить размеры мини чата ucoz
Установка проще простых,
копируем стиль и вставляем в таблицу стилей в самом верху

Code
#mchatIfm2 {height:600px !important;}
где 600 это высота в пикселях. Изменяем под свои размеры

У меня вирус на сайте
Как избавится от вируса на сайт

 

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

И как правило приходят к нам и помогите , спасите кричат как в аптеке  :)

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

2 Более сложней случай когда вредоносный код, скрипт спрятан в js файле , но мы его имя знаем и можем найти легко вскрывая все js файлы вашей страницы.

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

3 более сложный вариант это когда вы закачали файлик (обычно он не весит более чем 200кб) с вирусом в корень своего менеджера, и он творит рассылку вирусов пользователей

Как боротся с этим или как избавится от этого?
Не стоит паниковать, это всего лишь вредо-приносящий код который найти и удалить довольно легко.
  Мы знаем как называется вирус или ссылка его происхождения, или сайт который распространяет вирус замечен на вашем сайте, к примеру картинка с того сайта так же распознается как вирус.
Едим дальше мы имеем хотя бы 3 буквы из названия ссылки или файла вируса и первым делом на странице где он замечен в мазиле браузере нажимаем CTRL+U  Открывается страница с HTML кода всего кода дальше нажимаем CTRL+F внизу появится окно поиска, вводим название вируса или ссылки и нажимаем стрелки вверх или вниз и если подобие поиска найдено то вам покажет выделенным и вы сможете определить место нахождения кода который нужно удалить. Если вы не нашли, значить ваш вирус прячется в js файле этой же страницы  Не удаляя из первого действия что я писал выше мы в поисковой строке имеем название вируса, так теперь ищем визуально сами ссылки на файлы с расширением js и кликаем на них и переходим в них и так же  CTRL+F если нужно и ищем ваше название вируса или ссылки.
  Если и тут вы не нашли во всех js файлах то дальше вы должны искать все что закодировано кодировщиком скриптов к примеру, так как правило наши славные веб хакеры кодируют что бы не было видно ссылки ихнего подставного сайта, И при поиске что я вам описал выше в таком случае не найти, нужно раскодировать скрипт любым удобным для вас методом, к примеру у нас на сайте есть в меню веб инструменты там можно найти рас кодирование простых скриптов.

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

  Дальше как узнать можно название вируса, так это при помощи онлайн проверки url ссылок сервиса Доктор Веб

   
       
       
   



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

Автор: mdbaner
Сайт автора: ucozon.ru
Зарегистрирована статья с кодом HGWE49389d от 09.12.2010
Весь материал был создан из моего личного опыта и знанием элементарного.
Копировать и распространять данный материал запрещается.

Постоянно и за незнания HTML пользователи вопят что у них нет кнопок переключателей для страниц, я как обычно каждому пользователю на http://ucozon.ru постоянно пишу одно и тоже объяснение и что бы не писать создам тему что бы можно было быстро ответить на вопрос незнайки ) На странице не показывает кнопки переключения страниц...

1 для начала активируйте их в ПУ,

2 после проверьте есть ли в коде условная строка которая выводит кнопки:
Нижнии кнопки

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

верхний кнопки такие
Code
<?if($PAGE_SELECTOR$)?><div style="text-align:center;">$PAGE_SELECTOR$</div><?endif?>

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

Code
.pagesBlock1
.pagesBlock1
.pagesBlockuz1
.catPages1
.catPages2

и если в коде мы находим тип одного из стилей ищем в нем такую строчку обычно в конце
Code
{display:none !important;}
она предназначена для скрытие показа кнопок, удаляем его вместе со всем кодом что бы он не препятствовал показу кнопок, как правило это занимает 5-8 строчек кода.

4 Если не чего вам не помогло из выше написанного то вероятно у вас конфликт библиотек , то есть вы вставили какой то скрипт который конфликтует со скриптом стандарта.
Можно выйти из положения создав собственные кнопки на условиях, но это не выход из положения так как если количество страниц перевалит за десятки то кнопки все не вместятся в страничной строчки, Я уже делал не раз для заказчиков такие переключатели , и было дело вставлял и на нашем сайте ucozon.ru но потом разбирал конфликт моих экспериментов и вернул везде стандартные хорошие кнопки, такой метод самоделки: подход только для модулей где мало страниц.


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

Установка:
Заходим в вид материалов, и находим там $MESSAGE$ и заменяем его на условие кода

Code
<?if(len($MESSAGE$)>360)?><?substr($MESSAGE$,0,350)?> <a href="$ENTRY_URL$">Читать далее...</a><?else?>$MESSAGE$<?endif?>


>360 это если в новости текст привышает более 360 символов то срабатывает условие вывода только столько сколько указано тут ,0,350

Условие работает таким образом, если символов больше чем 360 то отображается всего 350 символов и надпись Читать далее... с ссылкой на новость.
Вы может сами настроить под количество символов отображение.
так же можно применить и к названию, или длина комментария в информере

тут если название материала привышает более 100 символов в месте с пробелами то сокращает до 99 сиволов

Code
<?if(len($TITLE$)>100)?><?substr($TITLE$,0,99)?><?else?>$TITLE$<?endif?>

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

Вот один из простых вариантов где используется только классс со стилем простым.
Первое мы задаем класс картинке таким образом:
Code
<img class="alignleft" src="$IMG_URL1$" alt="" height="200" width="">

Где alignleft это имя класса
$IMG_URL1$ это ссылка на картинку.
далее в таблицу стилей загоняем сам стиль из двух строчек, в любое место и сохраняем
Code
img.alignleft { margin: 5px 5px 20px 10px; display: inline; border: solid 4px #eee; padding: 1px;}
.alignleft { float: right; }

Все готово, смотрим регулируем отступы через стиль margin

Что бы изменить фон или наложить картинку вот как примеру у нас на сайте вам необходимо задать стиль вот таким образом для тега

< body >

вставляем style="background:url('http://ucozon.ru/SCRIN5/sapky/b.gif') #999; margin:5px; padding:5px;" и получится вот таким образом

Code
<body style="background:url('http://ucozon.ru/SCRIN5/sapky/b.gif') #999999; margin:5px; padding:5px;">

если хотите убрать картинку и оставить только html цвет то изменяем просто удаля ссылку оставив скобки вот таким образом

Code
<body style="background:url(' ') #999999; margin:5px; padding:5px;">

и изменяем цвет по своему смотрению #999
Так же я прилагаю вашему вниманию два видео урока по смене фона, как картинкой так и цветом, так же с подвижным фоном с названием fixed, для подвижного фона 2 урок лучше.
1 Как сделать фиксированный фон и стандартный из картинки предлагаю вам видео урок
2 Видео урок изменение фона сайта картинкой

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

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

счетчик посещений