Помощь в пользовании и оформлении

Аватара пользователя
swed.loki
Сообщения: 750
Зарегистрирован: 24.01.2015, 22:16

Сообщение swed.loki »

Копирование статьи с картинками и ссылками с сайта на форум или с форума на сайт
Что понадобится
Конвертер HTML -> BB-code
HTML To BB Code Converter http://www.garyshood.com/htmltobb/

Визуальный редактор BB-code
WysiBB http://www.wysibb.com/demo/

Конвертер HTML -> BB-code и BB-code -> HTML
Advanced Meta Tag Generator http://onlinehtmltools.com/bbcode-html- … hpdemo.php

Мастер публикации изображений
Image Uploader http://zenden.ws/ru/imageuploader
Краткий мануал
Конвертер HTML -> BB-code HTML To BB Code Converter
Из всех перепробованных конверторов, это единственный, который правильно преобразует гипертекст с мнемониками HTML.

Можно конвертировать целиком страницу, указав её адрес в поле "Website" и нажав на кнопку "Submit URL". Но скорей всего из-за несовпадения кодировок вместо кириллицы в результате преобразования получатся крякозябры.
[картинка утрачена · images.vfl.ru]
Визуальный редактор BB-code WysiBB
Используется для правки текста с BB-кодами.
Хорош тем, что он визуальный Изображение
[картинка утрачена · images.vfl.ru]
Кнопки с BB-кодами интуитивно понятны и имеют подсказки.

Замена URL-адресов не требует поиска в тексте статьи ВВ-тега с нужной ссылкой, достаточно:
1. Выделить ЛКМ (левой кнопкой мыши) нужную картинку/ссылку;
2. Нажать подсвеченную кнопку в панели;
3. Внести правку.
Под позицией 4 — кнопка переключения Визуальное отображение Текст с ВВ-кодами для форума.
Как получить HTML код статьи
Самый простой способ, работает в большинстве браузеров:
1. Загрузить страницу;
2. Нажать комбинацию клавиш "Ctrl-U", откроется окно/вкладка с исходным кодом страницы;
3. Нажать комбинацию клавиш "Ctrl-F", откроется "Поиск на странице"
4. Ввести в строке поиска слова первые слова статьи, т.е. найти её начало.
5. Выделить необходимый фрагмент, скопировать.

Самый лёгкий способ, работает в Mozilla Firefox:
1. Загрузить страницу;
2. Выделить текст;
3. На выделенном тексте щёлкнуть ПКМ (правой кнопкой мыши) выбрать пункт "Исходный код выделенного фрагмента";
4. Откроется страница с выделенным фрагментом исходного кода. Скопировать.
Конвертер HTML -> BB-code и BB-code -> HTML Advanced Meta Tag Generator
Хорош тем, что конвертирует и просто скопированный текст (даже из Ворда), и текст с ВВ-кодами, и текст в HTML разметке.
Минусы в том, что при конвертеции из HTML в ВВ-коды пропускает мнемоники HTML, которые потом придётся вычищать вручную.
[картинка утрачена · images.vfl.ru]
1. Если надо конвертировать скопированный текст: окно для вставки текста, скопированного со страницы, или ввода с клавиатуры;
2. Если надо конвертировать HTML код статьи: отмечаем чекбокс HTML, вставляем текст в HTML разметке, снимаем галочку — возвращаемся в визуальный редактор.
3. Если надо конвертировать текст с ВВ-кодами Нажимаем иконку ворда, вставляем текст с ВВ-кодами, ещё раз нажимаем — возвращаемся в визуальный редактор.
4. По кнопке "Submit" получаем результат в трёх полях: Preview — предпросмотр, xHTML Code Output — код статьи в HTML, Forum BBCode Output — ВВ-код статьи для форума.
Как и зачем менять картинки в статье
Изображения надо перезаливать на сторонний фотохостинг, чтобы они оставались в копии статьи даже если будет удалён оригинал.

gav нам показал офигенную программу для загрузки изображений на фотохостинг.

#p32261,gav написал(а):Как и куда загружать картинки.
Устанавливаем эту программу http://zenden.ws/ru/imageuploader
Настраиваем, как на видео. Пользуемся.
Запускаем Image Uploader
[картинка утрачена · images.vfl.ru]
Выбираем пункт "Из интернета", появляется окно "Загрузчик изображений", оставляем его открытым, переходим на страницу в браузере.
Щёлкаем ПКМ на картинке, выбираем пункт "Копировать ссылку на изображение" ("Копировать адрес изображения", "Копировать URL картинки") и всё, ссылка на картинку уже добавлена в "Загрузчик изображений", далее по инструкции к программе.

