«Технарская» шпаргалка начинающему блогеру. Часть третья

                                            Всем доброго утра или вечера!

Собралась с силами и решила закончить пост, первую часть которого можно прочесть вот здесь, вторую – вот здесь.

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

ВЫРАВНИВАНИЕ ИЗОБРАЖЕНИЙ

В  поста я написала, что выравнивание фото не имеет смысла для горизонтальных и вертикальных изображений размером от 450рх по горизонтали. Из выпадающего списка вкладки «выравнивание» картинки я выбираю «не установлено». Почему?

Если качество изображения достойное, то в посту стильно смотрятся большие картинки размером 600 – 620 - 640рх по горизонтали. Поле «Записи» примерно имеет размер 660 – 700рх (на глаз). Двигая картинку размером, сравнимым с размером поля, ее смещение незаметно в поле Записи.

Если Вы все-таки решили поместить изображение в тексте, то желательно, чтобы оно было вертикальным и имело размер примерно 300 – 350рх по горизонту (для стиля). Тогда можно применить опцию «Выравнивание», выбрав нужный край или центр.

Как это сделать?

Либо правой мышью, либо с помощью Пиктограммы «Вставить/изменить изображение», которое следует предварительно выделить в режиме редактирования в поле «Запись», о чем говорилось во , найти во вкладке «Положение» поле «Выравнивание», проставить нужный флажок из выпадающего списка. В этом случае поля отступов и границ заполнять не обязательно, так как картинка будет размещена в тексте, который не выравнивается (смысла нет). В обрабатываемой вкладке есть образец рисунка, который в качестве наглядности будет перемещаться в зависимости от выбранных Вами опций. Далее нажать кнопку «Вставить».

Выбор места для вставки изображения в текст не должен следовать после использования Enter (абзаца). Если вставить фото после применения Enter (абзаца), Вы не сможете поместить текст у противоположного края. Ваша Запись будет выглядеть вот так:

Потому Вам следует сначала в поле «Запись» вставить текст, в теле которого Вы будете размещать картинку, в нем выбрать нужное Вам место (красная стрелка на рисунке), далее применить опцию «Вставить изображение».

Ваша Запись с размещенным фото будет выглядеть вот так:

ЦИТАТА

При использовании кнопки «Цитата» (визуально на Пиктограмме – кавычки) текст смещается на фиксированное расстояние в центр строки поля «Запись» и выделяется двумя горизонтальными линиями.

Как применить к нужному тексту Цитату?

Надо выделить необходимый текст и нажать на пиктограмму «Цитата». Текст автоматически сдвинется вправо в поле «Запись».

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

К тексту Цитаты можно применять форматирование, предлагаемое на сайте (4 первых пиктограммы – слева направо).

ТАБЛИЦА

Как вставить готовую таблицу из Microsoft Office (Word, Excel) в поле «Запись»?

Никак. Только через HTML – редактор, но это тема отдельного большого поста. Настоящий пост предназначен для начинающих, а HTML – редактор – как минимум следующая ступенька познания премудростей сайта.

Чтобы Вы не теряли время, покажу в картинках, как я вставляла таблицу из Word.

а) С помощью горячих клавиш вставила готовую таблицу в поле «Запись» как текст, что подробно описано в .

б) Сохранила черновик и в итоге получила то, что Вы видите на скрине.

Расстроилась, ведь вопрос о вставке таблицы в Вашу Запись был задан в комментариях, значит это кому-то да нужно. Начала вспоминать, в какой вкладке я видела опцию «Добавление таблицы». Вспомнила и стала экспериментировать. Потратив массу времени, была разочарована запредельно.

Открыв в нужном мне месте правой мышью вкладку «Добавление/изменение таблицы», установила ее параметры и нарисовала таблицу, применив заливку в качестве примера, выравнивание и прочие опции, о которых подробно даже рассказывать не стану (коротко на рисунках).

Далее решила поэкспериментировать с ячейками таблицы, что также удалось. В них выравнивался текст, менялась заливка, размеры ячейки, строки, столбцов, таблицы в целом. Лишь шрифт не менялся, но я об этом знала изначально.

Настал долгожданный момент получения результата, я жму кнопку «Сохранить как Черновик» и вижу в итоге следующее:

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

Что можно предложить авторам аналитических постов для представления табличной информации? Делайте скрины, обрабатывайте их, например, в ПО для фотошопа. Затем вставляйте в поле «Запись» в виде изображений. Это самый оптимальный вариант.

ГИПЕРССЫЛКА

Гиперссылка - часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, каталог, приложение), расположенный на локальном диске или в компьютерной сети, либо на элементы этого объекта. Гиперссылка может быть добавлена к любому элементу гипертекстового документа и обычно выделяется графически.

