X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Inserimento di una mappa di Google in un Div PA in Dreamweaver CS5
Tradotto da Google Translate

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.


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