Рейтинг 8.81

оценка «Тесеры» оценка пользователей
- 8.8152
-

Коробка с инструментами редактировать

 

 

 


 

Намедни поступила просьба по шпаргалке (конкретно: от Ser_vershitel-я). Спрашивали — отвечаем.

 

Данная статья — сводный набор инструментов, которые могут быть полезны в оформлении статей и дневников.

 

Будет дополняться по мере поступления просьб, вопросов и уточнений.

 

Общее для всех:

 

Для того, чтобы сделать с текстом что-нибудь особенное, необходимо воспользоваться режимом html:

 

 

В этом режиме нам открывается HTML-код документа, который мы создаём. Для тех, кто при переходе в данный режим чувствует себя так, словно его поставили под холодный душ (перехватывает дыхание, потеря ориентации) — спокойней! Просто следите за моими руками и всё будет хорошо.

 

Практически всё, что описано в шпаргалке выполняется путём добавления стилей к определённой части текста. Стили добавляются в специальное место. Для полноты информации (запоминать не обязательно): этим прописываются css-стили html-тэгам. Я постараюсь нарисовать всё так, чтобы достаточно было сделать всё по инструкции, с минимальным вниканием в кодовую суть.

 

 

 

Базовый набор

 

1

Выделение текста в виде блока со скруглёнными углами и на фоне*

 

Подразумевается вот такой эффект

 

Находим в html-режиме тот абзац, который нам нужно выделить. Нас интересует место, которое выделено синим «курсором»:

 

 

Ставим курсор туда, жмём пробел и пишем следующее (выделяем и копируем прямо из блока ниже):

 

style= "padding: 15px; background-color: #cccccc; border-radius: 20px;"

 

 

Полужирным синим шрифтом выделены те параметры, которые можно менять. Для подбора цвета подложки можно пользоваться например Тёминой табличкой безопасных цветов: http://www.artlebedev.ru/tools/colors/ (в этой табличке нам подойдут те значения цветов, которые прямо над прямоугольничками).

 

После того, как мы отредактировали нужный абзац, нажимаем кнопку «Обновить» и кайфуем стилем абзаца.

 

 

На картинке ниже дана расшифровка той абракадабры, которую мы только что написали.

 

 

 

 

2

Выделение текста в виде блока со специальной рамочкой слева*

 

Вот, чего можно добиться
Демонстрация эффекта выделения рамочкой слева

 

По аналогии с пунктом 1 находим абзац, ставим курсор в нужное место, жмём пробел и пишем:

 

style= "padding-left: 20px; border-left: 3px solid #cccccc; "

 

Подбираем нравящиеся нам параметры (или оставляем как в примере) и обновляем текст статьи.

 

Расшифровка:

 

 

 

*

Несколько абзацев в блок

 

Если нам нужно несколько абзацев запилить в описанные выше эффекты, их нужно объединить в один общий контейнер.

 

Предположим, что мы хотим объединить два абзаца (и между ними — картинка) в блок со специальным скругленным фоном (как пишет пункт 1).

 

Находим эти два абзаца:

 

В то место, куда указывает маркер “Начало” кликаем курсором мыши, жмём Enter (для удобства) и пишем:

 

<div style="padding: 15px; background-color: #cccccc; border-radius: 20px;">

 

В то место, где стоит маркер “Конец” ставим курсор, жмём Enter и пишем:

 

</div>

 

И обновляем текст. Если нужно стили подкорректировать, вы уже в курсе, как это делаеццо.

 

 

 

По-сложнее

 

3

Спойлеры и скрытые тексты

 

Спойлер — как правило текстовая вставка (вводная фраза), «под которой» скрыто широкое толкование или расшифровка. Объяснение может быть важной частью статьи, однако интересной малому числу читателей в виду осведомлённости большинства из них. Чтобы «не мозолить глаза» владеющим информацией пользователям, расшифровку прячут, но она доступна в любой момент по клику на вводную фразу — спойлер.

 

Подразумевается такой эффект

 

Как следует из описанной задачи, нам нужно иметь два текста: спойлер и его расширенную версию. Код (для режима HTML), с помощью которой реализуется задача, выглядит так:

 