Гиперссылка выделяется цветом.

Она может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html).

Теперь, когда определено понятие «Гиперссылка», рассмотрим возможность ее использования в создаваемом тексте.

Предположим, Вам нужно создать ссылку в пределах страницы (частный случай гиперссылки - якорь), переадресацию на веб-страницу другого сайта (пример – переадресация на сайт  Wikipedia) либо, как в моем случае, Вы хотите переадресовать пользователей в свой предыдущий пост.

Для этого Вам следует выделить текст, откуда будет происходить переадресация читателя. Применить к нему пиктограмму «Добавить/изменить ссылку». В диалоговом окне Вам откроются «Параметры ссылки», вкладка «Общее». В поле «Адрес» Вам следует ввести HTML – адрес веб-страницы сайта, куда произойдет переадресация.

Где взять HTML – адрес страницы сайта?

Найдите нужную Вам страницу сайта, в адресной строке скопируйте адрес страницы и вставьте в поле «Адрес». Можно ввести адрес нужной страницы в том виде, в котором Вы видите на фотографии (URL), а можно абсолютный (полный). Сайт сам преобразует абсолютный адрес  в URL.

Если Вы хотите, чтобы переадресация произошла в том же окне, где расположена гиперссылка, в поле «Цель» выбираете из выпадающего списка «Открыть в этом окне/кадре». Если нужно открыть в новом окне, установите флажок «Открыть в новом окне (_ blank). Второй вариант предпочтительней, по-моему, он более удобный для читателя. Остальные поля вкладок диалогового окна «Параметры ссылки» можно не заполнять.

В качестве примера использования разных флажков в поле «Цель» предлагаю пройти по ссылкам из второй части настоящего поста в первую (первая часть откроется в новом окне) и из первой части во вторую (вторая часть откроется в том же окне) по гиперссылкам.

Гиперссылку можно изначально применить в шаблоне текста, в WORD, указав необходимый HTML – адрес веб-страницы. При копировании текста в поле «Запись» гиперссылка автоматически будет перенесена в текст.

ЯКОРЬ

Якорь - это закладка с уникальным именем, которая расположенна в конкретном месте веб-страницы и предназначена для перехода к ней по ссылке.

Якоря применяют для переадресации пользователя на определённое место в статье, избавив его от перемещения по странице. Назначение якоря - указать, наметить, «заякорить» точку на поле веб-страницы. Переход пользователя по ссылке на якорь позволит веб-странице открыться там, где якорь установлен.

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

Имя якоря может быть любым. Оно может содержать цифры и латинские буквы, но в пределах страницы оно должно быть уникальным. Для создания якоря на веб-странице нужно вставить код якоря в HTML-код документа и присвоить ему уникальное имя.

Примеры якорей на Сортс.ру – в комментариях «показать еще», «свежие», «с начала», «10 лучших», «комментарии друзей», «скрыть», знаменитая кнопка «наверх».

Для создания якоря с помощью параметра «name» тега нужно сделать закладку в соответствующем месте и дать ей имя. В моем примере я дала якорю имя «Links». Обычно имя якоря обобщает смысл текста. Теперь к якорю надо создать ссылку, кликнув по которой пользователь попадёт в место расположения якоря.

Для переадресации по ссылке на якорь на другой странице нужно в атрибуте «href» тега прописать URL-адрес страницы и добавить к нему символ # и название якоря без пробела.

Это было теоретическое введение. Теперь на практике я вставлю якорь через меню «Вставить/редактировать якорь».

Скрины сделаны в качестве примера, а потому не ищите смысла в месте, где я бросила якорь, и в его имени.

Для создания якоря устанавливаю курсор в части 1 поста в начале заголовка раздела «Всем доброго дня или вечера!» и нажимаю на пиктограмму «Вставить/редактировать якорь», присваиваю имя якорю, в моем случае Links, и нажимаю «Вставить». Далее сохраняю как Черновик.

Обратите внимание на то, как выглядит тег (внизу изображения, слева) в части 1.

Далее я открываю часть 2 поста и создаю ссылку на страницу, где находится якорь. Для создания ссылки я выделяю словосочетание в конце текста «Удачи Вам!» (выбрано для примера) и кликаю на пиктограмму «Вставить/редактировать ссылку». Копирую URL-адрес страницы сайта с якорем (закладкой) и добавляю к нему символ # и название якоря Links (в итоге #Links). Указываю, что открывать страницу нужно в новом окне. Жму «Сохранить как Черновик». Обратите внимание на то, как выглядит тег ссылки на якорь в части 2 поста (рисунок ниже, слева внизу второго изображения).

Тег неверный. В нем отсутствует #Links.

