Дизайн для своей гостевой книги на Народ.ру
Гостевую книгу со своим дизайном на народе можно
сделать в двух вариантах.
1.Читать и писать в гостевую на одной странице.
2.Читать на одной странице, писать в гостевую на другой.
Мы с Вами сейчас подробно разберем второй вариант.Для
этого нам понадобится три текстовых файла (*txt).
Назовем их например так;
1. main.txt (в нем мы опишем как будут выглядеть
сообщения)
2. write.txt (писать в гостевую книгу)
3. read.txt (читать гостевую книгу)
Вот исходный код файла main.txt:
<HR>{DATE}<br>
<a href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</a><br>
<a href={URL}>{URL}</A><HR>
{MESSAGE}<HR>
{OWNERREPLY}<HR><br>
Разберем его по полочкам
{DATE} - Время. Вместо этого кода на Вашей странице появится время
когда сообщение было написано
{AUTHOREMAIL} - E-mail автора сообщения
{AUTHORNAME} - Имя автора сообщения
{URL} - Адрес страницы автора сообщения (если он изволит его написать,
если не напишет на Вашей странице в этом поле ничего не отобразится)
{MESSAGE} - Текст самого сообщения.
{OWNERREPLY} - Ваш ответ на сообщение (его Вы можете написать у
себя в мастерской в разделе "Гостевая книга" --> "Администрирование"
нажав на картинку "Ответить"
Все эти слова зарезервированы "Народом" и их надо писать
так как есть, то есть фигурные скобки обязательны.
Поехали дальше.
Сначала подготовим файл main.txt .Так как его содержимое будет подставляться
в файл read.txt (читать гостевую книгу), целесообразнее всего отредактировать
его. То есть где именно на странице будет выводиться время когда
сообщение было написано, имя и адрес сайта автора. само сообщение
и наконец Ваш ответ.
Хорошо что есть HTML (язык гипертекстовой разметки вебстраницы)!
Пишем код таблицы.
<table width="100%" border="1" cellspacing="1"
cellpadding="1" bordercolor="#000000">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
Посмотрите здесь
как она выглядит (кто не знает).
Далее вставляем в ячейки первой строки {DATE} - Время ,ссылку на
e-mail автора с его именем <a href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</a>
,ссылку на сайт автора вместе с адресом сайта (если автор его написал)
<a href={URL}>{URL}</A> . В ячейку второй строки таблицы
вставляем само сообщение {MESSAGE} .
В ячейку третьей строки вставляем Ваш ответ {OWNERREPLY}.
Вот что получилось.
<table width="100%" border="1" cellspacing="1"
cellpadding="1" bordercolor="#000000">
<tr>
<td>{DATE}</td>
<td><a href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</a></td>
<td><a href={URL}>{URL}</A></td>
</tr>
<tr>
<td colspan="3">{MESSAGE}</td>
</tr>
<tr>
<td colspan="3">{OWNERREPLY}</td>
</tr>
</table>
Посмотрите
здесь как это выглядит.
В принципе на этом можно было бы и закончить. Но шрифт, цвет и размер
шрифта на странице будет выводиться по умолчанию.
Выше в примере Вы могли в этом убедиться.
Поэтому немного подредактируем и это (Вы можете сделать это на свой
вкус и под дизайн Вашего сайта).
Вот немного отредактированный код.
<table width="100%" border="1" cellspacing="1"
cellpadding="1" bordercolor="#000000">
<tr>
<td><font color="#CC0000" size="1"
face="Geneva, Arial, Helvetica, sans-serif">{DATE}</font></td>
<td><a href="mailto:{AUTHOREMAIL}"><font
color="#996600" size="1" face="Verdana,
Arial, Helvetica, sans-serif">{AUTHORNAME}</font></a></td>
<td><a href={URL}><font color="#996600"
size="1" face="Verdana, Arial, Helvetica, sans-serif">{URL}</font></A></td>
</tr>
<tr>
<td colspan="3"><font color="#996600"
size="1" face="Geneva, Arial, Helvetica, sans-serif">{MESSAGE}</font></td>
</tr>
<tr>
<td colspan="3"><font color="#003399"
size="1" face="Verdana, Arial, Helvetica, sans-serif">{OWNERREPLY}</font></td>
</tr>
</table>
<br><!--Это для того , чтоб следующее сообщение небыло
слишком близко к предыдущему -->
Здесь
можно посмотреть что получилось.
Вы конечно понимаете что толщину рамки, ее цвет Вы можете сделать
по своему желанию.
Я только пытаюсь объяснить сам принцип.
Итак как будут выглядеть сообщения мы уже сделали. Повторю еще раз
это был файл main.txt, файл где будут формироваться сообщения от
пользователей. Теперь необходимо вставить эти сообщения в страницу
на которой пользователь сможет прочитать их.
Для этого нам нужен файл read.txt .
Смотрим исходный код файла read.txt (читать гостевую книгу, страница
без какого либо дизайна).
Но вначале надо сказать что для этой страницы тоже есть зарезервированные
слова:
{MESSAGES} - Все, написанные Вам сообщения. Сюда скриптом Народа
подставляется содержимое файла main.txt , который в свою очередь
берет данные из файла write.txt.
<HR> - Разделительная полоса (для тех кто не знает, это не
зарезервированное слово, это элемент HTML)
{PAGEBAR} - Количество страниц с сообщениями. По умолчанию на страницу
выводится по десять сообщений. Например если у Вас всего 45 сообщений,
то внизу страницы после разделительной полосы у Вас будут стоять
пять чисел (1,2,3,4,5).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Читаем гостевую книгу</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</head>
<body>
<br>
{MESSAGES}
<HR>
{PAGEBAR}
<br>
</body>
</html>
Это тоже ничто иное , как Html код страницы просмотра сообщений.
но в формате txt файла.
Ну вот начало уже есть!
Теперь делаем дизайн! (Ура, дошли!)
Далее нам надо чтоб сообщения на нашей странице не казались чужими
и находились именно там где нам надо.
Предположим у Вас уже есть заготовка гостевой страници (имеется
ввиду дизайн, картинки, всевозможный попутный текст, реклама и т.д.)
Вы выбираете место на странице где должны быть Ваши сообщения из
гостевой книги.
Вставляете код таблицы с одной строкой и одной ячейкой:
<table width="100%" border="1" cellspacing="1"
cellpadding="1">
<tr>
<td> </td>
</tr>
</table> Далее вставляем в эту ячейку фрагмент кода файла
read.txt , а именно вот это;
<br>
{MESSAGES}
<HR>
{PAGEBAR}
<br>
После того как вставите в ячейку этот фрагмент у Вас получится следующее:
<table width="100%" border="1" cellspacing="1"
cellpadding="1">
<tr>
<td><br>
{MESSAGES}
<HR>
{PAGEBAR}
<br>
</td>
</tr>
</table>
После этого сохраните эту страницу как read.txt и поместите ее в
корневой каталог своего сайта.
Пример того что получилось Вы могли видеть в разделе "У меня
вопрос".
Вы конечно понимаете, что размер таблицы, толщина рамки и ее цвет
Вы выбираете сами.
Теперь нам нужен файл write.txt, который будет отображать страницу
с формой отправки сообщения в гостевую книгу.
Вот самы простой сходный код файла write.txt (писать в гостевую
книгу) выглядит вот так;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Пишем в костевую книгу.</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</head>
<body>
<FORM ACTION=leave_message.xhtml method=post>
<INPUT TYPE=HIDDEN NAME=owner VALUE={OWNERID}>
<INPUT TYPE=HIDDEN NAME=newlocation
VALUE=http://www.narod.ru/guestbook/?owner={OWNERID}
&mainhtml=read.txt&messageshtml=main.txt>
<table width="381" border="1" cellspacing="1"
cellpadding="1" align="center">
<tr>
<td width="181">Ваше имя; <br></td>
<td width="200"><div align="center">
<INPUT TYPE=TEXT SIZE=30 NAME=your_name >
</div></td>
</tr>
<tr>
<td>Ваш e-mail; <BR></td>
<td><div align="center">
<INPUT TYPE=TEXT SIZE=30 NAME=your_email >
</div></td>
</tr>
<tr>
<td>URL Вашей страницы:</td>
<td><div align="center">
<INPUT TYPE=TEXT SIZE=30 NAME=your_url >
</div></td>
</tr>
</table>
<div align="center">Сообщение:<br>
<TEXTAREA ROWS=5 COLS=44 NAME=your_message ></TEXTAREA>
<BR>
<BR>
<INPUT TYPE=SUBMIT VALUE="Добавить">
<INPUT type="reset" VALUE="Очистить">
</div>
</FORM>
</body>
</html>
Это ничто иное , как код Html страницы с формой отправки сообщения,
здесь
можно посмотреть , что получилось. Затем сохраняем это в текстовом
файле.
Теперь немного подредактируем этот файл, а именно изменим цвет,
размер, имя шрифта, цвет фона страницы и т.д.. Все это вы можете
сделать по своему усмотрению. Вот посмотрите отредактированный код
файла write.txt :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Добавить сообщение</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</head>
<body bgcolor="#000066">
<div align="center">
<FORM ACTION=leave_message.xhtml method=post>
<INPUT TYPE=HIDDEN NAME=owner VALUE={OWNERID}>
<INPUT TYPE=HIDDEN NAME=newlocation
VALUE=http://www.narod.ru/guestbook/?owner={OWNERID}
&mainhtml=read.txt&messageshtml=main.txt>
<font color="#FFFFFF" size="4" face="Verdana,
Arial, Helvetica, sans-serif"><strong>Добавить
Сообщение <br>
<br>
</strong></font>
<table width="381" border="0" cellspacing="1"
cellpadding="0" align="center" bgcolor="#990000">
<tr bgcolor="#000066">
<td width="181"><font color="#FFFFFF"
size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Ваше
имя; </strong></font><br></td>
<td width="200"> <div align="center">
<INPUT TYPE=TEXT SIZE=30 NAME=your_name >
</div></td>
</tr>
<tr bgcolor="#000066">
<td><font color="#FFFFFF" size="2"
face="Verdana, Arial, Helvetica, sans-serif"><strong>Ваш
e-mail; </strong></font><BR></td>
<td> <div align="center">
<INPUT TYPE=TEXT SIZE=30 NAME=your_email >
</div></td>
</tr>
<tr bgcolor="#000066">
<td><font size="2" face="Verdana, Arial,
Helvetica, sans-serif"><strong><font color="#FFFFFF">URL
Вашей страницы</font></strong></font><font
color="#FFFFFF"><strong><font face="Verdana,
Arial, Helvetica, sans-serif">:</font></strong></font></td>
<td> <div align="center">
<INPUT TYPE=TEXT SIZE=30 NAME=your_url >
</div></td>
</tr>
</table>
<div align="center"><font color="#FFFFFF"
size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Сообщение:</strong></font><br>
<TEXTAREA ROWS=5 COLS=44 NAME=your_message ></TEXTAREA>
<BR>
<BR>
<INPUT TYPE=SUBMIT VALUE="Добавить">
<INPUT type="reset" VALUE="Очистить">
</div>
</form>
</div>
</body>
</html>
Здесь можно посмотреть
что получилось.
После этого сохраните эту страницу как write.txt и поместите ее
в корневой каталог своего сайта. Пример того , что получилось Вы
можете наблюдать в разделе "Уменя вопрос" прейдя по кнопке
"Добавить вопрос". Ну и наконец. Что бы посетитель Вашего
сайта мог попасть в Вашу гостевую книгу и написать сообщение, вставьте
ссылку на вашей странице на страницу гостевой книги http://www.narod.ru/guestbook/?owner=Вашлогин&mainhtml=read.txt&messageshtml=main.txt
.
Посетитель по этой ссылке попадет на страницу где сможет прочитать
все сообщения. Если он захочет написать сообщения, ему надо показать
ссылку на страницу добавления сообщений она выглядит следующим образом
http://www.narod.ru/guestbook/?owner=Вашлогин&mainhtml=write.txt&messageshtml=main.txt
Где "Вашлогин" это первое слово в адресе вашего сайта.
Например адрес Вашего сайта http://primer.narod.ru значит
вместо "Вашлогин" в ссылку Вы вставите "primer".
Поместите все *.txt файлы в корневой каталог Вашего сайта.
И еще одно очень важное замечание. Все ссылки и пути на файлы и
изображения которые будут находиться у Вас на страницах гостевой
книги, должны иметь абсолютный вид. То есть например сыллка на логотип
Вашего сайта должна иметь примерно такой вид; http://site.narod.ru/images/logo.gif
и ни в коем случае такой images/logo.gif . Запомните это.
Ну вот вроде все.
Если возниктут вопросы пишите в разделе "У меня вопрос".
|