Единственное, что замечу — при замене картинок в статье надо заливать и заменять по одной картинке, т.е. по очереди, потому что при заливке нескольких изображений они будут отсортированы по названию изображения, а не по очерёдности их добавления в список загрузки.
Аватара пользователя
Dmitrу"
Сообщения: 27108
Зарегистрирован: 03.09.2013, 21:15

Сообщение Dmitrу" »

swed.loki, расскажи пожалуйста как правильно пользоваться функцией "Обтекание изображения". С примерами и хитростями..

[float=left]
Текст текст текст текст Текст текст текст текст Текст
текст текст текст Текст текст текст текст Текст текст
текст текст Текст текст текст текст Текст текст текст
текст Текст текст текст текст Текст текст текст текст
Текст текст текст текст Текст текст текст текст Текст
текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст [картинка утрачена · images.vfl.ru] [/float]

Я так понял, что это работает, только если отдельно-принудительно переносить каждую строку сообщения, а это конечно же неприемлемо для обычного пользователя. Если простого решения не будет, то я удалю эту функцию из окна сообщения.

[float=left]
Текст текст текст текст Текст текст текст текст Текст
текст текст текст Текст текст текст текст Текст текст
текст текст Текст текст текст текст Текст текст текст
текст Текст текст текст текст Текст текст текст текст
Текст текст текст текст Текст текст текст текст Текст
текст текст текст Текст текст текст текст Текст текст
текст текст Текст текст текст текст Текст текст текст
текст Текст текст текст текст Текст текст текст текст
Текст текст текст текст Текст текст текст текст Текст
текст текст текст Текст текст текст текст Текст текст
текст текст Текст текст текст текст Текст текст текст
текст Текст текст текст текст Текст текст текст текст
Текст текст текст текст
Текст текст текст текст Текст текст текст текст [/float] [картинка утрачена · images.vfl.ru]
Аватара пользователя
swed.loki
Сообщения: 750
Зарегистрирован: 24.01.2015, 22:16

Сообщение swed.loki »

Функция "Обтекание изображения"
[картинка утрачена · funkyimg.com]
Порядок действий:
1. Выбрать строку, после которой текст начнёт обтекать объект.
2. Вставить объект и выделить мышкой.
3. Нажать кнопку "Обтекание изображения"
4. Выбрать направление обтекания. На иконке буква "А" показывает с какой стороны будет объект относительно текста.
5. Обтекаемый текстом объект должен быть заключён в теги "float":
[flоat=right][videо]http://www.youtube.com/watch?v=yHJ7GNJt2Hk[/videо][/flоat]
Объектом может быть видео или картинка, главное, чтобы текста было много, иначе в обтекании нет смысла, да и выглядит некрасиво.

ПримерТекст сообщения
[картинка утрачена · funkyimg.com]

Как выглядит

Ut enim leo, tempor ut iaculis vitae, dictum non augue? Ut commodo dolor nec dolor venenatis imperdiet. Etiam ut erat est. Vestibulum scelerisque finibus commodo. Etiam euismod dui ligula, eu sagittis quam fermentum at. Fusce odio odio, malesuada blandit lorem id, dapibus faucibus nibh? Fusce sollicitudin neque urna, dictum placerat tellus aliquet at.
[float=left] [картинка утрачена · funkyimg.com] [/float]
Vivamus eleifend ultricies massa in volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sed leo quis est bibendum sagittis. Integer consequat sodales enim eu consectetur. Nulla suscipit elit vitae maximus pulvinar. Integer at mi tellus! Quisque dapibus urna a neque ornare laoreet. Cras venenatis in libero id ultrices? Praesent finibus gravida neque et sodales. Ut placerat eleifend pulvinar. Praesent ornare suscipit diam ac porttitor. Donec non euismod magna.
[float=right][/float]
Sed ultricies quis dolor ac placerat? Nam sollicitudin, magna eu ullamcorper luctus, nunc massa fermentum justo, varius cursus lectus turpis eu risus. Pellentesque ac mauris vitae nisl sollicitudin pretium ut ut risus! Nullam hendrerit ac justo feugiat convallis. Aenean placerat ante a purus tristique, sit amet tincidunt mauris semper. Cras arcu dolor, congue quis accumsan vel, feugiat nec augue. Integer ut finibus augue. Curabitur luctus enim et lacus posuere, vitae pulvinar odio cursus. Cras turpis felis, gravida nec laoreet vel, dictum ut lectus.

