1. Набор в модераторы и разработчики

    Мы ищем энтузиастов, готовых помочь сделать DaraSims лучше!
    Если у тебя есть желание стать частью персонала, взяться за развитие разделов форума или делиться с читателями интересными статьями, присоединяйся!
    Скрыть объявление

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

Тема в разделе "Симворды", создана пользователем Dara_Savelly, 18 июл 2015.

  1. Dara_Savelly

    I ❤ Kharkov
    Dara_Savelly
    Сообщения:
    7.945
    Симпатии:
    1.027
    Баллы:
    225
    Пол:
    Женский
    Репутация:
    7.138
    Награды:
    17
    Каждый желающий может выложить свой симворд в этом разделе. Но как его оформить? Если вы не хотите заморачиваться с ВВ-кодами на форуме или форма вашего кроссворда слишком сложна, вы вполне можете использовать обычную картинку. Но для тех, кто хочет все-таки оформить симворд функциональным (с возможностью ввода текста и нумерацией ячеек), ниже представлена инструкция по оформлению кроссвордов с помощью спец. кодов.
    Сразу скажу, что разобраться сходу в нем очень тяжело, а новичкам может показаться и вовсе не под силу. Но на самом деле, поняв принцип, вы сможете с легкостью штамповать свои формы и шаблончики кроссов с помощью этой темки. Если еще не перепугались и не передумали, тогда поехали :smile:

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

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

    [​IMG]

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

    [​IMG]

    Здесь лучше видно границы нашего кроссворда, его структуру и последовательность элементов: 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 таблицы, наверняка все будет понятно и без слов. Но остальных попрошу не пугаться раньше времени, сейчас мы эту всю страшноту разберем подробнее! :smile:

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

    Перво-наперво создаем основу кроссворда:
    Код:
    [TABLE2] [/TABLE2]
    У нас 4 строки, давайте их сразу и добавим:
    Код:
    [TABLE2]
    [TR] [/TR]
    [TR] [/TR]
    [TR] [/TR]
    [TR] [/TR]
    [/TABLE2]
    Теперь переходим к созданию ячеек. В первой строке у нас идет следующая последовательность: 1 нумерованная ячейка, 2 обычных, 1 цветная и 3 пустых.
    Код:
    [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 обычных.
    Код:
    [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 обычных.
    Код:
    [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 пустая.
    Код:
    [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]
    [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

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

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

    Старожил
    Asara
    Сообщения:
    2.853
    Симпатии:
    198
    Баллы:
    135
    Пол:
    Женский
    Репутация:
    2.460
    Награды:
    1
    Спасибо за интересный урок! Обязательно попробую!
     
     
  3. Lamare

    ☁☀
    Lamare
    Сообщения:
    10.619
    Симпатии:
    4.962
    Баллы:
    340
    Репутация:
    13.323
    Награды:
    21
    Поделюсь своим способом сократить время колупания кода. Если кто-то соберется делать большой кроссворд, может пригодиться.

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

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

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

    [​IMG]

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

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

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

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

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

    Новичок
    orange_cat
    Сообщения:
    21
    Симпатии:
    0
    Баллы:
    0
    Репутация:
    -4
    Награды:
    0

    1
    2
    3
    4


    *****
     
     
  5. Lamare

    ☁☀
    Lamare
    Сообщения:
    10.619
    Симпатии:
    4.962
    Баллы:
    340
    Репутация:
    13.323
    Награды:
    21
    orange_cat, я вижу, у тебя наконец получилось сделать табличку. Единственное - в завершении надо было убрать переносы строк. Можешь сама посмотреть через "правку" сообщения, как выглядит. Если хочешь создать свой симворд, придумай его наполнение и опубликуй в отдельной теме. Только не забудь предварительно посмотреть, что получается, через "расширенный режим" (кнопка рядом с отправкой ответа), чтобы поправить свои ошибки ДО публикации.
     
     
  6. Shroedinger`s Сat

    Новичок
    Shroedinger`s Сat
    Сообщения:
    10
    Симпатии:
    0
    Баллы:
    0
    Репутация:
    11
    Награды:
    0

    1


    Я тоже попробовал
     
    Последнее редактирование модератором: 8 янв 2020
     
  7. KostyaRiKi

    Активист
    KostyaRiKi
    Сообщения:
    603
    Симпатии:
    1.330
    Баллы:
    105
    Репутация:
    2.300
    Награды:
    6
    В связи с тем, что на нашем сайте появились первые
    Японский кроссоврд или нонограмма — головоломка, в которой, в отличие от обычных кроссвордов, зашифрованы не слова, а изображения. Изображения зашифрованы числами, расположенными слева от строк, а также сверху над столбцами. Количество чисел показывает, сколько групп чёрных (либо своего цвета, для цветных кроссвордов) клеток находятся в соответствующих строке или столбце, а сами числа — сколько слитных клеток содержит каждая из этих групп
    , то должен появится пост, который содержит какую-нибудь информацию по созданию вот этих чудесных головоломок.

    Итак, пока мы нашли два способа, которые помогут вам сделать Японский симворд.
    1) Через BB-коды. Выше представлен пост, который поможет вам сделать такую картинку. Добавлю только несколько пунктиков, которые "облегчат" ваши страдания.Пример такого симворда можно посмотреть вот в этой теме: Японский симворд №14 "Лама"
    • Не забудьте завести блокнот под это дело. Если вы будете делать симворд только в визуальном редакторе на darasims.com, то есть вероятность, что вы потеряете своё творение. И не забудьте воспользоваться лайфхаком Lamare, который тоже облегчит вашу жизнь. Обратите внимание, что [input][/input] вставлять не нужно.
      [​IMG]
      [​IMG]
    • Не забудьте нарисовать/найти пискельную картинку. Она вам очень сильно поможет в создании Японского симворда. И расчертите её, чтобы знать, сколько пискелей/квадратиков занимает каждый цвет!
      [​IMG]

    Добавить пока нечего, если что-то ещё понадобится, то отдельным сообщением я напишу необходимую информацию. И ещё скажу, чтобы делать японский симворд через BB-коды, то будьте осторожны и внимательны!

    2) Через сайт GrandGames. В нём существуют множество головоломок (а также и нонограмм), а вот ссылка на этот сайт.
    Скрытое содержание:
    Скрытый текст: Содержание могут увидеть только группы: Администратор, Куратор, Модератор, Разработчик, СоАдминистратор, Юзер.
    Добавить нечего, только там вы можете найти, как сделать японский симворд. Обязательно нужна регистрация.

    Творческого успеха и креативных идей)
     
     

Поделиться этой страницей