X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Inserción de un mapa de Google en una Div PA en Dreamweaver CS5
Traducido por Google Translate

Todos hemos utilizado, sin duda una excelente instalación Mapa de Google para buscar localizaciones. ¿No sería genial poder usarlos para ayudar a la gente a encontrar sus lugares, también? Es más, ¿no sería aún mayor si para ello no tenían que dejar la comodidad de su página web? Realmente es muy sencillo de hacer en Dreamweaver .


Paso 1 - Preparación de las Bases

En Dreamweaver voy a crear una nueva página para esto: Archivo

New Page.

Nueva página.


En la página que voy a empezar por crear una Div PA para mantener mi mapa en la página. Primero asegúrese de que su punto de vista de página se establece diseñador para que pueda ver la página actual.

Design View Button.

Diseño de botones de vista.


Desde el panel de Insertar escoja comunes como la categoría y seleccione "Dibujar Div PA.

Draw AP Div button.

En el botón Dibujar Div PA.


Que el cursor se muestran ahora en una cruz, con la cruz dibujar una caja en algún lugar de la página. Trate de hacer que el tamaño que le gustaría ver a su mapa. Que pueden ser ajustados después.

AP Element on screen.

AP elemento en la pantalla.


Este cuadro contiene el mapa. La razón por la que han creado esta caja de texto para el mapa es la facilidad con la que se puede modificar. Agarrar el pequeño cuadrado blanco en la esquina superior izquierda del cuadro me permite cambiar la posición de la caja en cualquier lugar.

En el panel Propiedades las propiedades de la Div. será mostrado. Cambiar el ID de "MapBox" y establecer la W

Properties Panel.

Propiedades del panel.


Paso 2 - Insertar el mapa

Utilice su navegador web para buscar una ubicación utilizando Google Maps. He buscado por la Oficina de Capacitación que uso en Glasgow.

Glasgow Google Map.

Glasgow Google Map.


En el mapa de Google hay algunos iconos pequeños en la esquina superior derecha. Al hacer clic en el enlace que se llama se abrirá.

Goole map link button.

Google Map botón de enlace.


Seleccione todo el código dentro de la casilla "Pegar HTML para incrustar en el sitio web" y copiarlo.

Sugerencia: Haga clic tres veces en sucesión rápida en el código para seleccionar todo, y luego copiar (Comando-C) para asegurarse de que no se pierda ninguna.

Google Map Insert Code.

Google Map Código Insertar.


Este código permitirá la re-visualización de esta página con el mapa de Google completamente interactivo de su ubicación dentro de la Div PA utilizando un iframe (marco de inserción).

Para insertar este código en nuestra MapBox Div PA en Dreamweaver, péguelo en la vista Código entre los

Sugerencia: La forma más fácil de asegurarse de que el código se inserta en la ubicación correcta es cambiar a la vista Diseño y haga clic en el interior de la Div. MapBox AP en la página de modo que el cursor se encuentra dentro de la

Code View Cursor.

Código de cursor de la vista.


Cambiar a la Vista dividida para ver el diseño y el código. El cursor se pondrá intermitente entre las etiquetas div correcta apertura y cierre y puede pegar el código (Comando-V).


Paso 3 - Vista previa

Encienda el Live View en Dreamweaver y el mapa interactivo aparecerá en la página dentro de su Div. MapBox.

Map Page.

Mapa de la página.


Siempre se puede utilizar el panel Propiedades para cambiar el tamaño de la Div. MapBox si es necesario, sólo asegúrese de cambiar la vista en vivo para que fuera de los parámetros.

Si te apetece un reto más difícil que usted también puede usar Cascading Style Sheets (CSS) para formatear el MapBox con bordes, fondos, etc, pero eso es para otro artículo.


Learn more about Dreamweaver here.


David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

Aug 15, 2011
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.
Sep 02, 2011
David Smith
You are absolutely right Skye, thank-you
Aug 08, 2012
Dear author,

I want to express my sincere thanks of this useful article.
Aug 27, 2012
David Smith
Thank-you
Apr 04, 2013
elisabetta
grazie
Apr 05, 2013
David Smith
Prego
Jun 18, 2013
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.
Aug 15, 2013
Dennis
Thank you so much. I have bookmarked your page for future reference. Valuable info!
You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link