Quisque eu blandit ligula. Aliquam mollis risus consequat quam mattis; ut fermentum leo finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean sit amet metus sit amet justo scelerisque dignissim. Donec vel accumsan mi. Mauris quam lacus, auctor tincidunt risus vel, aliquet eleifend quam. Praesent maximus purus massa, a congue odio facilisis eu.

Vestibulum eleifend ex ac mauris aliquet sollicitudin vitae nec nibh. Mauris nec nulla accumsan, ornare enim at, laoreet diam. Donec ultricies semper nisi quis facilisis. Morbi interdum vehicula ultricies. Nam vel pharetra orci. Donec lobortis hendrerit accumsan. Duis venenatis mi blandit vestibulum aliquet. In euismod felis eget elit consectetur tincidunt. Integer semper massa eget neque venenatis, vitae tristique ipsum commodo. Nulla neque odio, ornare eget tempor at, finibus nec magna?
Аватара пользователя
swed.loki
Сообщения: 750
Зарегистрирован: 24.01.2015, 22:16

Сообщение swed.loki »

Dmitry писал(а):текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст
Для заполнения пустого пространства текстом обычно используют панграмму Lorem Ipsum.
Где взять:
— на сайте Lorem Ipsum есть генератор этого текста;
— в Microsoft Word (версии 2007 и выше) ввести =lorem(число1,число2) (без пробелов, всё слитно), где число1 — количество абзацев, число2 — количество предложений в каждом абзаце, нажать клавишу "Enter".
Аватара пользователя
swed.loki
Сообщения: 750
Зарегистрирован: 24.01.2015, 22:16

Сообщение swed.loki »

Панель редактирования сообщения
[картинка утрачена · funkyimg.com]
Почти для всех кнопок меню есть два варианта применения:
Вариант 1:
1.Выделить ЛКМ текст
2. Нажать ЛКМ нужную кнопку меню
3. Выделенный текст будет заключён в соответствующий ВВ-код

Вариант 2:
1.Нажать ЛКМ нужную кнопку меню
2. В поле ответа появятся теги ВВ-кода
3. Набрать/вставить между тегами текст

В таблице под объектом подразумевается блок текста, изображение, видео и т.д.

Описание кнопок панели меню

№ поз.

Название

BB-код

Описание

Применение

1

Шрифт

[fоnt=Название шрифта ] ...текст...[/fоnt ]

Замена шрифта по умолчанию на шрифт из списка

2

Размер

[sizе=Размер шрифта ]...текст...[/sizе ]

Замена размера шрифта по умолчанию на размер из списка

3

Жирный

...текст...[/b ]

Выделение текста жирным шрифтом

4

Наклонный

...текст...[/i ]

Выделение текста курсивным шрифтом

5

Подчёркнутый

...текст...[/u ]

Подчёркивание текста

6

Зачёркнутый

[s ]...текст...[/s ]

Зачёркивание текста

7

Выравнивание по левому краю

[align=left ]...объект...[/align ]

Выравнивание объекта по левому краю

8

Выравнивание по центру

[align=center ]...объект...[/align ]

Выравнивание объекта по центру

9

Выравнивание по правому краю

[align=right ]...объект...[/align ]

Выравнивание объекта по правому краю

10

Направление обтекания

[float=left ]...объект...[/float ]
или
[float=right ]...объект...[/float ]

Обтекание объекта текстом слева или справа

Ссылка

11

Ссылка

...объект (описание ссылки)...[b][/url ... 815]Ссылка

13

Изображение

Изображениевеб-ссылка на изображение[/img ]

Вставка графического изображения

14

Видео

[video ]веб-ссылка на видеоролик[/video ]

Вставка видео изображения

Ссылка

15

Скрытый текст

[hide=кол-во сообщений ]...объект...[/hide ]

Объект может посмотреть только участник форума, разместивший определённое кол-во сообщений

16

Цитата

[quote ]...объект...[/quote ]

Выделение объекта в отдельный блок.
Используется для цитирования

Ссылка

17

Код

Код: Выделить всё

[/b]...текст программного кода...[b][/code ][/b]

Программный код будет интерпретироваться как простой текст

[b]18[/b]

Цвет

[b][color=название цвета ][/b]...текст...[b][/color ][/b]

Замена цвета текста по умолчанию на цвет из списка

[b]19[/b]

Таблица

