All Articles Dreamweaver
Вставка карты Google в Div AP в Dreamweaver CS5
David Smith on Mon, August 15th | 8 comments
Integrating GoogleMaps in to your website is all the rage in the web design world. It's also quite straightforward to do in Dreamweaver. David Smith, Authorised Adobe Trainer, shows you how.

Мы все, несомненно, использовал отличный объект карты Google, чтобы искать места. Не было бы здорово иметь возможность использовать их, чтобы помочь людям найти свой местах, тоже? Более того, не было бы еще больше, если делать, что они не должны оставить комфорт вашего веб-страницу? Это действительно очень просто сделать в Dreamweaver .


Шаг 1 - Подготовка Земляные работы

В Dreamweaver Я собираюсь создать новую страницу для этого: File

New Page.

New Page.


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

Design View Button.

Кнопка конструктора.


С Вставить группы выбирают в качестве общей категории и выберите пункт "Ничья AP Div.

Draw AP Div button.

Ничья AP Div кнопку.


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

AP Element on screen.

А. П. элемент на экране.


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

В панели свойств свойствам Div будет отображаться. Изменение идентификатора 'MapBox' и установить W

Properties Panel.

Свойства панели.


Шаг 2 - Вставка карты

Используйте свой веб-браузер для поиска местоположения с помощью Google Maps. Я отыскал Обучение Управления которые я использую в Глазго.

Glasgow Google Map.

Глазго Google Map.


На карте Google Есть некоторые маленькие иконки в верхнем правом углу. Нажав на один называется ссылка откроет его.

Goole map link button.

Google Map ссылку кнопки.


Выделите весь код внутри коробки с маркировкой "Вставьте код HTML для использования на сайте" и скопируйте его.

Совет: Нажмите три раза подряд на код, чтобы выбрать все, затем скопируйте (Ctrl-C), чтобы убедиться, что вы не пропустите ни одной.

Google Map Insert Code.

Google Map Вставить код.


Этот код даст возможность повторного отображения этой страницы с полностью интерактивной карте Google от вашего местоположения внутри Div AP использованием IFRAME (вставить кадр).

Чтобы вставить этот код в наш AP Div MapBox в Dreamweaver, вставьте его в представлении кода между

Подсказка: самый простой способ убедиться, что код вставляется в нужном месте, чтобы переключиться в режим конструктора и нажмите внутри Div MapBox AP на странице, так что мигающий курсор находится внутри

Code View Cursor.

Курсор кода.


Переключение в Сплит, чтобы увидеть как дизайн и код. Курсор начнет мигать между правильным открытые и закрытые теги дел, и вы можете вставить код (Ctrl-V).


Шаг 3 - Предварительный просмотр

Включите режим Live View в Dreamweaver и интерактивная карта появится на страницу внутри вашего MapBox Div.

Map Page.

Страница карты.


Вы всегда можете использовать панель свойств для изменения размера MapBox Div, если требуется, просто убедитесь, что вы переключаться в режиме Live View с для того, чтобы параметры.

Если Вы представляете себе сложнее задача, то вы можете также использовать Cascading Style Sheets (CSS) для форматирования MapBox с границами, фонов и т.д., но это уже для другой статьи.


Learn more about Dreamweaver here.


Comments (8)

You must be logged in to comment. Login Now

  • Dennis
    Thank you so much. I have bookmarked your page for future reference. Valuable info!
    • 5 years ago
    • By: Dennis
    Reply
  • Skye
    For non Dreamweaver users, just a note that an AP Div is just a div with absolute positioning (AP). If you look at the source code image you can see the absolute positioning style that Dreamweaver has applied to the div.
    • 7 years ago
    • By: Skye
    Reply
  • David Smith
    You are absolutely right Skye, thank-you
    • 7 years ago
    • By: David Smith
    Reply
  • Dear author, I want to express my sincere thanks of this useful article.
    • 6 years ago
    • By:
    Reply
  • David Smith
    Thank-you
    • 6 years ago
    • By: David Smith
    Reply
  • elisabetta
    grazie
    • 6 years ago
    • By: elisabetta
    Reply
  • David Smith
    Prego
    • 6 years ago
    • By: David Smith
  • Sandra
    Hello there, I need some help. I want to create a structure with 4 frames: Left, Top, Main and Right. In the top frame I have a Banner, in a table, and I want to insert a Spry Menu Bar. The problem is, if I want in that Spry a Vertical Menu it doesn't shows up in the main frame. How do I make it visible? Best regards.
    • 5 years ago
    • By: Sandra
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: