| Виход | Дата: Понедельник, 04.07.2011, 10:03 | Сообщение # 1 |
 шаман старший
Группа: Администраторы
Сообщений: 118
Статус: Offline
| Как красиво и правильно оформлять сообщения/темы
_______или
Как правильно пользоваться bb-кодами
1 ЧАСТЬ
Содержание
____1 ЧАСТЬ
____Что такое BBCode?
_Основы
Пункт 1. Жирный текст
Пункт 2. Наклонный текст
Пункт 3. Цвет текста
Пункт 4. Размер текста
_Дополнительные возможности
Пункт 5. Спойлеры
Пункт 6. Цитирование
Пункт 7. Изображения
Пункт 8. Ссылки
Пункт 9. Видео
_Комбинирование тегов
Пункт 10. Простое комбинирование
Пункт 11. Сложное комбинирование
____2 ЧАСТЬ
_Специальные возможности
Пункт 12. Показ кода текста без форматирования
Пункт 13. Свои цвета для текста
Пункт 14. Выравнивание текста
_Использование BBCode
Пункт 15. Общие указания по использованию BBCode
Пункт 16. Общие указания по грамотному оформлению гайдов
Что такое BBCode?
BBCode — это специальный вариант HTML. Сам BBCode похож по стилю на HTML, теги заключены в квадратные скобки [ и ], а не в < и >; он даёт больше возможностей управления тем, как выводятся данные. При использовании некоторых шаблонов вы сможете добавлять BBCode в ваши сообщения, пользуясь простым интерфейсом, расположенным над полем для ввода текста. Но даже в этом случае данное руководство может оказаться полезным.[color=red]
При создании или редактировании сообщения, вы видите над ним панель, изображенную выше. Именно к ней я и буду обращаться на протяжении всей статьи.
Основы
Все, что написано под этим пунктом научит вас основам форматирования сообщений.
Пункт 1. Жирный текст
Чтобы сделать текст жирным выделите нужный текст и нажмите кнопку B, изображенную выше ИЛИ вручную пропишите слева от текста b в квадратных скобках и справа от текста /b в квадратных скобках.
И в том и в другом случае у вас должно получиться:
Код:
этот текст будет жирным
этот текст будет жирным
Пункт 2. Наклонный текст
Чтобы сделать текст наклонным (выделить его курсивом) выделите нужный текст и нажмите кнопку I, изображенную выше ИЛИ вручную пропишите слева от текста i в квадратных скобках и справа от текста /i в квадратных скобках.
И в том и в другом случае у вас должно получиться:
Код:
этот текст будет наклонным
этот текст будет наклонным
Пункт 3. Цвет текста
Стандартный цвет текста - белый.Будьте ОЧЕНЬ ОСТОРОЖНЫ с выбором цвета, иначе есть риск, что ничего не будет видно.
Чтобы закрасить текст в какой-нибудь другой цвет автоматически, выделите нужную область текста. Из списка выбора вверху, называемого "цвет шрифта", выберите красный цвет.
3.1) Чтобы закрасить текст в какой-нибудь другой цвет вручную, слева от текста напишите [color=цвет], а справа [/сolor]. Вместо ключевого слова цвет используйте названия цветов по английски, у нас это red.
Кстати, вот названия всех цветов, которые понимает этот сайт:
darkred, red, orange, brown, yellow, green, olive, cyan, blue, darkblue, indigo, violet, white, black.
Пункт 4. Размер текста
Стандартный размер текста - 14, но используется другой шрифт.
Чтобы изменить размер текста на какой-нибудь другой размер автоматически, выделите нужную область текста. Из списка выбора вверху, называемого "размер шрифта", выберите большой размер.
4.1) Чтобы изменить размер текста на какой-нибудь другой размер вручную, слева от текста напишите [sizе=размер], а справа [/sizе]. Вместо ключевого слова размер используйте цифры от 0 до 24, в нашем случае введите 18.
И тем и другим путем у вас должно получиться:
Код:
[size=18]этот текст будет большим[/size]
этот текст будет большим
Дополнительные возможности
Все, что написано под этим пунктом научит вас цитировать, вставлять изображения, ссылки и видео.
Пункт 5. Спойлеры
Внимание: при использовании тега spoiler в сообщении становится малополезной функция предварительного просмотра.
5.1) Для автоматического преобразования текста, выделите его и нажмите кнопку Spoiler, изображенную выше.
5.1.1) А если вы хотите сделать текст спойлером вручную, нужно перед ним написать [spоiler], а за ним [/spоiler]. Если, к тому же, хотите указать название цитаты, то нужно написать перед текстом [spоiler=название спойлера], а за текстом [/spоiler], где название спойлера, это то что будет написано вместо слов "Скрытый текст"
Примеры спойлеров:
Код:
Пункт 6. Цитирование
Quote ("Bibilo") Руля лучший Вождь
Пункт 7. Изображения
Для вставки в ваше сообщение изображения, вы должны сперва найти ссылку на него. Если же изображение существует лишь на вашем компьютере, то вы должны залить его на http://www.flickr.com.
7.1) Если у вас есть ссылка на изображение, то она должна выглядеть, например, так: http://farm3.static.flickr.com/2431/4117217710_3f0a817d30_o.jpg
- ссылка должна начинаться с http://
- ссылка должна заканчиваться .bmp, .jpg, .png или .gif
7.2) Именно ее вы и вставляете в наше сообщение. Для автоматического создания картинки выделяем ссылку на нее и нажимаем кнопку Img, изображенную выше.
Чтобы вручную сделать ссылку полноправной картинкой вы должны слева от нее написать img в квадратных скобках, а справа - /img также в квадратных скобках.
Пример:
Код:
[ img]http://dota.by/files/arts/basic/AnimalCourier.gif[ /img]
Пункт 8. Ссылки
сли вы хотите вставить ссылку в свое сообщение, то выделите ее и нажмите кнопку Url, изображенную выше.
Для того, чтобы сделать тоже самое вручную нужно слева от ссылки написать и справа от ссылки - .
8.1) Если вы хотите вставить ссылку в ваше сообщение так, чтобы при этом вместо ссылки отображался текст, написанный вами, то сперва выделите текст, который будет отображаться. Затем заключите его в тег Url, способом, описанным выше.
И вместо слова [url] перед текстом напишите [url="ссылка"], где "ссылка" - это та ссылка, которую вы хотите спрятать под текст.
8.2) Если вы хотите вставить ссылку в ваше сообщение так, чтобы при этом вместо ссылки отображалось какое-то изображение, то сперва вставьте картинку в само сообщение и заключите ее в тег Img (см. шаг 7.2).
Затем, полученный текст вместе с тегами Img с той и с другой стороны, заключите в тег Url, способом, описанным в шаге 8.
И вместо слова [url] перед изображением с тегами Img, напишите [url="ссылка"], где "ссылка" - это та ссылка, которую вы хотите спрятать под изображение.
8.3) Чтобы получить ссылку на какое-либо сообщение, нажмите кнопку "ссылка" вверх и справа от нужного сообщения. Тогда ваш браузер перейдет прямиком на это сообщение и вы сможете скопировать нужную ссылку из адресной строки. Это будет обычная ссылка, т.е. вы можете форматировать ее способами, описанными выше.
Примеры:
Код:
[ url]http://dota.by[ /url]
[ url=http://dota.by]этот сайт[ /url]
[ url=http://dota.by] [ /url]
http://dota.by
Пункт 9. Видео
Для размещения видео с YouTube сперва найдите ссылку на это видео. Она должна начинаться с http://www.youtube.com/watch
9.1) Выделите ссылку на видео и нажмите на кнопку YouTube, изображенную выше.
Чтобы сделать тоже самое вручную напишите перед ссылкой на видео [yоutube], а после ссылки - [/yоutube].
9.2) Если вы хотите как-нибудь назвать видео с YouTube, то нужно заключить в тег Yоutube не ссылку на ролик, а текст, который будет отображаться вместо ссылки. То есть перед текстом, написанным вами, нужно написать [yоutubе], а после текста - [/yоutubе]. Затем в тег перед текстом дописываем с [yоutubе] до [yоutubе="ссылка на видео"], где "ссылка на видео" это ваша ссылка на видео с YouTube.
Примеры:
Код:
[youtube]http://www.youtube.com/watch?v=8yOJTsAPebs[/youtube]
[youtube=http://www.youtube.com/watch?v=8yOJTsAPebs]Как законтрить баратрума[/youtube]
Пример второй записи тега с YouTube можно увидеть в комментариях.
Примечание: полностью убрать ссылку на YouTube, оставив только видео нельзя.
Комбинирование тегов
еги можно и нужно комбинировать - т.е. совмещать друг с другом.
Пункт 10. Простое комбинирование
К примеру, чтобы сделать текст сразу и жирным и наклонным, вы должны заключить его в тег B, а потом то, что получилось - в тег I (или наоборот). Пример жирного и наклонного текста:
Код:
Теги можно комбинировать
Теги можно комбинировать
10.1) Все теги из группы "Основы" комбинируются друг с другом. Вы можете сделать текст сразу и цветным, и поменять его размер и выделить каким-то из первых трех тегов:
Код:
[ b][ size=10][ color=red]типо так[ /color][ /size][ /b]
0.2) Однако и в этом нужно соблюдать осторожность. Вот пример неправильного комбинирования тегов:
Код:
[ i][ size=12]Так делать нельзя[ /i][ /b] [/size]
Так делать нельзя
то здесь не так, ведь текст вполне правильно отображается?
Теги перепутаны местами. Вам будет гораздо сложнее разобраться в такой мешанине при редактировании сообщения, поверьте мне. Рекомендуется соблюдать так называемую "вложенность" - следующий тег, после каждого из открывающихся тегов, должен либо закрывать этот открывающийся тег, либо открывать новый тег.
Лучше сказать, наверное, так: каждый из закрывающихся тегов должен быть одного типа с последним открытым тегом на этом уровне.
Рассмотрим предыдущий случай. Сначала мы открываем тег I, потом тег Size, потом тег B. Первым должен закрываться по идеи вложенности - тег B, потом тег Size, потом тег I, т.е. при закрытии тегов мы идем в обратном порядке. НИЧЕГО не поменялось, но, пожалуйста, обратите внимание на другой порядок тегов:
Код:
[ i][ size=12][ b]Надо делать так[ /b][ /size][ /i]
Надо делать так
Пункт 11. Сложное комбинирование тегов
Кроме комбинирования тегов из группы "Основы" с самими собой, также можно комбинировать эти теги с тегами из "Дополнительные возможности". Не забывайте про правило вложенности!
11.1) Первый тег в группе "Дополнительные возможности" - Spoiler.
Применим на него теги из "Основ":
Код:
[ spoiler][ size=14][ i][ b]Наконец-то на сайте реализована функция "Развернуть/Свернуть" блок[ /b][ /i][ /size][ /spoiler]
Примечание: Очень желательно вставлять все теги внутри Spoiler, так чтобы тег спойлера как бы "замыкал" все наши теги, иначе не гарантируется правильная работа тега
11.2) Второй тег в группе "Дополнительные возможности" - Quote.
Применим на него теги из "Основ":
Код:
[ size=14][ i][ b][ quote]Статья очень полезная, её можно поставить в самом верху форума[ /quote][ /b][ /i][ /size]
Quote Статья очень полезная, её можно поставить в самом верху форума
11.3) Третий тег в группе "Дополнительные возможности" - Image.
Ты, конечно, можешь применять на него теги из "Основ", но эффекта это не даст (также и прямой ошибкой не будет), т.к. все теги из "Основ" работают с текстом, а не с изображением:
Код:
[ size=14][ color=red][ i][ b][ img]http://dota.by/files/arts/basic/AnimalCourier.gif[ /img][ /b][ /i][ /color][ /size]
11.4) Четвертый тег в группе "Дополнительные возможности" - Url.
Теги для изменения цветов в данном случае не работают, но все остальные - еще как:
Код:
[ size=14][ color=red][ i][ b][ url=http://dota.by]этот сайт[ /url][ /b][ /i][ /color][ /size]
этот сайт
UPDATE: Было найдено обходное решение закраски ссылки - помещать теги внутри собственно тега Url, но при этом при наведении на ссылку она не будет подкрашена фиолетовым (как обычно делается), в общем смотрим:
Код:
[ size=14][ i][ b][ url=http://dota.by][ color=orange]цветастая ссылка[ /color][ /url][ /b][ /i][ /size]
цветастая ссылкa
11.5) Пятый и последний тег в группе "Дополнительные возможности" - YouTube.
Видимо этот тег (я раскрою вам секрет Управляющего) представляет из себя ссылку на видео и видео под ссылкой =). Ссылку можно редактировать, видео - нет. Теги для изменения цветов в данном случае не работают, но все остальные - еще как:
Код
[ size=14][ color=red][ i][ b][ youtube=http://www.youtube.com/watch?v=8yOJTsAPebs]Как законтрить баратрума[ /youtube][ /b][ /i][ /color][/size]
|
| |
| |