[b][table[/b][b] ][/b]
[b][tr ][/b]
[b][td ][/b]...объект...[b][/td ][/b]
[b][/tr ][/b]
[b][/table ][/b]

Вставка таблицы

[b]20[/b]

Смайлик

[b]:[/b]название[b]:[/b]

Вставка смайлика из стандартного списка

[b]21[/b]

Виртуальная клавиатура

—

Вставка букв и символов

Дроби, копирайты, стрелочки, градусы и т.д.

[b]22[/b]

Дополнительно

—

Раскрывающийся список дополнительных кнопок

[b]23[/b]

Имя читателя

[b][you ][/b]

Вставляет ник форумчанина, читающего сообщение.

Ты — [b](ouy)[/b], верно? [img]img/379ba06bc392d8c0794643ec38ca5de45d52aeda.gif[/img]

[b]24[/b]

Добавлено спустя…

[b][add ][/b]

Показывает время, прошедшее между редактированиями сообщения

[b]25[/b]

Поясняющий текст

[b][аbbr="Поясняющий текст" ][/b]Текст, который надо разъяснить[b][/аbbr ][/b]

Подсказка в тексте

[b]26[/b]

Маркированный текст

[b][mark ][/b]...текст...[b][/mark ][/b]

Выделение текста жёлтым фоном (маркером)

Применяется при цитировании для обращения внимания на какой-либо текст, при этом не искажает его форматирование, несущее дополнительную смысловую нагрузку

[b]27[/b]

Текст в верхнем индексе

[b][sup ][/b]...текст...[b][/sup ][/b]

Вставка текста в верхнем индексе

Степени чисел, хим. формулы и т.д.

[b]28[/b]

Текст в нижнем индексе

[b][sub ][/b]...текст...[b][/sub ][/b]

Вставка текста в нижнем индексе

Логарифмы, хим. формулы и т.д.

[b]29[/b]

Горизонтальная линия

[b][hr ][/b]

Вставка горизонтальной линии

Для разделения сообщения на "независимые" разделы

[b]30[/b]

sm

Кнопка дополнительных смайликов

[b]31[/b]

Отправить

Кнопка публикации сообщения

[b]32[/b]

Посмотреть

Кнопка предварительного просмотра сообщения
Аватара пользователя
Dmitrу"
Сообщения: 27108
Зарегистрирован: 03.09.2013, 21:15

Сообщение Dmitrу" »

Надпись "Отредактировано Пользователем (2015-09-23 12:23:11)"
Такая надпись раздражает, копируется в следующую цитату. Теперь :
Надпись не будет появляться в вашем сообщении, если вы исправляли ошибки в течении 20 минут после первоначального написания сообщения. Пока тестируем и смотрим, корректно ли работает. Результатами теста делимся.

Спасибо форумчанину swed.loki за написание скрипта
Аватара пользователя
Уроборос
Сообщения: 304
Зарегистрирован: 02.07.2015, 06:50

Сообщение Уроборос »

Dmitry писал(а):Надпись "Отредактировано Пользователем (2015-09-23 12:23:11)"
Такая надпись раздражает, копируется в следующую цитату. Теперь :
Надпись не будет появляться в вашем сообщении, если вы исправляли ошибки в течении 20 минут после первоначального написания сообщения. Пока тестируем и смотрим, корректно ли работает. Результатами теста делимся.

Спасибо форумчанину swed.loki за написание скрипта
9/23 12:23:11 Изображение
Отредактировал через несколько секунд..
И снова..Надписи нет!
Тест успешно пройден. Изображение

Отредактировано Уроборос (09.09.2015 23:24:44)
Аватара пользователя
Уроборос
Сообщения: 304
Зарегистрирован: 02.07.2015, 06:50

Сообщение Уроборос »

Сейчас отредактировал сообщение в теме "23 сентября" и надпись появилась.
Аватара пользователя
Dmitrу"
Сообщения: 27108
Зарегистрирован: 03.09.2013, 21:15

Сообщение Dmitrу" »

Уроборос писал(а):Сейчас отредактировал сообщение в теме "23 сентября" и надпись появилась.
А ссылка где, ёшкин кот ?
Критическая дата 23 сентября

не знаю, что-то не сработало, вероятно какая-то аномалия

Критическая дата 23 сентября - перестало работать Изображение
Аватара пользователя
Уроборос
Сообщения: 304
Зарегистрирован: 02.07.2015, 06:50

Сообщение Уроборос »

Отредактировал через пару минут,надписи нет Критическая дата 23 сентября Изображение
Ответить

Вернуться в «Forum»