Перейти к содержимому
  • Внедрение Яндекс.Карт на сайт

       (16 отзывов)

    Евгений Зубов
    • 55 4,25,6,20,3,26,27,28,29 4,6,32 https://creatura.club/uploads/monthly_2016_02/3.10.2_Primer_rabotyi_-_Vstavka_kartyi_YAndeks.mp4.451a4f88b6a0f33ac62ff9f4846d0708.mp4 4 До 5 минут display: none; https://creatura.club/uploads/ Высокая сложность display: none;
      1. Пройдите тестирование для урока
      2. Оцените урок и сдайте задание

      В этом уроке на примере добавления Яндекс.Карты на страницу в программе Adobe Muse мы рассмотрим добавление HTML-кода на страницу сайта. Заходим в программу, создаем новый проект и в режиме "Дизайн" мы можем добавить объект и вставить HTML. Сейчас у нас нет никакого кода HTML. Давайте зайдем на сайт Яндекса для того, чтобы сгенерировать код карты. Заходим в браузер на сайт yandex.ru и в поиске вводим "Конструктор карт". Переходим по самой первой ссылке и попадаем на конструктор карт. Яндекс сразу предлагает нам зарегистрироваться или войти. Далее Яндекс нам предлагает выбрать из списка карт либо создать новую карту.

      Давайте создадим новую карту, нажимаем на кнопку и открывается окно. Набираем адрес того объекта, на который будет ссылаться наша карта. Например, введем "Владимир, Россия", нажимаем "Найти". Здесь мы можем отредактировать, как будет выглядеть значок, который указывает на город. Далее можем немного подвинуть данную карту. В новой карте напишем название , например, просто название города и можем добавить описание. Далее нажимаем кнопку "Сохранить карту" и получить ссылку. После сохранения карты появляется окно с параметрами карты, где мы оставляем все по умолчанию. Далее можем указать размеры карты либо просто с помощью данных элементов управления растянуть ее до нужных размеров.

      Допустим, нужен размер 700 х 400. Далее нажимаем кнопку "Получить код карты" и появляется окно, где нам Яндекс выдает HTML-код для сайта. мы просто выделяем весь код, нажимаем правую кнопку мыши - "Копировать" и переходим в Muse. Здесь в разделе редактирования HTML блока вставляем данный код. Нажимаем правую кнопку мыши, затем "Вставить". Нажимаем ОК, и данная карта вставлена на страницу. Дальше может возникнуть вопрос о том, как сделать карту растянутой на всю ширину страницы.  Для этого заходим в "Перспектива" и выбираем "Растянуть по ширине браузера". При этом мы видим, что карта съехала влево. А если мы зайдем в режим "Просмотр", то увидим, что карта отображается только слева. Переходим снова в режим "Дизайн", выделяем данный элемент, кликаем правой кнопкой мыши, жмем "Редактировать HTML- код" и находим значение width =700&height=400. Так вот значение ширины выставляем 100% вместо 700, нажимаем ОК . Теперь вы видите, что карта растянулась на всю ширину страницы. И в режиме "Просмотр" карта также будет отображаться на всю страницу. Таким образом мы рассмотрели, как добавить карту Яндекса на свою страницу сайта с помощью добавления HTML кода на свою страницу. На эом урок закончен. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к следущему уроку.

    Вы увидите пример применения технологии HTML. Своими руками внедрите сторонние Яндекс.Карты на свой сайт используя возможность вставки своего кода. Научитесь управлять поведением.


      Жалоба


    Отзывы пользователей


    Слава Баранов

    Здорово

    Поделиться отзывом


    Ссылка на отзыв
    Genka

    +

    Поделиться отзывом


    Ссылка на отзыв
    Юлия+Коваль

    +1

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

    С картами ясно

    Поделиться отзывом


    Ссылка на отзыв
    Дмитрий Жуков

    Интересно.

    Поделиться отзывом


    Ссылка на отзыв
    Артем Литвин

    отлично, все понятно, спасибо!

    Поделиться отзывом


    Ссылка на отзыв
    Алексей

    Грамотно.

    Поделиться отзывом


    Ссылка на отзыв
    Андрей А

    Очень интересно!!

    Поделиться отзывом


    Ссылка на отзыв
    Валерий1234

    ОК

    Поделиться отзывом


    Ссылка на отзыв
    YanaZamkova

    все понятно

    Поделиться отзывом


    Ссылка на отзыв
    Sharovich

    Спасибо. Всё понятно.

    Поделиться отзывом


    Ссылка на отзыв
    gladir1

    Все понятно.

    Поделиться отзывом


    Ссылка на отзыв
    7dgoni6

    Спасибо.

    Поделиться отзывом


    Ссылка на отзыв

×