Мирчар на полочке
    Вход через социальные сети
    E-mail:
    Пароль:
    Воспользуйтесь формой, если у вас не получается войти через uID.
    Администрация Каталога: Tinory (Профиль в Мирчар).
     
    Главная » Статьи » Справочные материалы

    Добавляем картинки v2.2

    Повторюсь, хотя вы и сами это знаете: картинки делают жизнь веселее, иллюстрации делают текст понятнее. Это правило неприложно настолько, что, порой, когда я заглядывала к фан-сайтам-коллегам и видела сплошной текст, я терялась. Пусть это всего лишь рассказ, пусть вы не умеете рисовать (от слова "совсем") - это не повод оставить материал без картинки.

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

    И тем более, что самый популярный конструктор Ucoz исправил загрузчик картинок, и теперь пляски с бубнами не нужны, чтобы правильно вставить картинку.

    Итак, выберите подходящие картинки и сохраните их себе на компьютер. Причём, если вы готовите это для нашего Каталога, первая картинка должна быть 64х64 - отлично подойдут иконки предметов. Ну просто она автоматически выводится рядом со статьей на странице списка. Нет, браузер, конечно, её ужмёт согласно коду, но выглядеть будет неопрятно.

    Теперь прикрепим их к материалу. В поле "Изображения" нажмём кнопку "Обзор" и выберем файл - всё как обычно. После этого вы увидите имя прикрепляемого файла (актуально, если их несколько), $юкоз-код$ для вставки в материал, максимальные размеры для вывода на странице (если вы имеете права на их изменения) и самое главное - кнопку расширенных настроек! Кликаем по шестерёнке и видим ещё два поля - title и alt. Коды для них нас не особо интересуют, а вот то, что можно вписать в поля - да.

    <!--IMG3_ALT-->Форма загрузки картинок: добавление<!--IMG3_ALT-->

    Title - это название картинки, подпись, которая высвечивается при наведении на неё указателя мыши. Alt - альтернативный текст, то есть текст, который будет отображать браузер, если загрузка изображения по каким-то причинам невозможна. В "альт" рекомендуют записывать именно то, что изображено на картинке. В общем случае, они разные. На практике часто совпадают.

    Пример 1.

    Прическа для онлайн одевалки TITLE: Прическа девы дождя
    ALT: Прическа для онлайн одевалки

    Пример 2.

    <!--IMG2_ALT-->Онлайн одевалка<!--IMG2_ALT--> TITLE: Иллюзавр-панк
    ALT: Иллюзавр-панк

    Кроме того, заполняя "alt" и "title" следует помнить ещё парочку важных деталей. Хорошо, если эти поля включают ключевые слова страницы. Полезно, когда они перекликаются (частично повторяют) окружающий текст. Это говорит поисковикам о том, что картинки и спрятанные в них "ключевики" соответствуют тексту, а не притянуты за уши только ради ключевых слов.

    Разместить картинку в тексте лучше одним из двух способов.

    1. По тексту. А точнее, в отдельном абзаце текста, да еще и отцентрировать его. Это хорошо смотрится, когда картинка по ширине больше половины ширины текста. Для этого просто вставляем код картинки, который выдал вам Юкоз: $IMAGEN$ (где N - это номер картинки). Он автоматически сгенерирует исходный код вместе с титлом и альтом, а также ссылкой на увеличение рисунка.
    2. Обтекание. Если картинка меньше половины ширины текста (для Полочки ширина текста фиксирована и составляет 500px), то лучше сделать обтекание, правое или левое. Для этого вставьте код в начале первой строки (по верху этой строки будет выровнен верхний край изображения), сам код нужно подправить вручную: $IMAGEN-left$ для отображения картинки слева от текста, $IMAGEN-right$ для отображения картинки права от текста.

    По правде говоря, я продолжаю "пляски с бубном". То ли потому что так привычнее, то ли в этом кроется тайный смысл, а именно наглядность и гибкость. Если вы обладаете правом редактировать материал (например, на своем собственном сайте), то вы сможете увидеть превьюшки загруженных изображений, когда нажмете на кнопку расширенных настроек.

    <!--IMG4_ALT-->Форма загрузки картинок: редактирование<!--IMG4_ALT-->

    А потом использовать визуальный редактор, чтобы картинки было видно и в тексте редактора. Плюс, можно подправить размеры рисунка средствами браузера, задав ширину (после заливки картинки ее физический размер изменить нельзя). Но всё это ручная работа.

    <!--IMG5_ALT-->наглядность картинок в видуальном редакторе<!--IMG5_ALT-->


    Добавляем картинки v2.2
    Еще по теме:
    Всего комментариев: 3
    avatar
    0
    3 Мирчаровец Komiko • 13:23, 21.01.2017
    О, теперь постараюсь не мучить модераторов"Полочки", отсылая неотформатированные статьи.
    avatar
    0
    2 aldeberskova • 10:42, 19.10.2016
    Статья очень понравилась. Я все хочу в плотную заняться изучением какого либо языка программирования. В наше время это актуально. У меня есть конечно ряд вопросов но как их правильно сформировать пока не знаю. Здесь я надеюсь найти вдохновение и научится чему-то новому.
    Ответ: Сформулируйте хоть как-то. Потому что уровень у всех разный, запросы и нереализованные задачи - тоже
    avatar
    0
    1 Мирчаровец sleiter • 14:17, 16.10.2016
    Замечательная статья,  я для себя много узнал wink
    avatar