All Articles Dreamweaver
Inserimento di una mappa di Google in un Div PA in 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.

Tutti abbiamo alcun dubbio utilizzati struttura eccellente Mappa di Google a cercare posizioni. Non sarebbe bello essere in grado di usarli per aiutare le persone a trovare le posizioni, anche tu? Cosa c'è di più, non sarebbe ancora maggiore se a fare che non hanno dovuto lasciare la comodità della vostra pagina web? E 'davvero molto semplice da fare in Dreamweaver .


Fase 1 - Preparazione della Fondazione

In Dreamweaver ho intenzione di creare una nuova pagina per questo: File

New Page.

Nuova pagina.


Nella pagina che sto per iniziare la creazione di un Div PA di tenere mia mappa nella pagina. Prima di tutto assicuratevi che il vostro punto di vista della pagina è impostata a Progettazione in modo da poter vedere la pagina effettiva.

Design View Button.

Design View pulsante.


Dal Pannello di scegliere Insert comune come la categoria e seleziona 'Disegna Div PA'.

Draw AP Div button.

Disegna pulsante Div PA.


Cursore si mostrerà una croce, con il mirino disegnare una casella da qualche parte nella pagina. Provate a fare la grandezza che si desidera vedere la mappa visualizzata. Si può essere modificato in seguito.

AP Element on screen.

Elemento AP sullo schermo.


Questa finestra contiene la mappa. La ragione per cui ho creato questa casella per la mappa è la facilità con cui posso modificare. Afferrando il quadratino bianco nell'angolo in alto a sinistra della finestra mi permette di riposizionare la casella da nessuna parte.

Nel pannello Proprietà proprietà Div. sarà visualizzato. Modificare l'ID di 'MapBox' e impostare il W

Properties Panel.

Proprietà del pannello.


Fase 2 - Inserimento della mappa

Utilizzare il browser web per cercare una località utilizzando Google Maps. Ho cercato la formazione di Office che uso a Glasgow.

Glasgow Google Map.

Glasgow Google Map.


Sulla mappa di Google ci sono alcune piccole icone in alto a destra. Cliccando sul link quella chiamata lo aprirà.

Goole map link button.

Google Map collegamento pulsante.


Seleziona tutto il codice all'interno della casella "Incolla HTML da incorporare nel sito web" e copiarlo.

Suggerimento: fare clic 3 volte in rapida successione sul codice per selezionare tutto, quindi copiare (Comando-C) per essere sicuri di non perdere nessuna.

Google Map Insert Code.

Google Map Inserisci Codice.


Questo codice permetterà la ri-visualizzazione di questa pagina con la mappa interattiva di Google della vostra posizione all'interno del Div PA utilizzando un iframe (frame inserire).

Per inserire questo codice nel nostro MapBox Div PA in Dreamweaver, incollarlo nella visualizzazione del codice tra i

Suggerimento: Il modo più semplice per assicurarsi che il codice viene inserito nella posizione corretta è quella di passare alla visualizzazione Progettazione e fare clic all'interno della Div. MapBox AP sulla pagina in modo che il cursore lampeggiante si trova all'interno del

Code View Cursor.

Visualizza codice Cursore.


Passa a Split View per vedere sia la progettazione e il codice. Il cursore sarà ora lampeggiamento tra i tag corretti div aperti e chiusi e si può incollare il codice (Comando-V).


Fase 3 - Anteprima

Accendere il Live View di Dreamweaver e la mappa interattiva apparirà sulla pagina all'interno del vostro Div. MapBox.

Map Page.

Pagina Mappa.


È sempre possibile utilizzare il pannello Proprietà per ridimensionare la Div. MapBox, se necessario, basta assicurarsi di passare il Live View off per abilitare i parametri.

Se avete voglia di una sfida più difficile poi è anche possibile utilizzare Cascading Style Sheets (CSS) per formattare il MapBox con bordi, sfondi, ecc, ma questo è un altro articolo.


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: