Инструкция: как сделать свой симворд на форуме (ВВ коды и сайты)

Каждый желающий может выложить свой симворд в этом разделе. Но как его оформить? Если вы не хотите заморачиваться с ВВ-кодами на форуме или форма вашего кроссворда слишком сложна, вы вполне можете использовать обычную картинку. Но для тех, кто хочет все-таки оформить симворд функциональным (с возможностью ввода текста и нумерацией ячеек), ниже представлена инструкция по оформлению кроссвордов с помощью спец. кодов.
Сразу скажу, что разобраться сходу в нем очень тяжело, а новичкам может показаться и вовсе не под силу. Но на самом деле, поняв принцип, вы сможете с легкостью штамповать свои формы и шаблончики кроссов с помощью этой темки. Если еще не перепугались и не передумали, тогда поехали

Предварительная подготовка кроссворда​

Для начала я рекомендую оформить сам кроссворд в виде картинки, где-нибудь в Экселе или на клетчатом листике так, чтобы вы смогли наглядно видеть количество ячеек, строк и их последовательность. Возьмем для примера что-нибудь простое:

​

Я переведу эту схемку в эксель или в гугл таблицы (это делать не обязательно, но для более сложных примеров пригодится 100%).

​

Здесь лучше видно границы нашего кроссворда, его структуру и последовательность элементов: 4 строки по 7 ячеек (включая белые - пустые и серые/желтые - для текста).
Теперь, когда мы разобрались, что где находится, можно приступать к созданию симворда.

ВВ-коды для симворда​

Мы будем строить его как дом из кирпичиков, начиная сверху-вниз и слева-направо (как при чтении или письме). То есть сначала создаем первую верхнюю строку и заполняем ее ячейками от самой левой до самой правой. Чтобы начать складывать наш мини-лего, давайте разберем ВВ-коды для их создания:

[TABLE2] [/TABLE2] - Основной элемент, создающий блок с кроссвордом, все содержимое находится внутри этих тегов.

[TR] [/TR] - Строка нашего кроссворда, все ячейки находятся внутри этих тегов.