Посмотрите, как выглядит тег гиперссылки на изображении с открытым диалоговым окном, адресом веб-страницы, на которую адресует гиперссылка, с выпадающим списком поля «Цель» (это третий рисунок снизу вверх, начало отсчета – настоящая строка).

Не кажется ли Вам, что тег в части 2 (переадресация на якорь) и тег простой гиперссылки похожи? Они различны лишь в том, что одна гиперссылка выделена курсивом, другая – обычным шрифтом.

Почему? Начинаю разбираться.

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

Вывод один: сохраненные мной изменения в Черновике после создания якоря просто не сохранились, также, как это было с таблицами, выравниванием текста.

И все-таки, попробую проверить. Открываю «сохраненную» в Черновике Запись в режиме редактирования и ставлю курсор в место установки якоря. Смотрю теги и вижу, что тег отражает лишь то, что заголовок написан курсивом, а якоря просто нет.

Смотрите на тег и сравните с тегом, когда я устанавливала якорь до сохранения как Черновик.

Кто виноват? Сайт? Браузер? Не знаю. Но думаю, что это недоработка разработчиков сайта.

Кстати, через HTML - код встраивавания якорь устанавливается, но очень уж это хлопотно.

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

Я была бы ни я, если б что-нибудь не нашла.

Вероятно, многие из Вас пытались открыть пост, кликнув на комментарии к нему.

Теперь Вы в курсе, что количество комментариев к посту есть гиперссылка, которая должна направить пользователя к точке установки якоря, а именно к первому комментарию. А куда она нас адресует в действительности? На веб-страницу сайта, где размещен собственно пост (в самый верх). Что собственно и следовало доказать. Задумано как якорь, а работает как обычная гиперссылка.

Значит, виновен не мой бедный браузер, который я виню во всех грехах…

Возможно, Вам было тоскливо читать про неработающие таблицы и якорь, но если у вас есть блоги на других сайтах, Вы прочли это не зря, честно! Таков принцип переноса таблиц и установки якоря везде, а якорь есть истинно чудесный некий навигатор, экономящий наше время. Например, в этом посту, состоящем из трех больших частей, он точно был бы не лишним.

ВОПРОСЫ ИЗ КОММЕНТАРИЕВ

1. Не все ссылки на фото и видео можно вставить в анонс к посту. Например, фотографии с сервиса «Яндекс.фотки» не получается вставить в поле «Анонс». Как это сделать?

Ответ. Чтобы вставить изображение в поле «Анонс» с хостинга «Яндекс.фотки и некоторых аналогичных фотохостингов, не нужно использовать прямой адрес в адресной строке. Нажав на «Код для вставки на сайт или в блог» под фото, следует найти поле «Ссылка на фотографию» и скопировать нужный адрес.

2. Как вставить в поле «Анонс» клип, в том числе с You Tube?

Ответ. С помощью подсказки от пользователя Иля (как бы пригодился якорь, но, увы...) за несколько часов видеоролик успешно был вставлен в поле "Анонс".

2.1. Для этого следовало:

- На веб-странице  сайта, в том числе You Tube, просмотра клипа выбрать вкладку "Поделиться";

- Из выпадающего списка выбрать вкладку "Сгенерировать HTML-код";

- Поставить флажок "Использовать старый код встраивания";

- Скопировать ссылку и вставить ее в "Фото и видео" для Анонса.

2.2. Необходимо учесть, что

- Старый код встраивания (тот, что требуется для вставки в поле "Фото и видео") должен начинаться со слова "object" и им же заканчиваться;

- Новый код встраивания начинается со слова "iframe", им же и заканчивается и не может быть использован для поля "Фото и видео"; 

- URL - ссылка не может быть использована в поле "Фото и видео".

2.3. Не каждый клип, в частности на You Tube, имеет открытый для пользователей старый код встраивания. Это зависит от настроек безопасности владельца клипа. Для некоторых клипов даже при отключенной безопасности старый код встраивания не включен в "Сгенерировать HTML-код" (отсутствует у некоторых моих личных роликов, размещенных на You Tube, причины неизвестны, только предположения)

2.4. После вставки старого кода встраивания в поле "Фото/видео" сайт не отображает ролик в течение нескольких часов, сохраняя загруженную ссылку в поле "Фото и видео".

2.5. Для вставки клипа в поле "Запись" достаточно URL - ссылки, выше речь шла только о поле "Фото и видео" для Анонса.

Удачи Вам! Готова ответить на вопросы, если что-то описала неподробно/нечетко. Возможно, я что-то не учла или ошиблась, буду рада конструктивным замечаниям и дополнениям! 

P.s. Автор пособия - блогер сайта  с ником Tennisistka. За что огромное ей спасибо.

Оригинал взят отсюда