Урок 159. Как создать кроссворд на сайте или блоге

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse CrosswordПриветствую! В этом уроке расскажу, как можно создать кроссворд на своем сайте или блоге. В уроке 156 «устанавливаем на блог конструктор пазл», я писал, как создать на сайте конструктор пазл, и для чего он нужен. Не имеет значение, что Вы будете на своем ресурсе создавать: пазлы, кроссворды, загадки, тесты, ребусы или еще что-то, но цель любого вебмастера –  удержать посетителя на сайте.

Как создать кроссворд на сайте в программе Eclipse Crossword

Создавать кроссворд мы будем в англоязычной программе Eclipse Crossword. Эта программа бесплатная, и, не смотря на то, что она на английском языке, разобраться в ней достаточно просто. Есть для этой программы и русификатор, но я им не пользовался, когда создавал кроссворд для этого урока.

Программа Eclipse Crossword устанавливается на компьютер. Я никогда не составлял кроссворды, но сейчас у меня есть хорошая возможность попробовать себя в этом деле. Кроссворды в этой программе создаются автоматически. Вам только нужно составить свой список слов. Созданный кроссворд можно распечатать, установить на любой сайт и даже отправить на e-mail.

Скачайте программу Eclipse Crossword по этой ссылке  и установите на компьютер. После установки при первом запуске программы, появится окошко, в котором будет предлагать пройти обучающий урок по созданию кроссвордов. Если нажать «Да», то никакого урока Вы не увидите, а откроется помощь, как пользоваться этой программой, но на английском языке. Нажимаете «Нет» чтобы не заморачиваться.

Теперь Вы видите окно программы, где нужно выбрать «I would like to start a new crossword» - создать новый кроссворд, а затем щелкаем «Next» - далее.

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse Crossword

Теперь надо создать список слов для будущего кроссворда. Для этого в новом окне программы выберите «Let me create a word list from scratch now» - создать новый список слов и нажмите «Next».

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse Crossword

Появится окно, где нужно создать список слов для будущего кроссворда. В поле «Word» нужно ввести слово, а в поле «Clue for this word» надо написать описание к этому слову. После этого нажать кнопку «Add word to list» - добавить слово в список.

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse Crossword

После того, как Вы составите список слов, их можно сохранить в отдельный файл. Нажмите кнопку «Tools» - инструменты, а потом «Save word list» - сохранить список слов. Чтобы загрузить сохраненный список слов, надо выбрать «Tools», а потом «Open word list» - загрузить список слов из файла.

Когда список слов будет готов, нажмите «Next». Появится всплывающее окошко, где будет предложено сохранить список слов, которые Вы добавили. Можете сохранить все слова, если будете с ними работать, иначе нажмите «Нет».

В следующем окне, в поле «Name of this crossword:», Вы можете написать название своего кроссворда, а в поле «Your name» внизу, можно ввести свое имя. Оно будет отображаться над кроссвордом.

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse Crossword

Нажмите «Next», чтобы перейти к следующим настройкам. В новом  окне задайте размер кроссворда. Значение меньше 8 указывать нельзя.

Как создать кроссворд на сайте или блоге

Как создать кроссворд на сайте или блоге

Жмем «Next». Появится новое окно, где Вы увидите готовый кроссворд из Вашего списка слов.

Как создать кроссворд на сайте или блоге

Как создать кроссворд на сайте или блоге

Чтобы изменить кроссворд, нажимайте ссылку «Make another puzzle like this one». Не надо нажимать ссылку здесь, а жмите в программе! Кроссворд автоматически будет составлен в другом варианте. В готовый кроссворд можно добавить новые слова, если вернуться к окну по составлению слов. Для этого надо щелкать внизу окна «Back»

Теперь рассмотрим один нюанс. Так как кроссворд сохранятся в HTML файле, то любой человек, нажав комбинацию клавиш «Ctrl» + «U», может посмотреть исходный код этой страницы. Таким образом, он может узнать все ответы к кроссворду. Чтобы это предотвратить, надо зайти в «Options» - опции, потом вверху выбрать вкладку «Web»

Как создать кроссворд на сайте или блоге

И поставить галочку «Do not allow cheating».

Как создать кроссворд на сайте или блоге

Теперь в исходном коде, вместо слов отгадок будут отображаться цифры. Нажимаем «Next» и сохраняем кроссворд в виде HTML страницы. В новом окне нажмите «Save as a web page» - сохранить в виде HTML страницы.

Потом надо щелкнуть по ссылке «Interactive with JavaScript».

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse Crossword

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse Crossword

Появится окно, где надо дать название новому файлу, например, crossword, а затем нажать «Сохранить». Теперь у Вас на компьютере есть HTML файл «crossword.html». Открыв этот файл в браузере, Вы можете посмотреть, как кроссворд выглядит и правильно ли он работает.

Шрифт должен отображаться корректно, но, когда Вы этот фал загрузите на сервер, могут возникнуть проблемы с кодировкой. Скорее всего, шрифт отображаться будет неправильно.

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse Crossword

Чтобы этого не произошло, надо в сохраненном HTML файле изменить кодировку. Откройте сохраненный файл в php-редакторе notepad++, выберите вверху «Encoding» - кодировки, а затем «Convert to UTF-8 Without BOM» - преобразовать в UTF-8 без BOM.

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse Crossword

Теперь Ваш кроссворд в браузере должен отображаться правильно.

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse Crossword

Чтобы посмотреть готовый кроссворд и попробовать его решить, щелкните по картинке ниже.

Как создать кроссворд на сайте | Создаем кроссворд в Eclipse Crossword

__________________________
К уроку 160. Как создать свой канал на Youtube

6 Comments

  1. Несколько раз пыталась создать кроссворд на сайте,
    программа скачана, но вот так до конца и не завершила

  2. Юрий, подскажите, у меня проблема с этой программой. Пишу слово в верхнем окошке, потом пишу ключ к этому слову, а само слово исчезает. Соответственно, добавить в список ничего не могу, программа пишет “сначала слово введите”. Напечатаю слово, в окошке “word” при любом действии, даже просто enter и слово пропадает, что делать?

    • Елена,Я думаю без проблем эту проблему решим. Я давно писал эту статью, но думаю, разберусь быстро

  3. Спасибо большое за статью, все очень доступно и понятно. Кроссворд составила. Все получилось. Огромное спасибо. 🙂

    Елена
  4. Спасибо! Все понятно. Но дошла до изменения кодировки и ничего не получается.Второй день пытаюсь разобраться.Мне очень нужно это для работы (на уроке в школе).

    Lara

Leave a Reply

Яндекс.Метрика