<span onclick= 'document.getElementById( "spelling_1" ).style.display= "block"; this.style.display= "none"; ' style= 'color: #0055cc; border-bottom: 1px dashed #0055cc; cursor: pointer;'>
Спойлер
</span>
<div id= 'spelling_1' style= 'display: none;'>
Расшифровка
 </div>

 

Если в вашей статье предполагается всего один спойлер — просто копируете код из окошка выше, вставляете в статью в режиме HTML, заменяете красные фразы и всё заработает. Вместо фразы Расшифровка может быть любой текст и любое количество абзацев. С картинками и без. Чтобы спойлер и его расшифровка были оформлены в блок со скруглением (как в моём примере), поместите код в конструкцию, о которой идёт речь в разделе данной статьи «блок со скруглёнными углами».

 

Если в вашей статье должно быть несколько спойлеров, обратите внимание на выделенные полужирным шрифтом цифры 1 (их две штуки в одном блоке кода). Для каждого спойлера в статье эти пары чисел должны быть другими. Логичнее всего поступить так: для первого спойлера — единичка, для второго — двоечка и так далее.

 

Фраза-спойлер окрашена в цвет #0055cc, подчёркнута пунктиром такого же цвета. Цвет #0055cc можно заменить на любой другой, согласно вашему вкусу и поставленной задаче.

 

 

4

 

Блок с менюшкой (как в начале этой статьи) будет полезен тем, кто делает обзоры, содержащие несколько тематических частей. К примеру, играли на игротеке в 10 игр. Было бы удобно иметь ссылку, которую отправил другу и он, кликнув на неё, сразу попал в нужный параграф (в противовес такому: «Вась, зазырь статейку, там внутри про 7 Чудес. Вот ссылка — скролишь примерно две трети, ищи фотку с синими картами»).

 

Кодовый шаблон меню (для режима HTML) выглядит так:

 

Меню
<a style="border-bottom: 1px dotted #0055cc; text-decoration: none !important;" href="#p1">
Параграф 1
 </a> • 

<a style="border-bottom: 1px dotted #0055cc; text-decoration: none !important;" href="#p2">
Параграф 2
 </a> • 

<a style="border-bottom: 1px dotted #0055cc; text-decoration: none !important;" href="#p3">
Параграф 3
 </a>

 

Напоминаю, что его нужно вставлять в статью через режим HTML.

 

Синим цветом выделены фрагменты обычного текста, которые следует заменить на те, которые подходят для вашей статьи, например вместо «Параграф 1» — “Twilight Imperium”, вместо «Параграф 2» — “Firestorm Armada”... Красным цветом выделены специальные технические ярлыки. Их мы тоже придумываем сами, но только с таким ограничением: только английские буквы, безпробеловмеждусловами (на, разве что символ подчёрка). Так будет лучше всего, чем запоминать, что там вообще можно использовать, а что нет.

 

Предположим, что наш первый пункт меню после наших правок «звучит» так:

 

<a style="border-bottom: 1px dotted #0055cc; text-decoration: none !important;" href="#t_i">Twilight Imperium</a>

 

Это значит, что в меню данная ссылка будет перебрасывать на элемент t_i. Как правило — это подзаголовок в статье. Нужно этот подзаголовок промаркировать.

 

Обновляем текст статьи (кнопка «Обновить»), заодно и выходим из режима HTML в человеческий просмотр. Прокрутим скроллером до того места, где у нас запланирован подзаголовок по Twilight Imperium. Нашли. Ставим курсор внутрь надписи и выбираем в стилях «Заголовок 2».

 

 

 

 

После этого вновь откроем HTML-режим и найдём такую строку:

 

 

Ставим курсор туда, куда указывает маркер на картинке, жмём пробел и пишем:

 

id= "t_i"

 

Этим мы указали нашему пункту меню то место, куда перенаправлять посетителя сайта при клике. Можно промаркировать и не через режим HTML, но я рекомендую делать так.

 

Аналогично настраиваем остальные пункты меню.

 

 

5

Вставка музыки

 