[TD2] [/TD2] - Видимая ячейка кроссворда (сюда можно вписать готовый текст или вставить поле для ввода своего варианта). Можно задать цвет ячейки на свой вкус, для этого напишите [TD2=#b7c5ec] [/TD2] (цвета можно подсмотреть в любом граф. редакторе или взять из этой подсказки).

[input][/input] - Поле для ввода своего текста, вставляется внутрь ячейки и выглядит так: [TD2][input][/input][/TD2]. Внутрь тега ничего вписывать не нужно.

[TD3] [/TD3] - Пустая ячейка кроссворда (на нашей экселевской схеме они белого цвета). Если в строке идут несколько таких пустых ячеек подряд, их можно объединить в одну с помощью опции [TD3=5] [/TD3] (в данном случае 5 ячеек будут объединены в 1).

Для тех, кто хорошо знает html таблицы, наверняка все будет понятно и без слов. Но остальных попрошу не пугаться раньше времени, сейчас мы эту всю страшноту разберем подробнее!

Переходим к практике​

Перво-наперво создаем основу кроссворда:

Code:

[TABLE2] [/TABLE2]

У нас 4 строки, давайте их сразу и добавим:

Code:

[TABLE2]
[TR] [/TR]
[TR] [/TR]
[TR] [/TR]
[TR] [/TR]
[/TABLE2]

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

Code:

[TR]
[TD2][SIZE="1"]1[/SIZE][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2=#FFD700][input][/input][/TD2]
[TD3=3][/TD3]
[/TR]

В первую ячейку я вписала цифру 1 и дала ей минимальный размер, в 4й ячейке задала желтый цвет, ну а последние 3 пустых ячейки объединила в одну, хотя вы можете написать 3 раза по [TD3][/TD3], сути это не изменит.

Вот такая строка у нас получится в итоге (последние 3 ячейки невидимые, не забываем):

1

​

Теперь по аналогии создаем остальные строки.
2-я строка: 2 пустых ячейки, 1 нумерованная, 1 цветная и 3 обычных.

Code:

[TR]
[TD3=2][/TD3]
[TD2][SIZE="1"]2[/SIZE][input][/input][/TD2]
[TD2=#FFD700][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[/TR]

3-я строка: 1 пустая, 1 нумерованная, 1 обычная, 1 цветная и 3 обычных.

Code:

[TR]
[TD3][/TD3]
[TD2][SIZE="1"]3[/SIZE][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2=#FFD700][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[/TR]

4-я строка: 1 нумерованная, 2 обычных, 1 цветная, 2 обычных и 1 пустая.

Code:

[TR]
[TD2][SIZE="1"]4[/SIZE][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2=#FFD700][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD3][/TD3]
[/TR]

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

Code:

[TABLE2]
[TR]
[TD2][SIZE="1"]1[/SIZE][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2=#FFD700][input][/input][/TD2]
[TD3=3][/TD3]
[/TR]
[TR]
[TD3=2][/TD3]
[TD2][SIZE="1"]2[/SIZE][input][/input][/TD2]
[TD2=#FFD700][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[/TR]
[TR]
[TD3][/TD3]
[TD2][SIZE="1"]3[/SIZE][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2=#FFD700][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[/TR]
[TR]
[TD2][SIZE="1"]4[/SIZE][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2=#FFD700][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD2][input][/input][/TD2]
[TD3][/TD3]
[/TR]
[/TABLE2]

Нам остается убрать переносы строк и объединить все теги в одну сплошную строку (это нужно для того, чтобы таблица не уехала вниз).

1
		2
	3
4

​

Наш симворд готов!

Небольшой постскриптум:

• Вы можете перекрасить свой кроссворд в абсолютно любые цвета.
• Цифры в ячейках можно также форматировать, как и обычный текст (задать им цвет, размер и шрифт).
• Можно не использовать форму для ввода букв, а вставить в ячейки готовый текст с цветом фона (тогда читатель сможет выделять ячейки и видеть ответы).
• С помощью ВВ кодов можно создать любую форму кроссворда из кубиков (примеры: 1, 2, 3, 4).

 

Поделюсь своим способом сократить время колупания кода. Если кто-то соберется делать большой кроссворд, может пригодиться.

На основе схемы кроссворда я в блокноте делаю такую заготовку.

И - инпут - обычная ячейчка для ввода текста
Н - номер - обычная ячейка с номером ответа
П - пустая - невидимая ячейка

Если строки ровные, значит, ничего не пропустила. Вставляю в начало и конец каждой строки части тега TR, а также общий тег TABLE2 в начало и конец всей таблицы.



Открываю окно замены (Ctrl+H) и с помощью "Заменить все" по очереди меняю:

П = [TD3][/TD3]
И = [TD2][input][/input][/TD2]
Н = [TD2][SIZE="1"]0[/SIZE][input][/input][/TD2]

Все номерные ячейки получаются с нулями, поэтому потом я последовательно заменяю нули на числа, даже не выходя из окна замены. Сначала 0 на 1, потом 0 на 2, потом 0 на 3 и так далее. В итоге все номера разные и по порядку.

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

Ну и напоследок: Dara_Savelly, спасибо за инструкцию по назначению кодов

 

orange_cat, я вижу, у тебя наконец получилось сделать табличку. Единственное - в завершении надо было убрать переносы строк. Можешь сама посмотреть через "правку" сообщения, как выглядит. Если хочешь создать свой симворд, придумай его наполнение и опубликуй в отдельной теме. Только не забудь предварительно посмотреть, что получается, через "расширенный режим" (кнопка рядом с отправкой ответа), чтобы поправить свои ошибки ДО публикации.