Изменение дизайна гостевой книги

Для тех, кого не устраивает внешний вид гостевой книги, администрация сервера narod.ru позаботилась о возможности выполнения индивидуального дизайна средствами HTML. Для передачи информации от вашего документа к серверу зарезервировано несколько кодовых слов:

{PAGEBAR} - Линейка выбора очередной порции сообщений (когда их больше десяти).
{MESSAGES} - Тексты сообщений
{OWNERID} - Идентификатор хозяина гостевой (используется в ссылке на гостевую книгу)
{OWNERNAME} - Имя сайта хозяина гостевой
{DATE} - Дата ввода сообщения, время московское
{AUTHOREMAIL} - E-mail автора сообщения
{AUTHORNAME} - Имя автора сообщения
{URL} - Адрес веб-страницы автора сообщения
{OWNERREPLY} - Ответ на сообщение хозяином гостевой

Итак, для изменения дизайна необходимо создать и разместить на вашем сайте два файла. В нашем первом примере один будет называться "SimpleGuest.html", который будет описывать гостевую книгу. И второй файл "Msg.html", с html-кодом, описывающим стиль выводимых сообщений.

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

/gb&
mainhtml=SimpleGuest.html&messageshtml=Msg.html

Разберем поподробнее эти два файла. Опишем сначала файл "SimpleGuest.html". Это будет обычная веб-страница, содержащая привычные стандартные HTML теги. Как обычно разместим там заголовок со служебной информацией для браузера и откроем тело документа:

<head>
  <title>Простенькая Гостевая книга</title>
</head>

<body>

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

<table cellpadding="0" cellspacing="0" border="1">

 <tr align="center">
  <td colspan=2>
   <h3>Пример простой 
    <a href="http:\\www.byweb.narod.ru/fr/web/docs/1/13.html">
    Гостевой книги</a>
   </h3>
  </td>
 </tr>

Для наглядности я выставил в таблице значение border="1". Я так всегда делаю при отладке страницы, чтобы лучше была видна структура документа. Потом уже в готовом документе таблицу можно сделать невидимой выставив border="0".

А далее мы откроем форму, используя тэг <FORM> и его атрибуты в которых мы укажем адрес сервера обрабатывающего введенные данные ACTION=leave_message.xhtml и метод передачи данных METHOD=POST. А далее в форме будут вводится несколько скрытых элементов TYPE=HIDDEN:

  
  <FORM ACTION=leave_message.xhtml METHOD=POST>
  <INPUT TYPE=HIDDEN NAME=owner VALUE={OWNERID}>
  <INPUT TYPE=HIDDEN NAME=newlocation 
VALUE="/gb&
mainhtml=SimpleGuest.html&messageshtml=Msg.html">

Эти скрытые Hidden-поля являются обязательными. Первое присваивает переменной NAME=owner значение идентиффикатора хозяина гостевой - {OWNERID}. Второе поле NAME=newlocation передаст величину VALUE равную адресу страницы, на которую должен попасть посетитель, после отправки своего сообщения в гостевой. В нашем случае этот адрес соответствует ссылки на гостевую, чтобы пользователь мог увидеть сразу же свое оставленное сообщение. Но поскольку сервер на "Народе" периодически бывает довольно тормознутый, то не всегда это ему удастся. поэтому можно указать и адрес стартовой страницы. Хотя лучше все же указывать адрес гостевой. Так общепринято.

Ну а далее мы начнем описывать поля ввода для данных посетителей и их послания:

  <tr>
    <td>
      Ваше имя:
    </td>
    <td>
      <input type="Text" maxlength="40" size="40" NAME=your_name>
    </td>
  </tr>

  <tr>
    <td>
      Ваш E-Mail:
    </td>
    <td>
      <input type="Text" maxlength="40" size="40" NAME=your_email>
    </td>
  </tr>

  <tr>
    <td>
      Адрес вашей веб-страницы:
    </td>
    <td>
      <input type="Text" maxlength="40" size="40" NAME=your_url>
    </td>
  </tr>

  <tr>
    <td  align="center" class="dat" colspan="2">
      Ваше сообщение:<br>
      <textarea NAME=your_message rows="6" cols="60" class="field">
      </textarea>
    </td>
  </tr>
                                    
  <tr>
    <td colspan=2>
      <input type="Submit" value="Добавить сообщение">
    </td>
  </tr>

  </FORM>

Даже не знаю, надо ли тут что-то было комментировать. Поля ввода с именами NAME=your_name, NAME=your_email и NAME=your_url отправят в гостевую соответственно имя посетителя, его электронный адрес и адрес его интернет-странички. В контейнере <TEXTAREA>...</TEXTAREA> описывается область для ввода самого текста сообщения с именем поля NAME=your_message. Ниже размещается элемент ввода - кнопка type="Submit", нажав на которую пользователь отправит сообщение на сервер обработки данных, который затем поместит это послание в гостевую книгу. И заверщает это все тег закрытия формы </FORM>. Но завершает он лишь форму ввода данных. Ниже еще надо разместить линейку выбора номеров сообщений, когда их больше чем выведено на страницу. Она будет отображена там, где вы разместите ключевое слово {PAGEBAR}. А так же необходимо указать место, где будут выводится сами сообщения посетителей. Это место определяется местом расположением слова {MESSAGES}:

  <tr>
    <td colspan=2 align="center">
      {PAGEBAR}
      {MESSAGES} 
      {PAGEBAR}
    </td>
  </tr>

Ну и теперь надо не забыть, что это была таблица, а значит ее надо закрыть завершающим тэгом </table>. Да и закрыть документ тоже не мешает как положено:

</table>
</body>
</html>

Теперь рассмотрим файл "Msg.html". Он будет описывать вид сообщений, оставленных посетителями. Код, содержащийся, в файле будет подставлятся вместо ключевого слова {MESSAGES}, поэтому в этом файле не надо писать теги характерные для HTML-документов, такие как <table>, <body> и <html>. Сразу начнем описывать таблицу в ячейах которой будут располагаться данные и сообщения от пользователей:

<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td width="30%">
      Дата сообщения
    </td>
    <td>
      {DATE}
    </td>
  </tr>

  <tr>
    <td>
      E-mail отправителя
    </td>
    <td>
      <a href="mailto:{AUTHOREMAIL}">
      {AUTHORNAME}
    </td>
  </tr>
  <tr>
    <td>
      Адрес странички отправителя
    </td>
    <td>
      <a href="{URL}">
      {URL}</a>
    </td>
  </tr>

  <tr>
    <td>
      Сообщение
    </td>
    <td>
      {MESSAGE} 
    </td>
  </tr>
  
  <tr>
    <td>
      Мой ответ
    </td>
    <td>
      {OWNERREPLY} 		  
    </td>
  </tr>
</table>

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

Вот и все. Простейшая, примитивная гостевая книга, с никаким, но зато с нашим собственным дизайном готова. Чтобы ее вызвать надо разместить на странице вот такую ссылку:
<A href="/gb&mainhtml=SimpleGuest.html&messageshtml=Msg.html">
Гостевая книга</A>

Щелкните и посмотрите, что у нас получилось. В таком виде, конечно ее подавать нельзя. Надо поработать над дизайном поплотнее, сделать более сложную таблицу, чтобы покрасивее спозиционировать текст. Так же для лучшего восприятия надо поработать над цветом элементов текста. Тут перед вами предоставляется широкий простор для творчества. Я чуть попозже попробую тоже поизголяться и представлю пример гостевой книги с более сложным дизайном.

Шаг 14 - Изменение дизайна гостевой книги