среда, 22 февраля 2012 г.

Как сделать на сайте страничку FAQ

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

В этой статье я расскажу, как можно быстро сделать страничку FAQ(один из вариантов, конечно).

Между тегами <head> и </head> размещаем скрипт:

<SCRIPT LANGUAGE="JavaScript">
function showFAQ(form) {
form.answer.value = form.question.options[form.question.selectedIndex].value;
}
</SCRIPT>

Между тегами <body> и </body> разместим вот такой текст:

<center>
  <form name=faqform>
    <table border=1 cellspacing=0 cellpadding=5>
      <tr bgcolor="#000099">  
        <td align=center>
          <font face="verdana,arial" size="-1" color="#ffffff"><b>FAQ</b>
          </font></td>
      </tr>
      <tr bgcolor="#ffffcc"><td>
          <font face="verdana,arial" size="-1">
            <br>Для просмотра ответа кликните на вопрос. 
            <p>
              <ul>
                <select size=10 name=question onChange="javascript:showFAQ(this.form);">
                  <option value="ЗДЕСЬ РАЗМЕЩАЕМ ТЕКСТ ВАШЕГО ОТВЕТА">&nbsp;&nbsp;&nbsp;-->&nbsp;&nbsp;ЗДЕСЬ ПИШЕМ ТЕКСТ ВАШЕГО ОТВЕТА
                  </option>
                </select>
              </ul>
              <p>Читайте ответ здесь: 
                <p>
                  <ul>
<textarea name="answer" rows=15 cols=50 wrap=virtual></textarea>
                  </ul>
          </font></td>
      </tr>
    </table>
  </form>
</center>  

Чтобы не быть голословным, приведу пример созданного мной FAQ, попробуйте:

FAQ

Для просмотра ответа кликните на вопрос.

Читайте ответ здесь:

Как Вы поняли, сделать такой FAQ очень легко. Пользуйтесь, если нравится.

P.S. Приведу исходный код этого примера
<html>  
  <head>  
    <title>FAQ
    </title>
<SCRIPT LANGUAGE="JavaScript">
function showFAQ(form) {
form.answer.value = form.question.options[form.question.selectedIndex].value;
}
</SCRIPT>  
  </head>  
  <body>
    <center>  
      <form name=faqform>    
        <table border=1 cellspacing=0 cellpadding=5>      
          <tr bgcolor="#000099">          
            <td align=center>          
              <font face="verdana,arial" size="-1" color="#ffffff"><b>FAQ</b>          
              </font></td>      
          </tr>      
          <tr bgcolor="#ffffcc"><td>          
              <font face="verdana,arial" size="-1">            
                <br>Для просмотра ответа кликните на вопрос.              
                <p>              
                  <ul>                
                    <select size=10 name=question onChange="javascript:showFAQ(this.form);">                  
                      <option value="Прочитать до конца эту статью.">&nbsp;&nbsp;&nbsp;-->&nbsp;&nbsp;Как сделать FAQ?                   
                      </option>                  
                      <option value="&lt;SCRIPT LANGUAGE='JavaScript'&gt; function showFAQ(form) { form.answer.value = form.question.options[form.question.selectedIndex].value; } &lt;/SCRIPT&gt;">&nbsp;&nbsp;&nbsp;-->&nbsp;&nbsp;Какой текст нужно вставить между тегами &lt;HEAD &gt; и &lt;/HEAD&gt;?                   
                      </option>                  
                      <option value="Найти &lt;option value=, скопировать эту строку и уже в новой строке в кавычках заменить текст ответа своим текстом ответа. Заменить текст вопроса перед тегом &lt;/option&gt; своим текстом вопроса.">&nbsp;&nbsp;&nbsp;-->&nbsp;&nbsp;Как добавить свой вопрос и ответ на него?                   
                      </option>                
                    </select>              
                  </ul>              
                  <p>Читайте ответ здесь:                  
                    <p>                  
                      <ul>
<textarea name="answer" rows=15 cols=50 wrap=virtual></textarea>                  
                      </ul>          
              </font></td>      
          </tr>    
        </table>  
      </form>
    </center>    </body>
</html>


16 коммент.:

Ирина комментирует...

Николай, Ваш сайт для меня  - просто находка! С удовольствием вручаю Вам кубок признания, приходите за ним по адресу  http://testi-food.ru

Николай комментирует...

Спасибо,приду!

Ирина комментирует...

Полезная статья. Спасибо. 

Николай комментирует...

 Всегда пожалуйста! Заходите почаще!

Sveta Lyubushkina комментирует...

Полезная информация надо сохранить. Спасибо.

Николай комментирует...

Пожалуйста, Света!

Владимир Волков комментирует...

Молодец, Николай!  Сразу видно почерк профессионала...

Николай комментирует...

Володя, спасибо! Я стараюсь!

Milaglad8 комментирует...

Спасибо! Ваши статьи очень нужны тем, кто недавно создал свой сайт, кому ещё многому нужно учится.

Николай комментирует...

Всегда рад помочь!

Виктор комментирует...

 Спасибо. Полезная статья. Не давно искал плагин, который выполняет такую функцию, но потом забросил, поскольку плагин не много глючит под новой версией. Данная статья мне очень пригодилась. 
Хочу передать вам Кубок признания. Забрать его нужно здесь: http://brenvik.com/kubok-priznaniya/. 
Успехов, вам и дальнейшего процветания! 

Владимир Бисько комментирует...

Хочу передать вам Кубок признания. Приходите за ним сюда: www.bivag.com.ua. Успехов, вам и процветания вашему сайту!

Николай комментирует...

Володя, спасибо! Кубок заберу!

Аленка комментирует...

Николай, когда увидела Вашу статью - была в шоке, столько буковок непонятных))) думала, что ошиблась адресом))) А оказалось и правда не сложно!
Спасибо Николай, за полное и пошаговое объяснение! Что даже блондинка смогла разобраться с FAQ !

Николай комментирует...

Я старался:)

Sergey комментирует...

Вставил на народ (я новичок) получилось спасибо.

Отправить комментарий