Все для создания сайта

Бывают случаи, когда при смене дизайна сайта тот или иной элемент управления не вписывается в общий вид. Скажем, форма входа смотрелась бы лучше не в блочном виде типа пароль ниже логина, а в более приемлемом строчном - логин и рядом пароль. Как известно, вывод на сайте формы входа инициирует код $LOGIN_FORM$, код формы поиска меняется в зависимости от модуля, но он формируется конструктором через код [SEARCH_FORM]. Также рассмотрим подробнее дизайн календаря.

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

<form method="POST" name="loginform" 
action="http://YOUR_SITE_URL/index/"> 
 Логин: <input type="text" name="user" size="20" 
style="width:100px" maxlength="25"> 

 Пароль: <input type="password" name="password" size="20" 
style="width:100px" maxlength="15"> 
 <label for="rem">
<input id="rem" type="checkbox" name="rem" value="1" checked>
помнить</label> 
 <input type="submit" value="Войти »"> 
 <input type="hidden" name="a" value="2">
<input type="hidden" name="redirect" value="0"> 
 </form> 
 <a class="forRegLink" href="javascript://" 
onClick="window.open('http://YOUR_SITE_URL/index/5',
'reminder','top=0,left=0,width=300,height=140'); 
return false;">Забыл пароль</a> 
 <a class="forRegLink" href="$REGISTER_LINK$">Регистрация</a> 
 <script type="text/javascript">
document.loginform.redirect.value=window.location.href;
</script> 

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

Итак, вернемся к нашим баранам. Сразу обратим внимание на код YOUR_SITE_URL - помните, его нужно обязательно заменить на адрес вашего сайта.

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

<form method="POST" name="loginform" 
action="http://YOUR_SITE_URL/index/">

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

Логин: <input type="text" name="user" size="20" 
style="width:100px" maxlength="25"> 

 Пароль: <input type="password" name="password" size="20" 
style="width:100px" maxlength="15">

Поля для ввода логина и пароля пользователя, вид и надписи можно менять, остаться неизменным должно только - name="user" и name="password".

Далее

<label for="rem">
<input id="rem" type="checkbox" name="rem" value="1" checked>
помнить</label>

Флаг, указывающий, нужно ли поставить пользователю длительный кук (cookies - специальные файлы на стороне пользователя, в которых хранится информация, записываемая командами интернет-ресурсов), чтобы потом ему[пользователю] не пришлось снова вводить пароль. Можно убрать, можно сделать неактивной (т.е. удалить слово "checked").

<input type="submit" value="Войти »">

Кнопка для отправки формы. Можно менять как угодно, можно картинкой сделать и т.д., главное, чтобы тип сохранился (type="submit").

 <input type="hidden" name="a" value="2">
<input type="hidden" name="redirect" value="0">

Это код обязательных скрытых полей формы. Без первого форма вообще работать не будет, а второй нужен для переадресации на страницу, с которой был совершен вход. Эти теги должны обязательно идти перед закрывающим тегом формы </form> (читайте документацию по HTML).

 </form>

Обязательный тег, должен идти после всех описанных выше тегов.

<a class="forRegLink" href="javascript://" 
onClick="window.open('http://YOUR_SITE_URL/index/5',
'reminder','top=0,left=0,width=300,height=140'); 
return false;">Забыл пароль</a> 
 <a class="forRegLink" href="$REGISTER_LINK$">Регистрация</a>

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

<script type="text/javascript">
document.loginform.redirect.value=window.location.href;
</script> 

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

Смена дизайна формы поиска([SEARCH_FORM])

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

%IF($MODULE_ID$=index)%<form method="post" 
style="margin:0px" action="http://YOUR_SITE_URL/news/">
<table border="0" cellspacing="1" class="searchTable">
<tr><td class="searchTd1"><input type="text" 
name="query" maxlength="30" size="20" 
class="queryField" /></td><td align="center" 
class="searchTd2"><input type="submit" class="searchSbmFl"
 value="« Найти »" /></td></tr></table><input type="hidden"
 name="a" value="14" /></form>%ELSE% 
 %IF($MODULE_ID$=blog)% 
 <form method="post" style="margin:0px" 