Основное хранилище бесплатного музыкального сыра — на Яндекс.Музыке. Но, к сожалению, Тесера не входит в список сайтов, для которые сняты ограничения по использованию встроенных плееров (как, например, для ЖЖ). Из того, что я пытался вставить, только Аквариум Бориса Гребенщикова оказался разблокированным «для всех».

 

Потому нам (меломанам) помогает сервис ПростоПлеер. Раньше он был на одноимённом сайте, но теперь переехал на более крутой домен: pleer.com (страшно даже представить, сколько бабла они за него вывалили).

 

Чтобы вставить трек, сначала находим его. Слушаем и, удостоверившись в том, что это оно, кликаем на шаринг-баттон:

 

 

 

 

Копируем код, крепко держим в руке и бегим на Тесеру, пока байты не рассыпались по дороге. Переходим в html-режим и вставляем в нужное место то, что принесли с ПростоПлеера.

 

Получается примерно так:

 

 

Теперь сконцентрировались, задетектили глазом а затем курсором вон ту часть (выделена оранжевым) и удалили её. ПростоПлееру она не вредит, а нам — ни к чему, только намусорит. Жмём кнопку «Обновить» и проверяем, что плеер вставился корректно. Теперь, если есть такая необходимость, — можно вернуться в html-режим и заверстать плеер в специальный скругленный блок на особом фоне (смотрим пункт *).

 

 

 

Хардкорр

 

6

Увеличение размера шрифта

 

Вёрстка на Тесере содержит настройку шрифта очень уж малого размера, ещё и Georgia (с засечками — гуд, но шрифт специфический сам по себе). На 21-дюймовом мониторе дома ещё куда ни шло, но на огромном офисном — слишком всё мелкое. Если нужно прочитать большую статью или длинную ленту комментариев, я, чтобы не насиловать итак устающие глаза, увеличиваю масштаб в браузере до 175% и тогда могу нормально читать.

 

Мне не комфортно от мысли, что мои читатели (многие из которых, судя по фото, — в очках) могут испытывать дискомфорт при чтении постов. По исследованиям в области размера шрифта, оптимальным (читать как «наименьшим рекомендуемым») размером шрифта считается размер в 16 пикселей (пруф на хабро-перевод). Исходя из всего вышеописанного, перед публикацией статьи я во всех абзацах проставляю стили, увеличивающие шрифт до шестнадцатого. Отмечу также, что абзацы я ещё при наборе отделяю двойными Enter-ами, чтобы глазам было удобно.

 

Набираю текст я как правило в Гугль.Доксе. При копировании и вставке текста в редактор на Тесере, получается примерно следующий результат (просмотр в режиме HTML):

 

 

Этот текст я забираю отсюда (выделяю всё — Ctrl+A, копирую — Ctrl+C) в любой текстовый редактор — можно блокнот, можно wordpad, кто чем пользуется. Под серыми прямоугольниками — фактически мусор, я его заменой удаляю. Под синими прямоугольниками — начала абзацев (открывающиеся теги), под оранжевыми — их завершения (закрывающиеся теги). Нас интересуют открывающиеся теги. Они однотипные, потому простой заменой мы одним махом всем им увеличим шрифт.

 

В текстовом редакторе, куда мы скопировали текст, запускаем замену текста
<p dir="ltr">
на
<p style="font-size: 16px !important;">

Снова выделяем всё, возвращаемся в окно браузера и вставляем в редактор HTML вместо того, что там было до этого. Обновляем текст (кнопка «Обновить») и теперь у нас текст в статье — увеличенного размера. Читатели благодарны за легко воспринимаемый текст и удобное форматирование.

 

 

7

 

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

 

Для каждой фото-вставки нам понадобятся:
1. Ссылка на картинку-превью (небольшого размера, чтобы читатель мог понять, о чём идет речь).
2. Ссылка на исходную фотографию (большого размера).

 

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

 

В режиме просмотра статьи, в самом низу есть ссылки на добавление дополнительных материалов. Нас интересует ссылка “фото или видео”. Жмём на неё.

 

 

Над документом всплывает окошко для добавления фотографии. Указываем название, путь к нашей фотке на компьютере и жмём “сохранить изменения”.

 

 

