Гайд по оформлению материалов на сайте

rating
2

Вот решил написать небольшой гайд для тех, кто вдруг захочет чего-нибудь запостить. В будущем, возможно, гайд будет дополняться. Если вам чего-то не понятно, можете задавать вопросы в комментариях, и мы обязательно постараемся вам помочь :)

Функции, описанные ниже, пока не доступны всем пользователям. Чтобы получить возможность использовать формат ввода Full HTML со всеми вытекающими, нужно проявить себя на сайте, как копирайтер и креативщик (ну, или просто договориться с Мелом посредством приватных сообщений ^^).
1) Как сделать красивое выравнивание текста по двум сторонам?
Для этого вначале поста нужно вставить код "<div class="bue-align-j">" и в конце поста "</div>". Также в Формате ввода нужно поставить точку на Full HTML.

2. Как сделать в тексте маленькую картинку, которая при клике бы увеличивалась до своего нормального размера?
Вот с этим и я долго морочился. Сначала заливаем картинку полного размера на сайт. Жмём иконку "Изображение" в редакторе, затем кнопочку Browse справа от изображения. Открывается окно File Browser. Слева жмём кнопку Загрузить, вылазит строка заругрузки. Жмём обзор, находим полное изображение у себя на компьютере, ждём загрузки. Если всё хорошо, изображение должно появиться в списке (у меня на опере 10.10 с этим проблемы, а тот же КМелеон для накрутки голосов в ла2топ отлично всё загружает). Дальше выбираем его, жмём кнопку Resize cверху. Ширину выставляем... ну там 200 или 250... макмимум 300, но это уже многовато для превью. Кликаем во второе поле, его значение проставится автоматически. Жмём кнопку Resize, и вот уже уменьшенное изображение (*имяоригинала*_0.jpg) появляется в этом списке. Выбираем только что созданное превью и отправляем его в BUE-editor нажатием кнопки Send to BUE-editor. Теперь переходим к окну с редактором поста. Как видим, поле адрес картинки и ширина уже заполнлись, и их мы уже трогать не будем. Далее идёт выравнивание. Лучше всего ставить "В тексте - слева" или "В тексте - справа" - так наша картинка будет красиво обтекаться текстом. Также можно выбрать просто слева, справа или по центру, и тогда если наша картинка не занимает всю ширину блока контента (а превью её точно не замёт!), на оставшемся месте будет некрасивая белизна. В поле Alt вводим одно-два слова, описывающих содержание картинки. Жмём вставить, в поле вводя появился код картинки. Не снимая выделения с кода картинки, жмём на кнопку "Всплывающее" (она самая первая) и вновь возвращаемся в File Browser. Находим картинку в полном размере и жмём Send to BUE-editor. Возвращаемся к редактору сообщений, видим, что адрес картинки вставился в поле, жмём ок. Если вы всё сделали правильно, ссылка на полную картинку утановилась на превью. rel="lightbox" делает так, что полная картинка открывается не сама, а во всплывающем таком красивом окошке. Если вы хотите, чтобы в этом окошке можно было листать картинки, нужно к каждому лайт боксу добавить определённый (любой, но везде одинаковый) индекс в квадратных скобках. Например, lightbox[blblbl]. И будьте осторожны в клацаньях мыши. Это окошко с адресом, оно вроде бы и непрозрачное, но если случайно кликнуть на его пустую (белую) область, курсор в тексте переместится в место, где вы кликнули (под белое) и ссылка вставится уже не туда, куда надо.

3. Ну и напоследок. Как просто измерить ширину блока используя фотошоп.
Ruler toolДелаем скриншот того, чего мы хотим измерить. В данном случае - ширину этого блока контента. Вставляем его в фотошоп, выбираем инструмент Ruler Tool (линейка), который находится в одном меню с пипеткой, и зажав клавишу Шифт, ровненько ведём от начала до конца блока. Сверху, в поле W будет показана ширина в пикселях.

аватар: EternalLight
by EternalLight 24 Март 2010