action="http://YOUR_SITE_URL/$MODULE_ID$/">
<table border="0" cellspacing="1" class="searchTable">
<tr><td class="searchTd1"><input type="text" name="query"
 maxlength="30" size="20" class="queryField" /></td>
<td align="center" class="searchTd2"><input type="submit"
 class="searchSbmFl" value="« Найти »" /></td></tr>
</table><input type="hidden" name="a" value="13" />
</form>%ELSE% 
 %IF($MODULE_ID$=faq)% 
 <form method="post" style="margin:0px" 
action="http://YOUR_SITE_URL/$MODULE_ID$/">
<table border="0" cellspacing="1" class="searchTable">
<tr><td class="searchTd1"><input type="text" name="query"
 maxlength="30" size="20" class="queryField" /></td>
<td align="center" class="searchTd2"><input type="submit"
 class="searchSbmFl" value="« Найти »" /></td></tr>
</table><input type="hidden" name="a" value="3" />
</form>%ELSE%<form method="post" style="margin:0px" 
action="http://YOUR_SITE_URL/$MODULE_ID$/">
<table border="0" cellspacing="1" class="searchTable">
<tr><td class="searchTd1"><input type="text" 
name="query" maxlength="30" size="20" 
class="queryField" /></td>
<td align="center" class="searchTd2">
<input type="submit" class="searchSbmFl" value="« Найти »" />
</td></tr></table><input type="hidden" name="a" value="2" />
</form> 
 %ENDIF% 
 %ENDIF% 
 %ENDIF%

Выше приведен код, который можно вставить в каркас вместо глобального кода [SEARCH_FORM] и получить полноценную форму поиска с произвольным дизайном. Необходимо заменить YOUR_SITE_URL на адрес вашего сайта. Цифры, написанные красным цветом необходимо оставить как есть. Поля и формы form и input(и их атрибут name) также должны быть неизменны, а вот значения атрибутов size и maxlength можно изменять. Расположение их может быть совершенно произвольным, т.е. table можно вообще сменить на div, к примеру. Стили можно тоже менять по желанию. Алгоритм прост, выбираете в конструкторе шаблонов ваш каркас, заменяете глобальный код([SEARCH_FORM] или $LOGIN_FORM$) на равнозначный ему и применяете к шаблонам. Помните, о соответствующем виде нового элемента управления нужно позаботиться самостоятельно.

Календарь

/* Calendar Style */ 
.calmonth {text-align:right; } 
.calwday {border:1px outset; background:#D9D775; width:17px;} 
.calwdayse {border:1px outset; background:#D9D775; width:17px;
font-weight:bold;} 
.calwdaysu {border:1px outset; background:#D9D775; width:17px;
font-weight:bold; color:#FF0000;} 
.calmday {border:1px inset; background:#F5F5F5;} 
.calmdaya {border:1px inset; background:#F5F5F5;
font-weight:bold;} 
.calmdayis {border:1px outset; background:#EFEFEF;} 
.calmdayisa {border:1px outset; background:#EFEFEF;
font-weight:bold;} 
a.calmonthlink:link {text-decoration:none; color:#938D4A;} 
a.calmonthlink:visited {text-decoration:none; color:#938D4A;} 
a.calmonthlink:hover {text-decoration:underline; color:#938D4A;} 
a.calmonthlink:active {text-decoration:underline; color:#000000;} 
a.calmdaylink:link {text-decoration:underline; color:#938D4A;} 
a.calmdaylink:visited {text-decoration:underline; color:#938D4A;} 
a.calmdaylink:hover {text-decoration:underline; color:#000000;} 
a.calmdaylink:active {text-decoration:underline; color:#000000;} 
/* -------------- */

Выше даны классы, использующиеся для оформления вида календаря. Названия их составлены так, чтобы можно было максимально просто разобраться в значении каждого класса. Например, calMday- класс оформления ячейки таблицы, в которую вписывается день месяца. Удобный инструмент для работы со стилями в броузере Mozilla - Web Developer.Если ссылка устарела, найдите в google по названию. Что до IE, то это Microsoft Internet Explorer Developer Toolbar

Если возникли вопросы, можете оставить их в комментариях.