Фотография появится в секции «фото и видео». Где-то на компьютере открываем в любом текстовом редакторе документ, туда мы скопируем ссылки отдельно на полноразмерные фото, отдельно — на картинки-превью.

 

 

Ссылка на полное фото: на фотографии делаем клик правой клавишей мыши (синий маркер) и в выпадающем меню жмём «Копировать адрес ссылки» (в зависимости от браузера формулировка может варьироваться). Ссылка скопирована, вставляем её в наш резервный документ. Осталась ссылка на превью.

 

Кликаем на название фотографии (оранжевый маркер) и переходим на детальную страницу фотографии. Здесь есть превью, которое нам подойдёт для нашей задачи. Встроенный в Тесеру редактор сгенерил её шириной в 810 пикселей — сгодится.

 



Ссылка на превью: кликаем на фотографии правой клавишей мыши и в выпадающем меню жмём «Копировать URL-адрес изображения». Скопированный адрес сохраняем в промежуточном документе.

 

Проделываем аналогичную процедуру с каждой фоткой. После того, как мы это сделали, у нас должен быть список из пар ссылок: «превью–большая». Типа такого:

 

http://tesera.ru/images/items/416144/810xm/photo.jpg
http://tesera.ru/images/items/416144/photo.jpg

 

http://tesera.ru/images/items/416151/810xm/photo.jpg
http://tesera.ru/images/items/416151/photo.jpg

 

http://tesera.ru/images/items/416172/810xm/photo.jpg
http://tesera.ru/images/items/416172/photo.jpg

 

http://tesera.ru/images/items/416194/810xm/photo.jpg
http://tesera.ru/images/items/416194/photo.jpg

 

Пол-дела сделано. Можно выпить кофе, оправиться, закурить. После того, как дрожь в руках уняли, продолжим. Остался один перевал. За ним — выход к реке и водопадным озёрам.

 

Идём в редактор статьи. Для начала просто расставим превью по тексту. Ставим курсор туда, где должно быть превью и жмём кнопку добавления фотографии

 

 

Во всплывшем окне в поле Image URL копируем ссылку на превью. После того, как вставили ссылку в поле ввода, кликаем в любом другом поле, например — в поле ввода свойства Title. Во время этого клика редактор распознаёт скормленную ему ссылку и превью появляется в окошке ниже.

 

 

Оно вставилось как есть — то есть шириной 810 пикселей. Нам нужно его принудительно уменьшить. Для этого переходим на закладку «Appearance», в поле ширины пишем например 400 и кликаем на любом другом поле. Согласно ширины автоматически заполнится параметр высоты — так, чтобы фотография уменьшилась пропорционально и у нас не получилась фотка с инопланетянами.

 

 

Теперь жмём кнопку «Вставить» и превью размещается в тексте. После того, как превью расставлены, нужно их сделать кликабельными, с отображением во всплывающем окне увеличенных фотографий. С каждым превью проделываем следующее: нам нужно выделить превью, но не просто кликнуть на нём в редакторе (потому что нужного эффекта это не даёт), а кликнуть за превью и не отпуская левой клавишы мыши тянуть влево, над фоткой, пока она не выделится синим. Отпускаем мышь и жмём на панели кнопку маркировки текста ссылкой:

 

 

Во всплывшем окне в строку «Адрес» копируем ссылку на полное изображение, переходим в закладку «Дополнительно»

 

 

В поле ввода свойства «Классы» пишем «pkg» и жмём «Вставить».

 

 

Всё. Теперь наше превью кликабельное и при нажатии на него мышью над статьёй будет всплывать большая фотка.

 

Осталась самая малость для полноты кайфа — присыпать сахарной пудрой: чтобы все фотки статьи были связаны таким образом, что при просмотре большой фотки появляются стрелочки влево-вправо для скроллинга изображений.

 

Переходим в режим HTML и по очереди отыскиваем наши превьюшки по такому признаку:

 

 

Редактируем текст
class="pkg"
так, чтобы получился такой:
class="pkg" rel="gallery"

