Новорічні свята тривають, з чим всіх Вас і вітаю. Сьогодні я розповім Вам, як не тільки створити кросворд для блогу чи сайту, але і русифікувати його, зробити гарне оформлення, прибрати відповіді з коду, а також зробити клітини для букв ключового слова.
Для створення онлайн-кросворду використовується спеціальна програма під назвою Eclipse Crossword. Завантажити програму можна на офіційному сайті.
Якщо Вас цікавить створення кросвордів для книги, рекомендую почитати цю статтю.
Як створити кросворд в Eclipse Crossword
Після установки запускаємо програму. Програма пропонує нам 2 варіанти - зробити новий кросворд, або змінити раніше збережений проект кросворду.
Натискаємо кнопку Next.
У наступному вікні пропонується створити новий список слів для кросворду, або створити кросворд з раніше створеного і збереженого списку.
У третьому вікні приступаємо до створення відповідей і питань до кросворду. В поле Word вбиваємо відповідь, в поле Cue for this word вписуємо питання.
За допомогою кнопки Tools ... можна відкрити раніше створений список питань і відповідей, Add word to list додати питання і відповідь в список слів, а також видалити слово за допомогою Remove word.
Натискаємо Next. Задаємо ім'я кросворду, і можна написати своє ім'я.
На п'ятому кроці задаємо ширину кросворда в клітинах. Зазвичай програма сама підбирає оптимальну ширину кросворда.
На наступному етапі програма вже згенерує готовий кросворд. Якщо цей варіант Вас не влаштує, можете натиснути на посилання «Make another puzzle like this one» і програма перегенерірует розташування слів.
На цьому роботу з програмою Eclipse Crossword можна завершити.
Одержаний кросворд виглядає не тільки непрезентабельно, але і містить непотрібні речі, наприклад кнопку Solve, при натисканні на яку відповідь сам собою вписується в клітини. Більш того, всі відповіді можна подивитися в вихідному коді. І ще не завадило б русифікувати кросворд - не всі ж розуміють англійську.
У коді знаходимо такі рядки:
І після них, видаливши всі, вставляємо ось цей код:
Кросворд русифікований, тепер потрібно зробити так, щоб кросворд і питання до нього раполагаться поруч. Стандартне розташування кросворду і блоку питань виглядає так:
Для того, щоб змінити розташування елементів кросворда, знайдіть наступний рядок:
І ДОДАЙТЕ до неї ось це:
Тепер розташування елементів кросворда виглядає так:
Йдемо далі. Напевно Вам не сподобається те, що кросворд розташований по лівому краю веб-сторінки, а не по центру. Тому потрібно відразу після відкриваючого тега body вставити це:
Не забудьте закрити тегом div в самому кінці коду всієї веб-сторінки перед закриває тегом body.
Тепер необхідно знайти і видалити з коду відповіді до кросворду. Знаходяться вони в цьому рядку:
Рядок видаляємо цілком!
Від відповідей позбулися і тепер переходимо до останнього - оформлення клітин для букв від ключового слова. На жаль, пронумерувати їх у вигляді тексту не вийде, тому доведеться використовувати цифри у вигляді зображень. Цифри-картинки (від 1 до 9) Ви можете завантажити за посиланням.
Все готово для редизайну клітин букв ключового слова.
Дізнаємося id клітини. В даному прикладі це c001002.
Таким же чином задаємо оформлення для інших клітин, вказуючи шлях до відповідних цифрам-картинкам і змінюючи колір фону.
Ви можете змінити загальне оформлення кросворду (фон, шрифт і т.д.) на свій розсуд. Як приклад подивіться, як я змінив новорічний кросворд.
Успіхів у створенні і розгадуванні онлайн-кросвордів!