Обновляем, сохраняем, выдыхаем. Мы настроили внутреннюю галлерею в статье. Мы — умнички. Берём с полочки пончик, наливаем кофе и довольные уминаем за две щеки. 

Фото и видео

добавить
  • новые
  • популярные
свернуть все темы
Meerple написал 3 года назад: # скрыть ответы

Странно, но не видна моя запись на эту тему.

Посмотрите плз вопроз по рамке:
http://tesera.ru/user/Meerple/thought/445016/

Meerple написал 3 года назад: #

Сорри, разобрался

Kuroi написал 3 года назад: #

Спасибо за полезную заметку.

WeissHeart написал 3 года назад: # скрыть ответы
Сокрыть в недрах спойлера

Хотелось бы узреть мини-шпаргалку, щито надобно прописать в представленном редакторе, дабы укрыть тонны текста под спойлер. Заранее благодарю.

AlexeyGfi написал 3 года назад: # скрыть ответы

Просьбу услышал.
Как дополню, подам звуковой сигнал =)

WeissHeart написал 3 года назад: # скрыть ответы

Премного благодарен (:

AlexeyGfi написал 3 года назад: # скрыть ответы

Дополнил статью описанием спойлера (ориентируйтесь по менюшке в начале статьи). Если что упустил или нужно пояснение — дайте знать, дополню.

WeissHeart написал 3 года назад: #

Огромное спасибо, дальше уж сам поковыряюсь =)

Cruz_Castillo написал 3 года назад: # скрыть ответы

Добавлю, как вставить небольшие изображения и сделать их кликабельными, чтобы открывались большие изображения во всплывающем окошке.
1. Загрузить фотографии к статье через форму добавления "Фото или видео" под статьей.
2. Перейти на отдельную страницу фотографии. Там будет создан превью размером 400 пикселей по ширине. Вставить в тег img.
3. Скопировать в буфер обмена увеличенные изображения. Вставить ссылку в тег <a>

В итоге у вас должно получиться что-то вроде этого
<a class="pkg" rel="prettyPhoto[gallery]" href="http://tesera.ru/images/items/374339/1600x1200xsxy/photo.jpg">
<img style="display: block; margin-left: auto; margin-right: auto;" src="/images/items/374336/3.jpg" width="400" height="300">
</a>

1. Одинаковое значение у всех ссылок (тег a) атрибута rel позволяет перелистывать фотографии прямо в открытом окошке. 2. class="pkg" позволяет открывать вашу ссылку во всплывающем окошке.
3. margin-left: auto; margin-right: auto; позволяет выровнять по центру вашу картинку.

Cruz_Castillo написал 3 года назад: #

Пример http://tesera.ru/user/Cruz_Castillo/journal/374336/

AlexeyGfi написал 3 года назад: # скрыть ответы

Хочу добавить в шпаргалку вместе с детальными скриншотами, но вот это у меня не получается:

«Перейти на отдельную страницу фотографии. Там будет создан превью размером 400 пикселей по ширине»

Вижу превьюхи 160 пикселей ширины, вижу исходник в полный размер, а вот шириной в 400 не вижу =(

Подскажите, куда смотреть. Способ удобен, ибо фотошопа не нужно для загрузки нормальных фото с превью.

Cruz_Castillo написал 3 года назад: # скрыть ответы

400х300 с Тесеры взять негде, перепутал. Можно только примерно 800-810 пикселей в ширину брать (не знаю по какому принципу там сжимается картинка) с таких страниц http://tesera.ru/user/Cruz_Castillo/journal/photo/374340/
Её можно попробовать сжать браузером, установив нужную ширину в атрибутах тега. Не сильно что-то поменяется в качестве.
Картинки шириной 400 я делал сам и загружал через редактор.

AlexeyGfi написал 3 года назад: #

Я предполагал что-то подобное (про 400 пикселей подготовлены отдельно) =)
В любом случае, спасибо за ценную информацию, допилю в шпаргалку с указанием источника.

AlexeyGfi написал 3 года назад: #

Дополнил шпаргалку.
Аццццццкий кусок получился, но зато разжёвано капитально.

Ksedih написал 3 года назад: #

Это девять!